@mittwald/flow-design-tokens 0.1.0-alpha.69 → 0.1.0-alpha.72

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 (2) hide show
  1. package/package.json +3 -3
  2. package/dist/variables.css +0 -654
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-design-tokens",
3
- "version": "0.1.0-alpha.69",
3
+ "version": "0.1.0-alpha.72",
4
4
  "type": "module",
5
5
  "description": "The design tokens used in Flow, mittwald’s design system",
6
6
  "homepage": "https://mittwald.github.io/flow",
@@ -17,8 +17,8 @@
17
17
  "devDependencies": {
18
18
  "@types/js-yaml": "^4.0.9",
19
19
  "js-yaml": "^4.1.0",
20
- "nx": "^18.2.4",
20
+ "nx": "^18.3.1",
21
21
  "style-dictionary": "^3.9.2"
22
22
  },
23
- "gitHead": "9b454d22808a3f87b88c11ecfa530d0ae18d7276"
23
+ "gitHead": "a14bd1b7c1fa1617e385e986830f6d397df913dc"
24
24
  }
@@ -1,654 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Tue, 16 Apr 2024 07:33:03 GMT
4
- */
5
-
6
- :root {
7
- --transition--duration--slow: 300ms;
8
- --transition--duration--default: 200ms;
9
- --size--none: 0rem;
10
- --size-px--xxl: 64px;
11
- --size-px--xl: 32px;
12
- --size-px--l: 24px;
13
- --size-px--m: 16px;
14
- --size-px--s: 8px;
15
- --size-px--xs: 4px;
16
- --size-px--xxs: 2px;
17
- --size-px--xxxs: 1px;
18
- --size-rem--xxl: 4rem;
19
- --size-rem--xl: 2rem;
20
- --size-rem--l: 1.5rem;
21
- --size-rem--m: 1rem;
22
- --size-rem--s: 0.5rem;
23
- --size-rem--xs: 0.25rem;
24
- --size-rem--xxs: 0.125rem;
25
- --size-rem--xxxs: 0.0625rem;
26
- --menu-item--icon-to-text-spacing: 0.5em;
27
- --font-size--xxxl: 2rem;
28
- --font-size--xxl: 1.5rem;
29
- --font-size--xl: 1.25rem;
30
- --font-size--l: 1.125rem;
31
- --font-size--m: 1rem;
32
- --font-size--s: 0.875rem;
33
- --line-height--default: 1.5;
34
- --font-weight--bold: 600;
35
- --font-weight--normal: 300;
36
- --color--transparent: rgba(0, 0, 0, 0);
37
- --color--soft-contrast-violet--1100: #4743a5;
38
- --color--soft-contrast-violet--1000: #534fb8;
39
- --color--soft-contrast-violet--900: #5c50ca;
40
- --color--soft-contrast-violet--800: #715dee;
41
- --color--soft-contrast-violet--700: #8574f0;
42
- --color--soft-contrast-violet--600: #998bf3;
43
- --color--soft-contrast-violet--500: #aea2f5;
44
- --color--soft-contrast-violet--400: #c2b9f8;
45
- --color--soft-contrast-violet--300: #d6d0fa;
46
- --color--soft-contrast-violet--200: #eae7fd;
47
- --color--soft-contrast-violet--100: #f4f3fe;
48
- --color--royal-orange--1100: #763200;
49
- --color--royal-orange--1000: #8f3d00;
50
- --color--royal-orange--900: #c25200;
51
- --color--royal-orange--800: #f56800;
52
- --color--royal-orange--700: #ff8225;
53
- --color--royal-orange--600: #ff9343;
54
- --color--royal-orange--500: #ffa562;
55
- --color--royal-orange--400: #ffc89f;
56
- --color--royal-orange--300: #ffd9bd;
57
- --color--royal-orange--200: #ffebdc;
58
- --color--royal-orange--100: #fff4eb;
59
- --color--amaranth-red--1100: #6a0f22;
60
- --color--amaranth-red--1000: #83122a;
61
- --color--amaranth-red--900: #b4193a;
62
- --color--amaranth-red--800: #e1244c;
63
- --color--amaranth-red--700: #e54366;
64
- --color--amaranth-red--600: #ea637f;
65
- --color--amaranth-red--500: #ee8299;
66
- --color--amaranth-red--400: #f2a2b3;
67
- --color--amaranth-red--300: #f7c1cc;
68
- --color--amaranth-red--200: #fbe0e6;
69
- --color--amaranth-red--100: #fdf0f3;
70
- --color--espelkamp-green--1100: #00291c;
71
- --color--espelkamp-green--1000: #003b29;
72
- --color--espelkamp-green--900: #005f42;
73
- --color--espelkamp-green--800: #00825b;
74
- --color--espelkamp-green--700: #00a673;
75
- --color--espelkamp-green--600: #00de9a;
76
- --color--espelkamp-green--500: #17ffb8;
77
- --color--espelkamp-green--400: #4fffc9;
78
- --color--espelkamp-green--300: #87ffda;
79
- --color--espelkamp-green--200: #c0ffeb;
80
- --color--espelkamp-green--100: #dcfff4;
81
- --color--hosting-blue--1100: #00205c;
82
- --color--hosting-blue--1000: #002a7b;
83
- --color--hosting-blue--900: #003fb8;
84
- --color--hosting-blue--800: #0054f5;
85
- --color--hosting-blue--700: #1a68ff;
86
- --color--hosting-blue--600: #3d80ff;
87
- --color--hosting-blue--500: #6197ff;
88
- --color--hosting-blue--400: #85afff;
89
- --color--hosting-blue--300: #abc6ff;
90
- --color--hosting-blue--200: #e0ebff;
91
- --color--hosting-blue--100: #f0f5ff;
92
- --color--gray--1100: #000000;
93
- --color--gray--1000: #222222;
94
- --color--gray--900: #464646;
95
- --color--gray--800: #6d6d6d;
96
- --color--gray--700: #909090;
97
- --color--gray--600: #b1b1b1;
98
- --color--gray--500: #d5d5d5;
99
- --color--gray--400: #e6e6e6;
100
- --color--gray--300: #f8f8f8;
101
- --color--gray--200: #fdfdfd;
102
- --color--gray--100: #ffffff;
103
- --border-style--default: solid;
104
- --corner-radius--round: 50%;
105
- --tooltip--max-width: 300px;
106
- --switch--handle-size: 1.25rem;
107
- --switch--track-corner-radius: 0.75rem;
108
- --switch--track-width: 2.75rem;
109
- --switch--track-height: 1.5rem;
110
- --progress-bar--bar-height-small: 0.375rem;
111
- --popover--min-width: 200px;
112
- --modal--size--l: 1050px;
113
- --modal--size--m: 900px;
114
- --modal--size--s: 660px;
115
- --modal--overlay-background-color: rgba(0, 0, 0, 0.3);
116
- --loading-spinner--transition-duration: 2000ms;
117
- --illustrated-message--max-width: 400px;
118
- --icon--size--l: 4rem;
119
- --icon--size--m: 1.5rem;
120
- --icon--size--s: 1rem;
121
- --avatar--size--m: 2.5rem;
122
- --menu-item--background-color--default: var(--color--transparent);
123
- --menu-item--padding-y: var(--size-px--xs);
124
- --menu-item--padding-x: var(--size-px--s);
125
- --menu-item--font-weight--current: var(--font-weight--bold);
126
- --menu--label-to-group-spacing: var(--size-px--s);
127
- --menu--group-to-group-spacing: var(--size-px--m);
128
- --menu--item-to-item-spacing: var(--size-px--s);
129
- --form-control--border-style: var(--border-style--default);
130
- --form-control--padding-y: var(--size-px--s);
131
- --form-control--padding-x: var(--size-px--m);
132
- --form-control--control-to-info-spacing: var(--size-rem--xs);
133
- --form-control--label-to-control-spacing: var(--size-rem--xs);
134
- --font-size--default: var(--font-size--m);
135
- --line-height--m: calc(var(--font-size--m) * 1.5);
136
- --focus--outline-offset: var(--size-px--xxs);
137
- --disabled-plain-background-color: var(--color--transparent);
138
- --neutral-plain-background-color--default: var(--color--transparent);
139
- --warning-outline-background-color--default: var(--color--transparent);
140
- --success-outline-background-color--default: var(--color--transparent);
141
- --success-plain-background-color--default: var(--color--transparent);
142
- --info-outline-background-color--default: var(--color--transparent);
143
- --danger-outline-background-color--default: var(--color--transparent);
144
- --danger-plain-background-color--default: var(--color--transparent);
145
- --primary-plain-background-color--default: var(--color--transparent);
146
- --warning--color--1100: var(--color--royal-orange--1100);
147
- --warning--color--1000: var(--color--royal-orange--1000);
148
- --warning--color--900: var(--color--royal-orange--900);
149
- --warning--color--800: var(--color--royal-orange--800);
150
- --warning--color--700: var(--color--royal-orange--700);
151
- --warning--color--600: var(--color--royal-orange--600);
152
- --warning--color--500: var(--color--royal-orange--500);
153
- --warning--color--400: var(--color--royal-orange--400);
154
- --warning--color--300: var(--color--royal-orange--300);
155
- --warning--color--200: var(--color--royal-orange--200);
156
- --warning--color--100: var(--color--royal-orange--100);
157
- --danger--color--1100: var(--color--amaranth-red--1100);
158
- --danger--color--1000: var(--color--amaranth-red--1000);
159
- --danger--color--900: var(--color--amaranth-red--900);
160
- --danger--color--800: var(--color--amaranth-red--800);
161
- --danger--color--700: var(--color--amaranth-red--700);
162
- --danger--color--600: var(--color--amaranth-red--600);
163
- --danger--color--500: var(--color--amaranth-red--500);
164
- --danger--color--400: var(--color--amaranth-red--400);
165
- --danger--color--300: var(--color--amaranth-red--300);
166
- --danger--color--200: var(--color--amaranth-red--200);
167
- --danger--color--100: var(--color--amaranth-red--100);
168
- --neutral--color--1100: var(--color--gray--1100);
169
- --neutral--color--1000: var(--color--gray--1000);
170
- --neutral--color--900: var(--color--gray--900);
171
- --neutral--color--800: var(--color--gray--800);
172
- --neutral--color--700: var(--color--gray--700);
173
- --neutral--color--600: var(--color--gray--600);
174
- --neutral--color--500: var(--color--gray--500);
175
- --neutral--color--400: var(--color--gray--400);
176
- --neutral--color--300: var(--color--gray--300);
177
- --neutral--color--200: var(--color--gray--200);
178
- --neutral--color--100: var(--color--gray--100);
179
- --success--color--1100: var(--color--espelkamp-green--1100);
180
- --success--color--1000: var(--color--espelkamp-green--1000);
181
- --success--color--900: var(--color--espelkamp-green--900);
182
- --success--color--800: var(--color--espelkamp-green--800);
183
- --success--color--700: var(--color--espelkamp-green--700);
184
- --success--color--600: var(--color--espelkamp-green--600);
185
- --success--color--500: var(--color--espelkamp-green--500);
186
- --success--color--400: var(--color--espelkamp-green--400);
187
- --success--color--300: var(--color--espelkamp-green--300);
188
- --success--color--200: var(--color--espelkamp-green--200);
189
- --success--color--100: var(--color--espelkamp-green--100);
190
- --info--color--1100: var(--color--hosting-blue--1100);
191
- --info--color--1000: var(--color--hosting-blue--1000);
192
- --info--color--900: var(--color--hosting-blue--900);
193
- --info--color--800: var(--color--hosting-blue--800);
194
- --info--color--700: var(--color--hosting-blue--700);
195
- --info--color--600: var(--color--hosting-blue--600);
196
- --info--color--500: var(--color--hosting-blue--500);
197
- --info--color--400: var(--color--hosting-blue--400);
198
- --info--color--300: var(--color--hosting-blue--300);
199
- --info--color--200: var(--color--hosting-blue--200);
200
- --info--color--100: var(--color--hosting-blue--100);
201
- --primary--color--1100: var(--color--hosting-blue--1100);
202
- --primary--color--1000: var(--color--hosting-blue--1000);
203
- --primary--color--900: var(--color--hosting-blue--900);
204
- --primary--color--800: var(--color--hosting-blue--800);
205
- --primary--color--700: var(--color--hosting-blue--700);
206
- --primary--color--600: var(--color--hosting-blue--600);
207
- --primary--color--500: var(--color--hosting-blue--500);
208
- --primary--color--400: var(--color--hosting-blue--400);
209
- --primary--color--300: var(--color--hosting-blue--300);
210
- --primary--color--200: var(--color--hosting-blue--200);
211
- --primary--color--100: var(--color--hosting-blue--100);
212
- --shadow--overlay: rgba(0, 0, 0, 0.14) 0 var(--size-px--m) var(--size-px--l);
213
- --shadow--content: rgba(0, 0, 0, 0.1) 0 var(--size-px--xs) var(--size-px--s);
214
- --border-width--400: var(--size-px--s);
215
- --border-width--300: var(--size-px--xs);
216
- --border-width--200: var(--size-px--xxs);
217
- --border-width--100: var(--size-px--xxxs);
218
- --corner-radius--default: var(--size-px--xs);
219
- --tooltip--arrow-size: var(--size-px--s);
220
- --tooltip--tooltip-to-content-spacing: var(--size-px--s);
221
- --tooltip--font-size: var(--font-size--s);
222
- --tooltip--padding-y: var(--size-px--xs);
223
- --tooltip--padding-x: var(--size-px--s);
224
- --tab-panel--padding: var(--size-px--xl);
225
- --tab--font-weight--selected: var(--font-weight--bold);
226
- --tab--padding-x: var(--size-px--l);
227
- --tab--padding-y: var(--size-px--m);
228
- --switch--track-padding: var(--size-rem--xxs);
229
- --switch--label-to-track-spacing: var(--size-rem--s);
230
- --status-badge--icon-to-text-spacing: var(--size-rem--xs);
231
- --status-badge--padding-x: var(--size-rem--s);
232
- --status-badge--padding-y: var(--size-rem--xxs);
233
- --status-badge--font-weight: var(--font-weight--bold);
234
- --status-badge--font-size: var(--font-size--s);
235
- --segmented-button--text-to-text-spacing: var(--size-rem--xs);
236
- --section--heading-to-header-content-spacing: var(--size-rem--m);
237
- --section--content-to-content-spacing: var(--size-rem--m);
238
- --section--section-to-section-spacing: var(--size-rem--xl);
239
- --section--border-style: var(--border-style--default);
240
- --radio-button--label-font-weight-with-content: var(--font-weight--bold);
241
- --radio-button--icon-to-text-spacing: var(--size-rem--m);
242
- --radio-button--text-to-text-spacing: var(--size-rem--xs);
243
- --radio--icon-to-text-spacing: var(--size-rem--s);
244
- --radio-group--radio-to-radio-spacing: var(--size-rem--s);
245
- --progress-bar--bar-border-radius: var(--size-rem--xs);
246
- --progress-bar--bar-height: var(--size-rem--s);
247
- --progress-bar--label-to-value-spacing: var(--size-rem--m);
248
- --progress-bar--label-to-bar-spacing: var(--size-rem--xs);
249
- --progress-bar--value-font-weight: var(--font-weight--bold);
250
- --progress-bar--font-size-small: var(--font-size--s);
251
- --progress-bar--font-size: var(--font-size--m);
252
- --popover--padding: var(--size-px--m);
253
- --popover--border-radius: var(--size-px--xs);
254
- --modal--button-group-border-style: var(--border-style--default);
255
- --modal--button-group-padding: var(--size-rem--l);
256
- --modal--padding-bottom: var(--size-px--xl);
257
- --modal--padding: var(--size-px--l);
258
- --list-item--subtitle-font-size: var(--font-size--s);
259
- --list-item--content-to-content-spacing: var(--size-px--m);
260
- --list-item--border-style: var(--border-style--default);
261
- --list-item--padding: var(--size-px--s);
262
- --list--block-to-block-spacing: var(--size-px--m);
263
- --list--content-to-content-spacing: var(--size-px--s);
264
- --link--text-to-icon-spacing: var(--size-rem--xs);
265
- --link--font-weight: var(--font-weight--bold);
266
- --link--font-size: var(--font-size--s);
267
- --layout-card--padding: var(--size-px--xl);
268
- --labeled-value--value-to-button-spacing: var(--size-rem--xs);
269
- --labeled-value--label-to-value-spacing: var(--size-rem--xs);
270
- --label--font-weight: var(--font-weight--bold);
271
- --label--font-size: var(--font-size--s);
272
- --inline-code--padding-x: var(--size-px--xs);
273
- --inline-code--font-size: var(--font-size--s);
274
- --inline-alert--heading-font-size: var(--font-size--m);
275
- --inline-alert--content-to-content-spacing: var(--size-rem--s);
276
- --inline-alert--icon-to-heading-spacing: var(--size-rem--s);
277
- --inline-alert--heading-to-content-spacing: var(--size-rem--xs);
278
- --inline-alert--border-style: var(--border-style--default);
279
- --inline-alert--padding: var(--size-px--m);
280
- --initials--variant-4-content-accent-color: var(--color--soft-contrast-violet--1000);
281
- --initials--variant-4-content-color: var(--color--soft-contrast-violet--800);
282
- --initials--variant-4-background-color: var(--color--soft-contrast-violet--200);
283
- --initials--variant-3-content-accent-color: var(--color--royal-orange--1000);
284
- --initials--variant-3-content-color: var(--color--royal-orange--800);
285
- --initials--variant-3-background-color: var(--color--royal-orange--200);
286
- --initials--variant-2-content-accent-color: var(--color--espelkamp-green--1000);
287
- --initials--variant-2-content-color: var(--color--espelkamp-green--800);
288
- --initials--variant-2-background-color: var(--color--espelkamp-green--200);
289
- --initials--variant-1-content-accent-color: var(--color--hosting-blue--1000);
290
- --initials--variant-1-content-color: var(--color--hosting-blue--800);
291
- --initials--variant-1-background-color: var(--color--hosting-blue--200);
292
- --initials--font-weight: var(--font-weight--bold);
293
- --illustrated-message--text-to-button-spacing: var(--size-rem--m);
294
- --illustrated-message--heading-to-text-spacing: var(--size-rem--s);
295
- --illustrated-message--icon-to-heading-spacing: var(--size-rem--m);
296
- --illustrated-message--padding-mobile: var(--size-px--l);
297
- --illustrated-message--padding: var(--size-px--xxl);
298
- --heading--h6-font-size: var(--font-size--m);
299
- --heading--h5-font-size: var(--font-size--m);
300
- --heading--h4-font-size: var(--font-size--l);
301
- --heading--h3-font-size: var(--font-size--xl);
302
- --heading--h2-font-size: var(--font-size--xxl);
303
- --heading--h1-font-size-mobile: var(--font-size--xxl);
304
- --heading--h1-font-size: var(--font-size--xxxl);
305
- --heading--font-weight: var(--font-weight--bold);
306
- --heading--icon-to-text-spacing: var(--size-rem--s);
307
- --header-navigation--item-font-weight-current: var(--font-weight--bold);
308
- --header-navigation--item-padding: var(--size-px--s);
309
- --header-navigation--item-to-item-spacing: var(--size-rem--m);
310
- --field-error--icon-to-text-spacing: var(--size-rem--s);
311
- --field-error--font-size: var(--font-size--s);
312
- --field-description--font-size: var(--font-size--s);
313
- --column-layout--content-to-content-spacing: var(--size-rem--m);
314
- --checkbox--icon-to-text-spacing: var(--size-rem--s);
315
- --checkbox-group--checkbox-to-checkbox-spacing: var(--size-rem--s);
316
- --checkbox-button--label-font-weight-with-content: var(--font-weight--bold);
317
- --checkbox-button--icon-to-text-spacing: var(--size-rem--m);
318
- --checkbox-button--text-to-text-spacing: var(--size-rem--xs);
319
- --button--font-size-s: var(--font-size--s);
320
- --button--text-to-icon-spacing-s: var(--size-rem--xs);
321
- --button--padding-s-squished-y: var(--size-px--xs);
322
- --button--padding-s-squished-x: var(--size-px--s);
323
- --button--padding-s: var(--size-px--xs);
324
- --button--text-to-icon-spacing: var(--size-rem--s);
325
- --button--padding: var(--size-px--s);
326
- --button--padding-squished-y: var(--size-px--s);
327
- --button--padding-squished-x: var(--size-px--m);
328
- --button-group--button-to-button-spacing: var(--size-rem--m);
329
- --breadcrumb-item--font-weight--current: var(--font-weight--bold);
330
- --breadcrumb-item--font-weight--default: var(--font-weight--normal);
331
- --breadcrumb-item--font-size: var(--font-size--s);
332
- --breadcrumb-item--padding-x: var(--size-px--xs);
333
- --avatar--size--l: var(--size-rem--xxl);
334
- --avatar--size--s: var(--size-rem--xl);
335
- --avatar--size--xs: var(--size-rem--l);
336
- --menu-item--disabled-color: var(--neutral--color--100);
337
- --menu-item--disabled-background-color: var(--neutral--color--400);
338
- --menu-item--background-color--current: var(--info--color--100);
339
- --menu-item--background-color--hover: var(--info--color--100);
340
- --menu-item--icon-color--current: var(--info--color--800);
341
- --menu-item--icon-color--default: var(--neutral--color--800);
342
- --menu-item--color--current: var(--info--color--800);
343
- --menu-item--color--default: var(--neutral--color--1000);
344
- --menu-item--corner-radius: var(--corner-radius--default);
345
- --form-control--background-color--invalid: var(--danger--color--100);
346
- --form-control--background-color--focused: var(--neutral--color--200);
347
- --form-control--background-color--default: var(--neutral--color--200);
348
- --form-control--placeholder-color--disabled: var(--neutral--color--500);
349
- --form-control--placeholder-color--default: var(--neutral--color--900);
350
- --form-control--border-width: var(--border-width--100);
351
- --form-control--corner-radius: var(--corner-radius--default);
352
- --focus--outline-width: var(--border-width--200);
353
- --focus--outline-color: var(--primary--color--800);
354
- --color--default: var(--neutral--color--1000);
355
- --disabled-soft-content-color: var(--neutral--color--500);
356
- --disabled-soft-background-color: var(--neutral--color--300);
357
- --disabled-outline-border-color: var(--neutral--color--400);
358
- --disabled-outline-content-color: var(--neutral--color--600);
359
- --disabled-outline-background-color: var(--neutral--color--300);
360
- --disabled-plain-content-accent-color: var(--neutral--color--600);
361
- --disabled-plain-content-color: var(--neutral--color--400);
362
- --disabled-solid-content-color: var(--neutral--color--600);
363
- --disabled-solid-background-color: var(--neutral--color--400);
364
- --neutral-soft-content-color--pressed: var(--neutral--color--1100);
365
- --neutral-soft-content-color--hover: var(--neutral--color--1000);
366
- --neutral-soft-content-color--default: var(--neutral--color--1000);
367
- --neutral-soft-background-color--pressed: var(--neutral--color--600);
368
- --neutral-soft-background-color--hover: var(--neutral--color--500);
369
- --neutral-soft-background-color--default: var(--neutral--color--400);
370
- --neutral-outline-border-color--selected: var(--primary--color--800);
371
- --neutral-outline-border-color--default: var(--neutral--color--700);
372
- --neutral-outline-content-color--selected: var(--primary--color--900);
373
- --neutral-outline-content-color--default: var(--neutral--color--1000);
374
- --neutral-outline-background-color--pressed: var(--primary--color--200);
375
- --neutral-outline-background-color--selected: var(--primary--color--200);
376
- --neutral-outline-background-color--hover: var(--primary--color--100);
377
- --neutral-outline-background-color--default: var(--neutral--color--200);
378
- --neutral-plain-content-color: var(--neutral--color--1000);
379
- --neutral-plain-background-color--pressed: var(--neutral--color--500);
380
- --neutral-plain-background-color--hover: var(--neutral--color--400);
381
- --neutral-solid-content-color: var(--neutral--color--100);
382
- --neutral-solid-background-color--pressed: var(--neutral--color--1000);
383
- --neutral-solid-background-color--hover: var(--neutral--color--900);
384
- --neutral-solid-background-color--default: var(--neutral--color--800);
385
- --warning-soft-content-color--pressed: var(--warning--color--1000);
386
- --warning-soft-content-color--hover: var(--warning--color--900);
387
- --warning-soft-content-color--default: var(--warning--color--900);
388
- --warning-soft-background-color--pressed: var(--warning--color--300);
389
- --warning-soft-background-color--hover: var(--warning--color--200);
390
- --warning-soft-background-color--default: var(--warning--color--100);
391
- --warning-outline-border-color: var(--warning--color--800);
392
- --warning-outline-content-color: var(--warning--color--900);
393
- --warning-outline-background-color--pressed: var(--warning--color--200);
394
- --warning-outline-background-color--hover: var(--warning--color--100);
395
- --warning-solid-content-color: var(--neutral--color--100);
396
- --warning-solid-background-color--pressed: var(--warning--color--1000);
397
- --warning-solid-background-color--hover: var(--warning--color--900);
398
- --warning-solid-background-color--default: var(--warning--color--800);
399
- --success-soft-content-color--pressed: var(--success--color--1000);
400
- --success-soft-content-color--hover: var(--success--color--900);
401
- --success-soft-content-color--default: var(--success--color--900);
402
- --success-soft-background-color--pressed: var(--success--color--300);
403
- --success-soft-background-color--hover: var(--success--color--200);
404
- --success-soft-background-color--default: var(--success--color--100);
405
- --success-outline-border-color: var(--success--color--800);
406
- --success-outline-content-color: var(--success--color--900);
407
- --success-outline-background-color--pressed: var(--success--color--200);
408
- --success-outline-background-color--hover: var(--success--color--100);
409
- --success-plain-content-color--pressed: var(--success--color--1000);
410
- --success-plain-content-color--hover: var(--success--color--900);
411
- --success-plain-content-color--default: var(--success--color--800);
412
- --success-plain-background-color--pressed: var(--success--color--200);
413
- --success-plain-background-color--hover: var(--success--color--100);
414
- --success-solid-content-color: var(--neutral--color--100);
415
- --success-solid-background-color--pressed: var(--success--color--1000);
416
- --success-solid-background-color--hover: var(--success--color--900);
417
- --success-solid-background-color--default: var(--success--color--800);
418
- --info-soft-content-color--pressed: var(--info--color--1000);
419
- --info-soft-content-color--hover: var(--info--color--900);
420
- --info-soft-content-color--default: var(--info--color--900);
421
- --info-soft-background-color--pressed: var(--info--color--300);
422
- --info-soft-background-color--hover: var(--info--color--200);
423
- --info-soft-background-color--default: var(--info--color--100);
424
- --info-outline-border-color: var(--info--color--800);
425
- --info-outline-content-color: var(--info--color--900);
426
- --info-outline-background-color--pressed: var(--info--color--200);
427
- --info-outline-background-color--hover: var(--info--color--100);
428
- --info-solid-content-color: var(--neutral--color--100);
429
- --info-solid-background-color--pressed: var(--info--color--1000);
430
- --info-solid-background-color--hover: var(--info--color--900);
431
- --info-solid-background-color--default: var(--info--color--800);
432
- --danger-soft-content-color--pressed: var(--danger--color--1000);
433
- --danger-soft-content-color--hover: var(--danger--color--900);
434
- --danger-soft-content-color--default: var(--danger--color--900);
435
- --danger-soft-background-color--pressed: var(--danger--color--300);
436
- --danger-soft-background-color--hover: var(--danger--color--200);
437
- --danger-soft-background-color--default: var(--danger--color--100);
438
- --danger-outline-border-color: var(--danger--color--800);
439
- --danger-outline-content-color: var(--danger--color--900);
440
- --danger-outline-background-color--pressed: var(--danger--color--200);
441
- --danger-outline-background-color--hover: var(--danger--color--100);
442
- --danger-plain-content-color--pressed: var(--danger--color--1000);
443
- --danger-plain-content-color--hover: var(--danger--color--900);
444
- --danger-plain-content-color--default: var(--danger--color--800);
445
- --danger-plain-background-color--pressed: var(--danger--color--200);
446
- --danger-plain-background-color--hover: var(--danger--color--100);
447
- --danger-solid-content-color: var(--neutral--color--100);
448
- --danger-solid-background-color--pressed: var(--danger--color--1000);
449
- --danger-solid-background-color--hover: var(--danger--color--900);
450
- --danger-solid-background-color--default: var(--danger--color--800);
451
- --primary-soft-content-color--pressed: var(--primary--color--1000);
452
- --primary-soft-content-color--hover: var(--primary--color--900);
453
- --primary-soft-content-color--default: var(--primary--color--900);
454
- --primary-soft-background-color--pressed: var(--primary--color--300);
455
- --primary-soft-background-color--hover: var(--primary--color--200);
456
- --primary-soft-background-color--default: var(--primary--color--100);
457
- --primary-plain-content-color--pressed: var(--primary--color--1000);
458
- --primary-plain-content-color--hover: var(--primary--color--900);
459
- --primary-plain-content-color--default: var(--primary--color--800);
460
- --primary-plain-background-color--pressed: var(--primary--color--200);
461
- --primary-plain-background-color--hover: var(--primary--color--100);
462
- --primary-solid-content-color: var(--neutral--color--100);
463
- --primary-solid-background-color--pressed: var(--primary--color--1000);
464
- --primary-solid-background-color--hover: var(--primary--color--900);
465
- --primary-solid-background-color--default: var(--primary--color--800);
466
- --tooltip--color: var(--neutral--color--100);
467
- --tooltip--background-color: var(--neutral--color--900);
468
- --tab--corner-top-radius-current: var(--corner-radius--default);
469
- --tab--disabled-color: var(--neutral--color--600);
470
- --tab--background-color--selected: var(--neutral--color--100);
471
- --tab-list--background-color: var(--neutral--color--400);
472
- --switch--handle-background-color: var(--neutral--color--100);
473
- --switch--handle-color--disabled: var(--neutral--color--600);
474
- --switch--track-background-color--disabled: var(--neutral--color--600);
475
- --status-badge--corner-radius: var(--corner-radius--default);
476
- --section--border-color: var(--neutral--color--500);
477
- --section--border-width: var(--border-width--100);
478
- --progress-bar--bar-border-width: var(--border-width--100);
479
- --popover--background-color: var(--neutral--color--100);
480
- --popover--box-shadow: var(--shadow--overlay);
481
- --modal--button-group-border-top-width: var(--border-width--100);
482
- --modal--button-group-border-color: var(--neutral--color--400);
483
- --modal--button-group-background-color: var(--neutral--color--300);
484
- --modal--background-color: var(--neutral--color--100);
485
- --modal--corner-radius: var(--corner-radius--default);
486
- --list-item--background-color--default: var(--neutral--color--200);
487
- --list-item--border-width: var(--border-width--100);
488
- --list-item--corner-radius: var(--corner-radius--default);
489
- --link--line-height: var(--line-height--m);
490
- --layout-card--box-shadow: var(--shadow--content);
491
- --layout-card--corner-radius: var(--corner-radius--default);
492
- --layout-card--background-color: var(--neutral--color--100);
493
- --label--color--disabled: var(--neutral--color--600);
494
- --label--color--default: var(--neutral--color--800);
495
- --inline-code--corner-radius: var(--corner-radius--default);
496
- --inline-code--line-height: var(--line-height--m);
497
- --inline-alert--border-x-start-width: var(--border-width--400);
498
- --inline-alert--border-width: var(--border-width--100);
499
- --inline-alert--corner-radius: var(--corner-radius--default);
500
- --illustrated-message--negative-heading-color: var(--danger--color--900);
501
- --illustrated-message--negative-icon-color: var(--danger--color--800);
502
- --illustrated-message--info-heading-color: var(--info--color--800);
503
- --illustrated-message--info-icon-color: var(--info--color--800);
504
- --icon--color--default: var(--neutral--color--900);
505
- --heading--color: var(--primary--color--1000);
506
- --header-navigation--item-underline-width-current: var(--border-width--200);
507
- --header-navigation--item-corner-radius: var(--corner-radius--default);
508
- --field-error--color: var(--danger--color--700);
509
- --field-description--color: var(--neutral--color--800);
510
- --button--disabled-plain-background-color: var(--disabled-plain-background-color);
511
- --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
512
- --button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);
513
- --button--primary-plain-background-color--default: var(--primary-plain-background-color--default);
514
- --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
515
- --button--failed-icon-color: var(--danger--color--700);
516
- --button--succeeded-icon-color: var(--success--color--700);
517
- --button--corner-radius: var(--corner-radius--default);
518
- --form-control--content-color--selected: var(--neutral-outline-content-color--selected);
519
- --form-control--content-color--disabled: var(--disabled-outline-content-color);
520
- --form-control--content-color--default: var(--neutral-outline-content-color--default);
521
- --form-control--background-color--selected: var(--info-outline-background-color--pressed);
522
- --form-control--background-color--hover: var(--neutral-outline-background-color--hover);
523
- --form-control--background-color--disabled: var(--disabled-outline-background-color);
524
- --form-control--border-color--selected: var(--neutral-outline-border-color--selected);
525
- --form-control--border-color--focused: var(--focus--outline-color);
526
- --form-control--border-color--invalid: var(--danger-outline-border-color);
527
- --form-control--border-color--disabled: var(--disabled-outline-border-color);
528
- --form-control--border-color--default: var(--neutral-outline-border-color--default);
529
- --tab--disabled-background-color: var(--neutral-soft-background-color--default);
530
- --tab--color--pressed: var(--neutral-soft-content-color--pressed);
531
- --tab--color--hover: var(--neutral-soft-content-color--hover);
532
- --tab--color--default: var(--neutral-soft-content-color--default);
533
- --tab--background-color--pressed: var(--neutral-soft-background-color--pressed);
534
- --tab--background-color--hover: var(--neutral-soft-background-color--hover);
535
- --tab--background-color--default: var(--neutral-soft-background-color--default);
536
- --switch--handle-color--default: var(--neutral-solid-content-color);
537
- --switch--track-background-color--selected: var(--success-solid-background-color--default);
538
- --switch--track-background-color--default: var(--neutral-solid-background-color--default);
539
- --status-badge--danger-content-color: var(--danger-soft-content-color--default);
540
- --status-badge--danger-background-color: var(--danger-soft-background-color--default);
541
- --status-badge--warning-content-color: var(--warning-soft-content-color--default);
542
- --status-badge--warning-background-color: var(--warning-soft-background-color--default);
543
- --status-badge--success-content-color: var(--success-soft-content-color--default);
544
- --status-badge--success-background-color: var(--success-soft-background-color--default);
545
- --status-badge--info-content-color: var(--info-soft-content-color--default);
546
- --status-badge--info-background-color: var(--info-soft-background-color--default);
547
- --radio--icon-color--disabled: var(--disabled-outline-content-color);
548
- --radio--icon-color--selected: var(--neutral-outline-border-color--selected);
549
- --radio--icon-color--default: var(--icon--color--default);
550
- --radio--color--disabled: var(--disabled-outline-content-color);
551
- --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
552
- --progress-bar--warning-fill-background-color: var(--warning-solid-background-color--default);
553
- --progress-bar--success-fill-background-color: var(--success-solid-background-color--default);
554
- --progress-bar--info-fill-background-color: var(--info-solid-background-color--default);
555
- --progress-bar--bar-border-color: var(--neutral-outline-border-color--default);
556
- --list-item--border-color: var(--neutral-outline-border-color--default);
557
- --list-item--background-color--pressed: var(--neutral-outline-background-color--pressed);
558
- --list-item--background-color--hover: var(--neutral-outline-background-color--hover);
559
- --link--color--pressed: var(--primary-plain-content-color--pressed);
560
- --link--color--hover: var(--primary-plain-content-color--hover);
561
- --link--color--default: var(--primary-plain-content-color--default);
562
- --link--disabled-color: var(--disabled-plain-content-color);
563
- --inline-code--background-color: var(--neutral-soft-background-color--default);
564
- --inline-alert--success-heading-color: var(--success-outline-content-color);
565
- --inline-alert--success-border-color: var(--success-outline-border-color);
566
- --inline-alert--danger-heading-color: var(--danger-outline-content-color);
567
- --inline-alert--danger-border-color: var(--danger-outline-border-color);
568
- --inline-alert--warning-heading-color: var(--warning-outline-content-color);
569
- --inline-alert--warning-border-color: var(--warning-outline-border-color);
570
- --inline-alert--info-heading-color: var(--info-outline-content-color);
571
- --inline-alert--info-border-color: var(--info-outline-border-color);
572
- --header-navigation--item-background-color--pressed: var(--primary-plain-background-color--pressed);
573
- --header-navigation--item-background-color--hover: var(--primary-plain-background-color--hover);
574
- --header-navigation--item-color: var(--heading--color);
575
- --checkbox--icon-color--disabled: var(--disabled-outline-content-color);
576
- --checkbox--icon-color--selected: var(--neutral-outline-border-color--selected);
577
- --checkbox--icon-color--default: var(--icon--color--default);
578
- --checkbox--color--disabled: var(--disabled-outline-content-color);
579
- --button--disabled-soft-content-color: var(--disabled-soft-content-color);
580
- --button--disabled-soft-background-color: var(--disabled-soft-background-color);
581
- --button--disabled-plain-content-color: var(--disabled-plain-content-color);
582
- --button--disabled-solid-content-color: var(--disabled-solid-content-color);
583
- --button--disabled-solid-background-color: var(--disabled-solid-background-color);
584
- --button--danger-soft-content-color--pressed: var(--danger-soft-content-color--pressed);
585
- --button--danger-soft-content-color--hover: var(--danger-soft-content-color--hover);
586
- --button--danger-soft-content-color--default: var(--danger-soft-content-color--default);
587
- --button--danger-soft-background-color--pressed: var(--danger-soft-background-color--pressed);
588
- --button--danger-soft-background-color--hover: var(--danger-soft-background-color--hover);
589
- --button--danger-soft-background-color--default: var(--danger-soft-background-color--default);
590
- --button--danger-plain-content-color--pressed: var(--danger-plain-content-color--pressed);
591
- --button--danger-plain-content-color--hover: var(--danger-plain-content-color--hover);
592
- --button--danger-plain-content-color--default: var(--danger-plain-content-color--default);
593
- --button--danger-plain-background-color--pressed: var(--danger-plain-background-color--pressed);
594
- --button--danger-plain-background-color--hover: var(--danger-plain-background-color--hover);
595
- --button--danger-solid-content-color--pressed: var(--danger-solid-content-color);
596
- --button--danger-solid-content-color--hover: var(--danger-solid-content-color);
597
- --button--danger-solid-content-color--default: var(--danger-solid-content-color);
598
- --button--danger-solid-background-color--pressed: var(--danger-solid-background-color--pressed);
599
- --button--danger-solid-background-color--hover: var(--danger-solid-background-color--hover);
600
- --button--danger-solid-background-color--default: var(--danger-solid-background-color--default);
601
- --button--secondary-soft-content-color--pressed: var(--neutral-soft-content-color--pressed);
602
- --button--secondary-soft-content-color--hover: var(--neutral-soft-content-color--hover);
603
- --button--secondary-soft-content-color--default: var(--neutral-soft-content-color--default);
604
- --button--secondary-soft-background-color--pressed: var(--neutral-soft-background-color--pressed);
605
- --button--secondary-soft-background-color--hover: var(--neutral-soft-background-color--hover);
606
- --button--secondary-soft-background-color--default: var(--neutral-soft-background-color--default);
607
- --button--secondary-plain-content-color--pressed: var(--neutral-plain-content-color);
608
- --button--secondary-plain-content-color--hover: var(--neutral-plain-content-color);
609
- --button--secondary-plain-content-color--default: var(--neutral-plain-content-color);
610
- --button--secondary-plain-background-color--pressed: var(--neutral-plain-background-color--pressed);
611
- --button--secondary-plain-background-color--hover: var(--neutral-plain-background-color--hover);
612
- --button--secondary-solid-content-color--pressed: var(--neutral-solid-content-color);
613
- --button--secondary-solid-content-color--hover: var(--neutral-solid-content-color);
614
- --button--secondary-solid-content-color--default: var(--neutral-solid-content-color);
615
- --button--secondary-solid-background-color--pressed: var(--neutral-solid-background-color--pressed);
616
- --button--secondary-solid-background-color--hover: var(--neutral-solid-background-color--hover);
617
- --button--secondary-solid-background-color--default: var(--neutral-solid-background-color--default);
618
- --button--primary-soft-content-color--pressed: var(--primary-soft-content-color--pressed);
619
- --button--primary-soft-content-color--hover: var(--primary-soft-content-color--hover);
620
- --button--primary-soft-content-color--default: var(--primary-soft-content-color--default);
621
- --button--primary-soft-background-color--pressed: var(--primary-soft-background-color--pressed);
622
- --button--primary-soft-background-color--hover: var(--primary-soft-background-color--hover);
623
- --button--primary-soft-background-color--default: var(--primary-soft-background-color--default);
624
- --button--primary-plain-content-color--pressed: var(--primary-plain-content-color--pressed);
625
- --button--primary-plain-content-color--hover: var(--primary-plain-content-color--hover);
626
- --button--primary-plain-content-color--default: var(--primary-plain-content-color--default);
627
- --button--primary-plain-background-color--pressed: var(--primary-plain-background-color--pressed);
628
- --button--primary-plain-background-color--hover: var(--primary-plain-background-color--hover);
629
- --button--primary-solid-content-color--pressed: var(--primary-solid-content-color);
630
- --button--primary-solid-content-color--hover: var(--primary-solid-content-color);
631
- --button--primary-solid-content-color--default: var(--primary-solid-content-color);
632
- --button--primary-solid-background-color--pressed: var(--primary-solid-background-color--pressed);
633
- --button--primary-solid-background-color--hover: var(--primary-solid-background-color--hover);
634
- --button--primary-solid-background-color--default: var(--primary-solid-background-color--default);
635
- --button--accent-soft-content-color--pressed: var(--success-soft-content-color--pressed);
636
- --button--accent-soft-content-color--hover: var(--success-soft-content-color--hover);
637
- --button--accent-soft-content-color--default: var(--success-soft-content-color--default);
638
- --button--accent-soft-background-color--pressed: var(--success-soft-background-color--pressed);
639
- --button--accent-soft-background-color--hover: var(--success-soft-background-color--hover);
640
- --button--accent-soft-background-color--default: var(--success-soft-background-color--default);
641
- --button--accent-plain-content-color--pressed: var(--success-plain-content-color--pressed);
642
- --button--accent-plain-content-color--hover: var(--success-plain-content-color--hover);
643
- --button--accent-plain-content-color--default: var(--success-plain-content-color--default);
644
- --button--accent-plain-background-color--pressed: var(--success-plain-background-color--pressed);
645
- --button--accent-plain-background-color--hover: var(--success-plain-background-color--hover);
646
- --button--accent-solid-content-color--pressed: var(--success-solid-content-color);
647
- --button--accent-solid-content-color--hover: var(--success-solid-content-color);
648
- --button--accent-solid-content-color--default: var(--success-solid-content-color);
649
- --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
650
- --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
651
- --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
652
- --button--pending-icon-color: var(--disabled-plain-content-accent-color);
653
- --breadcrumb-item--color: var(--color--default);
654
- }