@scania/tegel-lite 0.1.0-test-variant-beta.1 → 0.1.0-test-variant-beta.3

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 (6) hide show
  1. package/dist/components.css +19 -7
  2. package/dist/tl-button.css +3 -2
  3. package/dist/tl-datetime.css +7 -4
  4. package/dist/tl-slider.css +11 -2
  5. package/dist/tl-toggle.css +1 -1
  6. 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;
@@ -6850,6 +6858,10 @@ tds-footer {
6850
6858
  padding: 12px;
6851
6859
  text-align: center;
6852
6860
  appearance: textfield;
6861
+ border: none;
6862
+ background-color: var(--slider-input-background);
6863
+ border-radius: var(--slider-border-radius);
6864
+ box-shadow: inset var(--slider-input-box-shadow);
6853
6865
  }
6854
6866
  .tl-slider__input-wrapper .tl-slider__input-field--decimal {
6855
6867
  width: 56px;
@@ -9770,7 +9782,7 @@ tds-table {
9770
9782
  color: var(--toggle-text);
9771
9783
  margin-bottom: 12px;
9772
9784
  }
9773
- :has(input[type=checkbox]:disabled) .tl-toggle__headline {
9785
+ .tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
9774
9786
  color: var(--toggle-disabled);
9775
9787
  user-select: none;
9776
9788
  cursor: not-allowed;
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;
@@ -1668,6 +1673,10 @@ tds-button,
1668
1673
  padding: 12px;
1669
1674
  text-align: center;
1670
1675
  appearance: textfield;
1676
+ border: none;
1677
+ background-color: var(--slider-input-background);
1678
+ border-radius: var(--slider-border-radius);
1679
+ box-shadow: inset var(--slider-input-box-shadow);
1671
1680
  }
1672
1681
  .tl-slider__input-wrapper .tl-slider__input-field--decimal {
1673
1682
  width: 56px;
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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-test-variant-beta.1",
3
+ "version": "0.1.0-test-variant-beta.3",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [