@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/tokens/colors.css

@@ -0,0 +1,112 @@
+/* COSX 3.0 — colour. Warm white is the page, ink is every letter, yellow is the only
+   thing that is neither. Every value has one job. */
+:root {
+  /* Light end */
+  --paper:  #FEFDFB;  /* the page. Ink 18.57:1 */
+  --linen:  #F5F2EC;  /* sunk 1 — sidebars, table heads, inputs */
+  --sunk-2: #ECE9E3;  /* wells, disabled fields */
+  --sunk-3: #E3E0DA;  /* deepest chrome */
+
+  /* Dark end */
+  --ink:        #111111;  /* all type. The dark ground. */
+  --ink-raised: #1B1B1B;  /* raised surface on the ink ground */
+
+  /* Two greys, one per end — never interchangeable */
+  --grey:         #696969;  /* secondary text on paper. 5.40:1 */
+  --grey-inverse: #9E9E9E;  /* secondary text on ink.   7.05:1 */
+
+  /* Structure — ink at low alpha adopts whichever paper it sits on */
+  --rule:              rgba(17,17,17,.10);
+  --rule-soft:         rgba(17,17,17,.06);
+  --rule-inverse:      rgba(245,242,236,.18);
+  --rule-soft-inverse: rgba(245,242,236,.09);
+  --hover:             #F7F6F4;             /* ink 3% over paper. Hover goes darker. */
+  --scrim:             rgba(17,17,17,.40);
+
+  /* The yellow. One material: a warm paper, OKLCH L .92 C .09 h 85. Every variant changes
+     lightness only, never chroma, so all of them read as the same sheet at different depths.
+     Grounds, selected tabs, panels on ink. It never writes a letter on paper. Contrast is ink's job.
+     On INK the area rule flips: headline type, marker blocks and buttons are small against the dark
+     ground and take the accent; the field there reads as cream. */
+  --yellow:        #FFE3A0;  /* ink on it 15:1 — large areas */
+  --yellow-accent: #FFD166;  /* same hue, more chroma, for SMALL areas only: marker, chart blocks, dots,
+                                and everything yellow on ink (headline, marker block, button). Small areas need more chroma to read as the same
+                                colour as a large field; at field size it would shout. Ink on it 13:1 */
+  --yellow-accent-hover: #F5C455;
+  --yellow-light:  #FFF1D6;  /* row washes, the pale end of a ladder */
+  --yellow-hover:  #F7D98F;  /* hover on a yellow fill — same chroma, one step down */
+  --yellow-field:  var(--yellow);   /* alias */
+  --yellow-mark:   var(--yellow-accent);   /* alias */
+  --yellow-deep:   var(--yellow-hover);  /* retired */
+  --amber:         var(--yellow-accent);  /* retired */
+
+  /* Marker — the highlighter stroke behind a headline phrase. Small area: accent. */
+  --marker:        var(--yellow-accent);
+
+  /* Wash ladder over paper — rows and areas. Lightness steps toward the yellow. */
+  --yellow-12: #FFFAF0;
+  --yellow-20: #FFF6E3;
+  --yellow-32: #FFF1D6;
+  --yellow-50: #FFEBC2;
+
+  /* Intensity ladder — treemaps, single-hue series. Light = less; the accent = most.
+     Step 4 is the yellow itself. Monotonic in luminance. */
+  --yellow-1: #FFF8EA;
+  --yellow-2: #FFF3DC;
+  --yellow-3: #FFEECE;
+  --yellow-4: #FFE3A0;
+  --yellow-5: #FFD166;
+  --yellow-6: #F5C455;  /* hover only */
+  --yellow-7: #EAB84A;  /* pressed only */
+  --series-hairline: rgba(17,17,17,.12);  /* pale blocks take this so they hold on paper */
+
+  /* Product status — PRODUCT UI ONLY. Never on brand, marketing or deck surfaces. */
+  --status-error:          #E0362F;  /* white on it 4.6 · ink on wash */
+  --status-error-text:     #C4261F;  /* 5.9 on paper */
+  --status-error-wash:     #FDE4E2;
+  --status-attention:      var(--yellow-accent);  /* ink on it 13:1 · never as type on paper */
+  --status-attention-wash: var(--yellow-32);
+  --status-progress:       #2A7DE1;  /* white on it 4.5 */
+  --status-progress-text:  #1F63B8;  /* 5.8 on paper */
+  --status-progress-wash:  #DCEAFB;
+  --status-complete:       #17A96A;  /* ink on it 6.3 */
+  --status-complete-text:  #0E7A4A;  /* 5.5 on paper */
+  --status-complete-wash:  #D6F3E5;
+
+  /* Semantic aliases — product code consumes these */
+  --bg-page:        var(--paper);
+  --bg-sunk:        var(--linen);
+  --bg-well:        var(--sunk-2);
+  --bg-chrome:      var(--sunk-3);
+  --text-primary:   var(--ink);
+  --text-secondary: var(--grey);
+  --text-label:     var(--grey);
+  --highlight:      var(--yellow);
+  --bg-field:       var(--yellow-field);
+  --focus-ring:     0 0 0 3px var(--bg-page), 0 0 0 5px var(--ink);
+  --text-on-yellow-secondary: rgba(17,17,17,.7);  /* secondary text on the yellow; --grey fails there */
+  --disabled-opacity: 0.4; /* @kind other */
+
+  /* Inverted-surface aliases, for a component placed on ink inside a paper page */
+  --inv-bg:             var(--ink);
+  --inv-bg-raised:      var(--ink-raised);
+  --inv-text:           var(--linen);
+  --inv-text-secondary: var(--grey-inverse);
+  --inv-rule:           var(--rule-inverse);
+}
+
+/* Ink mode. The dark page. Yellow carries the headline here. */
+:root[data-mode="ink"],
+.ink-mode {
+  --bg-page:        var(--ink);
+  --bg-sunk:        var(--ink-raised);
+  --bg-well:        #232221;
+  --bg-chrome:      #2B2A28;
+  --text-primary:   var(--linen);
+  --text-secondary: var(--grey-inverse);
+  --text-label:     var(--grey-inverse);
+  --rule:           var(--rule-inverse);
+  --rule-soft:      var(--rule-soft-inverse);
+  --hover:          #1F1E1D;
+  --focus-ring:     0 0 0 3px var(--ink), 0 0 0 5px var(--yellow);
+}

package/src/tokens/compat.css

@@ -0,0 +1,36 @@
+/* COSX 3.0 — older token names mapped onto current values. Do not use in new work. */
+:root {
+  --stone: var(--grey);
+  --brass: var(--grey);
+  --white: var(--paper);
+  --brass-30: var(--rule);
+  --brass-20: var(--rule);
+  --brass-12: var(--rule-soft);
+  --brass-07: var(--rule-soft);
+  --ink-08: rgba(17,17,17,.08);
+  --ink-04: rgba(17,17,17,.04);
+  --marigold: var(--yellow);
+  --marigold-hover: var(--yellow-deep);
+  --marigold-press: var(--yellow-7);
+  --marigold-tint: var(--yellow-12);
+  --ink-hover: #2A2825;
+  --ink-press: #000000;
+  --status-ok: var(--status-complete);
+  --status-warn: var(--status-attention);
+  --status-info: var(--status-progress);
+  --status-ok-tint: var(--status-complete-wash);
+  --status-error-tint: var(--status-error-wash);
+  --surface-card: var(--paper);
+  --hairline: var(--rule);
+  --hairline-soft: var(--rule-soft);
+  --grid-line: var(--rule-soft);
+  --grid-line-inv: var(--rule-soft-inverse);
+  --accent: var(--yellow);
+  --inv-text-strong: var(--paper);
+  --inv-structure: var(--grey-inverse);
+  --inv-hairline: var(--rule-inverse);
+  /* amber-era names from the 3.0 draft */
+  --amber-12: var(--yellow-12); --amber-20: var(--yellow-20); --amber-32: var(--yellow-32); --amber-50: var(--yellow-50);
+  --amber-critical: var(--yellow-7); --amber-high: var(--yellow-6); --amber-medium: var(--yellow-5); --amber-low: var(--yellow-3); --amber-clear: var(--yellow-1);
+  --series-1: var(--yellow-1); --series-2: var(--yellow-2); --series-3: var(--yellow-3); --series-4: var(--yellow-4); --series-5: var(--yellow-5); --series-6: var(--yellow-6);
+}

package/src/tokens/elevation.css

@@ -0,0 +1,14 @@
+/* COSX 3.0 — elevation. There are no shadows. Depth is cut into the page, so this
+   scale runs downward only. An overlay is lifted by the scrim behind it. */
+:root {
+  --elev-page:   var(--bg-page);
+  --elev-sunk-1: var(--bg-sunk);
+  --elev-sunk-2: var(--bg-well);
+  --elev-sunk-3: var(--bg-chrome);
+  --shadow-none: none;
+  /* v2 shadow tokens resolve to nothing — kept so old surfaces do not break */
+  --shadow-card: none;
+  --shadow-raised: none;
+  --shadow-overlay: none;
+  --shadow-hairline: inset 0 0 0 1px var(--rule);
+}

package/src/tokens/motion.css

@@ -0,0 +1,42 @@
+/* COSX 3.0 — motion. "Paper settling." Two registers:
+   state   quick and flat — colour, border, opacity on hover/focus/toggle. 120–320ms.
+   entry   one choreographed settle when a surface appears — blocks rise a few px, the marker
+           draws, figures count, the pill glides. Each element ≤ 640ms; a whole sequence ≤ 1.4s
+           with a 70ms stagger. Ease-out only: things arrive and stop, they never bounce. */
+:root {
+  --motion-colour:  120ms; /* @kind other */
+  --motion-fade:    180ms; /* @kind other */
+  --motion-max:     320ms; /* @kind other */
+  --motion-reveal:  640ms; /* @kind other */  /* entry: rise, draw, glide */
+  --motion-count:  1400ms; /* @kind other */  /* figures counting up */
+  --motion-stagger:  70ms; /* @kind other */
+  --easing:         cubic-bezier(.2,0,.2,1); /* @kind other */
+  --easing-out:     cubic-bezier(.16,1,.3,1); /* @kind other */
+  --rise-distance:  10px;
+  /* v2 aliases */
+  --dur-fast: var(--motion-colour); /* @kind other */
+  --dur-base: var(--motion-fade); /* @kind other */
+  --dur-slow: var(--motion-max); /* @kind other */
+  --ease-standard: var(--easing); /* @kind other */
+  --ease-out: var(--easing-out); /* @kind other */
+  --ease-in: cubic-bezier(.4,0,1,1); /* @kind other */
+  --press-inset: none;
+}
+/* Entry vocabulary */
+@keyframes cosx-rise   { from { opacity: 0; transform: translateY(var(--rise-distance)); } to { opacity: 1; transform: none; } }
+@keyframes cosx-draw   { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
+@keyframes cosx-settle { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
+@keyframes cosx-grow   { from { transform: scaleY(0); } to { transform: none; } }
+@keyframes cosx-wipe   { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
+.rise        { animation: cosx-rise var(--motion-reveal) var(--easing-out) both; }
+.marker.draw { background-repeat: no-repeat; animation: cosx-draw var(--motion-reveal) var(--easing-out) .35s both; }
+.settle      { animation: cosx-settle var(--motion-reveal) var(--easing-out) both; }          /* chart blocks, tiles — staggered */
+.grow        { transform-origin: bottom; animation: cosx-grow var(--motion-reveal) var(--easing-out) both; } /* columns */
+.wipe        { animation: cosx-wipe var(--motion-reveal) var(--easing-out) both; }         /* yellow field or strip revealing left→right */
+/* Stagger helper: set --i on each child */
+.rise, .settle, .grow, .wipe { animation-delay: calc(var(--i, 0) * var(--motion-stagger) + var(--delay, 0ms)); }
+/* Glide: the selected pill / active indicator moves, it does not blink */
+.glide { transition: transform var(--motion-reveal) var(--easing-out), width var(--motion-reveal) var(--easing-out), left var(--motion-reveal) var(--easing-out); }
+@media (prefers-reduced-motion: reduce) {
+  :root { --motion-colour: 0ms; /* @kind other */ --motion-fade: 0ms; /* @kind other */ --motion-max: 0ms; /* @kind other */ --motion-reveal: 0ms; /* @kind other */ --motion-count: 0ms; /* @kind other */ --motion-stagger: 0ms; /* @kind other */ }
+}

package/src/tokens/spacing.css

@@ -0,0 +1,55 @@
+/* COSX 3.0 — spacing, shape, rules. Rounded, not square: 8px is the system radius. */
+:root {
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 22px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 72px;
+
+  /* Shape */
+  --radius-0:    0;
+  --radius-xs:   4px;    /* checkboxes, tiny chips */
+  --radius-sm:   6px;    /* tags, badges */
+  --radius-md:   8px;    /* buttons, inputs, chart blocks */
+  --radius-lg:   16px;   /* panels, dialogs, cards, social blocks */
+  --radius-xl:   24px;   /* whole sections and page-level fields */
+  --radius-pill: 999px;  /* dots, switch tracks */
+
+  /* Rules come in three widths */
+  --rule-hair:   1px;
+  --rule-accent: 4px;  /* yellow underline under the wordmark or an eyebrow; status left-rule */
+  --rule-band:   8px;
+
+  --border-hairline: 1px solid var(--rule);
+  --border-soft:     1px solid var(--rule-soft);
+  --border-ink:      1px solid var(--ink);
+
+  /* Layout */
+  --grid-cols: 12; /* @kind other */
+  --grid-gutter: 24px;
+  --grid-max: 1180px;
+
+  /* Social artboard 1080x1350 */
+  --social-w: 1080px;
+  --social-h: 1350px;
+  --social-margin: 72px;
+
+  /* Deck grid, at the 1280x720 artboard */
+  --deck-w: 1280px;
+  --deck-h: 720px;
+  --deck-margin: 72px;
+  --deck-content: 1136px;
+  --deck-y-eyebrow: 44px;
+  --deck-y-heading: 96px;
+  --deck-y-body: 200px;
+  --deck-y-footrule: 648px;
+
+  /* v2 aliases */
+  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 96px; --s-10: 128px;
+  --pad-card: 32px;
+  --pad-compact: 16px 20px;
+  --r-none: 0px; --r-sm: 6px; --r-md: 8px; --r-pill: 999px;
+}

package/src/tokens/typography-cjk.css

@@ -0,0 +1,42 @@
+/* COSX 3.0 — Chinese typography (Noto Sans SC). Everything hangs off :lang(zh): mark a page or an element
+   lang="zh" (or zh-CN / zh-Hans) and the face, leading, tracking and marker switch over.
+   Latin, digits and ASCII punctuation stay in Geist; hanzi fall through to Noto Sans SC. */
+:root {
+  --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-sans-cjk: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --fw-cjk-body: 400; /* @kind font */
+  --fw-cjk-heading: 500; /* @kind font */
+  --size-body-cjk: 16px;          /* Latin body 15 + 1 */
+  --size-small-cjk: 14px;
+  --size-label-cjk: 12px;         /* same as Latin: sentence-style, untracked */
+  --leading-body-cjk: 1.8; /* @kind font */
+  --leading-heading-cjk: 1.3; /* @kind font */
+  --leading-display-cjk: 1.2; /* @kind font */
+  --track-cjk: 0; /* @kind font */  /* never the Latin's negative tracking */
+  --measure-cjk: 36em;            /* ≈ 30–38 hanzi per line */
+  --marker-start-cjk: 50%;        /* hanzi fill the em box; the band starts lower than Latin's 40% */
+  --bilingual-secondary: .72em;   /* English line under a Chinese lead */
+}
+:lang(zh) {
+  font-family: var(--font-sans-cjk);
+  letter-spacing: var(--track-cjk);
+  line-height: var(--leading-body-cjk);
+  text-autospace: normal;           /* quarter-space between hanzi and Latin/digits */
+  text-spacing-trim: normal;        /* trims doubled full-width punctuation */
+  font-synthesis: none;             /* no fake bold, no fake italic */
+  line-break: strict;
+  word-break: normal;
+}
+:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .cjk-heading {
+  letter-spacing: var(--track-cjk);
+  line-height: var(--leading-heading-cjk);
+  font-weight: var(--fw-cjk-heading);
+}
+:lang(zh) em, :lang(zh) i { font-style: normal; font-weight: var(--fw-cjk-heading); }
+:lang(zh) b, :lang(zh) strong { font-weight: var(--fw-cjk-heading); }
+:lang(zh) .tabular, :lang(zh) .figure { letter-spacing: 0; font-variant-numeric: tabular-nums; }
+:lang(zh) .marker {
+  background: linear-gradient(transparent var(--marker-start-cjk), var(--marker) var(--marker-start-cjk), var(--marker) 96%, transparent 96%);
+}
+:lang(zh) .ink-mode .marker, .ink-mode :lang(zh) .marker, :lang(zh) .marker.on-ink { background: none; }
+.bilingual-en { display: block; font-family: var(--font-sans); font-size: var(--bilingual-secondary); line-height: 1.4; letter-spacing: 0; color: var(--text-secondary); margin-top: .35em; font-weight: 400; }

package/src/tokens/typography.css

@@ -0,0 +1,81 @@
+/* COSX 3.0 — typography. One family.
+   Geist for everything. Hierarchy comes from size and the yellow, not from a second face.
+   Headlines 500 (size does the work) · body 400 · UI 500 · labels 12px 500 grey, sentence case ·
+   figures 500–700 tabular. Geist Mono is retired; --font-mono resolves to the sans. */
+:root {
+  --font-sans:  "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono:  var(--font-sans);          /* retired in 3.0 — resolves to the sans */
+  --font-serif: var(--font-sans);          /* retired in 3.0 */
+  --font-serif-display: var(--font-sans);  /* retired in 3.0 */
+
+  --w-regular: 400; /* @kind font */
+  --w-medium: 500; /* @kind font */
+  --w-semibold: 600; /* @kind font */
+  --w-bold: 700; /* @kind font */
+
+  /* Screen scale */
+  --size-display: clamp(44px, 7vw, 84px);
+  --size-h1:      clamp(34px, 4.6vw, 56px);
+  --size-h2:      clamp(26px, 3.2vw, 36px);
+  --size-h3:      18px;
+  --size-lede:    20px;
+  --size-body:    15px;
+  --size-small:   13.5px;
+  --size-label:   12px;   /* labels, eyebrows, metadata — 500, sentence case, --text-secondary */
+  --size-mono:    12px;   /* alias of --size-label */
+  --size-mono-sm: 12px;
+
+  /* Product UI scale */
+  --ui-title:     22px;
+  --ui-figure:    32px;
+  --ui-body:      14px;
+
+  /* Social artboard 1080x1350 */
+  --social-headline: 72px;
+  --social-lede:     26px;
+  --social-note:     17px;
+  --social-mono:     18px;
+
+  /* Deck scale, at the 1280x720 artboard */
+  --deck-cover:   76px;
+  --deck-section: 64px;
+  --deck-heading: 46px;
+  --deck-figure:  64px;
+  --deck-lead:    20px;
+  --deck-body:    15px;
+  --deck-mono:    13px;
+  --deck-source:  13px;
+
+  --w-display: 500; /* @kind font */
+  --leading-display: 1.0;  /* @kind other */
+  --leading-heading: 1.08; /* @kind other */
+  --leading-body:    1.6;  /* @kind other */
+
+  --track-display: -.025em;
+  --track-heading: -.015em;
+  --track-mono:     0; /* @kind other */
+  --track-figure:  -.03em;
+
+  /* v2 names kept as aliases */
+  --t-display: 84px; --t-h1: 56px; --t-h2: 36px; --t-h3: 26px; --t-h4: 20px;
+  --t-body-lg: 20px; --t-body: 15px; --t-small: 13.5px; --t-meta: 12px;
+  --lh-tight: 1.0; /* @kind other */
+  --lh-snug: 1.08; /* @kind other */
+  --lh-normal: 1.5; /* @kind other */
+  --lh-relaxed: 1.6; /* @kind other */
+  --track-label: 0; /* @kind other */
+  --track-meta: 0; /* @kind other */
+  --w-light: 400; /* @kind font */
+}
+.tabular { font-variant-numeric: tabular-nums; }
+
+/* The marker: a highlighter stroke behind a phrase. Sits in the lower 60% of the line
+   so ascenders clear it. Works across line breaks. */
+.marker {
+  background: linear-gradient(transparent 40%, var(--marker) 40%, var(--marker) 94%, transparent 94%);
+  -webkit-box-decoration-break: clone; box-decoration-break: clone;
+  padding: 0 .08em; margin: 0 -.08em;
+}
+/* On ink the yellow itself is the highlighter: the marked phrase is set in accent yellow with no
+   band. Nothing light can sit legibly on a yellow band, and ink type vanishes outside it. */
+.ink-mode .marker, .ink .marker, .marker.on-ink { color: var(--yellow-accent); background: none; padding: 0; margin: 0; border-radius: 0; }