@scania/tegel-lite 0.0.1-beta.4 → 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.
Files changed (9) hide show
  1. package/README.dev.md +51 -7
  2. package/README.md +21 -17
  3. package/dist/components.css +6 -7
  4. package/dist/global.css +22 -17
  5. package/dist/tl-button.css +2 -2
  6. package/dist/tl-header.css +4 -5
  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
@@ -16,18 +16,28 @@ npm install @scania/tegel-lite
16
16
 
17
17
  ## 🚀 Quick Start
18
18
 
19
- ### Import all styles (global)
19
+ ### Option 1: All Components (Recommended)
20
20
 
21
21
  ```javascript
22
+ // Import brand variables (Scania or Traton)
23
+ import '@scania/tegel-lite/scania-variables.css';
24
+
25
+ // Import component tokens (required)
22
26
  import '@scania/tegel-lite/global.css';
27
+
28
+ // Import all components in one file
29
+ import '@scania/tegel-lite/components.css';
23
30
  ```
24
31
 
25
- ### Import specific components (recommended)
32
+ ### Option 2: Import specific components (tree-shaking)
26
33
 
27
34
  ```javascript
28
35
  // Import brand variables (Scania or Traton)
29
36
  import '@scania/tegel-lite/scania-variables.css';
30
37
 
38
+ // Import component tokens (required)
39
+ import '@scania/tegel-lite/global.css';
40
+
31
41
  // Import individual components
32
42
  import '@scania/tegel-lite/tl-button.css';
33
43
  import '@scania/tegel-lite/tl-header.css';
@@ -80,7 +90,9 @@ The files used as source for `@scania/tegel-lite` library are located in `packag
80
90
 
81
91
  - **packages/core/src/global/tegel-lite-components.scss**: All Tegel Lite component styles are imported here. This file is imported in the `packages/core/global/global.scss` file and thus enables Storybook documentation for Tegel Lite components.
82
92
 
83
- - **packages/core/src/global/tegel-lite-global.scss**: All global styles and variables are imported here. This file is compiled into a single `global.css` file in the `packages/tegel-lite/dist` folder.
93
+ - **packages/core/src/tegel-lite/components.scss**: All Tegel Lite component imports in one bundle file. This file is compiled into `components.css` in the `packages/tegel-lite/dist` folder.
94
+
95
+ - **packages/core/src/global/scania-variables.scss** and **traton-variables.scss**: Brand-specific variables (colors, fonts, tokens). These are compiled into separate CSS files in the `packages/tegel-lite/dist` folder.
84
96
 
85
97
  - **packages/core/src/tegel-lite/components**: Each component (e.g., tl-button, tl-header) lives in its own folder with `.scss` files. Each component will be compiled into a separate CSS file in the `packages/tegel-lite/dist` folder. An export will be added to the `packages/tegel-lite/package.json` file to enable importing of the components in the consuming project.
86
98
 
@@ -92,7 +104,9 @@ The following scripts are used during build of `Tegel Lite`:
92
104
 
93
105
  - **packages/core/scripts/copy-tegel-lite-assets.js**: Handling copy and output of assets neccessary for the `Tegel Lite` library.
94
106
 
95
- - All global styles, variables etc are compiled into a single `global.css` file.
107
+ - Brand variables (Scania & Traton) are compiled into separate CSS files: `scania-variables.css` and `traton-variables.css`.
108
+ - Component tokens are compiled into `global.css` containing component-level CSS variables.
109
+ - All components can be imported together via `components.css` (recommended) or individually for tree-shaking.
96
110
  - Each component (e.g., tl-button, tl-header) lives in its own folder with `.scss` files and is compiled into a separate CSS file.
97
111
  - Components classes are prefixed with `tl-` to avoid conflicts with other styles.
98
112
  - Classes follow BEM convention: `tl-button`, `tl-button__label`, `tl-button--primary` etc. [Read more about Tegel Lite **Scss** conventions here](#tegel-lite-scss-conventions)
@@ -100,14 +114,22 @@ The following scripts are used during build of `Tegel Lite`:
100
114
 
101
115
  ### Example usage in consumer app (Examples from Next.js application)
102
116
 
103
- - For globals you import the `global.css` file:
117
+ - You must import three files in order:
104
118
 
105
119
  ```tsx
106
120
  // layout.tsx
107
- import "@scania/tegel-lite/global.css"
121
+ import "@scania/tegel-lite/scania-variables.css" // or traton-variables.css
122
+ import "@scania/tegel-lite/global.css" // Component tokens (required)
123
+ import "@scania/tegel-lite/components.css" // All components
108
124
  ```
109
125
 
110
- - For components you import only the styles you need:
126
+ - Or for tree-shaking, import specific components:
127
+
128
+ ```tsx
129
+ // layout.tsx
130
+ import "@scania/tegel-lite/scania-variables.css" // or traton-variables.css
131
+ import "@scania/tegel-lite/global.css" // Component tokens (required)
132
+ ```
111
133
 
112
134
  ```tsx
113
135
  // TegelButton.tsx
@@ -148,6 +170,28 @@ The following scripts are used during build of `Tegel Lite`:
148
170
  export default TegelButton
149
171
  ```
150
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
+
151
195
  Checkout the Tegel Storybook documentation for more examples and usage.
152
196
 
153
197
  ---
package/README.md CHANGED
@@ -15,31 +15,30 @@ npm install @scania/tegel-lite
15
15
 
16
16
  ## Quick Start
17
17
 
18
- **You must import brand variables separately** - `global.css` only contains component styles.
18
+ **You must import brand variables separately** - component files only contain component styles.
19
19
 
20
- ### Scania Brand
20
+ ### Option 1: All Components (Recommended for most apps)
21
21
 
22
22
  ```javascript
23
- import '@scania/tegel-lite/scania-variables.css';
24
- import '@scania/tegel-lite'; // All components
25
- ```
26
-
27
- ### TRATON Brand
28
-
29
- ```javascript
30
- import '@scania/tegel-lite/traton-variables.css';
31
- import '@scania/tegel-lite'; // All components
23
+ import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
24
+ import '@scania/tegel-lite/global.css'; // Component tokens (required)
25
+ import '@scania/tegel-lite/components.css'; // All components
32
26
  ```
33
27
 
34
- ### Tree-shaking (Import Specific Components)
28
+ ### Option 2: Tree-shaking (Import Specific Components)
35
29
 
36
30
  ```javascript
37
31
  import '@scania/tegel-lite/scania-variables.css'; // or traton-variables.css
32
+ import '@scania/tegel-lite/global.css'; // Component tokens (required)
38
33
  import '@scania/tegel-lite/tl-button.css';
39
34
  import '@scania/tegel-lite/tl-card.css';
35
+ import '@scania/tegel-lite/tl-header.css';
40
36
  ```
41
37
 
42
- > **Important:** Always import a brand variables file first (`scania-variables.css` or `traton-variables.css`) before any components.
38
+ > **Important:** You must import three files in order:
39
+ > 1. Brand variables (`scania-variables.css` or `traton-variables.css`)
40
+ > 2. Component tokens (`global.css`)
41
+ > 3. Component styles (`components.css` or individual `tl-*.css` files)
43
42
 
44
43
  **HTML Usage:**
45
44
 
@@ -49,10 +48,11 @@ import '@scania/tegel-lite/tl-card.css';
49
48
  </button>
50
49
  ```
51
50
 
52
- ## Components (35 total)
51
+ ## Components
53
52
 
54
53
  **Layout:** header, footer, side-menu, breadcrumbs
55
54
  **Forms:** text-field, textarea, checkbox, radio-button, toggle, dropdown, datetime, slider
55
+ **Navigation:** folder-tabs, inline-tabs, navigation-tabs
56
56
  **Buttons:** button, link, chip
57
57
  **Display:** card, table, accordion, stepper, step, badge, divider, block, icon
58
58
  **Overlays:** modal, toast, banner, message, tooltip, popover-menu, popover-canvas, spinner
@@ -61,17 +61,21 @@ import '@scania/tegel-lite/tl-card.css';
61
61
 
62
62
  ```
63
63
  dist/
64
- ├── global.css # All 35 components (no variables)
64
+ ├── global.css # Component tokens
65
+ ├── components.css # All components
65
66
  ├── scania-variables.css # Scania brand (colors, fonts, tokens)
66
67
  ├── traton-variables.css # TRATON brand (colors, fonts, tokens)
67
- ├── tl-*.css # Individual components
68
+ ├── tl-*.css # Individual components for tree-shaking
68
69
  └── assets/
69
70
  ├── fonts/ # Latin & Cyrillic fonts
70
71
  ├── icons/ # SVG icons
71
72
  └── logos/ # Brand logos
72
73
  ```
73
74
 
74
- **Important:** `global.css` does NOT include brand variables. You must import `scania-variables.css` or `traton-variables.css` separately.
75
+ **Import Order:**
76
+ 1. Brand variables (`scania-variables.css` or `traton-variables.css`)
77
+ 2. Component tokens (`global.css`)
78
+ 3. Component styles (`components.css` or individual `tl-*.css` files)
75
79
 
76
80
  ## BEM Naming Convention
77
81
 
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);
@@ -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, :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);
@@ -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
 
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.4",
3
+ "version": "0.0.1-beta.6",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [