@digiko-npm/designsystem 0.9.18 → 0.9.20

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/dist/designsystem.css +28 -21
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/components/accordion.css +1 -1
  5. package/src/components/admin-layout.css +4 -3
  6. package/src/components/button.css +1 -1
  7. package/src/components/collapsible.css +1 -1
  8. package/src/components/command.css +1 -1
  9. package/src/components/datepicker.css +4 -4
  10. package/src/components/dropdown.css +2 -2
  11. package/src/components/nav.css +1 -1
  12. package/src/components/pagination.css +2 -2
  13. package/src/tokens/colors.css +10 -4
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.17 */
1
+ /* @ds/designsystem v0.9.19 */
2
2
  /* ==========================================================================
3
3
  @digiko-npm/designsystem
4
4
 
@@ -37,7 +37,10 @@
37
37
  --ds-color-bg: #fafafa;
38
38
  --ds-color-bg-subtle: #ffffff;
39
39
  --ds-color-bg-muted: #e4e4e7;
40
+ --ds-color-bg-muted-hover: #d4d4d8;
41
+ --ds-color-bg-muted-active: #a1a1aa;
40
42
  --ds-color-bg-elevated: #f4f4f5;
43
+ --ds-color-bg-elevated-hover: #e4e4e7;
41
44
 
42
45
  --ds-color-surface: #ffffff;
43
46
  --ds-color-surface-hover: #fafafa;
@@ -74,8 +77,8 @@
74
77
  /* --- Overlays --- */
75
78
  --ds-color-overlay: rgba(0, 0, 0, 0.5);
76
79
  --ds-color-overlay-subtle: rgba(0, 0, 0, 0.02);
77
- --ds-color-overlay-hover: rgba(0, 0, 0, 0.04);
78
- --ds-color-overlay-active: rgba(0, 0, 0, 0.08);
80
+ --ds-color-overlay-hover: rgba(0, 0, 0, 0.08);
81
+ --ds-color-overlay-active: rgba(0, 0, 0, 0.12);
79
82
 
80
83
  /* --- Navigation (glass effect) --- */
81
84
  --ds-color-nav-bg: rgba(250, 250, 250, 0.8);
@@ -103,7 +106,10 @@
103
106
  --ds-color-bg: #09090b;
104
107
  --ds-color-bg-subtle: #0f0f11;
105
108
  --ds-color-bg-muted: #18181b;
109
+ --ds-color-bg-muted-hover: #27272a;
110
+ --ds-color-bg-muted-active: #3f3f46;
106
111
  --ds-color-bg-elevated: #27272a;
112
+ --ds-color-bg-elevated-hover: #3f3f46;
107
113
 
108
114
  --ds-color-surface: #0f0f11;
109
115
  --ds-color-surface-hover: #18181b;
@@ -140,8 +146,8 @@
140
146
  /* --- Overlays --- */
141
147
  --ds-color-overlay: rgba(0, 0, 0, 0.7);
142
148
  --ds-color-overlay-subtle: rgba(255, 255, 255, 0.03);
143
- --ds-color-overlay-hover: rgba(255, 255, 255, 0.06);
144
- --ds-color-overlay-active: rgba(255, 255, 255, 0.1);
149
+ --ds-color-overlay-hover: rgba(255, 255, 255, 0.1);
150
+ --ds-color-overlay-active: rgba(255, 255, 255, 0.15);
145
151
 
146
152
  /* --- Navigation --- */
147
153
  --ds-color-nav-bg: rgba(9, 9, 11, 0.8);
@@ -2738,7 +2744,7 @@ hr {
2738
2744
  }
2739
2745
  .ds-datepicker__nav:hover {
2740
2746
 
2741
- background-color: var(--ds-color-bg-elevated);
2747
+ background-color: var(--ds-color-overlay-hover);
2742
2748
  color: var(--ds-color-text);
2743
2749
  }
2744
2750
  .ds-datepicker__nav:focus-visible {
@@ -2799,7 +2805,7 @@ hr {
2799
2805
  }
2800
2806
  .ds-datepicker__day:hover {
2801
2807
 
2802
- background-color: var(--ds-color-bg-elevated);
2808
+ background-color: var(--ds-color-overlay-hover);
2803
2809
  }
2804
2810
  .ds-datepicker__day:focus-visible {
2805
2811
 
@@ -2855,7 +2861,7 @@ hr {
2855
2861
  }
2856
2862
  .ds-datepicker__today:hover {
2857
2863
 
2858
- background-color: var(--ds-color-bg-elevated);
2864
+ background-color: var(--ds-color-overlay-hover);
2859
2865
  color: var(--ds-color-text);
2860
2866
  border-color: var(--ds-color-border-hover);
2861
2867
  }
@@ -2887,7 +2893,7 @@ hr {
2887
2893
  }
2888
2894
  .ds-datepicker__step:hover {
2889
2895
 
2890
- background-color: var(--ds-color-bg-elevated);
2896
+ background-color: var(--ds-color-overlay-hover);
2891
2897
  color: var(--ds-color-text);
2892
2898
  }
2893
2899
  .ds-datepicker__step:focus-visible {
@@ -5555,7 +5561,7 @@ hr {
5555
5561
  .ds-sidebar__link--active:hover {
5556
5562
 
5557
5563
  color: var(--ds-color-text);
5558
- background-color: var(--ds-color-bg-elevated);
5564
+ background-color: var(--ds-color-surface-hover);
5559
5565
  }
5560
5566
 
5561
5567
 
@@ -6049,7 +6055,7 @@ hr {
6049
6055
  }
6050
6056
  .ds-pagination__item:hover {
6051
6057
 
6052
- background-color: var(--ds-color-bg-muted);
6058
+ background-color: var(--ds-color-overlay-hover);
6053
6059
  color: var(--ds-color-text);
6054
6060
  }
6055
6061
  .ds-pagination__item:focus-visible {
@@ -6102,7 +6108,7 @@ hr {
6102
6108
  .ds-pagination__prev:hover,
6103
6109
  .ds-pagination__next:hover {
6104
6110
 
6105
- background-color: var(--ds-color-bg-muted);
6111
+ background-color: var(--ds-color-overlay-hover);
6106
6112
  color: var(--ds-color-text);
6107
6113
  }
6108
6114
  .ds-pagination__prev:focus-visible,
@@ -7964,7 +7970,7 @@ hr {
7964
7970
  }
7965
7971
  .ds-dropdown__item:hover {
7966
7972
 
7967
- background-color: var(--ds-color-bg-elevated);
7973
+ background-color: var(--ds-color-overlay-hover);
7968
7974
  color: var(--ds-color-text);
7969
7975
  }
7970
7976
  .ds-dropdown__item:focus-visible {
@@ -7975,7 +7981,7 @@ hr {
7975
7981
  }
7976
7982
  .ds-dropdown__item--active {
7977
7983
 
7978
- background-color: var(--ds-color-bg-elevated);
7984
+ background-color: var(--ds-color-overlay-active);
7979
7985
  color: var(--ds-color-text);
7980
7986
  }
7981
7987
  .ds-dropdown__item--danger:hover {
@@ -8527,7 +8533,7 @@ hr {
8527
8533
  .ds-command__item:hover,
8528
8534
  .ds-command__item--active {
8529
8535
 
8530
- background-color: var(--ds-color-bg-elevated);
8536
+ background-color: var(--ds-color-overlay-hover);
8531
8537
  color: var(--ds-color-text);
8532
8538
 
8533
8539
 
@@ -8957,7 +8963,7 @@ hr {
8957
8963
  }
8958
8964
  .ds-accordion__trigger:hover {
8959
8965
 
8960
- background-color: var(--ds-color-overlay);
8966
+ background-color: var(--ds-color-overlay-hover);
8961
8967
  }
8962
8968
  .ds-accordion__trigger:focus-visible {
8963
8969
 
@@ -9102,7 +9108,7 @@ hr {
9102
9108
  }
9103
9109
  .ds-collapsible__trigger:hover {
9104
9110
 
9105
- background-color: var(--ds-color-overlay);
9111
+ background-color: var(--ds-color-overlay-hover);
9106
9112
  }
9107
9113
  .ds-collapsible__trigger:focus-visible {
9108
9114
 
@@ -9808,7 +9814,7 @@ hr {
9808
9814
  .ds-admin__sidebar-badge {
9809
9815
  border-radius: var(--ds-radius-md);
9810
9816
  border: 1px solid var(--ds-color-border);
9811
- background-color: var(--ds-color-bg-elevated);
9817
+ background-color: var(--ds-color-bg-muted);
9812
9818
  padding: var(--ds-space-0-5) var(--ds-space-1-5);
9813
9819
  font-size: var(--ds-text-xs);
9814
9820
  font-weight: var(--ds-weight-medium);
@@ -9844,7 +9850,8 @@ hr {
9844
9850
  color: var(--ds-color-text);
9845
9851
  }
9846
9852
 
9847
- .ds-admin__nav-item--active {
9853
+ .ds-admin__nav-item--active,
9854
+ .ds-admin__nav-item--active:hover {
9848
9855
  background-color: var(--ds-color-bg-elevated);
9849
9856
  color: var(--ds-color-text);
9850
9857
  }
@@ -9895,7 +9902,7 @@ hr {
9895
9902
  }
9896
9903
 
9897
9904
  .ds-admin__subnav-item--active {
9898
- background-color: var(--ds-color-bg-elevated);
9905
+ background-color: var(--ds-color-surface-hover);
9899
9906
  color: var(--ds-color-text);
9900
9907
  }
9901
9908
 
@@ -10322,7 +10329,7 @@ hr {
10322
10329
  .ds-btn--ghost:hover {
10323
10330
 
10324
10331
  color: var(--ds-color-text);
10325
- background-color: var(--ds-color-bg-elevated);
10332
+ background-color: var(--ds-color-overlay-hover);
10326
10333
  opacity: 1;
10327
10334
  }
10328
10335
  .ds-btn--danger {