@scania/tegel-lite 0.1.0-var-develop-beta.1 → 0.1.0-var-batch-4-beta.2

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 (7) hide show
  1. package/dist/components.css +118 -118
  2. package/dist/global.css +51 -12
  3. package/dist/scania-variables.css +252 -0
  4. package/dist/tl-card.css +17 -109
  5. package/dist/tl-modal.css +101 -9
  6. package/dist/traton-variables.css +236 -6
  7. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -1363,79 +1363,19 @@
1363
1363
  width: 100%;
1364
1364
  }
1365
1365
 
1366
- /**
1367
- * Do not edit directly, this file was auto-generated.
1368
- */
1369
- :root,
1370
- .tds-mode-light,
1371
- .scania .tds-mode-light,
1372
- .scania.tds-mode-light,
1373
- .scania .tl-mode-light,
1374
- .scania.tl-mode-light {
1375
- --component-card-background-primary-default: var(--scania-color-base-white);
1376
- --component-card-background-secondary-default: var(--scania-color-base-white);
1377
- --component-card-border-radius-default: var(--scania-unit-4);
1378
- --component-card-space-padding-default: var(--scania-unit-16);
1379
- --component-card-text-title-default: var(--color-text-strong);
1380
- --component-card-text-subtitle-default: var(--color-text-soft);
1381
- --component-card-text-body-default: var(--color-text-defined);
1382
- }
1383
-
1384
- .traton .tds-mode-light,
1385
- .traton.tds-mode-light,
1386
- .traton .tl-mode-light,
1387
- .traton.tl-mode-light {
1388
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-light);
1389
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-light);
1390
- --component-card-border-radius-default: var(--traton-unit-0);
1391
- --component-card-space-padding-default: var(--traton-unit-0);
1392
- --component-card-text-title-default: var(--color-text-strong);
1393
- --component-card-text-subtitle-default: var(--color-text-soft);
1394
- --component-card-text-body-default: var(--color-text-defined);
1395
- }
1396
-
1397
- .tds-mode-dark,
1398
- .scania .tds-mode-dark,
1399
- .scania.tds-mode-dark,
1400
- .scania .tl-mode-dark,
1401
- .scania.tl-mode-dark {
1402
- --component-card-background-primary-default: var(--color-background-layer-01);
1403
- --component-card-background-secondary-default: var(--color-background-layer-02);
1404
- --component-card-border-radius-default: var(--scania-unit-4);
1405
- --component-card-space-padding-default: var(--scania-unit-16);
1406
- --component-card-text-title-default: var(--color-text-strong);
1407
- --component-card-text-subtitle-default: var(--color-text-soft);
1408
- --component-card-text-body-default: var(--color-text-defined);
1409
- }
1410
-
1411
- .traton .tds-mode-dark,
1412
- .traton.tds-mode-dark,
1413
- .traton .tl-mode-dark,
1414
- .traton.tl-mode-dark {
1415
- --component-card-background-primary-default: var(--traton-color-transparent-invisible-dark);
1416
- --component-card-background-secondary-default: var(--traton-color-transparent-invisible-dark);
1417
- --component-card-border-radius-default: var(--traton-unit-0);
1418
- --component-card-space-padding-default: var(--traton-unit-0);
1419
- --component-card-text-title-default: var(--color-text-strong);
1420
- --component-card-text-subtitle-default: var(--color-text-soft);
1421
- --component-card-text-body-default: var(--color-text-defined);
1422
- }
1423
-
1424
1366
  .tl-card {
1425
- --card-background: var(--tds-white);
1426
- --card-background-primary: var(--component-card-primary);
1427
- --card-background-secondary: var(--component-card-secondary);
1367
+ --card-background: var(--component-card-background-primary-default);
1368
+ --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
1428
1369
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
1429
1370
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
1430
1371
  --card-box: var(--card-box-primary);
1431
1372
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
1432
1373
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
1433
- --card-headline: var(--color-foreground-text-strong);
1434
- --card-sub-headline: var(--color-foreground-text-subtle);
1435
- --card-body-color: var(--color-foreground-text-defined);
1436
- --card-divider: var(--color-foreground-border-discrete);
1437
- --card-icon-color: var(--color-foreground-icon-strong);
1438
- /* Paddings */
1374
+ --card-headline: var(--component-card-text-title-default);
1375
+ --card-sub-headline: var(--component-card-text-subtitle-default);
1376
+ --card-body-color: var(--component-card-text-body-default);
1377
+ --card-divider: var(--color-border-soft);
1378
+ --card-icon-color: var(--component-card-text-title-default);
1439
1379
  --card-body-padding: 0 16px;
1440
1380
  --card-header-padding: 16px;
1441
1381
  --card-slotted-padding: 16px;
@@ -1443,31 +1383,23 @@
1443
1383
  }
1444
1384
  .tl-card--primary {
1445
1385
  --card-box: var(--card-box-primary);
1386
+ --card-background: var(--component-card-background-primary-default);
1446
1387
  }
1447
- .tl-card.tl-card--mode-variant-secondary {
1388
+ .tl-card--secondary {
1448
1389
  --card-box: var(--card-box-secondary);
1390
+ --card-background: var(--component-card-background-secondary-default);
1449
1391
  }
1450
1392
 
1451
- .scania .tl-card {
1452
- /* Paddings */
1453
- --card-body-padding: 0 16px;
1454
- --card-header-padding: 16px;
1455
- --card-slotted-padding: 16px;
1456
- --card-divider-margin: 16px 16px 0;
1457
- }
1458
- .scania .tl-card--primary {
1459
- --card-box: var(--card-box-primary);
1460
- }
1461
- .scania .tl-card--secondary {
1462
- --card-box: var(--card-box-primary);
1393
+ .tds-mode-dark .tl-card,
1394
+ .tl-mode-dark .tl-card {
1395
+ --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
1396
+ --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
1463
1397
  }
1464
1398
 
1465
1399
  .traton .tl-card {
1466
1400
  --card-box: none;
1467
- --card-background: transparent;
1468
1401
  --card-box-hover: none;
1469
1402
  --card-box-pressed: none;
1470
- /* Paddings and margins */
1471
1403
  --card-body-padding: 0;
1472
1404
  --card-header-padding: 16px 16px 16px 0;
1473
1405
  --card-slotted-padding: 16px 16px 16px 0;
@@ -1475,35 +1407,11 @@
1475
1407
  }
1476
1408
  .traton .tl-card--primary {
1477
1409
  --card-box: none;
1478
- --card-background: transparent;
1410
+ --card-background: var(--component-card-background-primary-default);
1479
1411
  }
1480
1412
  .traton .tl-card--secondary {
1481
1413
  --card-box: none;
1482
- --card-background: transparent;
1483
- }
1484
-
1485
- /* Dark mode */
1486
- .tl-mode-dark {
1487
- --card-background-primary: var(--tds-grey-900);
1488
- --card-background-secondary: var(--tds-grey-850);
1489
- }
1490
- .tl-mode-dark .tl-card {
1491
- --card-background: var(--card-background-primary);
1492
- }
1493
- .tl-mode-dark .tl-card--primary {
1494
- --card-box: var(--card-box-primary);
1495
- --card-background: var(--card-background-primary);
1496
- }
1497
- .tl-mode-dark .tl-card--secondary {
1498
- --card-box: var(--card-box-primary);
1499
- --card-background: var(--card-background-secondary);
1500
- }
1501
-
1502
- .traton .tl-mode-dark .tl-card--primary {
1503
- --card-background: transparent;
1504
- }
1505
- .traton .tl-mode-dark .tl-card--secondary {
1506
- --card-background: transparent;
1414
+ --card-background: var(--component-card-background-secondary-default);
1507
1415
  }
1508
1416
 
1509
1417
  .tl-card {
@@ -1519,7 +1427,7 @@
1519
1427
  width: 100%;
1520
1428
  box-shadow: var(--card-box);
1521
1429
  background-color: var(--card-background);
1522
- border-radius: 4px;
1430
+ border-radius: var(--card-border-radius);
1523
1431
  overflow: hidden;
1524
1432
  }
1525
1433
  .tl-card--clickable {
@@ -6239,14 +6147,105 @@ body {
6239
6147
  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
6240
6148
  }
6241
6149
 
6242
- /* Component variables */
6150
+ /**
6151
+ * Do not edit directly, this file was auto-generated.
6152
+ */
6153
+ :root,
6154
+ .tds-mode-light,
6155
+ .scania .tds-mode-light,
6156
+ .scania.tds-mode-light,
6157
+ .scania .tl-mode-light,
6158
+ .scania.tl-mode-light {
6159
+ --component-modal-background-default: var(--color-background-layer-02);
6160
+ --component-modal-border-radius-default: 4;
6161
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6162
+ --component-modal-text-title-default: var(--color-text-strong);
6163
+ --component-modal-text-body-default: var(--color-text-strong);
6164
+ }
6165
+
6166
+ .traton .tds-mode-light,
6167
+ .traton.tds-mode-light,
6168
+ .traton .tl-mode-light,
6169
+ .traton.tl-mode-light {
6170
+ --component-modal-background-default: var(--color-background-layer-02);
6171
+ --component-modal-border-radius-default: 4;
6172
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6173
+ --component-modal-text-title-default: var(--color-text-strong);
6174
+ --component-modal-text-body-default: var(--color-text-strong);
6175
+ }
6176
+
6177
+ .tds-mode-dark,
6178
+ .scania .tds-mode-dark,
6179
+ .scania.tds-mode-dark,
6180
+ .scania .tl-mode-dark,
6181
+ .scania.tl-mode-dark {
6182
+ --component-modal-background-default: var(--color-background-layer-01);
6183
+ --component-modal-border-radius-default: 4;
6184
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6185
+ --component-modal-text-title-default: var(--color-text-strong);
6186
+ --component-modal-text-body-default: var(--color-text-strong);
6187
+ }
6188
+
6189
+ .traton .tds-mode-dark,
6190
+ .traton.tds-mode-dark,
6191
+ .traton .tl-mode-dark,
6192
+ .traton.tl-mode-dark {
6193
+ --component-modal-background-default: var(--color-background-layer-02);
6194
+ --component-modal-border-radius-default: 4;
6195
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
6196
+ --component-modal-text-title-default: var(--color-text-strong);
6197
+ --component-modal-text-body-default: var(--color-text-strong);
6198
+ }
6199
+
6200
+ /**
6201
+ * Do not edit directly, this file was auto-generated.
6202
+ */
6203
+ :root,
6204
+ .tds-mode-light,
6205
+ .scania .tds-mode-light,
6206
+ .scania.tds-mode-light,
6207
+ .scania .tl-mode-light,
6208
+ .scania.tl-mode-light {
6209
+ --component-overlay-background-default: var(--scania-color-base-black);
6210
+ --component-overlay-opacity-default: 60;
6211
+ }
6212
+
6213
+ .traton .tds-mode-light,
6214
+ .traton.tds-mode-light,
6215
+ .traton .tl-mode-light,
6216
+ .traton.tl-mode-light {
6217
+ --component-overlay-background-default: var(--traton-color-base-black);
6218
+ --component-overlay-opacity-default: 40;
6219
+ }
6220
+
6221
+ .tds-mode-dark,
6222
+ .scania .tds-mode-dark,
6223
+ .scania.tds-mode-dark,
6224
+ .scania .tl-mode-dark,
6225
+ .scania.tl-mode-dark {
6226
+ --component-overlay-background-default: var(--scania-color-grey-900);
6227
+ --component-overlay-opacity-default: 84;
6228
+ }
6229
+
6230
+ .traton .tds-mode-dark,
6231
+ .traton.tds-mode-dark,
6232
+ .traton .tl-mode-dark,
6233
+ .traton.tl-mode-dark {
6234
+ --component-overlay-background-default: var(--traton-color-base-black);
6235
+ --component-overlay-opacity-default: 60;
6236
+ }
6237
+
6243
6238
  .tl-modal,
6244
- :root {
6245
- --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
6246
- --modal-background: var(--color-background-layer-02);
6247
- --modal-backdrop: var(--color-background-overlay);
6248
- --modal-text: var(--color-foreground-text-strong);
6249
- --modal-cross-svg: var(--color-foreground-text-strong);
6239
+ .tl-modal__overlay {
6240
+ --modal-background: var(--component-modal-background-default);
6241
+ --modal-backdrop: color-mix(
6242
+ in srgb,
6243
+ var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
6244
+ transparent
6245
+ );
6246
+ --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
6247
+ --modal-text: var(--component-modal-text-title-default);
6248
+ --modal-cross-svg: var(--component-modal-icon-dismiss-default);
6250
6249
  --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
6251
6250
  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
6252
6251
  }
@@ -6263,7 +6262,7 @@ body {
6263
6262
  box-shadow: var(--modal-shadow);
6264
6263
  margin: auto;
6265
6264
  position: relative;
6266
- border-radius: 4px;
6265
+ border-radius: var(--modal-border-radius);
6267
6266
  max-height: 85vh;
6268
6267
  overflow-y: auto;
6269
6268
  pointer-events: auto;
@@ -6466,9 +6465,10 @@ body {
6466
6465
  background-color: transparent;
6467
6466
  border: 0;
6468
6467
  padding: 0;
6468
+ height: 20px;
6469
+ width: 20px;
6469
6470
  appearance: unset;
6470
6471
  display: inline-block;
6471
- height: auto;
6472
6472
  color: var(--modal-text);
6473
6473
  cursor: pointer;
6474
6474
  }
package/dist/global.css CHANGED
@@ -1289,23 +1289,62 @@ html {
1289
1289
  }
1290
1290
 
1291
1291
  /** The breakpoint at which the layout changes from fixed size to full-width. */
1292
- .tl-mode-light {
1293
- --tl-scrollbar-track-color: transparent;
1294
- --tl-scrollbar-thumb-color: #303c612b;
1292
+ /**
1293
+ * Do not edit directly, this file was auto-generated.
1294
+ */
1295
+ :root,
1296
+ .tds-mode-light,
1297
+ .scania .tds-mode-light,
1298
+ .scania.tds-mode-light,
1299
+ .scania .tl-mode-light,
1300
+ .scania.tl-mode-light {
1301
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1302
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1303
+ --component-scrollbar-width-radius-default: 4;
1304
+ --component-scrollbar-width-radius-hover: 6;
1305
+ }
1306
+
1307
+ .traton .tds-mode-light,
1308
+ .traton.tds-mode-light,
1309
+ .traton .tl-mode-light,
1310
+ .traton.tl-mode-light {
1311
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1312
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1313
+ --component-scrollbar-width-radius-default: 4;
1314
+ --component-scrollbar-width-radius-hover: 6;
1315
+ }
1316
+
1317
+ .tds-mode-dark,
1318
+ .scania .tds-mode-dark,
1319
+ .scania.tds-mode-dark,
1320
+ .scania .tl-mode-dark,
1321
+ .scania.tl-mode-dark {
1322
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1323
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1324
+ --component-scrollbar-width-radius-default: 4;
1325
+ --component-scrollbar-width-radius-hover: 6;
1326
+ }
1327
+
1328
+ .traton .tds-mode-dark,
1329
+ .traton.tds-mode-dark,
1330
+ .traton .tl-mode-dark,
1331
+ .traton.tl-mode-dark {
1332
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1333
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1334
+ --component-scrollbar-width-radius-default: 4;
1335
+ --component-scrollbar-width-radius-hover: 6;
1295
1336
  }
1296
1337
 
1297
- .tl-mode-dark {
1338
+ :root,
1339
+ .tl-mode-light,
1340
+ .tds-mode-light {
1298
1341
  --tl-scrollbar-track-color: transparent;
1299
- --tl-scrollbar-thumb-color: #a4c7f5;
1342
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1300
1343
  }
1301
1344
 
1302
- .traton .tl-mode-light {
1303
- --tl-scrollbar-track-color: transparent;
1304
- --tl-scrollbar-thumb-color: #1a1a1926;
1305
- }
1306
- .traton .tl-mode-dark {
1307
- --tl-scrollbar-track-color: transparent;
1308
- --tl-scrollbar-thumb-color: #d9edf054;
1345
+ .tl-mode-dark,
1346
+ .tds-mode-dark {
1347
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1309
1348
  }
1310
1349
 
1311
1350
  body {
package/dist/scania-variables.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /* Scania primitive tokens */
2
3
  /**
3
4
  * Do not edit directly, this file was auto-generated.
@@ -1153,6 +1154,7 @@ h6 {
1153
1154
  --scania-icon-burger-svg: url(./assets/icons/scania/burger.svg);
1154
1155
  --scania-icon-bus_inactive-svg: url(./assets/icons/scania/bus_inactive.svg);
1155
1156
  --scania-icon-bus-svg: url(./assets/icons/scania/bus.svg);
1157
+ --scania-icon-cab_door-svg: url(./assets/icons/scania/cab_door.svg);
1156
1158
  --scania-icon-calendar_inactive-svg: url(./assets/icons/scania/calendar_inactive.svg);
1157
1159
  --scania-icon-calendar-svg: url(./assets/icons/scania/calendar.svg);
1158
1160
  --scania-icon-camera_inactive-svg: url(./assets/icons/scania/camera_inactive.svg);
@@ -1267,6 +1269,7 @@ h6 {
1267
1269
  --scania-icon-kebab-svg: url(./assets/icons/scania/kebab.svg);
1268
1270
  --scania-icon-key_inactive-svg: url(./assets/icons/scania/key_inactive.svg);
1269
1271
  --scania-icon-key-svg: url(./assets/icons/scania/key.svg);
1272
+ --scania-icon-language-svg: url(./assets/icons/scania/language.svg);
1270
1273
  --scania-icon-layer_inactive-svg: url(./assets/icons/scania/layer_inactive.svg);
1271
1274
  --scania-icon-layer-svg: url(./assets/icons/scania/layer.svg);
1272
1275
  --scania-icon-link_broken-svg: url(./assets/icons/scania/link_broken.svg);
@@ -1283,6 +1286,8 @@ h6 {
1283
1286
  --scania-icon-merge-svg: url(./assets/icons/scania/merge.svg);
1284
1287
  --scania-icon-message_inactive-svg: url(./assets/icons/scania/message_inactive.svg);
1285
1288
  --scania-icon-message-svg: url(./assets/icons/scania/message.svg);
1289
+ --scania-icon-microphone_inactive-svg: url(./assets/icons/scania/microphone_inactive.svg);
1290
+ --scania-icon-microphone-svg: url(./assets/icons/scania/microphone.svg);
1286
1291
  --scania-icon-mileage_inactive-svg: url(./assets/icons/scania/mileage_inactive.svg);
1287
1292
  --scania-icon-mileage-svg: url(./assets/icons/scania/mileage.svg);
1288
1293
  --scania-icon-minimize_fullscreen-svg: url(./assets/icons/scania/minimize_fullscreen.svg);
@@ -1290,9 +1295,11 @@ h6 {
1290
1295
  --scania-icon-navigate_inactive-svg: url(./assets/icons/scania/navigate_inactive.svg);
1291
1296
  --scania-icon-navigate-svg: url(./assets/icons/scania/navigate.svg);
1292
1297
  --scania-icon-notification_inactive-svg: url(./assets/icons/scania/notification_inactive.svg);
1298
+ --scania-icon-notification_snooze-svg: url(./assets/icons/scania/notification_snooze.svg);
1293
1299
  --scania-icon-notification-svg: url(./assets/icons/scania/notification.svg);
1294
1300
  --scania-icon-oil_level_inactive-svg: url(./assets/icons/scania/oil_level_inactive.svg);
1295
1301
  --scania-icon-oil_level-svg: url(./assets/icons/scania/oil_level.svg);
1302
+ --scania-icon-paperclip-svg: url(./assets/icons/scania/paperclip.svg);
1296
1303
  --scania-icon-pause_inactive-svg: url(./assets/icons/scania/pause_inactive.svg);
1297
1304
  --scania-icon-pause-svg: url(./assets/icons/scania/pause.svg);
1298
1305
  --scania-icon-phone_inactive-svg: url(./assets/icons/scania/phone_inactive.svg);
@@ -1312,6 +1319,7 @@ h6 {
1312
1319
  --scania-icon-privacy-svg: url(./assets/icons/scania/privacy.svg);
1313
1320
  --scania-icon-profile_inactive-svg: url(./assets/icons/scania/profile_inactive.svg);
1314
1321
  --scania-icon-profile-svg: url(./assets/icons/scania/profile.svg);
1322
+ --scania-icon-prohibited-svg: url(./assets/icons/scania/prohibited.svg);
1315
1323
  --scania-icon-proportions_inactive-svg: url(./assets/icons/scania/proportions_inactive.svg);
1316
1324
  --scania-icon-proportions-svg: url(./assets/icons/scania/proportions.svg);
1317
1325
  --scania-icon-range_inactive-svg: url(./assets/icons/scania/range_inactive.svg);
@@ -1333,6 +1341,7 @@ h6 {
1333
1341
  --scania-icon-send-svg: url(./assets/icons/scania/send.svg);
1334
1342
  --scania-icon-settings-svg: url(./assets/icons/scania/settings.svg);
1335
1343
  --scania-icon-share-svg: url(./assets/icons/scania/share.svg);
1344
+ --scania-icon-shuffle-svg: url(./assets/icons/scania/shuffle.svg);
1336
1345
  --scania-icon-skip_backwards-svg: url(./assets/icons/scania/skip_backwards.svg);
1337
1346
  --scania-icon-skip_forward-svg: url(./assets/icons/scania/skip_forward.svg);
1338
1347
  --scania-icon-smartphone_inactive-svg: url(./assets/icons/scania/smartphone_inactive.svg);
@@ -1405,6 +1414,7 @@ h6 {
1405
1414
  --icon-burger-svg: var(--scania-icon-burger-svg);
1406
1415
  --icon-bus_inactive-svg: var(--scania-icon-bus_inactive-svg);
1407
1416
  --icon-bus-svg: var(--scania-icon-bus-svg);
1417
+ --icon-cab_door-svg: var(--scania-icon-cab_door-svg);
1408
1418
  --icon-calendar_inactive-svg: var(--scania-icon-calendar_inactive-svg);
1409
1419
  --icon-calendar-svg: var(--scania-icon-calendar-svg);
1410
1420
  --icon-camera_inactive-svg: var(--scania-icon-camera_inactive-svg);
@@ -1519,6 +1529,7 @@ h6 {
1519
1529
  --icon-kebab-svg: var(--scania-icon-kebab-svg);
1520
1530
  --icon-key_inactive-svg: var(--scania-icon-key_inactive-svg);
1521
1531
  --icon-key-svg: var(--scania-icon-key-svg);
1532
+ --icon-language-svg: var(--scania-icon-language-svg);
1522
1533
  --icon-layer_inactive-svg: var(--scania-icon-layer_inactive-svg);
1523
1534
  --icon-layer-svg: var(--scania-icon-layer-svg);
1524
1535
  --icon-link_broken-svg: var(--scania-icon-link_broken-svg);
@@ -1535,6 +1546,8 @@ h6 {
1535
1546
  --icon-merge-svg: var(--scania-icon-merge-svg);
1536
1547
  --icon-message_inactive-svg: var(--scania-icon-message_inactive-svg);
1537
1548
  --icon-message-svg: var(--scania-icon-message-svg);
1549
+ --icon-microphone_inactive-svg: var(--scania-icon-microphone_inactive-svg);
1550
+ --icon-microphone-svg: var(--scania-icon-microphone-svg);
1538
1551
  --icon-mileage_inactive-svg: var(--scania-icon-mileage_inactive-svg);
1539
1552
  --icon-mileage-svg: var(--scania-icon-mileage-svg);
1540
1553
  --icon-minimize_fullscreen-svg: var(--scania-icon-minimize_fullscreen-svg);
@@ -1542,9 +1555,11 @@ h6 {
1542
1555
  --icon-navigate_inactive-svg: var(--scania-icon-navigate_inactive-svg);
1543
1556
  --icon-navigate-svg: var(--scania-icon-navigate-svg);
1544
1557
  --icon-notification_inactive-svg: var(--scania-icon-notification_inactive-svg);
1558
+ --icon-notification_snooze-svg: var(--scania-icon-notification_snooze-svg);
1545
1559
  --icon-notification-svg: var(--scania-icon-notification-svg);
1546
1560
  --icon-oil_level_inactive-svg: var(--scania-icon-oil_level_inactive-svg);
1547
1561
  --icon-oil_level-svg: var(--scania-icon-oil_level-svg);
1562
+ --icon-paperclip-svg: var(--scania-icon-paperclip-svg);
1548
1563
  --icon-pause_inactive-svg: var(--scania-icon-pause_inactive-svg);
1549
1564
  --icon-pause-svg: var(--scania-icon-pause-svg);
1550
1565
  --icon-phone_inactive-svg: var(--scania-icon-phone_inactive-svg);
@@ -1564,6 +1579,7 @@ h6 {
1564
1579
  --icon-privacy-svg: var(--scania-icon-privacy-svg);
1565
1580
  --icon-profile_inactive-svg: var(--scania-icon-profile_inactive-svg);
1566
1581
  --icon-profile-svg: var(--scania-icon-profile-svg);
1582
+ --icon-prohibited-svg: var(--scania-icon-prohibited-svg);
1567
1583
  --icon-proportions_inactive-svg: var(--scania-icon-proportions_inactive-svg);
1568
1584
  --icon-proportions-svg: var(--scania-icon-proportions-svg);
1569
1585
  --icon-range_inactive-svg: var(--scania-icon-range_inactive-svg);
@@ -1585,6 +1601,7 @@ h6 {
1585
1601
  --icon-send-svg: var(--scania-icon-send-svg);
1586
1602
  --icon-settings-svg: var(--scania-icon-settings-svg);
1587
1603
  --icon-share-svg: var(--scania-icon-share-svg);
1604
+ --icon-shuffle-svg: var(--scania-icon-shuffle-svg);
1588
1605
  --icon-skip_backwards-svg: var(--scania-icon-skip_backwards-svg);
1589
1606
  --icon-skip_forward-svg: var(--scania-icon-skip_forward-svg);
1590
1607
  --icon-smartphone_inactive-svg: var(--scania-icon-smartphone_inactive-svg);
@@ -1626,4 +1643,239 @@ h6 {
1626
1643
  --icon-wifi-svg: var(--scania-icon-wifi-svg);
1627
1644
  --icon-windscreen_heating_inactive-svg: var(--scania-icon-windscreen_heating_inactive-svg);
1628
1645
  --icon-windscreen_heating-svg: var(--scania-icon-windscreen_heating-svg);
1646
+ }
1647
+
1648
+ /* Cross-brand placeholder fallbacks — generated alongside icon.scss */
1649
+ /**
1650
+ * Do not edit directly, this file was auto-generated.
1651
+ */
1652
+ :root,
1653
+ .scania {
1654
+ /* No fallbacks needed: this brand defines every icon name. */
1655
+ }
1656
+
1657
+ .traton {
1658
+ --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
1659
+ --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
1660
+ --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
1661
+ --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
1662
+ --icon-adblue-svg: var(--traton-icon-placeholder-svg);
1663
+ --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
1664
+ --icon-audio-svg: var(--traton-icon-placeholder-svg);
1665
+ --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
1666
+ --icon-award-svg: var(--traton-icon-placeholder-svg);
1667
+ --icon-back-svg: var(--traton-icon-placeholder-svg);
1668
+ --icon-backward-svg: var(--traton-icon-placeholder-svg);
1669
+ --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
1670
+ --icon-bug-svg: var(--traton-icon-placeholder-svg);
1671
+ --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
1672
+ --icon-bus-svg: var(--traton-icon-placeholder-svg);
1673
+ --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
1674
+ --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
1675
+ --icon-calendar_inactive-svg: var(--traton-icon-placeholder-svg);
1676
+ --icon-camera-svg: var(--traton-icon-placeholder-svg);
1677
+ --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
1678
+ --icon-card-svg: var(--traton-icon-placeholder-svg);
1679
+ --icon-cart-svg: var(--traton-icon-placeholder-svg);
1680
+ --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
1681
+ --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
1682
+ --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
1683
+ --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
1684
+ --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
1685
+ --icon-clock-svg: var(--traton-icon-placeholder-svg);
1686
+ --icon-clock_inactive-svg: var(--traton-icon-placeholder-svg);
1687
+ --icon-configurator-svg: var(--traton-icon-placeholder-svg);
1688
+ --icon-contact-svg: var(--traton-icon-placeholder-svg);
1689
+ --icon-contact_inactive-svg: var(--traton-icon-placeholder-svg);
1690
+ --icon-cookie-svg: var(--traton-icon-placeholder-svg);
1691
+ --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
1692
+ --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
1693
+ --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
1694
+ --icon-copy-svg: var(--traton-icon-placeholder-svg);
1695
+ --icon-cup-svg: var(--traton-icon-placeholder-svg);
1696
+ --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
1697
+ --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
1698
+ --icon-department-svg: var(--traton-icon-placeholder-svg);
1699
+ --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
1700
+ --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
1701
+ --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
1702
+ --icon-diamond-svg: var(--traton-icon-placeholder-svg);
1703
+ --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
1704
+ --icon-document-svg: var(--traton-icon-placeholder-svg);
1705
+ --icon-document_check-svg: var(--traton-icon-placeholder-svg);
1706
+ --icon-document_doc-svg: var(--traton-icon-placeholder-svg);
1707
+ --icon-document_eye-svg: var(--traton-icon-placeholder-svg);
1708
+ --icon-document_pdf-svg: var(--traton-icon-placeholder-svg);
1709
+ --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
1710
+ --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
1711
+ --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
1712
+ --icon-document_tool-svg: var(--traton-icon-placeholder-svg);
1713
+ --icon-document_wrong-svg: var(--traton-icon-placeholder-svg);
1714
+ --icon-document_xls-svg: var(--traton-icon-placeholder-svg);
1715
+ --icon-dollar-svg: var(--traton-icon-placeholder-svg);
1716
+ --icon-doner-svg: var(--traton-icon-placeholder-svg);
1717
+ --icon-double_kebab-svg: var(--traton-icon-placeholder-svg);
1718
+ --icon-download-svg: var(--traton-icon-placeholder-svg);
1719
+ --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
1720
+ --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
1721
+ --icon-drop-svg: var(--traton-icon-placeholder-svg);
1722
+ --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
1723
+ --icon-edit_inactive-svg: var(--traton-icon-placeholder-svg);
1724
+ --icon-email-svg: var(--traton-icon-placeholder-svg);
1725
+ --icon-engine-svg: var(--traton-icon-placeholder-svg);
1726
+ --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
1727
+ --icon-environment-svg: var(--traton-icon-placeholder-svg);
1728
+ --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
1729
+ --icon-exit-svg: var(--traton-icon-placeholder-svg);
1730
+ --icon-expand-svg: var(--traton-icon-placeholder-svg);
1731
+ --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
1732
+ --icon-export-svg: var(--traton-icon-placeholder-svg);
1733
+ --icon-export_inactive-svg: var(--traton-icon-placeholder-svg);
1734
+ --icon-eye-svg: var(--traton-icon-placeholder-svg);
1735
+ --icon-eye_inactive-svg: var(--traton-icon-placeholder-svg);
1736
+ --icon-face_dissatisfied-svg: var(--traton-icon-placeholder-svg);
1737
+ --icon-face_neutral-svg: var(--traton-icon-placeholder-svg);
1738
+ --icon-face_satisfied-svg: var(--traton-icon-placeholder-svg);
1739
+ --icon-factory-svg: var(--traton-icon-placeholder-svg);
1740
+ --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
1741
+ --icon-ferry-svg: var(--traton-icon-placeholder-svg);
1742
+ --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
1743
+ --icon-filters-svg: var(--traton-icon-placeholder-svg);
1744
+ --icon-filters_inactive-svg: var(--traton-icon-placeholder-svg);
1745
+ --icon-flash-svg: var(--traton-icon-placeholder-svg);
1746
+ --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
1747
+ --icon-folder-svg: var(--traton-icon-placeholder-svg);
1748
+ --icon-forward-svg: var(--traton-icon-placeholder-svg);
1749
+ --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
1750
+ --icon-fuel-svg: var(--traton-icon-placeholder-svg);
1751
+ --icon-fuel_gauge-svg: var(--traton-icon-placeholder-svg);
1752
+ --icon-fuel_gauge_inactive-svg: var(--traton-icon-placeholder-svg);
1753
+ --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
1754
+ --icon-gift-svg: var(--traton-icon-placeholder-svg);
1755
+ --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
1756
+ --icon-global-svg: var(--traton-icon-placeholder-svg);
1757
+ --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
1758
+ --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
1759
+ --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
1760
+ --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
1761
+ --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
1762
+ --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
1763
+ --icon-heart-svg: var(--traton-icon-placeholder-svg);
1764
+ --icon-heart_inactive-svg: var(--traton-icon-placeholder-svg);
1765
+ --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
1766
+ --icon-history-svg: var(--traton-icon-placeholder-svg);
1767
+ --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
1768
+ --icon-home-svg: var(--traton-icon-placeholder-svg);
1769
+ --icon-home_inactive-svg: var(--traton-icon-placeholder-svg);
1770
+ --icon-idea-svg: var(--traton-icon-placeholder-svg);
1771
+ --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
1772
+ --icon-image-svg: var(--traton-icon-placeholder-svg);
1773
+ --icon-image_add-svg: var(--traton-icon-placeholder-svg);
1774
+ --icon-image_inactive-svg: var(--traton-icon-placeholder-svg);
1775
+ --icon-image_set-svg: var(--traton-icon-placeholder-svg);
1776
+ --icon-insights-svg: var(--traton-icon-placeholder-svg);
1777
+ --icon-kebab-svg: var(--traton-icon-placeholder-svg);
1778
+ --icon-key-svg: var(--traton-icon-placeholder-svg);
1779
+ --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
1780
+ --icon-language-svg: var(--traton-icon-placeholder-svg);
1781
+ --icon-layer-svg: var(--traton-icon-placeholder-svg);
1782
+ --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
1783
+ --icon-link-svg: var(--traton-icon-placeholder-svg);
1784
+ --icon-link_broken-svg: var(--traton-icon-placeholder-svg);
1785
+ --icon-list-svg: var(--traton-icon-placeholder-svg);
1786
+ --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
1787
+ --icon-lock-svg: var(--traton-icon-placeholder-svg);
1788
+ --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
1789
+ --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
1790
+ --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
1791
+ --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1792
+ --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
1793
+ --icon-merge-svg: var(--traton-icon-placeholder-svg);
1794
+ --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
1795
+ --icon-message-svg: var(--traton-icon-placeholder-svg);
1796
+ --icon-message_inactive-svg: var(--traton-icon-placeholder-svg);
1797
+ --icon-microphone-svg: var(--traton-icon-placeholder-svg);
1798
+ --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
1799
+ --icon-mileage-svg: var(--traton-icon-placeholder-svg);
1800
+ --icon-mileage_inactive-svg: var(--traton-icon-placeholder-svg);
1801
+ --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
1802
+ --icon-navigate-svg: var(--traton-icon-placeholder-svg);
1803
+ --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
1804
+ --icon-notification_inactive-svg: var(--traton-icon-placeholder-svg);
1805
+ --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
1806
+ --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
1807
+ --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
1808
+ --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
1809
+ --icon-pause-svg: var(--traton-icon-placeholder-svg);
1810
+ --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
1811
+ --icon-phone-svg: var(--traton-icon-placeholder-svg);
1812
+ --icon-phone_inactive-svg: var(--traton-icon-placeholder-svg);
1813
+ --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
1814
+ --icon-pin-svg: var(--traton-icon-placeholder-svg);
1815
+ --icon-pin_inactive-svg: var(--traton-icon-placeholder-svg);
1816
+ --icon-play-svg: var(--traton-icon-placeholder-svg);
1817
+ --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
1818
+ --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
1819
+ --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
1820
+ --icon-print_inactive-svg: var(--traton-icon-placeholder-svg);
1821
+ --icon-privacy-svg: var(--traton-icon-placeholder-svg);
1822
+ --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
1823
+ --icon-profile-svg: var(--traton-icon-placeholder-svg);
1824
+ --icon-profile_inactive-svg: var(--traton-icon-placeholder-svg);
1825
+ --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
1826
+ --icon-proportions-svg: var(--traton-icon-placeholder-svg);
1827
+ --icon-proportions_inactive-svg: var(--traton-icon-placeholder-svg);
1828
+ --icon-range-svg: var(--traton-icon-placeholder-svg);
1829
+ --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
1830
+ --icon-redirect-svg: var(--traton-icon-placeholder-svg);
1831
+ --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
1832
+ --icon-reload-svg: var(--traton-icon-placeholder-svg);
1833
+ --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
1834
+ --icon-repeat-svg: var(--traton-icon-placeholder-svg);
1835
+ --icon-report-svg: var(--traton-icon-placeholder-svg);
1836
+ --icon-report_inactive-svg: var(--traton-icon-placeholder-svg);
1837
+ --icon-route-svg: var(--traton-icon-placeholder-svg);
1838
+ --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
1839
+ --icon-save-svg: var(--traton-icon-placeholder-svg);
1840
+ --icon-save_inactive-svg: var(--traton-icon-placeholder-svg);
1841
+ --icon-send-svg: var(--traton-icon-placeholder-svg);
1842
+ --icon-send_inactive-svg: var(--traton-icon-placeholder-svg);
1843
+ --icon-settings-svg: var(--traton-icon-placeholder-svg);
1844
+ --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
1845
+ --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
1846
+ --icon-skip_forward-svg: var(--traton-icon-placeholder-svg);
1847
+ --icon-smartphone-svg: var(--traton-icon-placeholder-svg);
1848
+ --icon-smartphone_inactive-svg: var(--traton-icon-placeholder-svg);
1849
+ --icon-speedometer-svg: var(--traton-icon-placeholder-svg);
1850
+ --icon-speedometer_inactive-svg: var(--traton-icon-placeholder-svg);
1851
+ --icon-support-svg: var(--traton-icon-placeholder-svg);
1852
+ --icon-target-svg: var(--traton-icon-placeholder-svg);
1853
+ --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
1854
+ --icon-temperature-svg: var(--traton-icon-placeholder-svg);
1855
+ --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
1856
+ --icon-text-svg: var(--traton-icon-placeholder-svg);
1857
+ --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
1858
+ --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
1859
+ --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
1860
+ --icon-timer-svg: var(--traton-icon-placeholder-svg);
1861
+ --icon-tool-svg: var(--traton-icon-placeholder-svg);
1862
+ --icon-tool_inactive-svg: var(--traton-icon-placeholder-svg);
1863
+ --icon-trailer-svg: var(--traton-icon-placeholder-svg);
1864
+ --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
1865
+ --icon-trash-svg: var(--traton-icon-placeholder-svg);
1866
+ --icon-trash_inactive-svg: var(--traton-icon-placeholder-svg);
1867
+ --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
1868
+ --icon-undo-svg: var(--traton-icon-placeholder-svg);
1869
+ --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
1870
+ --icon-unlock-svg: var(--traton-icon-placeholder-svg);
1871
+ --icon-upload-svg: var(--traton-icon-placeholder-svg);
1872
+ --icon-video-svg: var(--traton-icon-placeholder-svg);
1873
+ --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
1874
+ --icon-wallet-svg: var(--traton-icon-placeholder-svg);
1875
+ --icon-weight-svg: var(--traton-icon-placeholder-svg);
1876
+ --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
1877
+ --icon-wifi-svg: var(--traton-icon-placeholder-svg);
1878
+ --icon-wifi_inactive-svg: var(--traton-icon-placeholder-svg);
1879
+ --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
1880
+ --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
1629
1881
  }
package/dist/tl-card.css CHANGED
@@ -1,76 +1,16 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
- :root,
5
- .tds-mode-light,
6
- .scania .tds-mode-light,
7
- .scania.tds-mode-light,
8
- .scania .tl-mode-light,
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);
12
- --component-card-border-radius-default: var(--scania-unit-4);
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
- }
18
-
19
- .traton .tds-mode-light,
20
- .traton.tds-mode-light,
21
- .traton .tl-mode-light,
22
- .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);
25
- --component-card-border-radius-default: var(--traton-unit-0);
26
- --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
- }
31
-
32
- .tds-mode-dark,
33
- .scania .tds-mode-dark,
34
- .scania.tds-mode-dark,
35
- .scania .tl-mode-dark,
36
- .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);
39
- --component-card-border-radius-default: var(--scania-unit-4);
40
- --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
- }
45
-
46
- .traton .tds-mode-dark,
47
- .traton.tds-mode-dark,
48
- .traton .tl-mode-dark,
49
- .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);
52
- --component-card-border-radius-default: var(--traton-unit-0);
53
- --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
- }
58
-
59
1
  .tl-card {
60
- --card-background: var(--tds-white);
61
- --card-background-primary: var(--component-card-primary);
62
- --card-background-secondary: var(--component-card-secondary);
2
+ --card-background: var(--component-card-background-primary-default);
3
+ --card-border-radius: calc(var(--component-card-border-radius-default) * 1px);
63
4
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
64
5
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
65
6
  --card-box: var(--card-box-primary);
66
7
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
67
8
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
68
- --card-headline: var(--color-foreground-text-strong);
69
- --card-sub-headline: var(--color-foreground-text-subtle);
70
- --card-body-color: var(--color-foreground-text-defined);
71
- --card-divider: var(--color-foreground-border-discrete);
72
- --card-icon-color: var(--color-foreground-icon-strong);
73
- /* Paddings */
9
+ --card-headline: var(--component-card-text-title-default);
10
+ --card-sub-headline: var(--component-card-text-subtitle-default);
11
+ --card-body-color: var(--component-card-text-body-default);
12
+ --card-divider: var(--color-border-soft);
13
+ --card-icon-color: var(--component-card-text-title-default);
74
14
  --card-body-padding: 0 16px;
75
15
  --card-header-padding: 16px;
76
16
  --card-slotted-padding: 16px;
@@ -78,31 +18,23 @@
78
18
  }
79
19
  .tl-card--primary {
80
20
  --card-box: var(--card-box-primary);
21
+ --card-background: var(--component-card-background-primary-default);
81
22
  }
82
- .tl-card.tl-card--mode-variant-secondary {
23
+ .tl-card--secondary {
83
24
  --card-box: var(--card-box-secondary);
25
+ --card-background: var(--component-card-background-secondary-default);
84
26
  }
85
27
 
86
- .scania .tl-card {
87
- /* Paddings */
88
- --card-body-padding: 0 16px;
89
- --card-header-padding: 16px;
90
- --card-slotted-padding: 16px;
91
- --card-divider-margin: 16px 16px 0;
92
- }
93
- .scania .tl-card--primary {
94
- --card-box: var(--card-box-primary);
95
- }
96
- .scania .tl-card--secondary {
97
- --card-box: var(--card-box-primary);
28
+ .tds-mode-dark .tl-card,
29
+ .tl-mode-dark .tl-card {
30
+ --card-box-primary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
31
+ --card-box-secondary: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
98
32
  }
99
33
 
100
34
  .traton .tl-card {
101
35
  --card-box: none;
102
- --card-background: transparent;
103
36
  --card-box-hover: none;
104
37
  --card-box-pressed: none;
105
- /* Paddings and margins */
106
38
  --card-body-padding: 0;
107
39
  --card-header-padding: 16px 16px 16px 0;
108
40
  --card-slotted-padding: 16px 16px 16px 0;
@@ -110,35 +42,11 @@
110
42
  }
111
43
  .traton .tl-card--primary {
112
44
  --card-box: none;
113
- --card-background: transparent;
45
+ --card-background: var(--component-card-background-primary-default);
114
46
  }
115
47
  .traton .tl-card--secondary {
116
48
  --card-box: none;
117
- --card-background: transparent;
118
- }
119
-
120
- /* Dark mode */
121
- .tl-mode-dark {
122
- --card-background-primary: var(--tds-grey-900);
123
- --card-background-secondary: var(--tds-grey-850);
124
- }
125
- .tl-mode-dark .tl-card {
126
- --card-background: var(--card-background-primary);
127
- }
128
- .tl-mode-dark .tl-card--primary {
129
- --card-box: var(--card-box-primary);
130
- --card-background: var(--card-background-primary);
131
- }
132
- .tl-mode-dark .tl-card--secondary {
133
- --card-box: var(--card-box-primary);
134
- --card-background: var(--card-background-secondary);
135
- }
136
-
137
- .traton .tl-mode-dark .tl-card--primary {
138
- --card-background: transparent;
139
- }
140
- .traton .tl-mode-dark .tl-card--secondary {
141
- --card-background: transparent;
49
+ --card-background: var(--component-card-background-secondary-default);
142
50
  }
143
51
 
144
52
  /* Typography Usage mixins */
@@ -155,7 +63,7 @@
155
63
  width: 100%;
156
64
  box-shadow: var(--card-box);
157
65
  background-color: var(--card-background);
158
- border-radius: 4px;
66
+ border-radius: var(--card-border-radius);
159
67
  overflow: hidden;
160
68
  }
161
69
  .tl-card--clickable {
package/dist/tl-modal.css CHANGED
@@ -66,14 +66,105 @@ body {
66
66
  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
67
67
  }
68
68
 
69
- /* Component variables */
69
+ /**
70
+ * Do not edit directly, this file was auto-generated.
71
+ */
72
+ :root,
73
+ .tds-mode-light,
74
+ .scania .tds-mode-light,
75
+ .scania.tds-mode-light,
76
+ .scania .tl-mode-light,
77
+ .scania.tl-mode-light {
78
+ --component-modal-background-default: var(--color-background-layer-02);
79
+ --component-modal-border-radius-default: 4;
80
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
81
+ --component-modal-text-title-default: var(--color-text-strong);
82
+ --component-modal-text-body-default: var(--color-text-strong);
83
+ }
84
+
85
+ .traton .tds-mode-light,
86
+ .traton.tds-mode-light,
87
+ .traton .tl-mode-light,
88
+ .traton.tl-mode-light {
89
+ --component-modal-background-default: var(--color-background-layer-02);
90
+ --component-modal-border-radius-default: 4;
91
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
92
+ --component-modal-text-title-default: var(--color-text-strong);
93
+ --component-modal-text-body-default: var(--color-text-strong);
94
+ }
95
+
96
+ .tds-mode-dark,
97
+ .scania .tds-mode-dark,
98
+ .scania.tds-mode-dark,
99
+ .scania .tl-mode-dark,
100
+ .scania.tl-mode-dark {
101
+ --component-modal-background-default: var(--color-background-layer-01);
102
+ --component-modal-border-radius-default: 4;
103
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
104
+ --component-modal-text-title-default: var(--color-text-strong);
105
+ --component-modal-text-body-default: var(--color-text-strong);
106
+ }
107
+
108
+ .traton .tds-mode-dark,
109
+ .traton.tds-mode-dark,
110
+ .traton .tl-mode-dark,
111
+ .traton.tl-mode-dark {
112
+ --component-modal-background-default: var(--color-background-layer-02);
113
+ --component-modal-border-radius-default: 4;
114
+ --component-modal-icon-dismiss-default: var(--color-icon-strong);
115
+ --component-modal-text-title-default: var(--color-text-strong);
116
+ --component-modal-text-body-default: var(--color-text-strong);
117
+ }
118
+
119
+ /**
120
+ * Do not edit directly, this file was auto-generated.
121
+ */
122
+ :root,
123
+ .tds-mode-light,
124
+ .scania .tds-mode-light,
125
+ .scania.tds-mode-light,
126
+ .scania .tl-mode-light,
127
+ .scania.tl-mode-light {
128
+ --component-overlay-background-default: var(--scania-color-base-black);
129
+ --component-overlay-opacity-default: 60;
130
+ }
131
+
132
+ .traton .tds-mode-light,
133
+ .traton.tds-mode-light,
134
+ .traton .tl-mode-light,
135
+ .traton.tl-mode-light {
136
+ --component-overlay-background-default: var(--traton-color-base-black);
137
+ --component-overlay-opacity-default: 40;
138
+ }
139
+
140
+ .tds-mode-dark,
141
+ .scania .tds-mode-dark,
142
+ .scania.tds-mode-dark,
143
+ .scania .tl-mode-dark,
144
+ .scania.tl-mode-dark {
145
+ --component-overlay-background-default: var(--scania-color-grey-900);
146
+ --component-overlay-opacity-default: 84;
147
+ }
148
+
149
+ .traton .tds-mode-dark,
150
+ .traton.tds-mode-dark,
151
+ .traton .tl-mode-dark,
152
+ .traton.tl-mode-dark {
153
+ --component-overlay-background-default: var(--traton-color-base-black);
154
+ --component-overlay-opacity-default: 60;
155
+ }
156
+
70
157
  .tl-modal,
71
- :root {
72
- --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
73
- --modal-background: var(--color-background-layer-02);
74
- --modal-backdrop: var(--color-background-overlay);
75
- --modal-text: var(--color-foreground-text-strong);
76
- --modal-cross-svg: var(--color-foreground-text-strong);
158
+ .tl-modal__overlay {
159
+ --modal-background: var(--component-modal-background-default);
160
+ --modal-backdrop: color-mix(
161
+ in srgb,
162
+ var(--component-overlay-background-default) calc(var(--component-overlay-opacity-default) * 1%),
163
+ transparent
164
+ );
165
+ --modal-border-radius: calc(var(--component-modal-border-radius-default) * 1px);
166
+ --modal-text: var(--component-modal-text-title-default);
167
+ --modal-cross-svg: var(--component-modal-icon-dismiss-default);
77
168
  --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
78
169
  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
79
170
  }
@@ -90,7 +181,7 @@ body {
90
181
  box-shadow: var(--modal-shadow);
91
182
  margin: auto;
92
183
  position: relative;
93
- border-radius: 4px;
184
+ border-radius: var(--modal-border-radius);
94
185
  max-height: 85vh;
95
186
  overflow-y: auto;
96
187
  pointer-events: auto;
@@ -293,9 +384,10 @@ body {
293
384
  background-color: transparent;
294
385
  border: 0;
295
386
  padding: 0;
387
+ height: 20px;
388
+ width: 20px;
296
389
  appearance: unset;
297
390
  display: inline-block;
298
- height: auto;
299
391
  color: var(--modal-text);
300
392
  cursor: pointer;
301
393
  }
package/dist/traton-variables.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /* Spacing */
2
3
  :root,
3
4
  .traton {
@@ -744,7 +745,6 @@
744
745
  --traton-icon-chevron_right-svg: url(./assets/icons/traton/chevron_right.svg);
745
746
  --traton-icon-chevron_up-svg: url(./assets/icons/traton/chevron_up.svg);
746
747
  --traton-icon-cross-svg: url(./assets/icons/traton/cross.svg);
747
- --traton-icon-edit_inactive-svg: url(./assets/icons/traton/edit_inactive.svg);
748
748
  --traton-icon-edit-svg: url(./assets/icons/traton/edit.svg);
749
749
  --traton-icon-error-svg: url(./assets/icons/traton/error.svg);
750
750
  --traton-icon-info-svg: url(./assets/icons/traton/info.svg);
@@ -755,8 +755,6 @@
755
755
  --traton-icon-refresh-svg: url(./assets/icons/traton/refresh.svg);
756
756
  --traton-icon-search-svg: url(./assets/icons/traton/search.svg);
757
757
  --traton-icon-share-svg: url(./assets/icons/traton/share.svg);
758
- --traton-icon-skip_backwards-svg: url(./assets/icons/traton/skip_backwards.svg);
759
- --traton-icon-skip_forward-svg: url(./assets/icons/traton/skip_forward.svg);
760
758
  --traton-icon-sorting-svg: url(./assets/icons/traton/sorting.svg);
761
759
  --traton-icon-star-svg: url(./assets/icons/traton/star.svg);
762
760
  --traton-icon-tick-svg: url(./assets/icons/traton/tick.svg);
@@ -782,7 +780,6 @@
782
780
  --icon-chevron_right-svg: var(--traton-icon-chevron_right-svg);
783
781
  --icon-chevron_up-svg: var(--traton-icon-chevron_up-svg);
784
782
  --icon-cross-svg: var(--traton-icon-cross-svg);
785
- --icon-edit_inactive-svg: var(--traton-icon-edit_inactive-svg);
786
783
  --icon-edit-svg: var(--traton-icon-edit-svg);
787
784
  --icon-error-svg: var(--traton-icon-error-svg);
788
785
  --icon-info-svg: var(--traton-icon-info-svg);
@@ -793,11 +790,244 @@
793
790
  --icon-refresh-svg: var(--traton-icon-refresh-svg);
794
791
  --icon-search-svg: var(--traton-icon-search-svg);
795
792
  --icon-share-svg: var(--traton-icon-share-svg);
796
- --icon-skip_backwards-svg: var(--traton-icon-skip_backwards-svg);
797
- --icon-skip_forward-svg: var(--traton-icon-skip_forward-svg);
798
793
  --icon-sorting-svg: var(--traton-icon-sorting-svg);
799
794
  --icon-star-svg: var(--traton-icon-star-svg);
800
795
  --icon-tick-svg: var(--traton-icon-tick-svg);
801
796
  --icon-truck-svg: var(--traton-icon-truck-svg);
802
797
  --icon-warning-svg: var(--traton-icon-warning-svg);
798
+ }
799
+
800
+ /* Cross-brand placeholder fallbacks — generated alongside icon.scss */
801
+ /**
802
+ * Do not edit directly, this file was auto-generated.
803
+ */
804
+ :root,
805
+ .scania {
806
+ /* No fallbacks needed: this brand defines every icon name. */
807
+ }
808
+
809
+ .traton {
810
+ --icon-24v_battery-svg: var(--traton-icon-placeholder-svg);
811
+ --icon-24v_battery_inactive-svg: var(--traton-icon-placeholder-svg);
812
+ --icon-acceleration-svg: var(--traton-icon-placeholder-svg);
813
+ --icon-acceleration_inactive-svg: var(--traton-icon-placeholder-svg);
814
+ --icon-adblue-svg: var(--traton-icon-placeholder-svg);
815
+ --icon-adblue_inactive-svg: var(--traton-icon-placeholder-svg);
816
+ --icon-audio-svg: var(--traton-icon-placeholder-svg);
817
+ --icon-audio_inactive-svg: var(--traton-icon-placeholder-svg);
818
+ --icon-award-svg: var(--traton-icon-placeholder-svg);
819
+ --icon-back-svg: var(--traton-icon-placeholder-svg);
820
+ --icon-backward-svg: var(--traton-icon-placeholder-svg);
821
+ --icon-backward_inactive-svg: var(--traton-icon-placeholder-svg);
822
+ --icon-bug-svg: var(--traton-icon-placeholder-svg);
823
+ --icon-bug_inactive-svg: var(--traton-icon-placeholder-svg);
824
+ --icon-bus-svg: var(--traton-icon-placeholder-svg);
825
+ --icon-bus_inactive-svg: var(--traton-icon-placeholder-svg);
826
+ --icon-cab_door-svg: var(--traton-icon-placeholder-svg);
827
+ --icon-calendar_inactive-svg: var(--traton-icon-placeholder-svg);
828
+ --icon-camera-svg: var(--traton-icon-placeholder-svg);
829
+ --icon-camera_inactive-svg: var(--traton-icon-placeholder-svg);
830
+ --icon-card-svg: var(--traton-icon-placeholder-svg);
831
+ --icon-cart-svg: var(--traton-icon-placeholder-svg);
832
+ --icon-charging_complete-svg: var(--traton-icon-placeholder-svg);
833
+ --icon-charging_failed-svg: var(--traton-icon-placeholder-svg);
834
+ --icon-charging_speed-svg: var(--traton-icon-placeholder-svg);
835
+ --icon-charging_speed_inactive-svg: var(--traton-icon-placeholder-svg);
836
+ --icon-charging_stopped-svg: var(--traton-icon-placeholder-svg);
837
+ --icon-clock-svg: var(--traton-icon-placeholder-svg);
838
+ --icon-clock_inactive-svg: var(--traton-icon-placeholder-svg);
839
+ --icon-configurator-svg: var(--traton-icon-placeholder-svg);
840
+ --icon-contact-svg: var(--traton-icon-placeholder-svg);
841
+ --icon-contact_inactive-svg: var(--traton-icon-placeholder-svg);
842
+ --icon-cookie-svg: var(--traton-icon-placeholder-svg);
843
+ --icon-cookie_inactive-svg: var(--traton-icon-placeholder-svg);
844
+ --icon-coolant_level-svg: var(--traton-icon-placeholder-svg);
845
+ --icon-coolant_level_inactive-svg: var(--traton-icon-placeholder-svg);
846
+ --icon-copy-svg: var(--traton-icon-placeholder-svg);
847
+ --icon-cup-svg: var(--traton-icon-placeholder-svg);
848
+ --icon-cup_inactive-svg: var(--traton-icon-placeholder-svg);
849
+ --icon-dashboard-svg: var(--traton-icon-placeholder-svg);
850
+ --icon-department-svg: var(--traton-icon-placeholder-svg);
851
+ --icon-department_inactive-svg: var(--traton-icon-placeholder-svg);
852
+ --icon-departure_scheduling-svg: var(--traton-icon-placeholder-svg);
853
+ --icon-departure_scheduling_inactive-svg: var(--traton-icon-placeholder-svg);
854
+ --icon-diamond-svg: var(--traton-icon-placeholder-svg);
855
+ --icon-diamond_inactive-svg: var(--traton-icon-placeholder-svg);
856
+ --icon-document-svg: var(--traton-icon-placeholder-svg);
857
+ --icon-document_check-svg: var(--traton-icon-placeholder-svg);
858
+ --icon-document_doc-svg: var(--traton-icon-placeholder-svg);
859
+ --icon-document_eye-svg: var(--traton-icon-placeholder-svg);
860
+ --icon-document_pdf-svg: var(--traton-icon-placeholder-svg);
861
+ --icon-document_plus-svg: var(--traton-icon-placeholder-svg);
862
+ --icon-document_plus_inactive-svg: var(--traton-icon-placeholder-svg);
863
+ --icon-document_ppt-svg: var(--traton-icon-placeholder-svg);
864
+ --icon-document_tool-svg: var(--traton-icon-placeholder-svg);
865
+ --icon-document_wrong-svg: var(--traton-icon-placeholder-svg);
866
+ --icon-document_xls-svg: var(--traton-icon-placeholder-svg);
867
+ --icon-dollar-svg: var(--traton-icon-placeholder-svg);
868
+ --icon-doner-svg: var(--traton-icon-placeholder-svg);
869
+ --icon-double_kebab-svg: var(--traton-icon-placeholder-svg);
870
+ --icon-download-svg: var(--traton-icon-placeholder-svg);
871
+ --icon-driving_licence-svg: var(--traton-icon-placeholder-svg);
872
+ --icon-driving_licence_inactive-svg: var(--traton-icon-placeholder-svg);
873
+ --icon-drop-svg: var(--traton-icon-placeholder-svg);
874
+ --icon-drop_inactive-svg: var(--traton-icon-placeholder-svg);
875
+ --icon-edit_inactive-svg: var(--traton-icon-placeholder-svg);
876
+ --icon-email-svg: var(--traton-icon-placeholder-svg);
877
+ --icon-engine-svg: var(--traton-icon-placeholder-svg);
878
+ --icon-engine_inactive-svg: var(--traton-icon-placeholder-svg);
879
+ --icon-environment-svg: var(--traton-icon-placeholder-svg);
880
+ --icon-environment_inactive-svg: var(--traton-icon-placeholder-svg);
881
+ --icon-exit-svg: var(--traton-icon-placeholder-svg);
882
+ --icon-expand-svg: var(--traton-icon-placeholder-svg);
883
+ --icon-expand_inactive-svg: var(--traton-icon-placeholder-svg);
884
+ --icon-export-svg: var(--traton-icon-placeholder-svg);
885
+ --icon-export_inactive-svg: var(--traton-icon-placeholder-svg);
886
+ --icon-eye-svg: var(--traton-icon-placeholder-svg);
887
+ --icon-eye_inactive-svg: var(--traton-icon-placeholder-svg);
888
+ --icon-face_dissatisfied-svg: var(--traton-icon-placeholder-svg);
889
+ --icon-face_neutral-svg: var(--traton-icon-placeholder-svg);
890
+ --icon-face_satisfied-svg: var(--traton-icon-placeholder-svg);
891
+ --icon-factory-svg: var(--traton-icon-placeholder-svg);
892
+ --icon-factory_inactive-svg: var(--traton-icon-placeholder-svg);
893
+ --icon-ferry-svg: var(--traton-icon-placeholder-svg);
894
+ --icon-ferry_inactive-svg: var(--traton-icon-placeholder-svg);
895
+ --icon-filters-svg: var(--traton-icon-placeholder-svg);
896
+ --icon-filters_inactive-svg: var(--traton-icon-placeholder-svg);
897
+ --icon-flash-svg: var(--traton-icon-placeholder-svg);
898
+ --icon-flash_inactive-svg: var(--traton-icon-placeholder-svg);
899
+ --icon-folder-svg: var(--traton-icon-placeholder-svg);
900
+ --icon-forward-svg: var(--traton-icon-placeholder-svg);
901
+ --icon-forward_inactive-svg: var(--traton-icon-placeholder-svg);
902
+ --icon-fuel-svg: var(--traton-icon-placeholder-svg);
903
+ --icon-fuel_gauge-svg: var(--traton-icon-placeholder-svg);
904
+ --icon-fuel_gauge_inactive-svg: var(--traton-icon-placeholder-svg);
905
+ --icon-fuel_inactive-svg: var(--traton-icon-placeholder-svg);
906
+ --icon-gift-svg: var(--traton-icon-placeholder-svg);
907
+ --icon-gift_inactive-svg: var(--traton-icon-placeholder-svg);
908
+ --icon-global-svg: var(--traton-icon-placeholder-svg);
909
+ --icon-guided_tour-svg: var(--traton-icon-placeholder-svg);
910
+ --icon-guided_tour_inactive-svg: var(--traton-icon-placeholder-svg);
911
+ --icon-hatch_open-svg: var(--traton-icon-placeholder-svg);
912
+ --icon-hatch_open_1-svg: var(--traton-icon-placeholder-svg);
913
+ --icon-hatch_open_2-svg: var(--traton-icon-placeholder-svg);
914
+ --icon-hatch_open_inactive-svg: var(--traton-icon-placeholder-svg);
915
+ --icon-heart-svg: var(--traton-icon-placeholder-svg);
916
+ --icon-heart_inactive-svg: var(--traton-icon-placeholder-svg);
917
+ --icon-heating_inactive_screen-svg: var(--traton-icon-placeholder-svg);
918
+ --icon-history-svg: var(--traton-icon-placeholder-svg);
919
+ --icon-history_inactive-svg: var(--traton-icon-placeholder-svg);
920
+ --icon-home-svg: var(--traton-icon-placeholder-svg);
921
+ --icon-home_inactive-svg: var(--traton-icon-placeholder-svg);
922
+ --icon-idea-svg: var(--traton-icon-placeholder-svg);
923
+ --icon-idea_inactive-svg: var(--traton-icon-placeholder-svg);
924
+ --icon-image-svg: var(--traton-icon-placeholder-svg);
925
+ --icon-image_add-svg: var(--traton-icon-placeholder-svg);
926
+ --icon-image_inactive-svg: var(--traton-icon-placeholder-svg);
927
+ --icon-image_set-svg: var(--traton-icon-placeholder-svg);
928
+ --icon-insights-svg: var(--traton-icon-placeholder-svg);
929
+ --icon-kebab-svg: var(--traton-icon-placeholder-svg);
930
+ --icon-key-svg: var(--traton-icon-placeholder-svg);
931
+ --icon-key_inactive-svg: var(--traton-icon-placeholder-svg);
932
+ --icon-language-svg: var(--traton-icon-placeholder-svg);
933
+ --icon-layer-svg: var(--traton-icon-placeholder-svg);
934
+ --icon-layer_inactive-svg: var(--traton-icon-placeholder-svg);
935
+ --icon-link-svg: var(--traton-icon-placeholder-svg);
936
+ --icon-link_broken-svg: var(--traton-icon-placeholder-svg);
937
+ --icon-list-svg: var(--traton-icon-placeholder-svg);
938
+ --icon-list_inactive-svg: var(--traton-icon-placeholder-svg);
939
+ --icon-lock-svg: var(--traton-icon-placeholder-svg);
940
+ --icon-lock_inactive-svg: var(--traton-icon-placeholder-svg);
941
+ --icon-map_cursor-svg: var(--traton-icon-placeholder-svg);
942
+ --icon-map_cursor_inactive-svg: var(--traton-icon-placeholder-svg);
943
+ --icon-maximize_fullscreen-svg: var(--traton-icon-placeholder-svg);
944
+ --icon-meatballs-svg: var(--traton-icon-placeholder-svg);
945
+ --icon-merge-svg: var(--traton-icon-placeholder-svg);
946
+ --icon-merge_inactive-svg: var(--traton-icon-placeholder-svg);
947
+ --icon-message-svg: var(--traton-icon-placeholder-svg);
948
+ --icon-message_inactive-svg: var(--traton-icon-placeholder-svg);
949
+ --icon-microphone-svg: var(--traton-icon-placeholder-svg);
950
+ --icon-microphone_inactive-svg: var(--traton-icon-placeholder-svg);
951
+ --icon-mileage-svg: var(--traton-icon-placeholder-svg);
952
+ --icon-mileage_inactive-svg: var(--traton-icon-placeholder-svg);
953
+ --icon-minimize_fullscreen-svg: var(--traton-icon-placeholder-svg);
954
+ --icon-navigate-svg: var(--traton-icon-placeholder-svg);
955
+ --icon-navigate_inactive-svg: var(--traton-icon-placeholder-svg);
956
+ --icon-notification_inactive-svg: var(--traton-icon-placeholder-svg);
957
+ --icon-notification_snooze-svg: var(--traton-icon-placeholder-svg);
958
+ --icon-oil_level-svg: var(--traton-icon-placeholder-svg);
959
+ --icon-oil_level_inactive-svg: var(--traton-icon-placeholder-svg);
960
+ --icon-paperclip-svg: var(--traton-icon-placeholder-svg);
961
+ --icon-pause-svg: var(--traton-icon-placeholder-svg);
962
+ --icon-pause_inactive-svg: var(--traton-icon-placeholder-svg);
963
+ --icon-phone-svg: var(--traton-icon-placeholder-svg);
964
+ --icon-phone_inactive-svg: var(--traton-icon-placeholder-svg);
965
+ --icon-pie_chart-svg: var(--traton-icon-placeholder-svg);
966
+ --icon-pin-svg: var(--traton-icon-placeholder-svg);
967
+ --icon-pin_inactive-svg: var(--traton-icon-placeholder-svg);
968
+ --icon-play-svg: var(--traton-icon-placeholder-svg);
969
+ --icon-play_inactive-svg: var(--traton-icon-placeholder-svg);
970
+ --icon-powerplug-svg: var(--traton-icon-placeholder-svg);
971
+ --icon-powerplug_inactive-svg: var(--traton-icon-placeholder-svg);
972
+ --icon-print_inactive-svg: var(--traton-icon-placeholder-svg);
973
+ --icon-privacy-svg: var(--traton-icon-placeholder-svg);
974
+ --icon-privacy_inactive-svg: var(--traton-icon-placeholder-svg);
975
+ --icon-profile-svg: var(--traton-icon-placeholder-svg);
976
+ --icon-profile_inactive-svg: var(--traton-icon-placeholder-svg);
977
+ --icon-prohibited-svg: var(--traton-icon-placeholder-svg);
978
+ --icon-proportions-svg: var(--traton-icon-placeholder-svg);
979
+ --icon-proportions_inactive-svg: var(--traton-icon-placeholder-svg);
980
+ --icon-range-svg: var(--traton-icon-placeholder-svg);
981
+ --icon-range_inactive-svg: var(--traton-icon-placeholder-svg);
982
+ --icon-redirect-svg: var(--traton-icon-placeholder-svg);
983
+ --icon-refresh_inactive-svg: var(--traton-icon-placeholder-svg);
984
+ --icon-reload-svg: var(--traton-icon-placeholder-svg);
985
+ --icon-reload_inactive-svg: var(--traton-icon-placeholder-svg);
986
+ --icon-repeat-svg: var(--traton-icon-placeholder-svg);
987
+ --icon-report-svg: var(--traton-icon-placeholder-svg);
988
+ --icon-report_inactive-svg: var(--traton-icon-placeholder-svg);
989
+ --icon-route-svg: var(--traton-icon-placeholder-svg);
990
+ --icon-route_inactive-svg: var(--traton-icon-placeholder-svg);
991
+ --icon-save-svg: var(--traton-icon-placeholder-svg);
992
+ --icon-save_inactive-svg: var(--traton-icon-placeholder-svg);
993
+ --icon-send-svg: var(--traton-icon-placeholder-svg);
994
+ --icon-send_inactive-svg: var(--traton-icon-placeholder-svg);
995
+ --icon-settings-svg: var(--traton-icon-placeholder-svg);
996
+ --icon-shuffle-svg: var(--traton-icon-placeholder-svg);
997
+ --icon-skip_backwards-svg: var(--traton-icon-placeholder-svg);
998
+ --icon-skip_forward-svg: var(--traton-icon-placeholder-svg);
999
+ --icon-smartphone-svg: var(--traton-icon-placeholder-svg);
1000
+ --icon-smartphone_inactive-svg: var(--traton-icon-placeholder-svg);
1001
+ --icon-speedometer-svg: var(--traton-icon-placeholder-svg);
1002
+ --icon-speedometer_inactive-svg: var(--traton-icon-placeholder-svg);
1003
+ --icon-support-svg: var(--traton-icon-placeholder-svg);
1004
+ --icon-target-svg: var(--traton-icon-placeholder-svg);
1005
+ --icon-target_inactive-svg: var(--traton-icon-placeholder-svg);
1006
+ --icon-temperature-svg: var(--traton-icon-placeholder-svg);
1007
+ --icon-temperature_inactive-svg: var(--traton-icon-placeholder-svg);
1008
+ --icon-text-svg: var(--traton-icon-placeholder-svg);
1009
+ --icon-text_inactive-svg: var(--traton-icon-placeholder-svg);
1010
+ --icon-thumbs_down-svg: var(--traton-icon-placeholder-svg);
1011
+ --icon-thumbs_up-svg: var(--traton-icon-placeholder-svg);
1012
+ --icon-timer-svg: var(--traton-icon-placeholder-svg);
1013
+ --icon-tool-svg: var(--traton-icon-placeholder-svg);
1014
+ --icon-tool_inactive-svg: var(--traton-icon-placeholder-svg);
1015
+ --icon-trailer-svg: var(--traton-icon-placeholder-svg);
1016
+ --icon-trailer_inactive-svg: var(--traton-icon-placeholder-svg);
1017
+ --icon-trash-svg: var(--traton-icon-placeholder-svg);
1018
+ --icon-trash_inactive-svg: var(--traton-icon-placeholder-svg);
1019
+ --icon-truck_inactive-svg: var(--traton-icon-placeholder-svg);
1020
+ --icon-undo-svg: var(--traton-icon-placeholder-svg);
1021
+ --icon-undo_inactive-svg: var(--traton-icon-placeholder-svg);
1022
+ --icon-unlock-svg: var(--traton-icon-placeholder-svg);
1023
+ --icon-upload-svg: var(--traton-icon-placeholder-svg);
1024
+ --icon-video-svg: var(--traton-icon-placeholder-svg);
1025
+ --icon-video_inactive-svg: var(--traton-icon-placeholder-svg);
1026
+ --icon-wallet-svg: var(--traton-icon-placeholder-svg);
1027
+ --icon-weight-svg: var(--traton-icon-placeholder-svg);
1028
+ --icon-weight_inactive-svg: var(--traton-icon-placeholder-svg);
1029
+ --icon-wifi-svg: var(--traton-icon-placeholder-svg);
1030
+ --icon-wifi_inactive-svg: var(--traton-icon-placeholder-svg);
1031
+ --icon-windscreen_heating-svg: var(--traton-icon-placeholder-svg);
1032
+ --icon-windscreen_heating_inactive-svg: var(--traton-icon-placeholder-svg);
803
1033
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-var-develop-beta.1",
3
+ "version": "0.1.0-var-batch-4-beta.2",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [