Google Git
Sign in
chromium / devtools / devtools-frontend / 7bddf9c31d36d144859b581763c68ac638f35e13 / . / front_end / design_system_tokens.css
blob: 60e701a7023a27d2179278ca76393155350753a7 [file] [log] [blame]
Tim van der Lippea53672d2021-07-08 14:52:35[diff] [blame]1/*
2 * Copyright 2020 The Chromium Authors. All rights reserved.
Jack Franklin36429002020-11-25 15:07:26[diff] [blame]3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
5 */
Tim van der Lippea53672d2021-07-08 14:52:35[diff] [blame]6
Jack Franklin36429002020-11-25 15:07:26[diff] [blame]7/**
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]8 * These tokens make up the Chrome DevTools Design System.
9 * See goo.gle/devtools-ux-style-guide for more information on how to build UI for DevTools.
10 */
Jack Franklin36429002020-11-25 15:07:26[diff] [blame]11:root {
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]12 /* Colors begin */
13
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]14 /* Chrome Desktop Design System */
15
16 /* Use on all surfaces */
17
18 --sys-color-on-surface: var(--ref-palette-neutral10);
19 --sys-color-on-surface-subtle: var(--ref-palette-neutral30);
20 --sys-color-on-surface-secondary: var(--ref-palette-neutral30);
21 --sys-color-on-surface-primary: var(--ref-palette-primary10);
22
23 /* Universal surfaces */
24
Benedikt Meurer03e6c422024-04-23 10:39:21[diff] [blame]25 --sys-color-surface: var(--ref-palette-neutral99);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]26 --sys-color-surface-variant: var(--ref-palette-neutral-variant90);
27
28 /* Containers */
29
30 --sys-color-tonal-container: var(--ref-palette-primary90);
31 --sys-color-on-tonal-container: var(--ref-palette-primary10);
32 --sys-color-tertiary-container: var(--ref-palette-tertiary90);
33 --sys-color-on-tertiary-container: var(--ref-palette-tertiary10);
34 --sys-color-error-container: var(--ref-palette-error90);
35 --sys-color-on-error-container: var(--ref-palette-error10);
36 --sys-color-neutral-container: var(--ref-palette-neutral95);
37 --sys-color-omnibox-container: var(--sys-color-surface4);
38
39 /* Prominent accent colors */
40
41 --sys-color-primary: var(--ref-palette-primary40);
42 --sys-color-on-primary: var(--ref-palette-primary100);
43 --sys-color-secondary: var(--ref-palette-secondary40);
44 --sys-color-on-secondary: var(--ref-palette-secondary100);
45 --sys-color-tertiary: var(--ref-palette-tertiary40);
46 --sys-color-on-tertiary: var(--ref-palette-tertiary100);
47 --sys-color-error: var(--ref-palette-error40);
48 --sys-color-on-error: var(--ref-palette-error100);
49
50 /* Chrome base surface */
51
Kateryna Prokopenko0508f122024-03-08 14:32:07[diff] [blame]52 --sys-color-base: var(--ref-palette-neutral98);
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]53 --sys-color-base-container: var(--sys-color-surface4);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]54 --sys-color-base-container-elevated: var(--ref-palette-neutral100);
55
56 /* Corresponding base on colors */
57
58 --sys-color-on-base: var(--ref-palette-neutral10);
59 --sys-color-on-base-divider: var(--ref-palette-primary90);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]60 /* Inverse */
61
62 --sys-color-inverse-surface: var(--ref-palette-neutral20);
63 --sys-color-inverse-primary: var(--ref-palette-primary80);
64 --sys-color-inverse-on-surface: var(--ref-palette-neutral95);
65
66 /* Outlines */
67
Kateryna Prokopenko892d6e32023-09-12 07:55:29[diff] [blame]68 --sys-color-outline: var(--ref-palette-neutral-variant50);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]69 --sys-color-tonal-outline: var(--ref-palette-primary80);
70 --sys-color-neutral-outline: var(--ref-palette-neutral80);
Kateryna Prokopenkoa81dd792023-09-11 15:50:36[diff] [blame]71 --sys-color-yellow-outline: var(--ref-palette-yellow70);
Kateryna Prokopenkoefcdbd42023-09-12 07:55:21[diff] [blame]72 --sys-color-error-outline: var(--ref-palette-error80);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]73 --sys-color-divider: var(--ref-palette-primary90);
Benedikt Meurer488310c2024-01-08 12:30:32[diff] [blame]74 --sys-color-divider-on-tonal-container: var(--ref-palette-primary80);
Benedikt Meurer8033f442023-11-08 11:36:12[diff] [blame]75 --sys-color-divider-prominent: var(--ref-palette-primary70);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]76
77 /* States */
78
Nikolay Vitkov924fc2c2025-01-03 09:24:38[diff] [blame]79 --sys-color-state-hover-on-prominent: color-mix(in srgb, var(--ref-palette-neutral99) 10%, transparent);
80 --sys-color-state-hover-on-subtle: color-mix(in srgb, var(--ref-palette-neutral10) 6%, transparent);
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]81 --sys-color-state-hover-dim-blend-protection: rgb(6 46 111 / 18%);
82 --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 6%);
Nikolay Vitkov924fc2c2025-01-03 09:24:38[diff] [blame]83 --sys-color-state-ripple-neutral-on-prominent: color-mix(in srgb, var(--ref-palette-neutral99) 16%, transparent);
84 --sys-color-state-ripple-neutral-on-subtle: color-mix(in srgb, var(--ref-palette-neutral10) 8%, transparent);
85 --sys-color-state-ripple-primary: color-mix(in srgb, var(--ref-palette-primary70) 32%, transparent);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]86 --sys-color-state-focus-ring: var(--ref-palette-primary40);
Kateryna Prokopenko23656a82023-10-09 11:55:21[diff] [blame]87 --sys-color-state-focus-select: var(--ref-palette-primary80);
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]88 --sys-color-state-focus-highlight: rgb(31 31 31 / 6%);
89 --sys-color-state-disabled: rgb(31 31 31 / 38%);
90 --sys-color-state-disabled-container: rgb(31 31 31 / 12%);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]91 --sys-color-state-header-hover: var(--ref-palette-primary80);
92 --sys-color-state-on-header-hover: var(--ref-palette-primary20);
Kim-Anh Tran5efa3fd2024-12-17 10:20:33[diff] [blame]93 --sys-color-state-text-highlight: var(--ref-palette-primary40);
94 --sys-color-state-on-text-highlight: var(--ref-palette-neutral-variant100);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]95
96 /* Surfaces */
97
Nikolay Vitkov924fc2c2025-01-03 09:24:38[diff] [blame]98 --sys-color-surface5: color-mix(in srgb, var(--ref-palette-primary40) 14%, var(--ref-palette-neutral99));
99 --sys-color-surface4: color-mix(in srgb, var(--ref-palette-primary40) 12%, var(--ref-palette-neutral99));
100 --sys-color-surface3: color-mix(in srgb, var(--ref-palette-primary40) 11%, var(--ref-palette-neutral99));
101 --sys-color-surface2: color-mix(in srgb, var(--ref-palette-primary40) 8%, var(--ref-palette-neutral99));
102 --sys-color-surface1: color-mix(in srgb, var(--ref-palette-primary40) 5%, var(--ref-palette-neutral99));
Kim-Anh Tran8c88f7d2024-12-11 10:20:25[diff] [blame]103
104 /* Header surfaces */
105 --sys-color-header-container: var(--ref-palette-primary95);
106
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]107 /* Chrome DevTools Design System */
108
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]109 /* Prominent accent colors for icons */
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]110
111 --sys-color-primary-bright: var(--ref-palette-primary50);
112 --sys-color-blue-bright: var(--ref-palette-blue50);
Peter Müller056d3bb2024-07-17 14:34:51[diff] [blame]113 --sys-color-green-bright: var(--ref-palette-green60);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]114 --sys-color-error-bright: var(--ref-palette-error50);
Kateryna Prokopenkoc077b2d2023-09-07 13:43:03[diff] [blame]115 --sys-color-orange-bright: var(--ref-palette-orange60);
116 --sys-color-yellow-bright: var(--ref-palette-yellow60);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]117 --sys-color-cyan-bright: var(--ref-palette-cyan50);
118 --sys-color-purple-bright: var(--ref-palette-purple50);
119 --sys-color-neutral-bright: var(--ref-palette-neutral70);
Peter Müller9b783562023-10-13 10:58:32[diff] [blame]120 --sys-color-pink-bright: var(--ref-palette-pink60);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]121
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]122 /* Prominent accent colors for text */
123
124 --sys-color-blue: var(--ref-palette-blue40);
125 --sys-color-on-blue: var(--ref-palette-blue100);
126 --sys-color-green: var(--ref-palette-green40);
127 --sys-color-on-green: var(--ref-palette-green100);
128 --sys-color-orange: var(--ref-palette-orange40);
129 --sys-color-on-orange: var(--ref-palette-orange100);
130 --sys-color-yellow: var(--ref-palette-yellow40);
131 --sys-color-on-yellow: var(--ref-palette-yellow100);
132 --sys-color-cyan: var(--ref-palette-cyan40);
133 --sys-color-on-cyan: var(--ref-palette-cyan100);
134 --sys-color-purple: var(--ref-palette-purple40);
135 --sys-color-on-purple: var(--ref-palette-purple100);
Peter Müller9b783562023-10-13 10:58:32[diff] [blame]136 --sys-color-pink: var(--ref-palette-pink40);
137 --sys-color-on-pink: var(--ref-palette-pink100);
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]138
139 /* Containers */
140
141 --sys-color-yellow-container: var(--ref-palette-yellow90);
142 --sys-color-on-yellow-container: var(--ref-palette-yellow10);
143
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]144 /* Universal surfaces */
145
146 --sys-color-cdt-base: var(--sys-color-base-container);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]147 --sys-color-cdt-base-container: var(--ref-palette-neutral99);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]148
149 /* Tinted surfaces */
150
Peter Müller443f9a02023-09-07 14:38:43[diff] [blame]151 --sys-color-surface-yellow: rgb(254 246 213 / 100%);
Peter Müller27ea6fa2023-11-02 12:45:35[diff] [blame]152 --sys-color-surface-yellow-high: rgb(253 240 185 / 100%);
Peter Müllere7dfbd22023-07-17 15:23:14[diff] [blame]153 --sys-color-surface-error: rgb(252 235 235 / 100%);
Peter Müllere105a222023-10-31 14:23:55[diff] [blame]154 --sys-color-surface-green: rgb(219 243 226 / 100%);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]155
156 /* Corresponding on colors */
157
158 --sys-color-on-surface-yellow: var(--ref-palette-yellow20);
159 --sys-color-on-surface-error: var(--ref-palette-error30);
Peter Müllere105a222023-10-31 14:23:55[diff] [blame]160 --sys-color-on-surface-green: var(--ref-palette-green20);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]161
162 /* Syntax highlighting */
163
164 --sys-color-token-variable: var(--sys-color-on-surface);
165 --sys-color-token-property: var(--sys-color-on-surface);
166 --sys-color-token-property-special: var(--ref-palette-error50);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]167 --sys-color-token-type: var(--ref-palette-green50);
168 --sys-color-token-definition: var(--ref-palette-blue30);
169 --sys-color-token-variable-special: var(--ref-palette-blue30);
170 --sys-color-token-builtin: var(--ref-palette-blue20);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]171 --sys-color-token-keyword: var(--ref-palette-pink40);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]172 --sys-color-token-number: var(--ref-palette-blue40);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]173 --sys-color-token-string: var(--ref-palette-error40);
174 --sys-color-token-string-special: var(--ref-palette-error50);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]175 --sys-color-token-atom: var(--ref-palette-blue20);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]176 --sys-color-token-tag: var(--ref-palette-pink30);
177 --sys-color-token-attribute: var(--ref-palette-orange40);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]178 --sys-color-token-attribute-value: var(--ref-palette-blue30);
179 --sys-color-token-comment: var(--ref-palette-green40);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]180 --sys-color-token-meta: var(--ref-palette-neutral60);
181 --sys-color-token-deleted: var(--ref-palette-error50);
Kim-Anh Tran4d095be2024-05-06 12:46:28[diff] [blame]182 --sys-color-token-inserted: var(--ref-palette-green60);
183 --sys-color-token-pseudo-element: var(--ref-palette-blue40);
Kateryna Prokopenkobde284e2023-07-05 12:47:09[diff] [blame]184 --sys-color-token-subtle: var(--ref-palette-neutral60);
Hadrien Jaubert4e607b72023-09-04 13:33:59[diff] [blame]185
Seth Brenith5ea99ca2025-01-16 16:30:50[diff] [blame]186 /**
Alex Rudenko3561fee2023-11-07 16:33:42[diff] [blame]187 * Gradients
188 */
189 --sys-color-gradient-primary: var(--ref-palette-primary90);
190 --sys-color-gradient-tertiary: var(--ref-palette-tertiary95);
Benedikt Meurere4fb34d2024-02-16 11:28:40[diff] [blame]191
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]192 &.baseline-default {
193 --sys-color-surface5: color-mix(in sRGB, #6991d6 14%, var(--ref-palette-neutral100));
194 --sys-color-surface4: color-mix(in sRGB, #6991d6 12%, var(--ref-palette-neutral100));
195 --sys-color-surface3: color-mix(in sRGB, #6991d6 11%, var(--ref-palette-neutral100));
196 --sys-color-surface2: color-mix(in sRGB, #6991d6 8%, var(--ref-palette-neutral100));
197 --sys-color-surface1: color-mix(in sRGB, #6991d6 5%, var(--ref-palette-neutral100));
198 }
199
200 &.baseline-grayscale {
201 --sys-color-divider: var(--ref-palette-neutral90);
202 --sys-color-surface5: color-mix(in srgb, var(--ref-palette-neutral40) 14%, var(--ref-palette-neutral100));
203 --sys-color-surface4: color-mix(in srgb, var(--ref-palette-neutral40) 12%, var(--ref-palette-neutral100));
204 --sys-color-surface3: color-mix(in srgb, var(--ref-palette-neutral40) 11%, var(--ref-palette-neutral100));
205 --sys-color-surface2: color-mix(in srgb, var(--ref-palette-neutral40) 8%, var(--ref-palette-neutral100));
206 --sys-color-surface1: color-mix(in srgb, var(--ref-palette-neutral40) 5%, var(--ref-palette-neutral100));
207 }
208
209 &.baseline-default,
210 &.baseline-grayscale {
211 --sys-color-base: var(--ref-palette-neutral100);
212 --sys-color-surface: var(--ref-palette-neutral100);
213 --sys-color-cdt-base-container: var(--ref-palette-neutral100);
214
215 &.theme-with-dark-background {
216 --sys-color-surface5: color-mix(in sRGB, #d1e1ff 14%, var(--ref-palette-neutral10));
217 --sys-color-surface4: color-mix(in sRGB, #d1e1ff 12%, var(--ref-palette-neutral10));
218 --sys-color-surface3: color-mix(in sRGB, #d1e1ff 11%, var(--ref-palette-neutral10));
219 --sys-color-surface2: color-mix(in sRGB, #d1e1ff 8%, var(--ref-palette-neutral10));
220 --sys-color-surface1: color-mix(in sRGB, #d1e1ff 5%, var(--ref-palette-neutral10));
221 --sys-color-divider: var(--ref-palette-neutral40);
222 --sys-color-base: var(--ref-palette-neutral25);
223 --sys-color-surface: var(--ref-palette-neutral10);
224 --sys-color-cdt-base-container: var(--ref-palette-neutral15);
225 }
226 }
227
228 &.theme-with-dark-background {
229 /* Chrome Desktop Design System */
230
231 /* Use on all surfaces */
232
233 --sys-color-on-surface: var(--ref-palette-neutral90);
234 --sys-color-on-surface-subtle: var(--ref-palette-neutral80);
235 --sys-color-on-surface-secondary: var(--ref-palette-neutral80);
236 --sys-color-on-surface-primary: var(--ref-palette-primary90);
237
238 /* Universal surfaces */
239
240 --sys-color-surface: var(--ref-palette-neutral10);
241 --sys-color-surface-variant: var(--ref-palette-neutral-variant30);
242
243 /* Containers */
244
245 --sys-color-tonal-container: var(--ref-palette-secondary30);
246 --sys-color-on-tonal-container: var(--ref-palette-secondary90);
247 --sys-color-tertiary-container: var(--ref-palette-tertiary30);
248 --sys-color-on-tertiary-container: var(--ref-palette-tertiary90);
249 --sys-color-error-container: var(--ref-palette-error30);
250 --sys-color-on-error-container: var(--ref-palette-error90);
251 --sys-color-neutral-container: var(--ref-palette-neutral25);
252 --sys-color-omnibox-container: var(--ref-palette-neutral15);
253
254 /* Prominent accent colors */
255
256 --sys-color-primary: var(--ref-palette-primary80);
257 --sys-color-on-primary: var(--ref-palette-primary20);
258 --sys-color-secondary: var(--ref-palette-secondary80);
259 --sys-color-on-secondary: var(--ref-palette-secondary20);
260 --sys-color-tertiary: var(--ref-palette-tertiary80);
261 --sys-color-on-tertiary: var(--ref-palette-tertiary20);
262 --sys-color-error: var(--ref-palette-error80);
263 --sys-color-on-error: var(--ref-palette-error20);
264
265 /* Chrome base surface */
266
267 --sys-color-base: var(--ref-palette-secondary25);
268 --sys-color-base-container: var(--ref-palette-neutral15);
269 --sys-color-base-container-elevated: var(--ref-palette-neutral25);
270
271 /* Corresponding base on colors */
272
273 --sys-color-on-base: var(--ref-palette-neutral90);
274 --sys-color-on-base-divider: var(--ref-palette-neutral40);
275
276 /* Inverse */
277
278 --sys-color-inverse-surface: var(--ref-palette-neutral90);
279 --sys-color-inverse-primary: var(--ref-palette-primary40);
280 --sys-color-inverse-on-surface: var(--ref-palette-neutral10);
281
282 /* Outlines */
283
284 --sys-color-outline: var(--ref-palette-neutral-variant60);
285 --sys-color-tonal-outline: var(--ref-palette-secondary50);
286 --sys-color-neutral-outline: var(--ref-palette-neutral50);
287 --sys-color-yellow-outline: var(--ref-palette-yellow40);
288 --sys-color-error-outline: var(--ref-palette-error80);
289 --sys-color-divider: var(--ref-palette-secondary35);
290 --sys-color-divider-on-tonal-container: var(--ref-palette-neutral40);
291 --sys-color-divider-prominent: var(--ref-palette-neutral50);
292
293 /* States */
294
295 --sys-color-state-hover-on-prominent: color-mix(in srgb, var(--ref-palette-neutral10) 6%, transparent);
296 --sys-color-state-hover-on-subtle: color-mix(in srgb, var(--ref-palette-neutral99) 10%, transparent);
297 --sys-color-state-hover-dim-blend-protection: rgb(31 31 31 / 10%);
298 --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 16%);
299 --sys-color-state-ripple-neutral-on-prominent: color-mix(in srgb, var(--ref-palette-neutral10) 12%, transparent);
300 --sys-color-state-ripple-neutral-on-subtle: color-mix(in srgb, var(--ref-palette-neutral99) 16%, transparent);
301 --sys-color-state-ripple-primary: color-mix(in srgb, var(--ref-palette-primary60) 32%, transparent);
302 --sys-color-state-focus-ring: var(--ref-palette-primary80);
303 --sys-color-state-focus-select: var(--ref-palette-secondary50);
304 --sys-color-state-focus-highlight: rgb(253 252 251 / 10%);
305 --sys-color-state-disabled: rgb(227 227 227 / 38%);
306 --sys-color-state-disabled-container: rgb(227 227 227 / 12%);
307 --sys-color-state-header-hover: var(--ref-palette-secondary30);
308 --sys-color-state-on-header-hover: var(--ref-palette-secondary90);
309 --sys-color-state-text-highlight: var(--ref-palette-primary80);
310 --sys-color-state-on-text-highlight: var(--ref-palette-neutral-variant0);
311
312 /* Surfaces */
313
314 --sys-color-surface5: color-mix(in srgb, var(--ref-palette-primary80) 14%, var(--ref-palette-neutral10));
315 --sys-color-surface4: color-mix(in srgb, var(--ref-palette-primary80) 12%, var(--ref-palette-neutral10));
316 --sys-color-surface3: color-mix(in srgb, var(--ref-palette-primary80) 11%, var(--ref-palette-neutral10));
317 --sys-color-surface2: color-mix(in srgb, var(--ref-palette-primary80) 8%, var(--ref-palette-neutral10));
318 --sys-color-surface1: color-mix(in srgb, var(--ref-palette-primary80) 5%, var(--ref-palette-neutral10));
319
320 /* Header surface */
321 --sys-color-header-container: var(--ref-palette-neutral25);
322
323 /* Chrome DevTools Design System */
324
325 /* Prominent accent colors for icons */
326
327 --sys-color-primary-bright: var(--ref-palette-primary70);
328 --sys-color-blue-bright: var(--ref-palette-blue70);
329 --sys-color-green-bright: var(--ref-palette-green70);
330 --sys-color-error-bright: var(--ref-palette-error60);
331 --sys-color-orange-bright: var(--ref-palette-orange70);
332 --sys-color-yellow-bright: var(--ref-palette-yellow70);
333 --sys-color-cyan-bright: var(--ref-palette-cyan70);
334 --sys-color-purple-bright: var(--ref-palette-purple70);
335 --sys-color-neutral-bright: var(--ref-palette-neutral50);
336 --sys-color-pink-bright: var(--ref-palette-pink70);
337
338 /* Prominent accent colors for text */
339
340 --sys-color-blue: var(--ref-palette-blue80);
341 --sys-color-on-blue: var(--ref-palette-blue20);
342 --sys-color-green: var(--ref-palette-green80);
343 --sys-color-on-green: var(--ref-palette-green20);
344 --sys-color-orange: var(--ref-palette-orange80);
345 --sys-color-on-orange: var(--ref-palette-orange20);
346 --sys-color-yellow: var(--ref-palette-yellow80);
347 --sys-color-on-yellow: var(--ref-palette-yellow20);
348 --sys-color-cyan: var(--ref-palette-cyan80);
349 --sys-color-on-cyan: var(--ref-palette-cyan20);
350 --sys-color-purple: var(--ref-palette-purple80);
351 --sys-color-on-purple: var(--ref-palette-purple20);
352 --sys-color-pink: var(--ref-palette-pink80);
353 --sys-color-on-pink: var(--ref-palette-pink20);
354
355 /* Containers */
356
357 --sys-color-yellow-container: var(--ref-palette-yellow30);
358 --sys-color-on-yellow-container: var(--ref-palette-yellow90);
359
360 /* Universal surfaces */
361
362 --sys-color-cdt-base: var(--sys-color-base);
363 --sys-color-cdt-base-container: var(--sys-color-base-container);
364
365 /* Tinted surfaces */
366
367 --sys-color-surface-yellow: rgb(65 60 38 / 100%);
368 --sys-color-surface-yellow-high: rgb(76 68 37 / 100%);
369 --sys-color-surface-error: rgb(78 53 52 / 100%);
370 --sys-color-surface-green: rgb(43 70 51 / 100%);
371
372 /* Corresponding on colors */
373
374 --sys-color-on-surface-yellow: var(--ref-palette-yellow90);
375 --sys-color-on-surface-error: var(--ref-palette-error90);
376 --sys-color-on-surface-green: var(--ref-palette-green90);
377
378 /* Syntax highlighting */
379
380 --sys-color-token-variable: var(--ref-palette-neutral80);
381 --sys-color-token-property: var(--ref-palette-yellow70);
382 --sys-color-token-property-special: var(--ref-palette-cyan80);
383 --sys-color-token-type: var(--ref-palette-blue70);
384 --sys-color-token-definition: var(--ref-palette-blue70);
385 --sys-color-token-variable-special: var(--ref-palette-blue40);
386 --sys-color-token-builtin: var(--ref-palette-blue80);
387 --sys-color-token-keyword: var(--ref-palette-purple60);
388 --sys-color-token-number: var(--ref-palette-green90);
389 --sys-color-token-string: var(--ref-palette-orange70);
390 --sys-color-token-string-special: var(--ref-palette-orange70);
391 --sys-color-token-atom: var(--ref-palette-green90);
392 --sys-color-token-tag: var(--ref-palette-blue70);
393 --sys-color-token-attribute: var(--ref-palette-blue80);
394 --sys-color-token-attribute-value: var(--ref-palette-orange70);
395 --sys-color-token-comment: var(--ref-palette-neutral70);
396 --sys-color-token-meta: var(--ref-palette-neutral60);
397 --sys-color-token-deleted: var(--ref-palette-error50);
398 --sys-color-token-inserted: var(--ref-palette-green60);
399 --sys-color-token-pseudo-element: var(--ref-palette-pink70);
400 --sys-color-token-subtle: var(--ref-palette-neutral60);
401
402 /**
403 * Gradients
404 */
405 --sys-color-gradient-primary: var(--ref-palette-primary30);
406 --sys-color-gradient-tertiary: var(--ref-palette-tertiary30);
407 }
408
409 /* Colors end */
410
411 /* Sizes begin */
412
413 --sys-size-1: 1px;
414 --sys-size-2: 2px;
415 --sys-size-3: 4px;
416 --sys-size-4: 6px;
417 --sys-size-5: 8px;
418 --sys-size-6: 12px;
419 --sys-size-7: 14px;
420 --sys-size-8: 16px;
421 --sys-size-9: 20px;
422 --sys-size-10: 22px;
423 --sys-size-11: 24px;
424 --sys-size-12: 28px;
425 --sys-size-13: 32px;
426 --sys-size-14: 40px;
427 --sys-size-15: 44px;
428 --sys-size-16: 48px;
429 --sys-size-17: 56px;
430 --sys-size-18: 64px;
431 --sys-size-19: 80px;
432 --sys-size-20: 112px;
433 --sys-size-21: 128px;
434 --sys-size-22: 144px;
435 --sys-size-23: 160px;
436 --sys-size-24: 176px;
437 --sys-size-25: 192px;
438 --sys-size-26: 208px;
439 --sys-size-27: 224px;
440 --sys-size-28: 240px;
441 --sys-size-29: 256px;
442 --sys-size-30: 288px;
443 --sys-size-31: 320px;
444 --sys-size-32: 384px;
445 --sys-size-33: 448px;
446 --sys-size-34: 512px;
447 --sys-size-35: 576px;
448 --sys-size-36: 672px;
449 --sys-size-37: 768px;
450 --sys-size-38: 896px;
451 --sys-size-39: 1024px;
452 --sys-size-40: 1152px;
453 --sys-size-41: 1280px;
Kim-Anh Tran7e432fa2025-02-04 08:26:52[diff] [blame]454
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]455 /* Sizes end */
456
457 /* Typography begin */
458
Kim-Anh Tran7e432fa2025-02-04 08:26:52[diff] [blame]459 /* This will be overridden by the platform-X classes that get
460 * added to the html tag on load, but is here as a safe
461 * fallback
462 */
463 --default-font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
464 --monospace-font-size: 10px;
465 --monospace-font-family: monospace;
466 --source-code-font-size: 11px;
467 --source-code-font-family: monospace;
468
469 /* Default fonts */
470 &.platform-linux {
471 --default-font-family: "Google Sans Text", "Google Sans", system-ui, sans-serif;
472 --monospace-font-size: 11px;
473 --monospace-font-family: "Noto Sans Mono", "DejaVu Sans Mono", monospace;
474 --source-code-font-size: 11px;
475 --source-code-font-family: "Noto Sans Mono", "DejaVu Sans Mono", monospace;
476 }
477
478 &.platform-mac {
479 --default-font-family: system-ui, sans-serif;
480 --monospace-font-size: 11px;
481 --monospace-font-family: monospace;
482 --source-code-font-size: 11px;
483 --source-code-font-family: monospace;
484 }
485
486 &.platform-windows {
487 --default-font-family: system-ui, sans-serif;
488 --monospace-font-size: var(--sys-size-6);
489 --monospace-font-family: monospace;
490 --source-code-font-size: var(--sys-size-6);
491 --source-code-font-family: monospace;
492 }
493
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]494 --ref-typeface-weight-regular: 400;
495 --ref-typeface-weight-medium: 500;
496 --ref-typeface-weight-bold: 700;
497 --sys-typescale-headline1: var(--ref-typeface-weight-medium) var(--sys-typescale-headline1-size) / var(--sys-typescale-headline1-line-height) var(--default-font-family);
498 --sys-typescale-headline2: var(--ref-typeface-weight-medium) var(--sys-typescale-headline2-size) / var(--sys-typescale-headline2-line-height) var(--default-font-family);
499 --sys-typescale-headline3: var(--ref-typeface-weight-medium) var(--sys-typescale-headline3-size) / var(--sys-typescale-headline3-line-height) var(--default-font-family);
500 --sys-typescale-headline4: var(--ref-typeface-weight-medium) var(--sys-typescale-headline4-size) / var(--sys-typescale-headline4-line-height) var(--default-font-family);
501 --sys-typescale-headline5: var(--ref-typeface-weight-medium) var(--sys-typescale-headline5-size) / var(--sys-typescale-headline5-line-height) var(--default-font-family);
502 --sys-typescale-body1-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
503 --sys-typescale-body2-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
504 --sys-typescale-body3-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
505 --sys-typescale-body4-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
506 --sys-typescale-body5-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
507 --sys-typescale-body1-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
508 --sys-typescale-body2-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
509 --sys-typescale-body3-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
510 --sys-typescale-body4-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
511 --sys-typescale-body5-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
512 --sys-typescale-body1-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
513 --sys-typescale-body2-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
514 --sys-typescale-body3-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
515 --sys-typescale-body4-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
516 --sys-typescale-body5-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
517 --sys-typescale-monospace-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-monospace-size) / var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
518 --sys-typescale-monospace-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-monospace-size) / var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
519 --sys-typescale-headline1-size: 24px;
520 --sys-typescale-headline2-size: 20px;
521 --sys-typescale-headline3-size: 18px;
522 --sys-typescale-headline4-size: 16px;
523 --sys-typescale-headline5-size: 14px;
524 --sys-typescale-body1-size: 16px;
525 --sys-typescale-body2-size: 14px;
526 --sys-typescale-body3-size: 13px;
527 --sys-typescale-body4-size: 12px;
528 --sys-typescale-body5-size: 11px;
529 --sys-typescale-monospace-size: 11px;
530 --sys-typescale-headline1-line-height: 32px;
531 --sys-typescale-headline2-line-height: 24px;
532 --sys-typescale-headline3-line-height: 24px;
533 --sys-typescale-headline4-line-height: 24px;
534 --sys-typescale-headline5-line-height: 20px;
535 --sys-typescale-body1-line-height: 24px;
536 --sys-typescale-body2-line-height: 20px;
537 --sys-typescale-body3-line-height: 20px;
538 --sys-typescale-body4-line-height: 16px;
539 --sys-typescale-body5-line-height: 16px;
540 --sys-typescale-monospace-line-height: 1.2;
541
542 /* Typography end */
543
544 /* Elevation begin */
545
546 --sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
547 --sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
548 --sys-elevation-level3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
549 --sys-elevation-level4: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px 0 rgb(0 0 0 / 30%);
550 --sys-elevation-level5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
551
552 /* Elevation end */
553
554 /* Shape begin */
555
556 --sys-shape-corner-extra-small: 4px;
557 --sys-shape-corner-small: 8px;
558 --sys-shape-corner-medium-small: 12px;
559 --sys-shape-corner-medium: 16px;
560 --sys-shape-corner-large: 24px;
561 --sys-shape-corner-full: 9999px;
562
563 /* Shape end */
564
565 /* Motion begin */
566
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]567 --sys-motion-curve-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
Kim-Anh Tran7e432fa2025-02-04 08:26:52[diff] [blame]568 --sys-motion-duration-short4: 200ms;
569 --sys-motion-duration-medium2: 300ms;
570 --sys-motion-duration-long2: 500ms;
571 --sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
Kim-Anh Trand452a532025-01-28 08:32:18[diff] [blame]572
573 /* Motion end */
574
575 /**
576 * Reference colors. Reference colors are a set of base colors that get updated on Chrome
577 * color theme changes and should not be directly used (except when defining system or
578 * application colors).
579 *
580 * DON'T CHANGE AND DON'T USE THEM DIRECTLY IN CODE.
581 * More info: https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/styleguide/ux/styles.md#colors
Kim-Anh Tran73597f02025-01-22 13:23:11[diff] [blame]582 **/
583 --ref-palette-primary0: var(--color-ref-primary0, rgb(0 0 0 / 100%));
584 --ref-palette-primary10: var(--color-ref-primary10, rgb(4 30 73 / 100%));
585 --ref-palette-primary20: var(--color-ref-primary20, rgb(6 46 111 / 100%));
586 --ref-palette-primary30: var(--color-ref-primary30, rgb(8 66 160 / 100%));
587 --ref-palette-primary40: var(--color-ref-primary40, rgb(11 87 208 / 100%));
588 --ref-palette-primary50: var(--color-ref-primary50, rgb(27 110 243 / 100%));
589 --ref-palette-primary60: var(--color-ref-primary60, rgb(76 141 246 / 100%));
590 --ref-palette-primary70: var(--color-ref-primary70, rgb(124 172 248 / 100%));
591 --ref-palette-primary80: var(--color-ref-primary80, rgb(168 199 250 / 100%));
592 --ref-palette-primary90: var(--color-ref-primary90, rgb(211 227 253 / 100%));
593 --ref-palette-primary95: var(--color-ref-primary95, rgb(236 243 254 / 100%));
594 --ref-palette-primary99: var(--color-ref-primary99, rgb(250 251 255 / 100%));
595 --ref-palette-primary100: var(--color-ref-primary100, rgb(255 255 255 / 100%));
596 --ref-palette-secondary0: var(--color-ref-secondary0, rgb(0 0 0 / 100%));
597 --ref-palette-secondary10: var(--color-ref-secondary10, rgb(0 29 53 / 100%));
598 --ref-palette-secondary15: var(--color-ref-secondary15, rgb(0 40 69 / 100%));
599 --ref-palette-secondary20: var(--color-ref-secondary20, rgb(0 51 85 / 100%));
600 --ref-palette-secondary25: var(--color-ref-secondary25, rgb(0 63 102 / 100%));
601 --ref-palette-secondary30: var(--color-ref-secondary30, rgb(0 74 119 / 100%));
602 --ref-palette-secondary35: var(--color-ref-secondary35, rgb(0 87 137 / 100%));
603 --ref-palette-secondary40: var(--color-ref-secondary40, rgb(0 99 155 / 100%));
604 --ref-palette-secondary50: var(--color-ref-secondary50, rgb(4 125 183 / 100%));
605 --ref-palette-secondary60: var(--color-ref-secondary60, rgb(57 152 211 / 100%));
606 --ref-palette-secondary70: var(--color-ref-secondary70, rgb(90 179 240 / 100%));
607 --ref-palette-secondary80: var(--color-ref-secondary80, rgb(127 207 255 / 100%));
608 --ref-palette-secondary90: var(--color-ref-secondary90, rgb(223 243 255 / 100%));
609 --ref-palette-secondary95: var(--color-ref-secondary95, rgb(223 243 255 / 100%));
610 --ref-palette-secondary99: var(--color-ref-secondary99, rgb(247 252 255 / 100%));
611 --ref-palette-secondary100: var(--color-ref-secondary100, rgb(255 255 255 / 100%));
612 --ref-palette-tertiary0: var(--color-ref-tertiary0, rgb(0 0 0 / 100%));
613 --ref-palette-tertiary10: var(--color-ref-tertiary10, rgb(7 39 17 / 100%));
614 --ref-palette-tertiary20: var(--color-ref-tertiary20, rgb(10 56 24 / 100%));
615 --ref-palette-tertiary30: var(--color-ref-tertiary30, rgb(15 82 35 / 100%));
616 --ref-palette-tertiary40: var(--color-ref-tertiary40, rgb(20 108 46 / 100%));
617 --ref-palette-tertiary50: var(--color-ref-tertiary50, rgb(25 134 57 / 100%));
618 --ref-palette-tertiary60: var(--color-ref-tertiary60, rgb(30 164 70 / 100%));
619 --ref-palette-tertiary70: var(--color-ref-tertiary70, rgb(55 190 95 / 100%));
620 --ref-palette-tertiary80: var(--color-ref-tertiary80, rgb(109 213 140 / 100%));
621 --ref-palette-tertiary90: var(--color-ref-tertiary90, rgb(196 238 208 / 100%));
622 --ref-palette-tertiary95: var(--color-ref-tertiary95, rgb(231 248 237 / 100%));
623 --ref-palette-tertiary99: var(--color-ref-tertiary99, rgb(242 255 238 / 100%));
624 --ref-palette-tertiary100: var(--color-ref-tertiary100, rgb(255 255 255 / 100%));
625 --ref-palette-error0: var(--color-ref-error0, rgb(0 0 0 / 100%));
626 --ref-palette-error10: var(--color-ref-error10, rgb(65 14 11 / 100%));
627 --ref-palette-error20: var(--color-ref-error20, rgb(96 20 16 / 100%));
628 --ref-palette-error30: var(--color-ref-error30, rgb(140 29 24 / 100%));
629 --ref-palette-error40: var(--color-ref-error40, rgb(179 38 30 / 100%));
630 --ref-palette-error50: var(--color-ref-error50, rgb(220 54 46 / 100%));
631 --ref-palette-error60: var(--color-ref-error60, rgb(228 105 98 / 100%));
632 --ref-palette-error70: var(--color-ref-error70, rgb(236 146 142 / 100%));
633 --ref-palette-error80: var(--color-ref-error80, rgb(242 184 181 / 100%));
634 --ref-palette-error90: var(--color-ref-error90, rgb(249 222 220 / 100%));
635 --ref-palette-error95: var(--color-ref-error95, rgb(231 248 237 / 100%));
636 --ref-palette-error99: var(--color-ref-error99, rgb(242 255 238 / 100%));
637 --ref-palette-error100: var(--color-ref-error100, rgb(255 255 255 / 100%));
638 --ref-palette-neutral0: var(--color-ref-neutral0, rgb(0 0 0 / 100%));
639 --ref-palette-neutral10: var(--color-ref-neutral10, rgb(31 31 31 / 100%));
640 --ref-palette-neutral15: var(--color-ref-neutral15, rgb(40 40 40 / 100%));
641 --ref-palette-neutral20: var(--color-ref-neutral20, rgb(48 48 48 / 100%));
642 --ref-palette-neutral25: var(--color-ref-neutral25, rgb(60 60 60 / 100%));
643 --ref-palette-neutral30: var(--color-ref-neutral30, rgb(71 71 71 / 100%));
644 --ref-palette-neutral40: var(--color-ref-neutral40, rgb(94 94 94 / 100%));
645 --ref-palette-neutral50: var(--color-ref-neutral50, rgb(117 117 117 / 100%));
646 --ref-palette-neutral60: var(--color-ref-neutral60, rgb(143 143 143 / 100%));
647 --ref-palette-neutral70: var(--color-ref-neutral70, rgb(171 171 171 / 100%));
648 --ref-palette-neutral80: var(--color-ref-neutral80, rgb(199 199 199 / 100%));
649 --ref-palette-neutral90: var(--color-ref-neutral90, rgb(227 227 227 / 100%));
650 --ref-palette-neutral94: var(--color-ref-neutral94, rgb(239 237 237 / 100%));
651 --ref-palette-neutral95: var(--color-ref-neutral95, rgb(242 242 242 / 100%));
652 --ref-palette-neutral98: var(--color-ref-neutral98, rgb(250 249 248 / 100%));
653 --ref-palette-neutral99: var(--color-ref-neutral99, rgb(253 252 251 / 100%));
654 --ref-palette-neutral100: var(--color-ref-neutral100, rgb(255 255 255 / 100%));
655 --ref-palette-neutral-variant0: var(--color-ref-neutral-variant0, rgb(0 0 0 / 100%));
656 --ref-palette-neutral-variant10: var(--color-ref-neutral-variant10, rgb(25 29 28 / 100%));
657 --ref-palette-neutral-variant20: var(--color-ref-neutral-variant20, rgb(45 49 47 / 100%));
658 --ref-palette-neutral-variant30: var(--color-ref-neutral-variant30, rgb(68 71 70 / 100%));
659 --ref-palette-neutral-variant40: var(--color-ref-neutral-variant40, rgb(92 95 94 / 100%));
660 --ref-palette-neutral-variant50: var(--color-ref-neutral-variant50, rgb(116 119 117 / 100%));
661 --ref-palette-neutral-variant60: var(--color-ref-neutral-variant60, rgb(142 145 143 / 100%));
662 --ref-palette-neutral-variant70: var(--color-ref-neutral-variant70, rgb(169 172 170 / 100%));
663 --ref-palette-neutral-variant80: var(--color-ref-neutral-variant80, rgb(196 199 197 / 100%));
664 --ref-palette-neutral-variant90: var(--color-ref-neutral-variant90, rgb(225 227 225 / 100%));
665 --ref-palette-neutral-variant95: var(--color-ref-neutral-variant95, rgb(239 242 239 / 100%));
666 --ref-palette-neutral-variant99: var(--color-ref-neutral-variant99, rgb(250 253 251 / 100%));
667 --ref-palette-neutral-variant100: var(--color-ref-neutral-variant100, rgb(255 255 255 / 100%));
668
669 /* Additional fixed colors */
670 --ref-palette-blue0: rgb(0 0 0 / 100%);
671 --ref-palette-blue10: rgb(4 30 73 / 100%);
672 --ref-palette-blue20: rgb(6 46 111 / 100%);
673 --ref-palette-blue30: rgb(8 66 160 / 100%);
674 --ref-palette-blue40: rgb(11 87 208 / 100%);
675 --ref-palette-blue50: rgb(27 110 243 / 100%);
676 --ref-palette-blue60: rgb(76 141 246 / 100%);
677 --ref-palette-blue70: rgb(124 172 248 / 100%);
678 --ref-palette-blue80: rgb(168 199 250 / 100%);
679 --ref-palette-blue90: rgb(211 227 253 / 100%);
680 --ref-palette-blue95: rgb(236 243 254 / 100%);
681 --ref-palette-blue99: rgb(250 251 255 / 100%);
682 --ref-palette-blue100: rgb(255 255 255 / 100%);
683 --ref-palette-green0: rgb(0 0 0 / 100%);
684 --ref-palette-green10: rgb(7 39 17 / 100%);
685 --ref-palette-green20: rgb(10 56 24 / 100%);
686 --ref-palette-green30: rgb(15 82 35 / 100%);
687 --ref-palette-green40: rgb(20 108 46 / 100%);
688 --ref-palette-green50: rgb(25 134 57 / 100%);
689 --ref-palette-green60: rgb(30 164 70 / 100%);
690 --ref-palette-green70: rgb(55 190 95 / 100%);
691 --ref-palette-green80: rgb(109 213 140 / 100%);
692 --ref-palette-green90: rgb(196 238 208 / 100%);
693 --ref-palette-green95: rgb(231 248 237 / 100%);
694 --ref-palette-green99: rgb(242 255 238 / 100%);
695 --ref-palette-green100: rgb(255 255 255 / 100%);
696 --ref-palette-orange0: rgb(0 0 0 / 100%);
697 --ref-palette-orange10: rgb(53 16 2 / 100%);
698 --ref-palette-orange20: rgb(85 32 5 / 100%);
699 --ref-palette-orange30: rgb(121 50 11 / 100%);
700 --ref-palette-orange40: rgb(159 67 18 / 100%);
701 --ref-palette-orange50: rgb(198 85 26 / 100%);
702 --ref-palette-orange60: rgb(233 103 37 / 100%);
703 --ref-palette-orange70: rgb(254 141 89 / 100%);
704 --ref-palette-orange80: rgb(254 183 150 / 100%);
705 --ref-palette-orange90: rgb(255 220 204 / 100%);
706 --ref-palette-orange95: rgb(255 236 230 / 100%);
707 --ref-palette-orange99: rgb(255 251 255 / 100%);
708 --ref-palette-orange100: rgb(255 255 255 / 100%);
709 --ref-palette-yellow0: rgb(0 0 0 / 100%);
710 --ref-palette-yellow10: rgb(36 26 0 / 100%);
711 --ref-palette-yellow20: rgb(62 47 0 / 100%);
712 --ref-palette-yellow30: rgb(92 67 0 / 100%);
713 --ref-palette-yellow40: rgb(151 103 0 / 100%);
714 --ref-palette-yellow50: rgb(202 138 4 / 100%);
715 --ref-palette-yellow60: rgb(234 179 8 / 100%);
716 --ref-palette-yellow70: rgb(250 204 21 / 100%);
717 --ref-palette-yellow80: rgb(253 224 71 / 100%);
718 --ref-palette-yellow90: rgb(253 243 170 / 100%);
719 --ref-palette-yellow95: rgb(252 248 210 / 100%);
720 --ref-palette-yellow99: rgb(255 251 235 / 100%);
721 --ref-palette-yellow100: rgb(255 255 255 / 100%);
722 --ref-palette-cyan0: rgb(0 0 0 / 100%);
723 --ref-palette-cyan10: rgb(0 31 40 / 100%);
724 --ref-palette-cyan20: rgb(0 53 67 / 100%);
725 --ref-palette-cyan30: rgb(0 78 96 / 100%);
726 --ref-palette-cyan40: rgb(0 103 127 / 100%);
727 --ref-palette-cyan50: rgb(0 130 159 / 100%);
728 --ref-palette-cyan60: rgb(0 157 193 / 100%);
729 --ref-palette-cyan70: rgb(56 185 222 / 100%);
730 --ref-palette-cyan80: rgb(92 213 251 / 100%);
731 --ref-palette-cyan90: rgb(183 234 255 / 100%);
732 --ref-palette-cyan95: rgb(221 245 255 / 100%);
733 --ref-palette-cyan99: rgb(249 253 255 / 100%);
734 --ref-palette-cyan100: rgb(255 255 255 / 100%);
735 --ref-palette-purple0: rgb(0 0 0 / 100%);
736 --ref-palette-purple10: rgb(47 0 77 / 100%);
737 --ref-palette-purple20: rgb(77 0 122 / 100%);
738 --ref-palette-purple30: rgb(110 0 171 / 100%);
739 --ref-palette-purple40: rgb(140 30 211 / 100%);
740 --ref-palette-purple50: rgb(167 67 238 / 100%);
741 --ref-palette-purple60: rgb(191 103 255 / 100%);
742 --ref-palette-purple70: rgb(209 144 255 / 100%);
743 --ref-palette-purple80: rgb(226 182 255 / 100%);
744 --ref-palette-purple90: rgb(243 218 255 / 100%);
745 --ref-palette-purple95: rgb(251 236 255 / 100%);
746 --ref-palette-purple99: rgb(255 251 255 / 100%);
747 --ref-palette-purple100: rgb(255 255 255 / 100%);
748 --ref-palette-pink0: rgb(0 0 0 / 100%);
749 --ref-palette-pink10: rgb(62 0 29 / 100%);
750 --ref-palette-pink20: rgb(101 0 51 / 100%);
751 --ref-palette-pink30: rgb(142 0 75 / 100%);
752 --ref-palette-pink40: rgb(185 0 99 / 100%);
753 --ref-palette-pink50: rgb(223 35 125 / 100%);
754 --ref-palette-pink55: rgb(255 72 150 / 100%);
755 --ref-palette-pink60: rgb(255 72 150 / 100%);
756 --ref-palette-pink70: rgb(255 132 175 / 100%);
757 --ref-palette-pink80: rgb(255 177 200 / 100%);
758 --ref-palette-pink90: rgb(255 217 226 / 100%);
759 --ref-palette-pink95: rgb(255 236 240 / 100%);
760 --ref-palette-pink99: rgb(255 251 255 / 100%);
761 --ref-palette-pink100: rgb(255 255 255 / 100%);
762 --ref-palette-indigo0: rgb(0 0 0 / 100%);
763 --ref-palette-indigo10: rgb(23 0 101 / 100%);
764 --ref-palette-indigo20: rgb(41 0 159 / 100%);
765 --ref-palette-indigo30: rgb(63 28 203 / 100%);
766 --ref-palette-indigo40: rgb(88 64 227 / 100%);
767 --ref-palette-indigo50: rgb(113 93 253 / 100%);
768 --ref-palette-indigo60: rgb(141 127 255 / 100%);
769 --ref-palette-indigo70: rgb(170 160 255 / 100%);
770 --ref-palette-indigo80: rgb(199 191 255 / 100%);
771 --ref-palette-indigo90: rgb(228 223 255 / 100%);
772 --ref-palette-indigo95: rgb(243 238 255 / 100%);
773 --ref-palette-indigo99: rgb(255 251 255 / 100%);
774 --ref-palette-indigo100: rgb(255 255 255 / 100%);
Kateryna Prokopenko0508f122024-03-08 14:32:07[diff] [blame]775}