@scania/tegel-lite 0.1.0-test-variant-beta.0 → 0.1.0-test-variant-beta.2

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 (8) hide show
  1. package/dist/components.css +21 -7
  2. package/dist/scania-variables.css +6 -2
  3. package/dist/tl-button.css +3 -2
  4. package/dist/tl-datetime.css +7 -4
  5. package/dist/tl-slider.css +13 -2
  6. package/dist/tl-toggle.css +1 -1
  7. package/dist/traton-variables.css +4 -2
  8. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -624,17 +624,18 @@ tds-badge {
624
624
  */
625
625
  .tl-button,
626
626
  tds-button,
627
+ .tl-mode-light .tl-button,
627
628
  .tds-mode-light tds-button {
628
629
  --component-button-primary-text: var(--color-brand-neutral-white);
629
630
  }
630
631
 
631
632
  .scania .tds-mode-dark tds-button,
632
- .scania .tds-mode-dark .tl-button {
633
+ .scania .tl-mode-dark .tl-button {
633
634
  --component-button-primary-text: var(--color-brand-neutral-white);
634
635
  }
635
636
 
636
637
  .tds-mode-dark tds-button,
637
- .tds-mode-dark .tl-button {
638
+ .tl-mode-dark .tl-button {
638
639
  --component-button-primary-text: var(--color-brand-neutral-black);
639
640
  }
640
641
 
@@ -1719,9 +1720,9 @@ tds-card {
1719
1720
  background-color: var(--datetime-icon-error);
1720
1721
  }
1721
1722
  .tl-datetime__wrapper {
1722
- /* Disabled state (should not override error state) */
1723
+ /* Disabled state */
1723
1724
  }
1724
- .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
1725
+ .tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
1725
1726
  background-color: var(--datetime-icon-disabled);
1726
1727
  }
1727
1728
 
@@ -1754,7 +1755,7 @@ tds-card {
1754
1755
  .tl-datetime__input:focus {
1755
1756
  box-shadow: inset var(--datetime-box-shadow-focus);
1756
1757
  }
1757
- .tl-datetime:hover .tl-datetime__input:not(:focus) {
1758
+ .tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
1758
1759
  box-shadow: inset var(--datetime-box-shadow-hover);
1759
1760
  }
1760
1761
  .tl-datetime--error .tl-datetime__input {
@@ -1763,9 +1764,12 @@ tds-card {
1763
1764
  .tl-datetime--error .tl-datetime__input:focus {
1764
1765
  box-shadow: inset var(--datetime-box-shadow-error-focus);
1765
1766
  }
1766
- .tl-datetime--error:hover .tl-datetime__input:not(:focus) {
1767
+ .tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
1767
1768
  box-shadow: inset var(--datetime-box-shadow-error-hover);
1768
1769
  }
1770
+ .tl-datetime--error .tl-datetime__input:disabled {
1771
+ box-shadow: inset var(--datetime-box-shadow-error);
1772
+ }
1769
1773
  .tl-datetime__input::placeholder {
1770
1774
  opacity: 1;
1771
1775
  color: var(--datetime-placeholder);
@@ -6691,6 +6695,8 @@ tds-footer {
6691
6695
  --slider-disabled-text: var(--color-foreground-text-disabled);
6692
6696
  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
6693
6697
  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
6698
+ --slider-input-background: var(--color-background-layer-01);
6699
+ --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
6694
6700
  }
6695
6701
 
6696
6702
  .tl-slider,
@@ -6700,6 +6706,7 @@ tds-footer {
6700
6706
 
6701
6707
  .traton .tl-slider {
6702
6708
  --slider-border-radius: 4px;
6709
+ --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
6703
6710
  }
6704
6711
 
6705
6712
  .tl-slider {
@@ -6836,6 +6843,7 @@ tds-footer {
6836
6843
  min-width: auto;
6837
6844
  margin-left: 0;
6838
6845
  align-self: center;
6846
+ border-radius: var(--slider-border-radius);
6839
6847
  }
6840
6848
  .tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
6841
6849
  width: 16px;
@@ -6845,6 +6853,12 @@ tds-footer {
6845
6853
  transform: translateY(-50%);
6846
6854
  }
6847
6855
 
6856
+ .tl-slider__input-wrapper .tl-slider__input-field {
6857
+ background-color: var(--slider-input-background);
6858
+ border-radius: var(--slider-border-radius);
6859
+ box-shadow: inset var(--slider-input-box-shadow);
6860
+ }
6861
+
6848
6862
  .tl-slider__input-wrapper .tl-slider__input-field {
6849
6863
  width: var(--slider-input-width, 56px);
6850
6864
  padding: 12px;
@@ -9770,7 +9784,7 @@ tds-table {
9770
9784
  color: var(--toggle-text);
9771
9785
  margin-bottom: 12px;
9772
9786
  }
9773
- :has(input[type=checkbox]:disabled) .tl-toggle__headline {
9787
+ .tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
9774
9788
  color: var(--toggle-disabled);
9775
9789
  user-select: none;
9776
9790
  cursor: not-allowed;
package/dist/scania-variables.css CHANGED
@@ -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-button.css CHANGED
@@ -3,17 +3,18 @@
3
3
  */
4
4
  .tl-button,
5
5
  tds-button,
6
+ .tl-mode-light .tl-button,
6
7
  .tds-mode-light tds-button {
7
8
  --component-button-primary-text: var(--color-brand-neutral-white);
8
9
  }
9
10
 
10
11
  .scania .tds-mode-dark tds-button,
11
- .scania .tds-mode-dark .tl-button {
12
+ .scania .tl-mode-dark .tl-button {
12
13
  --component-button-primary-text: var(--color-brand-neutral-white);
13
14
  }
14
15
 
15
16
  .tds-mode-dark tds-button,
16
- .tds-mode-dark .tl-button {
17
+ .tl-mode-dark .tl-button {
17
18
  --component-button-primary-text: var(--color-brand-neutral-black);
18
19
  }
19
20
 
package/dist/tl-datetime.css CHANGED
@@ -213,9 +213,9 @@
213
213
  background-color: var(--datetime-icon-error);
214
214
  }
215
215
  .tl-datetime__wrapper {
216
- /* Disabled state (should not override error state) */
216
+ /* Disabled state */
217
217
  }
218
- .tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__wrapper::after {
218
+ .tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
219
219
  background-color: var(--datetime-icon-disabled);
220
220
  }
221
221
 
@@ -248,7 +248,7 @@
248
248
  .tl-datetime__input:focus {
249
249
  box-shadow: inset var(--datetime-box-shadow-focus);
250
250
  }
251
- .tl-datetime:hover .tl-datetime__input:not(:focus) {
251
+ .tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
252
252
  box-shadow: inset var(--datetime-box-shadow-hover);
253
253
  }
254
254
  .tl-datetime--error .tl-datetime__input {
@@ -257,9 +257,12 @@
257
257
  .tl-datetime--error .tl-datetime__input:focus {
258
258
  box-shadow: inset var(--datetime-box-shadow-error-focus);
259
259
  }
260
- .tl-datetime--error:hover .tl-datetime__input:not(:focus) {
260
+ .tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
261
261
  box-shadow: inset var(--datetime-box-shadow-error-hover);
262
262
  }
263
+ .tl-datetime--error .tl-datetime__input:disabled {
264
+ box-shadow: inset var(--datetime-box-shadow-error);
265
+ }
263
266
  .tl-datetime__input::placeholder {
264
267
  opacity: 1;
265
268
  color: var(--datetime-placeholder);
package/dist/tl-slider.css CHANGED
@@ -12,6 +12,8 @@
12
12
  --slider-disabled-text: var(--color-foreground-text-disabled);
13
13
  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
14
14
  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
15
+ --slider-input-background: var(--color-background-layer-01);
16
+ --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
15
17
  }
16
18
 
17
19
  .tl-slider,
@@ -21,6 +23,7 @@
21
23
 
22
24
  .traton .tl-slider {
23
25
  --slider-border-radius: 4px;
26
+ --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
24
27
  }
25
28
 
26
29
  /**
@@ -28,17 +31,18 @@
28
31
  */
29
32
  .tl-button,
30
33
  tds-button,
34
+ .tl-mode-light .tl-button,
31
35
  .tds-mode-light tds-button {
32
36
  --component-button-primary-text: var(--color-brand-neutral-white);
33
37
  }
34
38
 
35
39
  .scania .tds-mode-dark tds-button,
36
- .scania .tds-mode-dark .tl-button {
40
+ .scania .tl-mode-dark .tl-button {
37
41
  --component-button-primary-text: var(--color-brand-neutral-white);
38
42
  }
39
43
 
40
44
  .tds-mode-dark tds-button,
41
- .tds-mode-dark .tl-button {
45
+ .tl-mode-dark .tl-button {
42
46
  --component-button-primary-text: var(--color-brand-neutral-black);
43
47
  }
44
48
 
@@ -1654,6 +1658,7 @@ tds-button,
1654
1658
  min-width: auto;
1655
1659
  margin-left: 0;
1656
1660
  align-self: center;
1661
+ border-radius: var(--slider-border-radius);
1657
1662
  }
1658
1663
  .tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
1659
1664
  width: 16px;
@@ -1663,6 +1668,12 @@ tds-button,
1663
1668
  transform: translateY(-50%);
1664
1669
  }
1665
1670
 
1671
+ .tl-slider__input-wrapper .tl-slider__input-field {
1672
+ background-color: var(--slider-input-background);
1673
+ border-radius: var(--slider-border-radius);
1674
+ box-shadow: inset var(--slider-input-box-shadow);
1675
+ }
1676
+
1666
1677
  .tl-slider__input-wrapper .tl-slider__input-field {
1667
1678
  width: var(--slider-input-width, 56px);
1668
1679
  padding: 12px;
package/dist/tl-toggle.css CHANGED
@@ -118,7 +118,7 @@
118
118
  color: var(--toggle-text);
119
119
  margin-bottom: 12px;
120
120
  }
121
- :has(input[type=checkbox]:disabled) .tl-toggle__headline {
121
+ .tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
122
122
  color: var(--toggle-disabled);
123
123
  user-select: none;
124
124
  cursor: not-allowed;
package/dist/traton-variables.css CHANGED
@@ -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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-test-variant-beta.0",
3
+ "version": "0.1.0-test-variant-beta.2",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [