@slimkhemiri/react-design-system 0.1.11 → 0.1.12
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 +78 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -128,12 +128,82 @@ export function SlimDesignSystemProvider({ children }: { children: React.ReactNo
|
|
|
128
128
|
|
|
129
129
|
Currently exported:
|
|
130
130
|
|
|
131
|
-
- `SlimAlert`
|
|
132
|
-
- `SlimBadge`
|
|
133
|
-
- `SlimButton`
|
|
134
|
-
- `SlimCheckbox` (`onSlimChange` → `CustomEvent<boolean>`)
|
|
135
|
-
- `SlimInput` (`onSlimChange` → `CustomEvent<string>`)
|
|
136
|
-
- `SlimSelect` (`onSlimChange` → `CustomEvent<string>`)
|
|
137
|
-
- `SlimSwitch` (`onSlimChange` → `CustomEvent<boolean>`)
|
|
138
|
-
- `SlimTextarea` (`onSlimChange` → `CustomEvent<string>`)
|
|
131
|
+
- `SlimAlert` - Info, success, warning, and danger alerts
|
|
132
|
+
- `SlimBadge` - Status badges with multiple variants
|
|
133
|
+
- `SlimButton` - Primary, secondary, ghost, and danger buttons with loading states
|
|
134
|
+
- `SlimCheckbox` - Checkbox input (`onSlimChange` → `CustomEvent<boolean>`)
|
|
135
|
+
- `SlimInput` - Text input with validation (`onSlimChange` → `CustomEvent<string>`)
|
|
136
|
+
- `SlimSelect` - Dropdown select (`onSlimChange` → `CustomEvent<string>`)
|
|
137
|
+
- `SlimSwitch` - Toggle switch (`onSlimChange` → `CustomEvent<boolean>`)
|
|
138
|
+
- `SlimTextarea` - Multi-line text input (`onSlimChange` → `CustomEvent<string>`)
|
|
139
|
+
- `SlimTooltip` - Contextual tooltip with multiple placements
|
|
140
|
+
- `SlimPlaygroundSidebar` - Collapsible sidebar navigation
|
|
141
|
+
|
|
142
|
+
## Design Tokens
|
|
143
|
+
|
|
144
|
+
Access design tokens in JavaScript for dynamic styling:
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
import { tokens } from "@slimkhemiri/tokens";
|
|
148
|
+
|
|
149
|
+
// Access base (light theme) tokens
|
|
150
|
+
const primaryColor = tokens.base['--sl-primary']; // "#581d74"
|
|
151
|
+
const spacing = tokens.base['--sl-space-4']; // "16px"
|
|
152
|
+
|
|
153
|
+
// Access theme-specific tokens
|
|
154
|
+
const darkSurface = tokens.themes.dark['--sl-surface']; // "#0b1220"
|
|
155
|
+
const hcPrimary = tokens.themes.hc['--sl-primary']; // "#fff"
|
|
156
|
+
|
|
157
|
+
// Use in your components
|
|
158
|
+
function MyComponent() {
|
|
159
|
+
return (
|
|
160
|
+
<div style={{
|
|
161
|
+
padding: spacing,
|
|
162
|
+
backgroundColor: primaryColor
|
|
163
|
+
}}>
|
|
164
|
+
Custom styled content
|
|
165
|
+
</div>
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### CSS Variables
|
|
171
|
+
|
|
172
|
+
All tokens are also available as CSS variables:
|
|
173
|
+
|
|
174
|
+
```css
|
|
175
|
+
.my-component {
|
|
176
|
+
/* Colors */
|
|
177
|
+
background: var(--sl-primary);
|
|
178
|
+
color: var(--sl-primary-contrast);
|
|
179
|
+
|
|
180
|
+
/* Spacing */
|
|
181
|
+
padding: var(--sl-space-4);
|
|
182
|
+
|
|
183
|
+
/* Typography */
|
|
184
|
+
font-size: var(--sl-font-size-2);
|
|
185
|
+
|
|
186
|
+
/* Border Radius */
|
|
187
|
+
border-radius: var(--sl-radius-1);
|
|
188
|
+
|
|
189
|
+
/* Transitions */
|
|
190
|
+
transition: all var(--sl-duration-fast);
|
|
191
|
+
}
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
## Theming
|
|
195
|
+
|
|
196
|
+
The design system supports three themes: Light (default), Dark, and High Contrast.
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
// Change theme dynamically
|
|
200
|
+
document.documentElement.dataset.theme = 'dark'; // or 'hc' for high contrast
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## Resources
|
|
204
|
+
|
|
205
|
+
- 📚 [Full Documentation](https://your-playground-url.com/documentation)
|
|
206
|
+
- 🎨 [Color Palette](https://your-playground-url.com/colors)
|
|
207
|
+
- 🧩 [Component Examples](https://your-playground-url.com/components)
|
|
208
|
+
- 📦 [NPM Package](https://www.npmjs.com/package/@slimkhemiri/react-design-system)
|
|
139
209
|
|