@solid-design-system/tokens 7.0.0-next.1 → 7.0.0-next.11
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/cdn/themes/bb/bb.css +1 -1
- package/cdn/themes/kid/kid.css +1 -1
- package/cdn/themes/sp/sp.css +1 -1
- package/cdn/themes/tailwind.css +4 -0
- package/cdn/themes/ui-dark/ui-dark.css +1 -1
- package/cdn/themes/ui-light/ui-light.css +1 -1
- package/cdn/themes/vb/vb.css +1 -1
- package/dist/theme.js +1 -1
- package/dist/themes/bb/bb.css +74 -71
- package/dist/themes/kid/kid.css +100 -97
- package/dist/themes/sp/sp.css +96 -93
- package/dist/themes/tailwind.css +4 -0
- package/dist/themes/ui-dark/ui-dark.css +69 -32
- package/dist/themes/ui-light/ui-light.css +69 -33
- package/dist/themes/vb/vb.css +109 -106
- package/dist/tokens.scss +38 -18
- package/dist/tokens.tailwind.json +36 -12
- package/package.json +8 -8
package/dist/themes/kid/kid.css
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
--sd-badge--green-color--inverted-background: var(--sd-color-success);
|
|
31
31
|
--sd-badge--green-color--inverted-text: var(--sd-color-white);
|
|
32
32
|
--sd-badge--green-color-background: var(--sd-color-success);
|
|
33
|
-
--sd-badge--inverted-color-border: var(--sd-color-
|
|
33
|
+
--sd-badge--inverted-color-border: var(--sd-color-primary-900);
|
|
34
34
|
--sd-badge--red--inverted-background: var(--sd-color-error);
|
|
35
35
|
--sd-badge--red--inverted-text: var(--sd-color-white);
|
|
36
36
|
--sd-badge--red-color-background: var(--sd-color-error);
|
|
@@ -48,27 +48,27 @@
|
|
|
48
48
|
--sd-breadcrumb--current-color-text: var(--sd-color-neutral-700);
|
|
49
49
|
--sd-breadcrumb__separator--current-color: var(--sd-color-neutral-800);
|
|
50
50
|
--sd-breadcrumb__separator-color: var(--sd-color-neutral-200);
|
|
51
|
-
--sd-button--cta--inverted--active-color-background: var(--sd-color-accent);
|
|
51
|
+
--sd-button--cta--inverted--active-color-background: var(--sd-color-accent-100);
|
|
52
52
|
--sd-button--cta--inverted--active-color-text: var(--sd-color-neutral-800);
|
|
53
|
-
--sd-button--cta--inverted--default-color-background: var(--sd-color-accent);
|
|
54
|
-
--sd-button--cta--inverted--default-color-text: var(--sd-color-
|
|
55
|
-
--sd-button--cta--inverted--hover-color-background: var(--sd-color-accent);
|
|
53
|
+
--sd-button--cta--inverted--default-color-background: var(--sd-color-accent-100);
|
|
54
|
+
--sd-button--cta--inverted--default-color-text: var(--sd-color-primary-900);
|
|
55
|
+
--sd-button--cta--inverted--hover-color-background: var(--sd-color-accent-100);
|
|
56
56
|
--sd-button--cta--inverted--hover-color-text: var(--sd-color-neutral-800);
|
|
57
57
|
--sd-button--inverted--disabled-color-background: var(--sd-color-neutral-700);
|
|
58
58
|
--sd-button--inverted--disabled-color-border: var(--sd-color-neutral-700);
|
|
59
59
|
--sd-button--inverted--disabled-color-text: var(--sd-color-neutral-700);
|
|
60
60
|
--sd-button--primary--active-color-background: var(--sd-color-neutral-800);
|
|
61
|
-
--sd-button--primary--active-color-text: var(--sd-color-accent);
|
|
62
|
-
--sd-button--primary--default-color-background: var(--sd-color-
|
|
63
|
-
--sd-button--primary--default-color-text: var(--sd-color-accent);
|
|
61
|
+
--sd-button--primary--active-color-text: var(--sd-color-accent-100);
|
|
62
|
+
--sd-button--primary--default-color-background: var(--sd-color-primary-900);
|
|
63
|
+
--sd-button--primary--default-color-text: var(--sd-color-accent-100);
|
|
64
64
|
--sd-button--primary--disabled-color-background: var(--sd-color-neutral-400);
|
|
65
65
|
--sd-button--primary--hover-color-background: var(--sd-color-neutral-800);
|
|
66
66
|
--sd-button--primary--hover-color-text: var(--sd-color-primary-100);
|
|
67
|
-
--sd-button--primary--inverted--active-color-background: var(--sd-color-accent);
|
|
67
|
+
--sd-button--primary--inverted--active-color-background: var(--sd-color-accent-100);
|
|
68
68
|
--sd-button--primary--inverted--active-color-text: var(--sd-color-neutral-800);
|
|
69
|
-
--sd-button--primary--inverted--default-color-background: var(--sd-color-accent);
|
|
69
|
+
--sd-button--primary--inverted--default-color-background: var(--sd-color-accent-100);
|
|
70
70
|
--sd-button--primary--inverted--default-color-text: var(--sd-color-black);
|
|
71
|
-
--sd-button--primary--inverted--hover-color-background: var(--sd-color-accent);
|
|
71
|
+
--sd-button--primary--inverted--hover-color-background: var(--sd-color-accent-100);
|
|
72
72
|
--sd-button--primary--inverted--hover-color-text: var(--sd-color-neutral-800);
|
|
73
73
|
--sd-button--secondary--active-color-background: 247 242 236 / 0;
|
|
74
74
|
--sd-button--secondary--active-color-border: var(--sd-color-neutral-800);
|
|
@@ -81,11 +81,11 @@
|
|
|
81
81
|
--sd-button--secondary--hover-color-border: var(--sd-color-neutral-800);
|
|
82
82
|
--sd-button--secondary--hover-color-text: var(--sd-color-neutral-800);
|
|
83
83
|
--sd-button--secondary--inverted--active-color-background: 247 242 236 / 0;
|
|
84
|
-
--sd-button--secondary--inverted--active-color-text: var(--sd-color-accent);
|
|
84
|
+
--sd-button--secondary--inverted--active-color-text: var(--sd-color-accent-100);
|
|
85
85
|
--sd-button--secondary--inverted--hover-color-background: 247 242 236 / 0;
|
|
86
|
-
--sd-button--secondary--inverted--hover-color-text: var(--sd-color-accent);
|
|
87
|
-
--sd-button--secondary--inverted-color-border: var(--sd-color-accent);
|
|
88
|
-
--sd-button--secondary--inverted-color-text: var(--sd-color-accent);
|
|
86
|
+
--sd-button--secondary--inverted--hover-color-text: var(--sd-color-accent-100);
|
|
87
|
+
--sd-button--secondary--inverted-color-border: var(--sd-color-accent-100);
|
|
88
|
+
--sd-button--secondary--inverted-color-text: var(--sd-color-accent-100);
|
|
89
89
|
--sd-button--secondary--size-lg-padding-block: 0.4375rem;
|
|
90
90
|
--sd-button--secondary--size-md-padding-block: 0.4375rem;
|
|
91
91
|
--sd-button--secondary--size-sm-padding-block: 0.28125rem;
|
|
@@ -107,10 +107,10 @@
|
|
|
107
107
|
--sd-button--tertiary--hover-color-background: 247 242 236 / 0;
|
|
108
108
|
--sd-button--tertiary--hover-color-text: var(--sd-color-neutral-800);
|
|
109
109
|
--sd-button--tertiary--inverted--active-color-background: 247 242 236 / 0;
|
|
110
|
-
--sd-button--tertiary--inverted--active-color-text: var(--sd-color-accent);
|
|
110
|
+
--sd-button--tertiary--inverted--active-color-text: var(--sd-color-accent-100);
|
|
111
111
|
--sd-button--tertiary--inverted--hover-color-background: 247 242 236 / 0;
|
|
112
|
-
--sd-button--tertiary--inverted--hover-color-text: var(--sd-color-accent);
|
|
113
|
-
--sd-button--tertiary--inverted-color-text: var(--sd-color-accent);
|
|
112
|
+
--sd-button--tertiary--inverted--hover-color-text: var(--sd-color-accent-100);
|
|
113
|
+
--sd-button--tertiary--inverted-color-text: var(--sd-color-accent-100);
|
|
114
114
|
--sd-button-border-radius: 624.9375rem;
|
|
115
115
|
--sd-button-border-width: var(--sd-spacing-0\.25);
|
|
116
116
|
--sd-button-font-weight: var(--sd-font-weight-bold);
|
|
@@ -124,16 +124,42 @@
|
|
|
124
124
|
--sd-carousel__pager-dot-border-width: var(--sd-spacing-0\.25);
|
|
125
125
|
--sd-checkbox--invalid-color-background: var(--sd-color-accent);
|
|
126
126
|
--sd-checkbox-border-width: var(--sd-spacing-0\.25);
|
|
127
|
-
--sd-chip--
|
|
128
|
-
--sd-chip--
|
|
129
|
-
--sd-chip--
|
|
130
|
-
--sd-chip--
|
|
131
|
-
--sd-chip--
|
|
132
|
-
--sd-chip--
|
|
133
|
-
--sd-chip--
|
|
127
|
+
--sd-chip--neutral-high-color-background: 255 255 255 / 0.6;
|
|
128
|
+
--sd-chip--neutral-high-color-border: 255 255 255 / 0.6;
|
|
129
|
+
--sd-chip--neutral-high-color-filled-border: 255 255 255 / 0;
|
|
130
|
+
--sd-chip--neutral-high-color-outline-fill: 255 255 255 / 0;
|
|
131
|
+
--sd-chip--neutral-low-color-background: 255 255 255 / 0.6;
|
|
132
|
+
--sd-chip--neutral-low-color-border: 255 255 255 / 0.6;
|
|
133
|
+
--sd-chip--neutral-low-color-filled-border: 255 255 255 / 0;
|
|
134
|
+
--sd-chip--neutral-low-color-outline-fill: 255 255 255 / 0;
|
|
135
|
+
--sd-chip--neutral-medium-color-background: 255 255 255 / 0.6;
|
|
136
|
+
--sd-chip--neutral-medium-color-border: 255 255 255 / 0.6;
|
|
137
|
+
--sd-chip--neutral-medium-color-filled-border: 255 255 255 / 0;
|
|
138
|
+
--sd-chip--neutral-medium-color-outline-fill: 255 255 255 / 0;
|
|
139
|
+
--sd-chip--neutral-strong-color-border: 255 255 255 / 0.6;
|
|
140
|
+
--sd-chip--neutral-strong-color-outline-fill: 255 255 255 / 0;
|
|
141
|
+
--sd-chip--neutral-subtle-color-background: 255 255 255 / 0.6;
|
|
142
|
+
--sd-chip--neutral-subtle-color-filled-border: 255 255 255 / 0;
|
|
143
|
+
--sd-chip--primary-high-color-background: 255 255 255 / 0.6;
|
|
144
|
+
--sd-chip--primary-high-color-border: 255 255 255 / 0.6;
|
|
145
|
+
--sd-chip--primary-high-color-filled-border: 255 255 255 / 0;
|
|
146
|
+
--sd-chip--primary-high-color-outline-fill: 255 255 255 / 0;
|
|
147
|
+
--sd-chip--primary-low-color-background: 255 255 255 / 0.6;
|
|
148
|
+
--sd-chip--primary-low-color-border: 255 255 255 / 0.6;
|
|
149
|
+
--sd-chip--primary-low-color-filled-border: 255 255 255 / 0;
|
|
150
|
+
--sd-chip--primary-low-color-outline-fill: 255 255 255 / 0;
|
|
151
|
+
--sd-chip--primary-medium-color-background: 255 255 255 / 0.6;
|
|
152
|
+
--sd-chip--primary-medium-color-border: 255 255 255 / 0.6;
|
|
153
|
+
--sd-chip--primary-medium-color-filled-border: 255 255 255 / 0;
|
|
154
|
+
--sd-chip--primary-medium-color-outline-fill: 255 255 255 / 0;
|
|
155
|
+
--sd-chip--primary-strong-color-border: 255 255 255 / 0.6;
|
|
156
|
+
--sd-chip--primary-strong-color-outline-fill: 255 255 255 / 0;
|
|
157
|
+
--sd-chip--primary-subtle-color-background: 255 255 255 / 0.6;
|
|
158
|
+
--sd-chip--primary-subtle-color-filled-border: 255 255 255 / 0;
|
|
134
159
|
--sd-chip--white-color-background: 255 255 255 / 0.6;
|
|
135
|
-
--sd-chip--white-color-border: 255 255 255 / 0
|
|
160
|
+
--sd-chip--white-color-filled-border: 255 255 255 / 0;
|
|
136
161
|
--sd-chip-border-radius: 624.9375rem;
|
|
162
|
+
--sd-chip-border-width: var(--sd-spacing-0\.25);
|
|
137
163
|
--sd-choice-control-font-weight: var(--sd-font-weight-bold);
|
|
138
164
|
--sd-color-accent-100: 247 242 236;
|
|
139
165
|
--sd-color-accent-200: 249 224 208;
|
|
@@ -150,8 +176,8 @@
|
|
|
150
176
|
--sd-color-background-accent-550: var(--sd-color-neutral-700);
|
|
151
177
|
--sd-color-background-accent-700: var(--sd-color-neutral-800);
|
|
152
178
|
--sd-color-background-accent: var(--sd-color-black);
|
|
153
|
-
--sd-color-background-error-400: var(--sd-color-error);
|
|
154
|
-
--sd-color-background-error: var(--sd-color-error);
|
|
179
|
+
--sd-color-background-error-400: var(--sd-color-error-400);
|
|
180
|
+
--sd-color-background-error: var(--sd-color-error-300);
|
|
155
181
|
--sd-color-background-info: var(--sd-color-info);
|
|
156
182
|
--sd-color-background-neutral-100: var(--sd-color-neutral-100);
|
|
157
183
|
--sd-color-background-neutral-200: var(--sd-color-neutral-100);
|
|
@@ -160,24 +186,28 @@
|
|
|
160
186
|
--sd-color-background-neutral-500: var(--sd-color-neutral-400);
|
|
161
187
|
--sd-color-background-neutral-600: var(--sd-color-neutral-600);
|
|
162
188
|
--sd-color-background-neutral-800: var(--sd-color-neutral-800);
|
|
189
|
+
--sd-color-background-neutral-blue: 255 255 255 / 0;
|
|
190
|
+
--sd-color-background-neutral-grey: 255 255 255 / 0;
|
|
163
191
|
--sd-color-background-primary-100: var(--sd-color-neutral-100);
|
|
164
192
|
--sd-color-background-primary-200: var(--sd-color-neutral-200);
|
|
165
193
|
--sd-color-background-primary-300: var(--sd-color-neutral-800);
|
|
166
194
|
--sd-color-background-primary-500: var(--sd-color-neutral-800);
|
|
167
195
|
--sd-color-background-primary-800: var(--sd-color-neutral-800);
|
|
168
|
-
--sd-color-background-primary: var(--sd-color-
|
|
196
|
+
--sd-color-background-primary: var(--sd-color-primary-900);
|
|
169
197
|
--sd-color-background-success: var(--sd-color-success);
|
|
170
198
|
--sd-color-background-warning: var(--sd-color-warning);
|
|
171
|
-
--sd-color-background-white:
|
|
199
|
+
--sd-color-background-white-translucent: 255 255 255 / 0.6;
|
|
200
|
+
--sd-color-background-white: var(--sd-color-accent-100);
|
|
172
201
|
--sd-color-black: 5 21 48;
|
|
173
202
|
--sd-color-border-accent-550: var(--sd-color-neutral-800);
|
|
174
203
|
--sd-color-border-accent: var(--sd-color-black);
|
|
175
|
-
--sd-color-border-error-400: var(--sd-color-error);
|
|
176
|
-
--sd-color-border-error: var(--sd-color-error);
|
|
204
|
+
--sd-color-border-error-400: var(--sd-color-error-400);
|
|
205
|
+
--sd-color-border-error: var(--sd-color-error-300);
|
|
177
206
|
--sd-color-border-neutral-400: var(--sd-color-neutral-400);
|
|
178
207
|
--sd-color-border-neutral-500: var(--sd-color-neutral-400);
|
|
179
208
|
--sd-color-border-neutral-600: var(--sd-color-neutral-600);
|
|
180
209
|
--sd-color-border-neutral-800: var(--sd-color-neutral-800);
|
|
210
|
+
--sd-color-border-neutral-blue: 255 255 255 / 0;
|
|
181
211
|
--sd-color-border-primary-100: var(--sd-color-neutral-100);
|
|
182
212
|
--sd-color-border-primary-200: var(--sd-color-neutral-200);
|
|
183
213
|
--sd-color-border-primary-400: var(--sd-color-neutral-400);
|
|
@@ -185,7 +215,7 @@
|
|
|
185
215
|
--sd-color-border-primary-800: var(--sd-color-neutral-800);
|
|
186
216
|
--sd-color-border-primary: var(--sd-color-black);
|
|
187
217
|
--sd-color-border-success: var(--sd-color-success);
|
|
188
|
-
--sd-color-border-white: var(--sd-color-accent);
|
|
218
|
+
--sd-color-border-white: var(--sd-color-accent-100);
|
|
189
219
|
--sd-color-error-250: 204 0 0;
|
|
190
220
|
--sd-color-error-300: 204 0 0;
|
|
191
221
|
--sd-color-error-400: 204 0 0;
|
|
@@ -194,14 +224,14 @@
|
|
|
194
224
|
--sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
|
|
195
225
|
--sd-color-icon-fill-accent: var(--sd-color-black);
|
|
196
226
|
--sd-color-icon-fill-content-icons-primary: var(--sd-color-black);
|
|
197
|
-
--sd-color-icon-fill-error-400: var(--sd-color-error);
|
|
198
|
-
--sd-color-icon-fill-error: var(--sd-color-error);
|
|
227
|
+
--sd-color-icon-fill-error-400: var(--sd-color-error-400);
|
|
228
|
+
--sd-color-icon-fill-error: var(--sd-color-error-300);
|
|
199
229
|
--sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
|
|
200
230
|
--sd-color-icon-fill-neutral-500: var(--sd-color-neutral-400);
|
|
201
231
|
--sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
|
|
202
232
|
--sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
|
|
203
|
-
--sd-color-icon-fill-primary-100: var(--sd-color-accent);
|
|
204
|
-
--sd-color-icon-fill-primary-200: var(--sd-color-accent);
|
|
233
|
+
--sd-color-icon-fill-primary-100: var(--sd-color-accent-100);
|
|
234
|
+
--sd-color-icon-fill-primary-200: var(--sd-color-accent-100);
|
|
205
235
|
--sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
|
|
206
236
|
--sd-color-icon-fill-primary-500: var(--sd-color-neutral-800);
|
|
207
237
|
--sd-color-icon-fill-primary-800: var(--sd-color-neutral-800);
|
|
@@ -212,7 +242,7 @@
|
|
|
212
242
|
--sd-color-icon-fill-risk-moderate: var(--sd-color-risk-moderate);
|
|
213
243
|
--sd-color-icon-fill-risk-veryhigh: var(--sd-color-risk-veryhigh);
|
|
214
244
|
--sd-color-icon-fill-success: var(--sd-color-success);
|
|
215
|
-
--sd-color-icon-fill-white: var(--sd-color-accent);
|
|
245
|
+
--sd-color-icon-fill-white: var(--sd-color-accent-100);
|
|
216
246
|
--sd-color-info: 76 105 187;
|
|
217
247
|
--sd-color-neutral-100: 255 255 255 / 0.5;
|
|
218
248
|
--sd-color-neutral-200: 207 216 220;
|
|
@@ -239,20 +269,20 @@
|
|
|
239
269
|
--sd-color-risk-moderate: 0 165 147;
|
|
240
270
|
--sd-color-risk-veryhigh: 255 0 0;
|
|
241
271
|
--sd-color-success: 0 112 0;
|
|
242
|
-
--sd-color-text-accent: var(--sd-color-
|
|
272
|
+
--sd-color-text-accent: var(--sd-color-primary-900);
|
|
243
273
|
--sd-color-text-black: var(--sd-color-black);
|
|
244
274
|
--sd-color-text-error: var(--sd-color-black);
|
|
245
275
|
--sd-color-text-neutral-500: var(--sd-color-neutral-400);
|
|
246
276
|
--sd-color-text-neutral-600: var(--sd-color-neutral-600);
|
|
247
277
|
--sd-color-text-neutral-700: var(--sd-color-neutral-700);
|
|
248
|
-
--sd-color-text-primary-100: var(--sd-color-accent);
|
|
249
|
-
--sd-color-text-primary-200: var(--sd-color-accent);
|
|
278
|
+
--sd-color-text-primary-100: var(--sd-color-accent-100);
|
|
279
|
+
--sd-color-text-primary-200: var(--sd-color-accent-100);
|
|
250
280
|
--sd-color-text-primary-400: 255 255 255 / 0.84;
|
|
251
281
|
--sd-color-text-primary-500: var(--sd-color-neutral-800);
|
|
252
|
-
--sd-color-text-primary-800: var(--sd-color-
|
|
253
|
-
--sd-color-text-primary: var(--sd-color-
|
|
282
|
+
--sd-color-text-primary-800: var(--sd-color-primary-900);
|
|
283
|
+
--sd-color-text-primary: var(--sd-color-primary-900);
|
|
254
284
|
--sd-color-text-success: var(--sd-color-success);
|
|
255
|
-
--sd-color-text-white: var(--sd-color-accent);
|
|
285
|
+
--sd-color-text-white: var(--sd-color-accent-100);
|
|
256
286
|
--sd-color-warning: 214 112 0;
|
|
257
287
|
--sd-color-white: 255 255 255;
|
|
258
288
|
--sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
|
|
@@ -267,7 +297,7 @@
|
|
|
267
297
|
--sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
|
|
268
298
|
--sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
|
|
269
299
|
--sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-neutral-800);
|
|
270
|
-
--sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-accent);
|
|
300
|
+
--sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-accent-100);
|
|
271
301
|
--sd-datepicker__date-item--selected-color-background: var(--sd-color-black);
|
|
272
302
|
--sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
|
|
273
303
|
--sd-divider--inverted-color-border: 255 255 255 / 0.4;
|
|
@@ -280,15 +310,6 @@
|
|
|
280
310
|
--sd-duration-medium: 300ms;
|
|
281
311
|
--sd-duration-slow: 500ms;
|
|
282
312
|
--sd-duration-x-slow: 750ms;
|
|
283
|
-
--sd-flag--neutral-200-color-background: 255 255 255 / 0.6;
|
|
284
|
-
--sd-flag--neutral-200-color-border: 255 255 255 / 0.6;
|
|
285
|
-
--sd-flag--neutral-300-color-background: 255 255 255 / 0.6;
|
|
286
|
-
--sd-flag--neutral-300-color-border: 255 255 255 / 0.6;
|
|
287
|
-
--sd-flag--neutral-500-color-background: 255 255 255 / 0.6;
|
|
288
|
-
--sd-flag--neutral-500-color-border: 255 255 255 / 0.6;
|
|
289
|
-
--sd-flag--white-color-background: 255 255 255 / 0.6;
|
|
290
|
-
--sd-flag--white-color-border: 255 255 255 / 0.6;
|
|
291
|
-
--sd-flag-border-radius: 624.9375rem;
|
|
292
313
|
--sd-font-primary: 'Bricolage Grotesque';
|
|
293
314
|
--sd-font-weight-bold: 600;
|
|
294
315
|
--sd-font-weight-normal: 400;
|
|
@@ -320,10 +341,9 @@
|
|
|
320
341
|
--sd-map-marker--cluster--hover-color-background: var(--sd-color-neutral-800);
|
|
321
342
|
--sd-map-marker--cluster-color-text: var(--sd-color-accent);
|
|
322
343
|
--sd-map-marker--main-color-background: var(--sd-color-black);
|
|
323
|
-
--sd-map-marker--pin--default-color-background: var(--sd-color-accent);
|
|
344
|
+
--sd-map-marker--pin--default-color-background: var(--sd-color-accent-100);
|
|
324
345
|
--sd-map-marker--pin--hover-color-background: var(--sd-color-neutral-100);
|
|
325
346
|
--sd-map-marker--pin-color-text: var(--sd-color-black);
|
|
326
|
-
--sd-marker-border-width: var(--sd-spacing-0\.25);
|
|
327
347
|
--sd-marker-font-size: var(--sd-spacing-3);
|
|
328
348
|
--sd-marker-font-weight: var(--sd-font-weight-bold);
|
|
329
349
|
--sd-menu-item--disabled-color-icon-fill: var(--sd-color-neutral-500);
|
|
@@ -335,8 +355,8 @@
|
|
|
335
355
|
--sd-navigable__current-indicator-border-radius: 624.9375rem;
|
|
336
356
|
--sd-navigable__current-indicator-height: 0.1875rem;
|
|
337
357
|
--sd-navigable__current-indicator-width: 0.1875rem;
|
|
338
|
-
--sd-navigation-item--default-color-text: var(--sd-color-
|
|
339
|
-
--sd-navigation-item-color-text: var(--sd-color-
|
|
358
|
+
--sd-navigation-item--default-color-text: var(--sd-color-primary-900);
|
|
359
|
+
--sd-navigation-item-color-text: var(--sd-color-primary-900);
|
|
340
360
|
--sd-notification--error-color-background: 253 237 237;
|
|
341
361
|
--sd-notification--info-color-background: 237 240 244;
|
|
342
362
|
--sd-notification--success-color-background: 238 246 242;
|
|
@@ -358,7 +378,7 @@
|
|
|
358
378
|
--sd-opacity-85: 0%;
|
|
359
379
|
--sd-opacity-90: 90%;
|
|
360
380
|
--sd-overlay-color-background: 0 0 0 / 0.2;
|
|
361
|
-
--sd-pagination--default-border: var(--sd-color-
|
|
381
|
+
--sd-pagination--default-border: var(--sd-color-primary-900);
|
|
362
382
|
--sd-pagination--inverted-border: var(--sd-color-white);
|
|
363
383
|
--sd-panel-color-border: 255 255 255 / 0;
|
|
364
384
|
--sd-progress-bar--active--inverted-color-background: var(--sd-color-accent);
|
|
@@ -444,7 +464,7 @@
|
|
|
444
464
|
--sd-tab--disabled-color-text: var(--sd-color-neutral-400);
|
|
445
465
|
--sd-tab--hover-color-background: var(--sd-color-neutral-100);
|
|
446
466
|
--sd-tab-color-border: var(--sd-color-neutral-300);
|
|
447
|
-
--sd-tab-color-text: var(--sd-color-
|
|
467
|
+
--sd-tab-color-text: var(--sd-color-primary-900);
|
|
448
468
|
--sd-tag--default--hover-color-background: 255 255 255 / 0.6;
|
|
449
469
|
--sd-tag--default-color-background: 255 255 255 / 0.6;
|
|
450
470
|
--sd-tag--default-color-border: 255 255 255 / 0.6;
|
|
@@ -488,56 +508,39 @@
|
|
|
488
508
|
--sd-tooltip-color-background: var(--sd-color-white);
|
|
489
509
|
--sd-tooltip-color-text: var(--sd-color-neutral-800);
|
|
490
510
|
--sd-video--play-button-color-background: var(--sd-color-white);
|
|
491
|
-
--sd-video--play-button-color-icon-fill: var(--sd-color-
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
.sd-theme-kid {
|
|
495
|
-
--sd-icon--calendar: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.88 2v2.5h6.24V2H17v2.5h3.75v16.25H3.25V4.5H7V2zm0 4.38H5.12v12.5h13.76V6.38zm0 5.62v3.13H12V12zM7 10.13h6.88V17H7z"/></svg>';
|
|
496
|
-
--sd-icon--chevron-down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 17.47h.04L3 8.33 4.33 7l7.81 7.81L19.95 7l1.3 1.33-9.15 9.14Z"/></svg>';
|
|
497
|
-
--sd-icon--chevron-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 12.14 16.14 3l1.29 1.33-7.81 7.81 7.81 7.81-1.29 1.33L7 12.14Z"/></svg>';
|
|
498
|
-
--sd-icon--chevron-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.9 11.6-7.6 7.6L8 17.8l6.3-6.2L8 5.3 9.3 4z"/></svg>';
|
|
499
|
-
--sd-icon--chevron-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8 12.5 5.98 6L15 17.45l-4.93-4.95L15 7.55 13.98 6.5 8 12.5Z"/></svg>';
|
|
500
|
-
--sd-icon--chevron-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16 12.5-5.98 6L9 17.45l4.93-4.95L9 7.55l1.02-1.05 5.98 6Z"/></svg>';
|
|
501
|
-
--sd-icon--chevron-up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.43 5.44.67.66 7.81 7.81.66.67-1.28 1.33-.67-.67-7.15-7.15-7.15 7.15-.66.67-1.33-1.33.67-.67 7.8-7.8.67-.67h-.04Z"/></svg>';
|
|
502
|
-
--sd-icon--chevrons-sm-left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m11.02 12 6.12 6 .86-.87L12.77 12 18 6.87 17.14 6l-6.12 6ZM6 12l6.12 6 .86-.87L7.75 12l5.23-5.13-.86-.87L6 12Z"/></svg>';
|
|
503
|
-
--sd-icon--chevrons-sm-right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.16 12.5-6.12 6-.86-.87 5.22-5.13-5.22-5.13.86-.87 6.12 6Zm5.02 0-6.12 6-.86-.87 5.22-5.13-5.22-5.13.86-.87 6.12 6Z"/></svg>';
|
|
504
|
-
--sd-icon--clock: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.09 11.98a8.12 8.12 0 1 0-16.24-.01 8.12 8.12 0 0 0 16.24 0Zm-18.13 0c0-5.5 4.5-10 10-10 5.51 0 10 4.5 10 10s-4.49 10-10 10c-5.5 0-10-4.5-10-10Zm9.07-5.31v-.94h1.87v5.74c2.66 1.76 4.02 2.7 4.1 2.73L16 15.78l-.78-.51-3.75-2.5-.43-.27V6.67Z"/></svg>';
|
|
505
|
-
--sd-icon--close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 7.3 13.2 12l4.6 4.6.7.7-1.3 1.3-.7-.6-4.6-4.7L7.3 18l-.6.6-1.4-1.3.7-.7 4.6-4.6L6 7.3l-.7-.6 1.4-1.4.6.7 4.7 4.7L16.6 6l.7-.6 1.3 1.3z"/></svg>';
|
|
506
|
-
--sd-icon--closing-round: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.964 4.347a8.119 8.119 0 0 0-8.125 8.125 8.119 8.119 0 0 0 8.125 8.125 8.119 8.119 0 0 0 8.125-8.125 8.119 8.119 0 0 0-8.125-8.125Zm0 18.125c-5.508 0-10-4.492-10-10s4.492-10 10-10 10 4.492 10 10-4.492 10-10 10Zm-3.281-8.047 1.953-1.953-2.617-2.617 1.328-1.328 2.617 2.617 2.617-2.617 1.328 1.328-2.617 2.617 2.617 2.617-1.328 1.329-2.617-2.618-2.617 2.617-1.328-1.328.664-.664Z"/></svg>';
|
|
507
|
-
--sd-icon--confirm-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22.5c-5.5 0-10-4.5-10-10s4.5-10 10-10 10 4.5 10 10-4.5 10-10 10ZM15.79 10l-1.56-.98c-.04.04-1.02 1.57-2.93 4.65-.78-1.05-1.33-1.76-1.6-2.15l-1.49 1.1 2.42 3.28.28.35h.97l.28-.43 3.12-5 .5-.82Z"/></svg>';
|
|
508
|
-
--sd-icon--exclamation-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10-4.5 10-10 10Zm.94-14.38h-1.88v5.63h1.88V7.62Zm-1.88 9.07h1.88V14.8h-1.88v1.88Z"/></svg>';
|
|
509
|
-
--sd-icon--eye-crossed-out: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m2.63 1.8 3.7 3.72a9.75 9.75 0 0 1 5.63-1.8c6.21 0 10.08 5.82 11.25 8.75-.62 1.56-1.99 3.95-4.1 5.82l3.52 3.52.66.66-1.33 1.33-.66-.66-20-20-.66-.67 1.32-1.33.67.67Zm5.04 5.05 1.48 1.48a4.98 4.98 0 0 1 6.95 6.95l1.68 1.68c.12-.11.28-.23.4-.39 1.4-1.32 2.42-2.89 3-4.1a14.57 14.57 0 0 0-3-4.1c-1.68-1.6-3.76-2.77-6.22-2.77-1.6 0-3 .47-4.3 1.25Zm7.07 7.07a3.13 3.13 0 0 0-4.22-4.22l4.22 4.22ZM4.85 9.35a13.05 13.05 0 0 0-2.07 3.12c.59 1.21 1.6 2.78 2.97 4.1 1.68 1.64 3.75 2.78 6.21 2.78.9 0 1.72-.16 2.5-.4l1.45 1.45c-1.17.51-2.5.82-3.95.82C5.8 21.22 1.9 15.4.71 12.47c.51-1.2 1.45-2.89 2.82-4.45l1.32 1.33Z"/></svg>';
|
|
510
|
-
--sd-icon--eye: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.78 11.98c.59 1.2 1.6 2.77 2.97 4.1 1.68 1.6 3.75 2.77 6.21 2.77s4.54-1.13 6.21-2.77c1.41-1.33 2.39-2.9 3.01-4.1a15.38 15.38 0 0 0-3-4.1c-1.68-1.6-3.76-2.78-6.22-2.78s-4.53 1.18-6.2 2.78a15.15 15.15 0 0 0-2.98 4.1Zm20.43 0c-1.17 2.93-5.07 8.75-11.25 8.75C5.8 20.73 1.9 14.9.71 11.98 1.9 9.05 5.8 3.23 11.96 3.23c6.18 0 10.08 5.82 11.25 8.75ZM11.96 15.1c1.72 0 3.13-1.4 3.13-3.12a3.1 3.1 0 0 0-1.88-2.85v4.1h-4.1a3.1 3.1 0 0 0 2.85 1.87Zm-3.04-3.75h2.42V8.93a3.09 3.09 0 0 0-2.42 2.42Zm3.04-4.37c2.78 0 5 2.23 5 5s-2.22 5-5 5c-2.77 0-5-2.23-5-5s2.23-5 5-5Z"/></svg>';
|
|
511
|
-
--sd-icon--info-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10-4.5 10-10 10Zm-2.5-6.88V17h5v-1.88h-1.25v-4.37H9.5v1.88h1.88v2.5H9.5Zm3.75-5.62V7h-2.5v2.5h2.5Z"/></svg>';
|
|
512
|
-
--sd-icon--magnifying-glass: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.14 10.43a6.24 6.24 0 1 0-12.49-.01 6.24 6.24 0 0 0 12.5.01Zm-1.17 6.37a8.12 8.12 0 1 1 1.33-1.33l5.23 5.23.67.67-1.33 1.33-.67-.67-5.23-5.23Z"/></svg>';
|
|
513
|
-
--sd-icon--minus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3.875A8.119 8.119 0 0 0 3.875 12 8.119 8.119 0 0 0 12 20.125 8.119 8.119 0 0 0 20.125 12 8.119 8.119 0 0 0 12 3.875ZM12 22C6.492 22 2 17.508 2 12S6.492 2 12 2s10 4.492 10 10-4.492 10-10 10ZM8.562 11.062h7.813v1.876h-8.75v-1.876h.938Z"/></svg>';
|
|
514
|
-
--sd-icon--mute: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m6.3 14.32 3.79 3.24V6.39L6.3 9.63l-.5.47H2.58v3.75h3.2l.51.47Zm-5.59 1.4v-7.5H5.1c3.87-3.32 6.13-5.31 6.87-5.94v19.38c-.74-.63-3-2.62-6.87-5.94H.7Zm21.33-6.25-2.5 2.5 2.5 2.5-1.33 1.33-2.5-2.5-2.5 2.5-1.32-1.33 2.5-2.5-2.5-2.5 1.32-1.33 2.5 2.5 2.5-2.5 1.33 1.33Z"/></svg>';
|
|
515
|
-
--sd-icon--pause: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.34 5.1v13.75h2.5V5.1h-2.5ZM4.46 3.22h6.25v17.5H4.46V3.22ZM15.1 5.1v13.75h2.5V5.1h-2.5ZM13.2 3.22h6.25v17.5h-6.25V3.22Z"/></svg>';
|
|
516
|
-
--sd-icon--plus-circle: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3.875A8.119 8.119 0 0 0 3.875 12 8.119 8.119 0 0 0 12 20.125 8.119 8.119 0 0 0 20.125 12 8.119 8.119 0 0 0 12 3.875ZM12 22C6.492 22 2 17.508 2 12S6.492 2 12 2s10 4.492 10 10-4.492 10-10 10Zm-.938-5.625v-3.438H7.626v-1.874h3.438V7.624h1.874v3.438h3.438v1.874h-3.438v3.438h-1.874Z"/></svg>';
|
|
517
|
-
--sd-icon--reload: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m1.96 1.03 3.4 3.4a10.02 10.02 0 0 1 16.6 7.54A10.02 10.02 0 0 1 2.9 16.23l1.72-.78a8.13 8.13 0 1 0 2.07-9.69l3.4 3.4H1.96V1.03Zm1.88 4.54v1.71h1.72L3.84 5.57Z"/></svg>';
|
|
518
|
-
--sd-icon--risk: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#cc0000" d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
|
|
519
|
-
--sd-icon--start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.5 19.23V2.63l1.87 1.05 13.08 7.26L21.37 12l-1.92 1.1-13.08 7.22-1.88 1.05v-2.14Zm1.87-1.06L17.5 12 6.37 5.83v12.34Z"/></svg>';
|
|
520
|
-
--sd-icon--status-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.49 7.59-.67.66-9.92 9.89-.66.66-.67-.66-4.92-4.93-.66-.66 1.29-1.33.66.67 4.3 4.25 9.26-9.21.66-.67z"/></svg>';
|
|
521
|
-
--sd-icon--status-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.13 13.44H3.88v-1.88h16.24z"/></svg>';
|
|
522
|
-
--sd-icon--transcript: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.38 3.88v16.25h11.25v-10h-6.25V3.87h-5Zm6.87.78v3.59h3.6l-3.6-3.6Zm0-2.66 6.25 6.25V22h-15V2h8.75ZM9.19 12h6.56v1.88h-7.5V12h.94Zm0 3.75h6.56v1.88h-7.5v-1.88h.94Z"/></svg>';
|
|
523
|
-
--sd-icon--volume: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m7.55 14.32 3.79 3.24V6.39L7.55 9.63l-.5.47H3.83v3.75h3.2l.51.47Zm-5.59 1.4v-7.5h4.38c3.87-3.32 6.13-5.31 6.87-5.94v19.38c-.74-.63-3-2.62-6.87-5.94H1.96Zm13.68-5.2-.43-.34 1.13-1.53.5.43a3.73 3.73 0 0 1 1.37 2.9c0 1.16-.54 2.22-1.36 2.92l-.51.4-1.13-1.5.43-.38a1.85 1.85 0 0 0 0-2.9Zm2.38-2.92-.55-.43 1.1-1.53.62.51a7.52 7.52 0 0 1 0 11.64l-.62.51-1.1-1.52.55-.43a5.73 5.73 0 0 0 2.07-4.38c0-1.76-.82-3.32-2.07-4.37Z"/></svg>';
|
|
524
|
-
--sd-icon--warning: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path d="M12 22a10 10 0 0 1 0-20 10 10 0 0 1 0 20Zm1-14.4h-2v5.7h2V7.5Zm-2 9h2v-1.8h-2v1.9Z"/></svg>';
|
|
511
|
+
--sd-video--play-button-color-icon-fill: var(--sd-color-primary-900);
|
|
525
512
|
}
|
|
526
513
|
|
|
527
514
|
:root, .sd-theme-kid {
|
|
528
515
|
/*
|
|
529
516
|
* Deprecated variables – manually overriding these in custom themes might lead to problems in future versions of Solid.
|
|
530
517
|
* Use the actual used value instead. Example:
|
|
531
|
-
* Instead of --sd-chip-
|
|
518
|
+
* Instead of --sd-chip-font-size use --sd-marker-font-size for your overrides.
|
|
532
519
|
*/
|
|
533
520
|
--sd-button--size-lg-border-radius: var(--sd-button-border-radius);
|
|
534
521
|
--sd-button--size-md-border-radius: var(--sd-button-border-radius);
|
|
535
522
|
--sd-button--size-sm-border-radius: var(--sd-button-border-radius);
|
|
536
523
|
--sd-button--secondary--inverted--color-border: var(--sd-button-secondary-inverted-color-border);
|
|
537
524
|
--sd-chip-font-size: var(--sd-marker-font-size);
|
|
538
|
-
--sd-chip-border-width: var(--sd-marker-border-width);
|
|
539
525
|
--sd-chip-font-weight: var(--sd-marker-font-weight);
|
|
540
|
-
--sd-
|
|
526
|
+
--sd-chip--primary-200-color-background: var(--sd-chip--primary-low-color-background);
|
|
527
|
+
--sd-chip--primary-200-color-border: var(--sd-chip--primary-subtle-color-filled-border);
|
|
528
|
+
--sd-chip--primary-300-color-background: var(--sd-chip--primary-medium-color-background);
|
|
529
|
+
--sd-chip--primary-300-color-border: var(--sd-chip--primary-medium-color-filled-border);
|
|
530
|
+
--sd-chip--primary-500-color-background: var(--sd-chip--primary-high-color-background);
|
|
531
|
+
--sd-chip--primary-500-color-border: var(--sd-chip--primary-high-color-filled-border);
|
|
532
|
+
--sd-chip--primary-500-color-text: var(--sd-color-white);
|
|
533
|
+
--sd-chip--white-color-border: var(--sd-chip--white-color-filled-border);
|
|
534
|
+
--sd-flag-border-radius: var(--sd-chip-border-radius);
|
|
535
|
+
--sd-flag-border-width: var(--sd-chip-border-width);
|
|
536
|
+
--sd-flag--neutral-200-color-background: var(--sd-chip--neutral-low-color-background);
|
|
537
|
+
--sd-flag--neutral-200-color-border: var(--sd-chip--neutral-low-color-filled-border);
|
|
538
|
+
--sd-flag--neutral-300-color-background: var(--sd-chip--neutral-medium-color-background);
|
|
539
|
+
--sd-flag--neutral-300-color-border: var(--sd-chip--neutral-medium-color-filled-border);
|
|
540
|
+
--sd-flag--neutral-500-color-background: var(--sd-chip--neutral-high-color-background);
|
|
541
|
+
--sd-flag--neutral-500-color-border: var(--sd-chip--neutral-high-color-filled-border);
|
|
542
|
+
--sd-flag--white-color-background: var(--sd-chip--white-color-background);
|
|
543
|
+
--sd-flag--white-color-border: var(--sd-chip--white-color-filled-border);
|
|
541
544
|
--sd-form-control-color-icon: var(--sd-form-control-color-icon-fill);
|
|
542
545
|
--sd-menu-color-icon: var(--sd-menu-item-color-icon-fill);
|
|
543
546
|
--sd-menu-color-text: var(--sd-menu-item-color-text);
|