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) => (
+ {header} |
+ ))}
+
+
+
+ {rows.map((row, rowIndex) => (
+
+ {row.map((cell, cellIndex) => (
+ {cell} |
+ ))}
+
+ ))}
+
+
+)
+
+export default Table