@norconsult-digital-public/isypixel 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +10 -11
  2. package/docs/complete-guide.md +0 -331
  3. package/docs/reference.md +0 -82
  4. package/docs/tokens.md +0 -519
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@norconsult-digital-public/isypixel",
3
3
  "private": false,
4
- "version": "1.0.0",
4
+ "version": "1.0.1",
5
5
  "license": "SEE LICENSE.md",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -11,7 +11,6 @@
11
11
  "module": "./dist/esm/tokens/index.js",
12
12
  "files": [
13
13
  "dist",
14
- "docs",
15
14
  "LICENSE.md"
16
15
  ],
17
16
  "exports": {
@@ -43,19 +42,19 @@
43
42
  },
44
43
  "devDependencies": {
45
44
  "@changesets/cli": "^2.29.8",
46
- "@eslint/js": "^9.39.1",
47
- "@figma/rest-api-spec": "^0.34.0",
48
- "@types/node": "^24.10.2",
45
+ "@eslint/js": "^10.0.1",
46
+ "@figma/rest-api-spec": "^0.36.0",
47
+ "@types/node": "^25.3.0",
49
48
  "@types/semver": "^7.7.1",
50
- "eslint": "^9.39.1",
49
+ "eslint": "^10.0.2",
51
50
  "eslint-config-prettier": "^10.1.8",
52
- "prettier": "^3.7.4",
53
- "sass": "^1.95.0",
54
- "semver": "^7.7.3",
51
+ "prettier": "^3.8.1",
52
+ "sass": "^1.97.3",
53
+ "semver": "^7.7.4",
55
54
  "tsx": "^4.21.0",
56
55
  "typescript": "^5.9.3",
57
- "typescript-eslint": "^8.49.0",
58
- "vitest": "^4.0.15"
56
+ "typescript-eslint": "^8.56.1",
57
+ "vitest": "^4.0.18"
59
58
  },
60
59
  "scripts": {
61
60
  "lint": "eslint && prettier --check .",
package/docs/complete-guide.md DELETED
@@ -1,331 +0,0 @@
1
- # ISYPixel 🎨
2
-
3
- **Norconsult Digital's Design System for the ISY product family**
4
-
5
- > A comprehensive design system that provides consistent styling, tokens, and typography for ISY products.
6
-
7
- ---
8
-
9
- ## 🚀 Quick Start
10
-
11
- ### Installation
12
-
13
- Get started with ISYPixel by installing it via npm:
14
-
15
- ```bash
16
- npm install @norconsult-digital-public/isypixel
17
- ```
18
-
19
- ### Importing ISYPixel
20
-
21
- Import ISYPixel into your SCSS stylesheets in one of two ways:
22
-
23
- ```scss
24
- // Import everything without namespace
25
- @use '@norconsult-digital-public/isypixel' as *;
26
-
27
- // Import with namespace (recommended)
28
- @use '@norconsult-digital-public/isypixel' as pixel;
29
- ```
30
-
31
- ---
32
-
33
- ## 🎯 Working with Tokens
34
-
35
- ISYPixel uses a token-based system for consistent design values across your project.
36
-
37
- See full overview of [ISYPixel Tokens](./tokens.md) for more details.
38
-
39
- ### Using tokens
40
-
41
- > **Note:** Token names mentioned in this document are only examples.
42
-
43
- ```scss
44
- @use '@norconsult-digital-public/isypixel' as pixel;
45
-
46
- // Using primitive color tokens
47
- .button {
48
- background-color: pixel.$ip_color_core_aqua-300;
49
- color: pixel.$ip_color_core_steel-blue-700;
50
- }
51
-
52
- // Using semantic tokens (recommended)
53
- .breadcrumb {
54
- background: pixel.$ip_color_breadcrumb_background_primary_default;
55
- }
56
-
57
- .button {
58
- width: pixel.$ip_size_button_width_primary;
59
- height: pixel.$ip_size_button_height_primary;
60
- }
61
- ```
62
-
63
- > **Tip:** Semantic tokens are preferred over primitive tokens as they provide better context and are easier to maintain.
64
-
65
- ### Token Modes
66
-
67
- ISYPixel supports multiple modes for tokens, allowing you to define different values for various contexts (e.g., desktop vs. mobile, light vs. dark themes).
68
-
69
- By default, light mode and desktop are used, but you can specify modes by settings the following classes on the `<html>` element:
70
-
71
- - `ip-dark-mode` Sets the dark mode
72
-
73
- - `ip-light-mode` Sets the light mode (default)
74
-
75
- - `ip-mobile-mode` Sets the mobile mode
76
-
77
- - `ip-desktop-mode` Sets the desktop mode (default)
78
-
79
- ### Token Naming Structure
80
-
81
- ISYPixel follows a structured naming convention for clarity and consistency:
82
-
83
- #### Primitive Color Tokens
84
-
85
- _Base color values organized by category and shade_
86
-
87
- | Category | Group | Name | Shade | Token Example |
88
- | -------- | -------- | ------ | ----- | ------------------------------- |
89
- | color | core | aqua | 300 | `$ip_color_core_aqua-300` |
90
- | color | core | gray | 100 | `$ip_color_core_gray-100` |
91
- | color | extended | indigo | 500 | `$ip_color_extended_indigo-500` |
92
- | color | extended | violet | 600 | `$ip_color_extended_violet-600` |
93
-
94
- #### Semantic Color Tokens
95
-
96
- _Context-aware tokens that describe usage rather than appearance_
97
-
98
- | Category | Element | Property | Variant | State | Token Example |
99
- | -------- | ------- | ---------- | ------- | ------- | --------------------------------------------- |
100
- | color | button | background | primary | default | `$ip_color_button_background_primary_default` |
101
- | color | button | background | primary | hover | `$ip_color_button_background_primary_hover` |
102
- | color | button | background | primary | active | `$ip_color_button_background_primary_active` |
103
- | size | button | height | primary | | `$ip_size_button_height_primary` |
104
-
105
- #### Primitive Tokens
106
-
107
- _Tokens for sizes, spacing, and other primitive values_
108
-
109
- | Category | Group | Name | Token Example |
110
- | ---------- | ----------- | ------- | ------------------------------------ |
111
- | typography | font-size | size-12 | `$ip_typography_font-size_size-12` |
112
- | typography | line-height | normal | `$ip_typography_line-height_normal` |
113
- | typography | line-height | compact | `$ip_typography_line-height_compact` |
114
-
115
- #### Semantic Tokens
116
-
117
- _Context-aware tokens that describe usage rather than appearance_
118
-
119
- | Category | Element | Property | Variant | State | Token Example |
120
- | ---------- | ------- | --------- | ------- | ----- | --------------------------------------- |
121
- | typography | heading | font-size | h1 | | `$ip_typography_heading_font-size_h1` |
122
- | typography | body | font-size | default | | `$ip_typography_body_font-size_default` |
123
-
124
- ---
125
-
126
- ## ✍️ Fonts
127
-
128
- ISYPixel uses Nunito Sans as its main font, Museo Sans for branding and Roboto Mono for code snippets and tables of number values.
129
-
130
- All these fonts are available trough ISYPixel mixins:
131
-
132
- ```scss
133
- @use '@norconsult-digital-public/isypixel' as pixel;
134
-
135
- @include pixel.nunito-sans-font;
136
- @include pixel.museo-sans-font;
137
- @include pixel.roboto-mono-font;
138
- ```
139
-
140
- When font mixins are included, the font faces are available for normal use.
141
-
142
- ---
143
-
144
- ## 📜 Typography System
145
-
146
- ISYPixel provides two typography mixins to suit different project needs:
147
-
148
- ### Full Typography System
149
-
150
- Includes default sizes and helper classes for all heading levels, links, and paragraphs:
151
-
152
- ```scss
153
- @include ISYPixelTypography;
154
- ```
155
-
156
- ### Typography Helpers Only
157
-
158
- Includes only the header helper classes without overriding defaults:
159
-
160
- ```scss
161
- @include ISYPixelTypographyHelpers;
162
- ```
163
-
164
- > **Note:** `ISYPixelTypographyHelpers` is safer for existing projects as it won't override your current typography styles.
165
-
166
- ### Using Typography Helper Classes
167
-
168
- ```html
169
- <h1>Heading 1</h1>
170
- <h2 class="h4">Heading 2 styled as H4</h2>
171
- <h3>Heading 3</h3>
172
- ```
173
-
174
- ---
175
-
176
- ## ⚡ SCSS Utilities
177
-
178
- ISYPixel includes utility mixins that streamline common CSS patterns and save you time writing repetitive code.
179
-
180
- ### Rem Converter (function)
181
-
182
- Convert pixel values to rem units:
183
-
184
- ```scss
185
- // Single value conversion
186
- height: rem-calc(8);
187
-
188
- // Multiple values (margin/padding shorthand)
189
- padding: rem-calc(8 16 24 32);
190
- ```
191
-
192
- > **Why use this?** You only need to deal with one unit (px) in your code, while keeping the benefits of rem units.
193
-
194
- ### Flex Layout Helper (mixin)
195
-
196
- Create flexible layouts with a single, clean mixin:
197
-
198
- ```scss
199
- @include flex($align: center, $justify: center, $direction: row, $wrap: nowrap);
200
- ```
201
-
202
- **What it replaces:**
203
-
204
- ```scss
205
- // Instead of writing all this...
206
- display: flex;
207
- align-items: center;
208
- justify-content: center;
209
- flex-direction: row;
210
- flex-wrap: nowrap;
211
- ```
212
-
213
- > **Tip:** All parameters are optional - use only what you need!
214
-
215
- ### Absolute Fill (mixin)
216
-
217
- Quickly fill a parent container completely:
218
-
219
- ```scss
220
- @include absolute-fill();
221
- ```
222
-
223
- **Equivalent CSS:**
224
-
225
- ```scss
226
- position: absolute;
227
- top: 0;
228
- left: 0;
229
- height: 100%;
230
- width: 100%;
231
- ```
232
-
233
- > **Perfect for:** Overlay elements, background layers, or modal backdrops.
234
-
235
- ### Absolute Center (mixin)
236
-
237
- ---
238
-
239
- ## 🎨 Using Precompiled CSS
240
-
241
- If your project does not use SCSS, or you simply prefer to include ready-to-use styles, ISYPixel also provides **compiled CSS files** in the package.
242
-
243
- These files are located in the `dist/css/` folder of the package:
244
-
245
- - `styles.css` – main bundle containing core tokens
246
- - `fonts.css` – font-face declarations (Nunito Sans, Museo Sans, Roboto Mono)
247
- - `typography.css` – full typography system
248
- - `typography-helpers.css` – lightweight helpers only
249
-
250
- > **NB:** You should only use either `typography.css` or `typography-helpers.css`, not both.
251
- > If you include `typography.css` or `typography-helpers.css`, you do **not** need to import `fonts.css` separately, since all required font-face declarations are already bundled inside `typography.css` and `typography-helpers.css`.
252
-
253
- ---
254
-
255
- ### Option 1: Import via JavaScript/TypeScript
256
-
257
- ```ts
258
- import '@norconsult-digital-public/isypixel/css/styles';
259
- import '@norconsult-digital-public/isypixel/css/fonts';
260
- ```
261
-
262
- ### Option 2: Import via CSS `@import`
263
-
264
- ```css
265
- @import '@norconsult-digital-public/isypixel/css/styles.css';
266
- @import '@norconsult-digital-public/isypixel/css/fonts.css';
267
- ```
268
-
269
- ---
270
-
271
- ## 🧩 Using ISYPixel design tokens in TypeScript
272
-
273
- If you are working with an external component framework and want to configure styles from ISYPixel programmatically, the tokens (styling values) are also available as **raw TypeScript objects**.
274
-
275
- Import them like this:
276
-
277
- ```ts
278
- import { tokens } from '@norconsult-digital-public/isypixel';
279
- ```
280
-
281
- The exported `tokens` object contains two main groups:
282
-
283
- - **`tokens.primitive`** – low-level values such as font families, font sizes, line heights, and weights.
284
- - **`tokens.semantic`** – higher-level, context-aware values that follow ISYPixel’s design guidelines.
285
-
286
- ---
287
-
288
- ### Example: Typography
289
-
290
- ```ts
291
- const heading = {
292
- fontFamily: tokens.semantic.typography.heading.fontFamilyDefault,
293
- fontWeight: tokens.semantic.typography.heading.fontWeightDefault,
294
- fontSize: tokens.semantic.typography.heading.fontSizeH2,
295
- lineHeight: tokens.semantic.typography.heading.lineHeightDefault,
296
- };
297
-
298
- const body = {
299
- fontFamily: tokens.semantic.typography.body.fontFamilyDefault,
300
- fontSize: tokens.semantic.typography.body.fontSizeDefault,
301
- lineHeight: tokens.semantic.typography.body.lineHeightDefault,
302
- };
303
- ```
304
-
305
- ---
306
-
307
- ### 🌗 Light and Dark values
308
-
309
- Color tokens in ISYPixel include both **light** and **dark** variants.
310
- Each semantic color token is structured like this:
311
-
312
- ```ts
313
- tokens.semantic.color.text.primaryBlack.light; // value for light mode
314
- tokens.semantic.color.text.primaryBlack.dark; // value for dark mode
315
- ```
316
-
317
- When implementing dark mode, you choose the correct variant depending on which theme is active in your application.
318
-
319
- ---
320
-
321
- ## 📚 Reference
322
-
323
- See [ISYPixel Reference](./reference.md) for detailed information on functions, mixins, and more.
324
-
325
- ---
326
-
327
- ## 📞 Feedback and Support
328
-
329
- Feedback is always welcome! If you have suggestions, issues, or questions, please create an issue on our GitHub repository.
330
-
331
- Where docs come short, please refer to the source code for more details or contact us directly.
package/docs/reference.md DELETED
@@ -1,82 +0,0 @@
1
- # 🎨 ISYPixel Reference
2
-
3
- A comprehensive guide to ISYPixel's SCSS utilities and mixins.
4
-
5
- ## 📝 SCSS Reference
6
-
7
- ### Functions
8
-
9
- **`rem-calc($value, $base-value: 16px)`**
10
-
11
- - Converts pixel values to rem units for responsive design
12
- - `$value` - The pixel value to convert
13
- - `$base-value` - The base value for conversion (default: 16px)
14
- - Returns the value in rem units
15
-
16
- ---
17
-
18
- ### Mixins
19
-
20
- #### Utility Mixins
21
-
22
- **`flex($align-items: center, $justify-content: center, $flex-direction: row, $flex-wrap: nowrap)`**
23
-
24
- - A flexible mixin for creating modern flexbox layouts
25
- - `$align-items` - Align items along the cross axis _(optional)_
26
- - `$justify-content` - Align items along the main axis _(optional)_
27
- - `$flex-direction` - Direction of the flex items _(optional)_
28
- - `$flex-wrap` - Whether flex items should wrap _(optional)_
29
- - Returns a flexbox layout with the specified properties
30
-
31
- **`absolute-fill()`**
32
-
33
- - Instantly make an element fill its parent container completely
34
- - Sets `position: absolute`, `top: 0`, `left: 0`, `right: 0`, and `bottom: 0`
35
-
36
- **`absolute-center()`**
37
-
38
- - Perfectly center an element within its parent container using absolute positioning
39
- - Sets `position: absolute`, `top: 50%`, `left: 50%`, and uses `transform: translate(-50%, -50%)`
40
-
41
- #### Typography Mixins
42
-
43
- **`ISYPixelTypography()`**
44
-
45
- - A typography system that sets up your entire text hierarchy
46
- - Includes default sizes and helper classes and mixins for all heading levels, links, and paragraphs
47
- - Creates a consistent visual hierarchy across your project
48
-
49
- **`ISYPixelTypographyHelpers()`**
50
-
51
- - The non-breaking variant of `ISYPixelTypography()` - perfect for existing projects!
52
- - Includes **only** helper classes without overriding your existing defaults
53
- - Safe to use alongside your current typography styles
54
-
55
- **Available Typography classes and mixins:**
56
- These are available as CSS classes and SCSS mixins for easy integration into your project.
57
-
58
- - `h1` - **24px** (1.5rem) - Main headings
59
- - `h2` - **20px** (1.25rem) - Section headings
60
- - `h3` - **18px** (1.125rem) - Subsection headings
61
- - `h4` - **16px** (1rem) - Minor headings
62
- - `h5` - **14px** (0.875rem) - Small headings
63
- - `h6` - **12px** (0.75rem) - Tiny headings
64
- - `text-sm` - **12px** (0.75rem) - Small text
65
- - `text-md` - **14px** (0.875rem) - Medium text
66
- - `text-lg` - **16px** (1rem) - Large text
67
-
68
- #### Font Mixins
69
-
70
- ISYPixel contains three different fonts which can be included in your project using the following SCSS mixins:
71
-
72
- **`nunito-sans-font()`**
73
-
74
- - The default font for ISYPixel, a clean and modern sans-serif typeface
75
-
76
- **`museo-sans-font()`**
77
-
78
- - Norconsult brand font, to be used for branding within the project
79
-
80
- **`roboto-mono-font()`**
81
-
82
- - A monospaced font for code snippets and numeric tables
package/docs/tokens.md DELETED
@@ -1,519 +0,0 @@
1
- # ISY Pixel Tokens
2
-
3
- This document contains all available tokens in ISY Pixel.
4
-
5
- ## Primitive Color Tokens
6
-
7
- | Variable Name | Value |
8
- | --------------------------------- | --------------------------- |
9
- | ip_color_core_steel_blue-50 | `rgb(203, 205, 207)` |
10
- | ip_color_core_steel_blue-100 | `rgb(175, 178, 181)` |
11
- | ip_color_core_steel_blue-150 | `rgb(147, 151, 154)` |
12
- | ip_color_core_steel_blue-200 | `rgb(133, 138, 141)` |
13
- | ip_color_core_steel_blue-250 | `rgb(111, 118, 122)` |
14
- | ip_color_core_steel_blue-300 | `rgb(104, 110, 115)` |
15
- | ip_color_core_steel_blue-350 | `rgb(99, 106, 111)` |
16
- | ip_color_core_steel_blue-400 | `rgb(90, 97, 102)` |
17
- | ip_color_core_steel_blue-450 | `rgb(80, 87, 93)` |
18
- | ip_color_core_steel_blue-500 | `rgb(71, 78, 84)` |
19
- | ip_color_core_steel_blue-550 | `rgb(61, 69, 75)` |
20
- | ip_color_core_steel_blue-600 | `rgb(52, 60, 66)` |
21
- | ip_color_core_steel_blue-650 | `rgb(42, 51, 58)` |
22
- | ip_color_core_steel_blue-700 | `rgb(33, 42, 49)` |
23
- | ip_color_core_steel_blue-750 | `rgb(29, 37, 43)` |
24
- | ip_color_core_steel_blue-800 | `rgb(25, 32, 37)` |
25
- | ip_color_core_steel_blue-850 | `rgb(20, 26, 31)` |
26
- | ip_color_core_steel_blue-900 | `rgb(16, 20, 23)` |
27
- | ip_color_core_steel_blue-950 | `rgb(12, 15, 18)` |
28
- | ip_color_core_deep_blue-350 | `rgb(106, 130, 149)` |
29
- | ip_color_core_deep_blue-500 | `rgb(85, 104, 119)` |
30
- | ip_color_core_deep_blue-300 | `rgb(118, 140, 158)` |
31
- | ip_color_core_deep_blue-250 | `rgb(130, 150, 166)` |
32
- | ip_color_core_deep_blue-450 | `rgb(91, 111, 128)` |
33
- | ip_color_core_deep_blue-400 | `rgb(96, 118, 135)` |
34
- | ip_color_core_deep_blue-200 | `rgb(148, 165, 179)` |
35
- | ip_color_core_deep_blue-700 | `rgb(55, 67, 77)` |
36
- | ip_color_core_deep_blue-800 | `rgb(45, 55, 63)` |
37
- | ip_color_core_deep_blue-150 | `rgb(166, 180, 191)` |
38
- | ip_color_core_deep_blue-900 | `rgb(26, 33, 38)` |
39
- | ip_color_core_deep_blue-600 | `rgb(72, 88, 101)` |
40
- | ip_color_core_deep_blue-650 | `rgb(64, 78, 89)` |
41
- | ip_color_core_deep_blue-100 | `rgb(186, 197, 206)` |
42
- | ip_color_core_deep_blue-850 | `rgb(35, 43, 50)` |
43
- | ip_color_core_deep_blue-750 | `rgb(50, 61, 70)` |
44
- | ip_color_core_deep_blue-550 | `rgb(78, 96, 110)` |
45
- | ip_color_core_deep_blue-950 | `rgb(25, 31, 36)` |
46
- | ip_color_core_deep_blue-50 | `rgb(205, 213, 220)` |
47
- | ip_color_core_aqua-350 | `rgb(37, 177, 179)` |
48
- | ip_color_core_aqua-500 | `rgb(0, 141, 143)` |
49
- | ip_color_core_aqua-300 | `rgb(73, 189, 191)` |
50
- | ip_color_core_aqua-250 | `rgb(96, 196, 198)` |
51
- | ip_color_core_aqua-450 | `rgb(0, 149, 152)` |
52
- | ip_color_core_aqua-400 | `rgb(0, 163, 166)` |
53
- | ip_color_core_aqua-200 | `rgb(120, 205, 206)` |
54
- | ip_color_core_aqua-700 | `rgb(0, 90, 92)` |
55
- | ip_color_core_aqua-800 | `rgb(0, 80, 81)` |
56
- | ip_color_core_aqua-150 | `rgb(143, 212, 213)` |
57
- | ip_color_core_aqua-900 | `rgb(0, 59, 60)` |
58
- | ip_color_core_aqua-600 | `rgb(0, 101, 103)` |
59
- | ip_color_core_aqua-650 | `rgb(0, 98, 98)` |
60
- | ip_color_core_aqua-100 | `rgb(163, 219, 220)` |
61
- | ip_color_core_aqua-850 | `rgb(0, 69, 70)` |
62
- | ip_color_core_aqua-750 | `rgb(0, 86, 87)` |
63
- | ip_color_core_aqua-550 | `rgb(0, 122, 124)` |
64
- | ip_color_core_aqua-950 | `rgb(0, 48, 49)` |
65
- | ip_color_core_aqua-50 | `rgb(183, 227, 228)` |
66
- | ip_color_core_cloud_blue-350 | `rgb(185, 195, 206)` |
67
- | ip_color_core_cloud_blue-500 | `rgb(153, 167, 184)` |
68
- | ip_color_core_cloud_blue-300 | `rgb(193, 202, 212)` |
69
- | ip_color_core_cloud_blue-250 | `rgb(201, 208, 217)` |
70
- | ip_color_core_cloud_blue-450 | `rgb(165, 178, 193)` |
71
- | ip_color_core_cloud_blue-400 | `rgb(177, 188, 201)` |
72
- | ip_color_core_cloud_blue-200 | `rgb(210, 217, 225)` |
73
- | ip_color_core_cloud_blue-700 | `rgb(116, 136, 159)` |
74
- | ip_color_core_cloud_blue-800 | `rgb(95, 114, 135)` |
75
- | ip_color_core_cloud_blue-150 | `rgb(218, 225, 232)` |
76
- | ip_color_core_cloud_blue-900 | `rgb(70, 89, 110)` |
77
- | ip_color_core_cloud_blue-600 | `rgb(133, 150, 169)` |
78
- | ip_color_core_cloud_blue-650 | `rgb(128, 146, 167)` |
79
- | ip_color_core_cloud_blue-100 | `rgb(225, 229, 234)` |
80
- | ip_color_core_cloud_blue-850 | `rgb(82, 101, 122)` |
81
- | ip_color_core_cloud_blue-750 | `rgb(100, 120, 143)` |
82
- | ip_color_core_cloud_blue-550 | `rgb(138, 153, 171)` |
83
- | ip_color_core_cloud_blue-950 | `rgb(61, 80, 102)` |
84
- | ip_color_core_cloud_blue-50 | `rgb(233, 236, 240)` |
85
- | ip_color_core_gray-500 | `rgb(186, 189, 191)` |
86
- | ip_color_core_gray-400 | `rgb(207, 209, 211)` |
87
- | ip_color_core_gray-200 | `rgb(228, 229, 230)` |
88
- | ip_color_core_gray-900 | `rgb(83, 86, 90)` |
89
- | ip_color_core_gray-700 | `rgb(144, 148, 152)` |
90
- | ip_color_core_gray-800 | `rgb(113, 118, 122)` |
91
- | ip_color_core_gray-600 | `rgb(165, 169, 172)` |
92
- | ip_color_core_gray-300 | `rgb(224, 225, 226)` |
93
- | ip_color_core_gray-100 | `rgb(233, 234, 235)` |
94
- | ip_color_core_gray-950 | `rgb(54, 56, 58)` |
95
- | ip_color_core_gray-50 | `rgb(238, 239, 240)` |
96
- | ip_color_core_light_gray-500 | `rgb(243, 243, 243)` |
97
- | ip_color_core_light_gray-400 | `rgb(245, 245, 245)` |
98
- | ip_color_core_light_gray-200 | `rgb(249, 249, 249)` |
99
- | ip_color_core_light_gray-900 | `rgb(186, 186, 186)` |
100
- | ip_color_core_light_gray-700 | `rgb(214, 214, 214)` |
101
- | ip_color_core_light_gray-800 | `rgb(200, 200, 200)` |
102
- | ip_color_core_light_gray-600 | `rgb(229, 229, 229)` |
103
- | ip_color_core_light_gray-300 | `rgb(247, 247, 247)` |
104
- | ip_color_core_light_gray-100 | `rgb(251, 251, 251)` |
105
- | ip_color_core_light_gray-950 | `rgb(171, 171, 171)` |
106
- | ip_color_core_light_gray-50 | `rgb(254, 254, 254)` |
107
- | ip_color_extended_indigo-900 | `rgb(84, 77, 126)` |
108
- | ip_color_extended_indigo-800 | `rgb(92, 84, 138)` |
109
- | ip_color_extended_indigo-600 | `rgb(130, 124, 166)` |
110
- | ip_color_extended_indigo-500 | `rgb(150, 145, 179)` |
111
- | ip_color_extended_indigo-400 | `rgb(169, 165, 193)` |
112
- | ip_color_extended_indigo-700 | `rgb(111, 104, 152)` |
113
- | ip_color_extended_indigo-100 | `rgb(217, 215, 228)` |
114
- | ip_color_extended_indigo-300 | `rgb(178, 174, 200)` |
115
- | ip_color_extended_indigo-50 | `rgb(227, 225, 235)` |
116
- | ip_color_extended_indigo-200 | `rgb(198, 195, 214)` |
117
- | ip_color_extended_indigo-950 | `rgb(76, 69, 114)` |
118
- | ip_color_extended_violet-900 | `rgb(112, 86, 102)` |
119
- | ip_color_extended_violet-800 | `rgb(128, 99, 117)` |
120
- | ip_color_extended_violet-600 | `rgb(152, 129, 143)` |
121
- | ip_color_extended_violet-500 | `rgb(169, 149, 161)` |
122
- | ip_color_extended_violet-400 | `rgb(177, 159, 170)` |
123
- | ip_color_extended_violet-700 | `rgb(144, 119, 134)` |
124
- | ip_color_extended_violet-100 | `rgb(209, 199, 205)` |
125
- | ip_color_extended_violet-300 | `rgb(185, 169, 179)` |
126
- | ip_color_extended_violet-50 | `rgb(219, 211, 216)` |
127
- | ip_color_extended_violet-200 | `rgb(201, 189, 196)` |
128
- | ip_color_extended_violet-950 | `rgb(104, 80, 95)` |
129
- | ip_color_extended_pink-900 | `rgb(158, 66, 105)` |
130
- | ip_color_extended_pink-800 | `rgb(163, 77, 113)` |
131
- | ip_color_extended_pink-600 | `rgb(181, 111, 140)` |
132
- | ip_color_extended_pink-500 | `rgb(192, 133, 158)` |
133
- | ip_color_extended_pink-400 | `rgb(198, 144, 166)` |
134
- | ip_color_extended_pink-700 | `rgb(168, 88, 121)` |
135
- | ip_color_extended_pink-100 | `rgb(227, 200, 211)` |
136
- | ip_color_extended_pink-300 | `rgb(204, 155, 175)` |
137
- | ip_color_extended_pink-50 | `rgb(238, 222, 229)` |
138
- | ip_color_extended_pink-200 | `rgb(215, 178, 193)` |
139
- | ip_color_extended_pink-950 | `rgb(139, 58, 92)` |
140
- | ip_color_extended_red-900 | `rgb(127, 55, 48)` |
141
- | ip_color_extended_red-800 | `rgb(137, 59, 52)` |
142
- | ip_color_extended_red-600 | `rgb(177, 94, 86)` |
143
- | ip_color_extended_red-500 | `rgb(192, 126, 120)` |
144
- | ip_color_extended_red-400 | `rgb(203, 147, 142)` |
145
- | ip_color_extended_red-700 | `rgb(166, 72, 63)` |
146
- | ip_color_extended_red-100 | `rgb(234, 212, 210)` |
147
- | ip_color_extended_red-300 | `rgb(213, 169, 165)` |
148
- | ip_color_extended_red-50 | `rgb(243, 230, 229)` |
149
- | ip_color_extended_red-200 | `rgb(224, 191, 188)` |
150
- | ip_color_extended_red-950 | `rgb(117, 53, 47)` |
151
- | ip_color_extended_orange-900 | `rgb(223, 160, 23)` |
152
- | ip_color_extended_orange-800 | `rgb(237, 170, 24)` |
153
- | ip_color_extended_orange-600 | `rgb(241, 190, 79)` |
154
- | ip_color_extended_orange-500 | `rgb(243, 200, 106)` |
155
- | ip_color_extended_orange-400 | `rgb(245, 210, 133)` |
156
- | ip_color_extended_orange-700 | `rgb(239, 180, 51)` |
157
- | ip_color_extended_orange-100 | `rgb(249, 225, 174)` |
158
- | ip_color_extended_orange-300 | `rgb(247, 215, 147)` |
159
- | ip_color_extended_orange-50 | `rgb(250, 230, 188)` |
160
- | ip_color_extended_orange-200 | `rgb(248, 220, 160)` |
161
- | ip_color_extended_orange-950 | `rgb(209, 150, 21)` |
162
- | ip_color_extended_yellow-900 | `rgb(231, 187, 3)` |
163
- | ip_color_extended_yellow-800 | `rgb(246, 199, 3)` |
164
- | ip_color_extended_yellow-600 | `rgb(248, 212, 62)` |
165
- | ip_color_extended_yellow-500 | `rgb(249, 218, 92)` |
166
- | ip_color_extended_yellow-400 | `rgb(250, 225, 122)` |
167
- | ip_color_extended_yellow-700 | `rgb(247, 204, 33)` |
168
- | ip_color_extended_yellow-100 | `rgb(252, 235, 167)` |
169
- | ip_color_extended_yellow-300 | `rgb(251, 229, 137)` |
170
- | ip_color_extended_yellow-50 | `rgb(252, 238, 181)` |
171
- | ip_color_extended_yellow-200 | `rgb(251, 232, 152)` |
172
- | ip_color_extended_yellow-950 | `rgb(217, 174, 3)` |
173
- | ip_color_extended_green-900 | `rgb(94, 148, 53)` |
174
- | ip_color_extended_green-800 | `rgb(101, 158, 56)` |
175
- | ip_color_extended_green-600 | `rgb(124, 178, 83)` |
176
- | ip_color_extended_green-500 | `rgb(142, 189, 106)` |
177
- | ip_color_extended_green-400 | `rgb(159, 199, 129)` |
178
- | ip_color_extended_green-700 | `rgb(107, 168, 60)` |
179
- | ip_color_extended_green-100 | `rgb(194, 219, 175)` |
180
- | ip_color_extended_green-300 | `rgb(177, 209, 152)` |
181
- | ip_color_extended_green-50 | `rgb(212, 230, 198)` |
182
- | ip_color_extended_green-200 | `rgb(186, 214, 164)` |
183
- | ip_color_extended_green-950 | `rgb(90, 138, 52)` |
184
- | ip_color_extended_tropic_blue-900 | `rgb(64, 119, 139)` |
185
- | ip_color_extended_tropic_blue-800 | `rgb(73, 124, 143)` |
186
- | ip_color_extended_tropic_blue-600 | `rgb(109, 151, 166)` |
187
- | ip_color_extended_tropic_blue-500 | `rgb(132, 167, 180)` |
188
- | ip_color_extended_tropic_blue-400 | `rgb(154, 183, 194)` |
189
- | ip_color_extended_tropic_blue-700 | `rgb(87, 135, 153)` |
190
- | ip_color_extended_tropic_blue-100 | `rgb(210, 223, 228)` |
191
- | ip_color_extended_tropic_blue-300 | `rgb(177, 199, 207)` |
192
- | ip_color_extended_tropic_blue-50 | `rgb(222, 232, 235)` |
193
- | ip_color_extended_tropic_blue-200 | `rgb(199, 215, 221)` |
194
- | ip_color_extended_tropic_blue-950 | `rgb(56, 105, 123)` |
195
- | ip_color_extended_mist_blue-900 | `rgb(62, 102, 115)` |
196
- | ip_color_extended_mist_blue-800 | `rgb(74, 112, 124)` |
197
- | ip_color_extended_mist_blue-600 | `rgb(102, 136, 148)` |
198
- | ip_color_extended_mist_blue-500 | `rgb(123, 150, 159)` |
199
- | ip_color_extended_mist_blue-400 | `rgb(147, 169, 176)` |
200
- | ip_color_extended_mist_blue-700 | `rgb(86, 121, 132)` |
201
- | ip_color_extended_mist_blue-100 | `rgb(207, 217, 220)` |
202
- | ip_color_extended_mist_blue-300 | `rgb(171, 188, 194)` |
203
- | ip_color_extended_mist_blue-50 | `rgb(219, 227, 229)` |
204
- | ip_color_extended_mist_blue-200 | `rgb(195, 207, 211)` |
205
- | ip_color_extended_mist_blue-950 | `rgb(50, 92, 106)` |
206
- | ip_color_extended_ocean_blue-900 | `rgb(35, 92, 123)` |
207
- | ip_color_extended_ocean_blue-800 | `rgb(49, 102, 131)` |
208
- | ip_color_extended_ocean_blue-600 | `rgb(76, 122, 147)` |
209
- | ip_color_extended_ocean_blue-500 | `rgb(90, 133, 156)` |
210
- | ip_color_extended_ocean_blue-400 | `rgb(104, 143, 164)` |
211
- | ip_color_extended_ocean_blue-700 | `rgb(63, 112, 139)` |
212
- | ip_color_extended_ocean_blue-100 | `rgb(187, 205, 214)` |
213
- | ip_color_extended_ocean_blue-300 | `rgb(131, 163, 181)` |
214
- | ip_color_extended_ocean_blue-50 | `rgb(201, 215, 222)` |
215
- | ip_color_extended_ocean_blue-200 | `rgb(159, 184, 197)` |
216
- | ip_color_extended_ocean_blue-950 | `rgb(21, 81, 114)` |
217
- | ip_color_core_light_gray-085 | `rgba(254, 254, 254, 0.15)` |
218
- | ip_color_core_steel_blue-085 | `rgba(16, 20, 23, 0.15)` |
219
- | ip_color_core_steel_blue-090 | `rgba(16, 20, 23, 0.1)` |
220
- | ip_color_core_steel_blue-080 | `rgba(16, 20, 23, 0.2)` |
221
- | ip_color_core_steel_blue-095 | `rgba(16, 20, 23, 0.05)` |
222
- | ip_color_core_light_gray-080 | `rgba(254, 254, 254, 0.2)` |
223
- | ip_color_core_light_gray-090 | `rgba(254, 254, 254, 0.1)` |
224
- | ip_color_core_light_gray-095 | `rgba(254, 254, 254, 0.05)` |
225
-
226
- ## Semantic Color Tokens
227
-
228
- | Variable Name | Light Value | Dark Value |
229
- | --------------------------------------------------------------------- | --------------------------- | --------------------------- |
230
- | ip_color_brand_accent_primary_default | `rgb(0, 163, 166)` | `rgb(0, 163, 166)` |
231
- | ip_color_brand_accent_secondary_default | `rgb(120, 205, 206)` | `rgb(120, 205, 206)` |
232
- | ip_color_menu_main_item_background_primary_selected_default | `rgb(25, 31, 36)` | `rgb(26, 33, 38)` |
233
- | ip_color_menu_main_item_background_primary_active | `rgb(20, 26, 31)` | `rgb(20, 26, 31)` |
234
- | ip_color_menu_main_item_background_primary_selected_active | `rgb(20, 26, 31)` | `rgb(20, 26, 31)` |
235
- | ip_color_menu_main_background_primary_default | `rgb(33, 42, 49)` | `rgb(20, 26, 31)` |
236
- | ip_color_menu_main_item_background_primary_hover | `rgb(45, 55, 63)` | `rgb(33, 42, 49)` |
237
- | ip_color_menu_main_item_background_primary_selected_hover | `rgb(45, 55, 63)` | `rgb(33, 42, 49)` |
238
- | ip_color_menu_main_item_background_primary_default | `rgb(33, 42, 49)` | `rgb(20, 26, 31)` |
239
- | ip_color_menu_main_item_vertical_divider_primary_default | `rgb(0, 163, 166)` | `rgb(0, 163, 166)` |
240
- | ip_color_menu_main_group_item_background_primary_selected_active | `rgb(20, 26, 31)` | `rgb(20, 26, 31)` |
241
- | ip_color_menu_main_group_item_background_primary_selected_default | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
242
- | ip_color_menu_main_group_item_background_primary_selected_hover | `rgb(45, 55, 63)` | `rgb(33, 42, 49)` |
243
- | ip_color_menu_main_group_item_background_primary_active | `rgb(20, 26, 31)` | `rgb(20, 26, 31)` |
244
- | ip_color_menu_main_group_item_background_primary_default | `rgb(25, 31, 36)` | `rgb(26, 33, 38)` |
245
- | ip_color_menu_main_group_item_vertical_divider_primary_default | `rgb(0, 163, 166)` | `rgb(0, 163, 166)` |
246
- | ip_color_menu_main_group_item_background_primary_hover | `rgb(45, 55, 63)` | `rgb(33, 42, 49)` |
247
- | ip_color_menu_main_group_item_vertical_divider_secondary_default | `rgb(91, 111, 128)` | `rgb(91, 111, 128)` |
248
- | ip_color_menu_main_item_vertical_divider_secondary_default | `rgb(91, 111, 128)` | `rgb(91, 111, 128)` |
249
- | ip_color_text_primary_black | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
250
- | ip_color_text_primary_black_inverse | `rgb(254, 254, 254)` | `rgb(16, 20, 23)` |
251
- | ip_color_text_secondary_default | `rgb(90, 97, 102)` | `rgb(214, 214, 214)` |
252
- | ip_color_text_secondary_inverse | `rgb(214, 214, 214)` | `rgb(90, 97, 102)` |
253
- | ip_color_top_navbar_background_primary_default | `rgb(33, 42, 49)` | `rgb(20, 26, 31)` |
254
- | ip_color_top_navbar_background_secondary_default | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
255
- | ip_color_breadcrumb_background_primary_default | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
256
- | ip_color_surface_primary_default | `rgb(254, 254, 254)` | `rgb(26, 33, 38)` |
257
- | ip_color_sidebar_content_background_primary_opened | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
258
- | ip_color_icon_button_icon_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
259
- | ip_color_icon_button_icon_primary_inverse | `rgb(205, 213, 220)` | `rgb(205, 213, 220)` |
260
- | ip_color_icon_primary_inverse | `rgb(205, 213, 220)` | `rgb(61, 80, 102)` |
261
- | ip_color_icon_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
262
- | ip_color_icon_button_background_primary_hover | `rgb(33, 42, 49)` | `rgb(254, 254, 254)` |
263
- | ip_color_icon_button_background_primary_active | `rgb(33, 42, 49)` | `rgb(254, 254, 254)` |
264
- | ip_color_border_opaque_15 | `rgba(16, 20, 23, 0.15)` | `rgba(254, 254, 254, 0.15)` |
265
- | ip_color_border_primary_default | `rgb(186, 189, 191)` | `rgb(61, 69, 75)` |
266
- | ip_color_sidebar_tab_item_background_primary_default | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
267
- | ip_color_sidebar_tab_item_background_primary_hover | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
268
- | ip_color_sidebar_tab_item_background_primary_active | `rgb(207, 209, 211)` | `rgb(20, 26, 31)` |
269
- | ip_color_sidebar_tab_item_background_primary_selected_default | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
270
- | ip_color_sidebar_toolbar_item_button_background_primary_default | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
271
- | ip_color_sidebar_toolbar_item_button_background_primary_hover | `rgb(207, 209, 211)` | `rgb(20, 26, 31)` |
272
- | ip_color_sidebar_toolbar_item_button_background_primary_active | `rgb(186, 189, 191)` | `rgb(12, 15, 18)` |
273
- | ip_color_sidebar_toolbar_item_button_background_secondary_default | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
274
- | ip_color_sidebar_toolbar_item_button_background_secondary_hover | `rgb(207, 209, 211)` | `rgb(20, 26, 31)` |
275
- | ip_color_sidebar_toolbar_item_button_background_secondary_active | `rgb(186, 189, 191)` | `rgb(12, 15, 18)` |
276
- | ip_color_sidebar_toolbar_item_button_text_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
277
- | ip_color_sidebar_toolbar_item_button_icon_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
278
- | ip_color_sidebar_toolbar_item_button_icon_secondary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
279
- | ip_color_text_primary_blue | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
280
- | ip_color_sidebar_header_background_primary_default | `rgb(228, 229, 230)` | `rgb(29, 37, 43)` |
281
- | ip_color_table_header_background_primary_default | `rgb(233, 236, 240)` | `rgb(26, 33, 38)` |
282
- | ip_color_table_column_header_border_primary_default | `rgb(0, 163, 166)` | `rgb(120, 205, 206)` |
283
- | ip_color_table_column_header_text_primary_default | `rgb(61, 80, 102)` | `rgb(254, 254, 254)` |
284
- | ip_color_table_column_header_icon_primary_default | `rgb(148, 165, 179)` | `rgb(205, 213, 220)` |
285
- | ip_color_table_row_cell_background_primary_default | `rgb(254, 254, 254)` | `rgb(26, 33, 38)` |
286
- | ip_color_table_row_cell_border_primary_default | `rgb(186, 189, 191)` | `rgb(61, 69, 75)` |
287
- | ip_color_table_row_cell_text_primary_default | `rgb(16, 20, 23)` | `rgb(214, 214, 214)` |
288
- | ip_color_table_row_background_primary_default | `rgb(254, 254, 254)` | `rgb(26, 33, 38)` |
289
- | ip_color_table_row_background_primary_hover | `rgb(225, 229, 234)` | `rgb(33, 42, 49)` |
290
- | ip_color_table_row_background_primary_active | `rgb(201, 208, 217)` | `rgb(20, 26, 31)` |
291
- | ip_color_hyperlink_text_primary_default | `rgb(35, 92, 123)` | `rgb(143, 212, 213)` |
292
- | ip_color_hyperlink_text_primary_hover | `rgb(35, 92, 123)` | `rgb(143, 212, 213)` |
293
- | ip_color_hyperlink_text_primary_active | `rgb(55, 67, 77)` | `rgb(0, 122, 124)` |
294
- | ip_color_hyperlink_text_visited_default | `rgb(85, 104, 119)` | `rgb(183, 227, 228)` |
295
- | ip_color_hyperlink_text_visited_hover | `rgb(85, 104, 119)` | `rgb(143, 212, 213)` |
296
- | ip_color_hyperlink_text_visited_active | `rgb(55, 67, 77)` | `rgb(0, 122, 124)` |
297
- | ip_color_breadcrumb_item_background_primary_default | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
298
- | ip_color_breadcrumb_item_background_primary_hover | `rgb(233, 234, 235)` | `rgb(45, 55, 63)` |
299
- | ip_color_breadcrumb_item_background_primary_active | `rgb(224, 225, 226)` | `rgb(52, 60, 66)` |
300
- | ip_color_icon_tertiary_default | `rgb(148, 165, 179)` | `rgb(205, 213, 220)` |
301
- | ip_color_text_tertiary_default | `rgb(133, 138, 141)` | `rgb(214, 214, 214)` |
302
- | ip_color_text_quaternary_default | `rgb(95, 114, 135)` | `rgb(214, 214, 214)` |
303
- | ip_color_table_search_cell_background_primary_default | `rgb(249, 249, 249)` | `rgb(26, 33, 38)` |
304
- | ip_color_loading_indicator_background_primary_default | `rgb(90, 97, 102)` | `rgb(71, 78, 84)` |
305
- | ip_color_loading_indicator_background_secondary_default | `rgb(120, 205, 206)` | `rgb(120, 205, 206)` |
306
- | ip_color_menu_main_divider_border_primary_default | `rgb(33, 42, 49)` | `rgb(61, 69, 75)` |
307
- | ip_color_sidebar_content_background_gradient_start_primary_default | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
308
- | ip_color_sidebar_content_background_gradient_stop_primary_default | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
309
- | ip_color_table_header_background_secondary_default | `rgb(228, 229, 230)` | `rgb(26, 33, 38)` |
310
- | ip_color_table_search_cell_background_secondary_default | `rgb(233, 234, 235)` | `rgb(26, 33, 38)` |
311
- | ip_color_border_primary_weak | `rgb(224, 225, 226)` | `rgb(61, 69, 75)` |
312
- | ip_color_border_primary_strong | `rgb(165, 169, 172)` | `rgb(61, 69, 75)` |
313
- | ip_color_border_primary_xstrong | `rgb(144, 148, 152)` | `rgb(61, 69, 75)` |
314
- | ip_color_hierarchy6_item_background_level_6_default | `rgb(233, 236, 240)` | `rgb(111, 118, 122)` |
315
- | ip_color_hierarchy6_item_background_level_6_hover | `rgb(225, 229, 234)` | `rgb(104, 110, 115)` |
316
- | ip_color_hierarchy6_item_background_level_6_active | `rgb(218, 225, 232)` | `rgb(99, 106, 111)` |
317
- | ip_color_hierarchy6_item_icon_level_6_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
318
- | ip_color_hierarchy6_item_background_level_5_default | `rgb(218, 225, 232)` | `rgb(99, 106, 111)` |
319
- | ip_color_hierarchy6_item_text_level_6_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
320
- | ip_color_hierarchy6_item_background_level_5_hover | `rgb(210, 217, 225)` | `rgb(90, 97, 102)` |
321
- | ip_color_hierarchy6_item_border_level_6_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
322
- | ip_color_hierarchy6_item_icon_level_5_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
323
- | ip_color_hierarchy6_item_background_level_5_active | `rgb(201, 208, 217)` | `rgb(80, 87, 93)` |
324
- | ip_color_hierarchy6_item_text_level_5_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
325
- | ip_color_hierarchy6_item_border_level_2_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
326
- | ip_color_hierarchy6_item_border_level_5_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
327
- | ip_color_hierarchy6_item_background_level_4_default | `rgb(201, 208, 217)` | `rgb(80, 87, 93)` |
328
- | ip_color_hierarchy6_item_background_level_4_hover | `rgb(193, 202, 212)` | `rgb(71, 78, 84)` |
329
- | ip_color_hierarchy6_item_background_level_4_active | `rgb(185, 195, 206)` | `rgb(61, 69, 75)` |
330
- | ip_color_hierarchy6_item_icon_level_4_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
331
- | ip_color_hierarchy6_item_text_level_4_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
332
- | ip_color_hierarchy6_item_border_level_4_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
333
- | ip_color_hierarchy6_item_background_level_3_default | `rgb(185, 195, 206)` | `rgb(61, 69, 75)` |
334
- | ip_color_hierarchy6_item_text_level_3_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
335
- | ip_color_hierarchy6_item_background_level_3_hover | `rgb(177, 188, 201)` | `rgb(52, 60, 66)` |
336
- | ip_color_hierarchy6_item_border_level_3_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
337
- | ip_color_hierarchy6_item_background_level_3_active | `rgb(165, 178, 193)` | `rgb(42, 51, 58)` |
338
- | ip_color_hierarchy6_item_icon_level_3_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
339
- | ip_color_hierarchy6_item_background_level_2_hover | `rgb(153, 167, 184)` | `rgb(33, 42, 49)` |
340
- | ip_color_hierarchy6_item_background_level_2_default | `rgb(165, 178, 193)` | `rgb(42, 51, 58)` |
341
- | ip_color_hierarchy6_item_background_level_2_active | `rgb(138, 153, 171)` | `rgb(29, 37, 43)` |
342
- | ip_color_hierarchy6_item_icon_level_2_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
343
- | ip_color_hierarchy6_item_text_level_2_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
344
- | ip_color_hierarchy6_item_background_level_1_default | `rgb(254, 254, 254)` | `rgb(29, 37, 43)` |
345
- | ip_color_hierarchy6_item_background_level_1_active | `rgb(229, 229, 229)` | `rgb(20, 26, 31)` |
346
- | ip_color_hierarchy6_item_background_level_1_hover | `rgb(243, 243, 243)` | `rgb(25, 32, 37)` |
347
- | ip_color_hierarchy6_item_icon_level_1_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
348
- | ip_color_hierarchy6_item_text_level_1_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
349
- | ip_color_hierarchy6_item_border_level_1_default | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
350
- | ip_color_hierarchy6_item_common_background_selected_default | `rgb(78, 96, 110)` | `rgb(186, 197, 206)` |
351
- | ip_color_hierarchy6_item_common_background_selected_hover | `rgb(72, 88, 101)` | `rgb(166, 180, 191)` |
352
- | ip_color_hierarchy6_item_common_background_selected_active | `rgb(64, 78, 89)` | `rgb(148, 165, 179)` |
353
- | ip_color_hierarchy6_item_common_icon_selected_default | `rgb(205, 213, 220)` | `rgb(61, 80, 102)` |
354
- | ip_color_hierarchy6_item_common_text_selected_default | `rgb(254, 254, 254)` | `rgb(16, 20, 23)` |
355
- | ip_color_hierarchy6_item_common_border_selected_default | `rgba(254, 254, 254, 0.2)` | `rgba(16, 20, 23, 0.2)` |
356
- | ip_color_hierarchy6_item_root_background_level_0_default | `rgb(224, 225, 226)` | `rgb(20, 26, 31)` |
357
- | ip_color_hierarchy6_item_root_background_level_0_hover | `rgb(207, 209, 211)` | `rgb(16, 20, 23)` |
358
- | ip_color_hierarchy6_item_root_background_level_0_active | `rgb(186, 189, 191)` | `rgb(12, 15, 18)` |
359
- | ip_color_hierarchy6_item_root_icon_level_0_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
360
- | ip_color_hierarchy6_item_root_text_level_0_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
361
- | ip_color_hierarchy6_item_root_border_level_0_default | `rgba(16, 20, 23, 0.2)` | `rgb(61, 69, 75)` |
362
- | ip_color_border_opaque_5_inverse | `rgba(254, 254, 254, 0.05)` | `rgba(16, 20, 23, 0.05)` |
363
- | ip_color_border_opaque_20 | `rgba(16, 20, 23, 0.2)` | `rgba(254, 254, 254, 0.2)` |
364
- | ip_color_border_opaque_10 | `rgba(16, 20, 23, 0.1)` | `rgba(254, 254, 254, 0.1)` |
365
- | ip_color_border_opaque_5 | `rgba(16, 20, 23, 0.05)` | `rgba(254, 254, 254, 0.05)` |
366
- | ip_color_border_opaque_20_inverse | `rgba(254, 254, 254, 0.2)` | `rgba(16, 20, 23, 0.2)` |
367
- | ip_color_border_opaque_10_inverse | `rgba(254, 254, 254, 0.1)` | `rgba(16, 20, 23, 0.1)` |
368
- | ip_color_border_opaque_15_inverse | `rgba(254, 254, 254, 0.15)` | `rgba(16, 20, 23, 0.15)` |
369
- | ip_color_brand_accent_weak | `rgb(183, 227, 228)` | `rgb(183, 227, 228)` |
370
- | ip_color_brand_accent_strong | `rgb(0, 101, 103)` | `rgb(0, 101, 103)` |
371
- | ip_color_brand_accent_medium | `rgb(96, 196, 198)` | `rgb(96, 196, 198)` |
372
- | ip_color_sidebar_state_change_button_background_primary_opened | `rgb(243, 243, 243)` | `rgb(33, 42, 49)` |
373
- | ip_color_sidebar_state_change_button_background_primary_opened_hover | `rgb(207, 209, 211)` | `rgb(20, 26, 31)` |
374
- | ip_color_sidebar_state_change_button_background_primary_opened_active | `rgb(186, 189, 191)` | `rgb(12, 15, 18)` |
375
- | ip_color_sidebar_state_change_button_background_primary_closed_active | `rgb(0, 163, 166)` | `rgb(0, 163, 166)` |
376
- | ip_color_sidebar_state_change_button_background_primary_closed | `rgb(183, 227, 228)` | `rgb(183, 227, 228)` |
377
- | ip_color_sidebar_state_change_button_icon_primary_default | `rgb(16, 20, 23)` | `rgb(254, 254, 254)` |
378
- | ip_color_sidebar_state_change_button_background_primary_closed_hover | `rgb(96, 196, 198)` | `rgb(96, 196, 198)` |
379
- | ip_color_sidebar_state_change_button_icon_primary_closed_hover | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
380
- | ip_color_sidebar_state_change_button_icon_primary_closed_active | `rgb(254, 254, 254)` | `rgb(254, 254, 254)` |
381
- | ip_color_sidebar_content_background_primary_closed | `rgb(96, 196, 198)` | `rgb(96, 196, 198)` |
382
- | ip_color_sidebar_content_border_primary_closed | `rgb(0, 101, 103)` | `rgb(0, 101, 103)` |
383
- | ip_color_sidebar_content_border_primary_opened | `rgb(186, 189, 191)` | `rgb(61, 69, 75)` |
384
- | ip_color_sidebar_state_change_button_icon_primary_closed_default | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
385
- | ip_color_hyperlink_text_inverted_visited_active | `rgb(0, 122, 124)` | `rgb(55, 67, 77)` |
386
- | ip_color_hyperlink_text_inverted_visited_hover | `rgb(143, 212, 213)` | `rgb(85, 104, 119)` |
387
- | ip_color_hyperlink_text_inverted_visited | `rgb(183, 227, 228)` | `rgb(85, 104, 119)` |
388
- | ip_color_hyperlink_text_inverted_active | `rgb(0, 122, 124)` | `rgb(55, 67, 77)` |
389
- | ip_color_hyperlink_text_inverted_hover | `rgb(143, 212, 213)` | `rgb(35, 92, 123)` |
390
- | ip_color_hyperlink_text_inverted | `rgb(143, 212, 213)` | `rgb(35, 92, 123)` |
391
- | ip_color_table_column_header_border_secondary_default | `rgb(111, 118, 122)` | `rgb(80, 87, 93)` |
392
- | ip_color_button_background_primary_active | `rgb(185, 195, 206)` | `rgb(55, 67, 77)` |
393
- | ip_color_button_background_primary_hover | `rgb(201, 208, 217)` | `rgb(50, 61, 70)` |
394
- | ip_color_button_icon_primary_inverse_default | `rgb(205, 213, 220)` | `rgb(205, 213, 220)` |
395
- | ip_color_button_icon_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
396
- | ip_color_button_background_primary_default | `rgb(218, 225, 232)` | `rgb(45, 55, 63)` |
397
- | ip_color_button_text_primary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
398
- | ip_color_button_background_secondary_active | `rgb(225, 229, 234)` | `rgb(55, 67, 77)` |
399
- | ip_color_button_background_secondary_hover | `rgb(233, 236, 240)` | `rgb(45, 55, 63)` |
400
- | ip_color_button_background_secondary_default | `rgb(254, 254, 254)` | `rgb(26, 33, 38)` |
401
- | ip_color_button_icon_secondary_inverse_default | `rgb(205, 213, 220)` | `rgb(205, 213, 220)` |
402
- | ip_color_button_text_secondary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
403
- | ip_color_button_icon_secondary_default | `rgb(61, 80, 102)` | `rgb(205, 213, 220)` |
404
- | ip_color_table_bullet_background_primary_default | `rgb(225, 229, 234)` | `rgb(201, 208, 217)` |
405
- | ip_color_table_bullet_background_secondary_default | `rgb(199, 215, 221)` | `rgb(154, 183, 194)` |
406
- | ip_color_table_bullet_text_primary_default | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
407
- | ip_color_text_primary_blue_inverse | `rgb(205, 213, 220)` | `rgb(61, 80, 102)` |
408
- | ip_color_icon_button_background_primary_default | `rgb(254, 254, 254)` | `rgb(26, 33, 38)` |
409
- | ip_color_tags_progress_unstarted_primary_default | `rgb(243, 243, 243)` | `rgb(200, 200, 200)` |
410
- | ip_color_tags_progress_active_primary_default | `rgb(250, 230, 188)` | `rgb(247, 215, 147)` |
411
- | ip_color_tags_progress_review_primary_default | `rgb(210, 217, 225)` | `rgb(185, 195, 206)` |
412
- | ip_color_tags_progress_blocked_primary_default | `rgb(203, 147, 142)` | `rgb(192, 126, 120)` |
413
- | ip_color_tags_progress_complete_primary_default | `rgb(212, 230, 198)` | `rgb(177, 209, 152)` |
414
- | ip_color_tags_progress_paused_primary_default | `rgb(238, 222, 229)` | `rgb(204, 155, 175)` |
415
- | ip_color_tags_state_unstarted_primary_default | `rgb(243, 243, 243)` | `rgb(200, 200, 200)` |
416
- | ip_color_tags_state_alpha_primary_default | `rgb(238, 222, 229)` | `rgb(204, 155, 175)` |
417
- | ip_color_tags_state_final_primary_default | `rgb(212, 230, 198)` | `rgb(177, 209, 152)` |
418
- | ip_color_tags_state_release_candidate_primary_default | `rgb(210, 217, 225)` | `rgb(185, 195, 206)` |
419
- | ip_color_tags_state_beta_primary_default | `rgb(250, 230, 188)` | `rgb(247, 215, 147)` |
420
- | ip_color_tags_state_deprecated_primary_default | `rgb(203, 147, 142)` | `rgb(192, 126, 120)` |
421
- | ip_color_tags_state_test_primary_default | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
422
- | ip_color_tags_progress_test_primary_default | `rgb(16, 20, 23)` | `rgb(16, 20, 23)` |
423
-
424
- ## Primitive Tokens
425
-
426
- | Variable Name | Desktop Value | Mobile Value |
427
- | ----------------------------------------- | ------------- | ------------- |
428
- | ip_typography_line_height_tight_120 | `120` | `120` |
429
- | ip_typography_font_size_size_12 | `0.75rem` | `0.75rem` |
430
- | ip_typography_letter_spacing_small_0_2 | `0.2px` | `0.2px` |
431
- | ip_typography_font_weight_extra_light_200 | `200` | `200` |
432
- | ip_sizing_kommer | `0px` | `0px` |
433
- | ip_spacing_kommer | `0px` | `0px` |
434
- | ip_typography_letter_spacing_medium_0_3 | `0.3px` | `0.3px` |
435
- | ip_typography_letter_spacing_default_0 | `0px` | `0px` |
436
- | ip_typography_font_size_size_14 | `0.875rem` | `0.875rem` |
437
- | ip_typography_font_size_size_16 | `1rem` | `1rem` |
438
- | ip_typography_font_size_size_18 | `1.125rem` | `1.125rem` |
439
- | ip_typography_font_size_size_20 | `1.25rem` | `1.25rem` |
440
- | ip_typography_font_size_size_24 | `1.5rem` | `1.5rem` |
441
- | ip_typography_font_size_size_28 | `1.75rem` | `1.75rem` |
442
- | ip_typography_font_size_size_32 | `2rem` | `2rem` |
443
- | ip_typography_font_family_primary | `Nunito Sans` | `Nunito Sans` |
444
- | ip_typography_font_family_secondary | `Roboto Mono` | `Roboto Mono` |
445
- | ip_typography_font_weight_light_300 | `300` | `300` |
446
- | ip_typography_font_weight_regular_400 | `400` | `400` |
447
- | ip_typography_font_weight_semi_bold_600 | `600` | `600` |
448
- | ip_typography_font_weight_medium_500 | `500` | `500` |
449
- | ip_typography_font_weight_bold_700 | `700` | `700` |
450
- | ip_typography_letter_spacing_large_0_5 | `0.5px` | `0.5px` |
451
- | ip_typography_letter_spacing_xlarge_0_7 | `0.7px` | `0.7px` |
452
- | ip_typography_line_height_compact_140 | `140` | `140` |
453
- | ip_typography_line_height_normal_160 | `160` | `160` |
454
- | ip_typography_line_height_loose_180 | `180` | `180` |
455
- | ip_typography_font_size_size_40 | `2.5rem` | `2.5rem` |
456
- | ip_typography_font_size_size_48 | `3rem` | `3rem` |
457
- | ip_typography_font_family_tertiary | `Museo Sans` | `Museo Sans` |
458
- | ip_typography_font_size_size_10 | `0.625rem` | `0.625rem` |
459
-
460
- ## Semantic Tokens
461
-
462
- | Variable Name | Value |
463
- | -------------------------------------------------------- | ------------- |
464
- | ip_typography_heading_font_weight_default | `400` |
465
- | ip_typography_heading_letter_spacing_default | `0px` |
466
- | ip_typography_heading_line_height_default | `160` |
467
- | ip_typography_heading_font_size_h1 | `1.5rem` |
468
- | ip_typography_body_line_height_default | `160` |
469
- | ip_typography_body_letter_spacing_default | `0px` |
470
- | ip_typography_body_font_size_small | `0.75rem` |
471
- | ip_typography_body_font_weight_default | `400` |
472
- | ip_typography_heading_font_family_default | `Nunito Sans` |
473
- | ip_typography_caption_line_height_default | `140` |
474
- | ip_typography_caption_letter_spacing_default | `0px` |
475
- | ip_typography_caption_font_weight_default | `400` |
476
- | ip_typography_caption_font_size_default | `0.75rem` |
477
- | ip_typography_mono_spaced_numbers_font_size_default | `0.875rem` |
478
- | ip_typography_mono_spaced_numbers_letter_spacing_default | `0px` |
479
- | ip_typography_mono_spaced_numbers_line_height_default | `160` |
480
- | ip_typography_mono_spaced_numbers_font_weight_default | `400` |
481
- | ip_typography_mono_spaced_numbers_font_family_default | `Roboto Mono` |
482
- | ip_typography_heading_font_size_h2 | `1.25rem` |
483
- | ip_typography_heading_font_size_h3 | `1.125rem` |
484
- | ip_typography_heading_font_size_h4 | `1rem` |
485
- | ip_typography_heading_font_size_h5 | `0.875rem` |
486
- | ip_typography_heading_font_size_h6 | `0.75rem` |
487
- | ip_typography_body_font_family_default | `Nunito Sans` |
488
- | ip_typography_mono_spaced_numbers_font_size_small | `0.75rem` |
489
- | ip_typography_mono_spaced_numbers_font_size_large | `1rem` |
490
- | ip_typography_body_font_size_medium | `0.875rem` |
491
- | ip_typography_body_font_size_large | `1rem` |
492
- | ip_typography_text_paragraph_font_size_large | `1rem` |
493
- | ip_typography_text_paragraph_font_size_medium | `0.875rem` |
494
- | ip_typography_text_paragraph_font_size_small | `0.75rem` |
495
- | ip_typography_text_paragraph_line_height_compact | `140` |
496
- | ip_typography_text_paragraph_font_weight_light | `300` |
497
- | ip_typography_text_paragraph_letter_spacing_default | `0px` |
498
- | ip_typography_text_paragraph_font_family_default | `Nunito Sans` |
499
- | ip_typography_text_paragraph_font_family_math | `Roboto Mono` |
500
- | ip_typography_text_paragraph_font_weight_bold | `600` |
501
- | ip_typography_text_paragraph_font_weight_default | `400` |
502
- | ip_typography_text_paragraph_letter_spacing_medium | `0.3px` |
503
- | ip_typography_text_paragraph_letter_spacing_small | `0.2px` |
504
- | ip_typography_text_paragraph_line_height_default | `160` |
505
- | ip_typography_text_paragraph_line_height_loose | `180` |
506
- | ip_typography_caption_font_family_default | `Nunito Sans` |
507
- | ip_typography_brand_font_size_brand | `1.125rem` |
508
- | ip_typography_brand_line_height_brand | `160` |
509
- | ip_typography_brand_letter_spacing_brand | `0.5px` |
510
- | ip_typography_brand_font_weight_brand | `300` |
511
- | ip_typography_brand_font_family_brand | `Museo Sans` |
512
- | ip_typography_body_font_size_tiny | `0.625rem` |
513
- | ip_typography_caption_font_size_tiny | `0.625rem` |
514
- | ip_typography_mono_spaced_numbers_font_size_tiny | `0.625rem` |
515
- | ip_typography_caption_font_size_medium | `0.875rem` |
516
- | ip_typography_text_paragraph_font_size_tiny | `0.625rem` |
517
- | ip_typography_body_line_height_compact | `140` |
518
- | ip_typography_body_line_height_loose | `180` |
519
- | ip_typography_body_font_size_default | `0.875rem` |