@scania/tegel-lite 0.0.1-beta.6 → 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 +59 -4
  2. package/dist/tl-header.css +59 -4
  3. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -3125,8 +3125,7 @@ body {
3125
3125
  }
3126
3126
 
3127
3127
  .tl-header {
3128
- /* Base background & text */
3129
- --header-background: var(--component-header-color-background);
3128
+ /* Base text */
3130
3129
  --header-nav-item: var(--component-header-color-foreground-strong);
3131
3130
  /* Nav-item states */
3132
3131
  --header-nav-item-background-hover: var(--color-background-surface-100);
@@ -3172,25 +3171,81 @@ body {
3172
3171
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
3173
3172
  }
3174
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
+ }
3185
+ .scania {
3186
+ /* Dark mode - override with dark colors */
3187
+ }
3188
+ .scania .tds-mode-dark .tl-header {
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);
3195
+ }
3196
+ .scania {
3197
+ /* Default .tl-header (works for no mode specified - defaults to light) */
3198
+ }
3175
3199
  .scania .tl-header {
3176
3200
  /* Brand logo */
3177
3201
  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
3178
3202
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
3179
3203
  --component-header-space-profile-padding: 16px;
3204
+ /* Background defaults to light mode */
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);
3180
3211
  }
3181
3212
 
3182
3213
  .traton .tds-mode-dark .tl-header {
3183
- /* Brand logo */
3214
+ /* Brand logo - White for dark mode */
3184
3215
  --header-logotype-local: var(--traton-logotype-white-svg-local);
3185
3216
  --header-logotype-cdn: var(--traton-logotype-white-svg);
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);
3186
3224
  }
3187
3225
  .traton .tds-mode-light .tl-header {
3188
- /* Brand logo */
3226
+ /* Brand logo - Black for light mode */
3189
3227
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3190
3228
  --header-logotype-cdn: var(--traton-logotype-black-svg);
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);
3191
3236
  }
3192
3237
  .traton .tl-header {
3238
+ /* Brand logo - Black as default (for no mode specified) */
3239
+ --header-logotype-local: var(--traton-logotype-black-svg-local);
3240
+ --header-logotype-cdn: var(--traton-logotype-black-svg);
3193
3241
  --component-header-space-profile-padding: 20px;
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);
3194
3249
  }
3195
3250
 
3196
3251
  /* Header Elements */
package/dist/tl-header.css CHANGED
@@ -106,8 +106,7 @@
106
106
  }
107
107
 
108
108
  .tl-header {
109
- /* Base background & text */
110
- --header-background: var(--component-header-color-background);
109
+ /* Base text */
111
110
  --header-nav-item: var(--component-header-color-foreground-strong);
112
111
  /* Nav-item states */
113
112
  --header-nav-item-background-hover: var(--color-background-surface-100);
@@ -153,25 +152,81 @@
153
152
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
154
153
  }
155
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
+ }
166
+ .scania {
167
+ /* Dark mode - override with dark colors */
168
+ }
169
+ .scania .tds-mode-dark .tl-header {
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);
176
+ }
177
+ .scania {
178
+ /* Default .tl-header (works for no mode specified - defaults to light) */
179
+ }
156
180
  .scania .tl-header {
157
181
  /* Brand logo */
158
182
  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
159
183
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
160
184
  --component-header-space-profile-padding: 16px;
185
+ /* Background defaults to light mode */
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);
161
192
  }
162
193
 
163
194
  .traton .tds-mode-dark .tl-header {
164
- /* Brand logo */
195
+ /* Brand logo - White for dark mode */
165
196
  --header-logotype-local: var(--traton-logotype-white-svg-local);
166
197
  --header-logotype-cdn: var(--traton-logotype-white-svg);
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);
167
205
  }
168
206
  .traton .tds-mode-light .tl-header {
169
- /* Brand logo */
207
+ /* Brand logo - Black for light mode */
170
208
  --header-logotype-local: var(--traton-logotype-black-svg-local);
171
209
  --header-logotype-cdn: var(--traton-logotype-black-svg);
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);
172
217
  }
173
218
  .traton .tl-header {
219
+ /* Brand logo - Black as default (for no mode specified) */
220
+ --header-logotype-local: var(--traton-logotype-black-svg-local);
221
+ --header-logotype-cdn: var(--traton-logotype-black-svg);
174
222
  --component-header-space-profile-padding: 20px;
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);
175
230
  }
176
231
 
177
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.6",
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": [