@digiko-npm/designsystem 0.9.27 → 0.9.29

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 +26 -22
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +1 -1
  4. package/src/components/button.css +2 -2
  5. package/src/components/combobox.css +8 -4
  6. package/src/components/command.css +1 -1
  7. package/src/components/custom-select.css +3 -3
  8. package/src/components/datepicker.css +1 -1
  9. package/src/components/drop-zone.css +3 -3
  10. package/src/components/dropdown.css +1 -1
  11. package/src/components/gallery.css +1 -1
  12. package/src/components/popover.css +1 -1
  13. package/src/components/search.css +3 -3
  14. package/src/tokens/colors.css +1 -1
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.26 */
1
+ /* @ds/designsystem v0.9.28 */
2
2
  /* ==========================================================================
3
3
  @digiko-npm/designsystem
4
4
 
@@ -106,7 +106,7 @@
106
106
  --ds-color-bg: #09090b;
107
107
  --ds-color-bg-subtle: #0f0f11;
108
108
  --ds-color-bg-muted: #18181b;
109
- --ds-color-bg-muted-hover: #27272a;
109
+ --ds-color-bg-muted-hover: #222225;
110
110
  --ds-color-bg-muted-active: #3f3f46;
111
111
  --ds-color-bg-elevated: #27272a;
112
112
  --ds-color-bg-elevated-hover: #3f3f46;
@@ -1536,7 +1536,7 @@ hr {
1536
1536
  .ds-custom-select__panel {
1537
1537
  position: fixed;
1538
1538
  z-index: var(--ds-z-dropdown);
1539
- background-color: var(--ds-color-bg-elevated);
1539
+ background-color: var(--ds-color-bg-muted);
1540
1540
  border: 1px solid var(--ds-color-border);
1541
1541
  border-radius: var(--ds-radius-xl);
1542
1542
  box-shadow: var(--ds-shadow-lg);
@@ -1625,7 +1625,7 @@ hr {
1625
1625
  }
1626
1626
 
1627
1627
  .ds-custom-select__option:hover {
1628
- background-color: var(--ds-color-bg-elevated);
1628
+ background-color: var(--ds-color-surface-hover);
1629
1629
  color: var(--ds-color-text);
1630
1630
  }
1631
1631
  .ds-custom-select__option:focus-visible {
@@ -1779,7 +1779,7 @@ hr {
1779
1779
  font-family: var(--ds-font-sans);
1780
1780
  line-height: var(--ds-leading-none);
1781
1781
  border-radius: var(--ds-radius-full);
1782
- background-color: var(--ds-color-bg-elevated);
1782
+ background-color: var(--ds-color-bg-muted);
1783
1783
  border: 1px solid var(--ds-color-border);
1784
1784
  color: var(--ds-color-text-secondary);
1785
1785
  white-space: nowrap;
@@ -2012,7 +2012,7 @@ hr {
2012
2012
  max-height: 16rem;
2013
2013
  overflow-y: auto;
2014
2014
  overscroll-behavior: contain;
2015
- background-color: var(--ds-color-bg-elevated);
2015
+ background-color: var(--ds-color-bg-muted);
2016
2016
  border: 1px solid var(--ds-color-border);
2017
2017
  border-radius: var(--ds-radius-xl);
2018
2018
  box-shadow: var(--ds-shadow-lg);
@@ -2080,7 +2080,11 @@ hr {
2080
2080
  background-color var(--ds-duration-fast) var(--ds-ease-default);
2081
2081
  }
2082
2082
 
2083
- .ds-combobox__option:hover,
2083
+ .ds-combobox__option:hover {
2084
+ background-color: var(--ds-color-surface-hover);
2085
+ color: var(--ds-color-text);
2086
+ }
2087
+
2084
2088
  .ds-combobox__option--active {
2085
2089
  background-color: var(--ds-color-bg-elevated);
2086
2090
  color: var(--ds-color-text);
@@ -2136,7 +2140,7 @@ hr {
2136
2140
 
2137
2141
  .ds-combobox__create:hover,
2138
2142
  .ds-combobox__create:focus-visible {
2139
- background-color: var(--ds-color-bg-elevated);
2143
+ background-color: var(--ds-color-surface-hover);
2140
2144
  }
2141
2145
 
2142
2146
  /* --- Empty state --- */
@@ -2182,7 +2186,7 @@ hr {
2182
2186
  font-family: var(--ds-font-sans);
2183
2187
  line-height: var(--ds-leading-none);
2184
2188
  border-radius: var(--ds-radius-full);
2185
- background-color: var(--ds-color-bg-elevated);
2189
+ background-color: var(--ds-color-bg-muted);
2186
2190
  border: 1px solid var(--ds-color-border);
2187
2191
  color: var(--ds-color-text-secondary);
2188
2192
  white-space: nowrap;
@@ -2689,7 +2693,7 @@ hr {
2689
2693
  z-index: var(--ds-z-dropdown);
2690
2694
  inset-block-start: calc(100% + var(--ds-offset-sm));
2691
2695
  inset-inline-start: 0;
2692
- background-color: var(--ds-color-bg-elevated);
2696
+ background-color: var(--ds-color-bg-muted);
2693
2697
  border: 1px solid var(--ds-color-border);
2694
2698
  border-radius: var(--ds-radius-xl);
2695
2699
  box-shadow: var(--ds-shadow-lg);
@@ -3301,7 +3305,7 @@ hr {
3301
3305
  }
3302
3306
  .ds-drop-zone:hover {
3303
3307
 
3304
- background-color: var(--ds-color-bg-elevated);
3308
+ background-color: var(--ds-color-surface-hover);
3305
3309
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%233f3f46' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
3306
3310
  }
3307
3311
  .ds-drop-zone__icon {
@@ -3312,7 +3316,7 @@ hr {
3312
3316
  width: 3rem;
3313
3317
  height: 3rem;
3314
3318
  border-radius: var(--ds-radius-xl);
3315
- background-color: var(--ds-color-bg-elevated);
3319
+ background-color: var(--ds-color-bg-muted);
3316
3320
  color: var(--ds-color-text-secondary);
3317
3321
  transition: color var(--ds-duration-fast) var(--ds-ease-default);
3318
3322
  }
@@ -3334,7 +3338,7 @@ hr {
3334
3338
  }
3335
3339
  .ds-drop-zone--active {
3336
3340
 
3337
- background-color: var(--ds-color-bg-elevated);
3341
+ background-color: var(--ds-color-surface-hover);
3338
3342
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='1' y='1' width='99%25' height='99%25' rx='16' ry='16' fill='none' stroke='%2352525b' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E");
3339
3343
  }
3340
3344
  .ds-drop-zone--uploading {
@@ -7885,7 +7889,7 @@ hr {
7885
7889
  display: flex;
7886
7890
  flex-direction: column;
7887
7891
  padding-block: var(--ds-space-1-5);
7888
- background-color: var(--ds-color-bg-elevated);
7892
+ background-color: var(--ds-color-bg-muted);
7889
7893
  border: 1px solid var(--ds-color-border);
7890
7894
  border-radius: var(--ds-radius-xl);
7891
7895
  box-shadow: var(--ds-shadow-lg);
@@ -8087,7 +8091,7 @@ hr {
8087
8091
 
8088
8092
  position: absolute;
8089
8093
  z-index: var(--ds-z-dropdown);
8090
- background-color: var(--ds-color-bg-elevated);
8094
+ background-color: var(--ds-color-bg-muted);
8091
8095
  border: 1px solid var(--ds-color-border);
8092
8096
  border-radius: var(--ds-radius-xl);
8093
8097
  box-shadow: var(--ds-shadow-lg);
@@ -8455,7 +8459,7 @@ hr {
8455
8459
  }
8456
8460
  .ds-command__content {
8457
8461
 
8458
- background-color: var(--ds-color-bg-elevated);
8462
+ background-color: var(--ds-color-bg-muted);
8459
8463
  border: 1px solid var(--ds-color-border);
8460
8464
  border-radius: var(--ds-radius-xl);
8461
8465
  box-shadow: var(--ds-shadow-lg);
@@ -9411,7 +9415,7 @@ hr {
9411
9415
  height: 4rem;
9412
9416
  border: 1px solid var(--ds-color-border);
9413
9417
  border-radius: var(--ds-radius-md);
9414
- background-color: var(--ds-color-bg-elevated);
9418
+ background-color: var(--ds-color-bg-muted);
9415
9419
  color: var(--ds-color-text-secondary);
9416
9420
  font-size: var(--ds-text-sm);
9417
9421
  font-weight: var(--ds-weight-medium);
@@ -10299,7 +10303,7 @@ hr {
10299
10303
  }
10300
10304
  .ds-btn--secondary {
10301
10305
 
10302
- background-color: var(--ds-color-bg-elevated);
10306
+ background-color: var(--ds-color-bg-muted);
10303
10307
  color: var(--ds-color-text);
10304
10308
  border-color: var(--ds-color-border);
10305
10309
 
@@ -10308,7 +10312,7 @@ hr {
10308
10312
  .ds-btn--secondary:hover {
10309
10313
 
10310
10314
  border-color: var(--ds-color-border-hover);
10311
- background-color: var(--ds-color-surface);
10315
+ background-color: var(--ds-color-bg-muted-hover);
10312
10316
  opacity: 1;
10313
10317
  }
10314
10318
  .ds-btn--outline {
@@ -10929,7 +10933,7 @@ hr {
10929
10933
  font-family: inherit;
10930
10934
  line-height: 1;
10931
10935
  color: var(--ds-color-text-tertiary);
10932
- background: var(--ds-color-bg-elevated);
10936
+ background: var(--ds-color-bg-muted);
10933
10937
  border: 1px solid var(--ds-color-border);
10934
10938
  border-radius: var(--ds-radius-sm);
10935
10939
  pointer-events: none;
@@ -10966,7 +10970,7 @@ hr {
10966
10970
  position: fixed;
10967
10971
  max-height: min(22rem, calc(100dvh - 5rem));
10968
10972
  overflow-y: auto;
10969
- background: var(--ds-color-bg-elevated);
10973
+ background: var(--ds-color-bg-muted);
10970
10974
  border: 1px solid var(--ds-color-border);
10971
10975
  border-radius: var(--ds-radius-lg);
10972
10976
  box-shadow: var(--ds-shadow-lg);
@@ -11143,7 +11147,7 @@ hr {
11143
11147
  border-inline-start: none;
11144
11148
  border-inline-end: none;
11145
11149
  max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
11146
- background: var(--ds-color-bg-elevated);
11150
+ background: var(--ds-color-bg-muted);
11147
11151
  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
11148
11152
  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
11149
11153
  }