@ryanhelsing/ry-ui 1.0.2 → 1.0.4

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 (59) hide show
  1. package/AGENT.md +460 -0
  2. package/AGENTS.md +57 -0
  3. package/README.md +45 -1
  4. package/dist/components/ry-button-group.d.ts +32 -0
  5. package/dist/components/ry-button-group.d.ts.map +1 -0
  6. package/dist/components/ry-carousel.d.ts +21 -0
  7. package/dist/components/ry-carousel.d.ts.map +1 -0
  8. package/dist/components/ry-feature.d.ts +21 -0
  9. package/dist/components/ry-feature.d.ts.map +1 -0
  10. package/dist/components/ry-field.d.ts +7 -1
  11. package/dist/components/ry-field.d.ts.map +1 -1
  12. package/dist/components/ry-hero.d.ts +16 -0
  13. package/dist/components/ry-hero.d.ts.map +1 -0
  14. package/dist/components/ry-number-select.d.ts.map +1 -1
  15. package/dist/components/ry-pricing.d.ts +21 -0
  16. package/dist/components/ry-pricing.d.ts.map +1 -0
  17. package/dist/components/ry-select.d.ts +8 -1
  18. package/dist/components/ry-select.d.ts.map +1 -1
  19. package/dist/components/ry-split.d.ts +28 -0
  20. package/dist/components/ry-split.d.ts.map +1 -0
  21. package/dist/components/ry-stat.d.ts +17 -0
  22. package/dist/components/ry-stat.d.ts.map +1 -0
  23. package/dist/components/ry-tag-input.d.ts +18 -0
  24. package/dist/components/ry-tag-input.d.ts.map +1 -0
  25. package/dist/components/ry-tag.d.ts +19 -0
  26. package/dist/components/ry-tag.d.ts.map +1 -0
  27. package/dist/core/ry-transform.d.ts.map +1 -1
  28. package/dist/css/ry-structure.css +739 -149
  29. package/dist/css/ry-theme.css +581 -180
  30. package/dist/css/ry-tokens.css +120 -24
  31. package/dist/css/ry-ui.css +4965 -1065
  32. package/dist/ry-ui.d.ts +9 -0
  33. package/dist/ry-ui.d.ts.map +1 -1
  34. package/dist/ry-ui.js +1309 -778
  35. package/dist/ry-ui.js.map +1 -1
  36. package/dist/themes/dark.css +7 -90
  37. package/dist/themes/light.css +6 -35
  38. package/dist/themes/ocean.css +22 -26
  39. package/docs/components/accordion.md +31 -0
  40. package/docs/components/button-group.md +36 -0
  41. package/docs/components/button.md +65 -0
  42. package/docs/components/color.md +84 -0
  43. package/docs/components/display.md +69 -0
  44. package/docs/components/drawer.md +36 -0
  45. package/docs/components/dropdown.md +33 -0
  46. package/docs/components/forms.md +90 -0
  47. package/docs/components/knob.md +42 -0
  48. package/docs/components/layout.md +217 -0
  49. package/docs/components/modal.md +38 -0
  50. package/docs/components/number-select.md +42 -0
  51. package/docs/components/slider.md +48 -0
  52. package/docs/components/tabs.md +30 -0
  53. package/docs/components/theme-toggle.md +36 -0
  54. package/docs/components/toast.md +27 -0
  55. package/docs/components/tooltip.md +14 -0
  56. package/docs/components/tree.md +46 -0
  57. package/docs/theming.md +182 -0
  58. package/package.json +8 -4
  59. package/USING_CDN.md +0 -591
package/docs/theming.md ADDED
@@ -0,0 +1,182 @@
1
+ # ry-ui Theming Guide
2
+
3
+ ## Built-in Themes
4
+
5
+ Set on `<html>`:
6
+ ```html
7
+ <html data-ry-theme="light"> <!-- light | dark | ocean -->
8
+ ```
9
+
10
+ Toggle at runtime:
11
+ ```html
12
+ <ry-theme-toggle themes="light,dark"></ry-theme-toggle>
13
+ ```
14
+
15
+ Or programmatically:
16
+ ```js
17
+ document.documentElement.setAttribute('data-ry-theme', 'dark');
18
+ ```
19
+
20
+ ## Dark Mode
21
+
22
+ Dark mode is built into the base bundle via `light-dark()` + `color-scheme`. No extra files needed.
23
+
24
+ ```html
25
+ <!-- This is all you need — dark mode works automatically -->
26
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/css/ry-ui.css">
27
+ ```
28
+
29
+ Without a `data-ry-theme` attribute, the OS preference is respected automatically. Setting `data-ry-theme="dark"` forces dark mode.
30
+
31
+ ## Token Override (Quickest Customization)
32
+
33
+ Use the full bundle, override specific tokens:
34
+
35
+ ```css
36
+ :root {
37
+ --ry-color-primary: oklch(0.541 0.218 293);
38
+ --ry-color-primary-hover: oklch(0.491 0.234 292);
39
+ --ry-radius-md: 0;
40
+ --ry-radius-lg: 0;
41
+ }
42
+ ```
43
+
44
+ > **Note:** Tokens use `oklch()` color values. Hex still works for overrides but won't participate in `light-dark()` automatic switching. For dark-aware overrides, use `light-dark()`:
45
+ > ```css
46
+ > :root {
47
+ > --ry-color-primary: light-dark(oklch(0.541 0.218 293), oklch(0.65 0.2 293));
48
+ > }
49
+ > ```
50
+
51
+ ## Custom Theme (Full Control)
52
+
53
+ Load structure only, bring your own visuals:
54
+
55
+ ```html
56
+ <link rel="stylesheet" href="https://unpkg.com/@ryanhelsing/ry-ui/css/ry-structure.css">
57
+ <link rel="stylesheet" href="/your-tokens.css">
58
+ <link rel="stylesheet" href="/your-theme.css">
59
+ ```
60
+
61
+ Structure CSS has layout only — no colors, shadows, borders. Your theme provides all visuals.
62
+
63
+ ## Token Reference
64
+
65
+ ### Colors
66
+
67
+ All color tokens use `oklch()` and `light-dark()` for automatic dark mode:
68
+
69
+ ```css
70
+ --ry-color-primary: light-dark(oklch(0.623 0.188 259.8), oklch(0.714 0.143 254.6));
71
+ --ry-color-primary-hover: light-dark(oklch(0.546 0.215 262.9), oklch(0.623 0.188 259.8));
72
+ --ry-color-primary-active: light-dark(oklch(0.488 0.217 264.4), oklch(0.546 0.215 262.9));
73
+ --ry-color-secondary: light-dark(oklch(0.554 0.041 257.4), oklch(0.714 0.035 253.3));
74
+ --ry-color-success: light-dark(oklch(0.723 0.192 149.6), oklch(0.723 0.192 149.6));
75
+ --ry-color-warning: light-dark(oklch(0.769 0.165 70.1), oklch(0.769 0.165 70.1));
76
+ --ry-color-danger: light-dark(oklch(0.637 0.208 25.3), oklch(0.637 0.208 25.3));
77
+ --ry-color-info: light-dark(oklch(0.715 0.126 215.2), oklch(0.715 0.126 215.2));
78
+ --ry-color-text: light-dark(oklch(0.279 0.037 260), oklch(0.95 0.008 255));
79
+ --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.714 0.035 253.3));
80
+ --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.279 0.037 260));
81
+ --ry-color-bg: light-dark(oklch(1 0 0), oklch(0.205 0.027 261));
82
+ --ry-color-bg-subtle: light-dark(oklch(0.984 0.003 248.2), oklch(0.249 0.03 261));
83
+ --ry-color-bg-muted: light-dark(oklch(0.968 0.007 248.1), oklch(0.279 0.033 261));
84
+ --ry-color-border: light-dark(oklch(0.929 0.013 255.6), oklch(0.372 0.039 257.3));
85
+ --ry-color-overlay: light-dark(oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.7));
86
+ ```
87
+
88
+ ### Typography
89
+ ```css
90
+ --ry-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
91
+ --ry-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
92
+
93
+ /* Sizes */
94
+ --ry-text-xs: 0.75rem;
95
+ --ry-text-sm: 0.875rem;
96
+ --ry-text-base: 1rem;
97
+ --ry-text-lg: 1.125rem;
98
+ --ry-text-xl: 1.25rem;
99
+ --ry-text-2xl: 1.5rem;
100
+ --ry-text-3xl: 1.875rem;
101
+ --ry-text-4xl: 2.25rem;
102
+
103
+ /* Weights */
104
+ --ry-font-normal: 400;
105
+ --ry-font-medium: 500;
106
+ --ry-font-semibold: 600;
107
+ --ry-font-bold: 700;
108
+ ```
109
+
110
+ ### Spacing
111
+ ```css
112
+ --ry-space-0: 0;
113
+ --ry-space-1: 0.25rem;
114
+ --ry-space-2: 0.5rem;
115
+ --ry-space-3: 0.75rem;
116
+ --ry-space-4: 1rem;
117
+ --ry-space-5: 1.25rem;
118
+ --ry-space-6: 1.5rem;
119
+ --ry-space-8: 2rem;
120
+ --ry-space-10: 2.5rem;
121
+ --ry-space-12: 3rem;
122
+ --ry-space-16: 4rem;
123
+ --ry-space-20: 5rem;
124
+ ```
125
+
126
+ ### Border Radius
127
+ ```css
128
+ --ry-radius-none: 0;
129
+ --ry-radius-sm: 0.25rem;
130
+ --ry-radius-md: 0.375rem;
131
+ --ry-radius-lg: 0.5rem;
132
+ --ry-radius-xl: 0.75rem;
133
+ --ry-radius-2xl: 1rem;
134
+ --ry-radius-full: 9999px;
135
+ ```
136
+
137
+ ### Shadows
138
+
139
+ Shadows use sub-tokens for dark-mode-aware intensity:
140
+
141
+ ```css
142
+ --ry-shadow-color: light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.4));
143
+ --ry-shadow-sm: 0 1px 2px 0 var(--ry-shadow-color-sm);
144
+ --ry-shadow-md: 0 4px 6px -1px var(--ry-shadow-color), 0 2px 4px -2px var(--ry-shadow-color);
145
+ --ry-shadow-lg: 0 10px 15px -3px var(--ry-shadow-color), 0 4px 6px -4px var(--ry-shadow-color);
146
+ --ry-shadow-xl: 0 20px 25px -5px var(--ry-shadow-color), 0 8px 10px -6px var(--ry-shadow-color);
147
+ ```
148
+
149
+ ### Transitions
150
+ ```css
151
+ --ry-duration-fast: 100ms;
152
+ --ry-duration-normal: 200ms;
153
+ --ry-duration-slow: 300ms;
154
+ --ry-ease: cubic-bezier(0.4, 0, 0.2, 1);
155
+ --ry-ease-in: cubic-bezier(0.4, 0, 1, 1);
156
+ --ry-ease-out: cubic-bezier(0, 0, 0.2, 1);
157
+ ```
158
+
159
+ ### Z-Index Layers
160
+ ```css
161
+ --ry-z-dropdown: 1000;
162
+ --ry-z-sticky: 1020;
163
+ --ry-z-fixed: 1030;
164
+ --ry-z-modal-backdrop: 1040;
165
+ --ry-z-modal: 1050;
166
+ --ry-z-popover: 1060;
167
+ --ry-z-tooltip: 1070;
168
+ --ry-z-toast: 1080;
169
+ ```
170
+
171
+ ### Focus
172
+ ```css
173
+ --ry-focus-ring: 0 0 0 3px light-dark(oklch(0.623 0.188 259.8 / 0.5), oklch(0.714 0.143 254.6 / 0.5));
174
+ ```
175
+
176
+ ## Best Practices
177
+
178
+ - Always use `--ry-*` tokens instead of hardcoding values
179
+ - Use `var(--ry-color-text)` and `var(--ry-color-bg)` on your own elements to stay theme-consistent
180
+ - Semantic colors (`success`, `warning`, `danger`, `info`) are available as both `--ry-color-*` tokens and component `variant`/`type`/`color` attributes
181
+ - For inline styles, reference tokens: `style="color: var(--ry-color-text-muted); padding: var(--ry-space-4);"`
182
+ - Set `background: var(--ry-color-bg); color: var(--ry-color-text);` on `<body>` for full-page theme support
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ryanhelsing/ry-ui",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Framework-agnostic, Light DOM web components. CSS is the source of truth.",
5
5
  "type": "module",
6
6
  "main": "./dist/ry-ui.js",
@@ -16,15 +16,19 @@
16
16
  },
17
17
  "files": [
18
18
  "dist",
19
- "USING_CDN.md"
19
+ "AGENT.md",
20
+ "AGENTS.md",
21
+ "docs/components",
22
+ "docs/theming.md"
20
23
  ],
21
24
  "scripts": {
22
25
  "dev": "vite",
23
26
  "build": "vite build && npm run build:types && npm run build:css",
24
27
  "build:types": "tsc --emitDeclarationOnly",
25
- "build:css": "mkdir -p dist/css && cp src/css/*.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
28
+ "build:css": "mkdir -p dist/css && node -e \"const fs=require('fs'); const files=['src/css/ry-tokens.css','src/css/ry-structure.css','src/css/ry-theme.css']; const out=files.map(f=>fs.readFileSync(f,'utf8')).join('\\n'); fs.writeFileSync('dist/css/ry-ui.css',out);\" && cp src/css/ry-tokens.css src/css/ry-structure.css src/css/ry-theme.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
26
29
  "preview": "vite preview",
27
- "typecheck": "tsc --noEmit"
30
+ "typecheck": "tsc --noEmit",
31
+ "release": "npm run build && git add -A && git diff-index --quiet HEAD || git commit -m 'new build' && npm version patch && npm publish --access public"
28
32
  },
29
33
  "devDependencies": {
30
34
  "typescript": "^5.7.2",