@scania/tegel-lite 0.1.0-beta.updated-globals → 0.1.0-test-variant-beta.1
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.
- package/dist/components.css +37 -37
- package/dist/global.css +14 -14
- package/dist/scania-variables.css +6 -2
- package/dist/tl-accordion.css +8 -8
- package/dist/tl-banner.css +2 -2
- package/dist/tl-card.css +6 -6
- package/dist/tl-checkbox-vars.css +1 -1
- package/dist/tl-checkbox.css +1 -1
- package/dist/tl-chip.css +6 -6
- package/dist/tl-dropdown.css +1 -1
- package/dist/tl-header.css +4 -4
- package/dist/tl-slider.css +8 -8
- package/dist/tl-table.css +1 -1
- package/dist/traton-variables.css +4 -2
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -31,26 +31,26 @@
|
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/* Mode variants */
|
|
34
|
-
.
|
|
35
|
-
.
|
|
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
|
-
.
|
|
41
|
-
.
|
|
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
|
-
.
|
|
47
|
-
.
|
|
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
|
-
.
|
|
53
|
-
.
|
|
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
|
}
|
|
@@ -330,8 +330,8 @@ tds-badge {
|
|
|
330
330
|
}
|
|
331
331
|
|
|
332
332
|
:root,
|
|
333
|
-
.
|
|
334
|
-
.
|
|
333
|
+
.tl-mode-light,
|
|
334
|
+
.tl-mode-dark {
|
|
335
335
|
--banner-text: var(--color-foreground-text-strong);
|
|
336
336
|
--banner-close-icon: var(--color-foreground-icon-strong);
|
|
337
337
|
--banner-background-default: var(--color-background-layer-01);
|
|
@@ -993,26 +993,26 @@ tds-card {
|
|
|
993
993
|
}
|
|
994
994
|
|
|
995
995
|
/* Dark mode */
|
|
996
|
-
.
|
|
996
|
+
.tl-mode-dark {
|
|
997
997
|
--card-background-primary: var(--tds-grey-900);
|
|
998
998
|
--card-background-secondary: var(--tds-grey-850);
|
|
999
999
|
}
|
|
1000
|
-
.
|
|
1000
|
+
.tl-mode-dark .tl-card {
|
|
1001
1001
|
--card-background: var(--card-background-primary);
|
|
1002
1002
|
}
|
|
1003
|
-
.
|
|
1003
|
+
.tl-mode-dark .tl-card--primary {
|
|
1004
1004
|
--card-box: var(--card-box-primary);
|
|
1005
1005
|
--card-background: var(--card-background-primary);
|
|
1006
1006
|
}
|
|
1007
|
-
.
|
|
1007
|
+
.tl-mode-dark .tl-card--secondary {
|
|
1008
1008
|
--card-box: var(--card-box-primary);
|
|
1009
1009
|
--card-background: var(--card-background-secondary);
|
|
1010
1010
|
}
|
|
1011
1011
|
|
|
1012
|
-
.traton .
|
|
1012
|
+
.traton .tl-mode-dark .tl-card--primary {
|
|
1013
1013
|
--card-background: transparent;
|
|
1014
1014
|
}
|
|
1015
|
-
.traton .
|
|
1015
|
+
.traton .tl-mode-dark .tl-card--secondary {
|
|
1016
1016
|
--card-background: transparent;
|
|
1017
1017
|
}
|
|
1018
1018
|
|
|
@@ -1181,7 +1181,7 @@ tds-card {
|
|
|
1181
1181
|
--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>");
|
|
1182
1182
|
}
|
|
1183
1183
|
|
|
1184
|
-
.
|
|
1184
|
+
.tl-mode-dark .tl-checkbox {
|
|
1185
1185
|
--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>");
|
|
1186
1186
|
--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>");
|
|
1187
1187
|
--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>");
|
|
@@ -1388,15 +1388,15 @@ tds-card {
|
|
|
1388
1388
|
.scania .tl-chip {
|
|
1389
1389
|
--component-chip-border-radius: 16px;
|
|
1390
1390
|
}
|
|
1391
|
-
:root .
|
|
1392
|
-
.scania .
|
|
1391
|
+
:root .tl-mode-light .tl-chip,
|
|
1392
|
+
.scania .tl-mode-light .tl-chip {
|
|
1393
1393
|
--component-chip-color-hover: var(--color-background-surface-300);
|
|
1394
1394
|
--component-chip-foreground-foreground-disabled-selected: var(
|
|
1395
1395
|
--color-foreground-text-inverse-subtle
|
|
1396
1396
|
);
|
|
1397
1397
|
}
|
|
1398
|
-
:root .
|
|
1399
|
-
.scania .
|
|
1398
|
+
:root .tl-mode-dark .tl-chip,
|
|
1399
|
+
.scania .tl-mode-dark .tl-chip {
|
|
1400
1400
|
--component-chip-color-default: var(--color-background-surface-400);
|
|
1401
1401
|
--component-chip-color-focused-on-selected: var(--color-system-info-discrete);
|
|
1402
1402
|
--component-chip-color-hover-on-selected: var(--color-system-info-default);
|
|
@@ -1407,7 +1407,7 @@ tds-card {
|
|
|
1407
1407
|
.traton .tl-chip {
|
|
1408
1408
|
--component-chip-border-radius: 2px;
|
|
1409
1409
|
}
|
|
1410
|
-
.traton .
|
|
1410
|
+
.traton .tl-mode-light .tl-chip {
|
|
1411
1411
|
--component-chip-color-default: var(--color-background-surface-200);
|
|
1412
1412
|
--component-chip-color-selected: var(--color-background-surface-300);
|
|
1413
1413
|
--component-chip-color-hover-on-selected: var(--color-background-surface-400);
|
|
@@ -1415,7 +1415,7 @@ tds-card {
|
|
|
1415
1415
|
--component-chip-color-focused-on-selected: var(--component-chip-color-focused);
|
|
1416
1416
|
--component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
|
|
1417
1417
|
}
|
|
1418
|
-
.traton .
|
|
1418
|
+
.traton .tl-mode-dark .tl-chip {
|
|
1419
1419
|
--component-chip-color-default: var(--color-background-surface-300);
|
|
1420
1420
|
--component-chip-color-disabled: var(--color-background-surface-200);
|
|
1421
1421
|
--component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
|
|
@@ -2571,7 +2571,7 @@ body {
|
|
|
2571
2571
|
scrollbar-width: var(--tl-scrollbar-width-standard);
|
|
2572
2572
|
}
|
|
2573
2573
|
}
|
|
2574
|
-
.
|
|
2574
|
+
.tl-mode-dark .tl-dropdown__list {
|
|
2575
2575
|
box-shadow: none;
|
|
2576
2576
|
}
|
|
2577
2577
|
.tl-dropdown--dropup .tl-dropdown__list {
|
|
@@ -3316,7 +3316,7 @@ tds-footer {
|
|
|
3316
3316
|
.scania {
|
|
3317
3317
|
/* Light mode - explicit light mode class */
|
|
3318
3318
|
}
|
|
3319
|
-
.scania .
|
|
3319
|
+
.scania .tl-mode-light .tl-header {
|
|
3320
3320
|
--header-background: var(--color-brand-primary-800);
|
|
3321
3321
|
--header-nav-item: var(--color-foreground-icon-inverse-strong);
|
|
3322
3322
|
--header-item-hover: var(--color-brand-primary-700);
|
|
@@ -3327,7 +3327,7 @@ tds-footer {
|
|
|
3327
3327
|
.scania {
|
|
3328
3328
|
/* Dark mode - override with dark colors */
|
|
3329
3329
|
}
|
|
3330
|
-
.scania .
|
|
3330
|
+
.scania .tl-mode-dark .tl-header {
|
|
3331
3331
|
--header-background: var(--color-brand-primary-900);
|
|
3332
3332
|
--header-nav-item: var(--color-foreground-icon-strong);
|
|
3333
3333
|
--header-item-hover: var(--color-brand-primary-800);
|
|
@@ -3352,7 +3352,7 @@ tds-footer {
|
|
|
3352
3352
|
--header-basic-element-background-selected: var(--color-brand-primary-700);
|
|
3353
3353
|
}
|
|
3354
3354
|
|
|
3355
|
-
.traton .
|
|
3355
|
+
.traton .tl-mode-dark .tl-header {
|
|
3356
3356
|
/* Brand logo - White for dark mode */
|
|
3357
3357
|
--header-logotype-local: var(--traton-logotype-white-svg-local);
|
|
3358
3358
|
--header-logotype-cdn: var(--traton-logotype-white-svg);
|
|
@@ -3364,7 +3364,7 @@ tds-footer {
|
|
|
3364
3364
|
--header-basic-element-background-pressed: var(--color-background-base);
|
|
3365
3365
|
--header-basic-element-background-selected: var(--color-background-surface-100);
|
|
3366
3366
|
}
|
|
3367
|
-
.traton .
|
|
3367
|
+
.traton .tl-mode-light .tl-header {
|
|
3368
3368
|
/* Brand logo - Black for light mode */
|
|
3369
3369
|
--header-logotype-local: var(--traton-logotype-black-svg-local);
|
|
3370
3370
|
--header-logotype-cdn: var(--traton-logotype-black-svg);
|
|
@@ -6745,7 +6745,7 @@ tds-footer {
|
|
|
6745
6745
|
margin-bottom: 2px;
|
|
6746
6746
|
margin-left: 0;
|
|
6747
6747
|
}
|
|
6748
|
-
:has(input[type=range]:disabled) .tl-slider__label {
|
|
6748
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__label {
|
|
6749
6749
|
color: var(--slider-disabled-text);
|
|
6750
6750
|
}
|
|
6751
6751
|
|
|
@@ -6825,7 +6825,7 @@ tds-footer {
|
|
|
6825
6825
|
flex-shrink: 0;
|
|
6826
6826
|
align-self: center;
|
|
6827
6827
|
}
|
|
6828
|
-
:has(input[type=range]:disabled) .tl-slider__value {
|
|
6828
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value {
|
|
6829
6829
|
color: var(--slider-disabled-text);
|
|
6830
6830
|
}
|
|
6831
6831
|
|
|
@@ -6900,7 +6900,7 @@ tds-footer {
|
|
|
6900
6900
|
.tl-slider__thumb:hover .tl-slider__value-tooltip {
|
|
6901
6901
|
display: block;
|
|
6902
6902
|
}
|
|
6903
|
-
:has(input[type=range]:disabled) .tl-slider__value-tooltip {
|
|
6903
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
|
|
6904
6904
|
display: none;
|
|
6905
6905
|
}
|
|
6906
6906
|
|
|
@@ -6957,11 +6957,11 @@ tds-footer {
|
|
|
6957
6957
|
width: 20px;
|
|
6958
6958
|
height: 20px;
|
|
6959
6959
|
}
|
|
6960
|
-
:has(input[type=range]:disabled) .tl-slider__thumb-inner {
|
|
6960
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
|
|
6961
6961
|
background-color: var(--slider-disabled);
|
|
6962
6962
|
cursor: not-allowed;
|
|
6963
6963
|
}
|
|
6964
|
-
:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
|
|
6964
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
|
|
6965
6965
|
display: none;
|
|
6966
6966
|
}
|
|
6967
6967
|
|
|
@@ -6992,7 +6992,7 @@ tds-footer {
|
|
|
6992
6992
|
left: 50%;
|
|
6993
6993
|
transform: translate(-50%, -50%);
|
|
6994
6994
|
}
|
|
6995
|
-
:has(input[type=range]:disabled) .tl-slider__value-divider-line {
|
|
6995
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
|
|
6996
6996
|
background-color: var(--slider-disabled);
|
|
6997
6997
|
}
|
|
6998
6998
|
|
|
@@ -7014,7 +7014,7 @@ tds-footer {
|
|
|
7014
7014
|
user-select: none;
|
|
7015
7015
|
color: var(--slider-divider-values);
|
|
7016
7016
|
}
|
|
7017
|
-
:has(input[type=range]:disabled) .tl-slider__value-divider-label {
|
|
7017
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
|
|
7018
7018
|
color: var(--slider-disabled-text);
|
|
7019
7019
|
}
|
|
7020
7020
|
|
|
@@ -7027,7 +7027,7 @@ tds-footer {
|
|
|
7027
7027
|
top: -1px;
|
|
7028
7028
|
z-index: 1;
|
|
7029
7029
|
}
|
|
7030
|
-
:has(input[type=range]:disabled) .tl-slider__track-fill {
|
|
7030
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
|
|
7031
7031
|
background-color: var(--slider-disabled);
|
|
7032
7032
|
}
|
|
7033
7033
|
|
|
@@ -7463,7 +7463,7 @@ tds-table {
|
|
|
7463
7463
|
--table-zebra-mode: var(--component-table-cell);
|
|
7464
7464
|
}
|
|
7465
7465
|
|
|
7466
|
-
.
|
|
7466
|
+
.tl-mode-dark .tl-table.tl-table--secondary {
|
|
7467
7467
|
--table-body-cell-hover: var(--color-background-surface-300);
|
|
7468
7468
|
--table-body-row-hover: var(--color-background-surface-300);
|
|
7469
7469
|
}
|
package/dist/global.css
CHANGED
|
@@ -4308,21 +4308,21 @@ html {
|
|
|
4308
4308
|
}
|
|
4309
4309
|
}
|
|
4310
4310
|
/** The breakpoint at which the layout changes from fixed size to full-width. */
|
|
4311
|
-
.
|
|
4311
|
+
.tl-mode-light {
|
|
4312
4312
|
--tl-scrollbar-track-color: transparent;
|
|
4313
4313
|
--tl-scrollbar-thumb-color: #303c612b;
|
|
4314
4314
|
}
|
|
4315
4315
|
|
|
4316
|
-
.
|
|
4316
|
+
.tl-mode-dark {
|
|
4317
4317
|
--tl-scrollbar-track-color: transparent;
|
|
4318
4318
|
--tl-scrollbar-thumb-color: #a4c7f5;
|
|
4319
4319
|
}
|
|
4320
4320
|
|
|
4321
|
-
.traton .
|
|
4321
|
+
.traton .tl-mode-light {
|
|
4322
4322
|
--tl-scrollbar-track-color: transparent;
|
|
4323
4323
|
--tl-scrollbar-thumb-color: #1a1a1926;
|
|
4324
4324
|
}
|
|
4325
|
-
.traton .
|
|
4325
|
+
.traton .tl-mode-dark {
|
|
4326
4326
|
--tl-scrollbar-track-color: transparent;
|
|
4327
4327
|
--tl-scrollbar-thumb-color: #d9edf054;
|
|
4328
4328
|
}
|
|
@@ -4855,32 +4855,32 @@ h6 {
|
|
|
4855
4855
|
}
|
|
4856
4856
|
|
|
4857
4857
|
:root,
|
|
4858
|
-
.
|
|
4858
|
+
.tl-mode-light {
|
|
4859
4859
|
color: var(--color-foreground-text-strong);
|
|
4860
4860
|
background-color: var(--color-background-base);
|
|
4861
4861
|
}
|
|
4862
|
-
:root.
|
|
4863
|
-
.
|
|
4864
|
-
.
|
|
4862
|
+
:root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
|
|
4863
|
+
.tl-mode-light.tl-mode-variant-primary,
|
|
4864
|
+
.tl-mode-light .tl-mode-variant-primary {
|
|
4865
4865
|
color: var(--color-foreground-text-strong);
|
|
4866
4866
|
background-color: var(--color-background-base);
|
|
4867
4867
|
}
|
|
4868
|
-
:root.
|
|
4869
|
-
.
|
|
4870
|
-
.
|
|
4868
|
+
:root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
|
|
4869
|
+
.tl-mode-light.tl-mode-variant-secondary,
|
|
4870
|
+
.tl-mode-light .tl-mode-variant-secondary {
|
|
4871
4871
|
color: var(--color-foreground-text-strong);
|
|
4872
4872
|
background-color: var(--color-background-layer-01);
|
|
4873
4873
|
}
|
|
4874
4874
|
|
|
4875
|
-
.
|
|
4875
|
+
.tl-mode-dark {
|
|
4876
4876
|
color: var(--color-foreground-text-strong);
|
|
4877
4877
|
background-color: var(--color-background-base);
|
|
4878
4878
|
}
|
|
4879
|
-
.
|
|
4879
|
+
.tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
|
|
4880
4880
|
color: var(--color-foreground-text-strong);
|
|
4881
4881
|
background-color: var(--color-background-base);
|
|
4882
4882
|
}
|
|
4883
|
-
.
|
|
4883
|
+
.tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
|
|
4884
4884
|
color: var(--color-foreground-text-strong);
|
|
4885
4885
|
background-color: var(--color-background-layer-01);
|
|
4886
4886
|
}
|
|
@@ -116,7 +116,9 @@
|
|
|
116
116
|
*/
|
|
117
117
|
:root,
|
|
118
118
|
.tds-mode-light,
|
|
119
|
-
.scania .tds-mode-light
|
|
119
|
+
.scania .tds-mode-light,
|
|
120
|
+
.tl-mode-light,
|
|
121
|
+
.scania .tl-mode-light {
|
|
120
122
|
--color-background-base: var(--scania-color-grey-00);
|
|
121
123
|
--color-background-accent-primary-default: var(--scania-color-blue-600);
|
|
122
124
|
--color-background-accent-primary-disabled: var(--scania-color-grey-50);
|
|
@@ -248,7 +250,9 @@
|
|
|
248
250
|
* Do not edit directly, this file was auto-generated.
|
|
249
251
|
*/
|
|
250
252
|
.tds-mode-dark,
|
|
251
|
-
.scania .tds-mode-dark
|
|
253
|
+
.scania .tds-mode-dark,
|
|
254
|
+
.tl-mode-dark,
|
|
255
|
+
.scania .tl-mode-dark {
|
|
252
256
|
--color-background-base: var(--scania-color-grey-950);
|
|
253
257
|
--color-background-accent-primary-default: var(--scania-color-blue-400);
|
|
254
258
|
--color-background-accent-primary-disabled: var(--scania-color-grey-850);
|
package/dist/tl-accordion.css
CHANGED
|
@@ -18,26 +18,26 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/* Mode variants */
|
|
21
|
-
.
|
|
22
|
-
.
|
|
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
|
-
.
|
|
28
|
-
.
|
|
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
|
-
.
|
|
34
|
-
.
|
|
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
|
-
.
|
|
40
|
-
.
|
|
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
package/dist/tl-card.css
CHANGED
|
@@ -70,26 +70,26 @@ tds-card {
|
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
/* Dark mode */
|
|
73
|
-
.
|
|
73
|
+
.tl-mode-dark {
|
|
74
74
|
--card-background-primary: var(--tds-grey-900);
|
|
75
75
|
--card-background-secondary: var(--tds-grey-850);
|
|
76
76
|
}
|
|
77
|
-
.
|
|
77
|
+
.tl-mode-dark .tl-card {
|
|
78
78
|
--card-background: var(--card-background-primary);
|
|
79
79
|
}
|
|
80
|
-
.
|
|
80
|
+
.tl-mode-dark .tl-card--primary {
|
|
81
81
|
--card-box: var(--card-box-primary);
|
|
82
82
|
--card-background: var(--card-background-primary);
|
|
83
83
|
}
|
|
84
|
-
.
|
|
84
|
+
.tl-mode-dark .tl-card--secondary {
|
|
85
85
|
--card-box: var(--card-box-primary);
|
|
86
86
|
--card-background: var(--card-background-secondary);
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.traton .
|
|
89
|
+
.traton .tl-mode-dark .tl-card--primary {
|
|
90
90
|
--card-background: transparent;
|
|
91
91
|
}
|
|
92
|
-
.traton .
|
|
92
|
+
.traton .tl-mode-dark .tl-card--secondary {
|
|
93
93
|
--card-background: transparent;
|
|
94
94
|
}
|
|
95
95
|
|
|
@@ -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
|
-
.
|
|
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
|
-
.
|
|
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 .
|
|
35
|
-
.scania .
|
|
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 .
|
|
42
|
-
.scania .
|
|
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 .
|
|
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 .
|
|
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
package/dist/tl-header.css
CHANGED
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
.scania {
|
|
161
161
|
/* Light mode - explicit light mode class */
|
|
162
162
|
}
|
|
163
|
-
.scania .
|
|
163
|
+
.scania .tl-mode-light .tl-header {
|
|
164
164
|
--header-background: var(--color-brand-primary-800);
|
|
165
165
|
--header-nav-item: var(--color-foreground-icon-inverse-strong);
|
|
166
166
|
--header-item-hover: var(--color-brand-primary-700);
|
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
.scania {
|
|
172
172
|
/* Dark mode - override with dark colors */
|
|
173
173
|
}
|
|
174
|
-
.scania .
|
|
174
|
+
.scania .tl-mode-dark .tl-header {
|
|
175
175
|
--header-background: var(--color-brand-primary-900);
|
|
176
176
|
--header-nav-item: var(--color-foreground-icon-strong);
|
|
177
177
|
--header-item-hover: var(--color-brand-primary-800);
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
--header-basic-element-background-selected: var(--color-brand-primary-700);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
.traton .
|
|
199
|
+
.traton .tl-mode-dark .tl-header {
|
|
200
200
|
/* Brand logo - White for dark mode */
|
|
201
201
|
--header-logotype-local: var(--traton-logotype-white-svg-local);
|
|
202
202
|
--header-logotype-cdn: var(--traton-logotype-white-svg);
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
--header-basic-element-background-pressed: var(--color-background-base);
|
|
209
209
|
--header-basic-element-background-selected: var(--color-background-surface-100);
|
|
210
210
|
}
|
|
211
|
-
.traton .
|
|
211
|
+
.traton .tl-mode-light .tl-header {
|
|
212
212
|
/* Brand logo - Black for light mode */
|
|
213
213
|
--header-logotype-local: var(--traton-logotype-black-svg-local);
|
|
214
214
|
--header-logotype-cdn: var(--traton-logotype-black-svg);
|
package/dist/tl-slider.css
CHANGED
|
@@ -1563,7 +1563,7 @@ tds-button,
|
|
|
1563
1563
|
margin-bottom: 2px;
|
|
1564
1564
|
margin-left: 0;
|
|
1565
1565
|
}
|
|
1566
|
-
:has(input[type=range]:disabled) .tl-slider__label {
|
|
1566
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__label {
|
|
1567
1567
|
color: var(--slider-disabled-text);
|
|
1568
1568
|
}
|
|
1569
1569
|
|
|
@@ -1643,7 +1643,7 @@ tds-button,
|
|
|
1643
1643
|
flex-shrink: 0;
|
|
1644
1644
|
align-self: center;
|
|
1645
1645
|
}
|
|
1646
|
-
:has(input[type=range]:disabled) .tl-slider__value {
|
|
1646
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value {
|
|
1647
1647
|
color: var(--slider-disabled-text);
|
|
1648
1648
|
}
|
|
1649
1649
|
|
|
@@ -1718,7 +1718,7 @@ tds-button,
|
|
|
1718
1718
|
.tl-slider__thumb:hover .tl-slider__value-tooltip {
|
|
1719
1719
|
display: block;
|
|
1720
1720
|
}
|
|
1721
|
-
:has(input[type=range]:disabled) .tl-slider__value-tooltip {
|
|
1721
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
|
|
1722
1722
|
display: none;
|
|
1723
1723
|
}
|
|
1724
1724
|
|
|
@@ -1775,11 +1775,11 @@ tds-button,
|
|
|
1775
1775
|
width: 20px;
|
|
1776
1776
|
height: 20px;
|
|
1777
1777
|
}
|
|
1778
|
-
:has(input[type=range]:disabled) .tl-slider__thumb-inner {
|
|
1778
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
|
|
1779
1779
|
background-color: var(--slider-disabled);
|
|
1780
1780
|
cursor: not-allowed;
|
|
1781
1781
|
}
|
|
1782
|
-
:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
|
|
1782
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
|
|
1783
1783
|
display: none;
|
|
1784
1784
|
}
|
|
1785
1785
|
|
|
@@ -1810,7 +1810,7 @@ tds-button,
|
|
|
1810
1810
|
left: 50%;
|
|
1811
1811
|
transform: translate(-50%, -50%);
|
|
1812
1812
|
}
|
|
1813
|
-
:has(input[type=range]:disabled) .tl-slider__value-divider-line {
|
|
1813
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
|
|
1814
1814
|
background-color: var(--slider-disabled);
|
|
1815
1815
|
}
|
|
1816
1816
|
|
|
@@ -1832,7 +1832,7 @@ tds-button,
|
|
|
1832
1832
|
user-select: none;
|
|
1833
1833
|
color: var(--slider-divider-values);
|
|
1834
1834
|
}
|
|
1835
|
-
:has(input[type=range]:disabled) .tl-slider__value-divider-label {
|
|
1835
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
|
|
1836
1836
|
color: var(--slider-disabled-text);
|
|
1837
1837
|
}
|
|
1838
1838
|
|
|
@@ -1845,7 +1845,7 @@ tds-button,
|
|
|
1845
1845
|
top: -1px;
|
|
1846
1846
|
z-index: 1;
|
|
1847
1847
|
}
|
|
1848
|
-
:has(input[type=range]:disabled) .tl-slider__track-fill {
|
|
1848
|
+
.tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
|
|
1849
1849
|
background-color: var(--slider-disabled);
|
|
1850
1850
|
}
|
|
1851
1851
|
|
package/dist/tl-table.css
CHANGED
|
@@ -84,7 +84,7 @@ tds-table {
|
|
|
84
84
|
--table-zebra-mode: var(--component-table-cell);
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
-
.
|
|
87
|
+
.tl-mode-dark .tl-table.tl-table--secondary {
|
|
88
88
|
--table-body-cell-hover: var(--color-background-surface-300);
|
|
89
89
|
--table-body-row-hover: var(--color-background-surface-300);
|
|
90
90
|
}
|
|
@@ -376,7 +376,8 @@
|
|
|
376
376
|
* Do not edit directly, this file was auto-generated.
|
|
377
377
|
*/
|
|
378
378
|
.traton,
|
|
379
|
-
.traton .tds-mode-light
|
|
379
|
+
.traton .tds-mode-light,
|
|
380
|
+
.traton .tl-mode-light {
|
|
380
381
|
--color-background-base: var(--traton-color-grey-50);
|
|
381
382
|
--color-background-accent-primary-default: var(--traton-color-blue-800);
|
|
382
383
|
--color-background-accent-primary-disabled: var(--traton-color-blue-100);
|
|
@@ -507,7 +508,8 @@
|
|
|
507
508
|
/**
|
|
508
509
|
* Do not edit directly, this file was auto-generated.
|
|
509
510
|
*/
|
|
510
|
-
.traton .tds-mode-dark
|
|
511
|
+
.traton .tds-mode-dark,
|
|
512
|
+
.traton .tl-mode-dark {
|
|
511
513
|
--color-background-base: var(--traton-color-blue-1000);
|
|
512
514
|
--color-background-accent-primary-default: var(--traton-color-grey-300);
|
|
513
515
|
--color-background-accent-primary-disabled: var(--traton-color-grey-900);
|