@amboss/design-system 3.2.0 → 3.3.0

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 (21) hide show
  1. package/build/cjs/components/AccessCardItem/AccessCardItem.d.ts +25 -0
  2. package/build/cjs/components/AccessCardItem/AccessCardItem.js +1 -0
  3. package/build/cjs/components/Notification/Notification.d.ts +2 -2
  4. package/build/cjs/components/Notification/Notification.js +1 -1
  5. package/build/cjs/index.d.ts +1 -0
  6. package/build/cjs/index.js +1 -1
  7. package/build/cjs/web-tokens/_colors.json +848 -825
  8. package/build/cjs/web-tokens/visualConfig.d.ts +157 -157
  9. package/build/cjs/web-tokens/visualConfig.js +1 -1
  10. package/build/esm/components/AccessCardItem/AccessCardItem.d.ts +25 -0
  11. package/build/esm/components/AccessCardItem/AccessCardItem.js +1 -0
  12. package/build/esm/components/Notification/Notification.d.ts +2 -2
  13. package/build/esm/components/Notification/Notification.js +1 -1
  14. package/build/esm/index.d.ts +1 -0
  15. package/build/esm/index.js +1 -1
  16. package/build/esm/web-tokens/_colors.json +848 -825
  17. package/build/esm/web-tokens/visualConfig.d.ts +157 -157
  18. package/build/esm/web-tokens/visualConfig.js +1 -1
  19. package/build/scss/_theming.scss +118 -86
  20. package/build/scss/_variables.scss +96 -43
  21. 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;
package/build/scss/_variables.scss CHANGED
@@ -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.2.0",
3
+ "version": "3.3.0",
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",