@solid-design-system/tokens 6.28.0 → 6.28.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/cdn/themes/bb/bb.css +1 -1
  2. package/cdn/themes/kid/kid.css +1 -1
  3. package/cdn/themes/sp/sp.css +1 -1
  4. package/cdn/themes/ui-dark/ui-dark.css +1 -1
  5. package/cdn/themes/ui-light/ui-light.css +1 -1
  6. package/cdn/themes/vb/vb.css +1 -1
  7. package/dist/theme.js +1 -1
  8. package/dist/themes/bb/bb.css +17 -17
  9. package/dist/themes/kid/kid.css +43 -43
  10. package/dist/themes/sp/sp.css +38 -38
  11. package/dist/themes/ui-dark/ui-dark.css +10 -10
  12. package/dist/themes/ui-light/ui-light.css +12 -12
  13. package/dist/themes/vb/vb.css +56 -56
  14. 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-black);
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-black);
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-black);
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);
@@ -150,8 +150,8 @@
150
150
  --sd-color-background-accent-550: var(--sd-color-neutral-700);
151
151
  --sd-color-background-accent-700: var(--sd-color-neutral-800);
152
152
  --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);
153
+ --sd-color-background-error-400: var(--sd-color-error-400);
154
+ --sd-color-background-error: var(--sd-color-error-300);
155
155
  --sd-color-background-info: var(--sd-color-info);
156
156
  --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
157
  --sd-color-background-neutral-200: var(--sd-color-neutral-100);
@@ -165,15 +165,15 @@
165
165
  --sd-color-background-primary-300: var(--sd-color-neutral-800);
166
166
  --sd-color-background-primary-500: var(--sd-color-neutral-800);
167
167
  --sd-color-background-primary-800: var(--sd-color-neutral-800);
168
- --sd-color-background-primary: var(--sd-color-black);
168
+ --sd-color-background-primary: var(--sd-color-primary-900);
169
169
  --sd-color-background-success: var(--sd-color-success);
170
170
  --sd-color-background-warning: var(--sd-color-warning);
171
- --sd-color-background-white: var(--sd-color-accent);
171
+ --sd-color-background-white: var(--sd-color-accent-100);
172
172
  --sd-color-black: 5 21 48;
173
173
  --sd-color-border-accent-550: var(--sd-color-neutral-800);
174
174
  --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);
175
+ --sd-color-border-error-400: var(--sd-color-error-400);
176
+ --sd-color-border-error: var(--sd-color-error-300);
177
177
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
178
178
  --sd-color-border-neutral-500: var(--sd-color-neutral-400);
179
179
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
@@ -185,7 +185,7 @@
185
185
  --sd-color-border-primary-800: var(--sd-color-neutral-800);
186
186
  --sd-color-border-primary: var(--sd-color-black);
187
187
  --sd-color-border-success: var(--sd-color-success);
188
- --sd-color-border-white: var(--sd-color-accent);
188
+ --sd-color-border-white: var(--sd-color-accent-100);
189
189
  --sd-color-error-250: 204 0 0;
190
190
  --sd-color-error-300: 204 0 0;
191
191
  --sd-color-error-400: 204 0 0;
@@ -194,14 +194,14 @@
194
194
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
195
195
  --sd-color-icon-fill-accent: var(--sd-color-black);
196
196
  --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);
197
+ --sd-color-icon-fill-error-400: var(--sd-color-error-400);
198
+ --sd-color-icon-fill-error: var(--sd-color-error-300);
199
199
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
200
200
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-400);
201
201
  --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
202
202
  --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);
203
+ --sd-color-icon-fill-primary-100: var(--sd-color-accent-100);
204
+ --sd-color-icon-fill-primary-200: var(--sd-color-accent-100);
205
205
  --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
206
206
  --sd-color-icon-fill-primary-500: var(--sd-color-neutral-800);
207
207
  --sd-color-icon-fill-primary-800: var(--sd-color-neutral-800);
@@ -212,7 +212,7 @@
212
212
  --sd-color-icon-fill-risk-moderate: var(--sd-color-risk-moderate);
213
213
  --sd-color-icon-fill-risk-veryhigh: var(--sd-color-risk-veryhigh);
214
214
  --sd-color-icon-fill-success: var(--sd-color-success);
215
- --sd-color-icon-fill-white: var(--sd-color-accent);
215
+ --sd-color-icon-fill-white: var(--sd-color-accent-100);
216
216
  --sd-color-info: 76 105 187;
217
217
  --sd-color-neutral-100: 255 255 255 / 0.5;
218
218
  --sd-color-neutral-200: 207 216 220;
@@ -239,20 +239,20 @@
239
239
  --sd-color-risk-moderate: 0 165 147;
240
240
  --sd-color-risk-veryhigh: 255 0 0;
241
241
  --sd-color-success: 0 112 0;
242
- --sd-color-text-accent: var(--sd-color-black);
242
+ --sd-color-text-accent: var(--sd-color-primary-900);
243
243
  --sd-color-text-black: var(--sd-color-black);
244
244
  --sd-color-text-error: var(--sd-color-black);
245
245
  --sd-color-text-neutral-500: var(--sd-color-neutral-400);
246
246
  --sd-color-text-neutral-600: var(--sd-color-neutral-600);
247
247
  --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);
248
+ --sd-color-text-primary-100: var(--sd-color-accent-100);
249
+ --sd-color-text-primary-200: var(--sd-color-accent-100);
250
250
  --sd-color-text-primary-400: 255 255 255 / 0.84;
251
251
  --sd-color-text-primary-500: var(--sd-color-neutral-800);
252
- --sd-color-text-primary-800: var(--sd-color-black);
253
- --sd-color-text-primary: var(--sd-color-black);
252
+ --sd-color-text-primary-800: var(--sd-color-primary-900);
253
+ --sd-color-text-primary: var(--sd-color-primary-900);
254
254
  --sd-color-text-success: var(--sd-color-success);
255
- --sd-color-text-white: var(--sd-color-accent);
255
+ --sd-color-text-white: var(--sd-color-accent-100);
256
256
  --sd-color-warning: 214 112 0;
257
257
  --sd-color-white: 255 255 255;
258
258
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
@@ -267,7 +267,7 @@
267
267
  --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
268
268
  --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
269
269
  --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);
270
+ --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-accent-100);
271
271
  --sd-datepicker__date-item--selected-color-background: var(--sd-color-black);
272
272
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
273
273
  --sd-divider--inverted-color-border: 255 255 255 / 0.4;
@@ -320,7 +320,7 @@
320
320
  --sd-map-marker--cluster--hover-color-background: var(--sd-color-neutral-800);
321
321
  --sd-map-marker--cluster-color-text: var(--sd-color-accent);
322
322
  --sd-map-marker--main-color-background: var(--sd-color-black);
323
- --sd-map-marker--pin--default-color-background: var(--sd-color-accent);
323
+ --sd-map-marker--pin--default-color-background: var(--sd-color-accent-100);
324
324
  --sd-map-marker--pin--hover-color-background: var(--sd-color-neutral-100);
325
325
  --sd-map-marker--pin-color-text: var(--sd-color-black);
326
326
  --sd-marker-border-width: var(--sd-spacing-0\.25);
@@ -335,8 +335,8 @@
335
335
  --sd-navigable__current-indicator-border-radius: 624.9375rem;
336
336
  --sd-navigable__current-indicator-height: 0.1875rem;
337
337
  --sd-navigable__current-indicator-width: 0.1875rem;
338
- --sd-navigation-item--default-color-text: var(--sd-color-black);
339
- --sd-navigation-item-color-text: var(--sd-color-black);
338
+ --sd-navigation-item--default-color-text: var(--sd-color-primary-900);
339
+ --sd-navigation-item-color-text: var(--sd-color-primary-900);
340
340
  --sd-notification--error-color-background: 253 237 237;
341
341
  --sd-notification--info-color-background: 237 240 244;
342
342
  --sd-notification--success-color-background: 238 246 242;
@@ -358,7 +358,7 @@
358
358
  --sd-opacity-85: 0%;
359
359
  --sd-opacity-90: 90%;
360
360
  --sd-overlay-color-background: 0 0 0 / 0.2;
361
- --sd-pagination--default-border: var(--sd-color-black);
361
+ --sd-pagination--default-border: var(--sd-color-primary-900);
362
362
  --sd-pagination--inverted-border: var(--sd-color-white);
363
363
  --sd-panel-color-border: 255 255 255 / 0;
364
364
  --sd-progress-bar--active--inverted-color-background: var(--sd-color-accent);
@@ -444,7 +444,7 @@
444
444
  --sd-tab--disabled-color-text: var(--sd-color-neutral-400);
445
445
  --sd-tab--hover-color-background: var(--sd-color-neutral-100);
446
446
  --sd-tab-color-border: var(--sd-color-neutral-300);
447
- --sd-tab-color-text: var(--sd-color-black);
447
+ --sd-tab-color-text: var(--sd-color-primary-900);
448
448
  --sd-tag--default--hover-color-background: 255 255 255 / 0.6;
449
449
  --sd-tag--default-color-background: 255 255 255 / 0.6;
450
450
  --sd-tag--default-color-border: 255 255 255 / 0.6;
@@ -488,7 +488,7 @@
488
488
  --sd-tooltip-color-background: var(--sd-color-white);
489
489
  --sd-tooltip-color-text: var(--sd-color-neutral-800);
490
490
  --sd-video--play-button-color-background: var(--sd-color-white);
491
- --sd-video--play-button-color-icon-fill: var(--sd-color-black);
491
+ --sd-video--play-button-color-icon-fill: var(--sd-color-primary-900);
492
492
  }
493
493
 
494
494
  .sd-theme-kid {
package/dist/themes/sp/sp.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --sd-accordion--hover-color-background: var(--sd-color-neutral-100);
6
6
  --sd-accordion--open-color-text: var(--sd-color-black);
7
7
  --sd-accordion-border-width: var(--sd-spacing-0\.5);
8
- --sd-accordion-color-border: var(--sd-color-neutral-500);
8
+ --sd-accordion-color-border: var(--sd-color-neutral-400);
9
9
  --sd-accordion-color-icon-fill: var(--sd-color-neutral-700);
10
10
  --sd-accordion-color-text: var(--sd-color-black);
11
11
  --sd-accordion-padding-block: 0.9375rem;
@@ -62,7 +62,7 @@
62
62
  --sd-button--primary--default-color-background: var(--sd-color-info);
63
63
  --sd-button--primary--default-color-text: var(--sd-color-white);
64
64
  --sd-button--primary--disabled-color-background: var(--sd-color-primary-300);
65
- --sd-button--primary--hover-color-background: var(--sd-color-primary-750);
65
+ --sd-button--primary--hover-color-background: var(--sd-color-primary-700);
66
66
  --sd-button--primary--hover-color-text: var(--sd-color-primary-100);
67
67
  --sd-button--primary--inverted--active-color-background: var(--sd-color-primary-100);
68
68
  --sd-button--primary--inverted--active-color-text: var(--sd-color-primary-800);
@@ -146,38 +146,38 @@
146
146
  --sd-color-accent-800: 233 72 0;
147
147
  --sd-color-accent: 240 100 0;
148
148
  --sd-color-background-accent-300: var(--sd-color-primary-400);
149
- --sd-color-background-accent-500: var(--sd-color-primary-750);
150
- --sd-color-background-accent-550: var(--sd-color-info);
149
+ --sd-color-background-accent-500: var(--sd-color-primary-700);
150
+ --sd-color-background-accent-550: var(--sd-color-primary-600);
151
151
  --sd-color-background-accent-700: var(--sd-color-primary-800);
152
152
  --sd-color-background-accent: var(--sd-color-info);
153
- --sd-color-background-error-400: var(--sd-color-error);
154
- --sd-color-background-error: var(--sd-color-error);
153
+ --sd-color-background-error-400: var(--sd-color-error-400);
154
+ --sd-color-background-error: var(--sd-color-error-300);
155
155
  --sd-color-background-info: var(--sd-color-info);
156
156
  --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
157
  --sd-color-background-neutral-200: var(--sd-color-neutral-100);
158
158
  --sd-color-background-neutral-300: var(--sd-color-neutral-200);
159
159
  --sd-color-background-neutral-400: var(--sd-color-neutral-300);
160
- --sd-color-background-neutral-500: var(--sd-color-neutral-500);
161
- --sd-color-background-neutral-600: var(--sd-color-neutral-700);
162
- --sd-color-background-neutral-800: var(--sd-color-black);
160
+ --sd-color-background-neutral-500: var(--sd-color-neutral-400);
161
+ --sd-color-background-neutral-600: var(--sd-color-neutral-600);
162
+ --sd-color-background-neutral-800: var(--sd-color-neutral-800);
163
163
  --sd-color-background-primary-100: var(--sd-color-primary-100);
164
164
  --sd-color-background-primary-200: var(--sd-color-primary-200);
165
165
  --sd-color-background-primary-300: var(--sd-color-primary-300);
166
166
  --sd-color-background-primary-500: var(--sd-color-primary-500);
167
167
  --sd-color-background-primary-800: var(--sd-color-primary-800);
168
- --sd-color-background-primary: var(--sd-color-info);
168
+ --sd-color-background-primary: var(--sd-color-primary-600);
169
169
  --sd-color-background-success: var(--sd-color-success);
170
170
  --sd-color-background-warning: var(--sd-color-warning);
171
171
  --sd-color-background-white: var(--sd-color-white);
172
172
  --sd-color-black: 0 0 0 / 0.86;
173
- --sd-color-border-accent-550: var(--sd-color-info);
173
+ --sd-color-border-accent-550: var(--sd-color-primary-600);
174
174
  --sd-color-border-accent: var(--sd-color-info);
175
- --sd-color-border-error-400: var(--sd-color-error);
176
- --sd-color-border-error: var(--sd-color-error);
175
+ --sd-color-border-error-400: var(--sd-color-error-400);
176
+ --sd-color-border-error: var(--sd-color-error-300);
177
177
  --sd-color-border-neutral-400: var(--sd-color-neutral-300);
178
- --sd-color-border-neutral-500: var(--sd-color-neutral-500);
179
- --sd-color-border-neutral-600: var(--sd-color-neutral-700);
180
- --sd-color-border-neutral-800: var(--sd-color-black);
178
+ --sd-color-border-neutral-500: var(--sd-color-neutral-400);
179
+ --sd-color-border-neutral-600: var(--sd-color-neutral-600);
180
+ --sd-color-border-neutral-800: var(--sd-color-neutral-800);
181
181
  --sd-color-border-primary-100: var(--sd-color-primary-100);
182
182
  --sd-color-border-primary-200: var(--sd-color-primary-200);
183
183
  --sd-color-border-primary-400: var(--sd-color-primary-400);
@@ -191,15 +191,15 @@
191
191
  --sd-color-error-400: 210 0 0;
192
192
  --sd-color-error-500: 210 0 0;
193
193
  --sd-color-error: 210 0 0;
194
- --sd-color-icon-fill-accent-550: var(--sd-color-accent);
194
+ --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
195
195
  --sd-color-icon-fill-accent: var(--sd-color-accent-300);
196
196
  --sd-color-icon-fill-content-icons-primary: var(--sd-color-info);
197
- --sd-color-icon-fill-error-400: var(--sd-color-error);
198
- --sd-color-icon-fill-error: var(--sd-color-error);
197
+ --sd-color-icon-fill-error-400: var(--sd-color-error-400);
198
+ --sd-color-icon-fill-error: var(--sd-color-error-300);
199
199
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-200);
200
- --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
200
+ --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-400);
201
201
  --sd-color-icon-fill-neutral-600: 255 255 255 / 0.4;
202
- --sd-color-icon-fill-neutral-800: var(--sd-color-black);
202
+ --sd-color-icon-fill-neutral-800: var(--sd-color-neutral-800);
203
203
  --sd-color-icon-fill-primary-100: var(--sd-color-primary-100);
204
204
  --sd-color-icon-fill-primary-200: var(--sd-color-primary-200);
205
205
  --sd-color-icon-fill-primary-400: 255 255 255 / 0.84;
@@ -240,15 +240,15 @@
240
240
  --sd-color-risk-veryhigh: 255 0 0;
241
241
  --sd-color-success: 12 115 54;
242
242
  --sd-color-text-accent: var(--sd-color-accent);
243
- --sd-color-text-black: var(--sd-color-black);
244
- --sd-color-text-error: var(--sd-color-error);
243
+ --sd-color-text-black: var(--sd-color-neutral-800);
244
+ --sd-color-text-error: var(--sd-color-error-300);
245
245
  --sd-color-text-neutral-500: var(--sd-color-neutral-500);
246
246
  --sd-color-text-neutral-600: 255 255 255 / 0.4;
247
- --sd-color-text-neutral-700: var(--sd-color-neutral-700);
247
+ --sd-color-text-neutral-700: var(--sd-color-neutral-600);
248
248
  --sd-color-text-primary-100: var(--sd-color-primary-100);
249
249
  --sd-color-text-primary-200: var(--sd-color-white);
250
250
  --sd-color-text-primary-400: var(--sd-color-white);
251
- --sd-color-text-primary-500: var(--sd-color-info);
251
+ --sd-color-text-primary-500: var(--sd-color-primary-600);
252
252
  --sd-color-text-primary-800: var(--sd-color-primary-800);
253
253
  --sd-color-text-primary: var(--sd-color-info);
254
254
  --sd-color-text-success: var(--sd-color-success);
@@ -261,12 +261,12 @@
261
261
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
262
262
  --sd-datepicker__date-item--default-color-text: var(--sd-color-black);
263
263
  --sd-datepicker__date-item--hover--default-color-background: var(--sd-color-primary-100);
264
- --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-primary-750);
265
- --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-primary-750);
264
+ --sd-datepicker__date-item--hover--default-color-border: var(--sd-color-primary-700);
265
+ --sd-datepicker__date-item--hover--default-color-text: var(--sd-color-primary-700);
266
266
  --sd-datepicker__date-item--hover--prev-next-color-background: var(--sd-color-primary-100);
267
267
  --sd-datepicker__date-item--hover--prev-next-color-text: var(--sd-color-neutral-700);
268
268
  --sd-datepicker__date-item--range-color-background: var(--sd-color-primary-100);
269
- --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-750);
269
+ --sd-datepicker__date-item--selected--hover-color-background: var(--sd-color-primary-700);
270
270
  --sd-datepicker__date-item--selected--hover-color-text: var(--sd-color-white);
271
271
  --sd-datepicker__date-item--selected-color-background: var(--sd-color-info);
272
272
  --sd-datepicker__date-item--selected-color-text: var(--sd-color-white);
@@ -294,13 +294,13 @@
294
294
  --sd-font-weight-normal: 400;
295
295
  --sd-footnotes--target--inverted-color-background: var(--sd-color-primary-750);
296
296
  --sd-form-control--disabled-color-text: var(--sd-color-primary-300);
297
- --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-700);
297
+ --sd-form-control--filled__floating-label-color-text: var(--sd-color-neutral-600);
298
298
  --sd-form-control--hover-color-background: 243 247 250;
299
299
  --sd-form-control--invalid-color-background: 253 237 237;
300
300
  --sd-form-control--read-only-color-background: var(--sd-color-neutral-100);
301
301
  --sd-form-control-border-radius: var(--sd-spacing-1);
302
302
  --sd-form-control-color-border: var(--sd-color-black);
303
- --sd-form-control-color-icon-fill: var(--sd-color-neutral-700);
303
+ --sd-form-control-color-icon-fill: var(--sd-color-neutral-600);
304
304
  --sd-form-control-color-text: var(--sd-color-neutral-700);
305
305
  --sd-form-control__listbox-border-bottom-left-radius: var(--sd-spacing-1);
306
306
  --sd-form-control__listbox-border-bottom-right-radius: var(--sd-spacing-1);
@@ -363,12 +363,12 @@
363
363
  --sd-panel-color-border: 255 255 255 / 0;
364
364
  --sd-progress-bar--active--inverted-color-background: var(--sd-color-white);
365
365
  --sd-progress-bar__slide-bar--inverted-color-background: 255 255 255 / 0.5;
366
- --sd-progress-bar__slide-bar-color-background: var(--sd-color-neutral-500);
366
+ --sd-progress-bar__slide-bar-color-background: var(--sd-color-neutral-400);
367
367
  --sd-quickfact--expandable-color-text: var(--sd-color-black);
368
368
  --sd-radio--checked--default-color-background: var(--sd-color-info);
369
369
  --sd-radio--checked--default__icon-color-background: var(--sd-color-white);
370
370
  --sd-radio--checked--disabled__icon-color-background: var(--sd-color-white);
371
- --sd-radio--checked--hover-color-background: var(--sd-color-info);
371
+ --sd-radio--checked--hover-color-background: var(--sd-color-primary-600);
372
372
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-white);
373
373
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-error);
374
374
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-white);
@@ -390,7 +390,7 @@
390
390
  --sd-radius-none: 0;
391
391
  --sd-radius-sm: 0.125rem;
392
392
  --sd-radius: 0.25rem;
393
- --sd-range-scale-ticks-color-text: var(--sd-color-neutral-700);
393
+ --sd-range-scale-ticks-color-text: var(--sd-color-neutral-600);
394
394
  --sd-shadow-listbox: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
395
395
  --sd-shadow-sm: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.86);
396
396
  --sd-shadow-xs: 0.5px 0.5px 1.5px 0px rgba(0, 0, 0, 0.86);
@@ -434,22 +434,22 @@
434
434
  --sd-step-color-text: var(--sd-color-neutral-700);
435
435
  --sd-step__circle-border-width: var(--sd-spacing-0\.5);
436
436
  --sd-step__tail-border-width: var(--sd-spacing-1);
437
- --sd-switch--checked--hover-color-background: var(--sd-color-info);
437
+ --sd-switch--checked--hover-color-background: var(--sd-color-primary-600);
438
438
  --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-100);
439
439
  --sd-switch--unchecked-color-border: var(--sd-color-black);
440
440
  --sd-switch--unchecked__icon-color-background: var(--sd-color-black);
441
441
  --sd-switch-border-width: var(--sd-spacing-0\.5);
442
442
  --sd-switch-color-text: var(--sd-color-black);
443
443
  --sd-tab--active-color-text: var(--sd-color-info);
444
- --sd-tab--disabled-color-text: var(--sd-color-neutral-500);
444
+ --sd-tab--disabled-color-text: var(--sd-color-neutral-400);
445
445
  --sd-tab--hover-color-background: var(--sd-color-neutral-100);
446
- --sd-tab-color-border: var(--sd-color-neutral-500);
446
+ --sd-tab-color-border: var(--sd-color-neutral-400);
447
447
  --sd-tab-color-text: var(--sd-color-neutral-700);
448
448
  --sd-tag--default--hover-color-background: var(--sd-color-primary-100);
449
449
  --sd-tag--default-color-background: 255 255 255 / 0;
450
450
  --sd-tag--default-color-border: var(--sd-color-info);
451
451
  --sd-tag--default-color-text: var(--sd-color-info);
452
- --sd-tag--disabled-color-text: var(--sd-color-neutral-500);
452
+ --sd-tag--disabled-color-text: var(--sd-color-neutral-400);
453
453
  --sd-tag--removable--size-lg-padding-left: var(--sd-spacing-3);
454
454
  --sd-tag--removable--size-lg-padding-right: var(--sd-spacing-2);
455
455
  --sd-tag--removable--size-sm-padding-left: var(--sd-spacing-2);
@@ -476,7 +476,7 @@
476
476
  --sd-teaser-media--primary-100-color-background: 245 247 249 / 0.8;
477
477
  --sd-teaser-media--white--hover-color-background: 255 255 255 / 0.9;
478
478
  --sd-teaser-media--white-color-background: 255 255 255 / 0.8;
479
- --sd-teaser-media-color-icon-fill: var(--sd-color-neutral-700);
479
+ --sd-teaser-media-color-icon-fill: var(--sd-color-neutral-600);
480
480
  --sd-text-2xl: 1.75rem;
481
481
  --sd-text-3xl: 2rem;
482
482
  --sd-text-4xl: 2.375rem;
package/dist/themes/ui-dark/ui-dark.css CHANGED
@@ -31,9 +31,9 @@
31
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
32
  --sd-badge--green-color-background: var(--sd-color-accent-550);
33
33
  --sd-badge--inverted-color-border: var(--sd-color-primary);
34
- --sd-badge--red--inverted-background: var(--sd-color-error);
34
+ --sd-badge--red--inverted-background: var(--sd-color-error-300);
35
35
  --sd-badge--red--inverted-text: var(--sd-color-white);
36
- --sd-badge--red-color-background: var(--sd-color-error);
36
+ --sd-badge--red-color-background: var(--sd-color-error-300);
37
37
  --sd-border-width-2: 0.125rem;
38
38
  --sd-border-width-4: 0.25rem;
39
39
  --sd-border-width-6: 0.375rem;
@@ -52,7 +52,7 @@
52
52
  --sd-button--cta--inverted--active-color-text: var(--sd-color-white);
53
53
  --sd-button--cta--inverted--default-color-background: var(--sd-color-accent);
54
54
  --sd-button--cta--inverted--default-color-text: var(--sd-color-white);
55
- --sd-button--cta--inverted--hover-color-background: var(--sd-color-accent-550);
55
+ --sd-button--cta--inverted--hover-color-background: var(--sd-color-accent-500);
56
56
  --sd-button--cta--inverted--hover-color-text: var(--sd-color-white);
57
57
  --sd-button--inverted--disabled-color-background: var(--sd-color-neutral-600);
58
58
  --sd-button--inverted--disabled-color-border: var(--sd-color-neutral-600);
@@ -144,12 +144,12 @@
144
144
  --sd-color-accent-700: 33 87 37;
145
145
  --sd-color-accent-800: 25 65 27;
146
146
  --sd-color-accent: 45 157 0;
147
- --sd-color-background-accent-300: var(--sd-color-success);
148
- --sd-color-background-accent-500: var(--sd-color-accent-550);
147
+ --sd-color-background-accent-300: var(--sd-color-accent-300);
148
+ --sd-color-background-accent-500: var(--sd-color-accent-500);
149
149
  --sd-color-background-accent-550: var(--sd-color-accent-550);
150
150
  --sd-color-background-accent-700: var(--sd-color-accent-700);
151
151
  --sd-color-background-accent: var(--sd-color-accent);
152
- --sd-color-background-error-400: var(--sd-color-error);
152
+ --sd-color-background-error-400: var(--sd-color-error-300);
153
153
  --sd-color-background-error: var(--sd-color-error-250);
154
154
  --sd-color-background-info: var(--sd-color-info);
155
155
  --sd-color-background-neutral-100: var(--sd-color-primary-750);
@@ -171,7 +171,7 @@
171
171
  --sd-color-black: 24 24 24;
172
172
  --sd-color-border-accent-550: var(--sd-color-accent-550);
173
173
  --sd-color-border-accent: var(--sd-color-accent);
174
- --sd-color-border-error-400: var(--sd-color-error);
174
+ --sd-color-border-error-400: var(--sd-color-error-300);
175
175
  --sd-color-border-error: var(--sd-color-error-250);
176
176
  --sd-color-border-neutral-400: var(--sd-color-primary-400);
177
177
  --sd-color-border-neutral-500: var(--sd-color-neutral-600);
@@ -193,7 +193,7 @@
193
193
  --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
194
194
  --sd-color-icon-fill-accent: var(--sd-color-accent);
195
195
  --sd-color-icon-fill-content-icons-primary: var(--sd-color-white);
196
- --sd-color-icon-fill-error-400: var(--sd-color-error);
196
+ --sd-color-icon-fill-error-400: var(--sd-color-error-300);
197
197
  --sd-color-icon-fill-error: var(--sd-color-error-250);
198
198
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
199
199
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-600);
@@ -255,7 +255,7 @@
255
255
  --sd-color-warning: 187 141 32;
256
256
  --sd-color-white: 255 255 255;
257
257
  --sd-combobox__tag-border-width: var(--sd-spacing-0\.25);
258
- --sd-container--primary-800-color-background: var(--sd-color-primary);
258
+ --sd-container--primary-800-color-background: var(--sd-color-primary-600);
259
259
  --sd-datepicker__date-item--current-color-text: var(--sd-color-white);
260
260
  --sd-datepicker__date-item--current-font-weight: var(--sd-font-weight-bold);
261
261
  --sd-datepicker__date-item--default-color-text: var(--sd-color-white);
@@ -371,7 +371,7 @@
371
371
  --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent);
372
372
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-primary-900);
373
373
  --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error-250);
374
- --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error);
374
+ --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-300);
375
375
  --sd-radio--default--invalid-color-background: var(--sd-color-primary-900);
376
376
  --sd-radio-border-width: var(--sd-spacing-0\.25);
377
377
  --sd-radio-button--hover-color-background: 255 255 255 / 0;
package/dist/themes/ui-light/ui-light.css CHANGED
@@ -27,9 +27,9 @@
27
27
  --sd-badge--blue--inverted-color-background: var(--sd-color-primary-100);
28
28
  --sd-badge--blue--inverted-color-text: var(--sd-color-primary);
29
29
  --sd-badge--blue-color-background: var(--sd-color-primary-500);
30
- --sd-badge--green-color--inverted-background: var(--sd-color-success);
30
+ --sd-badge--green-color--inverted-background: var(--sd-color-accent-550);
31
31
  --sd-badge--green-color--inverted-text: var(--sd-color-white);
32
- --sd-badge--green-color-background: var(--sd-color-success);
32
+ --sd-badge--green-color-background: var(--sd-color-accent-550);
33
33
  --sd-badge--inverted-color-border: var(--sd-color-primary);
34
34
  --sd-badge--red--inverted-background: var(--sd-color-error);
35
35
  --sd-badge--red--inverted-text: var(--sd-color-white);
@@ -147,11 +147,11 @@
147
147
  --sd-color-accent: 45 157 0;
148
148
  --sd-color-background-accent-300: var(--sd-color-accent-300);
149
149
  --sd-color-background-accent-500: var(--sd-color-accent-500);
150
- --sd-color-background-accent-550: var(--sd-color-success);
150
+ --sd-color-background-accent-550: var(--sd-color-accent-550);
151
151
  --sd-color-background-accent-700: var(--sd-color-accent-700);
152
152
  --sd-color-background-accent: var(--sd-color-accent);
153
153
  --sd-color-background-error-400: var(--sd-color-error-400);
154
- --sd-color-background-error: var(--sd-color-error);
154
+ --sd-color-background-error: var(--sd-color-error-300);
155
155
  --sd-color-background-info: var(--sd-color-info);
156
156
  --sd-color-background-neutral-100: var(--sd-color-neutral-100);
157
157
  --sd-color-background-neutral-200: var(--sd-color-neutral-200);
@@ -170,10 +170,10 @@
170
170
  --sd-color-background-warning: var(--sd-color-warning);
171
171
  --sd-color-background-white: var(--sd-color-white);
172
172
  --sd-color-black: 24 24 24;
173
- --sd-color-border-accent-550: var(--sd-color-success);
173
+ --sd-color-border-accent-550: var(--sd-color-accent-550);
174
174
  --sd-color-border-accent: var(--sd-color-accent);
175
175
  --sd-color-border-error-400: var(--sd-color-error-400);
176
- --sd-color-border-error: var(--sd-color-error);
176
+ --sd-color-border-error: var(--sd-color-error-300);
177
177
  --sd-color-border-neutral-400: var(--sd-color-neutral-400);
178
178
  --sd-color-border-neutral-500: var(--sd-color-neutral-500);
179
179
  --sd-color-border-neutral-600: var(--sd-color-neutral-600);
@@ -191,11 +191,11 @@
191
191
  --sd-color-error-400: 172 25 56;
192
192
  --sd-color-error-500: 125 20 45;
193
193
  --sd-color-error: 204 25 55;
194
- --sd-color-icon-fill-accent-550: var(--sd-color-success);
194
+ --sd-color-icon-fill-accent-550: var(--sd-color-accent-550);
195
195
  --sd-color-icon-fill-accent: var(--sd-color-accent);
196
196
  --sd-color-icon-fill-content-icons-primary: var(--sd-color-primary);
197
197
  --sd-color-icon-fill-error-400: var(--sd-color-error-400);
198
- --sd-color-icon-fill-error: var(--sd-color-error);
198
+ --sd-color-icon-fill-error: var(--sd-color-error-300);
199
199
  --sd-color-icon-fill-neutral-400: var(--sd-color-neutral-400);
200
200
  --sd-color-icon-fill-neutral-500: var(--sd-color-neutral-500);
201
201
  --sd-color-icon-fill-neutral-600: var(--sd-color-neutral-600);
@@ -241,7 +241,7 @@
241
241
  --sd-color-success: 54 123 40;
242
242
  --sd-color-text-accent: var(--sd-color-accent);
243
243
  --sd-color-text-black: var(--sd-color-black);
244
- --sd-color-text-error: var(--sd-color-error);
244
+ --sd-color-text-error: var(--sd-color-error-300);
245
245
  --sd-color-text-neutral-500: var(--sd-color-neutral-500);
246
246
  --sd-color-text-neutral-600: var(--sd-color-neutral-600);
247
247
  --sd-color-text-neutral-700: var(--sd-color-neutral-700);
@@ -369,9 +369,9 @@
369
369
  --sd-radio--checked--default__icon-color-background: var(--sd-color-accent);
370
370
  --sd-radio--checked--disabled__icon-color-background: var(--sd-color-neutral-500);
371
371
  --sd-radio--checked--hover-color-background: var(--sd-color-white);
372
- --sd-radio--checked--hover__icon-color-background: var(--sd-color-success);
372
+ --sd-radio--checked--hover__icon-color-background: var(--sd-color-accent-550);
373
373
  --sd-radio--checked--invalid--default-color-background: var(--sd-color-white);
374
- --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error);
374
+ --sd-radio--checked--invalid--default__icon-color-background: var(--sd-color-error-300);
375
375
  --sd-radio--checked--invalid--hover__icon-color-background: var(--sd-color-error-400);
376
376
  --sd-radio--default--invalid-color-background: var(--sd-color-white);
377
377
  --sd-radio-border-width: var(--sd-spacing-0\.25);
@@ -434,7 +434,7 @@
434
434
  --sd-step-color-text: var(--sd-color-primary);
435
435
  --sd-step__circle-border-width: var(--sd-spacing-0\.25);
436
436
  --sd-step__tail-border-width: var(--sd-spacing-0\.25);
437
- --sd-switch--checked--hover-color-background: var(--sd-color-success);
437
+ --sd-switch--checked--hover-color-background: var(--sd-color-accent-550);
438
438
  --sd-switch--unchecked--hover-color-background: var(--sd-color-neutral-200);
439
439
  --sd-switch--unchecked-color-border: var(--sd-color-neutral-800);
440
440
  --sd-switch--unchecked__icon-color-background: var(--sd-color-neutral-800);