@tui/design-system 1.9.0 → 1.11.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 (40) hide show
  1. package/CHANGELOG.md +99 -0
  2. package/dist/themes/crystalski/index.css +37 -33
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +36 -33
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +45 -41
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +7 -1
  9. package/scss/lib/accordion/_mixins.scss +17 -1
  10. package/scss/lib/cards/product/_index.scss +3 -0
  11. package/scss/lib/cards/product/_mixins.scss +351 -0
  12. package/scss/lib/cards/product/_variables.scss +9 -0
  13. package/scss/lib/cards/search/_mixins.scss +15 -2
  14. package/scss/lib/cards/selectable/_mixins.scss +34 -11
  15. package/scss/lib/forms/input-checkbox/_mixins.scss +7 -7
  16. package/scss/lib/forms/input-radio/_mixins.scss +7 -7
  17. package/scss/lib/forms/input-select/_mixins.scss +21 -2
  18. package/scss/lib/grid/_column.scss +21 -0
  19. package/scss/lib/grid/_mixins.scss +89 -0
  20. package/scss/lib/highlight-panel/_mixins.scss +16 -2
  21. package/scss/lib/info-tag/_mixins.scss +2 -0
  22. package/scss/lib/patterns/reasons-to-book/_index.scss +3 -0
  23. package/scss/lib/patterns/reasons-to-book/_mixins.scss +86 -0
  24. package/scss/lib/patterns/reasons-to-book/_variables.scss +3 -0
  25. package/scss/lib/show-more-less/_mixins.scss +15 -4
  26. package/scss/lib/skeleton/_mixins.scss +33 -12
  27. package/scss/lib/timeline/_index.scss +2 -0
  28. package/scss/lib/timeline/_mixins.scss +87 -0
  29. package/scss/mixins.scss +6 -2
  30. package/scss/reset.scss +4 -0
  31. package/scss/themes/crystalski/_overrides.scss +25 -26
  32. package/scss/themes/crystalski/index.scss +13 -10
  33. package/scss/themes/firstchoice/_overrides.scss +33 -28
  34. package/scss/themes/firstchoice/index.scss +9 -6
  35. package/scss/themes/firstchoice/theme.json +7 -0
  36. package/scss/themes/tui/_overrides.scss +8 -3
  37. package/scss/themes/tui/index.scss +12 -9
  38. package/scss/variables/base-theme.json +30 -8
  39. package/scss/variables.scss +5 -2
  40. package/types/components.ts +14 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,104 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.11.0
4
+
5
+ ### Added
6
+
7
+ #### [Product card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-product-card--docs)
8
+
9
+ - Added the Product Card as a replacement for Search Card. This component provides the structural shell for displaying a product in a set of results.
10
+ It handles the image area, content container, promo area, and flagship wrapper — consuming teams provide their own content within the main content
11
+ area.
12
+
13
+ #### [Timeline](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-timeline--docs)
14
+
15
+ - Added Timeline component for displaying sequential steps or events connected by a vertical line with marker icons. Content alongside each marker is
16
+ flexible and can contain text, panels, accordions, or any other component.
17
+
18
+ ### Updated
19
+
20
+ #### [Date picker](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-picker--docs) and [Date range](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-date-range--docs)
21
+
22
+ - The start and end date inputs are now updated immediately as the user selects each date in the range, rather than waiting for the full range to be
23
+ completed.
24
+ - Added `rangestart` and `rangeend` events on the host element, fired as each date is selected. Detail format matches the `change` event
25
+ (`{ startValue }` and `{ endValue }` respectively).
26
+ - Fixed `change` event to fire once with both `{ startValue, endValue }` for range pickers, instead of firing twice with separate payloads.
27
+ - Manually entering a start date now sets the calendar to "awaiting end date" mode, highlighting the tentative range as the user hovers or navigates
28
+ dates.
29
+ - Fixed calendar not clearing its selected date when the input is cleared via the clear button or programmatically.
30
+
31
+ #### [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)
32
+
33
+ - Label interactive area now matches the width of its content rather than expanding to fill the container.
34
+
35
+ #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
36
+
37
+ - Added guidance on how to preserve the shimmer animation within shadow DOM MFEs.
38
+ - Added `uilib-skeleton--product-card` skeleton type for use with the new product card component.
39
+
40
+ ### Fixed
41
+
42
+ #### [Globals](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-update-history--docs)
43
+
44
+ - Fix for webkit retaining the autofill colour. All text inputs, textareas and select inputs now retain their original background colours.
45
+
46
+ #### [Highlight panel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-highlight-panel--docs) and [Show more or less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
47
+
48
+ - Removed `content-visibility` CSS property from component animation. This was preventing VoiceOver from accessing highlight panel content when
49
+ expanded.
50
+
51
+ ### Deprecated
52
+
53
+ #### [Search card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
54
+
55
+ - Search card has been deprecated and replaced by Product card, a more flexible component that gives consuming teams greater control over the card's
56
+ content structure and layout.
57
+
58
+ #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
59
+
60
+ - Deprecated `uilib-skeleton--card` (search card skeleton) — use `uilib-skeleton--product-card` instead.
61
+
62
+ ## v1.10.0
63
+
64
+ ### Added
65
+
66
+ #### [Reasons to book](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-reasons-to-book--docs)
67
+
68
+ - Added the Reasons to book pattern — a promo strip that displays trust and value propositions (e.g. 24/7 support, ABTA/ATOL protection, no hidden
69
+ fees) as a horizontally scrollable carousel. Reason cards keep their natural width and only trigger the Carousel's scroll controls once they
70
+ overflow the available width, and switch to a compact, centred layout at narrow widths.
71
+
72
+ ### Updated
73
+
74
+ #### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
75
+
76
+ - Added column divider mixins and utility classes (`divider-left`, `divider-top`) that use pseudo-elements to render decorative lines in the grid
77
+ gutter. Both directions can be applied simultaneously and support responsive breakpoint variants with `divider-none` to remove them when layouts
78
+ reflow.
79
+
80
+ #### [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)
81
+
82
+ - Added pointer cursor on hover for the label.
83
+
84
+ #### [Selectable card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
85
+
86
+ - The info tag can now be shown independently of the image – previously it only appeared automatically alongside an image, with no way to include one
87
+ without the other.
88
+
89
+ ### Fixed
90
+
91
+ #### [Carousel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-carousel--docs)
92
+
93
+ - Fixed the carousel container's role from `region` to `group`, matching the design's accessibility annotation — a carousel is supplementary content,
94
+ not a significant enough page section to be a landmark.
95
+ - Fixed a screen reader issue where NVDA announced "blank" after the last slide; the scroll viewport now gets `role="presentation"` once JavaScript
96
+ enhances the carousel.
97
+
98
+ #### [Input select](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-select--docs)
99
+
100
+ - Fix to make the whole visible area of the input select interactive. Prior to this fix, areas such as the icons were not interactive.
101
+
3
102
  ## v1.9.0
4
103
 
5
104
  ### Added
package/dist/themes/crystalski/index.css CHANGED
@@ -209,19 +209,19 @@
209
209
  --uilib-button-radius: var(--uilib-border-radius-pill);
210
210
  --uilib-button-primary-color: var(--uilib-color-text-inverse);
211
211
  --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
212
- --uilib-button-primary-hover-bg-color: rgb(156.6, 91, 175);
212
+ --uilib-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
213
213
  --uilib-button-secondary-color: var(--uilib-color-core-interaction);
214
214
  --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
215
- --uilib-button-secondary-hover-bg-color: rgb(230.4, 214, 235);
215
+ --uilib-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
216
216
  --uilib-button-tertiary-color: var(--uilib-color-text-inverse);
217
217
  --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
218
- --uilib-button-tertiary-hover-bg-color: rgb(73.4, 139.8, 141.4);
218
+ --uilib-button-tertiary-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
219
219
  --uilib-button-promotion-color: var(--uilib-color-text-inverse);
220
220
  --uilib-button-promotion-bg-color: var(--uilib-color-promotion);
221
- --uilib-button-promotion-hover-bg-color: rgb(204.6, 52.6, 100.6);
221
+ --uilib-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
222
222
  --uilib-button-search-color: var(--uilib-color-text-inverse);
223
223
  --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
224
- --uilib-button-search-hover-bg-color: rgb(73.4, 139.8, 141.4);
224
+ --uilib-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
225
225
  --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
226
226
  --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
227
227
  --uilib-card-radius: var(--uilib-border-radius-400);
@@ -242,6 +242,19 @@
242
242
  --uilib-card-icon-small-radius: var(--uilib-card-radius);
243
243
  --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
244
244
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
245
+ --uilib-card-product-radius-spacing: var(--uilib-card-radius);
246
+ --uilib-card-product-flagship-color: var(--uilib-color-core-brand-strong);
247
+ --uilib-card-product-flagship-text-color: var(--uilib-color-text-inverse);
248
+ --uilib-card-product-highlights-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
249
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
250
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
251
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
252
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
253
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
254
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
255
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
256
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/copy.svg");
257
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-circled-filled.svg");
245
258
  --uilib-card-search-radius-spacing: var(--uilib-card-radius);
246
259
  --uilib-card-search-flagship-color: var(--uilib-color-core-brand-strong);
247
260
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);
@@ -274,7 +287,7 @@
274
287
  --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
275
288
  --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
276
289
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
277
- --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
290
+ --uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
278
291
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
279
292
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
280
293
  --uilib-input-count-radius: var(--uilib-border-radius-100);
@@ -289,8 +302,6 @@
289
302
  --uilib-input-radio-scroll-previous-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
290
303
  --uilib-input-radio-scroll-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
291
304
  --uilib-input-select-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-updown.svg");
292
- --uilib-input-stepper-increment-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/plus.svg");
293
- --uilib-input-stepper-decrement-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/minus.svg");
294
305
  --uilib-input-slider-track-color: var(--uilib-color-other-disabled-strong);
295
306
  --uilib-input-slider-track-selected-color: var(--uilib-color-core-interaction);
296
307
  --uilib-input-slider-track-height: 0.375rem;
@@ -298,6 +309,8 @@
298
309
  --uilib-input-slider-thumb-size: 2rem;
299
310
  --uilib-input-slider-thumb-radius: var(--uilib-border-radius-circle);
300
311
  --uilib-input-slider-thumb-border-color: var(--uilib-color-core-interaction);
312
+ --uilib-input-stepper-increment-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/plus.svg");
313
+ --uilib-input-stepper-decrement-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/minus.svg");
301
314
  --uilib-input-switch-track-color: var(--uilib-color-core-neutral);
302
315
  --uilib-input-switch-track-selected-color: var(--uilib-color-core-interaction);
303
316
  --uilib-input-switch-track-color-disabled: var(--uilib-color-other-disabled-soft);
@@ -348,25 +361,25 @@
348
361
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
349
362
  --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
350
363
  --uilib-icon-button-ghost-bg-color: transparent;
351
- --uilib-icon-button-ghost-hover-bg-color: rgb(230.4, 214, 235);
364
+ --uilib-icon-button-ghost-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
352
365
  --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
353
366
  --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
354
- --uilib-icon-button-primary-hover-bg-color: rgb(156.6, 91, 175);
367
+ --uilib-icon-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
355
368
  --uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
356
369
  --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
357
- --uilib-icon-button-secondary-hover-bg-color: rgb(230.4, 214, 235);
370
+ --uilib-icon-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
358
371
  --uilib-icon-button-control-color: var(--uilib-color-core-interaction);
359
372
  --uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
360
- --uilib-icon-button-control-hover-bg-color: rgb(230.4, 214, 235);
373
+ --uilib-icon-button-control-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
361
374
  --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
362
375
  --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
363
- --uilib-icon-button-promotion-hover-bg-color: rgb(204.6, 52.6, 100.6);
376
+ --uilib-icon-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
364
377
  --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
365
378
  --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
366
- --uilib-icon-button-search-hover-bg-color: rgb(73.4, 139.8, 141.4);
379
+ --uilib-icon-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
367
380
  --uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
368
381
  --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
369
- --uilib-icon-button-shortlist-hover-bg-color: rgb(248.7, 229.7, 235.7);
382
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(97.5294117647%, 90.0784313725%, 92.431372549%);
370
383
  --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
371
384
  --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
372
385
  --uilib-icon-button-size-small: 2rem;
@@ -426,15 +439,6 @@
426
439
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
427
440
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
428
441
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
429
- --uilib-card-promotion-elevation: var(--uilib-elevation-100);
430
- --uilib-card-promotion-radius: var(--uilib-border-radius-400);
431
- --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
432
- --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
433
- --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
434
- --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
435
- --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
436
- --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/copy.svg");
437
- --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/checkmark-circled-filled.svg");
438
442
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
439
443
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
440
444
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
@@ -453,6 +457,13 @@
453
457
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-text-inverse);
454
458
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
455
459
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/thumbs-up.svg");
460
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
461
+ --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
462
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
463
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
464
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
465
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
466
+ --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
456
467
  --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
457
468
  --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
458
469
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
@@ -471,13 +482,6 @@
471
482
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
472
483
  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
473
484
  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
474
- --uilib-ratings-range-bar-bar-width: 11.25rem;
475
- --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
476
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
477
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
478
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
479
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
480
- --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
481
485
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
482
486
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
483
487
  --uilib-scroller-thumb-color: var(--uilib-color-other-scroll-handle);
@@ -485,8 +489,8 @@
485
489
  --uilib-scroller-focus-radius: var(--uilib-border-radius-100);
486
490
  --uilib-scroller-bar-size: var(--uilib-spacing-400);
487
491
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
488
- --uilib-skeleton-color: #d8d8d8;
489
- --uilib-skeleton-shimmer-color: #f5f5f5;
492
+ --uilib-skeleton-color: var(--uilib-color-other-skeleton-loading);
493
+ --uilib-skeleton-shimmer-color: var(--uilib-color-canvas-contrast);
490
494
  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
491
495
  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/cross.svg");
492
496
  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
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;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","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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
@@ -215,19 +215,19 @@
215
215
  --uilib-button-radius: var(--uilib-border-radius-200);
216
216
  --uilib-button-primary-color: var(--uilib-color-text-inverse);
217
217
  --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
218
- --uilib-button-primary-hover-bg-color: rgb(222.2, 74.2, 127);
218
+ --uilib-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
219
219
  --uilib-button-secondary-color: var(--uilib-color-text-strong);
220
220
  --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
221
- --uilib-button-secondary-hover-bg-color: rgb(204, 213.4, 208.6);
221
+ --uilib-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
222
222
  --uilib-button-tertiary-color: var(--uilib-color-text-inverse);
223
223
  --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
224
- --uilib-button-tertiary-hover-bg-color: rgb(51, 88.6, 69.4);
224
+ --uilib-button-tertiary-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
225
225
  --uilib-button-promotion-color: var(--uilib-color-text-inverse);
226
226
  --uilib-button-promotion-bg-color: var(--uilib-color-core-interaction);
227
- --uilib-button-promotion-hover-bg-color: rgb(222.2, 74.2, 127);
227
+ --uilib-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
228
228
  --uilib-button-search-color: var(--uilib-color-text-inverse);
229
229
  --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
230
- --uilib-button-search-hover-bg-color: rgb(51, 88.6, 69.4);
230
+ --uilib-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
231
231
  --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
232
232
  --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
233
233
  --uilib-card-radius: var(--uilib-border-radius-200);
@@ -248,11 +248,23 @@
248
248
  --uilib-card-icon-small-radius: var(--uilib-border-radius-200);
249
249
  --uilib-card-icon-large-radius: var(--uilib-border-radius-200);
250
250
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
251
- --uilib-card-search-radius-spacing: var(--uilib-spacing-200);
251
+ --uilib-card-product-radius-spacing: var(--uilib-card-radius);
252
+ --uilib-card-product-flagship-color: var(--uilib-color-core-brand-strong);
253
+ --uilib-card-product-flagship-text-color: var(--uilib-color-text-inverse);
254
+ --uilib-card-product-highlights-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
255
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
256
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
257
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
258
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
259
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
260
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
261
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
262
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/copy.svg");
263
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-circled-filled.svg");
264
+ --uilib-card-search-radius-spacing: var(--uilib-card-radius);
252
265
  --uilib-card-search-flagship-color: var(--uilib-color-core-brand-strong);
253
266
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);
254
267
  --uilib-card-search-highlights-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
255
- --uilib-card-search-radius: var(--uilib-border-radius-200);
256
268
  --uilib-card-selectable-radius: var(--uilib-border-radius-200);
257
269
  --uilib-card-selectable-bg-color: var(--uilib-color-core-neutral);
258
270
  --uilib-card-selectable-default-border-color: var(--uilib-color-border-card);
@@ -281,7 +293,7 @@
281
293
  --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
282
294
  --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
283
295
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
284
- --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
296
+ --uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
285
297
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
286
298
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
287
299
  --uilib-input-count-radius: var(--uilib-border-radius-100);
@@ -355,25 +367,25 @@
355
367
  --uilib-icon-button-radius: var(--uilib-border-radius-200);
356
368
  --uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
357
369
  --uilib-icon-button-ghost-bg-color: transparent;
358
- --uilib-icon-button-ghost-hover-bg-color: rgb(204, 213.4, 208.6);
370
+ --uilib-icon-button-ghost-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
359
371
  --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
360
372
  --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
361
- --uilib-icon-button-primary-hover-bg-color: rgb(222.2, 74.2, 127);
373
+ --uilib-icon-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
362
374
  --uilib-icon-button-secondary-color: var(--uilib-color-text-strong);
363
375
  --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
364
- --uilib-icon-button-secondary-hover-bg-color: rgb(204, 213.4, 208.6);
376
+ --uilib-icon-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
365
377
  --uilib-icon-button-control-color: var(--uilib-color-text-strong);
366
378
  --uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
367
- --uilib-icon-button-control-hover-bg-color: rgb(204, 213.4, 208.6);
379
+ --uilib-icon-button-control-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
368
380
  --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
369
381
  --uilib-icon-button-promotion-bg-color: var(--uilib-color-core-interaction);
370
- --uilib-icon-button-promotion-hover-bg-color: rgb(222.2, 74.2, 127);
382
+ --uilib-icon-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
371
383
  --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
372
384
  --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
373
- --uilib-icon-button-search-hover-bg-color: rgb(51, 88.6, 69.4);
385
+ --uilib-icon-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
374
386
  --uilib-icon-button-shortlist-color: var(--uilib-color-core-interaction);
375
387
  --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
376
- --uilib-icon-button-shortlist-hover-bg-color: rgb(250.9, 232.4, 239);
388
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(98.3921568627%, 91.137254902%, 93.7254901961%);
377
389
  --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
378
390
  --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
379
391
  --uilib-icon-button-size-small: 2rem;
@@ -433,15 +445,6 @@
433
445
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
434
446
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
435
447
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
436
- --uilib-card-promotion-elevation: var(--uilib-elevation-100);
437
- --uilib-card-promotion-radius: var(--uilib-border-radius-400);
438
- --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
439
- --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
440
- --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
441
- --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
442
- --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
443
- --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/copy.svg");
444
- --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/checkmark-circled-filled.svg");
445
448
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
446
449
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
447
450
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
@@ -460,6 +463,13 @@
460
463
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-text-inverse);
461
464
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
462
465
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/thumbs-up.svg");
466
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
467
+ --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
468
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
469
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
470
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
471
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
472
+ --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
463
473
  --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
464
474
  --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
465
475
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
@@ -478,13 +488,6 @@
478
488
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
479
489
  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
480
490
  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
481
- --uilib-ratings-range-bar-bar-width: 11.25rem;
482
- --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
483
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
484
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
485
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
486
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
487
- --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
488
491
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
489
492
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
490
493
  --uilib-scroller-thumb-color: var(--uilib-color-other-scroll-handle);
@@ -492,8 +495,8 @@
492
495
  --uilib-scroller-focus-radius: var(--uilib-border-radius-100);
493
496
  --uilib-scroller-bar-size: var(--uilib-spacing-400);
494
497
  --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
495
- --uilib-skeleton-color: #e3e9e7;
496
- --uilib-skeleton-shimmer-color: #fff;
498
+ --uilib-skeleton-color: var(--uilib-color-other-skeleton-loading);
499
+ --uilib-skeleton-shimmer-color: var(--uilib-color-canvas-default);
497
500
  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
498
501
  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/cross.svg");
499
502
  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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
@@ -232,19 +232,19 @@
232
232
  --uilib-button-radius: var(--uilib-border-radius-pill);
233
233
  --uilib-button-primary-color: var(--uilib-color-text-inverse);
234
234
  --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
235
- --uilib-button-primary-hover-bg-color: rgb(60.6, 111, 245.4);
235
+ --uilib-button-primary-hover-bg-color: rgb(23.7647058824%, 43.5294117647%, 96.2352941176%);
236
236
  --uilib-button-secondary-color: var(--uilib-color-core-interaction);
237
237
  --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
238
238
  --uilib-button-secondary-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
239
239
  --uilib-button-tertiary-color: var(--uilib-color-text-strong);
240
240
  --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand);
241
- --uilib-button-tertiary-hover-bg-color: rgb(140.6, 213.4, 246.2);
241
+ --uilib-button-tertiary-hover-bg-color: rgb(55.137254902%, 83.6862745098%, 96.5490196078%);
242
242
  --uilib-button-promotion-color: var(--uilib-color-text-inverse);
243
243
  --uilib-button-promotion-bg-color: var(--uilib-color-promotion);
244
- --uilib-button-promotion-hover-bg-color: rgb(204.6, 60.6, 65.4);
244
+ --uilib-button-promotion-hover-bg-color: rgb(80.2352941176%, 23.7647058824%, 25.6470588235%);
245
245
  --uilib-button-search-color: var(--uilib-color-text-inverse);
246
246
  --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
247
- --uilib-button-search-hover-bg-color: rgb(72.6, 64.6, 124.6);
247
+ --uilib-button-search-hover-bg-color: rgb(28.4705882353%, 25.3333333333%, 48.862745098%);
248
248
  --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
249
249
  --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
250
250
  --uilib-card-radius: var(--uilib-border-radius-400);
@@ -265,6 +265,19 @@
265
265
  --uilib-card-icon-small-radius: var(--uilib-card-radius);
266
266
  --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
267
267
  --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
268
+ --uilib-card-product-radius-spacing: var(--uilib-card-radius);
269
+ --uilib-card-product-flagship-color: var(--uilib-color-brand-tui-blue);
270
+ --uilib-card-product-flagship-text-color: var(--uilib-color-text-inverse);
271
+ --uilib-card-product-highlights-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
272
+ --uilib-card-promotion-elevation: var(--uilib-elevation-100);
273
+ --uilib-card-promotion-radius: var(--uilib-border-radius-400);
274
+ --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
275
+ --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
276
+ --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
277
+ --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
278
+ --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
279
+ --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/copy.svg");
280
+ --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-circled-filled.svg");
268
281
  --uilib-card-search-radius-spacing: var(--uilib-card-radius);
269
282
  --uilib-card-search-flagship-color: var(--uilib-color-brand-tui-blue);
270
283
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);
@@ -297,7 +310,7 @@
297
310
  --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
298
311
  --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
299
312
  --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
300
- --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
313
+ --uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
301
314
  --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
302
315
  --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
303
316
  --uilib-input-count-radius: var(--uilib-border-radius-100);
@@ -352,13 +365,29 @@
352
365
  --uilib-hero-flagship-content-bg-color: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
353
366
  --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
354
367
  --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
368
+ --uilib-highlight-panel-radius: var(--uilib-border-radius-400);
369
+ --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
370
+ --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
371
+ --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
372
+ --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
373
+ --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
374
+ --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
375
+ --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
376
+ --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
377
+ --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
378
+ --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
379
+ --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
380
+ --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
381
+ --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
382
+ --uilib-highlight-panel-header-bg-overlay-brand: radial-gradient(circle farthest-corner at 99.91% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);
383
+ --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
355
384
  --uilib-icon-button-radius: var(--uilib-border-radius-pill);
356
385
  --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
357
386
  --uilib-icon-button-ghost-bg-color: transparent;
358
387
  --uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
359
388
  --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
360
389
  --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
361
- --uilib-icon-button-primary-hover-bg-color: rgb(60.6, 111, 245.4);
390
+ --uilib-icon-button-primary-hover-bg-color: rgb(23.7647058824%, 43.5294117647%, 96.2352941176%);
362
391
  --uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
363
392
  --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
364
393
  --uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
@@ -367,13 +396,13 @@
367
396
  --uilib-icon-button-control-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
368
397
  --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
369
398
  --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
370
- --uilib-icon-button-promotion-hover-bg-color: rgb(204.6, 60.6, 65.4);
399
+ --uilib-icon-button-promotion-hover-bg-color: rgb(80.2352941176%, 23.7647058824%, 25.6470588235%);
371
400
  --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
372
401
  --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
373
- --uilib-icon-button-search-hover-bg-color: rgb(72.6, 64.6, 124.6);
402
+ --uilib-icon-button-search-hover-bg-color: rgb(28.4705882353%, 25.3333333333%, 48.862745098%);
374
403
  --uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
375
404
  --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
376
- --uilib-icon-button-shortlist-hover-bg-color: rgb(248.7, 230.7, 231.3);
405
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(97.5294117647%, 90.4705882353%, 90.7058823529%);
377
406
  --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
378
407
  --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
379
408
  --uilib-icon-button-size-small: 2rem;
@@ -433,15 +462,6 @@
433
462
  --uilib-price-main-medium-font: var(--uilib-typography-component-heading-large-strong);
434
463
  --uilib-price-main-large-font: var(--uilib-typography-component-heading-xxlarge-strong);
435
464
  --uilib-price-sub-large-font: var(--uilib-typography-component-heading-medium-strong);
436
- --uilib-card-promotion-elevation: var(--uilib-elevation-100);
437
- --uilib-card-promotion-radius: var(--uilib-border-radius-400);
438
- --uilib-card-promotion-bg-color: var(--uilib-color-core-neutral);
439
- --uilib-card-promotion-headline-color: var(--uilib-color-text-strong);
440
- --uilib-card-promotion-subcopy-color: var(--uilib-color-text-body);
441
- --uilib-card-promotion-subcopy-link-color: var(--uilib-color-text-link);
442
- --uilib-card-promotion-code-color: var(--uilib-color-text-strong);
443
- --uilib-card-promotion-cta-copy-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/copy.svg");
444
- --uilib-card-promotion-cta-copied-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark-circled-filled.svg");
445
465
  --uilib-promo-tag-radius: var(--uilib-border-radius-400);
446
466
  --uilib-promo-tag-color: var(--uilib-color-text-strong);
447
467
  --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
@@ -460,6 +480,13 @@
460
480
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-brand-musement);
461
481
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
462
482
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/thumbs-up.svg");
483
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
484
+ --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
485
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
486
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
487
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
488
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
489
+ --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
463
490
  --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
464
491
  --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
465
492
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
@@ -478,13 +505,6 @@
478
505
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
479
506
  --uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
480
507
  --uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
481
- --uilib-ratings-range-bar-bar-width: 11.25rem;
482
- --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
483
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
484
- --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
485
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
486
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
487
- --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
488
508
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
489
509
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
490
510
  --uilib-scroller-thumb-color: var(--uilib-color-other-scroll-handle);
@@ -497,22 +517,6 @@
497
517
  --uilib-social-proofing-radius: var(--uilib-border-radius-300);
498
518
  --uilib-social-proofing-close-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
499
519
  --uilib-social-proofing-box-shadow: var(--uilib-elevation-100);
500
- --uilib-highlight-panel-radius: var(--uilib-border-radius-400);
501
- --uilib-highlight-panel-border-color: var(--uilib-color-border-card);
502
- --uilib-highlight-panel-bg-color: var(--uilib-color-canvas-default);
503
- --uilib-highlight-panel-header-font: var(--uilib-typography-component-heading-medium);
504
- --uilib-highlight-panel-header-font-brand: var(--uilib-typography-component-heading-large-strong);
505
- --uilib-highlight-panel-header-font-color: var(--uilib-color-text-strong);
506
- --uilib-highlight-panel-header-font-color-strong: var(--uilib-color-text-inverse);
507
- --uilib-highlight-panel-header-font-color-brand: var(--uilib-color-text-strong);
508
- --uilib-highlight-panel-header-icon-color: var(--uilib-color-core-interaction);
509
- --uilib-highlight-panel-header-icon-color-strong: var(--uilib-color-text-inverse);
510
- --uilib-highlight-panel-header-icon-color-brand: var(--uilib-color-core-interaction);
511
- --uilib-highlight-panel-header-bg-color: var(--uilib-color-core-surface);
512
- --uilib-highlight-panel-header-bg-color-strong: var(--uilib-color-core-brand-strong);
513
- --uilib-highlight-panel-header-bg-color-brand: var(--uilib-color-core-brand);
514
- --uilib-highlight-panel-header-bg-overlay-brand: radial-gradient(circle farthest-corner at 99.91% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0) 80%);
515
- --uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
516
520
  --uilib-tabs-in-page-border-color: var(--uilib-color-border-card);
517
521
  --uilib-tabs-in-page-text-color: var(--uilib-color-text-strong);
518
522
  --uilib-tabs-in-page-active-color: var(--uilib-color-text-link);