@bspk/ui 1.3.30 → 1.4.0

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