@hellboy/ds 0.1.2

package/README.md

@@ -0,0 +1,111 @@
+# Hellboy Design System - Core
+
+Base package for the Hellboy Design System containing foundational components, tokens, and styling utilities.
+
+## 📦 Package Contents
+
+### Tokens
+- **Colors**: Primary, neutral, and semantic colors
+- **Typography**: Font families, sizes, weights, and line heights
+- **Spacing**: Consistent spacing scale
+
+### Foundations
+- **Global Reset**: Base HTML and element resets
+- **Utilities**: Helper functions for style injection
+
+### Components
+- **Button**: Accessible interactive component with multiple variants and sizes (powered by AriaKit)
+
+## 🚀 Getting Started
+
+### Installation
+
+```bash
+npm install @hellboy-ds/core @ariakit/react react react-dom
+```
+
+### Usage
+
+```tsx
+import { Button, injectGlobalStyles } from '@hellboy-ds/core';
+
+// Inject global styles once at app initialization
+injectGlobalStyles();
+
+// Use the Button component
+export function App() {
+  return (
+    <div>
+      <Button>Primary Button</Button>
+      <Button variant="secondary">Secondary Button</Button>
+      <Button variant="tertiary">Tertiary Button</Button>
+      <Button size="lg">Large Button</Button>
+      <Button isLoading>Loading...</Button>
+      <Button disabled>Disabled Button</Button>
+    </div>
+  );
+}
+```
+
+## 🎨 Customization
+
+All tokens are exported and can be imported directly:
+
+```tsx
+import { colors, typography, spacing } from '@hellboy-ds/core';
+
+// Use tokens in your components
+const customStyle = {
+  color: colors.primary,
+  fontSize: typography.fontSize.lg,
+  padding: spacing[4],
+};
+```
+
+## 📝 Building
+
+```bash
+npm run build      # Build the package
+npm run dev        # Watch mode
+npm run clean      # Clean dist directory
+```
+
+## 📋 Features
+
+- ✅ Built with AriaKit for accessibility
+- ✅ Full ARIA support out of the box
+- ✅ CSS-in-JS styling with inline tokens
+- ✅ Strongly typed TypeScript components
+- ✅ Consistent design tokens system
+- ✅ Semantic color palette
+- ✅ Responsive and accessible components
+- ✅ Loading and disabled states
+
+## 🔄 Component Variants
+
+### Button Variants
+- `primary` - Main action button
+- `secondary` - Alternative action button
+- `tertiary` - Low emphasis action button
+
+### Button Sizes
+- `sm` - Small (32px height)
+- `md` - Medium (40px height) - default
+- `lg` - Large (48px height)
+
+### Button Props
+- `variant` - Button style variant
+- `size` - Button size
+- `isLoading` - Show loading spinner
+- `disabled` - Disable the button
+- `fullWidth` - Make button full width
+- All standard AriaKit button attributes are supported
+
+## ♿ Accessibility
+
+All components are built with accessibility in mind:
+- Full keyboard navigation support
+- ARIA attributes automatically managed
+- Screen reader friendly
+- Focus management
+- Semantic HTML