@vellira-ui/tokens 2.19.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Roman Bakurov
+
+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

@@ -0,0 +1,146 @@
+# @vellira-ui/tokens
+
+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.
+
+## Features
+
+- Shared design tokens
+- Semantic color system
+- Renderer-neutral theme objects
+- Generated CSS variables
+- TypeScript-first API
+
+---
+
+## Usage
+
+```ts
+import {
+  darkTheme,
+  highContrastTheme,
+  lightTheme,
+  theme,
+} from '@vellira-ui/tokens';
+
+theme.semantic.surface.default;
+theme.semantic.text.primary;
+theme.semantic.border.default;
+theme.semantic.status.success.fg;
+
+theme.components.button.primary.default.bg;
+theme.components.input.default.bg; // may be a hex color or transparent
+
+theme.tokens.typography.family.regular;
+theme.tokens.spacing[4];
+theme.tokens.radius.md;
+
+lightTheme.name;
+darkTheme.name;
+highContrastTheme.name;
+```
+
+---
+
+## Semantic Color Tokens
+
+The package provides semantic color groups in addition to the base palette.
+
+Current semantic groups include:
+
+- `surface`
+- `text`
+- `border`
+- `status`
+- `focus`
+- `divider`
+- `navigation`
+- `skeleton`
+
+Example:
+
+```ts
+theme.semantic.surface.default;
+theme.semantic.surface.elevated;
+
+theme.semantic.text.primary;
+theme.semantic.text.secondary;
+
+theme.semantic.border.default;
+
+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.
+
+---
+
+## Component Tokens
+
+Component tokens define renderer-neutral values for component states.
+
+```ts
+theme.components.button.primary.default.bg;
+theme.components.input.focus.border;
+theme.components.dropdown.content.bg;
+```
+
+Color-like component tokens may use either hex colors or the literal `transparent` when the intended rendered value is transparent.
+
+---
+
+## CSS Variables
+
+Generated CSS variables are available for Web projects.
+
+```ts
+import '@vellira-ui/tokens/css';
+```
+
+Examples:
+
+```css
+--color-mono-0
+--surface-default
+--text-primary
+--border-default
+--button-primary-default-bg
+```
+
+---
+
+## Development
+
+Build the package:
+
+```bash
+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:
+
+```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.
+
+---
+
+## Principles
+
+The token system follows a few core principles:
+
+- Semantic tokens over hardcoded colors
+- Shared across Web and React Native
+- Stable public API
+- Predictable naming
+- Easy future support for multiple themes