@scania/tegel-lite 0.1.0 → 1.0.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 (68) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/scania/configurator.svg +1 -0
  23. package/dist/assets/icons/traton/edit_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/placeholder.svg +3 -0
  25. package/dist/assets/icons/traton/skip_backwards.svg +1 -0
  26. package/dist/assets/icons/traton/skip_forward.svg +1 -0
  27. package/dist/components.css +3993 -6847
  28. package/dist/global.css +627 -5641
  29. package/dist/scania-variables.css +661 -565
  30. package/dist/tl-accordion.css +88 -35
  31. package/dist/tl-banner.css +87 -12
  32. package/dist/tl-block.css +62 -7
  33. package/dist/tl-breadcrumbs.css +55 -6
  34. package/dist/tl-button.css +498 -87
  35. package/dist/tl-card.css +80 -54
  36. package/dist/tl-checkbox.css +195 -115
  37. package/dist/tl-datetime.css +7 -4
  38. package/dist/tl-divider.css +61 -3
  39. package/dist/tl-footer.css +116 -18
  40. package/dist/tl-icon.css +6 -2
  41. package/dist/tl-link.css +114 -16
  42. package/dist/tl-message.css +128 -14
  43. package/dist/tl-modal.css +165 -16
  44. package/dist/tl-radio-button.css +158 -96
  45. package/dist/tl-text-field.css +272 -140
  46. package/dist/tl-textarea.css +274 -76
  47. package/dist/tl-toast.css +119 -10
  48. package/dist/tl-toggle.css +150 -45
  49. package/dist/tl-tooltip.css +17 -15
  50. package/dist/traton-variables.css +682 -447
  51. package/package.json +6 -27
  52. package/dist/tl-badge.css +0 -44
  53. package/dist/tl-checkbox-vars.css +0 -38
  54. package/dist/tl-chip.css +0 -149
  55. package/dist/tl-dropdown.css +0 -857
  56. package/dist/tl-folder-tabs.css +0 -139
  57. package/dist/tl-header.css +0 -859
  58. package/dist/tl-inline-tabs.css +0 -173
  59. package/dist/tl-navigation-tabs.css +0 -171
  60. package/dist/tl-popover-canvas.css +0 -70
  61. package/dist/tl-popover-menu.css +0 -123
  62. package/dist/tl-side-menu.css +0 -540
  63. package/dist/tl-slider.css +0 -1854
  64. package/dist/tl-spinner.css +0 -78
  65. package/dist/tl-step.css +0 -213
  66. package/dist/tl-stepper.css +0 -57
  67. package/dist/tl-table.css +0 -827
  68. /package/dist/assets/icons/scania/{gift inactive.svg → gift_inactive.svg} +0 -0
package/dist/tl-divider.css CHANGED
@@ -1,7 +1,65 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+ :root,
5
+ .tds-mode-light,
6
+ .scania .tds-mode-light,
7
+ .scania.tds-mode-light,
8
+ .scania .tl-mode-light,
9
+ .scania.tl-mode-light {
10
+ --component-divider-border-discrete-default: var(--scania-color-grey-200);
11
+ --component-divider-border-subtle-default: var(--scania-color-grey-350);
12
+ --component-divider-border-soft-default: var(--scania-color-grey-500);
13
+ --component-divider-border-defined-default: var(--scania-color-grey-650);
14
+ --component-divider-border-strong-default: var(--color-border-strong);
15
+ --component-divider-border-expressive-default: var(--scania-color-blue-700);
16
+ }
17
+
18
+ .traton .tds-mode-light,
19
+ .traton.tds-mode-light,
20
+ .traton .tl-mode-light,
21
+ .traton.tl-mode-light {
22
+ --component-divider-border-discrete-default: var(--color-border-discrete);
23
+ --component-divider-border-subtle-default: var(--color-border-subtle);
24
+ --component-divider-border-soft-default: var(--color-border-soft);
25
+ --component-divider-border-defined-default: var(--color-border-defined);
26
+ --component-divider-border-strong-default: var(--color-border-strong);
27
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
28
+ }
29
+
30
+ .tds-mode-dark,
31
+ .scania .tds-mode-dark,
32
+ .scania.tds-mode-dark,
33
+ .scania .tl-mode-dark,
34
+ .scania.tl-mode-dark {
35
+ --component-divider-border-discrete-default: var(--color-border-discrete);
36
+ --component-divider-border-subtle-default: var(--color-border-subtle);
37
+ --component-divider-border-soft-default: var(--color-border-soft);
38
+ --component-divider-border-defined-default: var(--color-border-defined);
39
+ --component-divider-border-strong-default: var(--color-border-strong);
40
+ --component-divider-border-expressive-default: var(--scania-color-blue-800);
41
+ }
42
+
43
+ .traton .tds-mode-dark,
44
+ .traton.tds-mode-dark,
45
+ .traton .tl-mode-dark,
46
+ .traton.tl-mode-dark {
47
+ --component-divider-border-discrete-default: var(--color-border-discrete);
48
+ --component-divider-border-subtle-default: var(--color-border-subtle);
49
+ --component-divider-border-soft-default: var(--color-border-soft);
50
+ --component-divider-border-defined-default: var(--color-border-defined);
51
+ --component-divider-border-strong-default: var(--color-border-strong);
52
+ --component-divider-border-expressive-default: var(--component-divider-border-strong-default);
53
+ }
54
+
1
55
  .tl-divider {
2
- --divider-background: var(--color-foreground-border-discrete);
3
- --divider-background-strong: var(--color-foreground-border-strong);
4
- --divider-background-discrete: var(--color-foreground-border-discrete);
56
+ --divider-background: var(--component-divider-border-discrete-default);
57
+ --divider-background-discrete: var(--component-divider-border-discrete-default);
58
+ --divider-background-subtle: var(--component-divider-border-subtle-default);
59
+ --divider-background-soft: var(--component-divider-border-soft-default);
60
+ --divider-background-defined: var(--component-divider-border-defined-default);
61
+ --divider-background-strong: var(--component-divider-border-strong-default);
62
+ --divider-background-expressive: var(--component-divider-border-expressive-default);
5
63
  }
6
64
 
7
65
  .tl-divider {
package/dist/tl-footer.css CHANGED
@@ -1,17 +1,95 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-footer-border-divider-default: var(--scania-color-blue-700);
12
+ --component-footer-background-main-default: var(--scania-color-blue-800);
13
+ --component-footer-background-top-default: var(--color-background-layer-01);
14
+ --component-footer-background-top-secondary: var(--color-background-base);
15
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
16
+ --component-footer-background-list-item-active: var(--scania-color-grey-150);
17
+ --component-footer-text-copyright-default: var(--color-text-inverse-soft);
18
+ --component-footer-text-link-default: var(--color-text-strong);
19
+ --component-footer-text-title-default: var(--color-text-strong);
20
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
21
+ --component-footer-icon-link-default: var(--color-icon-strong);
22
+ --component-footer-icon-social-default: var(--color-icon-inverse-strong);
23
+ }
24
+
25
+ .traton .tds-mode-light,
26
+ .traton.tds-mode-light,
27
+ .traton .tl-mode-light,
28
+ .traton.tl-mode-light {
29
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
30
+ --component-footer-background-main-default: var(--traton-color-grey-50);
31
+ --component-footer-background-top-default: var(--color-background-layer-01);
32
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
33
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
34
+ --component-footer-background-list-item-active: var(--traton-color-grey-300);
35
+ --component-footer-text-copyright-default: var(--color-text-soft);
36
+ --component-footer-text-link-default: var(--color-text-strong);
37
+ --component-footer-text-title-default: var(--color-text-strong);
38
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
39
+ --component-footer-icon-link-default: var(--color-icon-strong);
40
+ --component-footer-icon-social-default: var(--color-icon-strong);
41
+ }
42
+
43
+ .tds-mode-dark,
44
+ .scania .tds-mode-dark,
45
+ .scania.tds-mode-dark,
46
+ .scania .tl-mode-dark,
47
+ .scania.tl-mode-dark {
48
+ --component-footer-border-divider-default: var(--scania-color-blue-800);
49
+ --component-footer-background-main-default: var(--scania-color-blue-900);
50
+ --component-footer-background-top-default: var(--color-background-layer-01);
51
+ --component-footer-background-top-secondary: var(--color-background-layer-02);
52
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
53
+ --component-footer-background-list-item-active: var(--scania-color-grey-800);
54
+ --component-footer-text-copyright-default: var(--color-text-soft);
55
+ --component-footer-text-link-default: var(--color-text-strong);
56
+ --component-footer-text-title-default: var(--color-text-strong);
57
+ --component-footer-text-inverse-link-default: var(--scania-color-base-white);
58
+ --component-footer-icon-link-default: var(--color-icon-strong);
59
+ --component-footer-icon-social-default: var(--color-icon-strong);
60
+ }
61
+
62
+ .traton .tds-mode-dark,
63
+ .traton.tds-mode-dark,
64
+ .traton .tl-mode-dark,
65
+ .traton.tl-mode-dark {
66
+ --component-footer-border-divider-default: var(--traton-color-transparent-invisible-light);
67
+ --component-footer-background-main-default: var(--traton-color-blue-1000);
68
+ --component-footer-background-top-default: var(--color-background-layer-01);
69
+ --component-footer-background-top-secondary: var(--color-background-layer-01);
70
+ --component-footer-background-list-item-default: var(--component-footer-background-top-default);
71
+ --component-footer-background-list-item-active: var(--traton-color-blue-800);
72
+ --component-footer-text-copyright-default: var(--color-text-soft);
73
+ --component-footer-text-link-default: var(--color-text-strong);
74
+ --component-footer-text-title-default: var(--color-text-strong);
75
+ --component-footer-text-inverse-link-default: var(--component-footer-text-link-default);
76
+ --component-footer-icon-link-default: var(--color-icon-strong);
77
+ --component-footer-icon-social-default: var(--color-icon-strong);
78
+ }
79
+
2
80
  .tl-footer {
3
- --footer-top-background-primary: var(--color-background-layer-01);
4
- --footer-top-background-secondary: var(--color-background-base);
5
- --footer-top-background: var(--color-background-layer-01);
6
- --footer-top-divider: var(--color-foreground-border-discrete);
7
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
8
- --footer-top-links: var(--component-footer-text-color-link-text);
9
- --footer-top-links-background-hover: var(--color-background-surface-300);
10
- --footer-top-button-active: var(--color-background-surface-300);
11
- --footer-main-background: var(--component-footer-primary);
12
- --footer-main-links: var(--color-foreground-text-accent-brand);
13
- --footer-main-divider: var(--component-footer-border);
14
- --footer-main-copyright: var(--component-footer-text-color-copyright);
81
+ --footer-top-background-primary: var(--component-footer-background-top-default);
82
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
83
+ --footer-top-background: var(--component-footer-background-top-default);
84
+ --footer-top-divider: var(--color-border-discrete);
85
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
86
+ --footer-top-links: var(--component-footer-text-link-default);
87
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
88
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
89
+ --footer-main-background: var(--component-footer-background-main-default);
90
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
91
+ --footer-main-divider: var(--component-footer-border-divider-default);
92
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
15
93
  }
16
94
  .tl-footer.tl-footer--primary {
17
95
  --footer-top-background: var(--footer-top-background-primary);
@@ -20,6 +98,26 @@
20
98
  --footer-top-background: var(--footer-top-background-secondary);
21
99
  }
22
100
 
101
+ .scania .tl-footer {
102
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
103
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
104
+ }
105
+
106
+ .traton .tl-mode-dark .tl-footer {
107
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
108
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
109
+ }
110
+
111
+ .traton .tl-mode-light .tl-footer {
112
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
113
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
114
+ }
115
+
116
+ .traton .tl-footer {
117
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
118
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
119
+ }
120
+
23
121
  .tl-footer__group {
24
122
  display: block;
25
123
  }
@@ -61,8 +159,8 @@
61
159
  text-decoration: underline;
62
160
  }
63
161
  .tl-footer__link:focus-visible {
64
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
65
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
162
+ outline: 2px solid var(--component--focus-ring-color-strong);
163
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
66
164
  outline-offset: 1px;
67
165
  z-index: 1;
68
166
  }
@@ -121,8 +219,8 @@
121
219
  background-color: var(--footer-top-button-active);
122
220
  }
123
221
  .tl-footer__top-title:focus-visible {
124
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
125
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
222
+ outline: 2px solid var(--component--focus-ring-color-strong);
223
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
126
224
  outline-offset: -2px;
127
225
  z-index: 1;
128
226
  }
@@ -142,8 +240,8 @@
142
240
  text-decoration: none;
143
241
  }
144
242
  .tl-footer__main .tl-footer__link:focus-visible {
145
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
146
- box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
243
+ outline: 2px solid var(--component--focus-ring-color-strong);
244
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
147
245
  outline-offset: 1px;
148
246
  z-index: 1;
149
247
  }
package/dist/tl-icon.css CHANGED
@@ -284,6 +284,10 @@
284
284
  mask-image: var(--icon-document_tool-svg);
285
285
  background-color: currentcolor;
286
286
  }
287
+ .tl-icon--document_word {
288
+ mask-image: var(--icon-document_word-svg);
289
+ background-color: currentcolor;
290
+ }
287
291
  .tl-icon--document_wrong {
288
292
  mask-image: var(--icon-document_wrong-svg);
289
293
  background-color: currentcolor;
@@ -460,8 +464,8 @@
460
464
  mask-image: var(--icon-gift-svg);
461
465
  background-color: currentcolor;
462
466
  }
463
- .tl-icon--gift inactive {
464
- mask-image: var(--icon-gift inactive-svg);
467
+ .tl-icon--gift_inactive {
468
+ mask-image: var(--icon-gift_inactive-svg);
465
469
  background-color: currentcolor;
466
470
  }
467
471
  .tl-icon--global {
package/dist/tl-link.css CHANGED
@@ -1,25 +1,126 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-link-icon-accent-default: var(--scania-color-blue-400);
12
+ --component-link-icon-accent-hover: var(--scania-color-blue-400);
13
+ --component-link-icon-accent-active: var(--scania-color-blue-600);
14
+ --component-link-icon-accent-visited: var(--scania-color-blue-600);
15
+ --component-link-icon-standard-default: var(--color-text-strong);
16
+ --component-link-icon-standard-hover: var(--color-text-defined);
17
+ --component-link-icon-standard-active: var(--color-text-soft);
18
+ --component-link-icon-standard-visited: var(--color-text-strong);
19
+ --component-link-opacity-disabled: var(--scania-opacity-25);
20
+ --component-link-text-accent-default: var(--scania-color-blue-400);
21
+ --component-link-text-accent-hover: var(--scania-color-blue-400);
22
+ --component-link-text-accent-active: var(--scania-color-blue-600);
23
+ --component-link-text-accent-visited: var(--scania-color-blue-600);
24
+ --component-link-text-standard-default: var(--color-text-strong);
25
+ --component-link-text-standard-hover: var(--color-text-defined);
26
+ --component-link-text-standard-active: var(--color-text-soft);
27
+ --component-link-text-standard-visited: var(--color-text-strong);
28
+ }
29
+
30
+ .traton .tds-mode-light,
31
+ .traton.tds-mode-light,
32
+ .traton .tl-mode-light,
33
+ .traton.tl-mode-light {
34
+ --component-link-icon-accent-default: var(--traton-color-blue-700);
35
+ --component-link-icon-accent-hover: var(--traton-color-blue-700);
36
+ --component-link-icon-accent-active: var(--traton-color-blue-950);
37
+ --component-link-icon-accent-visited: var(--traton-color-blue-950);
38
+ --component-link-icon-standard-default: var(--color-text-strong);
39
+ --component-link-icon-standard-hover: var(--color-text-defined);
40
+ --component-link-icon-standard-active: var(--color-text-soft);
41
+ --component-link-icon-standard-visited: var(--color-text-strong);
42
+ --component-link-opacity-disabled: var(--traton-opacity-25);
43
+ --component-link-text-accent-default: var(--traton-color-blue-700);
44
+ --component-link-text-accent-hover: var(--traton-color-blue-700);
45
+ --component-link-text-accent-active: var(--traton-color-blue-950);
46
+ --component-link-text-accent-visited: var(--traton-color-blue-950);
47
+ --component-link-text-standard-default: var(--color-text-strong);
48
+ --component-link-text-standard-hover: var(--color-text-defined);
49
+ --component-link-text-standard-active: var(--color-text-soft);
50
+ --component-link-text-standard-visited: var(--color-text-strong);
51
+ }
52
+
53
+ .tds-mode-dark,
54
+ .scania .tds-mode-dark,
55
+ .scania.tds-mode-dark,
56
+ .scania .tl-mode-dark,
57
+ .scania.tl-mode-dark {
58
+ --component-link-icon-accent-default: var(--scania-color-blue-300);
59
+ --component-link-icon-accent-hover: var(--scania-color-blue-300);
60
+ --component-link-icon-accent-active: var(--scania-color-blue-100);
61
+ --component-link-icon-accent-visited: var(--scania-color-blue-100);
62
+ --component-link-icon-standard-default: var(--color-text-strong);
63
+ --component-link-icon-standard-hover: var(--color-text-defined);
64
+ --component-link-icon-standard-active: var(--color-text-soft);
65
+ --component-link-icon-standard-visited: var(--color-text-strong);
66
+ --component-link-opacity-disabled: var(--scania-opacity-25);
67
+ --component-link-text-accent-default: var(--scania-color-blue-300);
68
+ --component-link-text-accent-hover: var(--scania-color-blue-300);
69
+ --component-link-text-accent-active: var(--scania-color-blue-100);
70
+ --component-link-text-accent-visited: var(--scania-color-blue-100);
71
+ --component-link-text-standard-default: var(--color-text-strong);
72
+ --component-link-text-standard-hover: var(--color-text-defined);
73
+ --component-link-text-standard-active: var(--color-text-soft);
74
+ --component-link-text-standard-visited: var(--color-text-strong);
75
+ }
76
+
77
+ .traton .tds-mode-dark,
78
+ .traton.tds-mode-dark,
79
+ .traton .tl-mode-dark,
80
+ .traton.tl-mode-dark {
81
+ --component-link-icon-accent-default: var(--traton-color-blue-400);
82
+ --component-link-icon-accent-hover: var(--traton-color-blue-400);
83
+ --component-link-icon-accent-active: var(--traton-color-blue-150);
84
+ --component-link-icon-accent-visited: var(--traton-color-blue-150);
85
+ --component-link-icon-standard-default: var(--color-text-strong);
86
+ --component-link-icon-standard-hover: var(--color-text-defined);
87
+ --component-link-icon-standard-active: var(--color-text-soft);
88
+ --component-link-icon-standard-visited: var(--color-text-strong);
89
+ --component-link-opacity-disabled: var(--traton-opacity-25);
90
+ --component-link-text-accent-default: var(--traton-color-blue-400);
91
+ --component-link-text-accent-hover: var(--traton-color-blue-400);
92
+ --component-link-text-accent-active: var(--traton-color-blue-150);
93
+ --component-link-text-accent-visited: var(--traton-color-blue-150);
94
+ --component-link-text-standard-default: var(--color-text-strong);
95
+ --component-link-text-standard-hover: var(--color-text-defined);
96
+ --component-link-text-standard-active: var(--color-text-soft);
97
+ --component-link-text-standard-visited: var(--color-text-strong);
98
+ }
99
+
2
100
  /* Component variables */
3
101
  .tl-link {
4
- --link: var(--color-foreground-text-accent-default);
5
- --link-hover: var(--color-foreground-text-accent-default);
102
+ --link: var(--component-link-text-accent-default);
103
+ --link-hover: var(--component-link-text-accent-hover);
6
104
  --link-focus-outline-width: 2px;
7
- --link-visited: var(--color-foreground-text-accent-visited);
8
- --link-disabled: var(--color-foreground-text-disabled);
9
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
105
+ --link-visited: var(--component-link-text-accent-visited);
106
+ --link-opacity-disabled: calc(var(--component-link-opacity-disabled) / 100);
107
+ --link-focus-outline-color: var(--color-system-info-default);
10
108
  }
11
109
 
12
110
  .tl-banner .tl-link {
13
- --link: var(--color-system-info-default);
111
+ --link: var(--color-text-strong);
112
+ --link-hover: var(--color-text-strong);
113
+ --link-visited: var(--color-text-strong);
14
114
  }
15
115
 
16
116
  .tl-toast .tl-link {
17
- --link: var(--color-system-info-default);
18
- --link-hover: var(--color-foreground-text-accent-default);
117
+ --link: var(--color-text-inverse-strong);
118
+ --link-hover: var(--color-text-inverse-strong);
119
+ --link-visited: var(--color-text-inverse-strong);
19
120
  }
20
121
 
21
122
  .traton .tl-link {
22
- --link-focus-outline-width: 4px;
123
+ --link-focus-outline-width: 2px;
23
124
  }
24
125
 
25
126
  .tl-link-text {
@@ -44,8 +145,10 @@
44
145
  font: inherit;
45
146
  }
46
147
  .tl-link:focus-visible {
47
- outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
148
+ outline: 2px solid var(--component--focus-ring-color-strong);
149
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
48
150
  outline-offset: 1px;
151
+ z-index: 1;
49
152
  text-decoration: none;
50
153
  }
51
154
  .tl-link:active {
@@ -60,15 +163,10 @@
60
163
  text-decoration-color: var(--link-visited);
61
164
  }
62
165
  .tl-link--disabled {
63
- color: var(--link-disabled);
64
- text-decoration-color: var(--link-disabled);
166
+ opacity: var(--link-opacity-disabled);
65
167
  pointer-events: none;
66
168
  cursor: not-allowed;
67
169
  }
68
- .tl-link--disabled:visited {
69
- color: var(--link-disabled);
70
- text-decoration-color: var(--link-disabled);
71
- }
72
170
  .tl-link--underline {
73
171
  text-decoration: underline;
74
172
  }
package/dist/tl-message.css CHANGED
@@ -1,23 +1,137 @@
1
1
  /* Typography Usage mixins */
2
+ /**
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+ :root,
6
+ .tds-mode-light,
7
+ .scania .tds-mode-light,
8
+ .scania.tds-mode-light,
9
+ .scania .tl-mode-light,
10
+ .scania.tl-mode-light {
11
+ --component-message-background-primary: var(--color-background-layer-01);
12
+ --component-message-background-secondary: var(--color-background-layer-02);
13
+ --component-message-background-information-default: var(--color-background-layer-01);
14
+ --component-message-background-success-default: var(--color-background-layer-01);
15
+ --component-message-background-warning-default: var(--color-background-layer-01);
16
+ --component-message-background-error-default: var(--color-system-danger-discrete);
17
+ --component-message-text-information-default: var(--color-text-strong);
18
+ --component-message-text-success-default: var(--color-text-strong);
19
+ --component-message-text-warning-default: var(--color-text-strong);
20
+ --component-message-text-error-default: var(--color-text-strong);
21
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
22
+ --component-message-border-information-default: var(--color-system-info-default);
23
+ --component-message-border-success-default: var(--color-system-success-default);
24
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
25
+ --component-message-border-error-default: var(--color-system-danger-default);
26
+ --component-message-border-radius-default: var(--scania-unit-4);
27
+ --component-message-border-width-default: var(--scania-unit-4);
28
+ --component-message-icon-information-default: var(--color-system-info-default);
29
+ --component-message-icon-success-default: var(--color-system-success-default);
30
+ --component-message-icon-warning-default: var(--color-system-warning-default);
31
+ --component-message-icon-error-default: var(--color-system-danger-default);
32
+ }
33
+
34
+ .traton .tds-mode-light,
35
+ .traton.tds-mode-light,
36
+ .traton .tl-mode-light,
37
+ .traton.tl-mode-light {
38
+ --component-message-background-primary: var(--color-background-layer-01);
39
+ --component-message-background-secondary: var(--color-background-layer-02);
40
+ --component-message-background-information-default: var(--color-background-layer-01);
41
+ --component-message-background-success-default: var(--color-background-layer-01);
42
+ --component-message-background-warning-default: var(--color-background-layer-01);
43
+ --component-message-background-error-default: var(--color-system-danger-discrete);
44
+ --component-message-text-information-default: var(--color-text-strong);
45
+ --component-message-text-success-default: var(--color-text-strong);
46
+ --component-message-text-warning-default: var(--color-text-strong);
47
+ --component-message-text-error-default: var(--color-text-strong);
48
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
49
+ --component-message-border-information-default: var(--color-system-info-subtle);
50
+ --component-message-border-success-default: var(--color-system-success-subtle);
51
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
52
+ --component-message-border-error-default: var(--color-system-danger-subtle);
53
+ --component-message-border-radius-default: var(--traton-unit-4);
54
+ --component-message-border-width-default: var(--traton-unit-4);
55
+ --component-message-icon-information-default: var(--color-system-info-default);
56
+ --component-message-icon-success-default: var(--color-system-success-default);
57
+ --component-message-icon-warning-default: var(--color-system-warning-defined);
58
+ --component-message-icon-error-default: var(--color-system-danger-default);
59
+ }
60
+
61
+ .tds-mode-dark,
62
+ .scania .tds-mode-dark,
63
+ .scania.tds-mode-dark,
64
+ .scania .tl-mode-dark,
65
+ .scania.tl-mode-dark {
66
+ --component-message-background-primary: var(--color-background-layer-01);
67
+ --component-message-background-secondary: var(--color-background-layer-02);
68
+ --component-message-background-information-default: var(--color-background-layer-01);
69
+ --component-message-background-success-default: var(--color-background-layer-01);
70
+ --component-message-background-warning-default: var(--color-background-layer-01);
71
+ --component-message-background-error-default: var(--color-system-danger-discrete);
72
+ --component-message-text-information-default: var(--color-text-strong);
73
+ --component-message-text-success-default: var(--color-text-strong);
74
+ --component-message-text-warning-default: var(--color-text-strong);
75
+ --component-message-text-error-default: var(--color-text-strong);
76
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
77
+ --component-message-border-information-default: var(--color-system-info-default);
78
+ --component-message-border-success-default: var(--color-system-success-subtle);
79
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
80
+ --component-message-border-error-default: var(--color-system-danger-subtle);
81
+ --component-message-border-radius-default: var(--scania-unit-4);
82
+ --component-message-border-width-default: var(--scania-unit-4);
83
+ --component-message-icon-information-default: var(--color-system-info-default);
84
+ --component-message-icon-success-default: var(--color-system-success-subtle);
85
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
86
+ --component-message-icon-error-default: var(--color-system-danger-default);
87
+ }
88
+
89
+ .traton .tds-mode-dark,
90
+ .traton.tds-mode-dark,
91
+ .traton .tl-mode-dark,
92
+ .traton.tl-mode-dark {
93
+ --component-message-background-primary: var(--color-background-layer-01);
94
+ --component-message-background-secondary: var(--color-background-layer-02);
95
+ --component-message-background-information-default: var(--color-background-layer-01);
96
+ --component-message-background-success-default: var(--color-background-layer-01);
97
+ --component-message-background-warning-default: var(--color-background-layer-01);
98
+ --component-message-background-error-default: var(--color-system-danger-discrete);
99
+ --component-message-text-information-default: var(--color-text-strong);
100
+ --component-message-text-success-default: var(--color-text-strong);
101
+ --component-message-text-warning-default: var(--color-text-strong);
102
+ --component-message-text-error-default: var(--color-text-strong);
103
+ --component-message-text-error-highlight-default: var(--color-system-danger-default);
104
+ --component-message-border-information-default: var(--color-system-info-subtle);
105
+ --component-message-border-success-default: var(--color-system-success-subtle);
106
+ --component-message-border-warning-default: var(--color-system-warning-subtle);
107
+ --component-message-border-error-default: var(--color-system-danger-subtle);
108
+ --component-message-border-radius-default: var(--traton-unit-4);
109
+ --component-message-border-width-default: var(--traton-unit-4);
110
+ --component-message-icon-information-default: var(--color-system-info-default);
111
+ --component-message-icon-success-default: var(--color-system-success-default);
112
+ --component-message-icon-warning-default: var(--color-system-warning-subtle);
113
+ --component-message-icon-error-default: var(--color-system-danger-default);
114
+ }
115
+
2
116
  .tl-message {
3
- --message-main-background: var(--color-background-layer-01);
4
- --message-mode-primary-background: var(--color-background-layer-01);
5
- --message-mode-secondary-background: var(--color-background-layer-02);
6
- --message-main-text-color: var(--color-foreground-text-strong);
117
+ --message-main-background: var(--component-message-background-primary);
118
+ --message-mode-primary-background: var(--component-message-background-primary);
119
+ --message-mode-secondary-background: var(--component-message-background-secondary);
120
+ --message-main-text-color: var(--color-text-strong);
7
121
  /* Info */
8
- --message-info-border-color: var(--color-system-info-subtle);
9
- --message-info-icon-color: var(--color-system-info-default);
122
+ --message-info-border-color: var(--component-message-border-information-default);
123
+ --message-info-icon-color: var(--component-message-icon-information-default);
10
124
  /* Success */
11
- --message-success-border-color: var(--color-system-success-subtle);
12
- --message-success-icon-color: var(--color-system-success-default);
125
+ --message-success-border-color: var(--component-message-border-success-default);
126
+ --message-success-icon-color: var(--component-message-icon-success-default);
13
127
  /* Error */
14
- --message-error-background: var(--color-system-danger-discrete);
15
- --message-error-border-color: var(--color-system-danger-subtle);
16
- --message-error-icon-color: var(--color-system-danger-default);
17
- --message-error-header-text-color: var(--color-system-danger-default);
128
+ --message-error-background: var(--component-message-background-error-default);
129
+ --message-error-border-color: var(--component-message-border-error-default);
130
+ --message-error-icon-color: var(--component-message-icon-error-default);
131
+ --message-error-header-text-color: var(--component-message-text-error-highlight-default);
18
132
  /* Warning */
19
- --message-warning-border-color: var(--color-system-warning-subtle);
20
- --message-warning-icon-color: var(--color-system-warning-default);
133
+ --message-warning-border-color: var(--component-message-border-warning-default);
134
+ --message-warning-icon-color: var(--component-message-icon-warning-default);
21
135
  }
22
136
 
23
137
  .tl-message--primary {