@tui/design-system 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/CHANGELOG.md +317 -0
  2. package/README.md +99 -0
  3. package/dist/themes/crystalski/fonts.css +49 -0
  4. package/dist/themes/crystalski/fonts.css.map +1 -0
  5. package/dist/themes/crystalski/index.css +416 -0
  6. package/dist/themes/crystalski/index.css.map +1 -0
  7. package/dist/themes/firstchoice/fonts.css +50 -0
  8. package/dist/themes/firstchoice/fonts.css.map +1 -0
  9. package/dist/themes/firstchoice/index.css +422 -0
  10. package/dist/themes/firstchoice/index.css.map +1 -0
  11. package/dist/themes/tui/fonts.css +117 -0
  12. package/dist/themes/tui/fonts.css.map +1 -0
  13. package/dist/themes/tui/index.css +437 -0
  14. package/dist/themes/tui/index.css.map +1 -0
  15. package/package.json +175 -0
  16. package/scss/functions/_map.scss +84 -0
  17. package/scss/functions.scss +1 -0
  18. package/scss/lib/accordion/_index.scss +4 -0
  19. package/scss/lib/accordion/_mixins.scss +233 -0
  20. package/scss/lib/accordion/_variables.scss +11 -0
  21. package/scss/lib/active-tag/_index.scss +4 -0
  22. package/scss/lib/active-tag/_mixins.scss +112 -0
  23. package/scss/lib/active-tag/_variables.scss +8 -0
  24. package/scss/lib/alert/_index.scss +3 -0
  25. package/scss/lib/alert/_mixins.scss +135 -0
  26. package/scss/lib/alert/_variables.scss +15 -0
  27. package/scss/lib/breadcrumb/_index.scss +3 -0
  28. package/scss/lib/breadcrumb/_mixins.scss +58 -0
  29. package/scss/lib/breadcrumb/_variables.scss +6 -0
  30. package/scss/lib/button/_index.scss +4 -0
  31. package/scss/lib/button/_mixins.scss +193 -0
  32. package/scss/lib/button/_variables.scss +25 -0
  33. package/scss/lib/cards/card/_index.scss +3 -0
  34. package/scss/lib/cards/card/_mixins.scss +37 -0
  35. package/scss/lib/cards/card/_variables.scss +2 -0
  36. package/scss/lib/cards/search/_index.scss +3 -0
  37. package/scss/lib/cards/search/_mixins.scss +432 -0
  38. package/scss/lib/cards/search/_variables.scss +10 -0
  39. package/scss/lib/divider/_index.scss +4 -0
  40. package/scss/lib/divider/_mixins.scss +54 -0
  41. package/scss/lib/divider/_variables.scss +17 -0
  42. package/scss/lib/flight-details/_index.scss +3 -0
  43. package/scss/lib/flight-details/_mixins.scss +468 -0
  44. package/scss/lib/flight-details/_variables.scss +6 -0
  45. package/scss/lib/flyout-dropdown/_index.scss +3 -0
  46. package/scss/lib/flyout-dropdown/_mixins.scss +124 -0
  47. package/scss/lib/forms/form-row/_index.scss +3 -0
  48. package/scss/lib/forms/form-row/_mixins.scss +72 -0
  49. package/scss/lib/forms/form-row/_variables.scss +7 -0
  50. package/scss/lib/forms/input-checkbox/_index.scss +3 -0
  51. package/scss/lib/forms/input-checkbox/_mixins.scss +216 -0
  52. package/scss/lib/forms/input-checkbox/_variables.scss +9 -0
  53. package/scss/lib/forms/input-chip/_index.scss +4 -0
  54. package/scss/lib/forms/input-chip/_mixins.scss +124 -0
  55. package/scss/lib/forms/input-chip/_variables.scss +19 -0
  56. package/scss/lib/forms/input-count/_index.scss +3 -0
  57. package/scss/lib/forms/input-count/_mixins.scss +72 -0
  58. package/scss/lib/forms/input-count/_variables.scss +13 -0
  59. package/scss/lib/forms/input-radio/_index.scss +3 -0
  60. package/scss/lib/forms/input-radio/_mixins.scss +139 -0
  61. package/scss/lib/forms/input-radio/_variables.scss +6 -0
  62. package/scss/lib/forms/input-slider/_index.scss +3 -0
  63. package/scss/lib/forms/input-slider/_mixins.scss +147 -0
  64. package/scss/lib/forms/input-slider/_variables.scss +12 -0
  65. package/scss/lib/forms/input-stepper/_index.scss +3 -0
  66. package/scss/lib/forms/input-stepper/_mixins.scss +143 -0
  67. package/scss/lib/forms/input-stepper/_variables.scss +7 -0
  68. package/scss/lib/forms/input-switch/_index.scss +3 -0
  69. package/scss/lib/forms/input-switch/_mixins.scss +122 -0
  70. package/scss/lib/forms/input-switch/_variables.scss +18 -0
  71. package/scss/lib/forms/input-text/_index.scss +3 -0
  72. package/scss/lib/forms/input-text/_mixins.scss +155 -0
  73. package/scss/lib/forms/input-text/_variables.scss +9 -0
  74. package/scss/lib/forms/textarea/_index.scss +3 -0
  75. package/scss/lib/forms/textarea/_mixins.scss +88 -0
  76. package/scss/lib/grid/_column.scss +51 -0
  77. package/scss/lib/grid/_container.scss +21 -0
  78. package/scss/lib/grid/_index.scss +3 -0
  79. package/scss/lib/grid/_mixins.scss +126 -0
  80. package/scss/lib/grid/_variables.scss +11 -0
  81. package/scss/lib/hero/_index.scss +3 -0
  82. package/scss/lib/hero/_mixins.scss +336 -0
  83. package/scss/lib/hero/_variables.scss +21 -0
  84. package/scss/lib/icon/_index.scss +3 -0
  85. package/scss/lib/icon/_mixins.scss +54 -0
  86. package/scss/lib/icon/_variables.scss +10 -0
  87. package/scss/lib/icon-button/_index.scss +3 -0
  88. package/scss/lib/icon-button/_mixins.scss +168 -0
  89. package/scss/lib/icon-button/_variables.scss +31 -0
  90. package/scss/lib/image/_index.scss +3 -0
  91. package/scss/lib/image/_mixins.scss +89 -0
  92. package/scss/lib/image/_variables.scss +13 -0
  93. package/scss/lib/info-tag/_index.scss +4 -0
  94. package/scss/lib/info-tag/_mixins.scss +100 -0
  95. package/scss/lib/info-tag/_variables.scss +13 -0
  96. package/scss/lib/link/_index.scss +3 -0
  97. package/scss/lib/link/_mixins.scss +86 -0
  98. package/scss/lib/link/_variables.scss +13 -0
  99. package/scss/lib/list/_index.scss +3 -0
  100. package/scss/lib/list/_mixins.scss +198 -0
  101. package/scss/lib/list/_variables.scss +9 -0
  102. package/scss/lib/loader/_index.scss +3 -0
  103. package/scss/lib/loader/_mixins.scss +52 -0
  104. package/scss/lib/loader/_variables.scss +12 -0
  105. package/scss/lib/media-button/_index.scss +4 -0
  106. package/scss/lib/media-button/_mixins.scss +75 -0
  107. package/scss/lib/media-button/_variables.scss +4 -0
  108. package/scss/lib/modal/_index.scss +2 -0
  109. package/scss/lib/modal/_mixins.scss +135 -0
  110. package/scss/lib/modal/_variables.scss +11 -0
  111. package/scss/lib/pagination/_index.scss +3 -0
  112. package/scss/lib/pagination/_mixins.scss +220 -0
  113. package/scss/lib/pagination/_variables.scss +12 -0
  114. package/scss/lib/price/_index.scss +3 -0
  115. package/scss/lib/price/_mixins.scss +83 -0
  116. package/scss/lib/price/_variables.scss +10 -0
  117. package/scss/lib/promo-tag/_index.scss +4 -0
  118. package/scss/lib/promo-tag/_mixins.scss +81 -0
  119. package/scss/lib/promo-tag/_variables.scss +7 -0
  120. package/scss/lib/ratings-reviews/numerical/_index.scss +3 -0
  121. package/scss/lib/ratings-reviews/numerical/_mixins.scss +91 -0
  122. package/scss/lib/ratings-reviews/numerical/_variables.scss +18 -0
  123. package/scss/lib/ratings-reviews/percentage/_index.scss +3 -0
  124. package/scss/lib/ratings-reviews/percentage/_mixins.scss +74 -0
  125. package/scss/lib/ratings-reviews/percentage/_variables.scss +6 -0
  126. package/scss/lib/ratings-reviews/range-bar/_index.scss +3 -0
  127. package/scss/lib/ratings-reviews/range-bar/_mixins.scss +88 -0
  128. package/scss/lib/ratings-reviews/range-bar/_variables.scss +16 -0
  129. package/scss/lib/ratings-reviews/range-icons/_index.scss +3 -0
  130. package/scss/lib/ratings-reviews/range-icons/_mixins.scss +200 -0
  131. package/scss/lib/ratings-reviews/range-icons/_variables.scss +31 -0
  132. package/scss/lib/ratings-reviews/range-icons-group/_index.scss +3 -0
  133. package/scss/lib/ratings-reviews/range-icons-group/_mixins.scss +26 -0
  134. package/scss/lib/richtext/_index.scss +3 -0
  135. package/scss/lib/richtext/_mixins.scss +136 -0
  136. package/scss/lib/scroller/_index.scss +4 -0
  137. package/scss/lib/scroller/_mixins.scss +130 -0
  138. package/scss/lib/scroller/_variables.scss +9 -0
  139. package/scss/lib/show-more-less/_index.scss +3 -0
  140. package/scss/lib/show-more-less/_mixins.scss +90 -0
  141. package/scss/lib/show-more-less/_variables.scss +6 -0
  142. package/scss/lib/skeleton/_index.scss +3 -0
  143. package/scss/lib/skeleton/_mixins.scss +151 -0
  144. package/scss/lib/skeleton/_variables.scss +8 -0
  145. package/scss/lib/tooltip/_index.scss +3 -0
  146. package/scss/lib/tooltip/_mixins.scss +305 -0
  147. package/scss/lib/tooltip/_variables.scss +8 -0
  148. package/scss/lib/typography/_index.scss +14 -0
  149. package/scss/lib/typography/_mixins.scss +27 -0
  150. package/scss/lib/typography/_variables.scss +58 -0
  151. package/scss/lib/utility/_index.scss +109 -0
  152. package/scss/lib/utility/_mixins.scss +198 -0
  153. package/scss/mixins.scss +44 -0
  154. package/scss/reset.scss +168 -0
  155. package/scss/themes/crystalski/_colors.scss +48 -0
  156. package/scss/themes/crystalski/_overrides.scss +285 -0
  157. package/scss/themes/crystalski/_primitives.scss +73 -0
  158. package/scss/themes/crystalski/_typography.scss +9 -0
  159. package/scss/themes/crystalski/fonts.json +49 -0
  160. package/scss/themes/crystalski/fonts.scss +8 -0
  161. package/scss/themes/crystalski/index.scss +166 -0
  162. package/scss/themes/crystalski/theme.json +232 -0
  163. package/scss/themes/firstchoice/_colors.scss +53 -0
  164. package/scss/themes/firstchoice/_overrides.scss +355 -0
  165. package/scss/themes/firstchoice/_primitives.scss +106 -0
  166. package/scss/themes/firstchoice/_typography.scss +14 -0
  167. package/scss/themes/firstchoice/fonts.json +50 -0
  168. package/scss/themes/firstchoice/fonts.scss +8 -0
  169. package/scss/themes/firstchoice/index.scss +166 -0
  170. package/scss/themes/firstchoice/theme.json +323 -0
  171. package/scss/themes/tui/_colors.scss +61 -0
  172. package/scss/themes/tui/_overrides.scss +34 -0
  173. package/scss/themes/tui/_primitives.scss +23 -0
  174. package/scss/themes/tui/_typography.scss +16 -0
  175. package/scss/themes/tui/fonts.json +117 -0
  176. package/scss/themes/tui/fonts.scss +17 -0
  177. package/scss/themes/tui/index.scss +166 -0
  178. package/scss/themes/tui/theme.json +139 -0
  179. package/scss/variables/_aspect-ratios.scss +8 -0
  180. package/scss/variables/_assets.scss +6 -0
  181. package/scss/variables/_border-radius.scss +20 -0
  182. package/scss/variables/_breakpoints.scss +17 -0
  183. package/scss/variables/_colors.scss +58 -0
  184. package/scss/variables/_directions.scss +8 -0
  185. package/scss/variables/_display-values.scss +9 -0
  186. package/scss/variables/_elevations.scss +17 -0
  187. package/scss/variables/_env-variables.scss +1 -0
  188. package/scss/variables/_focus.scss +14 -0
  189. package/scss/variables/_grid.scss +21 -0
  190. package/scss/variables/_icons.scss +26 -0
  191. package/scss/variables/_layers.scss +20 -0
  192. package/scss/variables/_motion.scss +27 -0
  193. package/scss/variables/_prefix.scss +1 -0
  194. package/scss/variables/_primitives.scss +100 -0
  195. package/scss/variables/_spacing.scss +38 -0
  196. package/scss/variables/_strokes.scss +18 -0
  197. package/scss/variables/_typography.scss +125 -0
  198. package/scss/variables/base-theme.json +2142 -0
  199. package/scss/variables/fonts/_ambit-bold-italic.scss +10 -0
  200. package/scss/variables/fonts/_ambit-bold.scss +10 -0
  201. package/scss/variables/fonts/_ambit-fallback.scss +21 -0
  202. package/scss/variables/fonts/_ambit-regular-italic.scss +10 -0
  203. package/scss/variables/fonts/_ambit-regular.scss +10 -0
  204. package/scss/variables/fonts/_ambit-semibold-italic.scss +10 -0
  205. package/scss/variables/fonts/_ambit-semibold.scss +10 -0
  206. package/scss/variables/fonts/_brandon-fallback.scss +22 -0
  207. package/scss/variables/fonts/_brandon-medium-italic.scss +10 -0
  208. package/scss/variables/fonts/_brandon-medium.scss +10 -0
  209. package/scss/variables/fonts/_brandon-regular-italic.scss +10 -0
  210. package/scss/variables/fonts/_brandon-regular.scss +10 -0
  211. package/scss/variables/fonts/_font-path.scss +3 -0
  212. package/scss/variables/fonts/_graphie-extralight.scss +10 -0
  213. package/scss/variables/fonts/_graphie-fallback.scss +11 -0
  214. package/scss/variables/fonts/_pastiche-grotesque-black.scss +10 -0
  215. package/scss/variables/fonts/_pastiche-grotesque-fallback.scss +11 -0
  216. package/scss/variables/fonts/_rondelle-black.scss +10 -0
  217. package/scss/variables/fonts/_rondelle-book.scss +10 -0
  218. package/scss/variables/fonts/_rondelle-fallback.scss +21 -0
  219. package/scss/variables/fonts/_tuiheadline-black-italic.scss +10 -0
  220. package/scss/variables/fonts/_tuiheadline-black.scss +10 -0
  221. package/scss/variables/fonts/_tuiheadline-fallback.scss +11 -0
  222. package/scss/variables/fonts/_tuitypelight-bold-italic.scss +10 -0
  223. package/scss/variables/fonts/_tuitypelight-bold.scss +10 -0
  224. package/scss/variables/fonts/_tuitypelight-fallback.scss +21 -0
  225. package/scss/variables/fonts/_tuitypelight-regular-italic.scss +10 -0
  226. package/scss/variables/fonts/_tuitypelight-regular.scss +10 -0
  227. package/scss/variables.scss +60 -0
@@ -0,0 +1,437 @@
1
+ /* Weight selectors */
2
+ /* Colour selectors */
3
+ /* Info tag specific variables to allow theming */
4
+ :root[data-theme=tui],
5
+ :host([data-theme=tui]),
6
+ [data-theme=tui],
7
+ .theme-tui {
8
+ --uilib-theme-name: 'tui';
9
+ --uilib-aspect-ratio-1x1-square: 1 / 1;
10
+ --uilib-aspect-ratio-4x3-portrait: 3 / 4;
11
+ --uilib-aspect-ratio-4x3-landscape: 4 / 3;
12
+ --uilib-aspect-ratio-16x9-wide: 16 / 9;
13
+ --uilib-aspect-ratio-3x1-panoramic: 3 / 1;
14
+ --uilib-breakpoints-xxs: 20rem;
15
+ --uilib-breakpoints-xs: 36.25rem;
16
+ --uilib-breakpoints-sm: 47.5rem;
17
+ --uilib-breakpoints-md: 60rem;
18
+ --uilib-breakpoints-lg: 75rem;
19
+ --uilib-breakpoints-xl: 90rem;
20
+ --uilib-breakpoints-xxl: 120rem;
21
+ --uilib-border-radius-none: 0;
22
+ --uilib-border-radius-100: 0.25rem;
23
+ --uilib-border-radius-200: 0.5rem;
24
+ --uilib-border-radius-400: 1rem;
25
+ --uilib-border-radius-600: 1.5rem;
26
+ --uilib-border-radius-1000: 2.5rem;
27
+ --uilib-border-radius-1400: 3.5rem;
28
+ --uilib-border-radius-1800: 4.5rem;
29
+ --uilib-border-radius-pill: 100rem;
30
+ --uilib-border-radius-circle: 50%;
31
+ --uilib-color-core-interaction: #0c4bf3;
32
+ --uilib-color-core-brand: #70cbf4;
33
+ --uilib-color-core-brand-strong: #1b115c;
34
+ --uilib-color-core-surface: #e2f4fd;
35
+ --uilib-color-core-neutral: #fff;
36
+ --uilib-color-text-strong: #1b115c;
37
+ --uilib-color-text-body: #4c4c4c;
38
+ --uilib-color-text-link: #0c4bf3;
39
+ --uilib-color-text-link-visited: #6c0ac2;
40
+ --uilib-color-text-link-visited-inverse: #dbb6fc;
41
+ --uilib-color-text-inverse: #fff;
42
+ --uilib-color-text-promotion: #c00c12;
43
+ --uilib-color-text-danger: #c00c12;
44
+ --uilib-color-status-success-surface: #dff6eb;
45
+ --uilib-color-status-danger-surface: #fde2e3;
46
+ --uilib-color-status-warning-surface: #ffefd6;
47
+ --uilib-color-status-info-surface: #d8e2fd;
48
+ --uilib-color-status-success-icon: #2ba168;
49
+ --uilib-color-status-danger-icon: #c00c12;
50
+ --uilib-color-status-warning-icon: #cc7a00;
51
+ --uilib-color-status-info-icon: #1b115c;
52
+ --uilib-color-canvas-default: #fff;
53
+ --uilib-color-canvas-contrast: #f5f5f5;
54
+ --uilib-color-border-interaction: #0c4bf3;
55
+ --uilib-color-border-brand-strong: #1b115c;
56
+ --uilib-color-border-input: #737373;
57
+ --uilib-color-border-card: #dcdcdc;
58
+ --uilib-color-border-danger: #c00c12;
59
+ --uilib-color-border-inverse: #fff;
60
+ --uilib-color-border-divider: #dcdcdc;
61
+ --uilib-color-promotion: #c00c12;
62
+ --uilib-color-other-disabled-soft: #dcdcdc;
63
+ --uilib-color-other-disabled-strong: #737373;
64
+ --uilib-color-other-elevation: rgba(0, 0, 0, 0.4);
65
+ --uilib-color-other-scrim: rgba(0, 0, 0, 0.8);
66
+ --uilib-color-other-active-state-tint: rgba(216, 226, 253, 0.3);
67
+ --uilib-color-other-button-hover-state: rgba(255, 255, 255, 0.2);
68
+ --uilib-color-other-secondary-button-hover-state: rgba(216, 226, 253, 0.3);
69
+ --uilib-color-other-skeleton-loading: #dcdcdc;
70
+ --uilib-color-brand-trip-advisor: #00aa6c;
71
+ --uilib-color-brand-paypal: #253b80;
72
+ --uilib-color-other-scroll-handle: #b9b9b9;
73
+ --uilib-color-border-dashed: #b9b9b9;
74
+ --uilib-color-promotion-free-kids: #0caaf3;
75
+ --uilib-color-other-gradient-linear-soft: linear-gradient(180deg, #e2f4fd 0.33%, #fff 99.66%);
76
+ --uilib-color-other-gradient-linear: linear-gradient(180deg, #70cbf4 0.33%, #fff 99.66%);
77
+ --uilib-color-other-gradient-linear-strong: linear-gradient(180deg, #1b115c 0.33%, #fff 99.66%);
78
+ --uilib-color-other-gradient-diagonal-soft: linear-gradient(249deg, #e2f4fd 0.33%, #fff 99.66%);
79
+ --uilib-color-other-gradient-diagonal: linear-gradient(249deg, #70cbf4 0.33%, #fff 99.66%);
80
+ --uilib-color-other-gradient-diagonal-strong: linear-gradient(249deg, #1b115c 0.33%, #fff 99.66%);
81
+ --uilib-color-brand-tui: #0b092d;
82
+ --uilib-color-brand-tui-blue: #1b115c;
83
+ --uilib-color-brand-magiclife: #fff700;
84
+ --uilib-color-brand-bluestar: #c2e6fa;
85
+ --uilib-color-brand-splashworld: #65c4d7;
86
+ --uilib-color-brand-riu: #d3030e;
87
+ --uilib-color-brand-soneo: #006bb8;
88
+ --uilib-color-brand-small-and-friendly: #0076ad;
89
+ --uilib-color-brand-robinson: #0068b3;
90
+ --uilib-color-brand-scene: #000;
91
+ --uilib-color-brand-time-to-smile: #b0b578;
92
+ --uilib-color-brand-holiday-villages: #9c1981;
93
+ --uilib-color-brand-kids-club: #1b115c;
94
+ --uilib-color-brand-local: #d5d2c1;
95
+ --uilib-color-brand-musement: #f4ca48;
96
+ --uilib-elevation-none: none;
97
+ --uilib-elevation-100: 0 0 0.125rem 0 var(--uilib-color-other-elevation);
98
+ --uilib-elevation-200: 0 0 0.25rem 0 var(--uilib-color-other-elevation);
99
+ --uilib-elevation-300: 0 0 0.5rem 0 var(--uilib-color-other-elevation);
100
+ --uilib-focus-default: 0 0 0 0.125rem #fff, 0 0 0 0.25rem #0c4bf3, 0 0 0 0.375rem rgba(12, 75, 243, 0.4);
101
+ --uilib-focus-size: calc(var(--uilib-spacing-050) * 3);
102
+ --uilib-focus-gap: var(--uilib-spacing-050);
103
+ --uilib-grid-size: 0.25rem;
104
+ --uilib-grid-columns: 12;
105
+ --uilib-grid-gutter-width: 1rem;
106
+ --uilib-grid-gutter-height: 1rem;
107
+ --uilib-layout-max-width: 80rem;
108
+ --uilib-layout-app-height: 100dvh;
109
+ --uilib-icon-size-default: 1.25rem;
110
+ --uilib-icon-size-xsmall: 1rem;
111
+ --uilib-icon-size-small: 1.25rem;
112
+ --uilib-icon-size-medium: 1.5rem;
113
+ --uilib-icon-size-large: 2rem;
114
+ --uilib-icon-size-xlarge: 2.25rem;
115
+ --uilib-icon-size-xxlarge: 2.5rem;
116
+ --uilib-icon-size-xxxlarge: 3rem;
117
+ --uilib-layer-hidden: -1;
118
+ --uilib-layer-default: 0;
119
+ --uilib-layer-top: 1;
120
+ --uilib-layer-dropdown: 1000;
121
+ --uilib-layer-sticky: 1500;
122
+ --uilib-layer-fixed: 2000;
123
+ --uilib-layer-overlay: 2500;
124
+ --uilib-layer-modal: 3000;
125
+ --uilib-layer-popover: 3500;
126
+ --uilib-layer-tooltip: 4000;
127
+ --uilib-motion-duration-slow: 0.5s;
128
+ --uilib-motion-duration-medium: 0.35s;
129
+ --uilib-motion-duration-fast: 0.2s;
130
+ --uilib-motion-timing-inout: ease-in-out;
131
+ --uilib-motion-timing-in: cubic-bezier(0.12, 0, 0.39, 0);
132
+ --uilib-motion-timing-out: cubic-bezier(0.61, 1, 0.88, 1);
133
+ --uilib-motion-timing-brand: cubic-bezier(0.34, 1.56, 0.64, 1);
134
+ --uilib-spacing-auto: auto;
135
+ --uilib-spacing-none: 0;
136
+ --uilib-spacing-050: 0.125rem;
137
+ --uilib-spacing-100: 0.25rem;
138
+ --uilib-spacing-200: 0.5rem;
139
+ --uilib-spacing-300: 0.75rem;
140
+ --uilib-spacing-400: 1rem;
141
+ --uilib-spacing-500: 1.25rem;
142
+ --uilib-spacing-600: 1.5rem;
143
+ --uilib-spacing-700: 1.75rem;
144
+ --uilib-spacing-800: 2rem;
145
+ --uilib-spacing-900: 2.25rem;
146
+ --uilib-spacing-1000: 2.5rem;
147
+ --uilib-spacing-1100: 2.75rem;
148
+ --uilib-spacing-1200: 3rem;
149
+ --uilib-spacing-1300: 3.25rem;
150
+ --uilib-spacing-1400: 3.5rem;
151
+ --uilib-spacing-1500: 3.75rem;
152
+ --uilib-spacing-1600: 4rem;
153
+ --uilib-stroke-size-025: 0.0625rem;
154
+ --uilib-stroke-size-050: 0.125rem;
155
+ --uilib-stroke-size-075: 0.1875rem;
156
+ --uilib-stroke-style-none: none;
157
+ --uilib-stroke-style-solid: solid;
158
+ --uilib-stroke-style-dashed: dashed;
159
+ --uilib-font-family-display: TUIHeadline, TUIHeadlineFallbackFont, arial black, sans-serif;
160
+ --uilib-font-family-lead: Ambit, AmbitFallbackFont, arial, sans-serif;
161
+ --uilib-font-family-base: TUITypeLight, TUITypeLightFallbackFont, arial, sans-serif;
162
+ --uilib-font-size-root: 1rem;
163
+ --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);
164
+ --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);
165
+ --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);
166
+ --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);
167
+ --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);
168
+ --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);
169
+ --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);
170
+ --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);
171
+ --uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.4375rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
172
+ --uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
173
+ --uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
174
+ --uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.4375rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
175
+ --uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
176
+ --uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
177
+ --uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
178
+ --uilib-typography-component-heading-medium-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
179
+ --uilib-typography-component-heading-small: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
180
+ --uilib-typography-component-heading-small-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
181
+ --uilib-typography-body-large: var(--uilib-font-weight-regular) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
182
+ --uilib-typography-body-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
183
+ --uilib-typography-body-medium: var(--uilib-font-weight-regular) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
184
+ --uilib-typography-body-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
185
+ --uilib-typography-body-small: var(--uilib-font-weight-regular) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
186
+ --uilib-typography-body-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
187
+ --uilib-typography-label-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
188
+ --uilib-typography-label-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
189
+ --uilib-typography-label-medium: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
190
+ --uilib-typography-label-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
191
+ --uilib-typography-label-small: var(--uilib-font-weight-semibold) 0.875rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
192
+ --uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
193
+ --uilib-typography-label-xsmall: var(--uilib-font-weight-semibold) 0.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
194
+ --uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
195
+ --uilib-line-height-heading: 1.3;
196
+ --uilib-line-height-body: 1.3;
197
+ --uilib-line-height-none: 1;
198
+ --uilib-font-weight-regular: 400;
199
+ --uilib-font-weight-semibold: 600;
200
+ --uilib-font-weight-bold: 700;
201
+ --uilib-accordion-radius: var(--uilib-border-radius-100);
202
+ --uilib-accordion-logo-radius: var(--uilib-border-radius-100);
203
+ --uilib-accordion-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
204
+ --uilib-accordion-default-bg-color: var(--uilib-color-canvas-default);
205
+ --uilib-accordion-border-color: var(--uilib-color-border-card);
206
+ --uilib-accordion-divider-color: var(--uilib-color-border-card);
207
+ --uilib-active-tag-radius: var(--uilib-border-radius-200);
208
+ --uilib-active-tag-border-color: var(--uilib-color-border-input);
209
+ --uilib-active-tag-background-color: var(--uilib-color-core-neutral);
210
+ --uilib-active-tag-cross-color: var(--uilib-color-core-interaction);
211
+ --uilib-active-tag-icon: var(--uilib-show-more-less-icon);
212
+ --uilib-alert-icon-info-bg: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/letter-i-circled-filled.svg");
213
+ --uilib-alert-icon-info-mask: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/letter-i-circled-filled.svg");
214
+ --uilib-alert-icon-error-bg: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/exclamation-mark-circled-filled.svg");
215
+ --uilib-alert-icon-error-mask: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/exclamation-mark-circled-filled.svg");
216
+ --uilib-alert-icon-warning-bg: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/warning.svg");
217
+ --uilib-alert-icon-warning-mask: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/warning.svg");
218
+ --uilib-alert-icon-success-bg: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/checkmark-circled-filled.svg");
219
+ --uilib-alert-icon-success-mask: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/color/checkmark-circled-filled.svg");
220
+ --uilib-alert-radius: var(--uilib-border-radius-100);
221
+ --uilib-alert-text-color: var(--uilib-color-text-strong);
222
+ --uilib-breadcrumb-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
223
+ --uilib-button-radius: var(--uilib-border-radius-pill);
224
+ --uilib-button-primary-color: var(--uilib-color-text-inverse);
225
+ --uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
226
+ --uilib-button-primary-hover-bg-color: rgb(60.6, 111, 245.4);
227
+ --uilib-button-secondary-color: var(--uilib-color-core-interaction);
228
+ --uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
229
+ --uilib-button-secondary-hover-bg-color: rgb(206.4, 219, 252.6);
230
+ --uilib-button-tertiary-color: var(--uilib-color-text-strong);
231
+ --uilib-button-tertiary-bg-color: var(--uilib-color-core-brand);
232
+ --uilib-button-tertiary-hover-bg-color: rgb(140.6, 213.4, 246.2);
233
+ --uilib-button-promotion-color: var(--uilib-color-text-inverse);
234
+ --uilib-button-promotion-bg-color: var(--uilib-color-promotion);
235
+ --uilib-button-promotion-hover-bg-color: rgb(204.6, 60.6, 65.4);
236
+ --uilib-button-search-color: var(--uilib-color-text-inverse);
237
+ --uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
238
+ --uilib-button-search-hover-bg-color: rgb(72.6, 64.6, 124.6);
239
+ --uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
240
+ --uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
241
+ --uilib-card-search-radius: var(--uilib-border-radius-400);
242
+ --uilib-card-search-radius-spacing: var(--uilib-spacing-400);
243
+ --uilib-card-search-color-flagship: var(--uilib-color-core-brand-strong);
244
+ --uilib-card-search-color-flagship-text: var(--uilib-color-text-inverse);
245
+ --uilib-card-search-highlights-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
246
+ --uilib-card-search-color-brand: var(--uilib-color-brand-tui-blue);
247
+ --uilib-flight-details-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
248
+ --uilib-form-row-label-font: var(--uilib-typography-label-medium);
249
+ --uilib-form-row-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/exclamation-mark-circled-filled.svg");
250
+ --uilib-input-checkbox-icon-checked: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/checkmark.svg");
251
+ --uilib-input-checkbox-icon-indeterminate: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/minus.svg");
252
+ --uilib-input-checkbox-text-color-strong: var(--uilib-color-text-strong);
253
+ --uilib-input-checkbox-confirm-radius: var(--uilib-border-radius-100);
254
+ --uilib-input-chip-radius: var(--uilib-border-radius-200);
255
+ --uilib-input-chip-default-bg-color: var(--uilib-color-core-neutral);
256
+ --uilib-input-chip-default-border-color: var(--uilib-color-border-card);
257
+ --uilib-input-chip-default-text-color: var(--uilib-color-text-strong);
258
+ --uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
259
+ --uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
260
+ --uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
261
+ --uilib-input-chip-active-hover-bg-color: rgb(206.4, 219, 252.6);
262
+ --uilib-input-chip-box-shadow: var(--uilib-elevation-200);
263
+ --uilib-input-chip-disabled-text-color: var(--uilib-color-other-disabled-soft);
264
+ --uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
265
+ --uilib-input-count-radius: var(--uilib-border-radius-100);
266
+ --uilib-input-count-color-bg: var(--uilib-color-canvas-default);
267
+ --uilib-input-count-color-border: var(--uilib-color-border-input);
268
+ --uilib-input-count-color-text: var(--uilib-color-text-strong);
269
+ --uilib-input-count-color-selected: var(--uilib-color-core-interaction);
270
+ --uilib-input-count-color-selected-text: var(--uilib-color-text-inverse);
271
+ --uilib-input-count-font: var(--uilib-typography-body-medium-strong);
272
+ --uilib-input-count-size: var(--uilib-spacing-800);
273
+ --uilib-input-radio-text-color-strong: var(--uilib-color-text-strong);
274
+ --uilib-input-slider-track-color: var(--uilib-color-other-disabled-strong);
275
+ --uilib-input-slider-track-color-selected: var(--uilib-color-core-interaction);
276
+ --uilib-input-slider-track-height: 0.375rem;
277
+ --uilib-input-slider-track-radius: var(--uilib-border-radius-pill);
278
+ --uilib-input-slider-thumb-size: 2rem;
279
+ --uilib-input-slider-thumb-radius: var(--uilib-border-radius-circle);
280
+ --uilib-input-slider-thumb-border-color: var(--uilib-color-core-interaction);
281
+ --uilib-input-stepper-icon-increment: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/plus.svg");
282
+ --uilib-input-stepper-icon-decrement: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/minus.svg");
283
+ --uilib-input-switch-track-color: var(--uilib-color-core-neutral);
284
+ --uilib-input-switch-track-color-selected: var(--uilib-color-core-interaction);
285
+ --uilib-input-switch-track-color-disabled: var(--uilib-color-other-disabled-soft);
286
+ --uilib-input-switch-track-border-color: var(--uilib-color-border-input);
287
+ --uilib-input-switch-track-border-color-selected: var(--uilib-color-border-interaction);
288
+ --uilib-input-switch-track-border-color-disabled: var(--uilib-color-other-disabled-soft);
289
+ --uilib-input-switch-track-height: 1.5rem;
290
+ --uilib-input-switch-track-width: 2.75rem;
291
+ --uilib-input-switch-track-radius: var(--uilib-border-radius-pill);
292
+ --uilib-input-switch-thumb-size: 1rem;
293
+ --uilib-input-switch-thumb-radius: var(--uilib-border-radius-circle);
294
+ --uilib-input-switch-thumb-color: var(--uilib-color-other-disabled-strong);
295
+ --uilib-input-switch-thumb-color-selected: var(--uilib-color-core-neutral);
296
+ --uilib-input-text-icon-clear: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
297
+ --uilib-input-text-icon-show: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/view.svg");
298
+ --uilib-input-text-icon-hide: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/view-hidden.svg");
299
+ --uilib-input-text-icon-calendar: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/calendar.svg");
300
+ --uilib-hero-image-radius-small: var(--uilib-border-radius-600) var(--uilib-border-radius-600) 0 0;
301
+ --uilib-hero-image-radius-large: var(--uilib-border-radius-1800) var(--uilib-border-radius-1800) 0 0;
302
+ --uilib-hero-image-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2NzM4IiB2aWV3Qm94PSIwIDAgMTkyMCA2NzM4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjAwN18yKSI+CjxwYXRoIGQ9Ik0xOTIwIDY1NzUuNDJWMEgwVjY1NzUuMDZDMjg4LjQzNSA2Njc5LjI3IDYxNC44MjIgNjczOCA5NjAuNSA2NzM4QzEzMDUuNzggNjczOCAxNjMxLjgxIDY2NzkuNCAxOTIwIDY1NzUuNDJaIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMjAwN18yIj4KPHJlY3Qgd2lkdGg9IjE5MjAiIGhlaWdodD0iNjczOCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
303
+ --uilib-hero-image-mask-height-small: var(--uilib-spacing-1200);
304
+ --uilib-hero-image-mask-height-large: var(--uilib-spacing-1600);
305
+ --uilib-hero-content-radius: var(--uilib-border-radius-600);
306
+ --uilib-hero-content-bg-small: var(--uilib-color-core-surface);
307
+ --uilib-hero-content-bg: color-mix(in srgb, var(--uilib-color-core-neutral) 90%, transparent);
308
+ --uilib-hero-content-text-color: var(--uilib-color-text-strong);
309
+ --uilib-hero-content-text-highlight-color: var(--uilib-color-text-promotion);
310
+ --uilib-hero-flagship-content-bg-small: var(--uilib-color-core-brand-strong);
311
+ --uilib-hero-flagship-content-bg: color-mix(in srgb, var(--uilib-color-core-brand-strong) 90%, transparent);
312
+ --uilib-hero-flagship-content-text-color: var(--uilib-color-text-inverse);
313
+ --uilib-hero-flagship-content-text-highlight-color: var(--uilib-color-text-inverse);
314
+ --uilib-icon-button-radius: var(--uilib-border-radius-pill);
315
+ --uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
316
+ --uilib-icon-button-ghost-bg-color: transparent;
317
+ --uilib-icon-button-ghost-hover-bg-color: rgb(206.4, 219, 252.6);
318
+ --uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
319
+ --uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
320
+ --uilib-icon-button-primary-hover-bg-color: rgb(60.6, 111, 245.4);
321
+ --uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
322
+ --uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
323
+ --uilib-icon-button-secondary-hover-bg-color: rgb(206.4, 219, 252.6);
324
+ --uilib-icon-button-control-color: var(--uilib-color-core-interaction);
325
+ --uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
326
+ --uilib-icon-button-control-hover-bg-color: rgb(206.4, 219, 252.6);
327
+ --uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
328
+ --uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
329
+ --uilib-icon-button-promotion-hover-bg-color: rgb(204.6, 60.6, 65.4);
330
+ --uilib-icon-button-search-color: var(--uilib-color-text-inverse);
331
+ --uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
332
+ --uilib-icon-button-search-hover-bg-color: rgb(72.6, 64.6, 124.6);
333
+ --uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
334
+ --uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
335
+ --uilib-icon-button-shortlist-hover-bg-color: rgb(248.7, 230.7, 231.3);
336
+ --uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
337
+ --uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
338
+ --uilib-image-landscape: var(--uilib-aspect-ratio-4x3-landscape);
339
+ --uilib-image-panoramic: var(--uilib-aspect-ratio-3x1-panoramic);
340
+ --uilib-image-portrait: var(--uilib-aspect-ratio-4x3-portrait);
341
+ --uilib-image-square: var(--uilib-aspect-ratio-1x1-square);
342
+ --uilib-image-wide: var(--uilib-aspect-ratio-16x9-wide);
343
+ --uilib-image-rectangle: var(--uilib-border-radius-none);
344
+ --uilib-image-rounded: var(--uilib-border-radius-600);
345
+ --uilib-image-fallback: url("https://mwa.tui.com/shared/mwa/assets/v3/illustrations/tui/sunset-adults.svg");
346
+ --uilib-info-tag-radius: var(--uilib-border-radius-100);
347
+ --uilib-info-tag-text-color: var(--uilib-color-text-strong);
348
+ --uilib-info-tag-info-bg-color: var(--uilib-color-status-info-surface);
349
+ --uilib-info-tag-local-product-bg-color: var(--uilib-color-brand-local);
350
+ --uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
351
+ --uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
352
+ --uilib-link-decoration-color: var(--uilib-color-text-link);
353
+ --uilib-link-decoration-color-visited: var(--uilib-color-text-link-visited);
354
+ --uilib-link-decoration-color-inverse: var(--uilib-color-text-inverse);
355
+ --uilib-link-decoration-color-inverse-visited: var(--uilib-color-text-link-visited-inverse);
356
+ --uilib-link-decoration-style: var(--uilib-stroke-style-solid);
357
+ --uilib-link-decoration-thickness: var(--uilib-stroke-size-025);
358
+ --uilib-link-decoration-thickness-hover: var(--uilib-stroke-size-050);
359
+ --uilib-link-underline-offset: var(--uilib-spacing-050);
360
+ --uilib-list-bullet-color: var(--uilib-color-text-strong);
361
+ --uilib-list-bullet-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/list-item.svg");
362
+ --uilib-list-image-radius: var(--uilib-border-radius-100);
363
+ --uilib-list-image-radius-alt: var(--uilib-border-radius-circle);
364
+ --uilib-loader-image: url("https://mwa.tui.com/shared/mwa/assets/v3/motion/tui/loader.svg");
365
+ --uilib-loader-small: 3.75rem;
366
+ --uilib-loader-medium: 7.5rem;
367
+ --uilib-loader-large: 11.25rem;
368
+ --uilib-loader-font-small: var(--uilib-typography-component-heading-medium);
369
+ --uilib-loader-font-medium: var(--uilib-typography-component-heading-large);
370
+ --uilib-loader-font-large: var(--uilib-typography-component-heading-xlarge);
371
+ --uilib-media-button-color: var(--uilib-color-text-strong);
372
+ --uilib-modal-icon-close: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/cross.svg");
373
+ --uilib-modal-backdrop-color: var(--uilib-color-other-scrim);
374
+ --uilib-modal-radius: 1rem;
375
+ --uilib-pagination-text-color: var(--uilib-color-text-body);
376
+ --uilib-pagination-border-radius: var(--uilib-icon-button-radius);
377
+ --uilib-pagination-icon-color: var(--uilib-icon-button-ghost-color);
378
+ --uilib-pagination-selected-bg: var(--uilib-icon-button-ghost-color);
379
+ --uilib-pagination-hover-bg: var(--uilib-icon-button-ghost-hover-bg-color);
380
+ --uilib-pagination-icon-prev: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-left.svg");
381
+ --uilib-pagination-icon-next: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
382
+ --uilib-price-color: var(--uilib-color-text-strong);
383
+ --uilib-price-font-primary: var(--uilib-typography-component-heading-medium);
384
+ --uilib-price-font-secondary: var(--uilib-typography-body-large);
385
+ --uilib-price-discount-color: var(--uilib-color-promotion);
386
+ --uilib-price-font-main-medium: var(--uilib-typography-component-heading-xlarge-strong);
387
+ --uilib-price-font-main-large: var(--uilib-typography-component-heading-xxlarge-strong);
388
+ --uilib-price-font-sub-large: var(--uilib-typography-component-heading-medium-strong);
389
+ --uilib-promo-tag-radius: var(--uilib-border-radius-400);
390
+ --uilib-promo-tag-color: var(--uilib-color-text-strong);
391
+ --uilib-promo-tag-bg-color: var(--uilib-color-core-neutral);
392
+ --uilib-promo-tag-font: var(--uilib-typography-label-small);
393
+ --uilib-ratings-numerical-font: var(--uilib-typography-body-medium);
394
+ --uilib-ratings-numerical-color: var(--uilib-color-text-body);
395
+ --uilib-ratings-numerical-color-inverse: var(--uilib-color-text-inverse);
396
+ --uilib-ratings-numerical-font-score: var(--uilib-typography-label-small);
397
+ --uilib-ratings-numerical-brand-bg: var(--uilib-color-core-brand);
398
+ --uilib-ratings-numerical-brand-color: var(--uilib-color-text-strong);
399
+ --uilib-ratings-numerical-brand-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/tui/tui-smile.svg");
400
+ --uilib-ratings-numerical-brand-radius: var(--uilib-border-radius-pill);
401
+ --uilib-ratings-numerical-alt-bg: var(--uilib-color-core-brand-strong);
402
+ --uilib-ratings-numerical-alt-color: var(--uilib-color-text-inverse);
403
+ --uilib-ratings-numerical-alt-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/star-filled.svg");
404
+ --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-brand-musement);
405
+ --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
406
+ --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/thumbs-up.svg");
407
+ --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
408
+ --uilib-ratings-range-icons-tripadvisor-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-unchecked.svg");
409
+ --uilib-ratings-range-icons-tripadvisor-rating-icon-checked: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-checked.svg");
410
+ --uilib-ratings-range-icons-sun-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-unchecked.svg");
411
+ --uilib-ratings-range-icons-sun-rating-icon-checked: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-checked.svg");
412
+ --uilib-ratings-range-icons-star-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-star-unchecked.svg");
413
+ --uilib-ratings-range-icons-star-rating-icon-checked: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-star-checked.svg");
414
+ --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
415
+ --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
416
+ --uilib-ratings-range-bar-bar-width: 11.5rem;
417
+ --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
418
+ --uilib-ratings-range-bar-bar-background: var(--uilib-color-core-surface);
419
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
420
+ --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor);
421
+ --uilib-ratings-range-bar-tripadvisor-bar-background: var(--uilib-color-other-disabled-soft);
422
+ --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
423
+ --uilib-scroller-thumb-size: var(--uilib-spacing-400);
424
+ --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
425
+ --uilib-scroller-thumb-color: var(--uilib-color-other-scroll-handle);
426
+ --uilib-scroller-fade-size: var(--uilib-spacing-400);
427
+ --uilib-scroller-focus-radius: var(--uilib-border-radius-100);
428
+ --uilib-scroller-bar-size: var(--uilib-spacing-400);
429
+ --uilib-show-more-less-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
430
+ --uilib-skeleton-color: #dcdcdc;
431
+ --uilib-skeleton-shimmer-color: #f5f5f5;
432
+ --uilib-tooltip-radius: var(--uilib-border-radius-100);
433
+ --uilib-tooltip-color-bg: var(--uilib-color-text-body);
434
+ --uilib-tooltip-color-text: var(--uilib-color-text-inverse);
435
+ }
436
+
437
+ /*# sourceMappingURL=index.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/package.json ADDED
@@ -0,0 +1,175 @@
1
+ {
2
+ "name": "@tui/design-system",
3
+ "version": "0.1.0",
4
+ "description": "TUI Design System",
5
+ "author": "TUI Group",
6
+ "contributors": [
7
+ "Matthew Guyader-Squirrell <matthew.squirrell@tui.co.uk>",
8
+ "Nicky Bliss <nicky.bliss@tui.co.uk>",
9
+ "Cy Culpin <cy.culpin@tui.co.uk>",
10
+ "Volodymyr Savchuk <volodymyr.savchuk@tui.com>"
11
+ ],
12
+ "scripts": {
13
+ "ci": "commit",
14
+ "clean": "shx rm -rf lib dist",
15
+ "prebuild": "npm run set-scss-env",
16
+ "build": "node cli/index.mjs",
17
+ "build:primitives": "node cli/process-primitives.mjs",
18
+ "build:js": "node cli/process-webcomponent-ts.mjs",
19
+ "build:changelog": "node cli/change-log.mjs",
20
+ "dev": "dotenv -e .env.local npm run storybook:dev",
21
+ "storybook:dev": "run-s static:build build:primitives build:changelog set-scss-env storybook:serve",
22
+ "storybook:build": "run-s static:build build:primitives build:js build:changelog set-scss-env _storybook:build_prod",
23
+ "storybook:serve": "storybook dev -p 6006 -c storybook/.storybook",
24
+ "_storybook:build_prod": "storybook build -c storybook/.storybook",
25
+ "static:build": "node cli/static-assets.mjs",
26
+ "lint:styles": "npm run lint:styles:ci && npm run lint:style:fix",
27
+ "lint:styles:fix": "stylelint \"src/**/*.{scss,css}\" --fix --rule 'property-no-vendor-prefix:false'",
28
+ "lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
29
+ "lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --cache --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
30
+ "lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
31
+ "lint:storybook": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
32
+ "lint:storybook:ci": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
33
+ "lint": "npm run lint:standard && npm run lint:storybook",
34
+ "lint:ci": "npm run lint:standard:ci && npm run lint:storybook:ci",
35
+ "prettier": "prettier --ignore-unknown --write .",
36
+ "prettier:ci": "prettier --ignore-unknown --check .",
37
+ "set-scss-env": "node cli/set-scss-env.mjs",
38
+ "ci:lint": "bash ./ci-scripts/lint.sh",
39
+ "ci:check:ts": "echo 'Probably not needed anymore, use `ci:lint`' && exit 0",
40
+ "ci:code-tests": "bash ./ci-scripts/code-tests.sh",
41
+ "ci:install": "bash ./ci-scripts/install.sh",
42
+ "ci:build": "bash ./ci-scripts/build.sh",
43
+ "ci:deploy:feat": "bash ./ci-scripts/deploy/deploy-feature.sh",
44
+ "ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
45
+ "ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh",
46
+ "scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
47
+ "test:sass": "jest --verbose ./test/sass-true"
48
+ },
49
+ "files": [
50
+ "dist",
51
+ "lib",
52
+ "scss",
53
+ "CHANGELOG.md",
54
+ "CONTRIBUTING.md"
55
+ ],
56
+ "repository": {
57
+ "type": "git",
58
+ "url": "git@ssh.source.tui:osp/browse/design-system/uilib.git"
59
+ },
60
+ "devDependencies": {
61
+ "@babel/core": "^7.25.2",
62
+ "@babel/eslint-parser": "^7.28.5",
63
+ "@babel/preset-env": "^7.25.2",
64
+ "@babel/preset-react": "^7.26.3",
65
+ "@babel/preset-typescript": "^7.28.5",
66
+ "@commitlint/cli": "^20.1.0",
67
+ "@commitlint/config-conventional": "^20.0.0",
68
+ "@eslint/compat": "^2.0.0",
69
+ "@eslint/js": "^9.38.0",
70
+ "@jest/globals": "^30.2.0",
71
+ "@storybook/addon-a11y": "8.6.14",
72
+ "@storybook/addon-docs": "8.6.14",
73
+ "@storybook/addon-essentials": "8.6.14",
74
+ "@storybook/addon-links": "8.6.14",
75
+ "@storybook/addon-themes": "8.6.14",
76
+ "@storybook/blocks": "8.6.14",
77
+ "@storybook/html": "8.6.14",
78
+ "@storybook/html-webpack5": "8.6.14",
79
+ "@storybook/manager-api": "8.6.14",
80
+ "@storybook/preview-api": "8.6.14",
81
+ "@storybook/theming": "8.6.14",
82
+ "@stylistic/eslint-plugin": "^3.1.0",
83
+ "@types/js-beautify": "^1.14.3",
84
+ "@types/node": "^25.2.3",
85
+ "@typescript-eslint/eslint-plugin": "^8.46.2",
86
+ "@typescript-eslint/parser": "^8.46.2",
87
+ "aws-cdk-lib": "^2.220.0",
88
+ "babel-loader": "^10.0.0",
89
+ "copyfiles": "^2.4.1",
90
+ "css-loader": "7.1.3",
91
+ "deepmerge": "^4.3.1",
92
+ "dotenv": "^17.2.3",
93
+ "dotenv-cli": "^11.0.0",
94
+ "esbuild": "^0.27.0",
95
+ "eslint": "^9.38.0",
96
+ "eslint-config-airbnb-extended": "^3.0.1",
97
+ "eslint-config-prettier": "^10.0.1",
98
+ "eslint-import-resolver-typescript": "^4.4.4",
99
+ "eslint-plugin-import": "^2.32.0",
100
+ "eslint-plugin-import-x": "^4.16.1",
101
+ "eslint-plugin-jsx-a11y": "^6.10.2",
102
+ "eslint-plugin-n": "^17.23.1",
103
+ "eslint-plugin-prettier": "^5.5.4",
104
+ "eslint-plugin-react": "^7.37.5",
105
+ "eslint-plugin-react-hooks": "^7.0.1",
106
+ "git-format-staged": "4.0.1",
107
+ "glob": "^13.0.0",
108
+ "globals": "^17.3.0",
109
+ "husky": "^9.1.7",
110
+ "jest": "^30.2.0",
111
+ "js-beautify": "^1.15.1",
112
+ "lint-staged": "^16.2.6",
113
+ "log-update": "^7.0.2",
114
+ "node-fetch": "^3.3.2",
115
+ "npm-run-all2": "^8.0.4",
116
+ "postcss-scss": "^4.0.6",
117
+ "prettier": "^3.4.2",
118
+ "remark-gfm": "^4.0.0",
119
+ "sass": "^1.93.2",
120
+ "sass-loader": "^16.0.4",
121
+ "sass-true": "^10.0.0",
122
+ "shx": "0.4.0",
123
+ "source-map-support": "^0.5.21",
124
+ "storybook": "8.6.14",
125
+ "storybook-addon-pseudo-states": "^4.0.3",
126
+ "storybook-addon-tag-badges": "^1.4.0",
127
+ "storybook-addon-turbo-build": "^2.0.1",
128
+ "storybook-dark-mode": "^4.0.2",
129
+ "storybook-preset-inline-svg": "^1.0.1",
130
+ "style-loader": "4.0.0",
131
+ "stylelint": "^17.2.0",
132
+ "stylelint-config-standard": "^40.0.0",
133
+ "stylelint-config-standard-scss": "^17.0.0",
134
+ "stylelint-order": "^7.0.0",
135
+ "stylelint-scss": "^7.0.0",
136
+ "stylelint-semantic-groups": "^1.2.1",
137
+ "ts-loader": "^9.5.2",
138
+ "ts-node": "^10.9.1",
139
+ "typescript": "^5.9.3",
140
+ "typescript-eslint": "^8.46.2",
141
+ "webpack": "^5.102.1"
142
+ },
143
+ "lint-staged": {
144
+ "*.{scss,css}": "npx stylelint \"src/**/*.{scss,css}\" --fix",
145
+ "*.{js,ts,mjs}": "npx eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
146
+ "storybook/.storybook/**/*.{js,ts,mjs}": "npx eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
147
+ "**/*": "npx prettier --ignore-unknown --write ."
148
+ },
149
+ "loki": {
150
+ "configurations": {
151
+ "chrome.docker.tui": {
152
+ "target": "chrome.app",
153
+ "width": 1980,
154
+ "height": 1000,
155
+ "looks-same": {
156
+ "ignoreCaret": true
157
+ },
158
+ "storyQueryParams": {
159
+ "theme": "theme-tui"
160
+ }
161
+ },
162
+ "chrome.docker.tuiLight": {
163
+ "target": "chrome.app",
164
+ "width": 1980,
165
+ "height": 1000,
166
+ "looks-same": {
167
+ "ignoreCaret": true
168
+ },
169
+ "storyQueryParams": {
170
+ "theme": "theme-firstchoice"
171
+ }
172
+ }
173
+ }
174
+ }
175
+ }