@scania/tegel-lite 0.1.0-var-work-beta.4 → 0.1.0-var-work-beta.6

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 (13) hide show
  1. package/dist/components.css +146 -111
  2. package/dist/scania-variables.css +0 -2
  3. package/dist/tl-breadcrumbs.css +5 -5
  4. package/dist/tl-button.css +70 -41
  5. package/dist/tl-card.css +8 -20
  6. package/dist/tl-divider.css +3 -3
  7. package/dist/tl-footer.css +35 -15
  8. package/dist/tl-link.css +6 -6
  9. package/dist/tl-side-menu.css +4 -4
  10. package/dist/tl-slider.css +70 -41
  11. package/dist/tl-tooltip.css +15 -17
  12. package/package.json +1 -1
  13. package/dist/assets/icons/traton/placeholder.svg +0 -3
package/dist/components.css CHANGED
@@ -532,14 +532,14 @@
532
532
  }
533
533
 
534
534
  .tl-breadcrumbs {
535
- --breadcrumb-label: var(--color-foreground-text-strong);
536
- --breadcrumb-hover: var(--color-foreground-text-strong);
537
- --breadcrumb-current: var(--color-foreground-text-subtle);
538
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
535
+ --breadcrumb-label: var(--color-text-strong);
536
+ --breadcrumb-hover: var(--color-text-strong);
537
+ --breadcrumb-current: var(--color-text-soft);
538
+ --breadcrumb-separator-color: var(--color-text-strong);
539
539
  --breadcrumb-separator-margin: 4px;
540
540
  --breadcrumb-separator-width: 4px;
541
541
  --breadcrumb-separator-height: 8px;
542
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
542
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
543
543
  --breadcrumb-focus-outline-width: 2px;
544
544
  }
545
545
 
@@ -1048,51 +1048,70 @@
1048
1048
  }
1049
1049
 
1050
1050
  .tl-button {
1051
- --button-radius: calc(var(--component-button-border-radius-default) * 1px);
1051
+ --button-transparent: transparent;
1052
+ --button-white: var(--color-brand-neutral-white);
1053
+ --button-black: var(--color-brand-neutral-black);
1054
+ --button-radius: var(--dimension-radius-for-surface-clickable);
1052
1055
  --button-sm-only-icon-padding: 11px;
1053
1056
  --button-md-only-icon-padding: 13px;
1054
1057
  --button-lg-only-icon-padding: 17px;
1055
- --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
1056
- --button-primary-background: var(--component-button-background-standard-primary-default);
1057
- --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
1058
- --button-primary-background-active: var(--component-button-background-standard-primary-active);
1059
- --button-primary-background-focus: var(--component-button-background-standard-primary-default);
1060
- --button-primary-color: var(--component-button-text-standard-primary-default);
1061
- --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
1062
- --button-primary-border-color: var(--component-button-border-standard-primary-default);
1063
- --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
1058
+ --button-primary-background: var(--color-background-accent-primary-default);
1059
+ --button-primary-background-hover: var(--color-background-accent-primary-hover);
1060
+ --button-primary-background-active: var(--color-background-accent-primary-pressed);
1061
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1062
+ --button-primary-color: var(--component-button-primary-text);
1063
+ --button-primary-color-disabled: var(--color-foreground-text-disabled);
1064
+ --button-primary-border-color: var(--button-transparent);
1065
+ --button-primary-border-color-disabled: var(--button-transparent);
1066
+ --button-primary-background-focus: var(--color-background-accent-primary-focus);
1067
+ --button-primary-color-focus: var(--component-button-primary-text);
1068
+ --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
1064
1069
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
1065
- --button-secondary-background: var(--component-button-background-standard-secondary-default);
1066
- --button-secondary-background-focus: var(
1067
- --component-button-background-standard-secondary-default
1068
- );
1069
- --button-secondary-color: var(--component-button-text-standard-secondary-default);
1070
- --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
1071
- --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
1072
- --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
1073
- --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
1074
- --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
1070
+ --button-secondary-background: var(--button-transparent);
1071
+ --button-secondary-color: var(--color-foreground-text-strong);
1072
+ --button-secondary-border-color: var(--color-foreground-border-soft);
1073
+ --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
1074
+ --button-secondary-border-color-active: var(--color-foreground-border-strong);
1075
+ --button-secondary-background-disabled: var(--button-transparent);
1076
+ --button-secondary-color-disabled: var(--color-foreground-text-disabled);
1077
+ --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
1078
+ --button-secondary-background-focus: var(--button-transparent);
1079
+ --button-secondary-color-focus: var(--color-foreground-text-strong);
1080
+ --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
1075
1081
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
1076
- --button-ghost-background: var(--component-button-background-standard-tertiary-default);
1077
- --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
1078
- --button-ghost-color: var(--component-button-text-standard-tertiary-default);
1079
- --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
1080
- --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
1081
- --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
1082
- --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
1083
- --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
1082
+ --button-ghost-background: var(--button-transparent);
1083
+ --button-ghost-color: var(--color-foreground-text-strong);
1084
+ --button-ghost-border-color: var(--button-transparent);
1085
+ --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
1086
+ --button-ghost-border-color-active: var(--color-foreground-border-strong);
1087
+ --button-ghost-color-disabled: var(--color-foreground-text-disabled);
1088
+ --button-ghost-border-color-disabled: var(--button-transparent);
1089
+ --button-ghost-background-focus: var(--button-transparent);
1090
+ --button-ghost-color-focus: var(--color-foreground-text-strong);
1091
+ --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
1084
1092
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
1085
- --button-danger-background: var(--component-button-background-danger-primary-default);
1086
- --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
1087
- --button-danger-background-active: var(--component-button-background-danger-primary-active);
1088
- --button-danger-background-focus: var(--component-button-background-danger-primary-default);
1089
- --button-danger-color: var(--component-button-text-danger-primary-default);
1090
- --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
1091
- --button-danger-border-color: var(--component-button-border-danger-primary-default);
1092
- --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
1093
- --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
1093
+ --button-danger-background: var(--color-background-accent-danger-default);
1094
+ --button-danger-color: var(--button-white);
1095
+ --button-danger-border-color: var(--button-transparent);
1096
+ --button-danger-background-hover: var(--color-background-accent-danger-hover);
1097
+ --button-danger-background-active: var(--color-background-accent-danger-pressed);
1098
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1099
+ --button-danger-color-disabled: var(--color-foreground-text-disabled);
1100
+ --button-danger-border-color-disabled: var(--button-transparent);
1101
+ --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
1102
+ --button-danger-background-focus: var(--color-background-accent-danger-focus);
1103
+ --button-danger-color-focus: var(--button-white);
1104
+ --button-danger-border-color-focus: var(--button-transparent);
1094
1105
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
1095
1106
  }
1107
+ .tl-button .tl-button--primary {
1108
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
1109
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
1110
+ }
1111
+ .tl-button .tl-button--secondary {
1112
+ --button-primary-background-disabled: var(--button-white);
1113
+ --button-danger-background-disabled: var(--button-white);
1114
+ }
1096
1115
 
1097
1116
  .scania .tl-button {
1098
1117
  --button-outline-width: 2px;
@@ -1143,8 +1162,11 @@
1143
1162
  background-color: var(--button-primary-background-hover);
1144
1163
  }
1145
1164
  .tl-button--primary:disabled {
1165
+ background-color: var(--button-primary-background-disabled);
1166
+ color: var(--button-primary-color-disabled);
1167
+ border-color: var(--button-primary-border-color-disabled);
1146
1168
  cursor: not-allowed;
1147
- opacity: var(--button-opacity-disabled);
1169
+ opacity: 0.6;
1148
1170
  }
1149
1171
  .tl-button--primary:focus-visible:not(:disabled) {
1150
1172
  background: var(--button-primary-background-focus);
@@ -1169,8 +1191,11 @@
1169
1191
  border-color: var(--button-secondary-border-color-hover);
1170
1192
  }
1171
1193
  .tl-button--secondary:disabled {
1194
+ background-color: var(--button-secondary-background-disabled);
1195
+ color: var(--button-secondary-color-disabled);
1196
+ border-color: var(--button-secondary-border-color-disabled);
1172
1197
  cursor: not-allowed;
1173
- opacity: var(--button-opacity-disabled);
1198
+ opacity: 0.6;
1174
1199
  }
1175
1200
  .tl-button--secondary:focus-visible:not(:disabled) {
1176
1201
  background: var(--button-secondary-background-focus);
@@ -1193,8 +1218,9 @@
1193
1218
  border-color: var(--button-ghost-border-color-hover);
1194
1219
  }
1195
1220
  .tl-button--ghost:disabled {
1221
+ color: var(--button-ghost-color-disabled);
1196
1222
  cursor: not-allowed;
1197
- opacity: var(--button-opacity-disabled);
1223
+ opacity: 0.6;
1198
1224
  }
1199
1225
  .tl-button--ghost:focus-visible:not(:disabled) {
1200
1226
  background: var(--button-ghost-background-focus);
@@ -1217,8 +1243,11 @@
1217
1243
  background-color: var(--button-danger-background-hover);
1218
1244
  }
1219
1245
  .tl-button--danger:disabled {
1246
+ background-color: var(--button-danger-background-disabled);
1247
+ color: var(--button-danger-color-disabled);
1248
+ border-color: var(--button-danger-border-color-disabled);
1220
1249
  cursor: not-allowed;
1221
- opacity: var(--button-opacity-disabled);
1250
+ opacity: 0.6;
1222
1251
  }
1223
1252
  .tl-button--danger:focus-visible:not(:disabled) {
1224
1253
  background: var(--button-danger-background-focus);
@@ -1310,26 +1339,20 @@
1310
1339
  .scania.tds-mode-light,
1311
1340
  .scania .tl-mode-light,
1312
1341
  .scania.tl-mode-light {
1313
- --component-card-background-primary-default: var(--scania-color-base-white);
1314
- --component-card-background-secondary-default: var(--scania-color-base-white);
1342
+ --component-card-background-primary: #fff;
1343
+ --component-card-background-secondary: #fff;
1315
1344
  --component-card-border-radius-default: var(--scania-unit-4);
1316
1345
  --component-card-space-padding-default: var(--scania-unit-16);
1317
- --component-card-text-title-default: var(--color-text-strong);
1318
- --component-card-text-subtitle-default: var(--color-text-soft);
1319
- --component-card-text-body-default: var(--color-text-defined);
1320
1346
  }
1321
1347
 
1322
1348
  .traton .tds-mode-light,
1323
1349
  .traton.tds-mode-light,
1324
1350
  .traton .tl-mode-light,
1325
1351
  .traton.tl-mode-light {
1326
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
1327
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
1352
+ --component-card-background-primary: var(--traton-color-transparent-invisible-light);
1353
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
1328
1354
  --component-card-border-radius-default: var(--traton-unit-0);
1329
1355
  --component-card-space-padding-default: var(--traton-unit-0);
1330
- --component-card-text-title-default: var(--color-text-strong);
1331
- --component-card-text-subtitle-default: var(--color-text-soft);
1332
- --component-card-text-body-default: var(--color-text-defined);
1333
1356
  }
1334
1357
 
1335
1358
  .tds-mode-dark,
@@ -1337,26 +1360,20 @@
1337
1360
  .scania.tds-mode-dark,
1338
1361
  .scania .tl-mode-dark,
1339
1362
  .scania.tl-mode-dark {
1340
- --component-card-background-primary-default: var(--color-background-layer-01);
1341
- --component-card-background-secondary-default: var(--color-background-layer-02);
1363
+ --component-card-background-primary: var(--color-background-layer-01);
1364
+ --component-card-background-secondary: var(--color-background-layer-02);
1342
1365
  --component-card-border-radius-default: var(--scania-unit-4);
1343
1366
  --component-card-space-padding-default: var(--scania-unit-16);
1344
- --component-card-text-title-default: var(--color-text-strong);
1345
- --component-card-text-subtitle-default: var(--color-text-soft);
1346
- --component-card-text-body-default: var(--color-text-defined);
1347
1367
  }
1348
1368
 
1349
1369
  .traton .tds-mode-dark,
1350
1370
  .traton.tds-mode-dark,
1351
1371
  .traton .tl-mode-dark,
1352
1372
  .traton.tl-mode-dark {
1353
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
1354
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
1373
+ --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
1374
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
1355
1375
  --component-card-border-radius-default: var(--traton-unit-0);
1356
1376
  --component-card-space-padding-default: var(--traton-unit-0);
1357
- --component-card-text-title-default: var(--color-text-strong);
1358
- --component-card-text-subtitle-default: var(--color-text-soft);
1359
- --component-card-text-body-default: var(--color-text-defined);
1360
1377
  }
1361
1378
 
1362
1379
  .tl-card {
@@ -2300,9 +2317,9 @@
2300
2317
  }
2301
2318
 
2302
2319
  .tl-divider {
2303
- --divider-background: var(--color-foreground-border-discrete);
2304
- --divider-background-strong: var(--color-foreground-border-strong);
2305
- --divider-background-discrete: var(--color-foreground-border-discrete);
2320
+ --divider-background: var(--color-border-discrete);
2321
+ --divider-background-strong: var(--color-border-strong);
2322
+ --divider-background-discrete: var(--color-border-discrete);
2306
2323
  }
2307
2324
 
2308
2325
  .tl-divider {
@@ -3329,18 +3346,18 @@ body {
3329
3346
  }
3330
3347
 
3331
3348
  .tl-footer {
3332
- --footer-top-background-primary: var(--color-background-layer-01);
3333
- --footer-top-background-secondary: var(--color-background-base);
3334
- --footer-top-background: var(--color-background-layer-01);
3335
- --footer-top-divider: var(--color-foreground-border-discrete);
3336
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
3337
- --footer-top-links: var(--component-footer-text-color-link-text);
3338
- --footer-top-links-background-hover: var(--color-background-surface-300);
3339
- --footer-top-button-active: var(--color-background-surface-300);
3340
- --footer-main-background: var(--component-footer-primary);
3341
- --footer-main-links: var(--color-foreground-text-accent-brand);
3342
- --footer-main-divider: var(--component-footer-border);
3343
- --footer-main-copyright: var(--component-footer-text-color-copyright);
3349
+ --footer-top-background-primary: var(--component-footer-background-top-default);
3350
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
3351
+ --footer-top-background: var(--component-footer-background-top-default);
3352
+ --footer-top-divider: var(--color-border-discrete);
3353
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
3354
+ --footer-top-links: var(--component-footer-text-link-default);
3355
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
3356
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
3357
+ --footer-main-background: var(--component-footer-background-main-default);
3358
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
3359
+ --footer-main-divider: var(--component-footer-border-divider-default);
3360
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
3344
3361
  }
3345
3362
  .tl-footer.tl-footer--primary {
3346
3363
  --footer-top-background: var(--footer-top-background-primary);
@@ -3349,6 +3366,26 @@ body {
3349
3366
  --footer-top-background: var(--footer-top-background-secondary);
3350
3367
  }
3351
3368
 
3369
+ .scania .tl-footer {
3370
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
3371
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
3372
+ }
3373
+
3374
+ .traton .tl-mode-dark .tl-footer {
3375
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
3376
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
3377
+ }
3378
+
3379
+ .traton .tl-mode-light .tl-footer {
3380
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3381
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3382
+ }
3383
+
3384
+ .traton .tl-footer {
3385
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
3386
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
3387
+ }
3388
+
3352
3389
  .tl-footer__group {
3353
3390
  display: block;
3354
3391
  }
@@ -3390,7 +3427,7 @@ body {
3390
3427
  text-decoration: underline;
3391
3428
  }
3392
3429
  .tl-footer__link:focus-visible {
3393
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3430
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3394
3431
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3395
3432
  outline-offset: 1px;
3396
3433
  z-index: 1;
@@ -3450,7 +3487,7 @@ body {
3450
3487
  background-color: var(--footer-top-button-active);
3451
3488
  }
3452
3489
  .tl-footer__top-title:focus-visible {
3453
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3490
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3454
3491
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3455
3492
  outline-offset: -2px;
3456
3493
  z-index: 1;
@@ -3471,7 +3508,7 @@ body {
3471
3508
  text-decoration: none;
3472
3509
  }
3473
3510
  .tl-footer__main .tl-footer__link:focus-visible {
3474
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
3511
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
3475
3512
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
3476
3513
  outline-offset: 1px;
3477
3514
  z-index: 1;
@@ -5723,12 +5760,12 @@ body {
5723
5760
 
5724
5761
  /* Component variables */
5725
5762
  .tl-link {
5726
- --link: var(--color-foreground-text-accent-default);
5727
- --link-hover: var(--color-foreground-text-accent-default);
5763
+ --link: var(--color-system-info-default);
5764
+ --link-hover: var(--color-system-info-default);
5728
5765
  --link-focus-outline-width: 2px;
5729
- --link-visited: var(--color-foreground-text-accent-visited);
5730
- --link-disabled: var(--color-foreground-text-disabled);
5731
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
5766
+ --link-visited: var(--color-system-info-defined);
5767
+ --link-disabled: var(--color-text-disabled);
5768
+ --link-focus-outline-color: var(--color-system-info-default);
5732
5769
  }
5733
5770
 
5734
5771
  .tl-banner .tl-link {
@@ -5737,7 +5774,7 @@ body {
5737
5774
 
5738
5775
  .tl-toast .tl-link {
5739
5776
  --link: var(--color-system-info-default);
5740
- --link-hover: var(--color-foreground-text-accent-default);
5777
+ --link-hover: var(--color-system-info-default);
5741
5778
  }
5742
5779
 
5743
5780
  .traton .tl-link {
@@ -6659,7 +6696,7 @@ body {
6659
6696
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6660
6697
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6661
6698
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6662
- --component-side-menu-radius-radius-default: var(--scania-unit-0);
6699
+ --component-side-menu-border-radius-default: var(--scania-unit-0);
6663
6700
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6664
6701
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6665
6702
  --component-side-menu-text-items-font-size: 14;
@@ -6700,7 +6737,7 @@ body {
6700
6737
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6701
6738
  --traton-unit-12
6702
6739
  );
6703
- --component-side-menu-radius-radius-default: var(--traton-unit-8);
6740
+ --component-side-menu-border-radius-default: var(--traton-unit-8);
6704
6741
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6705
6742
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6706
6743
  --component-side-menu-text-items-font-size: 14;
@@ -6737,7 +6774,7 @@ body {
6737
6774
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
6738
6775
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
6739
6776
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
6740
- --component-side-menu-radius-radius-default: var(--scania-unit-0);
6777
+ --component-side-menu-border-radius-default: var(--scania-unit-0);
6741
6778
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
6742
6779
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
6743
6780
  --component-side-menu-text-items-font-size: 14;
@@ -6778,7 +6815,7 @@ body {
6778
6815
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
6779
6816
  --traton-unit-12
6780
6817
  );
6781
- --component-side-menu-radius-radius-default: var(--traton-unit-8);
6818
+ --component-side-menu-border-radius-default: var(--traton-unit-8);
6782
6819
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
6783
6820
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
6784
6821
  --component-side-menu-text-items-font-size: 14;
@@ -10445,10 +10482,8 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10445
10482
  }
10446
10483
 
10447
10484
  .tl-tooltip {
10448
- --tooltip-text: var(--component-tooltip-text-default);
10449
- --tooltip-background: var(--component-tooltip-background-default);
10450
- --tooltip-border-radius: calc(var(--component-tooltip-border-radius-radius-default) * 1px);
10451
- --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-radius-none) * 1px);
10485
+ --tooltip-text: var(--color-foreground-text-inverse-strong);
10486
+ --tooltip-background: var(--color-background-inverse-layer-03);
10452
10487
  }
10453
10488
 
10454
10489
  .scania {
@@ -10469,19 +10504,19 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10469
10504
  position: fixed;
10470
10505
  z-index: var(--tds-z-index-tooltip, 1000);
10471
10506
  padding: 8px;
10472
- max-width: 208px;
10507
+ max-width: 204px;
10473
10508
  width: max-content;
10474
10509
  white-space: normal;
10475
- overflow-wrap: break-word;
10476
- background-color: var(--tooltip-background);
10477
- color: var(--tooltip-text);
10510
+ word-wrap: break-word;
10511
+ background-color: var(--tooltip-background, #333);
10512
+ color: var(--tooltip-text, #fff);
10478
10513
  box-sizing: border-box;
10479
10514
  line-height: var(--tl-tooltip-line-height);
10480
10515
  opacity: 0;
10481
10516
  visibility: hidden;
10482
10517
  pointer-events: none;
10483
10518
  transition: opacity 0.2s ease, visibility 0.2s ease;
10484
- border-radius: var(--tooltip-border-radius);
10519
+ border-radius: 4px;
10485
10520
  }
10486
10521
  .tl-tooltip--visible {
10487
10522
  opacity: 1;
@@ -10489,26 +10524,26 @@ input[type=checkbox]:disabled ~ .tl-toggle__label {
10489
10524
  pointer-events: auto;
10490
10525
  }
10491
10526
  .tl-tooltip--top-start {
10492
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10527
+ border-radius: 4px 4px 4px 0;
10493
10528
  }
10494
10529
  .tl-tooltip--top-end {
10495
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10530
+ border-radius: 4px 4px 0;
10496
10531
  }
10497
10532
  .tl-tooltip--bottom-start {
10498
- border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10533
+ border-radius: 0 4px 4px;
10499
10534
  }
10500
10535
  .tl-tooltip--bottom-end {
10501
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10536
+ border-radius: 4px 0 4px 4px;
10502
10537
  }
10503
10538
  .tl-tooltip--left-start {
10504
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
10539
+ border-radius: 4px 0 4px 4px;
10505
10540
  }
10506
10541
  .tl-tooltip--left-end {
10507
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
10542
+ border-radius: 4px 4px 0;
10508
10543
  }
10509
10544
  .tl-tooltip--right-start {
10510
- border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
10545
+ border-radius: 0 4px 4px;
10511
10546
  }
10512
10547
  .tl-tooltip--right-end {
10513
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
10548
+ border-radius: 4px 4px 4px 0;
10514
10549
  }
package/dist/scania-variables.css CHANGED
@@ -19,13 +19,11 @@
19
19
  --scania-color-transparent-invisible-dark: #0000;
20
20
  --scania-color-transparent-scrim-light: #0006;
21
21
  --scania-color-transparent-scrim-dark: #0009;
22
- --scania-color-transparent-shadow-10: #00000003;
23
22
  --scania-color-transparent-shadow-100: #0000001a;
24
23
  --scania-color-transparent-shadow-150: #00000026;
25
24
  --scania-color-transparent-shadow-200: #0003;
26
25
  --scania-color-transparent-shadow-250: #00000040;
27
26
  --scania-color-transparent-shadow-350: #00000059;
28
- --scania-color-transparent-shadow-00: #0000;
29
27
  --scania-color-blue-50: #d8dde5;
30
28
  --scania-color-blue-100: #bacde8;
31
29
  --scania-color-blue-200: #87afe8;
package/dist/tl-breadcrumbs.css CHANGED
@@ -1,13 +1,13 @@
1
1
  @charset "UTF-8";
2
2
  .tl-breadcrumbs {
3
- --breadcrumb-label: var(--color-foreground-text-strong);
4
- --breadcrumb-hover: var(--color-foreground-text-strong);
5
- --breadcrumb-current: var(--color-foreground-text-subtle);
6
- --breadcrumb-separator-color: var(--color-foreground-text-strong);
3
+ --breadcrumb-label: var(--color-text-strong);
4
+ --breadcrumb-hover: var(--color-text-strong);
5
+ --breadcrumb-current: var(--color-text-soft);
6
+ --breadcrumb-separator-color: var(--color-text-strong);
7
7
  --breadcrumb-separator-margin: 4px;
8
8
  --breadcrumb-separator-width: 4px;
9
9
  --breadcrumb-separator-height: 8px;
10
- --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
10
+ --breadcrumb-focus-outline-color: var(--color-system-info-default);
11
11
  --breadcrumb-focus-outline-width: 2px;
12
12
  }
13
13
 
package/dist/tl-button.css CHANGED
@@ -441,51 +441,70 @@
441
441
  }
442
442
 
443
443
  .tl-button {
444
- --button-radius: calc(var(--component-button-border-radius-default) * 1px);
444
+ --button-transparent: transparent;
445
+ --button-white: var(--color-brand-neutral-white);
446
+ --button-black: var(--color-brand-neutral-black);
447
+ --button-radius: var(--dimension-radius-for-surface-clickable);
445
448
  --button-sm-only-icon-padding: 11px;
446
449
  --button-md-only-icon-padding: 13px;
447
450
  --button-lg-only-icon-padding: 17px;
448
- --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
449
- --button-primary-background: var(--component-button-background-standard-primary-default);
450
- --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
451
- --button-primary-background-active: var(--component-button-background-standard-primary-active);
452
- --button-primary-background-focus: var(--component-button-background-standard-primary-default);
453
- --button-primary-color: var(--component-button-text-standard-primary-default);
454
- --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
455
- --button-primary-border-color: var(--component-button-border-standard-primary-default);
456
- --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
451
+ --button-primary-background: var(--color-background-accent-primary-default);
452
+ --button-primary-background-hover: var(--color-background-accent-primary-hover);
453
+ --button-primary-background-active: var(--color-background-accent-primary-pressed);
454
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
455
+ --button-primary-color: var(--component-button-primary-text);
456
+ --button-primary-color-disabled: var(--color-foreground-text-disabled);
457
+ --button-primary-border-color: var(--button-transparent);
458
+ --button-primary-border-color-disabled: var(--button-transparent);
459
+ --button-primary-background-focus: var(--color-background-accent-primary-focus);
460
+ --button-primary-color-focus: var(--component-button-primary-text);
461
+ --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
457
462
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
458
- --button-secondary-background: var(--component-button-background-standard-secondary-default);
459
- --button-secondary-background-focus: var(
460
- --component-button-background-standard-secondary-default
461
- );
462
- --button-secondary-color: var(--component-button-text-standard-secondary-default);
463
- --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
464
- --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
465
- --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
466
- --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
467
- --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
463
+ --button-secondary-background: var(--button-transparent);
464
+ --button-secondary-color: var(--color-foreground-text-strong);
465
+ --button-secondary-border-color: var(--color-foreground-border-soft);
466
+ --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
467
+ --button-secondary-border-color-active: var(--color-foreground-border-strong);
468
+ --button-secondary-background-disabled: var(--button-transparent);
469
+ --button-secondary-color-disabled: var(--color-foreground-text-disabled);
470
+ --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
471
+ --button-secondary-background-focus: var(--button-transparent);
472
+ --button-secondary-color-focus: var(--color-foreground-text-strong);
473
+ --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
468
474
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
469
- --button-ghost-background: var(--component-button-background-standard-tertiary-default);
470
- --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
471
- --button-ghost-color: var(--component-button-text-standard-tertiary-default);
472
- --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
473
- --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
474
- --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
475
- --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
476
- --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
475
+ --button-ghost-background: var(--button-transparent);
476
+ --button-ghost-color: var(--color-foreground-text-strong);
477
+ --button-ghost-border-color: var(--button-transparent);
478
+ --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
479
+ --button-ghost-border-color-active: var(--color-foreground-border-strong);
480
+ --button-ghost-color-disabled: var(--color-foreground-text-disabled);
481
+ --button-ghost-border-color-disabled: var(--button-transparent);
482
+ --button-ghost-background-focus: var(--button-transparent);
483
+ --button-ghost-color-focus: var(--color-foreground-text-strong);
484
+ --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
477
485
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
478
- --button-danger-background: var(--component-button-background-danger-primary-default);
479
- --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
480
- --button-danger-background-active: var(--component-button-background-danger-primary-active);
481
- --button-danger-background-focus: var(--component-button-background-danger-primary-default);
482
- --button-danger-color: var(--component-button-text-danger-primary-default);
483
- --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
484
- --button-danger-border-color: var(--component-button-border-danger-primary-default);
485
- --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
486
- --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
486
+ --button-danger-background: var(--color-background-accent-danger-default);
487
+ --button-danger-color: var(--button-white);
488
+ --button-danger-border-color: var(--button-transparent);
489
+ --button-danger-background-hover: var(--color-background-accent-danger-hover);
490
+ --button-danger-background-active: var(--color-background-accent-danger-pressed);
491
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
492
+ --button-danger-color-disabled: var(--color-foreground-text-disabled);
493
+ --button-danger-border-color-disabled: var(--button-transparent);
494
+ --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
495
+ --button-danger-background-focus: var(--color-background-accent-danger-focus);
496
+ --button-danger-color-focus: var(--button-white);
497
+ --button-danger-border-color-focus: var(--button-transparent);
487
498
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
488
499
  }
500
+ .tl-button .tl-button--primary {
501
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
502
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
503
+ }
504
+ .tl-button .tl-button--secondary {
505
+ --button-primary-background-disabled: var(--button-white);
506
+ --button-danger-background-disabled: var(--button-white);
507
+ }
489
508
 
490
509
  .scania .tl-button {
491
510
  --button-outline-width: 2px;
@@ -537,8 +556,11 @@
537
556
  background-color: var(--button-primary-background-hover);
538
557
  }
539
558
  .tl-button--primary:disabled {
559
+ background-color: var(--button-primary-background-disabled);
560
+ color: var(--button-primary-color-disabled);
561
+ border-color: var(--button-primary-border-color-disabled);
540
562
  cursor: not-allowed;
541
- opacity: var(--button-opacity-disabled);
563
+ opacity: 0.6;
542
564
  }
543
565
  .tl-button--primary:focus-visible:not(:disabled) {
544
566
  background: var(--button-primary-background-focus);
@@ -563,8 +585,11 @@
563
585
  border-color: var(--button-secondary-border-color-hover);
564
586
  }
565
587
  .tl-button--secondary:disabled {
588
+ background-color: var(--button-secondary-background-disabled);
589
+ color: var(--button-secondary-color-disabled);
590
+ border-color: var(--button-secondary-border-color-disabled);
566
591
  cursor: not-allowed;
567
- opacity: var(--button-opacity-disabled);
592
+ opacity: 0.6;
568
593
  }
569
594
  .tl-button--secondary:focus-visible:not(:disabled) {
570
595
  background: var(--button-secondary-background-focus);
@@ -587,8 +612,9 @@
587
612
  border-color: var(--button-ghost-border-color-hover);
588
613
  }
589
614
  .tl-button--ghost:disabled {
615
+ color: var(--button-ghost-color-disabled);
590
616
  cursor: not-allowed;
591
- opacity: var(--button-opacity-disabled);
617
+ opacity: 0.6;
592
618
  }
593
619
  .tl-button--ghost:focus-visible:not(:disabled) {
594
620
  background: var(--button-ghost-background-focus);
@@ -611,8 +637,11 @@
611
637
  background-color: var(--button-danger-background-hover);
612
638
  }
613
639
  .tl-button--danger:disabled {
640
+ background-color: var(--button-danger-background-disabled);
641
+ color: var(--button-danger-color-disabled);
642
+ border-color: var(--button-danger-border-color-disabled);
614
643
  cursor: not-allowed;
615
- opacity: var(--button-opacity-disabled);
644
+ opacity: 0.6;
616
645
  }
617
646
  .tl-button--danger:focus-visible:not(:disabled) {
618
647
  background: var(--button-danger-background-focus);
package/dist/tl-card.css CHANGED
@@ -7,26 +7,20 @@
7
7
  .scania.tds-mode-light,
8
8
  .scania .tl-mode-light,
9
9
  .scania.tl-mode-light {
10
- --component-card-background-primary-default: var(--scania-color-base-white);
11
- --component-card-background-secondary-default: var(--scania-color-base-white);
10
+ --component-card-background-primary: #fff;
11
+ --component-card-background-secondary: #fff;
12
12
  --component-card-border-radius-default: var(--scania-unit-4);
13
13
  --component-card-space-padding-default: var(--scania-unit-16);
14
- --component-card-text-title-default: var(--color-text-strong);
15
- --component-card-text-subtitle-default: var(--color-text-soft);
16
- --component-card-text-body-default: var(--color-text-defined);
17
14
  }
18
15
 
19
16
  .traton .tds-mode-light,
20
17
  .traton.tds-mode-light,
21
18
  .traton .tl-mode-light,
22
19
  .traton.tl-mode-light {
23
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
24
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
20
+ --component-card-background-primary: var(--traton-color-transparent-invisible-light);
21
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-light);
25
22
  --component-card-border-radius-default: var(--traton-unit-0);
26
23
  --component-card-space-padding-default: var(--traton-unit-0);
27
- --component-card-text-title-default: var(--color-text-strong);
28
- --component-card-text-subtitle-default: var(--color-text-soft);
29
- --component-card-text-body-default: var(--color-text-defined);
30
24
  }
31
25
 
32
26
  .tds-mode-dark,
@@ -34,26 +28,20 @@
34
28
  .scania.tds-mode-dark,
35
29
  .scania .tl-mode-dark,
36
30
  .scania.tl-mode-dark {
37
- --component-card-background-primary-default: var(--color-background-layer-01);
38
- --component-card-background-secondary-default: var(--color-background-layer-02);
31
+ --component-card-background-primary: var(--color-background-layer-01);
32
+ --component-card-background-secondary: var(--color-background-layer-02);
39
33
  --component-card-border-radius-default: var(--scania-unit-4);
40
34
  --component-card-space-padding-default: var(--scania-unit-16);
41
- --component-card-text-title-default: var(--color-text-strong);
42
- --component-card-text-subtitle-default: var(--color-text-soft);
43
- --component-card-text-body-default: var(--color-text-defined);
44
35
  }
45
36
 
46
37
  .traton .tds-mode-dark,
47
38
  .traton.tds-mode-dark,
48
39
  .traton .tl-mode-dark,
49
40
  .traton.tl-mode-dark {
50
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
51
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
41
+ --component-card-background-primary: var(--traton-color-transparent-invisible-dark);
42
+ --component-card-background-secondary: var(--traton-color-transparent-invisible-dark);
52
43
  --component-card-border-radius-default: var(--traton-unit-0);
53
44
  --component-card-space-padding-default: var(--traton-unit-0);
54
- --component-card-text-title-default: var(--color-text-strong);
55
- --component-card-text-subtitle-default: var(--color-text-soft);
56
- --component-card-text-body-default: var(--color-text-defined);
57
45
  }
58
46
 
59
47
  .tl-card {
package/dist/tl-divider.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .tl-divider {
2
- --divider-background: var(--color-foreground-border-discrete);
3
- --divider-background-strong: var(--color-foreground-border-strong);
4
- --divider-background-discrete: var(--color-foreground-border-discrete);
2
+ --divider-background: var(--color-border-discrete);
3
+ --divider-background-strong: var(--color-border-strong);
4
+ --divider-background-discrete: var(--color-border-discrete);
5
5
  }
6
6
 
7
7
  .tl-divider {
package/dist/tl-footer.css CHANGED
@@ -78,18 +78,18 @@
78
78
  }
79
79
 
80
80
  .tl-footer {
81
- --footer-top-background-primary: var(--color-background-layer-01);
82
- --footer-top-background-secondary: var(--color-background-base);
83
- --footer-top-background: var(--color-background-layer-01);
84
- --footer-top-divider: var(--color-foreground-border-discrete);
85
- --footer-top-links-desktop: var(--color-foreground-text-subtle);
86
- --footer-top-links: var(--component-footer-text-color-link-text);
87
- --footer-top-links-background-hover: var(--color-background-surface-300);
88
- --footer-top-button-active: var(--color-background-surface-300);
89
- --footer-main-background: var(--component-footer-primary);
90
- --footer-main-links: var(--color-foreground-text-accent-brand);
91
- --footer-main-divider: var(--component-footer-border);
92
- --footer-main-copyright: var(--component-footer-text-color-copyright);
81
+ --footer-top-background-primary: var(--component-footer-background-top-default);
82
+ --footer-top-background-secondary: var(--component-footer-background-top-secondary);
83
+ --footer-top-background: var(--component-footer-background-top-default);
84
+ --footer-top-divider: var(--color-border-discrete);
85
+ --footer-top-links-desktop: var(--component-footer-text-title-default);
86
+ --footer-top-links: var(--component-footer-text-link-default);
87
+ --footer-top-links-background-hover: var(--component-footer-background-list-item-active);
88
+ --footer-top-button-active: var(--component-footer-background-list-item-active);
89
+ --footer-main-background: var(--component-footer-background-main-default);
90
+ --footer-main-links: var(--component-footer-text-inverse-link-default);
91
+ --footer-main-divider: var(--component-footer-border-divider-default);
92
+ --footer-main-copyright: var(--component-footer-text-copyright-default);
93
93
  }
94
94
  .tl-footer.tl-footer--primary {
95
95
  --footer-top-background: var(--footer-top-background-primary);
@@ -98,6 +98,26 @@
98
98
  --footer-top-background: var(--footer-top-background-secondary);
99
99
  }
100
100
 
101
+ .scania .tl-footer {
102
+ --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
103
+ --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
104
+ }
105
+
106
+ .traton .tl-mode-dark .tl-footer {
107
+ --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
108
+ --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
109
+ }
110
+
111
+ .traton .tl-mode-light .tl-footer {
112
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
113
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
114
+ }
115
+
116
+ .traton .tl-footer {
117
+ --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
118
+ --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
119
+ }
120
+
101
121
  .tl-footer__group {
102
122
  display: block;
103
123
  }
@@ -139,7 +159,7 @@
139
159
  text-decoration: underline;
140
160
  }
141
161
  .tl-footer__link:focus-visible {
142
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
162
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
143
163
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
144
164
  outline-offset: 1px;
145
165
  z-index: 1;
@@ -199,7 +219,7 @@
199
219
  background-color: var(--footer-top-button-active);
200
220
  }
201
221
  .tl-footer__top-title:focus-visible {
202
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
222
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
203
223
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
204
224
  outline-offset: -2px;
205
225
  z-index: 1;
@@ -220,7 +240,7 @@
220
240
  text-decoration: none;
221
241
  }
222
242
  .tl-footer__main .tl-footer__link:focus-visible {
223
- outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
243
+ outline: var(--dimension-radius-focus-width) solid var(--color-system-info-default);
224
244
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
225
245
  outline-offset: 1px;
226
246
  z-index: 1;
package/dist/tl-link.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /* Typography Usage mixins */
2
2
  /* Component variables */
3
3
  .tl-link {
4
- --link: var(--color-foreground-text-accent-default);
5
- --link-hover: var(--color-foreground-text-accent-default);
4
+ --link: var(--color-system-info-default);
5
+ --link-hover: var(--color-system-info-default);
6
6
  --link-focus-outline-width: 2px;
7
- --link-visited: var(--color-foreground-text-accent-visited);
8
- --link-disabled: var(--color-foreground-text-disabled);
9
- --link-focus-outline-color: var(--color-foreground-border-accent-focus);
7
+ --link-visited: var(--color-system-info-defined);
8
+ --link-disabled: var(--color-text-disabled);
9
+ --link-focus-outline-color: var(--color-system-info-default);
10
10
  }
11
11
 
12
12
  .tl-banner .tl-link {
@@ -15,7 +15,7 @@
15
15
 
16
16
  .tl-toast .tl-link {
17
17
  --link: var(--color-system-info-default);
18
- --link-hover: var(--color-foreground-text-accent-default);
18
+ --link-hover: var(--color-system-info-default);
19
19
  }
20
20
 
21
21
  .traton .tl-link {
package/dist/tl-side-menu.css CHANGED
@@ -45,7 +45,7 @@ body {
45
45
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
46
46
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
47
47
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
48
- --component-side-menu-radius-radius-default: var(--scania-unit-0);
48
+ --component-side-menu-border-radius-default: var(--scania-unit-0);
49
49
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
50
50
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
51
51
  --component-side-menu-text-items-font-size: 14;
@@ -86,7 +86,7 @@ body {
86
86
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
87
87
  --traton-unit-12
88
88
  );
89
- --component-side-menu-radius-radius-default: var(--traton-unit-8);
89
+ --component-side-menu-border-radius-default: var(--traton-unit-8);
90
90
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
91
91
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
92
92
  --component-side-menu-text-items-font-size: 14;
@@ -123,7 +123,7 @@ body {
123
123
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
124
124
  --component-side-menu-space-collapsed-item-inner-icon-left-and-right-padding: 22;
125
125
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: 22;
126
- --component-side-menu-radius-radius-default: var(--scania-unit-0);
126
+ --component-side-menu-border-radius-default: var(--scania-unit-0);
127
127
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
128
128
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
129
129
  --component-side-menu-text-items-font-size: 14;
@@ -164,7 +164,7 @@ body {
164
164
  --component-side-menu-space-collapsed-item-inner-icon-top-and-bottom-padding: var(
165
165
  --traton-unit-12
166
166
  );
167
- --component-side-menu-radius-radius-default: var(--traton-unit-8);
167
+ --component-side-menu-border-radius-default: var(--traton-unit-8);
168
168
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
169
169
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
170
170
  --component-side-menu-text-items-font-size: 14;
package/dist/tl-slider.css CHANGED
@@ -469,51 +469,70 @@
469
469
  }
470
470
 
471
471
  .tl-button {
472
- --button-radius: calc(var(--component-button-border-radius-default) * 1px);
472
+ --button-transparent: transparent;
473
+ --button-white: var(--color-brand-neutral-white);
474
+ --button-black: var(--color-brand-neutral-black);
475
+ --button-radius: var(--dimension-radius-for-surface-clickable);
473
476
  --button-sm-only-icon-padding: 11px;
474
477
  --button-md-only-icon-padding: 13px;
475
478
  --button-lg-only-icon-padding: 17px;
476
- --button-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
477
- --button-primary-background: var(--component-button-background-standard-primary-default);
478
- --button-primary-background-hover: var(--component-button-background-standard-primary-hover);
479
- --button-primary-background-active: var(--component-button-background-standard-primary-active);
480
- --button-primary-background-focus: var(--component-button-background-standard-primary-default);
481
- --button-primary-color: var(--component-button-text-standard-primary-default);
482
- --button-primary-color-focus: var(--component-button-text-standard-primary-hover);
483
- --button-primary-border-color: var(--component-button-border-standard-primary-default);
484
- --button-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
479
+ --button-primary-background: var(--color-background-accent-primary-default);
480
+ --button-primary-background-hover: var(--color-background-accent-primary-hover);
481
+ --button-primary-background-active: var(--color-background-accent-primary-pressed);
482
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
483
+ --button-primary-color: var(--component-button-primary-text);
484
+ --button-primary-color-disabled: var(--color-foreground-text-disabled);
485
+ --button-primary-border-color: var(--button-transparent);
486
+ --button-primary-border-color-disabled: var(--button-transparent);
487
+ --button-primary-background-focus: var(--color-background-accent-primary-focus);
488
+ --button-primary-color-focus: var(--component-button-primary-text);
489
+ --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
485
490
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
486
- --button-secondary-background: var(--component-button-background-standard-secondary-default);
487
- --button-secondary-background-focus: var(
488
- --component-button-background-standard-secondary-default
489
- );
490
- --button-secondary-color: var(--component-button-text-standard-secondary-default);
491
- --button-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
492
- --button-secondary-border-color: var(--component-button-border-standard-secondary-default);
493
- --button-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
494
- --button-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
495
- --button-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
491
+ --button-secondary-background: var(--button-transparent);
492
+ --button-secondary-color: var(--color-foreground-text-strong);
493
+ --button-secondary-border-color: var(--color-foreground-border-soft);
494
+ --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
495
+ --button-secondary-border-color-active: var(--color-foreground-border-strong);
496
+ --button-secondary-background-disabled: var(--button-transparent);
497
+ --button-secondary-color-disabled: var(--color-foreground-text-disabled);
498
+ --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
499
+ --button-secondary-background-focus: var(--button-transparent);
500
+ --button-secondary-color-focus: var(--color-foreground-text-strong);
501
+ --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
496
502
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
497
- --button-ghost-background: var(--component-button-background-standard-tertiary-default);
498
- --button-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
499
- --button-ghost-color: var(--component-button-text-standard-tertiary-default);
500
- --button-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
501
- --button-ghost-border-color: var(--component-button-border-standard-tertiary-default);
502
- --button-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
503
- --button-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
504
- --button-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
503
+ --button-ghost-background: var(--button-transparent);
504
+ --button-ghost-color: var(--color-foreground-text-strong);
505
+ --button-ghost-border-color: var(--button-transparent);
506
+ --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
507
+ --button-ghost-border-color-active: var(--color-foreground-border-strong);
508
+ --button-ghost-color-disabled: var(--color-foreground-text-disabled);
509
+ --button-ghost-border-color-disabled: var(--button-transparent);
510
+ --button-ghost-background-focus: var(--button-transparent);
511
+ --button-ghost-color-focus: var(--color-foreground-text-strong);
512
+ --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
505
513
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
506
- --button-danger-background: var(--component-button-background-danger-primary-default);
507
- --button-danger-background-hover: var(--component-button-background-danger-primary-hover);
508
- --button-danger-background-active: var(--component-button-background-danger-primary-active);
509
- --button-danger-background-focus: var(--component-button-background-danger-primary-default);
510
- --button-danger-color: var(--component-button-text-danger-primary-default);
511
- --button-danger-color-focus: var(--component-button-text-danger-primary-hover);
512
- --button-danger-border-color: var(--component-button-border-danger-primary-default);
513
- --button-danger-border-color-active: var(--component-button-border-danger-primary-active);
514
- --button-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
514
+ --button-danger-background: var(--color-background-accent-danger-default);
515
+ --button-danger-color: var(--button-white);
516
+ --button-danger-border-color: var(--button-transparent);
517
+ --button-danger-background-hover: var(--color-background-accent-danger-hover);
518
+ --button-danger-background-active: var(--color-background-accent-danger-pressed);
519
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
520
+ --button-danger-color-disabled: var(--color-foreground-text-disabled);
521
+ --button-danger-border-color-disabled: var(--button-transparent);
522
+ --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
523
+ --button-danger-background-focus: var(--color-background-accent-danger-focus);
524
+ --button-danger-color-focus: var(--button-white);
525
+ --button-danger-border-color-focus: var(--button-transparent);
515
526
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
516
527
  }
528
+ .tl-button .tl-button--primary {
529
+ --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
530
+ --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
531
+ }
532
+ .tl-button .tl-button--secondary {
533
+ --button-primary-background-disabled: var(--button-white);
534
+ --button-danger-background-disabled: var(--button-white);
535
+ }
517
536
 
518
537
  .scania .tl-button {
519
538
  --button-outline-width: 2px;
@@ -564,8 +583,11 @@
564
583
  background-color: var(--button-primary-background-hover);
565
584
  }
566
585
  .tl-button--primary:disabled {
586
+ background-color: var(--button-primary-background-disabled);
587
+ color: var(--button-primary-color-disabled);
588
+ border-color: var(--button-primary-border-color-disabled);
567
589
  cursor: not-allowed;
568
- opacity: var(--button-opacity-disabled);
590
+ opacity: 0.6;
569
591
  }
570
592
  .tl-button--primary:focus-visible:not(:disabled) {
571
593
  background: var(--button-primary-background-focus);
@@ -590,8 +612,11 @@
590
612
  border-color: var(--button-secondary-border-color-hover);
591
613
  }
592
614
  .tl-button--secondary:disabled {
615
+ background-color: var(--button-secondary-background-disabled);
616
+ color: var(--button-secondary-color-disabled);
617
+ border-color: var(--button-secondary-border-color-disabled);
593
618
  cursor: not-allowed;
594
- opacity: var(--button-opacity-disabled);
619
+ opacity: 0.6;
595
620
  }
596
621
  .tl-button--secondary:focus-visible:not(:disabled) {
597
622
  background: var(--button-secondary-background-focus);
@@ -614,8 +639,9 @@
614
639
  border-color: var(--button-ghost-border-color-hover);
615
640
  }
616
641
  .tl-button--ghost:disabled {
642
+ color: var(--button-ghost-color-disabled);
617
643
  cursor: not-allowed;
618
- opacity: var(--button-opacity-disabled);
644
+ opacity: 0.6;
619
645
  }
620
646
  .tl-button--ghost:focus-visible:not(:disabled) {
621
647
  background: var(--button-ghost-background-focus);
@@ -638,8 +664,11 @@
638
664
  background-color: var(--button-danger-background-hover);
639
665
  }
640
666
  .tl-button--danger:disabled {
667
+ background-color: var(--button-danger-background-disabled);
668
+ color: var(--button-danger-color-disabled);
669
+ border-color: var(--button-danger-border-color-disabled);
641
670
  cursor: not-allowed;
642
- opacity: var(--button-opacity-disabled);
671
+ opacity: 0.6;
643
672
  }
644
673
  .tl-button--danger:focus-visible:not(:disabled) {
645
674
  background: var(--button-danger-background-focus);
package/dist/tl-tooltip.css CHANGED
@@ -1,8 +1,6 @@
1
1
  .tl-tooltip {
2
- --tooltip-text: var(--component-tooltip-text-default);
3
- --tooltip-background: var(--component-tooltip-background-default);
4
- --tooltip-border-radius: calc(var(--component-tooltip-border-radius-radius-default) * 1px);
5
- --tooltip-border-radius-none: calc(var(--component-tooltip-border-radius-radius-none) * 1px);
2
+ --tooltip-text: var(--color-foreground-text-inverse-strong);
3
+ --tooltip-background: var(--color-background-inverse-layer-03);
6
4
  }
7
5
 
8
6
  .scania {
@@ -24,19 +22,19 @@
24
22
  position: fixed;
25
23
  z-index: var(--tds-z-index-tooltip, 1000);
26
24
  padding: 8px;
27
- max-width: 208px;
25
+ max-width: 204px;
28
26
  width: max-content;
29
27
  white-space: normal;
30
- overflow-wrap: break-word;
31
- background-color: var(--tooltip-background);
32
- color: var(--tooltip-text);
28
+ word-wrap: break-word;
29
+ background-color: var(--tooltip-background, #333);
30
+ color: var(--tooltip-text, #fff);
33
31
  box-sizing: border-box;
34
32
  line-height: var(--tl-tooltip-line-height);
35
33
  opacity: 0;
36
34
  visibility: hidden;
37
35
  pointer-events: none;
38
36
  transition: opacity 0.2s ease, visibility 0.2s ease;
39
- border-radius: var(--tooltip-border-radius);
37
+ border-radius: 4px;
40
38
  }
41
39
  .tl-tooltip--visible {
42
40
  opacity: 1;
@@ -44,26 +42,26 @@
44
42
  pointer-events: auto;
45
43
  }
46
44
  .tl-tooltip--top-start {
47
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
45
+ border-radius: 4px 4px 4px 0;
48
46
  }
49
47
  .tl-tooltip--top-end {
50
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
48
+ border-radius: 4px 4px 0;
51
49
  }
52
50
  .tl-tooltip--bottom-start {
53
- border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
51
+ border-radius: 0 4px 4px;
54
52
  }
55
53
  .tl-tooltip--bottom-end {
56
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
54
+ border-radius: 4px 0 4px 4px;
57
55
  }
58
56
  .tl-tooltip--left-start {
59
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius);
57
+ border-radius: 4px 0 4px 4px;
60
58
  }
61
59
  .tl-tooltip--left-end {
62
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none) var(--tooltip-border-radius);
60
+ border-radius: 4px 4px 0;
63
61
  }
64
62
  .tl-tooltip--right-start {
65
- border-radius: var(--tooltip-border-radius-none) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius);
63
+ border-radius: 0 4px 4px;
66
64
  }
67
65
  .tl-tooltip--right-end {
68
- border-radius: var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius) var(--tooltip-border-radius-none);
66
+ border-radius: 4px 4px 4px 0;
69
67
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-var-work-beta.4",
3
+ "version": "0.1.0-var-work-beta.6",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [
package/dist/assets/icons/traton/placeholder.svg DELETED
@@ -1,3 +0,0 @@
1
- <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4C2 2.89543 2.89543 2 4 2H6V4H4V6H2V4ZM14 4H10V2H14V4ZM22 4H18V2H22V4ZM28 4H26V2H28C29.1046 2 30 2.89543 30 4V6H28V4ZM4 10V14H2V10H4ZM28 14V10H30V14H28ZM4 18V22H2V18H4ZM28 22V18H30V22H28ZM4 26V28H6V30H4C2.89543 30 2 29.1046 2 28V26H4ZM28 28V26H30V28C30 29.1046 29.1046 30 28 30H26V28H28ZM10 28H14V30H10V28ZM18 28H22V30H18V28Z" fill="#0D0F13"/>
3
- </svg>