@bspk/ui 1.3.29 → 1.4.0

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