@digiko-npm/designsystem 0.2.2 → 0.2.3

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 (26) hide show
  1. package/dist/designsystem.css +331 -263
  2. package/dist/designsystem.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/base/typography.css +6 -0
  5. package/src/components/accordion.css +36 -32
  6. package/src/components/alert.css +1 -1
  7. package/src/components/badge.css +3 -3
  8. package/src/components/breadcrumb.css +2 -2
  9. package/src/components/button.css +32 -12
  10. package/src/components/command.css +32 -33
  11. package/src/components/drawer.css +31 -30
  12. package/src/components/input.css +19 -4
  13. package/src/components/kbd.css +18 -19
  14. package/src/components/modal.css +1 -1
  15. package/src/components/pagination.css +4 -4
  16. package/src/components/popover.css +21 -22
  17. package/src/components/progress.css +52 -48
  18. package/src/components/slider.css +18 -19
  19. package/src/components/tabs.css +1 -1
  20. package/src/components/tag.css +5 -5
  21. package/src/components/timeline.css +24 -25
  22. package/src/components/toast.css +1 -1
  23. package/src/components/toggle.css +3 -3
  24. package/src/tokens/colors.css +8 -0
  25. package/src/tokens/spacing.css +14 -0
  26. package/src/tokens/typography.css +1 -0
package/src/components/tag.css CHANGED
@@ -24,7 +24,7 @@
24
24
  font-size: var(--ds-text-xs);
25
25
  font-weight: var(--ds-weight-medium);
26
26
  font-family: var(--ds-font-sans);
27
- line-height: 1;
27
+ line-height: var(--ds-leading-none);
28
28
  border-radius: var(--ds-radius-full);
29
29
  background-color: var(--ds-color-bg-elevated);
30
30
  border: 1px solid var(--ds-color-border);
@@ -103,7 +103,7 @@
103
103
  background: transparent;
104
104
  color: currentColor;
105
105
  font-size: inherit;
106
- line-height: 1;
106
+ line-height: var(--ds-leading-none);
107
107
  opacity: 0.6;
108
108
  cursor: pointer;
109
109
  transition:
@@ -119,8 +119,8 @@
119
119
  }
120
120
 
121
121
  .ds-tag__remove:focus-visible {
122
- outline: 2px solid var(--ds-color-interactive);
123
- outline-offset: 1px;
122
+ outline: var(--ds-ring-width) solid var(--ds-ring-color);
123
+ outline-offset: var(--ds-ring-offset);
124
124
  opacity: 1;
125
125
  }
126
126
 
@@ -138,7 +138,7 @@
138
138
 
139
139
  .ds-tag--sm {
140
140
  padding: var(--ds-space-0-5, 0.125rem) var(--ds-space-2, 0.5rem);
141
- font-size: 0.625rem;
141
+ font-size: var(--ds-text-2xs);
142
142
  }
143
143
 
144
144
  .ds-tag--sm.ds-tag--removable {
package/src/components/timeline.css CHANGED
@@ -1,29 +1,28 @@
1
1
  /* ==========================================================================
2
- * Timeline
3
- * ==========================================================================
4
- *
5
- * Vertical timeline component for roadmaps, activity feeds, and step-based
6
- * flows. Each item has a dot indicator on a vertical line with support for
7
- * completed, current, and error states.
8
- *
9
- * Usage:
10
- * <div class="ds-timeline">
11
- * <div class="ds-timeline__item ds-timeline__item--completed">
12
- * <div class="ds-timeline__dot"></div>
13
- * <div class="ds-timeline__content">
14
- * <div class="ds-timeline__title">Step one</div>
15
- * <div class="ds-timeline__description">Details here.</div>
16
- * <div class="ds-timeline__time">2 hours ago</div>
17
- * </div>
18
- * </div>
19
- * </div>
20
- *
21
- * Modifiers:
22
- * .ds-timeline__item--completed — Green dot (success)
23
- * .ds-timeline__item--current — Inverted dot (active)
24
- * .ds-timeline__item--error — Red dot (error)
25
- * .ds-timeline--compact — Tighter spacing, smaller dots
26
- * ========================================================================== */
2
+ Timeline
3
+ ==========================================================================
4
+ Vertical timeline component for roadmaps, activity feeds, and step-based
5
+ flows. Each item has a dot indicator on a vertical line with support for
6
+ completed, current, and error states.
7
+
8
+ Usage:
9
+ <div class="ds-timeline">
10
+ <div class="ds-timeline__item ds-timeline__item--completed">
11
+ <div class="ds-timeline__dot"></div>
12
+ <div class="ds-timeline__content">
13
+ <div class="ds-timeline__title">Step one</div>
14
+ <div class="ds-timeline__description">Details here.</div>
15
+ <div class="ds-timeline__time">2 hours ago</div>
16
+ </div>
17
+ </div>
18
+ </div>
19
+
20
+ Modifiers:
21
+ .ds-timeline__item--completed — Green dot (success)
22
+ .ds-timeline__item--current — Inverted dot (active)
23
+ .ds-timeline__item--error — Red dot (error)
24
+ .ds-timeline--compact — Tighter spacing, smaller dots
25
+ ========================================================================== */
27
26
 
28
27
  .ds-timeline {
29
28
  position: relative;
package/src/components/toast.css CHANGED
@@ -50,7 +50,7 @@
50
50
  color: var(--ds-color-text-tertiary);
51
51
  padding: var(--ds-space-1);
52
52
  border-radius: var(--ds-radius-sm);
53
- transition: color var(--ds-duration-fast) ease;
53
+ transition: color var(--ds-duration-fast) var(--ds-ease-default);
54
54
  }
55
55
  .ds-toast__close:hover {
56
56
  color: var(--ds-color-text);
package/src/components/toggle.css CHANGED
@@ -45,7 +45,7 @@
45
45
  width: 1.25rem;
46
46
  height: 1.25rem;
47
47
  border-radius: var(--ds-radius-full);
48
- background-color: #fff;
48
+ background-color: var(--ds-color-surface);
49
49
  box-shadow: var(--ds-shadow-sm);
50
50
  transform: translateY(-50%);
51
51
  transition: transform var(--ds-duration-normal) var(--ds-ease-out);
@@ -83,8 +83,8 @@
83
83
  --------------------------------------------------------------------------- */
84
84
 
85
85
  .ds-toggle:focus-visible {
86
- outline: 2px solid var(--ds-color-interactive);
87
- outline-offset: 2px;
86
+ outline: var(--ds-ring-width) solid var(--ds-ring-color);
87
+ outline-offset: var(--ds-ring-offset);
88
88
  }
89
89
 
90
90
  /* ---------------------------------------------------------------------------
package/src/tokens/colors.css CHANGED
@@ -146,9 +146,13 @@
146
146
  --ds-color-accent-green: #16a34a;
147
147
  --ds-color-accent-orange: #d97706;
148
148
  --ds-color-accent-blue-subtle: rgba(37, 99, 235, 0.1);
149
+ --ds-color-accent-blue-border: rgba(37, 99, 235, 0.2);
149
150
  --ds-color-accent-purple-subtle: rgba(124, 58, 237, 0.1);
151
+ --ds-color-accent-purple-border: rgba(124, 58, 237, 0.2);
150
152
  --ds-color-accent-green-subtle: rgba(22, 163, 74, 0.1);
153
+ --ds-color-accent-green-border: rgba(22, 163, 74, 0.2);
151
154
  --ds-color-accent-orange-subtle: rgba(217, 119, 6, 0.1);
155
+ --ds-color-accent-orange-border: rgba(217, 119, 6, 0.2);
152
156
  }
153
157
 
154
158
  /* Dark overrides for status/accent (brighter for contrast) */
@@ -174,7 +178,11 @@
174
178
  --ds-color-accent-green: #4ade80;
175
179
  --ds-color-accent-orange: #fbbf24;
176
180
  --ds-color-accent-blue-subtle: rgba(96, 165, 250, 0.1);
181
+ --ds-color-accent-blue-border: rgba(96, 165, 250, 0.2);
177
182
  --ds-color-accent-purple-subtle: rgba(167, 139, 250, 0.1);
183
+ --ds-color-accent-purple-border: rgba(167, 139, 250, 0.2);
178
184
  --ds-color-accent-green-subtle: rgba(74, 222, 128, 0.1);
185
+ --ds-color-accent-green-border: rgba(74, 222, 128, 0.2);
179
186
  --ds-color-accent-orange-subtle: rgba(251, 191, 36, 0.1);
187
+ --ds-color-accent-orange-border: rgba(251, 191, 36, 0.2);
180
188
  }
package/src/tokens/spacing.css CHANGED
@@ -23,6 +23,20 @@
23
23
  --ds-space-24: 6rem; /* 96px */
24
24
  --ds-space-32: 8rem; /* 128px */
25
25
 
26
+ /* --- Component Height Scale ---
27
+ Inline components at the same size tier share the same height.
28
+ Button SM + Input SM = both 32px. Always.
29
+ Based on Radix Themes convention (multiples of 8).
30
+
31
+ --ds-size-1: 24px — xs (btn--xs, input--xs)
32
+ --ds-size-2: 32px — sm (btn--sm, input--sm)
33
+ --ds-size-3: 40px — md (btn, input — default)
34
+ --ds-size-4: 48px — lg (btn--lg, input--lg) */
35
+ --ds-size-1: 1.5rem;
36
+ --ds-size-2: 2rem;
37
+ --ds-size-3: 2.5rem;
38
+ --ds-size-4: 3rem;
39
+
26
40
  /* --- Section Padding (responsive, generous) --- */
27
41
  --ds-section-padding: clamp(80px, 12vw, 160px);
28
42
 
package/src/tokens/typography.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --ds-font-display-weight: 400;
17
17
 
18
18
  /* --- Font Sizes --- */
19
+ --ds-text-2xs: 0.625rem; /* 10px */
19
20
  --ds-text-xs: 0.75rem; /* 12px */
20
21
  --ds-text-sm: 0.875rem; /* 14px */
21
22
  --ds-text-base: 1rem; /* 16px */