@tui/design-system 1.17.0 → 1.17.1-MR-385.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.
- package/CHANGELOG.md +6 -0
- package/dist/themes/crystalski/index.css +100 -75
- package/dist/themes/crystalski/index.css.map +1 -1
- package/dist/themes/firstchoice/index.css +98 -73
- package/dist/themes/firstchoice/index.css.map +1 -1
- package/dist/themes/tui/fonts.css +18 -57
- package/dist/themes/tui/fonts.css.map +1 -1
- package/dist/themes/tui/index-dark.css +224 -0
- package/dist/themes/tui/index-dark.css.map +1 -0
- package/dist/themes/tui/index.css +135 -96
- package/dist/themes/tui/index.css.map +1 -1
- package/package.json +2 -2
- package/scss/lib/active-tag/_mixins.scss +2 -1
- package/scss/lib/button/_mixins.scss +46 -16
- package/scss/lib/button/_variables.scss +14 -14
- package/scss/lib/cards/carousel/_mixins.scss +12 -0
- package/scss/lib/cards/carousel/_variables.scss +1 -1
- package/scss/lib/forms/input-chip/_mixins.scss +1 -1
- package/scss/lib/forms/input-chip/_variables.scss +1 -1
- package/scss/lib/icon-button/_mixins.scss +54 -46
- package/scss/lib/icon-button/_variables.scss +19 -19
- package/scss/lib/info-tag/_mixins.scss +8 -2
- package/scss/lib/info-tag/_variables.scss +6 -3
- package/scss/lib/patterns/edit-search/_mixins.scss +56 -2
- package/scss/themes/crystalski/_colors.scss +36 -3
- package/scss/themes/crystalski/_overrides.scss +20 -76
- package/scss/themes/crystalski/fonts.json +2 -2
- package/scss/themes/crystalski/index.scss +3 -3
- package/scss/themes/crystalski/theme.json +93 -18
- package/scss/themes/firstchoice/_colors.scss +33 -0
- package/scss/themes/firstchoice/_overrides.scss +33 -85
- package/scss/themes/firstchoice/fonts.json +1 -1
- package/scss/themes/firstchoice/index.scss +1 -1
- package/scss/themes/firstchoice/theme.json +110 -55
- package/scss/themes/tui/_colors-dark.scss +134 -0
- package/scss/themes/tui/_colors.scss +20 -0
- package/scss/themes/tui/_overrides-dark.scss +22 -0
- package/scss/themes/tui/_overrides.scss +1 -9
- package/scss/themes/tui/_primitives.scss +28 -1
- package/scss/themes/tui/_typography.scss +0 -14
- package/scss/themes/tui/fonts.json +21 -60
- package/scss/themes/tui/fonts.scss +3 -9
- package/scss/themes/tui/index-dark.scss +37 -0
- package/scss/themes/tui/index.scss +1 -1
- package/scss/themes/tui/theme.json +417 -4
- package/scss/variables/_colors.scss +43 -10
- package/scss/variables/_grid.scss +1 -1
- package/scss/variables/_primitives.scss +17 -16
- package/scss/variables/_typography.scss +60 -47
- package/scss/variables/base-theme.json +256 -89
- package/scss/variables/fonts/_ambit-black.scss +10 -0
- package/scss/variables/fonts/_ambit-fallback.scss +10 -0
- package/types/components.ts +8 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## v1.X.0
|
|
4
|
+
|
|
5
|
+
This release delivers the refreshed TUI brand. It's broader than a standard release — colour, typography and component styles have all been updated to
|
|
6
|
+
align with the new brand identity. The changes below are individual entries, but together they make up a single coordinated rebrand. Consumers of the
|
|
7
|
+
TUI theme should expect visible changes across their UI.
|
|
8
|
+
|
|
3
9
|
## v1.17.0
|
|
4
10
|
|
|
5
11
|
### Added
|
|
@@ -33,13 +33,17 @@
|
|
|
33
33
|
--uilib-color-core-brand: #00ce9b;
|
|
34
34
|
--uilib-color-core-brand-strong: #1c6f71;
|
|
35
35
|
--uilib-color-core-surface: #e8fff9;
|
|
36
|
+
--uilib-color-core-surface-light: #e8fff9;
|
|
36
37
|
--uilib-color-core-neutral: #fff;
|
|
38
|
+
--uilib-color-core-accent: #007c5e;
|
|
39
|
+
--uilib-color-core-accent-on-dark: #00ce9b;
|
|
37
40
|
--uilib-color-text-strong: #1c6f71;
|
|
38
41
|
--uilib-color-text-body: #252a32;
|
|
39
42
|
--uilib-color-text-link: #84329b;
|
|
40
43
|
--uilib-color-text-link-visited: #481257;
|
|
41
44
|
--uilib-color-text-link-visited-inverse: #e99aff;
|
|
42
45
|
--uilib-color-text-inverse: #fff;
|
|
46
|
+
--uilib-color-text-on-dark: #fff;
|
|
43
47
|
--uilib-color-text-promotion: #c0023e;
|
|
44
48
|
--uilib-color-text-danger: #970030;
|
|
45
49
|
--uilib-color-status-success-surface: #beffef;
|
|
@@ -54,6 +58,15 @@
|
|
|
54
58
|
--uilib-color-status-neutral-icon: #252a32;
|
|
55
59
|
--uilib-color-canvas-default: #fff;
|
|
56
60
|
--uilib-color-canvas-contrast: #f5f5f5;
|
|
61
|
+
--uilib-color-interaction-primary: #84329b;
|
|
62
|
+
--uilib-color-interaction-primary-hover: #a348bd;
|
|
63
|
+
--uilib-color-interaction-primary-text: #fff;
|
|
64
|
+
--uilib-color-interaction-secondary: #84329b;
|
|
65
|
+
--uilib-color-interaction-secondary-hover: #f6d5ff;
|
|
66
|
+
--uilib-color-interaction-secondary-text: #84329b;
|
|
67
|
+
--uilib-color-interaction-tertiary: #007c5e;
|
|
68
|
+
--uilib-color-interaction-tertiary-hover: #00a57c;
|
|
69
|
+
--uilib-color-interaction-tertiary-text: #fff;
|
|
57
70
|
--uilib-color-border-interaction: #84329b;
|
|
58
71
|
--uilib-color-border-brand-strong: #1c6f71;
|
|
59
72
|
--uilib-color-border-input: #707070;
|
|
@@ -63,21 +76,29 @@
|
|
|
63
76
|
--uilib-color-border-divider: #d8d8d8;
|
|
64
77
|
--uilib-color-border-dashed: var(--uilib-color-border-divider);
|
|
65
78
|
--uilib-color-promotion: #c0023e;
|
|
79
|
+
--uilib-color-promotion-text: #fff;
|
|
80
|
+
--uilib-color-promotion-bg: #c0023e;
|
|
81
|
+
--uilib-color-promotion-bg-hover: #e9175a;
|
|
82
|
+
--uilib-color-shortlist-icon: #c0023e;
|
|
83
|
+
--uilib-color-shortlist-bg: #fff;
|
|
84
|
+
--uilib-color-shortlist-bg-hover: #ffe8ef;
|
|
66
85
|
--uilib-color-other-disabled-soft: #bcbcbc;
|
|
67
86
|
--uilib-color-other-disabled-strong: #707070;
|
|
68
87
|
--uilib-color-other-elevation: rgba(0, 0, 0, 0.4);
|
|
69
88
|
--uilib-color-other-scrim: rgba(0, 0, 0, 0.8);
|
|
70
|
-
--uilib-color-other-active-state-tint:
|
|
71
|
-
--uilib-color-other-button-hover-state: #fff;
|
|
72
|
-
--uilib-color-other-secondary-button-hover-state: rgba(132, 50, 155, 0.1);
|
|
89
|
+
--uilib-color-other-active-state-tint: #f3feff;
|
|
73
90
|
--uilib-color-other-skeleton-loading: #d8d8d8;
|
|
74
|
-
--uilib-color-
|
|
91
|
+
--uilib-color-other-scroll-handle: #a3a3a3;
|
|
92
|
+
--uilib-color-brand-tripadvisor: #00aa6c;
|
|
75
93
|
--uilib-color-brand-tripadvisor-pine-green: #002b11;
|
|
76
94
|
--uilib-color-brand-tripadvisor-inverse: #00eb5b;
|
|
95
|
+
--uilib-color-brand-tripadvisor-on-dark: #00eb5b;
|
|
77
96
|
--uilib-color-brand-paypal: #253b80;
|
|
78
97
|
--uilib-color-brand-platinum: #4b5560;
|
|
79
|
-
--uilib-color-
|
|
80
|
-
--uilib-color-
|
|
98
|
+
--uilib-color-logo-logo: #00ce9b;
|
|
99
|
+
--uilib-color-other-button-hover-state: #fff;
|
|
100
|
+
--uilib-color-other-secondary-button-hover-state: rgba(132, 50, 155, 0.1);
|
|
101
|
+
--uilib-color-brand-trip-advisor: #00aa6c;
|
|
81
102
|
--uilib-color-canvas-footer: #252a32;
|
|
82
103
|
--uilib-color-border-brand: #00ce9b;
|
|
83
104
|
--uilib-elevation-none: none;
|
|
@@ -91,7 +112,7 @@
|
|
|
91
112
|
--uilib-grid-columns: 12;
|
|
92
113
|
--uilib-grid-gutter-width: 1rem;
|
|
93
114
|
--uilib-grid-gutter-height: 1rem;
|
|
94
|
-
--uilib-layout-max-width:
|
|
115
|
+
--uilib-layout-max-width: 100rem;
|
|
95
116
|
--uilib-layout-app-height: 100dvh;
|
|
96
117
|
--uilib-icon-size-default: 1.25rem;
|
|
97
118
|
--uilib-icon-size-xsmall: 1rem;
|
|
@@ -147,44 +168,45 @@
|
|
|
147
168
|
--uilib-font-family-lead: Brandon, BrandonFallbackFont, verdana, sans-serif;
|
|
148
169
|
--uilib-font-family-base: Brandon, BrandonFallbackFont, verdana, sans-serif;
|
|
149
170
|
--uilib-font-size-root: 1rem;
|
|
150
|
-
--uilib-typography-display-large: var(--uilib-font-weight-
|
|
151
|
-
--uilib-typography-display-medium: var(--uilib-font-weight-
|
|
152
|
-
--uilib-typography-display-small: var(--uilib-font-weight-
|
|
153
|
-
--uilib-typography-heading-xxlarge: var(--uilib-font-weight-
|
|
154
|
-
--uilib-typography-heading-xlarge: var(--uilib-font-weight-
|
|
155
|
-
--uilib-typography-heading-large: var(--uilib-font-weight-
|
|
156
|
-
--uilib-typography-heading-medium: var(--uilib-font-weight-
|
|
157
|
-
--uilib-typography-heading-small: var(--uilib-font-weight-
|
|
158
|
-
--uilib-typography-component-heading-
|
|
159
|
-
--uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-
|
|
160
|
-
--uilib-typography-component-heading-
|
|
161
|
-
--uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.
|
|
162
|
-
--uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-
|
|
163
|
-
--uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-
|
|
164
|
-
--uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-
|
|
165
|
-
--uilib-typography-component-heading-medium-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-
|
|
166
|
-
--uilib-typography-component-heading-small: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-
|
|
167
|
-
--uilib-typography-component-heading-small-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-
|
|
171
|
+
--uilib-typography-display-large: var(--uilib-font-weight-black) clamp(3rem, 1.6783rem + 5.7623vw, 6rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
172
|
+
--uilib-typography-display-medium: var(--uilib-font-weight-black) clamp(2.6875rem, 1.6687rem + 4.4418vw, 5rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
173
|
+
--uilib-typography-display-small: var(--uilib-font-weight-black) clamp(2.375rem, 1.5765rem + 3.4814vw, 4.1875rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
174
|
+
--uilib-typography-heading-xxlarge: var(--uilib-font-weight-black) clamp(1.75rem, 1.1993rem + 2.401vw, 3rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
175
|
+
--uilib-typography-heading-xlarge: var(--uilib-font-weight-black) clamp(1.5rem, 1.0594rem + 1.9208vw, 2.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
176
|
+
--uilib-typography-heading-large: var(--uilib-font-weight-black) clamp(1.25rem, 0.8645rem + 1.6807vw, 2.125rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
177
|
+
--uilib-typography-heading-medium: var(--uilib-font-weight-black) clamp(1.125rem, 0.8496rem + 1.2005vw, 1.75rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
178
|
+
--uilib-typography-heading-small: var(--uilib-font-weight-black) clamp(1rem, 0.7797rem + 0.9604vw, 1.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
179
|
+
--uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.75rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
180
|
+
--uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.75rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
181
|
+
--uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.5rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
182
|
+
--uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.5rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
183
|
+
--uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
184
|
+
--uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
185
|
+
--uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
186
|
+
--uilib-typography-component-heading-medium-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
187
|
+
--uilib-typography-component-heading-small: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
188
|
+
--uilib-typography-component-heading-small-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
168
189
|
--uilib-typography-body-large: var(--uilib-font-weight-regular) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
169
190
|
--uilib-typography-body-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
170
191
|
--uilib-typography-body-medium: var(--uilib-font-weight-regular) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
171
192
|
--uilib-typography-body-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
172
193
|
--uilib-typography-body-small: var(--uilib-font-weight-regular) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
173
194
|
--uilib-typography-body-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
174
|
-
--uilib-typography-label-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-
|
|
175
|
-
--uilib-typography-label-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-
|
|
176
|
-
--uilib-typography-label-medium: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-
|
|
177
|
-
--uilib-typography-label-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-
|
|
178
|
-
--uilib-typography-label-small: var(--uilib-font-weight-semibold) 0.875rem/var(--uilib-line-height-
|
|
179
|
-
--uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-
|
|
180
|
-
--uilib-typography-label-xsmall: var(--uilib-font-weight-semibold) 0.8125rem/var(--uilib-line-height-
|
|
181
|
-
--uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-
|
|
182
|
-
--uilib-line-height-heading: 1.
|
|
195
|
+
--uilib-typography-label-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
196
|
+
--uilib-typography-label-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
197
|
+
--uilib-typography-label-medium: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
198
|
+
--uilib-typography-label-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
199
|
+
--uilib-typography-label-small: var(--uilib-font-weight-semibold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
200
|
+
--uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
201
|
+
--uilib-typography-label-xsmall: var(--uilib-font-weight-semibold) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
202
|
+
--uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
203
|
+
--uilib-line-height-heading: 1.1;
|
|
183
204
|
--uilib-line-height-body: 1.3;
|
|
184
205
|
--uilib-line-height-none: 1;
|
|
185
206
|
--uilib-font-weight-regular: 400;
|
|
186
207
|
--uilib-font-weight-semibold: 400;
|
|
187
208
|
--uilib-font-weight-bold: 600;
|
|
209
|
+
--uilib-font-weight-black: 600;
|
|
188
210
|
--uilib-accordion-radius: var(--uilib-border-radius-100);
|
|
189
211
|
--uilib-accordion-logo-radius: var(--uilib-border-radius-100);
|
|
190
212
|
--uilib-accordion-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-down.svg");
|
|
@@ -208,21 +230,21 @@
|
|
|
208
230
|
--uilib-alert-text-color: var(--uilib-color-text-body);
|
|
209
231
|
--uilib-breadcrumb-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
|
|
210
232
|
--uilib-button-radius: var(--uilib-border-radius-pill);
|
|
211
|
-
--uilib-button-primary-color: var(--uilib-color-text
|
|
212
|
-
--uilib-button-primary-bg-color: var(--uilib-color-
|
|
213
|
-
--uilib-button-primary-hover-bg-color:
|
|
214
|
-
--uilib-button-secondary-color: var(--uilib-color-
|
|
233
|
+
--uilib-button-primary-color: var(--uilib-color-interaction-primary-text);
|
|
234
|
+
--uilib-button-primary-bg-color: var(--uilib-color-interaction-primary);
|
|
235
|
+
--uilib-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
236
|
+
--uilib-button-secondary-color: var(--uilib-color-interaction-secondary-text);
|
|
215
237
|
--uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
216
|
-
--uilib-button-secondary-hover-bg-color:
|
|
217
|
-
--uilib-button-tertiary-color: var(--uilib-color-text
|
|
218
|
-
--uilib-button-tertiary-bg-color: var(--uilib-color-
|
|
219
|
-
--uilib-button-tertiary-hover-bg-color:
|
|
220
|
-
--uilib-button-promotion-color: var(--uilib-color-text
|
|
221
|
-
--uilib-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
222
|
-
--uilib-button-promotion-hover-bg-color:
|
|
223
|
-
--uilib-button-search-color: var(--uilib-color-text
|
|
224
|
-
--uilib-button-search-bg-color: var(--uilib-color-
|
|
225
|
-
--uilib-button-search-hover-bg-color:
|
|
238
|
+
--uilib-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
239
|
+
--uilib-button-tertiary-color: var(--uilib-color-interaction-tertiary-text);
|
|
240
|
+
--uilib-button-tertiary-bg-color: var(--uilib-color-interaction-tertiary);
|
|
241
|
+
--uilib-button-tertiary-hover-bg-color: var(--uilib-color-interaction-tertiary-hover);
|
|
242
|
+
--uilib-button-promotion-color: var(--uilib-color-promotion-text);
|
|
243
|
+
--uilib-button-promotion-bg-color: var(--uilib-color-promotion-bg);
|
|
244
|
+
--uilib-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
|
|
245
|
+
--uilib-button-search-color: var(--uilib-color-interaction-primary-text);
|
|
246
|
+
--uilib-button-search-bg-color: var(--uilib-color-interaction-primary);
|
|
247
|
+
--uilib-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
226
248
|
--uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
227
249
|
--uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
228
250
|
--uilib-card-radius: var(--uilib-border-radius-400);
|
|
@@ -237,7 +259,7 @@
|
|
|
237
259
|
--uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-left.svg");
|
|
238
260
|
--uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
|
|
239
261
|
--uilib-carousel-counter-color: var(--uilib-color-text-body);
|
|
240
|
-
--uilib-carousel-counter-font: var(--uilib-typography-
|
|
262
|
+
--uilib-carousel-counter-font: var(--uilib-typography-label-small-strong);
|
|
241
263
|
--uilib-carousel-motion-duration: 300ms;
|
|
242
264
|
--uilib-carousel-motion-easing: ease-out;
|
|
243
265
|
--uilib-card-icon-small-radius: var(--uilib-card-radius);
|
|
@@ -287,10 +309,10 @@
|
|
|
287
309
|
--uilib-input-chip-default-bg-color: var(--uilib-color-core-neutral);
|
|
288
310
|
--uilib-input-chip-default-border-color: var(--uilib-color-border-card);
|
|
289
311
|
--uilib-input-chip-default-text-color: var(--uilib-color-text-strong);
|
|
290
|
-
--uilib-input-chip-hover-bg-color:
|
|
291
|
-
--uilib-input-chip-active-bg-color:
|
|
312
|
+
--uilib-input-chip-hover-bg-color: #f3feff;
|
|
313
|
+
--uilib-input-chip-active-bg-color: #fcf2ff;
|
|
292
314
|
--uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
|
|
293
|
-
--uilib-input-chip-active-hover-bg-color: rgb(
|
|
315
|
+
--uilib-input-chip-active-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
|
|
294
316
|
--uilib-input-chip-box-shadow: var(--uilib-elevation-200);
|
|
295
317
|
--uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
|
|
296
318
|
--uilib-input-count-radius: var(--uilib-border-radius-100);
|
|
@@ -362,28 +384,28 @@
|
|
|
362
384
|
--uilib-highlight-panel-header-bg-overlay-brand: none;
|
|
363
385
|
--uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
|
|
364
386
|
--uilib-icon-button-radius: var(--uilib-border-radius-pill);
|
|
365
|
-
--uilib-icon-button-text-color: var(--uilib-color-
|
|
366
|
-
--uilib-icon-button-ghost-color: var(--uilib-color-
|
|
387
|
+
--uilib-icon-button-text-color: var(--uilib-color-interaction-secondary-text);
|
|
388
|
+
--uilib-icon-button-ghost-color: var(--uilib-color-interaction-secondary-text);
|
|
367
389
|
--uilib-icon-button-ghost-bg-color: transparent;
|
|
368
|
-
--uilib-icon-button-ghost-hover-bg-color:
|
|
369
|
-
--uilib-icon-button-primary-color: var(--uilib-color-text
|
|
370
|
-
--uilib-icon-button-primary-bg-color: var(--uilib-color-
|
|
371
|
-
--uilib-icon-button-primary-hover-bg-color:
|
|
372
|
-
--uilib-icon-button-secondary-color: var(--uilib-color-
|
|
390
|
+
--uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
391
|
+
--uilib-icon-button-primary-color: var(--uilib-color-interaction-primary-text);
|
|
392
|
+
--uilib-icon-button-primary-bg-color: var(--uilib-color-interaction-primary);
|
|
393
|
+
--uilib-icon-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
394
|
+
--uilib-icon-button-secondary-color: var(--uilib-color-interaction-secondary-text);
|
|
373
395
|
--uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
374
|
-
--uilib-icon-button-secondary-hover-bg-color:
|
|
375
|
-
--uilib-icon-button-control-color: var(--uilib-color-
|
|
396
|
+
--uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
397
|
+
--uilib-icon-button-control-color: var(--uilib-color-interaction-secondary-text);
|
|
376
398
|
--uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
|
|
377
|
-
--uilib-icon-button-control-hover-bg-color:
|
|
378
|
-
--uilib-icon-button-promotion-color: var(--uilib-color-text
|
|
379
|
-
--uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
380
|
-
--uilib-icon-button-promotion-hover-bg-color:
|
|
381
|
-
--uilib-icon-button-search-color: var(--uilib-color-text
|
|
382
|
-
--uilib-icon-button-search-bg-color: var(--uilib-color-
|
|
383
|
-
--uilib-icon-button-search-hover-bg-color:
|
|
384
|
-
--uilib-icon-button-shortlist-color: var(--uilib-color-
|
|
385
|
-
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-
|
|
386
|
-
--uilib-icon-button-shortlist-hover-bg-color:
|
|
399
|
+
--uilib-icon-button-control-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
400
|
+
--uilib-icon-button-promotion-color: var(--uilib-color-promotion-text);
|
|
401
|
+
--uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion-bg);
|
|
402
|
+
--uilib-icon-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
|
|
403
|
+
--uilib-icon-button-search-color: var(--uilib-color-interaction-primary-text);
|
|
404
|
+
--uilib-icon-button-search-bg-color: var(--uilib-color-interaction-primary);
|
|
405
|
+
--uilib-icon-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
406
|
+
--uilib-icon-button-shortlist-color: var(--uilib-color-shortlist-icon);
|
|
407
|
+
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-shortlist-bg);
|
|
408
|
+
--uilib-icon-button-shortlist-hover-bg-color: var(--uilib-color-shortlist-bg-hover);
|
|
387
409
|
--uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
388
410
|
--uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
389
411
|
--uilib-icon-button-size-small: 2rem;
|
|
@@ -399,11 +421,14 @@
|
|
|
399
421
|
--uilib-image-fallback: url("https://mwa.tui.com/shared/mwa/assets/v3/illustrations/tui/sunset-adults.svg");
|
|
400
422
|
--uilib-info-tag-radius: var(--uilib-border-radius-100);
|
|
401
423
|
--uilib-info-tag-text-color: var(--uilib-color-text-body);
|
|
402
|
-
--uilib-info-tag-
|
|
424
|
+
--uilib-info-tag-bg-color: var(--uilib-color-status-info-surface);
|
|
425
|
+
--uilib-info-tag-local-product-text-color: var(--uilib-color-text-body);
|
|
403
426
|
--uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
|
|
404
|
-
--uilib-info-tag-
|
|
405
|
-
--uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
|
|
427
|
+
--uilib-info-tag-neutral-text-color: var(--uilib-color-text-body);
|
|
406
428
|
--uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
|
|
429
|
+
--uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
|
|
430
|
+
--uilib-info-tag-platinum-text-color: var(--uilib-color-text-on-dark);
|
|
431
|
+
--uilib-info-tag-scarcity-text-color: var(--uilib-color-text-body);
|
|
407
432
|
--uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
|
|
408
433
|
--uilib-link-decoration-color: var(--uilib-color-text-link);
|
|
409
434
|
--uilib-link-decoration-visited-color: var(--uilib-color-text-link-visited);
|
|
@@ -492,7 +517,7 @@
|
|
|
492
517
|
--uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
|
|
493
518
|
--uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
|
|
494
519
|
--uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
|
|
495
|
-
--uilib-ratings-range-icons-tui-t-plus-color: #
|
|
520
|
+
--uilib-ratings-range-icons-tui-t-plus-color: #011750;
|
|
496
521
|
--uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
|
|
497
522
|
--uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
|
|
498
523
|
--uilib-scroller-thumb-size: var(--uilib-spacing-400);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EG6HD;EH7HC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;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"}
|
|
@@ -34,13 +34,17 @@
|
|
|
34
34
|
--uilib-color-core-brand: #ff467c;
|
|
35
35
|
--uilib-color-core-brand-strong: #002f17;
|
|
36
36
|
--uilib-color-core-surface: #faf5ed;
|
|
37
|
+
--uilib-color-core-surface-light: #fffefe;
|
|
37
38
|
--uilib-color-core-neutral: #fff;
|
|
39
|
+
--uilib-color-core-accent: #d61d5f;
|
|
40
|
+
--uilib-color-core-accent-on-dark: #ff7ea3;
|
|
38
41
|
--uilib-color-text-strong: #002f17;
|
|
39
42
|
--uilib-color-text-body: #002f17;
|
|
40
43
|
--uilib-color-text-link: #b8194d;
|
|
41
44
|
--uilib-color-text-link-visited: #6c69b7;
|
|
42
45
|
--uilib-color-text-link-visited-inverse: #9996f1;
|
|
43
46
|
--uilib-color-text-inverse: #fffefe;
|
|
47
|
+
--uilib-color-text-on-dark: #fffefe;
|
|
44
48
|
--uilib-color-text-promotion: #002f17;
|
|
45
49
|
--uilib-color-text-danger: #a5261c;
|
|
46
50
|
--uilib-color-status-success-surface: #e6f2d8;
|
|
@@ -55,6 +59,15 @@
|
|
|
55
59
|
--uilib-color-status-neutral-icon: #3b4641;
|
|
56
60
|
--uilib-color-canvas-default: #fff;
|
|
57
61
|
--uilib-color-canvas-contrast: #faf5ed;
|
|
62
|
+
--uilib-color-interaction-primary: #d61d5f;
|
|
63
|
+
--uilib-color-interaction-primary-hover: #ff467c;
|
|
64
|
+
--uilib-color-interaction-primary-text: #fff;
|
|
65
|
+
--uilib-color-interaction-secondary: #002f17;
|
|
66
|
+
--uilib-color-interaction-secondary-hover: #cee8e0;
|
|
67
|
+
--uilib-color-interaction-secondary-text: #002f17;
|
|
68
|
+
--uilib-color-interaction-tertiary: #002f17;
|
|
69
|
+
--uilib-color-interaction-tertiary-hover: #335945;
|
|
70
|
+
--uilib-color-interaction-tertiary-text: #fff;
|
|
58
71
|
--uilib-color-border-interaction: #d61d5f;
|
|
59
72
|
--uilib-color-border-brand-strong: #002f17;
|
|
60
73
|
--uilib-color-border-input: #616f69;
|
|
@@ -64,21 +77,29 @@
|
|
|
64
77
|
--uilib-color-border-divider: #e9e3da;
|
|
65
78
|
--uilib-color-border-dashed: var(--uilib-color-border-divider);
|
|
66
79
|
--uilib-color-promotion: #ffd4e4;
|
|
80
|
+
--uilib-color-promotion-text: #fff;
|
|
81
|
+
--uilib-color-promotion-bg: #d61d5f;
|
|
82
|
+
--uilib-color-promotion-bg-hover: #ff467c;
|
|
83
|
+
--uilib-color-shortlist-icon: #d61d5f;
|
|
84
|
+
--uilib-color-shortlist-bg: #fff;
|
|
85
|
+
--uilib-color-shortlist-bg-hover: #fff9fb;
|
|
67
86
|
--uilib-color-other-disabled-soft: #ccd5d1;
|
|
68
87
|
--uilib-color-other-disabled-strong: #616f69;
|
|
69
88
|
--uilib-color-other-elevation: rgba(0, 0, 0, 0.4);
|
|
70
89
|
--uilib-color-other-scrim: rgba(0, 0, 0, 0.8);
|
|
71
90
|
--uilib-color-other-active-state-tint: #ffecf2;
|
|
72
|
-
--uilib-color-other-button-hover-state: #ffd4e4;
|
|
73
|
-
--uilib-color-other-secondary-button-hover-state: #faf5ed;
|
|
74
91
|
--uilib-color-other-skeleton-loading: #e3e9e7;
|
|
75
|
-
--uilib-color-
|
|
92
|
+
--uilib-color-other-scroll-handle: #9faca7;
|
|
93
|
+
--uilib-color-brand-tripadvisor: #00aa6c;
|
|
76
94
|
--uilib-color-brand-tripadvisor-pine-green: #002b11;
|
|
77
95
|
--uilib-color-brand-tripadvisor-inverse: #00eb5b;
|
|
96
|
+
--uilib-color-brand-tripadvisor-on-dark: #00eb5b;
|
|
78
97
|
--uilib-color-brand-paypal: #253b80;
|
|
79
98
|
--uilib-color-brand-platinum: #4b5560;
|
|
80
|
-
--uilib-color-
|
|
81
|
-
--uilib-color-
|
|
99
|
+
--uilib-color-logo-logo: #ff467c;
|
|
100
|
+
--uilib-color-other-button-hover-state: #ffd4e4;
|
|
101
|
+
--uilib-color-other-secondary-button-hover-state: #faf5ed;
|
|
102
|
+
--uilib-color-brand-trip-advisor: #00aa6c;
|
|
82
103
|
--uilib-color-text-tooltip: #002f17;
|
|
83
104
|
--uilib-color-border-insider: #8380f7;
|
|
84
105
|
--uilib-color-promotion-free-kids: #cee8e0;
|
|
@@ -97,7 +118,7 @@
|
|
|
97
118
|
--uilib-grid-columns: 12;
|
|
98
119
|
--uilib-grid-gutter-width: 1rem;
|
|
99
120
|
--uilib-grid-gutter-height: 1rem;
|
|
100
|
-
--uilib-layout-max-width:
|
|
121
|
+
--uilib-layout-max-width: 100rem;
|
|
101
122
|
--uilib-layout-app-height: 100dvh;
|
|
102
123
|
--uilib-icon-size-default: 1.25rem;
|
|
103
124
|
--uilib-icon-size-xsmall: 1rem;
|
|
@@ -153,44 +174,45 @@
|
|
|
153
174
|
--uilib-font-family-lead: PasticheGrotesque, PasticheGrotesqueFallbackFont, arial black, sans-serif;
|
|
154
175
|
--uilib-font-family-base: Rondelle, RondelleFallbackFont, verdana, sans-serif;
|
|
155
176
|
--uilib-font-size-root: 1rem;
|
|
156
|
-
--uilib-typography-display-large: var(--uilib-font-weight-
|
|
157
|
-
--uilib-typography-display-medium: var(--uilib-font-weight-
|
|
158
|
-
--uilib-typography-display-small: var(--uilib-font-weight-
|
|
159
|
-
--uilib-typography-heading-xxlarge: var(--uilib-font-weight-
|
|
160
|
-
--uilib-typography-heading-xlarge: var(--uilib-font-weight-
|
|
161
|
-
--uilib-typography-heading-large: var(--uilib-font-weight-
|
|
162
|
-
--uilib-typography-heading-medium: var(--uilib-font-weight-
|
|
163
|
-
--uilib-typography-heading-small: var(--uilib-font-weight-
|
|
164
|
-
--uilib-typography-component-heading-
|
|
165
|
-
--uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-
|
|
166
|
-
--uilib-typography-component-heading-
|
|
167
|
-
--uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-
|
|
168
|
-
--uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-
|
|
169
|
-
--uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-
|
|
170
|
-
--uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-
|
|
171
|
-
--uilib-typography-component-heading-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-
|
|
172
|
-
--uilib-typography-component-heading-small: var(--uilib-font-weight-semibold) 0.875rem/var(--uilib-line-height-
|
|
173
|
-
--uilib-typography-component-heading-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-
|
|
177
|
+
--uilib-typography-display-large: var(--uilib-font-weight-black) clamp(3rem, 1.6783rem + 5.7623vw, 6rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
178
|
+
--uilib-typography-display-medium: var(--uilib-font-weight-black) clamp(2.6875rem, 1.6687rem + 4.4418vw, 5rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
179
|
+
--uilib-typography-display-small: var(--uilib-font-weight-black) clamp(2.375rem, 1.5765rem + 3.4814vw, 4.1875rem)/var(--uilib-line-height-none) var(--uilib-font-family-lead);
|
|
180
|
+
--uilib-typography-heading-xxlarge: var(--uilib-font-weight-black) clamp(1.75rem, 1.1993rem + 2.401vw, 3rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
181
|
+
--uilib-typography-heading-xlarge: var(--uilib-font-weight-black) clamp(1.5rem, 1.0594rem + 1.9208vw, 2.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
182
|
+
--uilib-typography-heading-large: var(--uilib-font-weight-black) clamp(1.25rem, 0.8645rem + 1.6807vw, 2.125rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
183
|
+
--uilib-typography-heading-medium: var(--uilib-font-weight-black) clamp(1.125rem, 0.8496rem + 1.2005vw, 1.75rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
184
|
+
--uilib-typography-heading-small: var(--uilib-font-weight-black) clamp(1rem, 0.7797rem + 0.9604vw, 1.5rem)/var(--uilib-line-height-heading) var(--uilib-font-family-lead);
|
|
185
|
+
--uilib-typography-component-heading-xxlarge: var(--uilib-font-weight-semibold) 1.75rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
186
|
+
--uilib-typography-component-heading-xxlarge-strong: var(--uilib-font-weight-bold) 1.75rem/var(--uilib-line-height-body) var(--uilib-font-family-lead);
|
|
187
|
+
--uilib-typography-component-heading-xlarge: var(--uilib-font-weight-semibold) 1.25rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
188
|
+
--uilib-typography-component-heading-xlarge-strong: var(--uilib-font-weight-bold) 1.25rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
189
|
+
--uilib-typography-component-heading-large: var(--uilib-font-weight-semibold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
190
|
+
--uilib-typography-component-heading-large-strong: var(--uilib-font-weight-bold) 1.125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
191
|
+
--uilib-typography-component-heading-medium: var(--uilib-font-weight-semibold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
192
|
+
--uilib-typography-component-heading-medium-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
193
|
+
--uilib-typography-component-heading-small: var(--uilib-font-weight-semibold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
194
|
+
--uilib-typography-component-heading-small-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
174
195
|
--uilib-typography-body-large: var(--uilib-font-weight-regular) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
175
196
|
--uilib-typography-body-large-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
176
197
|
--uilib-typography-body-medium: var(--uilib-font-weight-regular) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
177
198
|
--uilib-typography-body-medium-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
178
199
|
--uilib-typography-body-small: var(--uilib-font-weight-regular) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
179
200
|
--uilib-typography-body-small-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
180
|
-
--uilib-typography-label-large: var(--uilib-font-weight-regular) 1rem/var(--uilib-line-height-
|
|
181
|
-
--uilib-typography-label-large-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-
|
|
182
|
-
--uilib-typography-label-medium: var(--uilib-font-weight-regular) 0.875rem/var(--uilib-line-height-
|
|
183
|
-
--uilib-typography-label-medium-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-
|
|
184
|
-
--uilib-typography-label-small: var(--uilib-font-weight-regular) 0.8125rem/var(--uilib-line-height-
|
|
185
|
-
--uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-
|
|
186
|
-
--uilib-typography-label-xsmall: var(--uilib-font-weight-regular) 0.6875rem/var(--uilib-line-height-
|
|
187
|
-
--uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.6875rem/var(--uilib-line-height-
|
|
188
|
-
--uilib-line-height-heading: 1.
|
|
201
|
+
--uilib-typography-label-large: var(--uilib-font-weight-regular) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
202
|
+
--uilib-typography-label-large-strong: var(--uilib-font-weight-bold) 1rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
203
|
+
--uilib-typography-label-medium: var(--uilib-font-weight-regular) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
204
|
+
--uilib-typography-label-medium-strong: var(--uilib-font-weight-bold) 0.875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
205
|
+
--uilib-typography-label-small: var(--uilib-font-weight-regular) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
206
|
+
--uilib-typography-label-small-strong: var(--uilib-font-weight-bold) 0.8125rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
207
|
+
--uilib-typography-label-xsmall: var(--uilib-font-weight-regular) 0.6875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
208
|
+
--uilib-typography-label-xsmall-strong: var(--uilib-font-weight-bold) 0.6875rem/var(--uilib-line-height-body) var(--uilib-font-family-base);
|
|
209
|
+
--uilib-line-height-heading: 1.1;
|
|
189
210
|
--uilib-line-height-body: 1.3;
|
|
190
211
|
--uilib-line-height-none: 1;
|
|
191
212
|
--uilib-font-weight-regular: 400;
|
|
192
213
|
--uilib-font-weight-semibold: 900;
|
|
193
214
|
--uilib-font-weight-bold: 900;
|
|
215
|
+
--uilib-font-weight-black: 900;
|
|
194
216
|
--uilib-accordion-radius: var(--uilib-border-radius-100);
|
|
195
217
|
--uilib-accordion-logo-radius: var(--uilib-border-radius-100);
|
|
196
218
|
--uilib-accordion-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-down.svg");
|
|
@@ -214,21 +236,21 @@
|
|
|
214
236
|
--uilib-alert-text-color: var(--uilib-color-text-strong);
|
|
215
237
|
--uilib-breadcrumb-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
|
|
216
238
|
--uilib-button-radius: var(--uilib-border-radius-200);
|
|
217
|
-
--uilib-button-primary-color: var(--uilib-color-text
|
|
218
|
-
--uilib-button-primary-bg-color: var(--uilib-color-
|
|
219
|
-
--uilib-button-primary-hover-bg-color:
|
|
220
|
-
--uilib-button-secondary-color: var(--uilib-color-text
|
|
239
|
+
--uilib-button-primary-color: var(--uilib-color-interaction-primary-text);
|
|
240
|
+
--uilib-button-primary-bg-color: var(--uilib-color-interaction-primary);
|
|
241
|
+
--uilib-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
242
|
+
--uilib-button-secondary-color: var(--uilib-color-interaction-secondary-text);
|
|
221
243
|
--uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
222
|
-
--uilib-button-secondary-hover-bg-color:
|
|
223
|
-
--uilib-button-tertiary-color: var(--uilib-color-text
|
|
224
|
-
--uilib-button-tertiary-bg-color: var(--uilib-color-
|
|
225
|
-
--uilib-button-tertiary-hover-bg-color:
|
|
226
|
-
--uilib-button-promotion-color: var(--uilib-color-text
|
|
227
|
-
--uilib-button-promotion-bg-color: var(--uilib-color-
|
|
228
|
-
--uilib-button-promotion-hover-bg-color:
|
|
229
|
-
--uilib-button-search-color: var(--uilib-color-text
|
|
230
|
-
--uilib-button-search-bg-color: var(--uilib-color-
|
|
231
|
-
--uilib-button-search-hover-bg-color:
|
|
244
|
+
--uilib-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
245
|
+
--uilib-button-tertiary-color: var(--uilib-color-interaction-tertiary-text);
|
|
246
|
+
--uilib-button-tertiary-bg-color: var(--uilib-color-interaction-tertiary);
|
|
247
|
+
--uilib-button-tertiary-hover-bg-color: var(--uilib-color-interaction-tertiary-hover);
|
|
248
|
+
--uilib-button-promotion-color: var(--uilib-color-promotion-text);
|
|
249
|
+
--uilib-button-promotion-bg-color: var(--uilib-color-promotion-bg);
|
|
250
|
+
--uilib-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
|
|
251
|
+
--uilib-button-search-color: var(--uilib-color-interaction-primary-text);
|
|
252
|
+
--uilib-button-search-bg-color: var(--uilib-color-interaction-primary);
|
|
253
|
+
--uilib-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
232
254
|
--uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
233
255
|
--uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
234
256
|
--uilib-card-radius: var(--uilib-border-radius-200);
|
|
@@ -243,7 +265,7 @@
|
|
|
243
265
|
--uilib-carousel-prev-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-left.svg");
|
|
244
266
|
--uilib-carousel-next-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
|
|
245
267
|
--uilib-carousel-counter-color: var(--uilib-color-text-body);
|
|
246
|
-
--uilib-carousel-counter-font: var(--uilib-typography-
|
|
268
|
+
--uilib-carousel-counter-font: var(--uilib-typography-label-small-strong);
|
|
247
269
|
--uilib-carousel-motion-duration: 300ms;
|
|
248
270
|
--uilib-carousel-motion-easing: ease-out;
|
|
249
271
|
--uilib-card-icon-small-radius: var(--uilib-border-radius-200);
|
|
@@ -293,10 +315,10 @@
|
|
|
293
315
|
--uilib-input-chip-default-bg-color: var(--uilib-color-core-neutral);
|
|
294
316
|
--uilib-input-chip-default-border-color: var(--uilib-color-border-card);
|
|
295
317
|
--uilib-input-chip-default-text-color: var(--uilib-color-text-strong);
|
|
296
|
-
--uilib-input-chip-hover-bg-color: var(--uilib-color-
|
|
318
|
+
--uilib-input-chip-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
297
319
|
--uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
|
|
298
320
|
--uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
|
|
299
|
-
--uilib-input-chip-active-hover-bg-color: rgb(
|
|
321
|
+
--uilib-input-chip-active-hover-bg-color: rgb(96.7843137255%, 82.2745098039%, 87.4509803922%);
|
|
300
322
|
--uilib-input-chip-box-shadow: var(--uilib-elevation-200);
|
|
301
323
|
--uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
|
|
302
324
|
--uilib-input-count-radius: var(--uilib-border-radius-100);
|
|
@@ -368,28 +390,28 @@
|
|
|
368
390
|
--uilib-highlight-panel-header-bg-overlay-brand: none;
|
|
369
391
|
--uilib-highlight-panel-toggle-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-down.svg");
|
|
370
392
|
--uilib-icon-button-radius: var(--uilib-border-radius-200);
|
|
371
|
-
--uilib-icon-button-text-color: var(--uilib-color-
|
|
372
|
-
--uilib-icon-button-ghost-color: var(--uilib-color-text
|
|
393
|
+
--uilib-icon-button-text-color: var(--uilib-color-interaction-secondary-text);
|
|
394
|
+
--uilib-icon-button-ghost-color: var(--uilib-color-interaction-secondary-text);
|
|
373
395
|
--uilib-icon-button-ghost-bg-color: transparent;
|
|
374
|
-
--uilib-icon-button-ghost-hover-bg-color:
|
|
375
|
-
--uilib-icon-button-primary-color: var(--uilib-color-text
|
|
376
|
-
--uilib-icon-button-primary-bg-color: var(--uilib-color-
|
|
377
|
-
--uilib-icon-button-primary-hover-bg-color:
|
|
378
|
-
--uilib-icon-button-secondary-color: var(--uilib-color-text
|
|
396
|
+
--uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
397
|
+
--uilib-icon-button-primary-color: var(--uilib-color-interaction-primary-text);
|
|
398
|
+
--uilib-icon-button-primary-bg-color: var(--uilib-color-interaction-primary);
|
|
399
|
+
--uilib-icon-button-primary-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
400
|
+
--uilib-icon-button-secondary-color: var(--uilib-color-interaction-secondary-text);
|
|
379
401
|
--uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
380
|
-
--uilib-icon-button-secondary-hover-bg-color:
|
|
381
|
-
--uilib-icon-button-control-color: var(--uilib-color-text
|
|
402
|
+
--uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
403
|
+
--uilib-icon-button-control-color: var(--uilib-color-interaction-secondary-text);
|
|
382
404
|
--uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
|
|
383
|
-
--uilib-icon-button-control-hover-bg-color:
|
|
384
|
-
--uilib-icon-button-promotion-color: var(--uilib-color-text
|
|
385
|
-
--uilib-icon-button-promotion-bg-color: var(--uilib-color-
|
|
386
|
-
--uilib-icon-button-promotion-hover-bg-color:
|
|
387
|
-
--uilib-icon-button-search-color: var(--uilib-color-text
|
|
388
|
-
--uilib-icon-button-search-bg-color: var(--uilib-color-
|
|
389
|
-
--uilib-icon-button-search-hover-bg-color:
|
|
390
|
-
--uilib-icon-button-shortlist-color: var(--uilib-color-
|
|
391
|
-
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-
|
|
392
|
-
--uilib-icon-button-shortlist-hover-bg-color:
|
|
405
|
+
--uilib-icon-button-control-hover-bg-color: var(--uilib-color-interaction-secondary-hover);
|
|
406
|
+
--uilib-icon-button-promotion-color: var(--uilib-color-promotion-text);
|
|
407
|
+
--uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion-bg);
|
|
408
|
+
--uilib-icon-button-promotion-hover-bg-color: var(--uilib-color-promotion-bg-hover);
|
|
409
|
+
--uilib-icon-button-search-color: var(--uilib-color-interaction-primary-text);
|
|
410
|
+
--uilib-icon-button-search-bg-color: var(--uilib-color-interaction-primary);
|
|
411
|
+
--uilib-icon-button-search-hover-bg-color: var(--uilib-color-interaction-primary-hover);
|
|
412
|
+
--uilib-icon-button-shortlist-color: var(--uilib-color-shortlist-icon);
|
|
413
|
+
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-shortlist-bg);
|
|
414
|
+
--uilib-icon-button-shortlist-hover-bg-color: var(--uilib-color-shortlist-bg-hover);
|
|
393
415
|
--uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
394
416
|
--uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
395
417
|
--uilib-icon-button-size-small: 2rem;
|
|
@@ -405,11 +427,14 @@
|
|
|
405
427
|
--uilib-image-fallback: url("https://mwa.tui.com/shared/mwa/assets/v3/illustrations/tui/sunset-adults.svg");
|
|
406
428
|
--uilib-info-tag-radius: var(--uilib-border-radius-100);
|
|
407
429
|
--uilib-info-tag-text-color: var(--uilib-color-text-strong);
|
|
408
|
-
--uilib-info-tag-
|
|
430
|
+
--uilib-info-tag-bg-color: var(--uilib-color-status-info-surface);
|
|
431
|
+
--uilib-info-tag-local-product-text-color: var(--uilib-color-text-strong);
|
|
409
432
|
--uilib-info-tag-local-product-bg-color: var(--uilib-color-canvas-contrast);
|
|
410
|
-
--uilib-info-tag-
|
|
411
|
-
--uilib-info-tag-platinum-text-color: var(--uilib-color-core-neutral);
|
|
433
|
+
--uilib-info-tag-neutral-text-color: var(--uilib-color-text-strong);
|
|
412
434
|
--uilib-info-tag-neutral-bg-color: var(--uilib-color-core-neutral);
|
|
435
|
+
--uilib-info-tag-platinum-bg-color: var(--uilib-color-brand-platinum);
|
|
436
|
+
--uilib-info-tag-platinum-text-color: var(--uilib-color-text-on-dark);
|
|
437
|
+
--uilib-info-tag-scarcity-text-color: var(--uilib-color-text-strong);
|
|
413
438
|
--uilib-info-tag-scarcity-bg-color: var(--uilib-color-status-warning-surface);
|
|
414
439
|
--uilib-link-decoration-color: var(--uilib-color-text-link);
|
|
415
440
|
--uilib-link-decoration-visited-color: var(--uilib-color-text-link-visited);
|
|
@@ -498,7 +523,7 @@
|
|
|
498
523
|
--uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
|
|
499
524
|
--uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
|
|
500
525
|
--uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
|
|
501
|
-
--uilib-ratings-range-icons-tui-t-plus-color: #
|
|
526
|
+
--uilib-ratings-range-icons-tui-t-plus-color: #011750;
|
|
502
527
|
--uilib-ratings-range-icons-holidaycheck-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-unchecked.svg");
|
|
503
528
|
--uilib-ratings-range-icons-holidaycheck-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/holidaycheck-checked.svg");
|
|
504
529
|
--uilib-scroller-thumb-size: var(--uilib-spacing-400);
|