@westayltd/design-tokens 0.3.0 → 0.3.2

package/colors.json

@@ -14,7 +14,7 @@
       "900": "#4D4D4D",
       "800": "#636363",
       "700": "#757575",
-      "600": "#909090",
+      "600": "#919191",
       "500": "#A9A9A9",
       "400": "#C0C0C0",
       "300": "#DCDCDC",
@@ -88,14 +88,15 @@
       "100": "#F7EEDD"
     },
     "link": {
-      "800": "#255965",
-      "700": "#246B7A",
-      "600": "#258495",
-      "500": "#2CAFBE",
-      "400": "#45C0CB",
-      "300": "#80D9E0",
-      "200": "#B4E9ED",
-      "100": "#D7F4F6"
+      "800": "#204CAD",
+      "700": "#1F5ED6",
+      "600": "#2774E9",
+      "500": "#3D92F4",
+      "400": "#62B1F8",
+      "300": "#94CDFC",
+      "200": "#C0E0FD",
+      "100": "#DBEDFE",
+      "50": "#EFF7FF"
     },
     "paleSteel": {
       "800": "#202236",
@@ -107,17 +108,6 @@
       "200": "#E8E8ED",
       "100": "#F9F9FB"
     },
-    "label": {
-      "800": "#204CAD",
-      "700": "#1F5ED6",
-      "600": "#2774E9",
-      "500": "#3D92F4",
-      "400": "#62B1F8",
-      "300": "#94CDFC",
-      "200": "#C0E0FD",
-      "100": "#DBEDFE",
-      "50": "#EFF7FF"
-    },
     "loyalty": {
       "900": "#482B54",
       "800": "#5F3672",
@@ -168,6 +158,10 @@
       "body": "#4D4D4D",
       "secondary": "#757575",
       "tertiary": "#A9A9A9"
+    },
+    "borderColors": {
+      "DEFAULT": "#E5E5E5",
+      "dark": "#4D4D4D"
     }
   },
 

package/dist/index.cjs

@@ -41,7 +41,7 @@ var colors_default = {
       "900": "#4D4D4D",
       "800": "#636363",
       "700": "#757575",
-      "600": "#909090",
+      "600": "#919191",
       "500": "#A9A9A9",
       "400": "#C0C0C0",
       "300": "#DCDCDC",

package/dist/index.js

@@ -15,7 +15,7 @@ var colors_default = {
       "900": "#4D4D4D",
       "800": "#636363",
       "700": "#757575",
-      "600": "#909090",
+      "600": "#919191",
       "500": "#A9A9A9",
       "400": "#C0C0C0",
       "300": "#DCDCDC",

package/package.json

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

package/README.md

@@ -1,213 +0,0 @@
-# @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