@vellira-ui/tokens 2.54.0 → 2.56.0

package/README.md

@@ -2,18 +2,25 @@
 
 Shared design tokens for Vellira.
 
-This package is the single source of truth for primitive colors, semantic colors, component tokens, typography, spacing, radius, shadows, and z-index values used by both the Web and React Native packages.
+This package is the single source of truth for primitive colors, semantic
+tokens, component tokens, typography, spacing, radius, shadows, and z-index
+values used by both the React and React Native packages.
+
+## Installation
+
+```bash
+pnpm add @vellira-ui/tokens
+```
 
 ## Features
 
 - Shared design tokens
 - Semantic color system
 - Renderer-neutral theme objects
+- Component-level tokens
 - Generated CSS variables
 - TypeScript-first API
 
----
-
 ## Usage
 
 ```ts
@@ -30,7 +37,7 @@ theme.semantic.border.default;
 theme.semantic.status.success.fg;
 
 theme.components.button.primary.solid.default.bg;
-theme.components.input.default.bg; // may be a hex color or transparent
+theme.components.input.default.bg;
 
 theme.tokens.typography.family.regular;
 theme.tokens.spacing[4];
@@ -41,22 +48,27 @@ darkTheme.name;
 highContrastTheme.name;
 ```
 
----
-
-## Semantic Color Tokens
+## Semantic Tokens
 
-The package provides semantic color groups in addition to the base palette.
+The package provides semantic groups that describe intent instead of coupling
+components to raw palette values.
 
 Current semantic groups include:
 
-- `surface`
-- `text`
+- `action`
 - `border`
-- `status`
-- `focus`
+- `control`
 - `divider`
+- `focus`
+- `icons`
+- `menu`
 - `navigation`
+- `overlay`
+- `shadow`
 - `skeleton`
+- `status`
+- `surface`
+- `text`
 
 Example:
 
@@ -73,27 +85,29 @@ theme.semantic.status.success.fg;
 theme.semantic.status.error.fg;
 ```
 
-Using semantic tokens instead of raw palette values makes components easier to maintain and prepares the design system for future theming.
-
----
+Using semantic tokens instead of raw palette values keeps component styling
+consistent across renderers and themes.
 
 ## Component Tokens
 
-Component tokens define renderer-neutral values for component states.
+Component tokens define renderer-neutral values for component states and
+surfaces.
 
 ```ts
 theme.components.button.primary.solid.default.bg;
 theme.components.input.focus.border;
 theme.components.dropdown.content.bg;
+theme.components.popover.content.bg;
+theme.components.modal.content.bg;
+theme.components.tooltip.content.bg;
 ```
 
-Color-like component tokens may use either hex colors or the literal `transparent` when the intended rendered value is transparent.
-
----
+Color-like component tokens may use either colors or the literal `transparent`
+when the intended rendered value is transparent.
 
 ## CSS Variables
 
-Generated CSS variables are available for Web projects.
+Generated CSS variables are available for web projects:
 
 ```ts
 import '@vellira-ui/tokens/css';
@@ -109,7 +123,12 @@ Examples:
 --button-primary-solid-default-bg
 ```
 
----
+## Documentation
+
+- [Design Tokens](https://docs.vellira.dev/design-system/tokens)
+- [Theme Architecture](https://docs.vellira.dev/design-system/theme-architecture)
+- [React](https://docs.vellira.dev/react/)
+- [React Native](https://docs.vellira.dev/react-native/)
 
 ## Development
 
@@ -119,28 +138,23 @@ Build the package:
 pnpm --filter @vellira-ui/tokens build
 ```
 
-The build generates:
-
-- TypeScript declarations
-- CSS variables
-- distributable artifacts
-
-Token path unions, CSS variable name unions, and theme structure types are generated from the token source files:
+Token path unions, CSS variable name unions, and theme structure types are
+generated from the token source files:
 
 ```bash
 pnpm --filter @vellira-ui/tokens generate:types
 ```
 
-Use `generate:types:check` or the package test script to verify the generated token types are up to date.
+Verify that generated token types are up to date:
 
----
+```bash
+pnpm --filter @vellira-ui/tokens generate:types:check
+```
 
 ## Principles
 
-The token system follows a few core principles:
-
 - Semantic tokens over hardcoded colors
-- Shared across Web and React Native
+- Shared across React and React Native
 - Stable public API
 - Predictable naming
-- Easy future support for multiple themes
+- Theme-ready architecture

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@vellira-ui/tokens",
-  "version": "2.54.0",
+  "version": "2.56.0",
   "description": "Design tokens for Vellira Design System",
+  "keywords": [
+    "vellira",
+    "design-tokens",
+    "design-system",
+    "theming",
+    "css-variables",
+    "typescript",
+    "react",
+    "react-native"
+  ],
   "author": "Roman Bakurov",
   "license": "MIT",
   "repository": {
@@ -9,6 +19,10 @@
     "url": "git+https://github.com/vellira-dev/vellira.git",
     "directory": "packages/tokens"
   },
+  "homepage": "https://vellira.dev",
+  "bugs": {
+    "url": "https://github.com/vellira-dev/vellira/issues"
+  },
   "private": false,
   "type": "module",
   "sideEffects": [