@cascivo/tokens 0.2.0 → 0.3.0

package/README.md

@@ -1,12 +1,56 @@
 <!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
 
-# @cascivo/tokens
+<div align="center">
+  <a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="72" height="72" alt="cascivo logo"></a>
+  <h1>@cascivo/tokens</h1>
+  <p><strong>Three-level CSS design tokens (primitive → semantic → component)</strong></p>
 
-> Three-level CSS design tokens (primitive → semantic → component)
+[![npm](https://img.shields.io/npm/v/%40cascivo%2Ftokens?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/tokens)
+[![downloads](https://img.shields.io/npm/dm/%40cascivo%2Ftokens?style=flat-square&color=0079bf)](https://www.npmjs.com/package/@cascivo/tokens)
+[![license](https://img.shields.io/npm/l/%40cascivo%2Ftokens?style=flat-square&color=0079bf)](https://github.com/cascivo/cascivo/blob/main/LICENSE)
+![types](https://img.shields.io/badge/types-included-0079bf?style=flat-square&logo=typescript&logoColor=white)
 
-[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo)
+[npm](https://www.npmjs.com/package/@cascivo/tokens) · [cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo)
 
-CSS design tokens for cascade — primitive, semantic, and component-level custom properties in a three-level system. Primitive tokens define the raw scale; semantic tokens map intent (`--cascivo-color-accent`); component tokens map usage (`--cascivo-button-bg`).
+</div>
+
+---
+
+A three-level system of CSS custom properties that every cascivo component, theme, and chart reads from.
+
+```
+Primitive  --cascivo-color-blue-500: #3b82f6         the raw scale
+    ↓
+Semantic   --cascivo-color-accent: var(--…-blue-500)  intent (themes remap this layer)
+    ↓
+Component  --cascivo-button-bg: var(--…-accent)       usage (override per-brand)
+```
+
+## Usage
+
+Import once at your app entry — or get tokens for free via `@cascivo/themes`, which self-imports this package:
+
+```ts
+import '@cascivo/tokens'
+```
+
+Then reference tokens anywhere in your CSS:
+
+```css
+.cta {
+  background: var(--cascivo-color-accent);
+  padding-block: var(--cascivo-space-3);
+  border-radius: var(--cascivo-radius-md);
+}
+```
+
+## How the layers compose
+
+- **Primitive** tokens define the raw palette, spacing, radius, and type scales. They never change between themes.
+- **Semantic** tokens map intent (`--cascivo-color-accent`, `--cascivo-color-surface`). [`@cascivo/themes`](https://github.com/cascivo/cascivo/tree/main/packages/themes) overrides **only** this layer via `data-theme`.
+- **Component** tokens map usage (`--cascivo-button-bg`). Override these to adapt a single component to your brand — no rebuild, no theme fork.
+
+A machine-readable catalog of every token, its layer, and its resolved default ships as `tokens.catalog.json`, so AI agents select from a closed set rather than inventing values.
 
 ## Install
 
@@ -16,4 +60,6 @@ pnpm add @cascivo/tokens
 
 ---
 
-[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/urbanisierung/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/urbanisierung/cascivo/blob/main/registry.json) · MIT
+[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/cascivo/cascivo) · AI agents: use [`@cascivo/mcp`](https://github.com/cascivo/cascivo/tree/main/packages/mcp) and [`registry.json`](https://github.com/cascivo/cascivo/blob/main/registry.json) · MIT
+
+<div align="center"><a href="https://cascivo.com"><img src="https://cascivo.com/favicon.svg" width="28" height="28" alt="cascivo"></a></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/tokens",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "description": "Three-level CSS design tokens (primitive → semantic → component)",
   "keywords": [
@@ -13,13 +13,13 @@
     "react",
     "signals"
   ],
-  "homepage": "https://github.com/urbanisierung/cascivo/tree/main/packages/tokens#readme",
-  "bugs": "https://github.com/urbanisierung/cascivo/issues",
+  "homepage": "https://github.com/cascivo/cascivo/tree/main/packages/tokens#readme",
+  "bugs": "https://github.com/cascivo/cascivo/issues",
   "license": "MIT",
   "author": "urbanisierung",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/urbanisierung/cascivo.git",
+    "url": "git+https://github.com/cascivo/cascivo.git",
     "directory": "packages/tokens"
   },
   "files": [
@@ -30,6 +30,8 @@
   ],
   "exports": {
     ".": "./src/index.css",
+    "./functions": "./src/functions.css",
+    "./functions.css": "./src/functions.css",
     "./screens": "./src/screens.ts",
     "./tokens.json": "./tokens.json",
     "./tokens": {

package/readme.body.md

@@ -1 +1,35 @@
-CSS design tokens for cascade — primitive, semantic, and component-level custom properties in a three-level system. Primitive tokens define the raw scale; semantic tokens map intent (`--cascivo-color-accent`); component tokens map usage (`--cascivo-button-bg`).
+A three-level system of CSS custom properties that every cascivo component, theme, and chart reads from.
+
+```
+Primitive  --cascivo-color-blue-500: #3b82f6         the raw scale
+    ↓
+Semantic   --cascivo-color-accent: var(--…-blue-500)  intent (themes remap this layer)
+    ↓
+Component  --cascivo-button-bg: var(--…-accent)       usage (override per-brand)
+```
+
+## Usage
+
+Import once at your app entry — or get tokens for free via `@cascivo/themes`, which self-imports this package:
+
+```ts
+import '@cascivo/tokens'
+```
+
+Then reference tokens anywhere in your CSS:
+
+```css
+.cta {
+  background: var(--cascivo-color-accent);
+  padding-block: var(--cascivo-space-3);
+  border-radius: var(--cascivo-radius-md);
+}
+```
+
+## How the layers compose
+
+- **Primitive** tokens define the raw palette, spacing, radius, and type scales. They never change between themes.
+- **Semantic** tokens map intent (`--cascivo-color-accent`, `--cascivo-color-surface`). [`@cascivo/themes`](https://github.com/cascivo/cascivo/tree/main/packages/themes) overrides **only** this layer via `data-theme`.
+- **Component** tokens map usage (`--cascivo-button-bg`). Override these to adapt a single component to your brand — no rebuild, no theme fork.
+
+A machine-readable catalog of every token, its layer, and its resolved default ships as `tokens.catalog.json`, so AI agents select from a closed set rather than inventing values.

package/src/index.css

@@ -97,6 +97,11 @@
     --cascivo-font-sans:
       ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --cascivo-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+    /* Display = the headline/brand face a theme may override (terminal, brutalist,
+       arcade …). Defaults to the sans stack, so themes that do not override it look
+       unchanged. sans/mono remain the body/code defaults. Per-theme overrides live in
+       each theme file (declared in all themes to satisfy token parity). */
+    --cascivo-font-display: var(--cascivo-font-sans);
 
     --cascivo-text-xs: 0.75rem; /* 12px */
     --cascivo-text-sm: 0.875rem; /* 14px */
@@ -105,6 +110,7 @@
     --cascivo-text-xl: 1.25rem; /* 20px */
     --cascivo-text-2xl: 1.5rem; /* 24px */
     --cascivo-text-3xl: 1.875rem; /* 30px */
+    --cascivo-text-4xl: 2.25rem; /* 36px */
 
     --cascivo-font-normal: 400;
     --cascivo-font-medium: 500;
@@ -139,6 +145,10 @@
     --cascivo-radius-overlay: calc(var(--cascivo-radius-base) * 2); /* ~12px modals/popovers */
     --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
 
+    /* ── Interaction state opacity (HeroUI layout-token parity; themes may retune) ── */
+    --cascivo-disabled-opacity: 0.5;
+    --cascivo-hover-opacity: 0.8;
+
     /* ── Shadows — rationed: surfaces flat/xs, floating layers get ONE soft shadow ── */
     --cascivo-shadow-xs: 0 1px 2px oklch(0 0 0 / 0.05);
     --cascivo-shadow-sm: 0 1px 3px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
@@ -245,6 +255,7 @@
     /* clamp(min, vw-slope, max) where max = current fixed value so desktop ceiling is frozen. */
     --cascivo-text-2xl-fluid: clamp(1.25rem, 1rem + 1.25vw, 1.5rem); /* 20→24px */
     --cascivo-text-3xl-fluid: clamp(1.5rem, 1.125rem + 1.875vw, 1.875rem); /* 24→30px */
+    --cascivo-text-4xl-fluid: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem); /* 30→36px */
 
     /* ── Coarse-pointer touch target ─────────────────── */
     /* Controls should reach this minimum under @media (pointer: coarse) — added in v20-t3.   */
@@ -266,4 +277,11 @@
   }
 }
 
-@import './functions.css';
+/*
+ * CSS @function helpers (--cascivo-step / --cascivo-scale) are NOT imported here.
+ * They are a Chrome-133+ progressive-enhancement pilot and are unparseable by
+ * current CSS minifiers (lightningcss / Tailwind v4), which choke on `@function`
+ * and drop the rule. Every call site ships a static fallback, so omitting them is
+ * always correct. Opt in explicitly if your build pipeline supports @function:
+ *   import '@cascivo/tokens/functions.css'
+ */

package/src/tokens.d.ts

@@ -88,6 +88,7 @@ export type CascivoToken =
   | '--cascivo-control-height-lg'
   | '--cascivo-control-height-md'
   | '--cascivo-control-height-sm'
+  | '--cascivo-disabled-opacity'
   | '--cascivo-duration-100'
   | '--cascivo-duration-150'
   | '--cascivo-duration-200'
@@ -99,6 +100,7 @@ export type CascivoToken =
   | '--cascivo-ease-out'
   | '--cascivo-focus-ring'
   | '--cascivo-font-bold'
+  | '--cascivo-font-display'
   | '--cascivo-font-medium'
   | '--cascivo-font-mono'
   | '--cascivo-font-normal'
@@ -124,6 +126,7 @@ export type CascivoToken =
   | '--cascivo-green-600'
   | '--cascivo-green-700'
   | '--cascivo-green-900'
+  | '--cascivo-hover-opacity'
   | '--cascivo-leading-none'
   | '--cascivo-leading-normal'
   | '--cascivo-leading-relaxed'
@@ -199,6 +202,8 @@ export type CascivoToken =
   | '--cascivo-text-2xl-fluid'
   | '--cascivo-text-3xl'
   | '--cascivo-text-3xl-fluid'
+  | '--cascivo-text-4xl'
+  | '--cascivo-text-4xl-fluid'
   | '--cascivo-text-base'
   | '--cascivo-text-lg'
   | '--cascivo-text-sm'

package/tokens.json

@@ -1072,6 +1072,20 @@
     "value": "var(--cascivo-duration-150) var(--cascivo-ease-in)",
     "canonical": true
   },
+  {
+    "name": "--cascivo-disabled-opacity",
+    "category": "other",
+    "role": "disabled-opacity",
+    "value": "0.5",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-hover-opacity",
+    "category": "other",
+    "role": "hover-opacity",
+    "value": "0.8",
+    "canonical": true
+  },
   {
     "name": "--cascivo-radius-2xl",
     "category": "radius",
@@ -1380,6 +1394,13 @@
     "value": "700",
     "canonical": true
   },
+  {
+    "name": "--cascivo-font-display",
+    "category": "typography",
+    "role": "font-display",
+    "value": "var(--cascivo-font-sans)",
+    "canonical": true
+  },
   {
     "name": "--cascivo-font-medium",
     "category": "typography",
@@ -1478,6 +1499,20 @@
     "value": "clamp(1.5rem, 1.125rem + 1.875vw, 1.875rem)",
     "canonical": true
   },
+  {
+    "name": "--cascivo-text-4xl",
+    "category": "typography",
+    "role": "text-4xl",
+    "value": "2.25rem",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-4xl-fluid",
+    "category": "typography",
+    "role": "text-4xl-fluid",
+    "value": "clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem)",
+    "canonical": true
+  },
   {
     "name": "--cascivo-text-base",
     "category": "typography",