@tui/design-system 0.2.0 → 1.1.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 (36) hide show
  1. package/CHANGELOG.md +83 -0
  2. package/dist/themes/crystalski/index.css +6 -5
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +6 -5
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +9 -5
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +20 -14
  9. package/scss/lib/button/_mixins.scss +2 -0
  10. package/scss/lib/cards/selectable/_mixins.scss +135 -80
  11. package/scss/lib/cards/selectable/_variables.scss +0 -2
  12. package/scss/lib/flyout-dropdown/_mixins.scss +130 -59
  13. package/scss/lib/flyout-dropdown/_variables.scss +7 -0
  14. package/scss/lib/forms/input-checkbox/_mixins.scss +4 -0
  15. package/scss/lib/forms/input-chip/_mixins.scss +17 -27
  16. package/scss/lib/forms/input-chip/_variables.scss +0 -1
  17. package/scss/lib/forms/input-radio/_mixins.scss +4 -0
  18. package/scss/lib/forms/input-switch/_mixins.scss +1 -1
  19. package/scss/lib/grid/_mixins.scss +5 -3
  20. package/scss/lib/media-button/_mixins.scss +7 -0
  21. package/scss/lib/modal/_mixins.scss +3 -12
  22. package/scss/lib/ratings-reviews/range-bar/_variables.scss +1 -1
  23. package/scss/lib/scroller/_mixins.scss +9 -4
  24. package/scss/themes/crystalski/_overrides.scss +8 -0
  25. package/scss/themes/crystalski/index.scss +3 -0
  26. package/scss/themes/firstchoice/_overrides.scss +8 -0
  27. package/scss/themes/firstchoice/index.scss +3 -0
  28. package/scss/themes/tui/_colors.scss +3 -2
  29. package/scss/themes/tui/_primitives.scss +3 -0
  30. package/scss/themes/tui/index.scss +3 -0
  31. package/scss/themes/tui/theme.json +12 -0
  32. package/scss/variables/_colors.scss +4 -1
  33. package/scss/variables/_primitives.scss +3 -1
  34. package/scss/variables/base-theme.json +23 -16
  35. package/scss/variables.scss +1 -0
  36. package/types/components.ts +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,88 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.1.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
+ - Added two new TripAdvisor brand colours `--uilib-color-brand-tripadvisor-pine-green` and `--uilib-color-brand-tripadvisor-inverse`.
10
+ - Added three new promotional colours for TUI theme `--uilib-color-promotion-smiles-level-1`, `--uilib-color-promotion-smiles-level-2` and
11
+ `--uilib-color-promotion-smiles-level-3`.
12
+
13
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
14
+
15
+ - Added the flyout component is an overlay panel that emerges from a control like a button or menu item. The flyout is shown on-click/tap of the
16
+ control and is used primarily on desktop and tablet devices.
17
+
18
+ ### Updated
19
+
20
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
21
+
22
+ - TripAdvisor brand colour has been updated from `#00aa6c` to `#00b747` to match latest TripAdvisor branding.
23
+
24
+ #### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
25
+
26
+ - Changed disabled state text colour to `--uilib-color-text-body` to match other disabled form elements.
27
+ - Added support for images at the top of selectable cards, with optional media button and tag overlays.
28
+ - Switched from border to outline to prevent layout shift on state change, particularly when an image is included.
29
+
30
+ | New class | Description |
31
+ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
32
+ | uilib-card-selectable\_\_image-container | Image container that also controls positioning for info tags and media buttons overlaying the image. Must be placed before `uilib-card__content-container`. |
33
+ | uilib-card-selectable\_\_image | Base style for the image displayed at the top of the card. |
34
+ | uilib-card-selectable\_\_tag | Positions an info tag at the top left of the card, overlapping the card edge. |
35
+ | uilib-card-selectable\_\_media-button | Positions a media button at the bottom left over the card image. |
36
+
37
+ #### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs) and [Input radio](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio--docs)
38
+
39
+ - Changed disabled state text colour to `--uilib-color-text-body` to match other disabled form elements.
40
+
41
+ #### [Media button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-button--docs)
42
+
43
+ - Added disabled state support and styling.
44
+
45
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
46
+
47
+ - Remove style overwrites for scroller, use default scroller styles.
48
+ - Added ability to update the aria-label for the scrollable area used within the modal via the property `scroller-aria-label` on the web component.
49
+
50
+ #### [Scroller](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-scroller--docs)
51
+
52
+ - Scroller works with display flex.
53
+ - Added ability to update the aria-label value for `uilib-scroller__inner` after initial setup; particularly for use if included within another web
54
+ component's template. To be able to update the aria-label simply set `scroller-aria-label` on the scroller web component.
55
+
56
+ ```html
57
+ <tui-uilib-scroller scroller-aria-label="{New scrollable aria label}">
58
+ <div class="uilib-scroller__inner">...</div>
59
+ </tui-uilib-scroller>
60
+ ```
61
+
62
+ - Added ability to use a different role value, e.g. `group`, on `uilib-scroller__inner` if needed within a flyout or modal.
63
+ - Added ability to set the role at web component level for when the scroller is used within another web component, i.e. modal. To set the role, use
64
+ `scroller-role` on the web component.
65
+
66
+ ```html
67
+ <tui-uilib-scroller scroller-role="group">
68
+ <div class="uilib-scroller__inner">...</div>
69
+ </tui-uilib-scroller>
70
+ ```
71
+
72
+ ### Fixed
73
+
74
+ #### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
75
+
76
+ - Fixed unwanted extra spacing when used inside a selectable card list.
77
+ - Fixed focus state missing when the radio input was hidden.
78
+
79
+ ### Deprecated
80
+
81
+ #### [Global colours](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-colors--docs)
82
+
83
+ - `--uilib-color-brand-trip-advisor` has been deprecated and replaced with `--uilib-color-brand-tripadvisor` to correctly match TripAdvisor brand
84
+ naming.
85
+
3
86
  ## v1.0.0
4
87
 
5
88
  v1.0.0 introduces a complete overhaul of our token system, a shift to CSS Grid, and the adoption of Native HTML elements for complex components like
package/dist/themes/crystalski/index.css CHANGED
@@ -68,9 +68,12 @@
68
68
  --uilib-color-other-button-hover-state: #fff;
69
69
  --uilib-color-other-secondary-button-hover-state: rgba(132, 50, 155, 0.1);
70
70
  --uilib-color-other-skeleton-loading: #d8d8d8;
71
- --uilib-color-brand-trip-advisor: #00aa6c;
71
+ --uilib-color-brand-tripadvisor: #00b747;
72
+ --uilib-color-brand-tripadvisor-pine-green: #002b11;
73
+ --uilib-color-brand-tripadvisor-inverse: #00eb5b;
72
74
  --uilib-color-brand-paypal: #253b80;
73
75
  --uilib-color-other-scroll-handle: #a3a3a3;
76
+ --uilib-color-brand-trip-advisor: #00b747;
74
77
  --uilib-color-canvas-footer: #252a32;
75
78
  --uilib-color-border-brand: #00ce9b;
76
79
  --uilib-elevation-none: none;
@@ -237,11 +240,10 @@
237
240
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
238
241
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
239
242
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
240
- --uilib-card-selectable-disabled-text-color: var(--uilib-color-other-disabled-soft);
241
- --uilib-card-selectable-disabled-bg-color: var(--uilib-color-core-neutral);
242
243
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-filled.svg");
243
244
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-corner-solid.svg");
244
245
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
246
+ --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
245
247
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
246
248
  --uilib-datepicker-icon-next: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
247
249
  --uilib-datepicker-color-date-text-selected: var(--uilib-color-text-inverse);
@@ -263,7 +265,6 @@
263
265
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
264
266
  --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
265
267
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
266
- --uilib-input-chip-disabled-text-color: var(--uilib-color-other-disabled-soft);
267
268
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
268
269
  --uilib-input-count-radius: var(--uilib-border-radius-100);
269
270
  --uilib-input-count-bg-color: var(--uilib-color-canvas-default);
@@ -424,7 +425,7 @@
424
425
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
425
426
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
426
427
  --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
427
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor);
428
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
428
429
  --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
429
430
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
430
431
  --uilib-scroller-thumb-size: var(--uilib-spacing-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;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","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;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","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -69,9 +69,12 @@
69
69
  --uilib-color-other-button-hover-state: #ffd4e4;
70
70
  --uilib-color-other-secondary-button-hover-state: #faf5ed;
71
71
  --uilib-color-other-skeleton-loading: #e3e9e7;
72
- --uilib-color-brand-trip-advisor: #00aa6c;
72
+ --uilib-color-brand-tripadvisor: #00b747;
73
+ --uilib-color-brand-tripadvisor-pine-green: #002b11;
74
+ --uilib-color-brand-tripadvisor-inverse: #00eb5b;
73
75
  --uilib-color-brand-paypal: #253b80;
74
76
  --uilib-color-other-scroll-handle: #9faca7;
77
+ --uilib-color-brand-trip-advisor: #00b747;
75
78
  --uilib-color-text-tooltip: #002f17;
76
79
  --uilib-color-border-insider: #8380f7;
77
80
  --uilib-color-promotion-free-kids: #cee8e0;
@@ -244,11 +247,10 @@
244
247
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
245
248
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
246
249
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
247
- --uilib-card-selectable-disabled-text-color: var(--uilib-color-other-disabled-soft);
248
- --uilib-card-selectable-disabled-bg-color: var(--uilib-color-core-neutral);
249
250
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-filled.svg");
250
251
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-corner-solid.svg");
251
252
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
253
+ --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
252
254
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
253
255
  --uilib-datepicker-icon-next: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
254
256
  --uilib-datepicker-color-date-text-selected: var(--uilib-color-text-inverse);
@@ -270,7 +272,6 @@
270
272
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
271
273
  --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
272
274
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
273
- --uilib-input-chip-disabled-text-color: var(--uilib-color-other-disabled-soft);
274
275
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
275
276
  --uilib-input-count-radius: var(--uilib-border-radius-100);
276
277
  --uilib-input-count-bg-color: var(--uilib-color-canvas-default);
@@ -431,7 +432,7 @@
431
432
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
432
433
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
433
434
  --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
434
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor);
435
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
435
436
  --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
436
437
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
437
438
  --uilib-scroller-thumb-size: var(--uilib-spacing-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;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","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;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","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -68,10 +68,16 @@
68
68
  --uilib-color-other-button-hover-state: rgba(255, 255, 255, 0.2);
69
69
  --uilib-color-other-secondary-button-hover-state: #ecf1fe;
70
70
  --uilib-color-other-skeleton-loading: #dcdcdc;
71
- --uilib-color-brand-trip-advisor: #00aa6c;
71
+ --uilib-color-brand-tripadvisor: #00b747;
72
+ --uilib-color-brand-tripadvisor-pine-green: #002b11;
73
+ --uilib-color-brand-tripadvisor-inverse: #00eb5b;
72
74
  --uilib-color-brand-paypal: #253b80;
73
75
  --uilib-color-other-scroll-handle: #b9b9b9;
76
+ --uilib-color-brand-trip-advisor: #00b747;
74
77
  --uilib-color-promotion-free-kids: #0caaf3;
78
+ --uilib-color-promotion-smiles-level-1: #dbf7fb;
79
+ --uilib-color-promotion-smiles-level-2: #a5ebf4;
80
+ --uilib-color-promotion-smiles-level-3: #4bd7e9;
75
81
  --uilib-color-other-gradient-linear-soft: linear-gradient(180deg, #e2f4fd 0.33%, #fff 99.66%);
76
82
  --uilib-color-other-gradient-linear: linear-gradient(180deg, #70cbf4 0.33%, #fff 99.66%);
77
83
  --uilib-color-other-gradient-linear-strong: linear-gradient(180deg, #1b115c 0.33%, #fff 99.66%);
@@ -257,11 +263,10 @@
257
263
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
258
264
  --uilib-card-selectable-dashed-border-color: var(--uilib-color-border-dashed);
259
265
  --uilib-card-selectable-selected-border-color: var(--uilib-color-border-interaction);
260
- --uilib-card-selectable-disabled-text-color: var(--uilib-color-other-disabled-soft);
261
- --uilib-card-selectable-disabled-bg-color: var(--uilib-color-core-neutral);
262
266
  --uilib-card-selectable-selected-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-filled.svg");
263
267
  --uilib-card-selectable-selected-icon-shape: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-corner-solid.svg");
264
268
  --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
269
+ --uilib-flyout-dropdown-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
265
270
  --uilib-datepicker-icon-previous: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
266
271
  --uilib-datepicker-icon-next: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
267
272
  --uilib-datepicker-color-date-text-selected: var(--uilib-color-text-inverse);
@@ -283,7 +288,6 @@
283
288
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
284
289
  --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
285
290
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
286
- --uilib-input-chip-disabled-text-color: var(--uilib-color-other-disabled-soft);
287
291
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
288
292
  --uilib-input-count-radius: var(--uilib-border-radius-100);
289
293
  --uilib-input-count-bg-color: var(--uilib-color-canvas-default);
@@ -444,7 +448,7 @@
444
448
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
445
449
  --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
446
450
  --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
447
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor);
451
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
448
452
  --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
449
453
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
450
454
  --uilib-scroller-thumb-size: var(--uilib-spacing-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;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","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;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","file":"index.css"}
package/package.json CHANGED
@@ -1,13 +1,16 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "0.2.0",
3
+ "version": "1.1.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
+ "//dependencies": {
7
+ "zod-validation-error": "Pinned to resolve version conflicts between packages"
8
+ },
6
9
  "contributors": [
7
10
  "Matthew Guyader-Squirrell <matthew.squirrell@tui.co.uk>",
8
11
  "Nicky Bliss <nicky.bliss@tui.co.uk>",
9
12
  "Judith Kirsten <judith.kirsten@tui.com>",
10
- "Volodymyr Savchuk <volodymyr.savchuk@tui.com>"
13
+ "Mykola Shevchuk <mykola.shevchuk@tui.co.uk>"
11
14
  ],
12
15
  "scripts": {
13
16
  "ci": "commit",
@@ -23,8 +26,8 @@
23
26
  "storybook:serve": "storybook dev -p 6006 -c storybook/.storybook",
24
27
  "_storybook:build_prod": "storybook build -c storybook/.storybook",
25
28
  "static:build": "node cli/static-assets.mjs",
26
- "lint:styles": "npm run lint:styles:ci && npm run lint:style:fix",
27
- "lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --rule 'property-no-vendor-prefix:false'",
29
+ "lint:styles": "npm run lint:styles:ci && npm run lint:styles:fix",
30
+ "lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --config .stylelintrc.fix.json",
28
31
  "lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
29
32
  "lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
30
33
  "lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
@@ -73,6 +76,7 @@
73
76
  "@commitlint/config-conventional": "^20.0.0",
74
77
  "@eslint/compat": "^2.0.0",
75
78
  "@eslint/js": "^9.38.0",
79
+ "@figma/code-connect": "^1.4.5",
76
80
  "@jest/globals": "^30.2.0",
77
81
  "@storybook/addon-a11y": "8.6.14",
78
82
  "@storybook/addon-docs": "8.6.14",
@@ -98,7 +102,7 @@
98
102
  "deepmerge": "^4.3.1",
99
103
  "dotenv": "^17.2.3",
100
104
  "dotenv-cli": "^11.0.0",
101
- "esbuild": "^0.27.0",
105
+ "esbuild": "^0.28.0",
102
106
  "eslint": "^9.38.0",
103
107
  "eslint-config-airbnb-extended": "^3.0.1",
104
108
  "eslint-config-prettier": "^10.0.1",
@@ -116,8 +120,8 @@
116
120
  "husky": "^9.1.7",
117
121
  "jest": "^30.2.0",
118
122
  "js-beautify": "^1.15.1",
119
- "lint-staged": "^16.2.6",
120
- "log-update": "^7.0.2",
123
+ "lint-staged": "^17.0.2",
124
+ "log-update": "^8.0.0",
121
125
  "node-fetch": "^3.3.2",
122
126
  "npm-run-all2": "^8.0.4",
123
127
  "postcss-scss": "^4.0.6",
@@ -138,20 +142,22 @@
138
142
  "stylelint": "^17.2.0",
139
143
  "stylelint-config-standard": "^40.0.0",
140
144
  "stylelint-config-standard-scss": "^17.0.0",
141
- "stylelint-order": "^7.0.0",
145
+ "stylelint-order": "^8.1.1",
142
146
  "stylelint-scss": "^7.0.0",
143
147
  "stylelint-semantic-groups": "^1.2.1",
144
148
  "ts-loader": "^9.5.2",
145
149
  "ts-node": "^10.9.1",
146
- "typescript": "^5.9.3",
150
+ "typescript": "^6.0.3",
147
151
  "typescript-eslint": "^8.46.2",
148
- "webpack": "^5.102.1"
152
+ "webpack": "^5.102.1",
153
+ "zod-validation-error": "^5.0.0"
149
154
  },
150
155
  "lint-staged": {
151
- "*.{scss,css}": "npx stylelint \"src/**/*.{scss,css}\" --fix",
152
- "*.{js,ts,mjs}": "npx eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
153
- "storybook/.storybook/**/*.{js,ts,mjs}": "npx eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
154
- "**/*": "npx prettier --ignore-unknown --write ."
156
+ "src/**/*.{scss,css}": "npx stylelint --fix --config .stylelintrc.fix.json",
157
+ "storybook/**/*.{js,ts,mjs}": "npx eslint --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
158
+ "cli/*.mjs": "npx eslint --config eslint.config.mjs --fix --no-warn-ignored",
159
+ "storybook/.storybook/**/*.{js,ts,mjs}": "npx eslint --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
160
+ "**/*": "npx prettier --ignore-unknown --write"
155
161
  },
156
162
  "loki": {
157
163
  "configurations": {
package/scss/lib/button/_mixins.scss CHANGED
@@ -142,6 +142,8 @@ $uilib-button-included: false !default;
142
142
  background: var(--uilib-button-disabled-bg-color);
143
143
 
144
144
  cursor: default;
145
+
146
+ pointer-events: none;
145
147
  }
146
148
 
147
149
  .uilib-button--large {
package/scss/lib/cards/selectable/_mixins.scss CHANGED
@@ -37,6 +37,14 @@ $uilib-card-selectable-included: false !default;
37
37
  &__item {
38
38
  display: flex;
39
39
  }
40
+
41
+ .uilib-card {
42
+ margin: 0;
43
+
44
+ &:has(.uilib-card-selectable__tag) {
45
+ margin-top: var(--uilib-spacing-200);
46
+ }
47
+ }
40
48
  }
41
49
 
42
50
  // ===================
@@ -49,29 +57,16 @@ $uilib-card-selectable-included: false !default;
49
57
  display: flex;
50
58
  flex-direction: column;
51
59
 
52
- border: var(--uilib-stroke-size-025) solid var(--uilib-card-selectable-default-border-color);
53
60
  border-radius: var(--uilib-card-selectable-radius);
54
61
 
55
62
  background: var(--uilib-card-selectable-bg-color);
56
63
 
57
- box-shadow: none;
58
-
59
- // ===================
60
- // VARIANTS
61
- // ===================
62
-
63
- &--checkbox {
64
- &:has(input[type='checkbox']:focus-visible) {
65
- @include uilib-focus;
66
- }
64
+ outline: var(--uilib-stroke-size-025) solid var(--uilib-card-selectable-default-border-color);
67
65
 
68
- &:not(:has(input[type='checkbox']:disabled)):hover {
69
- box-shadow: var(--uilib-card-hover-elevation);
70
- }
71
- }
66
+ box-shadow: none;
72
67
 
73
68
  &--dashed {
74
- border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-dashed) var(--uilib-card-selectable-dashed-border-color);
69
+ outline: var(--uilib-stroke-size-025) var(--uilib-stroke-style-dashed) var(--uilib-card-selectable-dashed-border-color);
75
70
  }
76
71
 
77
72
  &--clickable-card {
@@ -156,6 +151,79 @@ $uilib-card-selectable-included: false !default;
156
151
  }
157
152
  }
158
153
 
154
+ // ===================
155
+ // STATES
156
+ // ===================
157
+
158
+ // Checked state (card border + checkmark)
159
+ /* stylelint-disable-next-line order/order */
160
+ &--selected,
161
+ &:has(input[type='radio']:checked),
162
+ &:has(input[type='checkbox']:checked) {
163
+ outline: var(--uilib-stroke-size-050) solid var(--uilib-card-selectable-selected-border-color);
164
+
165
+ &::after {
166
+ position: absolute;
167
+ top: 0;
168
+ right: 0;
169
+ content: '';
170
+ z-index: 1;
171
+
172
+ display: block;
173
+
174
+ width: var(--uilib-spacing-1000);
175
+ height: var(--uilib-spacing-1000);
176
+
177
+ border-radius: 0 calc(var(--uilib-card-selectable-radius) / 2) 0 0;
178
+
179
+ background-color: var(--uilib-card-selectable-selected-border-color);
180
+ -webkit-mask: var(--uilib-card-selectable-selected-icon) no-repeat center;
181
+ mask: var(--uilib-card-selectable-selected-icon) no-repeat center;
182
+ -webkit-mask-size: cover;
183
+ mask-size: cover;
184
+ }
185
+
186
+ .uilib-card__content-container {
187
+ &::after {
188
+ position: absolute;
189
+ top: 0;
190
+ right: 0;
191
+ content: '';
192
+ z-index: 1;
193
+
194
+ display: block;
195
+
196
+ width: var(--uilib-spacing-1000);
197
+ height: var(--uilib-spacing-1000);
198
+
199
+ border-radius: 0 calc(var(--uilib-card-selectable-radius) / 2) 0 0;
200
+
201
+ background: var(--uilib-card-selectable-bg-color);
202
+ -webkit-mask: var(--uilib-card-selectable-selected-icon-shape) no-repeat center;
203
+ mask: var(--uilib-card-selectable-selected-icon-shape) no-repeat center;
204
+ -webkit-mask-size: cover;
205
+ mask-size: cover;
206
+ }
207
+ }
208
+ }
209
+
210
+ /* stylelint-disable-next-line order/order */
211
+ &--checkbox:has(input[type='checkbox']:disabled) .uilib-card__content-container {
212
+ opacity: 0.8;
213
+ }
214
+
215
+ // ===================
216
+ // VARIANTS
217
+ // ===================
218
+
219
+ &:has(.uilib-card-selectable__input-hidden:focus-visible) {
220
+ @include uilib-focus;
221
+ }
222
+
223
+ &:not(:has(.uilib-card-selectable__input-hidden:disabled)):hover {
224
+ box-shadow: var(--uilib-card-hover-elevation);
225
+ }
226
+
159
227
  &:not(&--selected):has(.uilib-input-radio__label:hover) {
160
228
  box-shadow: var(--uilib-card-hover-elevation);
161
229
  }
@@ -187,6 +255,43 @@ $uilib-card-selectable-included: false !default;
187
255
  }
188
256
  }
189
257
 
258
+ &__image-container {
259
+ position: relative;
260
+
261
+ display: grid;
262
+ grid-template:
263
+ 'uilib-card-selectable-tags .' auto
264
+ 'uilib-card-selectable-media uilib-card-selectable-media' min-content
265
+ / 1fr var(--uilib-spacing-1000);
266
+ gap: var(--uilib-spacing-200);
267
+
268
+ padding: var(--uilib-spacing-200);
269
+
270
+ aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
271
+ }
272
+
273
+ &__tag {
274
+ grid-area: uilib-card-selectable-tags;
275
+
276
+ position: relative;
277
+ z-index: 1;
278
+
279
+ place-self: start start;
280
+
281
+ transform: translate(0, calc((var(--uilib-spacing-200) + 50%) * -1));
282
+ }
283
+
284
+ &__media-button {
285
+ grid-area: uilib-card-selectable-media;
286
+ }
287
+
288
+ &__image.uilib-image {
289
+ position: absolute;
290
+ inset: 0;
291
+
292
+ border-radius: var(--uilib-card-selectable-radius) var(--uilib-card-selectable-radius) 0 0;
293
+ }
294
+
190
295
  &__content-container {
191
296
  flex-grow: 1;
192
297
 
@@ -228,86 +333,32 @@ $uilib-card-selectable-included: false !default;
228
333
  cursor: pointer;
229
334
  }
230
335
 
231
- // ===================
232
- // STATES
233
- // ===================
234
-
235
- // Checked state (card border + checkmark)
236
- /* stylelint-disable-next-line order/order */
237
- &--selected,
238
- &:has(input[type='radio']:checked),
239
- &:has(input[type='checkbox']:checked) {
240
- border: var(--uilib-stroke-size-050) solid var(--uilib-card-selectable-selected-border-color);
241
-
242
- &::after {
243
- position: absolute;
244
- top: 0;
245
- right: 0;
246
- content: '';
247
- z-index: 1;
248
-
249
- display: block;
250
-
251
- width: var(--uilib-spacing-1000);
252
- height: var(--uilib-spacing-1000);
253
-
254
- border-radius: 0 calc(var(--uilib-card-selectable-radius) / 2) 0 0;
255
-
256
- background-color: var(--uilib-card-selectable-selected-border-color);
257
- -webkit-mask: var(--uilib-card-selectable-selected-icon) no-repeat center;
258
- mask: var(--uilib-card-selectable-selected-icon) no-repeat center;
259
- -webkit-mask-size: cover;
260
- mask-size: cover;
261
- }
262
-
263
- .uilib-card__content-container {
264
- padding: calc(var(--uilib-spacing-400) - var(--uilib-stroke-size-025));
265
-
266
- &::after {
267
- position: absolute;
268
- top: 0;
269
- right: 0;
270
- content: '';
271
- z-index: 1;
272
-
273
- display: block;
274
-
275
- width: var(--uilib-spacing-1000);
276
- height: var(--uilib-spacing-1000);
277
-
278
- border-radius: 0 calc(var(--uilib-card-selectable-radius) / 2) 0 0;
279
-
280
- background: var(--uilib-card-selectable-bg-color);
281
- -webkit-mask: var(--uilib-card-selectable-selected-icon-shape) no-repeat center;
282
- mask: var(--uilib-card-selectable-selected-icon-shape) no-repeat center;
283
- -webkit-mask-size: cover;
284
- mask-size: cover;
285
- }
286
- }
287
- }
288
-
289
336
  // Disabled state
290
337
  &:has(input[type='checkbox']:disabled),
291
338
  &:has(input[type='radio']:disabled) {
292
339
  &:has(input:checked) {
293
- border-color: var(--uilib-color-other-disabled-strong);
340
+ outline-color: var(--uilib-color-other-disabled-strong);
294
341
 
295
342
  &::after {
296
343
  background-color: var(--uilib-color-other-disabled-strong);
297
344
  }
298
345
  }
299
346
 
347
+ .uilib-card-selectable__image {
348
+ opacity: 0.8;
349
+ filter: grayscale(100%);
350
+ }
351
+
352
+ .uilib-card-selectable__tag {
353
+ filter: grayscale(100%);
354
+ }
355
+
300
356
  .uilib-card-selectable__title-container,
301
357
  .uilib-card-selectable__content-container {
302
358
  opacity: 0.8;
303
359
  }
304
360
  }
305
361
 
306
- /* stylelint-disable-next-line order/order */
307
- &--checkbox:has(input[type='checkbox']:disabled) .uilib-card__content-container {
308
- opacity: 0.8;
309
- }
310
-
311
362
  &:has(input[type='checkbox']:disabled) {
312
363
  &:has(.uilib-input-checkbox__label:hover) {
313
364
  box-shadow: none;
@@ -329,6 +380,10 @@ $uilib-card-selectable-included: false !default;
329
380
  .uilib-input-radio__label {
330
381
  cursor: default;
331
382
  }
383
+
384
+ .uilib-input-radio__label-content {
385
+ color: var(--uilib-color-text-body);
386
+ }
332
387
  }
333
388
  }
334
389
  }