@westayltd/design-tokens 0.3.2 → 0.3.3

package/README.md

@@ -0,0 +1,213 @@
+# @westayltd/design-tokens
+
+A comprehensive design token system for Westay applications, providing consistent colors, spacing, typography, and radius values across the platform.
+
+## Installation
+
+```bash
+npm install @westayltd/design-tokens
+```
+
+## Usage
+
+### Import All Tokens
+
+```typescript
+import { tokens } from '@westayltd/design-tokens';
+
+// Access all tokens
+const brandColor = tokens.colors.light.brand.crimson[500];
+const spacing = tokens.spacing[4]; // "16px"
+const fontSize = tokens.typography.fontSize.base; // "16px"
+const borderRadius = tokens.radius.md; // "10px"
+```
+
+### Import Individual Token Files
+
+You can also import individual JSON files directly:
+
+```typescript
+import colors from '@westayltd/design-tokens/colors';
+import spacing from '@westayltd/design-tokens/spacing';
+import typography from '@westayltd/design-tokens/typography';
+import radius from '@westayltd/design-tokens/radius';
+```
+
+### TypeScript Support
+
+The package includes full TypeScript definitions:
+
+```typescript
+import { tokens, ThemeMode, Tokens } from '@westayltd/design-tokens';
+
+// Type-safe access
+const mode: ThemeMode = 'light';
+const color: string = tokens.colors[mode].brand.crimson[500];
+```
+
+## Available Tokens
+
+### Colors
+
+The color system supports both light and dark themes:
+
+```typescript
+import { tokens } from '@westayltd/design-tokens';
+
+// Light theme colors
+tokens.colors.light.brand.crimson[500]      // "#F17878"
+tokens.colors.light.brand.burgundy[500]     // "#D8A6AE"
+tokens.colors.light.brand.royals[500]       // "#004484"
+tokens.colors.light.brand.oldMoney[500]     // "#448E80"
+tokens.colors.light.surface.bg              // Background colors
+tokens.colors.light.text.primary            // Text colors
+tokens.colors.light.feedback.success        // Feedback colors
+
+// Dark theme colors
+tokens.colors.dark.brand.crimson[500]
+tokens.colors.dark.surface.bg
+tokens.colors.dark.text.primary
+```
+
+**Color Categories:**
+- **Brand**: Crimson, Burgundy, Royals, OldMoney
+- **Surface**: Background, subtle, raised, border colors
+- **Text**: Primary, secondary, muted, inverse
+- **Feedback**: Success, error, warning, info
+
+### Spacing
+
+Consistent spacing scale from 0 to 12:
+
+```typescript
+tokens.spacing[0]   // "0px"
+tokens.spacing[1]   // "4px"
+tokens.spacing[2]   // "8px"
+tokens.spacing[3]   // "12px"
+tokens.spacing[4]   // "16px"
+tokens.spacing[5]   // "20px"
+tokens.spacing[6]   // "24px"
+tokens.spacing[8]   // "32px"
+tokens.spacing[10]  // "40px"
+tokens.spacing[12]  // "48px"
+```
+
+### Typography
+
+Font families, sizes, weights, and line heights:
+
+```typescript
+// Font Family
+tokens.typography.fontFamily.sans  // ["Helvetica", "Arial", "sans-serif"]
+
+// Font Sizes
+tokens.typography.fontSize.xs      // "12px"
+tokens.typography.fontSize.sm      // "14px"
+tokens.typography.fontSize.base    // "16px"
+tokens.typography.fontSize.lg      // "18px"
+tokens.typography.fontSize.xl      // "20px"
+tokens.typography.fontSize['2xl']  // "24px"
+tokens.typography.fontSize['3xl']  // "30px"
+
+// Font Weights
+tokens.typography.fontWeight.regular  // "400"
+tokens.typography.fontWeight.medium   // "500"
+tokens.typography.fontWeight.semibold // "600"
+tokens.typography.fontWeight.bold     // "700"
+
+// Line Heights
+tokens.typography.lineHeight.tight    // "1.2"
+tokens.typography.lineHeight.normal   // "1.5"
+tokens.typography.lineHeight.relaxed   // "1.7"
+```
+
+### Radius
+
+Border radius values:
+
+```typescript
+tokens.radius.none  // "0px"
+tokens.radius.sm     // "6px"
+tokens.radius.md     // "10px"
+tokens.radius.lg     // "14px"
+tokens.radius.xl     // "20px"
+tokens.radius.full   // "9999px"
+```
+
+## Building the Package
+
+To build the package from source:
+
+```bash
+cd design-tokens
+npm install
+npm run build
+```
+
+This will:
+- Compile TypeScript to both CommonJS and ES Module formats
+- Generate TypeScript declaration files (`.d.ts`)
+- Generate source maps for debugging
+- Output files to the `dist/` directory
+
+### Development Mode
+
+For development with watch mode:
+
+```bash
+npm run dev
+```
+
+This will automatically rebuild when source files change.
+
+## Package Structure
+
+```
+design-tokens/
+├── colors.json          # Color tokens (light & dark themes)
+├── spacing.json         # Spacing scale
+├── typography.json      # Typography tokens
+├── radius.json          # Border radius tokens
+├── index.ts             # Main entry point
+├── tsconfig.json        # TypeScript configuration
+├── tsup.config.ts       # Build configuration
+├── package.json         # Package metadata
+└── dist/                # Built output
+    ├── index.js         # ES Module build
+    ├── index.cjs        # CommonJS build
+    ├── index.d.ts       # TypeScript declarations
+    └── *.map            # Source maps
+```
+
+## Exports
+
+The package exports:
+
+- **Main export**: `@westayltd/design-tokens` - Full tokens object with TypeScript types
+- **Colors**: `@westayltd/design-tokens/colors` - Colors JSON file
+- **Spacing**: `@westayltd/design-tokens/spacing` - Spacing JSON file
+- **Typography**: `@westayltd/design-tokens/typography` - Typography JSON file
+- **Radius**: `@westayltd/design-tokens/radius` - Radius JSON file
+
+## TypeScript Types
+
+The package exports the following TypeScript types:
+
+```typescript
+import type {
+  ThemeMode,    // "light" | "dark"
+  Tokens,       // Complete tokens object type
+  Colors,       // Colors type
+  Spacing,      // Spacing type
+  Typography,   // Typography type
+  Radius        // Radius type
+} from '@westayltd/design-tokens';
+```
+
+## Version
+
+Current version: **0.2.1**
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westayltd/design-tokens",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",