@scania/tegel-lite 0.1.0-side-menu-beta.4 → 0.1.0-side-menu-beta.5

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 (4) hide show
  1. package/dist/components.css +6 -9
  2. package/dist/global.css +6 -6
  3. package/dist/tl-side-menu.css +6 -9
  4. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -6607,6 +6607,7 @@ body {
6607
6607
  --side-menu-item-horizontal-padding: var(--unit-22);
6608
6608
  --side-menu-item-height: var(--unit-68);
6609
6609
  --side-menu-item-icon-size: var(--unit-24);
6610
+ --side-menu-item-horizontal-gap: var(--unit-10);
6610
6611
  --side-menu-sub-item-height: var(--unit-48);
6611
6612
  --side-menu-sub-item-padding-icon: var(--unit-16) var(--unit-48) var(--unit-16) var(--unit-58);
6612
6613
  --side-menu-sub-items-gap: 0px;
@@ -6660,7 +6661,7 @@ body {
6660
6661
  width: 100%;
6661
6662
  display: flex;
6662
6663
  align-items: center;
6663
- gap: 10px;
6664
+ gap: var(--side-menu-item-horizontal-gap);
6664
6665
  padding: 0 var(--side-menu-item-horizontal-padding);
6665
6666
  border: none;
6666
6667
  background-color: var(--side-menu-item-background);
@@ -6767,10 +6768,10 @@ body {
6767
6768
  text-transform: var(--body-02-text-transform);
6768
6769
  box-sizing: border-box;
6769
6770
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
6770
- display: inline-block;
6771
+ display: flex;
6771
6772
  align-items: center;
6773
+ gap: var(--side-menu-item-horizontal-gap);
6772
6774
  height: var(--side-menu-sub-item-height);
6773
- line-height: calc(var(--type-body-02-font-size) * 1px);
6774
6775
  width: 100%;
6775
6776
  background-color: var(--side-menu-item-background);
6776
6777
  color: var(--side-menu-item-text-color);
@@ -6778,9 +6779,6 @@ body {
6778
6779
  border-radius: var(--side-menu-item-border-radius);
6779
6780
  position: relative;
6780
6781
  cursor: pointer;
6781
- text-overflow: ellipsis;
6782
- white-space: nowrap;
6783
- overflow: hidden;
6784
6782
  }
6785
6783
  .tl-side-menu__dropdown-item:hover {
6786
6784
  background-color: var(--side-menu-item-background-hover);
@@ -7078,6 +7076,7 @@ body {
7078
7076
  min-height: 48px;
7079
7077
  display: flex;
7080
7078
  align-items: center;
7079
+ gap: var(--side-menu-sub-items-gap);
7081
7080
  font-family: var(--type-system-title-01-font-family);
7082
7081
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
7083
7082
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -7113,9 +7112,7 @@ body {
7113
7112
  padding: var(--side-menu-sub-items-gap);
7114
7113
  border-radius: var(--side-menu-item-border-radius);
7115
7114
  display: none;
7116
- min-width: 190px;
7117
- width: max-content;
7118
- max-width: 300px;
7115
+ width: 210px;
7119
7116
  flex-direction: column;
7120
7117
  }
7121
7118
  .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar {
package/dist/global.css CHANGED
@@ -1472,31 +1472,31 @@ h6 {
1472
1472
 
1473
1473
  :root,
1474
1474
  .tl-mode-light {
1475
- color: var(--color-foreground-text-strong);
1475
+ color: var(--color-text-strong);
1476
1476
  background-color: var(--color-background-base);
1477
1477
  }
1478
1478
  :root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
1479
1479
  .tl-mode-light.tl-mode-variant-primary,
1480
1480
  .tl-mode-light .tl-mode-variant-primary {
1481
- color: var(--color-foreground-text-strong);
1481
+ color: var(--color-text-strong);
1482
1482
  background-color: var(--color-background-base);
1483
1483
  }
1484
1484
  :root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
1485
1485
  .tl-mode-light.tl-mode-variant-secondary,
1486
1486
  .tl-mode-light .tl-mode-variant-secondary {
1487
- color: var(--color-foreground-text-strong);
1487
+ color: var(--color-text-strong);
1488
1488
  background-color: var(--color-background-layer-01);
1489
1489
  }
1490
1490
 
1491
1491
  .tl-mode-dark {
1492
- color: var(--color-foreground-text-strong);
1492
+ color: var(--color-text-strong);
1493
1493
  background-color: var(--color-background-base);
1494
1494
  }
1495
1495
  .tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
1496
- color: var(--color-foreground-text-strong);
1496
+ color: var(--color-text-strong);
1497
1497
  background-color: var(--color-background-base);
1498
1498
  }
1499
1499
  .tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
1500
- color: var(--color-foreground-text-strong);
1500
+ color: var(--color-text-strong);
1501
1501
  background-color: var(--color-background-layer-01);
1502
1502
  }
package/dist/tl-side-menu.css CHANGED
@@ -138,6 +138,7 @@ body {
138
138
  --side-menu-item-horizontal-padding: var(--unit-22);
139
139
  --side-menu-item-height: var(--unit-68);
140
140
  --side-menu-item-icon-size: var(--unit-24);
141
+ --side-menu-item-horizontal-gap: var(--unit-10);
141
142
  --side-menu-sub-item-height: var(--unit-48);
142
143
  --side-menu-sub-item-padding-icon: var(--unit-16) var(--unit-48) var(--unit-16) var(--unit-58);
143
144
  --side-menu-sub-items-gap: 0px;
@@ -192,7 +193,7 @@ body {
192
193
  width: 100%;
193
194
  display: flex;
194
195
  align-items: center;
195
- gap: 10px;
196
+ gap: var(--side-menu-item-horizontal-gap);
196
197
  padding: 0 var(--side-menu-item-horizontal-padding);
197
198
  border: none;
198
199
  background-color: var(--side-menu-item-background);
@@ -299,10 +300,10 @@ body {
299
300
  text-transform: var(--body-02-text-transform);
300
301
  box-sizing: border-box;
301
302
  border-right: var(--side-menu-item-border-thickness) solid var(--side-menu-item-border-bottom-color);
302
- display: inline-block;
303
+ display: flex;
303
304
  align-items: center;
305
+ gap: var(--side-menu-item-horizontal-gap);
304
306
  height: var(--side-menu-sub-item-height);
305
- line-height: calc(var(--type-body-02-font-size) * 1px);
306
307
  width: 100%;
307
308
  background-color: var(--side-menu-item-background);
308
309
  color: var(--side-menu-item-text-color);
@@ -310,9 +311,6 @@ body {
310
311
  border-radius: var(--side-menu-item-border-radius);
311
312
  position: relative;
312
313
  cursor: pointer;
313
- text-overflow: ellipsis;
314
- white-space: nowrap;
315
- overflow: hidden;
316
314
  }
317
315
  .tl-side-menu__dropdown-item:hover {
318
316
  background-color: var(--side-menu-item-background-hover);
@@ -610,6 +608,7 @@ body {
610
608
  min-height: 48px;
611
609
  display: flex;
612
610
  align-items: center;
611
+ gap: var(--side-menu-sub-items-gap);
613
612
  font-family: var(--type-system-title-01-font-family);
614
613
  font-size: calc(var(--type-system-title-01-font-size) * 1px);
615
614
  line-height: calc(var(--type-system-title-01-line-height) * 1px);
@@ -645,9 +644,7 @@ body {
645
644
  padding: var(--side-menu-sub-items-gap);
646
645
  border-radius: var(--side-menu-item-border-radius);
647
646
  display: none;
648
- min-width: 190px;
649
- width: max-content;
650
- max-width: 300px;
647
+ width: 210px;
651
648
  flex-direction: column;
652
649
  }
653
650
  .tl-side-menu--collapsed .tl-side-menu__dropdown-menu::-webkit-scrollbar {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@scania/tegel-lite",
3
- "version": "0.1.0-side-menu-beta.4",
3
+ "version": "0.1.0-side-menu-beta.5",
4
4
  "description": "Styles-only library for Tegel Design System (Beta)",
5
5
  "type": "module",
6
6
  "keywords": [