@bspk/ui 1.3.29 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/build.ts +1 -2
  2. package/dist/components/Button/Button.js +1 -1
  3. package/dist/components/Button/Button.js.map +1 -1
  4. package/dist/components/InputNumber/InputNumber.js +16 -6
  5. package/dist/components/InputNumber/InputNumber.js.map +1 -1
  6. package/dist/components/InputPhone/InputPhone.js +1 -5
  7. package/dist/components/InputPhone/InputPhone.js.map +1 -1
  8. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.d.ts +11 -0
  9. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js +14 -0
  10. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js.map +1 -0
  11. package/dist/components/StylesProviderAgentWorkplace/index.d.ts +1 -0
  12. package/dist/components/StylesProviderAgentWorkplace/index.js +2 -0
  13. package/dist/components/StylesProviderAgentWorkplace/index.js.map +1 -0
  14. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.d.ts +11 -0
  15. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js +14 -0
  16. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js.map +1 -0
  17. package/dist/components/StylesProviderBrokerWorkplace/index.d.ts +1 -0
  18. package/dist/components/StylesProviderBrokerWorkplace/index.js +2 -0
  19. package/dist/components/StylesProviderBrokerWorkplace/index.js.map +1 -0
  20. package/dist/components/StylesProviderDemo/brandsCss.js +10 -9
  21. package/dist/components/StylesProviderDemo/brandsCss.js.map +1 -1
  22. package/dist/components/StylesProviderDemo/exampleCss.js +5 -5
  23. package/dist/components/StylesProviderDemo/exampleCss.js.map +1 -1
  24. package/dist/components/Table/Table.js +1 -1
  25. package/dist/components/Table/Table.js.map +1 -1
  26. package/dist/styles/agent-workplace.css +1794 -0
  27. package/dist/styles/{denali-boss.css.js → agent-workplace.css.js} +763 -848
  28. package/dist/styles/anywhere.css +569 -654
  29. package/dist/styles/anywhere.css.js +569 -654
  30. package/dist/styles/better-homes-gardens.css +622 -719
  31. package/dist/styles/better-homes-gardens.css.js +622 -719
  32. package/dist/styles/broker-workplace.css +1794 -0
  33. package/dist/styles/broker-workplace.css.js +1799 -0
  34. package/dist/styles/cartus.css +541 -638
  35. package/dist/styles/cartus.css.js +541 -638
  36. package/dist/styles/century-21.css +570 -663
  37. package/dist/styles/century-21.css.js +570 -663
  38. package/dist/styles/coldwell-banker.css +534 -631
  39. package/dist/styles/coldwell-banker.css.js +534 -631
  40. package/dist/styles/corcoran.css +536 -637
  41. package/dist/styles/corcoran.css.js +536 -637
  42. package/dist/styles/era.css +546 -641
  43. package/dist/styles/era.css.js +546 -641
  44. package/dist/styles/example.css +1898 -0
  45. package/dist/styles/example.css.js +1903 -0
  46. package/dist/styles/sothebys.css +543 -638
  47. package/dist/styles/sothebys.css.js +543 -638
  48. package/dist/types/common.d.ts +2 -1
  49. package/dist/types/common.js.map +1 -1
  50. package/package.json +7 -47
  51. package/src/components/Button/Button.tsx +1 -1
  52. package/src/components/InputNumber/InputNumber.tsx +35 -11
  53. package/src/components/InputPhone/InputPhone.tsx +1 -8
  54. package/src/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.tsx +15 -0
  55. package/src/components/StylesProviderAgentWorkplace/index.tsx +1 -0
  56. package/src/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.tsx +15 -0
  57. package/src/components/StylesProviderBrokerWorkplace/index.tsx +1 -0
  58. package/src/components/StylesProviderDemo/brandsCss.ts +13 -10
  59. package/src/components/StylesProviderDemo/exampleCss.ts +5 -5
  60. package/src/components/Table/Table.tsx +1 -1
  61. package/{dist/styles/denali-boss.css → src/styles/example.css} +401 -384
  62. package/src/types/common.ts +2 -10
  63. package/dist/components/InputNumber/IncrementButton.d.ts +0 -17
  64. package/dist/components/InputNumber/IncrementButton.js +0 -17
  65. package/dist/components/InputNumber/IncrementButton.js.map +0 -1
  66. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.d.ts +0 -11
  67. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js +0 -14
  68. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js.map +0 -1
  69. package/dist/components/StylesProviderDenaliBoss/index.d.ts +0 -1
  70. package/dist/components/StylesProviderDenaliBoss/index.js +0 -2
  71. package/dist/components/StylesProviderDenaliBoss/index.js.map +0 -1
  72. package/dist/constants/brands.d.ts +0 -7
  73. package/dist/constants/brands.js +0 -43
  74. package/dist/constants/brands.js.map +0 -1
  75. package/src/components/InputNumber/IncrementButton.tsx +0 -41
  76. package/src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx +0 -15
  77. package/src/components/StylesProviderDenaliBoss/index.tsx +0 -1
  78. package/src/constants/brands.ts +0 -49
@@ -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 {
@@ -14,177 +14,37 @@ body {
14
14
  /* Colors/Brands/Better Homes & Gardens/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) */
@@ -597,12 +461,8 @@ body {
597
461
  --corner-radius-80: 8px;
598
462
  /* Corner radius/circular - Global (primitives) */
599
463
  --corner-radius-circular: 999px;
600
- /* Corner radius/None - Global (primitives) */
601
- --corner-radius-none: 0;
602
464
  /* Colors/Brands/Better Homes & Gardens/Dark Grey - Global (primitives) */
603
465
  --dark-grey: #636466;
604
- /* Data visual/category-1 - Theme - Better Home & Garden */
605
- --data-visual-category-1: #0a466c;
606
466
  /* East - navigation rails, drawers, sheets */
607
467
  --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
608
468
  /* Float */
@@ -617,24 +477,10 @@ body {
617
477
  --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
618
478
  /* West - side sheets */
619
479
  --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;
480
+ /* Foreground/AI-powered/blue - Theme - Better Homes & Gardens */
481
+ --foreground-ai-powered-blue: #000000;
482
+ /* Foreground/AI-powered/pink - Theme - Better Homes & Gardens */
483
+ --foreground-ai-powered-pink: #000000;
638
484
  /* Interactions/opacity-black-10 - Global (primitives) */
639
485
  --interactions-opacity-black-10: #0000001a;
640
486
  /* Interactions/opacity-black-16 - Global (primitives) */
@@ -680,36 +526,36 @@ body {
680
526
  /* Colors/Brands/Better Homes & Gardens/Interactions/primary-light-opacity-8 - Global (primitives) */
681
527
  --interactions-primary-light-opacity-8: #27862714;
682
528
  /* 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 */
529
+ --labels-base: 500 16px/24px var(--typeface);
530
+ /* Labels/Base - line height */
531
+ --labels-base-line-height: 24px;
532
+ /* Labels/Base - size */
687
533
  --labels-base-size: 16px;
688
- /* Labels/Base - style */
534
+ /* Labels/Base - style */
689
535
  --labels-base-style: medium;
690
536
  /* 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 */
537
+ --labels-large: 500 18px/28px var(--typeface);
538
+ /* Labels/Large - line height */
539
+ --labels-large-line-height: 28px;
540
+ /* Labels/Large - size */
695
541
  --labels-large-size: 18px;
696
- /* Labels/Large - style */
542
+ /* Labels/Large - style */
697
543
  --labels-large-style: medium;
698
544
  /* Labels/Small */
699
545
  --labels-small: 500 14px/20px var(--typeface);
700
- /* Labels/Small - line height */
546
+ /* Labels/Small - line height */
701
547
  --labels-small-line-height: 20px;
702
- /* Labels/Small - size */
548
+ /* Labels/Small - size */
703
549
  --labels-small-size: 14px;
704
- /* Labels/Small - style */
550
+ /* Labels/Small - style */
705
551
  --labels-small-style: medium;
706
552
  /* Labels/X-Small */
707
553
  --labels-x-small: 500 12px/16px var(--typeface);
708
- /* Labels/X-Small - line height */
554
+ /* Labels/X-Small - line height */
709
555
  --labels-x-small-line-height: 16px;
710
- /* Labels/X-Small - size */
556
+ /* Labels/X-Small - size */
711
557
  --labels-x-small-size: 12px;
712
- /* Labels/X-Small - style */
558
+ /* Labels/X-Small - style */
713
559
  --labels-x-small-style: medium;
714
560
  /* Colors/Brands/Better Homes & Gardens/Light Blue - Global (primitives) */
715
561
  --light-blue: #a4c5d6;
@@ -733,8 +579,6 @@ body {
733
579
  --radius-lg: 12px;
734
580
  /* Radius/md - Borders */
735
581
  --radius-md: 8px;
736
- /* Radius/none - Borders */
737
- --radius-none: 0;
738
582
  /* Radius/sm - Borders */
739
583
  --radius-sm: 4px;
740
584
  /* Radius/xlg - Borders */
@@ -829,8 +673,6 @@ body {
829
673
  --spacing-sizing-24: 148px;
830
674
  /* Spacing/sizing-25 - Spacing & Sizing */
831
675
  --spacing-sizing-25: 152px;
832
- /* Spacing/sizing-none - Spacing & Sizing */
833
- --spacing-sizing-none: 0;
834
676
  /* Spacings/1040 - Global (primitives) */
835
677
  --spacings-1040: 104px;
836
678
  /* Spacings/120 - Global (primitives) */
@@ -881,34 +723,22 @@ body {
881
723
  --spacings-800: 80px;
882
724
  /* Spacings/960 - Global (primitives) */
883
725
  --spacings-960: 96px;
884
- /* Spacings/None - Global (primitives) */
885
- --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;
900
- /* Stroke/none - Borders */
901
- --stroke-none: 0;
726
+ /* Stroke/AI-powered/blue - Theme - Better Homes & Gardens */
727
+ --stroke-ai-powered-blue: #000000;
728
+ /* Stroke/AI-powered/pink - Theme - Better Homes & Gardens */
729
+ --stroke-ai-powered-pink: #000000;
902
730
  /* Stroke/thick - Borders */
903
731
  --stroke-thick: 2px;
904
732
  /* Stroke/thicker - Borders */
905
733
  --stroke-thicker: 4px;
906
734
  /* Stroke/thin - Borders */
907
735
  --stroke-thin: 1px;
908
- /* Surface/Neutral/transparent - Theme - Better Home & Garden */
909
- --surface-neutral-transparent: #ffffff00;
736
+ /* Surface/AI-powered/blue - Theme - Better Homes & Gardens */
737
+ --surface-ai-powered-blue: #000000;
738
+ /* Surface/AI-powered/pink - Theme - Better Homes & Gardens */
739
+ --surface-ai-powered-pink: #000000;
910
740
  /* Typeface - Brand */
911
- --typeface: 'Work Sans', sans-serif;
741
+ --typeface: 'Work Sans';
912
742
  /* Typography/Line-height/lh-1 - Global (primitives) */
913
743
  --typography-line-height-lh-1: 16px;
914
744
  /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -972,29 +802,29 @@ body {
972
802
  /* Typography/Size/xxxlg - Global (primitives) */
973
803
  --typography-size-xxxlg: 40px;
974
804
  /* Typography/Typeface/Arial - Global (primitives) */
975
- --typography-typeface-arial: 'Arial', sans-serif;
805
+ --typography-typeface-arial: 'Arial';
976
806
  /* Typography/Typeface/Geist - Global (primitives) */
977
- --typography-typeface-geist: 'Geist', sans-serif;
807
+ --typography-typeface-geist: 'Geist';
978
808
  /* Typography/Typeface/Helvetica - Global (primitives) */
979
- --typography-typeface-helvetica: 'Helvetica', sans-serif;
809
+ --typography-typeface-helvetica: 'Helvetica';
980
810
  /* Typography/Typeface/Inter - Global (primitives) */
981
- --typography-typeface-inter: 'Inter', sans-serif;
811
+ --typography-typeface-inter: 'Inter';
982
812
  /* Typography/Typeface/Lato - Global (primitives) */
983
- --typography-typeface-lato: 'Lato', sans-serif;
813
+ --typography-typeface-lato: 'Lato';
984
814
  /* Typography/Typeface/Manrope - Global (primitives) */
985
- --typography-typeface-manrope: 'Manrope', sans-serif;
815
+ --typography-typeface-manrope: 'Manrope';
986
816
  /* Typography/Typeface/Open Sans - Global (primitives) */
987
- --typography-typeface-open-sans: 'Open Sans', sans-serif;
817
+ --typography-typeface-open-sans: 'Open Sans';
988
818
  /* Typography/Typeface/Red Hat Text - Global (primitives) */
989
- --typography-typeface-red-hat-text: 'Red Hat Text', sans-serif;
819
+ --typography-typeface-red-hat-text: 'Red Hat Text';
990
820
  /* Typography/Typeface/Roboto - Global (primitives) */
991
- --typography-typeface-roboto: 'Roboto', sans-serif;
821
+ --typography-typeface-roboto: 'Roboto';
992
822
  /* Typography/Typeface/SF Pro - Global (primitives) */
993
- --typography-typeface-sf-pro: 'SF Pro', sans-serif;
823
+ --typography-typeface-sf-pro: 'SF Pro';
994
824
  /* Typography/Typeface/Typold - Global (primitives) */
995
- --typography-typeface-typold: 'Typold', sans-serif;
825
+ --typography-typeface-typold: 'Typold';
996
826
  /* Typography/Typeface/Work Sans - Global (primitives) */
997
- --typography-typeface-work-sans: 'Work Sans', sans-serif;
827
+ --typography-typeface-work-sans: 'Work Sans';
998
828
  /* Typography/Weight/300 - Global (primitives) */
999
829
  --typography-weight-300: 300;
1000
830
  /* Typography/Weight/400 - Global (primitives) */
@@ -1007,52 +837,52 @@ body {
1007
837
  --yellow: #fab840;
1008
838
  /* Mobile/Display/Regular/Large */
1009
839
  --display-regular-large: 400 56px/72px var(--typeface);
1010
- /* Mobile/Display/Regular/Large - line height */
840
+ /* Mobile/Display/Regular/Large - line height */
1011
841
  --display-regular-large-line-height: 72px;
1012
- /* Mobile/Display/Regular/Large - size */
842
+ /* Mobile/Display/Regular/Large - size */
1013
843
  --display-regular-large-size: 56px;
1014
- /* Mobile/Display/Regular/Large - style */
844
+ /* Mobile/Display/Regular/Large - style */
1015
845
  --display-regular-large-style: regular;
1016
846
  /* Mobile/Display/Regular/Medium */
1017
847
  --display-regular-medium: 400 48px/60px var(--typeface);
1018
- /* Mobile/Display/Regular/Medium - line height */
848
+ /* Mobile/Display/Regular/Medium - line height */
1019
849
  --display-regular-medium-line-height: 60px;
1020
- /* Mobile/Display/Regular/Medium - size */
850
+ /* Mobile/Display/Regular/Medium - size */
1021
851
  --display-regular-medium-size: 48px;
1022
- /* Mobile/Display/Regular/Medium - style */
852
+ /* Mobile/Display/Regular/Medium - style */
1023
853
  --display-regular-medium-style: regular;
1024
854
  /* Mobile/Display/Regular/Small */
1025
855
  --display-regular-small: 400 40px/48px var(--typeface);
1026
- /* Mobile/Display/Regular/Small - line height */
856
+ /* Mobile/Display/Regular/Small - line height */
1027
857
  --display-regular-small-line-height: 48px;
1028
- /* Mobile/Display/Regular/Small - size */
858
+ /* Mobile/Display/Regular/Small - size */
1029
859
  --display-regular-small-size: 40px;
1030
- /* Mobile/Display/Regular/Small - style */
860
+ /* Mobile/Display/Regular/Small - style */
1031
861
  --display-regular-small-style: regular;
1032
862
  /* Mobile/Display/Semibold/Large */
1033
863
  --display-semibold-large: 600 56px/72px var(--typeface);
1034
- /* Mobile/Display/Semibold/Large - line height */
864
+ /* Mobile/Display/Semibold/Large - line height */
1035
865
  --display-semibold-large-line-height: 72px;
1036
- /* Mobile/Display/Semibold/Large - size */
866
+ /* Mobile/Display/Semibold/Large - size */
1037
867
  --display-semibold-large-size: 56px;
1038
- /* Mobile/Display/Semibold/Large - style */
1039
- --display-semibold-large-style: semibold;
868
+ /* Mobile/Display/Semibold/Large - style */
869
+ --display-semibold-large-style: 600;
1040
870
  /* Mobile/Display/Semibold/Medium */
1041
871
  --display-semibold-medium: 600 48px/60px var(--typeface);
1042
- /* Mobile/Display/Semibold/Medium - line height */
872
+ /* Mobile/Display/Semibold/Medium - line height */
1043
873
  --display-semibold-medium-line-height: 60px;
1044
- /* Mobile/Display/Semibold/Medium - size */
874
+ /* Mobile/Display/Semibold/Medium - size */
1045
875
  --display-semibold-medium-size: 48px;
1046
- /* Mobile/Display/Semibold/Medium - style */
1047
- --display-semibold-medium-style: semibold;
876
+ /* Mobile/Display/Semibold/Medium - style */
877
+ --display-semibold-medium-style: 600;
1048
878
  /* Mobile/Display/Semibold/Small */
1049
879
  --display-semibold-small: 600 40px/48px var(--typeface);
1050
- /* Mobile/Display/Semibold/Small - line height */
880
+ /* Mobile/Display/Semibold/Small - line height */
1051
881
  --display-semibold-small-line-height: 48px;
1052
- /* Mobile/Display/Semibold/Small - size */
882
+ /* Mobile/Display/Semibold/Small - size */
1053
883
  --display-semibold-small-size: 40px;
1054
- /* Mobile/Display/Semibold/Small - style */
1055
- --display-semibold-small-style: semibold;
884
+ /* Mobile/Display/Semibold/Small - style */
885
+ --display-semibold-small-style: 600;
1056
886
  /* Mobile/Heading/H1 - Large Headline */
1057
887
  --heading-h1: 600 32px/40px var(--typeface);
1058
888
  /* Mobile/Heading/H1 - Large Headline line height */
@@ -1060,7 +890,7 @@ body {
1060
890
  /* Mobile/Heading/H1 - Large Headline size */
1061
891
  --heading-h1-size: 32px;
1062
892
  /* Mobile/Heading/H1 - Large Headline style */
1063
- --heading-h1-style: semibold;
893
+ --heading-h1-style: 600;
1064
894
  /* Mobile/Heading/H2 - Headline */
1065
895
  --heading-h2: 600 28px/36px var(--typeface);
1066
896
  /* Mobile/Heading/H2 - Headline line height */
@@ -1068,7 +898,7 @@ body {
1068
898
  /* Mobile/Heading/H2 - Headline size */
1069
899
  --heading-h2-size: 28px;
1070
900
  /* Mobile/Heading/H2 - Headline style */
1071
- --heading-h2-style: semibold;
901
+ --heading-h2-style: 600;
1072
902
  /* Mobile/Heading/H3 - Headline */
1073
903
  --heading-h3: 600 24px/32px var(--typeface);
1074
904
  /* Mobile/Heading/H3 - Headline line height */
@@ -1076,7 +906,7 @@ body {
1076
906
  /* Mobile/Heading/H3 - Headline size */
1077
907
  --heading-h3-size: 24px;
1078
908
  /* Mobile/Heading/H3 - Headline style */
1079
- --heading-h3-style: semibold;
909
+ --heading-h3-style: 600;
1080
910
  /* Mobile/Heading/H4 - Headline */
1081
911
  --heading-h4: 600 20px/28px var(--typeface);
1082
912
  /* Mobile/Heading/H4 - Headline line height */
@@ -1084,22 +914,22 @@ body {
1084
914
  /* Mobile/Heading/H4 - Headline size */
1085
915
  --heading-h4-size: 20px;
1086
916
  /* Mobile/Heading/H4 - Headline style */
1087
- --heading-h4-style: semibold;
917
+ --heading-h4-style: 600;
1088
918
  /* Mobile/Heading/H5 */
1089
919
  --heading-h5: 600 18px/24px var(--typeface);
1090
- /* Mobile/Heading/H5 - line height */
920
+ /* Mobile/Heading/H5 - line height */
1091
921
  --heading-h5-line-height: 24px;
1092
- /* Mobile/Heading/H5 - size */
922
+ /* Mobile/Heading/H5 - size */
1093
923
  --heading-h5-size: 18px;
1094
- /* Mobile/Heading/H5 - style */
1095
- --heading-h5-style: semibold;
924
+ /* Mobile/Heading/H5 - style */
925
+ --heading-h5-style: 600;
1096
926
  /* Mobile/Heading/H6 */
1097
927
  --heading-h6: 500 16px/20px var(--typeface);
1098
- /* Mobile/Heading/H6 - line height */
928
+ /* Mobile/Heading/H6 - line height */
1099
929
  --heading-h6-line-height: 20px;
1100
- /* Mobile/Heading/H6 - size */
930
+ /* Mobile/Heading/H6 - size */
1101
931
  --heading-h6-size: 16px;
1102
- /* Mobile/Heading/H6 - style */
932
+ /* Mobile/Heading/H6 - style */
1103
933
  --heading-h6-style: medium;
1104
934
  /* Mobile/Subheader/Large - Headline */
1105
935
  --subheader-large: 400 20px/28px var(--typeface);
@@ -1141,757 +971,830 @@ body {
1141
971
  --subheader-xxx-large-size: 32px;
1142
972
  /* Mobile/Subheader/XXX-Large - Large Headline style */
1143
973
  --subheader-xxx-large-style: regular;
1144
-
1145
- @media (width >= 640px) {
1146
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1147
- --display-regular-large: 400 64px/88px var(--typeface);
1148
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1149
- --display-regular-large-line-height: 88px;
1150
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1151
- --display-regular-large-size: 64px;
1152
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1153
- --display-regular-large-style: regular;
1154
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1155
- --display-regular-medium: 400 56px/72px var(--typeface);
1156
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1157
- --display-regular-medium-line-height: 72px;
1158
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1159
- --display-regular-medium-size: 56px;
1160
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1161
- --display-regular-medium-style: regular;
1162
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1163
- --display-regular-small: 400 48px/60px var(--typeface);
1164
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1165
- --display-regular-small-line-height: 60px;
1166
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1167
- --display-regular-small-size: 48px;
1168
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1169
- --display-regular-small-style: regular;
1170
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1171
- --display-semibold-large: 600 64px/88px var(--typeface);
1172
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1173
- --display-semibold-large-line-height: 88px;
1174
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1175
- --display-semibold-large-size: 64px;
1176
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1177
- --display-semibold-large-style: semibold;
1178
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1179
- --display-semibold-medium: 600 56px/72px var(--typeface);
1180
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1181
- --display-semibold-medium-line-height: 72px;
1182
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1183
- --display-semibold-medium-size: 56px;
1184
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1185
- --display-semibold-medium-style: semibold;
1186
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1187
- --display-semibold-small: 600 48px/60px var(--typeface);
1188
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1189
- --display-semibold-small-line-height: 60px;
1190
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1191
- --display-semibold-small-size: 48px;
1192
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1193
- --display-semibold-small-style: semibold;
1194
- /* Desktop/Heading/H1 */
1195
- --heading-h1: 600 40px/48px var(--typeface);
1196
- /* Desktop/Heading/H1 - line height */
1197
- --heading-h1-line-height: 48px;
1198
- /* Desktop/Heading/H1 - size */
1199
- --heading-h1-size: 40px;
1200
- /* Desktop/Heading/H1 - style */
1201
- --heading-h1-style: semibold;
1202
- /* Desktop/Heading/H2 */
1203
- --heading-h2: 600 32px/40px var(--typeface);
1204
- /* Desktop/Heading/H2 - line height */
1205
- --heading-h2-line-height: 40px;
1206
- /* Desktop/Heading/H2 - size */
1207
- --heading-h2-size: 32px;
1208
- /* Desktop/Heading/H2 - style */
1209
- --heading-h2-style: semibold;
1210
- /* Desktop/Heading/H3 */
1211
- --heading-h3: 600 28px/36px var(--typeface);
1212
- /* Desktop/Heading/H3 - line height */
1213
- --heading-h3-line-height: 36px;
1214
- /* Desktop/Heading/H3 - size */
1215
- --heading-h3-size: 28px;
1216
- /* Desktop/Heading/H3 - style */
1217
- --heading-h3-style: semibold;
1218
- /* Desktop/Heading/H4 */
1219
- --heading-h4: 600 24px/32px var(--typeface);
1220
- /* Desktop/Heading/H4 - line height */
1221
- --heading-h4-line-height: 32px;
1222
- /* Desktop/Heading/H4 - size */
1223
- --heading-h4-size: 24px;
1224
- /* Desktop/Heading/H4 - style */
1225
- --heading-h4-style: semibold;
1226
- /* Desktop/Heading/H5 */
1227
- --heading-h5: 600 20px/28px var(--typeface);
1228
- /* Desktop/Heading/H5 - line height */
1229
- --heading-h5-line-height: 28px;
1230
- /* Desktop/Heading/H5 - size */
1231
- --heading-h5-size: 20px;
1232
- /* Desktop/Heading/H5 - style */
1233
- --heading-h5-style: semibold;
1234
- /* Desktop/Heading/H6 */
1235
- --heading-h6: 500 18px/24px var(--typeface);
1236
- /* Desktop/Heading/H6 - line height */
1237
- --heading-h6-line-height: 24px;
1238
- /* Desktop/Heading/H6 - size */
1239
- --heading-h6-size: 18px;
1240
- /* Desktop/Heading/H6 - style */
1241
- --heading-h6-style: medium;
1242
- /* Desktop/Subheader/Large - Headline */
1243
- --subheader-large: 400 24px/32px var(--typeface);
1244
- /* Desktop/Subheader/Large - Headline line height */
1245
- --subheader-large-line-height: 32px;
1246
- /* Desktop/Subheader/Large - Headline size */
1247
- --subheader-large-size: 24px;
1248
- /* Desktop/Subheader/Large - Headline style */
1249
- --subheader-large-style: regular;
1250
- /* Desktop/Subheader/Medium */
1251
- --subheader-medium: 400 20px/28px var(--typeface);
1252
- /* Desktop/Subheader/Medium - line height */
1253
- --subheader-medium-line-height: 28px;
1254
- /* Desktop/Subheader/Medium - size */
1255
- --subheader-medium-size: 20px;
1256
- /* Desktop/Subheader/Medium - style */
1257
- --subheader-medium-style: regular;
1258
- /* Desktop/Subheader/X-Large - Headline */
1259
- --subheader-x-large: 400 28px/36px var(--typeface);
1260
- /* Desktop/Subheader/X-Large - Headline line height */
1261
- --subheader-x-large-line-height: 36px;
1262
- /* Desktop/Subheader/X-Large - Headline size */
1263
- --subheader-x-large-size: 28px;
1264
- /* Desktop/Subheader/X-Large - Headline style */
1265
- --subheader-x-large-style: regular;
1266
- /* Desktop/Subheader/XX-Large - Headline */
1267
- --subheader-xx-large: 400 32px/40px var(--typeface);
1268
- /* Desktop/Subheader/XX-Large - Headline line height */
1269
- --subheader-xx-large-line-height: 40px;
1270
- /* Desktop/Subheader/XX-Large - Headline size */
1271
- --subheader-xx-large-size: 32px;
1272
- /* Desktop/Subheader/XX-Large - Headline style */
1273
- --subheader-xx-large-style: regular;
1274
- /* Desktop/Subheader/XXX-Large - Large Headline */
1275
- --subheader-xxx-large: 400 40px/48px var(--typeface);
1276
- /* Desktop/Subheader/XXX-Large - Large Headline line height */
1277
- --subheader-xxx-large-line-height: 48px;
1278
- /* Desktop/Subheader/XXX-Large - Large Headline size */
1279
- --subheader-xxx-large-size: 40px;
1280
- /* Desktop/Subheader/XXX-Large - Large Headline style */
1281
- --subheader-xxx-large-style: regular;
1282
- }
1283
-
1284
- /** Light theme (default) **/
1285
- /* Background/base - Theme - Better Home & Garden */
974
+ /* light theme (default) */
975
+ /* Background/base - Brand */
1286
976
  --background-base: #ffffff;
1287
- /* Background/scrim - Theme - Better Home & Garden */
977
+ /* Background/scrim - Theme - Better Homes & Gardens */
1288
978
  --background-scrim: #00000040;
1289
- /* Background/shade - Theme - Better Home & Garden */
979
+ /* Background/shade - Brand */
1290
980
  --background-shade: #f5f5f5;
1291
- /* Data visual/category-01 - Theme - Better Home & Garden */
981
+ /* Data visual/category-01 - Brand */
1292
982
  --data-visual-category-01: #389e7a;
1293
- /* Data visual/category-01-highlight - Theme - Better Home & Garden */
983
+ /* Data visual/category-01-highlight - Brand */
1294
984
  --data-visual-category-01-highlight: #389e7a4d;
1295
- /* Data visual/category-02 - Theme - Better Home & Garden */
985
+ /* Data visual/category-02 - Brand */
1296
986
  --data-visual-category-02: #0a466c;
1297
- /* Data visual/category-02-highlight - Theme - Better Home & Garden */
987
+ /* Data visual/category-02-highlight - Brand */
1298
988
  --data-visual-category-02-highlight: #0a466c4d;
1299
- /* Data visual/category-03 - Theme - Better Home & Garden */
989
+ /* Data visual/category-03 - Brand */
1300
990
  --data-visual-category-03: #299de0;
1301
- /* Data visual/category-03-highlight - Theme - Better Home & Garden */
991
+ /* Data visual/category-03-highlight - Brand */
1302
992
  --data-visual-category-03-highlight: #299de04d;
1303
- /* Data visual/category-04 - Theme - Better Home & Garden */
993
+ /* Data visual/category-04 - Brand */
1304
994
  --data-visual-category-04: #130033;
1305
- /* Data visual/category-04-highlight - Theme - Better Home & Garden */
995
+ /* Data visual/category-04-highlight - Brand */
1306
996
  --data-visual-category-04-highlight: #1300334d;
1307
- /* Data visual/category-05 - Theme - Better Home & Garden */
997
+ /* Data visual/category-05 - Brand */
1308
998
  --data-visual-category-05: #094a53;
1309
- /* Data visual/category-05-highlight - Theme - Better Home & Garden */
999
+ /* Data visual/category-05-highlight - Brand */
1310
1000
  --data-visual-category-05-highlight: #094a534d;
1311
- /* Data visual/category-06 - Theme - Better Home & Garden */
1001
+ /* Data visual/category-06 - Brand */
1312
1002
  --data-visual-category-06: #7f7f7f;
1313
- /* Data visual/category-06-highlight - Theme - Better Home & Garden */
1003
+ /* Data visual/category-06-highlight - Brand */
1314
1004
  --data-visual-category-06-highlight: #7f7f7f4d;
1315
- /* Data visual/category-07 - Theme - Better Home & Garden */
1005
+ /* Data visual/category-07 - Brand */
1316
1006
  --data-visual-category-07: #433479;
1317
- /* Data visual/category-07-highlight - Theme - Better Home & Garden */
1007
+ /* Data visual/category-07-highlight - Brand */
1318
1008
  --data-visual-category-07-highlight: #4334794d;
1319
- /* Data visual/category-1-highlight - Theme - Better Home & Garden */
1009
+ /* Data visual/category-1 - Theme - Better Home & Garden */
1010
+ --data-visual-category-1: #0a466c;
1011
+ /* Data visual/category-1-highlight - Theme - Better Homes & Gardens */
1320
1012
  --data-visual-category-1-highlight: #0a466c4d;
1321
1013
  /* Data visual/category-2 - Theme - Better Home & Garden */
1322
1014
  --data-visual-category-2: #299de0;
1323
- /* Data visual/category-2-highlight - Theme - Better Home & Garden */
1015
+ /* Data visual/category-2-highlight - Theme - Better Homes & Gardens */
1324
1016
  --data-visual-category-2-highlight: #299de04d;
1325
1017
  /* Data visual/category-3 - Theme - Better Home & Garden */
1326
1018
  --data-visual-category-3: #130033;
1327
- /* Data visual/category-3-highlight - Theme - Better Home & Garden */
1019
+ /* Data visual/category-3-highlight - Theme - Better Homes & Gardens */
1328
1020
  --data-visual-category-3-highlight: #1300334d;
1329
1021
  /* Data visual/category-4 - Theme - Better Home & Garden */
1330
1022
  --data-visual-category-4: #389e7a;
1331
- /* Data visual/category-4-highlight - Theme - Better Home & Garden */
1023
+ /* Data visual/category-4-highlight - Theme - Better Homes & Gardens */
1332
1024
  --data-visual-category-4-highlight: #389e7a4d;
1333
1025
  /* Data visual/category-5 - Theme - Better Home & Garden */
1334
1026
  --data-visual-category-5: #094a53;
1335
- /* Data visual/category-5-highlight - Theme - Better Home & Garden */
1027
+ /* Data visual/category-5-highlight - Theme - Better Homes & Gardens */
1336
1028
  --data-visual-category-5-highlight: #094a534d;
1337
1029
  /* Data visual/category-6 - Theme - Better Home & Garden */
1338
1030
  --data-visual-category-6: #7f7f7f;
1339
- /* Data visual/category-6-highlight - Theme - Better Home & Garden */
1031
+ /* Data visual/category-6-highlight - Theme - Better Homes & Gardens */
1340
1032
  --data-visual-category-6-highlight: #7f7f7f4d;
1341
1033
  /* Data visual/category-7 - Theme - Better Home & Garden */
1342
1034
  --data-visual-category-7: #433479;
1343
- /* Data visual/category-7-highlight - Theme - Better Home & Garden */
1035
+ /* Data visual/category-7-highlight - Theme - Better Homes & Gardens */
1344
1036
  --data-visual-category-7-highlight: #4334794d;
1345
- /* Data visual/gradient-end - Theme - Better Home & Garden */
1037
+ /* Data visual/gradient-end - Theme - Better Homes & Gardens */
1346
1038
  --data-visual-gradient-end: #ffffff4d;
1347
- /* Data visual/green - Theme - Better Home & Garden */
1039
+ /* Data visual/green - Theme - Better Homes & Gardens */
1348
1040
  --data-visual-green: #258750;
1349
- /* Data visual/green-highlight - Theme - Better Home & Garden */
1041
+ /* Data visual/green-highlight - Theme - Better Homes & Gardens */
1350
1042
  --data-visual-green-highlight: #deede5;
1351
- /* Data visual/negative - Theme - Better Home & Garden */
1043
+ /* Data visual/negative - Brand */
1352
1044
  --data-visual-negative: #d83a52;
1353
- /* Data visual/negative-highlight - Theme - Better Home & Garden */
1045
+ /* Data visual/negative-highlight - Brand */
1354
1046
  --data-visual-negative-highlight: #f9e1e5;
1355
- /* Data visual/positive - Theme - Better Home & Garden */
1047
+ /* Data visual/positive - Brand */
1356
1048
  --data-visual-positive: #258750;
1357
- /* Data visual/positive-highlight - Theme - Better Home & Garden */
1049
+ /* Data visual/positive-highlight - Brand */
1358
1050
  --data-visual-positive-highlight: #deede5;
1359
- /* Data visual/red - Theme - Better Home & Garden */
1051
+ /* Data visual/red - Theme - Better Homes & Gardens */
1360
1052
  --data-visual-red: #d83a52;
1361
- /* Data visual/red-highlight - Theme - Better Home & Garden */
1053
+ /* Data visual/red-highlight - Theme - Better Homes & Gardens */
1362
1054
  --data-visual-red-highlight: #f9e1e5;
1363
- /* Foreground/Brand/on-inverse-primary - Theme - Better Home & Garden */
1055
+ /* Foreground/Brand/on-inverse-primary - Theme - Better Homes & Gardens */
1364
1056
  --foreground-brand-on-inverse-primary: #7db67c;
1365
- /* Foreground/Brand/on-inverse-secondary - Theme - Better Home & Garden */
1057
+ /* Foreground/Brand/on-inverse-secondary - Theme - Better Homes & Gardens */
1366
1058
  --foreground-brand-on-inverse-secondary: #eba691;
1367
- /* Foreground/Brand/on-brand-primary - Theme - Better Home & Garden */
1059
+ /* Foreground/Brand/on-brand-primary - Brand */
1060
+ /* Foreground color used on Brand's primary color (non neutral color) */
1368
1061
  --foreground-brand-on-primary: #ffffff;
1369
- /* Foreground/Brand/on-brand-secondary - Theme - Better Home & Garden */
1062
+ /* Foreground/Brand/on-brand-secondary - Brand */
1063
+ /* Foreground color used on Brand's primary color (non neutral color) */
1370
1064
  --foreground-brand-on-secondary: #ffffff;
1371
- /* Foreground/Brand/brand-primary - Theme - Better Home & Garden */
1065
+ /* Foreground/Brand/brand-primary - Brand */
1066
+ /* Foreground text and icons that match the brand's primary color */
1372
1067
  --foreground-brand-primary: #278627;
1373
1068
  /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1374
1069
  --foreground-brand-primary-depth: #217221;
1375
- /* Foreground/Brand/brand-secondary - Theme - Better Home & Garden */
1070
+ /* Foreground/Brand/brand-secondary - Brand */
1071
+ /* Foreground text and icons that match the brand's secondary color */
1376
1072
  --foreground-brand-secondary: #dd6b47;
1377
- /* Foreground/Brand/brand-secondary-depth - Theme - Better Home & Garden */
1073
+ /* Foreground/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1378
1074
  --foreground-brand-secondary-depth: #bc5b3c;
1379
- /* Foreground/Link text/default - Theme - Better Home & Garden */
1075
+ /* Foreground/Link text/default - Brand */
1380
1076
  --foreground-link-text-default: #215ecd;
1381
- /* Foreground/Link text/default-disabled - Theme - Better Home & Garden */
1077
+ /* Foreground/Link text/default-disabled - Brand */
1382
1078
  --foreground-link-text-default-disabled: #7a9ee1;
1383
- /* Foreground/Link text/default-hovered - Theme - Better Home & Garden */
1079
+ /* Foreground/Link text/default-hovered - Theme - Better Homes & Gardens */
1384
1080
  --foreground-link-text-default-hovered: #1e55b9;
1385
- /* Foreground/Link text/default-pressed - Theme - Better Home & Garden */
1081
+ /* Foreground/Link text/default-pressed - Theme - Better Homes & Gardens */
1386
1082
  --foreground-link-text-default-pressed: #1a4ba4;
1387
- /* Foreground/Link text/default-visited - Theme - Better Home & Garden */
1083
+ /* Foreground/Link text/default-visited - Brand */
1388
1084
  --foreground-link-text-default-visited: #7a3e7a;
1389
- /* Foreground/Link text/subtle-disabled - Theme - Better Home & Garden */
1085
+ /* Foreground/Link text/subtle-disabled - Brand */
1390
1086
  --foreground-link-text-subtle-disabled: #bdbdbd;
1391
- /* Foreground/Link text/subtle-hovered - Theme - Better Home & Garden */
1087
+ /* Foreground/Link text/subtle-hovered - Theme - Better Homes & Gardens */
1392
1088
  --foreground-link-text-subtle-hovered: #292929;
1393
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Better Home & Garden */
1089
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Better Homes & Gardens */
1090
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1091
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Better Homes & Gardens */
1092
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1093
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1394
1094
  --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 */
1095
+ /* Foreground/Link text/subtle-pressed - Theme - Better Homes & Gardens */
1096
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1097
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1398
1098
  --foreground-neutral-disabled-on-color-surface: #757575;
1399
- /* Foreground/Neutral/disabled-on-surface - Theme - Better Home & Garden */
1099
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1400
1100
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1401
- /* Foreground/Neutral/on-surface - Theme - Better Home & Garden */
1101
+ /* Foreground/Neutral/inverse-on-surface - Theme - Better Homes & Gardens */
1102
+ --foreground-neutral-inverse-on-surface: #fafafa;
1103
+ /* Foreground/Neutral/on-color - Brand */
1104
+ /* Interactive controls */
1105
+ --foreground-neutral-on-color: #ffffff;
1106
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1107
+ /* Text and icons against inverse surface */
1108
+ --foreground-neutral-on-inverse-surface: #fafafa;
1109
+ /* Foreground/Neutral/on-surface - Brand */
1110
+ /* Default foreground text and icons against any surface color */
1402
1111
  --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 */
1112
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1113
+ /* Secondary foreground color for icons and text */
1114
+ --foreground-neutral-on-surface-variant-01: #707070;
1115
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1116
+ /* Tertiary foreground color for icons and text */
1406
1117
  --foreground-neutral-on-surface-variant-02: #757575;
1407
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Better Home & Garden */
1118
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1119
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1408
1120
  --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 */
1121
+ /* Foreground/Neutral/skeleton-element - Brand */
1122
+ --foreground-neutral-skeleton-element: #e0e0e0;
1123
+ /* Foreground/Spectrum/blue - Theme - Better Homes & Gardens */
1412
1124
  --foreground-spectrum-blue: #143778;
1413
- /* Foreground/Spectrum/green - Theme - Better Home & Garden */
1125
+ /* Foreground/Spectrum/green - Theme - Better Homes & Gardens */
1414
1126
  --foreground-spectrum-green: #134428;
1415
- /* Foreground/Spectrum/lime - Theme - Better Home & Garden */
1127
+ /* Foreground/Spectrum/lime - Theme - Better Homes & Gardens */
1416
1128
  --foreground-spectrum-lime: #60651a;
1417
- /* Foreground/Spectrum/magenta - Theme - Better Home & Garden */
1129
+ /* Foreground/Spectrum/magenta - Theme - Better Homes & Gardens */
1418
1130
  --foreground-spectrum-magenta: #63076f;
1419
- /* Foreground/Spectrum/orange - Theme - Better Home & Garden */
1131
+ /* Foreground/Spectrum/orange - Brand */
1420
1132
  --foreground-spectrum-orange: #773001;
1421
- /* Foreground/Spectrum/pink - Theme - Better Home & Garden */
1133
+ /* Foreground/Spectrum/pink - Theme - Better Homes & Gardens */
1422
1134
  --foreground-spectrum-pink: #6c1240;
1423
- /* Foreground/Spectrum/purple - Theme - Better Home & Garden */
1135
+ /* Foreground/Spectrum/purple - Theme - Better Homes & Gardens */
1424
1136
  --foreground-spectrum-purple: #310077;
1425
- /* Foreground/Spectrum/red - Theme - Better Home & Garden */
1137
+ /* Foreground/Spectrum/red - Brand */
1426
1138
  --foreground-spectrum-red: #6c1d29;
1427
- /* Foreground/Spectrum/teal - Theme - Better Home & Garden */
1139
+ /* Foreground/Spectrum/teal - Theme - Better Homes & Gardens */
1428
1140
  --foreground-spectrum-teal: #01413c;
1429
- /* Foreground/Spectrum/yellow - Theme - Better Home & Garden */
1141
+ /* Foreground/Spectrum/yellow - Theme - Better Homes & Gardens */
1430
1142
  --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 */
1143
+ /* Interactions/brand-disabled-opacity - Theme - Better Homes & Gardens */
1444
1144
  --interactions-brand-disabled-opacity: #0000000f;
1445
- /* Interactions/brand-hover-opacity - Theme - Better Home & Garden */
1145
+ /* Interactions/brand-hover-opacity - Theme - Better Homes & Gardens */
1446
1146
  --interactions-brand-hover-opacity: #0000001a;
1447
- /* Interactions/brand-press-opacity - Theme - Better Home & Garden */
1147
+ /* Interactions/brand-press-opacity - Theme - Better Homes & Gardens */
1448
1148
  --interactions-brand-press-opacity: #00000033;
1449
- /* Interactions/disabled-opacity - Theme - Better Home & Garden */
1149
+ /* Interactions/disabled-opacity - Theme - Better Homes & Gardens */
1450
1150
  --interactions-disabled-opacity: #0000000f;
1451
- /* Interactions/hover-opacity - Theme - Better Home & Garden */
1151
+ /* Interactions/hover-opacity - Theme - Better Homes & Gardens */
1452
1152
  --interactions-hover-opacity: #00000014;
1453
- /* Interactions/link-active-opacity - Theme - Better Home & Garden */
1153
+ /* Interactions/link-active-opacity - Brand */
1454
1154
  --interactions-link-active-opacity: #0000004d;
1455
- /* Interactions/neutral-hover-opacity - Theme - Better Home & Garden */
1155
+ /* Interactions/neutral-hover-opacity - Brand */
1156
+ /* surfaces using neutral tones */
1456
1157
  --interactions-neutral-hover-opacity: #00000014;
1457
- /* Interactions/neutral-press-opacity - Theme - Better Home & Garden */
1158
+ /* Interactions/neutral-press-opacity - Brand */
1159
+ /* surfaces using neutral tones */
1458
1160
  --interactions-neutral-press-opacity: #00000029;
1459
- /* Interactions/press-opacity - Theme - Better Home & Garden */
1161
+ /* Interactions/press-opacity - Theme - Better Homes & Gardens */
1460
1162
  --interactions-press-opacity: #00000029;
1461
- /* Interactions/primary-disabled-opacity - Theme - Better Home & Garden */
1163
+ /* Interactions/primary-disabled-opacity - Theme - Better Homes & Gardens */
1462
1164
  --interactions-primary-disabled-opacity: #2786271f;
1463
- /* Interactions/primary-hover-opacity - Theme - Better Home & Garden */
1165
+ /* Interactions/primary-hover-opacity - Theme - Better Homes & Gardens */
1464
1166
  --interactions-primary-hover-opacity: #2786271a;
1465
- /* Interactions/primary-press-opacity - Theme - Better Home & Garden */
1167
+ /* Interactions/primary-press-opacity - Theme - Better Homes & Gardens */
1466
1168
  --interactions-primary-press-opacity: #27862733;
1467
- /* Shadow/shadow-10 - Theme - Better Home & Garden */
1169
+ /* Shadow/shadow-10 - Theme - Better Homes & Gardens */
1468
1170
  --shadow-10: #0000001a;
1469
- /* Shadow/shadow-12 - Theme - Better Home & Garden */
1171
+ /* Shadow/shadow-12 - Theme - Better Homes & Gardens */
1470
1172
  --shadow-12: #0000001f;
1471
- /* Shadow/shadow-15 - Theme - Better Home & Garden */
1173
+ /* Shadow/shadow-15 - Theme - Better Homes & Gardens */
1472
1174
  --shadow-15: #00000026;
1473
- /* Shadow/shadow-25 - Theme - Better Home & Garden */
1175
+ /* Shadow/shadow-25 - Theme - Better Homes & Gardens */
1474
1176
  --shadow-25: #00000040;
1475
- /* Shadow/shadow-32 - Theme - Better Home & Garden */
1177
+ /* Shadow/shadow-32 - Theme - Better Homes & Gardens */
1476
1178
  --shadow-32: #00000052;
1477
- /* Shadow/inner-shadow - Theme - Better Home & Garden */
1179
+ /* Shadow/inner-shadow - Brand */
1478
1180
  --shadow-inner: #ffffff;
1479
1181
  /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1480
1182
  --shadow-inner-100: #ffffff;
1481
- /* Shadow/variant-01 - Theme - Better Home & Garden */
1183
+ /* Shadow/variant-01 - Brand */
1482
1184
  --shadow-variant-01: #0000001a;
1483
- /* Shadow/variant-02 - Theme - Better Home & Garden */
1185
+ /* Shadow/variant-02 - Brand */
1484
1186
  --shadow-variant-02: #0000001f;
1485
- /* Shadow/variant-03 - Theme - Better Home & Garden */
1187
+ /* Shadow/variant-03 - Brand */
1486
1188
  --shadow-variant-03: #00000026;
1487
- /* Shadow/variant-04 - Theme - Better Home & Garden */
1189
+ /* Shadow/variant-04 - Brand */
1488
1190
  --shadow-variant-04: #00000040;
1489
- /* Shadow/variant-05 - Theme - Better Home & Garden */
1191
+ /* Shadow/variant-05 - Brand */
1490
1192
  --shadow-variant-05: #00000052;
1491
- /* Status/error - Theme - Denali & Boss */
1193
+ /* Status/error - Brand */
1194
+ /* Foreground error text and icons */
1492
1195
  --status-error: #d83a52;
1493
1196
  /* Status/information - Theme - Better Home & Garden */
1494
1197
  --status-information: #276ef1;
1495
- /* Status/informational - Theme - Better Home & Garden */
1198
+ /* Status/informational - Brand */
1199
+ /* Foreground informational text and icons */
1496
1200
  --status-informational: #276ef1;
1497
- /* Status/on-success - Theme - Better Home & Garden */
1201
+ /* Status/on-error - Brand */
1202
+ /* Foreground error text and icons */
1203
+ --status-on-error: #ffffff;
1204
+ /* Status/on-information - Theme - Better Home & Garden */
1205
+ --status-on-information: #ffffff;
1206
+ /* Status/on-informational - Brand */
1207
+ /* Foreground informational text and icons */
1208
+ --status-on-informational: #ffffff;
1209
+ /* Status/on-success - Brand */
1210
+ /* Foreground success icons and text */
1498
1211
  --status-on-success: #ffffff;
1499
- /* Status/success - Theme - Better Home & Garden */
1212
+ /* Status/on-warning - Brand */
1213
+ /* Foreground warning icons */
1214
+ --status-on-warning: #141414;
1215
+ /* Status/success - Brand */
1216
+ /* Foreground success icons and text */
1500
1217
  --status-success: #258750;
1501
- /* Status/warning - Theme - Better Home & Garden */
1218
+ /* Status/warning - Brand */
1219
+ /* Foreground warning icons */
1502
1220
  --status-warning: #f6bc2f;
1503
- /* Stroke/Brand/brand-primary - Theme - Better Home & Garden */
1221
+ /* Stroke/Brand/brand-primary - Brand */
1222
+ /* Outline variant - decorative elements such as dividers */
1504
1223
  --stroke-brand-primary: #278627;
1505
- /* Stroke/Brand/brand-primary-depth - Theme - Better Home & Garden */
1224
+ /* Stroke/Brand/brand-primary-depth - Brand */
1225
+ /* Outline variant - decorative elements such as dividers */
1506
1226
  --stroke-brand-primary-depth: #217221;
1507
1227
  /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1508
1228
  --stroke-brand-secondary: #dd6b47;
1509
- /* Stroke/Brand/brand-secondary-depth - Theme - Better Home & Garden */
1229
+ /* Stroke/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1510
1230
  --stroke-brand-secondary-depth: #bc5b3c;
1511
- /* Stroke/Neutral/neutral-base - Theme - Better Home & Garden */
1231
+ /* Stroke/Neutral/neutral-base - Brand */
1232
+ /* For control components */
1512
1233
  --stroke-neutral-base: #949494;
1513
- /* Stroke/Neutral/disabled-dark - Theme - Better Home & Garden */
1234
+ /* Stroke/Neutral/disabled-dark - Brand */
1235
+ /* Disabled outline separating the fill and surface background */
1514
1236
  --stroke-neutral-disabled-dark: #757575;
1515
- /* Stroke/Neutral/disabled-light - Theme - Better Home & Garden */
1237
+ /* Stroke/Neutral/disabled-light - Brand */
1238
+ /* Disabled outline separating the fill and surface background */
1516
1239
  --stroke-neutral-disabled-light: #bdbdbd;
1517
- /* Stroke/Neutral/focus - Theme - Better Home & Garden */
1240
+ /* Stroke/Neutral/focus - Brand */
1241
+ /* Highlight focus element */
1518
1242
  --stroke-neutral-focus: #000000;
1519
- /* Stroke/Neutral/neutral-high - Theme - Better Home & Garden */
1243
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1244
+ /* Highlight focus element */
1245
+ --stroke-neutral-focus-on-inverse: #ffffff;
1246
+ /* Stroke/Neutral/neutral-high - Brand */
1520
1247
  --stroke-neutral-high: #141414;
1521
- /* Stroke/Neutral/neutral-high-contrast - Theme - Better Home & Garden */
1248
+ /* Stroke/Neutral/neutral-high-contrast - Theme - Better Homes & Gardens */
1522
1249
  --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 */
1250
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - Better Homes & Gardens */
1530
1251
  --stroke-neutral-interactions-disabled-dark: #757575;
1531
- /* Stroke/Neutral/Interactions/disabled-light - Theme - Better Home & Garden */
1252
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - Better Homes & Gardens */
1532
1253
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1533
- /* Stroke/Neutral/Interactions/focus - Theme - Better Home & Garden */
1254
+ /* Stroke/Neutral/Interactions/focus - Theme - Better Homes & Gardens */
1534
1255
  --stroke-neutral-interactions-focus: #000000;
1535
- /* Stroke/Neutral/neutral-low - Theme - Better Home & Garden */
1256
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Better Homes & Gardens */
1257
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1258
+ /* Stroke/Neutral/neutral-low - Brand */
1259
+ /* Outline variant - decorative elements such as dividers */
1536
1260
  --stroke-neutral-low: #e0e0e0;
1537
- /* Stroke/Neutral/neutral-low-contrast - Theme - Better Home & Garden */
1261
+ /* Stroke/Neutral/neutral-low-contrast - Theme - Better Homes & Gardens */
1538
1262
  --stroke-neutral-low-contrast: #e0e0e0;
1539
- /* Surface/Brand/primary - Theme - Better Home & Garden */
1263
+ /* Surface/Brand/primary - Brand */
1540
1264
  --surface-brand-primary: #278627;
1541
- /* Surface/Brand/primary-highlight - Theme - Better Home & Garden */
1265
+ /* Surface/Brand/primary-highlight - Theme - Better Homes & Gardens */
1542
1266
  --surface-brand-primary-highlight: #dfeddf;
1543
- /* Surface/Brand/secondary - Theme - Better Home & Garden */
1267
+ /* Surface/Brand/secondary - Brand */
1544
1268
  --surface-brand-secondary: #dd6b47;
1545
- /* Surface/Brand/secondary-highlight - Theme - Better Home & Garden */
1269
+ /* Surface/Brand/secondary-highlight - Theme - Better Homes & Gardens */
1546
1270
  --surface-brand-secondary-highlight: #fae9e3;
1547
1271
  /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1548
1272
  --surface-neutral-interactions-dark-disabled: #d6d6d6;
1549
1273
  /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1550
1274
  --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 */
1275
+ /* Surface/Neutral/inverse - Brand */
1276
+ /* Inverted. Use for toasts notification & snackbars */
1554
1277
  --surface-neutral-inverse: #1f1f1f;
1555
1278
  /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1556
1279
  --surface-neutral-inverse-dark: #1f1f1f;
1557
- /* Surface/Neutral/inverse-light - Theme - Better Home & Garden */
1280
+ /* Surface/Neutral/inverse-light - Theme - Better Homes & Gardens */
1558
1281
  --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 */
1282
+ /* Surface/Neutral/T1-base - Brand */
1562
1283
  --surface-neutral-t1-base: #ffffff;
1563
- /* Surface/Neutral/T2-lowest - Theme - Better Home & Garden */
1284
+ /* Surface/Neutral/T2-lowest - Brand */
1564
1285
  --surface-neutral-t2-lowest: #f5f5f5;
1565
- /* Surface/Neutral/T3-low - Theme - Better Home & Garden */
1286
+ /* Surface/Neutral/T3-low - Brand */
1287
+ /* Navigations, app bar etc */
1566
1288
  --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 */
1289
+ /* Surface/Neutral/T4-high - Brand */
1290
+ /* Navigations, app bar etc */
1291
+ --surface-neutral-t4-high: #8a8a8a;
1292
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1293
+ --surface-neutral-t4-high-2: #8a8a8a;
1294
+ /* Surface/Neutral/transparent - Brand */
1295
+ --surface-neutral-transparent: #ffffff00;
1296
+ /* Surface/Spectrum/blue - Theme - Better Homes & Gardens */
1570
1297
  --surface-spectrum-blue: #dfe9fd;
1571
- /* Surface/Spectrum/green - Theme - Better Home & Garden */
1298
+ /* Surface/Spectrum/green - Theme - Better Homes & Gardens */
1572
1299
  --surface-spectrum-green: #deede5;
1573
- /* Surface/Spectrum/lime - Theme - Better Home & Garden */
1300
+ /* Surface/Spectrum/lime - Theme - Better Homes & Gardens */
1574
1301
  --surface-spectrum-lime: #f6f7e0;
1575
- /* Surface/Spectrum/magenta - Theme - Better Home & Garden */
1302
+ /* Surface/Spectrum/magenta - Theme - Better Homes & Gardens */
1576
1303
  --surface-spectrum-magenta: #f6dbfa;
1577
1304
  /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1578
1305
  --surface-spectrum-orange: #fce7d9;
1579
- /* Surface/Spectrum/pink - Theme - Better Home & Garden */
1306
+ /* Surface/Spectrum/pink - Theme - Better Homes & Gardens */
1580
1307
  --surface-spectrum-pink: #f9deec;
1581
- /* Surface/Spectrum/purple - Theme - Better Home & Garden */
1308
+ /* Surface/Spectrum/purple - Theme - Better Homes & Gardens */
1582
1309
  --surface-spectrum-purple: #e7d9fc;
1583
- /* Surface/Spectrum/red - Theme - Better Home & Garden */
1310
+ /* Surface/Spectrum/red - Theme - Better Homes & Gardens */
1584
1311
  --surface-spectrum-red: #f9e1e5;
1585
- /* Surface/Spectrum/teal - Theme - Better Home & Garden */
1312
+ /* Surface/Spectrum/teal - Theme - Better Homes & Gardens */
1586
1313
  --surface-spectrum-teal: #d9eceb;
1587
- /* Surface/Spectrum/yellow - Theme - Better Home & Garden */
1314
+ /* Surface/Spectrum/yellow - Theme - Better Homes & Gardens */
1588
1315
  --surface-spectrum-yellow: #fef5e0;
1589
- }
1590
1316
 
1317
+ @media (width >= 640px) {
1318
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1319
+ --display-regular-large: 400 64px/88px var(--typeface);
1320
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1321
+ --display-regular-large-line-height: 88px;
1322
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1323
+ --display-regular-large-size: 64px;
1324
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1325
+ --display-regular-large-style: regular;
1326
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1327
+ --display-regular-medium: 400 56px/72px var(--typeface);
1328
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1329
+ --display-regular-medium-line-height: 72px;
1330
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1331
+ --display-regular-medium-size: 56px;
1332
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1333
+ --display-regular-medium-style: regular;
1334
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1335
+ --display-regular-small: 400 48px/60px var(--typeface);
1336
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1337
+ --display-regular-small-line-height: 60px;
1338
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1339
+ --display-regular-small-size: 48px;
1340
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1341
+ --display-regular-small-style: regular;
1342
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1343
+ --display-semibold-large: 600 64px/88px var(--typeface);
1344
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1345
+ --display-semibold-large-line-height: 88px;
1346
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1347
+ --display-semibold-large-size: 64px;
1348
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1349
+ --display-semibold-large-style: 600;
1350
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1351
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1352
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1353
+ --display-semibold-medium-line-height: 72px;
1354
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1355
+ --display-semibold-medium-size: 56px;
1356
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1357
+ --display-semibold-medium-style: 600;
1358
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1359
+ --display-semibold-small: 600 48px/60px var(--typeface);
1360
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1361
+ --display-semibold-small-line-height: 60px;
1362
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1363
+ --display-semibold-small-size: 48px;
1364
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1365
+ --display-semibold-small-style: 600;
1366
+ /* Desktop/Heading/H1 */
1367
+ --heading-h1: 600 40px/48px var(--typeface);
1368
+ /* Desktop/Heading/H1 - line height */
1369
+ --heading-h1-line-height: 48px;
1370
+ /* Desktop/Heading/H1 - size */
1371
+ --heading-h1-size: 40px;
1372
+ /* Desktop/Heading/H1 - style */
1373
+ --heading-h1-style: 600;
1374
+ /* Desktop/Heading/H2 */
1375
+ --heading-h2: 600 32px/40px var(--typeface);
1376
+ /* Desktop/Heading/H2 - line height */
1377
+ --heading-h2-line-height: 40px;
1378
+ /* Desktop/Heading/H2 - size */
1379
+ --heading-h2-size: 32px;
1380
+ /* Desktop/Heading/H2 - style */
1381
+ --heading-h2-style: 600;
1382
+ /* Desktop/Heading/H3 */
1383
+ --heading-h3: 600 28px/36px var(--typeface);
1384
+ /* Desktop/Heading/H3 - line height */
1385
+ --heading-h3-line-height: 36px;
1386
+ /* Desktop/Heading/H3 - size */
1387
+ --heading-h3-size: 28px;
1388
+ /* Desktop/Heading/H3 - style */
1389
+ --heading-h3-style: 600;
1390
+ /* Desktop/Heading/H4 */
1391
+ --heading-h4: 600 24px/32px var(--typeface);
1392
+ /* Desktop/Heading/H4 - line height */
1393
+ --heading-h4-line-height: 32px;
1394
+ /* Desktop/Heading/H4 - size */
1395
+ --heading-h4-size: 24px;
1396
+ /* Desktop/Heading/H4 - style */
1397
+ --heading-h4-style: 600;
1398
+ /* Desktop/Heading/H5 */
1399
+ --heading-h5: 600 20px/28px var(--typeface);
1400
+ /* Desktop/Heading/H5 - line height */
1401
+ --heading-h5-line-height: 28px;
1402
+ /* Desktop/Heading/H5 - size */
1403
+ --heading-h5-size: 20px;
1404
+ /* Desktop/Heading/H5 - style */
1405
+ --heading-h5-style: 600;
1406
+ /* Desktop/Heading/H6 */
1407
+ --heading-h6: 500 18px/24px var(--typeface);
1408
+ /* Desktop/Heading/H6 - line height */
1409
+ --heading-h6-line-height: 24px;
1410
+ /* Desktop/Heading/H6 - size */
1411
+ --heading-h6-size: 18px;
1412
+ /* Desktop/Heading/H6 - style */
1413
+ --heading-h6-style: medium;
1414
+ /* Desktop/Subheader/Large - Headline */
1415
+ --subheader-large: 400 24px/32px var(--typeface);
1416
+ /* Desktop/Subheader/Large - Headline line height */
1417
+ --subheader-large-line-height: 32px;
1418
+ /* Desktop/Subheader/Large - Headline size */
1419
+ --subheader-large-size: 24px;
1420
+ /* Desktop/Subheader/Large - Headline style */
1421
+ --subheader-large-style: regular;
1422
+ /* Desktop/Subheader/Medium */
1423
+ --subheader-medium: 400 20px/28px var(--typeface);
1424
+ /* Desktop/Subheader/Medium - line height */
1425
+ --subheader-medium-line-height: 28px;
1426
+ /* Desktop/Subheader/Medium - size */
1427
+ --subheader-medium-size: 20px;
1428
+ /* Desktop/Subheader/Medium - style */
1429
+ --subheader-medium-style: regular;
1430
+ /* Desktop/Subheader/X-Large - Headline */
1431
+ --subheader-x-large: 400 28px/36px var(--typeface);
1432
+ /* Desktop/Subheader/X-Large - Headline line height */
1433
+ --subheader-x-large-line-height: 36px;
1434
+ /* Desktop/Subheader/X-Large - Headline size */
1435
+ --subheader-x-large-size: 28px;
1436
+ /* Desktop/Subheader/X-Large - Headline style */
1437
+ --subheader-x-large-style: regular;
1438
+ /* Desktop/Subheader/XX-Large - Headline */
1439
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1440
+ /* Desktop/Subheader/XX-Large - Headline line height */
1441
+ --subheader-xx-large-line-height: 40px;
1442
+ /* Desktop/Subheader/XX-Large - Headline size */
1443
+ --subheader-xx-large-size: 32px;
1444
+ /* Desktop/Subheader/XX-Large - Headline style */
1445
+ --subheader-xx-large-style: regular;
1446
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1447
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1448
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1449
+ --subheader-xxx-large-line-height: 48px;
1450
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1451
+ --subheader-xxx-large-size: 40px;
1452
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1453
+ --subheader-xxx-large-style: regular;
1454
+ }
1455
+ }
1456
+ /* dark theme */
1591
1457
  [data-theme='dark'] {
1592
- /* Background/base - Theme - Better Home & Garden */
1458
+ /* Background/base - Brand */
1593
1459
  --background-base: #1f1f1f;
1594
- /* Background/scrim - Theme - Better Home & Garden */
1460
+ /* Background/scrim - Theme - Better Homes & Gardens */
1595
1461
  --background-scrim: #61616180;
1596
- /* Background/shade - Theme - Better Home & Garden */
1462
+ /* Background/shade - Brand */
1597
1463
  --background-shade: #292929;
1598
- /* Data visual/category-01 - Theme - Better Home & Garden */
1464
+ /* Data visual/category-01 - Brand */
1599
1465
  --data-visual-category-01: #88c5af;
1600
- /* Data visual/category-01-highlight - Theme - Better Home & Garden */
1466
+ /* Data visual/category-01-highlight - Brand */
1601
1467
  --data-visual-category-01-highlight: #88c5af4d;
1602
- /* Data visual/category-02 - Theme - Better Home & Garden */
1468
+ /* Data visual/category-02 - Brand */
1603
1469
  --data-visual-category-02: #0a466c;
1604
- /* Data visual/category-02-highlight - Theme - Better Home & Garden */
1470
+ /* Data visual/category-02-highlight - Brand */
1605
1471
  --data-visual-category-02-highlight: #7899ae4d;
1606
- /* Data visual/category-03 - Theme - Better Home & Garden */
1472
+ /* Data visual/category-03 - Brand */
1607
1473
  --data-visual-category-03: #7fc4ec;
1608
- /* Data visual/category-03-highlight - Theme - Better Home & Garden */
1474
+ /* Data visual/category-03-highlight - Brand */
1609
1475
  --data-visual-category-03-highlight: #7fc4ec4d;
1610
- /* Data visual/category-04 - Theme - Better Home & Garden */
1476
+ /* Data visual/category-04 - Brand */
1611
1477
  --data-visual-category-04: #958ca3;
1612
- /* Data visual/category-04-highlight - Theme - Better Home & Garden */
1478
+ /* Data visual/category-04-highlight - Brand */
1613
1479
  --data-visual-category-04-highlight: #958ca34d;
1614
- /* Data visual/category-05 - Theme - Better Home & Garden */
1480
+ /* Data visual/category-05 - Brand */
1615
1481
  --data-visual-category-05: #789ba0;
1616
- /* Data visual/category-05-highlight - Theme - Better Home & Garden */
1482
+ /* Data visual/category-05-highlight - Brand */
1617
1483
  --data-visual-category-05-highlight: #789ba04d;
1618
- /* Data visual/category-06 - Theme - Better Home & Garden */
1484
+ /* Data visual/category-06 - Brand */
1619
1485
  --data-visual-category-06: #b2b2b2;
1620
- /* Data visual/category-06-highlight - Theme - Better Home & Garden */
1486
+ /* Data visual/category-06-highlight - Brand */
1621
1487
  --data-visual-category-06-highlight: #b2b2b24d;
1622
- /* Data visual/category-07 - Theme - Better Home & Garden */
1488
+ /* Data visual/category-07 - Brand */
1623
1489
  --data-visual-category-07: #a19abc;
1624
- /* Data visual/category-07-highlight - Theme - Better Home & Garden */
1490
+ /* Data visual/category-07-highlight - Brand */
1625
1491
  --data-visual-category-07-highlight: #a19abc4d;
1626
- /* Data visual/category-1-highlight - Theme - Better Home & Garden */
1492
+ /* Data visual/category-1 - Theme - Better Home & Garden */
1493
+ --data-visual-category-1: #0a466c;
1494
+ /* Data visual/category-1-highlight - Theme - Better Homes & Gardens */
1627
1495
  --data-visual-category-1-highlight: #7899ae4d;
1628
1496
  /* Data visual/category-2 - Theme - Better Home & Garden */
1629
1497
  --data-visual-category-2: #7fc4ec;
1630
- /* Data visual/category-2-highlight - Theme - Better Home & Garden */
1498
+ /* Data visual/category-2-highlight - Theme - Better Homes & Gardens */
1631
1499
  --data-visual-category-2-highlight: #7fc4ec4d;
1632
1500
  /* Data visual/category-3 - Theme - Better Home & Garden */
1633
1501
  --data-visual-category-3: #958ca3;
1634
- /* Data visual/category-3-highlight - Theme - Better Home & Garden */
1502
+ /* Data visual/category-3-highlight - Theme - Better Homes & Gardens */
1635
1503
  --data-visual-category-3-highlight: #958ca34d;
1636
1504
  /* Data visual/category-4 - Theme - Better Home & Garden */
1637
1505
  --data-visual-category-4: #88c5af;
1638
- /* Data visual/category-4-highlight - Theme - Better Home & Garden */
1506
+ /* Data visual/category-4-highlight - Theme - Better Homes & Gardens */
1639
1507
  --data-visual-category-4-highlight: #88c5af4d;
1640
1508
  /* Data visual/category-5 - Theme - Better Home & Garden */
1641
1509
  --data-visual-category-5: #789ba0;
1642
- /* Data visual/category-5-highlight - Theme - Better Home & Garden */
1510
+ /* Data visual/category-5-highlight - Theme - Better Homes & Gardens */
1643
1511
  --data-visual-category-5-highlight: #789ba04d;
1644
1512
  /* Data visual/category-6 - Theme - Better Home & Garden */
1645
1513
  --data-visual-category-6: #b2b2b2;
1646
- /* Data visual/category-6-highlight - Theme - Better Home & Garden */
1514
+ /* Data visual/category-6-highlight - Theme - Better Homes & Gardens */
1647
1515
  --data-visual-category-6-highlight: #b2b2b24d;
1648
1516
  /* Data visual/category-7 - Theme - Better Home & Garden */
1649
1517
  --data-visual-category-7: #a19abc;
1650
- /* Data visual/category-7-highlight - Theme - Better Home & Garden */
1518
+ /* Data visual/category-7-highlight - Theme - Better Homes & Gardens */
1651
1519
  --data-visual-category-7-highlight: #a19abc4d;
1652
- /* Data visual/gradient-end - Theme - Better Home & Garden */
1520
+ /* Data visual/gradient-end - Theme - Better Homes & Gardens */
1653
1521
  --data-visual-gradient-end: #1f1f1f4d;
1654
- /* Data visual/green - Theme - Better Home & Garden */
1522
+ /* Data visual/green - Theme - Better Homes & Gardens */
1655
1523
  --data-visual-green: #7cb796;
1656
- /* Data visual/green-highlight - Theme - Better Home & Garden */
1524
+ /* Data visual/green-highlight - Theme - Better Homes & Gardens */
1657
1525
  --data-visual-green-highlight: #0d2f1c;
1658
- /* Data visual/negative - Theme - Better Home & Garden */
1526
+ /* Data visual/negative - Brand */
1659
1527
  --data-visual-negative: #e88997;
1660
- /* Data visual/negative-highlight - Theme - Better Home & Garden */
1528
+ /* Data visual/negative-highlight - Brand */
1661
1529
  --data-visual-negative-highlight: #4c141d;
1662
- /* Data visual/positive - Theme - Better Home & Garden */
1530
+ /* Data visual/positive - Brand */
1663
1531
  --data-visual-positive: #7cb796;
1664
- /* Data visual/positive-highlight - Theme - Better Home & Garden */
1532
+ /* Data visual/positive-highlight - Brand */
1665
1533
  --data-visual-positive-highlight: #0d2f1c;
1666
- /* Data visual/red - Theme - Better Home & Garden */
1534
+ /* Data visual/red - Theme - Better Homes & Gardens */
1667
1535
  --data-visual-red: #e88997;
1668
- /* Data visual/red-highlight - Theme - Better Home & Garden */
1536
+ /* Data visual/red-highlight - Theme - Better Homes & Gardens */
1669
1537
  --data-visual-red-highlight: #4c141d;
1670
- /* Foreground/Brand/on-inverse-primary - Theme - Better Home & Garden */
1538
+ /* Foreground/Brand/on-inverse-primary - Theme - Better Homes & Gardens */
1671
1539
  --foreground-brand-on-inverse-primary: #7db67c;
1672
- /* Foreground/Brand/on-inverse-secondary - Theme - Better Home & Garden */
1540
+ /* Foreground/Brand/on-inverse-secondary - Theme - Better Homes & Gardens */
1673
1541
  --foreground-brand-on-inverse-secondary: #eba691;
1674
- /* Foreground/Brand/on-brand-primary - Theme - Better Home & Garden */
1542
+ /* Foreground/Brand/on-brand-primary - Brand */
1543
+ /* Foreground color used on Brand's primary color (non neutral color) */
1675
1544
  --foreground-brand-on-primary: #141414;
1676
- /* Foreground/Brand/on-brand-secondary - Theme - Better Home & Garden */
1545
+ /* Foreground/Brand/on-brand-secondary - Brand */
1546
+ /* Foreground color used on Brand's primary color (non neutral color) */
1677
1547
  --foreground-brand-on-secondary: #141414;
1678
- /* Foreground/Brand/brand-primary - Theme - Better Home & Garden */
1548
+ /* Foreground/Brand/brand-primary - Brand */
1549
+ /* Foreground text and icons that match the brand's primary color */
1679
1550
  --foreground-brand-primary: #7db67c;
1680
1551
  /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1681
1552
  --foreground-brand-primary-depth: #88bc88;
1682
- /* Foreground/Brand/brand-secondary - Theme - Better Home & Garden */
1553
+ /* Foreground/Brand/brand-secondary - Brand */
1554
+ /* Foreground text and icons that match the brand's secondary color */
1683
1555
  --foreground-brand-secondary: #eba691;
1684
- /* Foreground/Brand/brand-secondary-depth - Theme - Better Home & Garden */
1556
+ /* Foreground/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1685
1557
  --foreground-brand-secondary-depth: #eba691;
1686
- /* Foreground/Link text/default - Theme - Better Home & Garden */
1558
+ /* Foreground/Link text/default - Brand */
1687
1559
  --foreground-link-text-default: #7a9ee1;
1688
- /* Foreground/Link text/default-disabled - Theme - Better Home & Garden */
1560
+ /* Foreground/Link text/default-disabled - Brand */
1689
1561
  --foreground-link-text-default-disabled: #14387b;
1690
- /* Foreground/Link text/default-hovered - Theme - Better Home & Garden */
1562
+ /* Foreground/Link text/default-hovered - Theme - Better Homes & Gardens */
1691
1563
  --foreground-link-text-default-hovered: #90afe6;
1692
- /* Foreground/Link text/default-pressed - Theme - Better Home & Garden */
1564
+ /* Foreground/Link text/default-pressed - Theme - Better Homes & Gardens */
1693
1565
  --foreground-link-text-default-pressed: #a6bfeb;
1694
- /* Foreground/Link text/default-visited - Theme - Better Home & Garden */
1566
+ /* Foreground/Link text/default-visited - Brand */
1695
1567
  --foreground-link-text-default-visited: #af8baf;
1696
- /* Foreground/Link text/subtle-disabled - Theme - Better Home & Garden */
1568
+ /* Foreground/Link text/subtle-disabled - Brand */
1697
1569
  --foreground-link-text-subtle-disabled: #4d4d4d;
1698
- /* Foreground/Link text/subtle-hovered - Theme - Better Home & Garden */
1570
+ /* Foreground/Link text/subtle-hovered - Theme - Better Homes & Gardens */
1699
1571
  --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 */
1572
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Better Homes & Gardens */
1573
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1574
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Better Homes & Gardens */
1575
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1576
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1577
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1578
+ /* Foreground/Link text/subtle-pressed - Theme - Better Homes & Gardens */
1703
1579
  --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 */
1580
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1581
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1582
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1707
1583
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1708
- /* Foreground/Neutral/on-surface - Theme - Better Home & Garden */
1584
+ /* Foreground/Neutral/inverse-on-surface - Theme - Better Homes & Gardens */
1585
+ --foreground-neutral-inverse-on-surface: #fafafa;
1586
+ /* Foreground/Neutral/on-color - Brand */
1587
+ /* Interactive controls */
1588
+ --foreground-neutral-on-color: #ffffff;
1589
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1590
+ /* Text and icons against inverse surface */
1591
+ --foreground-neutral-on-inverse-surface: #fafafa;
1592
+ /* Foreground/Neutral/on-surface - Brand */
1593
+ /* Default foreground text and icons against any surface color */
1709
1594
  --foreground-neutral-on-surface: #fafafa;
1710
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Better Home & Garden */
1595
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1596
+ /* Secondary foreground color for icons and text */
1711
1597
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1712
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Better Home & Garden */
1598
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1599
+ /* Tertiary foreground color for icons and text */
1713
1600
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1714
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Better Home & Garden */
1601
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1602
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1715
1603
  --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 */
1604
+ /* Foreground/Neutral/skeleton-element - Brand */
1605
+ --foreground-neutral-skeleton-element: #333333;
1606
+ /* Foreground/Spectrum/blue - Theme - Better Homes & Gardens */
1719
1607
  --foreground-spectrum-blue: #88aff7;
1720
- /* Foreground/Spectrum/green - Theme - Better Home & Garden */
1608
+ /* Foreground/Spectrum/green - Theme - Better Homes & Gardens */
1721
1609
  --foreground-spectrum-green: #87bd9f;
1722
- /* Foreground/Spectrum/lime - Theme - Better Home & Garden */
1610
+ /* Foreground/Spectrum/lime - Theme - Better Homes & Gardens */
1723
1611
  --foreground-spectrum-lime: #dce28f;
1724
- /* Foreground/Spectrum/magenta - Theme - Better Home & Garden */
1612
+ /* Foreground/Spectrum/magenta - Theme - Better Homes & Gardens */
1725
1613
  --foreground-spectrum-magenta: #e07aed;
1726
- /* Foreground/Spectrum/orange - Theme - Better Home & Garden */
1614
+ /* Foreground/Spectrum/orange - Brand */
1727
1615
  --foreground-spectrum-orange: #f6a874;
1728
- /* Foreground/Spectrum/pink - Theme - Better Home & Garden */
1616
+ /* Foreground/Spectrum/pink - Theme - Better Homes & Gardens */
1729
1617
  --foreground-spectrum-pink: #ea86b9;
1730
- /* Foreground/Spectrum/purple - Theme - Better Home & Garden */
1618
+ /* Foreground/Spectrum/purple - Theme - Better Homes & Gardens */
1731
1619
  --foreground-spectrum-purple: #c8a6f9;
1732
- /* Foreground/Spectrum/red - Theme - Better Home & Garden */
1620
+ /* Foreground/Spectrum/red - Brand */
1733
1621
  --foreground-spectrum-red: #ea93a0;
1734
- /* Foreground/Spectrum/teal - Theme - Better Home & Garden */
1622
+ /* Foreground/Spectrum/teal - Theme - Better Homes & Gardens */
1735
1623
  --foreground-spectrum-teal: #74bbb4;
1736
- /* Foreground/Spectrum/yellow - Theme - Better Home & Garden */
1624
+ /* Foreground/Spectrum/yellow - Theme - Better Homes & Gardens */
1737
1625
  --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 */
1626
+ /* Interactions/brand-disabled-opacity - Theme - Better Homes & Gardens */
1751
1627
  --interactions-brand-disabled-opacity: #ffffff0f;
1752
- /* Interactions/brand-hover-opacity - Theme - Better Home & Garden */
1628
+ /* Interactions/brand-hover-opacity - Theme - Better Homes & Gardens */
1753
1629
  --interactions-brand-hover-opacity: #ffffff1a;
1754
- /* Interactions/brand-press-opacity - Theme - Better Home & Garden */
1630
+ /* Interactions/brand-press-opacity - Theme - Better Homes & Gardens */
1755
1631
  --interactions-brand-press-opacity: #ffffff33;
1756
- /* Interactions/disabled-opacity - Theme - Better Home & Garden */
1632
+ /* Interactions/disabled-opacity - Theme - Better Homes & Gardens */
1757
1633
  --interactions-disabled-opacity: #ffffff0f;
1758
- /* Interactions/hover-opacity - Theme - Better Home & Garden */
1634
+ /* Interactions/hover-opacity - Theme - Better Homes & Gardens */
1759
1635
  --interactions-hover-opacity: #ffffff14;
1760
- /* Interactions/link-active-opacity - Theme - Better Home & Garden */
1636
+ /* Interactions/link-active-opacity - Brand */
1761
1637
  --interactions-link-active-opacity: #ffffff4d;
1762
- /* Interactions/neutral-hover-opacity - Theme - Better Home & Garden */
1638
+ /* Interactions/neutral-hover-opacity - Brand */
1639
+ /* surfaces using neutral tones */
1763
1640
  --interactions-neutral-hover-opacity: #ffffff14;
1764
- /* Interactions/neutral-press-opacity - Theme - Better Home & Garden */
1641
+ /* Interactions/neutral-press-opacity - Brand */
1642
+ /* surfaces using neutral tones */
1765
1643
  --interactions-neutral-press-opacity: #ffffff29;
1766
- /* Interactions/press-opacity - Theme - Better Home & Garden */
1644
+ /* Interactions/press-opacity - Theme - Better Homes & Gardens */
1767
1645
  --interactions-press-opacity: #ffffff29;
1768
- /* Interactions/primary-disabled-opacity - Theme - Better Home & Garden */
1646
+ /* Interactions/primary-disabled-opacity - Theme - Better Homes & Gardens */
1769
1647
  --interactions-primary-disabled-opacity: #7db67c1f;
1770
- /* Interactions/primary-hover-opacity - Theme - Better Home & Garden */
1648
+ /* Interactions/primary-hover-opacity - Theme - Better Homes & Gardens */
1771
1649
  --interactions-primary-hover-opacity: #7db67c1a;
1772
- /* Interactions/primary-press-opacity - Theme - Better Home & Garden */
1650
+ /* Interactions/primary-press-opacity - Theme - Better Homes & Gardens */
1773
1651
  --interactions-primary-press-opacity: #7db67c33;
1774
- /* Shadow/shadow-10 - Theme - Better Home & Garden */
1652
+ /* Shadow/shadow-10 - Theme - Better Homes & Gardens */
1775
1653
  --shadow-10: #6161611a;
1776
- /* Shadow/shadow-12 - Theme - Better Home & Garden */
1654
+ /* Shadow/shadow-12 - Theme - Better Homes & Gardens */
1777
1655
  --shadow-12: #6161611f;
1778
- /* Shadow/shadow-15 - Theme - Better Home & Garden */
1656
+ /* Shadow/shadow-15 - Theme - Better Homes & Gardens */
1779
1657
  --shadow-15: #61616126;
1780
- /* Shadow/shadow-25 - Theme - Better Home & Garden */
1658
+ /* Shadow/shadow-25 - Theme - Better Homes & Gardens */
1781
1659
  --shadow-25: #61616140;
1782
- /* Shadow/shadow-32 - Theme - Better Home & Garden */
1660
+ /* Shadow/shadow-32 - Theme - Better Homes & Gardens */
1783
1661
  --shadow-32: #61616152;
1784
- /* Shadow/inner-shadow - Theme - Better Home & Garden */
1662
+ /* Shadow/inner-shadow - Brand */
1785
1663
  --shadow-inner: #000000;
1786
1664
  /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1787
1665
  --shadow-inner-100: #000000;
1788
- /* Shadow/variant-01 - Theme - Better Home & Garden */
1666
+ /* Shadow/variant-01 - Brand */
1789
1667
  --shadow-variant-01: #6161611a;
1790
- /* Shadow/variant-02 - Theme - Better Home & Garden */
1668
+ /* Shadow/variant-02 - Brand */
1791
1669
  --shadow-variant-02: #6161611f;
1792
- /* Shadow/variant-03 - Theme - Better Home & Garden */
1670
+ /* Shadow/variant-03 - Brand */
1793
1671
  --shadow-variant-03: #61616126;
1794
- /* Shadow/variant-04 - Theme - Better Home & Garden */
1672
+ /* Shadow/variant-04 - Brand */
1795
1673
  --shadow-variant-04: #61616140;
1796
- /* Shadow/variant-05 - Theme - Better Home & Garden */
1674
+ /* Shadow/variant-05 - Brand */
1797
1675
  --shadow-variant-05: #61616152;
1798
- /* Status/error - Theme - Denali & Boss */
1676
+ /* Status/error - Brand */
1677
+ /* Foreground error text and icons */
1799
1678
  --status-error: #e26b7d;
1800
1679
  /* Status/information - Theme - Better Home & Garden */
1801
1680
  --status-information: #5d92f5;
1802
- /* Status/informational - Theme - Better Home & Garden */
1681
+ /* Status/informational - Brand */
1682
+ /* Foreground informational text and icons */
1803
1683
  --status-informational: #5d92f5;
1804
- /* Status/on-success - Theme - Better Home & Garden */
1684
+ /* Status/on-error - Brand */
1685
+ /* Foreground error text and icons */
1686
+ --status-on-error: #ffffff;
1687
+ /* Status/on-information - Theme - Better Home & Garden */
1688
+ --status-on-information: #ffffff;
1689
+ /* Status/on-informational - Brand */
1690
+ /* Foreground informational text and icons */
1691
+ --status-on-informational: #ffffff;
1692
+ /* Status/on-success - Brand */
1693
+ /* Foreground success icons and text */
1805
1694
  --status-on-success: #141414;
1806
- /* Status/success - Theme - Better Home & Garden */
1695
+ /* Status/on-warning - Brand */
1696
+ /* Foreground warning icons */
1697
+ --status-on-warning: #141414;
1698
+ /* Status/success - Brand */
1699
+ /* Foreground success icons and text */
1807
1700
  --status-success: #519f73;
1808
- /* Status/warning - Theme - Better Home & Garden */
1701
+ /* Status/warning - Brand */
1702
+ /* Foreground warning icons */
1809
1703
  --status-warning: #f8cd63;
1810
- /* Stroke/Brand/brand-primary - Theme - Better Home & Garden */
1704
+ /* Stroke/Brand/brand-primary - Brand */
1705
+ /* Outline variant - decorative elements such as dividers */
1811
1706
  --stroke-brand-primary: #7db67c;
1812
- /* Stroke/Brand/brand-primary-depth - Theme - Better Home & Garden */
1707
+ /* Stroke/Brand/brand-primary-depth - Brand */
1708
+ /* Outline variant - decorative elements such as dividers */
1813
1709
  --stroke-brand-primary-depth: #88bc88;
1814
1710
  /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1815
1711
  --stroke-brand-secondary: #f0bcac;
1816
- /* Stroke/Brand/brand-secondary-depth - Theme - Better Home & Garden */
1712
+ /* Stroke/Brand/brand-secondary-depth - Theme - Better Homes & Gardens */
1817
1713
  --stroke-brand-secondary-depth: #eba691;
1818
- /* Stroke/Neutral/neutral-base - Theme - Better Home & Garden */
1714
+ /* Stroke/Neutral/neutral-base - Brand */
1715
+ /* For control components */
1819
1716
  --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 */
1717
+ /* Stroke/Neutral/disabled-dark - Brand */
1718
+ /* Disabled outline separating the fill and surface background */
1719
+ --stroke-neutral-disabled-dark: #3d3d3d;
1720
+ /* Stroke/Neutral/disabled-light - Brand */
1721
+ /* Disabled outline separating the fill and surface background */
1823
1722
  --stroke-neutral-disabled-light: #4d4d4d;
1824
- /* Stroke/Neutral/focus - Theme - Better Home & Garden */
1723
+ /* Stroke/Neutral/focus - Brand */
1724
+ /* Highlight focus element */
1825
1725
  --stroke-neutral-focus: #ffffff;
1826
- /* Stroke/Neutral/neutral-high - Theme - Better Home & Garden */
1726
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1727
+ /* Highlight focus element */
1728
+ --stroke-neutral-focus-on-inverse: #ffffff;
1729
+ /* Stroke/Neutral/neutral-high - Brand */
1827
1730
  --stroke-neutral-high: #fafafa;
1828
- /* Stroke/Neutral/neutral-high-contrast - Theme - Better Home & Garden */
1731
+ /* Stroke/Neutral/neutral-high-contrast - Theme - Better Homes & Gardens */
1829
1732
  --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 */
1733
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - Better Homes & Gardens */
1734
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1735
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - Better Homes & Gardens */
1839
1736
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1840
- /* Stroke/Neutral/Interactions/focus - Theme - Better Home & Garden */
1737
+ /* Stroke/Neutral/Interactions/focus - Theme - Better Homes & Gardens */
1841
1738
  --stroke-neutral-interactions-focus: #ffffff;
1842
- /* Stroke/Neutral/neutral-low - Theme - Better Home & Garden */
1739
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Better Homes & Gardens */
1740
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1741
+ /* Stroke/Neutral/neutral-low - Brand */
1742
+ /* Outline variant - decorative elements such as dividers */
1843
1743
  --stroke-neutral-low: #4d4d4d;
1844
- /* Stroke/Neutral/neutral-low-contrast - Theme - Better Home & Garden */
1744
+ /* Stroke/Neutral/neutral-low-contrast - Theme - Better Homes & Gardens */
1845
1745
  --stroke-neutral-low-contrast: #4d4d4d;
1846
- /* Surface/Brand/primary - Theme - Better Home & Garden */
1746
+ /* Surface/Brand/primary - Brand */
1847
1747
  --surface-brand-primary: #7db67c;
1848
- /* Surface/Brand/primary-highlight - Theme - Better Home & Garden */
1748
+ /* Surface/Brand/primary-highlight - Theme - Better Homes & Gardens */
1849
1749
  --surface-brand-primary-highlight: #0a220a;
1850
- /* Surface/Brand/secondary - Theme - Better Home & Garden */
1750
+ /* Surface/Brand/secondary - Brand */
1851
1751
  --surface-brand-secondary: #f0bcac;
1852
- /* Surface/Brand/secondary-highlight - Theme - Better Home & Garden */
1752
+ /* Surface/Brand/secondary-highlight - Theme - Better Homes & Gardens */
1853
1753
  --surface-brand-secondary-highlight: #371b12;
1854
1754
  /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1855
1755
  --surface-neutral-interactions-dark-disabled: #474747;
1856
1756
  /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1857
1757
  --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 */
1758
+ /* Surface/Neutral/inverse - Brand */
1759
+ /* Inverted. Use for toasts notification & snackbars */
1861
1760
  --surface-neutral-inverse: #383838;
1862
1761
  /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1863
1762
  --surface-neutral-inverse-dark: #383838;
1864
- /* Surface/Neutral/inverse-light - Theme - Better Home & Garden */
1763
+ /* Surface/Neutral/inverse-light - Theme - Better Homes & Gardens */
1865
1764
  --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 */
1765
+ /* Surface/Neutral/T1-base - Brand */
1869
1766
  --surface-neutral-t1-base: #1f1f1f;
1870
- /* Surface/Neutral/T2-lowest - Theme - Better Home & Garden */
1767
+ /* Surface/Neutral/T2-lowest - Brand */
1871
1768
  --surface-neutral-t2-lowest: #2e2e2e;
1872
- /* Surface/Neutral/T3-low - Theme - Better Home & Garden */
1769
+ /* Surface/Neutral/T3-low - Brand */
1770
+ /* Navigations, app bar etc */
1873
1771
  --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 */
1772
+ /* Surface/Neutral/T4-high - Brand */
1773
+ /* Navigations, app bar etc */
1774
+ --surface-neutral-t4-high: #7a7a7a;
1775
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1776
+ --surface-neutral-t4-high-2: #7a7a7a;
1777
+ /* Surface/Neutral/transparent - Brand */
1778
+ --surface-neutral-transparent: #ffffff00;
1779
+ /* Surface/Spectrum/blue - Theme - Better Homes & Gardens */
1877
1780
  --surface-spectrum-blue: #0e2754;
1878
- /* Surface/Spectrum/green - Theme - Better Home & Garden */
1781
+ /* Surface/Spectrum/green - Theme - Better Homes & Gardens */
1879
1782
  --surface-spectrum-green: #0d2f1c;
1880
- /* Surface/Spectrum/lime - Theme - Better Home & Garden */
1783
+ /* Surface/Spectrum/lime - Theme - Better Homes & Gardens */
1881
1784
  --surface-spectrum-lime: #434712;
1882
- /* Surface/Spectrum/magenta - Theme - Better Home & Garden */
1785
+ /* Surface/Spectrum/magenta - Theme - Better Homes & Gardens */
1883
1786
  --surface-spectrum-magenta: #45054e;
1884
1787
  /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1885
1788
  --surface-spectrum-orange: #532201;
1886
- /* Surface/Spectrum/pink - Theme - Better Home & Garden */
1789
+ /* Surface/Spectrum/pink - Theme - Better Homes & Gardens */
1887
1790
  --surface-spectrum-pink: #4c0c2d;
1888
- /* Surface/Spectrum/purple - Theme - Better Home & Garden */
1791
+ /* Surface/Spectrum/purple - Theme - Better Homes & Gardens */
1889
1792
  --surface-spectrum-purple: #220053;
1890
- /* Surface/Spectrum/red - Theme - Better Home & Garden */
1793
+ /* Surface/Spectrum/red - Theme - Better Homes & Gardens */
1891
1794
  --surface-spectrum-red: #4c141d;
1892
- /* Surface/Spectrum/teal - Theme - Better Home & Garden */
1795
+ /* Surface/Spectrum/teal - Theme - Better Homes & Gardens */
1893
1796
  --surface-spectrum-teal: #012e2a;
1894
- /* Surface/Spectrum/yellow - Theme - Better Home & Garden */
1797
+ /* Surface/Spectrum/yellow - Theme - Better Homes & Gardens */
1895
1798
  --surface-spectrum-yellow: #564210;
1896
1799
  }
1897
1800
  `));