@westayltd/design-tokens 0.3.6 → 0.3.8

package/README.md

@@ -1,6 +1,6 @@
 # @westayltd/design-tokens
 
-A comprehensive design token system for Westay applications, providing consistent colors, spacing, typography, and radius values across the platform.
+Design token system for Westay applications — colors, spacing, typography, and radius.
 
 ## Installation
 
@@ -8,205 +8,21 @@ A comprehensive design token system for Westay applications, providing consisten
 npm install @westayltd/design-tokens
 ```
 
-## Usage
+## Usage in Frontend (westay-b2c-fe-web)
 
-### 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:
+After installing a new version, regenerate the Tailwind CSS variables:
 
 ```bash
-npm run dev
+npm run generate:tokens
 ```
 
-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
-```
+This reads `design-tokens/colors.json` and outputs `src/app/design-tokens.css`.
 
-## 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**
+Current version: **0.3.7**
 
 ## License
 

package/package.json

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