@cascivo/tokens 0.3.4 → 0.3.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 urbanisierung
+Copyright (c) cascivo contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/tokens",
-  "version": "0.3.4",
+  "version": "0.3.8",
   "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 */
@@ -229,21 +249,25 @@
     --cascivo-editor-selection: var(--cascivo-color-accent-muted, oklch(0.882 0.095 250));
     --cascivo-editor-border: var(--cascivo-color-border, oklch(0.928 0.006 264));
 
-    /* Syntax palette — one token per TokenKind */
+    /* Syntax palette — one token per TokenKind. String/number/type/property (and
+       their aliases regexp/attr/boolean) are pinned to text-safe darker values
+       instead of the raw chart hues, which are tuned for 3:1 fills and fall below
+       WCAG AA 4.5:1 as code text on the light editor surface. Dark-surface themes
+       restore the brighter chart hues below (they clear 4.5:1 on a dark bg). */
     --cascivo-editor-syntax-keyword: var(--cascivo-color-accent, oklch(0.52 0.2 250));
-    --cascivo-editor-syntax-string: var(--cascivo-chart-3, oklch(0.52 0.13 150));
-    --cascivo-editor-syntax-number: var(--cascivo-chart-6, oklch(0.55 0.16 40));
+    --cascivo-editor-syntax-string: oklch(0.53 0.13 135);
+    --cascivo-editor-syntax-number: oklch(0.54 0.15 40);
     --cascivo-editor-syntax-comment: var(--cascivo-color-foreground-muted, oklch(0.55 0.018 264));
     --cascivo-editor-syntax-function: var(--cascivo-chart-5, oklch(0.5 0.16 265));
-    --cascivo-editor-syntax-type: var(--cascivo-chart-7, oklch(0.52 0.15 320));
+    --cascivo-editor-syntax-type: oklch(0.54 0.12 350);
     --cascivo-editor-syntax-operator: var(--cascivo-color-foreground-muted, oklch(0.5 0.04 264));
     --cascivo-editor-syntax-punctuation: var(--cascivo-color-text-subtle, oklch(0.446 0.018 264));
     --cascivo-editor-syntax-variable: var(--cascivo-editor-fg);
     --cascivo-editor-syntax-tag: var(--cascivo-color-accent, oklch(0.52 0.2 250));
-    --cascivo-editor-syntax-attr: var(--cascivo-chart-6, oklch(0.55 0.16 40));
-    --cascivo-editor-syntax-regexp: var(--cascivo-chart-3, oklch(0.52 0.13 150));
-    --cascivo-editor-syntax-boolean: var(--cascivo-chart-6, oklch(0.55 0.16 40));
-    --cascivo-editor-syntax-property: var(--cascivo-chart-2, oklch(0.5 0.13 240));
+    --cascivo-editor-syntax-attr: oklch(0.54 0.15 40);
+    --cascivo-editor-syntax-regexp: oklch(0.53 0.13 135);
+    --cascivo-editor-syntax-boolean: oklch(0.54 0.15 40);
+    --cascivo-editor-syntax-property: oklch(0.53 0.12 240);
 
     /* ── Brand (apps/logo/OG only — never used in component CSS) ── */
     --cascivo-brand-primary: oklch(
@@ -293,6 +317,22 @@
     --cascivo-target-min-coarse: 2.75rem; /* 44px — Apple HIG comfortable touch target        */
   }
 
+  /* Dark-surface themes: restore the brighter chart hues for editor syntax, which
+     clear WCAG AA 4.5:1 on a dark editor background (the light-theme darkened
+     literals above would be too low-contrast there). */
+  [data-theme='dark'],
+  [data-theme='midnight'],
+  [data-theme='terminal'],
+  [data-theme='cyberpunk'] {
+    --cascivo-editor-syntax-string: var(--cascivo-chart-3);
+    --cascivo-editor-syntax-regexp: var(--cascivo-chart-3);
+    --cascivo-editor-syntax-number: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-attr: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-boolean: var(--cascivo-chart-6);
+    --cascivo-editor-syntax-type: var(--cascivo-chart-7);
+    --cascivo-editor-syntax-property: var(--cascivo-chart-2);
+  }
+
   /* 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. */

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

@@ -58,6 +58,7 @@ export type CascivoToken =
   | '--cascivo-color-foreground-muted'
   | '--cascivo-color-info'
   | '--cascivo-color-info-content'
+  | '--cascivo-color-info-foreground'
   | '--cascivo-color-info-subtle'
   | '--cascivo-color-primary'
   | '--cascivo-color-primary-active'
@@ -226,8 +227,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'
@@ -312,6 +323,7 @@ export type CascivoColorToken =
   | '--cascivo-color-foreground-muted'
   | '--cascivo-color-info'
   | '--cascivo-color-info-content'
+  | '--cascivo-color-info-foreground'
   | '--cascivo-color-info-subtle'
   | '--cascivo-color-primary'
   | '--cascivo-color-primary-active'

package/tokens.json

@@ -227,7 +227,7 @@
     "name": "--cascivo-chart-axis",
     "category": "color",
     "role": "chart-axis",
-    "value": "var(--cascivo-gray-400)",
+    "value": "oklch(0.5 0.016 264)",
     "canonical": true
   },
   {
@@ -399,7 +399,7 @@
     "name": "--cascivo-color-foreground-muted",
     "category": "color",
     "role": "color-foreground-muted",
-    "value": "oklch(0.554 0.018 264)",
+    "value": "oklch(0.5 0.018 264)",
     "canonical": false,
     "aliasOf": "--cascivo-color-text-muted"
   },
@@ -417,6 +417,13 @@
     "value": "oklch(1 0 0)",
     "canonical": true
   },
+  {
+    "name": "--cascivo-color-info-foreground",
+    "category": "color",
+    "role": "color-info-foreground",
+    "value": "oklch(0.45 0.19 250)",
+    "canonical": true
+  },
   {
     "name": "--cascivo-color-info-subtle",
     "category": "color",
@@ -557,7 +564,7 @@
     "name": "--cascivo-color-text-muted",
     "category": "color",
     "role": "color-text-muted",
-    "value": "var(--cascivo-gray-400)",
+    "value": "oklch(0.5 0.016 264)",
     "canonical": true
   },
   {
@@ -1132,14 +1139,14 @@
     "name": "--cascivo-editor-syntax-attr",
     "category": "other",
     "role": "editor-syntax-attr",
-    "value": "var(--cascivo-chart-6, oklch(0.55 0.16 40))",
+    "value": "oklch(0.54 0.15 40)",
     "canonical": true
   },
   {
     "name": "--cascivo-editor-syntax-boolean",
     "category": "other",
     "role": "editor-syntax-boolean",
-    "value": "var(--cascivo-chart-6, oklch(0.55 0.16 40))",
+    "value": "oklch(0.54 0.15 40)",
     "canonical": true
   },
   {
@@ -1167,7 +1174,7 @@
     "name": "--cascivo-editor-syntax-number",
     "category": "other",
     "role": "editor-syntax-number",
-    "value": "var(--cascivo-chart-6, oklch(0.55 0.16 40))",
+    "value": "oklch(0.54 0.15 40)",
     "canonical": true
   },
   {
@@ -1181,7 +1188,7 @@
     "name": "--cascivo-editor-syntax-property",
     "category": "other",
     "role": "editor-syntax-property",
-    "value": "var(--cascivo-chart-2, oklch(0.5 0.13 240))",
+    "value": "oklch(0.53 0.12 240)",
     "canonical": true
   },
   {
@@ -1195,14 +1202,14 @@
     "name": "--cascivo-editor-syntax-regexp",
     "category": "other",
     "role": "editor-syntax-regexp",
-    "value": "var(--cascivo-chart-3, oklch(0.52 0.13 150))",
+    "value": "oklch(0.53 0.13 135)",
     "canonical": true
   },
   {
     "name": "--cascivo-editor-syntax-string",
     "category": "other",
     "role": "editor-syntax-string",
-    "value": "var(--cascivo-chart-3, oklch(0.52 0.13 150))",
+    "value": "oklch(0.53 0.13 135)",
     "canonical": true
   },
   {
@@ -1216,7 +1223,7 @@
     "name": "--cascivo-editor-syntax-type",
     "category": "other",
     "role": "editor-syntax-type",
-    "value": "var(--cascivo-chart-7, oklch(0.52 0.15 320))",
+    "value": "oklch(0.54 0.12 350)",
     "canonical": true
   },
   {
@@ -1667,6 +1674,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 +1751,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",