@adamarant/designsystem 0.11.2

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 (84) hide show
  1. package/README.md +101 -0
  2. package/dist/designsystem.css +13494 -0
  3. package/dist/designsystem.js +67 -0
  4. package/dist/designsystem.min.css +2 -0
  5. package/package.json +111 -0
  6. package/src/base/index.css +2 -0
  7. package/src/base/reset.css +119 -0
  8. package/src/base/typography.css +172 -0
  9. package/src/components/accordion.css +166 -0
  10. package/src/components/admin-layout.css +371 -0
  11. package/src/components/alert.css +159 -0
  12. package/src/components/avatar.css +109 -0
  13. package/src/components/badge.css +80 -0
  14. package/src/components/bottom-nav.css +125 -0
  15. package/src/components/bottom-sheet.css +146 -0
  16. package/src/components/breadcrumb.css +102 -0
  17. package/src/components/button.css +250 -0
  18. package/src/components/card.css +117 -0
  19. package/src/components/chip.css +79 -0
  20. package/src/components/collapsible.css +112 -0
  21. package/src/components/color-picker.css +82 -0
  22. package/src/components/combobox.css +420 -0
  23. package/src/components/command.css +210 -0
  24. package/src/components/context-menu.css +162 -0
  25. package/src/components/copy-button.css +106 -0
  26. package/src/components/custom-select.css +446 -0
  27. package/src/components/datepicker.css +301 -0
  28. package/src/components/description-list.css +100 -0
  29. package/src/components/divider.css +66 -0
  30. package/src/components/drawer.css +234 -0
  31. package/src/components/drop-zone.css +166 -0
  32. package/src/components/dropdown.css +169 -0
  33. package/src/components/empty-state.css +75 -0
  34. package/src/components/field.css +112 -0
  35. package/src/components/gallery.css +257 -0
  36. package/src/components/hero.css +111 -0
  37. package/src/components/icon-btn.css +103 -0
  38. package/src/components/index.css +74 -0
  39. package/src/components/input.css +311 -0
  40. package/src/components/kbd.css +54 -0
  41. package/src/components/media-library.css +230 -0
  42. package/src/components/modal.css +136 -0
  43. package/src/components/nav.css +198 -0
  44. package/src/components/number-input.css +163 -0
  45. package/src/components/pagination.css +175 -0
  46. package/src/components/pin-input.css +136 -0
  47. package/src/components/popover.css +111 -0
  48. package/src/components/progress.css +217 -0
  49. package/src/components/prose.css +337 -0
  50. package/src/components/result.css +80 -0
  51. package/src/components/scroll-area.css +73 -0
  52. package/src/components/search.css +311 -0
  53. package/src/components/segmented-control.css +94 -0
  54. package/src/components/skeleton.css +100 -0
  55. package/src/components/slider.css +133 -0
  56. package/src/components/sortable.css +70 -0
  57. package/src/components/spinner.css +60 -0
  58. package/src/components/star-rating.css +121 -0
  59. package/src/components/stat-card.css +44 -0
  60. package/src/components/table.css +359 -0
  61. package/src/components/tabs.css +215 -0
  62. package/src/components/tag.css +188 -0
  63. package/src/components/timeline.css +130 -0
  64. package/src/components/toast.css +90 -0
  65. package/src/components/toggle.css +173 -0
  66. package/src/components/toolbar.css +206 -0
  67. package/src/components/tooltip.css +167 -0
  68. package/src/components/truncated-text.css +75 -0
  69. package/src/index.css +21 -0
  70. package/src/js/theme.js +67 -0
  71. package/src/tokens/colors.css +256 -0
  72. package/src/tokens/index.css +11 -0
  73. package/src/tokens/shadows.css +55 -0
  74. package/src/tokens/spacing.css +82 -0
  75. package/src/tokens/tokens.json +413 -0
  76. package/src/tokens/typography.css +90 -0
  77. package/src/utilities/a11y.css +102 -0
  78. package/src/utilities/index.css +7 -0
  79. package/src/utilities/interactive.css +121 -0
  80. package/src/utilities/layout.css +273 -0
  81. package/src/utilities/sizing.css +85 -0
  82. package/src/utilities/spacing.css +204 -0
  83. package/src/utilities/states.css +182 -0
  84. package/src/utilities/text.css +381 -0
package/README.md ADDED
@@ -0,0 +1,101 @@
1
+ # @adamarant/designsystem
2
+
3
+ CSS-only design system. Zero dependencies. Install anywhere, override tokens, nothing breaks.
4
+
5
+ ## Install
6
+
7
+ ```bash
8
+ npm install @adamarant/designsystem
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ ```css
14
+ /* Everything */
15
+ @import '@adamarant/designsystem';
16
+
17
+ /* Or individual layers */
18
+ @import '@adamarant/designsystem/tokens';
19
+ @import '@adamarant/designsystem/base';
20
+ @import '@adamarant/designsystem/components';
21
+ @import '@adamarant/designsystem/utilities';
22
+
23
+ /* Or cherry-pick single components (tokens + base required) */
24
+ @import '@adamarant/designsystem/tokens';
25
+ @import '@adamarant/designsystem/base';
26
+ @import '@adamarant/designsystem/components/button';
27
+ @import '@adamarant/designsystem/components/card';
28
+
29
+ /* Minified bundle */
30
+ @import '@adamarant/designsystem/min';
31
+ ```
32
+
33
+ ```html
34
+ <button class="ds-btn">Default</button>
35
+ <button class="ds-btn ds-btn--secondary">Secondary</button>
36
+ <button class="ds-btn ds-btn--sm">Small</button>
37
+
38
+ <div class="ds-card">
39
+ <div class="ds-card__body">Card content</div>
40
+ </div>
41
+
42
+ <input class="ds-input" placeholder="Type here..." />
43
+ <span class="ds-badge ds-badge--success">Active</span>
44
+ ```
45
+
46
+ ## Components (38)
47
+
48
+ | Core | Essential | Common | Advanced |
49
+ |------|-----------|--------|----------|
50
+ | Button | Tabs | Toggle | Popover |
51
+ | Card | Alert | Breadcrumb | Slider |
52
+ | Input | Divider | Pagination | Timeline |
53
+ | Badge | Dropdown | Tag | Kbd |
54
+ | Nav | Tooltip | Accordion | Command |
55
+ | Modal | Avatar | Drawer | Sortable |
56
+ | Toast | Skeleton | Progress | Search |
57
+ | Table | Empty State | Datepicker | Toolbar |
58
+ | | | Drop Zone | Chip |
59
+ | | | Custom Select | Icon Button |
60
+ | | | Bottom Nav | Spinner |
61
+
62
+ All components use `ds-` prefix with BEM naming: `.ds-btn`, `.ds-btn--secondary`, `.ds-card__body`.
63
+
64
+ ## Theming
65
+
66
+ Override any `--ds-*` CSS variable. Your values always win.
67
+
68
+ ```css
69
+ :root {
70
+ --ds-font-display: "Inter", sans-serif;
71
+ --ds-color-inverted: #2563eb;
72
+ --ds-radius-xl: 24px;
73
+ }
74
+ ```
75
+
76
+ ### Dark mode
77
+
78
+ Built-in light/dark themes via `data-theme` attribute:
79
+
80
+ ```html
81
+ <html data-theme="dark">
82
+ ```
83
+
84
+ ```js
85
+ import { theme } from '@adamarant/designsystem/js';
86
+ theme.toggle(); // Toggles light/dark with localStorage persistence
87
+ ```
88
+
89
+ ## Token categories
90
+
91
+ - **Colors** `--ds-color-*` — bg, surface, text, border, status, accent
92
+ - **Spacing** `--ds-space-*` — 0 to 32 scale
93
+ - **Typography** `--ds-text-*`, `--ds-weight-*`, `--ds-font-*` — xs to 7xl, Clash Display + Switzer + Geist Mono
94
+ - **Radius** `--ds-radius-*` — none to full
95
+ - **Shadows** `--ds-shadow-*` — sm, md, lg (auto-adjusts per theme)
96
+ - **Z-index** `--ds-z-*` — base, dropdown, sticky, overlay, modal, toast, tooltip
97
+ - **Transitions** `--ds-duration-*`, `--ds-ease-*` — fast/normal/slow + easing curves
98
+
99
+ ## License
100
+
101
+ MIT