chrome-devtools-frontend 1.0.1593959 → 1.0.1595090

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 (73) hide show
  1. package/docs/contributing/settings-experiments-features.md +25 -5
  2. package/front_end/core/common/README.md +126 -0
  3. package/front_end/core/sdk/CSSModel.ts +22 -0
  4. package/front_end/core/sdk/CSSNavigation.ts +33 -0
  5. package/front_end/core/sdk/CSSRule.ts +12 -2
  6. package/front_end/core/sdk/sdk-meta.ts +22 -18
  7. package/front_end/core/sdk/sdk.ts +2 -0
  8. package/front_end/design_system_tokens.css +538 -259
  9. package/front_end/entrypoints/main/main-meta.ts +2 -2
  10. package/front_end/generated/SupportedCSSProperties.js +12 -0
  11. package/front_end/models/issues_manager/Issue.ts +1 -0
  12. package/front_end/models/issues_manager/IssueAggregator.ts +9 -0
  13. package/front_end/models/issues_manager/IssuesManager.ts +5 -0
  14. package/front_end/models/issues_manager/SelectivePermissionsInterventionIssue.ts +65 -0
  15. package/front_end/models/issues_manager/descriptions/selectivePermissionsIntervention.md +7 -0
  16. package/front_end/models/issues_manager/issues_manager.ts +2 -0
  17. package/front_end/models/javascript_metadata/NativeFunctions.js +44 -9
  18. package/front_end/models/persistence/persistence-meta.ts +4 -4
  19. package/front_end/panels/ai_assistance/AiAssistancePanel.ts +12 -1
  20. package/front_end/panels/ai_assistance/components/ChatInput.ts +37 -30
  21. package/front_end/panels/ai_assistance/components/ChatView.ts +4 -2
  22. package/front_end/panels/ai_assistance/components/chatInput.css +26 -1
  23. package/front_end/panels/application/StorageView.ts +8 -2
  24. package/front_end/panels/application/preloading/PreloadingView.ts +105 -7
  25. package/front_end/panels/application/preloading/preloadingView.css +4 -0
  26. package/front_end/panels/console/ConsoleView.ts +2 -2
  27. package/front_end/panels/console/console-meta.ts +18 -14
  28. package/front_end/panels/elements/ComputedStyleWidget.ts +12 -7
  29. package/front_end/panels/elements/ElementsPanel.ts +1 -1
  30. package/front_end/panels/elements/ElementsTreeOutline.ts +4 -6
  31. package/front_end/panels/elements/ImagePreviewPopover.ts +6 -9
  32. package/front_end/panels/elements/StylePropertiesSection.ts +30 -0
  33. package/front_end/panels/elements/StylesSidebarPane.ts +13 -7
  34. package/front_end/panels/elements/elements-meta.ts +12 -8
  35. package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts +120 -0
  36. package/front_end/panels/issues/IssueView.ts +2 -0
  37. package/front_end/panels/issues/IssuesPane.ts +6 -0
  38. package/front_end/panels/issues/issues.ts +2 -0
  39. package/front_end/panels/lighthouse/LighthouseStartView.ts +99 -38
  40. package/front_end/panels/lighthouse/LighthouseTimespanView.ts +53 -14
  41. package/front_end/panels/lighthouse/RadioSetting.ts +33 -19
  42. package/front_end/panels/lighthouse/lighthouse.ts +2 -0
  43. package/front_end/panels/media/PlayerMessagesView.ts +62 -49
  44. package/front_end/panels/media/media.ts +2 -0
  45. package/front_end/panels/media/playerMessagesView.css +1 -1
  46. package/front_end/panels/profiler/HeapSnapshotGridNodes.ts +49 -24
  47. package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts +2 -2
  48. package/front_end/panels/sources/sources-meta.ts +8 -4
  49. package/front_end/panels/utils/utils.ts +11 -5
  50. package/front_end/third_party/chromium/README.chromium +1 -1
  51. package/front_end/third_party/lit/lib/async-directive.d.ts +465 -0
  52. package/front_end/third_party/lit/lib/async-directive.js +23 -0
  53. package/front_end/third_party/lit/lib/async-directive.js.map +1 -0
  54. package/front_end/third_party/lit/lib/decorators.d.ts +7 -1
  55. package/front_end/third_party/lit/lib/decorators.js +2 -2
  56. package/front_end/third_party/lit/lib/decorators.js.map +1 -1
  57. package/front_end/third_party/lit/lib/directive.js.map +1 -1
  58. package/front_end/third_party/lit/lib/directives.d.ts +27 -8
  59. package/front_end/third_party/lit/lib/directives.js +8 -8
  60. package/front_end/third_party/lit/lib/directives.js.map +1 -1
  61. package/front_end/third_party/lit/lib/lit.d.ts +15 -5
  62. package/front_end/third_party/lit/lib/lit.js +4 -4
  63. package/front_end/third_party/lit/lib/lit.js.map +1 -1
  64. package/front_end/third_party/lit/lib/static-html.js +2 -2
  65. package/front_end/third_party/lit/lib/static-html.js.map +1 -1
  66. package/front_end/third_party/lit/lit.ts +2 -1
  67. package/front_end/third_party/lit/rollup.config.mjs +1 -1
  68. package/front_end/ui/components/markdown_view/MarkdownLinksMap.ts +5 -0
  69. package/front_end/ui/legacy/components/utils/ImagePreview.ts +27 -23
  70. package/front_end/ui/lit/lit.ts +1 -0
  71. package/front_end/ui/visual_logging/Debugging.ts +1 -1
  72. package/front_end/ui/visual_logging/KnownContextValues.ts +4 -0
  73. package/package.json +1 -1
@@ -19,6 +19,8 @@
19
19
  --sys-color-on-surface-subtle: var(--ref-palette-neutral30);
20
20
  --sys-color-on-surface-secondary: var(--ref-palette-neutral30);
21
21
  --sys-color-on-surface-primary: var(--ref-palette-primary10);
22
+ --sys-color-on-surface-light: var(--ref-palette-neutral50);
23
+ --sys-color-on-surface-light-graphics: var(--ref-palette-neutral60);
22
24
 
23
25
  /* Universal surfaces */
24
26
 
@@ -76,13 +78,33 @@
76
78
 
77
79
  /* States */
78
80
 
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);
81
+ --sys-color-state-hover-on-prominent: color-mix(
82
+ in srgb,
83
+ var(--ref-palette-neutral99) 10%,
84
+ transparent
85
+ );
86
+ --sys-color-state-hover-on-subtle: color-mix(
87
+ in srgb,
88
+ var(--ref-palette-neutral10) 6%,
89
+ transparent
90
+ );
81
91
  --sys-color-state-hover-dim-blend-protection: rgb(6 46 111 / 18%);
82
92
  --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 6%);
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);
93
+ --sys-color-state-ripple-neutral-on-prominent: color-mix(
94
+ in srgb,
95
+ var(--ref-palette-neutral99) 16%,
96
+ transparent
97
+ );
98
+ --sys-color-state-ripple-neutral-on-subtle: color-mix(
99
+ in srgb,
100
+ var(--ref-palette-neutral10) 8%,
101
+ transparent
102
+ );
103
+ --sys-color-state-ripple-primary: color-mix(
104
+ in srgb,
105
+ var(--ref-palette-primary70) 32%,
106
+ transparent
107
+ );
86
108
  --sys-color-state-focus-ring: var(--ref-palette-primary40);
87
109
  --sys-color-state-focus-select: var(--ref-palette-primary80);
88
110
  --sys-color-state-focus-highlight: rgb(31 31 31 / 6%);
@@ -96,11 +118,31 @@
96
118
 
97
119
  /* Surfaces */
98
120
 
99
- --sys-color-surface5: color-mix(in srgb, var(--ref-palette-primary40) 14%, var(--ref-palette-neutral99));
100
- --sys-color-surface4: color-mix(in srgb, var(--ref-palette-primary40) 12%, var(--ref-palette-neutral99));
101
- --sys-color-surface3: color-mix(in srgb, var(--ref-palette-primary40) 11%, var(--ref-palette-neutral99));
102
- --sys-color-surface2: color-mix(in srgb, var(--ref-palette-primary40) 8%, var(--ref-palette-neutral99));
103
- --sys-color-surface1: color-mix(in srgb, var(--ref-palette-primary40) 5%, var(--ref-palette-neutral99));
121
+ --sys-color-surface5: color-mix(
122
+ in srgb,
123
+ var(--ref-palette-primary40) 14%,
124
+ var(--ref-palette-neutral99)
125
+ );
126
+ --sys-color-surface4: color-mix(
127
+ in srgb,
128
+ var(--ref-palette-primary40) 12%,
129
+ var(--ref-palette-neutral99)
130
+ );
131
+ --sys-color-surface3: color-mix(
132
+ in srgb,
133
+ var(--ref-palette-primary40) 11%,
134
+ var(--ref-palette-neutral99)
135
+ );
136
+ --sys-color-surface2: color-mix(
137
+ in srgb,
138
+ var(--ref-palette-primary40) 8%,
139
+ var(--ref-palette-neutral99)
140
+ );
141
+ --sys-color-surface1: color-mix(
142
+ in srgb,
143
+ var(--ref-palette-primary40) 5%,
144
+ var(--ref-palette-neutral99)
145
+ );
104
146
 
105
147
  /* Header surfaces */
106
148
  --sys-color-header-container: var(--ref-palette-primary95);
@@ -191,20 +233,60 @@
191
233
  --sys-color-gradient-tertiary: var(--ref-palette-tertiary95);
192
234
 
193
235
  &.baseline-default {
194
- --sys-color-surface5: color-mix(in sRGB, #6991d6 14%, var(--ref-palette-neutral100));
195
- --sys-color-surface4: color-mix(in sRGB, #6991d6 12%, var(--ref-palette-neutral100));
196
- --sys-color-surface3: color-mix(in sRGB, #6991d6 11%, var(--ref-palette-neutral100));
197
- --sys-color-surface2: color-mix(in sRGB, #6991d6 8%, var(--ref-palette-neutral100));
198
- --sys-color-surface1: color-mix(in sRGB, #6991d6 5%, var(--ref-palette-neutral100));
236
+ --sys-color-surface5: color-mix(
237
+ in sRGB,
238
+ #6991d6 14%,
239
+ var(--ref-palette-neutral100)
240
+ );
241
+ --sys-color-surface4: color-mix(
242
+ in sRGB,
243
+ #6991d6 12%,
244
+ var(--ref-palette-neutral100)
245
+ );
246
+ --sys-color-surface3: color-mix(
247
+ in sRGB,
248
+ #6991d6 11%,
249
+ var(--ref-palette-neutral100)
250
+ );
251
+ --sys-color-surface2: color-mix(
252
+ in sRGB,
253
+ #6991d6 8%,
254
+ var(--ref-palette-neutral100)
255
+ );
256
+ --sys-color-surface1: color-mix(
257
+ in sRGB,
258
+ #6991d6 5%,
259
+ var(--ref-palette-neutral100)
260
+ );
199
261
  }
200
262
 
201
263
  &.baseline-grayscale {
202
264
  --sys-color-divider: var(--ref-palette-neutral90);
203
- --sys-color-surface5: color-mix(in srgb, var(--ref-palette-neutral40) 14%, var(--ref-palette-neutral100));
204
- --sys-color-surface4: color-mix(in srgb, var(--ref-palette-neutral40) 12%, var(--ref-palette-neutral100));
205
- --sys-color-surface3: color-mix(in srgb, var(--ref-palette-neutral40) 11%, var(--ref-palette-neutral100));
206
- --sys-color-surface2: color-mix(in srgb, var(--ref-palette-neutral40) 8%, var(--ref-palette-neutral100));
207
- --sys-color-surface1: color-mix(in srgb, var(--ref-palette-neutral40) 5%, var(--ref-palette-neutral100));
265
+ --sys-color-surface5: color-mix(
266
+ in srgb,
267
+ var(--ref-palette-neutral40) 14%,
268
+ var(--ref-palette-neutral100)
269
+ );
270
+ --sys-color-surface4: color-mix(
271
+ in srgb,
272
+ var(--ref-palette-neutral40) 12%,
273
+ var(--ref-palette-neutral100)
274
+ );
275
+ --sys-color-surface3: color-mix(
276
+ in srgb,
277
+ var(--ref-palette-neutral40) 11%,
278
+ var(--ref-palette-neutral100)
279
+ );
280
+ --sys-color-surface2: color-mix(
281
+ in srgb,
282
+ var(--ref-palette-neutral40) 8%,
283
+ var(--ref-palette-neutral100)
284
+ );
285
+ --sys-color-surface1: color-mix(
286
+ in srgb,
287
+ var(--ref-palette-neutral40) 5%,
288
+ var(--ref-palette-neutral100)
289
+ );
208
290
  }
209
291
 
210
292
  &.baseline-default,
@@ -214,11 +296,31 @@
214
296
  --sys-color-cdt-base-container: var(--ref-palette-neutral100);
215
297
 
216
298
  &.theme-with-dark-background {
217
- --sys-color-surface5: color-mix(in sRGB, #d1e1ff 14%, var(--ref-palette-neutral10));
218
- --sys-color-surface4: color-mix(in sRGB, #d1e1ff 12%, var(--ref-palette-neutral10));
219
- --sys-color-surface3: color-mix(in sRGB, #d1e1ff 11%, var(--ref-palette-neutral10));
220
- --sys-color-surface2: color-mix(in sRGB, #d1e1ff 8%, var(--ref-palette-neutral10));
221
- --sys-color-surface1: color-mix(in sRGB, #d1e1ff 5%, var(--ref-palette-neutral10));
299
+ --sys-color-surface5: color-mix(
300
+ in sRGB,
301
+ #d1e1ff 14%,
302
+ var(--ref-palette-neutral10)
303
+ );
304
+ --sys-color-surface4: color-mix(
305
+ in sRGB,
306
+ #d1e1ff 12%,
307
+ var(--ref-palette-neutral10)
308
+ );
309
+ --sys-color-surface3: color-mix(
310
+ in sRGB,
311
+ #d1e1ff 11%,
312
+ var(--ref-palette-neutral10)
313
+ );
314
+ --sys-color-surface2: color-mix(
315
+ in sRGB,
316
+ #d1e1ff 8%,
317
+ var(--ref-palette-neutral10)
318
+ );
319
+ --sys-color-surface1: color-mix(
320
+ in sRGB,
321
+ #d1e1ff 5%,
322
+ var(--ref-palette-neutral10)
323
+ );
222
324
  --sys-color-divider: var(--ref-palette-neutral40);
223
325
  --sys-color-base: var(--ref-palette-neutral25);
224
326
  --sys-color-surface: var(--ref-palette-neutral10);
@@ -235,6 +337,8 @@
235
337
  --sys-color-on-surface-subtle: var(--ref-palette-neutral80);
236
338
  --sys-color-on-surface-secondary: var(--ref-palette-neutral80);
237
339
  --sys-color-on-surface-primary: var(--ref-palette-primary90);
340
+ --sys-color-on-surface-light: var(--ref-palette-neutral60);
341
+ --sys-color-on-surface-light-graphics: var(--ref-palette-neutral50);
238
342
 
239
343
  /* Universal surfaces */
240
344
 
@@ -293,13 +397,33 @@
293
397
 
294
398
  /* States */
295
399
 
296
- --sys-color-state-hover-on-prominent: color-mix(in srgb, var(--ref-palette-neutral10) 6%, transparent);
297
- --sys-color-state-hover-on-subtle: color-mix(in srgb, var(--ref-palette-neutral99) 10%, transparent);
400
+ --sys-color-state-hover-on-prominent: color-mix(
401
+ in srgb,
402
+ var(--ref-palette-neutral10) 6%,
403
+ transparent
404
+ );
405
+ --sys-color-state-hover-on-subtle: color-mix(
406
+ in srgb,
407
+ var(--ref-palette-neutral99) 10%,
408
+ transparent
409
+ );
298
410
  --sys-color-state-hover-dim-blend-protection: rgb(31 31 31 / 10%);
299
411
  --sys-color-state-hover-bright-blend-protection: rgb(31 31 31 / 16%);
300
- --sys-color-state-ripple-neutral-on-prominent: color-mix(in srgb, var(--ref-palette-neutral10) 12%, transparent);
301
- --sys-color-state-ripple-neutral-on-subtle: color-mix(in srgb, var(--ref-palette-neutral99) 16%, transparent);
302
- --sys-color-state-ripple-primary: color-mix(in srgb, var(--ref-palette-primary60) 32%, transparent);
412
+ --sys-color-state-ripple-neutral-on-prominent: color-mix(
413
+ in srgb,
414
+ var(--ref-palette-neutral10) 12%,
415
+ transparent
416
+ );
417
+ --sys-color-state-ripple-neutral-on-subtle: color-mix(
418
+ in srgb,
419
+ var(--ref-palette-neutral99) 16%,
420
+ transparent
421
+ );
422
+ --sys-color-state-ripple-primary: color-mix(
423
+ in srgb,
424
+ var(--ref-palette-primary60) 32%,
425
+ transparent
426
+ );
303
427
  --sys-color-state-focus-ring: var(--ref-palette-primary80);
304
428
  --sys-color-state-focus-select: var(--ref-palette-secondary50);
305
429
  --sys-color-state-focus-highlight: rgb(253 252 251 / 10%);
@@ -312,11 +436,31 @@
312
436
 
313
437
  /* Surfaces */
314
438
 
315
- --sys-color-surface5: color-mix(in srgb, var(--ref-palette-primary80) 14%, var(--ref-palette-neutral10));
316
- --sys-color-surface4: color-mix(in srgb, var(--ref-palette-primary80) 12%, var(--ref-palette-neutral10));
317
- --sys-color-surface3: color-mix(in srgb, var(--ref-palette-primary80) 11%, var(--ref-palette-neutral10));
318
- --sys-color-surface2: color-mix(in srgb, var(--ref-palette-primary80) 8%, var(--ref-palette-neutral10));
319
- --sys-color-surface1: color-mix(in srgb, var(--ref-palette-primary80) 5%, var(--ref-palette-neutral10));
439
+ --sys-color-surface5: color-mix(
440
+ in srgb,
441
+ var(--ref-palette-primary80) 14%,
442
+ var(--ref-palette-neutral10)
443
+ );
444
+ --sys-color-surface4: color-mix(
445
+ in srgb,
446
+ var(--ref-palette-primary80) 12%,
447
+ var(--ref-palette-neutral10)
448
+ );
449
+ --sys-color-surface3: color-mix(
450
+ in srgb,
451
+ var(--ref-palette-primary80) 11%,
452
+ var(--ref-palette-neutral10)
453
+ );
454
+ --sys-color-surface2: color-mix(
455
+ in srgb,
456
+ var(--ref-palette-primary80) 8%,
457
+ var(--ref-palette-neutral10)
458
+ );
459
+ --sys-color-surface1: color-mix(
460
+ in srgb,
461
+ var(--ref-palette-primary80) 5%,
462
+ var(--ref-palette-neutral10)
463
+ );
320
464
 
321
465
  /* Header surface */
322
466
  --sys-color-header-container: var(--ref-palette-neutral25);
@@ -461,7 +605,8 @@
461
605
  * added to the html tag on load, but is here as a safe
462
606
  * fallback
463
607
  */
464
- --default-font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
608
+ --default-font-family:
609
+ '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
465
610
  --monospace-font-size: 10px;
466
611
  --monospace-font-family: monospace;
467
612
  --source-code-font-size: 11px;
@@ -469,11 +614,12 @@
469
614
 
470
615
  /* Default fonts */
471
616
  &.platform-linux {
472
- --default-font-family: "Google Sans Text", "Google Sans", system-ui, sans-serif;
617
+ --default-font-family:
618
+ 'Google Sans Text', 'Google Sans', system-ui, sans-serif;
473
619
  --monospace-font-size: 11px;
474
- --monospace-font-family: "Noto Sans Mono", "DejaVu Sans Mono", monospace;
620
+ --monospace-font-family: 'Noto Sans Mono', 'DejaVu Sans Mono', monospace;
475
621
  --source-code-font-size: 11px;
476
- --source-code-font-family: "Noto Sans Mono", "DejaVu Sans Mono", monospace;
622
+ --source-code-font-family: 'Noto Sans Mono', 'DejaVu Sans Mono', monospace;
477
623
  }
478
624
 
479
625
  &.platform-mac {
@@ -501,28 +647,72 @@
501
647
  --ref-typeface-weight-regular: 400;
502
648
  --ref-typeface-weight-medium: 500;
503
649
  --ref-typeface-weight-bold: 700;
504
- --sys-typescale-headline1: var(--ref-typeface-weight-medium) var(--sys-typescale-headline1-size) / var(--sys-typescale-headline1-line-height) var(--default-font-family);
505
- --sys-typescale-headline2: var(--ref-typeface-weight-medium) var(--sys-typescale-headline2-size) / var(--sys-typescale-headline2-line-height) var(--default-font-family);
506
- --sys-typescale-headline3: var(--ref-typeface-weight-medium) var(--sys-typescale-headline3-size) / var(--sys-typescale-headline3-line-height) var(--default-font-family);
507
- --sys-typescale-headline4: var(--ref-typeface-weight-medium) var(--sys-typescale-headline4-size) / var(--sys-typescale-headline4-line-height) var(--default-font-family);
508
- --sys-typescale-headline5: var(--ref-typeface-weight-medium) var(--sys-typescale-headline5-size) / var(--sys-typescale-headline5-line-height) var(--default-font-family);
509
- --sys-typescale-body1-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
510
- --sys-typescale-body2-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
511
- --sys-typescale-body3-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
512
- --sys-typescale-body4-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
513
- --sys-typescale-body5-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
514
- --sys-typescale-body1-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
515
- --sys-typescale-body2-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
516
- --sys-typescale-body3-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
517
- --sys-typescale-body4-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
518
- --sys-typescale-body5-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
519
- --sys-typescale-body1-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height) var(--default-font-family);
520
- --sys-typescale-body2-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height) var(--default-font-family);
521
- --sys-typescale-body3-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height) var(--default-font-family);
522
- --sys-typescale-body4-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height) var(--default-font-family);
523
- --sys-typescale-body5-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height) var(--default-font-family);
524
- --sys-typescale-monospace-regular: var(--ref-typeface-weight-regular) var(--sys-typescale-monospace-size) / var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
525
- --sys-typescale-monospace-bold: var(--ref-typeface-weight-bold) var(--sys-typescale-monospace-size) / var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
650
+ --sys-typescale-headline1: var(--ref-typeface-weight-medium)
651
+ var(--sys-typescale-headline1-size) /
652
+ var(--sys-typescale-headline1-line-height) var(--default-font-family);
653
+ --sys-typescale-headline2: var(--ref-typeface-weight-medium)
654
+ var(--sys-typescale-headline2-size) /
655
+ var(--sys-typescale-headline2-line-height) var(--default-font-family);
656
+ --sys-typescale-headline3: var(--ref-typeface-weight-medium)
657
+ var(--sys-typescale-headline3-size) /
658
+ var(--sys-typescale-headline3-line-height) var(--default-font-family);
659
+ --sys-typescale-headline4: var(--ref-typeface-weight-medium)
660
+ var(--sys-typescale-headline4-size) /
661
+ var(--sys-typescale-headline4-line-height) var(--default-font-family);
662
+ --sys-typescale-headline5: var(--ref-typeface-weight-medium)
663
+ var(--sys-typescale-headline5-size) /
664
+ var(--sys-typescale-headline5-line-height) var(--default-font-family);
665
+ --sys-typescale-body1-regular: var(--ref-typeface-weight-regular)
666
+ var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height)
667
+ var(--default-font-family);
668
+ --sys-typescale-body2-regular: var(--ref-typeface-weight-regular)
669
+ var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height)
670
+ var(--default-font-family);
671
+ --sys-typescale-body3-regular: var(--ref-typeface-weight-regular)
672
+ var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height)
673
+ var(--default-font-family);
674
+ --sys-typescale-body4-regular: var(--ref-typeface-weight-regular)
675
+ var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height)
676
+ var(--default-font-family);
677
+ --sys-typescale-body5-regular: var(--ref-typeface-weight-regular)
678
+ var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height)
679
+ var(--default-font-family);
680
+ --sys-typescale-body1-medium: var(--ref-typeface-weight-medium)
681
+ var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height)
682
+ var(--default-font-family);
683
+ --sys-typescale-body2-medium: var(--ref-typeface-weight-medium)
684
+ var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height)
685
+ var(--default-font-family);
686
+ --sys-typescale-body3-medium: var(--ref-typeface-weight-medium)
687
+ var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height)
688
+ var(--default-font-family);
689
+ --sys-typescale-body4-medium: var(--ref-typeface-weight-medium)
690
+ var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height)
691
+ var(--default-font-family);
692
+ --sys-typescale-body5-medium: var(--ref-typeface-weight-medium)
693
+ var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height)
694
+ var(--default-font-family);
695
+ --sys-typescale-body1-bold: var(--ref-typeface-weight-bold)
696
+ var(--sys-typescale-body1-size) / var(--sys-typescale-body1-line-height)
697
+ var(--default-font-family);
698
+ --sys-typescale-body2-bold: var(--ref-typeface-weight-bold)
699
+ var(--sys-typescale-body2-size) / var(--sys-typescale-body2-line-height)
700
+ var(--default-font-family);
701
+ --sys-typescale-body3-bold: var(--ref-typeface-weight-bold)
702
+ var(--sys-typescale-body3-size) / var(--sys-typescale-body3-line-height)
703
+ var(--default-font-family);
704
+ --sys-typescale-body4-bold: var(--ref-typeface-weight-bold)
705
+ var(--sys-typescale-body4-size) / var(--sys-typescale-body4-line-height)
706
+ var(--default-font-family);
707
+ --sys-typescale-body5-bold: var(--ref-typeface-weight-bold)
708
+ var(--sys-typescale-body5-size) / var(--sys-typescale-body5-line-height)
709
+ var(--default-font-family);
710
+ --sys-typescale-monospace-regular: var(--ref-typeface-weight-regular)
711
+ var(--sys-typescale-monospace-size) /
712
+ var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
713
+ --sys-typescale-monospace-bold: var(--ref-typeface-weight-bold)
714
+ var(--sys-typescale-monospace-size) /
715
+ var(--sys-typescale-monospace-line-height) var(--monospace-font-family);
526
716
  --sys-typescale-headline1-size: 24px;
527
717
  --sys-typescale-headline2-size: 20px;
528
718
  --sys-typescale-headline3-size: 18px;
@@ -550,11 +740,16 @@
550
740
 
551
741
  /* Elevation begin */
552
742
 
553
- --sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
554
- --sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
555
- --sys-elevation-level3: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
556
- --sys-elevation-level4: 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px 0 rgb(0 0 0 / 30%);
557
- --sys-elevation-level5: 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
743
+ --sys-elevation-level1:
744
+ 0 1px 2px 0 rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
745
+ --sys-elevation-level2:
746
+ 0 1px 2px 0 rgb(0 0 0 / 30%), 0 2px 6px 2px rgb(0 0 0 / 15%);
747
+ --sys-elevation-level3:
748
+ 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px 0 rgb(0 0 0 / 30%);
749
+ --sys-elevation-level4:
750
+ 0 6px 10px 4px rgb(0 0 0 / 15%), 0 2px 3px 0 rgb(0 0 0 / 30%);
751
+ --sys-elevation-level5:
752
+ 0 8px 12px 6px rgb(0 0 0 / 15%), 0 4px 4px 0 rgb(0 0 0 / 30%);
558
753
 
559
754
  /* Elevation end */
560
755
 
@@ -571,7 +766,7 @@
571
766
 
572
767
  /* Motion begin */
573
768
 
574
- --sys-motion-curve-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
769
+ --sys-motion-curve-spatial: cubic-bezier(0.27, 1.06, 0.18, 1);
575
770
  --sys-motion-duration-short4: 200ms;
576
771
  --sys-motion-duration-medium2: 300ms;
577
772
  --sys-motion-duration-long2: 500ms;
@@ -587,196 +782,280 @@
587
782
  * DON'T CHANGE AND DON'T USE THEM DIRECTLY IN CODE.
588
783
  * More info: https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/styleguide/ux/styles.md#colors
589
784
  **/
590
- --ref-palette-primary0: var(--color-ref-primary0, rgb(0 0 0 / 100%));
591
- --ref-palette-primary10: var(--color-ref-primary10, rgb(4 30 73 / 100%));
592
- --ref-palette-primary20: var(--color-ref-primary20, rgb(6 46 111 / 100%));
593
- --ref-palette-primary30: var(--color-ref-primary30, rgb(8 66 160 / 100%));
594
- --ref-palette-primary40: var(--color-ref-primary40, rgb(11 87 208 / 100%));
595
- --ref-palette-primary50: var(--color-ref-primary50, rgb(27 110 243 / 100%));
596
- --ref-palette-primary60: var(--color-ref-primary60, rgb(76 141 246 / 100%));
597
- --ref-palette-primary70: var(--color-ref-primary70, rgb(124 172 248 / 100%));
598
- --ref-palette-primary80: var(--color-ref-primary80, rgb(168 199 250 / 100%));
599
- --ref-palette-primary90: var(--color-ref-primary90, rgb(211 227 253 / 100%));
600
- --ref-palette-primary95: var(--color-ref-primary95, rgb(236 243 254 / 100%));
601
- --ref-palette-primary99: var(--color-ref-primary99, rgb(250 251 255 / 100%));
602
- --ref-palette-primary100: var(--color-ref-primary100, rgb(255 255 255 / 100%));
603
- --ref-palette-secondary0: var(--color-ref-secondary0, rgb(0 0 0 / 100%));
604
- --ref-palette-secondary10: var(--color-ref-secondary10, rgb(0 29 53 / 100%));
605
- --ref-palette-secondary15: var(--color-ref-secondary15, rgb(0 40 69 / 100%));
606
- --ref-palette-secondary20: var(--color-ref-secondary20, rgb(0 51 85 / 100%));
607
- --ref-palette-secondary25: var(--color-ref-secondary25, rgb(0 63 102 / 100%));
608
- --ref-palette-secondary30: var(--color-ref-secondary30, rgb(0 74 119 / 100%));
609
- --ref-palette-secondary35: var(--color-ref-secondary35, rgb(0 87 137 / 100%));
610
- --ref-palette-secondary40: var(--color-ref-secondary40, rgb(0 99 155 / 100%));
611
- --ref-palette-secondary50: var(--color-ref-secondary50, rgb(4 125 183 / 100%));
612
- --ref-palette-secondary60: var(--color-ref-secondary60, rgb(57 152 211 / 100%));
613
- --ref-palette-secondary70: var(--color-ref-secondary70, rgb(90 179 240 / 100%));
614
- --ref-palette-secondary80: var(--color-ref-secondary80, rgb(127 207 255 / 100%));
615
- --ref-palette-secondary90: var(--color-ref-secondary90, rgb(223 243 255 / 100%));
616
- --ref-palette-secondary95: var(--color-ref-secondary95, rgb(223 243 255 / 100%));
617
- --ref-palette-secondary99: var(--color-ref-secondary99, rgb(247 252 255 / 100%));
618
- --ref-palette-secondary100: var(--color-ref-secondary100, rgb(255 255 255 / 100%));
619
- --ref-palette-tertiary0: var(--color-ref-tertiary0, rgb(0 0 0 / 100%));
620
- --ref-palette-tertiary10: var(--color-ref-tertiary10, rgb(7 39 17 / 100%));
621
- --ref-palette-tertiary20: var(--color-ref-tertiary20, rgb(10 56 24 / 100%));
622
- --ref-palette-tertiary30: var(--color-ref-tertiary30, rgb(15 82 35 / 100%));
623
- --ref-palette-tertiary40: var(--color-ref-tertiary40, rgb(20 108 46 / 100%));
624
- --ref-palette-tertiary50: var(--color-ref-tertiary50, rgb(25 134 57 / 100%));
625
- --ref-palette-tertiary60: var(--color-ref-tertiary60, rgb(30 164 70 / 100%));
626
- --ref-palette-tertiary70: var(--color-ref-tertiary70, rgb(55 190 95 / 100%));
627
- --ref-palette-tertiary80: var(--color-ref-tertiary80, rgb(109 213 140 / 100%));
628
- --ref-palette-tertiary90: var(--color-ref-tertiary90, rgb(196 238 208 / 100%));
629
- --ref-palette-tertiary95: var(--color-ref-tertiary95, rgb(231 248 237 / 100%));
630
- --ref-palette-tertiary99: var(--color-ref-tertiary99, rgb(242 255 238 / 100%));
631
- --ref-palette-tertiary100: var(--color-ref-tertiary100, rgb(255 255 255 / 100%));
632
- --ref-palette-error0: var(--color-ref-error0, rgb(0 0 0 / 100%));
633
- --ref-palette-error10: var(--color-ref-error10, rgb(65 14 11 / 100%));
634
- --ref-palette-error20: var(--color-ref-error20, rgb(96 20 16 / 100%));
635
- --ref-palette-error30: var(--color-ref-error30, rgb(140 29 24 / 100%));
636
- --ref-palette-error40: var(--color-ref-error40, rgb(179 38 30 / 100%));
637
- --ref-palette-error50: var(--color-ref-error50, rgb(220 54 46 / 100%));
638
- --ref-palette-error60: var(--color-ref-error60, rgb(228 105 98 / 100%));
639
- --ref-palette-error70: var(--color-ref-error70, rgb(236 146 142 / 100%));
640
- --ref-palette-error80: var(--color-ref-error80, rgb(242 184 181 / 100%));
641
- --ref-palette-error90: var(--color-ref-error90, rgb(249 222 220 / 100%));
642
- --ref-palette-error95: var(--color-ref-error95, rgb(231 248 237 / 100%));
643
- --ref-palette-error99: var(--color-ref-error99, rgb(242 255 238 / 100%));
644
- --ref-palette-error100: var(--color-ref-error100, rgb(255 255 255 / 100%));
645
- --ref-palette-neutral0: var(--color-ref-neutral0, rgb(0 0 0 / 100%));
646
- --ref-palette-neutral10: var(--color-ref-neutral10, rgb(31 31 31 / 100%));
647
- --ref-palette-neutral15: var(--color-ref-neutral15, rgb(40 40 40 / 100%));
648
- --ref-palette-neutral20: var(--color-ref-neutral20, rgb(48 48 48 / 100%));
649
- --ref-palette-neutral25: var(--color-ref-neutral25, rgb(60 60 60 / 100%));
650
- --ref-palette-neutral30: var(--color-ref-neutral30, rgb(71 71 71 / 100%));
651
- --ref-palette-neutral40: var(--color-ref-neutral40, rgb(94 94 94 / 100%));
652
- --ref-palette-neutral50: var(--color-ref-neutral50, rgb(117 117 117 / 100%));
653
- --ref-palette-neutral60: var(--color-ref-neutral60, rgb(143 143 143 / 100%));
654
- --ref-palette-neutral70: var(--color-ref-neutral70, rgb(171 171 171 / 100%));
655
- --ref-palette-neutral80: var(--color-ref-neutral80, rgb(199 199 199 / 100%));
656
- --ref-palette-neutral90: var(--color-ref-neutral90, rgb(227 227 227 / 100%));
657
- --ref-palette-neutral94: var(--color-ref-neutral94, rgb(239 237 237 / 100%));
658
- --ref-palette-neutral95: var(--color-ref-neutral95, rgb(242 242 242 / 100%));
659
- --ref-palette-neutral98: var(--color-ref-neutral98, rgb(250 249 248 / 100%));
660
- --ref-palette-neutral99: var(--color-ref-neutral99, rgb(253 252 251 / 100%));
661
- --ref-palette-neutral100: var(--color-ref-neutral100, rgb(255 255 255 / 100%));
662
- --ref-palette-neutral-variant0: var(--color-ref-neutral-variant0, rgb(0 0 0 / 100%));
663
- --ref-palette-neutral-variant10: var(--color-ref-neutral-variant10, rgb(25 29 28 / 100%));
664
- --ref-palette-neutral-variant20: var(--color-ref-neutral-variant20, rgb(45 49 47 / 100%));
665
- --ref-palette-neutral-variant30: var(--color-ref-neutral-variant30, rgb(68 71 70 / 100%));
666
- --ref-palette-neutral-variant40: var(--color-ref-neutral-variant40, rgb(92 95 94 / 100%));
667
- --ref-palette-neutral-variant50: var(--color-ref-neutral-variant50, rgb(116 119 117 / 100%));
668
- --ref-palette-neutral-variant60: var(--color-ref-neutral-variant60, rgb(142 145 143 / 100%));
669
- --ref-palette-neutral-variant70: var(--color-ref-neutral-variant70, rgb(169 172 170 / 100%));
670
- --ref-palette-neutral-variant80: var(--color-ref-neutral-variant80, rgb(196 199 197 / 100%));
671
- --ref-palette-neutral-variant90: var(--color-ref-neutral-variant90, rgb(225 227 225 / 100%));
672
- --ref-palette-neutral-variant95: var(--color-ref-neutral-variant95, rgb(239 242 239 / 100%));
673
- --ref-palette-neutral-variant99: var(--color-ref-neutral-variant99, rgb(250 253 251 / 100%));
674
- --ref-palette-neutral-variant100: var(--color-ref-neutral-variant100, rgb(255 255 255 / 100%));
675
-
676
- /* Additional fixed colors */
677
- --ref-palette-blue0: rgb(0 0 0 / 100%);
678
- --ref-palette-blue10: rgb(4 30 73 / 100%);
679
- --ref-palette-blue20: rgb(6 46 111 / 100%);
680
- --ref-palette-blue30: rgb(8 66 160 / 100%);
681
- --ref-palette-blue40: rgb(11 87 208 / 100%);
682
- --ref-palette-blue50: rgb(27 110 243 / 100%);
683
- --ref-palette-blue60: rgb(76 141 246 / 100%);
684
- --ref-palette-blue70: rgb(124 172 248 / 100%);
685
- --ref-palette-blue80: rgb(168 199 250 / 100%);
686
- --ref-palette-blue90: rgb(211 227 253 / 100%);
687
- --ref-palette-blue95: rgb(236 243 254 / 100%);
688
- --ref-palette-blue99: rgb(250 251 255 / 100%);
689
- --ref-palette-blue100: rgb(255 255 255 / 100%);
690
- --ref-palette-green0: rgb(0 0 0 / 100%);
691
- --ref-palette-green10: rgb(7 39 17 / 100%);
692
- --ref-palette-green20: rgb(10 56 24 / 100%);
693
- --ref-palette-green30: rgb(15 82 35 / 100%);
694
- --ref-palette-green40: rgb(20 108 46 / 100%);
695
- --ref-palette-green50: rgb(25 134 57 / 100%);
696
- --ref-palette-green60: rgb(30 164 70 / 100%);
697
- --ref-palette-green70: rgb(55 190 95 / 100%);
698
- --ref-palette-green80: rgb(109 213 140 / 100%);
699
- --ref-palette-green90: rgb(196 238 208 / 100%);
700
- --ref-palette-green95: rgb(231 248 237 / 100%);
701
- --ref-palette-green99: rgb(242 255 238 / 100%);
702
- --ref-palette-green100: rgb(255 255 255 / 100%);
703
- --ref-palette-orange0: rgb(0 0 0 / 100%);
704
- --ref-palette-orange10: rgb(53 16 2 / 100%);
705
- --ref-palette-orange20: rgb(85 32 5 / 100%);
706
- --ref-palette-orange30: rgb(121 50 11 / 100%);
707
- --ref-palette-orange40: rgb(159 67 18 / 100%);
708
- --ref-palette-orange50: rgb(198 85 26 / 100%);
709
- --ref-palette-orange60: rgb(233 103 37 / 100%);
710
- --ref-palette-orange70: rgb(254 141 89 / 100%);
711
- --ref-palette-orange80: rgb(254 183 150 / 100%);
712
- --ref-palette-orange90: rgb(255 220 204 / 100%);
713
- --ref-palette-orange95: rgb(255 236 230 / 100%);
714
- --ref-palette-orange99: rgb(255 251 255 / 100%);
715
- --ref-palette-orange100: rgb(255 255 255 / 100%);
716
- --ref-palette-yellow0: rgb(0 0 0 / 100%);
717
- --ref-palette-yellow10: rgb(36 26 0 / 100%);
718
- --ref-palette-yellow20: rgb(62 47 0 / 100%);
719
- --ref-palette-yellow30: rgb(92 67 0 / 100%);
720
- --ref-palette-yellow40: rgb(151 103 0 / 100%);
721
- --ref-palette-yellow50: rgb(202 138 4 / 100%);
722
- --ref-palette-yellow60: rgb(234 179 8 / 100%);
723
- --ref-palette-yellow70: rgb(250 204 21 / 100%);
724
- --ref-palette-yellow80: rgb(253 224 71 / 100%);
725
- --ref-palette-yellow90: rgb(253 243 170 / 100%);
726
- --ref-palette-yellow95: rgb(252 248 210 / 100%);
727
- --ref-palette-yellow99: rgb(255 251 235 / 100%);
728
- --ref-palette-yellow100: rgb(255 255 255 / 100%);
729
- --ref-palette-cyan0: rgb(0 0 0 / 100%);
730
- --ref-palette-cyan10: rgb(0 31 40 / 100%);
731
- --ref-palette-cyan20: rgb(0 53 67 / 100%);
732
- --ref-palette-cyan30: rgb(0 78 96 / 100%);
733
- --ref-palette-cyan40: rgb(0 103 127 / 100%);
734
- --ref-palette-cyan50: rgb(0 130 159 / 100%);
735
- --ref-palette-cyan60: rgb(0 157 193 / 100%);
736
- --ref-palette-cyan70: rgb(56 185 222 / 100%);
737
- --ref-palette-cyan80: rgb(92 213 251 / 100%);
738
- --ref-palette-cyan90: rgb(183 234 255 / 100%);
739
- --ref-palette-cyan95: rgb(221 245 255 / 100%);
740
- --ref-palette-cyan99: rgb(249 253 255 / 100%);
741
- --ref-palette-cyan100: rgb(255 255 255 / 100%);
742
- --ref-palette-purple0: rgb(0 0 0 / 100%);
743
- --ref-palette-purple10: rgb(47 0 77 / 100%);
744
- --ref-palette-purple20: rgb(77 0 122 / 100%);
745
- --ref-palette-purple30: rgb(110 0 171 / 100%);
746
- --ref-palette-purple40: rgb(140 30 211 / 100%);
747
- --ref-palette-purple50: rgb(167 67 238 / 100%);
748
- --ref-palette-purple60: rgb(191 103 255 / 100%);
749
- --ref-palette-purple70: rgb(209 144 255 / 100%);
750
- --ref-palette-purple80: rgb(226 182 255 / 100%);
751
- --ref-palette-purple90: rgb(243 218 255 / 100%);
752
- --ref-palette-purple95: rgb(251 236 255 / 100%);
753
- --ref-palette-purple99: rgb(255 251 255 / 100%);
754
- --ref-palette-purple100: rgb(255 255 255 / 100%);
755
- --ref-palette-pink0: rgb(0 0 0 / 100%);
756
- --ref-palette-pink10: rgb(62 0 29 / 100%);
757
- --ref-palette-pink20: rgb(101 0 51 / 100%);
758
- --ref-palette-pink30: rgb(142 0 75 / 100%);
759
- --ref-palette-pink40: rgb(185 0 99 / 100%);
760
- --ref-palette-pink50: rgb(223 35 125 / 100%);
761
- --ref-palette-pink55: rgb(255 72 150 / 100%);
762
- --ref-palette-pink60: rgb(255 72 150 / 100%);
763
- --ref-palette-pink70: rgb(255 132 175 / 100%);
764
- --ref-palette-pink80: rgb(255 177 200 / 100%);
765
- --ref-palette-pink90: rgb(255 217 226 / 100%);
766
- --ref-palette-pink95: rgb(255 236 240 / 100%);
767
- --ref-palette-pink99: rgb(255 251 255 / 100%);
768
- --ref-palette-pink100: rgb(255 255 255 / 100%);
769
- --ref-palette-indigo0: rgb(0 0 0 / 100%);
770
- --ref-palette-indigo10: rgb(23 0 101 / 100%);
771
- --ref-palette-indigo20: rgb(41 0 159 / 100%);
772
- --ref-palette-indigo30: rgb(63 28 203 / 100%);
773
- --ref-palette-indigo40: rgb(88 64 227 / 100%);
774
- --ref-palette-indigo50: rgb(113 93 253 / 100%);
775
- --ref-palette-indigo60: rgb(141 127 255 / 100%);
776
- --ref-palette-indigo70: rgb(170 160 255 / 100%);
777
- --ref-palette-indigo80: rgb(199 191 255 / 100%);
778
- --ref-palette-indigo90: rgb(228 223 255 / 100%);
779
- --ref-palette-indigo95: rgb(243 238 255 / 100%);
780
- --ref-palette-indigo99: rgb(255 251 255 / 100%);
781
- --ref-palette-indigo100: rgb(255 255 255 / 100%);
785
+ --ref-palette-primary0: var(--color-ref-primary0, rgb(0 0 0 / 100%));
786
+ --ref-palette-primary10: var(--color-ref-primary10, rgb(4 30 73 / 100%));
787
+ --ref-palette-primary20: var(--color-ref-primary20, rgb(6 46 111 / 100%));
788
+ --ref-palette-primary30: var(--color-ref-primary30, rgb(8 66 160 / 100%));
789
+ --ref-palette-primary40: var(--color-ref-primary40, rgb(11 87 208 / 100%));
790
+ --ref-palette-primary50: var(--color-ref-primary50, rgb(27 110 243 / 100%));
791
+ --ref-palette-primary60: var(--color-ref-primary60, rgb(76 141 246 / 100%));
792
+ --ref-palette-primary70: var(--color-ref-primary70, rgb(124 172 248 / 100%));
793
+ --ref-palette-primary80: var(--color-ref-primary80, rgb(168 199 250 / 100%));
794
+ --ref-palette-primary90: var(--color-ref-primary90, rgb(211 227 253 / 100%));
795
+ --ref-palette-primary95: var(--color-ref-primary95, rgb(236 243 254 / 100%));
796
+ --ref-palette-primary99: var(--color-ref-primary99, rgb(250 251 255 / 100%));
797
+ --ref-palette-primary100: var(
798
+ --color-ref-primary100,
799
+ rgb(255 255 255 / 100%)
800
+ );
801
+ --ref-palette-secondary0: var(--color-ref-secondary0, rgb(0 0 0 / 100%));
802
+ --ref-palette-secondary10: var(--color-ref-secondary10, rgb(0 29 53 / 100%));
803
+ --ref-palette-secondary15: var(--color-ref-secondary15, rgb(0 40 69 / 100%));
804
+ --ref-palette-secondary20: var(--color-ref-secondary20, rgb(0 51 85 / 100%));
805
+ --ref-palette-secondary25: var(--color-ref-secondary25, rgb(0 63 102 / 100%));
806
+ --ref-palette-secondary30: var(--color-ref-secondary30, rgb(0 74 119 / 100%));
807
+ --ref-palette-secondary35: var(--color-ref-secondary35, rgb(0 87 137 / 100%));
808
+ --ref-palette-secondary40: var(--color-ref-secondary40, rgb(0 99 155 / 100%));
809
+ --ref-palette-secondary50: var(
810
+ --color-ref-secondary50,
811
+ rgb(4 125 183 / 100%)
812
+ );
813
+ --ref-palette-secondary60: var(
814
+ --color-ref-secondary60,
815
+ rgb(57 152 211 / 100%)
816
+ );
817
+ --ref-palette-secondary70: var(
818
+ --color-ref-secondary70,
819
+ rgb(90 179 240 / 100%)
820
+ );
821
+ --ref-palette-secondary80: var(
822
+ --color-ref-secondary80,
823
+ rgb(127 207 255 / 100%)
824
+ );
825
+ --ref-palette-secondary90: var(
826
+ --color-ref-secondary90,
827
+ rgb(223 243 255 / 100%)
828
+ );
829
+ --ref-palette-secondary95: var(
830
+ --color-ref-secondary95,
831
+ rgb(223 243 255 / 100%)
832
+ );
833
+ --ref-palette-secondary99: var(
834
+ --color-ref-secondary99,
835
+ rgb(247 252 255 / 100%)
836
+ );
837
+ --ref-palette-secondary100: var(
838
+ --color-ref-secondary100,
839
+ rgb(255 255 255 / 100%)
840
+ );
841
+ --ref-palette-tertiary0: var(--color-ref-tertiary0, rgb(0 0 0 / 100%));
842
+ --ref-palette-tertiary10: var(--color-ref-tertiary10, rgb(7 39 17 / 100%));
843
+ --ref-palette-tertiary20: var(--color-ref-tertiary20, rgb(10 56 24 / 100%));
844
+ --ref-palette-tertiary30: var(--color-ref-tertiary30, rgb(15 82 35 / 100%));
845
+ --ref-palette-tertiary40: var(--color-ref-tertiary40, rgb(20 108 46 / 100%));
846
+ --ref-palette-tertiary50: var(--color-ref-tertiary50, rgb(25 134 57 / 100%));
847
+ --ref-palette-tertiary60: var(--color-ref-tertiary60, rgb(30 164 70 / 100%));
848
+ --ref-palette-tertiary70: var(--color-ref-tertiary70, rgb(55 190 95 / 100%));
849
+ --ref-palette-tertiary80: var(
850
+ --color-ref-tertiary80,
851
+ rgb(109 213 140 / 100%)
852
+ );
853
+ --ref-palette-tertiary90: var(
854
+ --color-ref-tertiary90,
855
+ rgb(196 238 208 / 100%)
856
+ );
857
+ --ref-palette-tertiary95: var(
858
+ --color-ref-tertiary95,
859
+ rgb(231 248 237 / 100%)
860
+ );
861
+ --ref-palette-tertiary99: var(
862
+ --color-ref-tertiary99,
863
+ rgb(242 255 238 / 100%)
864
+ );
865
+ --ref-palette-tertiary100: var(
866
+ --color-ref-tertiary100,
867
+ rgb(255 255 255 / 100%)
868
+ );
869
+ --ref-palette-error0: var(--color-ref-error0, rgb(0 0 0 / 100%));
870
+ --ref-palette-error10: var(--color-ref-error10, rgb(65 14 11 / 100%));
871
+ --ref-palette-error20: var(--color-ref-error20, rgb(96 20 16 / 100%));
872
+ --ref-palette-error30: var(--color-ref-error30, rgb(140 29 24 / 100%));
873
+ --ref-palette-error40: var(--color-ref-error40, rgb(179 38 30 / 100%));
874
+ --ref-palette-error50: var(--color-ref-error50, rgb(220 54 46 / 100%));
875
+ --ref-palette-error60: var(--color-ref-error60, rgb(228 105 98 / 100%));
876
+ --ref-palette-error70: var(--color-ref-error70, rgb(236 146 142 / 100%));
877
+ --ref-palette-error80: var(--color-ref-error80, rgb(242 184 181 / 100%));
878
+ --ref-palette-error90: var(--color-ref-error90, rgb(249 222 220 / 100%));
879
+ --ref-palette-error95: var(--color-ref-error95, rgb(231 248 237 / 100%));
880
+ --ref-palette-error99: var(--color-ref-error99, rgb(242 255 238 / 100%));
881
+ --ref-palette-error100: var(--color-ref-error100, rgb(255 255 255 / 100%));
882
+ --ref-palette-neutral0: var(--color-ref-neutral0, rgb(0 0 0 / 100%));
883
+ --ref-palette-neutral10: var(--color-ref-neutral10, rgb(31 31 31 / 100%));
884
+ --ref-palette-neutral15: var(--color-ref-neutral15, rgb(40 40 40 / 100%));
885
+ --ref-palette-neutral20: var(--color-ref-neutral20, rgb(48 48 48 / 100%));
886
+ --ref-palette-neutral25: var(--color-ref-neutral25, rgb(60 60 60 / 100%));
887
+ --ref-palette-neutral30: var(--color-ref-neutral30, rgb(71 71 71 / 100%));
888
+ --ref-palette-neutral40: var(--color-ref-neutral40, rgb(94 94 94 / 100%));
889
+ --ref-palette-neutral50: var(--color-ref-neutral50, rgb(117 117 117 / 100%));
890
+ --ref-palette-neutral60: var(--color-ref-neutral60, rgb(143 143 143 / 100%));
891
+ --ref-palette-neutral70: var(--color-ref-neutral70, rgb(171 171 171 / 100%));
892
+ --ref-palette-neutral80: var(--color-ref-neutral80, rgb(199 199 199 / 100%));
893
+ --ref-palette-neutral90: var(--color-ref-neutral90, rgb(227 227 227 / 100%));
894
+ --ref-palette-neutral94: var(--color-ref-neutral94, rgb(239 237 237 / 100%));
895
+ --ref-palette-neutral95: var(--color-ref-neutral95, rgb(242 242 242 / 100%));
896
+ --ref-palette-neutral98: var(--color-ref-neutral98, rgb(250 249 248 / 100%));
897
+ --ref-palette-neutral99: var(--color-ref-neutral99, rgb(253 252 251 / 100%));
898
+ --ref-palette-neutral100: var(
899
+ --color-ref-neutral100,
900
+ rgb(255 255 255 / 100%)
901
+ );
902
+ --ref-palette-neutral-variant0: var(
903
+ --color-ref-neutral-variant0,
904
+ rgb(0 0 0 / 100%)
905
+ );
906
+ --ref-palette-neutral-variant10: var(
907
+ --color-ref-neutral-variant10,
908
+ rgb(25 29 28 / 100%)
909
+ );
910
+ --ref-palette-neutral-variant20: var(
911
+ --color-ref-neutral-variant20,
912
+ rgb(45 49 47 / 100%)
913
+ );
914
+ --ref-palette-neutral-variant30: var(
915
+ --color-ref-neutral-variant30,
916
+ rgb(68 71 70 / 100%)
917
+ );
918
+ --ref-palette-neutral-variant40: var(
919
+ --color-ref-neutral-variant40,
920
+ rgb(92 95 94 / 100%)
921
+ );
922
+ --ref-palette-neutral-variant50: var(
923
+ --color-ref-neutral-variant50,
924
+ rgb(116 119 117 / 100%)
925
+ );
926
+ --ref-palette-neutral-variant60: var(
927
+ --color-ref-neutral-variant60,
928
+ rgb(142 145 143 / 100%)
929
+ );
930
+ --ref-palette-neutral-variant70: var(
931
+ --color-ref-neutral-variant70,
932
+ rgb(169 172 170 / 100%)
933
+ );
934
+ --ref-palette-neutral-variant80: var(
935
+ --color-ref-neutral-variant80,
936
+ rgb(196 199 197 / 100%)
937
+ );
938
+ --ref-palette-neutral-variant90: var(
939
+ --color-ref-neutral-variant90,
940
+ rgb(225 227 225 / 100%)
941
+ );
942
+ --ref-palette-neutral-variant95: var(
943
+ --color-ref-neutral-variant95,
944
+ rgb(239 242 239 / 100%)
945
+ );
946
+ --ref-palette-neutral-variant99: var(
947
+ --color-ref-neutral-variant99,
948
+ rgb(250 253 251 / 100%)
949
+ );
950
+ --ref-palette-neutral-variant100: var(
951
+ --color-ref-neutral-variant100,
952
+ rgb(255 255 255 / 100%)
953
+ );
954
+
955
+ /* Additional fixed colors */
956
+ --ref-palette-blue0: rgb(0 0 0 / 100%);
957
+ --ref-palette-blue10: rgb(4 30 73 / 100%);
958
+ --ref-palette-blue20: rgb(6 46 111 / 100%);
959
+ --ref-palette-blue30: rgb(8 66 160 / 100%);
960
+ --ref-palette-blue40: rgb(11 87 208 / 100%);
961
+ --ref-palette-blue50: rgb(27 110 243 / 100%);
962
+ --ref-palette-blue60: rgb(76 141 246 / 100%);
963
+ --ref-palette-blue70: rgb(124 172 248 / 100%);
964
+ --ref-palette-blue80: rgb(168 199 250 / 100%);
965
+ --ref-palette-blue90: rgb(211 227 253 / 100%);
966
+ --ref-palette-blue95: rgb(236 243 254 / 100%);
967
+ --ref-palette-blue99: rgb(250 251 255 / 100%);
968
+ --ref-palette-blue100: rgb(255 255 255 / 100%);
969
+ --ref-palette-green0: rgb(0 0 0 / 100%);
970
+ --ref-palette-green10: rgb(7 39 17 / 100%);
971
+ --ref-palette-green20: rgb(10 56 24 / 100%);
972
+ --ref-palette-green30: rgb(15 82 35 / 100%);
973
+ --ref-palette-green40: rgb(20 108 46 / 100%);
974
+ --ref-palette-green50: rgb(25 134 57 / 100%);
975
+ --ref-palette-green60: rgb(30 164 70 / 100%);
976
+ --ref-palette-green70: rgb(55 190 95 / 100%);
977
+ --ref-palette-green80: rgb(109 213 140 / 100%);
978
+ --ref-palette-green90: rgb(196 238 208 / 100%);
979
+ --ref-palette-green95: rgb(231 248 237 / 100%);
980
+ --ref-palette-green99: rgb(242 255 238 / 100%);
981
+ --ref-palette-green100: rgb(255 255 255 / 100%);
982
+ --ref-palette-orange0: rgb(0 0 0 / 100%);
983
+ --ref-palette-orange10: rgb(53 16 2 / 100%);
984
+ --ref-palette-orange20: rgb(85 32 5 / 100%);
985
+ --ref-palette-orange30: rgb(121 50 11 / 100%);
986
+ --ref-palette-orange40: rgb(159 67 18 / 100%);
987
+ --ref-palette-orange50: rgb(198 85 26 / 100%);
988
+ --ref-palette-orange60: rgb(233 103 37 / 100%);
989
+ --ref-palette-orange70: rgb(254 141 89 / 100%);
990
+ --ref-palette-orange80: rgb(254 183 150 / 100%);
991
+ --ref-palette-orange90: rgb(255 220 204 / 100%);
992
+ --ref-palette-orange95: rgb(255 236 230 / 100%);
993
+ --ref-palette-orange99: rgb(255 251 255 / 100%);
994
+ --ref-palette-orange100: rgb(255 255 255 / 100%);
995
+ --ref-palette-yellow0: rgb(0 0 0 / 100%);
996
+ --ref-palette-yellow10: rgb(36 26 0 / 100%);
997
+ --ref-palette-yellow20: rgb(62 47 0 / 100%);
998
+ --ref-palette-yellow30: rgb(92 67 0 / 100%);
999
+ --ref-palette-yellow40: rgb(151 103 0 / 100%);
1000
+ --ref-palette-yellow50: rgb(202 138 4 / 100%);
1001
+ --ref-palette-yellow60: rgb(234 179 8 / 100%);
1002
+ --ref-palette-yellow70: rgb(250 204 21 / 100%);
1003
+ --ref-palette-yellow80: rgb(253 224 71 / 100%);
1004
+ --ref-palette-yellow90: rgb(253 243 170 / 100%);
1005
+ --ref-palette-yellow95: rgb(252 248 210 / 100%);
1006
+ --ref-palette-yellow99: rgb(255 251 235 / 100%);
1007
+ --ref-palette-yellow100: rgb(255 255 255 / 100%);
1008
+ --ref-palette-cyan0: rgb(0 0 0 / 100%);
1009
+ --ref-palette-cyan10: rgb(0 31 40 / 100%);
1010
+ --ref-palette-cyan20: rgb(0 53 67 / 100%);
1011
+ --ref-palette-cyan30: rgb(0 78 96 / 100%);
1012
+ --ref-palette-cyan40: rgb(0 103 127 / 100%);
1013
+ --ref-palette-cyan50: rgb(0 130 159 / 100%);
1014
+ --ref-palette-cyan60: rgb(0 157 193 / 100%);
1015
+ --ref-palette-cyan70: rgb(56 185 222 / 100%);
1016
+ --ref-palette-cyan80: rgb(92 213 251 / 100%);
1017
+ --ref-palette-cyan90: rgb(183 234 255 / 100%);
1018
+ --ref-palette-cyan95: rgb(221 245 255 / 100%);
1019
+ --ref-palette-cyan99: rgb(249 253 255 / 100%);
1020
+ --ref-palette-cyan100: rgb(255 255 255 / 100%);
1021
+ --ref-palette-purple0: rgb(0 0 0 / 100%);
1022
+ --ref-palette-purple10: rgb(47 0 77 / 100%);
1023
+ --ref-palette-purple20: rgb(77 0 122 / 100%);
1024
+ --ref-palette-purple30: rgb(110 0 171 / 100%);
1025
+ --ref-palette-purple40: rgb(140 30 211 / 100%);
1026
+ --ref-palette-purple50: rgb(167 67 238 / 100%);
1027
+ --ref-palette-purple60: rgb(191 103 255 / 100%);
1028
+ --ref-palette-purple70: rgb(209 144 255 / 100%);
1029
+ --ref-palette-purple80: rgb(226 182 255 / 100%);
1030
+ --ref-palette-purple90: rgb(243 218 255 / 100%);
1031
+ --ref-palette-purple95: rgb(251 236 255 / 100%);
1032
+ --ref-palette-purple99: rgb(255 251 255 / 100%);
1033
+ --ref-palette-purple100: rgb(255 255 255 / 100%);
1034
+ --ref-palette-pink0: rgb(0 0 0 / 100%);
1035
+ --ref-palette-pink10: rgb(62 0 29 / 100%);
1036
+ --ref-palette-pink20: rgb(101 0 51 / 100%);
1037
+ --ref-palette-pink30: rgb(142 0 75 / 100%);
1038
+ --ref-palette-pink40: rgb(185 0 99 / 100%);
1039
+ --ref-palette-pink50: rgb(223 35 125 / 100%);
1040
+ --ref-palette-pink55: rgb(255 72 150 / 100%);
1041
+ --ref-palette-pink60: rgb(255 72 150 / 100%);
1042
+ --ref-palette-pink70: rgb(255 132 175 / 100%);
1043
+ --ref-palette-pink80: rgb(255 177 200 / 100%);
1044
+ --ref-palette-pink90: rgb(255 217 226 / 100%);
1045
+ --ref-palette-pink95: rgb(255 236 240 / 100%);
1046
+ --ref-palette-pink99: rgb(255 251 255 / 100%);
1047
+ --ref-palette-pink100: rgb(255 255 255 / 100%);
1048
+ --ref-palette-indigo0: rgb(0 0 0 / 100%);
1049
+ --ref-palette-indigo10: rgb(23 0 101 / 100%);
1050
+ --ref-palette-indigo20: rgb(41 0 159 / 100%);
1051
+ --ref-palette-indigo30: rgb(63 28 203 / 100%);
1052
+ --ref-palette-indigo40: rgb(88 64 227 / 100%);
1053
+ --ref-palette-indigo50: rgb(113 93 253 / 100%);
1054
+ --ref-palette-indigo60: rgb(141 127 255 / 100%);
1055
+ --ref-palette-indigo70: rgb(170 160 255 / 100%);
1056
+ --ref-palette-indigo80: rgb(199 191 255 / 100%);
1057
+ --ref-palette-indigo90: rgb(228 223 255 / 100%);
1058
+ --ref-palette-indigo95: rgb(243 238 255 / 100%);
1059
+ --ref-palette-indigo99: rgb(255 251 255 / 100%);
1060
+ --ref-palette-indigo100: rgb(255 255 255 / 100%);
782
1061
  }