@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-focus-ring-beta.1

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 (46) hide show
  1. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  2. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  20. package/dist/assets/icons/traton/placeholder.svg +3 -0
  21. package/dist/components.css +620 -299
  22. package/dist/global.css +66 -0
  23. package/dist/scania-variables.css +185 -136
  24. package/dist/tl-accordion.css +5 -3
  25. package/dist/tl-banner.css +2 -2
  26. package/dist/tl-breadcrumbs.css +55 -6
  27. package/dist/tl-button.css +180 -156
  28. package/dist/tl-card.css +24 -11
  29. package/dist/tl-chip.css +14 -12
  30. package/dist/tl-divider.css +61 -3
  31. package/dist/tl-dropdown.css +9 -6
  32. package/dist/tl-folder-tabs.css +5 -4
  33. package/dist/tl-footer.css +86 -34
  34. package/dist/tl-header.css +16 -10
  35. package/dist/tl-inline-tabs.css +5 -2
  36. package/dist/tl-link.css +109 -14
  37. package/dist/tl-modal.css +2 -2
  38. package/dist/tl-navigation-tabs.css +5 -2
  39. package/dist/tl-side-menu.css +10 -6
  40. package/dist/tl-slider.css +180 -156
  41. package/dist/tl-table.css +11 -7
  42. package/dist/tl-toast.css +2 -2
  43. package/dist/tl-toggle.css +2 -2
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +35 -23
  46. package/package.json +1 -1
package/dist/tl-link.css CHANGED
@@ -1,12 +1,110 @@
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 {
@@ -15,11 +113,11 @@
15
113
 
16
114
  .tl-toast .tl-link {
17
115
  --link: var(--color-system-info-default);
18
- --link-hover: var(--color-foreground-text-accent-default);
116
+ --link-hover: var(--color-system-info-default);
19
117
  }
20
118
 
21
119
  .traton .tl-link {
22
- --link-focus-outline-width: 4px;
120
+ --link-focus-outline-width: 2px;
23
121
  }
24
122
 
25
123
  .tl-link-text {
@@ -44,8 +142,10 @@
44
142
  font: inherit;
45
143
  }
46
144
  .tl-link:focus-visible {
47
- outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
145
+ outline: 2px solid var(--component--focus-ring-color-strong);
146
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
48
147
  outline-offset: 1px;
148
+ z-index: 1;
49
149
  text-decoration: none;
50
150
  }
51
151
  .tl-link:active {
@@ -60,15 +160,10 @@
60
160
  text-decoration-color: var(--link-visited);
61
161
  }
62
162
  .tl-link--disabled {
63
- color: var(--link-disabled);
64
- text-decoration-color: var(--link-disabled);
163
+ opacity: var(--link-opacity-disabled);
65
164
  pointer-events: none;
66
165
  cursor: not-allowed;
67
166
  }
68
- .tl-link--disabled:visited {
69
- color: var(--link-disabled);
70
- text-decoration-color: var(--link-disabled);
71
- }
72
167
  .tl-link--underline {
73
168
  text-decoration: underline;
74
169
  }
package/dist/tl-modal.css CHANGED
@@ -300,8 +300,8 @@ body {
300
300
  cursor: pointer;
301
301
  }
302
302
  .tl-modal__close:focus {
303
- outline: 2px solid var(--tds-focus-outline-color);
304
- box-shadow: 0 0 0 1px var(--tds-white);
303
+ outline: 2px solid var(--component--focus-ring-color-strong);
304
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
305
305
  outline-offset: 1px;
306
306
  z-index: 1;
307
307
  }
package/dist/tl-navigation-tabs.css CHANGED
@@ -62,12 +62,14 @@
62
62
  outline: none;
63
63
  }
64
64
  .tl-navigation-tabs__tab:focus-visible::before {
65
+ outline: 2px solid var(--component--focus-ring-color-strong);
66
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
67
+ outline-offset: 1px;
68
+ z-index: 1;
65
69
  content: "";
66
70
  position: absolute;
67
71
  inset: 18px 0;
68
72
  border-radius: 2px;
69
- box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
70
- z-index: 2;
71
73
  pointer-events: none;
72
74
  }
73
75
  .tl-navigation-tabs__tab::after {
@@ -110,6 +112,7 @@
110
112
  content: none;
111
113
  }
112
114
  .tl-navigation-tabs__tab--disabled:focus-visible::before {
115
+ outline: none;
113
116
  box-shadow: none;
114
117
  }
115
118
 
package/dist/tl-side-menu.css CHANGED
@@ -45,7 +45,7 @@ body {
45
45
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
46
46
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
47
47
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
48
- --component-side-menu-radius-default: var(--scania-unit-0);
48
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
49
49
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
50
50
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
51
51
  --component-side-menu-text-items-font-size: 14;
@@ -86,7 +86,7 @@ body {
86
86
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
87
87
  --traton-unit-12
88
88
  );
89
- --component-side-menu-radius-default: var(--traton-unit-8);
89
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
90
90
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
91
91
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
92
92
  --component-side-menu-text-items-font-size: 14;
@@ -123,7 +123,7 @@ body {
123
123
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
124
124
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
125
125
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
126
- --component-side-menu-radius-default: var(--scania-unit-0);
126
+ --component-side-menu-radius-radius-default: var(--scania-unit-0);
127
127
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
128
128
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
129
129
  --component-side-menu-text-items-font-size: 14;
@@ -164,7 +164,7 @@ body {
164
164
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
165
165
  --traton-unit-12
166
166
  );
167
- --component-side-menu-radius-default: var(--traton-unit-8);
167
+ --component-side-menu-radius-radius-default: var(--traton-unit-8);
168
168
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
169
169
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
170
170
  --component-side-menu-text-items-font-size: 14;
@@ -273,8 +273,10 @@ body {
273
273
  letter-spacing: var(--side-menu-text-item-letter-spacing);
274
274
  }
275
275
  .tl-side-menu__item:focus-visible {
276
- outline: 2px solid var(--color-foreground-border-accent-focus);
276
+ outline: 2px solid var(--component--focus-ring-color-strong);
277
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
277
278
  outline-offset: -2px;
279
+ z-index: 1;
278
280
  }
279
281
  .tl-side-menu__item:hover {
280
282
  background-color: var(--side-menu-item-state-hover);
@@ -387,8 +389,10 @@ body {
387
389
  background-color: var(--side-menu-dropdown-list-item-custom-background-active);
388
390
  }
389
391
  .tl-side-menu__dropdown-item:focus {
390
- outline: 2px solid var(--color-foreground-border-accent-focus);
392
+ outline: 2px solid var(--component--focus-ring-color-strong);
393
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
391
394
  outline-offset: -2px;
395
+ z-index: 1;
392
396
  }
393
397
  .tl-side-menu__dropdown-item--selected {
394
398
  background-color: var(--side-menu-dropdown-list-item-custom-background-selected);