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