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