@digiko-npm/designsystem 0.9.26 → 0.9.28

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 -21
  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/components/tabs.css +1 -0
package/dist/designsystem.css CHANGED
@@ -1,4 +1,4 @@
1
- /* @ds/designsystem v0.9.25 */
1
+ /* @ds/designsystem v0.9.27 */
2
2
  /* ==========================================================================
3
3
  @digiko-npm/designsystem
4
4
 
@@ -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 {
@@ -5769,6 +5773,7 @@ hr {
5769
5773
  .ds-tabs--pills-flat {
5770
5774
 
5771
5775
  border-block-end: none;
5776
+ align-items: center;
5772
5777
  gap: var(--ds-space-1);
5773
5778
  background: none;
5774
5779
  padding: 0;
@@ -7884,7 +7889,7 @@ hr {
7884
7889
  display: flex;
7885
7890
  flex-direction: column;
7886
7891
  padding-block: var(--ds-space-1-5);
7887
- background-color: var(--ds-color-bg-elevated);
7892
+ background-color: var(--ds-color-bg-muted);
7888
7893
  border: 1px solid var(--ds-color-border);
7889
7894
  border-radius: var(--ds-radius-xl);
7890
7895
  box-shadow: var(--ds-shadow-lg);
@@ -8086,7 +8091,7 @@ hr {
8086
8091
 
8087
8092
  position: absolute;
8088
8093
  z-index: var(--ds-z-dropdown);
8089
- background-color: var(--ds-color-bg-elevated);
8094
+ background-color: var(--ds-color-bg-muted);
8090
8095
  border: 1px solid var(--ds-color-border);
8091
8096
  border-radius: var(--ds-radius-xl);
8092
8097
  box-shadow: var(--ds-shadow-lg);
@@ -8454,7 +8459,7 @@ hr {
8454
8459
  }
8455
8460
  .ds-command__content {
8456
8461
 
8457
- background-color: var(--ds-color-bg-elevated);
8462
+ background-color: var(--ds-color-bg-muted);
8458
8463
  border: 1px solid var(--ds-color-border);
8459
8464
  border-radius: var(--ds-radius-xl);
8460
8465
  box-shadow: var(--ds-shadow-lg);
@@ -9410,7 +9415,7 @@ hr {
9410
9415
  height: 4rem;
9411
9416
  border: 1px solid var(--ds-color-border);
9412
9417
  border-radius: var(--ds-radius-md);
9413
- background-color: var(--ds-color-bg-elevated);
9418
+ background-color: var(--ds-color-bg-muted);
9414
9419
  color: var(--ds-color-text-secondary);
9415
9420
  font-size: var(--ds-text-sm);
9416
9421
  font-weight: var(--ds-weight-medium);
@@ -10298,7 +10303,7 @@ hr {
10298
10303
  }
10299
10304
  .ds-btn--secondary {
10300
10305
 
10301
- background-color: var(--ds-color-bg-elevated);
10306
+ background-color: var(--ds-color-bg-muted);
10302
10307
  color: var(--ds-color-text);
10303
10308
  border-color: var(--ds-color-border);
10304
10309
 
@@ -10307,7 +10312,7 @@ hr {
10307
10312
  .ds-btn--secondary:hover {
10308
10313
 
10309
10314
  border-color: var(--ds-color-border-hover);
10310
- background-color: var(--ds-color-surface);
10315
+ background-color: var(--ds-color-bg-muted-hover);
10311
10316
  opacity: 1;
10312
10317
  }
10313
10318
  .ds-btn--outline {
@@ -10928,7 +10933,7 @@ hr {
10928
10933
  font-family: inherit;
10929
10934
  line-height: 1;
10930
10935
  color: var(--ds-color-text-tertiary);
10931
- background: var(--ds-color-bg-elevated);
10936
+ background: var(--ds-color-bg-muted);
10932
10937
  border: 1px solid var(--ds-color-border);
10933
10938
  border-radius: var(--ds-radius-sm);
10934
10939
  pointer-events: none;
@@ -10965,7 +10970,7 @@ hr {
10965
10970
  position: fixed;
10966
10971
  max-height: min(22rem, calc(100dvh - 5rem));
10967
10972
  overflow-y: auto;
10968
- background: var(--ds-color-bg-elevated);
10973
+ background: var(--ds-color-bg-muted);
10969
10974
  border: 1px solid var(--ds-color-border);
10970
10975
  border-radius: var(--ds-radius-lg);
10971
10976
  box-shadow: var(--ds-shadow-lg);
@@ -11142,7 +11147,7 @@ hr {
11142
11147
  border-inline-start: none;
11143
11148
  border-inline-end: none;
11144
11149
  max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
11145
- background: var(--ds-color-bg-elevated);
11150
+ background: var(--ds-color-bg-muted);
11146
11151
  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
11147
11152
  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
11148
11153
  }