@tui/design-system 0.1.1-MR-211.12 → 0.2.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 (28) hide show
  1. package/CHANGELOG.md +164 -118
  2. package/README.md +1 -1
  3. package/dist/themes/crystalski/index.css +5 -0
  4. package/dist/themes/crystalski/index.css.map +1 -1
  5. package/dist/themes/firstchoice/index.css +5 -0
  6. package/dist/themes/firstchoice/index.css.map +1 -1
  7. package/dist/themes/tui/index.css +5 -0
  8. package/dist/themes/tui/index.css.map +1 -1
  9. package/package.json +4 -3
  10. package/scss/lib/cards/article/_index.scss +3 -0
  11. package/scss/lib/cards/article/_mixins.scss +147 -0
  12. package/scss/lib/cards/article/_variables.scss +6 -0
  13. package/scss/lib/cards/card/_mixins.scss +15 -4
  14. package/scss/lib/cards/icon/_index.scss +3 -0
  15. package/scss/lib/cards/icon/_mixins.scss +113 -0
  16. package/scss/lib/cards/icon/_variables.scss +7 -0
  17. package/scss/lib/cards/search/_mixins.scss +0 -4
  18. package/scss/lib/image/_mixins.scss +4 -0
  19. package/scss/mixins.scss +3 -1
  20. package/scss/themes/crystalski/_overrides.scss +16 -0
  21. package/scss/themes/crystalski/index.scss +6 -0
  22. package/scss/themes/firstchoice/_overrides.scss +19 -0
  23. package/scss/themes/firstchoice/index.scss +6 -0
  24. package/scss/themes/firstchoice/theme.json +17 -0
  25. package/scss/themes/tui/index.scss +6 -0
  26. package/scss/variables/base-theme.json +39 -0
  27. package/scss/variables.scss +3 -1
  28. package/types/components.ts +274 -11
package/CHANGELOG.md CHANGED
@@ -2,7 +2,50 @@
2
2
 
3
3
  ## v1.0.0
4
4
 
5
- ### General changes
5
+ v1.0.0 introduces a complete overhaul of our token system, a shift to CSS Grid, and the adoption of Native HTML elements for complex components like
6
+ Modals and Accordions.
7
+
8
+ ### High-Level System Changes
9
+
10
+ - **Token Overhaul:** Primitive variables have been reduced and mapped to semantic tokens to match Figma master files.
11
+ - **CSS Grid:** The system has migrated from Flexbox to CSS Grid Layout Module for core structures.
12
+ - **Modern Units:** App height now uses 100dvh (Dynamic Viewport Height), eliminating the need for JS-fixes on mobile.
13
+ - **Theming:** Support has been streamlined to TUI, Crystal Ski and First Choice for initial release. Dark theme and several sub-brands have been
14
+ removed.
15
+ - **SASS Architecture:** Now uses @use and @forward. Mixins must be imported as individual modules.
16
+ - **Web Components:** Some components are now supplied as web components allowing for enhanced, consistent and accessible functionality for all
17
+ consumers. Components include Modal, Datepicker, Input Slider, Tabs.
18
+
19
+ ### New Components
20
+
21
+ | Component | Description |
22
+ | ----------------- | ------------------------------------------------------------------------------------------------------------------------------ |
23
+ | Active Tag | Indicates active filters to help users refine search results. |
24
+ | Breadcrumb | New navigation component inheriting base Link/Icon styles. |
25
+ | Card Article | Show information on the inspire and browse pages, always having an image in the card. |
26
+ | Card Icon | Card added to show information on the inspire and browse pages, portraying information primarily through icons and pictograms. |
27
+ | Card Search | Result summary card for product listings. |
28
+ | Flight Details | Presents comprehensive information about a holiday's flights. |
29
+ | Info Tag | Highlights promotional/branded content (Neutral, Info, Scarcity, Local). |
30
+ | Media Button | Specific trigger for opening media galleries. |
31
+ | Percentage review | Currently used for HolidayCheck reviews within the Central Region market to show a hotel rating based on guest reviews. |
32
+ | Rich Text | A wrapper to automatically style raw HTML content from CMS/APIs. |
33
+ | Show more or less | Hides and reveals content to save space and support visual hierarchy. |
34
+ | Skeleton | Placeholder loading states with synchronised shimmer animations. |
35
+
36
+ ### Removals
37
+
38
+ | Component | Description |
39
+ | ------------- | ----------------------------------- |
40
+ | Badge | Removed (use the new Info Tag). |
41
+ | Eye Catcher | Removed with no replacement. |
42
+ | Image Counter | Removed with no replacement. |
43
+ | Input Toggle | Removed (use Input Chips or Radio). |
44
+ | Price | xLarge variant removed. |
45
+
46
+ ### Detailed changes
47
+
48
+ #### General changes
6
49
 
7
50
  - Mixins available have been reduced to simplify use of the design system. Mixins for components now have class names baked in to aid in code
8
51
  consistency across TUI, although these can be overridden by updating the SASS variables if required.
@@ -19,234 +62,237 @@
19
62
  - Tokens
20
63
  - All tokens have been updated to match the token naming for the master figma files. This has resulted in a vastly reduced number of base tokens
21
64
  that reference primitive variables for each theme. Individual components may have their own tokens that map back to these base tokens for each
22
- theme as nessessary.
23
- - App height is now set to 100dvh removing the requirement to use JS to fix the viewport height on mobile devices when the browser toolbars disapear
65
+ theme as necessary.
66
+ - App height is now set to 100dvh removing the requirement to use JS to fix the viewport height on mobile devices when the browser toolbars disappear
24
67
  on scroll.
25
68
 
26
- ### [Typography](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-typography--docs)
69
+ #### [Typography](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-typography--docs)
27
70
 
28
71
  - All webfonts have fallbacks with f-mods specified to minimise CLS when the webfonts load
29
72
  - New mixin for generic heading and copy styling classes
30
- - Modifer mixin updated to remove options covered by css variables
73
+ - Modifier mixin updated to remove options covered by css variables
31
74
 
32
- ### [Breakpoints](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-breakpoints--docs)
75
+ #### [Breakpoints](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-breakpoints--docs)
33
76
 
34
77
  - New xxs breakpoint included to further control styling where required. This breakpoint is used for grids so that below 320px content will simply
35
78
  stack and remain readable and usable.
36
79
 
37
- ### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
80
+ #### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
38
81
 
39
82
  - Design System now uses CSS Grid Layout Module instead of Flexbox
40
83
 
41
- ### [Accordion](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-accordion--docs)
84
+ #### [Accordion](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-accordion--docs)
42
85
 
43
- - Reduced down to single variant with border, also replacing elevations.
44
- - Two group styling options available
45
- - Option to include a logo next to the accordion heading has been added for where a collection of logos is required
46
- - Notification label replaced by option to include a sub title
86
+ - Reduced to a single border variant, replacing elevation styles.
87
+ - Two group styling options are now available.
88
+ - Added option to include a logo next to the accordion heading, for use when displaying a collection of logos.
89
+ - Replaced notification label with an optional subtitle.
47
90
  - Mixins simplified so variants and states are all baked into the main uilib-accordion mixin, with a second mixin uilib-accordion-group for styling
48
91
  groups of accordions
49
92
  - Rebuilt to use native details, summary elements; fixing various accessibility and usability issues
50
- - JavaScript provided to support expand/collapse all functionality where 5 or more accordions are in a group.
93
+ - Added JavaScript to support expand/collapse-all functionality when five or more accordions are in a group.
51
94
 
52
- ### [Active tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-active-tag--docs)
95
+ #### [Active tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-active-tag--docs)
53
96
 
54
- - New component added to indicate which filters are currently applied. They allow users to easily modify their search and filtering criteria, making
55
- the results easier to refine.
97
+ - New component for indicating which filters are currently applied. Allows users to modify search and filtering criteria to refine results.
56
98
 
57
- ### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
99
+ #### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
58
100
 
59
101
  - Mixins simplified so variants are all baked into the main `uilib-alert mixin`
60
- - Default variant has been removed in line with 1web design patterns
102
+ - Removed the default variant to align with 1web design patterns.
61
103
 
62
- ### Badge
104
+ #### Badge
63
105
 
64
106
  - Removed with some variations being covered by the new info tag component
65
107
 
66
- ### [Breadcrumb](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-breadcrumb--docs)
108
+ #### [Breadcrumb](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-breadcrumb--docs)
67
109
 
68
- - Created new component, all the styles are baked into a single `uilib-breadcrumb mixin`
69
- - Breadcrumb inherits styles from it's base Link and Icon components
110
+ - New component with all styles baked into a single `uilib-breadcrumb` mixin.
111
+ - Breadcrumb inherits styles from its base Link and Icon components
70
112
 
71
- ### [Button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-button--docs)
113
+ #### [Button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-button--docs)
72
114
 
73
115
  - Mixins simplified so variants, states and sizes are all baked into the main `uilib-button mixin`
74
- - Button styling has been aligned with the latest 1web designs across all themes
116
+ - Button styling aligned with the latest 1web designs across all themes.
75
117
 
76
- ### [Card basic](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-basic-card--docs)
118
+ #### Cards
119
+
120
+ ##### [Card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-card--docs)
77
121
 
78
122
  - Card added to group related content into a structured, scannable surface.
79
123
 
80
- ### [Card search](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
124
+ ##### [Card article](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
125
+
126
+ - Card added to show information on the inspire and browse pages. It always has an image in the card.
127
+
128
+ ##### [Card icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-icon-card--docs)
129
+
130
+ - Card added to show information on the inspire and browse pages, portraying information primarily through icons and pictograms.
81
131
 
82
- - Card added to contain a summary of information for a product in a set of results.
132
+ ##### [Card search](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
83
133
 
84
- ### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
134
+ - Card added for displaying a product summary within search results.
135
+
136
+ ##### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
85
137
 
86
138
  - Card split from basic card to provide users with detailed selectable options. This card has support for static display as well as interactive with
87
139
  radio or checkbox inputs.
88
140
 
89
- ### [Divider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-divider--docs)
141
+ #### [Divider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-divider--docs)
90
142
 
91
143
  - Mixins simplified so vertical, size and variant are all baked into the main `uilib-divider mixin`
92
144
  - Title option has been removed
93
145
  - Colour variants have been reduced to default, strong and inverse
94
146
  - New dashed divider style has been added
95
147
 
96
- ### Eye catcher
97
-
98
- - Removed from the design system. There is not replacement for this component.
99
-
100
- ### [Flight details](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flight-details--docs)
148
+ #### Eye catcher
101
149
 
102
- - New flight details has been added. It presents comprehensive information about a holiday's flights
103
- - Two variants are available allowing for the display of both direct and indirect flights
150
+ - Removed from the design system. There is no replacement for this component.
104
151
 
105
- ### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
152
+ #### [Flight details](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flight-details--docs)
106
153
 
107
- - New flyout Dropdown component has been added. It is an overlay panel that emerges from a control like a button or menu item
108
- - Two variants available with three pointer locations
154
+ - New component for presenting comprehensive flight information for holidays.
155
+ - Two variants available: one for direct flights and one for indirect flights.
109
156
 
110
- ### Forms
157
+ #### Forms
111
158
 
112
- #### [Date picker](https://uilib-testing.mwa.browse.sales-nonprod.tui/storybook/index.html?path=/docs/components-forms-datepicker--docs) and [Date range](https://uilib-testing.mwa.browse.sales-nonprod.tui/storybook/index.html?path=/docs/components-forms-date-range--docs) (formerly calendar)
159
+ ##### [Date picker](https://uilib-testing.mwa.browse.sales-nonprod.tui/storybook/index.html?path=/docs/components-forms-datepicker--docs) and [Date range](https://uilib-testing.mwa.browse.sales-nonprod.tui/storybook/index.html?path=/docs/components-forms-date-range--docs) (formerly calendar)
113
160
 
114
161
  - Mixins simplified to one main `uilib-datepicker` mixin
115
162
  - Separate day component removed and baked into the date picker
116
163
  - Sheet variant removed
117
164
  - Converted to a web component that will populate a date input field with the selected value
118
- - Inclusion of support for week number column for the Nordics market
165
+ - Added support for a week number column for the Nordics market.
119
166
 
120
- #### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
167
+ ##### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
121
168
 
122
- - Replacing base input styling provided in v4, including styles for label, hint text, spacing around any input and error messaging
169
+ - Replaces the base input styling from v4, covering label, hint text, input spacing, and error messaging.
123
170
  - Support for success messaging removed
124
171
 
125
- #### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs)
172
+ ##### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs)
126
173
 
127
174
  - Mixins simplified to one main `uilib-input-checkbox` mixin
128
175
  - Error, valid states removed
129
- - New checkbox label variant options included
130
- - New confirmation checkbox variant included
176
+ - Added new checkbox label variant options.
177
+ - Added new confirmation checkbox variant.
131
178
 
132
- ### [Input Chip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-chip--docs)
179
+ ##### [Input Chip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-chip--docs)
133
180
 
134
181
  - Mixins simplified to one main `uilib-input-chip` mixin
135
- - New month-calendar variant included
182
+ - Added new month-calendar variant.
136
183
 
137
- #### [Input count](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-count--docs)
184
+ ##### [Input count](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-count--docs)
138
185
 
139
186
  - Mixins simplified to one main `uilib-input-count` mixin
140
187
  - Variants removed to match latest 1web designs
141
188
  - Error, valid and disabled states removed
142
189
  - Count limited to maximum of 7 options
143
- - Can now support text as well as numbers within the count input
190
+ - Now supports text values in addition to numbers.
144
191
 
145
- #### [Input radio](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio--docs)
192
+ ##### [Input radio](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio--docs)
146
193
 
147
194
  - Mixins simplified to one main `uilib-input-radio` mixin
148
195
  - Error, valid states removed
149
- - New radio label variant options included
196
+ - Added new radio label variant options.
150
197
 
151
- #### [Input select](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-select--docs)
198
+ ##### [Input select](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-select--docs)
152
199
 
153
200
  - Mixins simplified to one main `uilib-input-select` mixin
154
201
  - Floating label option and valid state have been removed
155
- - Ability to include a leading icon added
202
+ - Added support for a leading icon.
156
203
 
157
- #### [Input slider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-slider--docs)
204
+ ##### [Input slider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-slider--docs)
158
205
 
159
206
  - Mixin renamed to `uilib-input-slider`
160
207
  - Valid state removed
161
208
  - Input text is now required to aid accessibility and the range input is added via JavaScript to ensure the fields are properly connected
162
209
 
163
- #### [Input stepper](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-stepper--docs)
210
+ ##### [Input stepper](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-stepper--docs)
164
211
 
165
212
  - Mixins simplified to one main `uilib-input-stepper` mixin
166
213
  - Control and input sizes have been adjusted to match latest 1web designs
167
- - Web component provided to include increment and decrement controls to update the original text input
214
+ - Added a web component that provides increment and decrement controls for the text input.
168
215
 
169
- #### [Input switch](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-switch--docs)
216
+ ##### [Input switch](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-switch--docs)
170
217
 
171
218
  - Mixins simplified to one main `uilib-input-switch` mixin
172
219
 
173
- #### [Input text](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-text--docs)
220
+ ##### [Input text](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-text--docs)
174
221
 
175
222
  - Mixin renamed to `uilib-input-text`
176
223
  - Floating label, placeholder and readonly options have been removed
177
- - Valid state usage rules and styling updated
178
- - Web component provided to clear prefilled inputs, clear search inputs and toggle view of password fields
224
+ - Updated valid-state usage rules and styling.
225
+ - Added a web component to clear prefilled and search inputs, and to toggle password field visibility.
179
226
 
180
- #### [Textarea](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-textarea--docs)
227
+ ##### [Textarea](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-textarea--docs)
181
228
 
182
229
  - Mixin added for `uilib-textarea`
183
230
  - Utilises label, hint and error from formrow
184
231
 
185
- #### Input toggle
232
+ ##### Input toggle
186
233
 
187
234
  - Removed from the design system. Please use input chips or input radio.
188
235
 
189
- ### [Hero (formerly header)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-hero--docs)
236
+ #### [Hero (formerly header)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-hero--docs)
190
237
 
191
238
  - Mixins simplified so size options are now baked into the main `uilib-hero mixin`
192
- - Hero now includes styling for the content area overlay supporting left, right and center positioning as well as standard, slim and illustration
193
- heros
239
+ - Now includes content-area overlay styling with left, right, and centre positioning, as well as standard, slim, and illustration hero variants.
194
240
 
195
- ### [Icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon--docs)
241
+ #### [Icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon--docs)
196
242
 
197
243
  - Mixins simplified so size options are now baked into the main `uilib-icon` mixin
198
244
  - Icon sizes have been adjusted to match latest designs
199
245
 
200
- ### [Icon button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon-button--docs)
246
+ #### [Icon button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon-button--docs)
201
247
 
202
248
  - Mixins simplified so size options are now baked into the main `uilib-icon-button` mixin
203
249
  - Button variants have been remapped
204
250
  - Half icon button has been removed
205
251
  - New control, promotion, search and shortlist variants added
206
252
  - Elevation option has been removed and automatically applied to control variant
207
- - Button styling has been aligned with the latest 1web designs across all themes
253
+ - Button styling aligned with the latest 1web designs across all themes.
208
254
 
209
- ### [Image (picture)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
255
+ #### [Image (picture)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
210
256
 
211
257
  - Mixins simplified so shapes and ratios are all baked into the main `uilib-image` mixin
212
- - Added ability to control the focal point if the source image is cropped by the focal point option
213
- - Error handling with fallback image has been added.
258
+ - Added a focal-point option to control cropping of the source image.
259
+ - Added error handling with a fallback image.
214
260
 
215
- ### Image counter
261
+ #### Image counter
216
262
 
217
- - Removed from the design system. There is not replacement for this component.
263
+ - Removed from the design system. There is no replacement for this component.
218
264
 
219
- ### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
265
+ #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
220
266
 
221
267
  - New component added to highlight informational, promotional or branded content
222
268
  - Four variants available: neutral, info, scarcity, and local-product
223
269
 
224
- ### [Link](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-link--docs)
270
+ #### [Link](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-link--docs)
225
271
 
226
272
  - Mixins simplified so size options are now baked into the main `uilib-link` mixin
227
273
  - Links styling has been aligned to match latest designs
228
274
  - Link variants have been removed as well as disabled state
229
275
 
230
- ### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
276
+ #### [List](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-list--docs)
231
277
 
232
278
  - Divider, state, and meta label style options removed
233
279
  - Basic bullet list no longer requires icon setting reducing markup
234
280
  - New image variant added with square or circular image options
235
281
 
236
- ### [Loader](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-loader--docs)
282
+ #### [Loader](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-loader--docs)
237
283
 
238
284
  - Mixins simplified so size options are now baked into the main `uilib-loader` mixin
239
285
  - TUI ripple loader option removed
240
- - Snowflake and FC-loader options are now controlled by theming rather than being specific options
241
- - Option to include visible loading message now included for all size variants
242
- - Overlay mixin removed with no replacement. Placement of loader is developers responsibility. The loader will always position centered (vertically
243
- and horizontally) within the 'uilib-loader' element.
286
+ - Snowflake and FC-loader styles are now controlled by theming rather than being separate component options.
287
+ - Added option to display a visible loading message for all size variants.
288
+ - Overlay mixin removed with no replacement. Placement of loader is the developer's responsibility. The loader will always position centered
289
+ (vertically and horizontally) within the 'uilib-loader' element.
244
290
 
245
- ### [Media button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-button--docs)
291
+ #### [Media button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-button--docs)
246
292
 
247
- - New media button has been added for opening media galleries
293
+ - New component for triggering media gallery overlays.
248
294
 
249
- ### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
295
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
250
296
 
251
297
  - New modal component added using native HTML dialog element
252
298
  - Three size variants available: small (6 cols), medium (8 cols), and large (12 cols)
@@ -254,93 +300,93 @@
254
300
  - Sticky header and footer when content is scrollable
255
301
  - Optional navigation slot for moving between modal states
256
302
  - NoJS example with fallback to dedicated page
257
- - Full-width drawer on mobile devices
303
+ - Displays as a full-width bottom drawer on mobile.
258
304
 
259
- ### [Pagination](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-pagination--docs)
305
+ #### [Pagination](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-pagination--docs)
260
306
 
261
307
  - Mixins are baked into `uilib-pagination` mixin
262
308
 
263
- ### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
309
+ #### [Price](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-price--docs)
264
310
 
265
311
  - Mixins simplified so size options are baked into a single `uilib-price` mixin
266
312
  - Component styles are aligned with latest 1web designs for tui theme
267
313
  - xLarge variant has been removed
268
314
 
269
- ### [Promo tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-promo-tag--docs)
315
+ #### [Promo tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-promo-tag--docs)
270
316
 
271
317
  - Mixin names and classes updated to be prefixed with uilib
272
318
  - Background variant renamed to filled
273
319
  - Additional mixin for list of promo tags added
274
320
 
275
- ### Ratings and Reviews
321
+ #### Ratings and Reviews
276
322
 
277
- #### [Numerical](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs) (previously Review base variant)
323
+ ##### [Numerical](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs) (previously Review base variant)
278
324
 
279
325
  - Mixins simplified to single mixin controlling numerical rating/review styles `uilib-ratings-numerical`
280
- - Now single size option available with small and xsmall being removed
281
- - New variant added for providing alternative styling to use with musement ratings
326
+ - Reduced to a single size option; small and xsmall sizes removed.
327
+ - Added a new variant with alternative styling for Musement ratings.
282
328
 
283
- #### [Percentage](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
329
+ ##### [Percentage](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
284
330
 
285
331
  - New component that can be used for displaying HolidayCheck reviews
286
332
  - Provides two variants; default and compact
287
333
 
288
- #### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs) (previously Review range, and rangeBar variants)
334
+ ##### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs) (previously Review range, and rangeBar variants)
289
335
 
290
336
  - Mixins simplified to single mixin controlling range bar rating/review styles `uilib-ratings-range-bar`
291
- - Component now includes label (with icon for customer review variant)
337
+ - Now includes a label, with an icon for the customer review variant.
292
338
 
293
- #### [Range icons](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs) (previously Rating, and Review range variant)
339
+ ##### [Range icons](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs) (previously Rating, and Review range variant)
294
340
 
295
341
  - Mixins simplified to single mixin controlling range icon rating/review styles `uilib-ratings-range-icons`
296
- - Added tripadvisor variant
342
+ - Added Tripadvisor variant.
297
343
  - Group styling option included
298
344
 
299
- #### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
345
+ ##### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
300
346
 
301
- - New component to display lists of range icons for use with the likes of TripAdvisor
347
+ - New component for displaying grouped range icons, such as those used for TripAdvisor ratings.
302
348
 
303
- ### [Rich Text](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-rich-text--docs)
349
+ #### [Rich Text](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-rich-text--docs)
304
350
 
305
- - New component added that provides a wrapper that automatically styles basic html content such as headings, paragaphs, links, lists etc. This allows
306
- for simple and consistent styling of rich text content from CMS/APIs.
351
+ - New wrapper component that automatically styles basic HTML content (headings, paragraphs, links, lists, etc.) for consistent rendering of CMS/API
352
+ rich text.
307
353
 
308
- ### [Scroller](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-scroller--docs)
354
+ #### [Scroller](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-scroller--docs)
309
355
 
310
356
  - Mixins simplified so scrollbar and fade-out options are baked into a single `uilib-scroller` mixin
311
357
  - Fade is applied by default
312
358
  - Fade effect is applied via modern CSS techniques
313
- - Small web component provided to improve accessibility support
359
+ - Added a small web component to improve accessibility.
314
360
 
315
- ### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
361
+ #### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
316
362
 
317
- - New component added to hide and reveal content, in order to save space and support visual balance and hierarchy or information
318
- - Two variants available. Default displays the first paragraph of content hiding the rest, Text only truncates a block of content (for use with
319
- content such as customer reviews)
363
+ - New component for hiding and revealing content to save space and support visual hierarchy.
364
+ - Two variants available: Default shows the first paragraph and hides the rest; Text Only truncates a block of content (for use with customer reviews,
365
+ etc.).
320
366
 
321
- ### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
367
+ #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
322
368
 
323
369
  - Mixins simplified to single `uilib-skeleton` mixin with all variants and utilities baked in
324
- - Synchronized shimmer animation across all skeleton elements using CSS custom properties
370
+ - Synchronised shimmer animation across all skeleton elements using CSS custom properties
325
371
  - Multiple skeleton types available: heading, subheading, text, circle, card, and container
326
372
  - Width utilities from 10% to 100% in 10% increments, with responsive variants for xs breakpoint
327
373
  - Height utilities from 1rem to 20rem in 1rem increments
328
- - Layout helper classes for organizing skeleton elements with flexible gap and direction options
374
+ - Layout helper classes for organising skeleton elements with flexible gap and direction options
329
375
  - Outlined variant with border and transparent background
330
376
  - Spacer variant for creating transparent gaps without animation
331
377
  - Respects prefers-reduced-motion for accessibility
332
378
  - Pre-made templates for common use cases: search cards, browse cards, article cards, and headers
333
379
 
334
- ### Tabs ([Anchor](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-tabs-anchor--docs) and [In page](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-in-page-tabs--docs))
380
+ #### Tabs ([Anchor](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-tabs-anchor--docs) and [In page](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-in-page-tabs--docs))
335
381
 
336
- - Tab and tab list replaced by two Anchor tabs and In page tabs. Anchor tabs are for linking to content sections within the same page where as in page
337
- tabs switch between content sections without navigation or page reloads
382
+ - Tab and tab list replaced by two new components: Anchor tabs and In-page tabs. Anchor tabs link to content sections within the same page; In-page
383
+ tabs switch between content sections without navigation or page reloads.
338
384
  - Mixins simplified to one main mixin for each tab type (anchor and in page)
339
385
  - JavaScript controls tab behaviour, including accessibility requirements, with non-JavaScript fallback provided
340
386
 
341
- ### [Toolip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
387
+ #### [Tooltip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
342
388
 
343
389
  - Mixins simplified to one main `uilib-tooltip` mixin
344
390
  - Tooltip now opens on click or enter rather than hover
345
391
  - JavaScript controls tooltip positioning and ensures the tooltip is read by assistive technologies, with a non-JavaScript fallback provided
346
- - Hit target for icon variant increased improving accessibility for all user
392
+ - Increased the hit target for the icon variant, improving accessibility.
package/README.md CHANGED
@@ -59,7 +59,7 @@ components, how themes are generated, the original unprocessed stylesheets (post
59
59
  Your feedback is welcome. You may request changes and improvements by creating an Issue on the
60
60
  [UI Library (UILIB)](https://tui.atlassian.net/jira/software/c/projects/UILIB/boards/2275/backlog) project in Jira. If you have a general query about
61
61
  the Design System you are welcome to post in the
62
- [UI Library Support channel](https://teams.microsoft.com/l/channel/19%3A537d7e30d4284701a3b985a0763f7b2e%40thread.tacv2/Support%20UI%20Library?groupId=237c9a11-b89a-449e-8d69-416a09bd8f55&tenantId=e3e1f65b-b973-440d-b61c-bc895fc98e28)
62
+ [Design System Support channel](https://teams.microsoft.com/l/channel/19%3A2YJWcKc39k5Ve1VQK034fMAez4tGZb1mCGCAhXA0Il01%40thread.tacv2/General?groupId=40d60389-22ad-4003-8dc1-8658a5c871d8&tenantId=e3e1f65b-b973-440d-b61c-bc895fc98e28)
63
63
  on Teams.
64
64
 
65
65
  Please check the [contributing document](/docs/CONTRIBUTING.md) and the [guidelines](/docs/GUIDELINES.md) for contribution.
package/dist/themes/crystalski/index.css CHANGED
@@ -223,6 +223,11 @@
223
223
  --uilib-card-hover-elevation: var(--uilib-elevation-200);
224
224
  --uilib-card-default-bg-color: var(--uilib-color-canvas-default);
225
225
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
226
+ --uilib-card-article-radius: var(--uilib-border-radius-600);
227
+ --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/arrow-right.svg");
228
+ --uilib-card-icon-small-radius: var(--uilib-card-radius);
229
+ --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
230
+ --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/chevron-right.svg");
226
231
  --uilib-card-search-radius-spacing: var(--uilib-card-radius);
227
232
  --uilib-card-search-flagship-color: var(--uilib-color-core-brand-strong);
228
233
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -229,6 +229,11 @@
229
229
  --uilib-card-hover-elevation: var(--uilib-elevation-200);
230
230
  --uilib-card-default-bg-color: var(--uilib-color-canvas-default);
231
231
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
232
+ --uilib-card-article-radius: var(--uilib-border-radius-200);
233
+ --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/arrow-right.svg");
234
+ --uilib-card-icon-small-radius: var(--uilib-border-radius-200);
235
+ --uilib-card-icon-large-radius: var(--uilib-border-radius-200);
236
+ --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/chevron-right.svg");
232
237
  --uilib-card-search-radius-spacing: var(--uilib-spacing-200);
233
238
  --uilib-card-search-flagship-color: var(--uilib-color-core-brand-strong);
234
239
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -243,6 +243,11 @@
243
243
  --uilib-card-hover-elevation: var(--uilib-elevation-200);
244
244
  --uilib-card-default-bg-color: var(--uilib-color-canvas-default);
245
245
  --uilib-card-contrast-bg-color: var(--uilib-color-canvas-contrast);
246
+ --uilib-card-article-radius: var(--uilib-border-radius-600);
247
+ --uilib-card-article-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/arrow-right.svg");
248
+ --uilib-card-icon-small-radius: var(--uilib-card-radius);
249
+ --uilib-card-icon-large-radius: var(--uilib-border-radius-600);
250
+ --uilib-card-icon-link-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/chevron-right.svg");
246
251
  --uilib-card-search-radius-spacing: var(--uilib-card-radius);
247
252
  --uilib-card-search-flagship-color: var(--uilib-color-brand-tui-blue);
248
253
  --uilib-card-search-flagship-text-color: var(--uilib-color-text-inverse);