@bspk/ui 1.3.30 → 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 (65) hide show
  1. package/build.ts +1 -2
  2. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.d.ts +11 -0
  3. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js +14 -0
  4. package/dist/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.js.map +1 -0
  5. package/dist/components/StylesProviderAgentWorkplace/index.d.ts +1 -0
  6. package/dist/components/StylesProviderAgentWorkplace/index.js +2 -0
  7. package/dist/components/StylesProviderAgentWorkplace/index.js.map +1 -0
  8. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.d.ts +11 -0
  9. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js +14 -0
  10. package/dist/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.js.map +1 -0
  11. package/dist/components/StylesProviderBrokerWorkplace/index.d.ts +1 -0
  12. package/dist/components/StylesProviderBrokerWorkplace/index.js +2 -0
  13. package/dist/components/StylesProviderBrokerWorkplace/index.js.map +1 -0
  14. package/dist/components/StylesProviderDemo/brandsCss.js +10 -9
  15. package/dist/components/StylesProviderDemo/brandsCss.js.map +1 -1
  16. package/dist/components/StylesProviderDemo/exampleCss.js +5 -5
  17. package/dist/components/StylesProviderDemo/exampleCss.js.map +1 -1
  18. package/dist/components/Table/Table.js +1 -1
  19. package/dist/components/Table/Table.js.map +1 -1
  20. package/dist/styles/agent-workplace.css +1794 -0
  21. package/dist/styles/{denali-boss.css.js → agent-workplace.css.js} +763 -848
  22. package/dist/styles/anywhere.css +569 -654
  23. package/dist/styles/anywhere.css.js +569 -654
  24. package/dist/styles/better-homes-gardens.css +622 -719
  25. package/dist/styles/better-homes-gardens.css.js +622 -719
  26. package/dist/styles/broker-workplace.css +1794 -0
  27. package/dist/styles/broker-workplace.css.js +1799 -0
  28. package/dist/styles/cartus.css +541 -638
  29. package/dist/styles/cartus.css.js +541 -638
  30. package/dist/styles/century-21.css +570 -663
  31. package/dist/styles/century-21.css.js +570 -663
  32. package/dist/styles/coldwell-banker.css +534 -631
  33. package/dist/styles/coldwell-banker.css.js +534 -631
  34. package/dist/styles/corcoran.css +536 -637
  35. package/dist/styles/corcoran.css.js +536 -637
  36. package/dist/styles/era.css +546 -641
  37. package/dist/styles/era.css.js +546 -641
  38. package/dist/styles/example.css +1898 -0
  39. package/dist/styles/example.css.js +1903 -0
  40. package/dist/styles/sothebys.css +543 -638
  41. package/dist/styles/sothebys.css.js +543 -638
  42. package/dist/types/common.d.ts +2 -1
  43. package/dist/types/common.js.map +1 -1
  44. package/package.json +7 -47
  45. package/src/components/StylesProviderAgentWorkplace/StylesProviderAgentWorkplace.tsx +15 -0
  46. package/src/components/StylesProviderAgentWorkplace/index.tsx +1 -0
  47. package/src/components/StylesProviderBrokerWorkplace/StylesProviderBrokerWorkplace.tsx +15 -0
  48. package/src/components/StylesProviderBrokerWorkplace/index.tsx +1 -0
  49. package/src/components/StylesProviderDemo/brandsCss.ts +13 -10
  50. package/src/components/StylesProviderDemo/exampleCss.ts +5 -5
  51. package/src/components/Table/Table.tsx +1 -1
  52. package/{dist/styles/denali-boss.css → src/styles/example.css} +401 -384
  53. package/src/types/common.ts +2 -10
  54. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.d.ts +0 -11
  55. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js +0 -14
  56. package/dist/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.js.map +0 -1
  57. package/dist/components/StylesProviderDenaliBoss/index.d.ts +0 -1
  58. package/dist/components/StylesProviderDenaliBoss/index.js +0 -2
  59. package/dist/components/StylesProviderDenaliBoss/index.js.map +0 -1
  60. package/dist/constants/brands.d.ts +0 -7
  61. package/dist/constants/brands.js +0 -43
  62. package/dist/constants/brands.js.map +0 -1
  63. package/src/components/StylesProviderDenaliBoss/StylesProviderDenaliBoss.tsx +0 -15
  64. package/src/components/StylesProviderDenaliBoss/index.tsx +0 -1
  65. package/src/constants/brands.ts +0 -49
package/dist/styles/broker-workplace.css ADDED
@@ -0,0 +1,1794 @@
1
+ /* Generated from figma export: 2026-02-02T17:54:13.533Z */
2
+
3
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
4
+ body {
5
+ font-family: var(--typeface);
6
+ }
7
+
8
+ :root {
9
+ /* Body/Base */
10
+ --body-base: 400 16px/24px var(--typeface);
11
+ /* Body/Base - line height */
12
+ --body-base-line-height: 24px;
13
+ /* Body/Base - size */
14
+ --body-base-size: 16px;
15
+ /* Body/Base - style */
16
+ --body-base-style: regular;
17
+ /* Body/Large */
18
+ --body-large: 400 18px/28px var(--typeface);
19
+ /* Body/Large - line height */
20
+ --body-large-line-height: 28px;
21
+ /* Body/Large - size */
22
+ --body-large-size: 18px;
23
+ /* Body/Large - style */
24
+ --body-large-style: regular;
25
+ /* Body/Small */
26
+ --body-small: 400 14px/20px var(--typeface);
27
+ /* Body/Small - line height */
28
+ --body-small-line-height: 20px;
29
+ /* Body/Small - size */
30
+ --body-small-size: 14px;
31
+ /* Body/Small - style */
32
+ --body-small-style: regular;
33
+ /* Body/X-Small */
34
+ --body-x-small: 400 12px/16px var(--typeface);
35
+ /* Body/X-Small - line height */
36
+ --body-x-small-line-height: 16px;
37
+ /* Body/X-Small - size */
38
+ --body-x-small-size: 12px;
39
+ /* Body/X-Small - style */
40
+ --body-x-small-style: regular;
41
+ /* Colors/Internal/pink-00-light - Global (primitives) */
42
+ --colors-internal-pink-00-light: #ff4f8d;
43
+ /* Colors/Internal/pink-50-dark - Global (primitives) */
44
+ --colors-internal-pink-50-dark: #802847;
45
+ /* Colors/Neutral/00 - Global (primitives) */
46
+ --colors-neutral-00: #000000;
47
+ /* Colors/Neutral/02 - Global (primitives) */
48
+ --colors-neutral-02: #050505;
49
+ /* Colors/Neutral/04 - Global (primitives) */
50
+ --colors-neutral-04: #0a0a0a;
51
+ /* Colors/Neutral/06 - Global (primitives) */
52
+ --colors-neutral-06: #0f0f0f;
53
+ /* Colors/Neutral/08 - Global (primitives) */
54
+ --colors-neutral-08: #141414;
55
+ /* Colors/Neutral/10 - Global (primitives) */
56
+ --colors-neutral-10: #1a1a1a;
57
+ /* Colors/Neutral/100 - Global (primitives) */
58
+ --colors-neutral-100: #ffffff;
59
+ /* Colors/Neutral/12 - Global (primitives) */
60
+ --colors-neutral-12: #1f1f1f;
61
+ /* Colors/Neutral/14 - Global (primitives) */
62
+ --colors-neutral-14: #242424;
63
+ /* Colors/Neutral/16 - Global (primitives) */
64
+ --colors-neutral-16: #292929;
65
+ /* Colors/Neutral/18 - Global (primitives) */
66
+ --colors-neutral-18: #2e2e2e;
67
+ /* Colors/Neutral/20 - Global (primitives) */
68
+ --colors-neutral-20: #333333;
69
+ /* Colors/Neutral/22 - Global (primitives) */
70
+ --colors-neutral-22: #383838;
71
+ /* Colors/Neutral/24 - Global (primitives) */
72
+ --colors-neutral-24: #3d3d3d;
73
+ /* Colors/Neutral/26 - Global (primitives) */
74
+ --colors-neutral-26: #424242;
75
+ /* Colors/Neutral/28 - Global (primitives) */
76
+ --colors-neutral-28: #474747;
77
+ /* Colors/Neutral/30 - Global (primitives) */
78
+ --colors-neutral-30: #4d4d4d;
79
+ /* Colors/Neutral/32 - Global (primitives) */
80
+ --colors-neutral-32: #525252;
81
+ /* Colors/Neutral/34 - Global (primitives) */
82
+ --colors-neutral-34: #575757;
83
+ /* Colors/Neutral/36 - Global (primitives) */
84
+ --colors-neutral-36: #5c5c5c;
85
+ /* Colors/Neutral/38 - Global (primitives) */
86
+ --colors-neutral-38: #616161;
87
+ /* Colors/Neutral/40 - Global (primitives) */
88
+ --colors-neutral-40: #666666;
89
+ /* Colors/Neutral/42 - Global (primitives) */
90
+ --colors-neutral-42: #6b6b6b;
91
+ /* Colors/Neutral/44 - Global (primitives) */
92
+ --colors-neutral-44: #707070;
93
+ /* Colors/Neutral/46 - Global (primitives) */
94
+ --colors-neutral-46: #757575;
95
+ /* Colors/Neutral/48 - Global (primitives) */
96
+ --colors-neutral-48: #7a7a7a;
97
+ /* Colors/Neutral/50 - Global (primitives) */
98
+ --colors-neutral-50: #808080;
99
+ /* Colors/Neutral/52 - Global (primitives) */
100
+ --colors-neutral-52: #858585;
101
+ /* Colors/Neutral/54 - Global (primitives) */
102
+ --colors-neutral-54: #8a8a8a;
103
+ /* Colors/Neutral/56 - Global (primitives) */
104
+ --colors-neutral-56: #8f8f8f;
105
+ /* Colors/Neutral/58 - Global (primitives) */
106
+ --colors-neutral-58: #949494;
107
+ /* Colors/Neutral/60 - Global (primitives) */
108
+ --colors-neutral-60: #999999;
109
+ /* Colors/Neutral/62 - Global (primitives) */
110
+ --colors-neutral-62: #9e9e9e;
111
+ /* Colors/Neutral/64 - Global (primitives) */
112
+ --colors-neutral-64: #a3a3a3;
113
+ /* Colors/Neutral/66 - Global (primitives) */
114
+ --colors-neutral-66: #a8a8a8;
115
+ /* Colors/Neutral/68 - Global (primitives) */
116
+ --colors-neutral-68: #adadad;
117
+ /* Colors/Neutral/70 - Global (primitives) */
118
+ --colors-neutral-70: #b3b3b3;
119
+ /* Colors/Neutral/72 - Global (primitives) */
120
+ --colors-neutral-72: #b8b8b8;
121
+ /* Colors/Neutral/74 - Global (primitives) */
122
+ --colors-neutral-74: #bdbdbd;
123
+ /* Colors/Neutral/76 - Global (primitives) */
124
+ --colors-neutral-76: #c2c2c2;
125
+ /* Colors/Neutral/78 - Global (primitives) */
126
+ --colors-neutral-78: #c7c7c7;
127
+ /* Colors/Neutral/80 - Global (primitives) */
128
+ --colors-neutral-80: #cccccc;
129
+ /* Colors/Neutral/82 - Global (primitives) */
130
+ --colors-neutral-82: #d1d1d1;
131
+ /* Colors/Neutral/84 - Global (primitives) */
132
+ --colors-neutral-84: #d6d6d6;
133
+ /* Colors/Neutral/86 - Global (primitives) */
134
+ --colors-neutral-86: #dbdbdb;
135
+ /* Colors/Neutral/88 - Global (primitives) */
136
+ --colors-neutral-88: #e0e0e0;
137
+ /* Colors/Neutral/90 - Global (primitives) */
138
+ --colors-neutral-90: #e6e6e6;
139
+ /* Colors/Neutral/92 - Global (primitives) */
140
+ --colors-neutral-92: #ebebeb;
141
+ /* Colors/Neutral/94 - Global (primitives) */
142
+ --colors-neutral-94: #f0f0f0;
143
+ /* Colors/Neutral/96 - Global (primitives) */
144
+ --colors-neutral-96: #f5f5f5;
145
+ /* Colors/Neutral/98 - Global (primitives) */
146
+ --colors-neutral-98: #fafafa;
147
+ /* Colors/Neutral/transparent - Global (primitives) */
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;
153
+ /* Colors/System/blue-dark - Global (primitives) */
154
+ --colors-system-blue-dark: #5d92f5;
155
+ /* Colors/System/blue-dark-bg - Global (primitives) */
156
+ --colors-system-blue-dark-bg: #0e2754;
157
+ /* Colors/System/blue-light - Global (primitives) */
158
+ --colors-system-blue-light: #276ef1;
159
+ /* Colors/System/blue-light-bg - Global (primitives) */
160
+ --colors-system-blue-light-bg: #dfe9fd;
161
+ /* Colors/System/green-dark - Global (primitives) */
162
+ --colors-system-green-dark: #519f73;
163
+ /* Colors/System/green-dark-bg - Global (primitives) */
164
+ --colors-system-green-dark-bg: #0d2f1c;
165
+ /* Colors/System/green-light - Global (primitives) */
166
+ --colors-system-green-light: #258750;
167
+ /* Colors/System/green-light-bg - Global (primitives) */
168
+ --colors-system-green-light-bg: #d3e7dc;
169
+ /* Colors/System/Links/00-default-light - Global (primitives) */
170
+ --colors-system-links-00-default-light: #215ecd;
171
+ /* Colors/System/Links/10-hover-light - Global (primitives) */
172
+ --colors-system-links-10-hover-light: #1e55b9;
173
+ /* Colors/System/Links/20-press-light - Global (primitives) */
174
+ --colors-system-links-20-press-light: #1a4ba4;
175
+ /* Colors/System/Links/30-active-dark - Global (primitives) */
176
+ --colors-system-links-30-active-dark: #648edc;
177
+ /* Colors/System/Links/30-active-light - Global (primitives) */
178
+ --colors-system-links-30-active-light: #174290;
179
+ /* Colors/System/Links/40-default-dark - Global (primitives) */
180
+ --colors-system-links-40-default-dark: #7a9ee1;
181
+ /* Colors/System/Links/40-disabled-dark - Global (primitives) */
182
+ --colors-system-links-40-disabled-dark: #14387b;
183
+ /* Colors/System/Links/40-disabled-light - Global (primitives) */
184
+ --colors-system-links-40-disabled-light: #7a9ee1;
185
+ /* Colors/System/Links/50-hover-dark - Global (primitives) */
186
+ --colors-system-links-50-hover-dark: #90afe6;
187
+ /* Colors/System/Links/60-press-dark - Global (primitives) */
188
+ --colors-system-links-60-press-dark: #a6bfeb;
189
+ /* Colors/System/red-dark - Global (primitives) */
190
+ --colors-system-red-dark: #e26b7d;
191
+ /* Colors/System/red-dark-bg - Global (primitives) */
192
+ --colors-system-red-dark-bg: #4c141d;
193
+ /* Colors/System/red-light - Global (primitives) */
194
+ --colors-system-red-light: #d83a52;
195
+ /* Colors/System/red-light-bg - Global (primitives) */
196
+ --colors-system-red-light-bg: #f9e1e9;
197
+ /* Colors/System/Spectrum/Data visual/azure-400 - Global (primitives) */
198
+ --colors-system-spectrum-data-visual-azure-400: #7fc4ec;
199
+ /* Colors/System/Spectrum/Data visual/azure-700 - Global (primitives) */
200
+ --colors-system-spectrum-data-visual-azure-700: #299de0;
201
+ /* Colors/System/Spectrum/Data visual/blackrose-1200 - Global (primitives) */
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;
205
+ /* Colors/System/Spectrum/Data visual/bronze-1100 - Global (primitives) */
206
+ --colors-system-spectrum-data-visual-bronze-1100: #794b34;
207
+ /* Colors/System/Spectrum/Data visual/bronze-800 - Global (primitives) */
208
+ --colors-system-spectrum-data-visual-bronze-800: #af9385;
209
+ /* Colors/System/Spectrum/Data visual/brown-1200 - Global (primitives) */
210
+ --colors-system-spectrum-data-visual-brown-1200: #7a2a0b;
211
+ /* Colors/System/Spectrum/Data visual/brown-900 - Global (primitives) */
212
+ --colors-system-spectrum-data-visual-brown-900: #b68a79;
213
+ /* Colors/System/Spectrum/Data visual/cadet-gray-1200 - Global (primitives) */
214
+ --colors-system-spectrum-data-visual-cadet-gray-1200: #094a53;
215
+ /* Colors/System/Spectrum/Data visual/cadet-gray-900 - Global (primitives) */
216
+ --colors-system-spectrum-data-visual-cadet-gray-900: #789ba0;
217
+ /* Colors/System/Spectrum/Data visual/cooper-500 - Global (primitives) */
218
+ --colors-system-spectrum-data-visual-cooper-500: #e6b297;
219
+ /* Colors/System/Spectrum/Data visual/cooper-800 - Global (primitives) */
220
+ --colors-system-spectrum-data-visual-cooper-800: #d67e51;
221
+ /* Colors/System/Spectrum/Data visual/gold-400 - Global (primitives) */
222
+ --colors-system-spectrum-data-visual-gold-400: #cdbe80;
223
+ /* Colors/System/Spectrum/Data visual/gold-700 - Global (primitives) */
224
+ --colors-system-spectrum-data-visual-gold-700: #ab922b;
225
+ /* Colors/System/Spectrum/Data visual/Gradient/opacity-black - Global (primitives) */
226
+ --colors-system-spectrum-data-visual-gradient-opacity-black: #1f1f1f4d;
227
+ /* Colors/System/Spectrum/Data visual/Gradient/opacity-white - Global (primitives) */
228
+ --colors-system-spectrum-data-visual-gradient-opacity-white: #ffffff4d;
229
+ /* Colors/System/Spectrum/Data visual/Highlight/azure-400-opacity - Global (primitives) */
230
+ --colors-system-spectrum-data-visual-highlight-azure-400-opacity: #7fc4ec4d;
231
+ /* Colors/System/Spectrum/Data visual/Highlight/azure-700-opacity - Global (primitives) */
232
+ --colors-system-spectrum-data-visual-highlight-azure-700-opacity: #299de04d;
233
+ /* Colors/System/Spectrum/Data visual/Highlight/blackrose-1200-opacity - Global (primitives) */
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;
237
+ /* Colors/System/Spectrum/Data visual/Highlight/bronze-1100-opacity - Global (primitives) */
238
+ --colors-system-spectrum-data-visual-highlight-bronze-1100-opacity: #794b344d;
239
+ /* Colors/System/Spectrum/Data visual/Highlight/bronze-800-opacity - Global (primitives) */
240
+ --colors-system-spectrum-data-visual-highlight-bronze-800-opacity: #af93854d;
241
+ /* Colors/System/Spectrum/Data visual/Highlight/brown-1200-opacity - Global (primitives) */
242
+ --colors-system-spectrum-data-visual-highlight-brown-1200-opacity: #7a2a0b4d;
243
+ /* Colors/System/Spectrum/Data visual/Highlight/brown-900-opacity - Global (primitives) */
244
+ --colors-system-spectrum-data-visual-highlight-brown-900-opacity: #b68a794d;
245
+ /* Colors/System/Spectrum/Data visual/Highlight/cadet-gray-1200-opacity - Global (primitives) */
246
+ --colors-system-spectrum-data-visual-highlight-cadet-gray-1200-opacity: #094a534d;
247
+ /* Colors/System/Spectrum/Data visual/Highlight/cadet-gray-900-opacity - Global (primitives) */
248
+ --colors-system-spectrum-data-visual-highlight-cadet-gray-900-opacity: #789ba04d;
249
+ /* Colors/System/Spectrum/Data visual/Highlight/cooper-500-opacity - Global (primitives) */
250
+ --colors-system-spectrum-data-visual-highlight-cooper-500-opacity: #e6b2974d;
251
+ /* Colors/System/Spectrum/Data visual/Highlight/cooper-800-opacity - Global (primitives) */
252
+ --colors-system-spectrum-data-visual-highlight-cooper-800-opacity: #d67e514d;
253
+ /* Colors/System/Spectrum/Data visual/Highlight/gold-400-opacity - Global (primitives) */
254
+ --colors-system-spectrum-data-visual-highlight-gold-400-opacity: #cdbe804d;
255
+ /* Colors/System/Spectrum/Data visual/Highlight/gold-700-opacity - Global (primitives) */
256
+ --colors-system-spectrum-data-visual-highlight-gold-700-opacity: #ab922b4d;
257
+ /* Colors/System/Spectrum/Data visual/Highlight/jade-600-opacity - Global (primitives) */
258
+ --colors-system-spectrum-data-visual-highlight-jade-600-opacity: #88c5af4d;
259
+ /* Colors/System/Spectrum/Data visual/Highlight/jade-900-opacity - Global (primitives) */
260
+ --colors-system-spectrum-data-visual-highlight-jade-900-opacity: #389e7a4d;
261
+ /* Colors/System/Spectrum/Data visual/Highlight/maroon-1200-opacity - Global (primitives) */
262
+ --colors-system-spectrum-data-visual-highlight-maroon-1200-opacity: #5309094d;
263
+ /* Colors/System/Spectrum/Data visual/Highlight/maroon-900-opacity - Global (primitives) */
264
+ --colors-system-spectrum-data-visual-highlight-maroon-900-opacity: #a984844d;
265
+ /* Colors/System/Spectrum/Data visual/Highlight/platinum-1000-opacity - Global (primitives) */
266
+ --colors-system-spectrum-data-visual-highlight-platinum-1000-opacity: #7f7f7f4d;
267
+ /* Colors/System/Spectrum/Data visual/Highlight/platinum-700-opacity - Global (primitives) */
268
+ --colors-system-spectrum-data-visual-highlight-platinum-700-opacity: #b2b2b24d;
269
+ /* Colors/System/Spectrum/Data visual/Highlight/sage-1200-opacity - Global (primitives) */
270
+ --colors-system-spectrum-data-visual-highlight-sage-1200-opacity: #2d33004d;
271
+ /* Colors/System/Spectrum/Data visual/Highlight/sage-900-opacity - Global (primitives) */
272
+ --colors-system-spectrum-data-visual-highlight-sage-900-opacity: #9699804d;
273
+ /* Colors/System/Spectrum/Data visual/Highlight/tanzanite-1200-opacity - Global (primitives) */
274
+ --colors-system-spectrum-data-visual-highlight-tanzanite-1200-opacity: #0a466c4d;
275
+ /* Colors/System/Spectrum/Data visual/Highlight/tanzanite-900-opacity - Global (primitives) */
276
+ --colors-system-spectrum-data-visual-highlight-tanzanite-900-opacity: #7899ae4d;
277
+ /* Colors/System/Spectrum/Data visual/Highlight/violet-1200-opacity - Global (primitives) */
278
+ --colors-system-spectrum-data-visual-highlight-violet-1200-opacity: #4334794d;
279
+ /* Colors/System/Spectrum/Data visual/Highlight/violet-900-opacity - Global (primitives) */
280
+ --colors-system-spectrum-data-visual-highlight-violet-900-opacity: #a19abc4d;
281
+ /* Colors/System/Spectrum/Data visual/jade-600 - Global (primitives) */
282
+ --colors-system-spectrum-data-visual-jade-600: #88c5af;
283
+ /* Colors/System/Spectrum/Data visual/jade-900 - Global (primitives) */
284
+ --colors-system-spectrum-data-visual-jade-900: #389e7a;
285
+ /* Colors/System/Spectrum/Data visual/maroon-1200 - Global (primitives) */
286
+ --colors-system-spectrum-data-visual-maroon-1200: #530909;
287
+ /* Colors/System/Spectrum/Data visual/maroon-900 - Global (primitives) */
288
+ --colors-system-spectrum-data-visual-maroon-900: #a98484;
289
+ /* Colors/System/Spectrum/Data visual/platinum-1000 - Global (primitives) */
290
+ --colors-system-spectrum-data-visual-platinum-1000: #7f7f7f;
291
+ /* Colors/System/Spectrum/Data visual/platinum-700 - Global (primitives) */
292
+ --colors-system-spectrum-data-visual-platinum-700: #b2b2b2;
293
+ /* Colors/System/Spectrum/Data visual/sage-1200 - Global (primitives) */
294
+ --colors-system-spectrum-data-visual-sage-1200: #2d3300;
295
+ /* Colors/System/Spectrum/Data visual/sage-900 - Global (primitives) */
296
+ --colors-system-spectrum-data-visual-sage-900: #969980;
297
+ /* Colors/System/Spectrum/Data visual/tanzanite-1200 - Global (primitives) */
298
+ --colors-system-spectrum-data-visual-tanzanite-1200: #0a466c;
299
+ /* Colors/System/Spectrum/Data visual/tanzanite-900 - Global (primitives) */
300
+ --colors-system-spectrum-data-visual-tanzanite-900: #7899ae;
301
+ /* Colors/System/Spectrum/Data visual/violet-1200 - Global (primitives) */
302
+ --colors-system-spectrum-data-visual-violet-1200: #433479;
303
+ /* Colors/System/Spectrum/Data visual/violet-900 - Global (primitives) */
304
+ --colors-system-spectrum-data-visual-violet-900: #a19abc;
305
+ /* Colors/System/Spectrum/Depth/45-blue-dark - Global (primitives) */
306
+ --colors-system-spectrum-depth-45-blue-dark: #88aff7;
307
+ /* Colors/System/Spectrum/Depth/45-green-dark - Global (primitives) */
308
+ --colors-system-spectrum-depth-45-green-dark: #87bd9f;
309
+ /* Colors/System/Spectrum/Depth/45-lime-dark - Global (primitives) */
310
+ --colors-system-spectrum-depth-45-lime-dark: #dce28f;
311
+ /* Colors/System/Spectrum/Depth/45-magenta-dark - Global (primitives) */
312
+ --colors-system-spectrum-depth-45-magenta-dark: #e07aed;
313
+ /* Colors/System/Spectrum/Depth/45-orange-dark - Global (primitives) */
314
+ --colors-system-spectrum-depth-45-orange-dark: #f6a874;
315
+ /* Colors/System/Spectrum/Depth/45-pink-dark - Global (primitives) */
316
+ --colors-system-spectrum-depth-45-pink-dark: #ea86b9;
317
+ /* Colors/System/Spectrum/Depth/45-purple-dark - Global (primitives) */
318
+ --colors-system-spectrum-depth-45-purple-dark: #c8a6f9;
319
+ /* Colors/System/Spectrum/Depth/45-red-dark - Global (primitives) */
320
+ --colors-system-spectrum-depth-45-red-dark: #ea93a0;
321
+ /* Colors/System/Spectrum/Depth/45-teal-dark - Global (primitives) */
322
+ --colors-system-spectrum-depth-45-teal-dark: #74bbb4;
323
+ /* Colors/System/Spectrum/Depth/45-yellow-dark - Global (primitives) */
324
+ --colors-system-spectrum-depth-45-yellow-dark: #fada8d;
325
+ /* Colors/System/Spectrum/Depth/50-blue-light - Global (primitives) */
326
+ --colors-system-spectrum-depth-50-blue-light: #143778;
327
+ /* Colors/System/Spectrum/Depth/50-green-light - Global (primitives) */
328
+ --colors-system-spectrum-depth-50-green-light: #134428;
329
+ /* Colors/System/Spectrum/Depth/50-lime-light - Global (primitives) */
330
+ --colors-system-spectrum-depth-50-lime-light: #60651a;
331
+ /* Colors/System/Spectrum/Depth/50-magenta-light - Global (primitives) */
332
+ --colors-system-spectrum-depth-50-magenta-light: #63076f;
333
+ /* Colors/System/Spectrum/Depth/50-orange-light - Global (primitives) */
334
+ --colors-system-spectrum-depth-50-orange-light: #773001;
335
+ /* Colors/System/Spectrum/Depth/50-pink-light - Global (primitives) */
336
+ --colors-system-spectrum-depth-50-pink-light: #6c1240;
337
+ /* Colors/System/Spectrum/Depth/50-purple-light - Global (primitives) */
338
+ --colors-system-spectrum-depth-50-purple-light: #310077;
339
+ /* Colors/System/Spectrum/Depth/50-red-light - Global (primitives) */
340
+ --colors-system-spectrum-depth-50-red-light: #6c1d29;
341
+ /* Colors/System/Spectrum/Depth/50-teal-light - Global (primitives) */
342
+ --colors-system-spectrum-depth-50-teal-light: #01413c;
343
+ /* Colors/System/Spectrum/Depth/50-yellow-light - Global (primitives) */
344
+ --colors-system-spectrum-depth-50-yellow-light: #7b5e18;
345
+ /* Colors/System/Spectrum/Highlight/65-blue-dark - Global (primitives) */
346
+ --colors-system-spectrum-highlight-65-blue-dark: #0e2754;
347
+ /* Colors/System/Spectrum/Highlight/65-green-dark - Global (primitives) */
348
+ --colors-system-spectrum-highlight-65-green-dark: #0d2f1c;
349
+ /* Colors/System/Spectrum/Highlight/65-lime-dark - Global (primitives) */
350
+ --colors-system-spectrum-highlight-65-lime-dark: #434712;
351
+ /* Colors/System/Spectrum/Highlight/65-magenta-dark - Global (primitives) */
352
+ --colors-system-spectrum-highlight-65-magenta-dark: #45054e;
353
+ /* Colors/System/Spectrum/Highlight/65-orange-dark - Global (primitives) */
354
+ --colors-system-spectrum-highlight-65-orange-dark: #532201;
355
+ /* Colors/System/Spectrum/Highlight/65-pink-dark - Global (primitives) */
356
+ --colors-system-spectrum-highlight-65-pink-dark: #4c0c2d;
357
+ /* Colors/System/Spectrum/Highlight/65-purple-dark - Global (primitives) */
358
+ --colors-system-spectrum-highlight-65-purple-dark: #220053;
359
+ /* Colors/System/Spectrum/Highlight/65-red-dark - Global (primitives) */
360
+ --colors-system-spectrum-highlight-65-red-dark: #4c141d;
361
+ /* Colors/System/Spectrum/Highlight/65-teal-dark - Global (primitives) */
362
+ --colors-system-spectrum-highlight-65-teal-dark: #012e2a;
363
+ /* Colors/System/Spectrum/Highlight/65-yellow-dark - Global (primitives) */
364
+ --colors-system-spectrum-highlight-65-yellow-dark: #564210;
365
+ /* Colors/System/Spectrum/Highlight/85-blue-light - Global (primitives) */
366
+ --colors-system-spectrum-highlight-85-blue-light: #dfe9fd;
367
+ /* Colors/System/Spectrum/Highlight/85-green-light - Global (primitives) */
368
+ --colors-system-spectrum-highlight-85-green-light: #deede5;
369
+ /* Colors/System/Spectrum/Highlight/85-lime-light - Global (primitives) */
370
+ --colors-system-spectrum-highlight-85-lime-light: #f6f7e0;
371
+ /* Colors/System/Spectrum/Highlight/85-magenta-light - Global (primitives) */
372
+ --colors-system-spectrum-highlight-85-magenta-light: #f6dbfa;
373
+ /* Colors/System/Spectrum/Highlight/85-orange-light - Global (primitives) */
374
+ --colors-system-spectrum-highlight-85-orange-light: #fce7d9;
375
+ /* Colors/System/Spectrum/Highlight/85-pink-light - Global (primitives) */
376
+ --colors-system-spectrum-highlight-85-pink-light: #f9deec;
377
+ /* Colors/System/Spectrum/Highlight/85-purple-light - Global (primitives) */
378
+ --colors-system-spectrum-highlight-85-purple-light: #e7d9fc;
379
+ /* Colors/System/Spectrum/Highlight/85-red-light - Global (primitives) */
380
+ --colors-system-spectrum-highlight-85-red-light: #f9e1e5;
381
+ /* Colors/System/Spectrum/Highlight/85-teal-light - Global (primitives) */
382
+ --colors-system-spectrum-highlight-85-teal-light: #d9eceb;
383
+ /* Colors/System/Spectrum/Highlight/85-yellow-light - Global (primitives) */
384
+ --colors-system-spectrum-highlight-85-yellow-light: #fef5e0;
385
+ /* Colors/System/Spectrum/Vibrant/00-blue-light - Global (primitives) */
386
+ --colors-system-spectrum-vibrant-00-blue-light: #276ef1;
387
+ /* Colors/System/Spectrum/Vibrant/00-green-light - Global (primitives) */
388
+ --colors-system-spectrum-vibrant-00-green-light: #258750;
389
+ /* Colors/System/Spectrum/Vibrant/00-lime-light - Global (primitives) */
390
+ --colors-system-spectrum-vibrant-00-lime-light: #c0ca33;
391
+ /* Colors/System/Spectrum/Vibrant/00-magenta-light - Global (primitives) */
392
+ --colors-system-spectrum-vibrant-00-magenta-light: #c60ede;
393
+ /* Colors/System/Spectrum/Vibrant/00-orange-light - Global (primitives) */
394
+ --colors-system-spectrum-vibrant-00-orange-light: #ee6002;
395
+ /* Colors/System/Spectrum/Vibrant/00-pink-light - Global (primitives) */
396
+ --colors-system-spectrum-vibrant-00-pink-light: #d82380;
397
+ /* Colors/System/Spectrum/Vibrant/00-purple-light - Global (primitives) */
398
+ --colors-system-spectrum-vibrant-00-purple-light: #6200ee;
399
+ /* Colors/System/Spectrum/Vibrant/00-red-light - Global (primitives) */
400
+ --colors-system-spectrum-vibrant-00-red-light: #d83a52;
401
+ /* Colors/System/Spectrum/Vibrant/00-teal-light - Global (primitives) */
402
+ --colors-system-spectrum-vibrant-00-teal-light: #038377;
403
+ /* Colors/System/Spectrum/Vibrant/00-yellow-light - Global (primitives) */
404
+ --colors-system-spectrum-vibrant-00-yellow-light: #f6bc2f;
405
+ /* Colors/System/Spectrum/Vibrant/40-blue-dark - Global (primitives) */
406
+ --colors-system-spectrum-vibrant-40-blue-dark: #5d92f5;
407
+ /* Colors/System/Spectrum/Vibrant/40-green-dark - Global (primitives) */
408
+ --colors-system-spectrum-vibrant-40-green-dark: #7cb796;
409
+ /* Colors/System/Spectrum/Vibrant/40-lime-dark - Global (primitives) */
410
+ --colors-system-spectrum-vibrant-40-lime-dark: #d9df85;
411
+ /* Colors/System/Spectrum/Vibrant/40-magenta-dark - Global (primitives) */
412
+ --colors-system-spectrum-vibrant-40-magenta-dark: #dd6eeb;
413
+ /* Colors/System/Spectrum/Vibrant/40-orange-dark - Global (primitives) */
414
+ --colors-system-spectrum-vibrant-40-orange-dark: #f5a067;
415
+ /* Colors/System/Spectrum/Vibrant/40-pink-dark - Global (primitives) */
416
+ --colors-system-spectrum-vibrant-40-pink-dark: #e87bb3;
417
+ /* Colors/System/Spectrum/Vibrant/40-purple-dark - Global (primitives) */
418
+ --colors-system-spectrum-vibrant-40-purple-dark: #a166f5;
419
+ /* Colors/System/Spectrum/Vibrant/40-red-dark - Global (primitives) */
420
+ --colors-system-spectrum-vibrant-40-red-dark: #e88997;
421
+ /* Colors/System/Spectrum/Vibrant/40-teal-dark - Global (primitives) */
422
+ --colors-system-spectrum-vibrant-40-teal-dark: #68b5ad;
423
+ /* Colors/System/Spectrum/Vibrant/40-yellow-dark - Global (primitives) */
424
+ --colors-system-spectrum-vibrant-40-yellow-dark: #fad782;
425
+ /* Colors/System/Visited links/00-default-light - Global (primitives) */
426
+ --colors-system-visited-links-00-default-light: #7a3e7a;
427
+ /* Colors/System/Visited links/30-active-dark - Global (primitives) */
428
+ --colors-system-visited-links-30-active-dark: #a278a2;
429
+ /* Colors/System/Visited links/30-active-light - Global (primitives) */
430
+ --colors-system-visited-links-30-active-light: #552b55;
431
+ /* Colors/System/Visited links/40-default-dark - Global (primitives) */
432
+ --colors-system-visited-links-40-default-dark: #af8baf;
433
+ /* Colors/System/Visited links/40-disabled-dark - Global (primitives) */
434
+ --colors-system-visited-links-40-disabled-dark: #492549;
435
+ /* Colors/System/Visited links/40-disabled-light - Global (primitives) */
436
+ --colors-system-visited-links-40-disabled-light: #af8baf;
437
+ /* Colors/System/yellow-dark - Global (primitives) */
438
+ --colors-system-yellow-dark: #f8cd63;
439
+ /* Colors/System/yellow-dark-bg - Global (primitives) */
440
+ --colors-system-yellow-dark-bg: #564210;
441
+ /* Colors/System/yellow-light - Global (primitives) */
442
+ --colors-system-yellow-light: #f6bc2f;
443
+ /* Colors/System/yellow-light-bg - Global (primitives) */
444
+ --colors-system-yellow-light-bg: #fef5e0;
445
+ /* Corner radius/120 - Global (primitives) */
446
+ --corner-radius-120: 12px;
447
+ /* Corner radius/160 - Global (primitives) */
448
+ --corner-radius-160: 16px;
449
+ /* Corner radius/40 - Global (primitives) */
450
+ --corner-radius-40: 4px;
451
+ /* Corner radius/80 - Global (primitives) */
452
+ --corner-radius-80: 8px;
453
+ /* Corner radius/circular - Global (primitives) */
454
+ --corner-radius-circular: 999px;
455
+ /* East - navigation rails, drawers, sheets */
456
+ --drop-shadow-east: 2px 0px 8px -2px #0000001a, 2px 0px 4px -2px #0000001f;
457
+ /* Float */
458
+ --drop-shadow-float: 0px 0px 1px 0px #00000052, 0px 8px 12px 0px #00000026;
459
+ /* North - Bottom navigation, button dock, bottom sheet */
460
+ --drop-shadow-north: 0px -2px 8px -2px #0000001a, 0px -2px 4px -2px #0000001f;
461
+ /* Raise */
462
+ --drop-shadow-raise: 0px 0px 1px 0px #00000026, 0px 1px 1px 0px #00000052;
463
+ /* Scroll */
464
+ --drop-shadow-scroll: 0px 0px 3px 0px #00000052;
465
+ /* South - top navigation */
466
+ --drop-shadow-south: 0px 2px 8px -2px #0000001a, 0px 2px 4px -2px #0000001f;
467
+ /* West - side sheets */
468
+ --drop-shadow-west: -8px 0px 8px -2px #0000001a, -5px 4px 4px -6px #00000026;
469
+ /* Interactions/opacity-black-10 - Global (primitives) */
470
+ --interactions-opacity-black-10: #0000001a;
471
+ /* Interactions/opacity-black-16 - Global (primitives) */
472
+ --interactions-opacity-black-16: #00000029;
473
+ /* Interactions/opacity-black-20 - Global (primitives) */
474
+ --interactions-opacity-black-20: #00000033;
475
+ /* Interactions/opacity-black-30 - Global (primitives) */
476
+ --interactions-opacity-black-30: #0000004d;
477
+ /* Interactions/opacity-black-6 - Global (primitives) */
478
+ --interactions-opacity-black-6: #0000000f;
479
+ /* Interactions/opacity-black-8 - Global (primitives) */
480
+ --interactions-opacity-black-8: #00000014;
481
+ /* Interactions/opacity-white-10 - Global (primitives) */
482
+ --interactions-opacity-white-10: #ffffff1a;
483
+ /* Interactions/opacity-white-16 - Global (primitives) */
484
+ --interactions-opacity-white-16: #ffffff29;
485
+ /* Interactions/opacity-white-20 - Global (primitives) */
486
+ --interactions-opacity-white-20: #ffffff33;
487
+ /* Interactions/opacity-white-30 - Global (primitives) */
488
+ --interactions-opacity-white-30: #ffffff4d;
489
+ /* Interactions/opacity-white-6 - Global (primitives) */
490
+ --interactions-opacity-white-6: #ffffff0f;
491
+ /* Interactions/opacity-white-8 - Global (primitives) */
492
+ --interactions-opacity-white-8: #ffffff14;
493
+ /* Colors/Brands/Broker Workplace/Interactions/primary-dark-opacity-10 - Global (primitives) */
494
+ --interactions-primary-dark-opacity-10: #7574821a;
495
+ /* Colors/Brands/Broker Workplace/Interactions/primary-dark-opacity-12 - Global (primitives) */
496
+ --interactions-primary-dark-opacity-12: #7574821f;
497
+ /* Colors/Brands/Broker Workplace/Interactions/primary-dark-opacity-16 - Global (primitives) */
498
+ --interactions-primary-dark-opacity-16: #75748229;
499
+ /* Colors/Brands/Broker Workplace/Interactions/primary-dark-opacity-20 - Global (primitives) */
500
+ --interactions-primary-dark-opacity-20: #75748233;
501
+ /* Colors/Brands/Broker Workplace/Interactions/primary-dark-opacity-8 - Global (primitives) */
502
+ --interactions-primary-dark-opacity-8: #75748214;
503
+ /* Colors/Brands/Broker Workplace/Interactions/primary-light-opacity-10 - Global (primitives) */
504
+ --interactions-primary-light-opacity-10: #19172f1a;
505
+ /* Colors/Brands/Broker Workplace/Interactions/primary-light-opacity-12 - Global (primitives) */
506
+ --interactions-primary-light-opacity-12: #19172f1f;
507
+ /* Colors/Brands/Broker Workplace/Interactions/primary-light-opacity-16 - Global (primitives) */
508
+ --interactions-primary-light-opacity-16: #19172f29;
509
+ /* Colors/Brands/Broker Workplace/Interactions/primary-light-opacity-20 - Global (primitives) */
510
+ --interactions-primary-light-opacity-20: #19172f33;
511
+ /* Colors/Brands/Broker Workplace/Interactions/primary-light-opacity-8 - Global (primitives) */
512
+ --interactions-primary-light-opacity-8: #19172f14;
513
+ /* Labels/Base */
514
+ --labels-base: 500 16px/24px var(--typeface);
515
+ /* Labels/Base - line height */
516
+ --labels-base-line-height: 24px;
517
+ /* Labels/Base - size */
518
+ --labels-base-size: 16px;
519
+ /* Labels/Base - style */
520
+ --labels-base-style: medium;
521
+ /* Labels/Large */
522
+ --labels-large: 500 18px/28px var(--typeface);
523
+ /* Labels/Large - line height */
524
+ --labels-large-line-height: 28px;
525
+ /* Labels/Large - size */
526
+ --labels-large-size: 18px;
527
+ /* Labels/Large - style */
528
+ --labels-large-style: medium;
529
+ /* Labels/Small */
530
+ --labels-small: 500 14px/20px var(--typeface);
531
+ /* Labels/Small - line height */
532
+ --labels-small-line-height: 20px;
533
+ /* Labels/Small - size */
534
+ --labels-small-size: 14px;
535
+ /* Labels/Small - style */
536
+ --labels-small-style: medium;
537
+ /* Labels/X-Small */
538
+ --labels-x-small: 500 12px/16px var(--typeface);
539
+ /* Labels/X-Small - line height */
540
+ --labels-x-small-line-height: 16px;
541
+ /* Labels/X-Small - size */
542
+ --labels-x-small-size: 12px;
543
+ /* Labels/X-Small - style */
544
+ --labels-x-small-style: medium;
545
+ /* Colors/Brands/Broker Workplace/Primary/00-base - Global (primitives) */
546
+ --primary-00-base: #19172f;
547
+ /* Colors/Brands/Broker Workplace/Primary/15-dark - Global (primitives) */
548
+ --primary-15-dark: #151428;
549
+ /* Colors/Brands/Broker Workplace/Primary/40-light - Global (primitives) */
550
+ --primary-40-light: #757482;
551
+ /* Colors/Brands/Broker Workplace/Primary/55-light - Global (primitives) */
552
+ --primary-55-light: #9897a1;
553
+ /* Colors/Brands/Broker Workplace/Primary/75-dark - Global (primitives) */
554
+ --primary-75-dark: #06060c;
555
+ /* Colors/Brands/Broker Workplace/Primary/85-light - Global (primitives) */
556
+ --primary-85-light: #dddce0;
557
+ /* Radius/full - Borders */
558
+ --radius-full: 999px;
559
+ /* Radius/lg - Borders */
560
+ --radius-lg: 12px;
561
+ /* Radius/md - Borders */
562
+ --radius-md: 8px;
563
+ /* Radius/sm - Borders */
564
+ --radius-sm: 4px;
565
+ /* Radius/xlg - Borders */
566
+ --radius-xlg: 16px;
567
+ /* Colors/Brands/Broker Workplace/Secondary/00-base - Global (primitives) */
568
+ --secondary-00-base: #eb672f;
569
+ /* Colors/Brands/Broker Workplace/Secondary/15-dark - Global (primitives) */
570
+ --secondary-15-dark: #c85828;
571
+ /* Colors/Brands/Broker Workplace/Secondary/40-light - Global (primitives) */
572
+ --secondary-40-light: #f3a482;
573
+ /* Colors/Brands/Broker Workplace/Secondary/55-light - Global (primitives) */
574
+ --secondary-55-light: #f6bba1;
575
+ /* Colors/Brands/Broker Workplace/Secondary/75-dark - Global (primitives) */
576
+ --secondary-75-dark: #3b1a0c;
577
+ /* Colors/Brands/Broker Workplace/Secondary/85-light - Global (primitives) */
578
+ --secondary-85-light: #fce8e0;
579
+ /* Shadows/Inner-Shadow-black-100 - Global (primitives) */
580
+ --shadows-inner-shadow-black-100: #000000;
581
+ /* Shadows/Inner-Shadow-white-100 - Global (primitives) */
582
+ --shadows-inner-shadow-white-100: #ffffff;
583
+ /* Shadows/Shadow-black-10 - Global (primitives) */
584
+ --shadows-shadow-black-10: #0000001a;
585
+ /* Shadows/Shadow-black-12 - Global (primitives) */
586
+ --shadows-shadow-black-12: #0000001f;
587
+ /* Shadows/Shadow-black-15 - Global (primitives) */
588
+ --shadows-shadow-black-15: #00000026;
589
+ /* Shadows/Shadow-black-25 - Global (primitives) */
590
+ --shadows-shadow-black-25: #00000040;
591
+ /* Shadows/Shadow-black-32 - Global (primitives) */
592
+ --shadows-shadow-black-32: #00000052;
593
+ /* Shadows/Shadow-black-50 - Global (primitives) */
594
+ --shadows-shadow-black-50: #00000080;
595
+ /* Shadows/Shadow-gray-10 - Global (primitives) */
596
+ --shadows-shadow-gray-10: #6161611a;
597
+ /* Shadows/Shadow-gray-12 - Global (primitives) */
598
+ --shadows-shadow-gray-12: #6161611f;
599
+ /* Shadows/Shadow-gray-15 - Global (primitives) */
600
+ --shadows-shadow-gray-15: #61616126;
601
+ /* Shadows/Shadow-gray-25 - Global (primitives) */
602
+ --shadows-shadow-gray-25: #61616140;
603
+ /* Shadows/Shadow-gray-32 - Global (primitives) */
604
+ --shadows-shadow-gray-32: #61616152;
605
+ /* Shadows/Shadow-gray-50 - Global (primitives) */
606
+ --shadows-shadow-gray-50: #61616180;
607
+ /* Spacing/sizing-01 - Spacing & Sizing */
608
+ --spacing-sizing-01: 4px;
609
+ /* Spacing/sizing-02 - Spacing & Sizing */
610
+ --spacing-sizing-02: 8px;
611
+ /* Spacing/sizing-03 - Spacing & Sizing */
612
+ --spacing-sizing-03: 12px;
613
+ /* Spacing/sizing-04 - Spacing & Sizing */
614
+ --spacing-sizing-04: 16px;
615
+ /* Spacing/sizing-05 - Spacing & Sizing */
616
+ --spacing-sizing-05: 20px;
617
+ /* Spacing/sizing-06 - Spacing & Sizing */
618
+ --spacing-sizing-06: 24px;
619
+ /* Spacing/sizing-07 - Spacing & Sizing */
620
+ --spacing-sizing-07: 28px;
621
+ /* Spacing/sizing-08 - Spacing & Sizing */
622
+ --spacing-sizing-08: 32px;
623
+ /* Spacing/sizing-09 - Spacing & Sizing */
624
+ --spacing-sizing-09: 36px;
625
+ /* Spacing/sizing-10 - Spacing & Sizing */
626
+ --spacing-sizing-10: 40px;
627
+ /* Spacing/sizing-11 - Spacing & Sizing */
628
+ --spacing-sizing-11: 44px;
629
+ /* Spacing/sizing-12 - Spacing & Sizing */
630
+ --spacing-sizing-12: 48px;
631
+ /* Spacing/sizing-13 - Spacing & Sizing */
632
+ --spacing-sizing-13: 52px;
633
+ /* Spacing/sizing-14 - Spacing & Sizing */
634
+ --spacing-sizing-14: 56px;
635
+ /* Spacing/sizing-15 - Spacing & Sizing */
636
+ --spacing-sizing-15: 60px;
637
+ /* Spacing/sizing-16 - Spacing & Sizing */
638
+ --spacing-sizing-16: 64px;
639
+ /* Spacing/sizing-17 - Spacing & Sizing */
640
+ --spacing-sizing-17: 68px;
641
+ /* Spacing/sizing-18 - Spacing & Sizing */
642
+ --spacing-sizing-18: 72px;
643
+ /* Spacing/sizing-19 - Spacing & Sizing */
644
+ --spacing-sizing-19: 80px;
645
+ /* Spacing/sizing-20 - Spacing & Sizing */
646
+ --spacing-sizing-20: 96px;
647
+ /* Spacing/sizing-21 - Spacing & Sizing */
648
+ --spacing-sizing-21: 104px;
649
+ /* Spacing/sizing-22 - Spacing & Sizing */
650
+ --spacing-sizing-22: 120px;
651
+ /* Spacing/sizing-23 - Spacing & Sizing */
652
+ --spacing-sizing-23: 128px;
653
+ /* Spacing/sizing-24 - Spacing & Sizing */
654
+ --spacing-sizing-24: 148px;
655
+ /* Spacing/sizing-25 - Spacing & Sizing */
656
+ --spacing-sizing-25: 152px;
657
+ /* Spacings/1040 - Global (primitives) */
658
+ --spacings-1040: 104px;
659
+ /* Spacings/120 - Global (primitives) */
660
+ --spacings-120: 12px;
661
+ /* Spacings/1200 - Global (primitives) */
662
+ --spacings-1200: 120px;
663
+ /* Spacings/1280 - Global (primitives) */
664
+ --spacings-1280: 128px;
665
+ /* Spacings/1480 - Global (primitives) */
666
+ --spacings-1480: 148px;
667
+ /* Spacings/1520 - Global (primitives) */
668
+ --spacings-1520: 152px;
669
+ /* Spacings/160 - Global (primitives) */
670
+ --spacings-160: 16px;
671
+ /* Spacings/200 - Global (primitives) */
672
+ --spacings-200: 20px;
673
+ /* Spacings/240 - Global (primitives) */
674
+ --spacings-240: 24px;
675
+ /* Spacings/280 - Global (primitives) */
676
+ --spacings-280: 28px;
677
+ /* Spacings/320 - Global (primitives) */
678
+ --spacings-320: 32px;
679
+ /* Spacings/360 - Global (primitives) */
680
+ --spacings-360: 36px;
681
+ /* Spacings/40 - Global (primitives) */
682
+ --spacings-40: 4px;
683
+ /* Spacings/400 - Global (primitives) */
684
+ --spacings-400: 40px;
685
+ /* Spacings/440 - Global (primitives) */
686
+ --spacings-440: 44px;
687
+ /* Spacings/480 - Global (primitives) */
688
+ --spacings-480: 48px;
689
+ /* Spacings/520 - Global (primitives) */
690
+ --spacings-520: 52px;
691
+ /* Spacings/560 - Global (primitives) */
692
+ --spacings-560: 56px;
693
+ /* Spacings/600 - Global (primitives) */
694
+ --spacings-600: 60px;
695
+ /* Spacings/640 - Global (primitives) */
696
+ --spacings-640: 64px;
697
+ /* Spacings/680 - Global (primitives) */
698
+ --spacings-680: 68px;
699
+ /* Spacings/720 - Global (primitives) */
700
+ --spacings-720: 72px;
701
+ /* Spacings/80 - Global (primitives) */
702
+ --spacings-80: 8px;
703
+ /* Spacings/800 - Global (primitives) */
704
+ --spacings-800: 80px;
705
+ /* Spacings/960 - Global (primitives) */
706
+ --spacings-960: 96px;
707
+ /* Stroke/thick - Borders */
708
+ --stroke-thick: 2px;
709
+ /* Stroke/thicker - Borders */
710
+ --stroke-thicker: 4px;
711
+ /* Stroke/thin - Borders */
712
+ --stroke-thin: 1px;
713
+ /* Typeface - Brand */
714
+ --typeface: 'Inter';
715
+ /* Typography/Line-height/lh-1 - Global (primitives) */
716
+ --typography-line-height-lh-1: 16px;
717
+ /* Typography/Line-height/lh-10 - Global (primitives) */
718
+ --typography-line-height-lh-10: 48px;
719
+ /* Typography/Line-height/lh-11 - Global (primitives) */
720
+ --typography-line-height-lh-11: 56px;
721
+ /* Typography/Line-height/lh-12 - Global (primitives) */
722
+ --typography-line-height-lh-12: 60px;
723
+ /* Typography/Line-height/lh-13 - Global (primitives) */
724
+ --typography-line-height-lh-13: 64px;
725
+ /* Typography/Line-height/lh-14 - Global (primitives) */
726
+ --typography-line-height-lh-14: 72px;
727
+ /* Typography/Line-height/lh-15 - Global (primitives) */
728
+ --typography-line-height-lh-15: 88px;
729
+ /* Typography/Line-height/lh-2 - Global (primitives) */
730
+ --typography-line-height-lh-2: 20px;
731
+ /* Typography/Line-height/lh-3 - Global (primitives) */
732
+ --typography-line-height-lh-3: 22px;
733
+ /* Typography/Line-height/lh-4 - Global (primitives) */
734
+ --typography-line-height-lh-4: 24px;
735
+ /* Typography/Line-height/lh-5 - Global (primitives) */
736
+ --typography-line-height-lh-5: 28px;
737
+ /* Typography/Line-height/lh-6 - Global (primitives) */
738
+ --typography-line-height-lh-6: 32px;
739
+ /* Typography/Line-height/lh-7 - Global (primitives) */
740
+ --typography-line-height-lh-7: 36px;
741
+ /* Typography/Line-height/lh-8 - Global (primitives) */
742
+ --typography-line-height-lh-8: 40px;
743
+ /* Typography/Line-height/lh-9 - Global (primitives) */
744
+ --typography-line-height-lh-9: 44px;
745
+ /* Typography/Size/base - Global (primitives) */
746
+ --typography-size-base: 16px;
747
+ /* Typography/Size/bp-md - Global (primitives) */
748
+ --typography-size-bp-md: 18px;
749
+ /* Typography/Size/d-lg-m - Global (primitives) */
750
+ --typography-size-d-lg-m: 64px;
751
+ /* Typography/Size/d-lg (old) - Global (primitives) */
752
+ --typography-size-d-lg-old: 60px;
753
+ /* Typography/Size/d-md-m - Global (primitives) */
754
+ --typography-size-d-md-m: 56px;
755
+ /* Typography/Size/d-md (old) - Global (primitives) */
756
+ --typography-size-d-md-old: 52px;
757
+ /* Typography/Size/d-sm-m - Global (primitives) */
758
+ --typography-size-d-sm-m: 48px;
759
+ /* Typography/Size/d-sm (old) - Global (primitives) */
760
+ --typography-size-d-sm-old: 44px;
761
+ /* Typography/Size/lg-xlg - Global (primitives) */
762
+ --typography-size-lg-xlg: 28px;
763
+ /* Typography/Size/md-mdp - Global (primitives) */
764
+ --typography-size-md-mdp: 20px;
765
+ /* Typography/Size/mdp-lg - Global (primitives) */
766
+ --typography-size-mdp-lg: 24px;
767
+ /* Typography/Size/sm - Global (primitives) */
768
+ --typography-size-sm: 14px;
769
+ /* Typography/Size/xlg-xxlg - Global (primitives) */
770
+ --typography-size-xlg-xxlg: 32px;
771
+ /* Typography/Size/xs - Global (primitives) */
772
+ --typography-size-xs: 12px;
773
+ /* Typography/Size/xxlg-xxxlg - Global (primitives) */
774
+ --typography-size-xxlg-xxxlg: 36px;
775
+ /* Typography/Size/xxxlg - Global (primitives) */
776
+ --typography-size-xxxlg: 40px;
777
+ /* Typography/Typeface/Arial - Global (primitives) */
778
+ --typography-typeface-arial: 'Arial';
779
+ /* Typography/Typeface/Geist - Global (primitives) */
780
+ --typography-typeface-geist: 'Geist';
781
+ /* Typography/Typeface/Helvetica - Global (primitives) */
782
+ --typography-typeface-helvetica: 'Helvetica';
783
+ /* Typography/Typeface/Inter - Global (primitives) */
784
+ --typography-typeface-inter: 'Inter';
785
+ /* Typography/Typeface/Lato - Global (primitives) */
786
+ --typography-typeface-lato: 'Lato';
787
+ /* Typography/Typeface/Manrope - Global (primitives) */
788
+ --typography-typeface-manrope: 'Manrope';
789
+ /* Typography/Typeface/Open Sans - Global (primitives) */
790
+ --typography-typeface-open-sans: 'Open Sans';
791
+ /* Typography/Typeface/Red Hat Text - Global (primitives) */
792
+ --typography-typeface-red-hat-text: 'Red Hat Text';
793
+ /* Typography/Typeface/Roboto - Global (primitives) */
794
+ --typography-typeface-roboto: 'Roboto';
795
+ /* Typography/Typeface/SF Pro - Global (primitives) */
796
+ --typography-typeface-sf-pro: 'SF Pro';
797
+ /* Typography/Typeface/Typold - Global (primitives) */
798
+ --typography-typeface-typold: 'Typold';
799
+ /* Typography/Typeface/Work Sans - Global (primitives) */
800
+ --typography-typeface-work-sans: 'Work Sans';
801
+ /* Typography/Weight/300 - Global (primitives) */
802
+ --typography-weight-300: 300;
803
+ /* Typography/Weight/400 - Global (primitives) */
804
+ --typography-weight-400: 400;
805
+ /* Typography/Weight/500 - Global (primitives) */
806
+ --typography-weight-500: 500;
807
+ /* Typography/Weight/600 - Global (primitives) */
808
+ --typography-weight-600: 600;
809
+ /* Mobile/Display/Regular/Large */
810
+ --display-regular-large: 400 56px/72px var(--typeface);
811
+ /* Mobile/Display/Regular/Large - line height */
812
+ --display-regular-large-line-height: 72px;
813
+ /* Mobile/Display/Regular/Large - size */
814
+ --display-regular-large-size: 56px;
815
+ /* Mobile/Display/Regular/Large - style */
816
+ --display-regular-large-style: regular;
817
+ /* Mobile/Display/Regular/Medium */
818
+ --display-regular-medium: 400 48px/60px var(--typeface);
819
+ /* Mobile/Display/Regular/Medium - line height */
820
+ --display-regular-medium-line-height: 60px;
821
+ /* Mobile/Display/Regular/Medium - size */
822
+ --display-regular-medium-size: 48px;
823
+ /* Mobile/Display/Regular/Medium - style */
824
+ --display-regular-medium-style: regular;
825
+ /* Mobile/Display/Regular/Small */
826
+ --display-regular-small: 400 40px/48px var(--typeface);
827
+ /* Mobile/Display/Regular/Small - line height */
828
+ --display-regular-small-line-height: 48px;
829
+ /* Mobile/Display/Regular/Small - size */
830
+ --display-regular-small-size: 40px;
831
+ /* Mobile/Display/Regular/Small - style */
832
+ --display-regular-small-style: regular;
833
+ /* Mobile/Display/Semibold/Large */
834
+ --display-semibold-large: 600 56px/72px var(--typeface);
835
+ /* Mobile/Display/Semibold/Large - line height */
836
+ --display-semibold-large-line-height: 72px;
837
+ /* Mobile/Display/Semibold/Large - size */
838
+ --display-semibold-large-size: 56px;
839
+ /* Mobile/Display/Semibold/Large - style */
840
+ --display-semibold-large-style: 600;
841
+ /* Mobile/Display/Semibold/Medium */
842
+ --display-semibold-medium: 600 48px/60px var(--typeface);
843
+ /* Mobile/Display/Semibold/Medium - line height */
844
+ --display-semibold-medium-line-height: 60px;
845
+ /* Mobile/Display/Semibold/Medium - size */
846
+ --display-semibold-medium-size: 48px;
847
+ /* Mobile/Display/Semibold/Medium - style */
848
+ --display-semibold-medium-style: 600;
849
+ /* Mobile/Display/Semibold/Small */
850
+ --display-semibold-small: 600 40px/48px var(--typeface);
851
+ /* Mobile/Display/Semibold/Small - line height */
852
+ --display-semibold-small-line-height: 48px;
853
+ /* Mobile/Display/Semibold/Small - size */
854
+ --display-semibold-small-size: 40px;
855
+ /* Mobile/Display/Semibold/Small - style */
856
+ --display-semibold-small-style: 600;
857
+ /* Mobile/Heading/H1 - Large Headline */
858
+ --heading-h1: 600 32px/40px var(--typeface);
859
+ /* Mobile/Heading/H1 - Large Headline line height */
860
+ --heading-h1-line-height: 40px;
861
+ /* Mobile/Heading/H1 - Large Headline size */
862
+ --heading-h1-size: 32px;
863
+ /* Mobile/Heading/H1 - Large Headline style */
864
+ --heading-h1-style: 600;
865
+ /* Mobile/Heading/H2 - Headline */
866
+ --heading-h2: 600 28px/36px var(--typeface);
867
+ /* Mobile/Heading/H2 - Headline line height */
868
+ --heading-h2-line-height: 36px;
869
+ /* Mobile/Heading/H2 - Headline size */
870
+ --heading-h2-size: 28px;
871
+ /* Mobile/Heading/H2 - Headline style */
872
+ --heading-h2-style: 600;
873
+ /* Mobile/Heading/H3 - Headline */
874
+ --heading-h3: 600 24px/32px var(--typeface);
875
+ /* Mobile/Heading/H3 - Headline line height */
876
+ --heading-h3-line-height: 32px;
877
+ /* Mobile/Heading/H3 - Headline size */
878
+ --heading-h3-size: 24px;
879
+ /* Mobile/Heading/H3 - Headline style */
880
+ --heading-h3-style: 600;
881
+ /* Mobile/Heading/H4 - Headline */
882
+ --heading-h4: 600 20px/28px var(--typeface);
883
+ /* Mobile/Heading/H4 - Headline line height */
884
+ --heading-h4-line-height: 28px;
885
+ /* Mobile/Heading/H4 - Headline size */
886
+ --heading-h4-size: 20px;
887
+ /* Mobile/Heading/H4 - Headline style */
888
+ --heading-h4-style: 600;
889
+ /* Mobile/Heading/H5 */
890
+ --heading-h5: 600 18px/24px var(--typeface);
891
+ /* Mobile/Heading/H5 - line height */
892
+ --heading-h5-line-height: 24px;
893
+ /* Mobile/Heading/H5 - size */
894
+ --heading-h5-size: 18px;
895
+ /* Mobile/Heading/H5 - style */
896
+ --heading-h5-style: 600;
897
+ /* Mobile/Heading/H6 */
898
+ --heading-h6: 500 16px/20px var(--typeface);
899
+ /* Mobile/Heading/H6 - line height */
900
+ --heading-h6-line-height: 20px;
901
+ /* Mobile/Heading/H6 - size */
902
+ --heading-h6-size: 16px;
903
+ /* Mobile/Heading/H6 - style */
904
+ --heading-h6-style: medium;
905
+ /* Mobile/Subheader/Large - Headline */
906
+ --subheader-large: 400 20px/28px var(--typeface);
907
+ /* Mobile/Subheader/Large - Headline line height */
908
+ --subheader-large-line-height: 28px;
909
+ /* Mobile/Subheader/Large - Headline size */
910
+ --subheader-large-size: 20px;
911
+ /* Mobile/Subheader/Large - Headline style */
912
+ --subheader-large-style: regular;
913
+ /* Mobile/Subheader/Medium - Headline */
914
+ --subheader-medium: 400 18px/24px var(--typeface);
915
+ /* Mobile/Subheader/Medium - Headline line height */
916
+ --subheader-medium-line-height: 24px;
917
+ /* Mobile/Subheader/Medium - Headline size */
918
+ --subheader-medium-size: 18px;
919
+ /* Mobile/Subheader/Medium - Headline style */
920
+ --subheader-medium-style: regular;
921
+ /* Mobile/Subheader/X-Large - Headline */
922
+ --subheader-x-large: 400 24px/32px var(--typeface);
923
+ /* Mobile/Subheader/X-Large - Headline line height */
924
+ --subheader-x-large-line-height: 32px;
925
+ /* Mobile/Subheader/X-Large - Headline size */
926
+ --subheader-x-large-size: 24px;
927
+ /* Mobile/Subheader/X-Large - Headline style */
928
+ --subheader-x-large-style: regular;
929
+ /* Mobile/Subheader/XX-Large - Large Headline */
930
+ --subheader-xx-large: 400 28px/36px var(--typeface);
931
+ /* Mobile/Subheader/XX-Large - Large Headline line height */
932
+ --subheader-xx-large-line-height: 36px;
933
+ /* Mobile/Subheader/XX-Large - Large Headline size */
934
+ --subheader-xx-large-size: 28px;
935
+ /* Mobile/Subheader/XX-Large - Large Headline style */
936
+ --subheader-xx-large-style: regular;
937
+ /* Mobile/Subheader/XXX-Large - Large Headline */
938
+ --subheader-xxx-large: 400 32px/40px var(--typeface);
939
+ /* Mobile/Subheader/XXX-Large - Large Headline line height */
940
+ --subheader-xxx-large-line-height: 40px;
941
+ /* Mobile/Subheader/XXX-Large - Large Headline size */
942
+ --subheader-xxx-large-size: 32px;
943
+ /* Mobile/Subheader/XXX-Large - Large Headline style */
944
+ --subheader-xxx-large-style: regular;
945
+ /* light theme (default) */
946
+ /* Background/base - Brand */
947
+ --background-base: #ffffff;
948
+ /* Background/scrim - Theme - Broker Workplace */
949
+ --background-scrim: #00000040;
950
+ /* Background/shade - Brand */
951
+ --background-shade: #f5f5f5;
952
+ /* Data visual/category-01 - Brand */
953
+ --data-visual-category-01: #d67e51;
954
+ /* Data visual/category-01-highlight - Brand */
955
+ --data-visual-category-01-highlight: #d67e514d;
956
+ /* Data visual/category-02 - Brand */
957
+ --data-visual-category-02: #7a2a0b;
958
+ /* Data visual/category-02-highlight - Brand */
959
+ --data-visual-category-02-highlight: #7a2a0b4d;
960
+ /* Data visual/category-03 - Brand */
961
+ --data-visual-category-03: #ab922b;
962
+ /* Data visual/category-03-highlight - Brand */
963
+ --data-visual-category-03-highlight: #ab922b4d;
964
+ /* Data visual/category-04 - Brand */
965
+ --data-visual-category-04: #2d3300;
966
+ /* Data visual/category-04-highlight - Brand */
967
+ --data-visual-category-04-highlight: #2d33004d;
968
+ /* Data visual/category-05 - Brand */
969
+ --data-visual-category-05: #794b34;
970
+ /* Data visual/category-05-highlight - Brand */
971
+ --data-visual-category-05-highlight: #794b344d;
972
+ /* Data visual/category-06 - Brand */
973
+ --data-visual-category-06: #7f7f7f;
974
+ /* Data visual/category-06-highlight - Brand */
975
+ --data-visual-category-06-highlight: #7f7f7f4d;
976
+ /* Data visual/category-07 - Brand */
977
+ --data-visual-category-07: #530909;
978
+ /* Data visual/category-07-highlight - Brand */
979
+ --data-visual-category-07-highlight: #5309094d;
980
+ /* Data visual/category-1 - Theme - Better Home & Garden */
981
+ --data-visual-category-1: #0a466c;
982
+ /* Data visual/category-1-highlight - Theme - Broker Workplace */
983
+ --data-visual-category-1-highlight: #0a466c4d;
984
+ /* Data visual/category-2 - Theme - Better Home & Garden */
985
+ --data-visual-category-2: #299de0;
986
+ /* Data visual/category-2-highlight - Theme - Broker Workplace */
987
+ --data-visual-category-2-highlight: #299de04d;
988
+ /* Data visual/category-3 - Theme - Better Home & Garden */
989
+ --data-visual-category-3: #130033;
990
+ /* Data visual/category-3-highlight - Theme - Broker Workplace */
991
+ --data-visual-category-3-highlight: #1300334d;
992
+ /* Data visual/category-4 - Theme - Better Home & Garden */
993
+ --data-visual-category-4: #389e7a;
994
+ /* Data visual/category-4-highlight - Theme - Broker Workplace */
995
+ --data-visual-category-4-highlight: #389e7a4d;
996
+ /* Data visual/category-5 - Theme - Better Home & Garden */
997
+ --data-visual-category-5: #094a53;
998
+ /* Data visual/category-5-highlight - Theme - Broker Workplace */
999
+ --data-visual-category-5-highlight: #094a534d;
1000
+ /* Data visual/category-6 - Theme - Better Home & Garden */
1001
+ --data-visual-category-6: #7f7f7f;
1002
+ /* Data visual/category-6-highlight - Theme - Broker Workplace */
1003
+ --data-visual-category-6-highlight: #7f7f7f4d;
1004
+ /* Data visual/category-7 - Theme - Better Home & Garden */
1005
+ --data-visual-category-7: #433479;
1006
+ /* Data visual/category-7-highlight - Theme - Broker Workplace */
1007
+ --data-visual-category-7-highlight: #4334794d;
1008
+ /* Data visual/gradient-end - Theme - Broker Workplace */
1009
+ --data-visual-gradient-end: #ffffff4d;
1010
+ /* Data visual/green - Theme - Broker Workplace */
1011
+ --data-visual-green: #258750;
1012
+ /* Data visual/green-highlight - Theme - Broker Workplace */
1013
+ --data-visual-green-highlight: #deede5;
1014
+ /* Data visual/negative - Brand */
1015
+ --data-visual-negative: #d83a52;
1016
+ /* Data visual/negative-highlight - Brand */
1017
+ --data-visual-negative-highlight: #f9e1e5;
1018
+ /* Data visual/positive - Brand */
1019
+ --data-visual-positive: #258750;
1020
+ /* Data visual/positive-highlight - Brand */
1021
+ --data-visual-positive-highlight: #deede5;
1022
+ /* Data visual/red - Theme - Broker Workplace */
1023
+ --data-visual-red: #d83a52;
1024
+ /* Data visual/red-highlight - Theme - Broker Workplace */
1025
+ --data-visual-red-highlight: #f9e1e5;
1026
+ /* Foreground/AI-powered/blue - Theme - Broker Workplace */
1027
+ --foreground-ai-powered-blue: #215ecd;
1028
+ /* Foreground/AI-powered/pink - Theme - Broker Workplace */
1029
+ --foreground-ai-powered-pink: #c60ede;
1030
+ /* Foreground/Brand/on-inverse-primary - Theme - Broker Workplace */
1031
+ --foreground-brand-on-inverse-primary: #757482;
1032
+ /* Foreground/Brand/on-inverse-secondary - Theme - Broker Workplace */
1033
+ --foreground-brand-on-inverse-secondary: #eba691;
1034
+ /* Foreground/Brand/on-brand-primary - Brand */
1035
+ /* Foreground color used on Brand's primary color (non neutral color) */
1036
+ --foreground-brand-on-primary: #ffffff;
1037
+ /* Foreground/Brand/on-brand-secondary - Brand */
1038
+ /* Foreground color used on Brand's primary color (non neutral color) */
1039
+ --foreground-brand-on-secondary: #ffffff;
1040
+ /* Foreground/Brand/brand-primary - Brand */
1041
+ /* Foreground text and icons that match the brand's primary color */
1042
+ --foreground-brand-primary: #19172f;
1043
+ /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1044
+ --foreground-brand-primary-depth: #217221;
1045
+ /* Foreground/Brand/brand-secondary - Brand */
1046
+ /* Foreground text and icons that match the brand's secondary color */
1047
+ --foreground-brand-secondary: #eb672f;
1048
+ /* Foreground/Brand/brand-secondary-depth - Theme - Broker Workplace */
1049
+ --foreground-brand-secondary-depth: #bc5b3c;
1050
+ /* Foreground/Link text/default - Brand */
1051
+ --foreground-link-text-default: #215ecd;
1052
+ /* Foreground/Link text/default-disabled - Brand */
1053
+ --foreground-link-text-default-disabled: #7a9ee1;
1054
+ /* Foreground/Link text/default-hovered - Theme - Broker Workplace */
1055
+ --foreground-link-text-default-hovered: #1e55b9;
1056
+ /* Foreground/Link text/default-pressed - Theme - Broker Workplace */
1057
+ --foreground-link-text-default-pressed: #1a4ba4;
1058
+ /* Foreground/Link text/default-visited - Brand */
1059
+ --foreground-link-text-default-visited: #7a3e7a;
1060
+ /* Foreground/Link text/subtle-disabled - Brand */
1061
+ --foreground-link-text-subtle-disabled: #bdbdbd;
1062
+ /* Foreground/Link text/subtle-hovered - Theme - Broker Workplace */
1063
+ --foreground-link-text-subtle-hovered: #292929;
1064
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Broker Workplace */
1065
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1066
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Broker Workplace */
1067
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1068
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1069
+ --foreground-link-text-subtle-inversed-disabled: #757575;
1070
+ /* Foreground/Link text/subtle-pressed - Theme - Broker Workplace */
1071
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1072
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1073
+ --foreground-neutral-disabled-on-color-surface: #757575;
1074
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1075
+ --foreground-neutral-disabled-on-surface: #bdbdbd;
1076
+ /* Foreground/Neutral/inverse-on-surface - Theme - Broker Workplace */
1077
+ --foreground-neutral-inverse-on-surface: #fafafa;
1078
+ /* Foreground/Neutral/on-color - Brand */
1079
+ /* Interactive controls */
1080
+ --foreground-neutral-on-color: #ffffff;
1081
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1082
+ /* Text and icons against inverse surface */
1083
+ --foreground-neutral-on-inverse-surface: #fafafa;
1084
+ /* Foreground/Neutral/on-surface - Brand */
1085
+ /* Default foreground text and icons against any surface color */
1086
+ --foreground-neutral-on-surface: #141414;
1087
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1088
+ /* Secondary foreground color for icons and text */
1089
+ --foreground-neutral-on-surface-variant-01: #707070;
1090
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1091
+ /* Tertiary foreground color for icons and text */
1092
+ --foreground-neutral-on-surface-variant-02: #757575;
1093
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1094
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1095
+ --foreground-neutral-on-surface-variant-03: #8a8a8a;
1096
+ /* Foreground/Neutral/skeleton-element - Brand */
1097
+ --foreground-neutral-skeleton-element: #e0e0e0;
1098
+ /* Foreground/Spectrum/blue - Theme - Broker Workplace */
1099
+ --foreground-spectrum-blue: #143778;
1100
+ /* Foreground/Spectrum/green - Theme - Broker Workplace */
1101
+ --foreground-spectrum-green: #134428;
1102
+ /* Foreground/Spectrum/lime - Theme - Broker Workplace */
1103
+ --foreground-spectrum-lime: #60651a;
1104
+ /* Foreground/Spectrum/magenta - Theme - Broker Workplace */
1105
+ --foreground-spectrum-magenta: #63076f;
1106
+ /* Foreground/Spectrum/orange - Brand */
1107
+ --foreground-spectrum-orange: #773001;
1108
+ /* Foreground/Spectrum/pink - Theme - Broker Workplace */
1109
+ --foreground-spectrum-pink: #6c1240;
1110
+ /* Foreground/Spectrum/purple - Theme - Broker Workplace */
1111
+ --foreground-spectrum-purple: #310077;
1112
+ /* Foreground/Spectrum/red - Brand */
1113
+ --foreground-spectrum-red: #6c1d29;
1114
+ /* Foreground/Spectrum/teal - Theme - Broker Workplace */
1115
+ --foreground-spectrum-teal: #01413c;
1116
+ /* Foreground/Spectrum/yellow - Theme - Broker Workplace */
1117
+ --foreground-spectrum-yellow: #7b5e18;
1118
+ /* Interactions/brand-disabled-opacity - Theme - Broker Workplace */
1119
+ --interactions-brand-disabled-opacity: #0000000f;
1120
+ /* Interactions/brand-hover-opacity - Theme - Broker Workplace */
1121
+ --interactions-brand-hover-opacity: #0000001a;
1122
+ /* Interactions/brand-press-opacity - Theme - Broker Workplace */
1123
+ --interactions-brand-press-opacity: #00000033;
1124
+ /* Interactions/disabled-opacity - Theme - Broker Workplace */
1125
+ --interactions-disabled-opacity: #0000000f;
1126
+ /* Interactions/hover-opacity - Theme - Broker Workplace */
1127
+ --interactions-hover-opacity: #00000014;
1128
+ /* Interactions/link-active-opacity - Brand */
1129
+ --interactions-link-active-opacity: #0000004d;
1130
+ /* Interactions/neutral-hover-opacity - Brand */
1131
+ /* surfaces using neutral tones */
1132
+ --interactions-neutral-hover-opacity: #0000001a;
1133
+ /* Interactions/neutral-press-opacity - Brand */
1134
+ /* surfaces using neutral tones */
1135
+ --interactions-neutral-press-opacity: #00000029;
1136
+ /* Interactions/press-opacity - Theme - Broker Workplace */
1137
+ --interactions-press-opacity: #00000029;
1138
+ /* Interactions/primary-disabled-opacity - Theme - Broker Workplace */
1139
+ --interactions-primary-disabled-opacity: #19172f1f;
1140
+ /* Interactions/primary-hover-opacity - Theme - Broker Workplace */
1141
+ --interactions-primary-hover-opacity: #19172f1a;
1142
+ /* Interactions/primary-press-opacity - Theme - Broker Workplace */
1143
+ --interactions-primary-press-opacity: #19172f33;
1144
+ /* Shadow/shadow-10 - Theme - Broker Workplace */
1145
+ --shadow-10: #0000001a;
1146
+ /* Shadow/shadow-12 - Theme - Broker Workplace */
1147
+ --shadow-12: #0000001f;
1148
+ /* Shadow/shadow-15 - Theme - Broker Workplace */
1149
+ --shadow-15: #00000026;
1150
+ /* Shadow/shadow-25 - Theme - Broker Workplace */
1151
+ --shadow-25: #00000040;
1152
+ /* Shadow/shadow-32 - Theme - Broker Workplace */
1153
+ --shadow-32: #00000052;
1154
+ /* Shadow/inner-shadow - Brand */
1155
+ --shadow-inner: #ffffff;
1156
+ /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1157
+ --shadow-inner-100: #ffffff;
1158
+ /* Shadow/variant-01 - Brand */
1159
+ --shadow-variant-01: #0000001a;
1160
+ /* Shadow/variant-02 - Brand */
1161
+ --shadow-variant-02: #0000001f;
1162
+ /* Shadow/variant-03 - Brand */
1163
+ --shadow-variant-03: #00000026;
1164
+ /* Shadow/variant-04 - Brand */
1165
+ --shadow-variant-04: #00000040;
1166
+ /* Shadow/variant-05 - Brand */
1167
+ --shadow-variant-05: #00000052;
1168
+ /* Status/error - Brand */
1169
+ /* Foreground error text and icons */
1170
+ --status-error: #d83a52;
1171
+ /* Status/information - Theme - Better Home & Garden */
1172
+ --status-information: #276ef1;
1173
+ /* Status/informational - Brand */
1174
+ /* Foreground informational text and icons */
1175
+ --status-informational: #276ef1;
1176
+ /* Status/on-error - Brand */
1177
+ /* Foreground error text and icons */
1178
+ --status-on-error: #ffffff;
1179
+ /* Status/on-information - Theme - Better Home & Garden */
1180
+ --status-on-information: #ffffff;
1181
+ /* Status/on-informational - Brand */
1182
+ /* Foreground informational text and icons */
1183
+ --status-on-informational: #ffffff;
1184
+ /* Status/on-success - Brand */
1185
+ /* Foreground success icons and text */
1186
+ --status-on-success: #ffffff;
1187
+ /* Status/on-warning - Brand */
1188
+ /* Foreground warning icons */
1189
+ --status-on-warning: #141414;
1190
+ /* Status/success - Brand */
1191
+ /* Foreground success icons and text */
1192
+ --status-success: #258750;
1193
+ /* Status/warning - Brand */
1194
+ /* Foreground warning icons */
1195
+ --status-warning: #f6bc2f;
1196
+ /* Stroke/AI-powered/blue - Theme - Broker Workplace */
1197
+ --stroke-ai-powered-blue: #215ecd;
1198
+ /* Stroke/AI-powered/pink - Theme - Broker Workplace */
1199
+ --stroke-ai-powered-pink: #c60ede;
1200
+ /* Stroke/Brand/brand-primary - Brand */
1201
+ /* Outline variant - decorative elements such as dividers */
1202
+ --stroke-brand-primary: #19172f;
1203
+ /* Stroke/Brand/brand-primary-depth - Brand */
1204
+ /* Outline variant - decorative elements such as dividers */
1205
+ --stroke-brand-primary-depth: #151428;
1206
+ /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1207
+ --stroke-brand-secondary: #dd6b47;
1208
+ /* Stroke/Brand/brand-secondary-depth - Theme - Broker Workplace */
1209
+ --stroke-brand-secondary-depth: #bc5b3c;
1210
+ /* Stroke/Neutral/neutral-base - Brand */
1211
+ /* For control components */
1212
+ --stroke-neutral-base: #949494;
1213
+ /* Stroke/Neutral/disabled-dark - Brand */
1214
+ /* Disabled outline separating the fill and surface background */
1215
+ --stroke-neutral-disabled-dark: #757575;
1216
+ /* Stroke/Neutral/disabled-light - Brand */
1217
+ /* Disabled outline separating the fill and surface background */
1218
+ --stroke-neutral-disabled-light: #bdbdbd;
1219
+ /* Stroke/Neutral/focus - Brand */
1220
+ /* Highlight focus element */
1221
+ --stroke-neutral-focus: #000000;
1222
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1223
+ /* Highlight focus element */
1224
+ --stroke-neutral-focus-on-inverse: #ffffff;
1225
+ /* Stroke/Neutral/neutral-high - Brand */
1226
+ --stroke-neutral-high: #141414;
1227
+ /* Stroke/Neutral/neutral-high-contrast - Theme - Broker Workplace */
1228
+ --stroke-neutral-high-contrast: #141414;
1229
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - Broker Workplace */
1230
+ --stroke-neutral-interactions-disabled-dark: #757575;
1231
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - Broker Workplace */
1232
+ --stroke-neutral-interactions-disabled-light: #bdbdbd;
1233
+ /* Stroke/Neutral/Interactions/focus - Theme - Broker Workplace */
1234
+ --stroke-neutral-interactions-focus: #000000;
1235
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Broker Workplace */
1236
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1237
+ /* Stroke/Neutral/neutral-low - Brand */
1238
+ /* Outline variant - decorative elements such as dividers */
1239
+ --stroke-neutral-low: #e0e0e0;
1240
+ /* Stroke/Neutral/neutral-low-contrast - Theme - Broker Workplace */
1241
+ --stroke-neutral-low-contrast: #e0e0e0;
1242
+ /* Surface/AI-powered/blue - Theme - Broker Workplace */
1243
+ --surface-ai-powered-blue: #215ecd;
1244
+ /* Surface/AI-powered/pink - Theme - Broker Workplace */
1245
+ --surface-ai-powered-pink: #c60ede;
1246
+ /* Surface/Brand/primary - Brand */
1247
+ --surface-brand-primary: #19172f;
1248
+ /* Surface/Brand/primary-highlight - Theme - Broker Workplace */
1249
+ --surface-brand-primary-highlight: #dfeddf;
1250
+ /* Surface/Brand/secondary - Brand */
1251
+ --surface-brand-secondary: #eb672f;
1252
+ /* Surface/Brand/secondary-highlight - Theme - Broker Workplace */
1253
+ --surface-brand-secondary-highlight: #fae9e3;
1254
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1255
+ --surface-neutral-interactions-dark-disabled: #d6d6d6;
1256
+ /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1257
+ --surface-neutral-interactions-light-disabled: #f5f5f5;
1258
+ /* Surface/Neutral/inverse - Brand */
1259
+ /* Inverted. Use for toasts notification & snackbars */
1260
+ --surface-neutral-inverse: #1f1f1f;
1261
+ /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1262
+ --surface-neutral-inverse-dark: #1f1f1f;
1263
+ /* Surface/Neutral/inverse-light - Theme - Broker Workplace */
1264
+ --surface-neutral-inverse-light: #ffffff;
1265
+ /* Surface/Neutral/T1-base - Brand */
1266
+ --surface-neutral-t1-base: #ffffff;
1267
+ /* Surface/Neutral/T2-lowest - Brand */
1268
+ --surface-neutral-t2-lowest: #f5f5f5;
1269
+ /* Surface/Neutral/T3-low - Brand */
1270
+ /* Navigations, app bar etc */
1271
+ --surface-neutral-t3-low: #dbdbdb;
1272
+ /* Surface/Neutral/T4-high - Brand */
1273
+ /* Navigations, app bar etc */
1274
+ --surface-neutral-t4-high: #8a8a8a;
1275
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1276
+ --surface-neutral-t4-high-2: #8a8a8a;
1277
+ /* Surface/Neutral/transparent - Brand */
1278
+ --surface-neutral-transparent: #ffffff00;
1279
+ /* Surface/Spectrum/blue - Theme - Broker Workplace */
1280
+ --surface-spectrum-blue: #dfe9fd;
1281
+ /* Surface/Spectrum/green - Theme - Broker Workplace */
1282
+ --surface-spectrum-green: #deede5;
1283
+ /* Surface/Spectrum/lime - Theme - Broker Workplace */
1284
+ --surface-spectrum-lime: #f6f7e0;
1285
+ /* Surface/Spectrum/magenta - Theme - Broker Workplace */
1286
+ --surface-spectrum-magenta: #f6dbfa;
1287
+ /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1288
+ --surface-spectrum-orange: #fce7d9;
1289
+ /* Surface/Spectrum/pink - Theme - Broker Workplace */
1290
+ --surface-spectrum-pink: #f9deec;
1291
+ /* Surface/Spectrum/purple - Theme - Broker Workplace */
1292
+ --surface-spectrum-purple: #e7d9fc;
1293
+ /* Surface/Spectrum/red - Theme - Broker Workplace */
1294
+ --surface-spectrum-red: #f9e1e5;
1295
+ /* Surface/Spectrum/teal - Theme - Broker Workplace */
1296
+ --surface-spectrum-teal: #d9eceb;
1297
+ /* Surface/Spectrum/yellow - Theme - Broker Workplace */
1298
+ --surface-spectrum-yellow: #fef5e0;
1299
+
1300
+ @media (width >= 640px) {
1301
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1302
+ --display-regular-large: 400 64px/88px var(--typeface);
1303
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1304
+ --display-regular-large-line-height: 88px;
1305
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1306
+ --display-regular-large-size: 64px;
1307
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1308
+ --display-regular-large-style: regular;
1309
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1310
+ --display-regular-medium: 400 56px/72px var(--typeface);
1311
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1312
+ --display-regular-medium-line-height: 72px;
1313
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1314
+ --display-regular-medium-size: 56px;
1315
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1316
+ --display-regular-medium-style: regular;
1317
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1318
+ --display-regular-small: 400 48px/60px var(--typeface);
1319
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1320
+ --display-regular-small-line-height: 60px;
1321
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1322
+ --display-regular-small-size: 48px;
1323
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1324
+ --display-regular-small-style: regular;
1325
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1326
+ --display-semibold-large: 600 64px/88px var(--typeface);
1327
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1328
+ --display-semibold-large-line-height: 88px;
1329
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1330
+ --display-semibold-large-size: 64px;
1331
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1332
+ --display-semibold-large-style: 600;
1333
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1334
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1335
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1336
+ --display-semibold-medium-line-height: 72px;
1337
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1338
+ --display-semibold-medium-size: 56px;
1339
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1340
+ --display-semibold-medium-style: 600;
1341
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1342
+ --display-semibold-small: 600 48px/60px var(--typeface);
1343
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1344
+ --display-semibold-small-line-height: 60px;
1345
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1346
+ --display-semibold-small-size: 48px;
1347
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1348
+ --display-semibold-small-style: 600;
1349
+ /* Desktop/Heading/H1 */
1350
+ --heading-h1: 600 40px/48px var(--typeface);
1351
+ /* Desktop/Heading/H1 - line height */
1352
+ --heading-h1-line-height: 48px;
1353
+ /* Desktop/Heading/H1 - size */
1354
+ --heading-h1-size: 40px;
1355
+ /* Desktop/Heading/H1 - style */
1356
+ --heading-h1-style: 600;
1357
+ /* Desktop/Heading/H2 */
1358
+ --heading-h2: 600 32px/40px var(--typeface);
1359
+ /* Desktop/Heading/H2 - line height */
1360
+ --heading-h2-line-height: 40px;
1361
+ /* Desktop/Heading/H2 - size */
1362
+ --heading-h2-size: 32px;
1363
+ /* Desktop/Heading/H2 - style */
1364
+ --heading-h2-style: 600;
1365
+ /* Desktop/Heading/H3 */
1366
+ --heading-h3: 600 28px/36px var(--typeface);
1367
+ /* Desktop/Heading/H3 - line height */
1368
+ --heading-h3-line-height: 36px;
1369
+ /* Desktop/Heading/H3 - size */
1370
+ --heading-h3-size: 28px;
1371
+ /* Desktop/Heading/H3 - style */
1372
+ --heading-h3-style: 600;
1373
+ /* Desktop/Heading/H4 */
1374
+ --heading-h4: 600 24px/32px var(--typeface);
1375
+ /* Desktop/Heading/H4 - line height */
1376
+ --heading-h4-line-height: 32px;
1377
+ /* Desktop/Heading/H4 - size */
1378
+ --heading-h4-size: 24px;
1379
+ /* Desktop/Heading/H4 - style */
1380
+ --heading-h4-style: 600;
1381
+ /* Desktop/Heading/H5 */
1382
+ --heading-h5: 600 20px/28px var(--typeface);
1383
+ /* Desktop/Heading/H5 - line height */
1384
+ --heading-h5-line-height: 28px;
1385
+ /* Desktop/Heading/H5 - size */
1386
+ --heading-h5-size: 20px;
1387
+ /* Desktop/Heading/H5 - style */
1388
+ --heading-h5-style: 600;
1389
+ /* Desktop/Heading/H6 */
1390
+ --heading-h6: 500 18px/24px var(--typeface);
1391
+ /* Desktop/Heading/H6 - line height */
1392
+ --heading-h6-line-height: 24px;
1393
+ /* Desktop/Heading/H6 - size */
1394
+ --heading-h6-size: 18px;
1395
+ /* Desktop/Heading/H6 - style */
1396
+ --heading-h6-style: medium;
1397
+ /* Desktop/Subheader/Large - Headline */
1398
+ --subheader-large: 400 24px/32px var(--typeface);
1399
+ /* Desktop/Subheader/Large - Headline line height */
1400
+ --subheader-large-line-height: 32px;
1401
+ /* Desktop/Subheader/Large - Headline size */
1402
+ --subheader-large-size: 24px;
1403
+ /* Desktop/Subheader/Large - Headline style */
1404
+ --subheader-large-style: regular;
1405
+ /* Desktop/Subheader/Medium */
1406
+ --subheader-medium: 400 20px/28px var(--typeface);
1407
+ /* Desktop/Subheader/Medium - line height */
1408
+ --subheader-medium-line-height: 28px;
1409
+ /* Desktop/Subheader/Medium - size */
1410
+ --subheader-medium-size: 20px;
1411
+ /* Desktop/Subheader/Medium - style */
1412
+ --subheader-medium-style: regular;
1413
+ /* Desktop/Subheader/X-Large - Headline */
1414
+ --subheader-x-large: 400 28px/36px var(--typeface);
1415
+ /* Desktop/Subheader/X-Large - Headline line height */
1416
+ --subheader-x-large-line-height: 36px;
1417
+ /* Desktop/Subheader/X-Large - Headline size */
1418
+ --subheader-x-large-size: 28px;
1419
+ /* Desktop/Subheader/X-Large - Headline style */
1420
+ --subheader-x-large-style: regular;
1421
+ /* Desktop/Subheader/XX-Large - Headline */
1422
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1423
+ /* Desktop/Subheader/XX-Large - Headline line height */
1424
+ --subheader-xx-large-line-height: 40px;
1425
+ /* Desktop/Subheader/XX-Large - Headline size */
1426
+ --subheader-xx-large-size: 32px;
1427
+ /* Desktop/Subheader/XX-Large - Headline style */
1428
+ --subheader-xx-large-style: regular;
1429
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1430
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1431
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1432
+ --subheader-xxx-large-line-height: 48px;
1433
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1434
+ --subheader-xxx-large-size: 40px;
1435
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1436
+ --subheader-xxx-large-style: regular;
1437
+ }
1438
+ }
1439
+ /* dark theme */
1440
+ [data-theme='dark'] {
1441
+ /* Background/base - Brand */
1442
+ --background-base: #1f1f1f;
1443
+ /* Background/scrim - Theme - Broker Workplace */
1444
+ --background-scrim: #61616180;
1445
+ /* Background/shade - Brand */
1446
+ --background-shade: #292929;
1447
+ /* Data visual/category-01 - Brand */
1448
+ --data-visual-category-01: #e6b297;
1449
+ /* Data visual/category-01-highlight - Brand */
1450
+ --data-visual-category-01-highlight: #e6b2974d;
1451
+ /* Data visual/category-02 - Brand */
1452
+ --data-visual-category-02: #b68a79;
1453
+ /* Data visual/category-02-highlight - Brand */
1454
+ --data-visual-category-02-highlight: #b68a794d;
1455
+ /* Data visual/category-03 - Brand */
1456
+ --data-visual-category-03: #cdbe80;
1457
+ /* Data visual/category-03-highlight - Brand */
1458
+ --data-visual-category-03-highlight: #cdbe804d;
1459
+ /* Data visual/category-04 - Brand */
1460
+ --data-visual-category-04: #969980;
1461
+ /* Data visual/category-04-highlight - Brand */
1462
+ --data-visual-category-04-highlight: #9699804d;
1463
+ /* Data visual/category-05 - Brand */
1464
+ --data-visual-category-05: #af9385;
1465
+ /* Data visual/category-05-highlight - Brand */
1466
+ --data-visual-category-05-highlight: #af93854d;
1467
+ /* Data visual/category-06 - Brand */
1468
+ --data-visual-category-06: #b2b2b2;
1469
+ /* Data visual/category-06-highlight - Brand */
1470
+ --data-visual-category-06-highlight: #b2b2b24d;
1471
+ /* Data visual/category-07 - Brand */
1472
+ --data-visual-category-07: #a98484;
1473
+ /* Data visual/category-07-highlight - Brand */
1474
+ --data-visual-category-07-highlight: #a984844d;
1475
+ /* Data visual/category-1 - Theme - Better Home & Garden */
1476
+ --data-visual-category-1: #0a466c;
1477
+ /* Data visual/category-1-highlight - Theme - Broker Workplace */
1478
+ --data-visual-category-1-highlight: #7899ae4d;
1479
+ /* Data visual/category-2 - Theme - Better Home & Garden */
1480
+ --data-visual-category-2: #7fc4ec;
1481
+ /* Data visual/category-2-highlight - Theme - Broker Workplace */
1482
+ --data-visual-category-2-highlight: #7fc4ec4d;
1483
+ /* Data visual/category-3 - Theme - Better Home & Garden */
1484
+ --data-visual-category-3: #958ca3;
1485
+ /* Data visual/category-3-highlight - Theme - Broker Workplace */
1486
+ --data-visual-category-3-highlight: #958ca34d;
1487
+ /* Data visual/category-4 - Theme - Better Home & Garden */
1488
+ --data-visual-category-4: #88c5af;
1489
+ /* Data visual/category-4-highlight - Theme - Broker Workplace */
1490
+ --data-visual-category-4-highlight: #88c5af4d;
1491
+ /* Data visual/category-5 - Theme - Better Home & Garden */
1492
+ --data-visual-category-5: #789ba0;
1493
+ /* Data visual/category-5-highlight - Theme - Broker Workplace */
1494
+ --data-visual-category-5-highlight: #789ba04d;
1495
+ /* Data visual/category-6 - Theme - Better Home & Garden */
1496
+ --data-visual-category-6: #b2b2b2;
1497
+ /* Data visual/category-6-highlight - Theme - Broker Workplace */
1498
+ --data-visual-category-6-highlight: #b2b2b24d;
1499
+ /* Data visual/category-7 - Theme - Better Home & Garden */
1500
+ --data-visual-category-7: #a19abc;
1501
+ /* Data visual/category-7-highlight - Theme - Broker Workplace */
1502
+ --data-visual-category-7-highlight: #a19abc4d;
1503
+ /* Data visual/gradient-end - Theme - Broker Workplace */
1504
+ --data-visual-gradient-end: #1f1f1f4d;
1505
+ /* Data visual/green - Theme - Broker Workplace */
1506
+ --data-visual-green: #7cb796;
1507
+ /* Data visual/green-highlight - Theme - Broker Workplace */
1508
+ --data-visual-green-highlight: #0d2f1c;
1509
+ /* Data visual/negative - Brand */
1510
+ --data-visual-negative: #e88997;
1511
+ /* Data visual/negative-highlight - Brand */
1512
+ --data-visual-negative-highlight: #4c141d;
1513
+ /* Data visual/positive - Brand */
1514
+ --data-visual-positive: #7cb796;
1515
+ /* Data visual/positive-highlight - Brand */
1516
+ --data-visual-positive-highlight: #0d2f1c;
1517
+ /* Data visual/red - Theme - Broker Workplace */
1518
+ --data-visual-red: #e88997;
1519
+ /* Data visual/red-highlight - Theme - Broker Workplace */
1520
+ --data-visual-red-highlight: #4c141d;
1521
+ /* Foreground/AI-powered/blue - Theme - Broker Workplace */
1522
+ --foreground-ai-powered-blue: #000000;
1523
+ /* Foreground/AI-powered/pink - Theme - Broker Workplace */
1524
+ --foreground-ai-powered-pink: #000000;
1525
+ /* Foreground/Brand/on-inverse-primary - Theme - Broker Workplace */
1526
+ --foreground-brand-on-inverse-primary: #757482;
1527
+ /* Foreground/Brand/on-inverse-secondary - Theme - Broker Workplace */
1528
+ --foreground-brand-on-inverse-secondary: #eba691;
1529
+ /* Foreground/Brand/on-brand-primary - Brand */
1530
+ /* Foreground color used on Brand's primary color (non neutral color) */
1531
+ --foreground-brand-on-primary: #141414;
1532
+ /* Foreground/Brand/on-brand-secondary - Brand */
1533
+ /* Foreground color used on Brand's primary color (non neutral color) */
1534
+ --foreground-brand-on-secondary: #141414;
1535
+ /* Foreground/Brand/brand-primary - Brand */
1536
+ /* Foreground text and icons that match the brand's primary color */
1537
+ --foreground-brand-primary: #757482;
1538
+ /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1539
+ --foreground-brand-primary-depth: #88bc88;
1540
+ /* Foreground/Brand/brand-secondary - Brand */
1541
+ /* Foreground text and icons that match the brand's secondary color */
1542
+ --foreground-brand-secondary: #f3a482;
1543
+ /* Foreground/Brand/brand-secondary-depth - Theme - Broker Workplace */
1544
+ --foreground-brand-secondary-depth: #eba691;
1545
+ /* Foreground/Link text/default - Brand */
1546
+ --foreground-link-text-default: #7a9ee1;
1547
+ /* Foreground/Link text/default-disabled - Brand */
1548
+ --foreground-link-text-default-disabled: #14387b;
1549
+ /* Foreground/Link text/default-hovered - Theme - Broker Workplace */
1550
+ --foreground-link-text-default-hovered: #90afe6;
1551
+ /* Foreground/Link text/default-pressed - Theme - Broker Workplace */
1552
+ --foreground-link-text-default-pressed: #a6bfeb;
1553
+ /* Foreground/Link text/default-visited - Brand */
1554
+ --foreground-link-text-default-visited: #af8baf;
1555
+ /* Foreground/Link text/subtle-disabled - Brand */
1556
+ --foreground-link-text-subtle-disabled: #4d4d4d;
1557
+ /* Foreground/Link text/subtle-hovered - Theme - Broker Workplace */
1558
+ --foreground-link-text-subtle-hovered: #e6e6e6;
1559
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Broker Workplace */
1560
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1561
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Broker Workplace */
1562
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1563
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1564
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1565
+ /* Foreground/Link text/subtle-pressed - Theme - Broker Workplace */
1566
+ --foreground-link-text-subtle-pressed: #d1d1d1;
1567
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1568
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1569
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1570
+ --foreground-neutral-disabled-on-surface: #4d4d4d;
1571
+ /* Foreground/Neutral/inverse-on-surface - Theme - Broker Workplace */
1572
+ --foreground-neutral-inverse-on-surface: #fafafa;
1573
+ /* Foreground/Neutral/on-color - Brand */
1574
+ /* Interactive controls */
1575
+ --foreground-neutral-on-color: #ffffff;
1576
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1577
+ /* Text and icons against inverse surface */
1578
+ --foreground-neutral-on-inverse-surface: #fafafa;
1579
+ /* Foreground/Neutral/on-surface - Brand */
1580
+ /* Default foreground text and icons against any surface color */
1581
+ --foreground-neutral-on-surface: #fafafa;
1582
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1583
+ /* Secondary foreground color for icons and text */
1584
+ --foreground-neutral-on-surface-variant-01: #c2c2c2;
1585
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1586
+ /* Tertiary foreground color for icons and text */
1587
+ --foreground-neutral-on-surface-variant-02: #9e9e9e;
1588
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1589
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1590
+ --foreground-neutral-on-surface-variant-03: #757575;
1591
+ /* Foreground/Neutral/skeleton-element - Brand */
1592
+ --foreground-neutral-skeleton-element: #333333;
1593
+ /* Foreground/Spectrum/blue - Theme - Broker Workplace */
1594
+ --foreground-spectrum-blue: #88aff7;
1595
+ /* Foreground/Spectrum/green - Theme - Broker Workplace */
1596
+ --foreground-spectrum-green: #87bd9f;
1597
+ /* Foreground/Spectrum/lime - Theme - Broker Workplace */
1598
+ --foreground-spectrum-lime: #dce28f;
1599
+ /* Foreground/Spectrum/magenta - Theme - Broker Workplace */
1600
+ --foreground-spectrum-magenta: #e07aed;
1601
+ /* Foreground/Spectrum/orange - Brand */
1602
+ --foreground-spectrum-orange: #f6a874;
1603
+ /* Foreground/Spectrum/pink - Theme - Broker Workplace */
1604
+ --foreground-spectrum-pink: #ea86b9;
1605
+ /* Foreground/Spectrum/purple - Theme - Broker Workplace */
1606
+ --foreground-spectrum-purple: #c8a6f9;
1607
+ /* Foreground/Spectrum/red - Brand */
1608
+ --foreground-spectrum-red: #ea93a0;
1609
+ /* Foreground/Spectrum/teal - Theme - Broker Workplace */
1610
+ --foreground-spectrum-teal: #74bbb4;
1611
+ /* Foreground/Spectrum/yellow - Theme - Broker Workplace */
1612
+ --foreground-spectrum-yellow: #fada8d;
1613
+ /* Interactions/brand-disabled-opacity - Theme - Broker Workplace */
1614
+ --interactions-brand-disabled-opacity: #ffffff0f;
1615
+ /* Interactions/brand-hover-opacity - Theme - Broker Workplace */
1616
+ --interactions-brand-hover-opacity: #ffffff1a;
1617
+ /* Interactions/brand-press-opacity - Theme - Broker Workplace */
1618
+ --interactions-brand-press-opacity: #ffffff33;
1619
+ /* Interactions/disabled-opacity - Theme - Broker Workplace */
1620
+ --interactions-disabled-opacity: #ffffff0f;
1621
+ /* Interactions/hover-opacity - Theme - Broker Workplace */
1622
+ --interactions-hover-opacity: #ffffff14;
1623
+ /* Interactions/link-active-opacity - Brand */
1624
+ --interactions-link-active-opacity: #ffffff4d;
1625
+ /* Interactions/neutral-hover-opacity - Brand */
1626
+ /* surfaces using neutral tones */
1627
+ --interactions-neutral-hover-opacity: #ffffff1a;
1628
+ /* Interactions/neutral-press-opacity - Brand */
1629
+ /* surfaces using neutral tones */
1630
+ --interactions-neutral-press-opacity: #ffffff29;
1631
+ /* Interactions/press-opacity - Theme - Broker Workplace */
1632
+ --interactions-press-opacity: #ffffff29;
1633
+ /* Interactions/primary-disabled-opacity - Theme - Broker Workplace */
1634
+ --interactions-primary-disabled-opacity: #7574821f;
1635
+ /* Interactions/primary-hover-opacity - Theme - Broker Workplace */
1636
+ --interactions-primary-hover-opacity: #7574821a;
1637
+ /* Interactions/primary-press-opacity - Theme - Broker Workplace */
1638
+ --interactions-primary-press-opacity: #75748233;
1639
+ /* Shadow/shadow-10 - Theme - Broker Workplace */
1640
+ --shadow-10: #6161611a;
1641
+ /* Shadow/shadow-12 - Theme - Broker Workplace */
1642
+ --shadow-12: #6161611f;
1643
+ /* Shadow/shadow-15 - Theme - Broker Workplace */
1644
+ --shadow-15: #61616126;
1645
+ /* Shadow/shadow-25 - Theme - Broker Workplace */
1646
+ --shadow-25: #61616140;
1647
+ /* Shadow/shadow-32 - Theme - Broker Workplace */
1648
+ --shadow-32: #61616152;
1649
+ /* Shadow/inner-shadow - Brand */
1650
+ --shadow-inner: #000000;
1651
+ /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1652
+ --shadow-inner-100: #000000;
1653
+ /* Shadow/variant-01 - Brand */
1654
+ --shadow-variant-01: #6161611a;
1655
+ /* Shadow/variant-02 - Brand */
1656
+ --shadow-variant-02: #6161611f;
1657
+ /* Shadow/variant-03 - Brand */
1658
+ --shadow-variant-03: #61616126;
1659
+ /* Shadow/variant-04 - Brand */
1660
+ --shadow-variant-04: #61616140;
1661
+ /* Shadow/variant-05 - Brand */
1662
+ --shadow-variant-05: #61616152;
1663
+ /* Status/error - Brand */
1664
+ /* Foreground error text and icons */
1665
+ --status-error: #e26b7d;
1666
+ /* Status/information - Theme - Better Home & Garden */
1667
+ --status-information: #5d92f5;
1668
+ /* Status/informational - Brand */
1669
+ /* Foreground informational text and icons */
1670
+ --status-informational: #5d92f5;
1671
+ /* Status/on-error - Brand */
1672
+ /* Foreground error text and icons */
1673
+ --status-on-error: #ffffff;
1674
+ /* Status/on-information - Theme - Better Home & Garden */
1675
+ --status-on-information: #ffffff;
1676
+ /* Status/on-informational - Brand */
1677
+ /* Foreground informational text and icons */
1678
+ --status-on-informational: #ffffff;
1679
+ /* Status/on-success - Brand */
1680
+ /* Foreground success icons and text */
1681
+ --status-on-success: #ffffff;
1682
+ /* Status/on-warning - Brand */
1683
+ /* Foreground warning icons */
1684
+ --status-on-warning: #141414;
1685
+ /* Status/success - Brand */
1686
+ /* Foreground success icons and text */
1687
+ --status-success: #519f73;
1688
+ /* Status/warning - Brand */
1689
+ /* Foreground warning icons */
1690
+ --status-warning: #f8cd63;
1691
+ /* Stroke/AI-powered/blue - Theme - Broker Workplace */
1692
+ --stroke-ai-powered-blue: #000000;
1693
+ /* Stroke/AI-powered/pink - Theme - Broker Workplace */
1694
+ --stroke-ai-powered-pink: #000000;
1695
+ /* Stroke/Brand/brand-primary - Brand */
1696
+ /* Outline variant - decorative elements such as dividers */
1697
+ --stroke-brand-primary: #757482;
1698
+ /* Stroke/Brand/brand-primary-depth - Brand */
1699
+ /* Outline variant - decorative elements such as dividers */
1700
+ --stroke-brand-primary-depth: #9897a1;
1701
+ /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1702
+ --stroke-brand-secondary: #f0bcac;
1703
+ /* Stroke/Brand/brand-secondary-depth - Theme - Broker Workplace */
1704
+ --stroke-brand-secondary-depth: #eba691;
1705
+ /* Stroke/Neutral/neutral-base - Brand */
1706
+ /* For control components */
1707
+ --stroke-neutral-base: #6b6b6b;
1708
+ /* Stroke/Neutral/disabled-dark - Brand */
1709
+ /* Disabled outline separating the fill and surface background */
1710
+ --stroke-neutral-disabled-dark: #3d3d3d;
1711
+ /* Stroke/Neutral/disabled-light - Brand */
1712
+ /* Disabled outline separating the fill and surface background */
1713
+ --stroke-neutral-disabled-light: #4d4d4d;
1714
+ /* Stroke/Neutral/focus - Brand */
1715
+ /* Highlight focus element */
1716
+ --stroke-neutral-focus: #ffffff;
1717
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1718
+ /* Highlight focus element */
1719
+ --stroke-neutral-focus-on-inverse: #ffffff;
1720
+ /* Stroke/Neutral/neutral-high - Brand */
1721
+ --stroke-neutral-high: #fafafa;
1722
+ /* Stroke/Neutral/neutral-high-contrast - Theme - Broker Workplace */
1723
+ --stroke-neutral-high-contrast: #fafafa;
1724
+ /* Stroke/Neutral/Interactions/disabled-dark - Theme - Broker Workplace */
1725
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1726
+ /* Stroke/Neutral/Interactions/disabled-light - Theme - Broker Workplace */
1727
+ --stroke-neutral-interactions-disabled-light: #4d4d4d;
1728
+ /* Stroke/Neutral/Interactions/focus - Theme - Broker Workplace */
1729
+ --stroke-neutral-interactions-focus: #ffffff;
1730
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Broker Workplace */
1731
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1732
+ /* Stroke/Neutral/neutral-low - Brand */
1733
+ /* Outline variant - decorative elements such as dividers */
1734
+ --stroke-neutral-low: #4d4d4d;
1735
+ /* Stroke/Neutral/neutral-low-contrast - Theme - Broker Workplace */
1736
+ --stroke-neutral-low-contrast: #4d4d4d;
1737
+ /* Surface/AI-powered/blue - Theme - Broker Workplace */
1738
+ --surface-ai-powered-blue: #000000;
1739
+ /* Surface/AI-powered/pink - Theme - Broker Workplace */
1740
+ --surface-ai-powered-pink: #000000;
1741
+ /* Surface/Brand/primary - Brand */
1742
+ --surface-brand-primary: #757482;
1743
+ /* Surface/Brand/primary-highlight - Theme - Broker Workplace */
1744
+ --surface-brand-primary-highlight: #0a220a;
1745
+ /* Surface/Brand/secondary - Brand */
1746
+ --surface-brand-secondary: #f3a482;
1747
+ /* Surface/Brand/secondary-highlight - Theme - Broker Workplace */
1748
+ --surface-brand-secondary-highlight: #371b12;
1749
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1750
+ --surface-neutral-interactions-dark-disabled: #474747;
1751
+ /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1752
+ --surface-neutral-interactions-light-disabled: #292929;
1753
+ /* Surface/Neutral/inverse - Brand */
1754
+ /* Inverted. Use for toasts notification & snackbars */
1755
+ --surface-neutral-inverse: #383838;
1756
+ /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1757
+ --surface-neutral-inverse-dark: #383838;
1758
+ /* Surface/Neutral/inverse-light - Theme - Broker Workplace */
1759
+ --surface-neutral-inverse-light: #575757;
1760
+ /* Surface/Neutral/T1-base - Brand */
1761
+ --surface-neutral-t1-base: #1f1f1f;
1762
+ /* Surface/Neutral/T2-lowest - Brand */
1763
+ --surface-neutral-t2-lowest: #2e2e2e;
1764
+ /* Surface/Neutral/T3-low - Brand */
1765
+ /* Navigations, app bar etc */
1766
+ --surface-neutral-t3-low: #383838;
1767
+ /* Surface/Neutral/T4-high - Brand */
1768
+ /* Navigations, app bar etc */
1769
+ --surface-neutral-t4-high: #7a7a7a;
1770
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1771
+ --surface-neutral-t4-high-2: #7a7a7a;
1772
+ /* Surface/Neutral/transparent - Brand */
1773
+ --surface-neutral-transparent: #ffffff00;
1774
+ /* Surface/Spectrum/blue - Theme - Broker Workplace */
1775
+ --surface-spectrum-blue: #0e2754;
1776
+ /* Surface/Spectrum/green - Theme - Broker Workplace */
1777
+ --surface-spectrum-green: #0d2f1c;
1778
+ /* Surface/Spectrum/lime - Theme - Broker Workplace */
1779
+ --surface-spectrum-lime: #434712;
1780
+ /* Surface/Spectrum/magenta - Theme - Broker Workplace */
1781
+ --surface-spectrum-magenta: #45054e;
1782
+ /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1783
+ --surface-spectrum-orange: #532201;
1784
+ /* Surface/Spectrum/pink - Theme - Broker Workplace */
1785
+ --surface-spectrum-pink: #4c0c2d;
1786
+ /* Surface/Spectrum/purple - Theme - Broker Workplace */
1787
+ --surface-spectrum-purple: #220053;
1788
+ /* Surface/Spectrum/red - Theme - Broker Workplace */
1789
+ --surface-spectrum-red: #4c141d;
1790
+ /* Surface/Spectrum/teal - Theme - Broker Workplace */
1791
+ --surface-spectrum-teal: #012e2a;
1792
+ /* Surface/Spectrum/yellow - Theme - Broker Workplace */
1793
+ --surface-spectrum-yellow: #564210;
1794
+ }