@scania/tegel-lite 0.0.1-beta.5 → 0.0.1-beta.7

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 (9) hide show
  1. package/README.dev.md +22 -0
  2. package/README.md +4 -4
  3. package/dist/components.css +29 -11
  4. package/dist/global.css +22 -17
  5. package/dist/tl-button.css +2 -2
  6. package/dist/tl-header.css +27 -9
  7. package/dist/tl-slider.css +2 -2
  8. package/dist/traton-variables.css +2 -2
  9. 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 52+ components
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 (52+ total)
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 (required, ~6500 lines)
65
- ├── components.css # All 52+ components (~9500 lines)
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, .scania.tds-mode-dark .tl-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);
@@ -3124,8 +3125,7 @@ body {
3124
3125
  }
3125
3126
 
3126
3127
  .tl-header {
3127
- /* Base background & text */
3128
- --header-background: var(--component-header-color-background);
3128
+ /* Base text */
3129
3129
  --header-nav-item: var(--component-header-color-foreground-strong);
3130
3130
  /* Nav-item states */
3131
3131
  --header-nav-item-background-hover: var(--color-background-surface-100);
@@ -3171,27 +3171,45 @@ body {
3171
3171
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
3172
3172
  }
3173
3173
 
3174
+ .scania {
3175
+ /* Dark mode - override with dark colors */
3176
+ }
3177
+ .scania .tds-mode-dark .tl-header {
3178
+ --header-background: var(--component-header-color-background);
3179
+ }
3180
+ .scania {
3181
+ /* Default .tl-header (works for both light mode and no mode) */
3182
+ }
3174
3183
  .scania .tl-header {
3175
3184
  /* Brand logo */
3176
3185
  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
3177
3186
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
3178
3187
  --component-header-space-profile-padding: 16px;
3188
+ /* Background defaults to light mode */
3189
+ --header-background: var(--component-header-color-background);
3179
3190
  }
3180
3191
 
3181
- .traton.tds-mode-dark .tl-header {
3182
- /* Brand logo */
3192
+ .traton .tds-mode-dark .tl-header {
3193
+ /* Brand logo - White for dark mode */
3183
3194
  --header-logotype-local: var(--traton-logotype-white-svg-local);
3184
3195
  --header-logotype-cdn: var(--traton-logotype-white-svg);
3196
+ /* Background */
3197
+ --header-background: var(--component-header-color-background);
3185
3198
  }
3186
-
3187
- .traton.tds-mode-light .tl-header {
3188
- /* Brand logo */
3199
+ .traton .tds-mode-light .tl-header {
3200
+ /* Brand logo - Black for light mode */
3189
3201
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3190
3202
  --header-logotype-cdn: var(--traton-logotype-black-svg);
3203
+ /* Background */
3204
+ --header-background: var(--component-header-color-background);
3191
3205
  }
3192
-
3193
3206
  .traton .tl-header {
3207
+ /* Brand logo - Black as default (for no mode specified) */
3208
+ --header-logotype-local: var(--traton-logotype-black-svg-local);
3209
+ --header-logotype-cdn: var(--traton-logotype-black-svg);
3194
3210
  --component-header-space-profile-padding: 20px;
3211
+ /* Background defaults to light mode */
3212
+ --header-background: var(--component-header-color-background);
3195
3213
  }
3196
3214
 
3197
3215
  /* Header Elements */
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, :root.tds-mode-light .tl-footer,
166
- .scania.tds-mode-light tds-footer,
167
- .scania.tds-mode-light .tl-footer {
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, :root.tds-mode-dark .tl-footer,
174
- .scania.tds-mode-dark tds-footer,
175
- .scania.tds-mode-dark .tl-footer {
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, .traton.tds-mode-light .tl-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, .traton.tds-mode-dark .tl-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, .scania.tds-mode-dark .tl-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, .scania.tds-mode-dark .tl-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);
@@ -105,8 +106,7 @@
105
106
  }
106
107
 
107
108
  .tl-header {
108
- /* Base background & text */
109
- --header-background: var(--component-header-color-background);
109
+ /* Base text */
110
110
  --header-nav-item: var(--component-header-color-foreground-strong);
111
111
  /* Nav-item states */
112
112
  --header-nav-item-background-hover: var(--color-background-surface-100);
@@ -152,27 +152,45 @@
152
152
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
153
153
  }
154
154
 
155
+ .scania {
156
+ /* Dark mode - override with dark colors */
157
+ }
158
+ .scania .tds-mode-dark .tl-header {
159
+ --header-background: var(--component-header-color-background);
160
+ }
161
+ .scania {
162
+ /* Default .tl-header (works for both light mode and no mode) */
163
+ }
155
164
  .scania .tl-header {
156
165
  /* Brand logo */
157
166
  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
158
167
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
159
168
  --component-header-space-profile-padding: 16px;
169
+ /* Background defaults to light mode */
170
+ --header-background: var(--component-header-color-background);
160
171
  }
161
172
 
162
- .traton.tds-mode-dark .tl-header {
163
- /* Brand logo */
173
+ .traton .tds-mode-dark .tl-header {
174
+ /* Brand logo - White for dark mode */
164
175
  --header-logotype-local: var(--traton-logotype-white-svg-local);
165
176
  --header-logotype-cdn: var(--traton-logotype-white-svg);
177
+ /* Background */
178
+ --header-background: var(--component-header-color-background);
166
179
  }
167
-
168
- .traton.tds-mode-light .tl-header {
169
- /* Brand logo */
180
+ .traton .tds-mode-light .tl-header {
181
+ /* Brand logo - Black for light mode */
170
182
  --header-logotype-local: var(--traton-logotype-black-svg-local);
171
183
  --header-logotype-cdn: var(--traton-logotype-black-svg);
184
+ /* Background */
185
+ --header-background: var(--component-header-color-background);
172
186
  }
173
-
174
187
  .traton .tl-header {
188
+ /* Brand logo - Black as default (for no mode specified) */
189
+ --header-logotype-local: var(--traton-logotype-black-svg-local);
190
+ --header-logotype-cdn: var(--traton-logotype-black-svg);
175
191
  --component-header-space-profile-padding: 20px;
192
+ /* Background defaults to light mode */
193
+ --header-background: var(--component-header-color-background);
176
194
  }
177
195
 
178
196
  /* Typography Usage mixins */
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
 
package/dist/traton-variables.css CHANGED
@@ -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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.0.1-beta.5",
3
+ "version": "0.0.1-beta.7",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [