Skip to content

docs(theme): embed new token documentation #2606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
spike-rabbit wants to merge 1 commit into
base: main
Choose a base branch
from
+39 −19
Draft

docs(theme): embed new token documentation #2606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions docs/fundamentals/colors/ui-colors.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,23 @@ Naming colors semantically has two benefits:

The following categories are defined in our system:

### UI
### Background

--8<-- "si-themes.md:si-sys-background"

### Border

--8<-- "si-themes.md:si-sys-border"

### Text

--8<-- "si-themes.md:si-sys-text"

### Effects

--8<-- "si-themes.md:si-sys-effects"

### UI (deprecated)

UI colors are used on structural properties and icons and provide good contrast
when used over any background.
Expand All @@ -57,7 +73,7 @@ when used over any background.
| <si-docs-color style="background: #ffffff;"></si-docs-color> | <si-docs-color style="background: #23233c;"></si-docs-color> | `$element-ui-5` | Inverse | `$si-ref-color-main-brand-white` | `$si-ref-color-main-deep-blue-800` |
| <si-docs-color style="background: #000000;"></si-docs-color> | <si-docs-color style="background: #000000;"></si-docs-color> | `$element-ui-6` | Shadows | `$si-ref-color-main-brand-black` | `$si-ref-color-main-brand-black` |

### Base
### Base (deprecated)

Base colors are used as backgrounds of containers.

Expand All @@ -79,7 +95,7 @@ Base colors are used as backgrounds of containers.
| <si-docs-color style="background: #0000004D;"></si-docs-color> | <si-docs-color style="background: #000000B3;"></si-docs-color> | `$element-base-translucent-1` | Translucent, e.g. backdrop | `rgba($si-ref-color-main-brand-black, 0.3)` | `rgba($si-ref-color-main-brand-black, 0.7)` |
| <si-docs-color style="background: #000028E2;"></si-docs-color> | <si-docs-color style="background: #FFFFFFE2;"></si-docs-color> | `$element-base-translucent-2` | Slightly translucent background, e.g. toasts | `rgba($si-ref-color-main-deep-blue-900, 0.88)` | `rgba($si-ref-color-main-brand-white, 0.88)` |

### Actions
### Actions (deprecated)

Action colors are used to indicate actions that users can perform.

Expand All @@ -104,7 +120,7 @@ Action colors are used to indicate actions that users can perform.
| <si-docs-color style="background: #ffffff;"></si-docs-color> | <si-docs-color style="background: #ffffff;"></si-docs-color> | `$element-action-danger-text` | Danger text color | `$si-ref-color-main-brand-white` | `$si-ref-color-main-brand-white` |
| <si-docs-color style="background: #199fff;"></si-docs-color> | <si-docs-color style="background: #199fff;"></si-docs-color> | `$element-focus-default` | Default focus shadow color | `$si-ref-color-main-brand-focus` | `$si-ref-color-main-brand-focus` |

### Text
### Text (deprecated)

Similarly, categories for typography colors are also defined in this system.

Expand All @@ -122,7 +138,7 @@ Similarly, categories for typography colors are also defined in this system.
| <si-docs-color style="background: #a60823;"></si-docs-color> | <si-docs-color style="background: #ff8e9c;"></si-docs-color> | `$element-text-danger` | Danger | `$si-ref-color-main-red-700` | `$si-ref-color-main-red-300` |
| <si-docs-color style="background: #a733bc;"></si-docs-color> | <si-docs-color style="background: #edd6f2;"></si-docs-color> | `$element-text-critical` | Critical | `$si-ref-color-data-orchid-500` | `$si-ref-color-data-orchid-100` |

### Status
### Status (deprecated)

Status colors are used to describe and/or report on the status of different
things.
Expand Down
32 changes: 18 additions & 14 deletions docs/fundamentals/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,13 @@ Body text is used for the main content, often following a heading or as part of

![Body fonts usage](images/typography-body-usage.png)

| Style | Font size | Line height | Font weight |
| --------- | --------- | ----------- | ----------- |
| `body-lg` | 16 px | 20 px | 400 / Roman |
| `body` | 14 px | 16 px | 400 / Roman |
| `caption` | 12 px | 16 px | 400 / Roman |
| Style | Font size | Line height | Font weight |
| ---------------- | --------- | ----------- | --------------- |
| `body-lg` | 16 px | 20 px | 400 / Roman |
| `body-lg-bold` | 16 px | 20 px | 600 / Semi Bold |
| `body` | 14 px | 16 px | 400 / Roman |
| `body-paragraph` | 14 px | 20 px | 400 / Roman |
| `caption` | 12 px | 16 px | 400 / Roman |

All body styles are also available in **bold** and _italic_.
Bold is used to add emphasis or draw attention to key information, and is also applied in specific
Expand All @@ -67,14 +69,15 @@ They are defined semantically from `h1` to `h6`.

| Style | Font size | Line height | Font weight |
| --------- | --------- | ----------- | --------------- |
| `h1-bold` | 30 px | 36 px | 700 / Bold |
| `h1` | 30 px | 36 px | 400 / Roman |
| `h2` | 20 px | 24 px | 600 / Semi Bold |
| `h3` | 18 px | 24 px | 600 / Semi Bold |
| `h1-bold` | 28 px | 36 px | 700 / Bold |
| `h1` | 28 px | 36 px | 400 / Roman |
| `h2` | 24 px | 32 px | 600 / Semi Bold |
| `h3` | 20 px | 24 px | 600 / Semi Bold |
| `h4` | 16 px | 20 px | 600 / Semi Bold |
| `h4-bold` | 16 px | 20 px | 700 / Bold |
| `h5` | 14 px | 16 px | 600 / Semi Bold |
| `h5-bold` | 14 px | 16 px | 700 / Bold |
| `h5` | 14 px | 20 px | 600 / Semi Bold |
| `h5-bold` | 14 px | 20 px | 700 / Bold |
| `h6` | 12 px | 16 px | 600 / Semi Bold |

In order to adhere to [accessibility best practices](https://www.w3.org/WAI/tutorials/page-structure/headings/),
each page should be structured according to the semantic hierarchy `h1`, `h2`, ... `h6`, starting from
Expand Down Expand Up @@ -109,10 +112,11 @@ They should be used sparingly to maintain clarity.

| CSS class | Font size | Line height | Font weight |
| ------------------ | --------- | ----------- | ----------- |
| `.si-display-xl` | 56 px | 72 px | 400 / Roman |
| `.si-display-lg` | 48 px | 64 px | 400 / Roman |
| `.si-display-xxl` | 58 px | 72 px | 400 / Roman |
| `.si-display-xl` | 48 px | 64 px | 400 / Roman |
| `.si-display-lg` | 40 px | 52 px | 400 / Roman |
| `.si-display-bold` | 40 px | 52 px | 700 / Bold |
| `.si-display` | 40 px | 52 px | 400 / Roman |
| `.si-display` | 32 px | 40 px | 400 / Roman |

### Using the bounding box

Expand Down
Loading