@digiko-npm/designsystem 0.9.7 → 0.9.8

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 (16) hide show
  1. package/dist/designsystem.css +32 -24
  2. package/dist/designsystem.min.css +2 -2
  3. package/package.json +2 -1
  4. package/src/components/bottom-nav.css +1 -1
  5. package/src/components/chip.css +1 -1
  6. package/src/components/command.css +4 -4
  7. package/src/components/datepicker.css +1 -1
  8. package/src/components/gallery.css +3 -3
  9. package/src/components/hero.css +1 -1
  10. package/src/components/popover.css +2 -2
  11. package/src/components/slider.css +2 -2
  12. package/src/components/tag.css +4 -4
  13. package/src/components/toolbar.css +1 -1
  14. package/src/tokens/colors.css +5 -1
  15. package/src/tokens/spacing.css +4 -0
  16. package/src/utilities/interactive.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digiko-npm/designsystem",
3
- "version": "0.9.7",
3
+ "version": "0.9.8",
4
4
  "description": "Design system — installable, extensible, indestructible.",
5
5
  "main": "dist/designsystem.css",
6
6
  "style": "dist/designsystem.css",
@@ -77,6 +77,7 @@
77
77
  ],
78
78
  "scripts": {
79
79
  "build": "node scripts/build.js",
80
+ "validate": "node scripts/validate.js",
80
81
  "docs": "node scripts/generate-docs.js",
81
82
  "lint": "stylelint 'src/**/*.css'",
82
83
  "dev": "node scripts/build.js --watch & node scripts/generate-docs.js && live-server --host=localhost --port=3000 --open=examples/ --watch=dist/,examples/ --wait=200 --no-browser"
package/src/components/bottom-nav.css CHANGED
@@ -108,7 +108,7 @@
108
108
  height: 2.25rem;
109
109
  border-radius: var(--ds-radius-full);
110
110
  background: var(--ds-color-text);
111
- color: var(--ds-color-bg-base);
111
+ color: var(--ds-color-bg);
112
112
  }
113
113
  }
114
114
 
package/src/components/chip.css CHANGED
@@ -37,7 +37,7 @@
37
37
  /* Logic chip (AND/OR toggle) */
38
38
  &--logic {
39
39
  cursor: pointer;
40
- font-weight: 600;
40
+ font-weight: var(--ds-weight-semibold);
41
41
  color: var(--ds-color-text-tertiary);
42
42
  background: transparent;
43
43
  border-color: var(--ds-color-border);
package/src/components/command.css CHANGED
@@ -53,8 +53,8 @@
53
53
  opacity: 0;
54
54
  visibility: hidden;
55
55
  transition:
56
- opacity var(--ds-duration-fast) var(--ds-ease),
57
- visibility var(--ds-duration-fast) var(--ds-ease);
56
+ opacity var(--ds-duration-fast) var(--ds-ease-default),
57
+ visibility var(--ds-duration-fast) var(--ds-ease-default);
58
58
 
59
59
  /* Open state */
60
60
  &--open {
@@ -143,8 +143,8 @@
143
143
  font-size: var(--ds-text-sm);
144
144
  color: var(--ds-color-text-secondary);
145
145
  transition:
146
- background-color var(--ds-duration-fast) var(--ds-ease),
147
- color var(--ds-duration-fast) var(--ds-ease);
146
+ background-color var(--ds-duration-fast) var(--ds-ease-default),
147
+ color var(--ds-duration-fast) var(--ds-ease-default);
148
148
 
149
149
  /* Item hover & active states */
150
150
  &:hover,
package/src/components/datepicker.css CHANGED
@@ -244,7 +244,7 @@
244
244
  height: 1.25rem;
245
245
  border: none;
246
246
  background: none;
247
- border-radius: var(--ds-radius-default);
247
+ border-radius: var(--ds-radius-md);
248
248
  color: var(--ds-color-text-tertiary);
249
249
  cursor: pointer;
250
250
  font-size: var(--ds-text-xs);
package/src/components/gallery.css CHANGED
@@ -175,7 +175,7 @@
175
175
  border: none;
176
176
  border-radius: var(--ds-radius-full);
177
177
  background-color: rgba(255, 255, 255, 0.15);
178
- color: #fff;
178
+ color: var(--ds-color-on-inverted);
179
179
  font-size: var(--ds-text-xl);
180
180
  cursor: pointer;
181
181
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -204,7 +204,7 @@
204
204
  border: none;
205
205
  border-radius: var(--ds-radius-full);
206
206
  background-color: rgba(255, 255, 255, 0.15);
207
- color: #fff;
207
+ color: var(--ds-color-on-inverted);
208
208
  font-size: var(--ds-text-2xl);
209
209
  cursor: pointer;
210
210
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
@@ -241,7 +241,7 @@
241
241
  padding: var(--ds-space-1) var(--ds-space-3);
242
242
  border-radius: var(--ds-radius-full);
243
243
  background-color: rgba(0, 0, 0, 0.6);
244
- color: #fff;
244
+ color: var(--ds-color-on-inverted);
245
245
  font-size: var(--ds-text-sm);
246
246
  font-family: var(--ds-font-sans);
247
247
  font-variant-numeric: tabular-nums;
package/src/components/hero.css CHANGED
@@ -105,7 +105,7 @@
105
105
 
106
106
  /* --- Title & subtitle (theme-independent white for photo readability) --- */
107
107
  .ds-hero__title {
108
- color: #fff;
108
+ color: var(--ds-color-on-inverted);
109
109
  }
110
110
 
111
111
  .ds-hero__subtitle {
package/src/components/popover.css CHANGED
@@ -38,8 +38,8 @@
38
38
  visibility: hidden;
39
39
  transform: scale(0.96);
40
40
  transition:
41
- opacity var(--ds-duration-fast) var(--ds-ease),
42
- visibility var(--ds-duration-fast) var(--ds-ease),
41
+ opacity var(--ds-duration-fast) var(--ds-ease-default),
42
+ visibility var(--ds-duration-fast) var(--ds-ease-default),
43
43
  transform var(--ds-duration-fast) var(--ds-ease-out-expo);
44
44
 
45
45
  /* Size: small */
package/src/components/slider.css CHANGED
@@ -50,7 +50,7 @@
50
50
  border: 2px solid var(--ds-color-surface);
51
51
  box-shadow: var(--ds-shadow-sm);
52
52
  cursor: pointer;
53
- transition: transform var(--ds-duration-fast) var(--ds-ease);
53
+ transition: transform var(--ds-duration-fast) var(--ds-ease-default);
54
54
  }
55
55
 
56
56
  /* Firefox thumb */
@@ -62,7 +62,7 @@
62
62
  border: 2px solid var(--ds-color-surface);
63
63
  box-shadow: var(--ds-shadow-sm);
64
64
  cursor: pointer;
65
- transition: transform var(--ds-duration-fast) var(--ds-ease);
65
+ transition: transform var(--ds-duration-fast) var(--ds-ease-default);
66
66
  }
67
67
 
68
68
  /* Hover: scale up thumb */
package/src/components/tag.css CHANGED
@@ -78,9 +78,9 @@
78
78
  }
79
79
 
80
80
  &--purple {
81
- background-color: var(--ds-color-purple-subtle, var(--ds-color-bg-elevated));
82
- color: var(--ds-color-purple, var(--ds-color-interactive));
83
- border-color: var(--ds-color-purple-border, var(--ds-color-purple, var(--ds-color-interactive)));
81
+ background-color: var(--ds-color-accent-purple-subtle, var(--ds-color-bg-elevated));
82
+ color: var(--ds-color-accent-purple, var(--ds-color-interactive));
83
+ border-color: var(--ds-color-accent-purple-border, var(--ds-color-accent-purple, var(--ds-color-interactive)));
84
84
  }
85
85
 
86
86
  /* ---------------------------------------------------------------------------
@@ -166,7 +166,7 @@
166
166
  }
167
167
 
168
168
  /* Tags used as <button> for selection — no focus ring on click */
169
- button.ds-tag:focus-visible {
169
+ .ds-tag:focus-visible {
170
170
  outline: none;
171
171
  box-shadow: 0 0 0 var(--ds-ring-width) var(--ds-ring-color);
172
172
  scroll-margin-block: var(--ds-space-16, 4rem);
package/src/components/toolbar.css CHANGED
@@ -117,7 +117,7 @@
117
117
  height: 1rem;
118
118
  padding: 0 0.25rem;
119
119
  font-size: 0.625rem;
120
- font-weight: 600;
120
+ font-weight: var(--ds-weight-semibold);
121
121
  line-height: 1;
122
122
  color: var(--ds-color-on-inverted);
123
123
  background: var(--ds-color-interactive);
package/src/tokens/colors.css CHANGED
@@ -42,6 +42,8 @@
42
42
  /* --- Interactive --- */
43
43
  --ds-color-interactive: #3f3f46;
44
44
  --ds-color-interactive-hover: #27272a;
45
+ --ds-color-interactive-subtle: rgba(63, 63, 70, 0.1);
46
+ --ds-color-interactive-border: rgba(63, 63, 70, 0.2);
45
47
 
46
48
  /* --- Overlays --- */
47
49
  --ds-color-overlay: rgba(0, 0, 0, 0.5);
@@ -75,7 +77,7 @@
75
77
  --ds-color-bg: #09090b;
76
78
  --ds-color-bg-subtle: #0f0f11;
77
79
  --ds-color-bg-muted: #18181b;
78
- --ds-color-bg-elevated: #1c1c20;
80
+ --ds-color-bg-elevated: #27272a;
79
81
 
80
82
  --ds-color-surface: #0f0f11;
81
83
  --ds-color-surface-hover: #18181b;
@@ -106,6 +108,8 @@
106
108
  /* --- Interactive --- */
107
109
  --ds-color-interactive: #d4d4d8;
108
110
  --ds-color-interactive-hover: #fafafa;
111
+ --ds-color-interactive-subtle: rgba(212, 212, 216, 0.1);
112
+ --ds-color-interactive-border: rgba(212, 212, 216, 0.2);
109
113
 
110
114
  /* --- Overlays --- */
111
115
  --ds-color-overlay: rgba(0, 0, 0, 0.7);
package/src/tokens/spacing.css CHANGED
@@ -44,6 +44,10 @@
44
44
  --ds-size-3: 2.5rem;
45
45
  --ds-size-4: 3rem;
46
46
 
47
+ /* --- Component-Specific Heights --- */
48
+ --ds-search-bar-height: 3.5rem;
49
+ --ds-toolbar-row-height: 2.5rem;
50
+
47
51
  /* --- Section Padding (responsive, generous) --- */
48
52
  --ds-section-padding: clamp(80px, 12vw, 160px);
49
53
 
package/src/utilities/interactive.css CHANGED
@@ -32,7 +32,7 @@
32
32
  /* --- Editable Cell (pointer + bg on hover) --- */
33
33
  .ds-editable {
34
34
  cursor: pointer;
35
- border-radius: var(--ds-radius-default);
35
+ border-radius: var(--ds-radius-md);
36
36
  transition: background-color var(--ds-duration-fast) var(--ds-ease-default);
37
37
  }
38
38
  .ds-editable:hover {
@@ -86,7 +86,7 @@
86
86
  }
87
87
 
88
88
  .ds-bg-base-50 {
89
- background-color: color-mix(in srgb, var(--ds-color-bg-base) 50%, transparent);
89
+ background-color: color-mix(in srgb, var(--ds-color-bg) 50%, transparent);
90
90
  }
91
91
 
92
92
  /* --- Hover Color Variants --- */