@bspk/ui 1.3.29 → 1.4.0

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