@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/sothebys.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=Geist: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,26 +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/Brand/on-brand-primary - Theme - Sotheby's */
608
- --foreground-brand-on-primary: #ffffff;
609
- /* Foreground/Link text/subtle-inverse-hovered - Theme - Sotheby's */
610
- --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
611
- /* Foreground/Link text/subtle-inverse-pressed - Theme - Sotheby's */
612
- --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
613
- /* Foreground/Neutral/inverse-on-surface - Theme - Sotheby's */
614
- --foreground-neutral-inverse-on-surface: #fafafa;
615
- /* Foreground/Neutral/on-color - Theme - Sotheby's */
616
- --foreground-neutral-on-color: #ffffff;
617
- /* Foreground/Neutral/on-inverse-surface - Theme - Sotheby's */
618
- --foreground-neutral-on-inverse-surface: #fafafa;
619
- /* Interaction/disabled-opacity - Theme - 3.0 */
620
- --interaction-disabled-opacity: #0000000f;
621
- /* Interaction/primary-disabled-opacity - Theme - 3.0 */
622
- --interaction-primary-disabled-opacity: #1559ea1f;
623
- /* Interaction/primary-hover-opacity - Theme - 3.0 */
624
- --interaction-primary-hover-opacity: #1559ea1a;
625
- /* Interaction/primary-press-opacity - Theme - 3.0 */
626
- --interaction-primary-press-opacity: #1559ea33;
469
+ /* Foreground/AI-powered/blue - Theme - Sotheby's */
470
+ --foreground-ai-powered-blue: #000000;
471
+ /* Foreground/AI-powered/pink - Theme - Sotheby's */
472
+ --foreground-ai-powered-pink: #000000;
627
473
  /* Interactions/opacity-black-10 - Global (primitives) */
628
474
  --interactions-opacity-black-10: #0000001a;
629
475
  /* Interactions/opacity-black-16 - Global (primitives) */
@@ -669,36 +515,36 @@ body {
669
515
  /* Colors/Brands/Sotheby's/Interactions/primary-light-opacity-8 - Global (primitives) */
670
516
  --interactions-primary-light-opacity-8: #00234914;
671
517
  /* Labels/Base */
672
- --labels-base: 500 16px/20px var(--typeface);
673
- /* Labels/Base - line height */
674
- --labels-base-line-height: 20px;
675
- /* 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 */
676
522
  --labels-base-size: 16px;
677
- /* Labels/Base - style */
523
+ /* Labels/Base - style */
678
524
  --labels-base-style: medium;
679
525
  /* Labels/Large */
680
- --labels-large: 500 18px/24px var(--typeface);
681
- /* Labels/Large - line height */
682
- --labels-large-line-height: 24px;
683
- /* 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 */
684
530
  --labels-large-size: 18px;
685
- /* Labels/Large - style */
531
+ /* Labels/Large - style */
686
532
  --labels-large-style: medium;
687
533
  /* Labels/Small */
688
534
  --labels-small: 500 14px/20px var(--typeface);
689
- /* Labels/Small - line height */
535
+ /* Labels/Small - line height */
690
536
  --labels-small-line-height: 20px;
691
- /* Labels/Small - size */
537
+ /* Labels/Small - size */
692
538
  --labels-small-size: 14px;
693
- /* Labels/Small - style */
539
+ /* Labels/Small - style */
694
540
  --labels-small-style: medium;
695
541
  /* Labels/X-Small */
696
542
  --labels-x-small: 500 12px/16px var(--typeface);
697
- /* Labels/X-Small - line height */
543
+ /* Labels/X-Small - line height */
698
544
  --labels-x-small-line-height: 16px;
699
- /* Labels/X-Small - size */
545
+ /* Labels/X-Small - size */
700
546
  --labels-x-small-size: 12px;
701
- /* Labels/X-Small - style */
547
+ /* Labels/X-Small - style */
702
548
  --labels-x-small-style: medium;
703
549
  /* Colors/Brands/Sotheby's/Primary/00-base - Global (primitives) */
704
550
  --primary-00-base: #002349;
@@ -718,8 +564,6 @@ body {
718
564
  --radius-lg: 12px;
719
565
  /* Radius/md - Borders */
720
566
  --radius-md: 8px;
721
- /* Radius/none - Borders */
722
- --radius-none: 0;
723
567
  /* Radius/sm - Borders */
724
568
  --radius-sm: 4px;
725
569
  /* Radius/xlg - Borders */
@@ -814,8 +658,6 @@ body {
814
658
  --spacing-sizing-24: 148px;
815
659
  /* Spacing/sizing-25 - Spacing & Sizing */
816
660
  --spacing-sizing-25: 152px;
817
- /* Spacing/sizing-none - Spacing & Sizing */
818
- --spacing-sizing-none: 0;
819
661
  /* Spacings/1040 - Global (primitives) */
820
662
  --spacings-1040: 104px;
821
663
  /* Spacings/120 - Global (primitives) */
@@ -866,36 +708,22 @@ body {
866
708
  --spacings-800: 80px;
867
709
  /* Spacings/960 - Global (primitives) */
868
710
  --spacings-960: 96px;
869
- /* Spacings/None - Global (primitives) */
870
- --spacings-none: 0;
871
- /* Status/on-error - Theme - Sotheby's */
872
- --status-on-error: #ffffff;
873
- /* Status/on-information - Theme - Sotheby's */
874
- --status-on-information: #ffffff;
875
- /* Status/on-informational - Theme - Sotheby's */
876
- --status-on-informational: #ffffff;
877
- /* Status/on-success - Theme - Sotheby's */
878
- --status-on-success: #ffffff;
879
- /* Status/on-warning - Theme - Sotheby's */
880
- --status-on-warning: #141414;
881
- /* Stroke/Neutral/focus-on-inverse - Theme - Sotheby's */
882
- --stroke-neutral-focus-on-inverse: #ffffff;
883
- /* Stroke/Neutral/Interaction/inverse-focus - Theme - 3.0 */
884
- --stroke-neutral-interaction-inverse-focus: #ffffff;
885
- /* Stroke/Neutral/Interactions/inverse-focus - Theme - Sotheby's */
886
- --stroke-neutral-interactions-inverse-focus: #ffffff;
887
- /* Stroke/none - Borders */
888
- --stroke-none: 0;
711
+ /* Stroke/AI-powered/blue - Theme - Sotheby's */
712
+ --stroke-ai-powered-blue: #000000;
713
+ /* Stroke/AI-powered/pink - Theme - Sotheby's */
714
+ --stroke-ai-powered-pink: #000000;
889
715
  /* Stroke/thick - Borders */
890
716
  --stroke-thick: 2px;
891
717
  /* Stroke/thicker - Borders */
892
718
  --stroke-thicker: 4px;
893
719
  /* Stroke/thin - Borders */
894
720
  --stroke-thin: 1px;
895
- /* Surface/Neutral/transparent - Theme - Sotheby's */
896
- --surface-neutral-transparent: #ffffff00;
721
+ /* Surface/AI-powered/blue - Theme - Sotheby's */
722
+ --surface-ai-powered-blue: #000000;
723
+ /* Surface/AI-powered/pink - Theme - Sotheby's */
724
+ --surface-ai-powered-pink: #000000;
897
725
  /* Typeface - Brand */
898
- --typeface: 'Geist', 'Work Sans', sans-serif;
726
+ --typeface: 'Geist';
899
727
  /* Typography/Line-height/lh-1 - Global (primitives) */
900
728
  --typography-line-height-lh-1: 16px;
901
729
  /* Typography/Line-height/lh-10 - Global (primitives) */
@@ -959,29 +787,29 @@ body {
959
787
  /* Typography/Size/xxxlg - Global (primitives) */
960
788
  --typography-size-xxxlg: 40px;
961
789
  /* Typography/Typeface/Arial - Global (primitives) */
962
- --typography-typeface-arial: 'Arial', sans-serif;
790
+ --typography-typeface-arial: 'Arial';
963
791
  /* Typography/Typeface/Geist - Global (primitives) */
964
- --typography-typeface-geist: 'Geist', sans-serif;
792
+ --typography-typeface-geist: 'Geist';
965
793
  /* Typography/Typeface/Helvetica - Global (primitives) */
966
- --typography-typeface-helvetica: 'Helvetica', sans-serif;
794
+ --typography-typeface-helvetica: 'Helvetica';
967
795
  /* Typography/Typeface/Inter - Global (primitives) */
968
- --typography-typeface-inter: 'Inter', sans-serif;
796
+ --typography-typeface-inter: 'Inter';
969
797
  /* Typography/Typeface/Lato - Global (primitives) */
970
- --typography-typeface-lato: 'Lato', sans-serif;
798
+ --typography-typeface-lato: 'Lato';
971
799
  /* Typography/Typeface/Manrope - Global (primitives) */
972
- --typography-typeface-manrope: 'Manrope', sans-serif;
800
+ --typography-typeface-manrope: 'Manrope';
973
801
  /* Typography/Typeface/Open Sans - Global (primitives) */
974
- --typography-typeface-open-sans: 'Open Sans', sans-serif;
802
+ --typography-typeface-open-sans: 'Open Sans';
975
803
  /* Typography/Typeface/Red Hat Text - Global (primitives) */
976
- --typography-typeface-red-hat-text: 'Red Hat Text', sans-serif;
804
+ --typography-typeface-red-hat-text: 'Red Hat Text';
977
805
  /* Typography/Typeface/Roboto - Global (primitives) */
978
- --typography-typeface-roboto: 'Roboto', sans-serif;
806
+ --typography-typeface-roboto: 'Roboto';
979
807
  /* Typography/Typeface/SF Pro - Global (primitives) */
980
- --typography-typeface-sf-pro: 'SF Pro', sans-serif;
808
+ --typography-typeface-sf-pro: 'SF Pro';
981
809
  /* Typography/Typeface/Typold - Global (primitives) */
982
- --typography-typeface-typold: 'Typold', sans-serif;
810
+ --typography-typeface-typold: 'Typold';
983
811
  /* Typography/Typeface/Work Sans - Global (primitives) */
984
- --typography-typeface-work-sans: 'Work Sans', sans-serif;
812
+ --typography-typeface-work-sans: 'Work Sans';
985
813
  /* Typography/Weight/300 - Global (primitives) */
986
814
  --typography-weight-300: 300;
987
815
  /* Typography/Weight/400 - Global (primitives) */
@@ -992,52 +820,52 @@ body {
992
820
  --typography-weight-600: 600;
993
821
  /* Mobile/Display/Regular/Large */
994
822
  --display-regular-large: 400 56px/72px var(--typeface);
995
- /* Mobile/Display/Regular/Large - line height */
823
+ /* Mobile/Display/Regular/Large - line height */
996
824
  --display-regular-large-line-height: 72px;
997
- /* Mobile/Display/Regular/Large - size */
825
+ /* Mobile/Display/Regular/Large - size */
998
826
  --display-regular-large-size: 56px;
999
- /* Mobile/Display/Regular/Large - style */
827
+ /* Mobile/Display/Regular/Large - style */
1000
828
  --display-regular-large-style: regular;
1001
829
  /* Mobile/Display/Regular/Medium */
1002
830
  --display-regular-medium: 400 48px/60px var(--typeface);
1003
- /* Mobile/Display/Regular/Medium - line height */
831
+ /* Mobile/Display/Regular/Medium - line height */
1004
832
  --display-regular-medium-line-height: 60px;
1005
- /* Mobile/Display/Regular/Medium - size */
833
+ /* Mobile/Display/Regular/Medium - size */
1006
834
  --display-regular-medium-size: 48px;
1007
- /* Mobile/Display/Regular/Medium - style */
835
+ /* Mobile/Display/Regular/Medium - style */
1008
836
  --display-regular-medium-style: regular;
1009
837
  /* Mobile/Display/Regular/Small */
1010
838
  --display-regular-small: 400 40px/48px var(--typeface);
1011
- /* Mobile/Display/Regular/Small - line height */
839
+ /* Mobile/Display/Regular/Small - line height */
1012
840
  --display-regular-small-line-height: 48px;
1013
- /* Mobile/Display/Regular/Small - size */
841
+ /* Mobile/Display/Regular/Small - size */
1014
842
  --display-regular-small-size: 40px;
1015
- /* Mobile/Display/Regular/Small - style */
843
+ /* Mobile/Display/Regular/Small - style */
1016
844
  --display-regular-small-style: regular;
1017
845
  /* Mobile/Display/Semibold/Large */
1018
846
  --display-semibold-large: 600 56px/72px var(--typeface);
1019
- /* Mobile/Display/Semibold/Large - line height */
847
+ /* Mobile/Display/Semibold/Large - line height */
1020
848
  --display-semibold-large-line-height: 72px;
1021
- /* Mobile/Display/Semibold/Large - size */
849
+ /* Mobile/Display/Semibold/Large - size */
1022
850
  --display-semibold-large-size: 56px;
1023
- /* Mobile/Display/Semibold/Large - style */
1024
- --display-semibold-large-style: semibold;
851
+ /* Mobile/Display/Semibold/Large - style */
852
+ --display-semibold-large-style: 600;
1025
853
  /* Mobile/Display/Semibold/Medium */
1026
854
  --display-semibold-medium: 600 48px/60px var(--typeface);
1027
- /* Mobile/Display/Semibold/Medium - line height */
855
+ /* Mobile/Display/Semibold/Medium - line height */
1028
856
  --display-semibold-medium-line-height: 60px;
1029
- /* Mobile/Display/Semibold/Medium - size */
857
+ /* Mobile/Display/Semibold/Medium - size */
1030
858
  --display-semibold-medium-size: 48px;
1031
- /* Mobile/Display/Semibold/Medium - style */
1032
- --display-semibold-medium-style: semibold;
859
+ /* Mobile/Display/Semibold/Medium - style */
860
+ --display-semibold-medium-style: 600;
1033
861
  /* Mobile/Display/Semibold/Small */
1034
862
  --display-semibold-small: 600 40px/48px var(--typeface);
1035
- /* Mobile/Display/Semibold/Small - line height */
863
+ /* Mobile/Display/Semibold/Small - line height */
1036
864
  --display-semibold-small-line-height: 48px;
1037
- /* Mobile/Display/Semibold/Small - size */
865
+ /* Mobile/Display/Semibold/Small - size */
1038
866
  --display-semibold-small-size: 40px;
1039
- /* Mobile/Display/Semibold/Small - style */
1040
- --display-semibold-small-style: semibold;
867
+ /* Mobile/Display/Semibold/Small - style */
868
+ --display-semibold-small-style: 600;
1041
869
  /* Mobile/Heading/H1 - Large Headline */
1042
870
  --heading-h1: 600 32px/40px var(--typeface);
1043
871
  /* Mobile/Heading/H1 - Large Headline line height */
@@ -1045,7 +873,7 @@ body {
1045
873
  /* Mobile/Heading/H1 - Large Headline size */
1046
874
  --heading-h1-size: 32px;
1047
875
  /* Mobile/Heading/H1 - Large Headline style */
1048
- --heading-h1-style: semibold;
876
+ --heading-h1-style: 600;
1049
877
  /* Mobile/Heading/H2 - Headline */
1050
878
  --heading-h2: 600 28px/36px var(--typeface);
1051
879
  /* Mobile/Heading/H2 - Headline line height */
@@ -1053,7 +881,7 @@ body {
1053
881
  /* Mobile/Heading/H2 - Headline size */
1054
882
  --heading-h2-size: 28px;
1055
883
  /* Mobile/Heading/H2 - Headline style */
1056
- --heading-h2-style: semibold;
884
+ --heading-h2-style: 600;
1057
885
  /* Mobile/Heading/H3 - Headline */
1058
886
  --heading-h3: 600 24px/32px var(--typeface);
1059
887
  /* Mobile/Heading/H3 - Headline line height */
@@ -1061,7 +889,7 @@ body {
1061
889
  /* Mobile/Heading/H3 - Headline size */
1062
890
  --heading-h3-size: 24px;
1063
891
  /* Mobile/Heading/H3 - Headline style */
1064
- --heading-h3-style: semibold;
892
+ --heading-h3-style: 600;
1065
893
  /* Mobile/Heading/H4 - Headline */
1066
894
  --heading-h4: 600 20px/28px var(--typeface);
1067
895
  /* Mobile/Heading/H4 - Headline line height */
@@ -1069,22 +897,22 @@ body {
1069
897
  /* Mobile/Heading/H4 - Headline size */
1070
898
  --heading-h4-size: 20px;
1071
899
  /* Mobile/Heading/H4 - Headline style */
1072
- --heading-h4-style: semibold;
900
+ --heading-h4-style: 600;
1073
901
  /* Mobile/Heading/H5 */
1074
902
  --heading-h5: 600 18px/24px var(--typeface);
1075
- /* Mobile/Heading/H5 - line height */
903
+ /* Mobile/Heading/H5 - line height */
1076
904
  --heading-h5-line-height: 24px;
1077
- /* Mobile/Heading/H5 - size */
905
+ /* Mobile/Heading/H5 - size */
1078
906
  --heading-h5-size: 18px;
1079
- /* Mobile/Heading/H5 - style */
1080
- --heading-h5-style: semibold;
907
+ /* Mobile/Heading/H5 - style */
908
+ --heading-h5-style: 600;
1081
909
  /* Mobile/Heading/H6 */
1082
910
  --heading-h6: 500 16px/20px var(--typeface);
1083
- /* Mobile/Heading/H6 - line height */
911
+ /* Mobile/Heading/H6 - line height */
1084
912
  --heading-h6-line-height: 20px;
1085
- /* Mobile/Heading/H6 - size */
913
+ /* Mobile/Heading/H6 - size */
1086
914
  --heading-h6-size: 16px;
1087
- /* Mobile/Heading/H6 - style */
915
+ /* Mobile/Heading/H6 - style */
1088
916
  --heading-h6-style: medium;
1089
917
  /* Mobile/Subheader/Large - Headline */
1090
918
  --subheader-large: 400 20px/28px var(--typeface);
@@ -1126,206 +954,66 @@ body {
1126
954
  --subheader-xxx-large-size: 32px;
1127
955
  /* Mobile/Subheader/XXX-Large - Large Headline style */
1128
956
  --subheader-xxx-large-style: regular;
1129
-
1130
- @media (width >= 640px) {
1131
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1132
- --display-regular-large: 400 64px/88px var(--typeface);
1133
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1134
- --display-regular-large-line-height: 88px;
1135
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1136
- --display-regular-large-size: 64px;
1137
- /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1138
- --display-regular-large-style: regular;
1139
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1140
- --display-regular-medium: 400 56px/72px var(--typeface);
1141
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1142
- --display-regular-medium-line-height: 72px;
1143
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1144
- --display-regular-medium-size: 56px;
1145
- /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1146
- --display-regular-medium-style: regular;
1147
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1148
- --display-regular-small: 400 48px/60px var(--typeface);
1149
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1150
- --display-regular-small-line-height: 60px;
1151
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1152
- --display-regular-small-size: 48px;
1153
- /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1154
- --display-regular-small-style: regular;
1155
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1156
- --display-semibold-large: 600 64px/88px var(--typeface);
1157
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1158
- --display-semibold-large-line-height: 88px;
1159
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1160
- --display-semibold-large-size: 64px;
1161
- /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1162
- --display-semibold-large-style: semibold;
1163
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1164
- --display-semibold-medium: 600 56px/72px var(--typeface);
1165
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1166
- --display-semibold-medium-line-height: 72px;
1167
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1168
- --display-semibold-medium-size: 56px;
1169
- /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1170
- --display-semibold-medium-style: semibold;
1171
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1172
- --display-semibold-small: 600 48px/60px var(--typeface);
1173
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1174
- --display-semibold-small-line-height: 60px;
1175
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1176
- --display-semibold-small-size: 48px;
1177
- /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1178
- --display-semibold-small-style: semibold;
1179
- /* Desktop/Heading/H1 */
1180
- --heading-h1: 600 40px/48px var(--typeface);
1181
- /* Desktop/Heading/H1 - line height */
1182
- --heading-h1-line-height: 48px;
1183
- /* Desktop/Heading/H1 - size */
1184
- --heading-h1-size: 40px;
1185
- /* Desktop/Heading/H1 - style */
1186
- --heading-h1-style: semibold;
1187
- /* Desktop/Heading/H2 */
1188
- --heading-h2: 600 32px/40px var(--typeface);
1189
- /* Desktop/Heading/H2 - line height */
1190
- --heading-h2-line-height: 40px;
1191
- /* Desktop/Heading/H2 - size */
1192
- --heading-h2-size: 32px;
1193
- /* Desktop/Heading/H2 - style */
1194
- --heading-h2-style: semibold;
1195
- /* Desktop/Heading/H3 */
1196
- --heading-h3: 600 28px/36px var(--typeface);
1197
- /* Desktop/Heading/H3 - line height */
1198
- --heading-h3-line-height: 36px;
1199
- /* Desktop/Heading/H3 - size */
1200
- --heading-h3-size: 28px;
1201
- /* Desktop/Heading/H3 - style */
1202
- --heading-h3-style: semibold;
1203
- /* Desktop/Heading/H4 */
1204
- --heading-h4: 600 24px/32px var(--typeface);
1205
- /* Desktop/Heading/H4 - line height */
1206
- --heading-h4-line-height: 32px;
1207
- /* Desktop/Heading/H4 - size */
1208
- --heading-h4-size: 24px;
1209
- /* Desktop/Heading/H4 - style */
1210
- --heading-h4-style: semibold;
1211
- /* Desktop/Heading/H5 */
1212
- --heading-h5: 600 20px/28px var(--typeface);
1213
- /* Desktop/Heading/H5 - line height */
1214
- --heading-h5-line-height: 28px;
1215
- /* Desktop/Heading/H5 - size */
1216
- --heading-h5-size: 20px;
1217
- /* Desktop/Heading/H5 - style */
1218
- --heading-h5-style: semibold;
1219
- /* Desktop/Heading/H6 */
1220
- --heading-h6: 500 18px/24px var(--typeface);
1221
- /* Desktop/Heading/H6 - line height */
1222
- --heading-h6-line-height: 24px;
1223
- /* Desktop/Heading/H6 - size */
1224
- --heading-h6-size: 18px;
1225
- /* Desktop/Heading/H6 - style */
1226
- --heading-h6-style: medium;
1227
- /* Desktop/Subheader/Large - Headline */
1228
- --subheader-large: 400 24px/32px var(--typeface);
1229
- /* Desktop/Subheader/Large - Headline line height */
1230
- --subheader-large-line-height: 32px;
1231
- /* Desktop/Subheader/Large - Headline size */
1232
- --subheader-large-size: 24px;
1233
- /* Desktop/Subheader/Large - Headline style */
1234
- --subheader-large-style: regular;
1235
- /* Desktop/Subheader/Medium */
1236
- --subheader-medium: 400 20px/28px var(--typeface);
1237
- /* Desktop/Subheader/Medium - line height */
1238
- --subheader-medium-line-height: 28px;
1239
- /* Desktop/Subheader/Medium - size */
1240
- --subheader-medium-size: 20px;
1241
- /* Desktop/Subheader/Medium - style */
1242
- --subheader-medium-style: regular;
1243
- /* Desktop/Subheader/X-Large - Headline */
1244
- --subheader-x-large: 400 28px/36px var(--typeface);
1245
- /* Desktop/Subheader/X-Large - Headline line height */
1246
- --subheader-x-large-line-height: 36px;
1247
- /* Desktop/Subheader/X-Large - Headline size */
1248
- --subheader-x-large-size: 28px;
1249
- /* Desktop/Subheader/X-Large - Headline style */
1250
- --subheader-x-large-style: regular;
1251
- /* Desktop/Subheader/XX-Large - Headline */
1252
- --subheader-xx-large: 400 32px/40px var(--typeface);
1253
- /* Desktop/Subheader/XX-Large - Headline line height */
1254
- --subheader-xx-large-line-height: 40px;
1255
- /* Desktop/Subheader/XX-Large - Headline size */
1256
- --subheader-xx-large-size: 32px;
1257
- /* Desktop/Subheader/XX-Large - Headline style */
1258
- --subheader-xx-large-style: regular;
1259
- /* Desktop/Subheader/XXX-Large - Large Headline */
1260
- --subheader-xxx-large: 400 40px/48px var(--typeface);
1261
- /* Desktop/Subheader/XXX-Large - Large Headline line height */
1262
- --subheader-xxx-large-line-height: 48px;
1263
- /* Desktop/Subheader/XXX-Large - Large Headline size */
1264
- --subheader-xxx-large-size: 40px;
1265
- /* Desktop/Subheader/XXX-Large - Large Headline style */
1266
- --subheader-xxx-large-style: regular;
1267
- }
1268
-
1269
- /** Light theme (default) **/
1270
- /* Background/base - Theme - Sotheby's */
957
+ /* light theme (default) */
958
+ /* Background/base - Brand */
1271
959
  --background-base: #ffffff;
1272
960
  /* Background/scrim - Theme - Sotheby's */
1273
961
  --background-scrim: #00000040;
1274
- /* Background/shade - Theme - Sotheby's */
962
+ /* Background/shade - Brand */
1275
963
  --background-shade: #f5f5f5;
1276
- /* Data visual/category-01 - Theme - Sotheby's */
964
+ /* Data visual/category-01 - Brand */
1277
965
  --data-visual-category-01: #130033;
1278
- /* Data visual/category-01-highlight - Theme - Sotheby's */
966
+ /* Data visual/category-01-highlight - Brand */
1279
967
  --data-visual-category-01-highlight: #1300334d;
1280
- /* Data visual/category-02 - Theme - Sotheby's */
968
+ /* Data visual/category-02 - Brand */
1281
969
  --data-visual-category-02: #299de0;
1282
- /* Data visual/category-02-highlight - Theme - Sotheby's */
970
+ /* Data visual/category-02-highlight - Brand */
1283
971
  --data-visual-category-02-highlight: #299de04d;
1284
- /* Data visual/category-03 - Theme - Sotheby's */
972
+ /* Data visual/category-03 - Brand */
1285
973
  --data-visual-category-03: #0a466c;
1286
- /* Data visual/category-03-highlight - Theme - Sotheby's */
974
+ /* Data visual/category-03-highlight - Brand */
1287
975
  --data-visual-category-03-highlight: #0a466c4d;
1288
- /* Data visual/category-04 - Theme - Sotheby's */
976
+ /* Data visual/category-04 - Brand */
1289
977
  --data-visual-category-04: #389e7a;
1290
- /* Data visual/category-04-highlight - Theme - Sotheby's */
978
+ /* Data visual/category-04-highlight - Brand */
1291
979
  --data-visual-category-04-highlight: #389e7a4d;
1292
- /* Data visual/category-05 - Theme - Sotheby's */
980
+ /* Data visual/category-05 - Brand */
1293
981
  --data-visual-category-05: #094a53;
1294
- /* Data visual/category-05-highlight - Theme - Sotheby's */
982
+ /* Data visual/category-05-highlight - Brand */
1295
983
  --data-visual-category-05-highlight: #094a534d;
1296
- /* Data visual/category-06 - Theme - Sotheby's */
984
+ /* Data visual/category-06 - Brand */
1297
985
  --data-visual-category-06: #7f7f7f;
1298
- /* Data visual/category-06-highlight - Theme - Sotheby's */
986
+ /* Data visual/category-06-highlight - Brand */
1299
987
  --data-visual-category-06-highlight: #7f7f7f4d;
1300
- /* Data visual/category-07 - Theme - Sotheby's */
988
+ /* Data visual/category-07 - Brand */
1301
989
  --data-visual-category-07: #433479;
1302
- /* Data visual/category-07-highlight - Theme - Sotheby's */
990
+ /* Data visual/category-07-highlight - Brand */
1303
991
  --data-visual-category-07-highlight: #4334794d;
1304
- /* Data visual/category-1 - Theme - Sotheby's */
992
+ /* Data visual/category-1 - Theme - Better Home & Garden */
1305
993
  --data-visual-category-1: #0a466c;
1306
994
  /* Data visual/category-1-highlight - Theme - Sotheby's */
1307
995
  --data-visual-category-1-highlight: #0a466c4d;
1308
- /* Data visual/category-2 - Theme - Sotheby's */
996
+ /* Data visual/category-2 - Theme - Better Home & Garden */
1309
997
  --data-visual-category-2: #299de0;
1310
998
  /* Data visual/category-2-highlight - Theme - Sotheby's */
1311
999
  --data-visual-category-2-highlight: #299de04d;
1312
- /* Data visual/category-3 - Theme - Sotheby's */
1000
+ /* Data visual/category-3 - Theme - Better Home & Garden */
1313
1001
  --data-visual-category-3: #130033;
1314
1002
  /* Data visual/category-3-highlight - Theme - Sotheby's */
1315
1003
  --data-visual-category-3-highlight: #1300334d;
1316
- /* Data visual/category-4 - Theme - Sotheby's */
1004
+ /* Data visual/category-4 - Theme - Better Home & Garden */
1317
1005
  --data-visual-category-4: #389e7a;
1318
1006
  /* Data visual/category-4-highlight - Theme - Sotheby's */
1319
1007
  --data-visual-category-4-highlight: #389e7a4d;
1320
- /* Data visual/category-5 - Theme - Sotheby's */
1008
+ /* Data visual/category-5 - Theme - Better Home & Garden */
1321
1009
  --data-visual-category-5: #094a53;
1322
1010
  /* Data visual/category-5-highlight - Theme - Sotheby's */
1323
1011
  --data-visual-category-5-highlight: #094a534d;
1324
- /* Data visual/category-6 - Theme - Sotheby's */
1012
+ /* Data visual/category-6 - Theme - Better Home & Garden */
1325
1013
  --data-visual-category-6: #7f7f7f;
1326
1014
  /* Data visual/category-6-highlight - Theme - Sotheby's */
1327
1015
  --data-visual-category-6-highlight: #7f7f7f4d;
1328
- /* Data visual/category-7 - Theme - Sotheby's */
1016
+ /* Data visual/category-7 - Theme - Better Home & Garden */
1329
1017
  --data-visual-category-7: #433479;
1330
1018
  /* Data visual/category-7-highlight - Theme - Sotheby's */
1331
1019
  --data-visual-category-7-highlight: #4334794d;
@@ -1335,13 +1023,13 @@ body {
1335
1023
  --data-visual-green: #258750;
1336
1024
  /* Data visual/green-highlight - Theme - Sotheby's */
1337
1025
  --data-visual-green-highlight: #deede5;
1338
- /* Data visual/negative - Theme - Sotheby's */
1026
+ /* Data visual/negative - Brand */
1339
1027
  --data-visual-negative: #d83a52;
1340
- /* Data visual/negative-highlight - Theme - Sotheby's */
1028
+ /* Data visual/negative-highlight - Brand */
1341
1029
  --data-visual-negative-highlight: #f9e1e5;
1342
- /* Data visual/positive - Theme - Sotheby's */
1030
+ /* Data visual/positive - Brand */
1343
1031
  --data-visual-positive: #258750;
1344
- /* Data visual/positive-highlight - Theme - Sotheby's */
1032
+ /* Data visual/positive-highlight - Brand */
1345
1033
  --data-visual-positive-highlight: #deede5;
1346
1034
  /* Data visual/red - Theme - Sotheby's */
1347
1035
  --data-visual-red: #d83a52;
@@ -1350,49 +1038,71 @@ body {
1350
1038
  /* Foreground/Brand/on-inverse-primary - Theme - Sotheby's */
1351
1039
  --foreground-brand-on-inverse-primary: #667b92;
1352
1040
  /* Foreground/Brand/on-inverse-secondary - Theme - Sotheby's */
1353
- --foreground-brand-on-inverse-secondary: #dac38c;
1354
- /* Foreground/Brand/on-brand-secondary - Theme - Sotheby's */
1041
+ --foreground-brand-on-inverse-secondary: #eba691;
1042
+ /* Foreground/Brand/on-brand-primary - Brand */
1043
+ /* Foreground color used on Brand's primary color (non neutral color) */
1044
+ --foreground-brand-on-primary: #ffffff;
1045
+ /* Foreground/Brand/on-brand-secondary - Brand */
1046
+ /* Foreground color used on Brand's primary color (non neutral color) */
1355
1047
  --foreground-brand-on-secondary: #141414;
1356
- /* Foreground/Brand/brand-primary - Theme - Sotheby's */
1048
+ /* Foreground/Brand/brand-primary - Brand */
1049
+ /* Foreground text and icons that match the brand's primary color */
1357
1050
  --foreground-brand-primary: #002349;
1358
- /* Foreground/Brand/brand-primary-depth - Theme - Sotheby's */
1359
- --foreground-brand-primary-depth: #001e3e;
1360
- /* Foreground/Brand/brand-secondary - Theme - Sotheby's */
1051
+ /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1052
+ --foreground-brand-primary-depth: #217221;
1053
+ /* Foreground/Brand/brand-secondary - Brand */
1054
+ /* Foreground text and icons that match the brand's secondary color */
1361
1055
  --foreground-brand-secondary: #c29b40;
1362
1056
  /* Foreground/Brand/brand-secondary-depth - Theme - Sotheby's */
1363
1057
  --foreground-brand-secondary-depth: #a58436;
1364
- /* Foreground/Link text/default - Theme - Sotheby's */
1058
+ /* Foreground/Link text/default - Brand */
1365
1059
  --foreground-link-text-default: #215ecd;
1366
- /* Foreground/Link text/default-disabled - Theme - Sotheby's */
1060
+ /* Foreground/Link text/default-disabled - Brand */
1367
1061
  --foreground-link-text-default-disabled: #7a9ee1;
1368
1062
  /* Foreground/Link text/default-hovered - Theme - Sotheby's */
1369
1063
  --foreground-link-text-default-hovered: #1e55b9;
1370
1064
  /* Foreground/Link text/default-pressed - Theme - Sotheby's */
1371
1065
  --foreground-link-text-default-pressed: #1a4ba4;
1372
- /* Foreground/Link text/default-visited - Theme - Sotheby's */
1066
+ /* Foreground/Link text/default-visited - Brand */
1373
1067
  --foreground-link-text-default-visited: #7a3e7a;
1374
- /* Foreground/Link text/subtle-disabled - Theme - Sotheby's */
1068
+ /* Foreground/Link text/subtle-disabled - Brand */
1375
1069
  --foreground-link-text-subtle-disabled: #bdbdbd;
1376
1070
  /* Foreground/Link text/subtle-hovered - Theme - Sotheby's */
1377
1071
  --foreground-link-text-subtle-hovered: #292929;
1378
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Sotheby's */
1072
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Sotheby's */
1073
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1074
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Sotheby's */
1075
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1076
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1379
1077
  --foreground-link-text-subtle-inversed-disabled: #6b6b6b;
1380
1078
  /* Foreground/Link text/subtle-pressed - Theme - Sotheby's */
1381
- --foreground-link-text-subtle-pressed: #424242;
1382
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Sotheby's */
1079
+ --foreground-link-text-subtle-pressed: #3d3d3d;
1080
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1383
1081
  --foreground-neutral-disabled-on-color-surface: #6b6b6b;
1384
- /* Foreground/Neutral/disabled-on-surface - Theme - Sotheby's */
1082
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1385
1083
  --foreground-neutral-disabled-on-surface: #bdbdbd;
1386
- /* Foreground/Neutral/on-surface - Theme - Sotheby's */
1084
+ /* Foreground/Neutral/inverse-on-surface - Theme - Sotheby's */
1085
+ --foreground-neutral-inverse-on-surface: #fafafa;
1086
+ /* Foreground/Neutral/on-color - Brand */
1087
+ /* Interactive controls */
1088
+ --foreground-neutral-on-color: #ffffff;
1089
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1090
+ /* Text and icons against inverse surface */
1091
+ --foreground-neutral-on-inverse-surface: #fafafa;
1092
+ /* Foreground/Neutral/on-surface - Brand */
1093
+ /* Default foreground text and icons against any surface color */
1387
1094
  --foreground-neutral-on-surface: #141414;
1388
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Sotheby's */
1389
- --foreground-neutral-on-surface-variant-01: #474747;
1390
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Sotheby's */
1095
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1096
+ /* Secondary foreground color for icons and text */
1097
+ --foreground-neutral-on-surface-variant-01: #707070;
1098
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1099
+ /* Tertiary foreground color for icons and text */
1391
1100
  --foreground-neutral-on-surface-variant-02: #757575;
1392
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Sotheby's */
1101
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1102
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1393
1103
  --foreground-neutral-on-surface-variant-03: #8a8a8a;
1394
- /* Foreground/Neutral/skeleton-element - Theme - Sotheby's */
1395
- --foreground-neutral-skeleton-element: #c7c7c7;
1104
+ /* Foreground/Neutral/skeleton-element - Brand */
1105
+ --foreground-neutral-skeleton-element: #e0e0e0;
1396
1106
  /* Foreground/Spectrum/blue - Theme - Sotheby's */
1397
1107
  --foreground-spectrum-blue: #143778;
1398
1108
  /* Foreground/Spectrum/green - Theme - Sotheby's */
@@ -1401,30 +1111,18 @@ body {
1401
1111
  --foreground-spectrum-lime: #60651a;
1402
1112
  /* Foreground/Spectrum/magenta - Theme - Sotheby's */
1403
1113
  --foreground-spectrum-magenta: #63076f;
1404
- /* Foreground/Spectrum/orange - Theme - Sotheby's */
1114
+ /* Foreground/Spectrum/orange - Brand */
1405
1115
  --foreground-spectrum-orange: #773001;
1406
1116
  /* Foreground/Spectrum/pink - Theme - Sotheby's */
1407
1117
  --foreground-spectrum-pink: #6c1240;
1408
1118
  /* Foreground/Spectrum/purple - Theme - Sotheby's */
1409
1119
  --foreground-spectrum-purple: #310077;
1410
- /* Foreground/Spectrum/red - Theme - Sotheby's */
1120
+ /* Foreground/Spectrum/red - Brand */
1411
1121
  --foreground-spectrum-red: #6c1d29;
1412
1122
  /* Foreground/Spectrum/teal - Theme - Sotheby's */
1413
1123
  --foreground-spectrum-teal: #01413c;
1414
1124
  /* Foreground/Spectrum/yellow - Theme - Sotheby's */
1415
1125
  --foreground-spectrum-yellow: #7b5e18;
1416
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1417
- --interaction-brand-disabled-opacity: #0000000f;
1418
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1419
- --interaction-brand-hover-opacity: #0000001a;
1420
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1421
- --interaction-brand-press-opacity: #00000033;
1422
- /* Interaction/hover-opacity - Theme - 3.0 */
1423
- --interaction-hover-opacity: #00000014;
1424
- /* Interaction/link-active-opacity - Theme - 3.0 */
1425
- --interaction-link-active-opacity: #0000004d;
1426
- /* Interaction/press-opacity - Theme - 3.0 */
1427
- --interaction-press-opacity: #00000029;
1428
1126
  /* Interactions/brand-disabled-opacity - Theme - Sotheby's */
1429
1127
  --interactions-brand-disabled-opacity: #0000000f;
1430
1128
  /* Interactions/brand-hover-opacity - Theme - Sotheby's */
@@ -1435,11 +1133,13 @@ body {
1435
1133
  --interactions-disabled-opacity: #0000000f;
1436
1134
  /* Interactions/hover-opacity - Theme - Sotheby's */
1437
1135
  --interactions-hover-opacity: #00000014;
1438
- /* Interactions/link-active-opacity - Theme - Sotheby's */
1136
+ /* Interactions/link-active-opacity - Brand */
1439
1137
  --interactions-link-active-opacity: #0000004d;
1440
- /* Interactions/neutral-hover-opacity - Theme - Sotheby's */
1138
+ /* Interactions/neutral-hover-opacity - Brand */
1139
+ /* surfaces using neutral tones */
1441
1140
  --interactions-neutral-hover-opacity: #00000014;
1442
- /* Interactions/neutral-press-opacity - Theme - Sotheby's */
1141
+ /* Interactions/neutral-press-opacity - Brand */
1142
+ /* surfaces using neutral tones */
1443
1143
  --interactions-neutral-press-opacity: #00000029;
1444
1144
  /* Interactions/press-opacity - Theme - Sotheby's */
1445
1145
  --interactions-press-opacity: #00000029;
@@ -1459,96 +1159,123 @@ body {
1459
1159
  --shadow-25: #00000040;
1460
1160
  /* Shadow/shadow-32 - Theme - Sotheby's */
1461
1161
  --shadow-32: #00000052;
1462
- /* Shadow/inner-shadow - Theme - Sotheby's */
1162
+ /* Shadow/inner-shadow - Brand */
1463
1163
  --shadow-inner: #ffffff;
1464
- /* Shadow/inner-shadow-100 - Theme - Sotheby's */
1164
+ /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1465
1165
  --shadow-inner-100: #ffffff;
1466
- /* Shadow/variant-01 - Theme - Sotheby's */
1166
+ /* Shadow/variant-01 - Brand */
1467
1167
  --shadow-variant-01: #0000001a;
1468
- /* Shadow/variant-02 - Theme - Sotheby's */
1168
+ /* Shadow/variant-02 - Brand */
1469
1169
  --shadow-variant-02: #0000001f;
1470
- /* Shadow/variant-03 - Theme - Sotheby's */
1170
+ /* Shadow/variant-03 - Brand */
1471
1171
  --shadow-variant-03: #00000026;
1472
- /* Shadow/variant-04 - Theme - Sotheby's */
1172
+ /* Shadow/variant-04 - Brand */
1473
1173
  --shadow-variant-04: #00000040;
1474
- /* Shadow/variant-05 - Theme - Sotheby's */
1174
+ /* Shadow/variant-05 - Brand */
1475
1175
  --shadow-variant-05: #00000052;
1476
- /* Status/error - Theme - Sotheby's */
1176
+ /* Status/error - Brand */
1177
+ /* Foreground error text and icons */
1477
1178
  --status-error: #d83a52;
1478
- /* Status/information - Theme - Sotheby's */
1179
+ /* Status/information - Theme - Better Home & Garden */
1479
1180
  --status-information: #276ef1;
1480
- /* Status/informational - Theme - Sotheby's */
1181
+ /* Status/informational - Brand */
1182
+ /* Foreground informational text and icons */
1481
1183
  --status-informational: #276ef1;
1482
- /* Status/success - Theme - Sotheby's */
1184
+ /* Status/on-error - Brand */
1185
+ /* Foreground error text and icons */
1186
+ --status-on-error: #ffffff;
1187
+ /* Status/on-information - Theme - Better Home & Garden */
1188
+ --status-on-information: #ffffff;
1189
+ /* Status/on-informational - Brand */
1190
+ /* Foreground informational text and icons */
1191
+ --status-on-informational: #ffffff;
1192
+ /* Status/on-success - Brand */
1193
+ /* Foreground success icons and text */
1194
+ --status-on-success: #ffffff;
1195
+ /* Status/on-warning - Brand */
1196
+ /* Foreground warning icons */
1197
+ --status-on-warning: #141414;
1198
+ /* Status/success - Brand */
1199
+ /* Foreground success icons and text */
1483
1200
  --status-success: #258750;
1484
- /* Status/warning - Theme - Sotheby's */
1201
+ /* Status/warning - Brand */
1202
+ /* Foreground warning icons */
1485
1203
  --status-warning: #f6bc2f;
1486
- /* Stroke/Brand/brand-primary - Theme - Sotheby's */
1204
+ /* Stroke/Brand/brand-primary - Brand */
1205
+ /* Outline variant - decorative elements such as dividers */
1487
1206
  --stroke-brand-primary: #002349;
1488
- /* Stroke/Brand/brand-primary-depth - Theme - Sotheby's */
1207
+ /* Stroke/Brand/brand-primary-depth - Brand */
1208
+ /* Outline variant - decorative elements such as dividers */
1489
1209
  --stroke-brand-primary-depth: #001e3e;
1490
- /* Stroke/Brand/brand-secondary - Theme - Sotheby's */
1491
- --stroke-brand-secondary: #c29b40;
1210
+ /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1211
+ --stroke-brand-secondary: #dd6b47;
1492
1212
  /* Stroke/Brand/brand-secondary-depth - Theme - Sotheby's */
1493
- --stroke-brand-secondary-depth: #a58436;
1494
- /* Stroke/Neutral/neutral-base - Theme - Sotheby's */
1213
+ --stroke-brand-secondary-depth: #bc5b3c;
1214
+ /* Stroke/Neutral/neutral-base - Brand */
1215
+ /* For control components */
1495
1216
  --stroke-neutral-base: #949494;
1496
- /* Stroke/Neutral/disabled-dark - Theme - Sotheby's */
1217
+ /* Stroke/Neutral/disabled-dark - Brand */
1218
+ /* Disabled outline separating the fill and surface background */
1497
1219
  --stroke-neutral-disabled-dark: #757575;
1498
- /* Stroke/Neutral/disabled-light - Theme - Sotheby's */
1220
+ /* Stroke/Neutral/disabled-light - Brand */
1221
+ /* Disabled outline separating the fill and surface background */
1499
1222
  --stroke-neutral-disabled-light: #bdbdbd;
1500
- /* Stroke/Neutral/focus - Theme - Sotheby's */
1223
+ /* Stroke/Neutral/focus - Brand */
1224
+ /* Highlight focus element */
1501
1225
  --stroke-neutral-focus: #000000;
1502
- /* Stroke/Neutral/neutral-high - Theme - Sotheby's */
1226
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1227
+ /* Highlight focus element */
1228
+ --stroke-neutral-focus-on-inverse: #ffffff;
1229
+ /* Stroke/Neutral/neutral-high - Brand */
1503
1230
  --stroke-neutral-high: #141414;
1504
1231
  /* Stroke/Neutral/neutral-high-contrast - Theme - Sotheby's */
1505
1232
  --stroke-neutral-high-contrast: #141414;
1506
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1507
- --stroke-neutral-interaction-disabled-dark: #48566a;
1508
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1509
- --stroke-neutral-interaction-disabled-light: #c8d6e5;
1510
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1511
- --stroke-neutral-interaction-focus: #000000;
1512
1233
  /* Stroke/Neutral/Interactions/disabled-dark - Theme - Sotheby's */
1513
1234
  --stroke-neutral-interactions-disabled-dark: #757575;
1514
1235
  /* Stroke/Neutral/Interactions/disabled-light - Theme - Sotheby's */
1515
1236
  --stroke-neutral-interactions-disabled-light: #bdbdbd;
1516
1237
  /* Stroke/Neutral/Interactions/focus - Theme - Sotheby's */
1517
1238
  --stroke-neutral-interactions-focus: #000000;
1518
- /* Stroke/Neutral/neutral-low - Theme - Sotheby's */
1239
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Sotheby's */
1240
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1241
+ /* Stroke/Neutral/neutral-low - Brand */
1242
+ /* Outline variant - decorative elements such as dividers */
1519
1243
  --stroke-neutral-low: #e0e0e0;
1520
1244
  /* Stroke/Neutral/neutral-low-contrast - Theme - Sotheby's */
1521
1245
  --stroke-neutral-low-contrast: #e0e0e0;
1522
- /* Surface/Brand/primary - Theme - Sotheby's */
1246
+ /* Surface/Brand/primary - Brand */
1523
1247
  --surface-brand-primary: #002349;
1524
1248
  /* Surface/Brand/primary-highlight - Theme - Sotheby's */
1525
- --surface-brand-primary-highlight: #d9dee4;
1526
- /* Surface/Brand/secondary - Theme - Sotheby's */
1249
+ --surface-brand-primary-highlight: #dfeddf;
1250
+ /* Surface/Brand/secondary - Brand */
1527
1251
  --surface-brand-secondary: #c29b40;
1528
1252
  /* Surface/Brand/secondary-highlight - Theme - Sotheby's */
1529
1253
  --surface-brand-secondary-highlight: #f6f0e2;
1530
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Sotheby's */
1254
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1531
1255
  --surface-neutral-interactions-dark-disabled: #d6d6d6;
1532
- /* Surface/Neutral/Interactions/light-disabled - Theme - Sotheby's */
1256
+ /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1533
1257
  --surface-neutral-interactions-light-disabled: #f5f5f5;
1534
- /* Surface/Neutral/Interactions/skeleton - Theme - Sotheby's */
1535
- --surface-neutral-interactions-skeleton: #e0e0e0;
1536
- /* Surface/Neutral/inverse - Theme - Sotheby's */
1258
+ /* Surface/Neutral/inverse - Brand */
1259
+ /* Inverted. Use for toasts notification & snackbars */
1537
1260
  --surface-neutral-inverse: #1f1f1f;
1538
- /* Surface/Neutral/inverse-dark - Theme - Sotheby's */
1261
+ /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1539
1262
  --surface-neutral-inverse-dark: #1f1f1f;
1540
1263
  /* Surface/Neutral/inverse-light - Theme - Sotheby's */
1541
1264
  --surface-neutral-inverse-light: #ffffff;
1542
- /* Surface/Neutral/skeleton - Theme - Sotheby's */
1543
- --surface-neutral-skeleton: #e0e0e0;
1544
- /* Surface/Neutral/T1-base - Theme - Sotheby's */
1265
+ /* Surface/Neutral/T1-base - Brand */
1545
1266
  --surface-neutral-t1-base: #ffffff;
1546
- /* Surface/Neutral/T2-lowest - Theme - Sotheby's */
1267
+ /* Surface/Neutral/T2-lowest - Brand */
1547
1268
  --surface-neutral-t2-lowest: #f5f5f5;
1548
- /* Surface/Neutral/T3-low - Theme - Sotheby's */
1269
+ /* Surface/Neutral/T3-low - Brand */
1270
+ /* Navigations, app bar etc */
1549
1271
  --surface-neutral-t3-low: #dbdbdb;
1550
- /* Surface/Neutral/T4-high - Theme - Sotheby's */
1551
- --surface-neutral-t4-high: #6b6b6b;
1272
+ /* Surface/Neutral/T4-high - Brand */
1273
+ /* Navigations, app bar etc */
1274
+ --surface-neutral-t4-high: #8a8a8a;
1275
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1276
+ --surface-neutral-t4-high-2: #8a8a8a;
1277
+ /* Surface/Neutral/transparent - Brand */
1278
+ --surface-neutral-transparent: #ffffff00;
1552
1279
  /* Surface/Spectrum/blue - Theme - Sotheby's */
1553
1280
  --surface-spectrum-blue: #dfe9fd;
1554
1281
  /* Surface/Spectrum/green - Theme - Sotheby's */
@@ -1557,7 +1284,7 @@ body {
1557
1284
  --surface-spectrum-lime: #f6f7e0;
1558
1285
  /* Surface/Spectrum/magenta - Theme - Sotheby's */
1559
1286
  --surface-spectrum-magenta: #f6dbfa;
1560
- /* Surface/Spectrum/orange - Theme - Sotheby's */
1287
+ /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1561
1288
  --surface-spectrum-orange: #fce7d9;
1562
1289
  /* Surface/Spectrum/pink - Theme - Sotheby's */
1563
1290
  --surface-spectrum-pink: #f9deec;
@@ -1569,68 +1296,207 @@ body {
1569
1296
  --surface-spectrum-teal: #d9eceb;
1570
1297
  /* Surface/Spectrum/yellow - Theme - Sotheby's */
1571
1298
  --surface-spectrum-yellow: #fef5e0;
1572
- }
1573
1299
 
1300
+ @media (width >= 640px) {
1301
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. */
1302
+ --display-regular-large: 400 64px/88px var(--typeface);
1303
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. line height */
1304
+ --display-regular-large-line-height: 88px;
1305
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. size */
1306
+ --display-regular-large-size: 64px;
1307
+ /* Desktop/Display/Regular/Large - Used in landing hero or marketing sections. style */
1308
+ --display-regular-large-style: regular;
1309
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. */
1310
+ --display-regular-medium: 400 56px/72px var(--typeface);
1311
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. line height */
1312
+ --display-regular-medium-line-height: 72px;
1313
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. size */
1314
+ --display-regular-medium-size: 56px;
1315
+ /* Desktop/Display/Regular/Medium - Used in landing hero or marketing sections. style */
1316
+ --display-regular-medium-style: regular;
1317
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. */
1318
+ --display-regular-small: 400 48px/60px var(--typeface);
1319
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. line height */
1320
+ --display-regular-small-line-height: 60px;
1321
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. size */
1322
+ --display-regular-small-size: 48px;
1323
+ /* Desktop/Display/Regular/Small - Used in landing hero or marketing sections. style */
1324
+ --display-regular-small-style: regular;
1325
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. */
1326
+ --display-semibold-large: 600 64px/88px var(--typeface);
1327
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. line height */
1328
+ --display-semibold-large-line-height: 88px;
1329
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. size */
1330
+ --display-semibold-large-size: 64px;
1331
+ /* Desktop/Display/SemiBold/Large - Used in landing hero or marketing sections. style */
1332
+ --display-semibold-large-style: 600;
1333
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. */
1334
+ --display-semibold-medium: 600 56px/72px var(--typeface);
1335
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. line height */
1336
+ --display-semibold-medium-line-height: 72px;
1337
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. size */
1338
+ --display-semibold-medium-size: 56px;
1339
+ /* Desktop/Display/SemiBold/Medium - Used in landing hero or marketing sections. style */
1340
+ --display-semibold-medium-style: 600;
1341
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. */
1342
+ --display-semibold-small: 600 48px/60px var(--typeface);
1343
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. line height */
1344
+ --display-semibold-small-line-height: 60px;
1345
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. size */
1346
+ --display-semibold-small-size: 48px;
1347
+ /* Desktop/Display/SemiBold/Small - Used in landing hero or marketing sections. style */
1348
+ --display-semibold-small-style: 600;
1349
+ /* Desktop/Heading/H1 */
1350
+ --heading-h1: 600 40px/48px var(--typeface);
1351
+ /* Desktop/Heading/H1 - line height */
1352
+ --heading-h1-line-height: 48px;
1353
+ /* Desktop/Heading/H1 - size */
1354
+ --heading-h1-size: 40px;
1355
+ /* Desktop/Heading/H1 - style */
1356
+ --heading-h1-style: 600;
1357
+ /* Desktop/Heading/H2 */
1358
+ --heading-h2: 600 32px/40px var(--typeface);
1359
+ /* Desktop/Heading/H2 - line height */
1360
+ --heading-h2-line-height: 40px;
1361
+ /* Desktop/Heading/H2 - size */
1362
+ --heading-h2-size: 32px;
1363
+ /* Desktop/Heading/H2 - style */
1364
+ --heading-h2-style: 600;
1365
+ /* Desktop/Heading/H3 */
1366
+ --heading-h3: 600 28px/36px var(--typeface);
1367
+ /* Desktop/Heading/H3 - line height */
1368
+ --heading-h3-line-height: 36px;
1369
+ /* Desktop/Heading/H3 - size */
1370
+ --heading-h3-size: 28px;
1371
+ /* Desktop/Heading/H3 - style */
1372
+ --heading-h3-style: 600;
1373
+ /* Desktop/Heading/H4 */
1374
+ --heading-h4: 600 24px/32px var(--typeface);
1375
+ /* Desktop/Heading/H4 - line height */
1376
+ --heading-h4-line-height: 32px;
1377
+ /* Desktop/Heading/H4 - size */
1378
+ --heading-h4-size: 24px;
1379
+ /* Desktop/Heading/H4 - style */
1380
+ --heading-h4-style: 600;
1381
+ /* Desktop/Heading/H5 */
1382
+ --heading-h5: 600 20px/28px var(--typeface);
1383
+ /* Desktop/Heading/H5 - line height */
1384
+ --heading-h5-line-height: 28px;
1385
+ /* Desktop/Heading/H5 - size */
1386
+ --heading-h5-size: 20px;
1387
+ /* Desktop/Heading/H5 - style */
1388
+ --heading-h5-style: 600;
1389
+ /* Desktop/Heading/H6 */
1390
+ --heading-h6: 500 18px/24px var(--typeface);
1391
+ /* Desktop/Heading/H6 - line height */
1392
+ --heading-h6-line-height: 24px;
1393
+ /* Desktop/Heading/H6 - size */
1394
+ --heading-h6-size: 18px;
1395
+ /* Desktop/Heading/H6 - style */
1396
+ --heading-h6-style: medium;
1397
+ /* Desktop/Subheader/Large - Headline */
1398
+ --subheader-large: 400 24px/32px var(--typeface);
1399
+ /* Desktop/Subheader/Large - Headline line height */
1400
+ --subheader-large-line-height: 32px;
1401
+ /* Desktop/Subheader/Large - Headline size */
1402
+ --subheader-large-size: 24px;
1403
+ /* Desktop/Subheader/Large - Headline style */
1404
+ --subheader-large-style: regular;
1405
+ /* Desktop/Subheader/Medium */
1406
+ --subheader-medium: 400 20px/28px var(--typeface);
1407
+ /* Desktop/Subheader/Medium - line height */
1408
+ --subheader-medium-line-height: 28px;
1409
+ /* Desktop/Subheader/Medium - size */
1410
+ --subheader-medium-size: 20px;
1411
+ /* Desktop/Subheader/Medium - style */
1412
+ --subheader-medium-style: regular;
1413
+ /* Desktop/Subheader/X-Large - Headline */
1414
+ --subheader-x-large: 400 28px/36px var(--typeface);
1415
+ /* Desktop/Subheader/X-Large - Headline line height */
1416
+ --subheader-x-large-line-height: 36px;
1417
+ /* Desktop/Subheader/X-Large - Headline size */
1418
+ --subheader-x-large-size: 28px;
1419
+ /* Desktop/Subheader/X-Large - Headline style */
1420
+ --subheader-x-large-style: regular;
1421
+ /* Desktop/Subheader/XX-Large - Headline */
1422
+ --subheader-xx-large: 400 32px/40px var(--typeface);
1423
+ /* Desktop/Subheader/XX-Large - Headline line height */
1424
+ --subheader-xx-large-line-height: 40px;
1425
+ /* Desktop/Subheader/XX-Large - Headline size */
1426
+ --subheader-xx-large-size: 32px;
1427
+ /* Desktop/Subheader/XX-Large - Headline style */
1428
+ --subheader-xx-large-style: regular;
1429
+ /* Desktop/Subheader/XXX-Large - Large Headline */
1430
+ --subheader-xxx-large: 400 40px/48px var(--typeface);
1431
+ /* Desktop/Subheader/XXX-Large - Large Headline line height */
1432
+ --subheader-xxx-large-line-height: 48px;
1433
+ /* Desktop/Subheader/XXX-Large - Large Headline size */
1434
+ --subheader-xxx-large-size: 40px;
1435
+ /* Desktop/Subheader/XXX-Large - Large Headline style */
1436
+ --subheader-xxx-large-style: regular;
1437
+ }
1438
+ }
1439
+ /* dark theme */
1574
1440
  [data-theme='dark'] {
1575
- /* Background/base - Theme - Sotheby's */
1441
+ /* Background/base - Brand */
1576
1442
  --background-base: #1f1f1f;
1577
1443
  /* Background/scrim - Theme - Sotheby's */
1578
1444
  --background-scrim: #61616180;
1579
- /* Background/shade - Theme - Sotheby's */
1445
+ /* Background/shade - Brand */
1580
1446
  --background-shade: #292929;
1581
- /* Data visual/category-01 - Theme - Sotheby's */
1447
+ /* Data visual/category-01 - Brand */
1582
1448
  --data-visual-category-01: #958ca3;
1583
- /* Data visual/category-01-highlight - Theme - Sotheby's */
1449
+ /* Data visual/category-01-highlight - Brand */
1584
1450
  --data-visual-category-01-highlight: #958ca34d;
1585
- /* Data visual/category-02 - Theme - Sotheby's */
1451
+ /* Data visual/category-02 - Brand */
1586
1452
  --data-visual-category-02: #7fc4ec;
1587
- /* Data visual/category-02-highlight - Theme - Sotheby's */
1453
+ /* Data visual/category-02-highlight - Brand */
1588
1454
  --data-visual-category-02-highlight: #7fc4ec4d;
1589
- /* Data visual/category-03 - Theme - Sotheby's */
1455
+ /* Data visual/category-03 - Brand */
1590
1456
  --data-visual-category-03: #7899ae;
1591
- /* Data visual/category-03-highlight - Theme - Sotheby's */
1457
+ /* Data visual/category-03-highlight - Brand */
1592
1458
  --data-visual-category-03-highlight: #7899ae4d;
1593
- /* Data visual/category-04 - Theme - Sotheby's */
1459
+ /* Data visual/category-04 - Brand */
1594
1460
  --data-visual-category-04: #88c5af;
1595
- /* Data visual/category-04-highlight - Theme - Sotheby's */
1461
+ /* Data visual/category-04-highlight - Brand */
1596
1462
  --data-visual-category-04-highlight: #88c5af4d;
1597
- /* Data visual/category-05 - Theme - Sotheby's */
1463
+ /* Data visual/category-05 - Brand */
1598
1464
  --data-visual-category-05: #789ba0;
1599
- /* Data visual/category-05-highlight - Theme - Sotheby's */
1465
+ /* Data visual/category-05-highlight - Brand */
1600
1466
  --data-visual-category-05-highlight: #789ba04d;
1601
- /* Data visual/category-06 - Theme - Sotheby's */
1467
+ /* Data visual/category-06 - Brand */
1602
1468
  --data-visual-category-06: #b2b2b2;
1603
- /* Data visual/category-06-highlight - Theme - Sotheby's */
1469
+ /* Data visual/category-06-highlight - Brand */
1604
1470
  --data-visual-category-06-highlight: #b2b2b24d;
1605
- /* Data visual/category-07 - Theme - Sotheby's */
1471
+ /* Data visual/category-07 - Brand */
1606
1472
  --data-visual-category-07: #a19abc;
1607
- /* Data visual/category-07-highlight - Theme - Sotheby's */
1473
+ /* Data visual/category-07-highlight - Brand */
1608
1474
  --data-visual-category-07-highlight: #a19abc4d;
1609
- /* Data visual/category-1 - Theme - Sotheby's */
1610
- --data-visual-category-1: #7899ae;
1475
+ /* Data visual/category-1 - Theme - Better Home & Garden */
1476
+ --data-visual-category-1: #0a466c;
1611
1477
  /* Data visual/category-1-highlight - Theme - Sotheby's */
1612
1478
  --data-visual-category-1-highlight: #7899ae4d;
1613
- /* Data visual/category-2 - Theme - Sotheby's */
1479
+ /* Data visual/category-2 - Theme - Better Home & Garden */
1614
1480
  --data-visual-category-2: #7fc4ec;
1615
1481
  /* Data visual/category-2-highlight - Theme - Sotheby's */
1616
1482
  --data-visual-category-2-highlight: #7fc4ec4d;
1617
- /* Data visual/category-3 - Theme - Sotheby's */
1483
+ /* Data visual/category-3 - Theme - Better Home & Garden */
1618
1484
  --data-visual-category-3: #958ca3;
1619
1485
  /* Data visual/category-3-highlight - Theme - Sotheby's */
1620
1486
  --data-visual-category-3-highlight: #958ca34d;
1621
- /* Data visual/category-4 - Theme - Sotheby's */
1487
+ /* Data visual/category-4 - Theme - Better Home & Garden */
1622
1488
  --data-visual-category-4: #88c5af;
1623
1489
  /* Data visual/category-4-highlight - Theme - Sotheby's */
1624
1490
  --data-visual-category-4-highlight: #88c5af4d;
1625
- /* Data visual/category-5 - Theme - Sotheby's */
1491
+ /* Data visual/category-5 - Theme - Better Home & Garden */
1626
1492
  --data-visual-category-5: #789ba0;
1627
1493
  /* Data visual/category-5-highlight - Theme - Sotheby's */
1628
1494
  --data-visual-category-5-highlight: #789ba04d;
1629
- /* Data visual/category-6 - Theme - Sotheby's */
1495
+ /* Data visual/category-6 - Theme - Better Home & Garden */
1630
1496
  --data-visual-category-6: #b2b2b2;
1631
1497
  /* Data visual/category-6-highlight - Theme - Sotheby's */
1632
1498
  --data-visual-category-6-highlight: #b2b2b24d;
1633
- /* Data visual/category-7 - Theme - Sotheby's */
1499
+ /* Data visual/category-7 - Theme - Better Home & Garden */
1634
1500
  --data-visual-category-7: #a19abc;
1635
1501
  /* Data visual/category-7-highlight - Theme - Sotheby's */
1636
1502
  --data-visual-category-7-highlight: #a19abc4d;
@@ -1640,13 +1506,13 @@ body {
1640
1506
  --data-visual-green: #7cb796;
1641
1507
  /* Data visual/green-highlight - Theme - Sotheby's */
1642
1508
  --data-visual-green-highlight: #0d2f1c;
1643
- /* Data visual/negative - Theme - Sotheby's */
1509
+ /* Data visual/negative - Brand */
1644
1510
  --data-visual-negative: #e88997;
1645
- /* Data visual/negative-highlight - Theme - Sotheby's */
1511
+ /* Data visual/negative-highlight - Brand */
1646
1512
  --data-visual-negative-highlight: #4c141d;
1647
- /* Data visual/positive - Theme - Sotheby's */
1513
+ /* Data visual/positive - Brand */
1648
1514
  --data-visual-positive: #7cb796;
1649
- /* Data visual/positive-highlight - Theme - Sotheby's */
1515
+ /* Data visual/positive-highlight - Brand */
1650
1516
  --data-visual-positive-highlight: #0d2f1c;
1651
1517
  /* Data visual/red - Theme - Sotheby's */
1652
1518
  --data-visual-red: #e88997;
@@ -1655,49 +1521,71 @@ body {
1655
1521
  /* Foreground/Brand/on-inverse-primary - Theme - Sotheby's */
1656
1522
  --foreground-brand-on-inverse-primary: #667b92;
1657
1523
  /* Foreground/Brand/on-inverse-secondary - Theme - Sotheby's */
1658
- --foreground-brand-on-inverse-secondary: #dac38c;
1659
- /* Foreground/Brand/on-brand-secondary - Theme - Sotheby's */
1524
+ --foreground-brand-on-inverse-secondary: #eba691;
1525
+ /* Foreground/Brand/on-brand-primary - Brand */
1526
+ /* Foreground color used on Brand's primary color (non neutral color) */
1527
+ --foreground-brand-on-primary: #ffffff;
1528
+ /* Foreground/Brand/on-brand-secondary - Brand */
1529
+ /* Foreground color used on Brand's primary color (non neutral color) */
1660
1530
  --foreground-brand-on-secondary: #141414;
1661
- /* Foreground/Brand/brand-primary - Theme - Sotheby's */
1531
+ /* Foreground/Brand/brand-primary - Brand */
1532
+ /* Foreground text and icons that match the brand's primary color */
1662
1533
  --foreground-brand-primary: #667b92;
1663
- /* Foreground/Brand/brand-primary-depth - Theme - Sotheby's */
1664
- --foreground-brand-primary-depth: #8c9cad;
1665
- /* Foreground/Brand/brand-secondary - Theme - Sotheby's */
1534
+ /* Foreground/Brand/brand-primary-depth - Theme - Better Home & Garden */
1535
+ --foreground-brand-primary-depth: #88bc88;
1536
+ /* Foreground/Brand/brand-secondary - Brand */
1537
+ /* Foreground text and icons that match the brand's secondary color */
1666
1538
  --foreground-brand-secondary: #dac38c;
1667
1539
  /* Foreground/Brand/brand-secondary-depth - Theme - Sotheby's */
1668
1540
  --foreground-brand-secondary-depth: #e4d2a9;
1669
- /* Foreground/Link text/default - Theme - Sotheby's */
1541
+ /* Foreground/Link text/default - Brand */
1670
1542
  --foreground-link-text-default: #7a9ee1;
1671
- /* Foreground/Link text/default-disabled - Theme - Sotheby's */
1543
+ /* Foreground/Link text/default-disabled - Brand */
1672
1544
  --foreground-link-text-default-disabled: #14387b;
1673
1545
  /* Foreground/Link text/default-hovered - Theme - Sotheby's */
1674
1546
  --foreground-link-text-default-hovered: #90afe6;
1675
1547
  /* Foreground/Link text/default-pressed - Theme - Sotheby's */
1676
1548
  --foreground-link-text-default-pressed: #a6bfeb;
1677
- /* Foreground/Link text/default-visited - Theme - Sotheby's */
1549
+ /* Foreground/Link text/default-visited - Brand */
1678
1550
  --foreground-link-text-default-visited: #af8baf;
1679
- /* Foreground/Link text/subtle-disabled - Theme - Sotheby's */
1551
+ /* Foreground/Link text/subtle-disabled - Brand */
1680
1552
  --foreground-link-text-subtle-disabled: #4d4d4d;
1681
1553
  /* Foreground/Link text/subtle-hovered - Theme - Sotheby's */
1682
1554
  --foreground-link-text-subtle-hovered: #e6e6e6;
1683
- /* Foreground/Link text/subtle-inversed-disabled - Theme - Sotheby's */
1684
- --foreground-link-text-subtle-inversed-disabled: #424242;
1555
+ /* Foreground/Link text/subtle-inverse-hovered - Theme - Sotheby's */
1556
+ --foreground-link-text-subtle-inverse-hovered: #e6e6e6;
1557
+ /* Foreground/Link text/subtle-inverse-pressed - Theme - Sotheby's */
1558
+ --foreground-link-text-subtle-inverse-pressed: #d1d1d1;
1559
+ /* Foreground/Link text/subtle-inversed-disabled - Brand */
1560
+ --foreground-link-text-subtle-inversed-disabled: #3d3d3d;
1685
1561
  /* Foreground/Link text/subtle-pressed - Theme - Sotheby's */
1686
1562
  --foreground-link-text-subtle-pressed: #d1d1d1;
1687
- /* Foreground/Neutral/disabled-on-color-surface - Theme - Sotheby's */
1688
- --foreground-neutral-disabled-on-color-surface: #424242;
1689
- /* Foreground/Neutral/disabled-on-surface - Theme - Sotheby's */
1563
+ /* Foreground/Neutral/disabled-on-color-surface - Brand */
1564
+ --foreground-neutral-disabled-on-color-surface: #3d3d3d;
1565
+ /* Foreground/Neutral/disabled-on-surface - Brand */
1690
1566
  --foreground-neutral-disabled-on-surface: #4d4d4d;
1691
- /* Foreground/Neutral/on-surface - Theme - Sotheby's */
1567
+ /* Foreground/Neutral/inverse-on-surface - Theme - Sotheby's */
1568
+ --foreground-neutral-inverse-on-surface: #fafafa;
1569
+ /* Foreground/Neutral/on-color - Brand */
1570
+ /* Interactive controls */
1571
+ --foreground-neutral-on-color: #ffffff;
1572
+ /* Foreground/Neutral/on-inverse-surface - Brand */
1573
+ /* Text and icons against inverse surface */
1574
+ --foreground-neutral-on-inverse-surface: #fafafa;
1575
+ /* Foreground/Neutral/on-surface - Brand */
1576
+ /* Default foreground text and icons against any surface color */
1692
1577
  --foreground-neutral-on-surface: #fafafa;
1693
- /* Foreground/Neutral/on-surface-variant-01 - Theme - Sotheby's */
1578
+ /* Foreground/Neutral/on-surface-variant-01 - Brand */
1579
+ /* Secondary foreground color for icons and text */
1694
1580
  --foreground-neutral-on-surface-variant-01: #c2c2c2;
1695
- /* Foreground/Neutral/on-surface-variant-02 - Theme - Sotheby's */
1581
+ /* Foreground/Neutral/on-surface-variant-02 - Brand */
1582
+ /* Tertiary foreground color for icons and text */
1696
1583
  --foreground-neutral-on-surface-variant-02: #9e9e9e;
1697
- /* Foreground/Neutral/on-surface-variant-03 - Theme - Sotheby's */
1584
+ /* Foreground/Neutral/on-surface-variant-03 - Brand */
1585
+ /* Quaternary foreground color for icons and text. Only for placeholder text */
1698
1586
  --foreground-neutral-on-surface-variant-03: #757575;
1699
- /* Foreground/Neutral/skeleton-element - Theme - Sotheby's */
1700
- --foreground-neutral-skeleton-element: #4d4d4d;
1587
+ /* Foreground/Neutral/skeleton-element - Brand */
1588
+ --foreground-neutral-skeleton-element: #333333;
1701
1589
  /* Foreground/Spectrum/blue - Theme - Sotheby's */
1702
1590
  --foreground-spectrum-blue: #88aff7;
1703
1591
  /* Foreground/Spectrum/green - Theme - Sotheby's */
@@ -1706,30 +1594,18 @@ body {
1706
1594
  --foreground-spectrum-lime: #dce28f;
1707
1595
  /* Foreground/Spectrum/magenta - Theme - Sotheby's */
1708
1596
  --foreground-spectrum-magenta: #e07aed;
1709
- /* Foreground/Spectrum/orange - Theme - Sotheby's */
1597
+ /* Foreground/Spectrum/orange - Brand */
1710
1598
  --foreground-spectrum-orange: #f6a874;
1711
1599
  /* Foreground/Spectrum/pink - Theme - Sotheby's */
1712
1600
  --foreground-spectrum-pink: #ea86b9;
1713
1601
  /* Foreground/Spectrum/purple - Theme - Sotheby's */
1714
1602
  --foreground-spectrum-purple: #c8a6f9;
1715
- /* Foreground/Spectrum/red - Theme - Sotheby's */
1603
+ /* Foreground/Spectrum/red - Brand */
1716
1604
  --foreground-spectrum-red: #ea93a0;
1717
1605
  /* Foreground/Spectrum/teal - Theme - Sotheby's */
1718
1606
  --foreground-spectrum-teal: #74bbb4;
1719
1607
  /* Foreground/Spectrum/yellow - Theme - Sotheby's */
1720
1608
  --foreground-spectrum-yellow: #fada8d;
1721
- /* Interaction/brand-disabled-opacity - Theme - 3.0 */
1722
- --interaction-brand-disabled-opacity: #ffffff0f;
1723
- /* Interaction/brand-hover-opacity - Theme - 3.0 */
1724
- --interaction-brand-hover-opacity: #ffffff1a;
1725
- /* Interaction/brand-press-opacity - Theme - 3.0 */
1726
- --interaction-brand-press-opacity: #ffffff33;
1727
- /* Interaction/hover-opacity - Theme - 3.0 */
1728
- --interaction-hover-opacity: #ffffff14;
1729
- /* Interaction/link-active-opacity - Theme - 3.0 */
1730
- --interaction-link-active-opacity: #ffffff4d;
1731
- /* Interaction/press-opacity - Theme - 3.0 */
1732
- --interaction-press-opacity: #ffffff29;
1733
1609
  /* Interactions/brand-disabled-opacity - Theme - Sotheby's */
1734
1610
  --interactions-brand-disabled-opacity: #ffffff0f;
1735
1611
  /* Interactions/brand-hover-opacity - Theme - Sotheby's */
@@ -1740,11 +1616,13 @@ body {
1740
1616
  --interactions-disabled-opacity: #ffffff0f;
1741
1617
  /* Interactions/hover-opacity - Theme - Sotheby's */
1742
1618
  --interactions-hover-opacity: #ffffff14;
1743
- /* Interactions/link-active-opacity - Theme - Sotheby's */
1619
+ /* Interactions/link-active-opacity - Brand */
1744
1620
  --interactions-link-active-opacity: #ffffff4d;
1745
- /* Interactions/neutral-hover-opacity - Theme - Sotheby's */
1621
+ /* Interactions/neutral-hover-opacity - Brand */
1622
+ /* surfaces using neutral tones */
1746
1623
  --interactions-neutral-hover-opacity: #ffffff14;
1747
- /* Interactions/neutral-press-opacity - Theme - Sotheby's */
1624
+ /* Interactions/neutral-press-opacity - Brand */
1625
+ /* surfaces using neutral tones */
1748
1626
  --interactions-neutral-press-opacity: #ffffff29;
1749
1627
  /* Interactions/press-opacity - Theme - Sotheby's */
1750
1628
  --interactions-press-opacity: #ffffff29;
@@ -1764,96 +1642,123 @@ body {
1764
1642
  --shadow-25: #61616140;
1765
1643
  /* Shadow/shadow-32 - Theme - Sotheby's */
1766
1644
  --shadow-32: #61616152;
1767
- /* Shadow/inner-shadow - Theme - Sotheby's */
1645
+ /* Shadow/inner-shadow - Brand */
1768
1646
  --shadow-inner: #000000;
1769
- /* Shadow/inner-shadow-100 - Theme - Sotheby's */
1647
+ /* Shadow/inner-shadow-100 - Theme - Better Home & Garden */
1770
1648
  --shadow-inner-100: #000000;
1771
- /* Shadow/variant-01 - Theme - Sotheby's */
1649
+ /* Shadow/variant-01 - Brand */
1772
1650
  --shadow-variant-01: #6161611a;
1773
- /* Shadow/variant-02 - Theme - Sotheby's */
1651
+ /* Shadow/variant-02 - Brand */
1774
1652
  --shadow-variant-02: #6161611f;
1775
- /* Shadow/variant-03 - Theme - Sotheby's */
1653
+ /* Shadow/variant-03 - Brand */
1776
1654
  --shadow-variant-03: #61616126;
1777
- /* Shadow/variant-04 - Theme - Sotheby's */
1655
+ /* Shadow/variant-04 - Brand */
1778
1656
  --shadow-variant-04: #61616140;
1779
- /* Shadow/variant-05 - Theme - Sotheby's */
1657
+ /* Shadow/variant-05 - Brand */
1780
1658
  --shadow-variant-05: #61616152;
1781
- /* Status/error - Theme - Sotheby's */
1659
+ /* Status/error - Brand */
1660
+ /* Foreground error text and icons */
1782
1661
  --status-error: #e26b7d;
1783
- /* Status/information - Theme - Sotheby's */
1662
+ /* Status/information - Theme - Better Home & Garden */
1784
1663
  --status-information: #5d92f5;
1785
- /* Status/informational - Theme - Sotheby's */
1664
+ /* Status/informational - Brand */
1665
+ /* Foreground informational text and icons */
1786
1666
  --status-informational: #5d92f5;
1787
- /* Status/success - Theme - Sotheby's */
1667
+ /* Status/on-error - Brand */
1668
+ /* Foreground error text and icons */
1669
+ --status-on-error: #ffffff;
1670
+ /* Status/on-information - Theme - Better Home & Garden */
1671
+ --status-on-information: #ffffff;
1672
+ /* Status/on-informational - Brand */
1673
+ /* Foreground informational text and icons */
1674
+ --status-on-informational: #ffffff;
1675
+ /* Status/on-success - Brand */
1676
+ /* Foreground success icons and text */
1677
+ --status-on-success: #ffffff;
1678
+ /* Status/on-warning - Brand */
1679
+ /* Foreground warning icons */
1680
+ --status-on-warning: #141414;
1681
+ /* Status/success - Brand */
1682
+ /* Foreground success icons and text */
1788
1683
  --status-success: #519f73;
1789
- /* Status/warning - Theme - Sotheby's */
1684
+ /* Status/warning - Brand */
1685
+ /* Foreground warning icons */
1790
1686
  --status-warning: #f8cd63;
1791
- /* Stroke/Brand/brand-primary - Theme - Sotheby's */
1687
+ /* Stroke/Brand/brand-primary - Brand */
1688
+ /* Outline variant - decorative elements such as dividers */
1792
1689
  --stroke-brand-primary: #667b92;
1793
- /* Stroke/Brand/brand-primary-depth - Theme - Sotheby's */
1690
+ /* Stroke/Brand/brand-primary-depth - Brand */
1691
+ /* Outline variant - decorative elements such as dividers */
1794
1692
  --stroke-brand-primary-depth: #8c9cad;
1795
- /* Stroke/Brand/brand-secondary - Theme - Sotheby's */
1796
- --stroke-brand-secondary: #dac38c;
1693
+ /* Stroke/Brand/brand-secondary - Theme - Better Home & Garden */
1694
+ --stroke-brand-secondary: #f0bcac;
1797
1695
  /* Stroke/Brand/brand-secondary-depth - Theme - Sotheby's */
1798
- --stroke-brand-secondary-depth: #e4d2a9;
1799
- /* Stroke/Neutral/neutral-base - Theme - Sotheby's */
1696
+ --stroke-brand-secondary-depth: #eba691;
1697
+ /* Stroke/Neutral/neutral-base - Brand */
1698
+ /* For control components */
1800
1699
  --stroke-neutral-base: #6b6b6b;
1801
- /* Stroke/Neutral/disabled-dark - Theme - Sotheby's */
1802
- --stroke-neutral-disabled-dark: #424242;
1803
- /* Stroke/Neutral/disabled-light - Theme - Sotheby's */
1700
+ /* Stroke/Neutral/disabled-dark - Brand */
1701
+ /* Disabled outline separating the fill and surface background */
1702
+ --stroke-neutral-disabled-dark: #3d3d3d;
1703
+ /* Stroke/Neutral/disabled-light - Brand */
1704
+ /* Disabled outline separating the fill and surface background */
1804
1705
  --stroke-neutral-disabled-light: #4d4d4d;
1805
- /* Stroke/Neutral/focus - Theme - Sotheby's */
1706
+ /* Stroke/Neutral/focus - Brand */
1707
+ /* Highlight focus element */
1806
1708
  --stroke-neutral-focus: #ffffff;
1807
- /* Stroke/Neutral/neutral-high - Theme - Sotheby's */
1709
+ /* Stroke/Neutral/focus-on-inverse - Brand */
1710
+ /* Highlight focus element */
1711
+ --stroke-neutral-focus-on-inverse: #ffffff;
1712
+ /* Stroke/Neutral/neutral-high - Brand */
1808
1713
  --stroke-neutral-high: #fafafa;
1809
1714
  /* Stroke/Neutral/neutral-high-contrast - Theme - Sotheby's */
1810
1715
  --stroke-neutral-high-contrast: #fafafa;
1811
- /* Stroke/Neutral/Interaction/disabled-dark - Theme - 3.0 */
1812
- --stroke-neutral-interaction-disabled-dark: #b1c0d2;
1813
- /* Stroke/Neutral/Interaction/disabled-light - Theme - 3.0 */
1814
- --stroke-neutral-interaction-disabled-light: #323b49;
1815
- /* Stroke/Neutral/Interaction/focus - Theme - 3.0 */
1816
- --stroke-neutral-interaction-focus: #ffffff;
1817
1716
  /* Stroke/Neutral/Interactions/disabled-dark - Theme - Sotheby's */
1818
- --stroke-neutral-interactions-disabled-dark: #424242;
1717
+ --stroke-neutral-interactions-disabled-dark: #3d3d3d;
1819
1718
  /* Stroke/Neutral/Interactions/disabled-light - Theme - Sotheby's */
1820
1719
  --stroke-neutral-interactions-disabled-light: #4d4d4d;
1821
1720
  /* Stroke/Neutral/Interactions/focus - Theme - Sotheby's */
1822
1721
  --stroke-neutral-interactions-focus: #ffffff;
1823
- /* Stroke/Neutral/neutral-low - Theme - Sotheby's */
1722
+ /* Stroke/Neutral/Interactions/inverse-focus - Theme - Sotheby's */
1723
+ --stroke-neutral-interactions-inverse-focus: #ffffff;
1724
+ /* Stroke/Neutral/neutral-low - Brand */
1725
+ /* Outline variant - decorative elements such as dividers */
1824
1726
  --stroke-neutral-low: #4d4d4d;
1825
1727
  /* Stroke/Neutral/neutral-low-contrast - Theme - Sotheby's */
1826
1728
  --stroke-neutral-low-contrast: #4d4d4d;
1827
- /* Surface/Brand/primary - Theme - Sotheby's */
1729
+ /* Surface/Brand/primary - Brand */
1828
1730
  --surface-brand-primary: #667b92;
1829
1731
  /* Surface/Brand/primary-highlight - Theme - Sotheby's */
1830
- --surface-brand-primary-highlight: #000912;
1831
- /* Surface/Brand/secondary - Theme - Sotheby's */
1732
+ --surface-brand-primary-highlight: #0a220a;
1733
+ /* Surface/Brand/secondary - Brand */
1832
1734
  --surface-brand-secondary: #dac38c;
1833
1735
  /* Surface/Brand/secondary-highlight - Theme - Sotheby's */
1834
1736
  --surface-brand-secondary-highlight: #312710;
1835
- /* Surface/Neutral/Interactions/dark-disabled - Theme - Sotheby's */
1737
+ /* Surface/Neutral/Interactions/dark-disabled - Theme - Better Home & Garden */
1836
1738
  --surface-neutral-interactions-dark-disabled: #474747;
1837
- /* Surface/Neutral/Interactions/light-disabled - Theme - Sotheby's */
1739
+ /* Surface/Neutral/Interactions/light-disabled - Theme - Better Home & Garden */
1838
1740
  --surface-neutral-interactions-light-disabled: #292929;
1839
- /* Surface/Neutral/Interactions/skeleton - Theme - Sotheby's */
1840
- --surface-neutral-interactions-skeleton: #333333;
1841
- /* Surface/Neutral/inverse - Theme - Sotheby's */
1741
+ /* Surface/Neutral/inverse - Brand */
1742
+ /* Inverted. Use for toasts notification & snackbars */
1842
1743
  --surface-neutral-inverse: #383838;
1843
- /* Surface/Neutral/inverse-dark - Theme - Sotheby's */
1744
+ /* Surface/Neutral/inverse-dark - Theme - Better Home & Garden */
1844
1745
  --surface-neutral-inverse-dark: #383838;
1845
1746
  /* Surface/Neutral/inverse-light - Theme - Sotheby's */
1846
1747
  --surface-neutral-inverse-light: #575757;
1847
- /* Surface/Neutral/skeleton - Theme - Sotheby's */
1848
- --surface-neutral-skeleton: #333333;
1849
- /* Surface/Neutral/T1-base - Theme - Sotheby's */
1748
+ /* Surface/Neutral/T1-base - Brand */
1850
1749
  --surface-neutral-t1-base: #1f1f1f;
1851
- /* Surface/Neutral/T2-lowest - Theme - Sotheby's */
1750
+ /* Surface/Neutral/T2-lowest - Brand */
1852
1751
  --surface-neutral-t2-lowest: #2e2e2e;
1853
- /* Surface/Neutral/T3-low - Theme - Sotheby's */
1752
+ /* Surface/Neutral/T3-low - Brand */
1753
+ /* Navigations, app bar etc */
1854
1754
  --surface-neutral-t3-low: #383838;
1855
- /* Surface/Neutral/T4-high - Theme - Sotheby's */
1856
- --surface-neutral-t4-high: #474747;
1755
+ /* Surface/Neutral/T4-high - Brand */
1756
+ /* Navigations, app bar etc */
1757
+ --surface-neutral-t4-high: #7a7a7a;
1758
+ /* Surface/Neutral/T4-high 2 - Theme - Better Home & Garden */
1759
+ --surface-neutral-t4-high-2: #7a7a7a;
1760
+ /* Surface/Neutral/transparent - Brand */
1761
+ --surface-neutral-transparent: #ffffff00;
1857
1762
  /* Surface/Spectrum/blue - Theme - Sotheby's */
1858
1763
  --surface-spectrum-blue: #0e2754;
1859
1764
  /* Surface/Spectrum/green - Theme - Sotheby's */
@@ -1862,7 +1767,7 @@ body {
1862
1767
  --surface-spectrum-lime: #434712;
1863
1768
  /* Surface/Spectrum/magenta - Theme - Sotheby's */
1864
1769
  --surface-spectrum-magenta: #45054e;
1865
- /* Surface/Spectrum/orange - Theme - Sotheby's */
1770
+ /* Surface/Spectrum/orange - Theme - Better Home & Garden */
1866
1771
  --surface-spectrum-orange: #532201;
1867
1772
  /* Surface/Spectrum/pink - Theme - Sotheby's */
1868
1773
  --surface-spectrum-pink: #4c0c2d;