@cascivo/tokens 0.3.2 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/tokens",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "private": false,
   "description": "Three-level CSS design tokens (primitive → semantic → component)",
   "keywords": [
@@ -30,6 +30,8 @@
   ],
   "exports": {
     ".": "./src/index.css",
+    "./properties": "./src/properties.css",
+    "./properties.css": "./src/properties.css",
     "./functions": "./src/functions.css",
     "./functions.css": "./src/functions.css",
     "./screens": "./src/screens.ts",

package/src/index.css

@@ -127,6 +127,26 @@
     --cascivo-tracking-normal: 0em;
     --cascivo-tracking-wide: 0.025em;
 
+    /* ── Typography roles (semantic) ───────────────────
+       Purpose-named type tokens. Each resolves to exactly ONE primitive size
+       above, so "what size is a button label?" has exactly one answer:
+       --cascivo-text-ui. These tokens carry size only; pair them with the
+       recommended weight/leading in docs/cookbooks/derivable-theming.md. */
+    --cascivo-text-display: var(--cascivo-text-4xl); /* hero / marketing display */
+    --cascivo-text-heading-lg: var(--cascivo-text-3xl); /* page title (h1) */
+    --cascivo-text-heading-md: var(--cascivo-text-2xl); /* section heading (h2) */
+    --cascivo-text-heading-sm: var(--cascivo-text-xl); /* subsection heading (h3) */
+    --cascivo-text-body: var(--cascivo-text-base); /* default body copy */
+    --cascivo-text-body-sm: var(--cascivo-text-sm); /* secondary / dense body copy */
+    --cascivo-text-ui: var(
+      --cascivo-text-sm
+    ); /* control & button labels (the canonical "ui.default") */
+    --cascivo-text-label: var(--cascivo-text-sm); /* form field labels */
+    --cascivo-text-caption: var(--cascivo-text-xs); /* captions, helper text, metadata */
+    --cascivo-text-code: var(
+      --cascivo-text-sm
+    ); /* inline code / mono (pair with --cascivo-font-mono) */
+
     /* ── Border Radius — Primitive ───────────────────── */
     --cascivo-radius-none: 0px;
     --cascivo-radius-sm: 0.25rem; /* 4px */

package/src/properties.css

@@ -0,0 +1,76 @@
+/* packages/tokens/src/properties.css */
+/* cascivo — @property registrations for themeable color custom properties.
+ *
+ * Registering the themeable color tokens as typed custom properties (<color>,
+ * inherits) buys two things:
+ *   1. Smooth interpolation when [data-theme] changes under a transition.
+ *   2. A typed substrate for future @container style() palette branching.
+ *
+ * Only *themeable* color props are registered (the values a theme overrides or
+ * that animate), not the whole primitive scale. Registration sets the property
+ * type + initial value; theme blocks still override the value as usual.
+ *
+ * Imported by @cascivo/themes/all.css (and safe to import standalone). @property
+ * is a top-level at-rule and intentionally lives outside @layer.
+ */
+
+@property --cascivo-color-accent {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.52 0.2 250);
+}
+@property --cascivo-color-accent-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.45 0.2 250);
+}
+@property --cascivo-color-accent-active {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.373 0.155 250);
+}
+@property --cascivo-color-primary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.205 0 0);
+}
+@property --cascivo-color-primary-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.27 0 0);
+}
+@property --cascivo-color-primary-active {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.32 0 0);
+}
+@property --cascivo-color-secondary {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.92 0.004 264);
+}
+@property --cascivo-color-secondary-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.86 0.006 264);
+}
+@property --cascivo-color-destructive {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.54 0.188 22);
+}
+@property --cascivo-color-destructive-hover {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(0.448 0.17 22);
+}
+@property --cascivo-color-text-on-accent {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}
+@property --cascivo-color-text-on-destructive {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: oklch(1 0 0);
+}

package/src/tokens.d.ts

@@ -226,8 +226,18 @@ export type CascivoToken =
   | '--cascivo-text-4xl'
   | '--cascivo-text-4xl-fluid'
   | '--cascivo-text-base'
+  | '--cascivo-text-body'
+  | '--cascivo-text-body-sm'
+  | '--cascivo-text-caption'
+  | '--cascivo-text-code'
+  | '--cascivo-text-display'
+  | '--cascivo-text-heading-lg'
+  | '--cascivo-text-heading-md'
+  | '--cascivo-text-heading-sm'
+  | '--cascivo-text-label'
   | '--cascivo-text-lg'
   | '--cascivo-text-sm'
+  | '--cascivo-text-ui'
   | '--cascivo-text-xl'
   | '--cascivo-text-xs'
   | '--cascivo-tracking-normal'

package/tokens.json

@@ -1667,6 +1667,69 @@
     "value": "1rem",
     "canonical": true
   },
+  {
+    "name": "--cascivo-text-body",
+    "category": "typography",
+    "role": "text-body",
+    "value": "var(--cascivo-text-base)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-body-sm",
+    "category": "typography",
+    "role": "text-body-sm",
+    "value": "var(--cascivo-text-sm)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-caption",
+    "category": "typography",
+    "role": "text-caption",
+    "value": "var(--cascivo-text-xs)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-code",
+    "category": "typography",
+    "role": "text-code",
+    "value": "var( --cascivo-text-sm )",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-display",
+    "category": "typography",
+    "role": "text-display",
+    "value": "var(--cascivo-text-4xl)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-heading-lg",
+    "category": "typography",
+    "role": "text-heading-lg",
+    "value": "var(--cascivo-text-3xl)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-heading-md",
+    "category": "typography",
+    "role": "text-heading-md",
+    "value": "var(--cascivo-text-2xl)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-heading-sm",
+    "category": "typography",
+    "role": "text-heading-sm",
+    "value": "var(--cascivo-text-xl)",
+    "canonical": true
+  },
+  {
+    "name": "--cascivo-text-label",
+    "category": "typography",
+    "role": "text-label",
+    "value": "var(--cascivo-text-sm)",
+    "canonical": true
+  },
   {
     "name": "--cascivo-text-lg",
     "category": "typography",
@@ -1681,6 +1744,13 @@
     "value": "0.875rem",
     "canonical": true
   },
+  {
+    "name": "--cascivo-text-ui",
+    "category": "typography",
+    "role": "text-ui",
+    "value": "var( --cascivo-text-sm )",
+    "canonical": true
+  },
   {
     "name": "--cascivo-text-xl",
     "category": "typography",