@scania/tegel-lite 0.1.0-dev-test-beta.0 → 0.1.0-dropdown-vars-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/README.dev.md +1 -5
  2. package/README.md +12 -12
  3. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff +0 -0
  4. package/dist/assets/fonts/traton/TratonTypeDisplay-Bold.woff2 +0 -0
  5. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff +0 -0
  6. package/dist/assets/fonts/traton/TratonTypeDisplay-Medium.woff2 +0 -0
  7. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff +0 -0
  8. package/dist/assets/fonts/traton/TratonTypeText-Bold.woff2 +0 -0
  9. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff +0 -0
  10. package/dist/assets/fonts/traton/TratonTypeText-BoldItalic.woff2 +0 -0
  11. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff +0 -0
  12. package/dist/assets/fonts/traton/TratonTypeText-Italic.woff2 +0 -0
  13. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff +0 -0
  14. package/dist/assets/fonts/traton/TratonTypeText-Medium.woff2 +0 -0
  15. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff +0 -0
  16. package/dist/assets/fonts/traton/TratonTypeText-MediumItalic.woff2 +0 -0
  17. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff +0 -0
  18. package/dist/assets/fonts/traton/TratonTypeText-Regular.woff2 +0 -0
  19. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff +0 -0
  20. package/dist/assets/fonts/traton/TratonTypeText-SemiBold.woff2 +0 -0
  21. package/dist/assets/fonts/traton/TratonTypeText-SemiBoldItalic.woff2 +0 -0
  22. package/dist/assets/icons/traton/back.svg +1 -0
  23. package/dist/assets/icons/traton/calendar_inactive.svg +1 -0
  24. package/dist/assets/icons/traton/card.svg +1 -0
  25. package/dist/assets/icons/traton/cart.svg +1 -0
  26. package/dist/assets/icons/traton/clock.svg +1 -0
  27. package/dist/assets/icons/traton/clock_inactive.svg +1 -0
  28. package/dist/assets/icons/traton/contact.svg +1 -0
  29. package/dist/assets/icons/traton/contact_inactive.svg +1 -0
  30. package/dist/assets/icons/traton/copy.svg +1 -0
  31. package/dist/assets/icons/traton/document.svg +1 -0
  32. package/dist/assets/icons/traton/document_check.svg +1 -0
  33. package/dist/assets/icons/traton/document_doc.svg +1 -0
  34. package/dist/assets/icons/traton/document_eye.svg +1 -0
  35. package/dist/assets/icons/traton/document_pdf.svg +1 -0
  36. package/dist/assets/icons/traton/document_tool.svg +1 -0
  37. package/dist/assets/icons/traton/document_word.svg +1 -0
  38. package/dist/assets/icons/traton/document_wrong.svg +1 -0
  39. package/dist/assets/icons/traton/document_xls.svg +1 -0
  40. package/dist/assets/icons/traton/dollar.svg +1 -0
  41. package/dist/assets/icons/traton/doner.svg +1 -0
  42. package/dist/assets/icons/traton/double_kebab.svg +1 -0
  43. package/dist/assets/icons/traton/download.svg +1 -0
  44. package/dist/assets/icons/traton/edit_inactive.svg +1 -1
  45. package/dist/assets/icons/traton/email.svg +1 -0
  46. package/dist/assets/icons/traton/export.svg +1 -0
  47. package/dist/assets/icons/traton/export_inactive.svg +1 -0
  48. package/dist/assets/icons/traton/eye.svg +1 -0
  49. package/dist/assets/icons/traton/eye_inactive.svg +1 -0
  50. package/dist/assets/icons/traton/face_dissatisfied.svg +1 -0
  51. package/dist/assets/icons/traton/face_neutral.svg +1 -0
  52. package/dist/assets/icons/traton/face_satisfied.svg +1 -0
  53. package/dist/assets/icons/traton/filters.svg +1 -0
  54. package/dist/assets/icons/traton/filters_inactive.svg +1 -0
  55. package/dist/assets/icons/traton/folder.svg +1 -0
  56. package/dist/assets/icons/traton/fuel_gauge.svg +1 -0
  57. package/dist/assets/icons/traton/fuel_gauge_inactive.svg +1 -0
  58. package/dist/assets/icons/traton/global.svg +1 -0
  59. package/dist/assets/icons/traton/heart.svg +1 -0
  60. package/dist/assets/icons/traton/heart_inactive.svg +1 -0
  61. package/dist/assets/icons/traton/home.svg +1 -0
  62. package/dist/assets/icons/traton/home_inactive.svg +1 -0
  63. package/dist/assets/icons/traton/image.svg +1 -0
  64. package/dist/assets/icons/traton/image_add.svg +1 -0
  65. package/dist/assets/icons/traton/image_inactive.svg +1 -0
  66. package/dist/assets/icons/traton/image_set.svg +1 -0
  67. package/dist/assets/icons/traton/kebab.svg +1 -0
  68. package/dist/assets/icons/traton/link.svg +1 -0
  69. package/dist/assets/icons/traton/link_broken.svg +1 -0
  70. package/dist/assets/icons/traton/lock.svg +1 -0
  71. package/dist/assets/icons/traton/meatballs.svg +1 -0
  72. package/dist/assets/icons/traton/message.svg +1 -0
  73. package/dist/assets/icons/traton/message_inactive.svg +1 -0
  74. package/dist/assets/icons/traton/mileage.svg +1 -0
  75. package/dist/assets/icons/traton/mileage_inactive.svg +1 -0
  76. package/dist/assets/icons/traton/notification_inactive.svg +1 -0
  77. package/dist/assets/icons/traton/phone.svg +1 -0
  78. package/dist/assets/icons/traton/phone_inactive.svg +1 -0
  79. package/dist/assets/icons/traton/pin.svg +1 -0
  80. package/dist/assets/icons/traton/pin_inactive.svg +1 -0
  81. package/dist/assets/icons/traton/placeholder.svg +1 -0
  82. package/dist/assets/icons/traton/print_inactive.svg +1 -0
  83. package/dist/assets/icons/traton/profile.svg +1 -0
  84. package/dist/assets/icons/traton/profile_inactive.svg +1 -0
  85. package/dist/assets/icons/traton/proportions.svg +1 -0
  86. package/dist/assets/icons/traton/proportions_inactive.svg +1 -0
  87. package/dist/assets/icons/traton/redirect.svg +1 -0
  88. package/dist/assets/icons/traton/report.svg +1 -0
  89. package/dist/assets/icons/traton/report_inactive.svg +1 -0
  90. package/dist/assets/icons/traton/save.svg +1 -0
  91. package/dist/assets/icons/traton/save_inactive.svg +1 -0
  92. package/dist/assets/icons/traton/send.svg +1 -0
  93. package/dist/assets/icons/traton/send_inactive.svg +1 -0
  94. package/dist/assets/icons/traton/settings.svg +1 -0
  95. package/dist/assets/icons/traton/skip_backwards.svg +1 -1
  96. package/dist/assets/icons/traton/skip_forward.svg +1 -1
  97. package/dist/assets/icons/traton/smartphone.svg +1 -0
  98. package/dist/assets/icons/traton/smartphone_inactive.svg +1 -0
  99. package/dist/assets/icons/traton/speedometer.svg +1 -0
  100. package/dist/assets/icons/traton/speedometer_inactive.svg +1 -0
  101. package/dist/assets/icons/traton/support.svg +1 -0
  102. package/dist/assets/icons/traton/timer.svg +1 -0
  103. package/dist/assets/icons/traton/tool.svg +1 -0
  104. package/dist/assets/icons/traton/tool_inactive.svg +1 -0
  105. package/dist/assets/icons/traton/trash.svg +1 -0
  106. package/dist/assets/icons/traton/trash_inactive.svg +1 -0
  107. package/dist/assets/icons/traton/unlock.svg +1 -0
  108. package/dist/assets/icons/traton/upload.svg +1 -0
  109. package/dist/assets/icons/traton/wallet.svg +1 -0
  110. package/dist/assets/icons/traton/warning.svg +1 -1
  111. package/dist/assets/icons/traton/wifi.svg +1 -0
  112. package/dist/assets/icons/traton/wifi_inactive.svg +1 -0
  113. package/dist/components.css +3751 -3642
  114. package/dist/global.css +148 -17
  115. package/dist/scania-variables.css +521 -310
  116. package/dist/tl-accordion.css +92 -36
  117. package/dist/tl-banner.css +88 -13
  118. package/dist/tl-block.css +62 -7
  119. package/dist/tl-breadcrumbs.css +55 -6
  120. package/dist/tl-button.css +181 -156
  121. package/dist/tl-card.css +43 -62
  122. package/dist/tl-checkbox.css +195 -115
  123. package/dist/tl-chip.css +152 -12
  124. package/dist/tl-datetime.css +45 -34
  125. package/dist/tl-divider.css +76 -6
  126. package/dist/tl-dropdown.css +387 -230
  127. package/dist/tl-folder-tabs.css +167 -51
  128. package/dist/tl-footer.css +88 -34
  129. package/dist/tl-header.css +469 -387
  130. package/dist/tl-icon.css +5 -1
  131. package/dist/tl-inline-tabs.css +164 -61
  132. package/dist/tl-link.css +114 -16
  133. package/dist/tl-message.css +128 -14
  134. package/dist/tl-modal.css +111 -16
  135. package/dist/tl-navigation-tabs.css +167 -51
  136. package/dist/tl-popover-canvas.css +112 -9
  137. package/dist/tl-popover-menu.css +134 -28
  138. package/dist/tl-radio-button.css +159 -96
  139. package/dist/tl-side-menu.css +346 -326
  140. package/dist/tl-text-field.css +265 -77
  141. package/dist/tl-textarea.css +282 -76
  142. package/dist/tl-toast.css +119 -10
  143. package/dist/tl-toggle.css +149 -44
  144. package/dist/tl-tooltip.css +63 -15
  145. package/dist/traton-variables.css +361 -30
  146. package/package.json +12 -24
  147. package/dist/tl-badge.css +0 -45
  148. package/dist/tl-checkbox-vars.css +0 -38
  149. package/dist/tl-slider.css +0 -2250
  150. package/dist/tl-spinner.css +0 -78
  151. package/dist/tl-step.css +0 -247
  152. package/dist/tl-stepper.css +0 -91
  153. package/dist/tl-table.css +0 -857
package/dist/global.css CHANGED
@@ -4,18 +4,26 @@
4
4
  * Once the Web Components imports are removed from the global.scss file, that file can be used for Tegel Lite as well.
5
5
  */
6
6
  :root {
7
+ --unit-1: 1px;
7
8
  --unit-2: 2px;
8
9
  --unit-4: 4px;
9
10
  --unit-8: 8px;
11
+ --unit-10: 10px;
10
12
  --unit-12: 12px;
11
13
  --unit-16: 16px;
12
14
  --unit-20: 20px;
15
+ --unit-22: 22px;
13
16
  --unit-24: 24px;
14
17
  --unit-32: 32px;
18
+ --unit-34: 34px;
19
+ --unit-36: 36px;
15
20
  --unit-40: 40px;
16
21
  --unit-48: 48px;
17
22
  --unit-56: 56px;
23
+ --unit-58: 58px;
18
24
  --unit-64: 64px;
25
+ --unit-68: 68px;
26
+ --unit-72: 72px;
19
27
  --unit-80: 80px;
20
28
  --unit-96: 96px;
21
29
  --unit-120: 120px;
@@ -506,10 +514,12 @@ html {
506
514
  @property --collapse-size {
507
515
  syntax: "<length-percentage>";
508
516
  inherits: false;
517
+ initial-value: 0px;
509
518
  }
510
519
  @property --collapse-width-size {
511
520
  syntax: "<length-percentage>";
512
521
  inherits: false;
522
+ initial-value: 0px;
513
523
  }
514
524
  @keyframes collapse-in {
515
525
  0% {
@@ -1289,23 +1299,144 @@ html {
1289
1299
  }
1290
1300
 
1291
1301
  /** 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;
1302
+ /**
1303
+ * Do not edit directly, this file was auto-generated.
1304
+ */
1305
+ :root,
1306
+ .tds-mode-light,
1307
+ .scania .tds-mode-light,
1308
+ .scania.tds-mode-light,
1309
+ .scania .tl-mode-light,
1310
+ .scania.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-background-track-default: var(--scania-color-transparent-invisible-light);
1314
+ --component-scrollbar-border-radius-default: var(--scania-unit-8);
1315
+ --component-scrollbar-size-thumb-default: var(--scania-unit-4);
1316
+ --component-scrollbar-size-thumb-hover: 6;
1317
+ }
1318
+
1319
+ .traton .tds-mode-light,
1320
+ .traton.tds-mode-light,
1321
+ .traton .tl-mode-light,
1322
+ .traton.tl-mode-light {
1323
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1324
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1325
+ --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-light);
1326
+ --component-scrollbar-border-radius-default: var(--traton-unit-8);
1327
+ --component-scrollbar-size-thumb-default: var(--traton-unit-4);
1328
+ --component-scrollbar-size-thumb-hover: 6;
1329
+ }
1330
+
1331
+ .tds-mode-dark,
1332
+ .scania .tds-mode-dark,
1333
+ .scania.tds-mode-dark,
1334
+ .scania .tl-mode-dark,
1335
+ .scania.tl-mode-dark {
1336
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1337
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1338
+ --component-scrollbar-background-track-default: var(--scania-color-transparent-invisible-dark);
1339
+ --component-scrollbar-border-radius-default: var(--scania-unit-8);
1340
+ --component-scrollbar-size-thumb-default: var(--scania-unit-4);
1341
+ --component-scrollbar-size-thumb-hover: 6;
1342
+ }
1343
+
1344
+ .traton .tds-mode-dark,
1345
+ .traton.tds-mode-dark,
1346
+ .traton .tl-mode-dark,
1347
+ .traton.tl-mode-dark {
1348
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1349
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1350
+ --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-dark);
1351
+ --component-scrollbar-border-radius-default: var(--traton-unit-8);
1352
+ --component-scrollbar-size-thumb-default: var(--traton-unit-4);
1353
+ --component-scrollbar-size-thumb-hover: 6;
1295
1354
  }
1296
1355
 
1297
- .tl-mode-dark {
1356
+ :root,
1357
+ .tl-mode-light,
1358
+ .tds-mode-light {
1298
1359
  --tl-scrollbar-track-color: transparent;
1299
- --tl-scrollbar-thumb-color: #a4c7f5;
1360
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1361
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1362
+ --tl-scrollbar-hover-thumb-border-radius: calc(
1363
+ var(--component-scrollbar-width-radius-hover) * 1px
1364
+ );
1300
1365
  }
1301
1366
 
1302
- .traton .tl-mode-light {
1303
- --tl-scrollbar-track-color: transparent;
1304
- --tl-scrollbar-thumb-color: #1a1a1926;
1367
+ .tl-mode-dark,
1368
+ .tds-mode-dark {
1369
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1370
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1371
+ --tl-scrollbar-hover-thumb-border-radius: calc(
1372
+ var(--component-scrollbar-width-radius-hover) * 1px
1373
+ );
1305
1374
  }
1306
- .traton .tl-mode-dark {
1307
- --tl-scrollbar-track-color: transparent;
1308
- --tl-scrollbar-thumb-color: #d9edf054;
1375
+
1376
+ /**
1377
+ * Do not edit directly, this file was auto-generated.
1378
+ */
1379
+ :root,
1380
+ .tds-mode-light,
1381
+ .scania .tds-mode-light,
1382
+ .scania.tds-mode-light,
1383
+ .scania .tl-mode-light,
1384
+ .scania.tl-mode-light {
1385
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1386
+ --component--focus-ring-color-discrete: var(--scania-color-base-white);
1387
+ --component--focus-ring-radius-none: var(--scania-unit-0);
1388
+ --component--focus-ring-radius-extra-small: 1;
1389
+ --component--focus-ring-radius-small: 2;
1390
+ --component--focus-ring-radius-medium: 3;
1391
+ --component--focus-ring-radius-large: 4;
1392
+ --component--focus-ring-radius-extra-large: 5;
1393
+ --component--focus-ring-radius-full: var(--scania-unit-9999);
1394
+ }
1395
+
1396
+ .traton .tds-mode-light,
1397
+ .traton.tds-mode-light,
1398
+ .traton .tl-mode-light,
1399
+ .traton.tl-mode-light {
1400
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1401
+ --component--focus-ring-color-discrete: var(--traton-color-base-white);
1402
+ --component--focus-ring-radius-none: var(--traton-unit-0);
1403
+ --component--focus-ring-radius-extra-small: 1;
1404
+ --component--focus-ring-radius-small: 2;
1405
+ --component--focus-ring-radius-medium: 3;
1406
+ --component--focus-ring-radius-large: 4;
1407
+ --component--focus-ring-radius-extra-large: 5;
1408
+ --component--focus-ring-radius-full: var(--traton-unit-9999);
1409
+ }
1410
+
1411
+ .tds-mode-dark,
1412
+ .scania .tds-mode-dark,
1413
+ .scania.tds-mode-dark,
1414
+ .scania .tl-mode-dark,
1415
+ .scania.tl-mode-dark {
1416
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1417
+ --component--focus-ring-color-discrete: var(--scania-color-base-white);
1418
+ --component--focus-ring-radius-none: var(--scania-unit-0);
1419
+ --component--focus-ring-radius-extra-small: 1;
1420
+ --component--focus-ring-radius-small: 2;
1421
+ --component--focus-ring-radius-medium: 3;
1422
+ --component--focus-ring-radius-large: 4;
1423
+ --component--focus-ring-radius-extra-large: 5;
1424
+ --component--focus-ring-radius-full: var(--scania-unit-9999);
1425
+ }
1426
+
1427
+ .traton .tds-mode-dark,
1428
+ .traton.tds-mode-dark,
1429
+ .traton .tl-mode-dark,
1430
+ .traton.tl-mode-dark {
1431
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1432
+ --component--focus-ring-color-discrete: var(--traton-color-base-white);
1433
+ --component--focus-ring-radius-none: var(--traton-unit-0);
1434
+ --component--focus-ring-radius-extra-small: 1;
1435
+ --component--focus-ring-radius-small: 2;
1436
+ --component--focus-ring-radius-medium: 3;
1437
+ --component--focus-ring-radius-large: 4;
1438
+ --component--focus-ring-radius-extra-large: 5;
1439
+ --component--focus-ring-radius-full: var(--traton-unit-9999);
1309
1440
  }
1310
1441
 
1311
1442
  body {
@@ -1341,31 +1472,31 @@ h6 {
1341
1472
 
1342
1473
  :root,
1343
1474
  .tl-mode-light {
1344
- color: var(--color-foreground-text-strong);
1475
+ color: var(--color-text-strong);
1345
1476
  background-color: var(--color-background-base);
1346
1477
  }
1347
1478
  :root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
1348
1479
  .tl-mode-light.tl-mode-variant-primary,
1349
1480
  .tl-mode-light .tl-mode-variant-primary {
1350
- color: var(--color-foreground-text-strong);
1481
+ color: var(--color-text-strong);
1351
1482
  background-color: var(--color-background-base);
1352
1483
  }
1353
1484
  :root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
1354
1485
  .tl-mode-light.tl-mode-variant-secondary,
1355
1486
  .tl-mode-light .tl-mode-variant-secondary {
1356
- color: var(--color-foreground-text-strong);
1487
+ color: var(--color-text-strong);
1357
1488
  background-color: var(--color-background-layer-01);
1358
1489
  }
1359
1490
 
1360
1491
  .tl-mode-dark {
1361
- color: var(--color-foreground-text-strong);
1492
+ color: var(--color-text-strong);
1362
1493
  background-color: var(--color-background-base);
1363
1494
  }
1364
1495
  .tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
1365
- color: var(--color-foreground-text-strong);
1496
+ color: var(--color-text-strong);
1366
1497
  background-color: var(--color-background-base);
1367
1498
  }
1368
1499
  .tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
1369
- color: var(--color-foreground-text-strong);
1500
+ color: var(--color-text-strong);
1370
1501
  background-color: var(--color-background-layer-01);
1371
1502
  }