@scania/tegel-lite 0.1.0-focus-ring-beta.1 → 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 (133) 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 +4328 -7009
  95. package/dist/global.css +76 -19
  96. package/dist/scania-variables.css +168 -4
  97. package/dist/tl-accordion.css +87 -33
  98. package/dist/tl-banner.css +86 -11
  99. package/dist/tl-block.css +62 -7
  100. package/dist/tl-button.css +1 -0
  101. package/dist/tl-card.css +19 -51
  102. package/dist/tl-checkbox.css +195 -115
  103. package/dist/tl-datetime.css +45 -34
  104. package/dist/tl-divider.css +15 -3
  105. package/dist/tl-footer.css +2 -0
  106. package/dist/tl-header.css +434 -375
  107. package/dist/tl-icon.css +4 -0
  108. package/dist/tl-link.css +6 -3
  109. package/dist/tl-message.css +128 -14
  110. package/dist/tl-modal.css +109 -14
  111. package/dist/tl-popover-canvas.css +112 -9
  112. package/dist/tl-popover-menu.css +134 -28
  113. package/dist/tl-radio-button.css +159 -96
  114. package/dist/tl-text-field.css +256 -76
  115. package/dist/tl-textarea.css +274 -76
  116. package/dist/tl-toast.css +117 -8
  117. package/dist/tl-toggle.css +147 -42
  118. package/dist/tl-tooltip.css +46 -0
  119. package/dist/traton-variables.css +322 -0
  120. package/package.json +8 -26
  121. package/dist/tl-badge.css +0 -45
  122. package/dist/tl-checkbox-vars.css +0 -38
  123. package/dist/tl-chip.css +0 -101
  124. package/dist/tl-dropdown.css +0 -924
  125. package/dist/tl-folder-tabs.css +0 -140
  126. package/dist/tl-inline-tabs.css +0 -176
  127. package/dist/tl-navigation-tabs.css +0 -174
  128. package/dist/tl-side-menu.css +0 -707
  129. package/dist/tl-slider.css +0 -2274
  130. package/dist/tl-spinner.css +0 -78
  131. package/dist/tl-step.css +0 -247
  132. package/dist/tl-stepper.css +0 -91
  133. package/dist/tl-table.css +0 -861
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 {
@@ -91,4 +159,11 @@
91
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-button.css CHANGED
@@ -650,6 +650,7 @@
650
650
  .tl-button--xs {
651
651
  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
652
652
  height: 24px;
653
+ font-size: var(--detail-05-font-size);
653
654
  }
654
655
  .tl-button--sm {
655
656
  padding: var(--tds-spacing-element-12);
package/dist/tl-card.css CHANGED
@@ -57,20 +57,18 @@
57
57
  }
58
58
 
59
59
  .tl-card {
60
- --card-background: var(--tds-white);
61
- --card-background-primary: var(--component-card-primary);
62
- --card-background-secondary: var(--component-card-secondary);
60
+ --card-background: var(--component-card-background-primary-default);
61
+ --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
63
62
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
64
63
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
65
64
  --card-box: var(--card-box-primary);
66
65
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
67
66
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
68
- --card-headline: var(--color-foreground-text-strong);
69
- --card-sub-headline: var(--color-foreground-text-subtle);
70
- --card-body-color: var(--color-foreground-text-defined);
71
- --card-divider: var(--color-foreground-border-discrete);
72
- --card-icon-color: var(--color-foreground-icon-strong);
73
- /* Paddings */
67
+ --card-headline: var(--component-card-text-title-default);
68
+ --card-sub-headline: var(--component-card-text-subtitle-default);
69
+ --card-body-color: var(--component-card-text-body-default);
70
+ --card-divider: var(--color-border-discrete);
71
+ --card-icon-color: var(--component-card-text-title-default);
74
72
  --card-body-padding: 0 16px;
75
73
  --card-header-padding: 16px;
76
74
  --card-slotted-padding: 16px;
@@ -78,31 +76,23 @@
78
76
  }
79
77
  .tl-card--primary {
80
78
  --card-box: var(--card-box-primary);
79
+ --card-background: var(--component-card-background-primary-default);
81
80
  }
82
- .tl-card.tl-card--mode-variant-secondary {
81
+ .tl-card--secondary {
83
82
  --card-box: var(--card-box-secondary);
83
+ --card-background: var(--component-card-background-secondary-default);
84
84
  }
85
85
 
86
- .scania .tl-card {
87
- /* Paddings */
88
- --card-body-padding: 0 16px;
89
- --card-header-padding: 16px;
90
- --card-slotted-padding: 16px;
91
- --card-divider-margin: 16px 16px 0;
92
- }
93
- .scania .tl-card--primary {
94
- --card-box: var(--card-box-primary);
95
- }
96
- .scania .tl-card--secondary {
97
- --card-box: var(--card-box-primary);
86
+ .tds-mode-dark .tl-card,
87
+ .tl-mode-dark .tl-card {
88
+ --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
89
+ --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
98
90
  }
99
91
 
100
92
  .traton .tl-card {
101
93
  --card-box: none;
102
- --card-background: transparent;
103
94
  --card-box-hover: none;
104
95
  --card-box-pressed: none;
105
- /* Paddings and margins */
106
96
  --card-body-padding: 0;
107
97
  --card-header-padding: 16px 16px 16px 0;
108
98
  --card-slotted-padding: 16px 16px 16px 0;
@@ -110,35 +100,11 @@
110
100
  }
111
101
  .traton .tl-card--primary {
112
102
  --card-box: none;
113
- --card-background: transparent;
103
+ --card-background: var(--component-card-background-primary-default);
114
104
  }
115
105
  .traton .tl-card--secondary {
116
106
  --card-box: none;
117
- --card-background: transparent;
118
- }
119
-
120
- /* Dark mode */
121
- .tl-mode-dark {
122
- --card-background-primary: var(--tds-grey-900);
123
- --card-background-secondary: var(--tds-grey-850);
124
- }
125
- .tl-mode-dark .tl-card {
126
- --card-background: var(--card-background-primary);
127
- }
128
- .tl-mode-dark .tl-card--primary {
129
- --card-box: var(--card-box-primary);
130
- --card-background: var(--card-background-primary);
131
- }
132
- .tl-mode-dark .tl-card--secondary {
133
- --card-box: var(--card-box-primary);
134
- --card-background: var(--card-background-secondary);
135
- }
136
-
137
- .traton .tl-mode-dark .tl-card--primary {
138
- --card-background: transparent;
139
- }
140
- .traton .tl-mode-dark .tl-card--secondary {
141
- --card-background: transparent;
107
+ --card-background: var(--component-card-background-secondary-default);
142
108
  }
143
109
 
144
110
  /* Typography Usage mixins */
@@ -155,7 +121,7 @@
155
121
  width: 100%;
156
122
  box-shadow: var(--card-box);
157
123
  background-color: var(--card-background);
158
- border-radius: 4px;
124
+ border-radius: var(--card-border-radius);
159
125
  overflow: hidden;
160
126
  }
161
127
  .tl-card--clickable {
@@ -202,6 +168,7 @@
202
168
  block-size: 36px;
203
169
  border-radius: 100%;
204
170
  margin-right: 16px;
171
+ background-color: var(--color-background-layer-03);
205
172
  }
206
173
 
207
174
  .tl-card__headings {
@@ -223,6 +190,7 @@
223
190
  inline-size: 100%;
224
191
  block-size: auto;
225
192
  display: block;
193
+ background-color: var(--color-background-layer-03);
226
194
  }
227
195
 
228
196
  .tl-card__divider {