@yuva-devlab/tokens 0.1.0 → 0.1.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @yuva-devlab/tokens@0.1.0 build /home/runner/work/yuva-devlab-workspace/yuva-devlab-workspace/packages/tokens
+> @yuva-devlab/tokens@0.1.2 build /home/runner/work/yuva-devlab-design-system/yuva-devlab-design-system/packages/tokens
 > vite build
 
 vite v7.2.4 building client environment for production...
@@ -11,8 +11,8 @@ rendering chunks...
 computing gzip size...
 dist/tokens.css  9.42 kB │ gzip: 2.19 kB
 dist/index.js    7.43 kB │ gzip: 1.55 kB
-[vite:dts] Declaration files built in 1050ms.
+[vite:dts] Declaration files built in 998ms.
 
 dist/tokens.css  9.42 kB │ gzip: 2.19 kB
 dist/index.cjs   6.95 kB │ gzip: 1.59 kB
-✓ built in 1.41s
+✓ built in 1.37s

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @yuva-devlab/tokens
 
+## 0.1.2
+
+### Patch Changes
+
+- 38c0267: Migrate CLI to ESM, replace StyleX with Vanilla Extract, and
+  standardize documentation
+
+  CLI now uses ES modules for better compatibility with modern tools like Chalk
+  v5. Component templates have been updated to use Vanilla Extract instead of
+  StyleX, matching the actual project implementation. All package READMEs now
+  show consistent examples for npm, yarn, and pnpm.
+
+  Breaking: CLI requires Node.js 18+ for ESM support
+
+## 0.1.1
+
+### Patch Changes
+
+- 2cc8dcf: Complete documentation rewrite with comprehensive examples and API
+  reference
+
 ## 0.1.0
 
 ### Minor Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yuva Devlab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,56 +1,214 @@
 # 🎨 @yuva-devlab/tokens
 
-Design system tokens implemented using **Vanilla Extract**.
+[![npm version](https://img.shields.io/npm/v/@yuva-devlab/tokens.svg)](https://www.npmjs.com/package/@yuva-devlab/tokens)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
-These tokens power:
+> Design system tokens built with Vanilla Extract, providing a comprehensive
+> foundation for consistent UI development.
 
-- Tonal Palettes (Automated generation)
-- Semantic Colors (Natural / Organic theme)
-- Spacing (Systemic 2xs-5xl scales)
-- Typography (Scale-based)
-- Radii & Shadows
-- Breakpoints & Z-indices
+## Features
 
----
+- 🎨 **Automated Tonal Palettes** - Material Design 3 inspired color generation
+- 🌓 **Light/Dark Themes** - Semantic color tokens that adapt to theme
+- 📏 **Systematic Spacing** - Consistent scale from 2xs to 5xl
+- 📝 **Typography Scale** - Harmonious type system
+- 🎯 **Zero Runtime** - All tokens compiled to CSS variables at build time
+- 🔒 **Type-Safe** - Full TypeScript autocomplete for all tokens
 
-## 📁 Folder Structure
+## Installation
 
 ```bash
-packages/tokens/
-├── src/
-│   ├── utils/          # Token generation logic
-│   ├── palettes.css.ts # Global tonal palettes
-│   ├── themes.css.ts   # Semantic light/dark mappings
-│   ├── spacing.css.ts  # Spacing scales
-│   ├── typography.css.ts # Type scales
-│   └── index.ts        # Entry point
-└── README.md
+# npm
+npm install @yuva-devlab/tokens
+
+# yarn
+yarn add @yuva-devlab/tokens
+
+# pnpm
+pnpm add @yuva-devlab/tokens
 ```
 
----
+**Zero runtime dependencies** - All tokens are compiled to static CSS at build
+time.
+
+## Token Categories
+
+### Colors
 
-## 🚀 Key Technical Features
+- **Tonal Palettes** - 13-shade palettes for primary, secondary, tertiary,
+  neutral, and error
+- **Semantic Colors** - Theme-aware tokens (background, surface, primary, etc.)
+- **State Colors** - Hover, active, and disabled states
 
-### 1. Automated Tonal Palettes
+### Spacing
 
-We use a single source of truth (`SEEDS`) to generate mathematically consistent
-MD3 tonal palettes.
+- **Scale**: `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`
+- **Values**: 4px to 96px in systematic increments
 
-### 2. Zero-Runtime CSS
+### Typography
 
-Vanilla Extract compiles these tokens into static CSS variables at build time,
-ensuring maximum performance with type-safety.
+- **Sizes**: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`
+- **Weights**: `light`, `regular`, `medium`, `semibold`, `bold`
+- **Line Heights**: Optimized for readability
 
----
+### Other Tokens
 
-## How UI library uses tokens
+- **Border Radius**: `sm`, `md`, `lg`, `xl`, `full`
+- **Shadows**: `sm`, `md`, `lg`, `xl`
+- **Z-Index**: Layered system for overlays, modals, tooltips
+- **Breakpoints**: Responsive design breakpoints
+
+## Usage
+
+### In Vanilla Extract
 
 ```ts
 import { vars } from "@yuva-devlab/tokens";
 import { style } from "@vanilla-extract/css";
 
-export const componentStyle = style({
-  backgroundColor: vars.colors.primary,
-  padding: vars.spacing.md,
+export const card = style({
+  backgroundColor: vars.colors.surface,
+  padding: vars.spacing.lg,
+  borderRadius: vars.radii.md,
+  boxShadow: vars.shadows.sm,
+
+  // Typography
+  fontSize: vars.typography.size.md,
+  lineHeight: vars.typography.lineHeight.md,
+
+  // Responsive
+  "@media": {
+    [vars.breakpoints.md]: {
+      padding: vars.spacing.xl,
+    },
+  },
 });
 ```
+
+### Importing CSS
+
+```tsx
+// Import compiled CSS in your app entry point
+import "@yuva-devlab/tokens/tokens.css";
+```
+
+### Using CSS Variables Directly
+
+```css
+.my-component {
+  background-color: var(--colors-surface);
+  padding: var(--spacing-md);
+  border-radius: var(--radii-md);
+}
+```
+
+## Color System
+
+### Tonal Palettes
+
+Each color has 13 shades (0-100 in increments of 10):
+
+```ts
+import { vars } from "@yuva-devlab/tokens";
+
+// Primary palette
+vars.palettes.primary[0]; // Lightest
+vars.palettes.primary[50]; // Mid-tone
+vars.palettes.primary[100]; // Darkest
+
+// Available palettes:
+// - primary (Natural green)
+// - secondary
+// - tertiary
+// - neutral
+// - neutralVariant
+// - error
+```
+
+### Semantic Colors
+
+Theme-aware tokens that automatically adapt:
+
+```ts
+vars.colors.background; // Page background
+vars.colors.surface; // Card/panel background
+vars.colors.primary; // Primary brand color
+vars.colors.onPrimary; // Text on primary
+vars.colors.secondary; // Secondary color
+vars.colors.error; // Error state
+vars.colors.outline; // Borders
+```
+
+## Spacing System
+
+```ts
+import { vars } from "@yuva-devlab/tokens";
+
+vars.spacing["2xs"]; // 4px
+vars.spacing.xs; // 8px
+vars.spacing.sm; // 12px
+vars.spacing.md; // 16px
+vars.spacing.lg; // 24px
+vars.spacing.xl; // 32px
+vars.spacing["2xl"]; // 48px
+vars.spacing["3xl"]; // 64px
+vars.spacing["4xl"]; // 80px
+vars.spacing["5xl"]; // 96px
+```
+
+## Typography
+
+```ts
+import { vars } from "@yuva-devlab/tokens";
+
+// Sizes
+vars.typography.size.xs; // 12px
+vars.typography.size.sm; // 14px
+vars.typography.size.md; // 16px
+vars.typography.size.lg; // 18px
+vars.typography.size.xl; // 20px
+vars.typography.size["2xl"]; // 24px
+vars.typography.size["3xl"]; // 30px
+vars.typography.size["4xl"]; // 36px
+vars.typography.size["5xl"]; // 48px
+
+// Weights
+vars.typography.weight.light; // 300
+vars.typography.weight.regular; // 400
+vars.typography.weight.medium; // 500
+vars.typography.weight.semibold; // 600
+vars.typography.weight.bold; // 700
+```
+
+## Development
+
+```bash
+# Build tokens
+pnpm --filter @yuva-devlab/tokens build
+
+# Watch mode
+pnpm --filter @yuva-devlab/tokens dev
+```
+
+## Architecture
+
+```
+Color Seeds (HSL)
+      ↓
+Tonal Palette Generation (MD3 algorithm)
+      ↓
+Semantic Token Mapping (Light/Dark)
+      ↓
+CSS Variables (Compiled by Vanilla Extract)
+      ↓
+Your Components
+```
+
+## Related Packages
+
+- [@yuva-devlab/colors](../colors) - Palette generation utility
+- [@yuva-devlab/ui](../ui) - Components using these tokens
+
+## License
+
+MIT © Yuva Devlab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuva-devlab/tokens",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -23,10 +23,10 @@
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
-    "@yuva-devlab/eslint-config": "0.1.0",
-    "@yuva-devlab/colors": "0.1.0",
-    "@yuva-devlab/prettier-config": "0.1.0",
-    "@yuva-devlab/typescript-config": "0.1.0"
+    "@yuva-devlab/colors": "0.1.2",
+    "@yuva-devlab/eslint-config": "0.1.1",
+    "@yuva-devlab/prettier-config": "0.1.1",
+    "@yuva-devlab/typescript-config": "0.1.1"
   },
   "dependencies": {
     "@vanilla-extract/css": "^1.17.4"