@bspk/ui 1.3.30 → 1.4.1

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