@tui/design-system 1.15.1-MR-376.0 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/dist/themes/crystalski/index.css +68 -86
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +64 -82
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/fonts.css +57 -18
  7. package/dist/themes/tui/fonts.css.map +1 -1
  8. package/dist/themes/tui/index.css +88 -120
  9. package/dist/themes/tui/index.css.map +1 -1
  10. package/package.json +2 -2
  11. package/scss/lib/active-tag/_mixins.scss +1 -2
  12. package/scss/lib/button/_mixins.scss +1 -1
  13. package/scss/lib/button/_variables.scss +14 -14
  14. package/scss/lib/cards/card/_mixins.scss +4 -0
  15. package/scss/lib/cards/promotion/_mixins.scss +1 -1
  16. package/scss/lib/flyout-dropdown/_mixins.scss +1 -0
  17. package/scss/lib/forms/input-chip/_mixins.scss +1 -1
  18. package/scss/lib/forms/input-chip/_variables.scss +1 -1
  19. package/scss/lib/hero/_mixins.scss +1 -1
  20. package/scss/lib/icon-button/_variables.scss +19 -19
  21. package/scss/lib/info-tag/_mixins.scss +3 -9
  22. package/scss/lib/info-tag/_variables.scss +3 -6
  23. package/scss/lib/media-block/_index.scss +3 -0
  24. package/scss/lib/media-block/_mixins.scss +134 -0
  25. package/scss/lib/media-block/_variables.scss +10 -0
  26. package/scss/lib/patterns/reasons-to-book/_mixins.scss +34 -8
  27. package/scss/lib/travel-aware-banner/_mixins.scss +1 -1
  28. package/scss/mixins.scss +1 -0
  29. package/scss/reset.scss +2 -1
  30. package/scss/themes/crystalski/_colors.scss +3 -36
  31. package/scss/themes/crystalski/_overrides.scss +76 -20
  32. package/scss/themes/crystalski/index.scss +6 -3
  33. package/scss/themes/crystalski/theme.json +18 -93
  34. package/scss/themes/firstchoice/_colors.scss +0 -33
  35. package/scss/themes/firstchoice/_overrides.scss +69 -17
  36. package/scss/themes/firstchoice/index.scss +4 -1
  37. package/scss/themes/firstchoice/theme.json +55 -109
  38. package/scss/themes/tui/_colors.scss +0 -20
  39. package/scss/themes/tui/_overrides.scss +9 -1
  40. package/scss/themes/tui/_primitives.scss +1 -28
  41. package/scss/themes/tui/_typography.scss +14 -0
  42. package/scss/themes/tui/fonts.json +60 -21
  43. package/scss/themes/tui/fonts.scss +9 -3
  44. package/scss/themes/tui/index.scss +4 -1
  45. package/scss/themes/tui/theme.json +4 -410
  46. package/scss/variables/_colors.scss +9 -42
  47. package/scss/variables/_grid.scss +1 -1
  48. package/scss/variables/_primitives.scss +16 -18
  49. package/scss/variables/_typography.scss +29 -39
  50. package/scss/variables/base-theme.json +137 -254
  51. package/scss/variables/fonts/_ambit-fallback.scss +0 -10
  52. package/scss/variables.scss +1 -0
  53. package/types/components.ts +19 -0
  54. package/dist/themes/tui/index-dark.css +0 -220
  55. package/dist/themes/tui/index-dark.css.map +0 -1
  56. package/scss/themes/tui/_colors-dark.scss +0 -104
  57. package/scss/themes/tui/_overrides-dark.scss +0 -22
  58. package/scss/themes/tui/index-dark.scss +0 -37
  59. package/scss/variables/fonts/_ambit-black.scss +0 -10
package/CHANGELOG.md CHANGED
@@ -1,7 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.16.1
4
+
5
+ ### Fixed
6
+
7
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
8
+
9
+ - Fix for missing utility mixin import
10
+
3
11
  ## v1.16.0
4
12
 
13
+ ### Added
14
+
15
+ #### [Media block](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-block--docs)
16
+
17
+ - Added Media block component for pairing a square media slot (image, logo, or pictogram) with a title and supporting description. Available in Medium
18
+ and Large sizes. Stacked is the base arrangement (mobile-first) and `uilib-media-block--inline` is the layout modifier; the block never reflows on
19
+ its own — a host switches the layout from its own container query.
20
+
5
21
  ### Updated
6
22
 
7
23
  #### [Article card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
@@ -31,11 +47,47 @@
31
47
  affecting `role="dialog"` ([nvaccess/nvda#8971](https://github.com/nvaccess/nvda/issues/8971)). Note the heading is no longer reachable via screen
32
48
  reader heading navigation. Applies to both `version="1"` and `version="2"`.
33
49
 
50
+ #### [Reasons to book](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-reasons-to-book--docs)
51
+
52
+ - Reason cards are now built from the Media Block component rather than the pattern's own markup.
53
+ - The pictogram now sits in Media Block's media slot at 64px, replacing the pattern's own 72px pictogram.
54
+ - Stacked is now the base card arrangement; the pattern switches its cards to Inline above 547px from its own container query, rather than starting
55
+ inline and stacking below that width.
56
+ - The pre-Media-Block `uilib-reasons-to-book__reason` / `__pictogram` / `__text` classes still work unchanged for existing hand-written markup.
57
+
58
+ Each reason card was previously marked up with the pattern's own classes:
59
+
60
+ ```html
61
+ <div class="uilib-reasons-to-book__reason">
62
+ <img class="uilib-reasons-to-book__pictogram" src="/v3/pictograms/tui/chat.svg" width="72" height="72" alt="" aria-hidden="true" loading="lazy" />
63
+ <p class="uilib-reasons-to-book__text">24/7 support while you're away</p>
64
+ </div>
65
+ ```
66
+
67
+ Each reason card is now a Media Block:
68
+
69
+ ```html
70
+ <div class="uilib-media-block">
71
+ <div class="uilib-media-block__media" aria-hidden="true">
72
+ <img src="/v3/pictograms/tui/chat.svg" width="64" height="64" alt="" loading="lazy" />
73
+ </div>
74
+ <div class="uilib-media-block__text">
75
+ <p class="uilib-media-block__title">24/7 support while you're away</p>
76
+ </div>
77
+ </div>
78
+ ```
79
+
34
80
  #### [Timeline](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-timeline--docs)
35
81
 
36
82
  - Added a `condensed` variant (`uilib-timeline--condensed`) with smaller icons, tighter spacing and a continuous (solid) connecting line, for dense
37
83
  contexts such as flights in the basket holiday summary.
38
84
 
85
+ ### Fixed
86
+
87
+ #### [Globals](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-update-history--docs)
88
+
89
+ - Fix for `uilib-root` where background for body was also being applied to root.
90
+
39
91
  ## v1.15.0
40
92
 
41
93
  ### Updated
package/dist/themes/crystalski/index.css CHANGED
@@ -33,17 +33,13 @@
33
33
  --uilib-color-core-brand: #00ce9b;
34
34
  --uilib-color-core-brand-strong: #1c6f71;
35
35
  --uilib-color-core-surface: #e8fff9;
36
- --uilib-color-core-surface-light: #e8fff9;
37
36
  --uilib-color-core-neutral: #fff;
38
- --uilib-color-core-accent: #007c5e;
39
- --uilib-color-core-accent-on-dark: #00ce9b;
40
37
  --uilib-color-text-strong: #1c6f71;
41
38
  --uilib-color-text-body: #252a32;
42
39
  --uilib-color-text-link: #84329b;
43
40
  --uilib-color-text-link-visited: #481257;
44
41
  --uilib-color-text-link-visited-inverse: #e99aff;
45
42
  --uilib-color-text-inverse: #fff;
46
- --uilib-color-text-on-dark: #fff;
47
43
  --uilib-color-text-promotion: #c0023e;
48
44
  --uilib-color-text-danger: #970030;
49
45
  --uilib-color-status-success-surface: #beffef;
@@ -58,15 +54,6 @@
58
54
  --uilib-color-status-neutral-icon: #252a32;
59
55
  --uilib-color-canvas-default: #fff;
60
56
  --uilib-color-canvas-contrast: #f5f5f5;
61
- --uilib-color-interaction-primary: #84329b;
62
- --uilib-color-interaction-primary-hover: #a348bd;
63
- --uilib-color-interaction-primary-text: #fff;
64
- --uilib-color-interaction-secondary: #84329b;
65
- --uilib-color-interaction-secondary-hover: #fcf2ff;
66
- --uilib-color-interaction-secondary-text: #84329b;
67
- --uilib-color-interaction-tertiary: #1c6f71;
68
- --uilib-color-interaction-tertiary-hover: #2f9193;
69
- --uilib-color-interaction-tertiary-text: #fff;
70
57
  --uilib-color-border-interaction: #84329b;
71
58
  --uilib-color-border-brand-strong: #1c6f71;
72
59
  --uilib-color-border-input: #707070;
@@ -76,29 +63,21 @@
76
63
  --uilib-color-border-divider: #d8d8d8;
77
64
  --uilib-color-border-dashed: var(--uilib-color-border-divider);
78
65
  --uilib-color-promotion: #c0023e;
79
- --uilib-color-promotion-text: #fff;
80
- --uilib-color-promotion-bg: #c0023e;
81
- --uilib-color-promotion-bg-hover: #970030;
82
- --uilib-color-shortlist-icon: #c0023e;
83
- --uilib-color-shortlist-bg: #fff;
84
- --uilib-color-shortlist-bg-hover: #ffe8ef;
85
66
  --uilib-color-other-disabled-soft: #bcbcbc;
86
67
  --uilib-color-other-disabled-strong: #707070;
87
68
  --uilib-color-other-elevation: rgba(0, 0, 0, 0.4);
88
69
  --uilib-color-other-scrim: rgba(0, 0, 0, 0.8);
89
- --uilib-color-other-active-state-tint: #f3feff;
70
+ --uilib-color-other-active-state-tint: rgba(215, 254, 255, 0.3);
71
+ --uilib-color-other-button-hover-state: #fff;
72
+ --uilib-color-other-secondary-button-hover-state: rgba(132, 50, 155, 0.1);
90
73
  --uilib-color-other-skeleton-loading: #d8d8d8;
91
- --uilib-color-other-scroll-handle: #a3a3a3;
92
- --uilib-color-brand-tripadvisor: #00aa6c;
74
+ --uilib-color-brand-tripadvisor: #00b747;
93
75
  --uilib-color-brand-tripadvisor-pine-green: #002b11;
94
- --uilib-color-brand-tripadvisor-inverse: #00b747;
95
- --uilib-color-brand-tripadvisor-on-dark: #00b747;
76
+ --uilib-color-brand-tripadvisor-inverse: #00eb5b;
96
77
  --uilib-color-brand-paypal: #253b80;
97
78
  --uilib-color-brand-platinum: #4b5560;
98
- --uilib-color-logo-logo: #00ce9b;
99
- --uilib-color-other-button-hover-state: #fff;
100
- --uilib-color-other-secondary-button-hover-state: rgba(132, 50, 155, 0.1);
101
- --uilib-color-brand-trip-advisor: #00aa6c;
79
+ --uilib-color-other-scroll-handle: #a3a3a3;
80
+ --uilib-color-brand-trip-advisor: #00b747;
102
81
  --uilib-color-canvas-footer: #252a32;
103
82
  --uilib-color-border-brand: #00ce9b;
104
83
  --uilib-elevation-none: none;
@@ -112,7 +91,7 @@
112
91
  --uilib-grid-columns: 12;
113
92
  --uilib-grid-gutter-width: 1rem;
114
93
  --uilib-grid-gutter-height: 1rem;
115
- --uilib-layout-max-width: 100rem;
94
+ --uilib-layout-max-width: 80rem;
116
95
  --uilib-layout-app-height: 100dvh;
117
96
  --uilib-icon-size-default: 1.25rem;
118
97
  --uilib-icon-size-xsmall: 1rem;
@@ -168,18 +147,18 @@
168
147
  --uilib-font-family-lead: Brandon, BrandonFallbackFont, verdana, sans-serif;
169
148
  --uilib-font-family-base: Brandon, BrandonFallbackFont, verdana, sans-serif;
170
149
  --uilib-font-size-root: 1rem;
171
- --uilib-typography-display-large: var(--uilib-font-weight-black) clamp(3rem, 1.6783rem + 5.7623vw, 6rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
172
- --uilib-typography-display-medium: var(--uilib-font-weight-black) clamp(2.6875rem, 1.6687rem + 4.4418vw, 5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
173
- --uilib-typography-display-small: var(--uilib-font-weight-black) clamp(2.375rem, 1.5765rem + 3.4814vw, 4.1875rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
174
- --uilib-typography-heading-xxlarge: var(--uilib-font-weight-black) clamp(1.75rem, 1.1993rem + 2.401vw, 3rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
175
- --uilib-typography-heading-xlarge: var(--uilib-font-weight-black) clamp(1.5rem, 1.0594rem + 1.9208vw, 2.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
176
- --uilib-typography-heading-large: var(--uilib-font-weight-black) clamp(1.25rem, 0.8645rem + 1.6807vw, 2.125rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
177
- --uilib-typography-heading-medium: var(--uilib-font-weight-black) clamp(1.125rem, 0.8496rem + 1.2005vw, 1.75rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
178
- --uilib-typography-heading-small: var(--uilib-font-weight-black) clamp(1rem, 0.7797rem + 0.9604vw, 1.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
179
- --uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.75rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
180
- --uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.75rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
181
- --uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.5rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
182
- --uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.5rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
150
+ --uilib-typography-display-large: var(--uilib-font-weight-bold) clamp(2.8125rem, 1.5825rem + 5.3626vw, 4.8rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
151
+ --uilib-typography-display-medium: var(--uilib-font-weight-bold) clamp(2.5rem, 1.5717rem + 4.0472vw, 4rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
152
+ --uilib-typography-display-small: var(--uilib-font-weight-bold) clamp(2.2222rem, 1.5346rem + 2.9979vw, 3.3333rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
153
+ --uilib-typography-heading-xxlarge: var(--uilib-font-weight-bold) clamp(1.5768rem, 1.0126rem + 2.4595vw, 2.4883rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
154
+ --uilib-typography-heading-xlarge: var(--uilib-font-weight-bold) clamp(1.4016rem, 0.9857rem + 1.8132vw, 2.0736rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
155
+ --uilib-typography-heading-large: var(--uilib-font-weight-bold) clamp(1.2458rem, 0.9475rem + 1.3009vw, 1.728rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
156
+ --uilib-typography-heading-medium: var(--uilib-font-weight-bold) clamp(1.1074rem, 0.9016rem + 0.8973vw, 1.44rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
157
+ --uilib-typography-heading-small: var(--uilib-font-weight-bold) clamp(0.9844rem, 0.8509rem + 0.5818vw, 1.2rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
158
+ --uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.4375rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
159
+ --uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
160
+ --uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
161
+ --uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.4375rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
183
162
  --uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
184
163
  --uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
185
164
  --uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
@@ -200,13 +179,12 @@
200
179
  --uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
201
180
  --uilib-typography-label-xsmall: var(--uilib-font-weight-semibold) 0.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
202
181
  --uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
203
- --uilib-line-height-heading: 1.1;
182
+ --uilib-line-height-heading: 1.3;
204
183
  --uilib-line-height-body: 1.3;
205
184
  --uilib-line-height-none: 1;
206
185
  --uilib-font-weight-regular: 400;
207
186
  --uilib-font-weight-semibold: 400;
208
187
  --uilib-font-weight-bold: 600;
209
- --uilib-font-weight-black: 600;
210
188
  --uilib-accordion-radius: var(--uilib-border-radius-100);
211
189
  --uilib-accordion-logo-radius: var(--uilib-border-radius-100);
212
190
  --uilib-accordion-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
@@ -230,21 +208,21 @@
230
208
  --uilib-alert-text-color: var(--uilib-color-text-body);
231
209
  --uilib-breadcrumb-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
232
210
  --uilib-button-radius: var(--uilib-border-radius-pill);
233
- --uilib-button-primary-color: var(--uilib-color-interaction-primary-text);
234
- --uilib-button-primary-bg-color: var(--uilib-color-interaction-primary);
235
- --uilib-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
236
- --uilib-button-secondary-color: var(--uilib-color-interaction-secondary-text);
211
+ --uilib-button-primary-color: var(--uilib-color-text-inverse);
212
+ --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
213
+ --uilib-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
214
+ --uilib-button-secondary-color: var(--uilib-color-core-interaction);
237
215
  --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
238
- --uilib-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
239
- --uilib-button-tertiary-color: var(--uilib-color-interaction-tertiary-text);
240
- --uilib-button-tertiary-bg-color: var(--uilib-color-interaction-tertiary);
241
- --uilib-button-tertiary-hover-bg-color: var(--uilib-color-interaction-tertiary-hover);
242
- --uilib-button-promotion-color: var(--uilib-color-promotion-text);
243
- --uilib-button-promotion-bg-color: var(--uilib-color-promotion-bg);
244
- --uilib-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
245
- --uilib-button-search-color: var(--uilib-color-interaction-primary-text);
246
- --uilib-button-search-bg-color: var(--uilib-color-interaction-primary);
247
- --uilib-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
216
+ --uilib-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
217
+ --uilib-button-tertiary-color: var(--uilib-color-text-inverse);
218
+ --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
219
+ --uilib-button-tertiary-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
220
+ --uilib-button-promotion-color: var(--uilib-color-text-inverse);
221
+ --uilib-button-promotion-bg-color: var(--uilib-color-promotion);
222
+ --uilib-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
223
+ --uilib-button-search-color: var(--uilib-color-text-inverse);
224
+ --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
225
+ --uilib-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
248
226
  --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
249
227
  --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
250
228
  --uilib-card-radius: var(--uilib-border-radius-400);
@@ -307,10 +285,10 @@
307
285
  --uilib-input-chip-default-bg-color: var(--uilib-color-core-neutral);
308
286
  --uilib-input-chip-default-border-color: var(--uilib-color-border-card);
309
287
  --uilib-input-chip-default-text-color: var(--uilib-color-text-strong);
310
- --uilib-input-chip-hover-bg-color: #f3feff;
311
- --uilib-input-chip-active-bg-color: #fcf2ff;
288
+ --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
289
+ --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
312
290
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
313
- --uilib-input-chip-active-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
291
+ --uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
314
292
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
315
293
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
316
294
  --uilib-input-count-radius: var(--uilib-border-radius-100);
@@ -382,28 +360,28 @@
382
360
  --uilib-highlight-panel-header-bg-overlay-brand: none;
383
361
  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
384
362
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
385
- --uilib-icon-button-text-color: var(--uilib-color-interaction-secondary-text);
386
- --uilib-icon-button-ghost-color: var(--uilib-color-interaction-secondary-text);
363
+ --uilib-icon-button-text-color: var(--uilib-color-core-interaction);
364
+ --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
387
365
  --uilib-icon-button-ghost-bg-color: transparent;
388
- --uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
389
- --uilib-icon-button-primary-color: var(--uilib-color-interaction-primary-text);
390
- --uilib-icon-button-primary-bg-color: var(--uilib-color-interaction-primary);
391
- --uilib-icon-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
392
- --uilib-icon-button-secondary-color: var(--uilib-color-interaction-secondary-text);
366
+ --uilib-icon-button-ghost-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
367
+ --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
368
+ --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
369
+ --uilib-icon-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
370
+ --uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
393
371
  --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
394
- --uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
395
- --uilib-icon-button-control-color: var(--uilib-color-interaction-secondary-text);
372
+ --uilib-icon-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
373
+ --uilib-icon-button-control-color: var(--uilib-color-core-interaction);
396
374
  --uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
397
- --uilib-icon-button-control-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
398
- --uilib-icon-button-promotion-color: var(--uilib-color-promotion-text);
399
- --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion-bg);
400
- --uilib-icon-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
401
- --uilib-icon-button-search-color: var(--uilib-color-interaction-primary-text);
402
- --uilib-icon-button-search-bg-color: var(--uilib-color-interaction-primary);
403
- --uilib-icon-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
404
- --uilib-icon-button-shortlist-color: var(--uilib-color-shortlist-icon);
405
- --uilib-icon-button-shortlist-bg-color: var(--uilib-color-shortlist-bg);
406
- --uilib-icon-button-shortlist-hover-bg-color: var(--uilib-color-shortlist-bg-hover);
375
+ --uilib-icon-button-control-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
376
+ --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
377
+ --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
378
+ --uilib-icon-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
379
+ --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
380
+ --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
381
+ --uilib-icon-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
382
+ --uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
383
+ --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
384
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(97.5294117647%, 90.0784313725%, 92.431372549%);
407
385
  --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
408
386
  --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
409
387
  --uilib-icon-button-size-small: 2rem;
@@ -419,14 +397,11 @@
419
397
  --uilib-image-fallback: url("https://mwa.tui.com/shared/mwa/assets/v3/illustrations/tui/sunset-adults.svg");
420
398
  --uilib-info-tag-radius: var(--uilib-border-radius-100);
421
399
  --uilib-info-tag-text-color: var(--uilib-color-text-body);
422
- --uilib-info-tag-bg-color: var(--uilib-color-status-info-surface);
423
- --uilib-info-tag-local-product-text-color: var(--uilib-color-text-body);
400
+ --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
424
401
  --uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
425
- --uilib-info-tag-neutral-text-color: var(--uilib-color-text-body);
426
- --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
427
402
  --uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
428
- --uilib-info-tag-platinum-text-color: var(--uilib-color-text-on-dark);
429
- --uilib-info-tag-scarcity-text-color: var(--uilib-color-text-body);
403
+ --uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
404
+ --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
430
405
  --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
431
406
  --uilib-link-decoration-color: var(--uilib-color-text-link);
432
407
  --uilib-link-decoration-visited-color: var(--uilib-color-text-link-visited);
@@ -449,6 +424,13 @@
449
424
  --uilib-loader-small-font: var(--uilib-typography-component-heading-medium);
450
425
  --uilib-loader-medium-font: var(--uilib-typography-component-heading-large);
451
426
  --uilib-loader-large-font: var(--uilib-typography-component-heading-xlarge);
427
+ --uilib-media-block-title-color: var(--uilib-color-text-strong);
428
+ --uilib-media-block-title-font-large: var(--uilib-typography-component-heading-xlarge-strong);
429
+ --uilib-media-block-title-font-medium: var(--uilib-typography-component-heading-small-strong);
430
+ --uilib-media-block-description-color: var(--uilib-color-text-body);
431
+ --uilib-media-block-description-font-large: var(--uilib-typography-body-large);
432
+ --uilib-media-block-description-font-medium: var(--uilib-typography-body-medium);
433
+ --uilib-media-block-media-radius: var(--uilib-border-radius-100);
452
434
  --uilib-media-button-color: var(--uilib-color-text-strong);
453
435
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
454
436
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
@@ -508,7 +490,7 @@
508
490
  --uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
509
491
  --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
510
492
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
511
- --uilib-ratings-range-icons-tui-t-plus-color: #011750;
493
+ --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
512
494
  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
513
495
  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
514
496
  --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;EAAA;EAAA;EAAA;EAAA;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;EG0HD;EH1HC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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;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;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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
@@ -34,17 +34,13 @@
34
34
  --uilib-color-core-brand: #ff467c;
35
35
  --uilib-color-core-brand-strong: #002f17;
36
36
  --uilib-color-core-surface: #faf5ed;
37
- --uilib-color-core-surface-light: #fffefe;
38
37
  --uilib-color-core-neutral: #fff;
39
- --uilib-color-core-accent: #d61d5f;
40
- --uilib-color-core-accent-on-dark: #ff7ea3;
41
38
  --uilib-color-text-strong: #002f17;
42
39
  --uilib-color-text-body: #002f17;
43
40
  --uilib-color-text-link: #b8194d;
44
41
  --uilib-color-text-link-visited: #6c69b7;
45
42
  --uilib-color-text-link-visited-inverse: #9996f1;
46
43
  --uilib-color-text-inverse: #fffefe;
47
- --uilib-color-text-on-dark: #fffefe;
48
44
  --uilib-color-text-promotion: #002f17;
49
45
  --uilib-color-text-danger: #a5261c;
50
46
  --uilib-color-status-success-surface: #e6f2d8;
@@ -59,15 +55,6 @@
59
55
  --uilib-color-status-neutral-icon: #3b4641;
60
56
  --uilib-color-canvas-default: #fff;
61
57
  --uilib-color-canvas-contrast: #faf5ed;
62
- --uilib-color-interaction-primary: #d61d5f;
63
- --uilib-color-interaction-primary-hover: #ff467c;
64
- --uilib-color-interaction-primary-text: #fff;
65
- --uilib-color-interaction-secondary: #002f17;
66
- --uilib-color-interaction-secondary-hover: #cee8e0;
67
- --uilib-color-interaction-secondary-text: #002f17;
68
- --uilib-color-interaction-tertiary: #002f17;
69
- --uilib-color-interaction-tertiary-hover: #335945;
70
- --uilib-color-interaction-tertiary-text: #fff;
71
58
  --uilib-color-border-interaction: #d61d5f;
72
59
  --uilib-color-border-brand-strong: #002f17;
73
60
  --uilib-color-border-input: #616f69;
@@ -77,29 +64,21 @@
77
64
  --uilib-color-border-divider: #e9e3da;
78
65
  --uilib-color-border-dashed: var(--uilib-color-border-divider);
79
66
  --uilib-color-promotion: #ffd4e4;
80
- --uilib-color-promotion-text: #002f17;
81
- --uilib-color-promotion-bg: #ffd4e4;
82
- --uilib-color-promotion-bg-hover: #ffa3be;
83
- --uilib-color-shortlist-icon: #d61d5f;
84
- --uilib-color-shortlist-bg: #fff;
85
- --uilib-color-shortlist-bg-hover: #fff9fb;
86
67
  --uilib-color-other-disabled-soft: #ccd5d1;
87
68
  --uilib-color-other-disabled-strong: #616f69;
88
69
  --uilib-color-other-elevation: rgba(0, 0, 0, 0.4);
89
70
  --uilib-color-other-scrim: rgba(0, 0, 0, 0.8);
90
71
  --uilib-color-other-active-state-tint: #ffecf2;
72
+ --uilib-color-other-button-hover-state: #ffd4e4;
73
+ --uilib-color-other-secondary-button-hover-state: #faf5ed;
91
74
  --uilib-color-other-skeleton-loading: #e3e9e7;
92
- --uilib-color-other-scroll-handle: #9faca7;
93
- --uilib-color-brand-tripadvisor: #00aa6c;
75
+ --uilib-color-brand-tripadvisor: #00b747;
94
76
  --uilib-color-brand-tripadvisor-pine-green: #002b11;
95
- --uilib-color-brand-tripadvisor-inverse: #00b747;
96
- --uilib-color-brand-tripadvisor-on-dark: #00b747;
77
+ --uilib-color-brand-tripadvisor-inverse: #00eb5b;
97
78
  --uilib-color-brand-paypal: #253b80;
98
79
  --uilib-color-brand-platinum: #4b5560;
99
- --uilib-color-logo-logo: #ff467c;
100
- --uilib-color-other-button-hover-state: #ffd4e4;
101
- --uilib-color-other-secondary-button-hover-state: #faf5ed;
102
- --uilib-color-brand-trip-advisor: #00aa6c;
80
+ --uilib-color-other-scroll-handle: #9faca7;
81
+ --uilib-color-brand-trip-advisor: #00b747;
103
82
  --uilib-color-text-tooltip: #002f17;
104
83
  --uilib-color-border-insider: #8380f7;
105
84
  --uilib-color-promotion-free-kids: #cee8e0;
@@ -118,7 +97,7 @@
118
97
  --uilib-grid-columns: 12;
119
98
  --uilib-grid-gutter-width: 1rem;
120
99
  --uilib-grid-gutter-height: 1rem;
121
- --uilib-layout-max-width: 100rem;
100
+ --uilib-layout-max-width: 80rem;
122
101
  --uilib-layout-app-height: 100dvh;
123
102
  --uilib-icon-size-default: 1.25rem;
124
103
  --uilib-icon-size-xsmall: 1rem;
@@ -174,17 +153,17 @@
174
153
  --uilib-font-family-lead: PasticheGrotesque, PasticheGrotesqueFallbackFont, arial black, sans-serif;
175
154
  --uilib-font-family-base: Rondelle, RondelleFallbackFont, verdana, sans-serif;
176
155
  --uilib-font-size-root: 1rem;
177
- --uilib-typography-display-large: var(--uilib-font-weight-black) clamp(3rem, 1.6783rem + 5.7623vw, 6rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
178
- --uilib-typography-display-medium: var(--uilib-font-weight-black) clamp(2.6875rem, 1.6687rem + 4.4418vw, 5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
179
- --uilib-typography-display-small: var(--uilib-font-weight-black) clamp(2.375rem, 1.5765rem + 3.4814vw, 4.1875rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
180
- --uilib-typography-heading-xxlarge: var(--uilib-font-weight-black) clamp(1.75rem, 1.1993rem + 2.401vw, 3rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
181
- --uilib-typography-heading-xlarge: var(--uilib-font-weight-black) clamp(1.5rem, 1.0594rem + 1.9208vw, 2.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
182
- --uilib-typography-heading-large: var(--uilib-font-weight-black) clamp(1.25rem, 0.8645rem + 1.6807vw, 2.125rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
183
- --uilib-typography-heading-medium: var(--uilib-font-weight-black) clamp(1.125rem, 0.8496rem + 1.2005vw, 1.75rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
184
- --uilib-typography-heading-small: var(--uilib-font-weight-black) clamp(1rem, 0.7797rem + 0.9604vw, 1.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
185
- --uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.75rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
186
- --uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.75rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
156
+ --uilib-typography-display-large: var(--uilib-font-weight-bold) clamp(2.8125rem, 1.5825rem + 5.3626vw, 4.8rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
157
+ --uilib-typography-display-medium: var(--uilib-font-weight-bold) clamp(2.5rem, 1.5717rem + 4.0472vw, 4rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
158
+ --uilib-typography-display-small: var(--uilib-font-weight-bold) clamp(2.2222rem, 1.5346rem + 2.9979vw, 3.3333rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
159
+ --uilib-typography-heading-xxlarge: var(--uilib-font-weight-bold) clamp(1.5768rem, 1.0126rem + 2.4595vw, 2.4883rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
160
+ --uilib-typography-heading-xlarge: var(--uilib-font-weight-bold) clamp(1.4016rem, 0.9857rem + 1.8132vw, 2.0736rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
161
+ --uilib-typography-heading-large: var(--uilib-font-weight-bold) clamp(1.2458rem, 0.9475rem + 1.3009vw, 1.728rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
162
+ --uilib-typography-heading-medium: var(--uilib-font-weight-bold) clamp(1.1074rem, 0.9016rem + 0.8973vw, 1.44rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
163
+ --uilib-typography-heading-small: var(--uilib-font-weight-bold) clamp(0.9844rem, 0.8509rem + 0.5818vw, 1.2rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
187
164
  --uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
165
+ --uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
166
+ --uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
188
167
  --uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
189
168
  --uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
190
169
  --uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
@@ -206,13 +185,12 @@
206
185
  --uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
207
186
  --uilib-typography-label-xsmall: var(--uilib-font-weight-regular) 0.6875rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
208
187
  --uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.6875rem/var(--uilib-line-height-heading) var(--uilib-font-family-base);
209
- --uilib-line-height-heading: 1.1;
188
+ --uilib-line-height-heading: 1.3;
210
189
  --uilib-line-height-body: 1.3;
211
190
  --uilib-line-height-none: 1;
212
191
  --uilib-font-weight-regular: 400;
213
192
  --uilib-font-weight-semibold: 900;
214
193
  --uilib-font-weight-bold: 900;
215
- --uilib-font-weight-black: 900;
216
194
  --uilib-accordion-radius: var(--uilib-border-radius-100);
217
195
  --uilib-accordion-logo-radius: var(--uilib-border-radius-100);
218
196
  --uilib-accordion-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
@@ -236,21 +214,21 @@
236
214
  --uilib-alert-text-color: var(--uilib-color-text-strong);
237
215
  --uilib-breadcrumb-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
238
216
  --uilib-button-radius: var(--uilib-border-radius-200);
239
- --uilib-button-primary-color: var(--uilib-color-interaction-primary-text);
240
- --uilib-button-primary-bg-color: var(--uilib-color-interaction-primary);
241
- --uilib-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
242
- --uilib-button-secondary-color: var(--uilib-color-interaction-secondary-text);
217
+ --uilib-button-primary-color: var(--uilib-color-text-inverse);
218
+ --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
219
+ --uilib-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
220
+ --uilib-button-secondary-color: var(--uilib-color-text-strong);
243
221
  --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
244
- --uilib-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
245
- --uilib-button-tertiary-color: var(--uilib-color-interaction-tertiary-text);
246
- --uilib-button-tertiary-bg-color: var(--uilib-color-interaction-tertiary);
247
- --uilib-button-tertiary-hover-bg-color: var(--uilib-color-interaction-tertiary-hover);
248
- --uilib-button-promotion-color: var(--uilib-color-promotion-text);
249
- --uilib-button-promotion-bg-color: var(--uilib-color-promotion-bg);
250
- --uilib-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
251
- --uilib-button-search-color: var(--uilib-color-interaction-primary-text);
252
- --uilib-button-search-bg-color: var(--uilib-color-interaction-primary);
253
- --uilib-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
222
+ --uilib-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
223
+ --uilib-button-tertiary-color: var(--uilib-color-text-inverse);
224
+ --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
225
+ --uilib-button-tertiary-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
226
+ --uilib-button-promotion-color: var(--uilib-color-text-inverse);
227
+ --uilib-button-promotion-bg-color: var(--uilib-color-core-interaction);
228
+ --uilib-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
229
+ --uilib-button-search-color: var(--uilib-color-text-inverse);
230
+ --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
231
+ --uilib-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
254
232
  --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
255
233
  --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
256
234
  --uilib-card-radius: var(--uilib-border-radius-200);
@@ -313,10 +291,10 @@
313
291
  --uilib-input-chip-default-bg-color: var(--uilib-color-core-neutral);
314
292
  --uilib-input-chip-default-border-color: var(--uilib-color-border-card);
315
293
  --uilib-input-chip-default-text-color: var(--uilib-color-text-strong);
316
- --uilib-input-chip-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
294
+ --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
317
295
  --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
318
296
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
319
- --uilib-input-chip-active-hover-bg-color: rgb(96.7843137255%, 82.2745098039%, 87.4509803922%);
297
+ --uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
320
298
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
321
299
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
322
300
  --uilib-input-count-radius: var(--uilib-border-radius-100);
@@ -388,28 +366,28 @@
388
366
  --uilib-highlight-panel-header-bg-overlay-brand: none;
389
367
  --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
390
368
  --uilib-icon-button-radius: var(--uilib-border-radius-200);
391
- --uilib-icon-button-text-color: var(--uilib-color-interaction-secondary-text);
392
- --uilib-icon-button-ghost-color: var(--uilib-color-interaction-secondary-text);
369
+ --uilib-icon-button-text-color: var(--uilib-color-core-interaction);
370
+ --uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
393
371
  --uilib-icon-button-ghost-bg-color: transparent;
394
- --uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
395
- --uilib-icon-button-primary-color: var(--uilib-color-interaction-primary-text);
396
- --uilib-icon-button-primary-bg-color: var(--uilib-color-interaction-primary);
397
- --uilib-icon-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
398
- --uilib-icon-button-secondary-color: var(--uilib-color-interaction-secondary-text);
372
+ --uilib-icon-button-ghost-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
373
+ --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
374
+ --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
375
+ --uilib-icon-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
376
+ --uilib-icon-button-secondary-color: var(--uilib-color-text-strong);
399
377
  --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
400
- --uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
401
- --uilib-icon-button-control-color: var(--uilib-color-interaction-secondary-text);
378
+ --uilib-icon-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
379
+ --uilib-icon-button-control-color: var(--uilib-color-text-strong);
402
380
  --uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
403
- --uilib-icon-button-control-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
404
- --uilib-icon-button-promotion-color: var(--uilib-color-promotion-text);
405
- --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion-bg);
406
- --uilib-icon-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
407
- --uilib-icon-button-search-color: var(--uilib-color-interaction-primary-text);
408
- --uilib-icon-button-search-bg-color: var(--uilib-color-interaction-primary);
409
- --uilib-icon-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
410
- --uilib-icon-button-shortlist-color: var(--uilib-color-shortlist-icon);
411
- --uilib-icon-button-shortlist-bg-color: var(--uilib-color-shortlist-bg);
412
- --uilib-icon-button-shortlist-hover-bg-color: var(--uilib-color-shortlist-bg-hover);
381
+ --uilib-icon-button-control-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
382
+ --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
383
+ --uilib-icon-button-promotion-bg-color: var(--uilib-color-core-interaction);
384
+ --uilib-icon-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
385
+ --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
386
+ --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
387
+ --uilib-icon-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
388
+ --uilib-icon-button-shortlist-color: var(--uilib-color-core-interaction);
389
+ --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
390
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(98.3921568627%, 91.137254902%, 93.7254901961%);
413
391
  --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
414
392
  --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
415
393
  --uilib-icon-button-size-small: 2rem;
@@ -425,14 +403,11 @@
425
403
  --uilib-image-fallback: url("https://mwa.tui.com/shared/mwa/assets/v3/illustrations/tui/sunset-adults.svg");
426
404
  --uilib-info-tag-radius: var(--uilib-border-radius-100);
427
405
  --uilib-info-tag-text-color: var(--uilib-color-text-strong);
428
- --uilib-info-tag-bg-color: var(--uilib-color-status-info-surface);
429
- --uilib-info-tag-local-product-text-color: var(--uilib-color-text-strong);
406
+ --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
430
407
  --uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
431
- --uilib-info-tag-neutral-text-color: var(--uilib-color-text-strong);
432
- --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
433
408
  --uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
434
- --uilib-info-tag-platinum-text-color: var(--uilib-color-text-on-dark);
435
- --uilib-info-tag-scarcity-text-color: var(--uilib-color-text-strong);
409
+ --uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
410
+ --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
436
411
  --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
437
412
  --uilib-link-decoration-color: var(--uilib-color-text-link);
438
413
  --uilib-link-decoration-visited-color: var(--uilib-color-text-link-visited);
@@ -455,6 +430,13 @@
455
430
  --uilib-loader-small-font: var(--uilib-typography-component-heading-medium);
456
431
  --uilib-loader-medium-font: var(--uilib-typography-component-heading-large);
457
432
  --uilib-loader-large-font: var(--uilib-typography-component-heading-xlarge);
433
+ --uilib-media-block-title-color: var(--uilib-color-text-strong);
434
+ --uilib-media-block-title-font-large: var(--uilib-typography-component-heading-xlarge-strong);
435
+ --uilib-media-block-title-font-medium: var(--uilib-typography-component-heading-small-strong);
436
+ --uilib-media-block-description-color: var(--uilib-color-text-body);
437
+ --uilib-media-block-description-font-large: var(--uilib-typography-body-large);
438
+ --uilib-media-block-description-font-medium: var(--uilib-typography-body-medium);
439
+ --uilib-media-block-media-radius: var(--uilib-border-radius-100);
458
440
  --uilib-media-button-color: var(--uilib-color-text-strong);
459
441
  --uilib-modal-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
460
442
  --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
@@ -514,7 +496,7 @@
514
496
  --uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
515
497
  --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
516
498
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
517
- --uilib-ratings-range-icons-tui-t-plus-color: #011750;
499
+ --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
518
500
  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
519
501
  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
520
502
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);