diff --git a/packages/tokens/stories/2_Spacings.mdx b/packages/tokens/stories/2_Spacings.mdx index 774e8d69e4..3542c237fd 100644 --- a/packages/tokens/stories/2_Spacings.mdx +++ b/packages/tokens/stories/2_Spacings.mdx @@ -1,22 +1,26 @@ import { Meta } from '@storybook/blocks' +import Table from './components/Table.jsx' - + # 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)` | + diff --git a/packages/tokens/stories/3_Typography.mdx b/packages/tokens/stories/3_Typography.mdx index 9505de56f4..0a0d493370 100644 --- a/packages/tokens/stories/3_Typography.mdx +++ b/packages/tokens/stories/3_Typography.mdx @@ -1,6 +1,7 @@ import { Meta, Typeset } from '@storybook/blocks' +import Table from './components/Table.jsx' - + # Typography @@ -26,7 +27,7 @@ All typography tokens available in the design system. '46px', '52px', ]} - sampleText="Atomium is the best!" + sampleText='Atomium is the best!' /> ## Using @@ -35,31 +36,40 @@ Tokens could be used as CSS Variables or CSS Classes. ### Variable values -| Variable | Font weight | font-size/line-height | Mobile | Letter Spacing | -| -------------------------- | ----------- | --------------------- | --------- | -------------- | -| `--title-giant` | 700 | 52px/68px | 30px/40px | 0.25% | -| `--title-display` | 700 | 46px/60px | 28px/36px | 0.25% | -| `--title-headline-xxlarge` | 700 | 42px/56px | 26px/36px | 0.25% | -| `--title-headline-xlarge` | 700 | 36px/48px | 25px/32px | 0.25% | -| `--title-headline-large` | 700 | 32px/40px | 24px/32px | 0.25% | -| `--title-headline-medium` | 700 | 28px/36px | 22px/28px | 0.15% | -| `--title-headline-small` | 700 | 26px/36px | 20px/28px | 0.15% | -| `--title-headline-xsmall` | 700 | 22px/28px | 19px/24px | 0.15% | -| `--text-subtitle-large` | 700 | 20px/28px | 18px/24px | 0.15% | -| `--text-subtitle-medium` | 700 | 18px/24px | 16px/20px | 0.1% | -| `--text-body-large` | 400 | 18px/28px | 18px/28px | 0.5% | -| `--text-body-medium` | 400 | 16px/24px | 16px/24px | 0.5% | -| `--text-body-small` | 400 | 14px/24px | 14px/24px | 0.25% | -| `--text-link-large` | 700 | 18px/28px | 18px/28px | 0.5% | -| `--text-link-medium` | 700 | 16px/24px | 16px/24px | 0.5% | -| `--text-link-small` | 700 | 14px/24px | 14px/24px | 0.25% | -| `--button-large` | 700 | 18px/28px | 18px/28px | 8% | -| `--button-medium` | 700 | 16px/24px | 16px/24px | 8% | -| `--button-small` | 700 | 14px/20px | 14px/20px | 8% | -| `--text-caption` | 400 | 12px/20px | 14px/24px | 0.4% | -| `--text-caption-focused` | 700 | 12px/20px | 14px/24px | 0.4% | -| `--text-overline` | 400 | 11px/20px | 13px/20px | 16% | -| `--text-badge` | 700 | 10px/16px | 12px/20px | 4% | +
#### !important @@ -69,13 +79,17 @@ All the `letter-spacing` variable is the font + letter, example: `var(--title-gi ### Font family -| Variable | Value | -| -------------------- | --------------------- | -| `var(--font-family)` | 'Roboto', sans-serif' | +
### Font weight -| Variable | Value | -| ---------------------------- | ----- | -| `var(--font-weight-regular)` | 400 | -| `var(--font-weight-bold)` | 700 | +
diff --git a/packages/tokens/stories/4_Screens.mdx b/packages/tokens/stories/4_Screens.mdx index 85034d4a92..3149ab0d91 100644 --- a/packages/tokens/stories/4_Screens.mdx +++ b/packages/tokens/stories/4_Screens.mdx @@ -1,34 +1,42 @@ import { Meta } from '@storybook/blocks' +import Table from './components/Table.jsx' - + # 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 | +
= 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)` | +
We also has a variable to define the max size of containers. -| Size | Variable | -| ------ | ----------------------------- | -| 1136px | `var(--screen-max-container)` | +
diff --git a/packages/tokens/stories/5_Grid.mdx b/packages/tokens/stories/5_Grid.mdx index 01920bf770..e574a43c7b 100644 --- a/packages/tokens/stories/5_Grid.mdx +++ b/packages/tokens/stories/5_Grid.mdx @@ -1,6 +1,7 @@ import { Meta } from '@storybook/blocks' +import Table from './components/Table.jsx' - + # Grid @@ -8,19 +9,25 @@ The [default grid system](/docs/components-grid--docs) is based on a `16` column ## Tokens -| Variable | Value | -| --------------------- | --------------------- | -| `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 | +
diff --git a/packages/tokens/stories/6_Misc.mdx b/packages/tokens/stories/6_Misc.mdx index 5d627887d7..eb538e65a9 100644 --- a/packages/tokens/stories/6_Misc.mdx +++ b/packages/tokens/stories/6_Misc.mdx @@ -1,7 +1,8 @@ import { Meta } from '@storybook/blocks' import { Box, BoxList } from './components/Box.jsx' +import Table from './components/Table.jsx' - + # Miscellaneous @@ -11,12 +12,31 @@ In our Design System, most components have rounded edges. Depending on the size ### Variants -| value | Variable | Description | -| ----- | ----------------------------- | ------------------------------------------------------------------------------------------------------------- | -| 4px | `var(--border-radius)` | Used in smaller components like tooltips, alerts, text fields. | -| 8px | `var(--border-radius-medium)` | Used in larger components like dialogs, cards and dropdown menu. | -| 12px | `var(--border-radius-large)` | Depending on the context, the this border radius can also be used on larger components like cards and images. | -| 50% | `var(--border-radius-full)` | The fully rounded edge is used for specific components like buttons, badges and avatars. | +
### Usage @@ -27,9 +47,9 @@ This token must be used **only** with `border-radius` CSS property. - + - + @@ -38,18 +58,22 @@ This token must be used **only** with `border-radius` CSS property. The default `transition-duration` for all transitions -| value | Variable | -| ----- | ---------------------------- | -| 0.25s | `var(--transition-duration)` | +
## z-index All `z-index` variables to keep consistency -| value | Variable | -| ----- | ----------------------- | -| 1 | `var(--zindex-1)` | -| 10 | `var(--zindex-10)` | -| 100 | `var(--zindex-100)` | -| 1000 | `var(--zindex-1000)` | -| 10000 | `var(--zindex-overlay)` | +
diff --git a/packages/tokens/stories/7_Elevation.mdx b/packages/tokens/stories/7_Elevation.mdx index 41bac1bd56..99231181e5 100644 --- a/packages/tokens/stories/7_Elevation.mdx +++ b/packages/tokens/stories/7_Elevation.mdx @@ -1,7 +1,8 @@ import { Meta } from '@storybook/blocks' import { Box, BoxList } from './components/Box.jsx' +import Table from './components/Table.jsx' - + # Elevation @@ -11,16 +12,45 @@ Elevation indicates how far the interface elements are from the surface and dete To get a more natural shadow effect, we use overlapping of two or more shadows on each token. Elevation values range from 0 to 8dp, as shown in the table below: -| Value | Variable | -| ----------------------------------------------------------------------------------------------------- | -------------------- | -| 0px 1px 1px rgba(0, 0, 0, 0.14) | `var(--elevation-1)` | -| 0px 1px 5px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.14) | `var(--elevation-2)` | -| 0px 1px 10px rgba(0, 0, 0, 0.12), 0px 4px 5px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.2) | `var(--elevation-3)` | -| 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 3px 5px rgba(0, 0, 0, 0.2) | `var(--elevation-4)` | -| 0px 5px 22px rgba(0, 0, 0, 0.12), 0px 12px 17px rgba(0, 0, 0, 0.14), 0px 7px 8px rgba(0, 0, 0, 0.2) | `var(--elevation-5)` | -| 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14), 0px 8px 10px rgba(0, 0, 0, 0.2) | `var(--elevation-6)` | -| 0px 8px 38px rgba(0, 0, 0, 0.12), 0px 20px 31px rgba(0, 0, 0, 0.14), 0px 10px 13px rgba(0, 0, 0, 0.2) | `var(--elevation-7)` | -| 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14), 0px 11px 15px rgba(0, 0, 0, 0.2) | `var(--elevation-8)` | +
## Usage @@ -38,17 +68,17 @@ filter: drop-shadow(var(--elevation-8)); - + - + - + - + - + - + diff --git a/packages/tokens/stories/components/Box.jsx b/packages/tokens/stories/components/Box.jsx index 673e7a6f89..124e8c0005 100644 --- a/packages/tokens/stories/components/Box.jsx +++ b/packages/tokens/stories/components/Box.jsx @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-unused-vars import React, { Children } from 'react' export const Box = ({ elevation, borderRadius }) => { diff --git a/packages/tokens/stories/components/Table.jsx b/packages/tokens/stories/components/Table.jsx new file mode 100644 index 0000000000..55c276f54b --- /dev/null +++ b/packages/tokens/stories/components/Table.jsx @@ -0,0 +1,25 @@ +// eslint-disable-next-line no-unused-vars +import React from 'react' + +const Table = ({ headers, rows }) => ( +
+ + + {headers.map((header, index) => ( + + ))} + + + + {rows.map((row, rowIndex) => ( + + {row.map((cell, cellIndex) => ( + + ))} + + ))} + +
{header}
{cell}
+) + +export default Table