@amboss/design-system 3.2.0 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/components/AccessCardItem/AccessCardItem.d.ts +25 -0
- package/build/cjs/components/AccessCardItem/AccessCardItem.js +1 -0
- package/build/cjs/components/Form/SegmentedControl/-types.d.ts +2 -13
- package/build/cjs/components/Form/SegmentedControl/SegmentedControlOption.d.ts +1 -1
- package/build/cjs/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/cjs/components/Notification/Notification.d.ts +5 -3
- package/build/cjs/components/Notification/Notification.js +1 -1
- package/build/cjs/components/SubThemeProvider/SubThemeContext.d.ts +1 -0
- package/build/cjs/components/SubThemeProvider/SubThemeContext.js +1 -0
- package/build/cjs/components/SubThemeProvider/SubThemeProvider.js +1 -1
- package/build/cjs/index.d.ts +1 -0
- package/build/cjs/index.js +1 -1
- package/build/cjs/web-tokens/_colors.json +848 -825
- package/build/cjs/web-tokens/visualConfig.d.ts +157 -157
- package/build/cjs/web-tokens/visualConfig.js +1 -1
- package/build/esm/components/AccessCardItem/AccessCardItem.d.ts +25 -0
- package/build/esm/components/AccessCardItem/AccessCardItem.js +1 -0
- package/build/esm/components/Form/SegmentedControl/-types.d.ts +2 -13
- package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.d.ts +1 -1
- package/build/esm/components/Form/SegmentedControl/SegmentedControlOption.js +1 -1
- package/build/esm/components/Notification/Notification.d.ts +5 -3
- package/build/esm/components/Notification/Notification.js +1 -1
- package/build/esm/components/SubThemeProvider/SubThemeContext.d.ts +1 -0
- package/build/esm/components/SubThemeProvider/SubThemeContext.js +1 -0
- package/build/esm/components/SubThemeProvider/SubThemeProvider.js +1 -1
- package/build/esm/index.d.ts +1 -0
- package/build/esm/index.js +1 -1
- package/build/esm/web-tokens/_colors.json +848 -825
- package/build/esm/web-tokens/visualConfig.d.ts +157 -157
- package/build/esm/web-tokens/visualConfig.js +1 -1
- package/build/scss/_theming.scss +118 -86
- package/build/scss/_variables.scss +96 -43
- package/package.json +1 -3
package/build/scss/_theming.scss
CHANGED
|
@@ -24,6 +24,65 @@
|
|
|
24
24
|
--color-badge-border-purple: #d8d0f3;
|
|
25
25
|
--color-badge-border-red: #fad1d1;
|
|
26
26
|
--color-badge-border-gray: #e0e6eb;
|
|
27
|
+
--color-toggle-background-highlight: #f3eb75;
|
|
28
|
+
--color-toggle-border-highlight: #f3eb75;
|
|
29
|
+
--color-segmented-progress-bar-monochrome: #607585;
|
|
30
|
+
--color-segmented-progress-bar-success: #39d6ac;
|
|
31
|
+
--color-segmented-progress-bar-warning: #f1d56b;
|
|
32
|
+
--color-segmented-progress-bar-alert: #f07575;
|
|
33
|
+
--color-segmented-progress-bar-in-progress: #e0e6eb;
|
|
34
|
+
--color-tag-background-gray: #e0e6eb;
|
|
35
|
+
--color-tag-background-blue: #d2e2f9;
|
|
36
|
+
--color-tag-text-gray: #40515e;
|
|
37
|
+
--color-tag-text-blue: #1c427d;
|
|
38
|
+
--color-range-input-background-thumb-default: #ffffff;
|
|
39
|
+
--color-search-input-background: #eef2f5;
|
|
40
|
+
--color-chart-border: #a3b2bd;
|
|
41
|
+
--color-chart-grid-primary-default: rgba(163, 178, 189, 0.3);
|
|
42
|
+
--color-chart-grid-secondary-default: rgba(163, 178, 189, 0.3);
|
|
43
|
+
--color-chart-background: #ffffff;
|
|
44
|
+
--color-chart-background-inverted: #1a1c1c;
|
|
45
|
+
--color-chart-text-positive-default: #0b8363;
|
|
46
|
+
--color-chart-text-negative-default: #dc4847;
|
|
47
|
+
--color-chart-text-warning-default: #df9411;
|
|
48
|
+
--color-chart-neutral: #a3b2bd;
|
|
49
|
+
--color-chart-neutral-subtle: #eef2f5;
|
|
50
|
+
--color-chart-neutral-bold: #607585;
|
|
51
|
+
--color-chart-positive: #0b8363;
|
|
52
|
+
--color-chart-positive-subtle: #e8f8f4;
|
|
53
|
+
--color-chart-positive-bold: #0a5c45;
|
|
54
|
+
--color-chart-warning: #f6bc56;
|
|
55
|
+
--color-chart-warning-subtle: #fef3e1;
|
|
56
|
+
--color-chart-warning-bold: #f6c66f;
|
|
57
|
+
--color-chart-negative: #f07575;
|
|
58
|
+
--color-chart-negative-subtle: #fde8e8;
|
|
59
|
+
--color-chart-negative-bold: #dc4847;
|
|
60
|
+
--color-chart-info: #6e95cf;
|
|
61
|
+
--color-chart-info-subtle: #e7effe;
|
|
62
|
+
--color-chart-info-bold: #295dae;
|
|
63
|
+
--color-chart-accent: #0aa6b8;
|
|
64
|
+
--color-chart-accent-subtle: #e7f6f8;
|
|
65
|
+
--color-chart-accent-bold: #047a88;
|
|
66
|
+
--color-media-item-background-black: #000000;
|
|
67
|
+
--color-media-item-background-white: #ffffff;
|
|
68
|
+
--color-media-item-background-transparent: rgba(255, 255, 255, 0);
|
|
69
|
+
--color-media-item-overlay-hover: rgba(255, 255, 255, 0.3);
|
|
70
|
+
--color-media-item-overlay-active: rgba(0, 0, 0, 0.6);
|
|
71
|
+
--color-media-item-category-icon-background-default: #314554;
|
|
72
|
+
--color-destructive-tertiary-button-background-hover: rgba(238, 97, 96, 0.08);
|
|
73
|
+
--color-destructive-tertiary-button-background-active: rgba(238, 97, 96, 0.08);
|
|
74
|
+
--color-qbank-answer-background-title-correct-default: #d0f1e8;
|
|
75
|
+
--color-qbank-answer-background-title-correct-hover: rgba(138, 220, 198, 0.6);
|
|
76
|
+
--color-qbank-answer-background-title-correct-with-hint-default: #fceaca;
|
|
77
|
+
--color-qbank-answer-background-title-correct-with-hint-hover: rgba(246, 198, 111, 0.6);
|
|
78
|
+
--color-qbank-answer-background-title-incorrect-default: #fad1d1;
|
|
79
|
+
--color-qbank-answer-background-title-incorrect-hover: rgba(240, 117, 117, 0.45);
|
|
80
|
+
--color-qbank-answer-background-explanation-correct-default: #e8f8f4;
|
|
81
|
+
--color-qbank-answer-background-explanation-correct-with-hint-default: #fef3e1;
|
|
82
|
+
--color-qbank-answer-background-explanation-incorrect-default: #fde8e8;
|
|
83
|
+
--color-qbank-answer-border-correct-default: #8adcc6;
|
|
84
|
+
--color-qbank-answer-border-correct-with-hint-default: #f6c66f;
|
|
85
|
+
--color-qbank-answer-border-incorrect-default: #f07575;
|
|
27
86
|
--color-canvas: #eef2f5;
|
|
28
87
|
--color-background-primary: #ffffff;
|
|
29
88
|
--color-background-secondary: #f5f7f9;
|
|
@@ -125,49 +184,6 @@
|
|
|
125
184
|
--color-divider-primary: #e0e6eb;
|
|
126
185
|
--color-divider-secondary: rgba(163, 178, 189, 0.3);
|
|
127
186
|
--color-divider-secondarySolid: #eef2f5;
|
|
128
|
-
--color-segmented-progress-bar-monochrome: #607585;
|
|
129
|
-
--color-segmented-progress-bar-success: #39d6ac;
|
|
130
|
-
--color-segmented-progress-bar-warning: #f1d56b;
|
|
131
|
-
--color-segmented-progress-bar-alert: #f07575;
|
|
132
|
-
--color-segmented-progress-bar-in-progress: #e0e6eb;
|
|
133
|
-
--color-qbank-answer-background-title-correct-default: #d0f1e8;
|
|
134
|
-
--color-qbank-answer-background-title-correct-hover: rgba(138, 220, 198, 0.6);
|
|
135
|
-
--color-qbank-answer-background-title-correct-with-hint-default: #fceaca;
|
|
136
|
-
--color-qbank-answer-background-title-correct-with-hint-hover: rgba(246, 198, 111, 0.6);
|
|
137
|
-
--color-qbank-answer-background-title-incorrect-default: #fad1d1;
|
|
138
|
-
--color-qbank-answer-background-title-incorrect-hover: rgba(240, 117, 117, 0.45);
|
|
139
|
-
--color-qbank-answer-background-explanation-correct-default: #e8f8f4;
|
|
140
|
-
--color-qbank-answer-background-explanation-correct-with-hint-default: #fef3e1;
|
|
141
|
-
--color-qbank-answer-background-explanation-incorrect-default: #fde8e8;
|
|
142
|
-
--color-qbank-answer-border-correct-default: #8adcc6;
|
|
143
|
-
--color-qbank-answer-border-correct-with-hint-default: #f6c66f;
|
|
144
|
-
--color-qbank-answer-border-incorrect-default: #f07575;
|
|
145
|
-
--color-chart-border: #a3b2bd;
|
|
146
|
-
--color-chart-grid-primary-default: rgba(163, 178, 189, 0.3);
|
|
147
|
-
--color-chart-grid-secondary-default: rgba(163, 178, 189, 0.3);
|
|
148
|
-
--color-chart-background: #ffffff;
|
|
149
|
-
--color-chart-background-inverted: #1a1c1c;
|
|
150
|
-
--color-chart-text-positive-default: #0b8363;
|
|
151
|
-
--color-chart-text-negative-default: #dc4847;
|
|
152
|
-
--color-chart-text-warning-default: #df9411;
|
|
153
|
-
--color-chart-neutral: #a3b2bd;
|
|
154
|
-
--color-chart-neutral-subtle: #eef2f5;
|
|
155
|
-
--color-chart-neutral-bold: #607585;
|
|
156
|
-
--color-chart-positive: #0b8363;
|
|
157
|
-
--color-chart-positive-subtle: #e8f8f4;
|
|
158
|
-
--color-chart-positive-bold: #0a5c45;
|
|
159
|
-
--color-chart-warning: #f6bc56;
|
|
160
|
-
--color-chart-warning-subtle: #fef3e1;
|
|
161
|
-
--color-chart-warning-bold: #f6c66f;
|
|
162
|
-
--color-chart-negative: #f07575;
|
|
163
|
-
--color-chart-negative-subtle: #fde8e8;
|
|
164
|
-
--color-chart-negative-bold: #dc4847;
|
|
165
|
-
--color-chart-info: #6e95cf;
|
|
166
|
-
--color-chart-info-subtle: #e7effe;
|
|
167
|
-
--color-chart-info-bold: #295dae;
|
|
168
|
-
--color-chart-accent: #0aa6b8;
|
|
169
|
-
--color-chart-accent-subtle: #e7f6f8;
|
|
170
|
-
--color-chart-accent-bold: #047a88;
|
|
171
187
|
--elevation-1: 0px 0.3px 0.6px rgba(0, 0, 0, 0.0035), 0px 2px 5px rgba(0, 0, 0, 0.07);
|
|
172
188
|
--elevation-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01);
|
|
173
189
|
--elevation-3: 0px 0.5px 2.5px rgba(0, 0, 0, 0.16), 0px 4px 20px rgba(0, 0, 0, 0.2);
|
|
@@ -200,6 +216,65 @@
|
|
|
200
216
|
--color-badge-border-purple: #393e47;
|
|
201
217
|
--color-badge-border-red: #393e47;
|
|
202
218
|
--color-badge-border-gray: #393e47;
|
|
219
|
+
--color-toggle-background-highlight: #b2ab39;
|
|
220
|
+
--color-toggle-border-highlight: #b2ab39;
|
|
221
|
+
--color-segmented-progress-bar-monochrome: #ced1d6;
|
|
222
|
+
--color-segmented-progress-bar-success: #28816b;
|
|
223
|
+
--color-segmented-progress-bar-warning: #a4792d;
|
|
224
|
+
--color-segmented-progress-bar-alert: #a45355;
|
|
225
|
+
--color-segmented-progress-bar-in-progress: #5b5f67;
|
|
226
|
+
--color-tag-background-gray: #5b5f67;
|
|
227
|
+
--color-tag-background-blue: #2f538a;
|
|
228
|
+
--color-tag-text-gray: #ced1d6;
|
|
229
|
+
--color-tag-text-blue: #e7effe;
|
|
230
|
+
--color-destructive-tertiary-button-background-hover: rgba(164, 83, 85, 0.08);
|
|
231
|
+
--color-destructive-tertiary-button-background-active: rgba(164, 83, 85, 0.08);
|
|
232
|
+
--color-range-input-background-thumb-default: #d8dade;
|
|
233
|
+
--color-search-input-background: #32363e;
|
|
234
|
+
--color-qbank-answer-background-title-correct-default: #233d3d;
|
|
235
|
+
--color-qbank-answer-background-title-correct-hover: rgba(40, 129, 107, 0.45);
|
|
236
|
+
--color-qbank-answer-background-title-correct-with-hint-default: #4d412c;
|
|
237
|
+
--color-qbank-answer-background-title-correct-with-hint-hover: rgba(164, 121, 45, 0.45);
|
|
238
|
+
--color-qbank-answer-background-title-incorrect-default: #4d3237;
|
|
239
|
+
--color-qbank-answer-background-title-incorrect-hover: rgba(164, 83, 85, 0.45);
|
|
240
|
+
--color-qbank-answer-background-explanation-correct-default: #262e33;
|
|
241
|
+
--color-qbank-answer-background-explanation-correct-with-hint-default: #32302f;
|
|
242
|
+
--color-qbank-answer-background-explanation-incorrect-default: #312b31;
|
|
243
|
+
--color-qbank-answer-border-correct-default: #28816b;
|
|
244
|
+
--color-qbank-answer-border-correct-with-hint-default: #a4792d;
|
|
245
|
+
--color-qbank-answer-border-incorrect-default: #a45355;
|
|
246
|
+
--color-chart-border: #5b5f67;
|
|
247
|
+
--color-chart-grid-primary-default: rgba(147, 149, 159, 0.3);
|
|
248
|
+
--color-chart-grid-secondary-default: rgba(147, 149, 159, 0.3);
|
|
249
|
+
--color-chart-background: #1a1c1c;
|
|
250
|
+
--color-chart-background-inverted: #ffffff;
|
|
251
|
+
--color-chart-text-positive-default: #a6f2dd;
|
|
252
|
+
--color-chart-text-negative-default: #f49a9a;
|
|
253
|
+
--color-chart-text-warning-default: #a4792d;
|
|
254
|
+
--color-chart-neutral: #5b5f67;
|
|
255
|
+
--color-chart-neutral-subtle: #1e2125;
|
|
256
|
+
--color-chart-neutral-bold: #93979f;
|
|
257
|
+
--color-chart-positive: #41a48a;
|
|
258
|
+
--color-chart-positive-subtle: #262e33;
|
|
259
|
+
--color-chart-positive-bold: #a6f2dd;
|
|
260
|
+
--color-chart-warning: #cbac76;
|
|
261
|
+
--color-chart-warning-subtle: #32302f;
|
|
262
|
+
--color-chart-warning-bold: #fae0b3;
|
|
263
|
+
--color-chart-negative: #d07c7c;
|
|
264
|
+
--color-chart-negative-subtle: #312b31;
|
|
265
|
+
--color-chart-negative-bold: #f49a9a;
|
|
266
|
+
--color-chart-info: #6e95cf;
|
|
267
|
+
--color-chart-info-subtle: #282e39;
|
|
268
|
+
--color-chart-info-bold: #99c1fa;
|
|
269
|
+
--color-chart-accent: #0aa6b8;
|
|
270
|
+
--color-chart-accent-subtle: #262f36;
|
|
271
|
+
--color-chart-accent-bold: #80dfea;
|
|
272
|
+
--color-media-item-background-black: #000000;
|
|
273
|
+
--color-media-item-background-white: #ffffff;
|
|
274
|
+
--color-media-item-background-transparent: rgba(255, 255, 255, 0);
|
|
275
|
+
--color-media-item-overlay-hover: rgba(0, 0, 0, 0.3);
|
|
276
|
+
--color-media-item-overlay-active: rgba(0, 0, 0, 0.6);
|
|
277
|
+
--color-media-item-category-icon-background-default: #32363e;
|
|
203
278
|
--color-canvas: #111111;
|
|
204
279
|
--color-background-primary: #1a1c1c;
|
|
205
280
|
--color-background-secondary: #24282d;
|
|
@@ -301,49 +376,6 @@
|
|
|
301
376
|
--color-divider-primary: #32363e;
|
|
302
377
|
--color-divider-secondary: rgba(147, 149, 159, 0.15);
|
|
303
378
|
--color-divider-secondarySolid: #32363e;
|
|
304
|
-
--color-segmented-progress-bar-monochrome: #ced1d6;
|
|
305
|
-
--color-segmented-progress-bar-success: #28816b;
|
|
306
|
-
--color-segmented-progress-bar-warning: #a4792d;
|
|
307
|
-
--color-segmented-progress-bar-alert: #a45355;
|
|
308
|
-
--color-segmented-progress-bar-in-progress: #5b5f67;
|
|
309
|
-
--color-qbank-answer-background-title-correct-default: #233d3d;
|
|
310
|
-
--color-qbank-answer-background-title-correct-hover: rgba(40, 129, 107, 0.45);
|
|
311
|
-
--color-qbank-answer-background-title-correct-with-hint-default: #4d412c;
|
|
312
|
-
--color-qbank-answer-background-title-correct-with-hint-hover: rgba(164, 121, 45, 0.45);
|
|
313
|
-
--color-qbank-answer-background-title-incorrect-default: #4d3237;
|
|
314
|
-
--color-qbank-answer-background-title-incorrect-hover: rgba(164, 83, 85, 0.45);
|
|
315
|
-
--color-qbank-answer-background-explanation-correct-default: #262e33;
|
|
316
|
-
--color-qbank-answer-background-explanation-correct-with-hint-default: #32302f;
|
|
317
|
-
--color-qbank-answer-background-explanation-incorrect-default: #312b31;
|
|
318
|
-
--color-qbank-answer-border-correct-default: #28816b;
|
|
319
|
-
--color-qbank-answer-border-correct-with-hint-default: #a4792d;
|
|
320
|
-
--color-qbank-answer-border-incorrect-default: #a45355;
|
|
321
|
-
--color-chart-border: #5b5f67;
|
|
322
|
-
--color-chart-grid-primary-default: rgba(147, 149, 159, 0.3);
|
|
323
|
-
--color-chart-grid-secondary-default: rgba(147, 149, 159, 0.3);
|
|
324
|
-
--color-chart-background: #1a1c1c;
|
|
325
|
-
--color-chart-background-inverted: #ffffff;
|
|
326
|
-
--color-chart-text-positive-default: #a6f2dd;
|
|
327
|
-
--color-chart-text-negative-default: #f49a9a;
|
|
328
|
-
--color-chart-text-warning-default: #a4792d;
|
|
329
|
-
--color-chart-neutral: #5b5f67;
|
|
330
|
-
--color-chart-neutral-subtle: #1e2125;
|
|
331
|
-
--color-chart-neutral-bold: #93979f;
|
|
332
|
-
--color-chart-positive: #41a48a;
|
|
333
|
-
--color-chart-positive-subtle: #262e33;
|
|
334
|
-
--color-chart-positive-bold: #a6f2dd;
|
|
335
|
-
--color-chart-warning: #cbac76;
|
|
336
|
-
--color-chart-warning-subtle: #32302f;
|
|
337
|
-
--color-chart-warning-bold: #fae0b3;
|
|
338
|
-
--color-chart-negative: #d07c7c;
|
|
339
|
-
--color-chart-negative-subtle: #312b31;
|
|
340
|
-
--color-chart-negative-bold: #f49a9a;
|
|
341
|
-
--color-chart-info: #6e95cf;
|
|
342
|
-
--color-chart-info-subtle: #282e39;
|
|
343
|
-
--color-chart-info-bold: #99c1fa;
|
|
344
|
-
--color-chart-accent: #0aa6b8;
|
|
345
|
-
--color-chart-accent-subtle: #262f36;
|
|
346
|
-
--color-chart-accent-bold: #80dfea;
|
|
347
379
|
--elevation-1: 0px 2px 5px 0px rgba(0, 0, 0, 0.07), 0px 0.3px 0.6px 0px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(64, 69, 79, 0.4) inset;
|
|
348
380
|
--elevation-2: 0px 2px 8px 0px rgba(0, 0, 0, 0.12), 0px 0.3px 1px 0px rgba(0, 0, 0, 0.01), 0px 0px 0px 1px rgba(64, 69, 79, 0.4) inset;
|
|
349
381
|
--elevation-3: 0px 4px 20px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 2.5px 0px rgba(0, 0, 0, 0.16), 0px 0px 0px 1px rgba(64, 69, 79, 0.5) inset;
|
|
@@ -22,6 +22,65 @@ $colorBadgeBorderBrand: var(--color-badge-border-brand);
|
|
|
22
22
|
$colorBadgeBorderPurple: var(--color-badge-border-purple);
|
|
23
23
|
$colorBadgeBorderRed: var(--color-badge-border-red);
|
|
24
24
|
$colorBadgeBorderGray: var(--color-badge-border-gray);
|
|
25
|
+
$colorToggleBackgroundHighlight: var(--color-toggle-background-highlight);
|
|
26
|
+
$colorToggleBorderHighlight: var(--color-toggle-border-highlight);
|
|
27
|
+
$colorSegmentedProgressBarMonochrome: var(--color-segmented-progress-bar-monochrome);
|
|
28
|
+
$colorSegmentedProgressBarSuccess: var(--color-segmented-progress-bar-success);
|
|
29
|
+
$colorSegmentedProgressBarWarning: var(--color-segmented-progress-bar-warning);
|
|
30
|
+
$colorSegmentedProgressBarAlert: var(--color-segmented-progress-bar-alert);
|
|
31
|
+
$colorSegmentedProgressBarInProgress: var(--color-segmented-progress-bar-in-progress);
|
|
32
|
+
$colorTagBackgroundGray: var(--color-tag-background-gray);
|
|
33
|
+
$colorTagBackgroundBlue: var(--color-tag-background-blue);
|
|
34
|
+
$colorTagTextGray: var(--color-tag-text-gray);
|
|
35
|
+
$colorTagTextBlue: var(--color-tag-text-blue);
|
|
36
|
+
$colorRangeInputBackgroundThumbDefault: var(--color-range-input-background-thumb-default);
|
|
37
|
+
$colorSearchInputBackground: var(--color-search-input-background);
|
|
38
|
+
$colorChartBorder: var(--color-chart-border);
|
|
39
|
+
$colorChartGridPrimaryDefault: var(--color-chart-grid-primary-default);
|
|
40
|
+
$colorChartGridSecondaryDefault: var(--color-chart-grid-secondary-default);
|
|
41
|
+
$colorChartBackground: var(--color-chart-background);
|
|
42
|
+
$colorChartBackgroundInverted: var(--color-chart-background-inverted);
|
|
43
|
+
$colorChartTextPositiveDefault: var(--color-chart-text-positive-default);
|
|
44
|
+
$colorChartTextNegativeDefault: var(--color-chart-text-negative-default);
|
|
45
|
+
$colorChartTextWarningDefault: var(--color-chart-text-warning-default);
|
|
46
|
+
$colorChartNeutral: var(--color-chart-neutral);
|
|
47
|
+
$colorChartNeutralSubtle: var(--color-chart-neutral-subtle);
|
|
48
|
+
$colorChartNeutralBold: var(--color-chart-neutral-bold);
|
|
49
|
+
$colorChartPositive: var(--color-chart-positive);
|
|
50
|
+
$colorChartPositiveSubtle: var(--color-chart-positive-subtle);
|
|
51
|
+
$colorChartPositiveBold: var(--color-chart-positive-bold);
|
|
52
|
+
$colorChartWarning: var(--color-chart-warning);
|
|
53
|
+
$colorChartWarningSubtle: var(--color-chart-warning-subtle);
|
|
54
|
+
$colorChartWarningBold: var(--color-chart-warning-bold);
|
|
55
|
+
$colorChartNegative: var(--color-chart-negative);
|
|
56
|
+
$colorChartNegativeSubtle: var(--color-chart-negative-subtle);
|
|
57
|
+
$colorChartNegativeBold: var(--color-chart-negative-bold);
|
|
58
|
+
$colorChartInfo: var(--color-chart-info);
|
|
59
|
+
$colorChartInfoSubtle: var(--color-chart-info-subtle);
|
|
60
|
+
$colorChartInfoBold: var(--color-chart-info-bold);
|
|
61
|
+
$colorChartAccent: var(--color-chart-accent);
|
|
62
|
+
$colorChartAccentSubtle: var(--color-chart-accent-subtle);
|
|
63
|
+
$colorChartAccentBold: var(--color-chart-accent-bold);
|
|
64
|
+
$colorMediaItemBackgroundBlack: var(--color-media-item-background-black);
|
|
65
|
+
$colorMediaItemBackgroundWhite: var(--color-media-item-background-white);
|
|
66
|
+
$colorMediaItemBackgroundTransparent: var(--color-media-item-background-transparent);
|
|
67
|
+
$colorMediaItemOverlayHover: var(--color-media-item-overlay-hover);
|
|
68
|
+
$colorMediaItemOverlayActive: var(--color-media-item-overlay-active);
|
|
69
|
+
$colorMediaItemCategoryIconBackgroundDefault: var(--color-media-item-category-icon-background-default);
|
|
70
|
+
$colorDestructiveTertiaryButtonBackgroundHover: var(--color-destructive-tertiary-button-background-hover);
|
|
71
|
+
$colorDestructiveTertiaryButtonBackgroundActive: var(--color-destructive-tertiary-button-background-active);
|
|
72
|
+
$colorQbankAnswerBackgroundTitleCorrectDefault: var(--color-qbank-answer-background-title-correct-default);
|
|
73
|
+
$colorQbankAnswerBackgroundTitleCorrectHover: var(--color-qbank-answer-background-title-correct-hover);
|
|
74
|
+
$colorQbankAnswerBackgroundTitleCorrectWithHintDefault: var(--color-qbank-answer-background-title-correct-with-hint-default);
|
|
75
|
+
$colorQbankAnswerBackgroundTitleCorrectWithHintHover: var(--color-qbank-answer-background-title-correct-with-hint-hover);
|
|
76
|
+
$colorQbankAnswerBackgroundTitleIncorrectDefault: var(--color-qbank-answer-background-title-incorrect-default);
|
|
77
|
+
$colorQbankAnswerBackgroundTitleIncorrectHover: var(--color-qbank-answer-background-title-incorrect-hover);
|
|
78
|
+
$colorQbankAnswerBackgroundExplanationCorrectDefault: var(--color-qbank-answer-background-explanation-correct-default);
|
|
79
|
+
$colorQbankAnswerBackgroundExplanationCorrectWithHintDefault: var(--color-qbank-answer-background-explanation-correct-with-hint-default);
|
|
80
|
+
$colorQbankAnswerBackgroundExplanationIncorrectDefault: var(--color-qbank-answer-background-explanation-incorrect-default);
|
|
81
|
+
$colorQbankAnswerBorderCorrectDefault: var(--color-qbank-answer-border-correct-default);
|
|
82
|
+
$colorQbankAnswerBorderCorrectWithHintDefault: var(--color-qbank-answer-border-correct-with-hint-default);
|
|
83
|
+
$colorQbankAnswerBorderIncorrectDefault: var(--color-qbank-answer-border-incorrect-default);
|
|
25
84
|
$colorCanvas: var(--color-canvas);
|
|
26
85
|
$colorBackgroundPrimary: var(--color-background-primary);
|
|
27
86
|
$colorBackgroundSecondary: var(--color-background-secondary);
|
|
@@ -123,49 +182,6 @@ $colorBorderSuccess: var(--color-border-success);
|
|
|
123
182
|
$colorDividerPrimary: var(--color-divider-primary);
|
|
124
183
|
$colorDividerSecondary: var(--color-divider-secondary);
|
|
125
184
|
$colorDividerSecondarySolid: var(--color-divider-secondarySolid);
|
|
126
|
-
$colorSegmentedProgressBarMonochrome: var(--color-segmented-progress-bar-monochrome);
|
|
127
|
-
$colorSegmentedProgressBarSuccess: var(--color-segmented-progress-bar-success);
|
|
128
|
-
$colorSegmentedProgressBarWarning: var(--color-segmented-progress-bar-warning);
|
|
129
|
-
$colorSegmentedProgressBarAlert: var(--color-segmented-progress-bar-alert);
|
|
130
|
-
$colorSegmentedProgressBarInProgress: var(--color-segmented-progress-bar-in-progress);
|
|
131
|
-
$colorQbankAnswerBackgroundTitleCorrectDefault: var(--color-qbank-answer-background-title-correct-default);
|
|
132
|
-
$colorQbankAnswerBackgroundTitleCorrectHover: var(--color-qbank-answer-background-title-correct-hover);
|
|
133
|
-
$colorQbankAnswerBackgroundTitleCorrectWithHintDefault: var(--color-qbank-answer-background-title-correct-with-hint-default);
|
|
134
|
-
$colorQbankAnswerBackgroundTitleCorrectWithHintHover: var(--color-qbank-answer-background-title-correct-with-hint-hover);
|
|
135
|
-
$colorQbankAnswerBackgroundTitleIncorrectDefault: var(--color-qbank-answer-background-title-incorrect-default);
|
|
136
|
-
$colorQbankAnswerBackgroundTitleIncorrectHover: var(--color-qbank-answer-background-title-incorrect-hover);
|
|
137
|
-
$colorQbankAnswerBackgroundExplanationCorrectDefault: var(--color-qbank-answer-background-explanation-correct-default);
|
|
138
|
-
$colorQbankAnswerBackgroundExplanationCorrectWithHintDefault: var(--color-qbank-answer-background-explanation-correct-with-hint-default);
|
|
139
|
-
$colorQbankAnswerBackgroundExplanationIncorrectDefault: var(--color-qbank-answer-background-explanation-incorrect-default);
|
|
140
|
-
$colorQbankAnswerBorderCorrectDefault: var(--color-qbank-answer-border-correct-default);
|
|
141
|
-
$colorQbankAnswerBorderCorrectWithHintDefault: var(--color-qbank-answer-border-correct-with-hint-default);
|
|
142
|
-
$colorQbankAnswerBorderIncorrectDefault: var(--color-qbank-answer-border-incorrect-default);
|
|
143
|
-
$colorChartBorder: var(--color-chart-border);
|
|
144
|
-
$colorChartGridPrimaryDefault: var(--color-chart-grid-primary-default);
|
|
145
|
-
$colorChartGridSecondaryDefault: var(--color-chart-grid-secondary-default);
|
|
146
|
-
$colorChartBackground: var(--color-chart-background);
|
|
147
|
-
$colorChartBackgroundInverted: var(--color-chart-background-inverted);
|
|
148
|
-
$colorChartTextPositiveDefault: var(--color-chart-text-positive-default);
|
|
149
|
-
$colorChartTextNegativeDefault: var(--color-chart-text-negative-default);
|
|
150
|
-
$colorChartTextWarningDefault: var(--color-chart-text-warning-default);
|
|
151
|
-
$colorChartNeutral: var(--color-chart-neutral);
|
|
152
|
-
$colorChartNeutralSubtle: var(--color-chart-neutral-subtle);
|
|
153
|
-
$colorChartNeutralBold: var(--color-chart-neutral-bold);
|
|
154
|
-
$colorChartPositive: var(--color-chart-positive);
|
|
155
|
-
$colorChartPositiveSubtle: var(--color-chart-positive-subtle);
|
|
156
|
-
$colorChartPositiveBold: var(--color-chart-positive-bold);
|
|
157
|
-
$colorChartWarning: var(--color-chart-warning);
|
|
158
|
-
$colorChartWarningSubtle: var(--color-chart-warning-subtle);
|
|
159
|
-
$colorChartWarningBold: var(--color-chart-warning-bold);
|
|
160
|
-
$colorChartNegative: var(--color-chart-negative);
|
|
161
|
-
$colorChartNegativeSubtle: var(--color-chart-negative-subtle);
|
|
162
|
-
$colorChartNegativeBold: var(--color-chart-negative-bold);
|
|
163
|
-
$colorChartInfo: var(--color-chart-info);
|
|
164
|
-
$colorChartInfoSubtle: var(--color-chart-info-subtle);
|
|
165
|
-
$colorChartInfoBold: var(--color-chart-info-bold);
|
|
166
|
-
$colorChartAccent: var(--color-chart-accent);
|
|
167
|
-
$colorChartAccentSubtle: var(--color-chart-accent-subtle);
|
|
168
|
-
$colorChartAccentBold: var(--color-chart-accent-bold);
|
|
169
185
|
$elevation1: var(--elevation-1);
|
|
170
186
|
$elevation2: var(--elevation-2);
|
|
171
187
|
$elevation3: var(--elevation-3);
|
|
@@ -189,6 +205,28 @@ $sizeSpacingM: 16px;
|
|
|
189
205
|
$sizeSpacingL: 24px;
|
|
190
206
|
$sizeSpacingXl: 32px;
|
|
191
207
|
$sizeSpacingXxl: 48px;
|
|
208
|
+
$sizeDimensionIconS: 16px;
|
|
209
|
+
$sizeDimensionIconM: 24px;
|
|
210
|
+
$sizeDimensionIconL: 48px;
|
|
211
|
+
$sizeDimensionCheckboxS: 16px;
|
|
212
|
+
$sizeDimensionCheckboxM: 24px;
|
|
213
|
+
$sizeDimensionRadioM: 24px;
|
|
214
|
+
$sizeDimensionRadioPointM: 10px;
|
|
215
|
+
$sizeDimensionToggleHeightS: 16px;
|
|
216
|
+
$sizeDimensionToggleHeightM: 24px;
|
|
217
|
+
$sizeDimensionToggleWidthS: 28px;
|
|
218
|
+
$sizeDimensionToggleWidthM: 40px;
|
|
219
|
+
$sizeDimensionTextareaMinHeightM: 36px;
|
|
220
|
+
$sizeDimensionTogglePointS: 8px;
|
|
221
|
+
$sizeDimensionTogglePointM: 16px;
|
|
222
|
+
$sizeDimensionToggleButtonHeightM: 32px;
|
|
223
|
+
$sizeDimensionDropdownMenuWidth: 120px;
|
|
224
|
+
$sizeDimensionModalWidthM: 560px;
|
|
225
|
+
$sizeDimensionModalWidthL: 720px;
|
|
226
|
+
$sizeDimensionModalMaxHeightL: 800px;
|
|
227
|
+
$sizeDimensionModalMarginL: 40px;
|
|
228
|
+
$sizeDimensionModalFullScreenContentWidth: 1280px;
|
|
229
|
+
$sizeDimensionMediaViewerBarSeparatorWidth: 1px;
|
|
192
230
|
$sizeBorderRadiusNone: 0px;
|
|
193
231
|
$sizeBorderRadiusXs: 4px;
|
|
194
232
|
$sizeBorderRadiusS: 8px;
|
|
@@ -206,11 +244,26 @@ $animationModalOpenDelay: 150ms;
|
|
|
206
244
|
$animationModalOpenTimingFunction: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
207
245
|
$animationModalBackdropOpenDuration: 300ms;
|
|
208
246
|
$animationModalBackdropOpenTimingFunction: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
247
|
+
$breakpointSmall: 576;
|
|
248
|
+
$breakpointMedium: 768;
|
|
249
|
+
$breakpointLarge: 1280;
|
|
250
|
+
$fontStyleItalic: italic;
|
|
209
251
|
$fontFamilyLato: Lato, "Apple Symbols", BlinkMacSystemFont, segoe ui, avenir next, avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, arial, sans-serif;
|
|
210
252
|
$opacityHidden: 0;
|
|
211
253
|
$opacityDisabled: 0.3;
|
|
212
254
|
$opacityHover: 0.6;
|
|
213
255
|
$opacityVisible: 1;
|
|
256
|
+
$spacingsZero: 0px;
|
|
257
|
+
$spacingsXxs: 4px;
|
|
258
|
+
$spacingsXs: 8px;
|
|
259
|
+
$spacingsS: 12px;
|
|
260
|
+
$spacingsM: 16px;
|
|
261
|
+
$spacingsL: 24px;
|
|
262
|
+
$spacingsXl: 32px;
|
|
263
|
+
$spacingsXxl: 48px;
|
|
264
|
+
$iconsS: 16px;
|
|
265
|
+
$iconsM: 24px;
|
|
266
|
+
$iconsL: 48px;
|
|
214
267
|
$weightNormal: 400;
|
|
215
268
|
$weightSemibold: 600;
|
|
216
269
|
$weightBold: 700;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amboss/design-system",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.1",
|
|
4
4
|
"description": "the design system for AMBOSS products",
|
|
5
5
|
"author": "AMBOSS",
|
|
6
6
|
"license": "ISC",
|
|
@@ -155,7 +155,6 @@
|
|
|
155
155
|
"@testing-library/jest-dom": "^6.5.0",
|
|
156
156
|
"@testing-library/react": "^16.0.1",
|
|
157
157
|
"@testing-library/user-event": "^14.5.2",
|
|
158
|
-
"@types/feather-icons": "^4.7.0",
|
|
159
158
|
"@types/jest": "^29.5.3",
|
|
160
159
|
"@types/react": "^18.3.5",
|
|
161
160
|
"@types/react-dom": "^18.3.0",
|
|
@@ -178,7 +177,6 @@
|
|
|
178
177
|
"eslint-plugin-prettier": "^4.2.1",
|
|
179
178
|
"eslint-plugin-react": "^7.20.0",
|
|
180
179
|
"eslint-plugin-react-hooks": "^4.0.4",
|
|
181
|
-
"feather-icons": "^4.29.0",
|
|
182
180
|
"html-webpack-plugin": "^5.5.0",
|
|
183
181
|
"http-server": "^14.1.1",
|
|
184
182
|
"husky": "^9.0.11",
|