@scania/tegel-lite 1.2.2 → 1.4.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 (9) hide show
  1. package/dist/components.css +3457 -1791
  2. package/dist/global.css +22 -14
  3. package/dist/scania-variables.css +179 -181
  4. package/dist/tl-header.css +1025 -0
  5. package/dist/tl-icon.css +1 -1
  6. package/dist/tl-side-menu.css +723 -0
  7. package/dist/tl-text-field.css +1 -1
  8. package/dist/traton-variables.css +61 -64
  9. package/package.json +3 -1
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;
@@ -1374,6 +1382,8 @@ html {
1374
1382
  .scania.tds-mode-light,
1375
1383
  .scania .tl-mode-light,
1376
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);
1377
1387
  --component--focus-ring-radius-none: var(--scania-unit-0);
1378
1388
  --component--focus-ring-radius-extra-small: 1;
1379
1389
  --component--focus-ring-radius-small: 2;
@@ -1381,14 +1391,14 @@ html {
1381
1391
  --component--focus-ring-radius-large: 4;
1382
1392
  --component--focus-ring-radius-extra-large: 5;
1383
1393
  --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
1394
  }
1387
1395
 
1388
1396
  .traton .tds-mode-light,
1389
1397
  .traton.tds-mode-light,
1390
1398
  .traton .tl-mode-light,
1391
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);
1392
1402
  --component--focus-ring-radius-none: var(--traton-unit-0);
1393
1403
  --component--focus-ring-radius-extra-small: 1;
1394
1404
  --component--focus-ring-radius-small: 2;
@@ -1396,8 +1406,6 @@ html {
1396
1406
  --component--focus-ring-radius-large: 4;
1397
1407
  --component--focus-ring-radius-extra-large: 5;
1398
1408
  --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
1409
  }
1402
1410
 
1403
1411
  .tds-mode-dark,
@@ -1405,6 +1413,8 @@ html {
1405
1413
  .scania.tds-mode-dark,
1406
1414
  .scania .tl-mode-dark,
1407
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);
1408
1418
  --component--focus-ring-radius-none: var(--scania-unit-0);
1409
1419
  --component--focus-ring-radius-extra-small: 1;
1410
1420
  --component--focus-ring-radius-small: 2;
@@ -1412,14 +1422,14 @@ html {
1412
1422
  --component--focus-ring-radius-large: 4;
1413
1423
  --component--focus-ring-radius-extra-large: 5;
1414
1424
  --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
1425
  }
1418
1426
 
1419
1427
  .traton .tds-mode-dark,
1420
1428
  .traton.tds-mode-dark,
1421
1429
  .traton .tl-mode-dark,
1422
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);
1423
1433
  --component--focus-ring-radius-none: var(--traton-unit-0);
1424
1434
  --component--focus-ring-radius-extra-small: 1;
1425
1435
  --component--focus-ring-radius-small: 2;
@@ -1427,8 +1437,6 @@ html {
1427
1437
  --component--focus-ring-radius-large: 4;
1428
1438
  --component--focus-ring-radius-extra-large: 5;
1429
1439
  --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);
1432
1440
  }
1433
1441
 
1434
1442
  body {
@@ -1464,31 +1472,31 @@ h6 {
1464
1472
 
1465
1473
  :root,
1466
1474
  .tl-mode-light {
1467
- color: var(--color-foreground-text-strong);
1475
+ color: var(--color-text-strong);
1468
1476
  background-color: var(--color-background-base);
1469
1477
  }
1470
1478
  :root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
1471
1479
  .tl-mode-light.tl-mode-variant-primary,
1472
1480
  .tl-mode-light .tl-mode-variant-primary {
1473
- color: var(--color-foreground-text-strong);
1481
+ color: var(--color-text-strong);
1474
1482
  background-color: var(--color-background-base);
1475
1483
  }
1476
1484
  :root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
1477
1485
  .tl-mode-light.tl-mode-variant-secondary,
1478
1486
  .tl-mode-light .tl-mode-variant-secondary {
1479
- color: var(--color-foreground-text-strong);
1487
+ color: var(--color-text-strong);
1480
1488
  background-color: var(--color-background-layer-01);
1481
1489
  }
1482
1490
 
1483
1491
  .tl-mode-dark {
1484
- color: var(--color-foreground-text-strong);
1492
+ color: var(--color-text-strong);
1485
1493
  background-color: var(--color-background-base);
1486
1494
  }
1487
1495
  .tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
1488
- color: var(--color-foreground-text-strong);
1496
+ color: var(--color-text-strong);
1489
1497
  background-color: var(--color-background-base);
1490
1498
  }
1491
1499
  .tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
1492
- color: var(--color-foreground-text-strong);
1500
+ color: var(--color-text-strong);
1493
1501
  background-color: var(--color-background-layer-01);
1494
1502
  }