@bspk/ui 1.3.29 → 1.4.0

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