@cascivo/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 urbanisierung
+
+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,19 @@
+<!-- generated by scripts/readme/generate.ts — edit readme.body.md, not this file -->
+
+# @cascivo/tokens
+
+> Three-level CSS design tokens (primitive → semantic → component)
+
+[cascivo.com](https://cascivo.com) · [Docs](https://docs.cascivo.com) · [Storybook](https://storybook.cascivo.com) · [GitHub](https://github.com/urbanisierung/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`).
+
+## Install
+
+```sh
+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

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@cascivo/tokens",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Three-level CSS design tokens (primitive → semantic → component)",
+  "keywords": [
+    "cascivo",
+    "css",
+    "css-custom-properties",
+    "css-tokens",
+    "design-system",
+    "design-tokens",
+    "react",
+    "signals"
+  ],
+  "homepage": "https://github.com/urbanisierung/cascivo/tree/main/packages/tokens#readme",
+  "bugs": "https://github.com/urbanisierung/cascivo/issues",
+  "license": "MIT",
+  "author": "urbanisierung",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/urbanisierung/cascivo.git",
+    "directory": "packages/tokens"
+  },
+  "files": [
+    "src/**/*.css",
+    "src/**/*.ts",
+    "!src/**/*.test.ts"
+  ],
+  "exports": {
+    ".": "./src/index.css",
+    "./screens": "./src/screens.ts"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "echo 'tokens: CSS-only, no build'",
+    "test": "echo 'tokens: no tests yet'"
+  }
+}

package/readme.body.md

@@ -0,0 +1 @@
+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`).

package/src/functions.css

@@ -0,0 +1,26 @@
+/* packages/tokens/src/functions.css */
+/*
+ * CSS @function helpers — progressive enhancement only.
+ *
+ * Browser support: Chrome 133+ (2025). Firefox and Safari: not yet.
+ * Every consumer of these functions MUST provide a static fallback for the
+ * same property immediately before the @function call. The css-fallback
+ * audit script (scripts/checks/css-fallback.ts) enforces this contract.
+ *
+ * Authoring rules:
+ * - No recursion (banned by spec).
+ * - Single `result` per function.
+ * - Use calc() to defer numeric validation.
+ * - Defaults on all optional args.
+ * - No variable-spreading (not yet supported).
+ */
+
+@layer cascade.functions {
+  @function --cascivo-step(--n <number>, --base: 0.25rem) {
+    result: calc(var(--base) * var(--n));
+  }
+
+  @function --cascivo-scale(--n <number>, --ratio: 1.25, --base: 1rem) {
+    result: calc(var(--base) * var(--ratio) * var(--n));
+  }
+}

package/src/index.css

@@ -0,0 +1,269 @@
+/* packages/tokens/src/index.css */
+/* Cascade Design System — Primitive Tokens */
+/* These are raw values. Never use directly in components. Use semantic tokens. */
+
+@layer cascade.tokens {
+  :root {
+    /* ── Color Primitives ─────────────────────────────── */
+
+    /* Gray (near-achromatic, hue ≈ 264) */
+    --cascivo-gray-0: oklch(1 0 0);
+    --cascivo-gray-50: oklch(0.985 0.002 264);
+    --cascivo-gray-100: oklch(0.967 0.003 264);
+    --cascivo-gray-200: oklch(0.928 0.006 264);
+    --cascivo-gray-300: oklch(0.872 0.008 264);
+    --cascivo-gray-400: oklch(0.707 0.015 264);
+    --cascivo-gray-500: oklch(0.554 0.018 264);
+    --cascivo-gray-600: oklch(0.446 0.018 264);
+    --cascivo-gray-700: oklch(0.373 0.015 264);
+    --cascivo-gray-800: oklch(0.269 0.01 264);
+    --cascivo-gray-900: oklch(0.205 0.007 264);
+    --cascivo-gray-950: oklch(0.145 0.005 264);
+
+    /* Blue / accent (hue ≈ 250) */
+    --cascivo-blue-50: oklch(0.97 0.025 250);
+    --cascivo-blue-100: oklch(0.932 0.055 250);
+    --cascivo-blue-200: oklch(0.882 0.095 250);
+    --cascivo-blue-300: oklch(0.808 0.14 250);
+    --cascivo-blue-400: oklch(0.707 0.18 250);
+    --cascivo-blue-500: oklch(0.623 0.214 250);
+    --cascivo-blue-600: oklch(0.546 0.224 250);
+    --cascivo-blue-700: oklch(0.452 0.196 250);
+    --cascivo-blue-800: oklch(0.373 0.155 250);
+    --cascivo-blue-900: oklch(0.29 0.105 250);
+    --cascivo-blue-950: oklch(0.205 0.065 250);
+
+    /* Green (hue ≈ 145) */
+    --cascivo-green-50: oklch(0.982 0.018 145);
+    --cascivo-green-100: oklch(0.962 0.044 145);
+    --cascivo-green-200: oklch(0.925 0.084 145);
+    --cascivo-green-400: oklch(0.75 0.15 145);
+    --cascivo-green-500: oklch(0.648 0.15 145);
+    --cascivo-green-600: oklch(0.548 0.14 145);
+    --cascivo-green-700: oklch(0.448 0.12 145);
+    --cascivo-green-900: oklch(0.28 0.075 145);
+
+    /* Red (hue ≈ 22) */
+    --cascivo-red-50: oklch(0.971 0.013 22);
+    --cascivo-red-100: oklch(0.936 0.032 22);
+    --cascivo-red-200: oklch(0.885 0.062 22);
+    --cascivo-red-400: oklch(0.72 0.16 22);
+    --cascivo-red-500: oklch(0.628 0.188 22);
+    --cascivo-red-600: oklch(0.54 0.188 22);
+    --cascivo-red-700: oklch(0.448 0.17 22);
+    --cascivo-red-900: oklch(0.28 0.1 22);
+
+    /* Orange (hue ≈ 40) */
+    --cascivo-orange-50: oklch(0.98 0.02 75);
+    --cascivo-orange-100: oklch(0.96 0.045 75);
+    --cascivo-orange-400: oklch(0.82 0.13 60);
+    --cascivo-orange-500: oklch(0.768 0.145 55);
+    --cascivo-orange-600: oklch(0.68 0.155 50);
+
+    /* Yellow / amber (hue ≈ 75) */
+    --cascivo-yellow-50: oklch(0.987 0.026 95);
+    --cascivo-yellow-100: oklch(0.973 0.05 95);
+    --cascivo-yellow-400: oklch(0.868 0.145 80);
+    --cascivo-yellow-500: oklch(0.768 0.145 75);
+
+    /* Warm neutrals */
+    --cascivo-warm-50: oklch(0.982 0.008 80);
+    --cascivo-warm-100: oklch(0.962 0.016 80);
+    --cascivo-warm-200: oklch(0.92 0.025 78);
+    --cascivo-warm-300: oklch(0.87 0.035 75);
+    --cascivo-warm-400: oklch(0.76 0.045 70);
+    --cascivo-warm-500: oklch(0.64 0.045 65);
+    --cascivo-warm-600: oklch(0.52 0.04 60);
+    --cascivo-warm-700: oklch(0.42 0.03 55);
+    --cascivo-warm-800: oklch(0.31 0.022 50);
+    --cascivo-warm-900: oklch(0.21 0.015 50);
+
+    /* ── Spacing ──────────────────────────────────────── */
+    --cascivo-space-0: 0px;
+    --cascivo-space-1: 0.25rem; /* 4px */
+    --cascivo-space-2: 0.5rem; /* 8px */
+    --cascivo-space-3: 0.75rem; /* 12px */
+    --cascivo-space-4: 1rem; /* 16px */
+    --cascivo-space-5: 1.25rem; /* 20px */
+    --cascivo-space-6: 1.5rem; /* 24px */
+    --cascivo-space-8: 2rem; /* 32px */
+    --cascivo-space-10: 2.5rem; /* 40px */
+    --cascivo-space-12: 3rem; /* 48px */
+    --cascivo-space-16: 4rem; /* 64px */
+    --cascivo-space-20: 5rem; /* 80px */
+    --cascivo-space-24: 6rem; /* 96px */
+
+    /* ── Typography ───────────────────────────────────── */
+    --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;
+
+    --cascivo-text-xs: 0.75rem; /* 12px */
+    --cascivo-text-sm: 0.875rem; /* 14px */
+    --cascivo-text-base: 1rem; /* 16px */
+    --cascivo-text-lg: 1.125rem; /* 18px */
+    --cascivo-text-xl: 1.25rem; /* 20px */
+    --cascivo-text-2xl: 1.5rem; /* 24px */
+    --cascivo-text-3xl: 1.875rem; /* 30px */
+
+    --cascivo-font-normal: 400;
+    --cascivo-font-medium: 500;
+    --cascivo-font-semibold: 600;
+    --cascivo-font-bold: 700;
+
+    --cascivo-leading-none: 1;
+    --cascivo-leading-tight: 1.25;
+    --cascivo-leading-snug: 1.375;
+    --cascivo-leading-normal: 1.5;
+    --cascivo-leading-relaxed: 1.625;
+
+    --cascivo-tracking-tight: -0.025em;
+    --cascivo-tracking-normal: 0em;
+    --cascivo-tracking-wide: 0.025em;
+
+    /* ── Border Radius — Primitive ───────────────────── */
+    --cascivo-radius-none: 0px;
+    --cascivo-radius-sm: 0.25rem; /* 4px */
+    --cascivo-radius-md: 0.375rem; /* 6px */
+    --cascivo-radius-lg: 0.5rem; /* 8px */
+    --cascivo-radius-xl: 0.75rem; /* 12px */
+    --cascivo-radius-2xl: 1rem; /* 16px */
+    --cascivo-radius-full: 9999px;
+
+    /* ── Border Radius — Semantic (one-knob; themes retune --cascivo-radius-base only) ── */
+    --cascivo-radius-base: 0.375rem; /* 6px controls */
+    --cascivo-radius-control: var(--cascivo-radius-base);
+    --cascivo-radius-field: var(--cascivo-radius-base);
+    --cascivo-radius-item: calc(var(--cascivo-radius-base) * 0.66); /* ~4px menu/list rows */
+    --cascivo-radius-surface: calc(var(--cascivo-radius-base) * 1.66); /* ~10px cards */
+    --cascivo-radius-overlay: calc(var(--cascivo-radius-base) * 2); /* ~12px modals/popovers */
+    --cascivo-radius-indicator: calc(var(--cascivo-radius-base) / 2);
+
+    /* ── 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);
+    --cascivo-shadow-md: 0 2px 8px oklch(0 0 0 / 0.07), 0 1px 2px oklch(0 0 0 / 0.04);
+    --cascivo-shadow-overlay: 0 4px 32px oklch(0 0 0 / 0.16), 0 0 0 1px oklch(0 0 0 / 0.04);
+    /* legacy aliases — keep existing component CSS working */
+    --cascivo-shadow-lg: var(--cascivo-shadow-overlay);
+    --cascivo-shadow-xl: var(--cascivo-shadow-overlay);
+
+    /* ── Focus Ring — soft halo (≥3:1 contrast) ──────── */
+    --cascivo-ring-width: 3px;
+    --cascivo-ring-offset: 0px;
+    --cascivo-ring-color: color-mix(
+      in oklch,
+      var(--cascivo-color-accent, oklch(0.623 0.214 250)) 55%,
+      transparent
+    );
+
+    /* ── Primary — semantic defaults (themes override) ── */
+    --cascivo-color-primary: oklch(0.205 0 0);
+    --cascivo-color-primary-fg: oklch(0.985 0 0);
+    --cascivo-color-primary-hover: oklch(0.27 0 0);
+    --cascivo-color-primary-active: oklch(0.32 0 0);
+    --cascivo-color-active-bg: oklch(0.145 0.005 264 / 6%);
+
+    /* ── Density Controls ────────────────────────────── */
+    /* Button is the height reference — all interactive controls derive from these.  */
+    /* Coarse pointer: use --cascivo-target-min-coarse (2.75rem/44px) via min-block-size. */
+    --cascivo-control-height-sm: 2rem; /* 32px — Button sm */
+    --cascivo-control-height-md: 2.5rem; /* 40px — Button md */
+    --cascivo-control-height-lg: 3rem; /* 48px — Button lg */
+
+    /* ── Semantic Borders ────────────────────────────── */
+    --cascivo-border-subtle: oklch(0.928 0.006 264);
+    --cascivo-border-default: oklch(0.872 0.008 264);
+    --cascivo-border-strong: oklch(0.707 0.015 264);
+
+    /* ── Animation ────────────────────────────────────── */
+    --cascivo-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --cascivo-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --cascivo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --cascivo-duration-75: 75ms;
+    --cascivo-duration-100: 100ms;
+    --cascivo-duration-150: 150ms;
+    --cascivo-duration-200: 200ms;
+    --cascivo-duration-300: 300ms;
+    --cascivo-duration-500: 500ms;
+
+    /* Semantic motion — components reference intent, themes tune character */
+    --cascivo-motion-enter: var(--cascivo-duration-200) var(--cascivo-ease-out);
+    --cascivo-motion-exit: var(--cascivo-duration-150) var(--cascivo-ease-in);
+    --cascivo-motion-emphasis: var(--cascivo-duration-300) var(--cascivo-ease-in-out);
+
+    /* ── Chart Categorical Color Ramp ───────────────── */
+    --cascivo-chart-1: oklch(0.74 0.13 70); /* Okabe-Ito orange #E69F00 */
+    --cascivo-chart-2: oklch(0.74 0.11 240); /* Okabe-Ito sky blue #56B4E9 */
+    --cascivo-chart-3: oklch(0.66 0.13 165); /* Okabe-Ito bluish green #009E73 */
+    --cascivo-chart-4: oklch(0.93 0.16 100); /* Okabe-Ito yellow #F0E442 */
+    --cascivo-chart-5: oklch(0.5 0.13 250); /* Okabe-Ito blue #0072B2 */
+    --cascivo-chart-6: oklch(0.6 0.16 40); /* Okabe-Ito vermillion #D55E00 */
+    --cascivo-chart-7: oklch(0.66 0.12 350); /* Okabe-Ito reddish purple #CC79A7 */
+    --cascivo-chart-8: oklch(0.55 0.02 280); /* neutral grey (screen adaptation) */
+    --cascivo-chart-grid: var(--cascivo-gray-200);
+    --cascivo-chart-axis: var(--cascivo-gray-400);
+
+    /* ── Brand (apps/logo/OG only — never used in component CSS) ── */
+    --cascivo-brand-primary: oklch(
+      0.55 0.15 240
+    ); /* cascade blue — hero, CTA, logo gradient start */
+    --cascivo-brand-accent: oklch(0.72 0.13 195); /* flow teal — gradient end, accents */
+    --cascivo-brand-ink: oklch(
+      0.22 0.03 250
+    ); /* near-black cool — wordmark, body on brand surface */
+    --cascivo-brand-paper: oklch(0.99 0.005 250); /* off-white brand surface */
+    --cascivo-brand-gradient-start: oklch(0.55 0.15 240);
+    --cascivo-brand-gradient-end: oklch(0.72 0.13 195);
+
+    /* ── Z-Index ──────────────────────────────────────── */
+    --cascivo-z-base: 0;
+    --cascivo-z-raised: 10;
+    --cascivo-z-dropdown: 100;
+    --cascivo-z-overlay: 200;
+    --cascivo-z-modal: 300;
+    --cascivo-z-toast: 400;
+    --cascivo-z-tooltip: 500;
+
+    /* ── Shell ──────────────────────────────────────────── */
+    --cascivo-shell-header-block-size: 3rem;
+    --cascivo-shell-panel-inline-size: 20rem;
+    --cascivo-shell-aside-inline-size: 18rem;
+
+    /* ── Breakpoint Scale ────────────────────────────── */
+    /* Breakpoints are a lint-guarded constant. Use these exact values in @media/@container;    */
+    /* do NOT invent off-scale widths. @media/@container CANNOT read these custom properties — */
+    /* copy the numeric value. Canonical scale: sm=30rem md=40rem lg=64rem xl=80rem            */
+    /* Lint: scripts/checks/breakpoint.test.ts — added in v20-t2.                              */
+    --cascivo-screen-sm: 30rem; /* 480px — small phone/narrow viewport                      */
+    --cascivo-screen-md: 40rem; /* 640px — tablet/wide phone (load-bearing: columns/grid/header) */
+    --cascivo-screen-lg: 64rem; /* 1024px — desktop (load-bearing: app-shell drawer)         */
+    --cascivo-screen-xl: 80rem; /* 1280px — wide desktop                                    */
+
+    /* ── Fluid Typography ────────────────────────────── */
+    /* Additive fluid variants — fixed tokens are preserved as the static fallback.            */
+    /* 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 */
+
+    /* ── Coarse-pointer touch target ─────────────────── */
+    /* Controls should reach this minimum under @media (pointer: coarse) — added in v20-t3.   */
+    --cascivo-target-min-coarse: 2.75rem; /* 44px — Apple HIG comfortable touch target        */
+  }
+
+  /* All cascade motion derives from the duration tokens, so collapsing them
+     disables every transition/animation library-wide. Continuous progress
+     indicators (Spinner) use literal durations and opt out deliberately. */
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --cascivo-duration-75: 0.01ms;
+      --cascivo-duration-100: 0.01ms;
+      --cascivo-duration-150: 0.01ms;
+      --cascivo-duration-200: 0.01ms;
+      --cascivo-duration-300: 0.01ms;
+      --cascivo-duration-500: 0.01ms;
+    }
+  }
+}
+
+@import './functions.css';

package/src/screens.ts

@@ -0,0 +1,28 @@
+/**
+ * Canonical breakpoint scale for cascivo.
+ *
+ * These match the --cascivo-screen-* CSS custom properties in index.css.
+ * Use SCREEN.*.px for matchMedia and Playwright numeric widths.
+ * Use minWidth() / maxWidth() to build matchMedia strings.
+ *
+ * CSS @media/@container CANNOT read var() — copy the rem value directly.
+ * The breakpoint:check lint (scripts/checks/breakpoint.test.ts) guards drift.
+ */
+export const SCREEN = {
+  sm: { rem: '30rem', px: 480 },
+  md: { rem: '40rem', px: 640 },
+  lg: { rem: '64rem', px: 1024 },
+  xl: { rem: '80rem', px: 1280 },
+} as const
+
+export type ScreenKey = keyof typeof SCREEN
+
+/** Returns a min-width matchMedia string, e.g. '(min-width: 64rem)' */
+export function minWidth(bp: ScreenKey): string {
+  return `(min-width: ${SCREEN[bp].rem})`
+}
+
+/** Returns a max-width matchMedia string, e.g. '(max-width: 64rem)' */
+export function maxWidth(bp: ScreenKey): string {
+  return `(max-width: ${SCREEN[bp].rem})`
+}