@scania/tegel-lite 0.1.0-tl-header-test → 0.1.0-var-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 (13) hide show
  1. package/README.dev.md +2 -2
  2. package/dist/components.css +30 -50
  3. package/dist/tl-accordion.css +8 -8
  4. package/dist/tl-banner.css +2 -2
  5. package/dist/tl-card.css +6 -6
  6. package/dist/tl-checkbox-vars.css +1 -1
  7. package/dist/tl-checkbox.css +1 -1
  8. package/dist/tl-chip.css +6 -6
  9. package/dist/tl-dropdown.css +1 -1
  10. package/dist/tl-header.css +4 -4
  11. package/dist/tl-radio-button.css +1 -1
  12. package/dist/tl-table.css +1 -21
  13. package/package.json +1 -1
package/README.dev.md CHANGED
@@ -179,7 +179,7 @@ Set the brand on `<html>` and mode on `<body>`:
179
179
  export default function RootLayout({ children }) {
180
180
  return (
181
181
  <html lang="en" className="scania"> {/* or "traton" */}
182
- <body className={isDarkMode ? "tds-mode-dark" : ""}>
182
+ <body className={isDarkMode ? "tl-mode-dark" : ""}>
183
183
  {children}
184
184
  </body>
185
185
  </html>
@@ -189,7 +189,7 @@ export default function RootLayout({ children }) {
189
189
 
190
190
  **Important:**
191
191
  - Brand class (`.scania` or `.traton`) goes on the `<html>` element
192
- - Mode class (`.tds-mode-dark`) goes on the `<body>` element for dark mode
192
+ - Mode class (`.tl-mode-dark`) goes on the `<body>` element for dark mode
193
193
  - Light mode is the default and doesn't require a class
194
194
 
195
195
  Checkout the Tegel Storybook documentation for more examples and usage.
package/dist/components.css CHANGED
@@ -31,26 +31,26 @@
31
31
  }
32
32
 
33
33
  /* Mode variants */
34
- .tds-mode-light .tl-accordion--primary,
35
- .tds-mode-light .tl-accordion .tl-accordion--primary {
34
+ .tl-mode-light .tl-accordion--primary,
35
+ .tl-mode-light .tl-accordion .tl-accordion--primary {
36
36
  background-color: var(--accordion-background-hover-secondary);
37
37
  --accordion-background-hover: var(--accordion-background-hover-primary);
38
38
  }
39
39
 
40
- .tds-mode-light .tl-accordion--secondary,
41
- .tds-mode-light .tl-accordion .tl-accordion--secondary {
40
+ .tl-mode-light .tl-accordion--secondary,
41
+ .tl-mode-light .tl-accordion .tl-accordion--secondary {
42
42
  background-color: var(--accordion-background-hover-primary);
43
43
  --accordion-background-hover: var(--accordion-background-hover-secondary);
44
44
  }
45
45
 
46
- .tds-mode-dark .tl-accordion--primary,
47
- .tds-mode-dark .tl-accordion .tl-accordion--primary {
46
+ .tl-mode-dark .tl-accordion--primary,
47
+ .tl-mode-dark .tl-accordion .tl-accordion--primary {
48
48
  background-color: var(--accordion-background-hover-secondary);
49
49
  --accordion-background-hover: var(--accordion-background-hover-primary);
50
50
  }
51
51
 
52
- .tds-mode-dark .tl-accordion--secondary,
53
- .tds-mode-dark .tl-accordion .tl-accordion--secondary {
52
+ .tl-mode-dark .tl-accordion--secondary,
53
+ .tl-mode-dark .tl-accordion .tl-accordion--secondary {
54
54
  background-color: var(--accordion-background-hover-primary);
55
55
  --accordion-background-hover: var(--accordion-background-hover-secondary);
56
56
  }
@@ -315,8 +315,8 @@
315
315
  }
316
316
 
317
317
  :root,
318
- .tds-mode-light,
319
- .tds-mode-dark {
318
+ .tl-mode-light,
319
+ .tl-mode-dark {
320
320
  --banner-text: var(--color-foreground-text-strong);
321
321
  --banner-close-icon: var(--color-foreground-icon-strong);
322
322
  --banner-background-default: var(--color-background-layer-01);
@@ -968,26 +968,26 @@ tds-button,
968
968
  }
969
969
 
970
970
  /* Dark mode */
971
- .tds-mode-dark {
971
+ .tl-mode-dark {
972
972
  --card-background-primary: var(--tds-grey-900);
973
973
  --card-background-secondary: var(--tds-grey-850);
974
974
  }
975
- .tds-mode-dark .tl-card {
975
+ .tl-mode-dark .tl-card {
976
976
  --card-background: var(--card-background-primary);
977
977
  }
978
- .tds-mode-dark .tl-card--primary {
978
+ .tl-mode-dark .tl-card--primary {
979
979
  --card-box: var(--card-box-primary);
980
980
  --card-background: var(--card-background-primary);
981
981
  }
982
- .tds-mode-dark .tl-card--secondary {
982
+ .tl-mode-dark .tl-card--secondary {
983
983
  --card-box: var(--card-box-primary);
984
984
  --card-background: var(--card-background-secondary);
985
985
  }
986
986
 
987
- .traton .tds-mode-dark .tl-card--primary {
987
+ .traton .tl-mode-dark .tl-card--primary {
988
988
  --card-background: transparent;
989
989
  }
990
- .traton .tds-mode-dark .tl-card--secondary {
990
+ .traton .tl-mode-dark .tl-card--secondary {
991
991
  --card-background: transparent;
992
992
  }
993
993
 
@@ -1156,7 +1156,7 @@ tds-button,
1156
1156
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
1157
1157
  }
1158
1158
 
1159
- .tds-mode-dark .tl-checkbox {
1159
+ .tl-mode-dark .tl-checkbox {
1160
1160
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
1161
1161
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
1162
1162
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -1363,15 +1363,15 @@ tds-button,
1363
1363
  .scania .tl-chip {
1364
1364
  --component-chip-border-radius: 16px;
1365
1365
  }
1366
- :root .tds-mode-light .tl-chip,
1367
- .scania .tds-mode-light .tl-chip {
1366
+ :root .tl-mode-light .tl-chip,
1367
+ .scania .tl-mode-light .tl-chip {
1368
1368
  --component-chip-color-hover: var(--color-background-surface-300);
1369
1369
  --component-chip-foreground-foreground-disabled-selected: var(
1370
1370
  --color-foreground-text-inverse-subtle
1371
1371
  );
1372
1372
  }
1373
- :root .tds-mode-dark .tl-chip,
1374
- .scania .tds-mode-dark .tl-chip {
1373
+ :root .tl-mode-dark .tl-chip,
1374
+ .scania .tl-mode-dark .tl-chip {
1375
1375
  --component-chip-color-default: var(--color-background-surface-400);
1376
1376
  --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
1377
1377
  --component-chip-color-hover-on-selected: var(--color-system-info-default);
@@ -1382,7 +1382,7 @@ tds-button,
1382
1382
  .traton .tl-chip {
1383
1383
  --component-chip-border-radius: 2px;
1384
1384
  }
1385
- .traton .tds-mode-light .tl-chip {
1385
+ .traton .tl-mode-light .tl-chip {
1386
1386
  --component-chip-color-default: var(--color-background-surface-200);
1387
1387
  --component-chip-color-selected: var(--color-background-surface-300);
1388
1388
  --component-chip-color-hover-on-selected: var(--color-background-surface-400);
@@ -1390,7 +1390,7 @@ tds-button,
1390
1390
  --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
1391
1391
  --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
1392
1392
  }
1393
- .traton .tds-mode-dark .tl-chip {
1393
+ .traton .tl-mode-dark .tl-chip {
1394
1394
  --component-chip-color-default: var(--color-background-surface-300);
1395
1395
  --component-chip-color-disabled: var(--color-background-surface-200);
1396
1396
  --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
@@ -2529,7 +2529,7 @@ body {
2529
2529
  scrollbar-width: var(--tl-scrollbar-width-standard);
2530
2530
  }
2531
2531
  }
2532
- .tds-mode-dark .tl-dropdown__list {
2532
+ .tl-mode-dark .tl-dropdown__list {
2533
2533
  box-shadow: none;
2534
2534
  }
2535
2535
  .tl-dropdown--dropup .tl-dropdown__list {
@@ -3205,7 +3205,7 @@ body {
3205
3205
  .scania {
3206
3206
  /* Light mode - explicit light mode class */
3207
3207
  }
3208
- .scania .tds-mode-light .tl-header {
3208
+ .scania .tl-mode-light .tl-header {
3209
3209
  --header-background: var(--color-brand-primary-800);
3210
3210
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
3211
3211
  --header-item-hover: var(--color-brand-primary-700);
@@ -3216,7 +3216,7 @@ body {
3216
3216
  .scania {
3217
3217
  /* Dark mode - override with dark colors */
3218
3218
  }
3219
- .scania .tds-mode-dark .tl-header {
3219
+ .scania .tl-mode-dark .tl-header {
3220
3220
  --header-background: var(--color-brand-primary-900);
3221
3221
  --header-nav-item: var(--color-foreground-icon-strong);
3222
3222
  --header-item-hover: var(--color-brand-primary-800);
@@ -3241,7 +3241,7 @@ body {
3241
3241
  --header-basic-element-background-selected: var(--color-brand-primary-700);
3242
3242
  }
3243
3243
 
3244
- .traton .tds-mode-dark .tl-header {
3244
+ .traton .tl-mode-dark .tl-header {
3245
3245
  /* Brand logo - White for dark mode */
3246
3246
  --header-logotype-local: var(--traton-logotype-white-svg-local);
3247
3247
  --header-logotype-cdn: var(--traton-logotype-white-svg);
@@ -3253,7 +3253,7 @@ body {
3253
3253
  --header-basic-element-background-pressed: var(--color-background-base);
3254
3254
  --header-basic-element-background-selected: var(--color-background-surface-100);
3255
3255
  }
3256
- .traton .tds-mode-light .tl-header {
3256
+ .traton .tl-mode-light .tl-header {
3257
3257
  /* Brand logo - Black for light mode */
3258
3258
  --header-logotype-local: var(--traton-logotype-black-svg-local);
3259
3259
  --header-logotype-cdn: var(--traton-logotype-black-svg);
@@ -5901,7 +5901,7 @@ body {
5901
5901
  }
5902
5902
  .tl-radio-button__input:disabled::after {
5903
5903
  background-color: var(--radio-button-background-disabled);
5904
- border: 1px solid var(--radio-button-border-disabled);
5904
+ border-color: var(--radio-button-background-disabled);
5905
5905
  outline: none;
5906
5906
  }
5907
5907
  .tl-radio-button__input:disabled:checked::before {
@@ -7217,7 +7217,7 @@ body {
7217
7217
  --table-zebra-mode: var(--component-table-cell);
7218
7218
  }
7219
7219
 
7220
- .tds-mode-dark .tl-table.tl-table--secondary {
7220
+ .tl-mode-dark .tl-table.tl-table--secondary {
7221
7221
  --table-body-cell-hover: var(--color-background-surface-300);
7222
7222
  --table-body-row-hover: var(--color-background-surface-300);
7223
7223
  }
@@ -7278,26 +7278,6 @@ body {
7278
7278
  font-family: var(--detail-02-font-family);
7279
7279
  }
7280
7280
 
7281
- .tl-table__rows-per-page-select {
7282
- background-color: var(--table-footer-page-selector-input);
7283
- color: var(--table-text);
7284
- height: 30px;
7285
- border: none;
7286
- border-radius: var(--tds-spacing-element-4);
7287
- padding: 0 var(--tds-spacing-element-8);
7288
- transition: background-color 250ms ease;
7289
- font-family: var(--detail-02-font-family);
7290
- }
7291
- .tl-table__rows-per-page-select:hover {
7292
- background-color: var(--table-footer-page-selector-input-hover);
7293
- }
7294
- .tl-table__rows-per-page-select:disabled {
7295
- color: var(--table-footer-page-selector-input-color-disabled);
7296
- }
7297
- .tl-table--compact .tl-table__rows-per-page-select {
7298
- height: var(--tds-spacing-element-24);
7299
- }
7300
-
7301
7281
  .tl-table__page-selector-input {
7302
7282
  background-color: var(--table-footer-page-selector-input);
7303
7283
  border-radius: var(--tds-spacing-element-4);
package/dist/tl-accordion.css CHANGED
@@ -18,26 +18,26 @@
18
18
  }
19
19
 
20
20
  /* Mode variants */
21
- .tds-mode-light .tl-accordion--primary,
22
- .tds-mode-light .tl-accordion .tl-accordion--primary {
21
+ .tl-mode-light .tl-accordion--primary,
22
+ .tl-mode-light .tl-accordion .tl-accordion--primary {
23
23
  background-color: var(--accordion-background-hover-secondary);
24
24
  --accordion-background-hover: var(--accordion-background-hover-primary);
25
25
  }
26
26
 
27
- .tds-mode-light .tl-accordion--secondary,
28
- .tds-mode-light .tl-accordion .tl-accordion--secondary {
27
+ .tl-mode-light .tl-accordion--secondary,
28
+ .tl-mode-light .tl-accordion .tl-accordion--secondary {
29
29
  background-color: var(--accordion-background-hover-primary);
30
30
  --accordion-background-hover: var(--accordion-background-hover-secondary);
31
31
  }
32
32
 
33
- .tds-mode-dark .tl-accordion--primary,
34
- .tds-mode-dark .tl-accordion .tl-accordion--primary {
33
+ .tl-mode-dark .tl-accordion--primary,
34
+ .tl-mode-dark .tl-accordion .tl-accordion--primary {
35
35
  background-color: var(--accordion-background-hover-secondary);
36
36
  --accordion-background-hover: var(--accordion-background-hover-primary);
37
37
  }
38
38
 
39
- .tds-mode-dark .tl-accordion--secondary,
40
- .tds-mode-dark .tl-accordion .tl-accordion--secondary {
39
+ .tl-mode-dark .tl-accordion--secondary,
40
+ .tl-mode-dark .tl-accordion .tl-accordion--secondary {
41
41
  background-color: var(--accordion-background-hover-primary);
42
42
  --accordion-background-hover: var(--accordion-background-hover-secondary);
43
43
  }
package/dist/tl-banner.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root,
2
- .tds-mode-light,
3
- .tds-mode-dark {
2
+ .tl-mode-light,
3
+ .tl-mode-dark {
4
4
  --banner-text: var(--color-foreground-text-strong);
5
5
  --banner-close-icon: var(--color-foreground-icon-strong);
6
6
  --banner-background-default: var(--color-background-layer-01);
package/dist/tl-card.css CHANGED
@@ -60,26 +60,26 @@
60
60
  }
61
61
 
62
62
  /* Dark mode */
63
- .tds-mode-dark {
63
+ .tl-mode-dark {
64
64
  --card-background-primary: var(--tds-grey-900);
65
65
  --card-background-secondary: var(--tds-grey-850);
66
66
  }
67
- .tds-mode-dark .tl-card {
67
+ .tl-mode-dark .tl-card {
68
68
  --card-background: var(--card-background-primary);
69
69
  }
70
- .tds-mode-dark .tl-card--primary {
70
+ .tl-mode-dark .tl-card--primary {
71
71
  --card-box: var(--card-box-primary);
72
72
  --card-background: var(--card-background-primary);
73
73
  }
74
- .tds-mode-dark .tl-card--secondary {
74
+ .tl-mode-dark .tl-card--secondary {
75
75
  --card-box: var(--card-box-primary);
76
76
  --card-background: var(--card-background-secondary);
77
77
  }
78
78
 
79
- .traton .tds-mode-dark .tl-card--primary {
79
+ .traton .tl-mode-dark .tl-card--primary {
80
80
  --card-background: transparent;
81
81
  }
82
- .traton .tds-mode-dark .tl-card--secondary {
82
+ .traton .tl-mode-dark .tl-card--secondary {
83
83
  --card-background: transparent;
84
84
  }
85
85
 
package/dist/tl-checkbox-vars.css CHANGED
@@ -16,7 +16,7 @@
16
16
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
17
17
  }
18
18
 
19
- .tds-mode-dark .tl-checkbox {
19
+ .tl-mode-dark .tl-checkbox {
20
20
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
21
21
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
22
22
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
package/dist/tl-checkbox.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
18
18
  }
19
19
 
20
- .tds-mode-dark .tl-checkbox {
20
+ .tl-mode-dark .tl-checkbox {
21
21
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
22
22
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
23
23
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
package/dist/tl-chip.css CHANGED
@@ -31,15 +31,15 @@
31
31
  .scania .tl-chip {
32
32
  --component-chip-border-radius: 16px;
33
33
  }
34
- :root .tds-mode-light .tl-chip,
35
- .scania .tds-mode-light .tl-chip {
34
+ :root .tl-mode-light .tl-chip,
35
+ .scania .tl-mode-light .tl-chip {
36
36
  --component-chip-color-hover: var(--color-background-surface-300);
37
37
  --component-chip-foreground-foreground-disabled-selected: var(
38
38
  --color-foreground-text-inverse-subtle
39
39
  );
40
40
  }
41
- :root .tds-mode-dark .tl-chip,
42
- .scania .tds-mode-dark .tl-chip {
41
+ :root .tl-mode-dark .tl-chip,
42
+ .scania .tl-mode-dark .tl-chip {
43
43
  --component-chip-color-default: var(--color-background-surface-400);
44
44
  --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
45
45
  --component-chip-color-hover-on-selected: var(--color-system-info-default);
@@ -50,7 +50,7 @@
50
50
  .traton .tl-chip {
51
51
  --component-chip-border-radius: 2px;
52
52
  }
53
- .traton .tds-mode-light .tl-chip {
53
+ .traton .tl-mode-light .tl-chip {
54
54
  --component-chip-color-default: var(--color-background-surface-200);
55
55
  --component-chip-color-selected: var(--color-background-surface-300);
56
56
  --component-chip-color-hover-on-selected: var(--color-background-surface-400);
@@ -58,7 +58,7 @@
58
58
  --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
59
59
  --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
60
60
  }
61
- .traton .tds-mode-dark .tl-chip {
61
+ .traton .tl-mode-dark .tl-chip {
62
62
  --component-chip-color-default: var(--color-background-surface-300);
63
63
  --component-chip-color-disabled: var(--color-background-surface-200);
64
64
  --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
package/dist/tl-dropdown.css CHANGED
@@ -605,7 +605,7 @@ body {
605
605
  scrollbar-width: var(--tl-scrollbar-width-standard);
606
606
  }
607
607
  }
608
- .tds-mode-dark .tl-dropdown__list {
608
+ .tl-mode-dark .tl-dropdown__list {
609
609
  box-shadow: none;
610
610
  }
611
611
  .tl-dropdown--dropup .tl-dropdown__list {
package/dist/tl-header.css CHANGED
@@ -155,7 +155,7 @@
155
155
  .scania {
156
156
  /* Light mode - explicit light mode class */
157
157
  }
158
- .scania .tds-mode-light .tl-header {
158
+ .scania .tl-mode-light .tl-header {
159
159
  --header-background: var(--color-brand-primary-800);
160
160
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
161
161
  --header-item-hover: var(--color-brand-primary-700);
@@ -166,7 +166,7 @@
166
166
  .scania {
167
167
  /* Dark mode - override with dark colors */
168
168
  }
169
- .scania .tds-mode-dark .tl-header {
169
+ .scania .tl-mode-dark .tl-header {
170
170
  --header-background: var(--color-brand-primary-900);
171
171
  --header-nav-item: var(--color-foreground-icon-strong);
172
172
  --header-item-hover: var(--color-brand-primary-800);
@@ -191,7 +191,7 @@
191
191
  --header-basic-element-background-selected: var(--color-brand-primary-700);
192
192
  }
193
193
 
194
- .traton .tds-mode-dark .tl-header {
194
+ .traton .tl-mode-dark .tl-header {
195
195
  /* Brand logo - White for dark mode */
196
196
  --header-logotype-local: var(--traton-logotype-white-svg-local);
197
197
  --header-logotype-cdn: var(--traton-logotype-white-svg);
@@ -203,7 +203,7 @@
203
203
  --header-basic-element-background-pressed: var(--color-background-base);
204
204
  --header-basic-element-background-selected: var(--color-background-surface-100);
205
205
  }
206
- .traton .tds-mode-light .tl-header {
206
+ .traton .tl-mode-light .tl-header {
207
207
  /* Brand logo - Black for light mode */
208
208
  --header-logotype-local: var(--traton-logotype-black-svg-local);
209
209
  --header-logotype-cdn: var(--traton-logotype-black-svg);
package/dist/tl-radio-button.css CHANGED
@@ -127,7 +127,7 @@
127
127
  }
128
128
  .tl-radio-button__input:disabled::after {
129
129
  background-color: var(--radio-button-background-disabled);
130
- border: 1px solid var(--radio-button-border-disabled);
130
+ border-color: var(--radio-button-background-disabled);
131
131
  outline: none;
132
132
  }
133
133
  .tl-radio-button__input:disabled:checked::before {
package/dist/tl-table.css CHANGED
@@ -67,7 +67,7 @@ body {
67
67
  --table-zebra-mode: var(--component-table-cell);
68
68
  }
69
69
 
70
- .tds-mode-dark .tl-table.tl-table--secondary {
70
+ .tl-mode-dark .tl-table.tl-table--secondary {
71
71
  --table-body-cell-hover: var(--color-background-surface-300);
72
72
  --table-body-row-hover: var(--color-background-surface-300);
73
73
  }
@@ -129,26 +129,6 @@ body {
129
129
  font-family: var(--detail-02-font-family);
130
130
  }
131
131
 
132
- .tl-table__rows-per-page-select {
133
- background-color: var(--table-footer-page-selector-input);
134
- color: var(--table-text);
135
- height: 30px;
136
- border: none;
137
- border-radius: var(--tds-spacing-element-4);
138
- padding: 0 var(--tds-spacing-element-8);
139
- transition: background-color 250ms ease;
140
- font-family: var(--detail-02-font-family);
141
- }
142
- .tl-table__rows-per-page-select:hover {
143
- background-color: var(--table-footer-page-selector-input-hover);
144
- }
145
- .tl-table__rows-per-page-select:disabled {
146
- color: var(--table-footer-page-selector-input-color-disabled);
147
- }
148
- .tl-table--compact .tl-table__rows-per-page-select {
149
- height: var(--tds-spacing-element-24);
150
- }
151
-
152
132
  .tl-table__page-selector-input {
153
133
  background-color: var(--table-footer-page-selector-input);
154
134
  border-radius: var(--tds-spacing-element-4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-tl-header-test",
3
+ "version": "0.1.0-var-beta.0",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [