@digiko-npm/designsystem 0.9.17 → 0.9.19

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 (14) hide show
  1. package/dist/designsystem.css +30 -24
  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 +3 -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
  14. package/src/utilities/interactive.css +3 -3
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.16 */
1
+ /* @ds/designsystem v0.9.18 */
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);
@@ -9845,7 +9851,7 @@ hr {
9845
9851
  }
9846
9852
 
9847
9853
  .ds-admin__nav-item--active {
9848
- background-color: var(--ds-color-bg-elevated);
9854
+ background-color: var(--ds-color-surface-hover);
9849
9855
  color: var(--ds-color-text);
9850
9856
  }
9851
9857
 
@@ -9895,7 +9901,7 @@ hr {
9895
9901
  }
9896
9902
 
9897
9903
  .ds-admin__subnav-item--active {
9898
- background-color: var(--ds-color-bg-elevated);
9904
+ background-color: var(--ds-color-surface-hover);
9899
9905
  color: var(--ds-color-text);
9900
9906
  }
9901
9907
 
@@ -10322,7 +10328,7 @@ hr {
10322
10328
  .ds-btn--ghost:hover {
10323
10329
 
10324
10330
  color: var(--ds-color-text);
10325
- background-color: var(--ds-color-bg-elevated);
10331
+ background-color: var(--ds-color-overlay-hover);
10326
10332
  opacity: 1;
10327
10333
  }
10328
10334
  .ds-btn--danger {
@@ -12207,7 +12213,7 @@ tr:hover .ds-sortable__handle,
12207
12213
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
12208
12214
  }
12209
12215
  .ds-hover-row:hover {
12210
- background-color: var(--ds-color-bg-elevated);
12216
+ background-color: var(--ds-color-surface-hover);
12211
12217
  }
12212
12218
 
12213
12219
  /* Subtle variant (semi-transparent) */
@@ -12215,7 +12221,7 @@ tr:hover .ds-sortable__handle,
12215
12221
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
12216
12222
  }
12217
12223
  .ds-hover-row--subtle:hover {
12218
- background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
12224
+ background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
12219
12225
  }
12220
12226
 
12221
12227
  /* --- Group Reveal (children appear on parent hover) — .ds-group-reveal --- */
@@ -12281,7 +12287,7 @@ tr:hover .ds-sortable__handle,
12281
12287
 
12282
12288
  /* --- Semi-transparent Backgrounds --- */
12283
12289
  .ds-bg-elevated-50 {
12284
- background-color: color-mix(in srgb, var(--ds-color-bg-elevated) 50%, transparent);
12290
+ background-color: color-mix(in srgb, var(--ds-color-surface-hover) 50%, transparent);
12285
12291
  }
12286
12292
 
12287
12293
  .ds-bg-base-50 {