@scania/tegel-lite 0.1.0-focus-ring-beta.0 → 0.1.0-header-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 (134) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/icons/traton/back.svg +1 -0
  4. package/dist/assets/icons/traton/calendar_inactive.svg +1 -0
  5. package/dist/assets/icons/traton/card.svg +1 -0
  6. package/dist/assets/icons/traton/cart.svg +1 -0
  7. package/dist/assets/icons/traton/clock.svg +1 -0
  8. package/dist/assets/icons/traton/clock_inactive.svg +1 -0
  9. package/dist/assets/icons/traton/contact.svg +1 -0
  10. package/dist/assets/icons/traton/contact_inactive.svg +1 -0
  11. package/dist/assets/icons/traton/copy.svg +1 -0
  12. package/dist/assets/icons/traton/document.svg +1 -0
  13. package/dist/assets/icons/traton/document_check.svg +1 -0
  14. package/dist/assets/icons/traton/document_doc.svg +1 -0
  15. package/dist/assets/icons/traton/document_eye.svg +1 -0
  16. package/dist/assets/icons/traton/document_pdf.svg +1 -0
  17. package/dist/assets/icons/traton/document_tool.svg +1 -0
  18. package/dist/assets/icons/traton/document_word.svg +1 -0
  19. package/dist/assets/icons/traton/document_wrong.svg +1 -0
  20. package/dist/assets/icons/traton/document_xls.svg +1 -0
  21. package/dist/assets/icons/traton/dollar.svg +1 -0
  22. package/dist/assets/icons/traton/doner.svg +1 -0
  23. package/dist/assets/icons/traton/double_kebab.svg +1 -0
  24. package/dist/assets/icons/traton/download.svg +1 -0
  25. package/dist/assets/icons/traton/edit_inactive.svg +1 -1
  26. package/dist/assets/icons/traton/email.svg +1 -0
  27. package/dist/assets/icons/traton/export.svg +1 -0
  28. package/dist/assets/icons/traton/export_inactive.svg +1 -0
  29. package/dist/assets/icons/traton/eye.svg +1 -0
  30. package/dist/assets/icons/traton/eye_inactive.svg +1 -0
  31. package/dist/assets/icons/traton/face_dissatisfied.svg +1 -0
  32. package/dist/assets/icons/traton/face_neutral.svg +1 -0
  33. package/dist/assets/icons/traton/face_satisfied.svg +1 -0
  34. package/dist/assets/icons/traton/filters.svg +1 -0
  35. package/dist/assets/icons/traton/filters_inactive.svg +1 -0
  36. package/dist/assets/icons/traton/folder.svg +1 -0
  37. package/dist/assets/icons/traton/fuel_gauge.svg +1 -0
  38. package/dist/assets/icons/traton/fuel_gauge_inactive.svg +1 -0
  39. package/dist/assets/icons/traton/global.svg +1 -0
  40. package/dist/assets/icons/traton/heart.svg +1 -0
  41. package/dist/assets/icons/traton/heart_inactive.svg +1 -0
  42. package/dist/assets/icons/traton/home.svg +1 -0
  43. package/dist/assets/icons/traton/home_inactive.svg +1 -0
  44. package/dist/assets/icons/traton/image.svg +1 -0
  45. package/dist/assets/icons/traton/image_add.svg +1 -0
  46. package/dist/assets/icons/traton/image_inactive.svg +1 -0
  47. package/dist/assets/icons/traton/image_set.svg +1 -0
  48. package/dist/assets/icons/traton/kebab.svg +1 -0
  49. package/dist/assets/icons/traton/link.svg +1 -0
  50. package/dist/assets/icons/traton/link_broken.svg +1 -0
  51. package/dist/assets/icons/traton/lock.svg +1 -0
  52. package/dist/assets/icons/traton/meatballs.svg +1 -0
  53. package/dist/assets/icons/traton/message.svg +1 -0
  54. package/dist/assets/icons/traton/message_inactive.svg +1 -0
  55. package/dist/assets/icons/traton/mileage.svg +1 -0
  56. package/dist/assets/icons/traton/mileage_inactive.svg +1 -0
  57. package/dist/assets/icons/traton/notification_inactive.svg +1 -0
  58. package/dist/assets/icons/traton/phone.svg +1 -0
  59. package/dist/assets/icons/traton/phone_inactive.svg +1 -0
  60. package/dist/assets/icons/traton/pin.svg +1 -0
  61. package/dist/assets/icons/traton/pin_inactive.svg +1 -0
  62. package/dist/assets/icons/traton/placeholder.svg +1 -3
  63. package/dist/assets/icons/traton/print_inactive.svg +1 -0
  64. package/dist/assets/icons/traton/profile.svg +1 -0
  65. package/dist/assets/icons/traton/profile_inactive.svg +1 -0
  66. package/dist/assets/icons/traton/proportions.svg +1 -0
  67. package/dist/assets/icons/traton/proportions_inactive.svg +1 -0
  68. package/dist/assets/icons/traton/redirect.svg +1 -0
  69. package/dist/assets/icons/traton/report.svg +1 -0
  70. package/dist/assets/icons/traton/report_inactive.svg +1 -0
  71. package/dist/assets/icons/traton/save.svg +1 -0
  72. package/dist/assets/icons/traton/save_inactive.svg +1 -0
  73. package/dist/assets/icons/traton/send.svg +1 -0
  74. package/dist/assets/icons/traton/send_inactive.svg +1 -0
  75. package/dist/assets/icons/traton/settings.svg +1 -0
  76. package/dist/assets/icons/traton/skip_backwards.svg +1 -1
  77. package/dist/assets/icons/traton/skip_forward.svg +1 -1
  78. package/dist/assets/icons/traton/smartphone.svg +1 -0
  79. package/dist/assets/icons/traton/smartphone_inactive.svg +1 -0
  80. package/dist/assets/icons/traton/speedometer.svg +1 -0
  81. package/dist/assets/icons/traton/speedometer_inactive.svg +1 -0
  82. package/dist/assets/icons/traton/support.svg +1 -0
  83. package/dist/assets/icons/traton/timer.svg +1 -0
  84. package/dist/assets/icons/traton/tool.svg +1 -0
  85. package/dist/assets/icons/traton/tool_inactive.svg +1 -0
  86. package/dist/assets/icons/traton/trash.svg +1 -0
  87. package/dist/assets/icons/traton/trash_inactive.svg +1 -0
  88. package/dist/assets/icons/traton/unlock.svg +1 -0
  89. package/dist/assets/icons/traton/upload.svg +1 -0
  90. package/dist/assets/icons/traton/wallet.svg +1 -0
  91. package/dist/assets/icons/traton/warning.svg +1 -1
  92. package/dist/assets/icons/traton/wifi.svg +1 -0
  93. package/dist/assets/icons/traton/wifi_inactive.svg +1 -0
  94. package/dist/components.css +4361 -7007
  95. package/dist/global.css +76 -19
  96. package/dist/scania-variables.css +168 -4
  97. package/dist/tl-accordion.css +92 -36
  98. package/dist/tl-banner.css +86 -11
  99. package/dist/tl-block.css +62 -7
  100. package/dist/tl-breadcrumbs.css +4 -1
  101. package/dist/tl-button.css +9 -7
  102. package/dist/tl-card.css +23 -54
  103. package/dist/tl-checkbox.css +195 -115
  104. package/dist/tl-datetime.css +45 -34
  105. package/dist/tl-divider.css +15 -3
  106. package/dist/tl-footer.css +8 -6
  107. package/dist/tl-header.css +450 -385
  108. package/dist/tl-icon.css +4 -0
  109. package/dist/tl-link.css +9 -4
  110. package/dist/tl-message.css +128 -14
  111. package/dist/tl-modal.css +109 -14
  112. package/dist/tl-popover-canvas.css +112 -9
  113. package/dist/tl-popover-menu.css +134 -28
  114. package/dist/tl-radio-button.css +159 -96
  115. package/dist/tl-text-field.css +256 -76
  116. package/dist/tl-textarea.css +274 -76
  117. package/dist/tl-toast.css +117 -8
  118. package/dist/tl-toggle.css +147 -42
  119. package/dist/tl-tooltip.css +46 -0
  120. package/dist/traton-variables.css +322 -0
  121. package/package.json +8 -26
  122. package/dist/tl-badge.css +0 -45
  123. package/dist/tl-checkbox-vars.css +0 -38
  124. package/dist/tl-chip.css +0 -99
  125. package/dist/tl-dropdown.css +0 -921
  126. package/dist/tl-folder-tabs.css +0 -139
  127. package/dist/tl-inline-tabs.css +0 -173
  128. package/dist/tl-navigation-tabs.css +0 -171
  129. package/dist/tl-side-menu.css +0 -703
  130. package/dist/tl-slider.css +0 -2273
  131. package/dist/tl-spinner.css +0 -78
  132. package/dist/tl-step.css +0 -247
  133. package/dist/tl-stepper.css +0 -91
  134. package/dist/tl-table.css +0 -857
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;
package/dist/tl-link.css CHANGED
@@ -108,12 +108,15 @@
108
108
  }
109
109
 
110
110
  .tl-banner .tl-link {
111
- --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);
112
114
  }
113
115
 
114
116
  .tl-toast .tl-link {
115
- --link: var(--color-system-info-default);
116
- --link-hover: var(--color-system-info-default);
117
+ --link: var(--color-text-inverse-strong);
118
+ --link-hover: var(--color-text-inverse-strong);
119
+ --link-visited: var(--color-text-inverse-strong);
117
120
  }
118
121
 
119
122
  .traton .tl-link {
@@ -142,8 +145,10 @@
142
145
  font: inherit;
143
146
  }
144
147
  .tl-link:focus-visible {
145
- 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);
146
150
  outline-offset: 1px;
151
+ z-index: 1;
147
152
  text-decoration: none;
148
153
  }
149
154
  .tl-link:active {
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 {
package/dist/tl-modal.css CHANGED
@@ -66,16 +66,108 @@ body {
66
66
  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
67
67
  }
68
68
 
69
- /* Component variables */
69
+ /**
70
+ * Do not edit directly, this file was auto-generated.
71
+ */
72
+ :root,
73
+ .tds-mode-light,
74
+ .scania .tds-mode-light,
75
+ .scania.tds-mode-light,
76
+ .scania .tl-mode-light,
77
+ .scania.tl-mode-light {
78
+ --component-modal-background-default: var(--color-background-layer-02);
79
+ --component-modal-border-radius-default: 4;
80
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
81
+ --component-modal-text-title-default: var(--color-text-strong);
82
+ --component-modal-text-body-default: var(--color-text-strong);
83
+ }
84
+
85
+ .traton .tds-mode-light,
86
+ .traton.tds-mode-light,
87
+ .traton .tl-mode-light,
88
+ .traton.tl-mode-light {
89
+ --component-modal-background-default: var(--color-background-layer-02);
90
+ --component-modal-border-radius-default: 4;
91
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
92
+ --component-modal-text-title-default: var(--color-text-strong);
93
+ --component-modal-text-body-default: var(--color-text-strong);
94
+ }
95
+
96
+ .tds-mode-dark,
97
+ .scania .tds-mode-dark,
98
+ .scania.tds-mode-dark,
99
+ .scania .tl-mode-dark,
100
+ .scania.tl-mode-dark {
101
+ --component-modal-background-default: var(--color-background-layer-01);
102
+ --component-modal-border-radius-default: 4;
103
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
104
+ --component-modal-text-title-default: var(--color-text-strong);
105
+ --component-modal-text-body-default: var(--color-text-strong);
106
+ }
107
+
108
+ .traton .tds-mode-dark,
109
+ .traton.tds-mode-dark,
110
+ .traton .tl-mode-dark,
111
+ .traton.tl-mode-dark {
112
+ --component-modal-background-default: var(--color-background-layer-02);
113
+ --component-modal-border-radius-default: 4;
114
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
115
+ --component-modal-text-title-default: var(--color-text-strong);
116
+ --component-modal-text-body-default: var(--color-text-strong);
117
+ }
118
+
119
+ /**
120
+ * Do not edit directly, this file was auto-generated.
121
+ */
122
+ :root,
123
+ .tds-mode-light,
124
+ .scania .tds-mode-light,
125
+ .scania.tds-mode-light,
126
+ .scania .tl-mode-light,
127
+ .scania.tl-mode-light {
128
+ --component-overlay-background-default: var(--scania-color-base-black);
129
+ --component-overlay-opacity-default: 60;
130
+ }
131
+
132
+ .traton .tds-mode-light,
133
+ .traton.tds-mode-light,
134
+ .traton .tl-mode-light,
135
+ .traton.tl-mode-light {
136
+ --component-overlay-background-default: var(--traton-color-base-black);
137
+ --component-overlay-opacity-default: 40;
138
+ }
139
+
140
+ .tds-mode-dark,
141
+ .scania .tds-mode-dark,
142
+ .scania.tds-mode-dark,
143
+ .scania .tl-mode-dark,
144
+ .scania.tl-mode-dark {
145
+ --component-overlay-background-default: var(--scania-color-grey-900);
146
+ --component-overlay-opacity-default: 84;
147
+ }
148
+
149
+ .traton .tds-mode-dark,
150
+ .traton.tds-mode-dark,
151
+ .traton .tl-mode-dark,
152
+ .traton.tl-mode-dark {
153
+ --component-overlay-background-default: var(--traton-color-base-black);
154
+ --component-overlay-opacity-default: 60;
155
+ }
156
+
70
157
  .tl-modal,
71
- :root {
72
- --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
73
- --modal-background: var(--color-background-layer-02);
74
- --modal-backdrop: var(--color-background-overlay);
75
- --modal-text: var(--color-foreground-text-strong);
76
- --modal-cross-svg: var(--color-foreground-text-strong);
77
- --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
78
- --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
158
+ .tl-modal__overlay {
159
+ --modal-background: var(--component-modal-background-default);
160
+ --modal-backdrop: color-mix(
161
+ in srgb,
162
+ var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
163
+ transparent
164
+ );
165
+ --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
166
+ --modal-text: var(--component-modal-text-title-default);
167
+ --modal-body-text: var(--component-modal-text-body-default);
168
+ --modal-cross-svg: var(--component-modal-icon-dismiss-default);
169
+ --modal-shadow: 0 3px 3px 0 var(--component-shadow-default, rgba(0, 0, 0, 0.15)),
170
+ 0 -1px 1px 0 var(--component-shadow-base-modifier, rgba(0, 0, 0, 0.10));
79
171
  }
80
172
 
81
173
  /* MIXINS */
@@ -90,7 +182,7 @@ body {
90
182
  box-shadow: var(--modal-shadow);
91
183
  margin: auto;
92
184
  position: relative;
93
- border-radius: 4px;
185
+ border-radius: var(--modal-border-radius);
94
186
  max-height: 85vh;
95
187
  overflow-y: auto;
96
188
  pointer-events: auto;
@@ -103,7 +195,7 @@ body {
103
195
  background: var(--tl-scrollbar-track-color);
104
196
  }
105
197
  .tl-modal::-webkit-scrollbar-thumb {
106
- border-radius: 40px;
198
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
107
199
  background: var(--tl-scrollbar-thumb-color);
108
200
  border-width: var(--tl-scrollbar-thumb-border-width);
109
201
  border-style: solid;
@@ -112,6 +204,7 @@ body {
112
204
  }
113
205
  .tl-modal::-webkit-scrollbar-thumb:hover {
114
206
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
207
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
115
208
  }
116
209
  .tl-modal::-webkit-scrollbar-button {
117
210
  height: 0;
@@ -242,7 +335,7 @@ body {
242
335
  font-weight: var(--body-01-font-weight);
243
336
  letter-spacing: var(--body-01-letter-spacing);
244
337
  text-transform: var(--body-01-text-transform);
245
- color: var(--modal-text);
338
+ color: var(--modal-body-text);
246
339
  padding: 0 16px 16px;
247
340
  }
248
341
  .tl-modal__body::-webkit-scrollbar {
@@ -252,7 +345,7 @@ body {
252
345
  background: var(--tl-scrollbar-track-color);
253
346
  }
254
347
  .tl-modal__body::-webkit-scrollbar-thumb {
255
- border-radius: 40px;
348
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
256
349
  background: var(--tl-scrollbar-thumb-color);
257
350
  border-width: var(--tl-scrollbar-thumb-border-width);
258
351
  border-style: solid;
@@ -261,6 +354,7 @@ body {
261
354
  }
262
355
  .tl-modal__body::-webkit-scrollbar-thumb:hover {
263
356
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
357
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
264
358
  }
265
359
  .tl-modal__body::-webkit-scrollbar-button {
266
360
  height: 0;
@@ -293,9 +387,10 @@ body {
293
387
  background-color: transparent;
294
388
  border: 0;
295
389
  padding: 0;
390
+ height: 20px;
391
+ width: 20px;
296
392
  appearance: unset;
297
393
  display: inline-block;
298
- height: auto;
299
394
  color: var(--modal-text);
300
395
  cursor: pointer;
301
396
  }
package/dist/tl-popover-canvas.css CHANGED
@@ -1,16 +1,119 @@
1
- .tl-popover-canvas {
2
- --popover-canvas-text: var(--color-foreground-text-strong);
3
- --popover-canvas-background: var(--color-background-layer-01);
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-popover-background-primary: var(--color-background-layer-01);
11
+ --component-popover-background-secondary: var(--color-background-layer-02);
12
+ --component-popover-background-link-primary-default: var(--color-background-none);
13
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-100);
14
+ --component-popover-background-link-primary-active: var(
15
+ --component-popover-background-link-primary-hover
16
+ );
17
+ --component-popover-background-link-secondary-default: var(--color-background-none);
18
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-50);
19
+ --component-popover-background-link-secondary-active: var(
20
+ --component-popover-background-link-secondary-hover
21
+ );
22
+ --component-popover-border-radius-default: var(--scania-unit-4);
23
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
24
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
25
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
26
+ --component-popover-text-link-primary-default: var(--color-text-strong);
27
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
28
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
29
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
30
+ }
31
+
32
+ .traton .tds-mode-light,
33
+ .traton.tds-mode-light,
34
+ .traton .tl-mode-light,
35
+ .traton.tl-mode-light {
36
+ --component-popover-background-primary: var(--color-background-layer-01);
37
+ --component-popover-background-secondary: var(--color-background-layer-02);
38
+ --component-popover-background-link-primary-default: var(--color-background-none);
39
+ --component-popover-background-link-primary-hover: var(--traton-color-grey-150);
40
+ --component-popover-background-link-primary-active: var(--traton-color-grey-150);
41
+ --component-popover-background-link-secondary-default: var(--color-background-none);
42
+ --component-popover-background-link-secondary-hover: var(--traton-color-grey-150);
43
+ --component-popover-background-link-secondary-active: var(--traton-color-grey-150);
44
+ --component-popover-border-radius-default: var(--traton-unit-4);
45
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
46
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
47
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
48
+ --component-popover-text-link-primary-default: var(--color-text-strong);
49
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
50
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
51
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
52
+ }
53
+
54
+ .tds-mode-dark,
55
+ .scania .tds-mode-dark,
56
+ .scania.tds-mode-dark,
57
+ .scania .tl-mode-dark,
58
+ .scania.tl-mode-dark {
59
+ --component-popover-background-primary: var(--color-background-layer-01);
60
+ --component-popover-background-secondary: var(--color-background-layer-02);
61
+ --component-popover-background-link-primary-default: var(--color-background-none);
62
+ --component-popover-background-link-primary-hover: var(--scania-color-grey-850);
63
+ --component-popover-background-link-primary-active: var(
64
+ --component-popover-background-link-primary-hover
65
+ );
66
+ --component-popover-background-link-secondary-default: var(--color-background-none);
67
+ --component-popover-background-link-secondary-hover: var(--scania-color-grey-800);
68
+ --component-popover-background-link-secondary-active: var(
69
+ --component-popover-background-link-secondary-hover
70
+ );
71
+ --component-popover-border-radius-default: var(--scania-unit-4);
72
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
73
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
74
+ --component-popover-opacity-disabled: var(--scania-opacity-25);
75
+ --component-popover-text-link-primary-default: var(--color-text-strong);
76
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
77
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
78
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
4
79
  }
5
- .tl-popover-canvas--primary {
6
- --popover-canvas-background: var(--color-background-layer-01);
80
+
81
+ .traton .tds-mode-dark,
82
+ .traton.tds-mode-dark,
83
+ .traton .tl-mode-dark,
84
+ .traton.tl-mode-dark {
85
+ --component-popover-background-primary: var(--color-background-layer-01);
86
+ --component-popover-background-secondary: var(--color-background-layer-02);
87
+ --component-popover-background-link-primary-default: var(--color-background-none);
88
+ --component-popover-background-link-primary-hover: var(--traton-color-blue-900);
89
+ --component-popover-background-link-primary-active: var(--traton-color-blue-900);
90
+ --component-popover-background-link-secondary-default: var(--color-background-none);
91
+ --component-popover-background-link-secondary-hover: var(--traton-color-blue-850);
92
+ --component-popover-background-link-secondary-active: var(--traton-color-blue-850);
93
+ --component-popover-border-radius-default: var(--traton-unit-4);
94
+ --component-popover-icon-link-primary-default: var(--color-icon-strong);
95
+ --component-popover-icon-link-secondary-default: var(--color-icon-strong);
96
+ --component-popover-opacity-disabled: var(--traton-opacity-25);
97
+ --component-popover-text-link-primary-default: var(--color-text-strong);
98
+ --component-popover-text-link-primary-hover: var(--color-text-strong);
99
+ --component-popover-text-link-secondary-default: var(--color-text-strong);
100
+ --component-popover-text-link-secondary-hover: var(--color-text-strong);
7
101
  }
8
- .tl-popover-canvas--secondary {
9
- --popover-canvas-background: var(--color-background-layer-02);
102
+
103
+ .tl-popover-canvas {
104
+ --popover-canvas-text: var(--component-popover-text-link-primary-default);
105
+ --popover-canvas-background: var(--component-popover-background-primary);
106
+ --popover-canvas-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
107
+ }
108
+
109
+ .tl-popover-canvas--primary,
110
+ .tl-popover-canvas .tl-popover-canvas--primary {
111
+ --popover-canvas-background: var(--component-popover-background-primary);
10
112
  }
11
113
 
12
- .scania .tl-popover-canvas {
13
- --popover-canvas-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
114
+ .tl-popover-canvas--secondary,
115
+ .tl-popover-canvas .tl-popover-canvas--secondary {
116
+ --popover-canvas-background: var(--component-popover-background-secondary);
14
117
  }
15
118
 
16
119
  .traton .tl-popover-canvas {