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

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/dist/components.css +45 -9
  2. package/dist/tl-header.css +45 -9
  3. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -3171,14 +3171,30 @@ body {
3171
3171
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
3172
3172
  }
3173
3173
 
3174
+ .scania {
3175
+ /* Light mode - explicit light mode class */
3176
+ }
3177
+ .scania .tds-mode-light .tl-header {
3178
+ --header-background: var(--color-brand-primary-800);
3179
+ --header-nav-item: var(--color-foreground-icon-inverse-strong);
3180
+ --header-item-hover: var(--color-brand-primary-700);
3181
+ --header-basic-element-border: var(--color-brand-primary-700);
3182
+ --header-basic-element-background-pressed: var(--color-brand-neutral-white);
3183
+ --header-basic-element-background-selected: var(--color-brand-primary-700);
3184
+ }
3174
3185
  .scania {
3175
3186
  /* Dark mode - override with dark colors */
3176
3187
  }
3177
3188
  .scania .tds-mode-dark .tl-header {
3178
- --header-background: var(--component-header-color-background);
3189
+ --header-background: var(--color-brand-primary-900);
3190
+ --header-nav-item: var(--color-foreground-icon-strong);
3191
+ --header-item-hover: var(--color-brand-primary-800);
3192
+ --header-basic-element-border: var(--color-brand-primary-800);
3193
+ --header-basic-element-background-pressed: var(--color-brand-primary-800);
3194
+ --header-basic-element-background-selected: var(--color-brand-primary-800);
3179
3195
  }
3180
3196
  .scania {
3181
- /* Default .tl-header (works for both light mode and no mode) */
3197
+ /* Default .tl-header (works for no mode specified - defaults to light) */
3182
3198
  }
3183
3199
  .scania .tl-header {
3184
3200
  /* Brand logo */
@@ -3186,30 +3202,50 @@ body {
3186
3202
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
3187
3203
  --component-header-space-profile-padding: 16px;
3188
3204
  /* Background defaults to light mode */
3189
- --header-background: var(--component-header-color-background);
3205
+ --header-background: var(--color-brand-primary-800);
3206
+ --header-nav-item: var(--color-foreground-icon-inverse-strong);
3207
+ --header-item-hover: var(--color-brand-primary-700);
3208
+ --header-basic-element-border: var(--color-brand-primary-700);
3209
+ --header-basic-element-background-pressed: var(--color-brand-neutral-white);
3210
+ --header-basic-element-background-selected: var(--color-brand-primary-700);
3190
3211
  }
3191
3212
 
3192
3213
  .traton .tds-mode-dark .tl-header {
3193
3214
  /* Brand logo - White for dark mode */
3194
3215
  --header-logotype-local: var(--traton-logotype-white-svg-local);
3195
3216
  --header-logotype-cdn: var(--traton-logotype-white-svg);
3196
- /* Background */
3197
- --header-background: var(--component-header-color-background);
3217
+ /* Background - uses base from traton tokens */
3218
+ --header-background: var(--color-background-base);
3219
+ --header-nav-item: var(--color-foreground-icon-strong);
3220
+ --header-item-hover: var(--color-background-layer-01);
3221
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
3222
+ --header-basic-element-background-pressed: var(--color-background-base);
3223
+ --header-basic-element-background-selected: var(--color-background-surface-100);
3198
3224
  }
3199
3225
  .traton .tds-mode-light .tl-header {
3200
3226
  /* Brand logo - Black for light mode */
3201
3227
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3202
3228
  --header-logotype-cdn: var(--traton-logotype-black-svg);
3203
- /* Background */
3204
- --header-background: var(--component-header-color-background);
3229
+ /* Background - uses base from traton tokens */
3230
+ --header-background: var(--color-background-base);
3231
+ --header-nav-item: var(--color-foreground-icon-strong);
3232
+ --header-item-hover: var(--color-background-layer-01);
3233
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
3234
+ --header-basic-element-background-pressed: var(--color-background-base);
3235
+ --header-basic-element-background-selected: var(--color-background-layer-01);
3205
3236
  }
3206
3237
  .traton .tl-header {
3207
3238
  /* Brand logo - Black as default (for no mode specified) */
3208
3239
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3209
3240
  --header-logotype-cdn: var(--traton-logotype-black-svg);
3210
3241
  --component-header-space-profile-padding: 20px;
3211
- /* Background defaults to light mode */
3212
- --header-background: var(--component-header-color-background);
3242
+ /* Background defaults to light mode - uses base from traton tokens */
3243
+ --header-background: var(--color-background-base);
3244
+ --header-nav-item: var(--color-foreground-icon-strong);
3245
+ --header-item-hover: var(--color-background-layer-01);
3246
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
3247
+ --header-basic-element-background-pressed: var(--color-background-base);
3248
+ --header-basic-element-background-selected: var(--color-background-layer-01);
3213
3249
  }
3214
3250
 
3215
3251
  /* Header Elements */
package/dist/tl-header.css CHANGED
@@ -152,14 +152,30 @@
152
152
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
153
153
  }
154
154
 
155
+ .scania {
156
+ /* Light mode - explicit light mode class */
157
+ }
158
+ .scania .tds-mode-light .tl-header {
159
+ --header-background: var(--color-brand-primary-800);
160
+ --header-nav-item: var(--color-foreground-icon-inverse-strong);
161
+ --header-item-hover: var(--color-brand-primary-700);
162
+ --header-basic-element-border: var(--color-brand-primary-700);
163
+ --header-basic-element-background-pressed: var(--color-brand-neutral-white);
164
+ --header-basic-element-background-selected: var(--color-brand-primary-700);
165
+ }
155
166
  .scania {
156
167
  /* Dark mode - override with dark colors */
157
168
  }
158
169
  .scania .tds-mode-dark .tl-header {
159
- --header-background: var(--component-header-color-background);
170
+ --header-background: var(--color-brand-primary-900);
171
+ --header-nav-item: var(--color-foreground-icon-strong);
172
+ --header-item-hover: var(--color-brand-primary-800);
173
+ --header-basic-element-border: var(--color-brand-primary-800);
174
+ --header-basic-element-background-pressed: var(--color-brand-primary-800);
175
+ --header-basic-element-background-selected: var(--color-brand-primary-800);
160
176
  }
161
177
  .scania {
162
- /* Default .tl-header (works for both light mode and no mode) */
178
+ /* Default .tl-header (works for no mode specified - defaults to light) */
163
179
  }
164
180
  .scania .tl-header {
165
181
  /* Brand logo */
@@ -167,30 +183,50 @@
167
183
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
168
184
  --component-header-space-profile-padding: 16px;
169
185
  /* Background defaults to light mode */
170
- --header-background: var(--component-header-color-background);
186
+ --header-background: var(--color-brand-primary-800);
187
+ --header-nav-item: var(--color-foreground-icon-inverse-strong);
188
+ --header-item-hover: var(--color-brand-primary-700);
189
+ --header-basic-element-border: var(--color-brand-primary-700);
190
+ --header-basic-element-background-pressed: var(--color-brand-neutral-white);
191
+ --header-basic-element-background-selected: var(--color-brand-primary-700);
171
192
  }
172
193
 
173
194
  .traton .tds-mode-dark .tl-header {
174
195
  /* Brand logo - White for dark mode */
175
196
  --header-logotype-local: var(--traton-logotype-white-svg-local);
176
197
  --header-logotype-cdn: var(--traton-logotype-white-svg);
177
- /* Background */
178
- --header-background: var(--component-header-color-background);
198
+ /* Background - uses base from traton tokens */
199
+ --header-background: var(--color-background-base);
200
+ --header-nav-item: var(--color-foreground-icon-strong);
201
+ --header-item-hover: var(--color-background-layer-01);
202
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
203
+ --header-basic-element-background-pressed: var(--color-background-base);
204
+ --header-basic-element-background-selected: var(--color-background-surface-100);
179
205
  }
180
206
  .traton .tds-mode-light .tl-header {
181
207
  /* Brand logo - Black for light mode */
182
208
  --header-logotype-local: var(--traton-logotype-black-svg-local);
183
209
  --header-logotype-cdn: var(--traton-logotype-black-svg);
184
- /* Background */
185
- --header-background: var(--component-header-color-background);
210
+ /* Background - uses base from traton tokens */
211
+ --header-background: var(--color-background-base);
212
+ --header-nav-item: var(--color-foreground-icon-strong);
213
+ --header-item-hover: var(--color-background-layer-01);
214
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
215
+ --header-basic-element-background-pressed: var(--color-background-base);
216
+ --header-basic-element-background-selected: var(--color-background-layer-01);
186
217
  }
187
218
  .traton .tl-header {
188
219
  /* Brand logo - Black as default (for no mode specified) */
189
220
  --header-logotype-local: var(--traton-logotype-black-svg-local);
190
221
  --header-logotype-cdn: var(--traton-logotype-black-svg);
191
222
  --component-header-space-profile-padding: 20px;
192
- /* Background defaults to light mode */
193
- --header-background: var(--component-header-color-background);
223
+ /* Background defaults to light mode - uses base from traton tokens */
224
+ --header-background: var(--color-background-base);
225
+ --header-nav-item: var(--color-foreground-icon-strong);
226
+ --header-item-hover: var(--color-background-layer-01);
227
+ --header-basic-element-border: var(--traton-color-transparent-invisible-light);
228
+ --header-basic-element-background-pressed: var(--color-background-base);
229
+ --header-basic-element-background-selected: var(--color-background-layer-01);
194
230
  }
195
231
 
196
232
  /* Typography Usage mixins */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.0.1-beta.7",
3
+ "version": "0.0.1-beta.8",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [