@camtomlabs/malix-design-system 0.1.6 → 0.2.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.
- package/README.md +39 -0
- package/dist/index.cjs +472 -217
- package/dist/index.d.cts +148 -80
- package/dist/index.d.ts +148 -80
- package/dist/index.js +470 -218
- package/package.json +15 -9
- package/src/styles.css +225 -55
- package/src/tokens.css +84 -18
- package/src/tokens.registry.json +34 -0
- package/stylelint.config.cjs +56 -0
- package/tailwind.preset.js +173 -0
package/README.md
CHANGED
|
@@ -43,6 +43,27 @@ export function MyPage() {
|
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
+
## Theme Provider
|
|
47
|
+
|
|
48
|
+
Malix includes a React theme provider for managing dark mode:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { MalixThemeProvider, useMalixTheme } from '@camtomlabs/malix-design-system';
|
|
52
|
+
|
|
53
|
+
// Wrap your app
|
|
54
|
+
<MalixThemeProvider defaultTheme="system">
|
|
55
|
+
<App />
|
|
56
|
+
</MalixThemeProvider>
|
|
57
|
+
|
|
58
|
+
// Use in any component
|
|
59
|
+
function ThemeToggle() {
|
|
60
|
+
const { theme, toggleTheme } = useMalixTheme();
|
|
61
|
+
return <button onClick={toggleTheme}>{theme}</button>;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Supported themes: `'light'` | `'dark'` | `'system'`
|
|
66
|
+
|
|
46
67
|
## Design Tokens
|
|
47
68
|
|
|
48
69
|
Malix uses a CSS custom-property token system for colors, spacing, typography, and radius. You can also import the tokens stylesheet separately:
|
|
@@ -57,6 +78,24 @@ Or access the token registry programmatically:
|
|
|
57
78
|
import { tokenRegistry } from '@camtomlabs/malix-design-system';
|
|
58
79
|
```
|
|
59
80
|
|
|
81
|
+
### Quick Reference
|
|
82
|
+
|
|
83
|
+
| Category | Tokens |
|
|
84
|
+
|----------|--------|
|
|
85
|
+
| **Surfaces** | `--malix-surface`, `--malix-surface-secondary`, `--malix-surface-elevated` |
|
|
86
|
+
| **Card** | `--malix-card-bg`, `--malix-card-border`, `--malix-card-radius` |
|
|
87
|
+
| **Input** | `--malix-input-bg`, `--malix-input-border` |
|
|
88
|
+
| **Nav** | `--malix-nav-bg`, `--malix-nav-height` |
|
|
89
|
+
| **Text** | `--malix-foreground`, `--malix-foreground-secondary`, `--malix-foreground-tertiary` |
|
|
90
|
+
| **Primary** | `--malix-primary-bg`, `--malix-primary-hover`, `--malix-primary-active`, `--malix-primary-foreground` |
|
|
91
|
+
| **Semantic** | `--malix-success`, `--malix-warning`, `--malix-error`, `--malix-info` (each with `-light` and `-foreground`) |
|
|
92
|
+
| **Spacing** | `--malix-space-xs` (4px) through `--malix-space-3xl` (48px) |
|
|
93
|
+
| **Radius** | `--malix-radius-sm` (4px) through `--malix-radius-pill` (9999px) |
|
|
94
|
+
| **Typography** | `--malix-text-xs` (12px) through `--malix-text-display` (responsive) |
|
|
95
|
+
| **Layout** | `--malix-container-sm` (640px) through `--malix-container-xl` (1280px) |
|
|
96
|
+
| **Z-Index** | `--malix-z-dropdown` (100) through `--malix-z-notification` (600) |
|
|
97
|
+
| **Shadows** | `--malix-shadow-card-l1` / `l2` / `l3`, `--malix-shadow-overlay`, `--malix-shadow-tooltip` |
|
|
98
|
+
|
|
60
99
|
## Components
|
|
61
100
|
|
|
62
101
|
### Atoms
|