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

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 (3) hide show
  1. package/README.dev.md +29 -7
  2. package/README.md +21 -17
  3. 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
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 52+ 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 (52+ total)
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 (required, ~6500 lines)
65
+ ├── components.css # All 52+ components (~9500 lines)
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/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.5",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [