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

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/dist/variables.css +654 -0
  2. package/package.json +2 -2
@@ -0,0 +1,654 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Mon, 22 Apr 2024 07:58:30 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-background-color: var(--disabled-plain-background-color);
337
+ --menu-item--background-color--current: var(--info--color--100);
338
+ --menu-item--background-color--hover: var(--info--color--100);
339
+ --menu-item--icon-color--current: var(--info--color--800);
340
+ --menu-item--icon-color--default: var(--neutral--color--800);
341
+ --menu-item--color--current: var(--info--color--800);
342
+ --menu-item--color--default: var(--neutral--color--1000);
343
+ --menu-item--corner-radius: var(--corner-radius--default);
344
+ --form-control--background-color--invalid: var(--danger--color--100);
345
+ --form-control--background-color--focused: var(--neutral--color--200);
346
+ --form-control--background-color--default: var(--neutral--color--200);
347
+ --form-control--placeholder-color--disabled: var(--neutral--color--500);
348
+ --form-control--placeholder-color--default: var(--neutral--color--900);
349
+ --form-control--border-width: var(--border-width--100);
350
+ --form-control--corner-radius: var(--corner-radius--default);
351
+ --focus--outline-width: var(--border-width--200);
352
+ --focus--outline-color: var(--primary--color--800);
353
+ --color--default: var(--neutral--color--1000);
354
+ --disabled-soft-content-color: var(--neutral--color--500);
355
+ --disabled-soft-background-color: var(--neutral--color--300);
356
+ --disabled-outline-border-color: var(--neutral--color--400);
357
+ --disabled-outline-content-color: var(--neutral--color--600);
358
+ --disabled-outline-background-color: var(--neutral--color--300);
359
+ --disabled-plain-content-accent-color: var(--neutral--color--600);
360
+ --disabled-plain-content-color: var(--neutral--color--400);
361
+ --disabled-solid-content-color: var(--neutral--color--600);
362
+ --disabled-solid-background-color: var(--neutral--color--400);
363
+ --neutral-soft-content-color--pressed: var(--neutral--color--1100);
364
+ --neutral-soft-content-color--hover: var(--neutral--color--1000);
365
+ --neutral-soft-content-color--default: var(--neutral--color--1000);
366
+ --neutral-soft-background-color--pressed: var(--neutral--color--600);
367
+ --neutral-soft-background-color--hover: var(--neutral--color--500);
368
+ --neutral-soft-background-color--default: var(--neutral--color--400);
369
+ --neutral-outline-border-color--selected: var(--primary--color--800);
370
+ --neutral-outline-border-color--default: var(--neutral--color--700);
371
+ --neutral-outline-content-color--selected: var(--primary--color--900);
372
+ --neutral-outline-content-color--default: var(--neutral--color--1000);
373
+ --neutral-outline-background-color--pressed: var(--primary--color--200);
374
+ --neutral-outline-background-color--selected: var(--primary--color--200);
375
+ --neutral-outline-background-color--hover: var(--primary--color--100);
376
+ --neutral-outline-background-color--default: var(--neutral--color--200);
377
+ --neutral-plain-content-color: var(--neutral--color--1000);
378
+ --neutral-plain-background-color--pressed: var(--neutral--color--500);
379
+ --neutral-plain-background-color--hover: var(--neutral--color--400);
380
+ --neutral-solid-content-color: var(--neutral--color--100);
381
+ --neutral-solid-background-color--pressed: var(--neutral--color--1000);
382
+ --neutral-solid-background-color--hover: var(--neutral--color--900);
383
+ --neutral-solid-background-color--default: var(--neutral--color--800);
384
+ --warning-soft-content-color--pressed: var(--warning--color--1000);
385
+ --warning-soft-content-color--hover: var(--warning--color--900);
386
+ --warning-soft-content-color--default: var(--warning--color--900);
387
+ --warning-soft-background-color--pressed: var(--warning--color--300);
388
+ --warning-soft-background-color--hover: var(--warning--color--200);
389
+ --warning-soft-background-color--default: var(--warning--color--100);
390
+ --warning-outline-border-color: var(--warning--color--800);
391
+ --warning-outline-content-color: var(--warning--color--900);
392
+ --warning-outline-background-color--pressed: var(--warning--color--200);
393
+ --warning-outline-background-color--hover: var(--warning--color--100);
394
+ --warning-solid-content-color: var(--neutral--color--100);
395
+ --warning-solid-background-color--pressed: var(--warning--color--1000);
396
+ --warning-solid-background-color--hover: var(--warning--color--900);
397
+ --warning-solid-background-color--default: var(--warning--color--800);
398
+ --success-soft-content-color--pressed: var(--success--color--1000);
399
+ --success-soft-content-color--hover: var(--success--color--900);
400
+ --success-soft-content-color--default: var(--success--color--900);
401
+ --success-soft-background-color--pressed: var(--success--color--300);
402
+ --success-soft-background-color--hover: var(--success--color--200);
403
+ --success-soft-background-color--default: var(--success--color--100);
404
+ --success-outline-border-color: var(--success--color--800);
405
+ --success-outline-content-color: var(--success--color--900);
406
+ --success-outline-background-color--pressed: var(--success--color--200);
407
+ --success-outline-background-color--hover: var(--success--color--100);
408
+ --success-plain-content-color--pressed: var(--success--color--1000);
409
+ --success-plain-content-color--hover: var(--success--color--900);
410
+ --success-plain-content-color--default: var(--success--color--800);
411
+ --success-plain-background-color--pressed: var(--success--color--200);
412
+ --success-plain-background-color--hover: var(--success--color--100);
413
+ --success-solid-content-color: var(--neutral--color--100);
414
+ --success-solid-background-color--pressed: var(--success--color--1000);
415
+ --success-solid-background-color--hover: var(--success--color--900);
416
+ --success-solid-background-color--default: var(--success--color--800);
417
+ --info-soft-content-color--pressed: var(--info--color--1000);
418
+ --info-soft-content-color--hover: var(--info--color--900);
419
+ --info-soft-content-color--default: var(--info--color--900);
420
+ --info-soft-background-color--pressed: var(--info--color--300);
421
+ --info-soft-background-color--hover: var(--info--color--200);
422
+ --info-soft-background-color--default: var(--info--color--100);
423
+ --info-outline-border-color: var(--info--color--800);
424
+ --info-outline-content-color: var(--info--color--900);
425
+ --info-outline-background-color--pressed: var(--info--color--200);
426
+ --info-outline-background-color--hover: var(--info--color--100);
427
+ --info-solid-content-color: var(--neutral--color--100);
428
+ --info-solid-background-color--pressed: var(--info--color--1000);
429
+ --info-solid-background-color--hover: var(--info--color--900);
430
+ --info-solid-background-color--default: var(--info--color--800);
431
+ --danger-soft-content-color--pressed: var(--danger--color--1000);
432
+ --danger-soft-content-color--hover: var(--danger--color--900);
433
+ --danger-soft-content-color--default: var(--danger--color--900);
434
+ --danger-soft-background-color--pressed: var(--danger--color--300);
435
+ --danger-soft-background-color--hover: var(--danger--color--200);
436
+ --danger-soft-background-color--default: var(--danger--color--100);
437
+ --danger-outline-border-color: var(--danger--color--800);
438
+ --danger-outline-content-color: var(--danger--color--900);
439
+ --danger-outline-background-color--pressed: var(--danger--color--200);
440
+ --danger-outline-background-color--hover: var(--danger--color--100);
441
+ --danger-plain-content-color--pressed: var(--danger--color--1000);
442
+ --danger-plain-content-color--hover: var(--danger--color--900);
443
+ --danger-plain-content-color--default: var(--danger--color--800);
444
+ --danger-plain-background-color--pressed: var(--danger--color--200);
445
+ --danger-plain-background-color--hover: var(--danger--color--100);
446
+ --danger-solid-content-color: var(--neutral--color--100);
447
+ --danger-solid-background-color--pressed: var(--danger--color--1000);
448
+ --danger-solid-background-color--hover: var(--danger--color--900);
449
+ --danger-solid-background-color--default: var(--danger--color--800);
450
+ --primary-soft-content-color--pressed: var(--primary--color--1000);
451
+ --primary-soft-content-color--hover: var(--primary--color--900);
452
+ --primary-soft-content-color--default: var(--primary--color--900);
453
+ --primary-soft-background-color--pressed: var(--primary--color--300);
454
+ --primary-soft-background-color--hover: var(--primary--color--200);
455
+ --primary-soft-background-color--default: var(--primary--color--100);
456
+ --primary-plain-content-color--pressed: var(--primary--color--1000);
457
+ --primary-plain-content-color--hover: var(--primary--color--900);
458
+ --primary-plain-content-color--default: var(--primary--color--800);
459
+ --primary-plain-background-color--pressed: var(--primary--color--200);
460
+ --primary-plain-background-color--hover: var(--primary--color--100);
461
+ --primary-solid-content-color: var(--neutral--color--100);
462
+ --primary-solid-background-color--pressed: var(--primary--color--1000);
463
+ --primary-solid-background-color--hover: var(--primary--color--900);
464
+ --primary-solid-background-color--default: var(--primary--color--800);
465
+ --tooltip--color: var(--neutral--color--100);
466
+ --tooltip--background-color: var(--neutral--color--900);
467
+ --tab--corner-top-radius-current: var(--corner-radius--default);
468
+ --tab--disabled-color: var(--neutral--color--600);
469
+ --tab--background-color--selected: var(--neutral--color--100);
470
+ --tab-list--background-color: var(--neutral--color--400);
471
+ --switch--handle-background-color: var(--neutral--color--100);
472
+ --switch--handle-color--disabled: var(--neutral--color--600);
473
+ --switch--track-background-color--disabled: var(--neutral--color--600);
474
+ --status-badge--corner-radius: var(--corner-radius--default);
475
+ --section--border-color: var(--neutral--color--500);
476
+ --section--border-width: var(--border-width--100);
477
+ --progress-bar--bar-border-width: var(--border-width--100);
478
+ --popover--background-color: var(--neutral--color--100);
479
+ --popover--box-shadow: var(--shadow--overlay);
480
+ --modal--button-group-border-top-width: var(--border-width--100);
481
+ --modal--button-group-border-color: var(--neutral--color--400);
482
+ --modal--button-group-background-color: var(--neutral--color--300);
483
+ --modal--background-color: var(--neutral--color--100);
484
+ --modal--corner-radius: var(--corner-radius--default);
485
+ --list-item--background-color--default: var(--neutral--color--200);
486
+ --list-item--border-width: var(--border-width--100);
487
+ --list-item--corner-radius: var(--corner-radius--default);
488
+ --link--line-height: var(--line-height--m);
489
+ --layout-card--box-shadow: var(--shadow--content);
490
+ --layout-card--corner-radius: var(--corner-radius--default);
491
+ --layout-card--background-color: var(--neutral--color--100);
492
+ --label--color--disabled: var(--neutral--color--600);
493
+ --label--color--default: var(--neutral--color--800);
494
+ --inline-code--corner-radius: var(--corner-radius--default);
495
+ --inline-code--line-height: var(--line-height--m);
496
+ --inline-alert--border-x-start-width: var(--border-width--400);
497
+ --inline-alert--border-width: var(--border-width--100);
498
+ --inline-alert--corner-radius: var(--corner-radius--default);
499
+ --illustrated-message--negative-heading-color: var(--danger--color--900);
500
+ --illustrated-message--negative-icon-color: var(--danger--color--800);
501
+ --illustrated-message--info-heading-color: var(--info--color--800);
502
+ --illustrated-message--info-icon-color: var(--info--color--800);
503
+ --icon--color--default: var(--neutral--color--900);
504
+ --heading--color: var(--primary--color--1000);
505
+ --header-navigation--item-underline-width-current: var(--border-width--200);
506
+ --header-navigation--item-corner-radius: var(--corner-radius--default);
507
+ --field-error--color: var(--danger--color--700);
508
+ --field-description--color: var(--neutral--color--800);
509
+ --button--disabled-plain-background-color: var(--disabled-plain-background-color);
510
+ --button--danger-plain-background-color--default: var(--danger-plain-background-color--default);
511
+ --button--secondary-plain-background-color--default: var(--neutral-plain-background-color--default);
512
+ --button--primary-plain-background-color--default: var(--primary-plain-background-color--default);
513
+ --button--accent-plain-background-color--default: var(--success-plain-background-color--default);
514
+ --button--failed-icon-color: var(--danger--color--700);
515
+ --button--succeeded-icon-color: var(--success--color--700);
516
+ --button--corner-radius: var(--corner-radius--default);
517
+ --menu-item--disabled-color: var(--disabled-plain-content-color);
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
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mittwald/flow-design-tokens",
3
- "version": "0.1.0-alpha.72",
3
+ "version": "0.1.0-alpha.73",
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",
@@ -20,5 +20,5 @@
20
20
  "nx": "^18.3.1",
21
21
  "style-dictionary": "^3.9.2"
22
22
  },
23
- "gitHead": "a14bd1b7c1fa1617e385e986830f6d397df913dc"
23
+ "gitHead": "c0214f8aa933b331a088bf27b8d753142e778f5e"
24
24
  }