@digiko-npm/designsystem 0.1.0

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 (47) hide show
  1. package/README.md +89 -0
  2. package/dist/designsystem.css +4642 -0
  3. package/dist/designsystem.js +67 -0
  4. package/package.json +32 -0
  5. package/src/base/index.css +2 -0
  6. package/src/base/reset.css +120 -0
  7. package/src/base/typography.css +163 -0
  8. package/src/components/accordion.css +150 -0
  9. package/src/components/alert.css +150 -0
  10. package/src/components/avatar.css +109 -0
  11. package/src/components/badge.css +80 -0
  12. package/src/components/breadcrumb.css +95 -0
  13. package/src/components/button.css +168 -0
  14. package/src/components/card.css +121 -0
  15. package/src/components/command.css +185 -0
  16. package/src/components/divider.css +66 -0
  17. package/src/components/drawer.css +209 -0
  18. package/src/components/dropdown.css +139 -0
  19. package/src/components/empty-state.css +69 -0
  20. package/src/components/index.css +35 -0
  21. package/src/components/input.css +116 -0
  22. package/src/components/kbd.css +55 -0
  23. package/src/components/modal.css +103 -0
  24. package/src/components/nav.css +153 -0
  25. package/src/components/pagination.css +166 -0
  26. package/src/components/popover.css +112 -0
  27. package/src/components/progress.css +214 -0
  28. package/src/components/skeleton.css +96 -0
  29. package/src/components/slider.css +125 -0
  30. package/src/components/table.css +48 -0
  31. package/src/components/tabs.css +163 -0
  32. package/src/components/tag.css +159 -0
  33. package/src/components/timeline.css +131 -0
  34. package/src/components/toast.css +70 -0
  35. package/src/components/toggle.css +135 -0
  36. package/src/components/tooltip.css +161 -0
  37. package/src/index.css +19 -0
  38. package/src/js/theme.js +67 -0
  39. package/src/tokens/colors.css +180 -0
  40. package/src/tokens/index.css +11 -0
  41. package/src/tokens/shadows.css +26 -0
  42. package/src/tokens/spacing.css +53 -0
  43. package/src/tokens/typography.css +51 -0
  44. package/src/utilities/index.css +3 -0
  45. package/src/utilities/layout.css +134 -0
  46. package/src/utilities/spacing.css +75 -0
  47. package/src/utilities/text.css +221 -0
package/README.md ADDED
@@ -0,0 +1,89 @@
1
+ # @digiko-npm/designsystem
2
+
3
+ CSS-only design system. Zero dependencies. Install anywhere, override tokens, nothing breaks.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @digiko-npm/designsystem
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```css
14
+ /* Everything */
15
+ @import '@digiko-npm/designsystem';
16
+
17
+ /* Or individual layers */
18
+ @import '@digiko-npm/designsystem/tokens';
19
+ @import '@digiko-npm/designsystem/base';
20
+ @import '@digiko-npm/designsystem/components';
21
+ @import '@digiko-npm/designsystem/utilities';
22
+ ```
23
+
24
+ ```html
25
+ <button class="ds-btn">Default</button>
26
+ <button class="ds-btn ds-btn--secondary">Secondary</button>
27
+ <button class="ds-btn ds-btn--sm">Small</button>
28
+
29
+ <div class="ds-card">
30
+ <div class="ds-card__body">Card content</div>
31
+ </div>
32
+
33
+ <input class="ds-input" placeholder="Type here..." />
34
+ <span class="ds-badge ds-badge--success">Active</span>
35
+ ```
36
+
37
+ ## Components (28)
38
+
39
+ | Core | Essential | Common | Advanced |
40
+ |------|-----------|--------|----------|
41
+ | Button | Tabs | Toggle | Popover |
42
+ | Card | Alert | Breadcrumb | Slider |
43
+ | Input | Divider | Pagination | Timeline |
44
+ | Badge | Dropdown | Tag | Kbd |
45
+ | Nav | Tooltip | Accordion | Command |
46
+ | Modal | Avatar | Drawer | |
47
+ | Toast | Skeleton | Progress | |
48
+ | Table | Empty State | | |
49
+
50
+ All components use `ds-` prefix with BEM naming: `.ds-btn`, `.ds-btn--secondary`, `.ds-card__body`.
51
+
52
+ ## Theming
53
+
54
+ Override any `--ds-*` CSS variable. Your values always win.
55
+
56
+ ```css
57
+ :root {
58
+ --ds-font-display: "Inter", sans-serif;
59
+ --ds-color-inverted: #2563eb;
60
+ --ds-radius-xl: 24px;
61
+ }
62
+ ```
63
+
64
+ ### Dark mode
65
+
66
+ Built-in light/dark themes via `data-theme` attribute:
67
+
68
+ ```html
69
+ <html data-theme="dark">
70
+ ```
71
+
72
+ ```js
73
+ import { theme } from '@digiko-npm/designsystem/js';
74
+ theme.toggle(); // Toggles light/dark with localStorage persistence
75
+ ```
76
+
77
+ ## Token categories
78
+
79
+ - **Colors** `--ds-color-*` — bg, surface, text, border, status, accent
80
+ - **Spacing** `--ds-space-*` — 0 to 32 scale
81
+ - **Typography** `--ds-text-*`, `--ds-weight-*`, `--ds-font-*` — xs to 7xl, Clash Display + Switzer + Geist Mono
82
+ - **Radius** `--ds-radius-*` — none to full
83
+ - **Shadows** `--ds-shadow-*` — sm, md, lg (auto-adjusts per theme)
84
+ - **Z-index** `--ds-z-*` — base, dropdown, sticky, overlay, modal, toast, tooltip
85
+ - **Transitions** `--ds-duration-*`, `--ds-ease-*` — fast/normal/slow + easing curves
86
+
87
+ ## License
88
+
89
+ MIT