@tui/design-system 1.2.0 → 1.3.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 (34) hide show
  1. package/CHANGELOG.md +27 -2
  2. package/dist/themes/crystalski/index.css +4 -0
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +4 -0
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +4 -0
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +5 -5
  9. package/scss/lib/cards/selectable/_mixins.scss +2 -2
  10. package/scss/lib/forms/form-row/_mixins.scss +1 -0
  11. package/scss/lib/forms/input-checkbox/_mixins.scss +2 -0
  12. package/scss/lib/forms/input-chip/_mixins.scss +14 -10
  13. package/scss/lib/forms/input-count/_mixins.scss +2 -0
  14. package/scss/lib/forms/input-radio/_mixins.scss +2 -0
  15. package/scss/lib/forms/input-radio-scroll/_index.scss +3 -0
  16. package/scss/lib/forms/input-radio-scroll/_mixins.scss +185 -0
  17. package/scss/lib/forms/input-radio-scroll/_variables.scss +7 -0
  18. package/scss/lib/scroller/_mixins.scss +7 -6
  19. package/scss/lib/tabs/_mixins.scss +2 -2
  20. package/scss/lib/tabs/anchor/_mixins.scss +1 -1
  21. package/scss/lib/travel-aware-banner/_index.scss +3 -0
  22. package/scss/lib/travel-aware-banner/_mixins.scss +58 -0
  23. package/scss/lib/travel-aware-banner/_variables.scss +4 -0
  24. package/scss/lib/utility/_mixins.scss +1 -0
  25. package/scss/mixins.scss +2 -0
  26. package/scss/themes/crystalski/_overrides.scss +9 -0
  27. package/scss/themes/crystalski/index.scss +6 -0
  28. package/scss/themes/firstchoice/_overrides.scss +9 -0
  29. package/scss/themes/firstchoice/index.scss +6 -0
  30. package/scss/themes/tui/index.scss +6 -0
  31. package/scss/variables/_border-radius.scss +2 -0
  32. package/scss/variables/base-theme.json +32 -2
  33. package/scss/variables.scss +2 -0
  34. package/types/components.ts +460 -442
package/scss/lib/utility/_mixins.scss CHANGED
@@ -18,6 +18,7 @@
18
18
  // Visually hidden (accessible for screen readers but hidden visually)
19
19
  @mixin uilib-visually-hidden {
20
20
  position: absolute;
21
+ inset: 0;
21
22
 
22
23
  width: 1px;
23
24
  height: 1px;
package/scss/mixins.scss CHANGED
@@ -18,6 +18,7 @@
18
18
  @forward 'lib/forms/input-chip/mixins';
19
19
  @forward 'lib/forms/input-count/mixins';
20
20
  @forward 'lib/forms/input-radio/mixins';
21
+ @forward 'lib/forms/input-radio-scroll/mixins';
21
22
  @forward 'lib/forms/input-select/mixins';
22
23
  @forward 'lib/forms/input-slider/mixins';
23
24
  @forward 'lib/forms/input-switch/mixins';
@@ -47,5 +48,6 @@
47
48
  @forward 'lib/tabs/in-page/mixins';
48
49
  @forward 'lib/tabs/anchor/mixins';
49
50
  @forward 'lib/tooltip/mixins';
51
+ @forward 'lib/travel-aware-banner/mixins';
50
52
  @forward 'lib/typography/mixins';
51
53
  @forward 'lib/utility/mixins';
package/scss/themes/crystalski/_overrides.scss CHANGED
@@ -186,6 +186,15 @@ $uilib-crystalski-input-radio-variables: map.merge(
186
186
  )
187
187
  );
188
188
 
189
+ // Form input radio scroll
190
+ $uilib-crystalski-input-radio-scroll-variables: map.merge(
191
+ $uilib-input-radio-scroll-variables,
192
+ (
193
+ previous-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-left.svg'),
194
+ next-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
195
+ )
196
+ );
197
+
189
198
  // Form input select
190
199
  $uilib-crystalski-input-select-variables: map.merge(
191
200
  $uilib-input-select-variables,
package/scss/themes/crystalski/index.scss CHANGED
@@ -110,6 +110,9 @@
110
110
  // Form input radio
111
111
  @include util.uilib-build-css-vars('input-radio', $uilib-crystalski-input-radio-variables);
112
112
 
113
+ // Form input radio scroll
114
+ @include util.uilib-build-css-vars('input-radio-scroll', $uilib-crystalski-input-radio-scroll-variables);
115
+
113
116
  // Form input select
114
117
  @include util.uilib-build-css-vars('input-select', $uilib-crystalski-input-select-variables);
115
118
 
@@ -190,4 +193,7 @@
190
193
 
191
194
  // Tooltip
192
195
  @include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
196
+
197
+ // Travel Aware Banner
198
+ @include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
193
199
  }
package/scss/themes/firstchoice/_overrides.scss CHANGED
@@ -248,6 +248,15 @@ $uilib-firstchoice-input-checkbox-variables: map.merge(
248
248
  )
249
249
  );
250
250
 
251
+ // Form input radio scroll
252
+ $uilib-firstchoice-input-radio-scroll-variables: map.merge(
253
+ $uilib-input-radio-scroll-variables,
254
+ (
255
+ previous-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-left.svg'),
256
+ next-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
257
+ )
258
+ );
259
+
251
260
  // Form input select
252
261
  $uilib-firstchoice-input-select-variables: map.merge(
253
262
  $uilib-input-select-variables,
package/scss/themes/firstchoice/index.scss CHANGED
@@ -110,6 +110,9 @@
110
110
  // Form input radio
111
111
  @include util.uilib-build-css-vars('input-radio', $uilib-input-radio-variables);
112
112
 
113
+ // Form input radio scroll
114
+ @include util.uilib-build-css-vars('input-radio-scroll', $uilib-firstchoice-input-radio-scroll-variables);
115
+
113
116
  // Form input select
114
117
  @include util.uilib-build-css-vars('input-select', $uilib-firstchoice-input-select-variables);
115
118
 
@@ -190,4 +193,7 @@
190
193
 
191
194
  // Tooltip
192
195
  @include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
196
+
197
+ // Travel Aware Banner
198
+ @include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
193
199
  }
package/scss/themes/tui/index.scss CHANGED
@@ -110,6 +110,9 @@
110
110
  // Form input radio
111
111
  @include util.uilib-build-css-vars('input-radio', $uilib-input-radio-variables);
112
112
 
113
+ // Form input radio scroll
114
+ @include util.uilib-build-css-vars('input-radio-scroll', $uilib-input-radio-scroll-variables);
115
+
113
116
  // Form input select
114
117
  @include util.uilib-build-css-vars('input-select', $uilib-input-select-variables);
115
118
 
@@ -190,4 +193,7 @@
190
193
 
191
194
  // Tooltip
192
195
  @include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
196
+
197
+ // Travel Aware Banner
198
+ @include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
193
199
  }
package/scss/variables/_border-radius.scss CHANGED
@@ -5,6 +5,8 @@ $uilib-radius: (
5
5
  '100': 0.25rem,
6
6
  // 8px
7
7
  '200': 0.5rem,
8
+ // 12px
9
+ '300': 0.75rem,
8
10
  // 16px
9
11
  '400': 1rem,
10
12
  // 24px
package/scss/variables/base-theme.json CHANGED
@@ -291,15 +291,19 @@
291
291
  },
292
292
  "border-radius-100": {
293
293
  "title": "Border radius 100",
294
- "useWith": ["Alert", "Accordion", "Image counter", "Pagination"]
294
+ "useWith": ["Alert", "Accordion"]
295
295
  },
296
296
  "border-radius-200": {
297
297
  "title": "Border radius 200",
298
298
  "useWith": ["Card"]
299
299
  },
300
+ "border-radius-300": {
301
+ "title": "Border radius 300",
302
+ "useWith": ["Card"]
303
+ },
300
304
  "border-radius-400": {
301
305
  "title": "Border radius 400",
302
- "useWith": ["Eye catcher"]
306
+ "useWith": []
303
307
  },
304
308
  "border-radius-600": {
305
309
  "title": "Border radius 600",
@@ -1648,6 +1652,21 @@
1648
1652
  }
1649
1653
  }
1650
1654
  },
1655
+ "input-radio-scroll": {
1656
+ "displayType": "image",
1657
+ "tokens": {
1658
+ "input-radio-scroll-previous-icon": {
1659
+ "title": "Previous button icon",
1660
+ "description": "Previous button icon",
1661
+ "longValue": true
1662
+ },
1663
+ "input-radio-scroll-next-icon": {
1664
+ "title": "Next button icon",
1665
+ "description": "Next button icon",
1666
+ "longValue": true
1667
+ }
1668
+ }
1669
+ },
1651
1670
  "input-select": {
1652
1671
  "tokens": {
1653
1672
  "input-select-icon": {
@@ -2476,5 +2495,16 @@
2476
2495
  "description": "Tooltip overlay text colour"
2477
2496
  }
2478
2497
  }
2498
+ },
2499
+ "travel-aware-banner": {
2500
+ "displayType": "color",
2501
+ "tokens": {
2502
+ "travel-aware-banner-radius": {
2503
+ "displayType": "radius",
2504
+ "primitive": "uilib-border-radius-400",
2505
+ "title": "Travel Aware banner border radius",
2506
+ "description": "Travel Aware banner border radius"
2507
+ }
2508
+ }
2479
2509
  }
2480
2510
  }
package/scss/variables.scss CHANGED
@@ -36,6 +36,7 @@
36
36
  @forward 'lib/forms/input-chip/variables';
37
37
  @forward 'lib/forms/input-count/variables';
38
38
  @forward 'lib/forms/input-radio/variables';
39
+ @forward 'lib/forms/input-radio-scroll/variables';
39
40
  @forward 'lib/forms/input-select/variables';
40
41
  @forward 'lib/forms/input-stepper/variables';
41
42
  @forward 'lib/forms/input-slider/variables';
@@ -65,4 +66,5 @@
65
66
  @forward 'lib/tabs/in-page/variables';
66
67
  @forward 'lib/tabs/anchor/variables';
67
68
  @forward 'lib/tooltip/variables';
69
+ @forward 'lib/travel-aware-banner/variables';
68
70
  @forward 'lib/typography/variables';