@tui/design-system 1.3.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 (35) hide show
  1. package/CHANGELOG.md +74 -0
  2. package/dist/themes/crystalski/index.css +7 -1
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +7 -1
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +7 -1
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +18 -34
  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/lib/ratings-reviews/customer-review/_index.scss +3 -0
  17. package/scss/lib/ratings-reviews/customer-review/_mixins.scss +152 -0
  18. package/scss/lib/show-more-less/_mixins.scss +50 -61
  19. package/scss/lib/social-proofing/_index.scss +3 -0
  20. package/scss/lib/social-proofing/_mixins.scss +67 -0
  21. package/scss/lib/social-proofing/_variables.scss +8 -0
  22. package/scss/mixins.scss +3 -0
  23. package/scss/themes/crystalski/_colors.scss +2 -0
  24. package/scss/themes/crystalski/_overrides.scss +8 -0
  25. package/scss/themes/crystalski/index.scss +3 -0
  26. package/scss/themes/crystalski/theme.json +6 -0
  27. package/scss/themes/firstchoice/_colors.scss +2 -0
  28. package/scss/themes/firstchoice/_overrides.scss +8 -0
  29. package/scss/themes/firstchoice/index.scss +3 -0
  30. package/scss/themes/firstchoice/theme.json +6 -0
  31. package/scss/themes/tui/index.scss +3 -0
  32. package/scss/variables/_colors.scss +2 -0
  33. package/scss/variables/base-theme.json +45 -9
  34. package/scss/variables.scss +1 -0
  35. package/types/components.ts +43 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,79 @@
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
+
44
+ ## v1.4.0
45
+
46
+ ### Added
47
+
48
+ #### [Customer review](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-customer-review--docs)
49
+
50
+ - Added customer review component that displays individual customer reviews, including overall ratings, category breakdowns, and review content. This
51
+ component provides social proof and detailed feedback to help users make informed booking decisions.
52
+
53
+ #### [Social proofing](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-social-proofing--docs)
54
+
55
+ - Add social proofing messaging for displaying a type of status. It is used to reinforce credibility through evidence of other users’ behaviours.
56
+
57
+ ### Updated
58
+
59
+ #### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
60
+
61
+ - Text-only variant JavaScript made more robust in case markup other than text is included, e.g. within customer reviews.
62
+ - Text-only variant focus behaviour has been adjusted so focus is no longer moved on expand or collapse. This prevents screen readers from repeating
63
+ the content due to the combination of aria-live and focus transfer.
64
+ - Default variant focus transfer to the revealed content now waits for the expand animation to complete. This resolves an issue with NVDA where the
65
+ screen reader would not automatically begin reading the newly revealed content.
66
+ - Chevron icon after the show more/less button text is now included for both variants. Text-only originally did not include this icon.
67
+ - The show more/less link is now located below the truncated text for both variants. Previously it was located inline directly after the truncated
68
+ text for the text-only variant.
69
+
70
+ ### Fixed
71
+
72
+ #### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
73
+
74
+ - Fix for the erroneous additional spacing above the show more/less link.
75
+ - Fix for focus-state styling issue on text-only variant.
76
+
3
77
  ## v1.3.0
4
78
 
5
79
  ### 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);
@@ -447,6 +450,9 @@
447
450
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
448
451
  --uilib-skeleton-color: #d8d8d8;
449
452
  --uilib-skeleton-shimmer-color: #f5f5f5;
453
+ --uilib-social-proofing-radius: var(--uilib-border-radius-300);
454
+ --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
455
+ --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
450
456
  --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
451
457
  --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
452
458
  --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);
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","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);
@@ -454,6 +457,9 @@
454
457
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
455
458
  --uilib-skeleton-color: #e3e9e7;
456
459
  --uilib-skeleton-shimmer-color: #fff;
460
+ --uilib-social-proofing-radius: var(--uilib-border-radius-300);
461
+ --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
462
+ --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
457
463
  --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
458
464
  --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
459
465
  --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);
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","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);
@@ -470,6 +473,9 @@
470
473
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
471
474
  --uilib-skeleton-color: #dcdcdc;
472
475
  --uilib-skeleton-shimmer-color: #f5f5f5;
476
+ --uilib-social-proofing-radius: var(--uilib-border-radius-300);
477
+ --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
478
+ --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
473
479
  --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
474
480
  --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
475
481
  --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);
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","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.3.0",
3
+ "version": "1.5.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
@@ -47,7 +47,7 @@
47
47
  "ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
48
48
  "ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh",
49
49
  "scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
50
- "test:sass": "jest --verbose ./test/sass-true"
50
+ "test:sass": "node --experimental-vm-modules node_modules/.bin/jest --verbose ./test/sass-true"
51
51
  },
52
52
  "files": [
53
53
  "dist",
@@ -67,42 +67,29 @@
67
67
  "url": "git@ssh.source.tui:osp/browse/design-system/uilib.git"
68
68
  },
69
69
  "devDependencies": {
70
- "@babel/core": "^7.25.2",
71
- "@babel/eslint-parser": "^7.28.5",
72
- "@babel/preset-env": "^7.25.2",
73
- "@babel/preset-react": "^7.26.3",
74
- "@babel/preset-typescript": "^7.28.5",
75
70
  "@commitlint/cli": "^21.0.2",
76
71
  "@commitlint/config-conventional": "^21.0.2",
77
72
  "@eslint/compat": "^2.0.0",
78
73
  "@eslint/js": "^9.38.0",
79
74
  "@figma/code-connect": "^1.4.5",
80
75
  "@jest/globals": "^30.2.0",
81
- "@storybook/addon-a11y": "8.6.14",
82
- "@storybook/addon-docs": "8.6.14",
83
- "@storybook/addon-essentials": "8.6.14",
84
- "@storybook/addon-links": "8.6.14",
85
- "@storybook/addon-themes": "8.6.14",
86
- "@storybook/blocks": "8.6.14",
87
- "@storybook/html": "8.6.14",
88
- "@storybook/html-webpack5": "8.6.14",
89
- "@storybook/manager-api": "8.6.14",
90
- "@storybook/preview-api": "8.6.14",
91
- "@storybook/theming": "8.6.14",
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",
92
81
  "@stylistic/eslint-plugin": "^3.1.0",
93
82
  "@tui/cally": "^0.1.0",
94
83
  "@types/js-beautify": "^1.14.3",
95
84
  "@types/node": "^25.2.3",
96
85
  "@typescript-eslint/eslint-plugin": "^8.46.2",
97
86
  "@typescript-eslint/parser": "^8.46.2",
98
- "aws-cdk-lib": "^2.220.0",
99
- "babel-loader": "^10.0.0",
87
+ "aws-cdk-lib": "^2.259.0",
100
88
  "copyfiles": "^2.4.1",
101
- "css-loader": "7.1.3",
102
89
  "deepmerge": "^4.3.1",
103
90
  "dotenv": "^17.2.3",
104
91
  "dotenv-cli": "^11.0.0",
105
- "esbuild": "^0.28.0",
92
+ "esbuild": "^0.28.1",
106
93
  "eslint": "^9.38.0",
107
94
  "eslint-config-airbnb-extended": "^3.0.1",
108
95
  "eslint-config-prettier": "^10.0.1",
@@ -114,6 +101,7 @@
114
101
  "eslint-plugin-prettier": "^5.5.4",
115
102
  "eslint-plugin-react": "^7.37.5",
116
103
  "eslint-plugin-react-hooks": "^7.0.1",
104
+ "eslint-plugin-storybook": "10.4.5",
117
105
  "git-format-staged": "4.0.1",
118
106
  "glob": "^13.0.0",
119
107
  "globals": "^17.3.0",
@@ -123,33 +111,29 @@
123
111
  "lint-staged": "^17.0.2",
124
112
  "log-update": "^8.0.0",
125
113
  "node-fetch": "^3.3.2",
126
- "npm-run-all2": "^9.0.1",
114
+ "npm-run-all2": "^9.0.2",
115
+ "postcss-import": "^16.1.1",
116
+ "postcss-preset-env": "^11.3.1",
127
117
  "postcss-scss": "^4.0.6",
128
118
  "prettier": "^3.4.2",
129
119
  "remark-gfm": "^4.0.0",
130
- "sass": "^1.93.2",
131
- "sass-loader": "^16.0.4",
120
+ "sass": "^1.101.0",
132
121
  "sass-true": "^10.0.0",
133
122
  "shx": "0.4.0",
134
123
  "source-map-support": "^0.5.21",
135
- "storybook": "8.6.14",
136
- "storybook-addon-pseudo-states": "^4.0.3",
137
- "storybook-addon-tag-badges": "^1.4.0",
138
- "storybook-addon-turbo-build": "^2.0.1",
139
- "storybook-dark-mode": "^4.0.2",
140
- "storybook-preset-inline-svg": "^1.0.1",
141
- "style-loader": "4.0.0",
124
+ "storybook": "10.4.5",
125
+ "storybook-addon-pseudo-states": "10.4.5",
126
+ "storybook-addon-tag-badges": "^3.1.0",
127
+ "storybook-dark-mode": "^5.0.0",
142
128
  "stylelint": "^17.2.0",
143
129
  "stylelint-config-standard": "^40.0.0",
144
130
  "stylelint-config-standard-scss": "^17.0.0",
145
131
  "stylelint-order": "^8.1.1",
146
132
  "stylelint-scss": "^7.0.0",
147
133
  "stylelint-semantic-groups": "^1.2.1",
148
- "ts-loader": "^9.5.2",
149
134
  "ts-node": "^10.9.1",
150
135
  "typescript": "^6.0.3",
151
136
  "typescript-eslint": "^8.46.2",
152
- "webpack": "^5.102.1",
153
137
  "zod-validation-error": "^5.0.0"
154
138
  },
155
139
  "lint-staged": {
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/lib/ratings-reviews/customer-review/_index.scss ADDED
@@ -0,0 +1,3 @@
1
+ // rating customer review / index
2
+ @use 'mixins' as *;
3
+ @include uilib-ratings-customer-review;