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