-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(docs): adjust tokens table doc (#705)
- Loading branch information
1 parent
8c4bea9
commit 9fa4ba8
Showing
8 changed files
with
231 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,26 @@ | ||
| import { Meta } from '@storybook/blocks' | ||
| import Table from './components/Table.jsx' | ||
|
|
||
| <Meta title="Tokens/Spacings" /> | ||
| <Meta title='Tokens/Spacings' /> | ||
|
|
||
| # Spacings | ||
|
|
||
| All spacings are defined as `--spacing-*` CSS variables. | ||
|
|
||
| | Size | Variable | | ||
| | ---- | -------------------------- | | ||
| | 4px | `var(--spacing-xxsmall)` | | ||
| | 8px | `var(--spacing-xsmall)` | | ||
| | 12px | `var(--spacing-small)` | | ||
| | 16px | `var(--spacing-base)` | | ||
| | 20px | `var(--spacing-medium)` | | ||
| | 24px | `var(--spacing-large)` | | ||
| | 28px | `var(--spacing-xlarge)` | | ||
| | 32px | `var(--spacing-xxlarge)` | | ||
| | 40px | `var(--spacing-xxxlarge)` | | ||
| | 48px | `var(--spacing-xxxxlarge)` | | ||
| | 64px | `var(--spacing-giant)` | | ||
| | 80px | `var(--spacing-xgiant)` | | ||
| <Table | ||
| headers={['Size', 'Variable']} | ||
| rows={[ | ||
| ['4px', 'var(--spacing-xxsmall)'], | ||
| ['8px', 'var(--spacing-xsmall)'], | ||
| ['12px', 'var(--spacing-small)'], | ||
| ['16px', 'var(--spacing-base)'], | ||
| ['20px', 'var(--spacing-medium)'], | ||
| ['24px', 'var(--spacing-large)'], | ||
| ['28px', 'var(--spacing-xlarge)'], | ||
| ['32px', 'var(--spacing-xxlarge)'], | ||
| ['40px', 'var(--spacing-xxxlarge)'], | ||
| ['48px', 'var(--spacing-xxxxlarge)'], | ||
| ['64px', 'var(--spacing-giant)'], | ||
| ['80px', 'var(--spacing-xgiant)'], | ||
| ]} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,42 @@ | ||
| import { Meta } from '@storybook/blocks' | ||
| import Table from './components/Table.jsx' | ||
|
|
||
| <Meta title="Tokens/Screens" /> | ||
| <Meta title='Tokens/Screens' /> | ||
|
|
||
| # Screens | ||
|
|
||
| All breakpoints used in our projects. | ||
|
|
||
| | Range | Screens | | ||
| | -------------- | ----------- | | ||
| | 0 - 575px | Extra Small | | ||
| | 576px - 767px | Small | | ||
| | 768px - 991px | Medium | | ||
| | 992px - 1199px | Large | | ||
| | >= 1200px | Extra Large | | ||
| <Table | ||
| headers={['Range', 'Screens']} | ||
| rows={[ | ||
| ['0 - 575px ', 'Extra Small'], | ||
| ['576px - 767px', 'Small'], | ||
| ['768px - 991px', 'Medium'], | ||
| ['992px - 1199px', 'Large'], | ||
| ['>= 1200px', 'Extra Large'], | ||
| ]} | ||
| /> | ||
|
|
||
| ## Variables | ||
|
|
||
| | Size | Variable | | ||
| | ------ | ------------------- | | ||
| | 576px | `var(--screen-xs)` | | ||
| | 768px | `var(--screen-sm)` | | ||
| | 992px | `var(--screen-md)` | | ||
| | 1200px | `var(--screen-lg)` | | ||
| | 1440px | `var(--screen-xlg)` | | ||
| | 1920px | `var(--screen-fhd)` | | ||
| | 2048px | `var(--screen-2k)` | | ||
| | 3840px | `var(--screen-4k)` | | ||
| <Table | ||
| headers={['Size', 'Variable']} | ||
| rows={[ | ||
| ['576px', 'var(--screen-xs)'], | ||
| ['768px', 'var(--screen-sm)'], | ||
| ['992px', 'var(--screen-md)'], | ||
| ['1200px', 'var(--screen-lg)'], | ||
| ['1440px', 'var(--screen-xlg)'], | ||
| ['1920px', 'var(--screen-fhd)'], | ||
| ['2048px', 'var(--screen-2k)'], | ||
| ['3840px', 'var(--screen-4k)'], | ||
| ]} | ||
| /> | ||
|
|
||
| We also has a variable to define the max size of containers. | ||
|
|
||
| | Size | Variable | | ||
| | ------ | ----------------------------- | | ||
| | 1136px | `var(--screen-max-container)` | | ||
| <Table | ||
| headers={['Size', 'Variable']} | ||
| rows={[['1136px', 'var(--screen-max-container)']]} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,33 @@ | ||
| import { Meta } from '@storybook/blocks' | ||
| import Table from './components/Table.jsx' | ||
|
|
||
| <Meta title="Tokens/Grid" /> | ||
| <Meta title='Tokens/Grid' /> | ||
|
|
||
| # Grid | ||
|
|
||
| The [default grid system](/docs/components-grid--docs) is based on a `16` column grid with a `16px` gutter. | ||
|
|
||
| ## Tokens | ||
|
|
||
| | Variable | Value | | ||
| | --------------------- | --------------------- | | ||
| | `var(--grid-gap)` | `var(--spacing-base)` | | ||
| | `var(--grid-columns)` | `12` | | ||
| <Table | ||
| headers={['Variable', 'Value']} | ||
| rows={[ | ||
| ['var(--grid-gap)', 'var(--spacing-base)'], | ||
| ['var(--grid-columns)', '12'], | ||
| ]} | ||
| /> | ||
|
|
||
| ## Grid Patterns | ||
|
|
||
| You could check our [screen sizes here](/docs/tokens-screen-sizes--docs). | ||
|
|
||
| | Breakpoint | Container | Columns | Gutter | External Margin | | ||
| | ----------- | ---------------- | ------- | ------ | --------------- | | ||
| | Extra Small | Fluid | 4 | 8px | 16px | | ||
| | Small | Fluid | 8 | 8px | 16px | | ||
| | Medium | Fluid | 8 | 24px | 16px | | ||
| | Large | Fluid | 16 | 32px | 16px | | ||
| | Extra Large | Fixed (`1136px`) | 16 | auto | 16px | | ||
| <Table | ||
| headers={['Breakpoint', 'Container', 'Columns', 'Gutter', 'External Margin']} | ||
| rows={[ | ||
| ['Extra Small', 'Fluid', '4', '8px', '16px'], | ||
| ['Small', 'Fluid', '8', '8px', '16px'], | ||
| ['Medium', 'Fluid', '8', '24px', '16px'], | ||
| ['Large', 'Fluid', '16', '32px', '16px'], | ||
| ['Extra Large', 'Fixed (1136px)', '16', 'auto', '16px'], | ||
| ]} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.