@bspk/ui 1.3.29 → 1.4.0

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