Skip to content

Commit

Permalink
docs: Typography, Color, Breakpoints (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
@arturbien
arturbien authored Dec 7, 2023
1 parent 5a204e6 commit 94dcdf2
Show file tree
Hide file tree
Showing 23 changed files with 387 additions and 475 deletions.
76 changes: 76 additions & 0 deletions packages/frosted-ui/.storybook/stories/01.GettingStarted.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Meta } from '@storybook/blocks';

<Meta title="Guides/1. Getting started" />

# Getting Started

### 1. Install Frosted UI

`pnpm add frosted-ui`

### 2. Import the CSS file

Import the global CSS file at the root of your application.

```tsx
import 'frosted-ui/styles.css';
```

### 3. Add the Theme component

Add `Theme` to your application, wrapping the root component inside of body.

```tsx
import { Theme } from 'frosted-ui';

export default function () {
return (
<html>
<body>
<Theme>
<MyApp />
</Theme>
</body>
</html>
);
}
```

### 4. Start building

You are now ready to use Frosted UI components!

```tsx
import { Flex, Heading, Button } from 'frosted-ui';

export default function MyApp() {
return (
<Flex direction="column" gap="2">
<Heading>Frosted UI</Heading>
<Button>Start building</Button>
</Flex>
);
}
```

## Customizing your theme

Configuration is managed and applied via the `<Theme />` component.

```tsx
<Theme
// Sets Light or Dark mode
appearance="dark"
// Neutral color of the UI
grayColor="slate"
// Accent color (mainly used as a default color for interactive elements)
accentColor="iris"
// Semantic colors
infoColor="sky"
successColor="green"
warningColor="yellow"
dangerColor="red"
>
{children}
</Theme>
```
223 changes: 223 additions & 0 deletions packages/frosted-ui/.storybook/stories/02.Typography.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
import { Meta } from '@storybook/blocks';

<Meta title="Guides/2. Typography" />

# Typography

Components like `<Heading />` and `<Text />` and used to render titles and body copy respectively.
Both of them share the same size and weight props to enforce consistent typography in your app.

## Typography scale

The typography scale is a 9 step scale where each step has it's corresponding font-size, line-height and letter-spacing value.

<table>
<tr>
<td>Step</td>
<td>Size</td>
<td>Letter spacing</td>
<td>Line height</td>
</tr>
<tr>
<td>1</td>
<td>12px</td>
<td>0.0025em</td>
<td>16px</td>
</tr>
<tr>
<td>2</td>
<td>14px</td>
<td>0em</td>
<td>20px</td>
</tr>
<tr>
<td>3</td>
<td>16px</td>
<td>0em</td>
<td>24px</td>
</tr>
<tr>
<td>4</td>
<td>18px</td>
<td>-0.0025em</td>
<td>26px</td>
</tr>
<tr>
<td>5</td>
<td>20px</td>
<td>-0.005em</td>
<td>28px</td>
</tr>
<tr>
<td>6</td>
<td>24px</td>
<td>-0.00625em</td>
<td>30px</td>
</tr>
<tr>
<td>7</td>
<td>28px</td>
<td>-0.0075em</td>
<td>36px</td>
</tr>
<tr>
<td>8</td>
<td>35px</td>
<td>-0.01em</td>
<td>40px</td>
</tr>
<tr>
<td>9</td>
<td>60px</td>
<td>-0.025em</td>
<td>60px</td>
</tr>
</table>

## Weight scale

The weight scale is a 4 step scale where each step has it's corresponding font-weight value.

<table>
<tr>
<td>Weight</td>
<td>Default value</td>
</tr>
<tr>
<td>Light</td>
<td>300</td>
</tr>
<tr>
<td>Regular</td>
<td>400</td>
</tr>
<tr>
<td>Medium</td>
<td>500</td>
</tr>
<tr>
<td>Bold</td>
<td>700</td>
</tr>
</table>

## Font families

<table>
<tr>
<td>Type</td>
<td>Default value</td>
</tr>
<tr>
<td>Text, Heading</td>
<td>
-apple-system, BlinkMacSystemFont, &#39;Segoe UI (Custom)&#39;, Roboto,
&#39;Helvetica Neue&#39;, &#39;Open Sans (Custom)&#39;, system-ui,
sans-serif, &#39;Apple Color Emoji&#39;, &#39;Segoe UI Emoji&#39;
</td>
</tr>
<tr>
<td>Code</td>
<td>
&#39;Menlo&#39;, &#39;Consolas (Custom)&#39;, &#39;Bitstream Vera Sans
Mono&#39;, monospace, &#39;Apple Color Emoji&#39;, &#39;Segoe UI
Emoji&#39;
</td>
</tr>
<tr>
<td>Emphasis</td>
<td>&#39;Times New Roman&#39;, &#39;Times&#39;, serif</td>
</tr>
<tr>
<td>Quote</td>
<td>&#39;Times New Roman&#39;, &#39;Times&#39;, serif</td>
</tr>
</table>

To change the default fonts just override the following CSS variables:

```css
.frosted-ui {
--heading-font-family: 'Adobe Text Pro', serif;
--default-font-family: 'Inter', sans-serif;
--strong-font-family: 'Inter', sans-serif;
--em-font-family: 'Inter', sans-serif;
--quote-font-family: 'Inter', sans-serif;
--code-font-family: 'Fira Code', monospace;
}
```

### Self hosted fonts

You can use self-hosted fonts by downloading font files and adding them to your project.
Then define the named font styles and weights by using `@font-face`.

```css
@font-face {
font-family: 'Inter';
src: url('./inter-light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Inter';
src: url('./inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Inter';
src: url('./inter-medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Inter';
src: url('./inter-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
```

Then you can override the default font family in CSS in the following way:

```css
.frosted-ui {
--default-font-family: 'Inter', sans-serif;
}
```

### Custom fonts with `next/font`

To load fonts using [next/font](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts),
you can specify a CSS variable name and assign it to the 'inter' font.
Then, you can use `inter.variable` to add the CSS variable to your HTML document.

```tsx
import { Inter } from 'next/font/google';

const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});

export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body>{children}</body>
</html>
);
}
```

Then, just override the CSS variable in your CSS:

```css
.frosted-ui {
--default-font-family: var(--font-inter), sans-serif;
}
```
17 changes: 17 additions & 0 deletions packages/frosted-ui/.storybook/stories/03.Color.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { Meta } from '@storybook/blocks';

<Meta title="Guides/3. Color" />

# Color system

The color palette system used in Frosted UI is the [Radix Colors](https://www.radix-ui.com/colors) system.

There is a number of 12 step color scales available, each with their own light, dark and alpha variants.

Colors are grouped into 3 categories: `accents`, `grays`, and `semantic` (info, success, warning, danger).
All of these can be specified on your `<Theme />`, or per component where appropriate.

## Understanding the scale

To understand how the scale works and what's the main use case for each color step,
please refer to this detailed explanation of the [Radix Colors scale](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale) system.
65 changes: 65 additions & 0 deletions packages/frosted-ui/.storybook/stories/04.Breakpoints.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Meta } from '@storybook/blocks';

<Meta title="Guides/4. Breakpoints" />

# Breakpoints

Breakpoints allow you to build responsive layouts based on different screen sizes.

## Available breakpoints

Breakpoints are `min-width` based (mobile-first) and apply when the screen width is equal or greater than given breakpoint.

<table>
<tr>
<td>Size</td>
<td>Screen</td>
<td>Width</td>
</tr>
<tr>
<td>initial</td>
<td>Phones (portrait)</td>
<td>0px</td>
</tr>
<tr>
<td>xs</td>
<td>Phones (landscape)</td>
<td>520px</td>
</tr>
<tr>
<td>sm</td>
<td>Tablets (portrait)</td>
<td>768px</td>
</tr>
<tr>
<td>md</td>
<td>Tablets (landscape)</td>
<td>1024px</td>
</tr>
<tr>
<td>lg</td>
<td>Laptops</td>
<td>1280px</td>
</tr>
<tr>
<td>xl</td>
<td>Desktops</td>
<td>1640px</td>
</tr>
</table>

## Usage

Most component size and layout props will accept additional `Responsive` object for modifying the given prop across breakpoints.

Each size maps to a corresponding key, the value of each will be applied when the screen size is greater than or equal to the named breakpoint.

```tsx
<Heading
size={{
initial: '3',
md: '5',
xl: '7',
}}
/>
```
2 changes: 1 addition & 1 deletion ...rosted-ui/.storybook/stories/Tailwind.mdx → ...ted-ui/.storybook/stories/05.Tailwind.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Meta } from '@storybook/blocks';

<Meta title="Tailwind plugin" />
<Meta title="Guides/5. Tailwind plugin" />

# Tailwind plugin

Expand Down
Loading

0 comments on commit 94dcdf2

Please sign in to comment.