@neo4j-ndl/base 3.7.23 → 4.0.0-alpha.0.c084490

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 (39) hide show
  1. package/lib/cjs/index.js +1 -2
  2. package/lib/cjs/index.js.map +1 -1
  3. package/lib/cjs/tailwind-preset.config.js +34 -1
  4. package/lib/cjs/tailwind-preset.config.js.map +1 -1
  5. package/lib/cjs/tailwindTheme.mjs +16 -66
  6. package/lib/cjs/tailwindTheme.mjs.map +1 -1
  7. package/lib/cjs/tokens/js/tokens-esm.js +491 -478
  8. package/lib/cjs/tokens/js/tokens-esm.js.map +1 -1
  9. package/lib/cjs/tokens/js/tokens.js +494 -479
  10. package/lib/cjs/tokens/js/tokens.js.map +1 -1
  11. package/lib/esm/index.js +1 -2
  12. package/lib/esm/index.js.map +1 -1
  13. package/lib/esm/tailwind-preset.config.js +33 -1
  14. package/lib/esm/tailwind-preset.config.js.map +1 -1
  15. package/lib/esm/tailwindTheme.mjs +16 -64
  16. package/lib/esm/tailwindTheme.mjs.map +1 -1
  17. package/lib/esm/tokens/js/tokens-esm.js +491 -478
  18. package/lib/esm/tokens/js/tokens-esm.js.map +1 -1
  19. package/lib/esm/tokens/js/tokens.js +492 -480
  20. package/lib/esm/tokens/js/tokens.js.map +1 -1
  21. package/lib/neo4j-ds-styles.css +39256 -103698
  22. package/lib/tokens/css/tokens.css +435 -419
  23. package/lib/types/index.d.ts +1 -2
  24. package/lib/types/tokens/js/tokens-esm.d.ts +306 -299
  25. package/lib/types/tokens/js/tokens.d.ts +651 -642
  26. package/package.json +8 -6
  27. package/lib/cjs/tokens/js/storybook-design-token.js +0 -3969
  28. package/lib/cjs/tokens/js/storybook-design-token.js.map +0 -1
  29. package/lib/cjs/typescale.js +0 -147
  30. package/lib/cjs/typescale.js.map +0 -1
  31. package/lib/esm/tokens/js/storybook-design-token.js +0 -3966
  32. package/lib/esm/tokens/js/storybook-design-token.js.map +0 -1
  33. package/lib/esm/typescale.js +0 -144
  34. package/lib/esm/typescale.js.map +0 -1
  35. package/lib/tokens/js/tokens-raw.js +0 -9291
  36. package/lib/tokens/js/tokens.js +0 -637
  37. package/lib/tokens/scss/tokens.scss +0 -427
  38. package/lib/types/tokens/js/storybook-design-token.d.ts +0 -126
  39. package/lib/types/typescale.d.ts +0 -93
package/lib/tokens/css/tokens.css CHANGED
@@ -20,432 +20,448 @@
20
20
  */
21
21
 
22
22
  /**
23
- * Do not edit directly
24
- * Generated on Tue, 19 Aug 2025 14:59:22 GMT
23
+ * Do not edit directly, this file was auto-generated.
25
24
  */
26
25
 
27
26
  :root {
28
- --transitions-values-properties-default: all;
29
- --transitions-values-duration-quick: 100ms;
30
- --transitions-values-duration-slow: 250ms;
31
- --transitions-values-timing-function-default: cubic-bezier(0.420, 0.000, 0.580, 1.000);
32
- --transitions-stripped-quick: 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
33
- --transitions-stripped-slow: 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
34
- --transitions-full-quick: all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
35
- --transitions-full-slow: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
27
+ --breakpoint-5xs: 320px;
28
+ --breakpoint-4xs: 360px;
29
+ --breakpoint-3xs: 375px;
30
+ --breakpoint-2xs: 512px;
31
+ --breakpoint-xs: 768px;
32
+ --breakpoint-sm: 864px;
33
+ --breakpoint-md: 1024px;
34
+ --breakpoint-lg: 1280px;
35
+ --breakpoint-xl: 1440px;
36
+ --breakpoint-2xl: 1680px;
37
+ --breakpoint-3xl: 1920px;
38
+ --code-light-comment: #5e636aff;
39
+ --code-light-keyword: #3f7824ff;
40
+ --code-light-keyword-literal: #3f7824ff;
41
+ --code-light-operator: #3f7824ff;
42
+ --code-light-label: #d43300ff;
43
+ --code-light-predicate-function: #0a6190ff;
44
+ --code-light-function: #0a6190ff;
45
+ --code-light-procedure: #0a6190ff;
46
+ --code-light-string-literal: #986400ff;
47
+ --code-light-number-literal: #754ec8ff;
48
+ --code-light-boolean-literal: #754ec8ff;
49
+ --code-light-param-value: #754ec8ff;
50
+ --code-light-property: #730e00ff;
51
+ --code-dark-comment: #959aa1ff;
52
+ --code-dark-keyword: #ffc450ff;
53
+ --code-dark-keyword-literal: #ffc450ff;
54
+ --code-dark-operator: #ffc450ff;
55
+ --code-dark-label: #f96746ff;
56
+ --code-dark-predicate-function: #8fe3e8ff;
57
+ --code-dark-function: #8fe3e8ff;
58
+ --code-dark-procedure: #8fe3e8ff;
59
+ --code-dark-string-literal: #90cb62ff;
60
+ --code-dark-number-literal: #ccb4ffff;
61
+ --code-dark-boolean-literal: #ccb4ffff;
62
+ --code-dark-param-value: #ccb4ffff;
63
+ --code-dark-property: #ffaa97ff;
64
+ --content-extra-light-max-width: 768px;
65
+ --content-light-max-width: 1024px;
66
+ --content-heavy-max-width: 1680px;
67
+ --content-max-max-width: 1920px;
68
+ --categorical-1: #55bdc5ff;
69
+ --categorical-2: #4d49cbff;
70
+ --categorical-3: #dc8b39ff;
71
+ --categorical-4: #c9458dff;
72
+ --categorical-5: #8e8cf3ff;
73
+ --categorical-6: #78de7cff;
74
+ --categorical-7: #3f80e3ff;
75
+ --categorical-8: #673fabff;
76
+ --categorical-9: #dbbf40ff;
77
+ --categorical-10: #bf732dff;
78
+ --categorical-11: #478a6eff;
79
+ --categorical-12: #ade86bff;
80
+ --graph-1: #ffdf81ff;
81
+ --graph-2: #c990c0ff;
82
+ --graph-3: #f79767ff;
83
+ --graph-4: #56c7e4ff;
84
+ --graph-5: #f16767ff;
85
+ --graph-6: #d8c7aeff;
86
+ --graph-7: #8dcc93ff;
87
+ --graph-8: #ecb4c9ff;
88
+ --graph-9: #4d8ddaff;
89
+ --graph-10: #ffc354ff;
90
+ --graph-11: #da7294ff;
91
+ --graph-12: #579380ff;
92
+ --motion-duration-quick: 100ms;
93
+ --motion-duration-slow: 250ms;
94
+ --motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
95
+ --motion-transition-quick: 100ms cubic-bezier(0.42, 0, 0.58, 1) 0ms;
96
+ --motion-transition-slow: 250ms cubic-bezier(0.42, 0, 0.58, 1) 0ms;
97
+ --motion-transition-delayed: 100ms cubic-bezier(0.42, 0, 0.58, 1) 100ms;
98
+ --palette-baltic-10: #e7fafbff; /** lightest shade of brand primary color */
99
+ --palette-baltic-15: #c3f8fbff;
100
+ --palette-baltic-20: #8fe3e8ff;
101
+ --palette-baltic-25: #5cc3c9ff;
102
+ --palette-baltic-30: #5db3bfff;
103
+ --palette-baltic-35: #51a6b1ff;
104
+ --palette-baltic-40: #4c99a4ff;
105
+ --palette-baltic-45: #30839dff;
106
+ --palette-baltic-50: #0a6190ff;
107
+ --palette-baltic-55: #02507bff;
108
+ --palette-baltic-60: #014063ff; /** default brand primary color, called dark ocean */
109
+ --palette-baltic-65: #262f31ff;
110
+ --palette-baltic-70: #081e2bff;
111
+ --palette-baltic-75: #041823ff;
112
+ --palette-baltic-80: #01121cff;
113
+ --palette-hibiscus-10: #ffe9e7ff;
114
+ --palette-hibiscus-15: #ffd7d2ff;
115
+ --palette-hibiscus-20: #ffaa97ff;
116
+ --palette-hibiscus-25: #ff8e6aff;
117
+ --palette-hibiscus-30: #f96746ff;
118
+ --palette-hibiscus-35: #e84e2cff;
119
+ --palette-hibiscus-40: #d43300ff;
120
+ --palette-hibiscus-45: #bb2d00ff;
121
+ --palette-hibiscus-50: #961200ff;
122
+ --palette-hibiscus-55: #730e00ff;
123
+ --palette-hibiscus-60: #432520ff;
124
+ --palette-hibiscus-65: #4e0900ff;
125
+ --palette-hibiscus-70: #3f0800ff;
126
+ --palette-hibiscus-75: #360700ff;
127
+ --palette-hibiscus-80: #280500ff;
128
+ --palette-forest-10: #e7fcd7ff;
129
+ --palette-forest-15: #bcf194ff;
130
+ --palette-forest-20: #90cb62ff;
131
+ --palette-forest-25: #80bb53ff;
132
+ --palette-forest-30: #6fa646ff;
133
+ --palette-forest-35: #5b992bff;
134
+ --palette-forest-40: #4d8622ff;
135
+ --palette-forest-45: #3f7824ff;
136
+ --palette-forest-50: #296127ff;
137
+ --palette-forest-55: #145439ff;
138
+ --palette-forest-60: #0c4d31ff;
139
+ --palette-forest-65: #0a4324ff;
140
+ --palette-forest-70: #262d24ff;
141
+ --palette-forest-75: #052618ff;
142
+ --palette-forest-80: #021d11ff;
143
+ --palette-lemon-10: #fffad1ff;
144
+ --palette-lemon-15: #fff8bdff;
145
+ --palette-lemon-20: #fff178ff;
146
+ --palette-lemon-25: #ffe500ff;
147
+ --palette-lemon-30: #ffd600ff;
148
+ --palette-lemon-35: #f4c318ff;
149
+ --palette-lemon-40: #d7aa0aff;
150
+ --palette-lemon-45: #b48409ff;
151
+ --palette-lemon-50: #996e00ff;
152
+ --palette-lemon-55: #765500ff;
153
+ --palette-lemon-60: #614600ff;
154
+ --palette-lemon-65: #4d3700ff;
155
+ --palette-lemon-70: #312e1aff;
156
+ --palette-lemon-75: #2e2100ff;
157
+ --palette-lemon-80: #251b00ff;
158
+ --palette-lavender-10: #f7f3ffff;
159
+ --palette-lavender-15: #e9deffff;
160
+ --palette-lavender-20: #ccb4ffff;
161
+ --palette-lavender-25: #b38effff;
162
+ --palette-lavender-30: #a07becff;
163
+ --palette-lavender-35: #8c68d9ff;
164
+ --palette-lavender-40: #754ec8ff;
165
+ --palette-lavender-45: #5a34aaff;
166
+ --palette-lavender-50: #4b2894ff;
167
+ --palette-lavender-55: #3b1982ff;
168
+ --palette-lavender-60: #2c2a34ff;
169
+ --palette-lavender-65: #220954ff;
170
+ --palette-lavender-70: #170146ff;
171
+ --palette-lavender-75: #0e002dff;
172
+ --palette-lavender-80: #09001cff;
173
+ --palette-marigold-10: #fff0d2ff;
174
+ --palette-marigold-15: #ffde9dff;
175
+ --palette-marigold-20: #ffcf72ff;
176
+ --palette-marigold-25: #ffc450ff;
177
+ --palette-marigold-30: #ffb422ff;
178
+ --palette-marigold-35: #ffa901ff;
179
+ --palette-marigold-40: #ec9c00ff;
180
+ --palette-marigold-45: #da9105ff;
181
+ --palette-marigold-50: #ba7a00ff;
182
+ --palette-marigold-55: #986400ff;
183
+ --palette-marigold-60: #795000ff;
184
+ --palette-marigold-65: #624100ff;
185
+ --palette-marigold-70: #543800ff;
186
+ --palette-marigold-75: #422c00ff;
187
+ --palette-marigold-80: #251900ff;
188
+ --palette-earth-10: #fff7f0ff;
189
+ --palette-earth-15: #fdeddaff;
190
+ --palette-earth-20: #ffe1c5ff;
191
+ --palette-earth-25: #f8d1aeff;
192
+ --palette-earth-30: #ecbf96ff;
193
+ --palette-earth-35: #e0ae7fff;
194
+ --palette-earth-40: #d19660ff;
195
+ --palette-earth-45: #af7c4dff;
196
+ --palette-earth-50: #8d5d31ff;
197
+ --palette-earth-55: #763f18ff;
198
+ --palette-earth-60: #66310bff;
199
+ --palette-earth-65: #5b2b09ff;
200
+ --palette-earth-70: #481f01ff;
201
+ --palette-earth-75: #361700ff;
202
+ --palette-earth-80: #220e00ff;
203
+ --palette-neutral-10: #ffffffff;
204
+ --palette-neutral-15: #f5f6f6ff;
205
+ --palette-neutral-20: #e2e3e5ff;
206
+ --palette-neutral-25: #cfd1d4ff;
207
+ --palette-neutral-30: #bbbec3ff;
208
+ --palette-neutral-35: #a8acb2ff;
209
+ --palette-neutral-40: #959aa1ff;
210
+ --palette-neutral-45: #818790ff;
211
+ --palette-neutral-50: #6f757eff;
212
+ --palette-neutral-55: #5e636aff;
213
+ --palette-neutral-60: #4d5157ff;
214
+ --palette-neutral-65: #3c3f44ff;
215
+ --palette-neutral-70: #212325ff;
216
+ --palette-neutral-75: #1a1b1dff;
217
+ --palette-neutral-80: #09090aff;
218
+ --palette-beige-10: #fffcf4ff;
219
+ --palette-beige-20: #fff7e3ff;
220
+ --palette-beige-30: #f2ead4ff;
221
+ --palette-beige-40: #c1b9a0ff;
222
+ --palette-beige-50: #999384ff;
223
+ --palette-beige-60: #666050ff;
224
+ --palette-beige-70: #3f3824ff;
225
+ --palette-highlights-yellow: #faff00ff;
226
+ --palette-highlights-periwinkle: #6a82ffff;
36
227
  --border-radius-none: 0px;
37
228
  --border-radius-sm: 4px;
38
229
  --border-radius-md: 6px;
39
230
  --border-radius-lg: 8px;
40
- --border-radius-xl: 10px;
41
- --border-radius-1xl: 12px;
42
- --border-radius-2xl: 14px;
43
- --border-radius-3xl: 16px;
44
- --border-radius-4xl: 18px;
45
- --border-radius-5xl: 20px;
231
+ --border-radius-xl: 12px;
232
+ --border-radius-2xl: 16px;
233
+ --border-radius-3xl: 24px;
46
234
  --border-radius-full: 9999px;
47
- --breakpoint-next-one-xs-min: 320px;
48
- --breakpoint-next-one-xs-med: 360px;
49
- --breakpoint-next-one-xs-max: 375px;
50
- --breakpoint-next-one-sm-min: 512px;
51
- --breakpoint-next-one-sm-med: 768px;
52
- --breakpoint-next-one-sm-max: 864px;
53
- --breakpoint-next-one-md-min: 1024px;
54
- --breakpoint-next-one-md-med: 1280px;
55
- --breakpoint-next-one-md-max: 1440px;
56
- --breakpoint-next-one-lg-min: 1680px;
57
- --breakpoint-next-one-lg-max: 1920px;
58
- --breakpoint-next-two-5xs: 320px;
59
- --breakpoint-next-two-4xs: 360px;
60
- --breakpoint-next-two-3xs: 375px;
61
- --breakpoint-next-two-2xs: 512px;
62
- --breakpoint-next-two-xs: 768px;
63
- --breakpoint-next-two-sm: 864px;
64
- --breakpoint-next-two-md: 1024px;
65
- --breakpoint-next-two-lg: 1280px;
66
- --breakpoint-next-two-xl: 1440px;
67
- --breakpoint-next-two-2xl: 1680px;
68
- --breakpoint-next-two-3xl: 1920px;
69
- --breakpoints-xs: 450px; /* Extra small screen / phone, only one not included with Tailwind CSS */
70
- --breakpoints-sm: 640px; /* Check here: https://tailwindcss.com/docs/responsive-design */
71
- --breakpoints-md: 768px;
72
- --breakpoints-lg: 1024px;
73
- --breakpoints-xl: 1280px;
74
- --breakpoints-2xl: 1536px;
75
- --palette-categorical-1: #55BDC5;
76
- --palette-categorical-2: #4D49CB;
77
- --palette-categorical-3: #DC8B39;
78
- --palette-categorical-4: #C9458D;
79
- --palette-categorical-5: #8E8CF3;
80
- --palette-categorical-6: #78DE7C;
81
- --palette-categorical-7: #3F80E3;
82
- --palette-categorical-8: #673FAB;
83
- --palette-categorical-9: #DBBF40;
84
- --palette-categorical-10: #BF732D;
85
- --palette-categorical-11: #478A6E;
86
- --palette-categorical-12: #ADE86B;
87
- --palette-code-light-comment: 94 99 106 / 1;
88
- --palette-code-light-keyword: 63 120 36 / 1;
89
- --palette-code-light-keyword-literal: 63 120 36 / 1;
90
- --palette-code-light-operator: 63 120 36 / 1;
91
- --palette-code-light-label: 212 51 0 / 1;
92
- --palette-code-light-predicate-function: 10 97 144 / 1;
93
- --palette-code-light-function: 10 97 144 / 1;
94
- --palette-code-light-procedure: 10 97 144 / 1;
95
- --palette-code-light-string-literal: 152 100 0 / 1;
96
- --palette-code-light-number-literal: 117 78 200 / 1;
97
- --palette-code-light-boolean-literal: 117 78 200 / 1;
98
- --palette-code-light-param-value: 117 78 200 / 1;
99
- --palette-code-light-property: 115 14 0 / 1;
100
- --palette-code-dark-comment: 149 154 161 / 1;
101
- --palette-code-dark-keyword: 255 196 80 / 1;
102
- --palette-code-dark-keyword-literal: 255 196 80 / 1;
103
- --palette-code-dark-operator: 255 196 80 / 1;
104
- --palette-code-dark-label: 249 103 70 / 1;
105
- --palette-code-dark-predicate-function: 143 227 232 / 1;
106
- --palette-code-dark-function: 143 227 232 / 1;
107
- --palette-code-dark-procedure: 143 227 232 / 1;
108
- --palette-code-dark-string-literal: 144 203 98 / 1;
109
- --palette-code-dark-number-literal: 204 180 255 / 1;
110
- --palette-code-dark-boolean-literal: 204 180 255 / 1;
111
- --palette-code-dark-param-value: 204 180 255 / 1;
112
- --palette-code-dark-property: 255 170 151 / 1;
113
- --palette-graph-1: #FFDF81;
114
- --palette-graph-2: #C990C0;
115
- --palette-graph-3: #F79767;
116
- --palette-graph-4: #56C7E4;
117
- --palette-graph-5: #F16767;
118
- --palette-graph-6: #D8C7AE;
119
- --palette-graph-7: #8DCC93;
120
- --palette-graph-8: #ECB4C9;
121
- --palette-graph-9: #4D8DDA;
122
- --palette-graph-10: #FFC354;
123
- --palette-graph-11: #DA7294;
124
- --palette-graph-12: #579380;
125
- --colors-baltic-10: 231 250 251 / 1; /* Original value: #E7FAFB, alpha: 1 */
126
- --colors-baltic-15: 195 248 251 / 1; /* Original value: #C3F8FB, alpha: 1 */
127
- --colors-baltic-20: 143 227 232 / 1; /* Original value: #8FE3E8, alpha: 1 */
128
- --colors-baltic-25: 92 195 201 / 1; /* Original value: #5CC3C9, alpha: 1 */
129
- --colors-baltic-30: 93 179 191 / 1; /* Original value: #5DB3BF, alpha: 1 */
130
- --colors-baltic-35: 81 166 177 / 1; /* Original value: #51A6B1, alpha: 1 */
131
- --colors-baltic-40: 76 153 164 / 1; /* Original value: #4C99A4, alpha: 1 */
132
- --colors-baltic-45: 48 131 157 / 1; /* Original value: #30839D, alpha: 1 */
133
- --colors-baltic-50: 10 97 144 / 1; /* Original value: #0A6190, alpha: 1 */
134
- --colors-baltic-55: 2 80 123 / 1; /* Original value: #02507B, alpha: 1 */
135
- --colors-baltic-60: 1 64 99 / 1; /* Original value: #014063, alpha: 1 */
136
- --colors-baltic-65: 38 47 49 / 1; /* Original value: #262F31, alpha: 1 */
137
- --colors-baltic-70: 8 30 43 / 1; /* Original value: #081E2B, alpha: 1 */
138
- --colors-baltic-75: 4 24 35 / 1; /* Original value: #041823, alpha: 1 */
139
- --colors-baltic-80: 1 18 28 / 1; /* Original value: #01121C, alpha: 1 */
140
- --colors-hibiscus-10: 255 233 231 / 1; /* Original value: #FFE9E7, alpha: 1 */
141
- --colors-hibiscus-15: 255 215 210 / 1; /* Original value: #FFD7D2, alpha: 1 */
142
- --colors-hibiscus-20: 255 170 151 / 1; /* Original value: #FFAA97, alpha: 1 */
143
- --colors-hibiscus-25: 255 142 106 / 1; /* Original value: #FF8E6A, alpha: 1 */
144
- --colors-hibiscus-30: 249 103 70 / 1; /* Original value: #F96746, alpha: 1 */
145
- --colors-hibiscus-35: 232 78 44 / 1; /* Original value: #E84E2C, alpha: 1 */
146
- --colors-hibiscus-40: 212 51 0 / 1; /* Original value: #D43300, alpha: 1 */
147
- --colors-hibiscus-45: 187 45 0 / 1; /* Original value: #BB2D00, alpha: 1 */
148
- --colors-hibiscus-50: 150 18 0 / 1; /* Original value: #961200, alpha: 1 */
149
- --colors-hibiscus-55: 115 14 0 / 1; /* Original value: #730E00, alpha: 1 */
150
- --colors-hibiscus-60: 67 37 32 / 1; /* Original value: #432520, alpha: 1 */
151
- --colors-hibiscus-65: 78 9 0 / 1; /* Original value: #4E0900, alpha: 1 */
152
- --colors-hibiscus-70: 63 8 0 / 1; /* Original value: #3F0800, alpha: 1 */
153
- --colors-hibiscus-75: 54 7 0 / 1; /* Original value: #360700, alpha: 1 */
154
- --colors-hibiscus-80: 40 5 0 / 1; /* Original value: #280500, alpha: 1 */
155
- --colors-forest-10: 231 252 215 / 1; /* Original value: #E7FCD7, alpha: 1 */
156
- --colors-forest-15: 188 241 148 / 1; /* Original value: #BCF194, alpha: 1 */
157
- --colors-forest-20: 144 203 98 / 1; /* Original value: #90CB62, alpha: 1 */
158
- --colors-forest-25: 128 187 83 / 1; /* Original value: #80BB53, alpha: 1 */
159
- --colors-forest-30: 111 166 70 / 1; /* Original value: #6FA646, alpha: 1 */
160
- --colors-forest-35: 91 153 43 / 1; /* Original value: #5B992B, alpha: 1 */
161
- --colors-forest-40: 77 134 34 / 1; /* Original value: #4D8622, alpha: 1 */
162
- --colors-forest-45: 63 120 36 / 1; /* Original value: #3F7824, alpha: 1 */
163
- --colors-forest-50: 41 97 39 / 1; /* Original value: #296127, alpha: 1 */
164
- --colors-forest-55: 20 84 57 / 1; /* Original value: #145439, alpha: 1 */
165
- --colors-forest-60: 12 77 49 / 1; /* Original value: #0C4D31, alpha: 1 */
166
- --colors-forest-65: 10 67 36 / 1; /* Original value: #0A4324, alpha: 1 */
167
- --colors-forest-70: 38 45 36 / 1; /* Original value: #262D24, alpha: 1 */
168
- --colors-forest-75: 5 38 24 / 1; /* Original value: #052618, alpha: 1 */
169
- --colors-forest-80: 2 29 17 / 1; /* Original value: #021D11, alpha: 1 */
170
- --colors-lemon-10: 255 250 209 / 1; /* Original value: #FFFAD1, alpha: 1 */
171
- --colors-lemon-15: 255 248 189 / 1; /* Original value: #FFF8BD, alpha: 1 */
172
- --colors-lemon-20: 255 241 120 / 1; /* Original value: #FFF178, alpha: 1 */
173
- --colors-lemon-25: 255 229 0 / 1; /* Original value: #FFE500, alpha: 1 */
174
- --colors-lemon-30: 255 214 0 / 1; /* Original value: #FFD600, alpha: 1 */
175
- --colors-lemon-35: 244 195 24 / 1; /* Original value: #F4C318, alpha: 1 */
176
- --colors-lemon-40: 215 170 10 / 1; /* Original value: #D7AA0A, alpha: 1 */
177
- --colors-lemon-45: 180 132 9 / 1; /* Original value: #B48409, alpha: 1 */
178
- --colors-lemon-50: 153 110 0 / 1; /* Original value: #996E00, alpha: 1 */
179
- --colors-lemon-55: 118 85 0 / 1; /* Original value: #765500, alpha: 1 */
180
- --colors-lemon-60: 97 70 0 / 1; /* Original value: #614600, alpha: 1 */
181
- --colors-lemon-65: 77 55 0 / 1; /* Original value: #4D3700, alpha: 1 */
182
- --colors-lemon-70: 49 46 26 / 1; /* Original value: #312E1A, alpha: 1 */
183
- --colors-lemon-75: 46 33 0 / 1; /* Original value: #2E2100, alpha: 1 */
184
- --colors-lemon-80: 37 27 0 / 1; /* Original value: #251B00, alpha: 1 */
185
- --colors-lavender-10: 247 243 255 / 1; /* Original value: #F7F3FF, alpha: 1 */
186
- --colors-lavender-15: 233 222 255 / 1; /* Original value: #E9DEFF, alpha: 1 */
187
- --colors-lavender-20: 204 180 255 / 1; /* Original value: #CCB4FF, alpha: 1 */
188
- --colors-lavender-25: 179 142 255 / 1; /* Original value: #B38EFF, alpha: 1 */
189
- --colors-lavender-30: 160 123 236 / 1; /* Original value: #A07BEC, alpha: 1 */
190
- --colors-lavender-35: 140 104 217 / 1; /* Original value: #8C68D9, alpha: 1 */
191
- --colors-lavender-40: 117 78 200 / 1; /* Original value: #754EC8, alpha: 1 */
192
- --colors-lavender-45: 90 52 170 / 1; /* Original value: #5A34AA, alpha: 1 */
193
- --colors-lavender-50: 75 40 148 / 1; /* Original value: #4B2894, alpha: 1 */
194
- --colors-lavender-55: 59 25 130 / 1; /* Original value: #3B1982, alpha: 1 */
195
- --colors-lavender-60: 44 42 52 / 1; /* Original value: #2C2A34, alpha: 1 */
196
- --colors-lavender-65: 34 9 84 / 1; /* Original value: #220954, alpha: 1 */
197
- --colors-lavender-70: 23 1 70 / 1; /* Original value: #170146, alpha: 1 */
198
- --colors-lavender-75: 14 0 45 / 1; /* Original value: #0E002D, alpha: 1 */
199
- --colors-lavender-80: 9 0 28 / 1; /* Original value: #09001C, alpha: 1 */
200
- --colors-marigold-10: 255 240 210 / 1; /* Original value: #FFF0D2, alpha: 1 */
201
- --colors-marigold-15: 255 222 157 / 1; /* Original value: #FFDE9D, alpha: 1 */
202
- --colors-marigold-20: 255 207 114 / 1; /* Original value: #FFCF72, alpha: 1 */
203
- --colors-marigold-25: 255 196 80 / 1; /* Original value: #FFC450, alpha: 1 */
204
- --colors-marigold-30: 255 180 34 / 1; /* Original value: #FFB422, alpha: 1 */
205
- --colors-marigold-35: 255 169 1 / 1; /* Original value: #FFA901, alpha: 1 */
206
- --colors-marigold-40: 236 156 0 / 1; /* Original value: #EC9C00, alpha: 1 */
207
- --colors-marigold-45: 218 145 5 / 1; /* Original value: #DA9105, alpha: 1 */
208
- --colors-marigold-50: 186 122 0 / 1; /* Original value: #BA7A00, alpha: 1 */
209
- --colors-marigold-55: 152 100 0 / 1; /* Original value: #986400, alpha: 1 */
210
- --colors-marigold-60: 121 80 0 / 1; /* Original value: #795000, alpha: 1 */
211
- --colors-marigold-65: 98 65 0 / 1; /* Original value: #624100, alpha: 1 */
212
- --colors-marigold-70: 84 56 0 / 1; /* Original value: #543800, alpha: 1 */
213
- --colors-marigold-75: 66 44 0 / 1; /* Original value: #422C00, alpha: 1 */
214
- --colors-marigold-80: 37 25 0 / 1; /* Original value: #251900, alpha: 1 */
215
- --colors-earth-10: 255 247 240 / 1; /* Original value: #FFF7F0, alpha: 1 */
216
- --colors-earth-15: 253 237 218 / 1; /* Original value: #FDEDDA, alpha: 1 */
217
- --colors-earth-20: 255 225 197 / 1; /* Original value: #FFE1C5, alpha: 1 */
218
- --colors-earth-25: 248 209 174 / 1; /* Original value: #F8D1AE, alpha: 1 */
219
- --colors-earth-30: 236 191 150 / 1; /* Original value: #ECBF96, alpha: 1 */
220
- --colors-earth-35: 224 174 127 / 1; /* Original value: #E0AE7F, alpha: 1 */
221
- --colors-earth-40: 209 150 96 / 1; /* Original value: #D19660, alpha: 1 */
222
- --colors-earth-45: 175 124 77 / 1; /* Original value: #AF7C4D, alpha: 1 */
223
- --colors-earth-50: 141 93 49 / 1; /* Original value: #8D5D31, alpha: 1 */
224
- --colors-earth-55: 118 63 24 / 1; /* Original value: #763F18, alpha: 1 */
225
- --colors-earth-60: 102 49 11 / 1; /* Original value: #66310B, alpha: 1 */
226
- --colors-earth-65: 91 43 9 / 1; /* Original value: #5B2B09, alpha: 1 */
227
- --colors-earth-70: 72 31 1 / 1; /* Original value: #481F01, alpha: 1 */
228
- --colors-earth-75: 54 23 0 / 1; /* Original value: #361700, alpha: 1 */
229
- --colors-earth-80: 34 14 0 / 1; /* Original value: #220E00, alpha: 1 */
230
- --colors-neutral-10: 255 255 255 / 1; /* Original value: #FFFFFF, alpha: 1 */
231
- --colors-neutral-15: 245 246 246 / 1; /* Original value: #F5F6F6, alpha: 1 */
232
- --colors-neutral-20: 226 227 229 / 1; /* Original value: #E2E3E5, alpha: 1 */
233
- --colors-neutral-25: 207 209 212 / 1; /* Original value: #CFD1D4, alpha: 1 */
234
- --colors-neutral-30: 187 190 195 / 1; /* Original value: #BBBEC3, alpha: 1 */
235
- --colors-neutral-35: 168 172 178 / 1; /* Original value: #A8ACB2, alpha: 1 */
236
- --colors-neutral-40: 149 154 161 / 1; /* Original value: #959AA1, alpha: 1 */
237
- --colors-neutral-45: 129 135 144 / 1; /* Original value: #818790, alpha: 1 */
238
- --colors-neutral-50: 111 117 126 / 1; /* Original value: #6F757E, alpha: 1 */
239
- --colors-neutral-55: 94 99 106 / 1; /* Original value: #5E636A, alpha: 1 */
240
- --colors-neutral-60: 77 81 87 / 1; /* Original value: #4D5157, alpha: 1 */
241
- --colors-neutral-65: 60 63 68 / 1; /* Original value: #3C3F44, alpha: 1 */
242
- --colors-neutral-70: 33 35 37 / 1; /* Original value: #212325, alpha: 1 */
243
- --colors-neutral-75: 26 27 29 / 1; /* Original value: #1A1B1D, alpha: 1 */
244
- --colors-neutral-80: 9 9 10 / 1; /* Original value: #09090A, alpha: 1 */
245
- --colors-beige-10: 255 252 244 / 1; /* Original value: #FFFCF4, alpha: 1 */
246
- --colors-beige-20: 255 247 227 / 1; /* Original value: #FFF7E3, alpha: 1 */
247
- --colors-beige-30: 242 234 212 / 1; /* Original value: #F2EAD4, alpha: 1 */
248
- --colors-beige-40: 193 185 160 / 1; /* Original value: #C1B9A0, alpha: 1 */
249
- --colors-beige-50: 153 147 132 / 1; /* Original value: #999384, alpha: 1 */
250
- --colors-beige-60: 102 96 80 / 1; /* Original value: #666050, alpha: 1 */
251
- --colors-beige-70: 63 56 36 / 1; /* Original value: #3F3824, alpha: 1 */
252
- --colors-highlights-yellow: 250 255 0 / 1; /* Original value: #FAFF00, alpha: 1 */
253
- --colors-highlights-periwinkle: 106 130 255 / 1; /* Original value: #6A82FF, alpha: 1 */
254
- --content-max-width-next-extra-light: 768px;
255
- --content-max-width-next-light: 1024px;
256
- --content-max-width-next-heavy: 1680px;
257
- --content-max-width-next-max: 1920px;
258
- --content-max-width-next-full: 100%;
259
- --theme-dark-box-shadow-raised: 0px 1px 2px 0px rgba(9, 9, 10, 0.50);
260
- --theme-dark-box-shadow-overlay: 0px 8px 20px 0px rgba(9, 9, 10, 0.50);
261
- --theme-dark-palette-neutral-text-weakest: 129 135 144 / 1; /* Original value: 129 135 144 / 1, alpha: 1 */
262
- --theme-dark-palette-neutral-text-weaker: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
263
- --theme-dark-palette-neutral-text-weak: 207 209 212 / 1; /* Original value: 207 209 212 / 1, alpha: 1 */
264
- --theme-dark-palette-neutral-text-default: 245 246 246 / 1; /* Original value: 245 246 246 / 1, alpha: 1 */
265
- --theme-dark-palette-neutral-text-inverse: 26 27 29 / 1; /* Original value: 26 27 29 / 1, alpha: 1 */
266
- --theme-dark-palette-neutral-icon: 207 209 212 / 1; /* Original value: 207 209 212 / 1, alpha: 1 */
267
- --theme-dark-palette-neutral-bg-weak: 33 35 37 / 1; /* Original value: 33 35 37 / 1, alpha: 1 */
268
- --theme-dark-palette-neutral-bg-default: 26 27 29 / 1; /* Original value: 26 27 29 / 1, alpha: 1 */
269
- --theme-dark-palette-neutral-bg-strong: 60 63 68 / 1; /* Original value: 60 63 68 / 1, alpha: 1 */
270
- --theme-dark-palette-neutral-bg-stronger: 111 117 126 / 1; /* Original value: 111 117 126 / 1, alpha: 1 */
271
- --theme-dark-palette-neutral-bg-strongest: 245 246 246 / 1; /* Original value: 245 246 246 / 1, alpha: 1 */
272
- --theme-dark-palette-neutral-bg-status: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
273
- --theme-dark-palette-neutral-bg-on-bg-weak: 129 135 144 / 0.08; /* Original value: 129 135 144 / 1, alpha: 0.08 */
274
- --theme-dark-palette-neutral-border-weak: 60 63 68 / 1; /* Original value: 60 63 68 / 1, alpha: 1 */
275
- --theme-dark-palette-neutral-border-strong: 111 117 126 / 1; /* Original value: 111 117 126 / 1, alpha: 1 */
276
- --theme-dark-palette-neutral-border-strongest: 187 190 195 / 1; /* Original value: 187 190 195 / 1, alpha: 1 */
277
- --theme-dark-palette-neutral-hover: 149 154 161 / 0.1; /* Original value: 149 154 161 / 1, alpha: 0.1 */
278
- --theme-dark-palette-neutral-pressed: 149 154 161 / 0.2; /* Original value: 149 154 161 / 1, alpha: 0.2 */
279
- --theme-dark-palette-primary-text: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
280
- --theme-dark-palette-primary-icon: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
281
- --theme-dark-palette-primary-bg-weak: 38 47 49 / 1; /* Original value: 38 47 49 / 1, alpha: 1 */
282
- --theme-dark-palette-primary-bg-strong: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
283
- --theme-dark-palette-primary-bg-status: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
284
- --theme-dark-palette-primary-bg-selected: 38 47 49 / 1; /* Original value: 38 47 49 / 1, alpha: 1 */
285
- --theme-dark-palette-primary-border-strong: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
286
- --theme-dark-palette-primary-border-weak: 2 80 123 / 1; /* Original value: 2 80 123 / 1, alpha: 1 */
287
- --theme-dark-palette-primary-focus: 93 179 191 / 1; /* Original value: 93 179 191 / 1, alpha: 1 */
288
- --theme-dark-palette-primary-hover-weak: 143 227 232 / 0.08; /* Original value: 143 227 232 / 1, alpha: 0.08 */
289
- --theme-dark-palette-primary-hover-strong: 93 179 191 / 1; /* Original value: 93 179 191 / 1, alpha: 1 */
290
- --theme-dark-palette-primary-pressed-weak: 143 227 232 / 0.12; /* Original value: 143 227 232 / 1, alpha: 0.12 */
291
- --theme-dark-palette-primary-pressed-strong: 76 153 164 / 1; /* Original value: 76 153 164 / 1, alpha: 1 */
292
- --theme-dark-palette-danger-text: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
293
- --theme-dark-palette-danger-icon: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
294
- --theme-dark-palette-danger-bg-strong: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
295
- --theme-dark-palette-danger-bg-weak: 67 37 32 / 1; /* Original value: 67 37 32 / 1, alpha: 1 */
296
- --theme-dark-palette-danger-bg-status: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
297
- --theme-dark-palette-danger-border-strong: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
298
- --theme-dark-palette-danger-border-weak: 115 14 0 / 1; /* Original value: 115 14 0 / 1, alpha: 1 */
299
- --theme-dark-palette-danger-hover-weak: 255 170 151 / 0.08; /* Original value: 255 170 151 / 1, alpha: 0.08 */
300
- --theme-dark-palette-danger-hover-strong: 249 103 70 / 1; /* Original value: 249 103 70 / 1, alpha: 1 */
301
- --theme-dark-palette-danger-pressed-weak: 255 170 151 / 0.12; /* Original value: 255 170 151 / 1, alpha: 0.12 */
302
- --theme-dark-palette-danger-pressed-strong: 232 78 44 / 1; /* Original value: 232 78 44 / 1, alpha: 1 */
303
- --theme-dark-palette-warning-text: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
304
- --theme-dark-palette-warning-icon: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
305
- --theme-dark-palette-warning-bg-strong: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
306
- --theme-dark-palette-warning-bg-weak: 49 46 26 / 1; /* Original value: 49 46 26 / 1, alpha: 1 */
307
- --theme-dark-palette-warning-bg-status: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
308
- --theme-dark-palette-warning-border-strong: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
309
- --theme-dark-palette-warning-border-weak: 118 85 0 / 1; /* Original value: 118 85 0 / 1, alpha: 1 */
310
- --theme-dark-palette-success-text: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
311
- --theme-dark-palette-success-icon: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
312
- --theme-dark-palette-success-bg-strong: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
313
- --theme-dark-palette-success-bg-weak: 38 45 36 / 1; /* Original value: 38 45 36 / 1, alpha: 1 */
314
- --theme-dark-palette-success-bg-status: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
315
- --theme-dark-palette-success-border-strong: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
316
- --theme-dark-palette-success-border-weak: 41 97 39 / 1; /* Original value: 41 97 39 / 1, alpha: 1 */
317
- --theme-dark-palette-discovery-text: 204 180 255 / 1; /* Original value: 204 180 255 / 1, alpha: 1 */
318
- --theme-dark-palette-discovery-icon: 204 180 255 / 1; /* Original value: 204 180 255 / 1, alpha: 1 */
319
- --theme-dark-palette-discovery-bg-strong: 204 180 255 / 1; /* Original value: 204 180 255 / 1, alpha: 1 */
320
- --theme-dark-palette-discovery-bg-weak: 44 42 52 / 1; /* Original value: 44 42 52 / 1, alpha: 1 */
321
- --theme-dark-palette-discovery-bg-status: 204 180 255 / 1; /* Original value: 204 180 255 / 1, alpha: 1 */
322
- --theme-dark-palette-discovery-border-strong: 204 180 255 / 1; /* Original value: 204 180 255 / 1, alpha: 1 */
323
- --theme-dark-palette-discovery-border-weak: 75 40 148 / 1; /* Original value: 75 40 148 / 1, alpha: 1 */
324
- --theme-light-box-shadow-raised: 0px 1px 2px 0px rgba(26, 27, 29, 0.18);
325
- --theme-light-box-shadow-overlay: 0px 4px 8px 0px rgba(26, 27, 29, 0.12);
326
- --theme-light-palette-neutral-text-weakest: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
327
- --theme-light-palette-neutral-text-weaker: 94 99 106 / 1; /* Original value: 94 99 106 / 1, alpha: 1 */
328
- --theme-light-palette-neutral-text-weak: 77 81 87 / 1; /* Original value: 77 81 87 / 1, alpha: 1 */
329
- --theme-light-palette-neutral-text-default: 26 27 29 / 1; /* Original value: 26 27 29 / 1, alpha: 1 */
330
- --theme-light-palette-neutral-text-inverse: 255 255 255 / 1; /* Original value: 255 255 255 / 1, alpha: 1 */
331
- --theme-light-palette-neutral-icon: 77 81 87 / 1; /* Original value: 77 81 87 / 1, alpha: 1 */
332
- --theme-light-palette-neutral-bg-weak: 255 255 255 / 1; /* Original value: 255 255 255 / 1, alpha: 1 */
333
- --theme-light-palette-neutral-bg-default: 245 246 246 / 1; /* Original value: 245 246 246 / 1, alpha: 1 */
334
- --theme-light-palette-neutral-bg-on-bg-weak: 245 246 246 / 1; /* Original value: 245 246 246 / 1, alpha: 1 */
335
- --theme-light-palette-neutral-bg-strong: 226 227 229 / 1; /* Original value: 226 227 229 / 1, alpha: 1 */
336
- --theme-light-palette-neutral-bg-stronger: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
337
- --theme-light-palette-neutral-bg-strongest: 60 63 68 / 1; /* Original value: 60 63 68 / 1, alpha: 1 */
338
- --theme-light-palette-neutral-bg-status: 168 172 178 / 1; /* Original value: 168 172 178 / 1, alpha: 1 */
339
- --theme-light-palette-neutral-border-weak: 226 227 229 / 1; /* Original value: 226 227 229 / 1, alpha: 1 */
340
- --theme-light-palette-neutral-border-strong: 187 190 195 / 1; /* Original value: 187 190 195 / 1, alpha: 1 */
341
- --theme-light-palette-neutral-border-strongest: 111 117 126 / 1; /* Original value: 111 117 126 / 1, alpha: 1 */
342
- --theme-light-palette-neutral-hover: 111 117 126 / 0.1; /* Original value: 111 117 126 / 1, alpha: 0.1 */
343
- --theme-light-palette-neutral-pressed: 111 117 126 / 0.2; /* Original value: 111 117 126 / 1, alpha: 0.2 */
344
- --theme-light-palette-primary-text: 10 97 144 / 1; /* Original value: 10 97 144 / 1, alpha: 1 */
345
- --theme-light-palette-primary-icon: 10 97 144 / 1; /* Original value: 10 97 144 / 1, alpha: 1 */
346
- --theme-light-palette-primary-bg-weak: 231 250 251 / 1; /* Original value: 231 250 251 / 1, alpha: 1 */
347
- --theme-light-palette-primary-bg-strong: 10 97 144 / 1; /* Original value: 10 97 144 / 1, alpha: 1 */
348
- --theme-light-palette-primary-bg-status: 76 153 164 / 1; /* Original value: 76 153 164 / 1, alpha: 1 */
349
- --theme-light-palette-primary-bg-selected: 231 250 251 / 1; /* Original value: 231 250 251 / 1, alpha: 1 */
350
- --theme-light-palette-primary-border-strong: 10 97 144 / 1; /* Original value: 10 97 144 / 1, alpha: 1 */
351
- --theme-light-palette-primary-border-weak: 143 227 232 / 1; /* Original value: 143 227 232 / 1, alpha: 1 */
352
- --theme-light-palette-primary-focus: 48 131 157 / 1; /* Original value: 48 131 157 / 1, alpha: 1 */
353
- --theme-light-palette-primary-hover-weak: 48 131 157 / 0.08; /* Original value: 48 131 157 / 1, alpha: 0.08 */
354
- --theme-light-palette-primary-hover-strong: 2 80 123 / 1; /* Original value: 2 80 123 / 1, alpha: 1 */
355
- --theme-light-palette-primary-pressed-weak: 48 131 157 / 0.12; /* Original value: 48 131 157 / 1, alpha: 0.12 */
356
- --theme-light-palette-primary-pressed-strong: 1 64 99 / 1; /* Original value: 1 64 99 / 1, alpha: 1 */
357
- --theme-light-palette-danger-text: 187 45 0 / 1; /* Original value: 187 45 0 / 1, alpha: 1 */
358
- --theme-light-palette-danger-icon: 187 45 0 / 1; /* Original value: 187 45 0 / 1, alpha: 1 */
359
- --theme-light-palette-danger-bg-strong: 187 45 0 / 1; /* Original value: 187 45 0 / 1, alpha: 1 */
360
- --theme-light-palette-danger-bg-weak: 255 233 231 / 1; /* Original value: 255 233 231 / 1, alpha: 1 */
361
- --theme-light-palette-danger-bg-status: 232 78 44 / 1; /* Original value: 232 78 44 / 1, alpha: 1 */
362
- --theme-light-palette-danger-border-strong: 187 45 0 / 1; /* Original value: 187 45 0 / 1, alpha: 1 */
363
- --theme-light-palette-danger-border-weak: 255 170 151 / 1; /* Original value: 255 170 151 / 1, alpha: 1 */
364
- --theme-light-palette-danger-hover-weak: 212 51 0 / 0.08; /* Original value: 212 51 0 / 1, alpha: 0.08 */
365
- --theme-light-palette-danger-hover-strong: 150 18 0 / 1; /* Original value: 150 18 0 / 1, alpha: 1 */
366
- --theme-light-palette-danger-pressed-weak: 212 51 0 / 0.12; /* Original value: 212 51 0 / 1, alpha: 0.12 */
367
- --theme-light-palette-danger-pressed-strong: 115 14 0 / 1; /* Original value: 115 14 0 / 1, alpha: 1 */
368
- --theme-light-palette-warning-text: 118 85 0 / 1; /* Original value: 118 85 0 / 1, alpha: 1 */
369
- --theme-light-palette-warning-icon: 118 85 0 / 1; /* Original value: 118 85 0 / 1, alpha: 1 */
370
- --theme-light-palette-warning-bg-strong: 118 85 0 / 1; /* Original value: 118 85 0 / 1, alpha: 1 */
371
- --theme-light-palette-warning-bg-weak: 255 250 209 / 1; /* Original value: 255 250 209 / 1, alpha: 1 */
372
- --theme-light-palette-warning-bg-status: 215 170 10 / 1; /* Original value: 215 170 10 / 1, alpha: 1 */
373
- --theme-light-palette-warning-border-strong: 153 110 0 / 1; /* Original value: 153 110 0 / 1, alpha: 1 */
374
- --theme-light-palette-warning-border-weak: 255 214 0 / 1; /* Original value: 255 214 0 / 1, alpha: 1 */
375
- --theme-light-palette-success-text: 63 120 36 / 1; /* Original value: 63 120 36 / 1, alpha: 1 */
376
- --theme-light-palette-success-icon: 63 120 36 / 1; /* Original value: 63 120 36 / 1, alpha: 1 */
377
- --theme-light-palette-success-bg-strong: 63 120 36 / 1; /* Original value: 63 120 36 / 1, alpha: 1 */
378
- --theme-light-palette-success-bg-weak: 231 252 215 / 1; /* Original value: 231 252 215 / 1, alpha: 1 */
379
- --theme-light-palette-success-bg-status: 91 153 43 / 1; /* Original value: 91 153 43 / 1, alpha: 1 */
380
- --theme-light-palette-success-border-strong: 63 120 36 / 1; /* Original value: 63 120 36 / 1, alpha: 1 */
381
- --theme-light-palette-success-border-weak: 144 203 98 / 1; /* Original value: 144 203 98 / 1, alpha: 1 */
382
- --theme-light-palette-discovery-text: 90 52 170 / 1; /* Original value: 90 52 170 / 1, alpha: 1 */
383
- --theme-light-palette-discovery-icon: 90 52 170 / 1; /* Original value: 90 52 170 / 1, alpha: 1 */
384
- --theme-light-palette-discovery-bg-strong: 90 52 170 / 1; /* Original value: 90 52 170 / 1, alpha: 1 */
385
- --theme-light-palette-discovery-bg-weak: 233 222 255 / 1; /* Original value: 233 222 255 / 1, alpha: 1 */
386
- --theme-light-palette-discovery-bg-status: 117 78 200 / 1; /* Original value: 117 78 200 / 1, alpha: 1 */
387
- --theme-light-palette-discovery-border-strong: 90 52 170 / 1; /* Original value: 90 52 170 / 1, alpha: 1 */
388
- --theme-light-palette-discovery-border-weak: 179 142 255 / 1; /* Original value: 179 142 255 / 1, alpha: 1 */
389
- --font-size-h1: 3rem;
390
- --font-size-h2: 2.5rem;
391
- --font-size-h3: 1.875rem;
392
- --font-size-h4: 1.5rem;
393
- --font-size-h5: 1.25rem;
394
- --font-size-h6: 1rem;
395
- --font-size-subheading-large: 1.25rem;
396
- --font-size-subheading-medium: 1rem;
397
- --font-size-subheading-small: 0.875rem;
398
- --font-size-body-large: 1rem;
399
- --font-size-body-medium: 0.875rem;
400
- --font-size-body-small: 0.75rem;
401
- --font-size-code: 0.875rem;
402
- --font-size-label: 0.875rem;
403
- --font-weight-bold: 700;
404
- --font-weight-semibold: 600;
405
- --font-weight-normal: 400;
406
- --font-weight-medium: 500;
407
- --font-weight-light: 300;
408
- --font-font-family-h1: Syne Neo;
409
- --font-font-family-h2: Syne Neo;
410
- --font-font-family-h3: Public Sans;
411
- --font-font-family-h4: Public Sans;
412
- --font-font-family-h5: Public Sans;
413
- --font-font-family-h6: Public Sans;
414
- --font-font-family-subheading-large: Public Sans;
415
- --font-font-family-subheading-medium: Public Sans;
416
- --font-font-family-subheading-small: Public Sans;
417
- --font-font-family-body-large: Public Sans;
418
- --font-font-family-body-medium: Public Sans;
419
- --font-font-family-body-small: Public Sans;
420
- --font-font-family-code: Fira Code;
421
- --font-font-family-label: Public Sans;
422
- --space-0: 0px;
423
- --space-1: 1px;
424
235
  --space-2: 2px;
425
- --space-3: 4px;
426
- --space-4: 8px;
427
- --space-5: 12px;
428
- --space-6: 16px;
429
- --space-7: 24px;
430
- --space-8: 32px;
431
- --space-9: 48px;
432
- --space-10: 64px;
433
- --space-11: 96px;
434
- --space-12: 128px;
435
- --space-13: 320px;
436
- --z-index-0: 0;
437
- --z-index-10: 10;
438
- --z-index-20: 20;
439
- --z-index-30: 30;
440
- --z-index-40: 40;
441
- --z-index-50: 50;
442
- --z-index-60: 60;
443
- --z-index-deep: -999999;
444
- --z-index-auto: auto;
445
- --z-index-alias-overlay: 10;
446
- --z-index-alias-banner: 20;
447
- --z-index-alias-blanket: 30;
448
- --z-index-alias-popover: 40;
449
- --z-index-alias-tooltip: 50;
450
- --z-index-alias-modal: 60;
236
+ --space-4: 4px;
237
+ --space-6: 6px;
238
+ --space-8: 8px;
239
+ --space-12: 12px;
240
+ --space-16: 16px;
241
+ --space-20: 20px;
242
+ --space-24: 24px;
243
+ --space-32: 32px;
244
+ --space-48: 48px;
245
+ --space-64: 64px;
246
+ --theme-dark-box-shadow-raised: 0px 1px 2px 0px rgb(from #09090aff r g b / 0.50); /** Used for small components that need sharper shadows to illustrate elevation. */
247
+ --theme-dark-box-shadow-overlay: 0px 8px 20px 0px rgb(from #09090aff r g b / 0.50); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
248
+ --theme-dark-color-neutral-text-weakest: #818790ff; /** Should be used mainly for disabled text */
249
+ --theme-dark-color-neutral-text-weaker: #a8acb2ff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */
250
+ --theme-dark-color-neutral-text-weak: #cfd1d4ff; /** Used for labels, icon color and descriptions */
251
+ --theme-dark-color-neutral-text-default: #f5f6f6ff; /** Used for all default text */
252
+ --theme-dark-color-neutral-text-inverse: #1a1b1dff; /** Default text on Neutral-bg-strongest or other dark backgrounds */
253
+ --theme-dark-color-neutral-icon: #cfd1d4ff; /** Used as a default neutral icon color */
254
+ --theme-dark-color-neutral-bg-weak: #212325ff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */
255
+ --theme-dark-color-neutral-bg-default: #1a1b1dff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */
256
+ --theme-dark-color-neutral-bg-strong: #3c3f44ff; /** Use sparsely, mainly included in some component states */
257
+ --theme-dark-color-neutral-bg-stronger: #6f757eff;
258
+ --theme-dark-color-neutral-bg-strongest: #f5f6f6ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
259
+ --theme-dark-color-neutral-bg-status: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
260
+ --theme-dark-color-neutral-bg-on-bg-weak: #81879014;
261
+ --theme-dark-color-neutral-border-weak: #3c3f44ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */
262
+ --theme-dark-color-neutral-border-strong: #5e636aff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */
263
+ --theme-dark-color-neutral-border-strongest: #bbbec3ff;
264
+ --theme-dark-color-neutral-hover: #959aa11a; /** Used for neutral hover states on components */
265
+ --theme-dark-color-neutral-pressed: #959aa133; /** Used for neutral pressed states on components */
266
+ --theme-dark-color-primary-text: #8fe3e8ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
267
+ --theme-dark-color-primary-icon: #8fe3e8ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
268
+ --theme-dark-color-primary-bg-weak: #262f31ff; /** Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs */
269
+ --theme-dark-color-primary-bg-strong: #8fe3e8ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */
270
+ --theme-dark-color-primary-bg-status: #5db3bfff;
271
+ --theme-dark-color-primary-bg-selected: #262f31ff;
272
+ --theme-dark-color-primary-border-strong: #8fe3e8ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
273
+ --theme-dark-color-primary-border-weak: #02507bff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */
274
+ --theme-dark-color-primary-focus: #5db3bfff; /** Used for all focused states */
275
+ --theme-dark-color-primary-hover-weak: #8fe3e814; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */
276
+ --theme-dark-color-primary-hover-strong: #5db3bfff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
277
+ --theme-dark-color-primary-pressed-weak: #8fe3e81f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */
278
+ --theme-dark-color-primary-pressed-strong: #4c99a4ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
279
+ --theme-dark-color-danger-text: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
280
+ --theme-dark-color-danger-icon: #ffaa97ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
281
+ --theme-dark-color-danger-bg-strong: #ffaa97ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */
282
+ --theme-dark-color-danger-bg-weak: #432520ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */
283
+ --theme-dark-color-danger-bg-status: #f96746ff;
284
+ --theme-dark-color-danger-border-strong: #ffaa97ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */
285
+ --theme-dark-color-danger-border-weak: #730e00ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */
286
+ --theme-dark-color-danger-hover-weak: #ffaa9714; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */
287
+ --theme-dark-color-danger-hover-strong: #f96746ff; /** Only used for hover states in critical filled buttons */
288
+ --theme-dark-color-danger-pressed-weak: #ffaa971f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */
289
+ --theme-dark-color-danger-strong: #e84e2cff; /** Only used for pressed states in critical filled buttons */
290
+ --theme-dark-warning-text: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
291
+ --theme-dark-warning-icon: #ffd600ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
292
+ --theme-dark-warning-bg-strong: #ffd600ff; /** Use sparsely. Only used for filled labels */
293
+ --theme-dark-warning-bg-weak: #312e1aff; /** Used as backgrounds for warning components states such as banner and semi-filled labels */
294
+ --theme-dark-warning-bg-status: #d7aa0aff;
295
+ --theme-dark-warning-border-strong: #ffd600ff; /** Use sparsely. Only used for outlined labels */
296
+ --theme-dark-warning-border-weak: #765500ff; /** Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background */
297
+ --theme-dark-success-text: #90cb62ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
298
+ --theme-dark-success-icon: #90cb62ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
299
+ --theme-dark-success-bg-strong: #90cb62ff; /** Use sparsely. Only used for filled labels */
300
+ --theme-dark-success-bg-weak: #262d24ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */
301
+ --theme-dark-success-bg-status: #6fa646ff;
302
+ --theme-dark-success-border-strong: #90cb62ff; /** Use sparsely. Only used for outlined labels */
303
+ --theme-dark-success-border-weak: #296127ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */
304
+ --theme-dark-discovery-text: #ccb4ffff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
305
+ --theme-dark-discovery-icon: #ccb4ffff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
306
+ --theme-dark-discovery-bg-strong: #ccb4ffff; /** Use sparsely. Only used for filled labels */
307
+ --theme-dark-discovery-bg-weak: #2c2a34ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */
308
+ --theme-dark-discovery-bg-status: #a07becff;
309
+ --theme-dark-discovery-border-strong: #ccb4ffff; /** Use sparsely. Only used for outlined labels */
310
+ --theme-dark-discovery-border-weak: #4b2894ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */
311
+ --theme-light-box-shadow-raised: 0px 1px 2px 0px rgb(from #1a1b1dff r g b / 0.18); /** Used for small components that need sharper shadows to illustrate elevation. */
312
+ --theme-light-box-shadow-overlay: 0px 4px 8px 0px rgb(from #1a1b1dff r g b / 0.12); /** Used for most mid/large sized components with floating states. Components include banner, button, card, drop down, progress bar and view selector */
313
+ --theme-light-color-neutral-text-weakest: #a8acb2ff; /** Should be used mainly for disabled text */
314
+ --theme-light-color-neutral-text-weaker: #5e636aff; /** Should be used sparsely and mainly for headers and subtitles to differentiate from input text */
315
+ --theme-light-color-neutral-text-weak: #4d5157ff; /** Used for labels, icon color and descriptions */
316
+ --theme-light-color-neutral-text-default: #1a1b1dff; /** Used for all default text */
317
+ --theme-light-color-neutral-text-inverse: #ffffffff; /** Default text on neutral-bg-strongest or other dark backgrounds */
318
+ --theme-light-color-neutral-icon: #4d5157ff; /** Used as a default neutral icon color */
319
+ --theme-light-color-neutral-bg-weak: #ffffffff; /** Used as a surface color for containers, panels, side navigation and drawers on top of Neutral-bg-default */
320
+ --theme-light-color-neutral-bg-default: #f5f6f6ff; /** Used as canvas/main background color in applications. Can also be used if adding a container on Neutral-bg-weak */
321
+ --theme-light-color-neutral-bg-on-bg-weak: #f5f6f6ff;
322
+ --theme-light-color-neutral-bg-strong: #e2e3e5ff; /** Use sparsely, mainly included in some component states */
323
+ --theme-light-color-neutral-bg-stronger: #a8acb2ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
324
+ --theme-light-color-neutral-bg-strongest: #3c3f44ff; /** Use sparsely, mainly for tooltips or other elements that should stand out from the light layout */
325
+ --theme-light-color-neutral-bg-status: #a8acb2ff;
326
+ --theme-light-color-neutral-border-weak: #e2e3e5ff; /** Used for light borders such as dividers and tables as well as some components such as context menu and code block to make them stand out more from the background */
327
+ --theme-light-color-neutral-border-strong: #bbbec3ff; /** Used for components that are outlined and need to stand out such as text fields, search fields, drop-downs, buttons, checkboxes and radio buttons */
328
+ --theme-light-color-neutral-border-strongest: #6f757eff;
329
+ --theme-light-color-neutral-hover: #6f757e1a; /** Used for neutral hover states on components */
330
+ --theme-light-color-neutral-pressed: #6f757e33; /** Used for neutral pressed states on components */
331
+ --theme-light-color-primary-text: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
332
+ --theme-light-color-primary-icon: #0a6190ff; /** Used for accent text, in text buttons, links, tabs and view selectors. Provides accessible text on both neutral backgrounds. We use the primary color both as a brand/primary color and for informational states */
333
+ --theme-light-color-primary-bg-weak: #e7fafbff; /** Used as a light primary background and usually in combination with Primary-text,icon. Components include banners, semi-filled labels, drag & drops and filled tabs */
334
+ --theme-light-color-primary-bg-strong: #0a6190ff; /** Used as backgrounds for highlighted components such as filled buttons, checkboxes, radio buttons, cards, filled labels, pagination and view selectors */
335
+ --theme-light-color-primary-bg-status: #4c99a4ff;
336
+ --theme-light-color-primary-bg-selected: #e7fafbff;
337
+ --theme-light-color-primary-border-strong: #0a6190ff; /** Use sparsely. Used for outlined primary buttons, drag & drop dragged state, outlined labels and wizard */
338
+ --theme-light-color-primary-border-weak: #8fe3e8ff; /** Use sparsely. Mainly used in combination with elements that use the Primary-bg-weak to stand out more from the background */
339
+ --theme-light-color-primary-focus: #30839dff; /** Used for all focused states */
340
+ --theme-light-color-primary-hover-weak: #30839d1a; /** Used for hover states where the background is either transparent or use Neutral-bg-weak */
341
+ --theme-light-color-primary-hover-strong: #02507bff; /** Used for hover states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
342
+ --theme-light-color-primary-pressed-weak: #30839d1f; /** Used for pressed states where the background is either transparent or use Neutral-bg-weak */
343
+ --theme-light-color-primary-pressed-strong: #014063ff; /** Used for pressed states where the background is the Primary-bg-strong with the label being Neutral-text-inverse */
344
+ --theme-light-color-danger-text: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
345
+ --theme-light-color-danger-icon: #bb2d00ff; /** Used for error state texts and icons. Do not use for other semantic states, visualization or graph colors */
346
+ --theme-light-color-danger-bg-strong: #bb2d00ff; /** Used as backgrounds for filled critical buttons. Can also be used for illustrative background elements in critical states */
347
+ --theme-light-color-danger-bg-weak: #ffe9e7ff; /** Used as backgrounds for critical components states such as banner drag & drop (invalid file type), semi-filled labels and “clear all” tags */
348
+ --theme-light-color-danger-bg-status: #e84e2cff;
349
+ --theme-light-color-danger-border-strong: #bb2d00ff; /** Use sparsely. Used for outlined critical buttons, drag & drop (invalid file type) and outlined critical labels */
350
+ --theme-light-color-danger-border-weak: #ffaa97ff; /** Use sparsely. Mainly used in combination with elements that use the Critical-bg-weak to stand out more from the background */
351
+ --theme-light-color-danger-hover-weak: #d4330014; /** Used for hover states for critical buttons where the background is either transparent or use Neutral-bg-weak */
352
+ --theme-light-color-danger-hover-strong: #961200ff; /** Only used for hover states in critical filled buttons */
353
+ --theme-light-color-danger-pressed-weak: #d433001f; /** Used for pressed states for critical buttons where the background is either transparent or use Neutral-bg-weak */
354
+ --theme-light-color-danger-pressed-strong: #730e00ff; /** Only used for pressed states in critical filled buttons */
355
+ --theme-light-color-warning-text: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
356
+ --theme-light-color-warning-icon: #765500ff; /** Used for warning state texts and icons. Do not use for other semantic states, visualization or graph colors */
357
+ --theme-light-color-warning-bg-strong: #765500ff; /** Use sparsely. Only used for filled labels */
358
+ --theme-light-color-warning-bg-weak: #fffad1ff; /** Used as backgrounds for warning components states such as banner and semi-filled labels */
359
+ --theme-light-color-warning-bg-status: #d7aa0aff;
360
+ --theme-light-color-warning-border-strong: #996e00ff; /** Use sparsely. Only used for outlined labels */
361
+ --theme-light-color-warning-border-weak: #ffd600ff; /** Use sparsely. Mainly used in combination with elements that use the Warning-bg-weak to stand out more from the background */
362
+ --theme-light-color-success-text: #3f7824ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
363
+ --theme-light-color-success-icon: #3f7824ff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
364
+ --theme-light-color-success-bg-strong: #3f7824ff; /** Use sparsely. Only used for filled labels */
365
+ --theme-light-color-success-bg-weak: #e7fcd7ff; /** Used as backgrounds for success components states such as banner and semi-filled labels */
366
+ --theme-light-color-success-bg-status: #5b992bff;
367
+ --theme-light-color-success-border-strong: #3f7824ff; /** Use sparsely. Only used for outlined labels */
368
+ --theme-light-color-success-border-weak: #90cb62ff; /** Use sparsely. Mainly used in combination with elements that use the Success-bg-weak to stand out more from the background */
369
+ --theme-light-color-discovery-text: #5a34aaff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
370
+ --theme-light-color-discovery-icon: #5a34aaff; /** Used for success state texts and icons. Do not use for other semantic states, visualization or graph colors */
371
+ --theme-light-color-discovery-bg-strong: #5a34aaff; /** Use sparsely. Only used for filled labels */
372
+ --theme-light-color-discovery-bg-weak: #e9deffff; /** Used as backgrounds for success components states such as banner and semi-filled labels */
373
+ --theme-light-color-discovery-bg-status: #754ec8ff;
374
+ --theme-light-color-discovery-border-strong: #5a34aaff; /** Use sparsely. Only used for outlined labels */
375
+ --theme-light-color-discovery-border-weak: #b38effff; /** Use sparsely. Mainly used in combination with elements that use the discovery-bg-weak to stand out more from the background */
376
+ --weight-bold: 700;
377
+ --weight-semibold: 600;
378
+ --weight-normal: 400;
379
+ --weight-medium: 500;
380
+ --weight-light: 300;
381
+ --typography-code: 400 0.875rem/1.4286 Fira Code;
382
+ --typography-code-font-family: Fira Code;
383
+ --typography-code-font-size: 0.875rem;
384
+ --typography-code-font-weight: 400;
385
+ --typography-code-letter-spacing: 0rem;
386
+ --typography-code-line-height: 1.4286;
387
+ --typography-display: 500 2.5rem/1.2 Syne Neo;
388
+ --typography-display-font-family: Syne Neo;
389
+ --typography-display-font-size: 2.5rem;
390
+ --typography-display-font-weight: 500;
391
+ --typography-display-letter-spacing: 0rem;
392
+ --typography-display-line-height: 1.2;
393
+ --typography-title-1: 700 1.875rem/1.3333 Public Sans;
394
+ --typography-title-1-font-family: Public Sans;
395
+ --typography-title-1-font-size: 1.875rem;
396
+ --typography-title-1-font-weight: 700;
397
+ --typography-title-1-letter-spacing: 0.016rem;
398
+ --typography-title-1-line-height: 1.3333;
399
+ --typography-title-2: 700 1.5rem/1.3333 Public Sans;
400
+ --typography-title-2-font-family: Public Sans;
401
+ --typography-title-2-font-size: 1.5rem;
402
+ --typography-title-2-font-weight: 700;
403
+ --typography-title-2-letter-spacing: 0.016rem;
404
+ --typography-title-2-line-height: 1.3333;
405
+ --typography-title-3: 700 1.25rem/1.4 Public Sans;
406
+ --typography-title-3-font-family: Public Sans;
407
+ --typography-title-3-font-size: 1.25rem;
408
+ --typography-title-3-font-weight: 700;
409
+ --typography-title-3-letter-spacing: 0.016rem;
410
+ --typography-title-3-line-height: 1.4;
411
+ --typography-title-4: 700 1rem/1.5 Public Sans;
412
+ --typography-title-4-font-family: Public Sans;
413
+ --typography-title-4-font-size: 1rem;
414
+ --typography-title-4-font-weight: 700;
415
+ --typography-title-4-letter-spacing: 0.016rem;
416
+ --typography-title-4-line-height: 1.5;
417
+ --typography-subheading-large: 600 1.25rem/1.4 Public Sans;
418
+ --typography-subheading-large-font-family: Public Sans;
419
+ --typography-subheading-large-font-size: 1.25rem;
420
+ --typography-subheading-large-font-weight: 600;
421
+ --typography-subheading-large-letter-spacing: 0.016rem;
422
+ --typography-subheading-large-line-height: 1.4;
423
+ --typography-subheading-medium: 600 1rem/1.5 Public Sans;
424
+ --typography-subheading-medium-font-family: Public Sans;
425
+ --typography-subheading-medium-font-size: 1rem;
426
+ --typography-subheading-medium-font-weight: 600;
427
+ --typography-subheading-medium-letter-spacing: 0.016rem;
428
+ --typography-subheading-medium-line-height: 1.5;
429
+ --typography-subheading-small: 600 0.875rem/1.4286 Public Sans;
430
+ --typography-subheading-small-font-family: Public Sans;
431
+ --typography-subheading-small-font-size: 0.875rem;
432
+ --typography-subheading-small-font-weight: 600;
433
+ --typography-subheading-small-letter-spacing: 0rem;
434
+ --typography-subheading-small-line-height: 1.4286;
435
+ --typography-body-large: 400 1rem/1.5 Public Sans;
436
+ --typography-body-large-font-family: Public Sans;
437
+ --typography-body-large-font-size: 1rem;
438
+ --typography-body-large-font-weight: 400;
439
+ --typography-body-large-letter-spacing: 0rem;
440
+ --typography-body-large-line-height: 1.5;
441
+ --typography-body-medium: 400 0.875rem/1.4286 Public Sans;
442
+ --typography-body-medium-font-family: Public Sans;
443
+ --typography-body-medium-font-size: 0.875rem;
444
+ --typography-body-medium-font-weight: 400;
445
+ --typography-body-medium-letter-spacing: 0rem;
446
+ --typography-body-medium-line-height: 1.4286;
447
+ --typography-body-small: 400 0.75rem/1.6667 Public Sans;
448
+ --typography-body-small-font-family: Public Sans;
449
+ --typography-body-small-font-size: 0.75rem;
450
+ --typography-body-small-font-weight: 400;
451
+ --typography-body-small-letter-spacing: 0rem;
452
+ --typography-body-small-line-height: 1.6667;
453
+ --typography-label: 700 0.875rem/1.4286 Public Sans;
454
+ --typography-label-font-family: Public Sans;
455
+ --typography-label-font-size: 0.875rem;
456
+ --typography-label-font-weight: 700;
457
+ --typography-label-letter-spacing: 0rem;
458
+ --typography-label-line-height: 1.4286;
459
+ --z-index-deep: -999999; /** Deep z-index is used to stack something behind everything else. */
460
+ --z-index-base: 0; /** Useful for creating a new stacking context. */
461
+ --z-index-overlay: 10; /** Used for overlay elements, like button groups on canvas elements. Can be used with an alias token. */
462
+ --z-index-banner: 20; /** Used for banners. Can be used with an alias token. */
463
+ --z-index-blanket: 30; /** Used as a blanket layer that covers the underlying UI. For example can be used to detect clicks and close the content on top of it. Can be used with an alias token. */
464
+ --z-index-popover: 40; /** Used for popover elements like Dropdown menu. Can be used with an alias token. */
465
+ --z-index-tooltip: 50; /** Used in tooltip components, should be above everything as it will be probably visible on hover effects. There are exceptions for canvas tooltips (like in Bloom). Can be used with an alias token. */
466
+ --z-index-modal: 60; /** Used for modals, always sitting on top of a blanket, can be a custom element or a Dialog. Can be used with an alias token. */
451
467
  }