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