diff --git a/docs/fundamentals/colors/ui-colors.md b/docs/fundamentals/colors/ui-colors.md index 425841798a..a89b3d1c33 100644 --- a/docs/fundamentals/colors/ui-colors.md +++ b/docs/fundamentals/colors/ui-colors.md @@ -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. @@ -57,7 +73,7 @@ when used over any background. | | | `$element-ui-5` | Inverse | `$si-ref-color-main-brand-white` | `$si-ref-color-main-deep-blue-800` | | | | `$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. @@ -79,7 +95,7 @@ Base colors are used as backgrounds of containers. | | | `$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)` | | | | `$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. @@ -104,7 +120,7 @@ Action colors are used to indicate actions that users can perform. | | | `$element-action-danger-text` | Danger text color | `$si-ref-color-main-brand-white` | `$si-ref-color-main-brand-white` | | | | `$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. @@ -122,7 +138,7 @@ Similarly, categories for typography colors are also defined in this system. | | | `$element-text-danger` | Danger | `$si-ref-color-main-red-700` | `$si-ref-color-main-red-300` | | | | `$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. diff --git a/docs/fundamentals/typography.md b/docs/fundamentals/typography.md index 1384c3254e..b9614c7711 100644 --- a/docs/fundamentals/typography.md +++ b/docs/fundamentals/typography.md @@ -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 @@ -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 @@ -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