@mittwald/flow-design-tokens 0.1.0-alpha.316 → 0.1.0-alpha.318

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 (3) hide show
  1. package/dist/variables.css +567 -591
  2. package/dist/variables.json +15610 -16054
  3. package/package.json +2 -2
package/dist/variables.css CHANGED
@@ -5,7 +5,12 @@
5
5
  :root {
6
6
  --transition--duration--slow: 300ms;
7
7
  --transition--duration--default: 200ms;
8
- --size--none: 0px;
8
+ --progress-bar--height-s: 0.375rem;
9
+ --notification--width: 355px;
10
+ --loading-spinner--transition-duration: 2000ms;
11
+ --counter-badge--height-empty: 0.75rem;
12
+ --counter-badge--height: 1.25rem;
13
+ --counter-badge--font-size: 0.625rem;
9
14
  --size-px--xxl: 64px;
10
15
  --size-px--xl: 32px;
11
16
  --size-px--l: 24px;
@@ -22,125 +27,109 @@
22
27
  --size-rem--xs: 0.25rem;
23
28
  --size-rem--xxs: 0.125rem;
24
29
  --size-rem--xxxs: 0.0625rem;
25
- --heading-font-size--xxl: 2.625rem;
26
- --heading-font-size--xl: 2rem;
27
- --heading-font-size--l: 1.5rem;
28
- --heading-font-size--m: 1.25rem;
29
- --heading-font-size--s: 1.125rem;
30
- --heading-font-size--xs: 1rem;
31
- --font-size--m: 1rem;
32
- --font-size--s: 0.875rem;
33
- --line-height--default: 1.5;
34
- --font-weight--bold: bold;
35
- --font-weight--normal: normal;
36
30
  --tooltip--max-width: 300px;
37
- --switch--handle-size: 1.25rem;
38
- --switch--track-corner-radius: 0.75rem;
39
- --switch--track-width: 2.75rem;
40
- --switch--track-height: 1.5rem;
41
- --progress-bar--bar-height-s: 0.375rem;
42
31
  --popover--min-width: 200px;
43
32
  --overlay--background-color: rgba(0, 0, 0, 0.3);
44
- --notification--width: 355px;
45
33
  --modal--size--m: 900px;
46
34
  --modal--size--s: 660px;
47
- --loading-spinner--transition-duration: 2000ms;
35
+ --contextual-help--max-width: 500px;
36
+ --switch--handle-size: 1.25rem;
37
+ --switch--track-corner-radius: 0.75rem;
38
+ --switch--track-width: 2.75rem;
39
+ --switch--track-height: 1.5rem;
40
+ --calendar--cell-size: 2.25rem;
41
+ --font-size-heading--xxl: 2.625rem;
42
+ --font-size-heading--xl: 2rem;
43
+ --font-size-heading--l: 1.5rem;
44
+ --font-size-heading--m: 1.25rem;
45
+ --font-size-heading--s: 1.125rem;
46
+ --font-size-heading--xs: 1rem;
47
+ --font-size-text--m: 1rem;
48
+ --font-size-text--s: 0.875rem;
49
+ --line-height--default: 1.5;
50
+ --font-weight--bold: bold;
51
+ --font-weight--normal: normal;
52
+ --text--max-width: 780px;
48
53
  --icon--size--l: 4rem;
49
54
  --icon--size--m: 1.5rem;
50
55
  --icon--size--s: 1rem;
51
- --calendar--cell-size: 2.25rem;
52
- --counter-badge--height-empty: 0.75rem;
53
- --counter-badge--height: 1.25rem;
54
- --counter-badge--font-size: 0.625rem;
55
- --contextual-help--max-width: 500px;
56
- --code-block--dark-syntax-color-variable: #8c3b3b;
57
- --code-block--dark-syntax-color-type: #880000;
58
- --code-block--dark-syntax-color-title: #880000;
59
- --code-block--dark-syntax-color-template-variable: #8c3b3b;
60
- --code-block--dark-syntax-color-template-tag: #880000;
61
- --code-block--dark-syntax-color-symbol: #8c3b3b;
62
- --code-block--dark-syntax-color-string: #880000;
63
- --code-block--dark-syntax-color-selector-id: #880000;
64
- --code-block--dark-syntax-color-selector-class: #880000;
65
- --code-block--dark-syntax-color-selector-attr: #8c3b3b;
66
- --code-block--dark-syntax-color-section: #880000;
67
- --code-block--dark-syntax-color-regexp: #8c3b3b;
68
- --code-block--dark-syntax-color-quote: #880000;
69
- --code-block--dark-syntax-color-pseudo: #8c3b3b;
70
- --code-block--dark-syntax-color-number: #880000;
71
- --code-block--dark-syntax-color-meta-string: #2a5b74;
72
- --code-block--dark-syntax-color-meta: #195b7b;
73
- --code-block--dark-syntax-color-literal: #405d32;
74
- --code-block--dark-syntax-color-link: #8c3b3b;
75
- --code-block--dark-syntax-color-deletion: #880000;
76
- --code-block--dark-syntax-color-comment: #575757;
77
- --code-block--dark-syntax-color-code: #306100;
78
- --code-block--dark-syntax-color-bullet: #306100;
79
- --code-block--dark-syntax-color-built-in: #306100;
80
- --code-block--dark-syntax-color-addition: #306100;
81
- --code-block--light-syntax-color-variable: #dcacac;
82
- --code-block--light-syntax-color-type: #ff9e9e;
83
- --code-block--light-syntax-color-title: #ff9e9e;
84
- --code-block--light-syntax-color-template-variable: #dcacac;
85
- --code-block--light-syntax-color-template-tag: #ff9e9e;
86
- --code-block--light-syntax-color-symbol: #dcacac;
87
- --code-block--light-syntax-color-string: #ff9e9e;
88
- --code-block--light-syntax-color-selector-id: #ff9e9e;
89
- --code-block--light-syntax-color-selector-class: #ff9e9e;
90
- --code-block--light-syntax-color-selector-attr: #dcacac;
91
- --code-block--light-syntax-color-section: #ff9e9e;
92
- --code-block--light-syntax-color-regexp: #dcacac;
93
- --code-block--light-syntax-color-quote: #ff9e9e;
94
- --code-block--light-syntax-color-pseudo: #dcacac;
95
- --code-block--light-syntax-color-number: #ff9e9e;
96
- --code-block--light-syntax-color-meta-string: #8ebfd7;
97
- --code-block--light-syntax-color-meta: #77c0e4;
98
- --code-block--light-syntax-color-literal: #9fc28e;
99
- --code-block--light-syntax-color-link: #dcacac;
100
- --code-block--light-syntax-color-deletion: #ff9e9e;
101
- --code-block--light-syntax-color-comment: #b8b8b8;
102
- --code-block--light-syntax-color-code: #68d100;
103
- --code-block--light-syntax-color-bullet: #68d100;
104
- --code-block--light-syntax-color-built-in: #68d100;
105
- --code-block--light-syntax-color-addition: #68d100;
106
- --code-block--default-syntax-color-variable: #a94747;
107
- --code-block--default-syntax-color-type: #880000;
108
- --code-block--default-syntax-color-title: #880000;
109
- --code-block--default-syntax-color-template-variable: #a94747;
110
- --code-block--default-syntax-color-template-tag: #880000;
111
- --code-block--default-syntax-color-symbol: #a94747;
112
- --code-block--default-syntax-color-string: #880000;
113
- --code-block--default-syntax-color-selector-pseudo: #a94747;
114
- --code-block--default-syntax-color-selector-id: #880000;
115
- --code-block--default-syntax-color-selector-class: #880000;
116
- --code-block--default-syntax-color-selector-attr: #a94747;
117
- --code-block--default-syntax-color-section: #880000;
118
- --code-block--default-syntax-color-regexp: #a94747;
119
- --code-block--default-syntax-color-quote: #880000;
120
- --code-block--default-syntax-color-number: #880000;
121
- --code-block--default-syntax-color-meta-string: #326d8b;
122
- --code-block--default-syntax-color-meta: #1e6e94;
123
- --code-block--default-syntax-color-literal: #4c6d3b;
124
- --code-block--default-syntax-color-link: #a94747;
125
- --code-block--default-syntax-color-deletion: #880000;
126
- --code-block--default-syntax-color-comment: #666666;
127
- --code-block--default-syntax-color-code: #397300;
128
- --code-block--default-syntax-color-bullet: #397300;
129
- --code-block--default-syntax-color-built-in: #397300;
130
- --code-block--default-syntax-color-addition: #397300;
56
+ --code--dark-syntax-color-variable: #8c3b3b;
57
+ --code--dark-syntax-color-type: #880000;
58
+ --code--dark-syntax-color-title: #880000;
59
+ --code--dark-syntax-color-template-variable: #8c3b3b;
60
+ --code--dark-syntax-color-template-tag: #880000;
61
+ --code--dark-syntax-color-symbol: #8c3b3b;
62
+ --code--dark-syntax-color-string: #880000;
63
+ --code--dark-syntax-color-selector-id: #880000;
64
+ --code--dark-syntax-color-selector-class: #880000;
65
+ --code--dark-syntax-color-selector-attr: #8c3b3b;
66
+ --code--dark-syntax-color-section: #880000;
67
+ --code--dark-syntax-color-regexp: #8c3b3b;
68
+ --code--dark-syntax-color-quote: #880000;
69
+ --code--dark-syntax-color-pseudo: #8c3b3b;
70
+ --code--dark-syntax-color-number: #880000;
71
+ --code--dark-syntax-color-meta-string: #2a5b74;
72
+ --code--dark-syntax-color-meta: #195b7b;
73
+ --code--dark-syntax-color-literal: #405d32;
74
+ --code--dark-syntax-color-link: #8c3b3b;
75
+ --code--dark-syntax-color-deletion: #880000;
76
+ --code--dark-syntax-color-comment: #575757;
77
+ --code--dark-syntax-color-code: #306100;
78
+ --code--dark-syntax-color-bullet: #306100;
79
+ --code--dark-syntax-color-built-in: #306100;
80
+ --code--dark-syntax-color-addition: #306100;
81
+ --code--light-syntax-color-variable: #dcacac;
82
+ --code--light-syntax-color-type: #ff9e9e;
83
+ --code--light-syntax-color-title: #ff9e9e;
84
+ --code--light-syntax-color-template-variable: #dcacac;
85
+ --code--light-syntax-color-template-tag: #ff9e9e;
86
+ --code--light-syntax-color-symbol: #dcacac;
87
+ --code--light-syntax-color-string: #ff9e9e;
88
+ --code--light-syntax-color-selector-id: #ff9e9e;
89
+ --code--light-syntax-color-selector-class: #ff9e9e;
90
+ --code--light-syntax-color-selector-attr: #dcacac;
91
+ --code--light-syntax-color-section: #ff9e9e;
92
+ --code--light-syntax-color-regexp: #dcacac;
93
+ --code--light-syntax-color-quote: #ff9e9e;
94
+ --code--light-syntax-color-pseudo: #dcacac;
95
+ --code--light-syntax-color-number: #ff9e9e;
96
+ --code--light-syntax-color-meta-string: #8ebfd7;
97
+ --code--light-syntax-color-meta: #77c0e4;
98
+ --code--light-syntax-color-literal: #9fc28e;
99
+ --code--light-syntax-color-link: #dcacac;
100
+ --code--light-syntax-color-deletion: #ff9e9e;
101
+ --code--light-syntax-color-comment: #b8b8b8;
102
+ --code--light-syntax-color-code: #68d100;
103
+ --code--light-syntax-color-bullet: #68d100;
104
+ --code--light-syntax-color-built-in: #68d100;
105
+ --code--light-syntax-color-addition: #68d100;
106
+ --code--default-syntax-color-variable: #a94747;
107
+ --code--default-syntax-color-type: #880000;
108
+ --code--default-syntax-color-title: #880000;
109
+ --code--default-syntax-color-template-variable: #a94747;
110
+ --code--default-syntax-color-template-tag: #880000;
111
+ --code--default-syntax-color-symbol: #a94747;
112
+ --code--default-syntax-color-string: #880000;
113
+ --code--default-syntax-color-selector-pseudo: #a94747;
114
+ --code--default-syntax-color-selector-id: #880000;
115
+ --code--default-syntax-color-selector-class: #880000;
116
+ --code--default-syntax-color-selector-attr: #a94747;
117
+ --code--default-syntax-color-section: #880000;
118
+ --code--default-syntax-color-regexp: #a94747;
119
+ --code--default-syntax-color-quote: #880000;
120
+ --code--default-syntax-color-number: #880000;
121
+ --code--default-syntax-color-meta-string: #326d8b;
122
+ --code--default-syntax-color-meta: #1e6e94;
123
+ --code--default-syntax-color-literal: #4c6d3b;
124
+ --code--default-syntax-color-link: #a94747;
125
+ --code--default-syntax-color-deletion: #880000;
126
+ --code--default-syntax-color-comment: #666666;
127
+ --code--default-syntax-color-code: #397300;
128
+ --code--default-syntax-color-bullet: #397300;
129
+ --code--default-syntax-color-built-in: #397300;
130
+ --code--default-syntax-color-addition: #397300;
131
131
  --avatar--size--m: 2.5rem;
132
132
  --color--transparent: transparent;
133
- --color--bright-lilac--1100: #470062;
134
- --color--bright-lilac--1000: #5f0083;
135
- --color--bright-lilac--900: #9000c5;
136
- --color--bright-lilac--800: #bc08ff;
137
- --color--bright-lilac--700: #ce4bff;
138
- --color--bright-lilac--600: #e08dff;
139
- --color--bright-lilac--500: #e6a1ff;
140
- --color--bright-lilac--400: #ebb6ff;
141
- --color--bright-lilac--300: #f1caff;
142
- --color--bright-lilac--200: #f6dfff;
143
- --color--bright-lilac--100: #f9e9ff;
144
133
  --color--super-teal--1100: #00424a;
145
134
  --color--super-teal--1000: #004f59;
146
135
  --color--super-teal--900: #006b78;
@@ -152,6 +141,17 @@
152
141
  --color--super-teal--300: #96f3ff;
153
142
  --color--super-teal--200: #cffaff;
154
143
  --color--super-teal--100: #ebfdff;
144
+ --color--bright-lilac--1100: #470062;
145
+ --color--bright-lilac--1000: #5f0083;
146
+ --color--bright-lilac--900: #9000c5;
147
+ --color--bright-lilac--800: #bc08ff;
148
+ --color--bright-lilac--700: #ce4bff;
149
+ --color--bright-lilac--600: #e08dff;
150
+ --color--bright-lilac--500: #e6a1ff;
151
+ --color--bright-lilac--400: #ebb6ff;
152
+ --color--bright-lilac--300: #f1caff;
153
+ --color--bright-lilac--200: #f6dfff;
154
+ --color--bright-lilac--100: #f9e9ff;
155
155
  --color--mittwald-navy--1100: #0E142E;
156
156
  --color--mittwald-navy--1000: #131B3D;
157
157
  --color--mittwald-navy--900: #1D285C;
@@ -174,6 +174,17 @@
174
174
  --color--soft-contrast-violet--300: #D6D0FA;
175
175
  --color--soft-contrast-violet--200: #EAE7FD;
176
176
  --color--soft-contrast-violet--100: #F4F3FE;
177
+ --color--espelkamp-green--1100: #00291C;
178
+ --color--espelkamp-green--1000: #003B29;
179
+ --color--espelkamp-green--900: #005F42;
180
+ --color--espelkamp-green--800: #00825B;
181
+ --color--espelkamp-green--700: #00A673;
182
+ --color--espelkamp-green--600: #00DE9A;
183
+ --color--espelkamp-green--500: #17FFB8;
184
+ --color--espelkamp-green--400: #4FFFC9;
185
+ --color--espelkamp-green--300: #87FFDA;
186
+ --color--espelkamp-green--200: #C0FFEB;
187
+ --color--espelkamp-green--100: #DCFFF4;
177
188
  --color--royal-orange--1100: #763200;
178
189
  --color--royal-orange--1000: #8F3D00;
179
190
  --color--royal-orange--900: #C25200;
@@ -196,17 +207,6 @@
196
207
  --color--amaranth-red--300: #F7C1CC;
197
208
  --color--amaranth-red--200: #FBE0E6;
198
209
  --color--amaranth-red--100: #FDF0F3;
199
- --color--espelkamp-green--1100: #00291C;
200
- --color--espelkamp-green--1000: #003B29;
201
- --color--espelkamp-green--900: #005F42;
202
- --color--espelkamp-green--800: #00825B;
203
- --color--espelkamp-green--700: #00A673;
204
- --color--espelkamp-green--600: #00DE9A;
205
- --color--espelkamp-green--500: #17FFB8;
206
- --color--espelkamp-green--400: #4FFFC9;
207
- --color--espelkamp-green--300: #87FFDA;
208
- --color--espelkamp-green--200: #C0FFEB;
209
- --color--espelkamp-green--100: #DCFFF4;
210
210
  --color--hosting-blue--1100: #00205C;
211
211
  --color--hosting-blue--1000: #002A7B;
212
212
  --color--hosting-blue--900: #003FB8;
@@ -247,177 +247,48 @@
247
247
  --dark--color--100: rgb(0 0 0 / 12.5%);
248
248
  --border-style--default: solid;
249
249
  --corner-radius--round: 50%;
250
- --menu-item--background-color--default: var(--color--transparent);
251
- --menu-item--icon-to-text-spacing: var(--size-rem--s);
252
- --menu-item--padding-y: var(--size-px--xs);
253
- --menu-item--padding-x: var(--size-px--s);
254
- --menu-item--font-weight--current: var(--font-weight--bold);
255
- --menu--separator-to-item-spacing: var(--size-px--s);
256
- --menu--label-to-group-spacing: var(--size-px--s);
257
- --menu--group-to-group-spacing: var(--size-px--m);
258
- --menu--item-to-item-spacing: var(--size-px--xs);
259
- --form-control--border-style: var(--border-style--default);
260
- --form-control--padding-y: var(--size-px--s);
261
- --form-control--padding-x: var(--size-px--m);
262
- --form-control--control-to-info-spacing: var(--size-rem--xs);
263
- --form-control--label-to-control-spacing: var(--size-rem--xxs);
264
- --font-size--default: var(--font-size--m);
265
- --line-height--m: calc(var(--font-size--m) * 1.5);
266
- --focus--outline-offset: var(--size-px--xxs);
267
- --tooltip--arrow-size: var(--size-px--s);
268
- --tooltip--tooltip-to-content-spacing: var(--size-px--s);
269
- --tooltip--font-size: var(--font-size--s);
270
- --tooltip--padding-y: var(--size-px--xs);
271
- --tooltip--padding-x: var(--size-px--s);
272
- --time-field--date-segment-corner-radius: var(--size-px--xs);
273
- --tab-panel--padding: var(--size-px--xl);
274
- --tab--text-to-status-spacing: var(--size-rem--s);
275
- --tab--font-weight--selected: var(--font-weight--bold);
276
- --tab--padding-x: var(--size-px--l);
277
- --tab--padding-y: var(--size-px--m);
278
250
  --table--footer-font-weight: var(--font-weight--bold);
279
251
  --table--header-font-weight: var(--font-weight--bold);
280
252
  --table--padding-y: var(--size-px--s);
281
253
  --table--padding-x: var(--size-px--m);
282
254
  --table--border-style: var(--border-style--default);
283
- --switch--track-padding: var(--size-rem--xxs);
284
- --switch--label-to-track-spacing: var(--size-rem--s);
285
- --slider--initial-marker-width: var(--size-rem--xs);
286
- --slider--initial-marker-height: var(--size-rem--m);
287
- --slider--thumb-size: var(--size-rem--l);
288
- --slider--thumb-corner-radius: var(--corner-radius--round);
289
- --slider--thumb-border-style: var(--border-style--default);
290
- --slider--thumb-border-width: var(--size-rem--xs);
291
- --slider--track-height: var(--size-rem--xs);
292
- --slider--text-to-track-spacing: var(--size-rem--xs);
293
- --slider--value-to-label-spacing: var(--size-rem--xs);
294
- --slider--value-font-weight: var(--font-weight--bold);
295
- --segmented-button--text-to-text-spacing: var(--size-rem--xs);
296
255
  --section-header--heading-to-actions-spacing: var(--size-rem--m);
297
256
  --section-header--action-to-action-spacing: var(--size-rem--s);
298
257
  --section--sub-heading-spacing: var(--size-rem--s);
299
258
  --section--content-to-content-spacing: var(--size-rem--m);
300
259
  --section--section-to-section-spacing: var(--size-rem--xl);
301
260
  --section--border-style: var(--border-style--default);
302
- --segment--text-to-icon-spacing: var(--size-rem--m);
303
- --radio-button--label-font-weight-with-content: var(--font-weight--bold);
304
- --radio-button--icon-to-text-spacing: var(--size-rem--m);
305
- --radio-button--text-to-text-spacing: var(--size-rem--xs);
306
- --radio--icon-to-text-spacing: var(--size-rem--s);
307
- --radio-group--radio-to-radio-spacing: var(--size-rem--s);
308
- --progress-bar--bar-corner-radius: var(--size-rem--xs);
309
- --progress-bar--bar-height: var(--size-rem--s);
310
- --progress-bar--label-to-value-spacing: var(--size-rem--m);
311
- --progress-bar--label-to-bar-spacing: var(--size-rem--xs);
312
- --progress-bar--value-font-weight: var(--font-weight--bold);
313
- --progress-bar--font-size-s: var(--font-size--s);
314
- --progress-bar--font-size: var(--font-size--m);
315
- --popover--tip-width: var(--size-px--m);
316
- --popover--tip-height: var(--size-px--s);
317
- --popover--popover-to-trigger-spacing: var(--size-px--m);
318
- --popover--border-style: var(--border-style--default);
319
- --popover--padding: var(--size-px--m);
320
- --popover--corner-radius: var(--size-px--xs);
321
- --notification--font-size: var(--font-size--s);
322
- --notification--heading-to-text-spacing: var(--size-rem--xs);
323
- --notification--border-style: var(--border-style--default);
324
- --notification--padding: var(--size-px--s);
325
- --notification-provider--notification-to-notification-spacing: var(--size-px--m);
326
- --notification-provider--window-to-provider-spacing: var(--size-px--xl);
327
- --modal--off-canvas-padding-y: var(--size-px--s);
328
- --modal--action-group-border-style: var(--border-style--default);
329
- --modal--action-group-padding: var(--size-rem--l);
330
- --modal--padding-bottom: var(--size-px--xl);
331
- --modal--padding: var(--size-px--l);
332
- --list-item--subtitle-font-size: var(--font-size--s);
261
+ --list-item--subtitle-font-size: var(--font-size-text--s);
333
262
  --list-item--content-to-content-spacing: var(--size-px--m);
334
263
  --list-item--border-style: var(--border-style--default);
335
264
  --list-item--padding: var(--size-px--s);
336
265
  --list--block-to-block-spacing: var(--size-px--m);
337
266
  --list--content-to-content-spacing: var(--size-px--s);
338
- --link--color-light--pressed: var(--light--color--600);
339
- --link--color-light--hover: var(--light--color--700);
340
- --link--color-light--default: var(--light--color--800);
341
- --link--color-dark--pressed: var(--dark--color--600);
342
- --link--color-dark--hover: var(--dark--color--700);
343
- --link--color-dark--default: var(--dark--color--800);
344
- --link--text-to-icon-spacing: var(--size-rem--xs);
345
- --link--font-weight: var(--font-weight--bold);
346
- --link--font-size: var(--font-size--s);
347
267
  --layout-card--padding: var(--size-px--xl);
348
- --labeled-value--value-to-button-spacing: var(--size-rem--xs);
349
- --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
350
- --label--content-to-content-spacing: var(--size-rem--xs);
351
- --label--font-weight: var(--font-weight--bold);
352
- --label--font-size: var(--font-size--s);
353
- --inline-code--padding-x: var(--size-px--xs);
354
- --inline-code--font-size: var(--font-size--s);
355
- --initials--color-lilac-content-accent-color: var(--color--bright-lilac--1000);
356
- --initials--color-lilac-content-color: var(--color--bright-lilac--800);
357
- --initials--color-lilac-background-color: var(--color--bright-lilac--200);
358
- --initials--color-violet-content-accent-color: var(--color--soft-contrast-violet--1000);
359
- --initials--color-violet-content-color: var(--color--soft-contrast-violet--800);
360
- --initials--color-violet-background-color: var(--color--soft-contrast-violet--200);
361
- --initials--color-green-content-accent-color: var(--color--espelkamp-green--1000);
362
- --initials--color-green-content-color: var(--color--espelkamp-green--800);
363
- --initials--color-green-background-color: var(--color--espelkamp-green--200);
364
- --initials--color-teal-content-accent-color: var(--color--super-teal--1000);
365
- --initials--color-teal-content-color: var(--color--super-teal--800);
366
- --initials--color-teal-background-color: var(--color--super-teal--200);
367
- --initials--color-blue-content-accent-color: var(--color--hosting-blue--1000);
368
- --initials--color-blue-content-color: var(--color--hosting-blue--800);
369
- --initials--color-blue-background-color: var(--color--hosting-blue--200);
370
- --initials--font-weight: var(--font-weight--bold);
371
- --illustrated-message--text-to-button-spacing: var(--size-rem--m);
372
- --illustrated-message--heading-to-text-spacing: var(--size-rem--s);
373
- --illustrated-message--icon-to-heading-spacing: var(--size-rem--m);
374
- --illustrated-message--padding-mobile: var(--size-px--l);
375
- --illustrated-message--padding: var(--size-px--xxl);
376
- --heading--font-weight: var(--font-weight--bold);
377
- --heading--icon-to-text-spacing: var(--size-rem--s);
378
- --header-navigation--item-font-weight-current: var(--font-weight--bold);
379
- --header-navigation--item-padding: var(--size-px--s);
380
- --header-navigation--item-to-item-spacing: var(--size-rem--m);
381
- --field-error--icon-to-text-spacing: var(--size-rem--s);
382
- --field-error--font-size: var(--font-size--s);
383
- --field-description--font-size: var(--font-size--s);
384
- --calendar--day-font-size: var(--font-size--s);
385
- --calendar--header-to-day-spacing: var(--size-rem--xs);
386
- --calendar--cell-corner-radius: var(--corner-radius--round);
387
- --calendar--cell-spacing: var(--size-rem--xs);
388
- --date-picker--date-segment-corner-radius: var(--size-px--xs);
389
- --counter-badge--border-style: var(--border-style--default);
390
- --counter-badge--padding-inline: var(--size-rem--xs);
391
- --counter-badge--font-weight: var(--font-weight--bold);
392
- --contextual-help--content-to-content-spacing: var(--size-rem--s);
393
- --context-menu--padding: var(--size-px--s);
394
268
  --column-layout--gap--l: var(--size-px--l);
395
269
  --column-layout--gap--m: var(--size-px--m);
396
270
  --column-layout--gap--s: var(--size-px--s);
397
271
  --column-layout--content-to-content-spacing: var(--size-rem--m);
398
- --code-block--code-to-button-spacing: var(--size-px--m);
399
- --code-block--padding: var(--size-px--m);
400
- --code-block--font-size: var(--font-size--s);
401
- --checkbox--icon-to-text-spacing: var(--size-rem--s);
402
- --checkbox-group--checkbox-to-checkbox-spacing: var(--size-rem--s);
403
- --checkbox-button--label-font-weight-with-content: var(--font-weight--bold);
404
- --checkbox-button--icon-to-text-spacing: var(--size-rem--m);
405
- --checkbox-button--text-to-text-spacing: var(--size-rem--xs);
406
- --button--line-height-s: var(--size-rem--m);
407
- --button--font-size-s: var(--font-size--s);
408
- --button--text-to-icon-spacing-s: var(--size-rem--xs);
409
- --button--padding-s-squished-y: var(--size-px--xs);
410
- --button--padding-s-squished-x: var(--size-px--s);
411
- --button--padding-s: var(--size-px--xs);
412
- --button--border-style: var(--border-style--default);
413
- --button--text-to-icon-spacing: var(--size-rem--s);
414
- --button--padding: var(--size-px--s);
415
- --button--padding-squished-y: var(--size-px--s);
416
- --button--padding-squished-x: var(--size-px--m);
417
- --breadcrumb-item--font-weight--current: var(--font-weight--bold);
418
- --breadcrumb-item--font-weight--default: var(--font-weight--normal);
419
- --breadcrumb-item--font-size: var(--font-size--s);
420
- --breadcrumb-item--padding-x: var(--size-px--xs);
272
+ --accordion--content-padding: var(--size-px--s);
273
+ --accordion--header-padding-y: var(--size-px--xs);
274
+ --accordion--header-padding-x: var(--size-px--s);
275
+ --accordion--heading-to-chevron-spacing: var(--size-rem--s);
276
+ --progress-bar--corner-radius: var(--size-rem--xs);
277
+ --progress-bar--height: var(--size-rem--s);
278
+ --progress-bar--spacing-x: var(--size-rem--m);
279
+ --progress-bar--spacing-y: var(--size-rem--xs);
280
+ --progress-bar--value-font-weight: var(--font-weight--bold);
281
+ --progress-bar--font-size-s: var(--font-size-text--s);
282
+ --progress-bar--font-size: var(--font-size-text--m);
283
+ --notification--font-size: var(--font-size-text--s);
284
+ --notification--heading-to-text-spacing: var(--size-rem--xs);
285
+ --notification--border-style: var(--border-style--default);
286
+ --notification--padding: var(--size-px--s);
287
+ --notification-provider--notification-to-notification-spacing: var(--size-px--m);
288
+ --notification-provider--window-to-provider-spacing: var(--size-px--xl);
289
+ --counter-badge--border-style: var(--border-style--default);
290
+ --counter-badge--padding-inline: var(--size-rem--xs);
291
+ --counter-badge--font-weight: var(--font-weight--bold);
421
292
  --badge--light-scope-background-color: var(--light--color--800);
422
293
  --badge--light-content-color--pressed: var(--light--color--800);
423
294
  --badge--light-content-color--hover: var(--light--color--800);
@@ -513,30 +384,126 @@
513
384
  --badge--corner-radius: var(--size-rem--m);
514
385
  --badge--line-height: var(--size-rem--m);
515
386
  --badge--font-weight: var(--font-weight--bold);
516
- --badge--font-size: var(--font-size--s);
517
- --avatar--size--l: var(--size-rem--xxl);
518
- --avatar--size--s: var(--size-rem--xl);
519
- --avatar--size--xs: var(--size-rem--l);
520
- --alert--heading-font-size: var(--font-size--m);
387
+ --badge--font-size: var(--font-size-text--s);
388
+ --alert--font-size-heading: var(--font-size-text--m);
521
389
  --alert--content-to-content-spacing: var(--size-rem--s);
522
390
  --alert--heading-to-content-spacing: var(--size-rem--xs);
523
391
  --alert--border-style: var(--border-style--default);
524
392
  --alert--padding: var(--size-px--m);
525
393
  --alert-badge--icon-to-text-spacing: var(--size-rem--xs);
526
- --action-group--button-to-button-spacing--s: var(--size-px--s);
527
- --action-group--button-to-button-spacing--m: var(--size-px--m);
528
- --accordion--content-padding: var(--size-px--s);
529
- --accordion--header-padding-y: var(--size-px--xs);
530
- --accordion--header-padding-x: var(--size-px--s);
531
- --accordion--heading-to-chevron-spacing: var(--size-rem--s);
532
- --light-outline-border-color: var(--light--color--700);
533
- --light-outline-content-color: var(--light--color--800);
394
+ --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
395
+ --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
396
+ --tooltip--arrow-size: var(--size-px--s);
397
+ --tooltip--tooltip-to-content-spacing: var(--size-px--s);
398
+ --tooltip--font-size: var(--font-size-text--s);
399
+ --tooltip--padding-y: var(--size-px--xs);
400
+ --tooltip--padding-x: var(--size-px--s);
401
+ --popover--tip-width: var(--size-px--m);
402
+ --popover--tip-height: var(--size-px--s);
403
+ --popover--popover-to-trigger-spacing: var(--size-px--m);
404
+ --popover--border-style: var(--border-style--default);
405
+ --popover--padding: var(--size-px--m);
406
+ --popover--corner-radius: var(--size-px--xs);
407
+ --modal--off-canvas-padding-y: var(--size-px--s);
408
+ --modal--action-group-border-style: var(--border-style--default);
409
+ --modal--action-group-padding: var(--size-rem--l);
410
+ --modal--padding-bottom: var(--size-px--xl);
411
+ --modal--padding: var(--size-px--l);
412
+ --contextual-help--content-to-content-spacing: var(--size-rem--s);
413
+ --tab-panel--padding: var(--size-px--xl);
414
+ --tab--text-to-status-spacing: var(--size-rem--s);
415
+ --tab--font-weight--selected: var(--font-weight--bold);
416
+ --tab--padding-x: var(--size-px--l);
417
+ --tab--padding-y: var(--size-px--m);
418
+ --link--color-light--pressed: var(--light--color--600);
419
+ --link--color-light--hover: var(--light--color--700);
420
+ --link--color-light--default: var(--light--color--800);
421
+ --link--color-dark--pressed: var(--dark--color--600);
422
+ --link--color-dark--hover: var(--dark--color--700);
423
+ --link--color-dark--default: var(--dark--color--800);
424
+ --link--text-to-icon-spacing: var(--size-rem--xs);
425
+ --link--font-weight: var(--font-weight--bold);
426
+ --link--font-size: var(--font-size-text--s);
427
+ --header-navigation--item-font-weight-current: var(--font-weight--bold);
428
+ --header-navigation--item-padding: var(--size-px--s);
429
+ --header-navigation--item-to-item-spacing: var(--size-rem--m);
430
+ --breadcrumb-item--font-weight--current: var(--font-weight--bold);
431
+ --breadcrumb-item--font-weight--default: var(--font-weight--normal);
432
+ --breadcrumb-item--font-size: var(--font-size-text--s);
433
+ --breadcrumb-item--padding-x: var(--size-px--xs);
434
+ --time-field--date-segment-corner-radius: var(--size-px--xs);
435
+ --switch--track-padding: var(--size-rem--xxs);
436
+ --switch--label-to-track-spacing: var(--size-rem--s);
437
+ --slider--initial-marker-width: var(--size-rem--xs);
438
+ --slider--initial-marker-height: var(--size-rem--m);
439
+ --slider--thumb-size: var(--size-rem--l);
440
+ --slider--thumb-corner-radius: var(--corner-radius--round);
441
+ --slider--thumb-border-style: var(--border-style--default);
442
+ --slider--thumb-border-width: var(--size-rem--xs);
443
+ --slider--track-height: var(--size-rem--xs);
444
+ --slider--text-to-track-spacing: var(--size-rem--xs);
445
+ --slider--value-to-label-spacing: var(--size-rem--xs);
446
+ --slider--value-font-weight: var(--font-weight--bold);
447
+ --segmented-button--text-to-text-spacing: var(--size-rem--xs);
448
+ --form-control--border-style: var(--border-style--default);
449
+ --form-control--padding-y: var(--size-px--s);
450
+ --form-control--padding-x: var(--size-px--m);
451
+ --form-control--spacing-y: var(--size-rem--xs);
452
+ --form-control--spacing-x: var(--size-rem--s);
453
+ --form-control--control-to-info-spacing: var(--size-rem--xs);
454
+ --form-control--label-to-control-spacing: var(--size-rem--xxs);
455
+ --field-error--spacing: var(--size-rem--xs);
456
+ --field-error--font-size: var(--font-size-text--s);
457
+ --field-description--font-size: var(--font-size-text--s);
458
+ --calendar--header-cell-font-weight: var(--font-weight--bold);
459
+ --calendar--cell-font-size: var(--font-size-text--s);
460
+ --calendar--cell-corner-radius: var(--corner-radius--round);
461
+ --calendar--spacing: var(--size-rem--xs);
462
+ --date-picker--date-segment-corner-radius: var(--size-px--xs);
463
+ --font-size-text--default: var(--font-size-text--m);
464
+ --line-height--m: calc(var(--font-size-text--m) * 1.5);
465
+ --focus--outline-offset: var(--size-px--xxs);
466
+ --labeled-value--value-to-action-spacing: var(--size-rem--xs);
467
+ --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
468
+ --label--spacing: var(--size-rem--xs);
469
+ --label--font-weight: var(--font-weight--bold);
470
+ --label--font-size: var(--font-size-text--s);
471
+ --initials--font-weight: var(--font-weight--bold);
472
+ --illustrated-message--spacing: var(--size-rem--m);
473
+ --illustrated-message--padding: var(--size-px--m);
474
+ --heading--font-weight: var(--font-weight--bold);
475
+ --heading--icon-to-text-spacing: var(--size-rem--s);
476
+ --decorative--disabled-content-color: var(--color--gray--600);
477
+ --decorative--disabled-content-accent-color: var(--color--gray--500);
478
+ --decorative--disabled-background-color: var(--color--gray--300);
479
+ --decorative--lilac-content-color: var(--color--bright-lilac--1000);
480
+ --decorative--lilac-content-accent-color: var(--color--bright-lilac--800);
481
+ --decorative--lilac-background-color: var(--color--bright-lilac--200);
482
+ --decorative--violet-content-color: var(--color--soft-contrast-violet--1000);
483
+ --decorative--violet-content-accent-color: var(--color--soft-contrast-violet--800);
484
+ --decorative--violet-background-color: var(--color--soft-contrast-violet--200);
485
+ --decorative--green-content-color: var(--color--espelkamp-green--1000);
486
+ --decorative--green-content-accent-color: var(--color--espelkamp-green--800);
487
+ --decorative--green-background-color: var(--color--espelkamp-green--200);
488
+ --decorative--teal-content-color: var(--color--super-teal--1000);
489
+ --decorative--teal-content-accent-color: var(--color--super-teal--800);
490
+ --decorative--teal-background-color: var(--color--super-teal--200);
491
+ --decorative--blue-content-color: var(--color--hosting-blue--1000);
492
+ --decorative--blue-content-accent-color: var(--color--hosting-blue--800);
493
+ --decorative--blue-background-color: var(--color--hosting-blue--200);
494
+ --code--spacing: var(--size-px--m);
495
+ --code--padding: var(--size-px--m);
496
+ --code--padding-x: var(--size-px--xs);
497
+ --code--font-size: var(--font-size-text--s);
498
+ --avatar--size--l: var(--size-rem--xxl);
499
+ --avatar--size--s: var(--size-rem--xl);
500
+ --avatar--size--xs: var(--size-rem--l);
501
+ --light-outline-content-color: var(--light--color--700);
502
+ --light-outline-border-color: var(--light--color--800);
534
503
  --light-outline-background-color--pressed: var(--light--color--200);
535
504
  --light-outline-background-color--hover: var(--light--color--100);
536
505
  --light-outline-background-color--default: var(--color--transparent);
537
- --light-plain-content-color--pressed: var(--light--color--600);
538
- --light-plain-content-color--hover: var(--light--color--700);
539
- --light-plain-content-color--default: var(--light--color--800);
506
+ --light-plain-content-color: var(--light--color--800);
540
507
  --light-plain-background-color--pressed: var(--light--color--200);
541
508
  --light-plain-background-color--hover: var(--light--color--100);
542
509
  --light-plain-background-color--default: var(--color--transparent);
@@ -548,14 +515,12 @@
548
515
  --light-solid-background-color--pressed: var(--light--color--600);
549
516
  --light-solid-background-color--hover: var(--light--color--700);
550
517
  --light-solid-background-color--default: var(--light--color--800);
551
- --dark-outline-border-color: var(--dark--color--700);
552
518
  --dark-outline-content-color: var(--dark--color--800);
519
+ --dark-outline-border-color: var(--dark--color--700);
553
520
  --dark-outline-background-color--pressed: var(--dark--color--200);
554
521
  --dark-outline-background-color--hover: var(--dark--color--100);
555
522
  --dark-outline-background-color--default: var(--color--transparent);
556
- --dark-plain-content-color--pressed: var(--dark--color--600);
557
- --dark-plain-content-color--hover: var(--dark--color--700);
558
- --dark-plain-content-color--default: var(--dark--color--800);
523
+ --dark-plain-content-color: var(--dark--color--800);
559
524
  --dark-plain-background-color--pressed: var(--dark--color--200);
560
525
  --dark-plain-background-color--hover: var(--dark--color--100);
561
526
  --dark-plain-background-color--default: var(--color--transparent);
@@ -567,23 +532,23 @@
567
532
  --dark-solid-background-color--pressed: var(--dark--color--600);
568
533
  --dark-solid-background-color--hover: var(--dark--color--700);
569
534
  --dark-solid-background-color--default: var(--dark--color--800);
570
- --disabled-light-soft-content-color: var(--light--color--200);
571
- --disabled-light-soft-background-color: var(--light--color--100);
572
- --disabled-dark-soft-content-color: var(--dark--color--200);
573
- --disabled-dark-soft-background-color: var(--dark--color--100);
574
- --disabled-light-outline-content-color: var(--light--color--300);
575
- --disabled-light-outline-border-color: var(--light--color--300);
576
- --disabled-light-outline-background-color: var(--color--transparent);
577
- --disabled-dark-outline-content-color: var(--dark--color--300);
578
- --disabled-dark-outline-border-color: var(--dark--color--300);
579
- --disabled-dark-outline-background-color: var(--color--transparent);
580
- --disabled-light-plain-content-color: var(--light--color--300);
581
- --disabled-dark-plain-content-color: var(--dark--color--300);
535
+ --disabled-soft-light-content-color: var(--light--color--200);
536
+ --disabled-soft-light-background-color: var(--light--color--100);
537
+ --disabled-soft-dark-content-color: var(--dark--color--200);
538
+ --disabled-soft-dark-background-color: var(--dark--color--100);
539
+ --disabled-outline-light-content-color: var(--light--color--300);
540
+ --disabled-outline-light-border-color: var(--light--color--300);
541
+ --disabled-outline-light-background-color: var(--color--transparent);
542
+ --disabled-outline-dark-content-color: var(--dark--color--300);
543
+ --disabled-outline-dark-border-color: var(--dark--color--300);
544
+ --disabled-outline-dark-background-color: var(--color--transparent);
545
+ --disabled-plain-light-content-color: var(--light--color--300);
546
+ --disabled-plain-dark-content-color: var(--dark--color--300);
582
547
  --disabled-plain-background-color: var(--color--transparent);
583
- --disabled-light-solid-content-color: var(--dark--color--300);
584
- --disabled-light-solid-background-color: var(--light--color--300);
585
- --disabled-dark-solid-content-color: var(--light--color--300);
586
- --disabled-dark-solid-background-color: var(--dark--color--300);
548
+ --disabled-solid-light-content-color: var(--dark--color--300);
549
+ --disabled-solid-light-background-color: var(--light--color--300);
550
+ --disabled-solid-dark-content-color: var(--light--color--300);
551
+ --disabled-solid-dark-background-color: var(--dark--color--300);
587
552
  --neutral-outline-background-color--default: var(--color--transparent);
588
553
  --neutral-plain-background-color--default: var(--color--transparent);
589
554
  --warning-plain-background-color--default: var(--color--transparent);
@@ -662,38 +627,34 @@
662
627
  --primary--color--300: var(--color--hosting-blue--300);
663
628
  --primary--color--200: var(--color--hosting-blue--200);
664
629
  --primary--color--100: var(--color--hosting-blue--100);
665
- --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
666
- --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
667
630
  --border-width--400: var(--size-px--s);
668
631
  --border-width--300: var(--size-px--xs);
669
632
  --border-width--200: var(--size-px--xxs);
670
633
  --border-width--100: var(--size-px--xxxs);
671
634
  --corner-radius--default: var(--size-px--xs);
672
- --menu-item--disabled-background-color: var(--disabled-plain-background-color);
673
- --menu-item--icon-color--current: var(--primary--color--800);
674
- --menu-item--icon-color--default: var(--neutral--color--800);
675
- --menu-item--color--current: var(--primary--color--800);
676
- --menu-item--corner-radius: var(--corner-radius--default);
677
- --form-control--background-color--selected: var(--primary--color--200);
678
- --form-control--background-color--invalid: var(--danger--color--100);
679
- --form-control--background-color--focused: var(--neutral--color--300);
680
- --form-control--background-color--hover: var(--primary--color--100);
681
- --form-control--background-color--default: var(--neutral--color--300);
682
- --form-control--placeholder-color--disabled: var(--neutral--color--500);
683
- --form-control--placeholder-color--default: var(--neutral--color--900);
684
- --form-control--border-width: var(--border-width--100);
685
- --form-control--corner-radius: var(--corner-radius--default);
686
- --content--color--dark: var(--dark-plain-content-color--default);
687
- --content--color--light: var(--light-plain-content-color--default);
688
- --content--color--default: var(--neutral--color--1000);
689
- --focus--outline-width: var(--border-width--200);
690
- --focus--outline-color: var(--primary--color--800);
691
- --tooltip--box-shadow: var(--shadow--overlay);
692
- --tooltip--color: var(--neutral--color--100);
693
- --tooltip--background-color: var(--neutral--color--900);
694
- --tab--disabled-color: var(--neutral--color--600);
695
- --tab--background-color--selected: var(--neutral--color--100);
696
- --tab-list--background-color: var(--neutral--color--400);
635
+ --menu-item--background-color--default: var(--color--transparent);
636
+ --menu-item--icon-to-text-spacing: var(--size-rem--s);
637
+ --menu-item--padding-y: var(--size-px--xs);
638
+ --menu-item--padding-x: var(--size-px--s);
639
+ --menu-item--font-weight--current: var(--font-weight--bold);
640
+ --menu--separator-to-item-spacing: var(--size-px--s);
641
+ --menu--label-to-group-spacing: var(--size-px--s);
642
+ --menu--group-to-group-spacing: var(--size-px--m);
643
+ --menu--item-to-item-spacing: var(--size-px--xs);
644
+ --context-menu--padding: var(--size-px--s);
645
+ --button--line-height-s: var(--size-rem--m);
646
+ --button--font-size-s: var(--font-size-text--s);
647
+ --button--spacing-s: var(--size-rem--xs);
648
+ --button--padding-s-y: var(--size-px--xs);
649
+ --button--padding-s-x: var(--size-px--s);
650
+ --button--padding-s-icon-only: var(--size-px--xs);
651
+ --button--border-style: var(--border-style--default);
652
+ --button--spacing: var(--size-rem--s);
653
+ --button--padding-icon-only: var(--size-px--s);
654
+ --button--padding-y: var(--size-px--s);
655
+ --button--padding-x: var(--size-px--m);
656
+ --action-group--spacing--s: var(--size-px--s);
657
+ --action-group--spacing--m: var(--size-px--m);
697
658
  --table--background-color-accent: var(--neutral--color--300);
698
659
  --table--background-color: var(--neutral--color--100);
699
660
  --table--footer-border-width: var(--border-width--200);
@@ -701,19 +662,19 @@
701
662
  --table--header-color: var(--primary--color--1000);
702
663
  --table--border-width: var(--border-width--100);
703
664
  --table--corner-radius: var(--corner-radius--default);
704
- --switch--handle-background-color: var(--neutral--color--100);
705
- --switch--handle-color--disabled: var(--neutral--color--600);
706
- --switch--track-background-color--disabled: var(--neutral--color--600);
707
- --slider--initial-marker-corner-radius: var(--corner-radius--default);
708
- --slider--thumb-background-color--default: var(--neutral--color--100);
709
- --slider--track-corner-radius: var(--corner-radius--default);
710
665
  --separator--height: var(--border-width--100);
711
666
  --separator--color: var(--neutral--color--700);
712
- --radio--icon-color--selected: var(--primary--color--800);
713
- --progress-bar--bar-border-width: var(--border-width--100);
714
- --popover--border-width: var(--border-width--100);
715
- --popover--background-color: var(--neutral--color--100);
716
- --popover--box-shadow: var(--shadow--overlay);
667
+ --list-item--background-color--pressed: var(--primary--color--200);
668
+ --list-item--background-color--hover: var(--primary--color--100);
669
+ --list-item--background-color--default: var(--neutral--color--200);
670
+ --list-item--border-width: var(--border-width--100);
671
+ --list-item--corner-radius: var(--corner-radius--default);
672
+ --layout-card--box-shadow: var(--shadow--content);
673
+ --layout-card--corner-radius: var(--corner-radius--default);
674
+ --layout-card--background-color: var(--neutral--color--100);
675
+ --accordion--header-corner-radius: var(--corner-radius--default);
676
+ --progress-bar--background-color: var(--neutral-outline-background-color--default);
677
+ --progress-bar--border-width: var(--border-width--100);
717
678
  --notification--success-background-color--default: var(--neutral--color--100);
718
679
  --notification--danger-background-color--default: var(--neutral--color--100);
719
680
  --notification--warning-background-color--default: var(--neutral--color--100);
@@ -721,170 +682,102 @@
721
682
  --notification--box-shadow: var(--shadow--overlay);
722
683
  --notification--border-x-start-width: var(--border-width--300);
723
684
  --notification--corner-radius: var(--corner-radius--default);
685
+ --counter-badge--border-color: var(--neutral--color--100);
686
+ --counter-badge--border-width: var(--border-width--200);
687
+ --badge--disabled-light-scope-content-color: var(--disabled-solid-light-content-color);
688
+ --badge--disabled-light-scope-background-color: var(--disabled-solid-light-background-color);
689
+ --badge--disabled-light-content-color: var(--disabled-soft-light-content-color);
690
+ --badge--disabled-light-background-color: var(--disabled-soft-light-background-color);
691
+ --badge--disabled-light-border-color: var(--disabled-outline-light-border-color);
692
+ --badge--disabled-dark-scope-content-color: var(--disabled-solid-dark-content-color);
693
+ --badge--disabled-dark-scope-background-color: var(--disabled-solid-dark-background-color);
694
+ --badge--disabled-dark-content-color: var(--disabled-soft-dark-content-color);
695
+ --badge--disabled-dark-background-color: var(--disabled-soft-dark-background-color);
696
+ --badge--disabled-dark-border-color: var(--disabled-outline-dark-border-color);
697
+ --badge--border-width: var(--border-width--100);
698
+ --alert--border-x-start-width: var(--border-width--400);
699
+ --alert--border-width: var(--border-width--100);
700
+ --alert--corner-radius: var(--corner-radius--default);
701
+ --tooltip--box-shadow: var(--shadow--overlay);
702
+ --tooltip--color: var(--neutral--color--100);
703
+ --tooltip--background-color: var(--neutral--color--900);
704
+ --popover--border-width: var(--border-width--100);
705
+ --popover--background-color: var(--neutral--color--100);
706
+ --popover--box-shadow: var(--shadow--overlay);
724
707
  --modal--off-canvas-header-background-color: var(--neutral--color--200);
725
708
  --modal--action-group-border-top-width: var(--border-width--100);
726
709
  --modal--action-group-border-color: var(--neutral--color--400);
727
710
  --modal--action-group-background-color: var(--neutral--color--300);
728
711
  --modal--background-color: var(--neutral--color--100);
729
712
  --modal--corner-radius: var(--corner-radius--default);
730
- --list-item--background-color--pressed: var(--primary--color--200);
731
- --list-item--background-color--hover: var(--primary--color--100);
732
- --list-item--background-color--default: var(--neutral--color--200);
733
- --list-item--border-width: var(--border-width--100);
734
- --list-item--corner-radius: var(--corner-radius--default);
735
- --link--color-light--disabled: var(--disabled-light-plain-content-color);
736
- --link--color-dark--disabled: var(--disabled-dark-plain-content-color);
713
+ --tab--disabled-color: var(--neutral--color--600);
714
+ --tab--background-color--selected: var(--neutral--color--100);
715
+ --tab-list--background-color: var(--neutral--color--400);
716
+ --link--color-light--disabled: var(--disabled-plain-light-content-color);
717
+ --link--color-dark--disabled: var(--disabled-plain-dark-content-color);
737
718
  --link--color--pressed: var(--primary--color--1000);
738
719
  --link--color--hover: var(--primary--color--900);
739
720
  --link--color--default: var(--primary--color--800);
740
721
  --link--line-height: var(--line-height--m);
741
- --layout-card--box-shadow: var(--shadow--content);
742
- --layout-card--corner-radius: var(--corner-radius--default);
743
- --layout-card--background-color: var(--neutral--color--100);
744
- --label--color--default: var(--neutral--color--800);
745
- --label--line-height: var(--line-height--m);
746
- --inline-code--dark-content-color: var(--dark-soft-content-color);
747
- --inline-code--dark-background-color: var(--dark-soft-background-color--default);
748
- --inline-code--light-content-color: var(--light-soft-content-color);
749
- --inline-code--light-background-color: var(--light-soft-background-color--default);
750
- --inline-code--corner-radius: var(--corner-radius--default);
751
- --inline-code--line-height: var(--line-height--m);
752
- --illustrated-message--negative-heading-color: var(--danger--color--1000);
753
- --illustrated-message--negative-icon-color: var(--danger--color--900);
754
- --illustrated-message--info-heading-color: var(--info--color--1000);
755
- --illustrated-message--info-icon-color: var(--info--color--900);
756
- --icon--color--dark: var(--dark-plain-content-color--default);
757
- --icon--color--light: var(--light-plain-content-color--default);
758
- --icon--color--default: var(--neutral--color--800);
759
- --heading--color-light: var(--light-plain-content-color--default);
760
- --heading--color-dark: var(--dark-plain-content-color--default);
761
- --heading--color: var(--primary--color--1000);
762
722
  --header-navigation--item-underline-width-current: var(--border-width--200);
763
723
  --header-navigation--item-corner-radius: var(--corner-radius--default);
764
724
  --header-navigation--item-background-color-light--pressed: var(--light-plain-background-color--pressed);
765
725
  --header-navigation--item-background-color-light--hover: var(--light-plain-background-color--hover);
766
726
  --header-navigation--item-background-color-dark--pressed: var(--dark-plain-background-color--pressed);
767
727
  --header-navigation--item-background-color-dark--hover: var(--dark-plain-background-color--hover);
768
- --header-navigation--item-color-light: var(--light-plain-content-color--default);
769
- --header-navigation--item-color-dark: var(--dark-plain-content-color--default);
770
- --field-error--color: var(--danger--color--700);
771
- --calendar--day-background-color--disabled: var(--disabled-plain-background-color);
772
- --calendar--heading-font-size: var(--font-size--default);
773
- --counter-badge--border-color: var(--neutral--color--100);
774
- --counter-badge--border-width: var(--border-width--200);
775
- --code-block--dark-content-color: var(--dark-soft-content-color);
776
- --code-block--dark-background-color: var(--dark-soft-background-color--default);
777
- --code-block--light-content-color: var(--light-soft-content-color);
778
- --code-block--light-background-color: var(--light-soft-background-color--default);
779
- --code-block--corner-radius: var(--corner-radius--default);
780
- --checkbox--icon-color--selected: var(--primary--color--800);
781
- --button--light-outline-border-color--disabled: var(--disabled-light-outline-border-color);
782
- --button--light-outline-border-color--default: var(--light-outline-border-color);
783
- --button--light-outline-content-color--disabled: var(--disabled-light-outline-content-color);
784
- --button--light-outline-content-color--pressed: var(--light-outline-content-color);
785
- --button--light-outline-content-color--hover: var(--light-outline-content-color);
786
- --button--light-outline-content-color--default: var(--light-outline-content-color);
787
- --button--light-outline-background-color--disabled: var(--disabled-light-outline-background-color);
788
- --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
789
- --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
790
- --button--light-outline-background-color--default: var(--light-outline-background-color--default);
791
- --button--light-soft-content-color--disabled: var(--disabled-light-soft-content-color);
792
- --button--light-soft-content-color--pressed: var(--light-soft-content-color);
793
- --button--light-soft-content-color--hover: var(--light-soft-content-color);
794
- --button--light-soft-content-color--default: var(--light-soft-content-color);
795
- --button--light-soft-background-color--disabled: var(--disabled-light-soft-background-color);
796
- --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
797
- --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
798
- --button--light-soft-background-color--default: var(--light-soft-background-color--default);
799
- --button--light-plain-content-color--disabled: var(--disabled-light-plain-content-color);
800
- --button--light-plain-content-color--pressed: var(--light-plain-content-color--default);
801
- --button--light-plain-content-color--hover: var(--light-plain-content-color--default);
802
- --button--light-plain-content-color--default: var(--light-plain-content-color--default);
803
- --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
804
- --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
805
- --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
806
- --button--light-plain-background-color--default: var(--light-plain-background-color--default);
807
- --button--light-solid-content-color--disabled: var(--disabled-light-solid-content-color);
808
- --button--light-solid-content-color--pressed: var(--light-solid-content-color);
809
- --button--light-solid-content-color--hover: var(--light-solid-content-color);
810
- --button--light-solid-content-color--default: var(--light-solid-content-color);
811
- --button--light-solid-background-color--disabled: var(--disabled-light-solid-background-color);
812
- --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
813
- --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
814
- --button--light-solid-background-color--default: var(--light-solid-background-color--default);
815
- --button--dark-outline-border-color--disabled: var(--disabled-dark-outline-border-color);
816
- --button--dark-outline-border-color--default: var(--dark-outline-border-color);
817
- --button--dark-outline-content-color--disabled: var(--disabled-dark-outline-content-color);
818
- --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
819
- --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
820
- --button--dark-outline-content-color--default: var(--dark-outline-content-color);
821
- --button--dark-outline-background-color--disabled: var(--disabled-dark-outline-background-color);
822
- --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
823
- --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
824
- --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
825
- --button--dark-soft-content-color--disabled: var(--disabled-dark-soft-content-color);
826
- --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
827
- --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
828
- --button--dark-soft-content-color--default: var(--dark-soft-content-color);
829
- --button--dark-soft-background-color--disabled: var(--disabled-dark-soft-background-color);
830
- --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
831
- --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
832
- --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
833
- --button--dark-plain-content-color--disabled: var(--disabled-dark-plain-content-color);
834
- --button--dark-plain-content-color--pressed: var(--dark-plain-content-color--default);
835
- --button--dark-plain-content-color--hover: var(--dark-plain-content-color--default);
836
- --button--dark-plain-content-color--default: var(--dark-plain-content-color--default);
837
- --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
838
- --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
839
- --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
840
- --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
841
- --button--dark-solid-content-color--disabled: var(--disabled-dark-solid-content-color);
842
- --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
843
- --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
844
- --button--dark-solid-content-color--default: var(--dark-solid-content-color);
845
- --button--dark-solid-background-color--disabled: var(--disabled-dark-solid-background-color);
846
- --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
847
- --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
848
- --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
849
- --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
850
- --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
851
- --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
852
- --button--secondary-outline-background-color--default: var(--neutral-outline-background-color--default);
853
- --button--secondary-plain-background-color--disabled: var(--disabled-plain-background-color);
854
- --button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);
855
- --button--primary-outline-background-color--default: var(--primary-outline-background-color--default);
856
- --button--primary-plain-background-color--disabled: var(--disabled-plain-background-color);
857
- --button--primary-plain-background-color--default: var(--primary-plain-background-color--default);
858
- --button--accent-outline-background-color--default: var(--success-outline-background-color--default);
859
- --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
860
- --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
861
- --button--border-width: var(--border-width--100);
862
- --button--failed-icon-color: var(--danger--color--700);
863
- --button--succeeded-icon-color: var(--success--color--700);
864
- --button--corner-radius: var(--corner-radius--default);
865
- --breadcrumb-item--color-dark: var(--dark-plain-content-color--default);
866
- --breadcrumb-item--color-light: var(--light-plain-content-color--default);
867
- --badge--disabled-light-scope-content-color: var(--disabled-light-solid-content-color);
868
- --badge--disabled-light-scope-background-color: var(--disabled-light-solid-background-color);
869
- --badge--disabled-light-content-color: var(--disabled-light-soft-content-color);
870
- --badge--disabled-light-background-color: var(--disabled-light-soft-background-color);
871
- --badge--disabled-light-border-color: var(--disabled-light-outline-border-color);
872
- --badge--disabled-dark-scope-content-color: var(--disabled-dark-solid-content-color);
873
- --badge--disabled-dark-scope-background-color: var(--disabled-dark-solid-background-color);
874
- --badge--disabled-dark-content-color: var(--disabled-dark-soft-content-color);
875
- --badge--disabled-dark-background-color: var(--disabled-dark-soft-background-color);
876
- --badge--disabled-dark-border-color: var(--disabled-dark-outline-border-color);
877
- --badge--border-width: var(--border-width--100);
878
- --alert--border-x-start-width: var(--border-width--400);
879
- --alert--border-width: var(--border-width--100);
880
- --alert--corner-radius: var(--corner-radius--default);
881
- --accordion--header-corner-radius: var(--corner-radius--default);
728
+ --header-navigation--item-color-light: var(--light-plain-content-color);
729
+ --header-navigation--item-color-dark: var(--dark-plain-content-color);
730
+ --breadcrumb-item--color-dark: var(--dark-plain-content-color);
731
+ --breadcrumb-item--color-light: var(--light-plain-content-color);
732
+ --switch--handle-background-color--disabled: var(--neutral--color--300);
733
+ --switch--handle-background-color--default: var(--neutral--color--100);
734
+ --switch--handle-color--disabled: var(--neutral--color--500);
735
+ --slider--initial-marker-corner-radius: var(--corner-radius--default);
736
+ --slider--thumb-background-color--default: var(--neutral--color--100);
737
+ --slider--track-corner-radius: var(--corner-radius--default);
738
+ --form-control--background-color--selected: var(--primary--color--200);
739
+ --form-control--background-color--invalid: var(--danger--color--100);
740
+ --form-control--background-color--focused: var(--neutral--color--300);
741
+ --form-control--background-color--hover: var(--primary--color--100);
742
+ --form-control--background-color--default: var(--neutral--color--300);
743
+ --form-control--placeholder-color--disabled: var(--neutral--color--500);
744
+ --form-control--placeholder-color--default: var(--neutral--color--900);
745
+ --form-control--border-width: var(--border-width--100);
746
+ --form-control--corner-radius: var(--corner-radius--default);
747
+ --field-error--color: var(--danger--color--800);
748
+ --calendar--cell-range-background-color: var(--primary--color--100);
749
+ --calendar--cell-background-color--pressed: var(--dark-plain-background-color--pressed);
750
+ --calendar--cell-background-color--hover: var(--dark-plain-background-color--hover);
751
+ --calendar--cell-background-color--disabled: var(--disabled-plain-background-color);
752
+ --calendar--heading-font-size: var(--font-size-text--default);
753
+ --choice--icon-color--selected: var(--primary--color--800);
754
+ --focus--outline-width: var(--border-width--200);
755
+ --focus--outline-color: var(--primary--color--800);
756
+ --text--color--dark: var(--dark-plain-content-color);
757
+ --text--color--light: var(--light-plain-content-color);
758
+ --text--color--default: var(--neutral--color--1000);
759
+ --label--color--default: var(--neutral--color--800);
760
+ --label--line-height: var(--line-height--m);
761
+ --illustrated-message--light-icon-color: var(--light-plain-content-color);
762
+ --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
763
+ --illustrated-message--danger-heading-color: var(--danger--color--1000);
764
+ --illustrated-message--danger-icon-color: var(--danger--color--900);
765
+ --illustrated-message--primary-icon-color: var(--primary--color--900);
766
+ --icon--color: var(--neutral--color--800);
767
+ --heading--color-light: var(--light-plain-content-color);
768
+ --heading--color-dark: var(--dark-plain-content-color);
769
+ --heading--color: var(--primary--color--1000);
770
+ --code--dark-content-color: var(--dark-soft-content-color);
771
+ --code--dark-background-color: var(--dark-soft-background-color--default);
772
+ --code--light-content-color: var(--light-soft-content-color);
773
+ --code--light-background-color: var(--light-soft-background-color--default);
774
+ --code--corner-radius: var(--corner-radius--default);
775
+ --code--line-height: var(--line-height--m);
882
776
  --disabled-soft-content-color: var(--neutral--color--500);
883
777
  --disabled-soft-background-color: var(--neutral--color--300);
884
778
  --disabled-outline-border-color: var(--neutral--color--400);
885
- --disabled-outline-content-color: var(--neutral--color--600);
779
+ --disabled-outline-content-color: var(--neutral--color--500);
886
780
  --disabled-outline-background-color: var(--neutral--color--300);
887
- --disabled-plain-content-accent-color: var(--neutral--color--600);
888
781
  --disabled-plain-content-color: var(--neutral--color--400);
889
782
  --disabled-solid-content-color: var(--neutral--color--600);
890
783
  --disabled-solid-background-color: var(--neutral--color--400);
@@ -895,7 +788,7 @@
895
788
  --neutral-soft-background-color--default: var(--neutral--color--400);
896
789
  --neutral-outline-border-color: var(--neutral--color--700);
897
790
  --neutral-outline-content-color: var(--neutral--color--1000);
898
- --neutral-outline-background-color--pressed: var(--neutral--color--600);
791
+ --neutral-outline-background-color--pressed: var(--neutral--color--500);
899
792
  --neutral-outline-background-color--selected: var(--neutral--color--500);
900
793
  --neutral-outline-background-color--hover: var(--neutral--color--400);
901
794
  --neutral-plain-content-color: var(--neutral--color--1000);
@@ -974,7 +867,6 @@
974
867
  --primary-outline-background-color--pressed: var(--primary--color--200);
975
868
  --primary-outline-background-color--hover: var(--primary--color--100);
976
869
  --primary-soft-content-color--pressed: var(--primary--color--1000);
977
- --primary-soft-content-color--hover: var(--primary--color--900);
978
870
  --primary-soft-content-color--default: var(--primary--color--900);
979
871
  --primary-soft-background-color--pressed: var(--primary--color--300);
980
872
  --primary-soft-background-color--hover: var(--primary--color--200);
@@ -986,51 +878,106 @@
986
878
  --primary-solid-background-color--pressed: var(--primary--color--1000);
987
879
  --primary-solid-background-color--hover: var(--primary--color--900);
988
880
  --primary-solid-background-color--default: var(--primary--color--800);
989
- --menu-item--disabled-color: var(--disabled-plain-content-color);
990
- --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
991
- --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
992
- --form-control--content-color--selected: var(--neutral-outline-content-color);
993
- --form-control--content-color--disabled: var(--disabled-outline-content-color);
994
- --form-control--content-color--default: var(--neutral-outline-content-color);
995
- --form-control--background-color--disabled: var(--disabled-outline-background-color);
996
- --form-control--border-color--selected: var(--neutral-outline-border-color);
997
- --form-control--border-color--focused: var(--focus--outline-color);
998
- --form-control--border-color--invalid: var(--danger-outline-border-color);
999
- --form-control--border-color--disabled: var(--disabled-outline-border-color);
1000
- --form-control--border-color--default: var(--neutral-outline-border-color);
1001
- --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1002
- --tab--disabled-background-color: var(--neutral-soft-background-color--default);
1003
- --tab--color--pressed: var(--neutral-soft-content-color--pressed);
1004
- --tab--color--hover: var(--neutral-soft-content-color--default);
1005
- --tab--color--default: var(--neutral-soft-content-color--default);
1006
- --tab--background-color--pressed: var(--neutral-soft-background-color--pressed);
1007
- --tab--background-color--hover: var(--neutral-soft-background-color--hover);
1008
- --tab--background-color--default: var(--neutral-soft-background-color--default);
881
+ --menu-item--disabled-background-color: var(--disabled-plain-background-color);
882
+ --menu-item--icon-color--current: var(--primary--color--800);
883
+ --menu-item--icon-color--default: var(--neutral--color--800);
884
+ --menu-item--color--current: var(--primary--color--800);
885
+ --menu-item--corner-radius: var(--corner-radius--default);
886
+ --button--light-outline-border-color--disabled: var(--disabled-outline-light-border-color);
887
+ --button--light-outline-border-color--default: var(--light-outline-border-color);
888
+ --button--light-outline-content-color--disabled: var(--disabled-outline-light-content-color);
889
+ --button--light-outline-content-color--pressed: var(--light-outline-content-color);
890
+ --button--light-outline-content-color--hover: var(--light-outline-content-color);
891
+ --button--light-outline-content-color--default: var(--light-outline-content-color);
892
+ --button--light-outline-background-color--disabled: var(--disabled-outline-light-background-color);
893
+ --button--light-outline-background-color--pressed: var(--light-outline-background-color--pressed);
894
+ --button--light-outline-background-color--hover: var(--light-outline-background-color--hover);
895
+ --button--light-outline-background-color--default: var(--light-outline-background-color--default);
896
+ --button--light-soft-content-color--disabled: var(--disabled-soft-light-content-color);
897
+ --button--light-soft-content-color--pressed: var(--light-soft-content-color);
898
+ --button--light-soft-content-color--hover: var(--light-soft-content-color);
899
+ --button--light-soft-content-color--default: var(--light-soft-content-color);
900
+ --button--light-soft-background-color--disabled: var(--disabled-soft-light-background-color);
901
+ --button--light-soft-background-color--pressed: var(--light-soft-background-color--pressed);
902
+ --button--light-soft-background-color--hover: var(--light-soft-background-color--hover);
903
+ --button--light-soft-background-color--default: var(--light-soft-background-color--default);
904
+ --button--light-plain-content-color--disabled: var(--disabled-plain-light-content-color);
905
+ --button--light-plain-content-color--pressed: var(--light-plain-content-color);
906
+ --button--light-plain-content-color--hover: var(--light-plain-content-color);
907
+ --button--light-plain-content-color--default: var(--light-plain-content-color);
908
+ --button--light-plain-background-color--disabled: var(--disabled-plain-background-color);
909
+ --button--light-plain-background-color--pressed: var(--light-plain-background-color--pressed);
910
+ --button--light-plain-background-color--hover: var(--light-plain-background-color--hover);
911
+ --button--light-plain-background-color--default: var(--light-plain-background-color--default);
912
+ --button--light-solid-content-color--disabled: var(--disabled-solid-light-content-color);
913
+ --button--light-solid-content-color--pressed: var(--light-solid-content-color);
914
+ --button--light-solid-content-color--hover: var(--light-solid-content-color);
915
+ --button--light-solid-content-color--default: var(--light-solid-content-color);
916
+ --button--light-solid-background-color--disabled: var(--disabled-solid-light-background-color);
917
+ --button--light-solid-background-color--pressed: var(--light-solid-background-color--pressed);
918
+ --button--light-solid-background-color--hover: var(--light-solid-background-color--hover);
919
+ --button--light-solid-background-color--default: var(--light-solid-background-color--default);
920
+ --button--dark-outline-border-color--disabled: var(--disabled-outline-dark-border-color);
921
+ --button--dark-outline-border-color--default: var(--dark-outline-border-color);
922
+ --button--dark-outline-content-color--disabled: var(--disabled-outline-dark-content-color);
923
+ --button--dark-outline-content-color--pressed: var(--dark-outline-content-color);
924
+ --button--dark-outline-content-color--hover: var(--dark-outline-content-color);
925
+ --button--dark-outline-content-color--default: var(--dark-outline-content-color);
926
+ --button--dark-outline-background-color--disabled: var(--disabled-outline-dark-background-color);
927
+ --button--dark-outline-background-color--pressed: var(--dark-outline-background-color--pressed);
928
+ --button--dark-outline-background-color--hover: var(--dark-outline-background-color--hover);
929
+ --button--dark-outline-background-color--default: var(--dark-outline-background-color--default);
930
+ --button--dark-soft-content-color--disabled: var(--disabled-soft-dark-content-color);
931
+ --button--dark-soft-content-color--pressed: var(--dark-soft-content-color);
932
+ --button--dark-soft-content-color--hover: var(--dark-soft-content-color);
933
+ --button--dark-soft-content-color--default: var(--dark-soft-content-color);
934
+ --button--dark-soft-background-color--disabled: var(--disabled-soft-dark-background-color);
935
+ --button--dark-soft-background-color--pressed: var(--dark-soft-background-color--pressed);
936
+ --button--dark-soft-background-color--hover: var(--dark-soft-background-color--hover);
937
+ --button--dark-soft-background-color--default: var(--dark-soft-background-color--default);
938
+ --button--dark-plain-content-color--disabled: var(--disabled-plain-dark-content-color);
939
+ --button--dark-plain-content-color--pressed: var(--dark-plain-content-color);
940
+ --button--dark-plain-content-color--hover: var(--dark-plain-content-color);
941
+ --button--dark-plain-content-color--default: var(--dark-plain-content-color);
942
+ --button--dark-plain-background-color--disabled: var(--disabled-plain-background-color);
943
+ --button--dark-plain-background-color--pressed: var(--dark-plain-background-color--pressed);
944
+ --button--dark-plain-background-color--hover: var(--dark-plain-background-color--hover);
945
+ --button--dark-plain-background-color--default: var(--dark-plain-background-color--default);
946
+ --button--dark-solid-content-color--disabled: var(--disabled-solid-dark-content-color);
947
+ --button--dark-solid-content-color--pressed: var(--dark-solid-content-color);
948
+ --button--dark-solid-content-color--hover: var(--dark-solid-content-color);
949
+ --button--dark-solid-content-color--default: var(--dark-solid-content-color);
950
+ --button--dark-solid-background-color--disabled: var(--disabled-solid-dark-background-color);
951
+ --button--dark-solid-background-color--pressed: var(--dark-solid-background-color--pressed);
952
+ --button--dark-solid-background-color--hover: var(--dark-solid-background-color--hover);
953
+ --button--dark-solid-background-color--default: var(--dark-solid-background-color--default);
954
+ --button--danger-outline-background-color--default: var(--danger-outline-background-color--default);
955
+ --button--danger-plain-background-color--disabled: var(--disabled-plain-background-color);
956
+ --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
957
+ --button--secondary-outline-background-color--default: var(--neutral-outline-background-color--default);
958
+ --button--secondary-plain-background-color--disabled: var(--disabled-plain-background-color);
959
+ --button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);
960
+ --button--primary-outline-background-color--default: var(--primary-outline-background-color--default);
961
+ --button--primary-plain-background-color--disabled: var(--disabled-plain-background-color);
962
+ --button--primary-plain-background-color--default: var(--primary-plain-background-color--default);
963
+ --button--accent-outline-background-color--default: var(--success-outline-background-color--default);
964
+ --button--accent-plain-background-color--disabled: var(--disabled-plain-background-color);
965
+ --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
966
+ --button--border-width: var(--border-width--100);
967
+ --button--failed-icon-color: var(--danger--color--800);
968
+ --button--succeeded-icon-color: var(--success--color--800);
969
+ --button--pending-icon-color: var(--neutral--color--1000);
970
+ --button--corner-radius: var(--corner-radius--default);
1009
971
  --table--border-color: var(--neutral-outline-border-color);
1010
- --switch--handle-color--default: var(--neutral-solid-content-color);
1011
- --switch--track-background-color--selected: var(--success-solid-background-color--default);
1012
- --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1013
- --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
1014
- --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
1015
- --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
1016
- --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
1017
- --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
1018
- --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
1019
- --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
1020
- --slider--track-background-color--disabled: var(--disabled-soft-background-color);
1021
- --slider--track-background-color--default: var(--primary-soft-background-color--default);
1022
- --slider--text-color--disabled: var(--disabled-plain-content-accent-color);
1023
972
  --section--border-color: var(--separator--color);
1024
973
  --section--border-width: var(--separator--height);
1025
- --radio--icon-color--disabled: var(--disabled-outline-content-color);
1026
- --radio--icon-color--default: var(--icon--color--default);
1027
- --radio--color--disabled: var(--disabled-outline-content-color);
974
+ --list-item--border-color: var(--neutral-outline-border-color);
975
+ --accordion--header-background-color--hover: var(--primary-plain-background-color--hover);
1028
976
  --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
1029
977
  --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
1030
978
  --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
1031
979
  --progress-bar--info-fill-background-color: var(--info-solid-background-color--default);
1032
- --progress-bar--bar-border-color: var(--neutral-outline-border-color);
1033
- --popover--border-color: var(--neutral-outline-border-color);
980
+ --progress-bar--border-color: var(--neutral-outline-border-color);
1034
981
  --notification--success-background-color--pressed: var(--success-outline-background-color--pressed);
1035
982
  --notification--success-background-color--hover: var(--success-outline-background-color--hover);
1036
983
  --notification--success-heading-color: var(--success-outline-content-color);
@@ -1047,29 +994,101 @@
1047
994
  --notification--info-background-color--hover: var(--info-outline-background-color--hover);
1048
995
  --notification--info-heading-color: var(--info-outline-content-color);
1049
996
  --notification--info-border-color: var(--info-outline-border-color);
1050
- --list-item--border-color: var(--neutral-outline-border-color);
997
+ --counter-badge--color: var(--success-solid-content-color);
998
+ --counter-badge--background-color: var(--success-solid-background-color--default);
999
+ --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1000
+ --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1001
+ --badge--disabled-content-color: var(--disabled-soft-content-color);
1002
+ --badge--disabled-background-color: var(--disabled-soft-background-color);
1003
+ --badge--disabled-border-color: var(--disabled-outline-border-color);
1004
+ --badge--light-scope-content-color: var(--text--color--dark);
1005
+ --badge--dark-scope-content-color: var(--text--color--light);
1006
+ --badge--orange-scope-content-color: var(--text--color--light);
1007
+ --badge--green-scope-content-color: var(--text--color--light);
1008
+ --badge--red-scope-content-color: var(--text--color--light);
1009
+ --badge--lilac-scope-content-color: var(--text--color--light);
1010
+ --badge--teal-scope-content-color: var(--text--color--light);
1011
+ --badge--violet-scope-content-color: var(--text--color--light);
1012
+ --badge--navy-scope-content-color: var(--text--color--light);
1013
+ --badge--blue-scope-content-color: var(--text--color--light);
1014
+ --badge--neutral-scope-content-color: var(--text--color--light);
1015
+ --alert--success-heading-color: var(--success-outline-content-color);
1016
+ --alert--success-border-color: var(--success-outline-border-color);
1017
+ --alert--danger-heading-color: var(--danger-outline-content-color);
1018
+ --alert--danger-border-color: var(--danger-outline-border-color);
1019
+ --alert--warning-heading-color: var(--warning-outline-content-color);
1020
+ --alert--warning-border-color: var(--warning-outline-border-color);
1021
+ --alert--info-heading-color: var(--info-outline-content-color);
1022
+ --alert--info-border-color: var(--info-outline-border-color);
1023
+ --alert-icon--success-color: var(--success-outline-content-color);
1024
+ --alert-icon--danger-color: var(--danger-outline-content-color);
1025
+ --alert-icon--warning-color: var(--warning-outline-content-color);
1026
+ --alert-icon--info-color: var(--info-outline-content-color);
1027
+ --alert-badge--danger-border-color: var(--danger-outline-border-color);
1028
+ --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1029
+ --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1030
+ --alert-badge--warning-border-color: var(--warning-outline-border-color);
1031
+ --alert-badge--warning-content-color: var(--warning-soft-content-color--default);
1032
+ --alert-badge--warning-background-color: var(--warning-soft-background-color--default);
1033
+ --alert-badge--success-border-color: var(--success-outline-border-color);
1034
+ --alert-badge--success-content-color: var(--success-soft-content-color--default);
1035
+ --alert-badge--success-background-color: var(--success-soft-background-color--default);
1036
+ --alert-badge--info-border-color: var(--info-outline-border-color);
1037
+ --alert-badge--info-content-color: var(--info-soft-content-color--default);
1038
+ --alert-badge--info-background-color: var(--info-soft-background-color--default);
1039
+ --popover--border-color: var(--neutral-outline-border-color);
1040
+ --tab--disabled-background-color: var(--neutral-soft-background-color--default);
1041
+ --tab--color--pressed: var(--neutral-soft-content-color--pressed);
1042
+ --tab--color--hover: var(--neutral-soft-content-color--default);
1043
+ --tab--color--default: var(--neutral-soft-content-color--default);
1044
+ --tab--background-color--pressed: var(--neutral-soft-background-color--pressed);
1045
+ --tab--background-color--hover: var(--neutral-soft-background-color--hover);
1046
+ --tab--background-color--default: var(--neutral-soft-background-color--default);
1051
1047
  --link--color--disabled: var(--disabled-plain-content-color);
1052
- --label--color--disabled: var(--disabled-plain-content-accent-color);
1053
- --inline-code--neutral-content-color: var(--neutral-soft-content-color--default);
1054
- --inline-code--neutral-background-color: var(--neutral-soft-background-color--default);
1055
1048
  --header-navigation--item-background-color--pressed: var(--primary-plain-background-color--pressed);
1056
1049
  --header-navigation--item-background-color--hover: var(--primary-plain-background-color--hover);
1057
1050
  --header-navigation--item-color: var(--heading--color);
1058
- --field-description--color: var(--content--color--default);
1059
- --calendar--day-range-background-color: var(--primary-plain-background-color--hover);
1060
- --calendar--day-content-color--selected: var(--primary-solid-content-color);
1061
- --calendar--day-content-color--disabled: var(--disabled-plain-content-color);
1062
- --calendar--day-background-color--selected: var(--primary-solid-background-color--default);
1063
- --calendar--day-background-color--pressed: var(--neutral-plain-background-color--pressed);
1064
- --calendar--day-background-color--hover: var(--neutral-plain-background-color--hover);
1051
+ --breadcrumb-item--color: var(--heading--color);
1052
+ --time-field--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1053
+ --switch--handle-color--default: var(--neutral-solid-content-color);
1054
+ --switch--track-background-color--selected: var(--success-solid-background-color--default);
1055
+ --switch--track-background-color--disabled: var(--disabled-solid-background-color);
1056
+ --switch--track-background-color--default: var(--neutral-solid-background-color--default);
1057
+ --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
1058
+ --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
1059
+ --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
1060
+ --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
1061
+ --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
1062
+ --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
1063
+ --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
1064
+ --slider--track-background-color--disabled: var(--disabled-soft-background-color);
1065
+ --slider--track-background-color--default: var(--primary-soft-background-color--default);
1066
+ --slider--text-color--disabled: var(--disabled-plain-content-color);
1067
+ --form-control--content-color--selected: var(--neutral-outline-content-color);
1068
+ --form-control--content-color--disabled: var(--disabled-outline-content-color);
1069
+ --form-control--content-color--default: var(--neutral-outline-content-color);
1070
+ --form-control--background-color--disabled: var(--disabled-outline-background-color);
1071
+ --form-control--border-color--selected: var(--neutral-outline-border-color);
1072
+ --form-control--border-color--focused: var(--focus--outline-color);
1073
+ --form-control--border-color--invalid: var(--danger-outline-border-color);
1074
+ --form-control--border-color--disabled: var(--disabled-outline-border-color);
1075
+ --form-control--border-color--default: var(--neutral-outline-border-color);
1076
+ --calendar--cell-content-color--selected: var(--primary-solid-content-color);
1077
+ --calendar--cell-content-color--disabled: var(--disabled-plain-content-color);
1078
+ --calendar--cell-background-color--selected: var(--primary-solid-background-color--default);
1065
1079
  --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
1066
- --counter-badge--color: var(--success-solid-content-color);
1067
- --counter-badge--background-color: var(--success-solid-background-color--default);
1068
- --code-block--default-content-color: var(--neutral-soft-content-color--default);
1069
- --code-block--default-background-color: var(--neutral-soft-background-color--default);
1070
- --checkbox--icon-color--disabled: var(--disabled-outline-content-color);
1071
- --checkbox--icon-color--default: var(--icon--color--default);
1072
- --checkbox--color--disabled: var(--disabled-outline-content-color);
1080
+ --choice--icon-color--disabled: var(--disabled-outline-content-color);
1081
+ --choice--icon-color--default: var(--icon--color);
1082
+ --text--color--disabled: var(--disabled-plain-content-color);
1083
+ --label--color--disabled: var(--disabled-plain-content-color);
1084
+ --illustrated-message--light-heading-color: var(--heading--color-light);
1085
+ --illustrated-message--dark-heading-color: var(--heading--color-dark);
1086
+ --illustrated-message--primary-heading-color: var(--heading--color);
1087
+ --code--default-content-color: var(--neutral-soft-content-color--default);
1088
+ --code--default-background-color: var(--neutral-soft-background-color--default);
1089
+ --menu-item--disabled-color: var(--disabled-plain-content-color);
1090
+ --menu-item--background-color--current: var(--primary-plain-background-color--pressed);
1091
+ --menu-item--background-color--hover: var(--primary-plain-background-color--hover);
1073
1092
  --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);
1074
1093
  --button--danger-outline-border-color--default: var(--danger-outline-border-color);
1075
1094
  --button--danger-outline-content-color--disabled: var(--disabled-outline-content-color);
@@ -1143,7 +1162,7 @@
1143
1162
  --button--primary-outline-background-color--hover: var(--primary-outline-background-color--hover);
1144
1163
  --button--primary-soft-content-color--disabled: var(--disabled-soft-content-color);
1145
1164
  --button--primary-soft-content-color--pressed: var(--primary-soft-content-color--pressed);
1146
- --button--primary-soft-content-color--hover: var(--primary-soft-content-color--hover);
1165
+ --button--primary-soft-content-color--hover: var(--primary-soft-content-color--default);
1147
1166
  --button--primary-soft-content-color--default: var(--primary-soft-content-color--default);
1148
1167
  --button--primary-soft-background-color--disabled: var(--disabled-soft-background-color);
1149
1168
  --button--primary-soft-background-color--pressed: var(--primary-soft-background-color--pressed);
@@ -1194,47 +1213,4 @@
1194
1213
  --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
1195
1214
  --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
1196
1215
  --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
1197
- --button--pending-icon-color: var(--disabled-plain-content-accent-color);
1198
- --breadcrumb-item--color: var(--heading--color);
1199
- --badge--disabled-scope-content-color: var(--disabled-solid-content-color);
1200
- --badge--disabled-scope-background-color: var(--disabled-solid-background-color);
1201
- --badge--disabled-content-color: var(--disabled-soft-content-color);
1202
- --badge--disabled-background-color: var(--disabled-soft-background-color);
1203
- --badge--disabled-border-color: var(--disabled-outline-border-color);
1204
- --badge--light-scope-content-color: var(--content--color--dark);
1205
- --badge--dark-scope-content-color: var(--content--color--light);
1206
- --badge--orange-scope-content-color: var(--content--color--light);
1207
- --badge--green-scope-content-color: var(--content--color--light);
1208
- --badge--red-scope-content-color: var(--content--color--light);
1209
- --badge--lilac-scope-content-color: var(--content--color--light);
1210
- --badge--teal-scope-content-color: var(--content--color--light);
1211
- --badge--violet-scope-content-color: var(--content--color--light);
1212
- --badge--navy-scope-content-color: var(--content--color--light);
1213
- --badge--blue-scope-content-color: var(--content--color--light);
1214
- --badge--neutral-scope-content-color: var(--content--color--light);
1215
- --alert--success-heading-color: var(--success-outline-content-color);
1216
- --alert--success-border-color: var(--success-outline-border-color);
1217
- --alert--danger-heading-color: var(--danger-outline-content-color);
1218
- --alert--danger-border-color: var(--danger-outline-border-color);
1219
- --alert--warning-heading-color: var(--warning-outline-content-color);
1220
- --alert--warning-border-color: var(--warning-outline-border-color);
1221
- --alert--info-heading-color: var(--info-outline-content-color);
1222
- --alert--info-border-color: var(--info-outline-border-color);
1223
- --alert-icon--success-color: var(--success-outline-content-color);
1224
- --alert-icon--danger-color: var(--danger-outline-content-color);
1225
- --alert-icon--warning-color: var(--warning-outline-content-color);
1226
- --alert-icon--info-color: var(--info-outline-content-color);
1227
- --alert-badge--danger-outline-color: var(--danger-outline-border-color);
1228
- --alert-badge--danger-content-color: var(--danger-soft-content-color--default);
1229
- --alert-badge--danger-background-color: var(--danger-soft-background-color--default);
1230
- --alert-badge--warning-outline-color: var(--warning-outline-border-color);
1231
- --alert-badge--warning-content-color: var(--warning-soft-content-color--default);
1232
- --alert-badge--warning-background-color: var(--warning-soft-background-color--default);
1233
- --alert-badge--success-outline-color: var(--success-outline-border-color);
1234
- --alert-badge--success-content-color: var(--success-soft-content-color--default);
1235
- --alert-badge--success-background-color: var(--success-soft-background-color--default);
1236
- --alert-badge--info-border-color: var(--info-outline-border-color);
1237
- --alert-badge--info-content-color: var(--info-soft-content-color--default);
1238
- --alert-badge--info-background-color: var(--info-soft-background-color--default);
1239
- --accordion--header-background-color--hover: var(--primary-plain-background-color--hover);
1240
1216
  }