@scania/tegel-lite 1.8.0-dd-select-all-beta.1 → 1.9.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.
Files changed (10) hide show
  1. package/README.dev.md +2 -5
  2. package/dist/assets/icons/scania/email_open.svg +5 -0
  3. package/dist/assets/icons/traton/email_open.svg +5 -0
  4. package/dist/components.css +9 -1
  5. package/dist/scania-variables.css +2 -0
  6. package/dist/tl-dropdown.css +447 -1
  7. package/dist/tl-icon.css +4 -0
  8. package/dist/tl-text-field.css +4 -0
  9. package/dist/traton-variables.css +2 -0
  10. package/package.json +2 -2
package/README.dev.md CHANGED
@@ -465,8 +465,6 @@ To document and test the component, create a `.stories.tsx` file in inside the c
465
465
 
466
466
  ```tsx
467
467
 
468
- import formatHtmlPreview from '../../../stories/formatHtmlPreview';
469
-
470
468
  export default {
471
469
  title: 'Tegel Lite (CSS)/Alert',
472
470
  parameters: {
@@ -500,13 +498,13 @@ export default {
500
498
  };
501
499
 
502
500
  const Template = ({ variant, message }) =>
503
- formatHtmlPreview(`
501
+ `
504
502
  <!-- Required stylesheet
505
503
  "@scania/tegel-lite/tl-alert.css"
506
504
  -->
507
505
 
508
506
  <span class="tl-alert tl-alert--${variant}">${message}</span>
509
- `);
507
+ `;
510
508
 
511
509
  export const Default = Template.bind({});
512
510
 
@@ -532,4 +530,3 @@ This will:
532
530
  After the build, check `packages/tegel-lite/dist/`: You should see a CSS file for your new component (e.g., `tl-alert.css`).
533
531
 
534
532
 
535
-
package/dist/assets/icons/scania/email_open.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
2
+ <path d="M19.2311 13.9002C19.7144 13.9002 20.1061 14.236 20.1061 14.6502C20.1061 15.0644 19.7143 15.4002 19.2311 15.4002H12.8145C12.3313 15.4002 11.9395 15.0644 11.9395 14.6502C11.9395 14.2361 12.3313 13.9003 12.8145 13.9002H19.2311Z" fill="black" />
3
+ <path d="M20.9048 11.1629C21.3878 11.1631 21.7797 11.4989 21.7798 11.9129C21.7798 12.327 21.3878 12.6627 20.9048 12.6629H11.1419C10.6587 12.6629 10.2669 12.3271 10.2669 11.9129C10.267 11.4988 10.6587 11.1629 11.1419 11.1629H20.9048Z" fill="black" />
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7855 4.15804C15.5072 3.801 16.3971 3.801 17.1188 4.15804L22.9647 7.05062H23.5685C24.613 7.05083 25.4973 7.63982 25.7948 8.45101L28.8333 9.95491C29.5544 10.3122 29.9998 10.9734 30 11.6873V26.0994C29.9996 27.2034 28.9546 28.099 27.6667 28.0994H4.33333C3.04501 28.0994 2.00044 27.2037 2 26.0994V11.6395C2.00026 10.9253 2.44515 10.2652 3.16667 9.90804L6.21777 8.3973C6.53382 7.61397 7.40106 7.05077 8.42236 7.05062H8.94075L14.7855 4.15804ZM4.33333 26.0994H27.6667V14.493L17.1268 19.6756C16.405 20.0304 15.517 20.029 14.7969 19.6717L4.33333 14.4793V26.0994ZM8.42236 14.1971L15.9658 17.9403L23.5685 14.202V9.05062H8.42236V14.1971ZM25.9019 13.0545L27.6667 12.1873V11.6873L25.9019 10.8133V13.0545ZM4.33333 11.6395V12.1688L6.08903 13.0399V10.7703L4.33333 11.6395ZM13.6063 7.05062H18.298L15.9521 5.88948L13.6063 7.05062Z" fill="black" />
5
+ </svg>
package/dist/assets/icons/traton/email_open.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
2
+ <path d="M20.1069 15.5679H11.9409V14.0679H20.1069V15.5679Z" fill="black" />
3
+ <path d="M21.7793 12.8892H10.2674V11.3892H21.7793V12.8892Z" fill="black" />
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M22.9596 7.37451H25.9022V8.79932L30 10.7847V28.02H2V10.7378L2.59468 10.4507L6.09098 8.75635V7.37451H8.94589L15.9533 3.97998L22.9596 7.37451ZM4.33542 26.02H27.6669V14.6997L15.9613 20.3335L4.33542 14.686V26.02ZM8.42412 14.3726L15.967 18.0366L23.569 14.3774V9.37451H8.42412V14.3726ZM25.9022 13.2544L27.6669 12.4048V11.9517L25.9022 11.0962V13.2544ZM4.33542 11.9048V12.3862L6.09098 13.2388V11.0532L4.33542 11.9048ZM13.6851 7.37451H18.2192L15.9522 6.27588L13.6851 7.37451Z" fill="black" />
5
+ </svg>
package/dist/components.css CHANGED
@@ -2880,7 +2880,7 @@
2880
2880
  --dropdown-option-background-selected: var(--component-dropdown-background-item-selected-default);
2881
2881
  --dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
2882
2882
  --dropdown-option-border: var(--component-dropdown-border-item-divider-default);
2883
- --dropdown-border-color: var(--component--input-text-label-default);
2883
+ --dropdown-border-color: var(--component-button-border-standard-tertiary-hover);
2884
2884
  --dropdown-list-background-color: var(--component-dropdown-background-secondary);
2885
2885
  }
2886
2886
  .tl-dropdown--primary {
@@ -3479,6 +3479,8 @@ body {
3479
3479
  padding: 8px;
3480
3480
  box-sizing: border-box;
3481
3481
  cursor: pointer;
3482
+ border: 1px solid transparent;
3483
+ border-radius: 4px;
3482
3484
  }
3483
3485
  .tl-dropdown__actions--select:hover:not(.tl-dropdown__actions--select:disabled) {
3484
3486
  border: 1px solid var(--dropdown-border-color);
@@ -3498,6 +3500,8 @@ body {
3498
3500
  padding: 8px;
3499
3501
  box-sizing: border-box;
3500
3502
  cursor: pointer;
3503
+ border: 1px solid transparent;
3504
+ border-radius: 4px;
3501
3505
  }
3502
3506
  .tl-dropdown__actions--clear:hover:not(.tl-dropdown__actions--clear:disabled) {
3503
3507
  border: 1px solid var(--dropdown-border-color);
@@ -5435,6 +5439,10 @@ body {
5435
5439
  mask-image: var(--icon-email-svg);
5436
5440
  background-color: currentcolor;
5437
5441
  }
5442
+ .tl-icon--email_open {
5443
+ mask-image: var(--icon-email_open-svg);
5444
+ background-color: currentcolor;
5445
+ }
5438
5446
  .tl-icon--employee {
5439
5447
  mask-image: var(--icon-employee-svg);
5440
5448
  background-color: currentcolor;
package/dist/scania-variables.css CHANGED
@@ -1213,6 +1213,7 @@ h6 {
1213
1213
  --scania-icon-edit-svg: url(./assets/icons/scania/edit.svg);
1214
1214
  --scania-icon-edit_inactive-svg: url(./assets/icons/scania/edit_inactive.svg);
1215
1215
  --scania-icon-email-svg: url(./assets/icons/scania/email.svg);
1216
+ --scania-icon-email_open-svg: url(./assets/icons/scania/email_open.svg);
1216
1217
  --scania-icon-employee-svg: url(./assets/icons/scania/employee.svg);
1217
1218
  --scania-icon-engine-svg: url(./assets/icons/scania/engine.svg);
1218
1219
  --scania-icon-engine_inactive-svg: url(./assets/icons/scania/engine_inactive.svg);
@@ -1483,6 +1484,7 @@ h6 {
1483
1484
  --icon-edit-svg: var(--scania-icon-edit-svg);
1484
1485
  --icon-edit_inactive-svg: var(--scania-icon-edit_inactive-svg);
1485
1486
  --icon-email-svg: var(--scania-icon-email-svg);
1487
+ --icon-email_open-svg: var(--scania-icon-email_open-svg);
1486
1488
  --icon-employee-svg: var(--scania-icon-employee-svg);
1487
1489
  --icon-engine-svg: var(--scania-icon-engine-svg);
1488
1490
  --icon-engine_inactive-svg: var(--scania-icon-engine_inactive-svg);
package/dist/tl-dropdown.css CHANGED
@@ -226,6 +226,448 @@
226
226
  --component--input-text-error-default: var(--color-system-danger-default);
227
227
  }
228
228
 
229
+ /**
230
+ * Do not edit directly, this file was auto-generated.
231
+ */
232
+ :root,
233
+ .tds-mode-light,
234
+ .scania .tds-mode-light,
235
+ .scania.tds-mode-light,
236
+ .scania .tl-mode-light,
237
+ .scania.tl-mode-light {
238
+ --component-button-background-standard-primary-default: var(--scania-color-blue-600);
239
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-700);
240
+ --component-button-background-standard-primary-active: var(--scania-color-blue-800);
241
+ --component-button-background-standard-secondary-default: var(--color-background-none);
242
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
243
+ --component-button-background-standard-secondary-active: var(--color-background-none);
244
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
245
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
246
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
247
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
248
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
249
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
250
+ --component-button-background-danger-secondary-default: var(--color-background-none);
251
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
252
+ --component-button-background-danger-secondary-active: var(--color-background-none);
253
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
254
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
255
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
256
+ --component-button-border-radius-default: var(--scania-unit-4);
257
+ --component-button-border-standard-primary-default: var(--color-border-none);
258
+ --component-button-border-standard-primary-hover: var(--color-border-none);
259
+ --component-button-border-standard-primary-active: var(--color-border-none);
260
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
261
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
262
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
263
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
264
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
265
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
266
+ --component-button-border-danger-primary-default: var(--color-border-none);
267
+ --component-button-border-danger-primary-hover: var(--color-border-none);
268
+ --component-button-border-danger-primary-active: var(--color-border-none);
269
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
270
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
271
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
272
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
273
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
274
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
275
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
276
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
277
+ --component-button-icon-standard-primary-hover: var(
278
+ --component-button-icon-standard-primary-default
279
+ );
280
+ --component-button-icon-standard-primary-active: var(
281
+ --component-button-icon-standard-primary-default
282
+ );
283
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-black);
284
+ --component-button-icon-standard-secondary-hover: var(
285
+ --component-button-icon-standard-secondary-default
286
+ );
287
+ --component-button-icon-standard-secondary-active: var(
288
+ --component-button-icon-standard-secondary-default
289
+ );
290
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-black);
291
+ --component-button-icon-standard-tertiary-hover: var(
292
+ --component-button-icon-standard-tertiary-default
293
+ );
294
+ --component-button-icon-standard-tertiary-active: var(
295
+ --component-button-icon-standard-tertiary-default
296
+ );
297
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
298
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
299
+ --component-button-icon-danger-primary-active: var(
300
+ --component-button-icon-danger-primary-default
301
+ );
302
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
303
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
304
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
305
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
306
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
307
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
308
+ --component-button-opacity-disabled: var(--scania-opacity-25);
309
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
310
+ --component-button-text-standard-primary-hover: var(
311
+ --component-button-text-standard-primary-default
312
+ );
313
+ --component-button-text-standard-primary-active: var(
314
+ --component-button-text-standard-primary-default
315
+ );
316
+ --component-button-text-standard-secondary-default: var(--scania-color-base-black);
317
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-black);
318
+ --component-button-text-standard-secondary-active: var(--scania-color-base-black);
319
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-black);
320
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-black);
321
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-black);
322
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
323
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
324
+ --component-button-text-danger-primary-active: var(
325
+ --component-button-text-danger-primary-default
326
+ );
327
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
328
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
329
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
330
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
331
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
332
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
333
+ }
334
+
335
+ .traton .tds-mode-light,
336
+ .traton.tds-mode-light,
337
+ .traton .tl-mode-light,
338
+ .traton.tl-mode-light {
339
+ --component-button-background-standard-primary-default: var(--traton-color-blue-800);
340
+ --component-button-background-standard-primary-hover: var(--traton-color-blue-850);
341
+ --component-button-background-standard-primary-active: var(--traton-color-blue-900);
342
+ --component-button-background-standard-secondary-default: var(--color-background-none);
343
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
344
+ --component-button-background-standard-secondary-active: var(--color-background-none);
345
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
346
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
347
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
348
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
349
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
350
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
351
+ --component-button-background-danger-secondary-default: var(--color-background-none);
352
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
353
+ --component-button-background-danger-secondary-active: var(--color-background-none);
354
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
355
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
356
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
357
+ --component-button-border-radius-default: var(--traton-unit-56);
358
+ --component-button-border-standard-primary-default: var(--color-border-none);
359
+ --component-button-border-standard-primary-hover: var(--color-border-none);
360
+ --component-button-border-standard-primary-active: var(--color-border-none);
361
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
362
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
363
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
364
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
365
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
366
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
367
+ --component-button-border-danger-primary-default: var(--color-border-none);
368
+ --component-button-border-danger-primary-hover: var(--color-border-none);
369
+ --component-button-border-danger-primary-active: var(--color-border-none);
370
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
371
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
372
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
373
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
374
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
375
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
376
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
377
+ --component-button-icon-standard-primary-default: var(--traton-color-base-white);
378
+ --component-button-icon-standard-primary-hover: var(
379
+ --component-button-text-standard-primary-default
380
+ );
381
+ --component-button-icon-standard-primary-active: var(
382
+ --component-button-text-standard-primary-default
383
+ );
384
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-black);
385
+ --component-button-icon-standard-secondary-hover: var(
386
+ --component-button-icon-standard-secondary-default
387
+ );
388
+ --component-button-icon-standard-secondary-active: var(
389
+ --component-button-icon-standard-secondary-default
390
+ );
391
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-black);
392
+ --component-button-icon-standard-tertiary-hover: var(
393
+ --component-button-icon-standard-tertiary-default
394
+ );
395
+ --component-button-icon-standard-tertiary-active: var(
396
+ --component-button-icon-standard-tertiary-default
397
+ );
398
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
399
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
400
+ --component-button-icon-danger-primary-active: var(
401
+ --component-button-icon-danger-primary-default
402
+ );
403
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
404
+ --component-button-icon-danger-secondary-hover: var(
405
+ --component-button-text-danger-secondary-default
406
+ );
407
+ --component-button-icon-danger-secondary-active: var(
408
+ --component-button-text-danger-secondary-default
409
+ );
410
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
411
+ --component-button-icon-danger-tertiary-hover: var(
412
+ --component-button-text-danger-tertiary-default
413
+ );
414
+ --component-button-icon-danger-tertiary-active: var(
415
+ --component-button-text-danger-tertiary-default
416
+ );
417
+ --component-button-opacity-disabled: var(--traton-opacity-25);
418
+ --component-button-text-standard-primary-default: var(--traton-color-base-white);
419
+ --component-button-text-standard-primary-hover: var(
420
+ --component-button-text-standard-primary-default
421
+ );
422
+ --component-button-text-standard-primary-active: var(
423
+ --component-button-text-standard-primary-default
424
+ );
425
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
426
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
427
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
428
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
429
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
430
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
431
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
432
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
433
+ --component-button-text-danger-primary-active: var(
434
+ --component-button-text-danger-primary-default
435
+ );
436
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
437
+ --component-button-text-danger-secondary-hover: var(
438
+ --component-button-text-danger-secondary-default
439
+ );
440
+ --component-button-text-danger-secondary-active: var(
441
+ --component-button-text-danger-secondary-default
442
+ );
443
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
444
+ --component-button-text-danger-tertiary-hover: var(
445
+ --component-button-text-danger-tertiary-default
446
+ );
447
+ --component-button-text-danger-tertiary-active: var(
448
+ --component-button-text-danger-tertiary-default
449
+ );
450
+ }
451
+
452
+ .tds-mode-dark,
453
+ .scania .tds-mode-dark,
454
+ .scania.tds-mode-dark,
455
+ .scania .tl-mode-dark,
456
+ .scania.tl-mode-dark {
457
+ --component-button-background-standard-primary-default: var(--scania-color-blue-400);
458
+ --component-button-background-standard-primary-hover: var(--scania-color-blue-500);
459
+ --component-button-background-standard-primary-active: var(--scania-color-blue-600);
460
+ --component-button-background-standard-secondary-default: var(--color-background-none);
461
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
462
+ --component-button-background-standard-secondary-active: var(--color-background-none);
463
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
464
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
465
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
466
+ --component-button-background-danger-primary-default: var(--scania-color-red-400);
467
+ --component-button-background-danger-primary-hover: var(--scania-color-red-500);
468
+ --component-button-background-danger-primary-active: var(--scania-color-red-600);
469
+ --component-button-background-danger-secondary-default: var(--color-background-none);
470
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
471
+ --component-button-background-danger-secondary-active: var(--color-background-none);
472
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
473
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
474
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
475
+ --component-button-border-radius-default: var(--scania-unit-4);
476
+ --component-button-border-standard-primary-default: var(--color-border-none);
477
+ --component-button-border-standard-primary-hover: var(--color-border-none);
478
+ --component-button-border-standard-primary-active: var(--color-border-none);
479
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
480
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
481
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
482
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
483
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
484
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
485
+ --component-button-border-danger-primary-default: var(--color-border-none);
486
+ --component-button-border-danger-primary-hover: var(--color-border-none);
487
+ --component-button-border-danger-primary-active: var(--color-border-none);
488
+ --component-button-border-danger-secondary-default: var(--scania-color-red-400);
489
+ --component-button-border-danger-secondary-hover: var(--scania-color-red-500);
490
+ --component-button-border-danger-secondary-active: var(--scania-color-red-600);
491
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
492
+ --component-button-border-danger-tertiary-hover: var(--scania-color-red-500);
493
+ --component-button-border-danger-tertiary-active: var(--scania-color-red-600);
494
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-extra-large);
495
+ --component-button-icon-standard-primary-default: var(--scania-color-base-white);
496
+ --component-button-icon-standard-primary-hover: var(
497
+ --component-button-icon-standard-primary-default
498
+ );
499
+ --component-button-icon-standard-primary-active: var(
500
+ --component-button-icon-standard-primary-default
501
+ );
502
+ --component-button-icon-standard-secondary-default: var(--scania-color-base-white);
503
+ --component-button-icon-standard-secondary-hover: var(
504
+ --component-button-icon-standard-secondary-default
505
+ );
506
+ --component-button-icon-standard-secondary-active: var(
507
+ --component-button-icon-standard-secondary-default
508
+ );
509
+ --component-button-icon-standard-tertiary-default: var(--scania-color-base-white);
510
+ --component-button-icon-standard-tertiary-hover: var(
511
+ --component-button-icon-standard-tertiary-default
512
+ );
513
+ --component-button-icon-standard-tertiary-active: var(
514
+ --component-button-icon-standard-tertiary-default
515
+ );
516
+ --component-button-icon-danger-primary-default: var(--scania-color-base-white);
517
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
518
+ --component-button-icon-danger-primary-active: var(
519
+ --component-button-icon-danger-primary-default
520
+ );
521
+ --component-button-icon-danger-secondary-default: var(--scania-color-red-400);
522
+ --component-button-icon-danger-secondary-hover: var(--scania-color-red-500);
523
+ --component-button-icon-danger-secondary-active: var(--scania-color-red-600);
524
+ --component-button-icon-danger-tertiary-default: var(--scania-color-red-400);
525
+ --component-button-icon-danger-tertiary-hover: var(--scania-color-red-500);
526
+ --component-button-icon-danger-tertiary-active: var(--scania-color-red-600);
527
+ --component-button-opacity-disabled: var(--scania-opacity-25);
528
+ --component-button-text-standard-primary-default: var(--scania-color-base-white);
529
+ --component-button-text-standard-primary-hover: var(
530
+ --component-button-text-standard-primary-default
531
+ );
532
+ --component-button-text-standard-primary-active: var(
533
+ --component-button-text-standard-primary-default
534
+ );
535
+ --component-button-text-standard-secondary-default: var(--scania-color-base-white);
536
+ --component-button-text-standard-secondary-hover: var(--scania-color-base-white);
537
+ --component-button-text-standard-secondary-active: var(--scania-color-base-white);
538
+ --component-button-text-standard-tertiary-default: var(--scania-color-base-white);
539
+ --component-button-text-standard-tertiary-hover: var(--scania-color-base-white);
540
+ --component-button-text-standard-tertiary-active: var(--scania-color-base-white);
541
+ --component-button-text-danger-primary-default: var(--scania-color-base-white);
542
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
543
+ --component-button-text-danger-primary-active: var(
544
+ --component-button-text-danger-primary-default
545
+ );
546
+ --component-button-text-danger-secondary-default: var(--scania-color-red-400);
547
+ --component-button-text-danger-secondary-hover: var(--scania-color-red-500);
548
+ --component-button-text-danger-secondary-active: var(--scania-color-red-600);
549
+ --component-button-text-danger-tertiary-default: var(--scania-color-red-400);
550
+ --component-button-text-danger-tertiary-hover: var(--scania-color-red-500);
551
+ --component-button-text-danger-tertiary-active: var(--scania-color-red-600);
552
+ }
553
+
554
+ .traton .tds-mode-dark,
555
+ .traton.tds-mode-dark,
556
+ .traton .tl-mode-dark,
557
+ .traton.tl-mode-dark {
558
+ --component-button-background-standard-primary-default: var(--traton-color-grey-300);
559
+ --component-button-background-standard-primary-hover: var(--traton-color-grey-200);
560
+ --component-button-background-standard-primary-active: var(--traton-color-grey-400);
561
+ --component-button-background-standard-secondary-default: var(--color-background-none);
562
+ --component-button-background-standard-secondary-hover: var(--color-background-none);
563
+ --component-button-background-standard-secondary-active: var(--color-background-none);
564
+ --component-button-background-standard-tertiary-default: var(--color-background-none);
565
+ --component-button-background-standard-tertiary-hover: var(--color-background-none);
566
+ --component-button-background-standard-tertiary-active: var(--color-background-none);
567
+ --component-button-background-danger-primary-default: var(--color-system-danger-default);
568
+ --component-button-background-danger-primary-hover: var(--traton-color-red-400);
569
+ --component-button-background-danger-primary-active: var(--traton-color-red-500);
570
+ --component-button-background-danger-secondary-default: var(--color-background-none);
571
+ --component-button-background-danger-secondary-hover: var(--color-background-none);
572
+ --component-button-background-danger-secondary-active: var(--color-background-none);
573
+ --component-button-background-danger-tertiary-default: var(--color-background-none);
574
+ --component-button-background-danger-tertiary-hover: var(--color-background-none);
575
+ --component-button-background-danger-tertiary-active: var(--color-background-none);
576
+ --component-button-border-radius-default: var(--traton-unit-56);
577
+ --component-button-border-standard-primary-default: var(--color-border-none);
578
+ --component-button-border-standard-primary-hover: var(--color-border-none);
579
+ --component-button-border-standard-primary-active: var(--color-border-none);
580
+ --component-button-border-standard-secondary-default: var(--color-border-soft);
581
+ --component-button-border-standard-secondary-hover: var(--color-border-subtle);
582
+ --component-button-border-standard-secondary-active: var(--color-border-strong);
583
+ --component-button-border-standard-tertiary-default: var(--color-border-none);
584
+ --component-button-border-standard-tertiary-hover: var(--color-border-subtle);
585
+ --component-button-border-standard-tertiary-active: var(--color-border-strong);
586
+ --component-button-border-danger-primary-default: var(--color-border-none);
587
+ --component-button-border-danger-primary-hover: var(--color-border-none);
588
+ --component-button-border-danger-primary-active: var(--color-border-none);
589
+ --component-button-border-danger-secondary-default: var(--color-system-danger-default);
590
+ --component-button-border-danger-secondary-hover: var(--traton-color-red-400);
591
+ --component-button-border-danger-secondary-active: var(--traton-color-red-500);
592
+ --component-button-border-danger-tertiary-default: var(--color-border-none);
593
+ --component-button-border-danger-tertiary-hover: var(--traton-color-red-400);
594
+ --component-button-border-danger-tertiary-active: var(--traton-color-red-500);
595
+ --component-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
596
+ --component-button-icon-standard-primary-default: var(--traton-color-base-black);
597
+ --component-button-icon-standard-primary-hover: var(
598
+ --component-button-text-standard-primary-default
599
+ );
600
+ --component-button-icon-standard-primary-active: var(
601
+ --component-button-text-standard-primary-default
602
+ );
603
+ --component-button-icon-standard-secondary-default: var(--traton-color-base-white);
604
+ --component-button-icon-standard-secondary-hover: var(
605
+ --component-button-icon-standard-secondary-default
606
+ );
607
+ --component-button-icon-standard-secondary-active: var(
608
+ --component-button-icon-standard-secondary-default
609
+ );
610
+ --component-button-icon-standard-tertiary-default: var(--traton-color-base-white);
611
+ --component-button-icon-standard-tertiary-hover: var(
612
+ --component-button-icon-standard-tertiary-default
613
+ );
614
+ --component-button-icon-standard-tertiary-active: var(
615
+ --component-button-icon-standard-tertiary-default
616
+ );
617
+ --component-button-icon-danger-primary-default: var(--traton-color-base-white);
618
+ --component-button-icon-danger-primary-hover: var(--component-button-icon-danger-primary-default);
619
+ --component-button-icon-danger-primary-active: var(
620
+ --component-button-icon-danger-primary-default
621
+ );
622
+ --component-button-icon-danger-secondary-default: var(--color-system-danger-default);
623
+ --component-button-icon-danger-secondary-hover: var(
624
+ --component-button-text-danger-secondary-default
625
+ );
626
+ --component-button-icon-danger-secondary-active: var(
627
+ --component-button-text-danger-secondary-default
628
+ );
629
+ --component-button-icon-danger-tertiary-default: var(--color-system-danger-default);
630
+ --component-button-icon-danger-tertiary-hover: var(
631
+ --component-button-text-danger-tertiary-default
632
+ );
633
+ --component-button-icon-danger-tertiary-active: var(
634
+ --component-button-text-danger-tertiary-default
635
+ );
636
+ --component-button-opacity-disabled: var(--traton-opacity-25);
637
+ --component-button-text-standard-primary-default: var(--traton-color-base-black);
638
+ --component-button-text-standard-primary-hover: var(
639
+ --component-button-text-standard-primary-default
640
+ );
641
+ --component-button-text-standard-primary-active: var(
642
+ --component-button-text-standard-primary-default
643
+ );
644
+ --component-button-text-standard-secondary-default: var(--color-text-strong);
645
+ --component-button-text-standard-secondary-hover: var(--color-text-strong);
646
+ --component-button-text-standard-secondary-active: var(--color-text-strong);
647
+ --component-button-text-standard-tertiary-default: var(--color-text-strong);
648
+ --component-button-text-standard-tertiary-hover: var(--color-text-strong);
649
+ --component-button-text-standard-tertiary-active: var(--color-text-strong);
650
+ --component-button-text-danger-primary-default: var(--traton-color-base-white);
651
+ --component-button-text-danger-primary-hover: var(--component-button-text-danger-primary-default);
652
+ --component-button-text-danger-primary-active: var(
653
+ --component-button-text-danger-primary-default
654
+ );
655
+ --component-button-text-danger-secondary-default: var(--color-system-danger-default);
656
+ --component-button-text-danger-secondary-hover: var(
657
+ --component-button-text-danger-secondary-default
658
+ );
659
+ --component-button-text-danger-secondary-active: var(
660
+ --component-button-text-danger-secondary-default
661
+ );
662
+ --component-button-text-danger-tertiary-default: var(--color-system-danger-default);
663
+ --component-button-text-danger-tertiary-hover: var(
664
+ --component-button-text-danger-tertiary-default
665
+ );
666
+ --component-button-text-danger-tertiary-active: var(
667
+ --component-button-text-danger-tertiary-default
668
+ );
669
+ }
670
+
229
671
  .tl-dropdown {
230
672
  --dropdown-background: var(--component--input-background-primary);
231
673
  --dropdown-text: var(--component--input-text-value-default);
@@ -244,7 +686,7 @@
244
686
  --dropdown-option-background-selected: var(--component-dropdown-background-item-selected-default);
245
687
  --dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
246
688
  --dropdown-option-border: var(--component-dropdown-border-item-divider-default);
247
- --dropdown-border-color: var(--component--input-text-label-default);
689
+ --dropdown-border-color: var(--component-button-border-standard-tertiary-hover);
248
690
  --dropdown-list-background-color: var(--component-dropdown-background-secondary);
249
691
  }
250
692
  .tl-dropdown--primary {
@@ -844,6 +1286,8 @@ body {
844
1286
  padding: 8px;
845
1287
  box-sizing: border-box;
846
1288
  cursor: pointer;
1289
+ border: 1px solid transparent;
1290
+ border-radius: 4px;
847
1291
  }
848
1292
  .tl-dropdown__actions--select:hover:not(.tl-dropdown__actions--select:disabled) {
849
1293
  border: 1px solid var(--dropdown-border-color);
@@ -863,6 +1307,8 @@ body {
863
1307
  padding: 8px;
864
1308
  box-sizing: border-box;
865
1309
  cursor: pointer;
1310
+ border: 1px solid transparent;
1311
+ border-radius: 4px;
866
1312
  }
867
1313
  .tl-dropdown__actions--clear:hover:not(.tl-dropdown__actions--clear:disabled) {
868
1314
  border: 1px solid var(--dropdown-border-color);
package/dist/tl-icon.css CHANGED
@@ -344,6 +344,10 @@
344
344
  mask-image: var(--icon-email-svg);
345
345
  background-color: currentcolor;
346
346
  }
347
+ .tl-icon--email_open {
348
+ mask-image: var(--icon-email_open-svg);
349
+ background-color: currentcolor;
350
+ }
347
351
  .tl-icon--employee {
348
352
  mask-image: var(--icon-employee-svg);
349
353
  background-color: currentcolor;
package/dist/tl-text-field.css CHANGED
@@ -581,6 +581,10 @@
581
581
  mask-image: var(--icon-email-svg);
582
582
  background-color: currentcolor;
583
583
  }
584
+ .tl-icon--email_open {
585
+ mask-image: var(--icon-email_open-svg);
586
+ background-color: currentcolor;
587
+ }
584
588
  .tl-icon--employee {
585
589
  mask-image: var(--icon-employee-svg);
586
590
  background-color: currentcolor;
package/dist/traton-variables.css CHANGED
@@ -768,6 +768,7 @@
768
768
  --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
769
769
  --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
770
770
  --traton-icon-email-svg: url(./assets/icons/traton/email.svg);
771
+ --traton-icon-email_open-svg: url(./assets/icons/traton/email_open.svg);
771
772
  --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
772
773
  --traton-icon-export-svg: url(./assets/icons/traton/export.svg);
773
774
  --traton-icon-export_inactive-svg: url(./assets/icons/traton/export_inactive.svg);
@@ -907,6 +908,7 @@
907
908
  --icon-edit-svg: var(--traton-icon-edit-svg);
908
909
  --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
909
910
  --icon-email-svg: var(--traton-icon-email-svg);
911
+ --icon-email_open-svg: var(--traton-icon-email_open-svg);
910
912
  --icon-error-svg: var(--traton-icon-error-svg);
911
913
  --icon-export-svg: var(--traton-icon-export-svg);
912
914
  --icon-export_inactive-svg: var(--traton-icon-export_inactive-svg);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "1.8.0-dd-select-all-beta.1",
3
+ "version": "1.9.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -71,7 +71,7 @@
71
71
  ],
72
72
  "devDependencies": {
73
73
  "@playwright/test": "1.63.0",
74
- "@types/node": "26.6.1",
74
+ "@types/node": "26.6.4",
75
75
  "serve": "^14.2.5"
76
76
  },
77
77
  "license": "MIT",