@scania/tegel-lite 0.0.1 → 0.0.2-rules-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.
- package/.ai/rules/01-design-tokens.mdc +318 -0
- package/.ai/rules/02-components-forms.mdc +396 -0
- package/.ai/rules/03-components-display.mdc +474 -0
- package/.ai/rules/04-components-navigation.mdc +358 -0
- package/.ai/rules/05-guidelines.mdc +144 -0
- package/.ai/rules/06-patterns.mdc +352 -0
- package/.cursor/rules/tegel-lite/01-design-tokens.mdc +317 -0
- package/.cursor/rules/tegel-lite/02-components-forms.mdc +395 -0
- package/.cursor/rules/tegel-lite/03-components-display.mdc +473 -0
- package/.cursor/rules/tegel-lite/04-components-navigation.mdc +357 -0
- package/.cursor/rules/tegel-lite/05-guidelines.mdc +143 -0
- package/.cursor/rules/tegel-lite/06-patterns.mdc +351 -0
- package/.github/copilot-instructions.md +2045 -0
- package/AGENTS.md +2045 -0
- package/CLAUDE.md +2045 -0
- package/README.dev.md +1 -1
- package/README.md +30 -1
- package/bin/setup-ai-rules.js +347 -0
- package/dist/components.css +229 -3
- package/dist/global.css +7 -3
- package/dist/tl-card.css +6 -3
- package/package.json +14 -3
|
@@ -0,0 +1,318 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Design tokens, variables, colors, spacing, typography, and layout standards
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Design Tokens & Variables
|
|
7
|
+
|
|
8
|
+
## RULE: ALWAYS use design tokens instead of hardcoded values.
|
|
9
|
+
|
|
10
|
+
## Primitive Color Tokens (from scania-variables.css)
|
|
11
|
+
|
|
12
|
+
### Blue (Primary Brand)
|
|
13
|
+
|
|
14
|
+
| Token | Value |
|
|
15
|
+
| ------------------------- | --------- |
|
|
16
|
+
| `--scania-color-blue-50` | `#d8dde5` |
|
|
17
|
+
| `--scania-color-blue-100` | `#bacde8` |
|
|
18
|
+
| `--scania-color-blue-200` | `#87afe8` |
|
|
19
|
+
| `--scania-color-blue-300` | `#4a89f3` |
|
|
20
|
+
| `--scania-color-blue-400` | `#2a6ecf` |
|
|
21
|
+
| `--scania-color-blue-500` | `#2058a8` |
|
|
22
|
+
| `--scania-color-blue-600` | `#16417f` |
|
|
23
|
+
| `--scania-color-blue-700` | `#0f3263` |
|
|
24
|
+
| `--scania-color-blue-800` | `#041e42` |
|
|
25
|
+
| `--scania-color-blue-900` | `#001533` |
|
|
26
|
+
|
|
27
|
+
### Red (Secondary Brand / Danger)
|
|
28
|
+
|
|
29
|
+
| Token | Value |
|
|
30
|
+
| ------------------------ | --------- |
|
|
31
|
+
| `--scania-color-red-50` | `#ffdfe3` |
|
|
32
|
+
| `--scania-color-red-100` | `#ffb9b8` |
|
|
33
|
+
| `--scania-color-red-200` | `#fc8a88` |
|
|
34
|
+
| `--scania-color-red-300` | `#ea4851` |
|
|
35
|
+
| `--scania-color-red-400` | `#d1001b` |
|
|
36
|
+
| `--scania-color-red-500` | `#b20018` |
|
|
37
|
+
| `--scania-color-red-600` | `#8a0012` |
|
|
38
|
+
| `--scania-color-red-700` | `#6c0011` |
|
|
39
|
+
| `--scania-color-red-800` | `#480008` |
|
|
40
|
+
| `--scania-color-red-900` | `#350004` |
|
|
41
|
+
|
|
42
|
+
### Green (Success)
|
|
43
|
+
|
|
44
|
+
| Token | Value |
|
|
45
|
+
| -------------------------- | --------- |
|
|
46
|
+
| `--scania-color-green-50` | `#d3eee7` |
|
|
47
|
+
| `--scania-color-green-100` | `#9bd9c2` |
|
|
48
|
+
| `--scania-color-green-200` | `#65bda5` |
|
|
49
|
+
| `--scania-color-green-300` | `#009e7e` |
|
|
50
|
+
| `--scania-color-green-400` | `#008064` |
|
|
51
|
+
| `--scania-color-green-500` | `#00664f` |
|
|
52
|
+
| `--scania-color-green-600` | `#004c3b` |
|
|
53
|
+
| `--scania-color-green-700` | `#0a382e` |
|
|
54
|
+
| `--scania-color-green-800` | `#00251b` |
|
|
55
|
+
| `--scania-color-green-900` | `#001a12` |
|
|
56
|
+
|
|
57
|
+
### Yellow (Warning)
|
|
58
|
+
|
|
59
|
+
| Token | Value |
|
|
60
|
+
| --------------------------- | --------- |
|
|
61
|
+
| `--scania-color-yellow-50` | `#f9eec3` |
|
|
62
|
+
| `--scania-color-yellow-100` | `#f8e596` |
|
|
63
|
+
| `--scania-color-yellow-200` | `#f4d65d` |
|
|
64
|
+
| `--scania-color-yellow-300` | `#f1c21b` |
|
|
65
|
+
| `--scania-color-yellow-400` | `#eaad06` |
|
|
66
|
+
| `--scania-color-yellow-500` | `#b87c14` |
|
|
67
|
+
| `--scania-color-yellow-600` | `#975717` |
|
|
68
|
+
| `--scania-color-yellow-700` | `#6b3b10` |
|
|
69
|
+
| `--scania-color-yellow-800` | `#4d260a` |
|
|
70
|
+
| `--scania-color-yellow-900` | `#361b07` |
|
|
71
|
+
|
|
72
|
+
### Grey (Neutral)
|
|
73
|
+
|
|
74
|
+
| Token | Value |
|
|
75
|
+
| -------------------------- | --------- |
|
|
76
|
+
| `--scania-color-grey-00` | `#fff` |
|
|
77
|
+
| `--scania-color-grey-50` | `#f6f7f9` |
|
|
78
|
+
| `--scania-color-grey-100` | `#edeff3` |
|
|
79
|
+
| `--scania-color-grey-150` | `#e0e5eb` |
|
|
80
|
+
| `--scania-color-grey-200` | `#d1d7e0` |
|
|
81
|
+
| `--scania-color-grey-250` | `#b4becd` |
|
|
82
|
+
| `--scania-color-grey-300` | `#93a2b7` |
|
|
83
|
+
| `--scania-color-grey-350` | `#7e90a9` |
|
|
84
|
+
| `--scania-color-grey-400` | `#6e829f` |
|
|
85
|
+
| `--scania-color-grey-500` | `#5f728c` |
|
|
86
|
+
| `--scania-color-grey-600` | `#4e5e75` |
|
|
87
|
+
| `--scania-color-grey-700` | `#3a4554` |
|
|
88
|
+
| `--scania-color-grey-800` | `#242c37` |
|
|
89
|
+
| `--scania-color-grey-850` | `#1c222b` |
|
|
90
|
+
| `--scania-color-grey-900` | `#15181d` |
|
|
91
|
+
| `--scania-color-grey-950` | `#0e1013` |
|
|
92
|
+
| `--scania-color-grey-1000` | `#000` |
|
|
93
|
+
|
|
94
|
+
## Semantic Color Tokens (Light Mode)
|
|
95
|
+
|
|
96
|
+
Use these instead of primitive colors in layouts:
|
|
97
|
+
|
|
98
|
+
### Backgrounds
|
|
99
|
+
|
|
100
|
+
| Token | Usage |
|
|
101
|
+
| -------------------------------------------------------------------------- | ------------------------------------- |
|
|
102
|
+
| `--color-background-base` | Page/app base background |
|
|
103
|
+
| `--color-background-layer-01` | Primary card/section background |
|
|
104
|
+
| `--color-background-layer-02` | Secondary/nested background |
|
|
105
|
+
| `--color-background-layer-03` | Third-level nested background |
|
|
106
|
+
| `--color-background-overlay` | Modal/drawer backdrop |
|
|
107
|
+
| `--color-background-top` | Top-level surface |
|
|
108
|
+
| `--color-background-accent-primary-default` | Primary button background |
|
|
109
|
+
| `--color-background-accent-primary-hover` | Primary button hover |
|
|
110
|
+
| `--color-background-accent-primary-pressed` | Primary button pressed |
|
|
111
|
+
| `--color-background-accent-primary-disabled` | Disabled button background |
|
|
112
|
+
| `--color-background-accent-danger-default` | Danger action background |
|
|
113
|
+
| `--color-background-surface-100` through `--color-background-surface-1000` | Surface levels for subtle backgrounds |
|
|
114
|
+
|
|
115
|
+
### Text (Foreground)
|
|
116
|
+
|
|
117
|
+
| Token | Usage |
|
|
118
|
+
| ---------------------------------------- | ---------------------- |
|
|
119
|
+
| `--color-foreground-text-strong` | Primary text, headings |
|
|
120
|
+
| `--color-foreground-text-defined` | Secondary text, labels |
|
|
121
|
+
| `--color-foreground-text-soft` | Tertiary text |
|
|
122
|
+
| `--color-foreground-text-subtle` | Placeholder, hint text |
|
|
123
|
+
| `--color-foreground-text-disabled` | Disabled text |
|
|
124
|
+
| `--color-foreground-text-accent-default` | Link text |
|
|
125
|
+
| `--color-foreground-text-accent-visited` | Visited link |
|
|
126
|
+
| `--color-foreground-text-brand` | Brand-colored text |
|
|
127
|
+
|
|
128
|
+
### Borders
|
|
129
|
+
|
|
130
|
+
| Token | Usage |
|
|
131
|
+
| ---------------------------------------- | ---------------------- |
|
|
132
|
+
| `--color-foreground-border-strong` | Strong visible borders |
|
|
133
|
+
| `--color-foreground-border-soft` | Default input borders |
|
|
134
|
+
| `--color-foreground-border-subtle` | Hover borders |
|
|
135
|
+
| `--color-foreground-border-discrete` | Divider lines |
|
|
136
|
+
| `--color-foreground-border-accent-focus` | Focus ring color |
|
|
137
|
+
| `--color-foreground-border-disabled` | Disabled borders |
|
|
138
|
+
|
|
139
|
+
### Icons
|
|
140
|
+
|
|
141
|
+
| Token | Usage |
|
|
142
|
+
| ---------------------------------- | --------------- |
|
|
143
|
+
| `--color-foreground-icon-strong` | Primary icons |
|
|
144
|
+
| `--color-foreground-icon-defined` | Secondary icons |
|
|
145
|
+
| `--color-foreground-icon-soft` | Tertiary icons |
|
|
146
|
+
| `--color-foreground-icon-subtle` | Faint icons |
|
|
147
|
+
| `--color-foreground-icon-disabled` | Disabled icons |
|
|
148
|
+
|
|
149
|
+
### System / Status Colors
|
|
150
|
+
|
|
151
|
+
| Token | Usage |
|
|
152
|
+
| --------------------------------- | ------------------------- |
|
|
153
|
+
| `--color-system-success-default` | Success states (green) |
|
|
154
|
+
| `--color-system-success-discrete` | Success background tint |
|
|
155
|
+
| `--color-system-warning-default` | Warning states (yellow) |
|
|
156
|
+
| `--color-system-warning-discrete` | Warning background tint |
|
|
157
|
+
| `--color-system-danger-default` | Error/danger states (red) |
|
|
158
|
+
| `--color-system-danger-discrete` | Error background tint |
|
|
159
|
+
| `--color-system-info-default` | Info states (blue) |
|
|
160
|
+
| `--color-system-info-discrete` | Info background tint |
|
|
161
|
+
|
|
162
|
+
## Spacing Units
|
|
163
|
+
|
|
164
|
+
| Token | Value |
|
|
165
|
+
| ------------------- | ------- |
|
|
166
|
+
| `--scania-unit-0` | `0` |
|
|
167
|
+
| `--scania-unit-1` | `1px` |
|
|
168
|
+
| `--scania-unit-2` | `2px` |
|
|
169
|
+
| `--scania-unit-4` | `4px` |
|
|
170
|
+
| `--scania-unit-8` | `8px` |
|
|
171
|
+
| `--scania-unit-12` | `12px` |
|
|
172
|
+
| `--scania-unit-16` | `16px` |
|
|
173
|
+
| `--scania-unit-20` | `20px` |
|
|
174
|
+
| `--scania-unit-24` | `24px` |
|
|
175
|
+
| `--scania-unit-32` | `32px` |
|
|
176
|
+
| `--scania-unit-40` | `40px` |
|
|
177
|
+
| `--scania-unit-48` | `48px` |
|
|
178
|
+
| `--scania-unit-56` | `56px` |
|
|
179
|
+
| `--scania-unit-64` | `64px` |
|
|
180
|
+
| `--scania-unit-80` | `80px` |
|
|
181
|
+
| `--scania-unit-96` | `96px` |
|
|
182
|
+
| `--scania-unit-120` | `120px` |
|
|
183
|
+
|
|
184
|
+
## Dimension/Spacing Semantic Tokens
|
|
185
|
+
|
|
186
|
+
| Token | Value | Usage |
|
|
187
|
+
| -------------------------- | ------ | ----------------------- |
|
|
188
|
+
| `--dimension-space-tiny` | `4px` | Micro spacing |
|
|
189
|
+
| `--dimension-space-small` | `16px` | Default element spacing |
|
|
190
|
+
| `--dimension-space-medium` | `24px` | Section padding |
|
|
191
|
+
| `--dimension-space-large` | `48px` | Large gaps |
|
|
192
|
+
| `--dimension-space-huge` | `80px` | Hero sections |
|
|
193
|
+
|
|
194
|
+
## Border Radius Tokens
|
|
195
|
+
|
|
196
|
+
| Token | Value | Usage |
|
|
197
|
+
| ------------------------------------------ | -------- | -------------------------- |
|
|
198
|
+
| `--dimension-radius-narrow` | `4px` | Buttons, inputs, cards |
|
|
199
|
+
| `--dimension-radius-soft` | `8px` | Larger containers |
|
|
200
|
+
| `--dimension-radius-rounded` | `32px` | Chips, pills |
|
|
201
|
+
| `--dimension-radius-circle` | `9999px` | Avatars, circular elements |
|
|
202
|
+
| `--dimension-radius-for-surface-clickable` | `4px` | Clickable elements |
|
|
203
|
+
| `--dimension-radius-for-surface-field` | `4px` | Form fields |
|
|
204
|
+
|
|
205
|
+
## Font Families
|
|
206
|
+
|
|
207
|
+
| Token | Value | Usage |
|
|
208
|
+
| ------------------------------------- | ---------------------------- | ----------------------- |
|
|
209
|
+
| `--scania-font-family-display` | `scania sans headline` | Display/headline text |
|
|
210
|
+
| `--scania-font-family-default` | `scania sans` | Body/default text |
|
|
211
|
+
| `--scania-font-family-semi-condensed` | `scania sans semi condensed` | Side menu, compact text |
|
|
212
|
+
|
|
213
|
+
## Font Weights
|
|
214
|
+
|
|
215
|
+
| Token | Value |
|
|
216
|
+
| ------------------------------ | ----- |
|
|
217
|
+
| `--scania-font-weight-regular` | `400` |
|
|
218
|
+
| `--scania-font-weight-bold` | `700` |
|
|
219
|
+
|
|
220
|
+
## Motion/Animation Tokens
|
|
221
|
+
|
|
222
|
+
| Token | Value | Usage |
|
|
223
|
+
| ----------------------------------- | -------------------------------- | -------------------- |
|
|
224
|
+
| `--tds-motion-duration-fast-01` | `100ms` | Micro-interactions |
|
|
225
|
+
| `--tds-motion-duration-fast-02` | `150ms` | Quick transitions |
|
|
226
|
+
| `--tds-motion-duration-moderate-01` | `200ms` | Standard transitions |
|
|
227
|
+
| `--tds-motion-duration-moderate-02` | `300ms` | Moderate animations |
|
|
228
|
+
| `--tds-motion-duration-slow-01` | `400ms` | Complex animations |
|
|
229
|
+
| `--tds-motion-duration-slow-02` | `500ms` | Full animations |
|
|
230
|
+
| `--tds-motion-easing-scania` | `cubic-bezier(0.4, 0, 0, 1)` | Default easing |
|
|
231
|
+
| `--tds-motion-easing-enter` | `cubic-bezier(0.1, 0.9, 0.2, 1)` | Enter transitions |
|
|
232
|
+
| `--tds-motion-easing-exit` | `cubic-bezier(0.7, 0, 1, 0.5)` | Exit transitions |
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
# Typography
|
|
237
|
+
|
|
238
|
+
## Typography Scale (defined in scania-variables.css under `.scania`)
|
|
239
|
+
|
|
240
|
+
### Display (Hero/Marketing)
|
|
241
|
+
|
|
242
|
+
- **Display 01**: 216px / 183px LH / uppercase / Scania Sans Headline Bold
|
|
243
|
+
- **Display 02**: 156px / 148px LH / uppercase / Scania Sans Headline Bold
|
|
244
|
+
- **Display 03**: 112px / 106px LH / uppercase / Scania Sans Headline Bold
|
|
245
|
+
- **Display 04**: 80px / 80px LH / uppercase / Scania Sans Headline Bold
|
|
246
|
+
- **Display 05**: 56px / 56px LH / uppercase / Scania Sans Headline Bold
|
|
247
|
+
|
|
248
|
+
### Headlines
|
|
249
|
+
|
|
250
|
+
- **Headline 01**: 40px / 40px LH / uppercase / Scania Sans Headline Bold
|
|
251
|
+
- **Headline 02**: 32px / 32px LH / Scania Sans Bold / ls: -1.28px
|
|
252
|
+
- **Headline 03**: 24px / 24px LH / Scania Sans Bold / ls: -0.72px
|
|
253
|
+
- **Headline 04**: 20px / 24px LH / Scania Sans Bold / ls: -0.4px
|
|
254
|
+
- **Headline 05**: 16px / 24px LH / Scania Sans Bold / ls: -0.32px
|
|
255
|
+
- **Headline 06**: 14px / 16px LH / uppercase / Scania Sans Bold / ls: -0.28px
|
|
256
|
+
|
|
257
|
+
### Paragraphs / Body
|
|
258
|
+
|
|
259
|
+
- **Paragraph 01**: 24px / 32px LH / Scania Sans Regular / ls: -0.72px
|
|
260
|
+
- **Paragraph 02**: 20px / 24px LH / Scania Sans Regular / ls: -0.2px
|
|
261
|
+
- **Body 01**: 16px / 24px LH / Scania Sans Regular / ls: -0.32px
|
|
262
|
+
- **Body 02**: 14px / 20px LH / Scania Sans Regular / ls: -0.14px
|
|
263
|
+
|
|
264
|
+
### Component Text
|
|
265
|
+
|
|
266
|
+
- **Component Text 01**: 14px / 16px LH / ls: -0.14px
|
|
267
|
+
- **Component Text 02**: 14px / 20px LH / ls: -0.14px
|
|
268
|
+
- **Component Label 01**: 12px / 16px LH / ls: 0
|
|
269
|
+
- **Component Label 02**: 10px / 8px LH / ls: 0
|
|
270
|
+
- **Component Title 01**: 14px / 16px LH / ls: -0.14px
|
|
271
|
+
- **Component Title 02**: 10px / 16px LH / uppercase / ls: 0.8px
|
|
272
|
+
|
|
273
|
+
### Links
|
|
274
|
+
|
|
275
|
+
- **Link 01**: 16px / 24px LH / ls: -0.32px
|
|
276
|
+
- **Link 02**: 14px / 20px LH / ls: -0.14px
|
|
277
|
+
|
|
278
|
+
## Typography Usage in Components
|
|
279
|
+
|
|
280
|
+
Components use internal typography tokens like `--detail-02-*`, `--headline-07-*`, `--body-01-*` etc. These are automatically applied. Do NOT manually set font properties on Tegel components.
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
# Layout & Grid
|
|
285
|
+
|
|
286
|
+
Tegel Lite does not include a CSS grid utility system. Use standard CSS Grid/Flexbox with Tegel tokens:
|
|
287
|
+
|
|
288
|
+
```html
|
|
289
|
+
<div
|
|
290
|
+
class="scania tds-mode-light"
|
|
291
|
+
style="
|
|
292
|
+
display: grid;
|
|
293
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
294
|
+
gap: var(--dimension-space-small);
|
|
295
|
+
padding: var(--dimension-space-medium);
|
|
296
|
+
"
|
|
297
|
+
>
|
|
298
|
+
<!-- Grid items -->
|
|
299
|
+
</div>
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
## Layout Components
|
|
303
|
+
|
|
304
|
+
- **Header** (`.tl-header`) – Full-width app bar, fixed at top
|
|
305
|
+
- **Side Menu** (`.tl-side-menu`) – Navigation sidebar, collapsible
|
|
306
|
+
- **Footer** (`.tl-footer`) – Multi-section page footer
|
|
307
|
+
|
|
308
|
+
## Breakpoints (used in components)
|
|
309
|
+
|
|
310
|
+
| Breakpoint | Value | Usage |
|
|
311
|
+
| ---------- | -------- | ------------- |
|
|
312
|
+
| xs | `320px` | Mobile |
|
|
313
|
+
| sm | `384px` | Small mobile |
|
|
314
|
+
| md | `672px` | Tablet |
|
|
315
|
+
| lg | `992px` | Desktop |
|
|
316
|
+
| xl | `1056px` | Large desktop |
|
|
317
|
+
| xxl | `1312px` | Wide desktop |
|
|
318
|
+
| xxxl | `1584px` | Ultra-wide |
|