@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-dropdown-vars-beta.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 (153) 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/traton/back.svg +1 -0
  23. package/dist/assets/icons/traton/calendar_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/card.svg +1 -0
  25. package/dist/assets/icons/traton/cart.svg +1 -0
  26. package/dist/assets/icons/traton/clock.svg +1 -0
  27. package/dist/assets/icons/traton/clock_inactive.svg +1 -0
  28. package/dist/assets/icons/traton/contact.svg +1 -0
  29. package/dist/assets/icons/traton/contact_inactive.svg +1 -0
  30. package/dist/assets/icons/traton/copy.svg +1 -0
  31. package/dist/assets/icons/traton/document.svg +1 -0
  32. package/dist/assets/icons/traton/document_check.svg +1 -0
  33. package/dist/assets/icons/traton/document_doc.svg +1 -0
  34. package/dist/assets/icons/traton/document_eye.svg +1 -0
  35. package/dist/assets/icons/traton/document_pdf.svg +1 -0
  36. package/dist/assets/icons/traton/document_tool.svg +1 -0
  37. package/dist/assets/icons/traton/document_word.svg +1 -0
  38. package/dist/assets/icons/traton/document_wrong.svg +1 -0
  39. package/dist/assets/icons/traton/document_xls.svg +1 -0
  40. package/dist/assets/icons/traton/dollar.svg +1 -0
  41. package/dist/assets/icons/traton/doner.svg +1 -0
  42. package/dist/assets/icons/traton/double_kebab.svg +1 -0
  43. package/dist/assets/icons/traton/download.svg +1 -0
  44. package/dist/assets/icons/traton/edit_inactive.svg +1 -1
  45. package/dist/assets/icons/traton/email.svg +1 -0
  46. package/dist/assets/icons/traton/export.svg +1 -0
  47. package/dist/assets/icons/traton/export_inactive.svg +1 -0
  48. package/dist/assets/icons/traton/eye.svg +1 -0
  49. package/dist/assets/icons/traton/eye_inactive.svg +1 -0
  50. package/dist/assets/icons/traton/face_dissatisfied.svg +1 -0
  51. package/dist/assets/icons/traton/face_neutral.svg +1 -0
  52. package/dist/assets/icons/traton/face_satisfied.svg +1 -0
  53. package/dist/assets/icons/traton/filters.svg +1 -0
  54. package/dist/assets/icons/traton/filters_inactive.svg +1 -0
  55. package/dist/assets/icons/traton/folder.svg +1 -0
  56. package/dist/assets/icons/traton/fuel_gauge.svg +1 -0
  57. package/dist/assets/icons/traton/fuel_gauge_inactive.svg +1 -0
  58. package/dist/assets/icons/traton/global.svg +1 -0
  59. package/dist/assets/icons/traton/heart.svg +1 -0
  60. package/dist/assets/icons/traton/heart_inactive.svg +1 -0
  61. package/dist/assets/icons/traton/home.svg +1 -0
  62. package/dist/assets/icons/traton/home_inactive.svg +1 -0
  63. package/dist/assets/icons/traton/image.svg +1 -0
  64. package/dist/assets/icons/traton/image_add.svg +1 -0
  65. package/dist/assets/icons/traton/image_inactive.svg +1 -0
  66. package/dist/assets/icons/traton/image_set.svg +1 -0
  67. package/dist/assets/icons/traton/kebab.svg +1 -0
  68. package/dist/assets/icons/traton/link.svg +1 -0
  69. package/dist/assets/icons/traton/link_broken.svg +1 -0
  70. package/dist/assets/icons/traton/lock.svg +1 -0
  71. package/dist/assets/icons/traton/meatballs.svg +1 -0
  72. package/dist/assets/icons/traton/message.svg +1 -0
  73. package/dist/assets/icons/traton/message_inactive.svg +1 -0
  74. package/dist/assets/icons/traton/mileage.svg +1 -0
  75. package/dist/assets/icons/traton/mileage_inactive.svg +1 -0
  76. package/dist/assets/icons/traton/notification_inactive.svg +1 -0
  77. package/dist/assets/icons/traton/phone.svg +1 -0
  78. package/dist/assets/icons/traton/phone_inactive.svg +1 -0
  79. package/dist/assets/icons/traton/pin.svg +1 -0
  80. package/dist/assets/icons/traton/pin_inactive.svg +1 -0
  81. package/dist/assets/icons/traton/placeholder.svg +1 -0
  82. package/dist/assets/icons/traton/print_inactive.svg +1 -0
  83. package/dist/assets/icons/traton/profile.svg +1 -0
  84. package/dist/assets/icons/traton/profile_inactive.svg +1 -0
  85. package/dist/assets/icons/traton/proportions.svg +1 -0
  86. package/dist/assets/icons/traton/proportions_inactive.svg +1 -0
  87. package/dist/assets/icons/traton/redirect.svg +1 -0
  88. package/dist/assets/icons/traton/report.svg +1 -0
  89. package/dist/assets/icons/traton/report_inactive.svg +1 -0
  90. package/dist/assets/icons/traton/save.svg +1 -0
  91. package/dist/assets/icons/traton/save_inactive.svg +1 -0
  92. package/dist/assets/icons/traton/send.svg +1 -0
  93. package/dist/assets/icons/traton/send_inactive.svg +1 -0
  94. package/dist/assets/icons/traton/settings.svg +1 -0
  95. package/dist/assets/icons/traton/skip_backwards.svg +1 -1
  96. package/dist/assets/icons/traton/skip_forward.svg +1 -1
  97. package/dist/assets/icons/traton/smartphone.svg +1 -0
  98. package/dist/assets/icons/traton/smartphone_inactive.svg +1 -0
  99. package/dist/assets/icons/traton/speedometer.svg +1 -0
  100. package/dist/assets/icons/traton/speedometer_inactive.svg +1 -0
  101. package/dist/assets/icons/traton/support.svg +1 -0
  102. package/dist/assets/icons/traton/timer.svg +1 -0
  103. package/dist/assets/icons/traton/tool.svg +1 -0
  104. package/dist/assets/icons/traton/tool_inactive.svg +1 -0
  105. package/dist/assets/icons/traton/trash.svg +1 -0
  106. package/dist/assets/icons/traton/trash_inactive.svg +1 -0
  107. package/dist/assets/icons/traton/unlock.svg +1 -0
  108. package/dist/assets/icons/traton/upload.svg +1 -0
  109. package/dist/assets/icons/traton/wallet.svg +1 -0
  110. package/dist/assets/icons/traton/warning.svg +1 -1
  111. package/dist/assets/icons/traton/wifi.svg +1 -0
  112. package/dist/assets/icons/traton/wifi_inactive.svg +1 -0
  113. package/dist/components.css +3751 -3642
  114. package/dist/global.css +148 -17
  115. package/dist/scania-variables.css +521 -310
  116. package/dist/tl-accordion.css +92 -36
  117. package/dist/tl-banner.css +88 -13
  118. package/dist/tl-block.css +62 -7
  119. package/dist/tl-breadcrumbs.css +55 -6
  120. package/dist/tl-button.css +181 -156
  121. package/dist/tl-card.css +43 -62
  122. package/dist/tl-checkbox.css +195 -115
  123. package/dist/tl-chip.css +152 -12
  124. package/dist/tl-datetime.css +45 -34
  125. package/dist/tl-divider.css +76 -6
  126. package/dist/tl-dropdown.css +387 -230
  127. package/dist/tl-folder-tabs.css +167 -51
  128. package/dist/tl-footer.css +88 -34
  129. package/dist/tl-header.css +469 -387
  130. package/dist/tl-icon.css +5 -1
  131. package/dist/tl-inline-tabs.css +164 -61
  132. package/dist/tl-link.css +114 -16
  133. package/dist/tl-message.css +128 -14
  134. package/dist/tl-modal.css +111 -16
  135. package/dist/tl-navigation-tabs.css +167 -51
  136. package/dist/tl-popover-canvas.css +112 -9
  137. package/dist/tl-popover-menu.css +134 -28
  138. package/dist/tl-radio-button.css +159 -96
  139. package/dist/tl-side-menu.css +346 -326
  140. package/dist/tl-text-field.css +265 -77
  141. package/dist/tl-textarea.css +282 -76
  142. package/dist/tl-toast.css +119 -10
  143. package/dist/tl-toggle.css +149 -44
  144. package/dist/tl-tooltip.css +63 -15
  145. package/dist/traton-variables.css +361 -30
  146. package/package.json +12 -24
  147. package/dist/tl-badge.css +0 -45
  148. package/dist/tl-checkbox-vars.css +0 -38
  149. package/dist/tl-slider.css +0 -2250
  150. package/dist/tl-spinner.css +0 -78
  151. package/dist/tl-step.css +0 -247
  152. package/dist/tl-stepper.css +0 -91
  153. package/dist/tl-table.css +0 -857
package/dist/tl-accordion.css CHANGED
@@ -1,45 +1,96 @@
1
- .tl-accordion {
2
- /* Border & Background */
3
- --accordion-border: var(--color-foreground-border-discrete);
4
- --accordion-background: transparent;
5
- /* Hover backgrounds */
6
- --accordion-background-hover-primary: var(--color-background-layer-01);
7
- --accordion-background-hover-secondary: var(--color-background-layer-02);
8
- --accordion-background-hover: var(--accordion-background-hover-primary);
9
- /* Focus & Active states */
10
- --accordion-background-focus: var(--color-background-layer-01);
11
- --accordion-background-active: var(--color-background-layer-02);
12
- /* Text & Icon colours */
13
- --accordion-text: var(--color-foreground-text-strong);
14
- --accordion-icon: var(--color-foreground-icon-strong);
15
- /* Borders & Disabled */
16
- --accordion-border-focus: var(--color-foreground-border-strong);
17
- --accordion-text-disabled: var(--color-foreground-text-disabled);
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-accordion-background-primary-default: var(--color-background-none);
11
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
12
+ --component-accordion-background-primary-active: var(--scania-color-grey-100);
13
+ --component-accordion-background-secondary-default: var(--color-background-none);
14
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-50);
15
+ --component-accordion-background-secondary-active: var(--scania-color-grey-150);
16
+ --component-accordion-text-default: var(--color-text-strong);
17
+ --component-accordion-icon-default: var(--color-icon-strong);
18
+ --component-accordion-opacity-disabled: var(--scania-opacity-25);
18
19
  }
19
20
 
20
- /* Mode variants */
21
- .tl-mode-light .tl-accordion--primary,
22
- .tl-mode-light .tl-accordion .tl-accordion--primary {
23
- background-color: var(--accordion-background-hover-secondary);
24
- --accordion-background-hover: var(--accordion-background-hover-primary);
21
+ .traton .tds-mode-light,
22
+ .traton.tds-mode-light,
23
+ .traton .tl-mode-light,
24
+ .traton.tl-mode-light {
25
+ --component-accordion-background-primary-default: var(--color-background-none);
26
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
27
+ --component-accordion-background-primary-active: var(--traton-color-grey-150);
28
+ --component-accordion-background-secondary-default: var(--color-background-none);
29
+ --component-accordion-background-secondary-hover: var(--traton-color-grey-150);
30
+ --component-accordion-background-secondary-active: var(--traton-color-grey-200);
31
+ --component-accordion-text-default: var(--color-text-strong);
32
+ --component-accordion-icon-default: var(--color-icon-strong);
33
+ --component-accordion-opacity-disabled: var(--traton-opacity-25);
25
34
  }
26
35
 
27
- .tl-mode-light .tl-accordion--secondary,
28
- .tl-mode-light .tl-accordion .tl-accordion--secondary {
29
- background-color: var(--accordion-background-hover-primary);
30
- --accordion-background-hover: var(--accordion-background-hover-secondary);
36
+ .tds-mode-dark,
37
+ .scania .tds-mode-dark,
38
+ .scania.tds-mode-dark,
39
+ .scania .tl-mode-dark,
40
+ .scania.tl-mode-dark {
41
+ --component-accordion-background-primary-default: var(--color-background-none);
42
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
43
+ --component-accordion-background-primary-active: var(--scania-color-grey-850);
44
+ --component-accordion-background-secondary-default: var(--color-background-none);
45
+ --component-accordion-background-secondary-hover: var(--scania-color-grey-800);
46
+ --component-accordion-background-secondary-active: var(--scania-color-grey-750);
47
+ --component-accordion-text-default: var(--color-text-strong);
48
+ --component-accordion-icon-default: var(--color-icon-strong);
49
+ --component-accordion-opacity-disabled: var(--scania-opacity-25);
50
+ }
51
+
52
+ .traton .tds-mode-dark,
53
+ .traton.tds-mode-dark,
54
+ .traton .tl-mode-dark,
55
+ .traton.tl-mode-dark {
56
+ --component-accordion-background-primary-default: var(--color-background-none);
57
+ --component-accordion-background-primary-hover: var(--color-background-layer-01);
58
+ --component-accordion-background-primary-active: var(--traton-color-blue-900);
59
+ --component-accordion-background-secondary-default: var(--color-background-none);
60
+ --component-accordion-background-secondary-hover: var(--traton-color-blue-900);
61
+ --component-accordion-background-secondary-active: var(--traton-color-blue-850);
62
+ --component-accordion-text-default: var(--color-text-strong);
63
+ --component-accordion-icon-default: var(--color-icon-strong);
64
+ --component-accordion-opacity-disabled: var(--traton-opacity-25);
31
65
  }
32
66
 
33
- .tl-mode-dark .tl-accordion--primary,
34
- .tl-mode-dark .tl-accordion .tl-accordion--primary {
35
- background-color: var(--accordion-background-hover-secondary);
67
+ /* Component variables */
68
+ .tl-accordion {
69
+ --accordion-background: var(--component-accordion-background-primary-default);
70
+ --accordion-background-hover-primary: var(--component-accordion-background-primary-hover);
71
+ --accordion-background-hover-secondary: var(--component-accordion-background-secondary-hover);
72
+ --accordion-background-hover: var(--accordion-background-hover-primary);
73
+ --accordion-background-focus: var(--color-background-none);
74
+ --accordion-background-active: var(--component-accordion-background-primary-active);
75
+ --accordion-text: var(--component-accordion-text-default);
76
+ --accordion-icon: var(--component-accordion-icon-default);
77
+ --accordion-text-disabled: var(--color-text-disabled);
78
+ --accordion-border: var(--color-border-subtle);
79
+ --accordion-opacity-disabled: calc(var(--component-accordion-opacity-disabled) / 100);
80
+ }
81
+
82
+ .tl-accordion--primary,
83
+ .tl-accordion .tl-accordion--primary {
84
+ --accordion-background: var(--component-accordion-background-primary-default);
36
85
  --accordion-background-hover: var(--accordion-background-hover-primary);
86
+ --accordion-background-active: var(--component-accordion-background-primary-active);
37
87
  }
38
88
 
39
- .tl-mode-dark .tl-accordion--secondary,
40
- .tl-mode-dark .tl-accordion .tl-accordion--secondary {
41
- background-color: var(--accordion-background-hover-primary);
89
+ .tl-accordion--secondary,
90
+ .tl-accordion .tl-accordion--secondary {
91
+ --accordion-background: var(--component-accordion-background-secondary-default);
42
92
  --accordion-background-hover: var(--accordion-background-hover-secondary);
93
+ --accordion-background-active: var(--component-accordion-background-secondary-active);
43
94
  }
44
95
 
45
96
  /* Typography Usage mixins */
@@ -63,8 +114,8 @@
63
114
  margin-bottom: -1px;
64
115
  border-bottom: 1px solid var(--accordion-border);
65
116
  }
66
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
67
- .tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
117
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-start,
118
+ .tl-accordion__item:hover:not(.tl-accordion__item--expanded, .tl-accordion__item--disabled) .tl-accordion__header-icon-end {
68
119
  background-color: var(--accordion-background-hover);
69
120
  }
70
121
  .tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
@@ -75,10 +126,15 @@
75
126
  /* Focus state */
76
127
  }
77
128
  .tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
78
- outline: 2px solid var(--color-foreground-border-accent-focus);
129
+ outline: 2px solid var(--component--focus-ring-color-strong);
130
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
79
131
  outline-offset: 1px;
132
+ z-index: 1;
80
133
  background-color: var(--accordion-background-focus);
81
134
  }
135
+ .tl-accordion__item--disabled {
136
+ opacity: var(--accordion-opacity-disabled);
137
+ }
82
138
  .tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
83
139
  background-color: transparent;
84
140
  }
@@ -89,7 +145,7 @@
89
145
  .tl-accordion__title {
90
146
  flex-grow: 2;
91
147
  text-align: left;
92
- color: var(--color-foreground-text-strong);
148
+ color: var(--accordion-text);
93
149
  }
94
150
  .tl-accordion__item--disabled .tl-accordion__title {
95
151
  color: var(--accordion-text-disabled);
package/dist/tl-banner.css CHANGED
@@ -1,21 +1,89 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
1
4
  :root,
2
- .tl-mode-light,
3
- .tl-mode-dark {
4
- --banner-text: var(--color-foreground-text-strong);
5
- --banner-close-icon: var(--color-foreground-icon-strong);
6
- --banner-background-default: var(--color-background-layer-01);
7
- --banner-prefix-default: var(--color-foreground-icon-strong);
8
- --banner-background-info: var(--color-system-info-discrete);
9
- --banner-prefix-info: var(--color-system-info-default);
10
- --banner-background-error: var(--color-system-danger-discrete);
11
- --banner-prefix-error: var(--color-system-danger-default);
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-banner-background-neutral-default: var(--scania-color-grey-150);
11
+ --component-banner-background-information-default: var(--scania-color-blue-100);
12
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
13
+ --component-banner-text-neutral-default: var(--color-text-strong);
14
+ --component-banner-text-information-default: var(--color-text-strong);
15
+ --component-banner-text-error-default: var(--color-text-strong);
16
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
17
+ --component-banner-icon-information-default: var(--color-system-info-default);
18
+ --component-banner-icon-error-default: var(--color-system-danger-default);
19
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
20
+ }
21
+
22
+ .traton .tds-mode-light,
23
+ .traton.tds-mode-light,
24
+ .traton .tl-mode-light,
25
+ .traton.tl-mode-light {
26
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
27
+ --component-banner-background-information-default: var(--color-system-info-discrete);
28
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
29
+ --component-banner-text-neutral-default: var(--color-text-strong);
30
+ --component-banner-text-information-default: var(--color-text-strong);
31
+ --component-banner-text-error-default: var(--color-text-strong);
32
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
33
+ --component-banner-icon-information-default: var(--color-system-info-default);
34
+ --component-banner-icon-error-default: var(--color-system-danger-default);
35
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
36
+ }
37
+
38
+ .tds-mode-dark,
39
+ .scania .tds-mode-dark,
40
+ .scania.tds-mode-dark,
41
+ .scania .tl-mode-dark,
42
+ .scania.tl-mode-dark {
43
+ --component-banner-background-neutral-default: var(--color-background-layer-02);
44
+ --component-banner-background-information-default: var(--scania-color-blue-700);
45
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
46
+ --component-banner-text-neutral-default: var(--color-text-strong);
47
+ --component-banner-text-information-default: var(--color-text-strong);
48
+ --component-banner-text-error-default: var(--color-text-strong);
49
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
50
+ --component-banner-icon-information-default: var(--color-system-info-default);
51
+ --component-banner-icon-error-default: var(--color-system-danger-default);
52
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
53
+ }
54
+
55
+ .traton .tds-mode-dark,
56
+ .traton.tds-mode-dark,
57
+ .traton .tl-mode-dark,
58
+ .traton.tl-mode-dark {
59
+ --component-banner-background-neutral-default: var(--color-background-layer-01);
60
+ --component-banner-background-information-default: var(--color-system-info-discrete);
61
+ --component-banner-background-error-default: var(--color-system-danger-discrete);
62
+ --component-banner-text-neutral-default: var(--color-text-strong);
63
+ --component-banner-text-information-default: var(--color-text-strong);
64
+ --component-banner-text-error-default: var(--color-text-strong);
65
+ --component-banner-icon-neutral-default: var(--color-icon-strong);
66
+ --component-banner-icon-information-default: var(--color-system-info-default);
67
+ --component-banner-icon-error-default: var(--color-system-danger-default);
68
+ --component-banner-icon-dismiss-default: var(--color-icon-strong);
69
+ }
70
+
71
+ .tl-banner {
72
+ --banner-text: var(--component-banner-text-neutral-default);
73
+ --banner-close-icon: var(--component-banner-icon-dismiss-default);
74
+ --banner-background-default: var(--component-banner-background-neutral-default);
75
+ --banner-prefix-default: var(--component-banner-icon-neutral-default);
76
+ --banner-background-info: var(--component-banner-background-information-default);
77
+ --banner-prefix-info: var(--component-banner-icon-information-default);
78
+ --banner-background-error: var(--component-banner-background-error-default);
79
+ --banner-prefix-error: var(--component-banner-icon-error-default);
12
80
  }
13
81
 
14
82
  /* Typography Usage mixins */
15
83
  .tl-banner {
16
84
  display: flex;
17
85
  background-color: var(--banner-background-default);
18
- padding: 16px 20px;
86
+ padding: 16px;
19
87
  position: relative;
20
88
  }
21
89
  .tl-banner--error {
@@ -87,8 +155,15 @@
87
155
  width: 20px;
88
156
  }
89
157
  .tl-banner__close:focus-visible {
90
- outline: 2px solid var(--tds-focus-outline-color);
91
- box-shadow: 0 0 0 1px var(--tds-white);
158
+ outline: 2px solid var(--component--focus-ring-color-strong);
159
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
92
160
  outline-offset: 1px;
93
161
  z-index: 1;
162
+ }
163
+
164
+ .tl-banner .tl-link {
165
+ text-decoration: underline;
166
+ }
167
+ .tl-banner .tl-link:hover {
168
+ text-decoration: none;
94
169
  }
package/dist/tl-block.css CHANGED
@@ -1,12 +1,67 @@
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-block-background-primary: var(--color-background-layer-01);
11
+ --component-block-background-secondary: var(--color-background-layer-02);
12
+ --component-block-background-nested-even: var(--component-block-background-primary);
13
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
14
+ --component-block-border-radius-default: var(--scania-unit-4);
15
+ --component-block-border-radius-none: var(--scania-unit-0);
16
+ }
17
+
18
+ .traton .tds-mode-light,
19
+ .traton.tds-mode-light,
20
+ .traton .tl-mode-light,
21
+ .traton.tl-mode-light {
22
+ --component-block-background-primary: var(--color-background-layer-01);
23
+ --component-block-background-secondary: var(--color-background-layer-02);
24
+ --component-block-background-nested-even: var(--component-block-background-primary);
25
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
26
+ --component-block-border-radius-default: var(--traton-unit-4);
27
+ --component-block-border-radius-none: var(--traton-unit-0);
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-block-background-primary: var(--color-background-layer-01);
36
+ --component-block-background-secondary: var(--color-background-layer-02);
37
+ --component-block-background-nested-even: var(--component-block-background-primary);
38
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
39
+ --component-block-border-radius-default: var(--scania-unit-4);
40
+ --component-block-border-radius-none: var(--scania-unit-0);
41
+ }
42
+
43
+ .traton .tds-mode-dark,
44
+ .traton.tds-mode-dark,
45
+ .traton .tl-mode-dark,
46
+ .traton.tl-mode-dark {
47
+ --component-block-background-primary: var(--color-background-layer-01);
48
+ --component-block-background-secondary: var(--color-background-layer-02);
49
+ --component-block-background-nested-even: var(--component-block-background-primary);
50
+ --component-block-background-nested-odd: var(--component-block-background-secondary);
51
+ --component-block-border-radius-default: var(--traton-unit-4);
52
+ --component-block-border-radius-none: var(--traton-unit-0);
53
+ }
54
+
55
+ /* Component variables */
1
56
  .tl-block {
2
- --block-background: var(--color-background-layer-01);
3
- --block-text-color: var(--color-foreground-text-strong);
4
- --block-background-mode-primary: var(--color-background-layer-01);
5
- --block-background-mode-secondary: var(--color-background-layer-02);
6
- --block-background-even: var(--color-background-layer-01);
7
- --block-background-odd: var(--color-background-layer-02);
57
+ --block-background: var(--component-block-background-primary);
58
+ --block-text-color: var(--color-text-strong);
59
+ --block-background-mode-primary: var(--component-block-background-primary);
60
+ --block-background-mode-secondary: var(--component-block-background-secondary);
61
+ --block-background-even: var(--component-block-background-nested-even);
62
+ --block-background-odd: var(--component-block-background-nested-odd);
8
63
  --block-padding: 16px;
9
- --block-border-radius: 4px;
64
+ --block-border-radius: calc(var(--component-block-border-radius-default) * 1px);
10
65
  }
11
66
 
12
67
  /* Typography Usage mixins */
package/dist/tl-breadcrumbs.css CHANGED
@@ -1,13 +1,59 @@
1
1
  @charset "UTF-8";
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-breadcrumbs-text-link-default: var(--color-text-strong);
12
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
13
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
14
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
15
+ }
16
+
17
+ .traton .tds-mode-light,
18
+ .traton.tds-mode-light,
19
+ .traton .tl-mode-light,
20
+ .traton.tl-mode-light {
21
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
22
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
23
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
24
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
25
+ }
26
+
27
+ .tds-mode-dark,
28
+ .scania .tds-mode-dark,
29
+ .scania.tds-mode-dark,
30
+ .scania .tl-mode-dark,
31
+ .scania.tl-mode-dark {
32
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
33
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
34
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
35
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
36
+ }
37
+
38
+ .traton .tds-mode-dark,
39
+ .traton.tds-mode-dark,
40
+ .traton .tl-mode-dark,
41
+ .traton.tl-mode-dark {
42
+ --component-breadcrumbs-text-link-default: var(--color-text-strong);
43
+ --component-breadcrumbs-text-link-hover: var(--color-text-strong);
44
+ --component-breadcrumbs-text-current-default: var(--color-text-soft);
45
+ --component-breadcrumbs-text-separator-default: var(--color-text-strong);
46
+ }
47
+
2
48
  .tl-breadcrumbs {
3
- --breadcrumb-label: var(--color-foreground-text-strong);
4
- --breadcrumb-hover: var(--color-foreground-text-strong);
5
- --breadcrumb-current: var(--color-foreground-text-subtle);
6
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
49
+ --breadcrumb-label: var(--component-breadcrumbs-text-link-default);
50
+ --breadcrumb-hover: var(--component-breadcrumbs-text-link-hover);
51
+ --breadcrumb-current: var(--component-breadcrumbs-text-current-default);
52
+ --breadcrumb-separator-color: var(--component-breadcrumbs-text-separator-default);
7
53
  --breadcrumb-separator-margin: 4px;
8
54
  --breadcrumb-separator-width: 4px;
9
55
  --breadcrumb-separator-height: 8px;
10
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
56
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
11
57
  --breadcrumb-focus-outline-width: 2px;
12
58
  }
13
59
 
@@ -62,7 +108,10 @@
62
108
  text-decoration: underline;
63
109
  }
64
110
  .tl-breadcrumbs a:focus-visible {
65
- outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
111
+ outline: 2px solid var(--component--focus-ring-color-strong);
112
+ box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
113
+ outline-offset: 1px;
114
+ z-index: 1;
66
115
  }
67
116
  .tl-breadcrumbs a[aria-current=page] {
68
117
  pointer-events: none;