@bspk/ui 1.3.30 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/build.ts +1 -2
  2. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.d.ts +11 -0
  3. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js +14 -0
  4. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js.map +1 -0
  5. package/dist/components/StylesProviderAgentWorkplace/index.d.ts +1 -0
  6. package/dist/components/StylesProviderAgentWorkplace/index.js +2 -0
  7. package/dist/components/StylesProviderAgentWorkplace/index.js.map +1 -0
  8. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.d.ts +11 -0
  9. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js +14 -0
  10. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js.map +1 -0
  11. package/dist/components/StylesProviderBrokerWorkplace/index.d.ts +1 -0
  12. package/dist/components/StylesProviderBrokerWorkplace/index.js +2 -0
  13. package/dist/components/StylesProviderBrokerWorkplace/index.js.map +1 -0
  14. package/dist/components/StylesProviderDemo/brandsCss.js +10 -9
  15. package/dist/components/StylesProviderDemo/brandsCss.js.map +1 -1
  16. package/dist/components/StylesProviderDemo/exampleCss.js +5 -5
  17. package/dist/components/StylesProviderDemo/exampleCss.js.map +1 -1
  18. package/dist/components/Table/Table.js +1 -1
  19. package/dist/components/Table/Table.js.map +1 -1
  20. package/dist/styles/agent-workplace.css +1800 -0
  21. package/dist/styles/{denali-boss.css.js → agent-workplace.css.js} +770 -849
  22. package/dist/styles/anywhere.css +687 -766
  23. package/dist/styles/anywhere.css.js +687 -766
  24. package/dist/styles/better-homes-gardens.css +579 -826
  25. package/dist/styles/better-homes-gardens.css.js +579 -826
  26. package/dist/styles/broker-workplace.css +1800 -0
  27. package/dist/styles/broker-workplace.css.js +1805 -0
  28. package/dist/styles/cartus.css +674 -765
  29. package/dist/styles/cartus.css.js +674 -765
  30. package/dist/styles/century-21.css +679 -766
  31. package/dist/styles/century-21.css.js +679 -766
  32. package/dist/styles/coldwell-banker.css +671 -762
  33. package/dist/styles/coldwell-banker.css.js +671 -762
  34. package/dist/styles/corcoran.css +663 -758
  35. package/dist/styles/corcoran.css.js +663 -758
  36. package/dist/styles/era.css +677 -766
  37. package/dist/styles/era.css.js +677 -766
  38. package/dist/styles/example.css +1898 -0
  39. package/dist/styles/example.css.js +1903 -0
  40. package/dist/styles/sothebys.css +670 -759
  41. package/dist/styles/sothebys.css.js +670 -759
  42. package/dist/types/common.d.ts +2 -1
  43. package/dist/types/common.js.map +1 -1
  44. package/package.json +7 -47
  45. package/src/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.tsx +15 -0
  46. package/src/components/StylesProviderAgentWorkplace/index.tsx +1 -0
  47. package/src/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.tsx +15 -0
  48. package/src/components/StylesProviderBrokerWorkplace/index.tsx +1 -0
  49. package/src/components/StylesProviderDemo/brandsCss.ts +13 -10
  50. package/src/components/StylesProviderDemo/exampleCss.ts +5 -5
  51. package/src/components/Table/Table.tsx +1 -1
  52. package/{dist/styles/denali-boss.css → src/styles/example.css} +401 -384
  53. package/src/types/common.ts +2 -10
  54. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.d.ts +0 -11
  55. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js +0 -14
  56. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js.map +0 -1
  57. package/dist/components/StylesProviderDenaliBoss/index.d.ts +0 -1
  58. package/dist/components/StylesProviderDenaliBoss/index.js +0 -2
  59. package/dist/components/StylesProviderDenaliBoss/index.js.map +0 -1
  60. package/dist/constants/brands.d.ts +0 -7
  61. package/dist/constants/brands.js +0 -43
  62. package/dist/constants/brands.js.map +0 -1
  63. package/src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx +0 -15
  64. package/src/components/StylesProviderDenaliBoss/index.tsx +0 -1
  65. package/src/constants/brands.ts +0 -49
@@ -1,183 +1,43 @@
1
- /* Generated from figma export: 2025-07-08T20:32:21.402Z */
1
+ /* Generated from figma export: 2026-02-02T17:54:13.533Z */
2
2
 
3
- @import url('https://fonts.googleapis.com/css2?family=Work%20Sans:ital,wght@0,100..900;1,100..900&display=swap');
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
4
4
  body {
5
5
  font-family: var(--typeface);
6
6
  }
7
7
 
8
8
  :root {
9
9
  /* Body/Base */
10
- --body-base: 400 16px/20px var(--typeface);
11
- /* Body/Base - line height */
12
- --body-base-line-height: 20px;
13
- /* Body/Base - size */
10
+ --body-base: 400 16px/24px var(--typeface);
11
+ /* Body/Base - line height */
12
+ --body-base-line-height: 24px;
13
+ /* Body/Base - size */
14
14
  --body-base-size: 16px;
15
- /* Body/Base - style */
15
+ /* Body/Base - style */
16
16
  --body-base-style: regular;
17
17
  /* Body/Large */
18
- --body-large: 400 18px/24px var(--typeface);
19
- /* Body/Large - line height */
20
- --body-large-line-height: 24px;
21
- /* Body/Large - size */
18
+ --body-large: 400 18px/28px var(--typeface);
19
+ /* Body/Large - line height */
20
+ --body-large-line-height: 28px;
21
+ /* Body/Large - size */
22
22
  --body-large-size: 18px;
23
- /* Body/Large - style */
23
+ /* Body/Large - style */
24
24
  --body-large-style: regular;
25
25
  /* Body/Small */
26
26
  --body-small: 400 14px/20px var(--typeface);
27
- /* Body/Small - line height */
27
+ /* Body/Small - line height */
28
28
  --body-small-line-height: 20px;
29
- /* Body/Small - size */
29
+ /* Body/Small - size */
30
30
  --body-small-size: 14px;
31
- /* Body/Small - style */
31
+ /* Body/Small - style */
32
32
  --body-small-style: regular;
33
33
  /* Body/X-Small */
34
34
  --body-x-small: 400 12px/16px var(--typeface);
35
- /* Body/X-Small - line height */
35
+ /* Body/X-Small - line height */
36
36
  --body-x-small-line-height: 16px;
37
- /* Body/X-Small - size */
37
+ /* Body/X-Small - size */
38
38
  --body-x-small-size: 12px;
39
- /* Body/X-Small - style */
39
+ /* Body/X-Small - style */
40
40
  --body-x-small-style: regular;
41
- /* Colors/Brands/Experiment/blue-dark/100 - Global (primitives) */
42
- --colors-brands-experiment-blue-dark-100: #0a2f85;
43
- /* Colors/Brands/Experiment/blue-dark/200 - Global (primitives) */
44
- --colors-brands-experiment-blue-dark-200: #1347cc;
45
- /* Colors/Brands/Experiment/blue-dark/300 - Global (primitives) */
46
- --colors-brands-experiment-blue-dark-300: #0f59e2;
47
- /* Colors/Brands/Experiment/blue-dark/400 - Global (primitives) */
48
- --colors-brands-experiment-blue-dark-400: #357aea;
49
- /* Colors/Brands/Experiment/blue-dark/50 - Global (primitives) */
50
- --colors-brands-experiment-blue-dark-50: #181d34;
51
- /* Colors/Brands/Experiment/blue-dark/500 - Global (primitives) */
52
- --colors-brands-experiment-blue-dark-500: #2e88f6;
53
- /* Colors/Brands/Experiment/blue-dark/600 - Global (primitives) */
54
- --colors-brands-experiment-blue-dark-600: #50a1ff;
55
- /* Colors/Brands/Experiment/blue-dark/700 - Global (primitives) */
56
- --colors-brands-experiment-blue-dark-700: #7ab7ff;
57
- /* Colors/Brands/Experiment/blue-dark/800 - Global (primitives) */
58
- --colors-brands-experiment-blue-dark-800: #dcebfe;
59
- /* Colors/Brands/Experiment/blue-dark/900 - Global (primitives) */
60
- --colors-brands-experiment-blue-dark-900: #f0f6ff;
61
- /* Colors/Brands/Experiment/blue-gray-dark/100 - Global (primitives) */
62
- --colors-brands-experiment-blue-gray-dark-100: #1a2332;
63
- /* Colors/Brands/Experiment/blue-gray-dark/200 - Global (primitives) */
64
- --colors-brands-experiment-blue-gray-dark-200: #252e3c;
65
- /* Colors/Brands/Experiment/blue-gray-dark/300 - Global (primitives) */
66
- --colors-brands-experiment-blue-gray-dark-300: #323b49;
67
- /* Colors/Brands/Experiment/blue-gray-dark/400 - Global (primitives) */
68
- --colors-brands-experiment-blue-gray-dark-400: #5e6d82;
69
- /* Colors/Brands/Experiment/blue-gray-dark/50 - Global (primitives) */
70
- --colors-brands-experiment-blue-gray-dark-50: #0c101c;
71
- /* Colors/Brands/Experiment/blue-gray-dark/500 - Global (primitives) */
72
- --colors-brands-experiment-blue-gray-dark-500: #8b9bb2;
73
- /* Colors/Brands/Experiment/blue-gray-dark/600 - Global (primitives) */
74
- --colors-brands-experiment-blue-gray-dark-600: #b1c0d2;
75
- /* Colors/Brands/Experiment/blue-gray-dark/700 - Global (primitives) */
76
- --colors-brands-experiment-blue-gray-dark-700: #d4dce8;
77
- /* Colors/Brands/Experiment/blue-gray-dark/800 - Global (primitives) */
78
- --colors-brands-experiment-blue-gray-dark-800: #e2ebf3;
79
- /* Colors/Brands/Experiment/blue-gray-dark/900 - Global (primitives) */
80
- --colors-brands-experiment-blue-gray-dark-900: #f8fafc;
81
- /* Colors/Brands/Experiment/blue-gray-light/100 - Global (primitives) */
82
- --colors-brands-experiment-blue-gray-light-100: #f1f5f9;
83
- /* Colors/Brands/Experiment/blue-gray-light/200 - Global (primitives) */
84
- --colors-brands-experiment-blue-gray-light-200: #e1e7ef;
85
- /* Colors/Brands/Experiment/blue-gray-light/300 - Global (primitives) */
86
- --colors-brands-experiment-blue-gray-light-300: #c8d6e5;
87
- /* Colors/Brands/Experiment/blue-gray-light/400 - Global (primitives) */
88
- --colors-brands-experiment-blue-gray-light-400: #9eacc0;
89
- /* Colors/Brands/Experiment/blue-gray-light/50 - Global (primitives) */
90
- --colors-brands-experiment-blue-gray-light-50: #f8fafc;
91
- /* Colors/Brands/Experiment/blue-gray-light/500 - Global (primitives) */
92
- --colors-brands-experiment-blue-gray-light-500: #65758b;
93
- /* Colors/Brands/Experiment/blue-gray-light/600 - Global (primitives) */
94
- --colors-brands-experiment-blue-gray-light-600: #48566a;
95
- /* Colors/Brands/Experiment/blue-gray-light/700 - Global (primitives) */
96
- --colors-brands-experiment-blue-gray-light-700: #344256;
97
- /* Colors/Brands/Experiment/blue-gray-light/800 - Global (primitives) */
98
- --colors-brands-experiment-blue-gray-light-800: #1d283a;
99
- /* Colors/Brands/Experiment/blue-gray-light/900 - Global (primitives) */
100
- --colors-brands-experiment-blue-gray-light-900: #0f1729;
101
- /* Colors/Brands/Experiment/blue-light/100 - Global (primitives) */
102
- --colors-brands-experiment-blue-light-100: #dcebfe;
103
- /* Colors/Brands/Experiment/blue-light/200 - Global (primitives) */
104
- --colors-brands-experiment-blue-light-200: #bedbfe;
105
- /* Colors/Brands/Experiment/blue-light/300 - Global (primitives) */
106
- --colors-brands-experiment-blue-light-300: #91c3fd;
107
- /* Colors/Brands/Experiment/blue-light/400 - Global (primitives) */
108
- --colors-brands-experiment-blue-light-400: #61a6fa;
109
- /* Colors/Brands/Experiment/blue-light/50 - Global (primitives) */
110
- --colors-brands-experiment-blue-light-50: #f2f7ff;
111
- /* Colors/Brands/Experiment/blue-light/500 - Global (primitives) */
112
- --colors-brands-experiment-blue-light-500: #3479e9;
113
- /* Colors/Brands/Experiment/blue-light/600 - Global (primitives) */
114
- --colors-brands-experiment-blue-light-600: #1559ea;
115
- /* Colors/Brands/Experiment/blue-light/700 - Global (primitives) */
116
- --colors-brands-experiment-blue-light-700: #173fab;
117
- /* Colors/Brands/Experiment/blue-light/800 - Global (primitives) */
118
- --colors-brands-experiment-blue-light-800: #162f82;
119
- /* Colors/Brands/Experiment/blue-light/900 - Global (primitives) */
120
- --colors-brands-experiment-blue-light-900: #0c1736;
121
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-10 - Global (primitives) */
122
- --colors-brands-experiment-interactions-primary-dark-opacity-10: #50a1ff1a;
123
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-12 - Global (primitives) */
124
- --colors-brands-experiment-interactions-primary-dark-opacity-12: #50a1ff1f;
125
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-16 - Global (primitives) */
126
- --colors-brands-experiment-interactions-primary-dark-opacity-16: #50a1ff29;
127
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-20 - Global (primitives) */
128
- --colors-brands-experiment-interactions-primary-dark-opacity-20: #50a1ff33;
129
- /* Colors/Brands/Experiment/Interactions/primary-dark-opacity-8 - Global (primitives) */
130
- --colors-brands-experiment-interactions-primary-dark-opacity-8: #50a1ff14;
131
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-10 - Global (primitives) */
132
- --colors-brands-experiment-interactions-primary-light-opacity-10: #1559ea1a;
133
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-12 - Global (primitives) */
134
- --colors-brands-experiment-interactions-primary-light-opacity-12: #1559ea1f;
135
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-16 - Global (primitives) */
136
- --colors-brands-experiment-interactions-primary-light-opacity-16: #1559ea29;
137
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-20 - Global (primitives) */
138
- --colors-brands-experiment-interactions-primary-light-opacity-20: #1559ea33;
139
- /* Colors/Brands/Experiment/Interactions/primary-light-opacity-8 - Global (primitives) */
140
- --colors-brands-experiment-interactions-primary-light-opacity-8: #1559ea14;
141
- /* Colors/Brands/Experiment/orange-dark/100 - Global (primitives) */
142
- --colors-brands-experiment-orange-dark-100: #852c0f;
143
- /* Colors/Brands/Experiment/orange-dark/200 - Global (primitives) */
144
- --colors-brands-experiment-orange-dark-200: #ab4827;
145
- /* Colors/Brands/Experiment/orange-dark/300 - Global (primitives) */
146
- --colors-brands-experiment-orange-dark-300: #ce5a07;
147
- /* Colors/Brands/Experiment/orange-dark/400 - Global (primitives) */
148
- --colors-brands-experiment-orange-dark-400: #f27013;
149
- /* Colors/Brands/Experiment/orange-dark/50 - Global (primitives) */
150
- --colors-brands-experiment-orange-dark-50: #31160d;
151
- /* Colors/Brands/Experiment/orange-dark/500 - Global (primitives) */
152
- --colors-brands-experiment-orange-dark-500: #fb923c;
153
- /* Colors/Brands/Experiment/orange-dark/600 - Global (primitives) */
154
- --colors-brands-experiment-orange-dark-600: #fdba72;
155
- /* Colors/Brands/Experiment/orange-dark/700 - Global (primitives) */
156
- --colors-brands-experiment-orange-dark-700: #fed6a9;
157
- /* Colors/Brands/Experiment/orange-dark/800 - Global (primitives) */
158
- --colors-brands-experiment-orange-dark-800: #ffedd6;
159
- /* Colors/Brands/Experiment/orange-dark/900 - Global (primitives) */
160
- --colors-brands-experiment-orange-dark-900: #fff6eb;
161
- /* Colors/Brands/Experiment/orange-light/100 - Global (primitives) */
162
- --colors-brands-experiment-orange-light-100: #ffedd6;
163
- /* Colors/Brands/Experiment/orange-light/200 - Global (primitives) */
164
- --colors-brands-experiment-orange-light-200: #fed6a9;
165
- /* Colors/Brands/Experiment/orange-light/300 - Global (primitives) */
166
- --colors-brands-experiment-orange-light-300: #fdba72;
167
- /* Colors/Brands/Experiment/orange-light/400 - Global (primitives) */
168
- --colors-brands-experiment-orange-light-400: #fb923c;
169
- /* Colors/Brands/Experiment/orange-light/50 - Global (primitives) */
170
- --colors-brands-experiment-orange-light-50: #fff6eb;
171
- /* Colors/Brands/Experiment/orange-light/500 - Global (primitives) */
172
- --colors-brands-experiment-orange-light-500: #f67416;
173
- /* Colors/Brands/Experiment/orange-light/600 - Global (primitives) */
174
- --colors-brands-experiment-orange-light-600: #e4570c;
175
- /* Colors/Brands/Experiment/orange-light/700 - Global (primitives) */
176
- --colors-brands-experiment-orange-light-700: #b63c0b;
177
- /* Colors/Brands/Experiment/orange-light/800 - Global (primitives) */
178
- --colors-brands-experiment-orange-light-800: #80310f;
179
- /* Colors/Brands/Experiment/orange-light/900 - Global (primitives) */
180
- --colors-brands-experiment-orange-light-900: #471a0a;
181
41
  /* Colors/Internal/pink-00-light - Global (primitives) */
182
42
  --colors-internal-pink-00-light: #ff4f8d;
183
43
  /* Colors/Internal/pink-50-dark - Global (primitives) */
@@ -209,7 +69,7 @@ body {
209
69
  /* Colors/Neutral/22 - Global (primitives) */
210
70
  --colors-neutral-22: #383838;
211
71
  /* Colors/Neutral/24 - Global (primitives) */
212
- --colors-neutral-24: #424242;
72
+ --colors-neutral-24: #3d3d3d;
213
73
  /* Colors/Neutral/26 - Global (primitives) */
214
74
  --colors-neutral-26: #424242;
215
75
  /* Colors/Neutral/28 - Global (primitives) */
@@ -286,6 +146,10 @@ body {
286
146
  --colors-neutral-98: #fafafa;
287
147
  /* Colors/Neutral/transparent - Global (primitives) */
288
148
  --colors-neutral-transparent: #ffffff00;
149
+ /* Colors/System/AI-gradient/blue - Global (primitives) */
150
+ --colors-system-ai-gradient-blue: #215ecd;
151
+ /* Colors/System/AI-gradient/pink - Global (primitives) */
152
+ --colors-system-ai-gradient-pink: #c60ede;
289
153
  /* Colors/System/blue-dark - Global (primitives) */
290
154
  --colors-system-blue-dark: #5d92f5;
291
155
  /* Colors/System/blue-dark-bg - Global (primitives) */
@@ -334,10 +198,10 @@ body {
334
198
  --colors-system-spectrum-data-visual-azure-400: #7fc4ec;
335
199
  /* Colors/System/Spectrum/Data visual/azure-700 - Global (primitives) */
336
200
  --colors-system-spectrum-data-visual-azure-700: #299de0;
337
- /* Colors/System/Spectrum/Data visual/backrose-900 - Global (primitives) */
338
- --colors-system-spectrum-data-visual-backrose-900: #958ca3;
339
201
  /* Colors/System/Spectrum/Data visual/blackrose-1200 - Global (primitives) */
340
202
  --colors-system-spectrum-data-visual-blackrose-1200: #130033;
203
+ /* Colors/System/Spectrum/Data visual/blackrose-900 - Global (primitives) */
204
+ --colors-system-spectrum-data-visual-blackrose-900: #958ca3;
341
205
  /* Colors/System/Spectrum/Data visual/bronze-1100 - Global (primitives) */
342
206
  --colors-system-spectrum-data-visual-bronze-1100: #794b34;
343
207
  /* Colors/System/Spectrum/Data visual/bronze-800 - Global (primitives) */
@@ -366,10 +230,10 @@ body {
366
230
  --colors-system-spectrum-data-visual-highlight-azure-400-opacity: #7fc4ec4d;
367
231
  /* Colors/System/Spectrum/Data visual/Highlight/azure-700-opacity - Global (primitives) */
368
232
  --colors-system-spectrum-data-visual-highlight-azure-700-opacity: #299de04d;
369
- /* Colors/System/Spectrum/Data visual/Highlight/backrose-900-opacity - Global (primitives) */
370
- --colors-system-spectrum-data-visual-highlight-backrose-900-opacity: #958ca34d;
371
233
  /* Colors/System/Spectrum/Data visual/Highlight/blackrose-1200-opacity - Global (primitives) */
372
234
  --colors-system-spectrum-data-visual-highlight-blackrose-1200-opacity: #1300334d;
235
+ /* Colors/System/Spectrum/Data visual/Highlight/blackrose-900-opacity - Global (primitives) */
236
+ --colors-system-spectrum-data-visual-highlight-blackrose-900-opacity: #958ca34d;
373
237
  /* Colors/System/Spectrum/Data visual/Highlight/bronze-1100-opacity - Global (primitives) */
374
238
  --colors-system-spectrum-data-visual-highlight-bronze-1100-opacity: #794b344d;
375
239
  /* Colors/System/Spectrum/Data visual/Highlight/bronze-800-opacity - Global (primitives) */
@@ -604,28 +468,10 @@ body {
604
468
  --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
605
469
  /* West - side sheets */
606
470
  --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
607
- /* Foreground/Brand/on-brand-primary - Theme - Anywhere */
608
- --foreground-brand-on-primary: #ffffff;
609
- /* Foreground/Link text/subtle-inverse-hovered - Theme - Anywhere */
610
- --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
611
- /* Foreground/Link text/subtle-inverse-pressed - Theme - Anywhere */
612
- --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
613
- /* Foreground/Neutral/inverse-on-surface - Theme - Anywhere */
614
- --foreground-neutral-inverse-on-surface: #fafafa;
615
- /* Foreground/Neutral/on-color - Theme - Anywhere */
616
- --foreground-neutral-on-color: #ffffff;
617
- /* Foreground/Neutral/on-inverse-surface - Theme - Anywhere */
618
- --foreground-neutral-on-inverse-surface: #fafafa;
619
- /* Interaction/disabled-opacity - Theme - 3.0 */
620
- --interaction-disabled-opacity: #0000000f;
621
- /* Interaction/primary-disabled-opacity - Theme - 3.0 */
622
- --interaction-primary-disabled-opacity: #1559ea1f;
623
- /* Interaction/primary-hover-opacity - Theme - 3.0 */
624
- --interaction-primary-hover-opacity: #1559ea1a;
625
- /* Interaction/primary-press-opacity - Theme - 3.0 */
626
- --interaction-primary-press-opacity: #1559ea33;
627
- /* Interactions/disabled-opacity - Theme - Anywhere */
628
- --interactions-disabled-opacity: #0000000f;
471
+ /* Foreground/AI-powered/blue - Theme - BRAND */
472
+ --foreground-ai-powered-blue: #000000;
473
+ /* Foreground/AI-powered/pink - Theme - BRAND */
474
+ --foreground-ai-powered-pink: #000000;
629
475
  /* Interactions/opacity-black-10 - Global (primitives) */
630
476
  --interactions-opacity-black-10: #0000001a;
631
477
  /* Interactions/opacity-black-16 - Global (primitives) */
@@ -650,69 +496,69 @@ body {
650
496
  --interactions-opacity-white-6: #ffffff0f;
651
497
  /* Interactions/opacity-white-8 - Global (primitives) */
652
498
  --interactions-opacity-white-8: #ffffff14;
653
- /* Colors/Brands/Anywhere/Interactions/primary-dark-opacity-10 - Global (primitives) */
499
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-10 - Global (primitives) */
654
500
  --interactions-primary-dark-opacity-10: #7271901a;
655
- /* Colors/Brands/Anywhere/Interactions/primary-dark-opacity-12 - Global (primitives) */
501
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-12 - Global (primitives) */
656
502
  --interactions-primary-dark-opacity-12: #7271901f;
657
- /* Colors/Brands/Anywhere/Interactions/primary-dark-opacity-16 - Global (primitives) */
503
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-16 - Global (primitives) */
658
504
  --interactions-primary-dark-opacity-16: #72719029;
659
- /* Colors/Brands/Anywhere/Interactions/primary-dark-opacity-20 - Global (primitives) */
505
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-20 - Global (primitives) */
660
506
  --interactions-primary-dark-opacity-20: #72719033;
661
- /* Colors/Brands/Anywhere/Interactions/primary-dark-opacity-8 - Global (primitives) */
507
+ /* Colors/Brands/BRAND/Interactions/primary-dark-opacity-8 - Global (primitives) */
662
508
  --interactions-primary-dark-opacity-8: #72719014;
663
- /* Colors/Brands/Anywhere/Interactions/primary-light-opacity-10 - Global (primitives) */
509
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-10 - Global (primitives) */
664
510
  --interactions-primary-light-opacity-10: #1413461a;
665
- /* Colors/Brands/Anywhere/Interactions/primary-light-opacity-12 - Global (primitives) */
511
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-12 - Global (primitives) */
666
512
  --interactions-primary-light-opacity-12: #1413461f;
667
- /* Colors/Brands/Anywhere/Interactions/primary-light-opacity-16 - Global (primitives) */
513
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-16 - Global (primitives) */
668
514
  --interactions-primary-light-opacity-16: #14134629;
669
- /* Colors/Brands/Anywhere/Interactions/primary-light-opacity-20 - Global (primitives) */
515
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-20 - Global (primitives) */
670
516
  --interactions-primary-light-opacity-20: #14134633;
671
- /* Colors/Brands/Anywhere/Interactions/primary-light-opacity-8 - Global (primitives) */
517
+ /* Colors/Brands/BRAND/Interactions/primary-light-opacity-8 - Global (primitives) */
672
518
  --interactions-primary-light-opacity-8: #14134614;
673
519
  /* Labels/Base */
674
- --labels-base: 500 16px/20px var(--typeface);
675
- /* Labels/Base - line height */
676
- --labels-base-line-height: 20px;
677
- /* Labels/Base - size */
520
+ --labels-base: 500 16px/24px var(--typeface);
521
+ /* Labels/Base - line height */
522
+ --labels-base-line-height: 24px;
523
+ /* Labels/Base - size */
678
524
  --labels-base-size: 16px;
679
- /* Labels/Base - style */
525
+ /* Labels/Base - style */
680
526
  --labels-base-style: medium;
681
527
  /* Labels/Large */
682
- --labels-large: 500 18px/24px var(--typeface);
683
- /* Labels/Large - line height */
684
- --labels-large-line-height: 24px;
685
- /* Labels/Large - size */
528
+ --labels-large: 500 18px/28px var(--typeface);
529
+ /* Labels/Large - line height */
530
+ --labels-large-line-height: 28px;
531
+ /* Labels/Large - size */
686
532
  --labels-large-size: 18px;
687
- /* Labels/Large - style */
533
+ /* Labels/Large - style */
688
534
  --labels-large-style: medium;
689
535
  /* Labels/Small */
690
536
  --labels-small: 500 14px/20px var(--typeface);
691
- /* Labels/Small - line height */
537
+ /* Labels/Small - line height */
692
538
  --labels-small-line-height: 20px;
693
- /* Labels/Small - size */
539
+ /* Labels/Small - size */
694
540
  --labels-small-size: 14px;
695
- /* Labels/Small - style */
541
+ /* Labels/Small - style */
696
542
  --labels-small-style: medium;
697
543
  /* Labels/X-Small */
698
544
  --labels-x-small: 500 12px/16px var(--typeface);
699
- /* Labels/X-Small - line height */
545
+ /* Labels/X-Small - line height */
700
546
  --labels-x-small-line-height: 16px;
701
- /* Labels/X-Small - size */
547
+ /* Labels/X-Small - size */
702
548
  --labels-x-small-size: 12px;
703
- /* Labels/X-Small - style */
549
+ /* Labels/X-Small - style */
704
550
  --labels-x-small-style: medium;
705
- /* Colors/Brands/Anywhere/Primary/00-base - Global (primitives) */
551
+ /* Colors/Brands/BRAND/Primary/00-base - Global (primitives) */
706
552
  --primary-00-base: #141346;
707
- /* Colors/Brands/Anywhere/Primary/15-dark - Global (primitives) */
553
+ /* Colors/Brands/BRAND/Primary/15-dark - Global (primitives) */
708
554
  --primary-15-dark: #11103c;
709
- /* Colors/Brands/Anywhere/Primary/40-light - Global (primitives) */
555
+ /* Colors/Brands/BRAND/Primary/40-light - Global (primitives) */
710
556
  --primary-40-light: #727190;
711
- /* Colors/Brands/Anywhere/Primary/55-light - Global (primitives) */
557
+ /* Colors/Brands/BRAND/Primary/55-light - Global (primitives) */
712
558
  --primary-55-light: #9595ac;
713
- /* Colors/Brands/Anywhere/Primary/75-dark - Global (primitives) */
559
+ /* Colors/Brands/BRAND/Primary/75-dark - Global (primitives) */
714
560
  --primary-75-dark: #050512;
715
- /* Colors/Brands/Anywhere/Primary/85-light - Global (primitives) */
561
+ /* Colors/Brands/BRAND/Primary/85-light - Global (primitives) */
716
562
  --primary-85-light: #dcdce3;
717
563
  /* Radius/full - Borders */
718
564
  --radius-full: 999px;
@@ -726,17 +572,21 @@ body {
726
572
  --radius-sm: 4px;
727
573
  /* Radius/xlg - Borders */
728
574
  --radius-xlg: 16px;
729
- /* Colors/Brands/Anywhere/Secondary/00-base - Global (primitives) */
575
+ /* Colors/Brands/BRAND/Secondary/00-base - Global (primitives) */
730
576
  --secondary-00-base: #e95525;
731
- /* Colors/Brands/Anywhere/Secondary/15-dark - Global (primitives) */
577
+ /* Colors/Brands/BRAND/Secondary/15-dark - Global (primitives) */
732
578
  --secondary-15-dark: #c6481f;
733
- /* Colors/Brands/Anywhere/Secondary/40-light - Global (primitives) */
579
+ /* Colors/Brands/BRAND/Secondary/15-light - Global (primitives) */
580
+ --secondary-15-light: #f5b39d;
581
+ /* Colors/Brands/BRAND/Secondary/25-base - Global (primitives) */
582
+ --secondary-25-base: #af401c;
583
+ /* Colors/Brands/BRAND/Secondary/40-light - Global (primitives) */
734
584
  --secondary-40-light: #f2997c;
735
- /* Colors/Brands/Anywhere/Secondary/55-light - Global (primitives) */
585
+ /* Colors/Brands/BRAND/Secondary/55-light - Global (primitives) */
736
586
  --secondary-55-light: #f5b39d;
737
- /* Colors/Brands/Anywhere/Secondary/75-dark - Global (primitives) */
587
+ /* Colors/Brands/BRAND/Secondary/75-dark - Global (primitives) */
738
588
  --secondary-75-dark: #3a1509;
739
- /* Colors/Brands/Anywhere/Secondary/85-light - Global (primitives) */
589
+ /* Colors/Brands/BRAND/Secondary/85-light - Global (primitives) */
740
590
  --secondary-85-light: #fce6de;
741
591
  /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
742
592
  --shadows-inner-shadow-black-100: #000000;
@@ -870,22 +720,10 @@ body {
870
720
  --spacings-960: 96px;
871
721
  /* Spacings/None - Global (primitives) */
872
722
  --spacings-none: 0;
873
- /* Status/on-error - Theme - Anywhere */
874
- --status-on-error: #ffffff;
875
- /* Status/on-information - Theme - Anywhere */
876
- --status-on-information: #ffffff;
877
- /* Status/on-informational - Theme - Anywhere */
878
- --status-on-informational: #ffffff;
879
- /* Status/on-success - Theme - Anywhere */
880
- --status-on-success: #ffffff;
881
- /* Status/on-warning - Theme - Anywhere */
882
- --status-on-warning: #141414;
883
- /* Stroke/Neutral/focus-on-inverse - Theme - Anywhere */
884
- --stroke-neutral-focus-on-inverse: #ffffff;
885
- /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
886
- --stroke-neutral-interaction-inverse-focus: #ffffff;
887
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Anywhere */
888
- --stroke-neutral-interactions-inverse-focus: #ffffff;
723
+ /* Stroke/AI-powered/blue - Theme - BRAND */
724
+ --stroke-ai-powered-blue: #000000;
725
+ /* Stroke/AI-powered/pink - Theme - BRAND */
726
+ --stroke-ai-powered-pink: #000000;
889
727
  /* Stroke/none - Borders */
890
728
  --stroke-none: 0;
891
729
  /* Stroke/thick - Borders */
@@ -894,22 +732,24 @@ body {
894
732
  --stroke-thicker: 4px;
895
733
  /* Stroke/thin - Borders */
896
734
  --stroke-thin: 1px;
897
- /* Surface/Neutral/transparent - Theme - Anywhere */
898
- --surface-neutral-transparent: #ffffff00;
899
- /* Colors/Brands/Anywhere/Tertiary/00-base - Global (primitives) */
735
+ /* Surface/AI-powered/blue - Theme - BRAND */
736
+ --surface-ai-powered-blue: #000000;
737
+ /* Surface/AI-powered/pink - Theme - BRAND */
738
+ --surface-ai-powered-pink: #000000;
739
+ /* Colors/Brands/BRAND/Tertiary/00-base - Global (primitives) */
900
740
  --tertiary-00-base: #030330;
901
- /* Colors/Brands/Anywhere/Tertiary/15-dark - Global (primitives) */
741
+ /* Colors/Brands/BRAND/Tertiary/15-dark - Global (primitives) */
902
742
  --tertiary-15-dark: #030329;
903
- /* Colors/Brands/Anywhere/Tertiary/40-light - Global (primitives) */
743
+ /* Colors/Brands/BRAND/Tertiary/40-light - Global (primitives) */
904
744
  --tertiary-40-light: #686883;
905
- /* Colors/Brands/Anywhere/Tertiary/55-light - Global (primitives) */
745
+ /* Colors/Brands/BRAND/Tertiary/55-light - Global (primitives) */
906
746
  --tertiary-55-light: #8e8ea2;
907
- /* Colors/Brands/Anywhere/Tertiary/75-dark - Global (primitives) */
747
+ /* Colors/Brands/BRAND/Tertiary/75-dark - Global (primitives) */
908
748
  --tertiary-75-dark: #01010c;
909
- /* Colors/Brands/Anywhere/Tertiary/85-light - Global (primitives) */
749
+ /* Colors/Brands/BRAND/Tertiary/85-light - Global (primitives) */
910
750
  --tertiary-85-light: #d9d9e0;
911
751
  /* Typeface - Brand */
912
- --typeface: 'Work Sans', sans-serif;
752
+ --typeface: 'Inter', sans-serif;
913
753
  /* Typography/Line-height/lh-1 - Global (primitives) */
914
754
  --typography-line-height-lh-1: 16px;
915
755
  /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -973,29 +813,29 @@ body {
973
813
  /* Typography/Size/xxxlg - Global (primitives) */
974
814
  --typography-size-xxxlg: 40px;
975
815
  /* Typography/Typeface/Arial - Global (primitives) */
976
- --typography-typeface-arial: 'Arial', sans-serif;
816
+ --typography-typeface-arial: 'Arial';
977
817
  /* Typography/Typeface/Geist - Global (primitives) */
978
- --typography-typeface-geist: 'Geist', sans-serif;
818
+ --typography-typeface-geist: 'Geist';
979
819
  /* Typography/Typeface/Helvetica - Global (primitives) */
980
- --typography-typeface-helvetica: 'Helvetica', sans-serif;
820
+ --typography-typeface-helvetica: 'Helvetica';
981
821
  /* Typography/Typeface/Inter - Global (primitives) */
982
- --typography-typeface-inter: 'Inter', sans-serif;
822
+ --typography-typeface-inter: 'Inter';
983
823
  /* Typography/Typeface/Lato - Global (primitives) */
984
- --typography-typeface-lato: 'Lato', sans-serif;
824
+ --typography-typeface-lato: 'Lato';
985
825
  /* Typography/Typeface/Manrope - Global (primitives) */
986
- --typography-typeface-manrope: 'Manrope', sans-serif;
826
+ --typography-typeface-manrope: 'Manrope';
987
827
  /* Typography/Typeface/Open Sans - Global (primitives) */
988
- --typography-typeface-open-sans: 'Open Sans', sans-serif;
828
+ --typography-typeface-open-sans: 'Open Sans';
989
829
  /* Typography/Typeface/Red Hat Text - Global (primitives) */
990
- --typography-typeface-red-hat-text: 'Red Hat Text', sans-serif;
830
+ --typography-typeface-red-hat-text: 'Red Hat Text';
991
831
  /* Typography/Typeface/Roboto - Global (primitives) */
992
- --typography-typeface-roboto: 'Roboto', sans-serif;
832
+ --typography-typeface-roboto: 'Roboto';
993
833
  /* Typography/Typeface/SF Pro - Global (primitives) */
994
- --typography-typeface-sf-pro: 'SF Pro', sans-serif;
834
+ --typography-typeface-sf-pro: 'SF Pro';
995
835
  /* Typography/Typeface/Typold - Global (primitives) */
996
- --typography-typeface-typold: 'Typold', sans-serif;
836
+ --typography-typeface-typold: 'Typold';
997
837
  /* Typography/Typeface/Work Sans - Global (primitives) */
998
- --typography-typeface-work-sans: 'Work Sans', sans-serif;
838
+ --typography-typeface-work-sans: 'Work Sans';
999
839
  /* Typography/Weight/300 - Global (primitives) */
1000
840
  --typography-weight-300: 300;
1001
841
  /* Typography/Weight/400 - Global (primitives) */
@@ -1006,52 +846,52 @@ body {
1006
846
  --typography-weight-600: 600;
1007
847
  /* Mobile/Display/Regular/Large */
1008
848
  --display-regular-large: 400 56px/72px var(--typeface);
1009
- /* Mobile/Display/Regular/Large - line height */
849
+ /* Mobile/Display/Regular/Large - line height */
1010
850
  --display-regular-large-line-height: 72px;
1011
- /* Mobile/Display/Regular/Large - size */
851
+ /* Mobile/Display/Regular/Large - size */
1012
852
  --display-regular-large-size: 56px;
1013
- /* Mobile/Display/Regular/Large - style */
853
+ /* Mobile/Display/Regular/Large - style */
1014
854
  --display-regular-large-style: regular;
1015
855
  /* Mobile/Display/Regular/Medium */
1016
856
  --display-regular-medium: 400 48px/60px var(--typeface);
1017
- /* Mobile/Display/Regular/Medium - line height */
857
+ /* Mobile/Display/Regular/Medium - line height */
1018
858
  --display-regular-medium-line-height: 60px;
1019
- /* Mobile/Display/Regular/Medium - size */
859
+ /* Mobile/Display/Regular/Medium - size */
1020
860
  --display-regular-medium-size: 48px;
1021
- /* Mobile/Display/Regular/Medium - style */
861
+ /* Mobile/Display/Regular/Medium - style */
1022
862
  --display-regular-medium-style: regular;
1023
863
  /* Mobile/Display/Regular/Small */
1024
864
  --display-regular-small: 400 40px/48px var(--typeface);
1025
- /* Mobile/Display/Regular/Small - line height */
865
+ /* Mobile/Display/Regular/Small - line height */
1026
866
  --display-regular-small-line-height: 48px;
1027
- /* Mobile/Display/Regular/Small - size */
867
+ /* Mobile/Display/Regular/Small - size */
1028
868
  --display-regular-small-size: 40px;
1029
- /* Mobile/Display/Regular/Small - style */
869
+ /* Mobile/Display/Regular/Small - style */
1030
870
  --display-regular-small-style: regular;
1031
871
  /* Mobile/Display/Semibold/Large */
1032
872
  --display-semibold-large: 600 56px/72px var(--typeface);
1033
- /* Mobile/Display/Semibold/Large - line height */
873
+ /* Mobile/Display/Semibold/Large - line height */
1034
874
  --display-semibold-large-line-height: 72px;
1035
- /* Mobile/Display/Semibold/Large - size */
875
+ /* Mobile/Display/Semibold/Large - size */
1036
876
  --display-semibold-large-size: 56px;
1037
- /* Mobile/Display/Semibold/Large - style */
1038
- --display-semibold-large-style: semibold;
877
+ /* Mobile/Display/Semibold/Large - style */
878
+ --display-semibold-large-style: 600;
1039
879
  /* Mobile/Display/Semibold/Medium */
1040
880
  --display-semibold-medium: 600 48px/60px var(--typeface);
1041
- /* Mobile/Display/Semibold/Medium - line height */
881
+ /* Mobile/Display/Semibold/Medium - line height */
1042
882
  --display-semibold-medium-line-height: 60px;
1043
- /* Mobile/Display/Semibold/Medium - size */
883
+ /* Mobile/Display/Semibold/Medium - size */
1044
884
  --display-semibold-medium-size: 48px;
1045
- /* Mobile/Display/Semibold/Medium - style */
1046
- --display-semibold-medium-style: semibold;
885
+ /* Mobile/Display/Semibold/Medium - style */
886
+ --display-semibold-medium-style: 600;
1047
887
  /* Mobile/Display/Semibold/Small */
1048
888
  --display-semibold-small: 600 40px/48px var(--typeface);
1049
- /* Mobile/Display/Semibold/Small - line height */
889
+ /* Mobile/Display/Semibold/Small - line height */
1050
890
  --display-semibold-small-line-height: 48px;
1051
- /* Mobile/Display/Semibold/Small - size */
891
+ /* Mobile/Display/Semibold/Small - size */
1052
892
  --display-semibold-small-size: 40px;
1053
- /* Mobile/Display/Semibold/Small - style */
1054
- --display-semibold-small-style: semibold;
893
+ /* Mobile/Display/Semibold/Small - style */
894
+ --display-semibold-small-style: 600;
1055
895
  /* Mobile/Heading/H1 - Large Headline */
1056
896
  --heading-h1: 600 32px/40px var(--typeface);
1057
897
  /* Mobile/Heading/H1 - Large Headline line height */
@@ -1059,7 +899,7 @@ body {
1059
899
  /* Mobile/Heading/H1 - Large Headline size */
1060
900
  --heading-h1-size: 32px;
1061
901
  /* Mobile/Heading/H1 - Large Headline style */
1062
- --heading-h1-style: semibold;
902
+ --heading-h1-style: 600;
1063
903
  /* Mobile/Heading/H2 - Headline */
1064
904
  --heading-h2: 600 28px/36px var(--typeface);
1065
905
  /* Mobile/Heading/H2 - Headline line height */
@@ -1067,7 +907,7 @@ body {
1067
907
  /* Mobile/Heading/H2 - Headline size */
1068
908
  --heading-h2-size: 28px;
1069
909
  /* Mobile/Heading/H2 - Headline style */
1070
- --heading-h2-style: semibold;
910
+ --heading-h2-style: 600;
1071
911
  /* Mobile/Heading/H3 - Headline */
1072
912
  --heading-h3: 600 24px/32px var(--typeface);
1073
913
  /* Mobile/Heading/H3 - Headline line height */
@@ -1075,7 +915,7 @@ body {
1075
915
  /* Mobile/Heading/H3 - Headline size */
1076
916
  --heading-h3-size: 24px;
1077
917
  /* Mobile/Heading/H3 - Headline style */
1078
- --heading-h3-style: semibold;
918
+ --heading-h3-style: 600;
1079
919
  /* Mobile/Heading/H4 - Headline */
1080
920
  --heading-h4: 600 20px/28px var(--typeface);
1081
921
  /* Mobile/Heading/H4 - Headline line height */
@@ -1083,22 +923,22 @@ body {
1083
923
  /* Mobile/Heading/H4 - Headline size */
1084
924
  --heading-h4-size: 20px;
1085
925
  /* Mobile/Heading/H4 - Headline style */
1086
- --heading-h4-style: semibold;
926
+ --heading-h4-style: 600;
1087
927
  /* Mobile/Heading/H5 */
1088
928
  --heading-h5: 600 18px/24px var(--typeface);
1089
- /* Mobile/Heading/H5 - line height */
929
+ /* Mobile/Heading/H5 - line height */
1090
930
  --heading-h5-line-height: 24px;
1091
- /* Mobile/Heading/H5 - size */
931
+ /* Mobile/Heading/H5 - size */
1092
932
  --heading-h5-size: 18px;
1093
- /* Mobile/Heading/H5 - style */
1094
- --heading-h5-style: semibold;
933
+ /* Mobile/Heading/H5 - style */
934
+ --heading-h5-style: 600;
1095
935
  /* Mobile/Heading/H6 */
1096
936
  --heading-h6: 500 16px/20px var(--typeface);
1097
- /* Mobile/Heading/H6 - line height */
937
+ /* Mobile/Heading/H6 - line height */
1098
938
  --heading-h6-line-height: 20px;
1099
- /* Mobile/Heading/H6 - size */
939
+ /* Mobile/Heading/H6 - size */
1100
940
  --heading-h6-size: 16px;
1101
- /* Mobile/Heading/H6 - style */
941
+ /* Mobile/Heading/H6 - style */
1102
942
  --heading-h6-style: medium;
1103
943
  /* Mobile/Subheader/Large - Headline */
1104
944
  --subheader-large: 400 20px/28px var(--typeface);
@@ -1140,748 +980,829 @@ body {
1140
980
  --subheader-xxx-large-size: 32px;
1141
981
  /* Mobile/Subheader/XXX-Large - Large Headline style */
1142
982
  --subheader-xxx-large-style: regular;
1143
-
1144
- @media (width >= 640px) {
1145
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1146
- --display-regular-large: 400 64px/88px var(--typeface);
1147
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1148
- --display-regular-large-line-height: 88px;
1149
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1150
- --display-regular-large-size: 64px;
1151
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1152
- --display-regular-large-style: regular;
1153
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1154
- --display-regular-medium: 400 56px/72px var(--typeface);
1155
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1156
- --display-regular-medium-line-height: 72px;
1157
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1158
- --display-regular-medium-size: 56px;
1159
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1160
- --display-regular-medium-style: regular;
1161
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1162
- --display-regular-small: 400 48px/60px var(--typeface);
1163
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1164
- --display-regular-small-line-height: 60px;
1165
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1166
- --display-regular-small-size: 48px;
1167
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1168
- --display-regular-small-style: regular;
1169
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1170
- --display-semibold-large: 600 64px/88px var(--typeface);
1171
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1172
- --display-semibold-large-line-height: 88px;
1173
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1174
- --display-semibold-large-size: 64px;
1175
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1176
- --display-semibold-large-style: semibold;
1177
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1178
- --display-semibold-medium: 600 56px/72px var(--typeface);
1179
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1180
- --display-semibold-medium-line-height: 72px;
1181
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1182
- --display-semibold-medium-size: 56px;
1183
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1184
- --display-semibold-medium-style: semibold;
1185
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1186
- --display-semibold-small: 600 48px/60px var(--typeface);
1187
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1188
- --display-semibold-small-line-height: 60px;
1189
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1190
- --display-semibold-small-size: 48px;
1191
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1192
- --display-semibold-small-style: semibold;
1193
- /* Desktop/Heading/H1 */
1194
- --heading-h1: 600 40px/48px var(--typeface);
1195
- /* Desktop/Heading/H1 - line height */
1196
- --heading-h1-line-height: 48px;
1197
- /* Desktop/Heading/H1 - size */
1198
- --heading-h1-size: 40px;
1199
- /* Desktop/Heading/H1 - style */
1200
- --heading-h1-style: semibold;
1201
- /* Desktop/Heading/H2 */
1202
- --heading-h2: 600 32px/40px var(--typeface);
1203
- /* Desktop/Heading/H2 - line height */
1204
- --heading-h2-line-height: 40px;
1205
- /* Desktop/Heading/H2 - size */
1206
- --heading-h2-size: 32px;
1207
- /* Desktop/Heading/H2 - style */
1208
- --heading-h2-style: semibold;
1209
- /* Desktop/Heading/H3 */
1210
- --heading-h3: 600 28px/36px var(--typeface);
1211
- /* Desktop/Heading/H3 - line height */
1212
- --heading-h3-line-height: 36px;
1213
- /* Desktop/Heading/H3 - size */
1214
- --heading-h3-size: 28px;
1215
- /* Desktop/Heading/H3 - style */
1216
- --heading-h3-style: semibold;
1217
- /* Desktop/Heading/H4 */
1218
- --heading-h4: 600 24px/32px var(--typeface);
1219
- /* Desktop/Heading/H4 - line height */
1220
- --heading-h4-line-height: 32px;
1221
- /* Desktop/Heading/H4 - size */
1222
- --heading-h4-size: 24px;
1223
- /* Desktop/Heading/H4 - style */
1224
- --heading-h4-style: semibold;
1225
- /* Desktop/Heading/H5 */
1226
- --heading-h5: 600 20px/28px var(--typeface);
1227
- /* Desktop/Heading/H5 - line height */
1228
- --heading-h5-line-height: 28px;
1229
- /* Desktop/Heading/H5 - size */
1230
- --heading-h5-size: 20px;
1231
- /* Desktop/Heading/H5 - style */
1232
- --heading-h5-style: semibold;
1233
- /* Desktop/Heading/H6 */
1234
- --heading-h6: 500 18px/24px var(--typeface);
1235
- /* Desktop/Heading/H6 - line height */
1236
- --heading-h6-line-height: 24px;
1237
- /* Desktop/Heading/H6 - size */
1238
- --heading-h6-size: 18px;
1239
- /* Desktop/Heading/H6 - style */
1240
- --heading-h6-style: medium;
1241
- /* Desktop/Subheader/Large - Headline */
1242
- --subheader-large: 400 24px/32px var(--typeface);
1243
- /* Desktop/Subheader/Large - Headline line height */
1244
- --subheader-large-line-height: 32px;
1245
- /* Desktop/Subheader/Large - Headline size */
1246
- --subheader-large-size: 24px;
1247
- /* Desktop/Subheader/Large - Headline style */
1248
- --subheader-large-style: regular;
1249
- /* Desktop/Subheader/Medium */
1250
- --subheader-medium: 400 20px/28px var(--typeface);
1251
- /* Desktop/Subheader/Medium - line height */
1252
- --subheader-medium-line-height: 28px;
1253
- /* Desktop/Subheader/Medium - size */
1254
- --subheader-medium-size: 20px;
1255
- /* Desktop/Subheader/Medium - style */
1256
- --subheader-medium-style: regular;
1257
- /* Desktop/Subheader/X-Large - Headline */
1258
- --subheader-x-large: 400 28px/36px var(--typeface);
1259
- /* Desktop/Subheader/X-Large - Headline line height */
1260
- --subheader-x-large-line-height: 36px;
1261
- /* Desktop/Subheader/X-Large - Headline size */
1262
- --subheader-x-large-size: 28px;
1263
- /* Desktop/Subheader/X-Large - Headline style */
1264
- --subheader-x-large-style: regular;
1265
- /* Desktop/Subheader/XX-Large - Headline */
1266
- --subheader-xx-large: 400 32px/40px var(--typeface);
1267
- /* Desktop/Subheader/XX-Large - Headline line height */
1268
- --subheader-xx-large-line-height: 40px;
1269
- /* Desktop/Subheader/XX-Large - Headline size */
1270
- --subheader-xx-large-size: 32px;
1271
- /* Desktop/Subheader/XX-Large - Headline style */
1272
- --subheader-xx-large-style: regular;
1273
- /* Desktop/Subheader/XXX-Large - Large Headline */
1274
- --subheader-xxx-large: 400 40px/48px var(--typeface);
1275
- /* Desktop/Subheader/XXX-Large - Large Headline line height */
1276
- --subheader-xxx-large-line-height: 48px;
1277
- /* Desktop/Subheader/XXX-Large - Large Headline size */
1278
- --subheader-xxx-large-size: 40px;
1279
- /* Desktop/Subheader/XXX-Large - Large Headline style */
1280
- --subheader-xxx-large-style: regular;
1281
- }
1282
-
1283
- /** Light theme (default) **/
1284
- /* Background/base - Theme - Anywhere */
983
+ /* light theme (default) */
984
+ /* Background/base - Theme - BRAND */
1285
985
  --background-base: #ffffff;
1286
- /* Background/scrim - Theme - Anywhere */
986
+ /* Background/scrim - Theme - BRAND */
1287
987
  --background-scrim: #00000040;
1288
- /* Background/shade - Theme - Anywhere */
988
+ /* Background/shade - Theme - BRAND */
1289
989
  --background-shade: #f5f5f5;
1290
- /* Data visual/category-01 - Theme - Anywhere */
990
+ /* Data visual/category-01 - Brand */
1291
991
  --data-visual-category-01: #d67e51;
1292
- /* Data visual/category-01-highlight - Theme - Anywhere */
992
+ /* Data visual/category-01-highlight - Brand */
1293
993
  --data-visual-category-01-highlight: #d67e514d;
1294
- /* Data visual/category-02 - Theme - Anywhere */
994
+ /* Data visual/category-02 - Brand */
1295
995
  --data-visual-category-02: #7a2a0b;
1296
- /* Data visual/category-02-highlight - Theme - Anywhere */
996
+ /* Data visual/category-02-highlight - Brand */
1297
997
  --data-visual-category-02-highlight: #7a2a0b4d;
1298
- /* Data visual/category-03 - Theme - Anywhere */
998
+ /* Data visual/category-03 - Brand */
1299
999
  --data-visual-category-03: #ab922b;
1300
- /* Data visual/category-03-highlight - Theme - Anywhere */
1000
+ /* Data visual/category-03-highlight - Brand */
1301
1001
  --data-visual-category-03-highlight: #ab922b4d;
1302
- /* Data visual/category-04 - Theme - Anywhere */
1002
+ /* Data visual/category-04 - Brand */
1303
1003
  --data-visual-category-04: #2d3300;
1304
- /* Data visual/category-04-highlight - Theme - Anywhere */
1004
+ /* Data visual/category-04-highlight - Brand */
1305
1005
  --data-visual-category-04-highlight: #2d33004d;
1306
- /* Data visual/category-05 - Theme - Anywhere */
1006
+ /* Data visual/category-05 - Brand */
1307
1007
  --data-visual-category-05: #794b34;
1308
- /* Data visual/category-05-highlight - Theme - Anywhere */
1008
+ /* Data visual/category-05-highlight - Brand */
1309
1009
  --data-visual-category-05-highlight: #794b344d;
1310
- /* Data visual/category-06 - Theme - Anywhere */
1010
+ /* Data visual/category-06 - Brand */
1311
1011
  --data-visual-category-06: #7f7f7f;
1312
- /* Data visual/category-06-highlight - Theme - Anywhere */
1012
+ /* Data visual/category-06-highlight - Brand */
1313
1013
  --data-visual-category-06-highlight: #7f7f7f4d;
1314
- /* Data visual/category-07 - Theme - Anywhere */
1014
+ /* Data visual/category-07 - Brand */
1315
1015
  --data-visual-category-07: #530909;
1316
- /* Data visual/category-07-highlight - Theme - Anywhere */
1016
+ /* Data visual/category-07-highlight - Brand */
1317
1017
  --data-visual-category-07-highlight: #5309094d;
1318
- /* Data visual/category-1 - Theme - Anywhere */
1018
+ /* Data visual/category-1 - Theme - BRAND */
1319
1019
  --data-visual-category-1: #7a2a0b;
1320
- /* Data visual/category-1-highlight - Theme - Anywhere */
1020
+ /* Data visual/category-1-highlight - Theme - BRAND */
1321
1021
  --data-visual-category-1-highlight: #7a2a0b4d;
1322
- /* Data visual/category-2 - Theme - Anywhere */
1022
+ /* Data visual/category-2 - Theme - BRAND */
1323
1023
  --data-visual-category-2: #d67e51;
1324
- /* Data visual/category-2-highlight - Theme - Anywhere */
1024
+ /* Data visual/category-2-highlight - Theme - BRAND */
1325
1025
  --data-visual-category-2-highlight: #d67e514d;
1326
- /* Data visual/category-3 - Theme - Anywhere */
1026
+ /* Data visual/category-3 - Theme - BRAND */
1327
1027
  --data-visual-category-3: #2d3300;
1328
- /* Data visual/category-3-highlight - Theme - Anywhere */
1028
+ /* Data visual/category-3-highlight - Theme - BRAND */
1329
1029
  --data-visual-category-3-highlight: #2d33004d;
1330
- /* Data visual/category-4 - Theme - Anywhere */
1030
+ /* Data visual/category-4 - Theme - BRAND */
1331
1031
  --data-visual-category-4: #ab922b;
1332
- /* Data visual/category-4-highlight - Theme - Anywhere */
1032
+ /* Data visual/category-4-highlight - Theme - BRAND */
1333
1033
  --data-visual-category-4-highlight: #ab922b4d;
1334
- /* Data visual/category-5 - Theme - Anywhere */
1034
+ /* Data visual/category-5 - Theme - BRAND */
1335
1035
  --data-visual-category-5: #530909;
1336
- /* Data visual/category-5-highlight - Theme - Anywhere */
1036
+ /* Data visual/category-5-highlight - Theme - BRAND */
1337
1037
  --data-visual-category-5-highlight: #5309094d;
1338
- /* Data visual/category-6 - Theme - Anywhere */
1038
+ /* Data visual/category-6 - Theme - BRAND */
1339
1039
  --data-visual-category-6: #7f7f7f;
1340
- /* Data visual/category-6-highlight - Theme - Anywhere */
1040
+ /* Data visual/category-6-highlight - Theme - BRAND */
1341
1041
  --data-visual-category-6-highlight: #7f7f7f4d;
1342
- /* Data visual/category-7 - Theme - Anywhere */
1042
+ /* Data visual/category-7 - Theme - BRAND */
1343
1043
  --data-visual-category-7: #794b34;
1344
- /* Data visual/category-7-highlight - Theme - Anywhere */
1044
+ /* Data visual/category-7-highlight - Theme - BRAND */
1345
1045
  --data-visual-category-7-highlight: #794b344d;
1346
- /* Data visual/gradient-end - Theme - Anywhere */
1046
+ /* Data visual/gradient-end - Theme - BRAND */
1347
1047
  --data-visual-gradient-end: #ffffff4d;
1348
- /* Data visual/green - Theme - Anywhere */
1048
+ /* Data visual/green - Theme - BRAND */
1349
1049
  --data-visual-green: #258750;
1350
- /* Data visual/green-highlight - Theme - Anywhere */
1050
+ /* Data visual/green-highlight - Theme - BRAND */
1351
1051
  --data-visual-green-highlight: #deede5;
1352
- /* Data visual/negative - Theme - Anywhere */
1052
+ /* Data visual/negative - Brand */
1353
1053
  --data-visual-negative: #d83a52;
1354
- /* Data visual/negative-highlight - Theme - Anywhere */
1054
+ /* Data visual/negative-highlight - Brand */
1355
1055
  --data-visual-negative-highlight: #f9e1e5;
1356
- /* Data visual/positive - Theme - Anywhere */
1056
+ /* Data visual/positive - Brand */
1357
1057
  --data-visual-positive: #258750;
1358
- /* Data visual/positive-highlight - Theme - Anywhere */
1058
+ /* Data visual/positive-highlight - Brand */
1359
1059
  --data-visual-positive-highlight: #deede5;
1360
- /* Data visual/red - Theme - Anywhere */
1060
+ /* Data visual/red - Theme - BRAND */
1361
1061
  --data-visual-red: #d83a52;
1362
- /* Data visual/red-highlight - Theme - Anywhere */
1062
+ /* Data visual/red-highlight - Theme - BRAND */
1363
1063
  --data-visual-red-highlight: #f9e1e5;
1364
- /* Foreground/Brand/on-inverse-primary - Theme - Anywhere */
1064
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1365
1065
  --foreground-brand-on-inverse-primary: #727190;
1366
- /* Foreground/Brand/on-inverse-secondary - Theme - Anywhere */
1066
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1367
1067
  --foreground-brand-on-inverse-secondary: #f2997c;
1368
- /* Foreground/Brand/on-brand-secondary - Theme - Anywhere */
1068
+ /* Foreground/Brand/on-light-color-secondary - Theme - BRAND */
1069
+ --foreground-brand-on-light-color-secondary: #af401c;
1070
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1071
+ /* Foreground color used on Brand's primary color (non neutral color) */
1072
+ --foreground-brand-on-primary: #ffffff;
1073
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1074
+ /* Foreground color used on Brand's primary color (non neutral color) */
1369
1075
  --foreground-brand-on-secondary: #ffffff;
1370
- /* Foreground/Brand/brand-primary - Theme - Anywhere */
1076
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1077
+ /* Foreground text and icons that match the brand's primary color */
1371
1078
  --foreground-brand-primary: #030330;
1372
- /* Foreground/Brand/brand-primary-depth - Theme - Anywhere */
1079
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1373
1080
  --foreground-brand-primary-depth: #11103c;
1374
- /* Foreground/Brand/brand-secondary - Theme - Anywhere */
1081
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1082
+ /* Foreground text and icons that match the brand's secondary color */
1375
1083
  --foreground-brand-secondary: #e95525;
1376
- /* Foreground/Brand/brand-secondary-depth - Theme - Anywhere */
1084
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1377
1085
  --foreground-brand-secondary-depth: #c6481f;
1378
- /* Foreground/Link text/default - Theme - Anywhere */
1086
+ /* Foreground/Link text/default - Theme - BRAND */
1379
1087
  --foreground-link-text-default: #215ecd;
1380
- /* Foreground/Link text/default-disabled - Theme - Anywhere */
1088
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1381
1089
  --foreground-link-text-default-disabled: #7a9ee1;
1382
- /* Foreground/Link text/default-hovered - Theme - Anywhere */
1090
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1383
1091
  --foreground-link-text-default-hovered: #1e55b9;
1384
- /* Foreground/Link text/default-pressed - Theme - Anywhere */
1092
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1385
1093
  --foreground-link-text-default-pressed: #1a4ba4;
1386
- /* Foreground/Link text/default-visited - Theme - Anywhere */
1094
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1387
1095
  --foreground-link-text-default-visited: #7a3e7a;
1388
- /* Foreground/Link text/subtle-disabled - Theme - Anywhere */
1096
+ /* Foreground/Link text/subtle-disabled - Brand */
1389
1097
  --foreground-link-text-subtle-disabled: #bdbdbd;
1390
- /* Foreground/Link text/subtle-hovered - Theme - Anywhere */
1098
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1391
1099
  --foreground-link-text-subtle-hovered: #292929;
1392
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Anywhere */
1100
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1101
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1102
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1103
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1104
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1393
1105
  --foreground-link-text-subtle-inversed-disabled: #757575;
1394
- /* Foreground/Link text/subtle-pressed - Theme - Anywhere */
1395
- --foreground-link-text-subtle-pressed: #424242;
1396
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Anywhere */
1106
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1107
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1108
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1397
1109
  --foreground-neutral-disabled-on-color-surface: #757575;
1398
- /* Foreground/Neutral/disabled-on-surface - Theme - Anywhere */
1110
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1399
1111
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1400
- /* Foreground/Neutral/on-surface - Theme - Anywhere */
1112
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1113
+ --foreground-neutral-inverse-on-surface: #fafafa;
1114
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1115
+ /* Interactive controls */
1116
+ --foreground-neutral-on-color: #ffffff;
1117
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1118
+ /* Text and icons against inverse surface */
1119
+ --foreground-neutral-on-inverse-surface: #fafafa;
1120
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1121
+ /* Default foreground text and icons against any surface color */
1401
1122
  --foreground-neutral-on-surface: #141414;
1402
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Anywhere */
1403
- --foreground-neutral-on-surface-variant-01: #474747;
1404
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Anywhere */
1123
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1124
+ /* Secondary foreground color for icons and text */
1125
+ --foreground-neutral-on-surface-variant-01: #707070;
1126
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1127
+ /* Tertiary foreground color for icons and text */
1405
1128
  --foreground-neutral-on-surface-variant-02: #757575;
1406
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Anywhere */
1129
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1130
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1407
1131
  --foreground-neutral-on-surface-variant-03: #8a8a8a;
1408
- /* Foreground/Neutral/skeleton-element - Theme - Anywhere */
1409
- --foreground-neutral-skeleton-element: #c7c7c7;
1410
- /* Foreground/Spectrum/blue - Theme - Anywhere */
1132
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1133
+ --foreground-neutral-skeleton-element: #e0e0e0;
1134
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1411
1135
  --foreground-spectrum-blue: #143778;
1412
- /* Foreground/Spectrum/green - Theme - Anywhere */
1136
+ /* Foreground/Spectrum/green - Theme - BRAND */
1413
1137
  --foreground-spectrum-green: #134428;
1414
- /* Foreground/Spectrum/lime - Theme - Anywhere */
1138
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1415
1139
  --foreground-spectrum-lime: #60651a;
1416
- /* Foreground/Spectrum/magenta - Theme - Anywhere */
1140
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1417
1141
  --foreground-spectrum-magenta: #63076f;
1418
- /* Foreground/Spectrum/orange - Theme - Anywhere */
1142
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1419
1143
  --foreground-spectrum-orange: #773001;
1420
- /* Foreground/Spectrum/pink - Theme - Anywhere */
1144
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1421
1145
  --foreground-spectrum-pink: #6c1240;
1422
- /* Foreground/Spectrum/purple - Theme - Anywhere */
1146
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1423
1147
  --foreground-spectrum-purple: #310077;
1424
- /* Foreground/Spectrum/red - Theme - Anywhere */
1148
+ /* Foreground/Spectrum/red - Theme - BRAND */
1425
1149
  --foreground-spectrum-red: #6c1d29;
1426
- /* Foreground/Spectrum/teal - Theme - Anywhere */
1150
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1427
1151
  --foreground-spectrum-teal: #01413c;
1428
- /* Foreground/Spectrum/yellow - Theme - Anywhere */
1152
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1429
1153
  --foreground-spectrum-yellow: #7b5e18;
1430
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1431
- --interaction-brand-disabled-opacity: #0000000f;
1432
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1433
- --interaction-brand-hover-opacity: #0000001a;
1434
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1435
- --interaction-brand-press-opacity: #00000033;
1436
- /* Interaction/hover-opacity - Theme - 3.0 */
1437
- --interaction-hover-opacity: #00000014;
1438
- /* Interaction/link-active-opacity - Theme - 3.0 */
1439
- --interaction-link-active-opacity: #0000004d;
1440
- /* Interaction/press-opacity - Theme - 3.0 */
1441
- --interaction-press-opacity: #00000029;
1442
- /* Interactions/brand-disabled-opacity - Theme - Anywhere */
1154
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1443
1155
  --interactions-brand-disabled-opacity: #0000000f;
1444
- /* Interactions/brand-hover-opacity - Theme - Anywhere */
1156
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1445
1157
  --interactions-brand-hover-opacity: #0000001a;
1446
- /* Interactions/brand-press-opacity - Theme - Anywhere */
1158
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1447
1159
  --interactions-brand-press-opacity: #00000033;
1448
- /* Interactions/hover-opacity - Theme - Anywhere */
1160
+ /* Interactions/disabled-opacity - Theme - BRAND */
1161
+ --interactions-disabled-opacity: #0000000f;
1162
+ /* Interactions/hover-opacity - Theme - BRAND */
1449
1163
  --interactions-hover-opacity: #00000014;
1450
- /* Interactions/link-active-opacity - Theme - Anywhere */
1164
+ /* Interactions/link-active-opacity - Theme - BRAND */
1451
1165
  --interactions-link-active-opacity: #0000004d;
1452
- /* Interactions/neutral-hover-opacity - Theme - Anywhere */
1166
+ /* Interactions/neutral-hover-opacity - Brand */
1167
+ /* surfaces using neutral tones */
1453
1168
  --interactions-neutral-hover-opacity: #00000014;
1454
- /* Interactions/neutral-press-opacity - Theme - Anywhere */
1169
+ /* Interactions/neutral-press-opacity - Brand */
1170
+ /* surfaces using neutral tones */
1455
1171
  --interactions-neutral-press-opacity: #00000029;
1456
- /* Interactions/press-opacity - Theme - Anywhere */
1172
+ /* Interactions/press-opacity - Theme - BRAND */
1457
1173
  --interactions-press-opacity: #00000029;
1458
- /* Interactions/primary-disabled-opacity - Theme - Anywhere */
1174
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1459
1175
  --interactions-primary-disabled-opacity: #1413461f;
1460
- /* Interactions/primary-hover-opacity - Theme - Anywhere */
1176
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1461
1177
  --interactions-primary-hover-opacity: #1413461a;
1462
- /* Interactions/primary-press-opacity - Theme - Anywhere */
1178
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1463
1179
  --interactions-primary-press-opacity: #14134633;
1464
- /* Shadow/shadow-10 - Theme - Anywhere */
1180
+ /* Shadow/shadow-10 - Theme - BRAND */
1465
1181
  --shadow-10: #0000001a;
1466
- /* Shadow/shadow-12 - Theme - Anywhere */
1182
+ /* Shadow/shadow-12 - Theme - BRAND */
1467
1183
  --shadow-12: #0000001f;
1468
- /* Shadow/shadow-15 - Theme - Anywhere */
1184
+ /* Shadow/shadow-15 - Theme - BRAND */
1469
1185
  --shadow-15: #00000026;
1470
- /* Shadow/shadow-25 - Theme - Anywhere */
1186
+ /* Shadow/shadow-25 - Theme - BRAND */
1471
1187
  --shadow-25: #00000040;
1472
- /* Shadow/shadow-32 - Theme - Anywhere */
1188
+ /* Shadow/shadow-32 - Theme - BRAND */
1473
1189
  --shadow-32: #00000052;
1474
- /* Shadow/inner-shadow - Theme - Anywhere */
1190
+ /* Shadow/inner-shadow - Brand */
1475
1191
  --shadow-inner: #ffffff;
1476
- /* Shadow/inner-shadow-100 - Theme - Anywhere */
1192
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1477
1193
  --shadow-inner-100: #ffffff;
1478
- /* Shadow/variant-01 - Theme - Anywhere */
1194
+ /* Shadow/variant-01 - Brand */
1479
1195
  --shadow-variant-01: #0000001a;
1480
- /* Shadow/variant-02 - Theme - Anywhere */
1196
+ /* Shadow/variant-02 - Brand */
1481
1197
  --shadow-variant-02: #0000001f;
1482
- /* Shadow/variant-03 - Theme - Anywhere */
1198
+ /* Shadow/variant-03 - Brand */
1483
1199
  --shadow-variant-03: #00000026;
1484
- /* Shadow/variant-04 - Theme - Anywhere */
1200
+ /* Shadow/variant-04 - Brand */
1485
1201
  --shadow-variant-04: #00000040;
1486
- /* Shadow/variant-05 - Theme - Anywhere */
1202
+ /* Shadow/variant-05 - Brand */
1487
1203
  --shadow-variant-05: #00000052;
1488
- /* Status/error - Theme - Anywhere */
1204
+ /* Status/error - Theme - BRAND */
1205
+ /* Foreground error text and icons */
1489
1206
  --status-error: #d83a52;
1490
- /* Status/information - Theme - Anywhere */
1207
+ /* Status/information - Theme - BRAND */
1491
1208
  --status-information: #276ef1;
1492
- /* Status/informational - Theme - Anywhere */
1209
+ /* Status/informational - Brand */
1210
+ /* Foreground informational text and icons */
1493
1211
  --status-informational: #276ef1;
1494
- /* Status/success - Theme - Anywhere */
1212
+ /* Status/on-error - Theme - BRAND */
1213
+ /* Foreground error text and icons */
1214
+ --status-on-error: #ffffff;
1215
+ /* Status/on-information - Theme - BRAND */
1216
+ --status-on-information: #ffffff;
1217
+ /* Status/on-informational - Brand */
1218
+ /* Foreground informational text and icons */
1219
+ --status-on-informational: #ffffff;
1220
+ /* Status/on-success - Theme - BRAND */
1221
+ /* Foreground success icons and text */
1222
+ --status-on-success: #ffffff;
1223
+ /* Status/on-warning - Theme - BRAND */
1224
+ /* Foreground warning icons */
1225
+ --status-on-warning: #141414;
1226
+ /* Status/success - Theme - BRAND */
1227
+ /* Foreground success icons and text */
1495
1228
  --status-success: #258750;
1496
- /* Status/warning - Theme - Anywhere */
1229
+ /* Status/warning - Theme - BRAND */
1230
+ /* Foreground warning icons */
1497
1231
  --status-warning: #f6bc2f;
1498
- /* Stroke/Brand/brand-primary - Theme - Anywhere */
1232
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1233
+ /* Outline variant - decorative elements such as dividers */
1499
1234
  --stroke-brand-primary: #030330;
1500
- /* Stroke/Brand/brand-primary-depth - Theme - Anywhere */
1235
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1236
+ /* Outline variant - decorative elements such as dividers */
1501
1237
  --stroke-brand-primary-depth: #030329;
1502
- /* Stroke/Brand/brand-secondary - Theme - Anywhere */
1238
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1503
1239
  --stroke-brand-secondary: #e95525;
1504
- /* Stroke/Brand/brand-secondary-depth - Theme - Anywhere */
1240
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1505
1241
  --stroke-brand-secondary-depth: #c6481f;
1506
- /* Stroke/Neutral/neutral-base - Theme - Anywhere */
1242
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1243
+ /* For control components */
1507
1244
  --stroke-neutral-base: #949494;
1508
- /* Stroke/Neutral/disabled-dark - Theme - Anywhere */
1245
+ /* Stroke/Neutral/disabled-dark - Brand */
1246
+ /* Disabled outline separating the fill and surface background */
1509
1247
  --stroke-neutral-disabled-dark: #757575;
1510
- /* Stroke/Neutral/disabled-light - Theme - Anywhere */
1248
+ /* Stroke/Neutral/disabled-light - Brand */
1249
+ /* Disabled outline separating the fill and surface background */
1511
1250
  --stroke-neutral-disabled-light: #bdbdbd;
1512
- /* Stroke/Neutral/focus - Theme - Anywhere */
1251
+ /* Stroke/Neutral/focus - Brand */
1252
+ /* Highlight focus element */
1513
1253
  --stroke-neutral-focus: #000000;
1514
- /* Stroke/Neutral/neutral-high - Theme - Anywhere */
1254
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1255
+ /* Highlight focus element */
1256
+ --stroke-neutral-focus-on-inverse: #ffffff;
1257
+ /* Stroke/Neutral/neutral-high - Brand */
1515
1258
  --stroke-neutral-high: #141414;
1516
- /* Stroke/Neutral/neutral-high-contrast - Theme - Anywhere */
1259
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1517
1260
  --stroke-neutral-high-contrast: #141414;
1518
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1519
- --stroke-neutral-interaction-disabled-dark: #48566a;
1520
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1521
- --stroke-neutral-interaction-disabled-light: #c8d6e5;
1522
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1523
- --stroke-neutral-interaction-focus: #000000;
1524
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Anywhere */
1261
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1525
1262
  --stroke-neutral-interactions-disabled-dark: #757575;
1526
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Anywhere */
1263
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1527
1264
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1528
- /* Stroke/Neutral/Interactions/focus - Theme - Anywhere */
1265
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1529
1266
  --stroke-neutral-interactions-focus: #000000;
1530
- /* Stroke/Neutral/neutral-low - Theme - Anywhere */
1267
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1268
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1269
+ /* Stroke/Neutral/neutral-low - Brand */
1270
+ /* Outline variant - decorative elements such as dividers */
1531
1271
  --stroke-neutral-low: #e0e0e0;
1532
- /* Stroke/Neutral/neutral-low-contrast - Theme - Anywhere */
1272
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1533
1273
  --stroke-neutral-low-contrast: #e0e0e0;
1534
- /* Surface/Brand/primary - Theme - Anywhere */
1274
+ /* Surface/Brand/primary - Theme - BRAND */
1535
1275
  --surface-brand-primary: #141346;
1536
- /* Surface/Brand/primary-highlight - Theme - Anywhere */
1276
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1537
1277
  --surface-brand-primary-highlight: #dcdce3;
1538
- /* Surface/Brand/secondary - Theme - Anywhere */
1278
+ /* Surface/Brand/secondary - Theme - BRAND */
1539
1279
  --surface-brand-secondary: #e95525;
1540
- /* Surface/Brand/secondary-highlight - Theme - Anywhere */
1280
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1541
1281
  --surface-brand-secondary-highlight: #fce6de;
1542
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Anywhere */
1282
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1543
1283
  --surface-neutral-interactions-dark-disabled: #d6d6d6;
1544
- /* Surface/Neutral/Interactions/light-disabled - Theme - Anywhere */
1284
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1545
1285
  --surface-neutral-interactions-light-disabled: #f5f5f5;
1546
- /* Surface/Neutral/Interactions/skeleton - Theme - Anywhere */
1547
- --surface-neutral-interactions-skeleton: #e0e0e0;
1548
- /* Surface/Neutral/inverse - Theme - Anywhere */
1286
+ /* Surface/Neutral/inverse - Brand */
1287
+ /* Inverted. Use for toasts notification & snackbars */
1549
1288
  --surface-neutral-inverse: #1f1f1f;
1550
- /* Surface/Neutral/inverse-dark - Theme - Anywhere */
1289
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1551
1290
  --surface-neutral-inverse-dark: #1f1f1f;
1552
- /* Surface/Neutral/inverse-light - Theme - Anywhere */
1291
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1553
1292
  --surface-neutral-inverse-light: #ffffff;
1554
- /* Surface/Neutral/skeleton - Theme - Anywhere */
1555
- --surface-neutral-skeleton: #e0e0e0;
1556
- /* Surface/Neutral/T1-base - Theme - Anywhere */
1293
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1557
1294
  --surface-neutral-t1-base: #ffffff;
1558
- /* Surface/Neutral/T2-lowest - Theme - Anywhere */
1295
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1559
1296
  --surface-neutral-t2-lowest: #f5f5f5;
1560
- /* Surface/Neutral/T3-low - Theme - Anywhere */
1297
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1298
+ /* Navigations, app bar etc */
1561
1299
  --surface-neutral-t3-low: #dbdbdb;
1562
- /* Surface/Neutral/T4-high - Theme - Anywhere */
1563
- --surface-neutral-t4-high: #6b6b6b;
1564
- /* Surface/Spectrum/blue - Theme - Anywhere */
1300
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1301
+ /* Navigations, app bar etc */
1302
+ --surface-neutral-t4-high: #8a8a8a;
1303
+ /* Surface/Neutral/transparent - Theme - BRAND */
1304
+ --surface-neutral-transparent: #ffffff00;
1305
+ /* Surface/Spectrum/blue - Theme - BRAND */
1565
1306
  --surface-spectrum-blue: #dfe9fd;
1566
- /* Surface/Spectrum/green - Theme - Anywhere */
1307
+ /* Surface/Spectrum/green - Theme - BRAND */
1567
1308
  --surface-spectrum-green: #deede5;
1568
- /* Surface/Spectrum/lime - Theme - Anywhere */
1309
+ /* Surface/Spectrum/lime - Theme - BRAND */
1569
1310
  --surface-spectrum-lime: #f6f7e0;
1570
- /* Surface/Spectrum/magenta - Theme - Anywhere */
1311
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1571
1312
  --surface-spectrum-magenta: #f6dbfa;
1572
- /* Surface/Spectrum/orange - Theme - Anywhere */
1313
+ /* Surface/Spectrum/orange - Theme - BRAND */
1573
1314
  --surface-spectrum-orange: #fce7d9;
1574
- /* Surface/Spectrum/pink - Theme - Anywhere */
1315
+ /* Surface/Spectrum/pink - Theme - BRAND */
1575
1316
  --surface-spectrum-pink: #f9deec;
1576
- /* Surface/Spectrum/purple - Theme - Anywhere */
1317
+ /* Surface/Spectrum/purple - Theme - BRAND */
1577
1318
  --surface-spectrum-purple: #e7d9fc;
1578
- /* Surface/Spectrum/red - Theme - Anywhere */
1319
+ /* Surface/Spectrum/red - Theme - BRAND */
1579
1320
  --surface-spectrum-red: #f9e1e5;
1580
- /* Surface/Spectrum/teal - Theme - Anywhere */
1321
+ /* Surface/Spectrum/teal - Theme - BRAND */
1581
1322
  --surface-spectrum-teal: #d9eceb;
1582
- /* Surface/Spectrum/yellow - Theme - Anywhere */
1323
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1583
1324
  --surface-spectrum-yellow: #fef5e0;
1584
- }
1585
1325
 
1326
+ @media (width >= 640px) {
1327
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1328
+ --display-regular-large: 400 64px/88px var(--typeface);
1329
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1330
+ --display-regular-large-line-height: 88px;
1331
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1332
+ --display-regular-large-size: 64px;
1333
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1334
+ --display-regular-large-style: regular;
1335
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1336
+ --display-regular-medium: 400 56px/72px var(--typeface);
1337
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1338
+ --display-regular-medium-line-height: 72px;
1339
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1340
+ --display-regular-medium-size: 56px;
1341
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1342
+ --display-regular-medium-style: regular;
1343
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1344
+ --display-regular-small: 400 48px/60px var(--typeface);
1345
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1346
+ --display-regular-small-line-height: 60px;
1347
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1348
+ --display-regular-small-size: 48px;
1349
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1350
+ --display-regular-small-style: regular;
1351
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1352
+ --display-semibold-large: 600 64px/88px var(--typeface);
1353
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1354
+ --display-semibold-large-line-height: 88px;
1355
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1356
+ --display-semibold-large-size: 64px;
1357
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1358
+ --display-semibold-large-style: 600;
1359
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1360
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1361
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1362
+ --display-semibold-medium-line-height: 72px;
1363
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1364
+ --display-semibold-medium-size: 56px;
1365
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1366
+ --display-semibold-medium-style: 600;
1367
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1368
+ --display-semibold-small: 600 48px/60px var(--typeface);
1369
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1370
+ --display-semibold-small-line-height: 60px;
1371
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1372
+ --display-semibold-small-size: 48px;
1373
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1374
+ --display-semibold-small-style: 600;
1375
+ /* Desktop/Heading/H1 */
1376
+ --heading-h1: 600 40px/48px var(--typeface);
1377
+ /* Desktop/Heading/H1 - line height */
1378
+ --heading-h1-line-height: 48px;
1379
+ /* Desktop/Heading/H1 - size */
1380
+ --heading-h1-size: 40px;
1381
+ /* Desktop/Heading/H1 - style */
1382
+ --heading-h1-style: 600;
1383
+ /* Desktop/Heading/H2 */
1384
+ --heading-h2: 600 32px/40px var(--typeface);
1385
+ /* Desktop/Heading/H2 - line height */
1386
+ --heading-h2-line-height: 40px;
1387
+ /* Desktop/Heading/H2 - size */
1388
+ --heading-h2-size: 32px;
1389
+ /* Desktop/Heading/H2 - style */
1390
+ --heading-h2-style: 600;
1391
+ /* Desktop/Heading/H3 */
1392
+ --heading-h3: 600 28px/36px var(--typeface);
1393
+ /* Desktop/Heading/H3 - line height */
1394
+ --heading-h3-line-height: 36px;
1395
+ /* Desktop/Heading/H3 - size */
1396
+ --heading-h3-size: 28px;
1397
+ /* Desktop/Heading/H3 - style */
1398
+ --heading-h3-style: 600;
1399
+ /* Desktop/Heading/H4 */
1400
+ --heading-h4: 600 24px/32px var(--typeface);
1401
+ /* Desktop/Heading/H4 - line height */
1402
+ --heading-h4-line-height: 32px;
1403
+ /* Desktop/Heading/H4 - size */
1404
+ --heading-h4-size: 24px;
1405
+ /* Desktop/Heading/H4 - style */
1406
+ --heading-h4-style: 600;
1407
+ /* Desktop/Heading/H5 */
1408
+ --heading-h5: 600 20px/28px var(--typeface);
1409
+ /* Desktop/Heading/H5 - line height */
1410
+ --heading-h5-line-height: 28px;
1411
+ /* Desktop/Heading/H5 - size */
1412
+ --heading-h5-size: 20px;
1413
+ /* Desktop/Heading/H5 - style */
1414
+ --heading-h5-style: 600;
1415
+ /* Desktop/Heading/H6 */
1416
+ --heading-h6: 500 18px/24px var(--typeface);
1417
+ /* Desktop/Heading/H6 - line height */
1418
+ --heading-h6-line-height: 24px;
1419
+ /* Desktop/Heading/H6 - size */
1420
+ --heading-h6-size: 18px;
1421
+ /* Desktop/Heading/H6 - style */
1422
+ --heading-h6-style: medium;
1423
+ /* Desktop/Subheader/Large - Headline */
1424
+ --subheader-large: 400 24px/32px var(--typeface);
1425
+ /* Desktop/Subheader/Large - Headline line height */
1426
+ --subheader-large-line-height: 32px;
1427
+ /* Desktop/Subheader/Large - Headline size */
1428
+ --subheader-large-size: 24px;
1429
+ /* Desktop/Subheader/Large - Headline style */
1430
+ --subheader-large-style: regular;
1431
+ /* Desktop/Subheader/Medium */
1432
+ --subheader-medium: 400 20px/28px var(--typeface);
1433
+ /* Desktop/Subheader/Medium - line height */
1434
+ --subheader-medium-line-height: 28px;
1435
+ /* Desktop/Subheader/Medium - size */
1436
+ --subheader-medium-size: 20px;
1437
+ /* Desktop/Subheader/Medium - style */
1438
+ --subheader-medium-style: regular;
1439
+ /* Desktop/Subheader/X-Large - Headline */
1440
+ --subheader-x-large: 400 28px/36px var(--typeface);
1441
+ /* Desktop/Subheader/X-Large - Headline line height */
1442
+ --subheader-x-large-line-height: 36px;
1443
+ /* Desktop/Subheader/X-Large - Headline size */
1444
+ --subheader-x-large-size: 28px;
1445
+ /* Desktop/Subheader/X-Large - Headline style */
1446
+ --subheader-x-large-style: regular;
1447
+ /* Desktop/Subheader/XX-Large - Headline */
1448
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1449
+ /* Desktop/Subheader/XX-Large - Headline line height */
1450
+ --subheader-xx-large-line-height: 40px;
1451
+ /* Desktop/Subheader/XX-Large - Headline size */
1452
+ --subheader-xx-large-size: 32px;
1453
+ /* Desktop/Subheader/XX-Large - Headline style */
1454
+ --subheader-xx-large-style: regular;
1455
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1456
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1457
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1458
+ --subheader-xxx-large-line-height: 48px;
1459
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1460
+ --subheader-xxx-large-size: 40px;
1461
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1462
+ --subheader-xxx-large-style: regular;
1463
+ }
1464
+ }
1465
+ /* dark theme */
1586
1466
  [data-theme='dark'] {
1587
- /* Background/base - Theme - Anywhere */
1467
+ /* Background/base - Theme - BRAND */
1588
1468
  --background-base: #1f1f1f;
1589
- /* Background/scrim - Theme - Anywhere */
1469
+ /* Background/scrim - Theme - BRAND */
1590
1470
  --background-scrim: #61616180;
1591
- /* Background/shade - Theme - Anywhere */
1471
+ /* Background/shade - Theme - BRAND */
1592
1472
  --background-shade: #292929;
1593
- /* Data visual/category-01 - Theme - Anywhere */
1473
+ /* Data visual/category-01 - Brand */
1594
1474
  --data-visual-category-01: #e6b297;
1595
- /* Data visual/category-01-highlight - Theme - Anywhere */
1475
+ /* Data visual/category-01-highlight - Brand */
1596
1476
  --data-visual-category-01-highlight: #e6b2974d;
1597
- /* Data visual/category-02 - Theme - Anywhere */
1477
+ /* Data visual/category-02 - Brand */
1598
1478
  --data-visual-category-02: #b68a79;
1599
- /* Data visual/category-02-highlight - Theme - Anywhere */
1479
+ /* Data visual/category-02-highlight - Brand */
1600
1480
  --data-visual-category-02-highlight: #b68a794d;
1601
- /* Data visual/category-03 - Theme - Anywhere */
1481
+ /* Data visual/category-03 - Brand */
1602
1482
  --data-visual-category-03: #cdbe80;
1603
- /* Data visual/category-03-highlight - Theme - Anywhere */
1483
+ /* Data visual/category-03-highlight - Brand */
1604
1484
  --data-visual-category-03-highlight: #cdbe804d;
1605
- /* Data visual/category-04 - Theme - Anywhere */
1485
+ /* Data visual/category-04 - Brand */
1606
1486
  --data-visual-category-04: #969980;
1607
- /* Data visual/category-04-highlight - Theme - Anywhere */
1487
+ /* Data visual/category-04-highlight - Brand */
1608
1488
  --data-visual-category-04-highlight: #9699804d;
1609
- /* Data visual/category-05 - Theme - Anywhere */
1489
+ /* Data visual/category-05 - Brand */
1610
1490
  --data-visual-category-05: #af9385;
1611
- /* Data visual/category-05-highlight - Theme - Anywhere */
1491
+ /* Data visual/category-05-highlight - Brand */
1612
1492
  --data-visual-category-05-highlight: #af93854d;
1613
- /* Data visual/category-06 - Theme - Anywhere */
1493
+ /* Data visual/category-06 - Brand */
1614
1494
  --data-visual-category-06: #b2b2b2;
1615
- /* Data visual/category-06-highlight - Theme - Anywhere */
1495
+ /* Data visual/category-06-highlight - Brand */
1616
1496
  --data-visual-category-06-highlight: #b2b2b24d;
1617
- /* Data visual/category-07 - Theme - Anywhere */
1497
+ /* Data visual/category-07 - Brand */
1618
1498
  --data-visual-category-07: #a98484;
1619
- /* Data visual/category-07-highlight - Theme - Anywhere */
1499
+ /* Data visual/category-07-highlight - Brand */
1620
1500
  --data-visual-category-07-highlight: #a984844d;
1621
- /* Data visual/category-1 - Theme - Anywhere */
1501
+ /* Data visual/category-1 - Theme - BRAND */
1622
1502
  --data-visual-category-1: #b68a79;
1623
- /* Data visual/category-1-highlight - Theme - Anywhere */
1503
+ /* Data visual/category-1-highlight - Theme - BRAND */
1624
1504
  --data-visual-category-1-highlight: #b68a794d;
1625
- /* Data visual/category-2 - Theme - Anywhere */
1505
+ /* Data visual/category-2 - Theme - BRAND */
1626
1506
  --data-visual-category-2: #e6b297;
1627
- /* Data visual/category-2-highlight - Theme - Anywhere */
1507
+ /* Data visual/category-2-highlight - Theme - BRAND */
1628
1508
  --data-visual-category-2-highlight: #e6b2974d;
1629
- /* Data visual/category-3 - Theme - Anywhere */
1509
+ /* Data visual/category-3 - Theme - BRAND */
1630
1510
  --data-visual-category-3: #969980;
1631
- /* Data visual/category-3-highlight - Theme - Anywhere */
1511
+ /* Data visual/category-3-highlight - Theme - BRAND */
1632
1512
  --data-visual-category-3-highlight: #9699804d;
1633
- /* Data visual/category-4 - Theme - Anywhere */
1513
+ /* Data visual/category-4 - Theme - BRAND */
1634
1514
  --data-visual-category-4: #cdbe80;
1635
- /* Data visual/category-4-highlight - Theme - Anywhere */
1515
+ /* Data visual/category-4-highlight - Theme - BRAND */
1636
1516
  --data-visual-category-4-highlight: #cdbe804d;
1637
- /* Data visual/category-5 - Theme - Anywhere */
1517
+ /* Data visual/category-5 - Theme - BRAND */
1638
1518
  --data-visual-category-5: #a98484;
1639
- /* Data visual/category-5-highlight - Theme - Anywhere */
1519
+ /* Data visual/category-5-highlight - Theme - BRAND */
1640
1520
  --data-visual-category-5-highlight: #a984844d;
1641
- /* Data visual/category-6 - Theme - Anywhere */
1521
+ /* Data visual/category-6 - Theme - BRAND */
1642
1522
  --data-visual-category-6: #b2b2b2;
1643
- /* Data visual/category-6-highlight - Theme - Anywhere */
1523
+ /* Data visual/category-6-highlight - Theme - BRAND */
1644
1524
  --data-visual-category-6-highlight: #b2b2b24d;
1645
- /* Data visual/category-7 - Theme - Anywhere */
1525
+ /* Data visual/category-7 - Theme - BRAND */
1646
1526
  --data-visual-category-7: #af9385;
1647
- /* Data visual/category-7-highlight - Theme - Anywhere */
1527
+ /* Data visual/category-7-highlight - Theme - BRAND */
1648
1528
  --data-visual-category-7-highlight: #af93854d;
1649
- /* Data visual/gradient-end - Theme - Anywhere */
1529
+ /* Data visual/gradient-end - Theme - BRAND */
1650
1530
  --data-visual-gradient-end: #1f1f1f4d;
1651
- /* Data visual/green - Theme - Anywhere */
1531
+ /* Data visual/green - Theme - BRAND */
1652
1532
  --data-visual-green: #7cb796;
1653
- /* Data visual/green-highlight - Theme - Anywhere */
1533
+ /* Data visual/green-highlight - Theme - BRAND */
1654
1534
  --data-visual-green-highlight: #0d2f1c;
1655
- /* Data visual/negative - Theme - Anywhere */
1535
+ /* Data visual/negative - Brand */
1656
1536
  --data-visual-negative: #e88997;
1657
- /* Data visual/negative-highlight - Theme - Anywhere */
1537
+ /* Data visual/negative-highlight - Brand */
1658
1538
  --data-visual-negative-highlight: #4c141d;
1659
- /* Data visual/positive - Theme - Anywhere */
1539
+ /* Data visual/positive - Brand */
1660
1540
  --data-visual-positive: #7cb796;
1661
- /* Data visual/positive-highlight - Theme - Anywhere */
1541
+ /* Data visual/positive-highlight - Brand */
1662
1542
  --data-visual-positive-highlight: #0d2f1c;
1663
- /* Data visual/red - Theme - Anywhere */
1543
+ /* Data visual/red - Theme - BRAND */
1664
1544
  --data-visual-red: #e88997;
1665
- /* Data visual/red-highlight - Theme - Anywhere */
1545
+ /* Data visual/red-highlight - Theme - BRAND */
1666
1546
  --data-visual-red-highlight: #4c141d;
1667
- /* Foreground/Brand/on-inverse-primary - Theme - Anywhere */
1547
+ /* Foreground/Brand/on-inverse-primary - Theme - BRAND */
1668
1548
  --foreground-brand-on-inverse-primary: #727190;
1669
- /* Foreground/Brand/on-inverse-secondary - Theme - Anywhere */
1549
+ /* Foreground/Brand/on-inverse-secondary - Theme - BRAND */
1670
1550
  --foreground-brand-on-inverse-secondary: #f2997c;
1671
- /* Foreground/Brand/on-brand-secondary - Theme - Anywhere */
1551
+ /* Foreground/Brand/on-light-color-secondary - Theme - BRAND */
1552
+ --foreground-brand-on-light-color-secondary: #f5b39d;
1553
+ /* Foreground/Brand/on-brand-primary - Theme - BRAND */
1554
+ /* Foreground color used on Brand's primary color (non neutral color) */
1555
+ --foreground-brand-on-primary: #ffffff;
1556
+ /* Foreground/Brand/on-brand-secondary - Theme - BRAND */
1557
+ /* Foreground color used on Brand's primary color (non neutral color) */
1672
1558
  --foreground-brand-on-secondary: #141414;
1673
- /* Foreground/Brand/brand-primary - Theme - Anywhere */
1559
+ /* Foreground/Brand/brand-primary - Theme - BRAND */
1560
+ /* Foreground text and icons that match the brand's primary color */
1674
1561
  --foreground-brand-primary: #727190;
1675
- /* Foreground/Brand/brand-primary-depth - Theme - Anywhere */
1562
+ /* Foreground/Brand/brand-primary-depth - Theme - BRAND */
1676
1563
  --foreground-brand-primary-depth: #9595ac;
1677
- /* Foreground/Brand/brand-secondary - Theme - Anywhere */
1564
+ /* Foreground/Brand/brand-secondary - Theme - BRAND */
1565
+ /* Foreground text and icons that match the brand's secondary color */
1678
1566
  --foreground-brand-secondary: #f2997c;
1679
- /* Foreground/Brand/brand-secondary-depth - Theme - Anywhere */
1567
+ /* Foreground/Brand/brand-secondary-depth - Theme - BRAND */
1680
1568
  --foreground-brand-secondary-depth: #f5b39d;
1681
- /* Foreground/Link text/default - Theme - Anywhere */
1569
+ /* Foreground/Link text/default - Theme - BRAND */
1682
1570
  --foreground-link-text-default: #7a9ee1;
1683
- /* Foreground/Link text/default-disabled - Theme - Anywhere */
1571
+ /* Foreground/Link text/default-disabled - Theme - BRAND */
1684
1572
  --foreground-link-text-default-disabled: #14387b;
1685
- /* Foreground/Link text/default-hovered - Theme - Anywhere */
1573
+ /* Foreground/Link text/default-hovered - Theme - BRAND */
1686
1574
  --foreground-link-text-default-hovered: #90afe6;
1687
- /* Foreground/Link text/default-pressed - Theme - Anywhere */
1575
+ /* Foreground/Link text/default-pressed - Theme - BRAND */
1688
1576
  --foreground-link-text-default-pressed: #a6bfeb;
1689
- /* Foreground/Link text/default-visited - Theme - Anywhere */
1577
+ /* Foreground/Link text/default-visited - Theme - BRAND */
1690
1578
  --foreground-link-text-default-visited: #af8baf;
1691
- /* Foreground/Link text/subtle-disabled - Theme - Anywhere */
1579
+ /* Foreground/Link text/subtle-disabled - Brand */
1692
1580
  --foreground-link-text-subtle-disabled: #4d4d4d;
1693
- /* Foreground/Link text/subtle-hovered - Theme - Anywhere */
1581
+ /* Foreground/Link text/subtle-hovered - Theme - BRAND */
1694
1582
  --foreground-link-text-subtle-hovered: #e6e6e6;
1695
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Anywhere */
1696
- --foreground-link-text-subtle-inversed-disabled: #424242;
1697
- /* Foreground/Link text/subtle-pressed - Theme - Anywhere */
1583
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - BRAND */
1584
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1585
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - BRAND */
1586
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1587
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1588
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1589
+ /* Foreground/Link text/subtle-pressed - Theme - BRAND */
1698
1590
  --foreground-link-text-subtle-pressed: #d1d1d1;
1699
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Anywhere */
1700
- --foreground-neutral-disabled-on-color-surface: #424242;
1701
- /* Foreground/Neutral/disabled-on-surface - Theme - Anywhere */
1591
+ /* Foreground/Neutral/disabled-on-color-surface - Theme - BRAND */
1592
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1593
+ /* Foreground/Neutral/disabled-on-surface - Theme - BRAND */
1702
1594
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1703
- /* Foreground/Neutral/on-surface - Theme - Anywhere */
1595
+ /* Foreground/Neutral/inverse-on-surface - Theme - BRAND */
1596
+ --foreground-neutral-inverse-on-surface: #fafafa;
1597
+ /* Foreground/Neutral/on-color - Theme - BRAND */
1598
+ /* Interactive controls */
1599
+ --foreground-neutral-on-color: #ffffff;
1600
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1601
+ /* Text and icons against inverse surface */
1602
+ --foreground-neutral-on-inverse-surface: #fafafa;
1603
+ /* Foreground/Neutral/on-surface - Theme - BRAND */
1604
+ /* Default foreground text and icons against any surface color */
1704
1605
  --foreground-neutral-on-surface: #fafafa;
1705
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Anywhere */
1606
+ /* Foreground/Neutral/on-surface-variant-01 - Theme - BRAND */
1607
+ /* Secondary foreground color for icons and text */
1706
1608
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1707
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Anywhere */
1609
+ /* Foreground/Neutral/on-surface-variant-02 - Theme - BRAND */
1610
+ /* Tertiary foreground color for icons and text */
1708
1611
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1709
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Anywhere */
1612
+ /* Foreground/Neutral/on-surface-variant-03 - Theme - BRAND */
1613
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1710
1614
  --foreground-neutral-on-surface-variant-03: #757575;
1711
- /* Foreground/Neutral/skeleton-element - Theme - Anywhere */
1712
- --foreground-neutral-skeleton-element: #4d4d4d;
1713
- /* Foreground/Spectrum/blue - Theme - Anywhere */
1615
+ /* Foreground/Neutral/skeleton-element - Theme - BRAND */
1616
+ --foreground-neutral-skeleton-element: #333333;
1617
+ /* Foreground/Spectrum/blue - Theme - BRAND */
1714
1618
  --foreground-spectrum-blue: #88aff7;
1715
- /* Foreground/Spectrum/green - Theme - Anywhere */
1619
+ /* Foreground/Spectrum/green - Theme - BRAND */
1716
1620
  --foreground-spectrum-green: #87bd9f;
1717
- /* Foreground/Spectrum/lime - Theme - Anywhere */
1621
+ /* Foreground/Spectrum/lime - Theme - BRAND */
1718
1622
  --foreground-spectrum-lime: #dce28f;
1719
- /* Foreground/Spectrum/magenta - Theme - Anywhere */
1623
+ /* Foreground/Spectrum/magenta - Theme - BRAND */
1720
1624
  --foreground-spectrum-magenta: #e07aed;
1721
- /* Foreground/Spectrum/orange - Theme - Anywhere */
1625
+ /* Foreground/Spectrum/orange - Theme - BRAND */
1722
1626
  --foreground-spectrum-orange: #f6a874;
1723
- /* Foreground/Spectrum/pink - Theme - Anywhere */
1627
+ /* Foreground/Spectrum/pink - Theme - BRAND */
1724
1628
  --foreground-spectrum-pink: #ea86b9;
1725
- /* Foreground/Spectrum/purple - Theme - Anywhere */
1629
+ /* Foreground/Spectrum/purple - Theme - BRAND */
1726
1630
  --foreground-spectrum-purple: #c8a6f9;
1727
- /* Foreground/Spectrum/red - Theme - Anywhere */
1631
+ /* Foreground/Spectrum/red - Theme - BRAND */
1728
1632
  --foreground-spectrum-red: #ea93a0;
1729
- /* Foreground/Spectrum/teal - Theme - Anywhere */
1633
+ /* Foreground/Spectrum/teal - Theme - BRAND */
1730
1634
  --foreground-spectrum-teal: #74bbb4;
1731
- /* Foreground/Spectrum/yellow - Theme - Anywhere */
1635
+ /* Foreground/Spectrum/yellow - Theme - BRAND */
1732
1636
  --foreground-spectrum-yellow: #fada8d;
1733
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1734
- --interaction-brand-disabled-opacity: #ffffff0f;
1735
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1736
- --interaction-brand-hover-opacity: #ffffff1a;
1737
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1738
- --interaction-brand-press-opacity: #ffffff33;
1739
- /* Interaction/hover-opacity - Theme - 3.0 */
1740
- --interaction-hover-opacity: #ffffff14;
1741
- /* Interaction/link-active-opacity - Theme - 3.0 */
1742
- --interaction-link-active-opacity: #ffffff4d;
1743
- /* Interaction/press-opacity - Theme - 3.0 */
1744
- --interaction-press-opacity: #ffffff29;
1745
- /* Interactions/brand-disabled-opacity - Theme - Anywhere */
1637
+ /* Interactions/brand-disabled-opacity - Theme - BRAND */
1746
1638
  --interactions-brand-disabled-opacity: #ffffff0f;
1747
- /* Interactions/brand-hover-opacity - Theme - Anywhere */
1639
+ /* Interactions/brand-hover-opacity - Theme - BRAND */
1748
1640
  --interactions-brand-hover-opacity: #ffffff1a;
1749
- /* Interactions/brand-press-opacity - Theme - Anywhere */
1641
+ /* Interactions/brand-press-opacity - Theme - BRAND */
1750
1642
  --interactions-brand-press-opacity: #ffffff33;
1751
- /* Interactions/hover-opacity - Theme - Anywhere */
1643
+ /* Interactions/disabled-opacity - Theme - BRAND */
1644
+ --interactions-disabled-opacity: #0000000f;
1645
+ /* Interactions/hover-opacity - Theme - BRAND */
1752
1646
  --interactions-hover-opacity: #ffffff14;
1753
- /* Interactions/link-active-opacity - Theme - Anywhere */
1647
+ /* Interactions/link-active-opacity - Theme - BRAND */
1754
1648
  --interactions-link-active-opacity: #ffffff4d;
1755
- /* Interactions/neutral-hover-opacity - Theme - Anywhere */
1649
+ /* Interactions/neutral-hover-opacity - Brand */
1650
+ /* surfaces using neutral tones */
1756
1651
  --interactions-neutral-hover-opacity: #ffffff14;
1757
- /* Interactions/neutral-press-opacity - Theme - Anywhere */
1652
+ /* Interactions/neutral-press-opacity - Brand */
1653
+ /* surfaces using neutral tones */
1758
1654
  --interactions-neutral-press-opacity: #ffffff29;
1759
- /* Interactions/press-opacity - Theme - Anywhere */
1655
+ /* Interactions/press-opacity - Theme - BRAND */
1760
1656
  --interactions-press-opacity: #ffffff29;
1761
- /* Interactions/primary-disabled-opacity - Theme - Anywhere */
1657
+ /* Interactions/primary-disabled-opacity - Theme - BRAND */
1762
1658
  --interactions-primary-disabled-opacity: #7271901f;
1763
- /* Interactions/primary-hover-opacity - Theme - Anywhere */
1659
+ /* Interactions/primary-hover-opacity - Theme - BRAND */
1764
1660
  --interactions-primary-hover-opacity: #7271901a;
1765
- /* Interactions/primary-press-opacity - Theme - Anywhere */
1661
+ /* Interactions/primary-press-opacity - Theme - BRAND */
1766
1662
  --interactions-primary-press-opacity: #72719033;
1767
- /* Shadow/shadow-10 - Theme - Anywhere */
1663
+ /* Shadow/shadow-10 - Theme - BRAND */
1768
1664
  --shadow-10: #6161611a;
1769
- /* Shadow/shadow-12 - Theme - Anywhere */
1665
+ /* Shadow/shadow-12 - Theme - BRAND */
1770
1666
  --shadow-12: #6161611f;
1771
- /* Shadow/shadow-15 - Theme - Anywhere */
1667
+ /* Shadow/shadow-15 - Theme - BRAND */
1772
1668
  --shadow-15: #61616126;
1773
- /* Shadow/shadow-25 - Theme - Anywhere */
1669
+ /* Shadow/shadow-25 - Theme - BRAND */
1774
1670
  --shadow-25: #61616140;
1775
- /* Shadow/shadow-32 - Theme - Anywhere */
1671
+ /* Shadow/shadow-32 - Theme - BRAND */
1776
1672
  --shadow-32: #61616152;
1777
- /* Shadow/inner-shadow - Theme - Anywhere */
1673
+ /* Shadow/inner-shadow - Brand */
1778
1674
  --shadow-inner: #000000;
1779
- /* Shadow/inner-shadow-100 - Theme - Anywhere */
1675
+ /* Shadow/inner-shadow-100 - Theme - BRAND */
1780
1676
  --shadow-inner-100: #000000;
1781
- /* Shadow/variant-01 - Theme - Anywhere */
1677
+ /* Shadow/variant-01 - Brand */
1782
1678
  --shadow-variant-01: #6161611a;
1783
- /* Shadow/variant-02 - Theme - Anywhere */
1679
+ /* Shadow/variant-02 - Brand */
1784
1680
  --shadow-variant-02: #6161611f;
1785
- /* Shadow/variant-03 - Theme - Anywhere */
1681
+ /* Shadow/variant-03 - Brand */
1786
1682
  --shadow-variant-03: #61616126;
1787
- /* Shadow/variant-04 - Theme - Anywhere */
1683
+ /* Shadow/variant-04 - Brand */
1788
1684
  --shadow-variant-04: #61616140;
1789
- /* Shadow/variant-05 - Theme - Anywhere */
1685
+ /* Shadow/variant-05 - Brand */
1790
1686
  --shadow-variant-05: #61616152;
1791
- /* Status/error - Theme - Anywhere */
1687
+ /* Status/error - Theme - BRAND */
1688
+ /* Foreground error text and icons */
1792
1689
  --status-error: #e26b7d;
1793
- /* Status/information - Theme - Anywhere */
1690
+ /* Status/information - Theme - BRAND */
1794
1691
  --status-information: #5d92f5;
1795
- /* Status/informational - Theme - Anywhere */
1692
+ /* Status/informational - Brand */
1693
+ /* Foreground informational text and icons */
1796
1694
  --status-informational: #5d92f5;
1797
- /* Status/success - Theme - Anywhere */
1695
+ /* Status/on-error - Theme - BRAND */
1696
+ /* Foreground error text and icons */
1697
+ --status-on-error: #ffffff;
1698
+ /* Status/on-information - Theme - BRAND */
1699
+ --status-on-information: #ffffff;
1700
+ /* Status/on-informational - Brand */
1701
+ /* Foreground informational text and icons */
1702
+ --status-on-informational: #ffffff;
1703
+ /* Status/on-success - Theme - BRAND */
1704
+ /* Foreground success icons and text */
1705
+ --status-on-success: #ffffff;
1706
+ /* Status/on-warning - Theme - BRAND */
1707
+ /* Foreground warning icons */
1708
+ --status-on-warning: #141414;
1709
+ /* Status/success - Theme - BRAND */
1710
+ /* Foreground success icons and text */
1798
1711
  --status-success: #519f73;
1799
- /* Status/warning - Theme - Anywhere */
1712
+ /* Status/warning - Theme - BRAND */
1713
+ /* Foreground warning icons */
1800
1714
  --status-warning: #f8cd63;
1801
- /* Stroke/Brand/brand-primary - Theme - Anywhere */
1715
+ /* Stroke/Brand/brand-primary - Theme - BRAND */
1716
+ /* Outline variant - decorative elements such as dividers */
1802
1717
  --stroke-brand-primary: #727190;
1803
- /* Stroke/Brand/brand-primary-depth - Theme - Anywhere */
1718
+ /* Stroke/Brand/brand-primary-depth - Theme - BRAND */
1719
+ /* Outline variant - decorative elements such as dividers */
1804
1720
  --stroke-brand-primary-depth: #9595ac;
1805
- /* Stroke/Brand/brand-secondary - Theme - Anywhere */
1721
+ /* Stroke/Brand/brand-secondary - Theme - BRAND */
1806
1722
  --stroke-brand-secondary: #f2997c;
1807
- /* Stroke/Brand/brand-secondary-depth - Theme - Anywhere */
1723
+ /* Stroke/Brand/brand-secondary-depth - Theme - BRAND */
1808
1724
  --stroke-brand-secondary-depth: #f5b39d;
1809
- /* Stroke/Neutral/neutral-base - Theme - Anywhere */
1725
+ /* Stroke/Neutral/neutral-base - Theme - BRAND */
1726
+ /* For control components */
1810
1727
  --stroke-neutral-base: #6b6b6b;
1811
- /* Stroke/Neutral/disabled-dark - Theme - Anywhere */
1812
- --stroke-neutral-disabled-dark: #424242;
1813
- /* Stroke/Neutral/disabled-light - Theme - Anywhere */
1728
+ /* Stroke/Neutral/disabled-dark - Brand */
1729
+ /* Disabled outline separating the fill and surface background */
1730
+ --stroke-neutral-disabled-dark: #3d3d3d;
1731
+ /* Stroke/Neutral/disabled-light - Brand */
1732
+ /* Disabled outline separating the fill and surface background */
1814
1733
  --stroke-neutral-disabled-light: #4d4d4d;
1815
- /* Stroke/Neutral/focus - Theme - Anywhere */
1734
+ /* Stroke/Neutral/focus - Brand */
1735
+ /* Highlight focus element */
1816
1736
  --stroke-neutral-focus: #ffffff;
1817
- /* Stroke/Neutral/neutral-high - Theme - Anywhere */
1737
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1738
+ /* Highlight focus element */
1739
+ --stroke-neutral-focus-on-inverse: #ffffff;
1740
+ /* Stroke/Neutral/neutral-high - Brand */
1818
1741
  --stroke-neutral-high: #fafafa;
1819
- /* Stroke/Neutral/neutral-high-contrast - Theme - Anywhere */
1742
+ /* Stroke/Neutral/neutral-high-contrast - Theme - BRAND */
1820
1743
  --stroke-neutral-high-contrast: #fafafa;
1821
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1822
- --stroke-neutral-interaction-disabled-dark: #b1c0d2;
1823
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1824
- --stroke-neutral-interaction-disabled-light: #323b49;
1825
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1826
- --stroke-neutral-interaction-focus: #ffffff;
1827
- /* Stroke/Neutral/Interactions/disabled-dark - Theme - Anywhere */
1828
- --stroke-neutral-interactions-disabled-dark: #424242;
1829
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Anywhere */
1744
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - BRAND */
1745
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1746
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - BRAND */
1830
1747
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1831
- /* Stroke/Neutral/Interactions/focus - Theme - Anywhere */
1748
+ /* Stroke/Neutral/Interactions/focus - Theme - BRAND */
1832
1749
  --stroke-neutral-interactions-focus: #ffffff;
1833
- /* Stroke/Neutral/neutral-low - Theme - Anywhere */
1750
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - BRAND */
1751
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1752
+ /* Stroke/Neutral/neutral-low - Brand */
1753
+ /* Outline variant - decorative elements such as dividers */
1834
1754
  --stroke-neutral-low: #4d4d4d;
1835
- /* Stroke/Neutral/neutral-low-contrast - Theme - Anywhere */
1755
+ /* Stroke/Neutral/neutral-low-contrast - Theme - BRAND */
1836
1756
  --stroke-neutral-low-contrast: #4d4d4d;
1837
- /* Surface/Brand/primary - Theme - Anywhere */
1757
+ /* Surface/Brand/primary - Theme - BRAND */
1838
1758
  --surface-brand-primary: #727190;
1839
- /* Surface/Brand/primary-highlight - Theme - Anywhere */
1759
+ /* Surface/Brand/primary-highlight - Theme - BRAND */
1840
1760
  --surface-brand-primary-highlight: #050512;
1841
- /* Surface/Brand/secondary - Theme - Anywhere */
1761
+ /* Surface/Brand/secondary - Theme - BRAND */
1842
1762
  --surface-brand-secondary: #f2997c;
1843
- /* Surface/Brand/secondary-highlight - Theme - Anywhere */
1763
+ /* Surface/Brand/secondary-highlight - Theme - BRAND */
1844
1764
  --surface-brand-secondary-highlight: #3a1509;
1845
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Anywhere */
1765
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - BRAND */
1846
1766
  --surface-neutral-interactions-dark-disabled: #474747;
1847
- /* Surface/Neutral/Interactions/light-disabled - Theme - Anywhere */
1767
+ /* Surface/Neutral/Interactions/light-disabled - Theme - BRAND */
1848
1768
  --surface-neutral-interactions-light-disabled: #292929;
1849
- /* Surface/Neutral/Interactions/skeleton - Theme - Anywhere */
1850
- --surface-neutral-interactions-skeleton: #333333;
1851
- /* Surface/Neutral/inverse - Theme - Anywhere */
1769
+ /* Surface/Neutral/inverse - Brand */
1770
+ /* Inverted. Use for toasts notification & snackbars */
1852
1771
  --surface-neutral-inverse: #383838;
1853
- /* Surface/Neutral/inverse-dark - Theme - Anywhere */
1772
+ /* Surface/Neutral/inverse-dark - Theme - BRAND */
1854
1773
  --surface-neutral-inverse-dark: #383838;
1855
- /* Surface/Neutral/inverse-light - Theme - Anywhere */
1774
+ /* Surface/Neutral/inverse-light - Theme - BRAND */
1856
1775
  --surface-neutral-inverse-light: #575757;
1857
- /* Surface/Neutral/skeleton - Theme - Anywhere */
1858
- --surface-neutral-skeleton: #333333;
1859
- /* Surface/Neutral/T1-base - Theme - Anywhere */
1776
+ /* Surface/Neutral/T1-base - Theme - BRAND */
1860
1777
  --surface-neutral-t1-base: #1f1f1f;
1861
- /* Surface/Neutral/T2-lowest - Theme - Anywhere */
1778
+ /* Surface/Neutral/T2-lowest - Theme - BRAND */
1862
1779
  --surface-neutral-t2-lowest: #2e2e2e;
1863
- /* Surface/Neutral/T3-low - Theme - Anywhere */
1780
+ /* Surface/Neutral/T3-low - Theme - BRAND */
1781
+ /* Navigations, app bar etc */
1864
1782
  --surface-neutral-t3-low: #383838;
1865
- /* Surface/Neutral/T4-high - Theme - Anywhere */
1866
- --surface-neutral-t4-high: #474747;
1867
- /* Surface/Spectrum/blue - Theme - Anywhere */
1783
+ /* Surface/Neutral/T4-high - Theme - BRAND */
1784
+ /* Navigations, app bar etc */
1785
+ --surface-neutral-t4-high: #7a7a7a;
1786
+ /* Surface/Neutral/transparent - Theme - BRAND */
1787
+ --surface-neutral-transparent: #ffffff00;
1788
+ /* Surface/Spectrum/blue - Theme - BRAND */
1868
1789
  --surface-spectrum-blue: #0e2754;
1869
- /* Surface/Spectrum/green - Theme - Anywhere */
1790
+ /* Surface/Spectrum/green - Theme - BRAND */
1870
1791
  --surface-spectrum-green: #0d2f1c;
1871
- /* Surface/Spectrum/lime - Theme - Anywhere */
1792
+ /* Surface/Spectrum/lime - Theme - BRAND */
1872
1793
  --surface-spectrum-lime: #434712;
1873
- /* Surface/Spectrum/magenta - Theme - Anywhere */
1794
+ /* Surface/Spectrum/magenta - Theme - BRAND */
1874
1795
  --surface-spectrum-magenta: #45054e;
1875
- /* Surface/Spectrum/orange - Theme - Anywhere */
1796
+ /* Surface/Spectrum/orange - Theme - BRAND */
1876
1797
  --surface-spectrum-orange: #532201;
1877
- /* Surface/Spectrum/pink - Theme - Anywhere */
1798
+ /* Surface/Spectrum/pink - Theme - BRAND */
1878
1799
  --surface-spectrum-pink: #4c0c2d;
1879
- /* Surface/Spectrum/purple - Theme - Anywhere */
1800
+ /* Surface/Spectrum/purple - Theme - BRAND */
1880
1801
  --surface-spectrum-purple: #220053;
1881
- /* Surface/Spectrum/red - Theme - Anywhere */
1802
+ /* Surface/Spectrum/red - Theme - BRAND */
1882
1803
  --surface-spectrum-red: #4c141d;
1883
- /* Surface/Spectrum/teal - Theme - Anywhere */
1804
+ /* Surface/Spectrum/teal - Theme - BRAND */
1884
1805
  --surface-spectrum-teal: #012e2a;
1885
- /* Surface/Spectrum/yellow - Theme - Anywhere */
1806
+ /* Surface/Spectrum/yellow - Theme - BRAND */
1886
1807
  --surface-spectrum-yellow: #564210;
1887
1808
  }