-
-
-
+
+ Completed
-
-
-
-
+
+
+```
+
+### 6. Accessibility
+
+- Always include proper `alt` text for images
+- Use semantic HTML (`
+
+
+```
+
+### Custom Styling
+
+You can extend components using CSS custom properties:
-
-
-
-
-
+```css
+.my-custom-button {
+ /* Inherit button styles */
+ composes: button button-primary;
+
+ /* Override with custom properties */
+ --Colors-Base-Primary-700: #custom-color;
+}
```
-#### Buttons
-```html
-
-
+### Responsive Design
-
-
-
-
+Use standard CSS media queries with design tokens:
-
-Link Button
+```css
+@media (max-width: 768px) {
+ .responsive-box {
+ padding: var(--UI-Spacing-spacing-s);
+ }
+}
```
-### MODAL COMPONENTS
+---
+
+## Best Practices
+
+### 1. Token Usage
-#### Basic Modal
+✅ **DO:**
+```css
+color: var(--Colors-Text-Body-Default);
+padding: var(--UI-Spacing-spacing-m);
+border-radius: var(--UI-Radius-radius-m);
+```
+
+❌ **DON'T:**
+```css
+color: #333;
+padding: 16px;
+border-radius: 8px;
+```
+
+### 2. Component Classes
+
+✅ **DO:**
```html
-
-
-
-
+
```
-## CUSTOMIZATION
+❌ **DON'T:**
+```html
+
+```
-### CSS Custom Properties
-You can override any CSS custom property to customize the appearance:
+### 3. Dark Mode
+
+✅ **DO:** Use semantic tokens (automatic dark mode)
+```css
+background: var(--Colors-Backgrounds-Main-Default);
+```
+❌ **DON'T:** Use hardcoded colors
```css
-.bespoke {
- /* Override colors */
- --bespoke-bg: #f0f0f0;
- --bespoke-fg: #333333;
- --bespoke-accent: #ff6b6b;
+background: #ffffff;
+```
- /* Override spacing */
- --bespoke-space-lg: 1.5rem;
+### 4. File Loading Order
- /* Override border radius */
- --bespoke-radius-lg: 12px;
-}
+✅ **DO:** Load foundations before components
+```html
+
+
+
+
+
+
+
```
-### Available Custom Properties
-
-#### Colors
-- `--bespoke-bg`: Background color
-- `--bespoke-fg`: Text color
-- `--bespoke-muted`: Muted text color
-- `--bespoke-box`: Container/surface background
-- `--bespoke-stroke`: Border color
-- `--bespoke-danger`: Error/danger color
-- `--bespoke-accent`: Accent/primary color
-- `--bespoke-control-bg`: Input/button background
-- `--bespoke-control-border`: Input/button border
-- `--bespoke-control-focus`: Focus ring color
-
-#### Spacing
-- `--bespoke-space-xs`: 0.25rem
-- `--bespoke-space-sm`: 0.5rem
-- `--bespoke-space-md`: 0.75rem
-- `--bespoke-space-lg`: 1rem
-- `--bespoke-space-xl`: 1.5rem
-- `--bespoke-space-2xl`: 2rem
-
-#### Border Radius
-- `--bespoke-radius-sm`: 4px
-- `--bespoke-radius-md`: 6px
-- `--bespoke-radius-lg`: 8px
-- `--bespoke-radius-xl`: 12px
-
-#### Shadows
-- `--bespoke-shadow-sm`: Small shadow
-- `--bespoke-shadow-md`: Medium shadow
-- `--bespoke-shadow-lg`: Large shadow
-- `--bespoke-shadow-xl`: Extra large shadow
-
-## THEME SUPPORT
-
-### Automatic Dark Mode
-The framework automatically detects the user's system preference and switches between light and dark themes. No additional configuration is needed.
-
-## INTEGRATION EXAMPLES
-
-### Database Designer
+### 5. Icon Usage
+
+✅ **DO:**
```html
-
-
-
-
-
-
-
-
-
+
```
-## BEST PRACTICES
-1. **Always wrap in `.bespoke`**: This prevents style conflicts with the parent site
-2. **Use semantic HTML**: Combine with proper HTML elements for accessibility
-3. **Customize via CSS variables**: Don't modify the core CSS file
-4. **Test in both themes**: Ensure your app works in light and dark modes
+❌ **DON'T:** Use inline SVG or img tags for icons
+```html
+DB Schema Designer
- -Ready
-
-
-
-
-
+```
+
+### 6. Accessibility
+
+- Always include proper `alt` text for images
+- Use semantic HTML (`