@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digiko-npm/designsystem",
3
- "version": "0.9.27",
3
+ "version": "0.9.29",
4
4
  "description": "Design system — installable, extensible, indestructible.",
5
5
  "main": "dist/designsystem.css",
6
6
  "style": "dist/designsystem.css",
package/src/components/button.css CHANGED
@@ -51,13 +51,13 @@
51
51
  /* --- Variants --- */
52
52
 
53
53
  &--secondary {
54
- background-color: var(--ds-color-bg-elevated);
54
+ background-color: var(--ds-color-bg-muted);
55
55
  color: var(--ds-color-text);
56
56
  border-color: var(--ds-color-border);
57
57
 
58
58
  &:hover {
59
59
  border-color: var(--ds-color-border-hover);
60
- background-color: var(--ds-color-surface);
60
+ background-color: var(--ds-color-bg-muted-hover);
61
61
  opacity: 1;
62
62
  }
63
63
  }
package/src/components/combobox.css CHANGED
@@ -149,7 +149,7 @@
149
149
  max-height: 16rem;
150
150
  overflow-y: auto;
151
151
  overscroll-behavior: contain;
152
- background-color: var(--ds-color-bg-elevated);
152
+ background-color: var(--ds-color-bg-muted);
153
153
  border: 1px solid var(--ds-color-border);
154
154
  border-radius: var(--ds-radius-xl);
155
155
  box-shadow: var(--ds-shadow-lg);
@@ -217,7 +217,11 @@
217
217
  background-color var(--ds-duration-fast) var(--ds-ease-default);
218
218
  }
219
219
 
220
- .ds-combobox__option:hover,
220
+ .ds-combobox__option:hover {
221
+ background-color: var(--ds-color-surface-hover);
222
+ color: var(--ds-color-text);
223
+ }
224
+
221
225
  .ds-combobox__option--active {
222
226
  background-color: var(--ds-color-bg-elevated);
223
227
  color: var(--ds-color-text);
@@ -273,7 +277,7 @@
273
277
 
274
278
  .ds-combobox__create:hover,
275
279
  .ds-combobox__create:focus-visible {
276
- background-color: var(--ds-color-bg-elevated);
280
+ background-color: var(--ds-color-surface-hover);
277
281
  }
278
282
 
279
283
  /* --- Empty state --- */
@@ -319,7 +323,7 @@
319
323
  font-family: var(--ds-font-sans);
320
324
  line-height: var(--ds-leading-none);
321
325
  border-radius: var(--ds-radius-full);
322
- background-color: var(--ds-color-bg-elevated);
326
+ background-color: var(--ds-color-bg-muted);
323
327
  border: 1px solid var(--ds-color-border);
324
328
  color: var(--ds-color-text-secondary);
325
329
  white-space: nowrap;
package/src/components/command.css CHANGED
@@ -68,7 +68,7 @@
68
68
 
69
69
  /* Content panel */
70
70
  &__content {
71
- background-color: var(--ds-color-bg-elevated);
71
+ background-color: var(--ds-color-bg-muted);
72
72
  border: 1px solid var(--ds-color-border);
73
73
  border-radius: var(--ds-radius-xl);
74
74
  box-shadow: var(--ds-shadow-lg);
package/src/components/custom-select.css CHANGED
@@ -123,7 +123,7 @@
123
123
  .ds-custom-select__panel {
124
124
  position: fixed;
125
125
  z-index: var(--ds-z-dropdown);
126
- background-color: var(--ds-color-bg-elevated);
126
+ background-color: var(--ds-color-bg-muted);
127
127
  border: 1px solid var(--ds-color-border);
128
128
  border-radius: var(--ds-radius-xl);
129
129
  box-shadow: var(--ds-shadow-lg);
@@ -212,7 +212,7 @@
212
212
  }
213
213
 
214
214
  .ds-custom-select__option:hover {
215
- background-color: var(--ds-color-bg-elevated);
215
+ background-color: var(--ds-color-surface-hover);
216
216
  color: var(--ds-color-text);
217
217
  }
218
218
  .ds-custom-select__option:focus-visible {
@@ -364,7 +364,7 @@
364
364
  font-family: var(--ds-font-sans);
365
365
  line-height: var(--ds-leading-none);
366
366
  border-radius: var(--ds-radius-full);
367
- background-color: var(--ds-color-bg-elevated);
367
+ background-color: var(--ds-color-bg-muted);
368
368
  border: 1px solid var(--ds-color-border);
369
369
  color: var(--ds-color-text-secondary);
370
370
  white-space: nowrap;
package/src/components/datepicker.css CHANGED
@@ -67,7 +67,7 @@
67
67
  z-index: var(--ds-z-dropdown);
68
68
  inset-block-start: calc(100% + var(--ds-offset-sm));
69
69
  inset-inline-start: 0;
70
- background-color: var(--ds-color-bg-elevated);
70
+ background-color: var(--ds-color-bg-muted);
71
71
  border: 1px solid var(--ds-color-border);
72
72
  border-radius: var(--ds-radius-xl);
73
73
  box-shadow: var(--ds-shadow-lg);
package/src/components/drop-zone.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --------------------------------------------------------------------------- */
57
57
 
58
58
  &:hover {
59
- background-color: var(--ds-color-bg-elevated);
59
+ background-color: var(--ds-color-surface-hover);
60
60
  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");
61
61
  }
62
62
 
@@ -71,7 +71,7 @@
71
71
  width: 3rem;
72
72
  height: 3rem;
73
73
  border-radius: var(--ds-radius-xl);
74
- background-color: var(--ds-color-bg-elevated);
74
+ background-color: var(--ds-color-bg-muted);
75
75
  color: var(--ds-color-text-secondary);
76
76
  transition: color var(--ds-duration-fast) var(--ds-ease-default);
77
77
  }
@@ -102,7 +102,7 @@
102
102
 
103
103
  /* Active — drag-over */
104
104
  &--active {
105
- background-color: var(--ds-color-bg-elevated);
105
+ background-color: var(--ds-color-surface-hover);
106
106
  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");
107
107
  }
108
108
 
package/src/components/dropdown.css CHANGED
@@ -40,7 +40,7 @@
40
40
  display: flex;
41
41
  flex-direction: column;
42
42
  padding-block: var(--ds-space-1-5);
43
- background-color: var(--ds-color-bg-elevated);
43
+ background-color: var(--ds-color-bg-muted);
44
44
  border: 1px solid var(--ds-color-border);
45
45
  border-radius: var(--ds-radius-xl);
46
46
  box-shadow: var(--ds-shadow-lg);
package/src/components/gallery.css CHANGED
@@ -122,7 +122,7 @@
122
122
  height: 4rem;
123
123
  border: 1px solid var(--ds-color-border);
124
124
  border-radius: var(--ds-radius-md);
125
- background-color: var(--ds-color-bg-elevated);
125
+ background-color: var(--ds-color-bg-muted);
126
126
  color: var(--ds-color-text-secondary);
127
127
  font-size: var(--ds-text-sm);
128
128
  font-weight: var(--ds-weight-medium);
package/src/components/popover.css CHANGED
@@ -28,7 +28,7 @@
28
28
  &__content {
29
29
  position: absolute;
30
30
  z-index: var(--ds-z-dropdown);
31
- background-color: var(--ds-color-bg-elevated);
31
+ background-color: var(--ds-color-bg-muted);
32
32
  border: 1px solid var(--ds-color-border);
33
33
  border-radius: var(--ds-radius-xl);
34
34
  box-shadow: var(--ds-shadow-lg);
package/src/components/search.css CHANGED
@@ -92,7 +92,7 @@
92
92
  font-family: inherit;
93
93
  line-height: 1;
94
94
  color: var(--ds-color-text-tertiary);
95
- background: var(--ds-color-bg-elevated);
95
+ background: var(--ds-color-bg-muted);
96
96
  border: 1px solid var(--ds-color-border);
97
97
  border-radius: var(--ds-radius-sm);
98
98
  pointer-events: none;
@@ -129,7 +129,7 @@
129
129
  position: fixed;
130
130
  max-height: min(22rem, calc(100dvh - 5rem));
131
131
  overflow-y: auto;
132
- background: var(--ds-color-bg-elevated);
132
+ background: var(--ds-color-bg-muted);
133
133
  border: 1px solid var(--ds-color-border);
134
134
  border-radius: var(--ds-radius-lg);
135
135
  box-shadow: var(--ds-shadow-lg);
@@ -303,7 +303,7 @@
303
303
  border-inline-start: none;
304
304
  border-inline-end: none;
305
305
  max-height: calc(100dvh - var(--ds-search-bar-height, 3.5rem));
306
- background: var(--ds-color-bg-elevated);
306
+ background: var(--ds-color-bg-muted);
307
307
  backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
308
308
  -webkit-backdrop-filter: blur(var(--ds-blur-lg)) saturate(1.5);
309
309
  }
package/src/tokens/colors.css CHANGED
@@ -80,7 +80,7 @@
80
80
  --ds-color-bg: #09090b;
81
81
  --ds-color-bg-subtle: #0f0f11;
82
82
  --ds-color-bg-muted: #18181b;
83
- --ds-color-bg-muted-hover: #27272a;
83
+ --ds-color-bg-muted-hover: #222225;
84
84
  --ds-color-bg-muted-active: #3f3f46;
85
85
  --ds-color-bg-elevated: #27272a;
86
86
  --ds-color-bg-elevated-hover: #3f3f46;