@cascivo/tokens 0.3.5 → 0.4.0

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.5",
+  "version": "0.4.0",
   "private": false,
   "description": "Three-level CSS design tokens (primitive → semantic → component)",
   "keywords": [
@@ -30,6 +30,8 @@
   ],
   "exports": {
     ".": "./src/index.css",
+    "./layers": "./src/layers.css",
+    "./layers.css": "./src/layers.css",
     "./properties": "./src/properties.css",
     "./properties.css": "./src/properties.css",
     "./functions": "./src/functions.css",

package/src/index.css

@@ -2,6 +2,11 @@
 /* cascivo Design System — Primitive Tokens */
 /* These are raw values. Never use directly in components. Use semantic tokens. */
 
+/* Establish the canonical cascade-layer order before any layered rule. Every
+   consumer path imports @cascivo/tokens (directly or via a theme), so this rides
+   along first and dedupes by URL. See ./layers.css for the authoritative order. */
+@import './layers.css';
+
 @layer cascivo.tokens {
   :root {
     /* ── Color Primitives ─────────────────────────────── */
@@ -249,21 +254,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(
@@ -313,6 +322,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/layers.css

@@ -0,0 +1,29 @@
+/* packages/tokens/src/layers.css */
+/* cascivo — canonical @layer order (single source of truth). */
+/*
+ * This statement is the ONE authoritative declaration of cascivo's cascade-layer
+ * order. Every entry path emits it first (via @import of this file, or — for the
+ * @cascivo/react aggregate — by prepending its contents), and identical @layer
+ * statements are idempotent, so the order is deterministic no matter which
+ * cascivo stylesheet a consumer loads first.
+ *
+ * Ordered lowest-priority → highest-priority:
+ *
+ *   cascivo.reset      consumer reset (box-sizing, margin/padding zeroing) — the floor
+ *   cascivo.base       minimal html font/color reset (@cascivo/themes/base.css)
+ *   cascivo.tokens     primitive design tokens (@cascivo/tokens)
+ *   cascivo.component  component + layout styles
+ *   cascivo.theme      semantic token values per [data-theme] (@cascivo/themes/*)
+ *   cascivo.override   consumer escape hatch — beats tokens, components, and themes
+ *
+ * theme > component matches the CLI scaffold and every example app: themes own
+ * the semantic tier, so a theme always wins over component defaults. cascivo.override
+ * sits on top: put brand/one-off overrides in `@layer cascivo.override { … }` and
+ * they beat everything cascivo ships — with no `:root:not([data-theme])` specificity
+ * fight. App-local sublayers (cascivo.example, cascivo.blocks.*) are not shipped by
+ * any package; insert them between cascivo.theme and cascivo.override.
+ *
+ * Guard: scripts/checks/layer-order.test.ts asserts every shipped/scaffolded
+ * @layer statement is an ordered subsequence of this one.
+ */
+@layer cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.override;

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'
@@ -322,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
   },
   {