@path58/tokens 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@path58/tokens",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Path58 design tokens — CSS variables and TS exports for color, type, spacing, motion, z-index. Single source of truth consumed by @path58/themes and @path58/ui.",
   "type": "module",
   "main": "./src/tokens.ts",

package/src/tokens.css

@@ -30,6 +30,38 @@
   --p58-border-strong: rgba(255, 255, 255, 0.14);
   --p58-border-subtle: rgba(255, 255, 255, 0.04);
 
+  /* -------------------------------------------------------------------
+     COLOR — OVERLAY / SCRIM
+     The dimming layer between trigger surface and modal foreground.
+     Cascades via --p58-bg so each active theme resolves to a coherent
+     tint (dark veil on p58-dark / p58-product-*; cream veil on path58-*).
+     Theme files may override for brand-specific veil intensity.
+     Genesis: REQ-2026-06-14-001 (DSGN-3.6.1 D6 token gap GAP-3.6.1-01).
+     ------------------------------------------------------------------- */
+  --p58-overlay-backdrop: color-mix(in srgb, var(--p58-bg) 65%, transparent);
+
+  /* -------------------------------------------------------------------
+     COLOR — DISABLED SURFACE
+     The fill behind disabled controls (inputs, selects, textareas).
+     A slightly-darker variant of --p58-surface-2 on dark themes; theme
+     files override for brand-specific tone on light surfaces.
+     Genesis: REQ-2026-06-25-001 (DSGN-2.7.1 Fork 5 — filled-disabled
+     canon picked over opacity-only per Tsvika 2026-06-25 design discovery).
+     ------------------------------------------------------------------- */
+  --p58-surface-disabled: color-mix(in srgb, var(--p58-surface-2) 60%, var(--p58-bg) 40%);
+
+  /* -------------------------------------------------------------------
+     COLOR — NAV STATE (DSGN-2.10.2 — ToolSidebar nav-item state hierarchy)
+     Three-tier discrimination: default < hover (3% blue-900) < active (5% blue-900).
+     Focus uses --p58-ring-focus (shadow ring; not bg). All themes inherit via
+     color-mix() against the current --p58-blue-900 anchor — overlay-bound rendering
+     preserved (DESIGN-PER-CLIENT-OVERLAY-LOCK-2026-06-19). Themes MAY override
+     these tokens for theme-specific palettes.
+     ------------------------------------------------------------------- */
+  --p58-nav-hover-bg:      color-mix(in srgb, var(--p58-blue-900) 3%, transparent);
+  --p58-nav-active-bg:     color-mix(in srgb, var(--p58-blue-900) 5%, transparent);
+  --p58-nav-active-accent: var(--p58-blue-900);  /* 3px rail color on active nav-item */
+
   /* -------------------------------------------------------------------
      COLOR — ACCENT (terminal teal / brand)
      `--p58-teal-*` is the canonical p58 accent (data / dev / proof moments),
@@ -74,6 +106,37 @@
      muted cyan glyph — preserves the "soft icon" aesthetic. On p58-light it dispatches to a
      fully opaque darker teal (see p58-light.css). Per REQ-2026-06-02-008 Option A. */
 
+  /* Canonical accent tint — low-opacity teal fill for selected-state backgrounds,
+     status-pill fills, avatar bgs, focus-ring tints. Live precedent: p58-marketing-tools
+     intake/waitlist + DSGN-2.1.3 axe-sample dashboard all use rgba(0,212,170,.12) inline;
+     this token formalizes the canon. Per REQ-2026-06-08-001 (closed 2026-06-15).
+     Theme dispatch: per-theme overrides can re-point to lime-tint for consultancy world
+     (path58-tool.css), violet-tint for p58-product-axe, etc. */
+  --p58-accent-tint: color-mix(in srgb, var(--p58-teal) 12%, transparent);
+
+  /* -------------------------------------------------------------------
+     PRIMARY-CTA TOKEN FAMILY (per REQ-2026-06-16-002 Option A canonical fix,
+                              shipped via REQ-2026-06-16-003 v2.3.0)
+
+     Distinct from --p58-accent (which is the brand-side accent — teal on
+     p58 surfaces, used for fills, focus rings, data series). --p58-primary
+     is specifically the PRIMARY-CTA color, which per brand canon dispatches
+     differently:
+       p58 (product) surfaces  → teal CTAs (revenue meets dev tooling)
+       Path58 consultancy      → NAVY CTAs (warm-editorial; lime reserved
+                                 for one money-moment per surface)
+       AXE product surface     → violet CTAs (AXE accent)
+
+     Default below = teal (p58 product surface convention). Each Path58
+     theme overrides --p58-primary in their theme CSS to navy. This closes
+     REQ-2026-06-16-002 — Button.css + P58Button.tsx now read --p58-primary
+     and the theme cascade routes per-brand without per-consumer overrides.
+     ------------------------------------------------------------------- */
+  --p58-primary:       var(--p58-teal);          /* default: p58 product = teal */
+  --p58-primary-hover: var(--p58-teal-hover);
+  --p58-primary-press: var(--p58-teal-press);
+  --p58-primary-fg:    var(--p58-on-accent);     /* navy text on teal */
+
   /* -------------------------------------------------------------------
      BRAND COLOR FAMILIES (per BRAND_STRATEGY_v2 § Visual identity)
      Three secondary accent families woven across the two sub-brands:
@@ -112,6 +175,51 @@
   --p58-lime-300:           #c7d79b;                 /* optional — light tint (backgrounds) */
   --p58-lime-700:           #6c7f34;                 /* optional — deep lime */
 
+  /* --- AXE ACCENT (p58-product-axe sibling — Pattern A: primary-accent-replacement) -----
+     The p58-product-axe theme is the second p58 sibling (after p58-product-n8n).
+     Per the sibling-accent Pattern A established in DSGN-2.1.1 E1 § Sibling
+     architectural divergence, AXE re-points the SEMANTIC --p58-accent-* family
+     at theme scope; the locked --p58-teal-* anchor values are NOT overridden
+     globally. This family carries the AXE primary accent values; consumption
+     happens under [data-theme="p58-product-axe"] in p58-product-axe.css.
+     Per REQ-2026-06-07-001 (DSGN-2.1.1 closure 2026-06-07).
+     ✅ Accent locked at violet by Tsvika consultation gate (DSGN-2.1.1, 2026-06-07).
+     WCAG: 7.26:1 on --p58-bg (AAA body); 6.83:1 on --p58-surface (AA body);
+     5.99:1 navy ink on solid violet fill (AA body). */
+  --p58-axe-accent:         #a78bfa;  /* primary AXE accent — violet */
+  --p58-axe-accent-hover:   #baa5fb;  /* +22% toward white (sibling-consistent with n8n) */
+  --p58-axe-accent-press:   #967de1;  /* -10% toward black (sibling-consistent with n8n) */
+  --p58-axe-accent-dim:     color-mix(in srgb, #a78bfa 13%, transparent);  /* subtle tint fill */
+  --p58-axe-accent-glow:    color-mix(in srgb, #a78bfa 27%, transparent);  /* glow / ring */
+
+  /* --- AXE SUCCESS GREEN (theme-dispatched true green; not teal) -------------------
+     Family-default --p58-success is teal-hued (#00d4aa) which under [data-theme=
+     "p58-product-axe"] visually overlaps with p58-n8n's teal signature. The AXE
+     theme re-points --p58-success to this true-green value so status pills on
+     AXE surfaces read as clean green-yellow-red triad without the teal/n8n
+     confound. Per BRAND_ARCHITECTURE.md § 5 "Semantic colors are sacred" and
+     DSGN-2.1.3 Tsvika-ZT-finding 2026-06-07. WCAG AA: 7.21:1 on --p58-bg #0a0a1a
+     (AAA body); 6.78:1 on --p58-surface #0e0e24 (AA body); 6.17:1 on --p58-
+     surface-2; consumption in p58-product-axe.css. */
+  --p58-success-axe:        #4ade80;  /* true green — Tailwind green-400 register */
+  --p58-success-axe-dim:    color-mix(in srgb, #4ade80 14%, transparent);
+
+  /* --- AXE DENSITY MODIFIERS (p58-product-axe — one step tighter on data regions) -----
+     AXE Engine is the measurement instrument; instruments are dense. Per E2
+     density spec (DSGN-2.1.1). These tokens exist for theme-scoped consumption
+     under [data-theme="p58-product-axe"] in p58-product-axe.css. AXE applies
+     them to data-region surfaces (cards, tile grids, journey timelines) where
+     denser rhythm signals "instrument, scanning surface" — Grafana / Datadog /
+     Linear Analytics neighborhood. Other themes are unaffected. */
+  --p58-axe-density-card-padding:        14px 16px;   /* vs family-default ~18-20px */
+  --p58-axe-density-tile-padding:        10px 12px;   /* vs family-default ~12-14px */
+  --p58-axe-density-grid-gap:            8px;         /* vs family-default 12px */
+  --p58-axe-density-section-gap:         14px;        /* vs family-default 18-20px */
+  --p58-axe-density-row-height:          28px;        /* table rows / journey strips — vs family-default 32-36px */
+  --p58-axe-density-tile-value-fontsize: 18px;        /* vs family-default 16-17px */
+  --p58-axe-density-tile-label-fontsize: 10.5px;      /* vs family-default 11-12px */
+  --p58-axe-density-mono-letter-spacing: 0.005em;     /* slightly tighter mono */
+
   /* -------------------------------------------------------------------
      COLOR — SEMANTIC
      ------------------------------------------------------------------- */
@@ -290,10 +398,14 @@ html, body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* Headings — Space Grotesk, tight tracking, tight leading */
+/* Headings — Space Grotesk, tight tracking, tight leading.
+   Per REQ-2026-06-16-003 v2.3.0: responsive scale via clamp() so headings
+   step down at narrow viewports without per-consumer theme-scoped overrides.
+   Each clamp() uses (mobile-min, fluid-scale, desktop-max) pattern. */
 .p58-h1, h1.p58 {
   font-family: var(--p58-font-display);
-  font-size: var(--p58-text-5xl);
+  /* desktop var(--p58-text-5xl) ≈ 48px; clamp 28→48 across 360→1080 viewport */
+  font-size: clamp(28px, 2.2vw + 16px, var(--p58-text-5xl));
   font-weight: var(--p58-weight-semibold);
   line-height: var(--p58-leading-tight);
   letter-spacing: var(--p58-tracking-tight);
@@ -301,7 +413,8 @@ html, body {
 }
 .p58-h2, h2.p58 {
   font-family: var(--p58-font-display);
-  font-size: var(--p58-text-3xl);
+  /* desktop var(--p58-text-3xl) = 32px; clamp 22→32 */
+  font-size: clamp(22px, 1.2vw + 16px, var(--p58-text-3xl));
   font-weight: var(--p58-weight-semibold);
   line-height: var(--p58-leading-tight);
   letter-spacing: var(--p58-tracking-tight);
@@ -309,22 +422,25 @@ html, body {
 }
 .p58-h3, h3.p58 {
   font-family: var(--p58-font-display);
-  font-size: var(--p58-text-2xl);
+  /* desktop var(--p58-text-2xl) = 24px; clamp 17→24 */
+  font-size: clamp(17px, 0.8vw + 14px, var(--p58-text-2xl));
   font-weight: var(--p58-weight-medium);
   line-height: var(--p58-leading-snug);
   color: var(--p58-fg-1);
 }
 .p58-h4, h4.p58 {
   font-family: var(--p58-font-display);
-  font-size: var(--p58-text-xl);
+  /* desktop var(--p58-text-xl) = 20px; clamp 16→20 */
+  font-size: clamp(16px, 0.5vw + 14px, var(--p58-text-xl));
   font-weight: var(--p58-weight-medium);
   line-height: var(--p58-leading-snug);
   color: var(--p58-fg-1);
 }
 
-/* Body */
+/* Body — responsive scale per REQ-2026-06-16-003 v2.3.0 */
 .p58-body {
   font-family: var(--p58-font-ui);
+  /* desktop var(--p58-text-md) = 13px; clamp 14→13 — body stays readable on mobile (no shrink below desktop) */
   font-size: var(--p58-text-md);
   font-weight: var(--p58-weight-regular);
   line-height: var(--p58-leading-normal);
@@ -332,7 +448,8 @@ html, body {
 }
 .p58-body-lg {
   font-family: var(--p58-font-ui);
-  font-size: var(--p58-text-lg);
+  /* desktop var(--p58-text-lg) = 16px; clamp 15→16 — light step-down only */
+  font-size: clamp(15px, 0.2vw + 13px, var(--p58-text-lg));
   line-height: var(--p58-leading-normal);
   color: var(--p58-fg-2);
 }

package/src/tokens.ts

@@ -71,6 +71,14 @@ export const tokens = {
     // color-mix or hex would freeze it to one theme and reintroduce the on-light contrast fail.
     iconAccentSoft: 'var(--p58-icon-accent-soft)',
 
+    // accentTint: theme-DISPATCHED canonical accent tint (REQ-2026-06-08-001).
+    // Low-opacity fill for selected-state backgrounds, status-pill fills, avatar bgs,
+    // focus-ring tints. Same self-referencing-var pattern as accentFg/iconAccentSoft so
+    // the cascade resolves the tint per theme: teal-tint (p58-dark/p58-light), lime-tint
+    // (path58-tool consultancy), violet-tint (p58-product-axe). A baked color-mix here
+    // would freeze it to teal and defeat the dispatch.
+    accentTint: 'var(--p58-accent-tint)',
+
     // Accent — ALIASES of teal* (back-compat; maps to --p58-accent* → var(--p58-teal*))
     accent: '#00d4aa',
     accentHover: '#1ee5bd',