@tui/design-system 1.4.0 → 1.5.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 (23) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/themes/crystalski/index.css +4 -1
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +4 -1
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +4 -1
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +14 -14
  9. package/scss/lib/alert/_mixins.scss +18 -1
  10. package/scss/lib/button/_mixins.scss +4 -0
  11. package/scss/lib/price/_mixins.scss +28 -8
  12. package/scss/lib/price/_variables.scss +2 -1
  13. package/scss/lib/price-box/_index.scss +2 -0
  14. package/scss/lib/price-box/_mixins.scss +58 -0
  15. package/scss/lib/promo-tag/_mixins.scss +11 -1
  16. package/scss/mixins.scss +1 -0
  17. package/scss/themes/crystalski/_colors.scss +2 -0
  18. package/scss/themes/crystalski/theme.json +6 -0
  19. package/scss/themes/firstchoice/_colors.scss +2 -0
  20. package/scss/themes/firstchoice/theme.json +6 -0
  21. package/scss/variables/_colors.scss +2 -0
  22. package/scss/variables/base-theme.json +25 -9
  23. package/types/components.ts +18 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,46 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.5.0
4
+
5
+ ### Added
6
+
7
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
8
+
9
+ - New colours added neutral statuses
10
+
11
+ #### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
12
+
13
+ - Added neutral variant with configurable icon. Suitable for general, non-urgent notices, system status, supplementary guidance, or informational
14
+ context that doesn't fit other categories.
15
+
16
+ #### [Button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-button--docs)
17
+
18
+ - Added class `uilib-button__visually-hidden` to aid in visually hiding additional text needed to make the button more descriptive. We use
19
+ visually-hidden text rather than `aria-label` because it is picked up by automatic translation services, ensuring all users receive an accessible
20
+ experience. `aria-label` is not translated by browser or third-party translation tools.
21
+
22
+ #### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
23
+
24
+ - Added support for an additional tooltip for providing a discount price breakdown.
25
+
26
+ #### [Price box](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price-box--docs)
27
+
28
+ - Added price box, a container component that groups pricing information with promotional tags, a CTA button, and optional footer content. Used in
29
+ search results, product cards, and booking flows to present a complete price-to-action unit.
30
+
31
+ ### Updated
32
+
33
+ #### [Input Stepper](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-stepper--docs)
34
+
35
+ - Interacting with the increase or decrease buttons now announces the updated value to screen readers via an `aria-live` region. No markup changes are
36
+ required — the live region is created and managed internally by the web component.
37
+
38
+ #### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
39
+
40
+ - Updated spacing within the price display to match the latest designs, i.e. adding a small amount of space between the currency and the price.
41
+ - Updated font style for small variant. New component token added: `--uilib-price-main-small-font`.
42
+ - Improved documentation including additional content guidelines, i.e. formatting examples for different locales.
43
+
3
44
  ## v1.4.0
4
45
 
5
46
  ### Added
package/dist/themes/crystalski/index.css CHANGED
@@ -46,10 +46,12 @@
46
46
  --uilib-color-status-danger-surface: #ffbfd3;
47
47
  --uilib-color-status-warning-surface: #fff4c4;
48
48
  --uilib-color-status-info-surface: #f6d5ff;
49
+ --uilib-color-status-neutral-surface: #f5f5f5;
49
50
  --uilib-color-status-success-icon: #00a57c;
50
51
  --uilib-color-status-danger-icon: #970030;
51
52
  --uilib-color-status-warning-icon: #998117;
52
53
  --uilib-color-status-info-icon: #84329b;
54
+ --uilib-color-status-neutral-icon: #252a32;
53
55
  --uilib-color-canvas-default: #fff;
54
56
  --uilib-color-canvas-contrast: #f5f5f5;
55
57
  --uilib-color-border-interaction: #84329b;
@@ -394,7 +396,8 @@
394
396
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
395
397
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
396
398
  --uilib-price-discount-color: var(--uilib-color-promotion);
397
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
399
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
400
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
398
401
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
399
402
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
400
403
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -47,10 +47,12 @@
47
47
  --uilib-color-status-danger-surface: #fbdbd9;
48
48
  --uilib-color-status-warning-surface: #fec;
49
49
  --uilib-color-status-info-surface: #faf5ed;
50
+ --uilib-color-status-neutral-surface: #e3e9e7;
50
51
  --uilib-color-status-success-icon: #81bc3c;
51
52
  --uilib-color-status-danger-icon: #a5261c;
52
53
  --uilib-color-status-warning-icon: #fa0;
53
54
  --uilib-color-status-info-icon: #002f17;
55
+ --uilib-color-status-neutral-icon: #3b4641;
54
56
  --uilib-color-canvas-default: #fff;
55
57
  --uilib-color-canvas-contrast: #faf5ed;
56
58
  --uilib-color-border-interaction: #d61d5f;
@@ -401,7 +403,8 @@
401
403
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
402
404
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
403
405
  --uilib-price-discount-color: var(--uilib-color-text-danger);
404
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
406
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
407
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
405
408
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
406
409
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
407
410
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -46,10 +46,12 @@
46
46
  --uilib-color-status-danger-surface: #fde2e3;
47
47
  --uilib-color-status-warning-surface: #ffefd6;
48
48
  --uilib-color-status-info-surface: #d8e2fd;
49
+ --uilib-color-status-neutral-surface: #f5f5f5;
49
50
  --uilib-color-status-success-icon: #2ba168;
50
51
  --uilib-color-status-danger-icon: #c00c12;
51
52
  --uilib-color-status-warning-icon: #cc7a00;
52
53
  --uilib-color-status-info-icon: #1b115c;
54
+ --uilib-color-status-neutral-icon: #4c4c4c;
53
55
  --uilib-color-canvas-default: #fff;
54
56
  --uilib-color-canvas-contrast: #f5f5f5;
55
57
  --uilib-color-border-interaction: #0c4bf3;
@@ -417,7 +419,8 @@
417
419
  --uilib-price-primary-font: var(--uilib-typography-component-heading-medium);
418
420
  --uilib-price-secondary-font: var(--uilib-typography-body-large);
419
421
  --uilib-price-discount-color: var(--uilib-color-promotion);
420
- --uilib-price-main-medium-font: var(--uilib-typography-component-heading-xlarge-strong);
422
+ --uilib-price-main-small-font: var(--uilib-typography-component-heading-medium-strong);
423
+ --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
421
424
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
422
425
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
423
426
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
package/dist/themes/tui/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -73,23 +73,23 @@
73
73
  "@eslint/js": "^9.38.0",
74
74
  "@figma/code-connect": "^1.4.5",
75
75
  "@jest/globals": "^30.2.0",
76
- "@storybook/addon-a11y": "10.4.3",
77
- "@storybook/addon-docs": "10.4.3",
78
- "@storybook/addon-links": "10.4.3",
79
- "@storybook/addon-themes": "10.4.3",
80
- "@storybook/html-vite": "10.4.3",
76
+ "@storybook/addon-a11y": "10.4.5",
77
+ "@storybook/addon-docs": "10.4.5",
78
+ "@storybook/addon-links": "10.4.5",
79
+ "@storybook/addon-themes": "10.4.5",
80
+ "@storybook/html-vite": "10.4.5",
81
81
  "@stylistic/eslint-plugin": "^3.1.0",
82
82
  "@tui/cally": "^0.1.0",
83
83
  "@types/js-beautify": "^1.14.3",
84
84
  "@types/node": "^25.2.3",
85
85
  "@typescript-eslint/eslint-plugin": "^8.46.2",
86
86
  "@typescript-eslint/parser": "^8.46.2",
87
- "aws-cdk-lib": "^2.220.0",
87
+ "aws-cdk-lib": "^2.259.0",
88
88
  "copyfiles": "^2.4.1",
89
89
  "deepmerge": "^4.3.1",
90
90
  "dotenv": "^17.2.3",
91
91
  "dotenv-cli": "^11.0.0",
92
- "esbuild": "^0.28.0",
92
+ "esbuild": "^0.28.1",
93
93
  "eslint": "^9.38.0",
94
94
  "eslint-config-airbnb-extended": "^3.0.1",
95
95
  "eslint-config-prettier": "^10.0.1",
@@ -101,7 +101,7 @@
101
101
  "eslint-plugin-prettier": "^5.5.4",
102
102
  "eslint-plugin-react": "^7.37.5",
103
103
  "eslint-plugin-react-hooks": "^7.0.1",
104
- "eslint-plugin-storybook": "10.4.3",
104
+ "eslint-plugin-storybook": "10.4.5",
105
105
  "git-format-staged": "4.0.1",
106
106
  "glob": "^13.0.0",
107
107
  "globals": "^17.3.0",
@@ -111,18 +111,18 @@
111
111
  "lint-staged": "^17.0.2",
112
112
  "log-update": "^8.0.0",
113
113
  "node-fetch": "^3.3.2",
114
- "npm-run-all2": "^9.0.1",
114
+ "npm-run-all2": "^9.0.2",
115
115
  "postcss-import": "^16.1.1",
116
- "postcss-preset-env": "^11.3.0",
116
+ "postcss-preset-env": "^11.3.1",
117
117
  "postcss-scss": "^4.0.6",
118
118
  "prettier": "^3.4.2",
119
119
  "remark-gfm": "^4.0.0",
120
- "sass": "^1.93.2",
120
+ "sass": "^1.101.0",
121
121
  "sass-true": "^10.0.0",
122
122
  "shx": "0.4.0",
123
123
  "source-map-support": "^0.5.21",
124
- "storybook": "10.4.3",
125
- "storybook-addon-pseudo-states": "^10.4.3",
124
+ "storybook": "10.4.5",
125
+ "storybook-addon-pseudo-states": "10.4.5",
126
126
  "storybook-addon-tag-badges": "^3.1.0",
127
127
  "storybook-dark-mode": "^5.0.0",
128
128
  "stylelint": "^17.2.0",
package/scss/lib/alert/_mixins.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Alert / _mixins
2
- @use '../grid/mixins' as *;
3
2
  @use '../utility/mixins' as *;
3
+ @use '../icon/mixins' as *;
4
4
 
5
5
  $uilib-alert-included: false !default;
6
6
 
@@ -9,6 +9,7 @@ $uilib-alert-included: false !default;
9
9
  @if not $uilib-alert-included {
10
10
  $uilib-alert-included: true !global;
11
11
 
12
+ @include uilib-icon;
12
13
  @include uilib-alert-master;
13
14
  }
14
15
  }
@@ -54,6 +55,12 @@ $uilib-alert-included: false !default;
54
55
  -webkit-mask-image: var(--uilib-alert-icon-info-mask);
55
56
  mask-image: var(--uilib-alert-icon-info-mask);
56
57
  }
58
+
59
+ &__icon {
60
+ position: absolute;
61
+ top: var(--uilib-spacing-300);
62
+ left: var(--uilib-spacing-300);
63
+ }
57
64
  }
58
65
 
59
66
  .uilib-alert--error {
@@ -92,6 +99,16 @@ $uilib-alert-included: false !default;
92
99
  }
93
100
  }
94
101
 
102
+ .uilib-alert--neutral {
103
+ border-color: var(--uilib-color-status-neutral-icon);
104
+
105
+ background: var(--uilib-color-status-neutral-surface);
106
+
107
+ &::before {
108
+ display: none;
109
+ }
110
+ }
111
+
95
112
  .uilib-alert__heading {
96
113
  font: var(--uilib-typography-component-heading-small-strong);
97
114
  text-wrap: initial;
package/scss/lib/button/_mixins.scss CHANGED
@@ -164,6 +164,10 @@ $uilib-button-included: false !default;
164
164
  .uilib-button--width-restrict {
165
165
  width: auto;
166
166
  }
167
+
168
+ .uilib-button__visually-hidden {
169
+ @include uilib-visually-hidden;
170
+ }
167
171
  }
168
172
 
169
173
  $uilib-button-list-included: false !default;
package/scss/lib/price/_mixins.scss CHANGED
@@ -29,33 +29,54 @@ $uilib-price-included: false !default;
29
29
  &__content {
30
30
  display: flex;
31
31
  flex-wrap: wrap;
32
- gap: 0 var(--uilib-spacing-200);
32
+ gap: 0;
33
33
  align-items: baseline;
34
34
  }
35
35
 
36
36
  // Prefix element
37
37
  &__prefix {
38
- margin-right: var(--uilib-spacing-050);
38
+ margin-right: var(--uilib-spacing-100);
39
39
 
40
40
  font: var(--uilib-price-primary-font);
41
41
  }
42
42
 
43
43
  // Currency element
44
44
  &__currency,
45
- &__main-unit,
46
45
  &__sub-unit,
47
46
  &__suffix {
48
47
  font: var(--uilib-price-primary-font);
49
- font-weight: var(--uilib-font-weight-bold);
48
+ }
49
+
50
+ &__main-unit {
51
+ font: var(--uilib-price-main-small-font);
50
52
  }
51
53
 
52
54
  &__prefix,
53
55
  &__currency,
54
56
  &__main-unit,
55
57
  &__sub-unit,
56
- &__suffix {
57
- &:not(:first-child) {
58
- margin-left: calc(var(--uilib-spacing-200) * -1);
58
+ &__suffix,
59
+ &__discount-tooltip,
60
+ &__original-price {
61
+ &:has(+ .uilib-price__original-price),
62
+ &:has(+ .uilib-price__discount) {
63
+ margin-right: var(--uilib-spacing-200);
64
+ }
65
+ }
66
+
67
+ &__currency,
68
+ &__main-unit,
69
+ &__sub-unit {
70
+ &:has(+ .uilib-price__currency),
71
+ &:has(+ .uilib-price__suffix) {
72
+ margin-right: var(--uilib-spacing-100);
73
+ }
74
+ }
75
+
76
+ &__currency {
77
+ &:has(+ .uilib-price__main-unit),
78
+ &:has(+ .uilib-price__sub-unit) {
79
+ margin-right: var(--uilib-spacing-100);
59
80
  }
60
81
  }
61
82
 
@@ -67,7 +88,6 @@ $uilib-price-included: false !default;
67
88
  // Discount element
68
89
  &__discount {
69
90
  color: var(--uilib-price-discount-color);
70
- font-weight: var(--uilib-font-weight-bold);
71
91
  }
72
92
 
73
93
  &__total {
package/scss/lib/price/_variables.scss CHANGED
@@ -4,7 +4,8 @@ $uilib-price-variables: (
4
4
  primary-font: var(--uilib-typography-component-heading-medium),
5
5
  secondary-font: var(--uilib-typography-body-large),
6
6
  discount-color: var(--uilib-color-promotion),
7
- main-medium-font: var(--uilib-typography-component-heading-xlarge-strong),
7
+ main-small-font: var(--uilib-typography-component-heading-medium-strong),
8
+ main-medium-font: var(--uilib-typography-component-heading-large-strong),
8
9
  main-large-font: var(--uilib-typography-component-heading-xxlarge-strong),
9
10
  sub-large-font: var(--uilib-typography-component-heading-medium-strong),
10
11
  ) !default;
package/scss/lib/price-box/_index.scss ADDED
@@ -0,0 +1,2 @@
1
+ @use 'mixins' as *;
2
+ @include uilib-price-box;
package/scss/lib/price-box/_mixins.scss ADDED
@@ -0,0 +1,58 @@
1
+ // Price Box / _mixins
2
+ @use '../button/mixins' as *;
3
+ @use '../divider/mixins' as *;
4
+ @use '../price/mixins' as *;
5
+ @use '../link/mixins' as *;
6
+ @use '../promo-tag/mixins' as *;
7
+
8
+ $uilib-price-box-included: false !default;
9
+
10
+ @mixin uilib-price-box() {
11
+ @if not $uilib-price-box-included {
12
+ $uilib-price-box-included: true !global;
13
+
14
+ @include uilib-button;
15
+ @include uilib-divider;
16
+ @include uilib-price;
17
+ @include uilib-link;
18
+ @include uilib-promo-tag;
19
+ @include uilib-promo-tag-list;
20
+ @include uilib-price-box-master;
21
+ }
22
+ }
23
+
24
+ @mixin uilib-price-box-master() {
25
+ .uilib-price-box {
26
+ display: flex;
27
+ flex-flow: column;
28
+ gap: var(--uilib-spacing-200);
29
+
30
+ &__tags,
31
+ &__tags.uilib-promo-tag-list {
32
+ margin: 0;
33
+ }
34
+
35
+ &__price {
36
+ display: flex;
37
+ flex-flow: row wrap;
38
+ gap: var(--uilib-spacing-200);
39
+ justify-content: space-between;
40
+ align-items: flex-start;
41
+ }
42
+
43
+ &__divider,
44
+ &__divider.uilib-divider {
45
+ margin: 0;
46
+ }
47
+
48
+ &__text {
49
+ color: var(--uilib-color-text-body);
50
+ font: var(--uilib-typography-body-small);
51
+
52
+ strong {
53
+ color: var(--uilib-color-text-strong);
54
+ font: var(--uilib-typography-body-small-strong);
55
+ }
56
+ }
57
+ }
58
+ }
package/scss/lib/promo-tag/_mixins.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  @use '../icon/mixins' as *;
4
4
 
5
5
  $uilib-promo-tag-included: false !default;
6
+ $uilib-promo-tag-list-included: false !default;
6
7
 
7
8
  // Builds promo tag
8
9
  @mixin uilib-promo-tag() {
@@ -14,6 +15,15 @@ $uilib-promo-tag-included: false !default;
14
15
  }
15
16
  }
16
17
 
18
+ @mixin uilib-promo-tag-list() {
19
+ @if not $uilib-promo-tag-list-included {
20
+ $uilib-promo-tag-list-included: true !global;
21
+
22
+ @include uilib-promo-tag;
23
+ @include uilib-promo-tag-list-master;
24
+ }
25
+ }
26
+
17
27
  @mixin uilib-promo-tag-master() {
18
28
  .uilib-promo-tag {
19
29
  display: flex;
@@ -63,7 +73,7 @@ $uilib-promo-tag-included: false !default;
63
73
  }
64
74
  }
65
75
 
66
- @mixin uilib-promo-tag-list() {
76
+ @mixin uilib-promo-tag-list-master() {
67
77
  .uilib-promo-tag-list {
68
78
  display: flex;
69
79
  flex-flow: row wrap;
package/scss/mixins.scss CHANGED
@@ -35,6 +35,7 @@
35
35
  @forward 'lib/media-button/mixins';
36
36
  @forward 'lib/pagination/mixins';
37
37
  @forward 'lib/price/mixins';
38
+ @forward 'lib/price-box/mixins';
38
39
  @forward 'lib/promo-tag/mixins';
39
40
  @forward 'lib/ratings-reviews/customer-review/mixins';
40
41
  @forward 'lib/ratings-reviews/numerical/mixins';
package/scss/themes/crystalski/_colors.scss CHANGED
@@ -21,10 +21,12 @@ $uilib-color-semantic-crystalski: (
21
21
  status-danger-surface: map.get($uilib-crystalski-primitives, 'color-red-20'),
22
22
  status-warning-surface: map.get($uilib-crystalski-primitives, 'color-yellow-20'),
23
23
  status-info-surface: map.get($uilib-crystalski-primitives, 'color-purple-20'),
24
+ status-neutral-surface: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
24
25
  status-success-icon: map.get($uilib-crystalski-primitives, 'color-green-80'),
25
26
  status-danger-icon: map.get($uilib-crystalski-primitives, 'color-red-80'),
26
27
  status-warning-icon: map.get($uilib-crystalski-primitives, 'color-yellow-80'),
27
28
  status-info-icon: map.get($uilib-crystalski-primitives, 'color-purple-80'),
29
+ status-neutral-icon: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
28
30
  canvas-default: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
29
31
  canvas-contrast: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
30
32
  canvas-footer: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
package/scss/themes/crystalski/theme.json CHANGED
@@ -61,6 +61,9 @@
61
61
  "color-status-info-surface": {
62
62
  "primitive": "color-purple-20"
63
63
  },
64
+ "color-status-neutral-surface": {
65
+ "primitive": "color-neutral-20"
66
+ },
64
67
  "color-status-success-icon": {
65
68
  "primitive": "color-green-80",
66
69
  "darkColor": false,
@@ -74,6 +77,9 @@
74
77
  },
75
78
  "color-status-info-icon": {
76
79
  "primitive": "color-purple-80"
80
+ },
81
+ "color-status-neutral-icon": {
82
+ "primitive": "color-neutral-90"
77
83
  }
78
84
  }
79
85
  },
package/scss/themes/firstchoice/_colors.scss CHANGED
@@ -22,10 +22,12 @@ $uilib-color-semantic-firstchoice: (
22
22
  status-danger-surface: map.get($uilib-firstchoice-primitives, 'color-red-20'),
23
23
  status-warning-surface: map.get($uilib-firstchoice-primitives, 'color-orange-20'),
24
24
  status-info-surface: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
25
+ status-neutral-surface: map.get($uilib-firstchoice-primitives, 'color-neutral-20'),
25
26
  status-success-icon: map.get($uilib-firstchoice-primitives, 'color-greenmoss-70'),
26
27
  status-danger-icon: map.get($uilib-firstchoice-primitives, 'color-red-80'),
27
28
  status-warning-icon: map.get($uilib-firstchoice-primitives, 'color-orange-60'),
28
29
  status-info-icon: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
30
+ status-neutral-icon: map.get($uilib-firstchoice-primitives, 'color-neutral-90'),
29
31
  canvas-default: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
30
32
  canvas-contrast: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
31
33
  border-interaction: map.get($uilib-firstchoice-primitives, 'color-pink-70'),
package/scss/themes/firstchoice/theme.json CHANGED
@@ -66,6 +66,9 @@
66
66
  "color-status-info-surface": {
67
67
  "primitive": "color-sand-30"
68
68
  },
69
+ "color-status-neutral-surface": {
70
+ "primitive": "color-neutral-20"
71
+ },
69
72
  "color-status-success-icon": {
70
73
  "primitive": "color-greenmoss-70",
71
74
  "lowContrast": false
@@ -79,6 +82,9 @@
79
82
  },
80
83
  "color-status-info-icon": {
81
84
  "primitive": "color-greenpalm-100"
85
+ },
86
+ "color-status-neutral-icon": {
87
+ "primitive": "color-neutral-90"
82
88
  }
83
89
  }
84
90
  },
package/scss/variables/_colors.scss CHANGED
@@ -22,10 +22,12 @@ $uilib-color-semantic: (
22
22
  status-danger-surface: map.get($uilib-primitives, 'color-red-20'),
23
23
  status-warning-surface: map.get($uilib-primitives, 'color-orange-20'),
24
24
  status-info-surface: map.get($uilib-primitives, 'color-blue-20'),
25
+ status-neutral-surface: map.get($uilib-primitives, 'color-neutral-20'),
25
26
  status-success-icon: map.get($uilib-primitives, 'color-green-80'),
26
27
  status-danger-icon: map.get($uilib-primitives, 'color-red-80'),
27
28
  status-warning-icon: map.get($uilib-primitives, 'color-orange-80'),
28
29
  status-info-icon: map.get($uilib-primitives, 'color-blue-100'),
30
+ status-neutral-icon: map.get($uilib-primitives, 'color-neutral-90'),
29
31
  canvas-default: map.get($uilib-primitives, 'color-neutral-10'),
30
32
  canvas-contrast: map.get($uilib-primitives, 'color-neutral-20'),
31
33
  border-interaction: map.get($uilib-primitives, 'color-blue-70'),
package/scss/variables/base-theme.json CHANGED
@@ -89,6 +89,10 @@
89
89
  "primitive": "color-blue-20",
90
90
  "title": "Status info surface"
91
91
  },
92
+ "color-status-neutral-surface": {
93
+ "primitive": "color-neutral-20",
94
+ "title": "Status neutral surface"
95
+ },
92
96
  "color-status-success-icon": {
93
97
  "primitive": "color-green-80",
94
98
  "title": "Status sucess icon",
@@ -108,6 +112,11 @@
108
112
  "primitive": "color-blue-100",
109
113
  "title": "Status info icon",
110
114
  "darkColor": true
115
+ },
116
+ "color-status-neutral-icon": {
117
+ "primitive": "color-neutral-90",
118
+ "title": "Status neutral icon",
119
+ "darkColor": true
111
120
  }
112
121
  }
113
122
  },
@@ -2042,14 +2051,14 @@
2042
2051
  "displayType": "color"
2043
2052
  },
2044
2053
  "price-primary-font": {
2045
- "primitive": "uilib-font-family-lead",
2054
+ "primitive": "uilib-typography-component-heading-medium",
2046
2055
  "title": "Primary price font",
2047
2056
  "description": "Primary price font",
2048
2057
  "displayType": "font",
2049
2058
  "longValue": true
2050
2059
  },
2051
2060
  "price-secondary-font": {
2052
- "primitive": "uilib-font-family-base",
2061
+ "primitive": "uilib-typography-body-large",
2053
2062
  "title": "Secondary price font",
2054
2063
  "description": "Secondary price font",
2055
2064
  "displayType": "font",
@@ -2061,23 +2070,30 @@
2061
2070
  "description": "Discount colour",
2062
2071
  "displayType": "color"
2063
2072
  },
2073
+ "price-main-small-font": {
2074
+ "primitive": "uilib-typography-component-heading-medium-strong",
2075
+ "title": "Main price unit for small variant",
2076
+ "description": "Main price unit for small variant",
2077
+ "displayType": "font",
2078
+ "longValue": true
2079
+ },
2064
2080
  "price-main-medium-font": {
2065
- "primitive": "uilib-typography-component-heading-xlarge-strong",
2066
- "title": "Main price unit for Medium variant",
2067
- "description": "Main price unit for Medium variant",
2081
+ "primitive": "uilib-typography-component-heading-large-strong",
2082
+ "title": "Main price unit for medium variant",
2083
+ "description": "Main price unit for medium variant",
2068
2084
  "displayType": "font",
2069
2085
  "longValue": true
2070
2086
  },
2071
2087
  "price-main-large-font": {
2072
2088
  "primitive": "uilib-typography-component-heading-xxlarge-strong",
2073
- "title": "Main unit font for Medium variant",
2074
- "description": "Main unit font for Medium variant",
2089
+ "title": "Main unit font for large variant",
2090
+ "description": "Main unit font for large variant",
2075
2091
  "displayType": "font"
2076
2092
  },
2077
2093
  "price-sub-large-font": {
2078
2094
  "primitive": "uilib-typography-component-heading-medium-strong",
2079
- "title": "Sub unit font for Large variant",
2080
- "description": "Sub unit font for Large variant",
2095
+ "title": "Sub unit font for large variant",
2096
+ "description": "Sub unit font for large variant",
2081
2097
  "displayType": "font",
2082
2098
  "longValue": true
2083
2099
  }
package/types/components.ts CHANGED
@@ -40,7 +40,8 @@ export interface ActiveTagProps {
40
40
 
41
41
  // ─── Alert ─────────────────────────────────────────────
42
42
  export interface AlertProps {
43
- variant?: 'info' | 'error' | 'warning' | 'success';
43
+ variant?: 'info' | 'error' | 'warning' | 'success' | 'neutral';
44
+ iconAsset?: string;
44
45
  list?: boolean;
45
46
  heading?: boolean;
46
47
  headingText?: string;
@@ -435,9 +436,12 @@ export interface PaginationProps {
435
436
  }
436
437
 
437
438
  // ─── Price ─────────────────────────────────────────────
439
+ export const Currencies = ['GBP', 'EUR', 'USD', 'SEK', 'NOK', 'DKK', 'CHF'] as const;
440
+ export type Currency = (typeof Currencies)[number];
441
+
438
442
  export interface PriceProps {
439
443
  size?: 'small' | 'medium' | 'large';
440
- currency?: 'GBP' | 'EUR' | 'USD' | 'SEK' | 'NOK' | 'DKK';
444
+ currency?: Currency;
441
445
  mainUnit?: string;
442
446
  subUnit?: string;
443
447
  suffix?: string;
@@ -450,6 +454,18 @@ export interface PriceProps {
450
454
  showDecimal?: boolean;
451
455
  }
452
456
 
457
+ // ─── Price Box ──────────────────────────────────────────
458
+ export interface PriceBoxProps {
459
+ tags?: boolean;
460
+ currency?: Currency;
461
+ fullWidthButton?: boolean;
462
+ additionalContent?: boolean;
463
+ additionalContentHtml?: string;
464
+ divider?: boolean;
465
+ footer?: boolean;
466
+ footerHtml?: string;
467
+ }
468
+
453
469
  // ─── Promo Tag ──────────────────────────────────────────
454
470
  export const PromoTagSizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'] as const;
455
471
  export type PromoTagSize = (typeof PromoTagSizes)[number];