@scania/tegel-lite 0.0.1-beta.5 → 0.0.1-beta.6
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.
- package/README.dev.md +22 -0
- package/README.md +4 -4
- package/dist/components.css +6 -7
- package/dist/global.css +22 -17
- package/dist/tl-button.css +2 -2
- package/dist/tl-header.css +4 -5
- package/dist/tl-slider.css +2 -2
- package/dist/traton-variables.css +2 -2
- package/package.json +1 -1
package/README.dev.md
CHANGED
|
@@ -170,6 +170,28 @@ The following scripts are used during build of `Tegel Lite`:
|
|
|
170
170
|
export default TegelButton
|
|
171
171
|
```
|
|
172
172
|
|
|
173
|
+
### Theming
|
|
174
|
+
|
|
175
|
+
Set the brand on `<html>` and mode on `<body>`:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
// layout.tsx
|
|
179
|
+
export default function RootLayout({ children }) {
|
|
180
|
+
return (
|
|
181
|
+
<html lang="en" className="scania"> {/* or "traton" */}
|
|
182
|
+
<body className={isDarkMode ? "tds-mode-dark" : ""}>
|
|
183
|
+
{children}
|
|
184
|
+
</body>
|
|
185
|
+
</html>
|
|
186
|
+
)
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
**Important:**
|
|
191
|
+
- Brand class (`.scania` or `.traton`) goes on the `<html>` element
|
|
192
|
+
- Mode class (`.tds-mode-dark`) goes on the `<body>` element for dark mode
|
|
193
|
+
- Light mode is the default and doesn't require a class
|
|
194
|
+
|
|
173
195
|
Checkout the Tegel Storybook documentation for more examples and usage.
|
|
174
196
|
|
|
175
197
|
---
|
package/README.md
CHANGED
|
@@ -22,7 +22,7 @@ npm install @scania/tegel-lite
|
|
|
22
22
|
```javascript
|
|
23
23
|
import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
|
|
24
24
|
import '@scania/tegel-lite/global.css'; // Component tokens (required)
|
|
25
|
-
import '@scania/tegel-lite/components.css'; // All
|
|
25
|
+
import '@scania/tegel-lite/components.css'; // All components
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
### Option 2: Tree-shaking (Import Specific Components)
|
|
@@ -48,7 +48,7 @@ import '@scania/tegel-lite/tl-header.css';
|
|
|
48
48
|
</button>
|
|
49
49
|
```
|
|
50
50
|
|
|
51
|
-
## Components
|
|
51
|
+
## Components
|
|
52
52
|
|
|
53
53
|
**Layout:** header, footer, side-menu, breadcrumbs
|
|
54
54
|
**Forms:** text-field, textarea, checkbox, radio-button, toggle, dropdown, datetime, slider
|
|
@@ -61,8 +61,8 @@ import '@scania/tegel-lite/tl-header.css';
|
|
|
61
61
|
|
|
62
62
|
```
|
|
63
63
|
dist/
|
|
64
|
-
├── global.css # Component tokens
|
|
65
|
-
├── components.css # All
|
|
64
|
+
├── global.css # Component tokens
|
|
65
|
+
├── components.css # All components
|
|
66
66
|
├── scania-variables.css # Scania brand (colors, fonts, tokens)
|
|
67
67
|
├── traton-variables.css # TRATON brand (colors, fonts, tokens)
|
|
68
68
|
├── tl-*.css # Individual components for tree-shaking
|
package/dist/components.css
CHANGED
|
@@ -613,8 +613,8 @@ tds-button,
|
|
|
613
613
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
614
614
|
}
|
|
615
615
|
|
|
616
|
-
.scania.tds-mode-dark tds-button,
|
|
617
|
-
.scania.tds-mode-dark .tl-button {
|
|
616
|
+
.scania .tds-mode-dark tds-button,
|
|
617
|
+
.scania .tds-mode-dark .tl-button {
|
|
618
618
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
619
619
|
}
|
|
620
620
|
|
|
@@ -3058,7 +3058,8 @@ body {
|
|
|
3058
3058
|
.scania {
|
|
3059
3059
|
/* ── Dark-mode overrides ───────────────────── */
|
|
3060
3060
|
}
|
|
3061
|
-
.scania.tds-mode-dark tds-header,
|
|
3061
|
+
.scania .tds-mode-dark tds-header,
|
|
3062
|
+
.scania .tds-mode-dark .tl-header {
|
|
3062
3063
|
--component-header-color-background: var(--color-brand-primary-900);
|
|
3063
3064
|
--component-header-color-foreground-strong: var(--color-foreground-icon-strong);
|
|
3064
3065
|
--component-header-color-background-hover: var(--color-brand-primary-800);
|
|
@@ -3178,18 +3179,16 @@ body {
|
|
|
3178
3179
|
--component-header-space-profile-padding: 16px;
|
|
3179
3180
|
}
|
|
3180
3181
|
|
|
3181
|
-
.traton.tds-mode-dark .tl-header {
|
|
3182
|
+
.traton .tds-mode-dark .tl-header {
|
|
3182
3183
|
/* Brand logo */
|
|
3183
3184
|
--header-logotype-local: var(--traton-logotype-white-svg-local);
|
|
3184
3185
|
--header-logotype-cdn: var(--traton-logotype-white-svg);
|
|
3185
3186
|
}
|
|
3186
|
-
|
|
3187
|
-
.traton.tds-mode-light .tl-header {
|
|
3187
|
+
.traton .tds-mode-light .tl-header {
|
|
3188
3188
|
/* Brand logo */
|
|
3189
3189
|
--header-logotype-local: var(--traton-logotype-black-svg-local);
|
|
3190
3190
|
--header-logotype-cdn: var(--traton-logotype-black-svg);
|
|
3191
3191
|
}
|
|
3192
|
-
|
|
3193
3192
|
.traton .tl-header {
|
|
3194
3193
|
--component-header-space-profile-padding: 20px;
|
|
3195
3194
|
}
|
package/dist/global.css
CHANGED
|
@@ -24,8 +24,8 @@ tds-button,
|
|
|
24
24
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.scania.tds-mode-dark tds-button,
|
|
28
|
-
.scania.tds-mode-dark .tl-button {
|
|
27
|
+
.scania .tds-mode-dark tds-button,
|
|
28
|
+
.scania .tds-mode-dark .tl-button {
|
|
29
29
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
30
30
|
}
|
|
31
31
|
|
|
@@ -82,15 +82,15 @@ tds-chip {
|
|
|
82
82
|
.scania tds-chip {
|
|
83
83
|
--component-chip-border-radius: 16px;
|
|
84
84
|
}
|
|
85
|
-
:root.tds-mode-light tds-chip,
|
|
86
|
-
.scania.tds-mode-light tds-chip {
|
|
85
|
+
:root .tds-mode-light tds-chip,
|
|
86
|
+
.scania .tds-mode-light tds-chip {
|
|
87
87
|
--component-chip-color-hover: var(--color-background-surface-300);
|
|
88
88
|
--component-chip-foreground-foreground-disabled-selected: var(
|
|
89
89
|
--color-foreground-text-inverse-subtle
|
|
90
90
|
);
|
|
91
91
|
}
|
|
92
|
-
:root.tds-mode-dark tds-chip,
|
|
93
|
-
.scania.tds-mode-dark tds-chip {
|
|
92
|
+
:root .tds-mode-dark tds-chip,
|
|
93
|
+
.scania .tds-mode-dark tds-chip {
|
|
94
94
|
--component-chip-color-default: var(--color-background-surface-400);
|
|
95
95
|
--component-chip-color-focused-on-selected: var(--color-system-info-discrete);
|
|
96
96
|
--component-chip-color-hover-on-selected: var(--color-system-info-default);
|
|
@@ -101,7 +101,7 @@ tds-chip {
|
|
|
101
101
|
.traton tds-chip {
|
|
102
102
|
--component-chip-border-radius: 2px;
|
|
103
103
|
}
|
|
104
|
-
.traton.tds-mode-light tds-chip {
|
|
104
|
+
.traton .tds-mode-light tds-chip {
|
|
105
105
|
--component-chip-color-default: var(--color-background-surface-200);
|
|
106
106
|
--component-chip-color-selected: var(--color-background-surface-300);
|
|
107
107
|
--component-chip-color-hover-on-selected: var(--color-background-surface-400);
|
|
@@ -109,7 +109,7 @@ tds-chip {
|
|
|
109
109
|
--component-chip-color-focused-on-selected: var(--component-chip-color-focused);
|
|
110
110
|
--component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
|
|
111
111
|
}
|
|
112
|
-
.traton.tds-mode-dark tds-chip {
|
|
112
|
+
.traton .tds-mode-dark tds-chip {
|
|
113
113
|
--component-chip-color-default: var(--color-background-surface-300);
|
|
114
114
|
--component-chip-color-disabled: var(--color-background-surface-200);
|
|
115
115
|
--component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
|
|
@@ -162,17 +162,19 @@ tds-footer {
|
|
|
162
162
|
--component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
|
|
163
163
|
--component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
|
|
164
164
|
}
|
|
165
|
-
:root.tds-mode-light tds-footer,
|
|
166
|
-
.
|
|
167
|
-
.scania.tds-mode-light
|
|
165
|
+
:root .tds-mode-light tds-footer,
|
|
166
|
+
:root .tds-mode-light .tl-footer,
|
|
167
|
+
.scania .tds-mode-light tds-footer,
|
|
168
|
+
.scania .tds-mode-light .tl-footer {
|
|
168
169
|
--component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
|
|
169
170
|
--component-footer-text-color-link-text: var(--color-foreground-text-brand);
|
|
170
171
|
--component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
|
|
171
172
|
--component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
|
|
172
173
|
}
|
|
173
|
-
:root.tds-mode-dark tds-footer,
|
|
174
|
-
.
|
|
175
|
-
.scania.tds-mode-dark
|
|
174
|
+
:root .tds-mode-dark tds-footer,
|
|
175
|
+
:root .tds-mode-dark .tl-footer,
|
|
176
|
+
.scania .tds-mode-dark tds-footer,
|
|
177
|
+
.scania .tds-mode-dark .tl-footer {
|
|
176
178
|
--component-footer-text-color-copyright: var(--color-foreground-text-soft);
|
|
177
179
|
--component-footer-text-color-link-text: var(--color-brand-primary-50);
|
|
178
180
|
--component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
|
|
@@ -188,12 +190,14 @@ tds-footer {
|
|
|
188
190
|
--component-footer-logotype-cdn: var(--traton-logotype-black-svg);
|
|
189
191
|
--component-footer-logotype-local: var(--traton-logotype-black-svg-local);
|
|
190
192
|
}
|
|
191
|
-
.traton.tds-mode-light tds-footer,
|
|
193
|
+
.traton .tds-mode-light tds-footer,
|
|
194
|
+
.traton .tds-mode-light .tl-footer {
|
|
192
195
|
--component-footer-text-color-copyright: var(--traton-color-transparent-600);
|
|
193
196
|
--component-footer-logotype-cdn: var(--traton-logotype-black-svg);
|
|
194
197
|
--component-footer-logotype-local: var(--traton-logotype-black-svg-local);
|
|
195
198
|
}
|
|
196
|
-
.traton.tds-mode-dark tds-footer,
|
|
199
|
+
.traton .tds-mode-dark tds-footer,
|
|
200
|
+
.traton .tds-mode-dark .tl-footer {
|
|
197
201
|
--component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
|
|
198
202
|
--component-footer-primary: var(--traton-color-blue-1000);
|
|
199
203
|
--component-footer-logotype-cdn: var(--traton-logotype-white-svg);
|
|
@@ -240,7 +244,8 @@ tds-footer {
|
|
|
240
244
|
.scania {
|
|
241
245
|
/* ── Dark-mode overrides ───────────────────── */
|
|
242
246
|
}
|
|
243
|
-
.scania.tds-mode-dark tds-header,
|
|
247
|
+
.scania .tds-mode-dark tds-header,
|
|
248
|
+
.scania .tds-mode-dark .tl-header {
|
|
244
249
|
--component-header-color-background: var(--color-brand-primary-900);
|
|
245
250
|
--component-header-color-foreground-strong: var(--color-foreground-icon-strong);
|
|
246
251
|
--component-header-color-background-hover: var(--color-brand-primary-800);
|
package/dist/tl-button.css
CHANGED
|
@@ -7,8 +7,8 @@ tds-button,
|
|
|
7
7
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.scania.tds-mode-dark tds-button,
|
|
11
|
-
.scania.tds-mode-dark .tl-button {
|
|
10
|
+
.scania .tds-mode-dark tds-button,
|
|
11
|
+
.scania .tds-mode-dark .tl-button {
|
|
12
12
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
13
13
|
}
|
|
14
14
|
|
package/dist/tl-header.css
CHANGED
|
@@ -39,7 +39,8 @@
|
|
|
39
39
|
.scania {
|
|
40
40
|
/* ── Dark-mode overrides ───────────────────── */
|
|
41
41
|
}
|
|
42
|
-
.scania.tds-mode-dark tds-header,
|
|
42
|
+
.scania .tds-mode-dark tds-header,
|
|
43
|
+
.scania .tds-mode-dark .tl-header {
|
|
43
44
|
--component-header-color-background: var(--color-brand-primary-900);
|
|
44
45
|
--component-header-color-foreground-strong: var(--color-foreground-icon-strong);
|
|
45
46
|
--component-header-color-background-hover: var(--color-brand-primary-800);
|
|
@@ -159,18 +160,16 @@
|
|
|
159
160
|
--component-header-space-profile-padding: 16px;
|
|
160
161
|
}
|
|
161
162
|
|
|
162
|
-
.traton.tds-mode-dark .tl-header {
|
|
163
|
+
.traton .tds-mode-dark .tl-header {
|
|
163
164
|
/* Brand logo */
|
|
164
165
|
--header-logotype-local: var(--traton-logotype-white-svg-local);
|
|
165
166
|
--header-logotype-cdn: var(--traton-logotype-white-svg);
|
|
166
167
|
}
|
|
167
|
-
|
|
168
|
-
.traton.tds-mode-light .tl-header {
|
|
168
|
+
.traton .tds-mode-light .tl-header {
|
|
169
169
|
/* Brand logo */
|
|
170
170
|
--header-logotype-local: var(--traton-logotype-black-svg-local);
|
|
171
171
|
--header-logotype-cdn: var(--traton-logotype-black-svg);
|
|
172
172
|
}
|
|
173
|
-
|
|
174
173
|
.traton .tl-header {
|
|
175
174
|
--component-header-space-profile-padding: 20px;
|
|
176
175
|
}
|
package/dist/tl-slider.css
CHANGED
|
@@ -32,8 +32,8 @@ tds-button,
|
|
|
32
32
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
.scania.tds-mode-dark tds-button,
|
|
36
|
-
.scania.tds-mode-dark .tl-button {
|
|
35
|
+
.scania .tds-mode-dark tds-button,
|
|
36
|
+
.scania .tds-mode-dark .tl-button {
|
|
37
37
|
--component-button-primary-text: var(--color-brand-neutral-white);
|
|
38
38
|
}
|
|
39
39
|
|
|
@@ -376,7 +376,7 @@
|
|
|
376
376
|
* Do not edit directly, this file was auto-generated.
|
|
377
377
|
*/
|
|
378
378
|
.traton,
|
|
379
|
-
.traton.tds-mode-light {
|
|
379
|
+
.traton .tds-mode-light {
|
|
380
380
|
--color-background-base: var(--traton-color-grey-50);
|
|
381
381
|
--color-background-accent-primary-default: var(--traton-color-blue-800);
|
|
382
382
|
--color-background-accent-primary-disabled: var(--traton-color-blue-100);
|
|
@@ -507,7 +507,7 @@
|
|
|
507
507
|
/**
|
|
508
508
|
* Do not edit directly, this file was auto-generated.
|
|
509
509
|
*/
|
|
510
|
-
.traton.tds-mode-dark {
|
|
510
|
+
.traton .tds-mode-dark {
|
|
511
511
|
--color-background-base: var(--traton-color-blue-1000);
|
|
512
512
|
--color-background-accent-primary-default: var(--traton-color-grey-300);
|
|
513
513
|
--color-background-accent-primary-disabled: var(--traton-color-grey-900);
|