@scania/tegel-lite 0.1.0-variables-beta.1 → 1.0.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 (62) 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/placeholder.svg +3 -0
  23. package/dist/components.css +3552 -7157
  24. package/dist/global.css +134 -11
  25. package/dist/scania-variables.css +357 -136
  26. package/dist/tl-accordion.css +88 -35
  27. package/dist/tl-banner.css +88 -13
  28. package/dist/tl-block.css +62 -7
  29. package/dist/tl-breadcrumbs.css +55 -6
  30. package/dist/tl-button.css +192 -160
  31. package/dist/tl-card.css +54 -66
  32. package/dist/tl-checkbox.css +195 -115
  33. package/dist/tl-divider.css +61 -3
  34. package/dist/tl-footer.css +98 -38
  35. package/dist/tl-icon.css +4 -0
  36. package/dist/tl-link.css +114 -16
  37. package/dist/tl-message.css +128 -14
  38. package/dist/tl-modal.css +123 -20
  39. package/dist/tl-radio-button.css +158 -96
  40. package/dist/tl-text-field.css +256 -76
  41. package/dist/tl-textarea.css +274 -76
  42. package/dist/tl-toast.css +119 -10
  43. package/dist/tl-toggle.css +149 -44
  44. package/dist/tl-tooltip.css +17 -15
  45. package/dist/traton-variables.css +365 -23
  46. package/package.json +5 -26
  47. package/dist/tl-badge.css +0 -45
  48. package/dist/tl-checkbox-vars.css +0 -38
  49. package/dist/tl-chip.css +0 -99
  50. package/dist/tl-dropdown.css +0 -913
  51. package/dist/tl-folder-tabs.css +0 -139
  52. package/dist/tl-header.css +0 -935
  53. package/dist/tl-inline-tabs.css +0 -173
  54. package/dist/tl-navigation-tabs.css +0 -171
  55. package/dist/tl-popover-canvas.css +0 -70
  56. package/dist/tl-popover-menu.css +0 -123
  57. package/dist/tl-side-menu.css +0 -695
  58. package/dist/tl-slider.css +0 -2242
  59. package/dist/tl-spinner.css +0 -78
  60. package/dist/tl-step.css +0 -239
  61. package/dist/tl-stepper.css +0 -83
  62. package/dist/tl-table.css +0 -849
package/dist/global.css CHANGED
@@ -506,10 +506,12 @@ html {
506
506
  @property --collapse-size {
507
507
  syntax: "<length-percentage>";
508
508
  inherits: false;
509
+ initial-value: 0px;
509
510
  }
510
511
  @property --collapse-width-size {
511
512
  syntax: "<length-percentage>";
512
513
  inherits: false;
514
+ initial-value: 0px;
513
515
  }
514
516
  @keyframes collapse-in {
515
517
  0% {
@@ -1289,23 +1291,144 @@ html {
1289
1291
  }
1290
1292
 
1291
1293
  /** 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;
1294
+ /**
1295
+ * Do not edit directly, this file was auto-generated.
1296
+ */
1297
+ :root,
1298
+ .tds-mode-light,
1299
+ .scania .tds-mode-light,
1300
+ .scania.tds-mode-light,
1301
+ .scania .tl-mode-light,
1302
+ .scania.tl-mode-light {
1303
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1304
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1305
+ --component-scrollbar-background-track-default: var(--scania-color-transparent-invisible-light);
1306
+ --component-scrollbar-border-radius-default: var(--scania-unit-8);
1307
+ --component-scrollbar-size-thumb-default: var(--scania-unit-4);
1308
+ --component-scrollbar-size-thumb-hover: 6;
1309
+ }
1310
+
1311
+ .traton .tds-mode-light,
1312
+ .traton.tds-mode-light,
1313
+ .traton .tl-mode-light,
1314
+ .traton.tl-mode-light {
1315
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1316
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1317
+ --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-light);
1318
+ --component-scrollbar-border-radius-default: var(--traton-unit-8);
1319
+ --component-scrollbar-size-thumb-default: var(--traton-unit-4);
1320
+ --component-scrollbar-size-thumb-hover: 6;
1321
+ }
1322
+
1323
+ .tds-mode-dark,
1324
+ .scania .tds-mode-dark,
1325
+ .scania.tds-mode-dark,
1326
+ .scania .tl-mode-dark,
1327
+ .scania.tl-mode-dark {
1328
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1329
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1330
+ --component-scrollbar-background-track-default: var(--scania-color-transparent-invisible-dark);
1331
+ --component-scrollbar-border-radius-default: var(--scania-unit-8);
1332
+ --component-scrollbar-size-thumb-default: var(--scania-unit-4);
1333
+ --component-scrollbar-size-thumb-hover: 6;
1334
+ }
1335
+
1336
+ .traton .tds-mode-dark,
1337
+ .traton.tds-mode-dark,
1338
+ .traton .tl-mode-dark,
1339
+ .traton.tl-mode-dark {
1340
+ --component-scrollbar-background-thumb-default: var(--color-border-subtle);
1341
+ --component-scrollbar-background-thumb-hover: var(--color-border-soft);
1342
+ --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-dark);
1343
+ --component-scrollbar-border-radius-default: var(--traton-unit-8);
1344
+ --component-scrollbar-size-thumb-default: var(--traton-unit-4);
1345
+ --component-scrollbar-size-thumb-hover: 6;
1295
1346
  }
1296
1347
 
1297
- .tl-mode-dark {
1348
+ :root,
1349
+ .tl-mode-light,
1350
+ .tds-mode-light {
1298
1351
  --tl-scrollbar-track-color: transparent;
1299
- --tl-scrollbar-thumb-color: #a4c7f5;
1352
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1353
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1354
+ --tl-scrollbar-hover-thumb-border-radius: calc(
1355
+ var(--component-scrollbar-width-radius-hover) * 1px
1356
+ );
1300
1357
  }
1301
1358
 
1302
- .traton .tl-mode-light {
1303
- --tl-scrollbar-track-color: transparent;
1304
- --tl-scrollbar-thumb-color: #1a1a1926;
1359
+ .tl-mode-dark,
1360
+ .tds-mode-dark {
1361
+ --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
1362
+ --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
1363
+ --tl-scrollbar-hover-thumb-border-radius: calc(
1364
+ var(--component-scrollbar-width-radius-hover) * 1px
1365
+ );
1305
1366
  }
1306
- .traton .tl-mode-dark {
1307
- --tl-scrollbar-track-color: transparent;
1308
- --tl-scrollbar-thumb-color: #d9edf054;
1367
+
1368
+ /**
1369
+ * Do not edit directly, this file was auto-generated.
1370
+ */
1371
+ :root,
1372
+ .tds-mode-light,
1373
+ .scania .tds-mode-light,
1374
+ .scania.tds-mode-light,
1375
+ .scania .tl-mode-light,
1376
+ .scania.tl-mode-light {
1377
+ --component--focus-ring-radius-none: var(--scania-unit-0);
1378
+ --component--focus-ring-radius-extra-small: 1;
1379
+ --component--focus-ring-radius-small: 2;
1380
+ --component--focus-ring-radius-medium: 3;
1381
+ --component--focus-ring-radius-large: 4;
1382
+ --component--focus-ring-radius-extra-large: 5;
1383
+ --component--focus-ring-radius-full: var(--scania-unit-9999);
1384
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1385
+ --component--focus-ring-color-discrete: var(--scania-color-base-white);
1386
+ }
1387
+
1388
+ .traton .tds-mode-light,
1389
+ .traton.tds-mode-light,
1390
+ .traton .tl-mode-light,
1391
+ .traton.tl-mode-light {
1392
+ --component--focus-ring-radius-none: var(--traton-unit-0);
1393
+ --component--focus-ring-radius-extra-small: 1;
1394
+ --component--focus-ring-radius-small: 2;
1395
+ --component--focus-ring-radius-medium: 3;
1396
+ --component--focus-ring-radius-large: 4;
1397
+ --component--focus-ring-radius-extra-large: 5;
1398
+ --component--focus-ring-radius-full: var(--traton-unit-9999);
1399
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1400
+ --component--focus-ring-color-discrete: var(--traton-color-base-white);
1401
+ }
1402
+
1403
+ .tds-mode-dark,
1404
+ .scania .tds-mode-dark,
1405
+ .scania.tds-mode-dark,
1406
+ .scania .tl-mode-dark,
1407
+ .scania.tl-mode-dark {
1408
+ --component--focus-ring-radius-none: var(--scania-unit-0);
1409
+ --component--focus-ring-radius-extra-small: 1;
1410
+ --component--focus-ring-radius-small: 2;
1411
+ --component--focus-ring-radius-medium: 3;
1412
+ --component--focus-ring-radius-large: 4;
1413
+ --component--focus-ring-radius-extra-large: 5;
1414
+ --component--focus-ring-radius-full: var(--scania-unit-9999);
1415
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1416
+ --component--focus-ring-color-discrete: var(--scania-color-base-white);
1417
+ }
1418
+
1419
+ .traton .tds-mode-dark,
1420
+ .traton.tds-mode-dark,
1421
+ .traton .tl-mode-dark,
1422
+ .traton.tl-mode-dark {
1423
+ --component--focus-ring-radius-none: var(--traton-unit-0);
1424
+ --component--focus-ring-radius-extra-small: 1;
1425
+ --component--focus-ring-radius-small: 2;
1426
+ --component--focus-ring-radius-medium: 3;
1427
+ --component--focus-ring-radius-large: 4;
1428
+ --component--focus-ring-radius-extra-large: 5;
1429
+ --component--focus-ring-radius-full: var(--traton-unit-9999);
1430
+ --component--focus-ring-color-strong: var(--color-system-info-default);
1431
+ --component--focus-ring-color-discrete: var(--traton-color-base-white);
1309
1432
  }
1310
1433
 
1311
1434
  body {