@felloinnovations/brand-kit 0.4.0 → 0.5.0

package/tokens/_dark.css

@@ -0,0 +1,174 @@
+/* ============================================================================
+   The dark theme (D12, kit 0.5.0, 4 Nov 2026). Opt-in only: an app that sets
+   nothing stays light.
+
+     <html data-theme="dark">                      the night ground, always
+     <html data-theme="system">                    the night ground on a dark OS
+     <html data-theme="dark" data-ground="navy">   the Ignite navy ground (brand and event pages)
+
+   scripts/generate-tokens.mjs reads the two blocks below and writes them, each
+   also under @media (prefers-color-scheme: dark) for data-theme="system", into
+   tokens.root.css, tokens.css, fello.css and fello.scoped.css (on .fello there).
+   Brand colours stay literal (white is white, navy is navy); the semantic names
+   carry the swap. Sources per value: the dark-theme research notes
+   (gtm-ai-impact public/ds-dark.css for night, ignite-dark.css and Usher for
+   navy). Every word pair is checked by the generator, which stops on a fail.
+   ========================================================================== */
+
+:root[data-theme="dark"] {
+  /* D15: every ground, edge, tint and fade below derives from the dark contract inputs (the page, the tray, the
+     edges, the words, the chart tones), so an app's dark palette moves them. A solved partner keeps the night value
+     exactly; a tint or a fade is its tone over the page (within CIEDE2000 3.5 of the old literal). */
+  --ws-page: color-mix(in srgb, var(--color-bg-page) 50%, #05090e); /* #0A1118 */
+  --color-bg-page: #0F1922;
+  --color-surface: #131E28;
+  --ws-raised: #16222D;
+  --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 93.75%, #8fb9e2); /* #17232E */
+  --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 90%, #a5cdfe); /* #1E2B38 */
+  --ws-well: color-mix(in srgb, var(--ws-tray) 20%, rgb(6.25 14.25 21)); /* #0B141C: under the tray */
+  --ws-field: color-mix(in srgb, var(--color-bg-page) 50%, #070f16); /* #0B141C */
+  --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 80%, #000509); /* #0C151D */
+  --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 98.5%, #d7e1ea); /* #121C25 */
+  --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 95%, #afcdfe); /* #17222D */
+  --ws-menu-hover: var(--ws-surface-press);
+  --ws-menu-line: color-mix(in srgb, var(--color-bg-page) 80%, #6e8cb8); /* #223040 */
+  --ws-tint-accent: var(--color-surface);
+  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 13.05%, var(--color-bg-page)); /* #2E252A */
+  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 12.1%, var(--color-bg-page)); /* was #0E2931 */
+  --ws-card-tint-blue: color-mix(in srgb, var(--color-bg-page) 90%, #879bf4); /* #1B2637: the page toward the mid blue */
+  --ws-card-tint-done: color-mix(in srgb, var(--ws-chart-finished) 10.4%, var(--color-bg-page)); /* was #10262B */
+  --ws-track: color-mix(in srgb, var(--ws-tray) 80%, #0a1215); /* #1A2631: the tray, darker */
+  --color-dropdown-bg: var(--ws-raised);
+  --color-feedback-success-bg: color-mix(in srgb, var(--ws-chart-finished) 20%, rgb(25 16.75 1.75)); /* #1B2F22 */
+  --ws-scrim: color-mix(in srgb, color-mix(in srgb, var(--ws-page) 20%, rgb(0 3.25 6.5)) 62%, transparent); /* rgba(2, 6, 10, .62): the shell, near black */
+  --ws-edge: #1E2A36;
+  --ws-edge-card: #273544;
+  --ws-edge-chip: color-mix(in srgb, var(--ws-edge-card) 96%, #a4cbf3); /* #2C3B4B */
+  --ws-edge-slot: color-mix(in srgb, var(--ws-edge-card) 75%, #071118); /* #1F2C39 */
+  --ws-edge-tray: color-mix(in srgb, var(--ws-tray) 90%, #aacbf6); /* #2C3B4B */
+  --color-text-heading: #E8EDF3;
+  --color-text-body: #B0BBC7;
+  --color-text-muted: #8494A5;
+  --color-text-placeholder: var(--color-text-muted);
+  --color-text-interactive: #93A6DC;
+  --color-text-primary: color-mix(in srgb, var(--color-text-heading) 53.5%, var(--color-text-body)); /* was #CDD6E0 */
+  --ws-word-needs: #FF8B78;
+  --color-text-error-strong: var(--ws-word-needs);
+  --ws-word-positive: #4FC7BE;
+  --color-text-success-strong: color-mix(in srgb, var(--ws-word-positive) 20%, #aed15f); /* #9BCF72 */
+  --color-feedback-success-text: var(--color-text-success-strong);
+  --ws-field-ink: color-mix(in srgb, var(--color-text-heading) 88%, var(--color-text-body)); /* #E1E7EE */
+  --ws-on-act: var(--color-bg-page); /* words on the light act are the page (#0F1922) */
+  --color-stat-positive: color-mix(in srgb, var(--ws-chart-finished) 80%, #9bf8ee); /* #3BB8B2: the teal tone, brighter, for marks */
+  --ws-chart-finished: #23A8A3;
+  --ws-chart-past-half: #9A84EE;
+  --ws-chart-navy-light: #6E9CC4;
+  --ws-chart-empty: var(--ws-track);
+  --ws-chart-dot: color-mix(in srgb, var(--color-bg-page) 90%, #91afd6); /* #1C2834 */
+  /* The fades and tints: each its tone over the page (was #2A4560, #5C342E, #3A325E, #1A4446, #1C4D4B, #3A3366;
+     the salmon tint keeps #4B3A2B, which no tone over the page lands near). */
+  --ws-chart-navy-fade: color-mix(in srgb, var(--ws-chart-navy-light) 36.2%, var(--color-bg-page));
+  --ws-chart-salmon-fade: color-mix(in srgb, var(--ws-chart-under-half) 33.2%, var(--color-bg-page));
+  --ws-chart-purple-fade: color-mix(in srgb, var(--ws-chart-past-half) 31.3%, var(--color-bg-page));
+  --ws-chart-teal-fade: color-mix(in srgb, var(--ws-chart-finished) 29.8%, var(--color-bg-page));
+  --ws-chart-finished-tint: color-mix(in srgb, var(--ws-chart-finished) 36.8%, var(--color-bg-page));
+  --ws-chart-past-half-tint: color-mix(in srgb, var(--ws-chart-past-half) 32.2%, var(--color-bg-page));
+  --ws-chart-under-half-tint: color-mix(in srgb, var(--ws-chart-under-half) 20%, rgb(30 44 30.75));
+  --color-feedback-error: color-mix(in srgb, var(--ws-chart-under-half) 90%, #ffe0a2); /* #FF7D63 */
+  --color-alert: #FF5A5A;
+  --ws-ink-rgb: 232, 237, 243;
+  --ws-shade-rgb: 0, 0, 0;
+  --ws-shade: #000; /* a drop in the dark is black */
+  --color-nav-hover-bg: color-mix(in srgb, var(--ws-ink) 4%, transparent);
+  --ws-shadow-band: inset 0 0.5px 0 color-mix(in srgb, var(--ws-tray) 96%, #82a8ce), inset 0 10px 6px 0 rgba(0, 0, 0, 0.06), inset 0 4px 4px 0 rgba(0, 0, 0, 0.1), inset 0 1px 2px 0 rgba(0, 0, 0, 0.14);
+  --ws-shadow-lift: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 6px 14px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.42);
+  --shadow-card-default: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.24);
+  --shadow-card-hover: var(--ws-shadow-lift);
+  --shadow-dropdown: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent), 0 8px 17px rgba(0, 0, 0, 0.3), 0 30px 30px rgba(0, 0, 0, 0.26), 0 68px 41px rgba(0, 0, 0, 0.16);
+  --ws-ring-selected: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 70%, transparent);
+  --ws-card-ring-lit: 0 0 0 2px color-mix(in srgb, var(--ws-ink) 32%, transparent);
+  --ws-card-ring-person: inset 0 0 0 1px color-mix(in srgb, var(--ws-ink) 14%, transparent);
+  /* The glows centred inside the hero and fading to nothing at their edge (centred on the top edge they read as a
+     hard-cut band), over the raised ground, so the hero keeps a body on the dark page (derived). */
+  --ws-glow-blue: color-mix(in srgb, var(--ws-chart-navy-light) 20%, rgb(42.5 151 251)); /* the AI blue #3898F0, from the dark navy tone */
+  --ws-cool-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
+  --ws-team-glow: radial-gradient(80% 90% at 85% 10%, color-mix(in srgb, var(--ws-glow-blue) 14%, transparent), transparent), radial-gradient(70% 80% at 0% 90%, color-mix(in srgb, var(--ws-chart-under-half) 12%, transparent), transparent), linear-gradient(var(--ws-raised), var(--ws-raised));
+  --ws-orb: radial-gradient(circle at 30% 30% in srgb, color-mix(in srgb, var(--ws-chart-finished) 50%, #05ccf3), var(--ws-glow-blue) 45%, color-mix(in srgb, var(--ws-chart-past-half) 80%, #5902c6) 80%); /* the light orb's #14BACB, #3898F0, #8D6AE6, from the dark tones */
+  /* Added with 0.5.0 (F2, 4 Nov 2026). "derived": no Fello source draws it in dark;
+     a mix of kit colours or a shipped dark value, every word pair computed. */
+  --ws-tray: #1E2B38; /* derived: the night press step, so the rim lifts off the stage as #EDEDED does off the cream and words on a foot pass (muted 4.64) */
+  --ws-edge-card-1x: var(--ws-edge-card); /* gtm ds-dark.css:133: halving the edge leaves 1.2:1 or less on dark */
+  --ws-well-hover: #273544; /* derived: the frame lights to the card edge */
+  --ws-frame: var(--ws-frame-top); /* the light wash drops out (dark-theme notes: glass interim): a flat frame-top, the shell unless a palette says */
+  --ws-frame-top: var(--ws-page); /* what the flat frame paints, so a palette's dark value reads true (D15) */
+  --ws-stage-foot: var(--color-bg-page);
+  --ws-stage-wash: var(--color-bg-page);
+  --ws-glass: color-mix(in srgb, var(--color-bg-page) 59%, transparent); /* derived interim until Seth draws the dark glass */
+  --ws-edge-stage: var(--ws-edge-card);
+  --ws-float-rim: 0 0 0 0.5px color-mix(in srgb, var(--ws-ink) 8%, transparent); /* gtm ds-dark.css: a light rim, since a shadow does not show */
+  --ws-chart-alert: #FF5470; /* was #FF5A5A (gtm --color-alert dark), CIEDE2000 6.1 from salmon: a chart could not tell the two apart. A step toward crimson, 12.3 from salmon and 11.9 from the pink; words 4.63 on press (D15) */
+  --ws-word-needs-work: var(--ws-chart-needs-work); /* derived: Seth's pink itself clears AA on every night ground (5.26 on press) */
+  --ws-tint-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 18%, var(--color-bg-page)); /* derived, the tint-needs formula */
+  --ws-shimmer: linear-gradient(100deg, var(--ws-track) 0 34%, color-mix(in srgb, var(--ws-chart-under-half) 14%, var(--ws-track)) 44%, color-mix(in srgb, var(--ws-chart-past-half) 14%, var(--ws-track)) 50%, color-mix(in srgb, var(--color-stat-positive) 14%, var(--ws-track)) 56%, var(--ws-track) 66% 100%); /* derived: the chart colours at 14% over the dark track; still frames plain, as in light */
+  /* Promoted at integration (0.5.0): the packages' scoped dark values, now global. */
+  --ws-rating-middle: var(--color-text-interactive); /* the mid blue was 2.5:1 on night, under 3:1 for a mark; its words' own dark step */
+  --ws-raised-sunk: var(--ws-surface-press); /* the page's sunk is 1/255 off raised in dark */
+  --ws-edge-hover: var(--color-text-muted); /* derived (WP-controls): no Fello dark value, the edge lifts toward the muted words */
+  --ws-act-hover: color-mix(in srgb, var(--color-text-heading) 92%, var(--ws-on-act)); /* derived: the light act eases a step toward its words */
+  --ws-act-light: transparent; /* a light on a light fill only muddies it */
+  --ws-agent-tally: var(--color-text-heading); /* the act itself in dark (WP-controls) */
+  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 79.8%, var(--color-bg-page)); /* derived: the muted words toward the page, 3.3:1 on the tray, 4.0 on night, a mark (was #6B7A8A) */
+  --ws-control-off: color-mix(in srgb, var(--color-text-muted) 50%, #7a6a59); /* #7F7F7F, the off track as in light */
+  --ws-shimmer-ground: var(--ws-track);
+  --ws-inverse: var(--color-bg-dark); /* a brand pair in dark: the navy message keeps the navy and white (D12) */
+  --ws-on-inverse: var(--color-white);
+  --ws-chart-rest: var(--ws-edge-card);
+  --ws-ghost: var(--ws-well-hover);
+  --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--ws-field-ink)); /* derived (WP-cards): between the body and the field's words */
+}
+
+:root[data-theme="dark"][data-ground="navy"] {
+  --ws-page: var(--color-bg-page);
+  --color-bg-page: #021A32;
+  --color-surface: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
+  --ws-raised: color-mix(in srgb, var(--color-bg-page) 92%, var(--color-white));
+  --ws-surface-sunk: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
+  --ws-surface-press: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white));
+  --ws-well: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
+  --ws-field: var(--color-white);
+  --ws-chart-foot: color-mix(in srgb, var(--color-bg-page) 95%, var(--color-white));
+  --ws-sidebar-hover: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
+  --ws-sidebar-press: color-mix(in srgb, var(--color-bg-page) 90%, var(--color-white));
+  --ws-menu-hover: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
+  --ws-menu-line: var(--ws-edge-card);
+  --ws-tint-accent: color-mix(in srgb, var(--color-bg-page) 94%, var(--color-white));
+  --ws-tint-needs: color-mix(in srgb, var(--ws-chart-under-half) 18%, var(--color-bg-page));
+  --ws-tint-live: color-mix(in srgb, var(--ws-chart-finished) 13.1%, var(--color-bg-page)); /* was the light teal 18% (#032D41) */
+  --ws-card-tint-blue: color-mix(in srgb, var(--color-brand-mid-blue) 25%, var(--color-bg-page));
+  --ws-card-tint-done: var(--ws-tint-live);
+  --ws-track: color-mix(in srgb, var(--color-bg-page) 88%, var(--color-white));
+  --ws-edge: color-mix(in srgb, var(--color-white) 10%, transparent);
+  --ws-edge-card: color-mix(in srgb, var(--color-white) 18%, transparent);
+  --ws-edge-chip: var(--ws-edge-card);
+  --ws-edge-slot: var(--ws-edge-card);
+  --ws-edge-tray: var(--ws-edge-card);
+  --color-text-heading: #FFFFFF;
+  --color-text-body: #D3D3D3;
+  --color-text-muted: #A9A9A9;
+  --color-text-placeholder: #6E6E6E;
+  --color-text-primary: color-mix(in srgb, var(--color-text-heading) 93%, #000000); /* #EDEDED */
+  --ws-field-ink: var(--color-brand-navy);
+  --ws-field-mark: var(--ws-field-ink); /* the fields are white here, so their marks take the field's own ink (promoted from Input, 0.5.0) */
+  --ws-chart-empty: var(--ws-track);
+  --ws-chart-dot: color-mix(in srgb, var(--ws-ink) 10%, transparent);
+  --ws-chart-navy-fade: color-mix(in srgb, var(--color-text-heading) 30%, var(--color-bg-page));
+  --ws-ink-rgb: 255, 255, 255;
+  --ws-shadow-band: inset 0 var(--ws-hairline) 0 var(--ws-edge-tray);
+  /* Added with 0.5.0 (F2): the navy press step is 84% white, so words lift further. */
+  --ws-tray: color-mix(in srgb, var(--color-bg-page) 84%, var(--color-white)); /* derived: the navy press step */
+  --ws-word-needs-work: color-mix(in srgb, var(--ws-chart-needs-work) 80%, #fdcfe0); /* #F583B0, derived: the pink toward white, 4.53 on the navy press */
+  --ws-word-alert: #FF8282; /* derived: the dark red 24% toward white, 4.53 on the navy press */
+  --ws-word-past-half: color-mix(in srgb, var(--ws-chart-past-half) 80%, #f9f7fd); /* #AD9BF1, derived: the dark purple toward white, 4.52 on the navy press */
+  --ws-mark-muted: color-mix(in srgb, var(--color-text-muted) 80%, #0e5eb3); /* #8A9AAB, derived: 3.8:1 on the navy tray, a mark */
+  --ws-word-answer: color-mix(in srgb, var(--color-text-body) 50%, var(--color-text-heading)); /* WP-cards: the field ink is navy on this ground */
+}

package/tokens/_palettes.css

@@ -0,0 +1,46 @@
+/* ============================================================================
+   The built-in palettes (D15, kit 0.5.0, 4 Nov 2026). A palette is named for how it
+   looks, never for an app. With no attribute the kit is its own palette, "default".
+
+     <html data-palette="cool">                                  the whole page
+     <div class="fello" data-palette="warm" data-theme="dark">   one container, dark
+
+   Each palette sets only contract tokens (tokens/design-tokens.json "palette"), in the
+   same form an app writes its own: the light values on [data-palette="name"], the dark
+   ones on [data-palette="name"][data-theme="dark"]. A token it changes in light and
+   leaves out of dark takes the kit's dark value there, derived from the dark inputs
+   (reported by the check). Marks keep their source's exact tone; a word in that tone
+   takes its AA step (D2).
+
+   scripts/generate-tokens.mjs writes these into tokens.css, tokens.root.css, fello.css
+   and the scoped build in the form `check-palette --emit` writes for an app's own (each
+   palette on any element, light or dark, nested either way), and stops when
+   scripts/check-palette.mjs finds a word under AA, a weak focus ring or chart tones
+   that cannot be told apart. Sources are data, quoted by value.
+
+   The first product's shipped tally navy (#093555, its globals.css) differs from the
+   default's #2C4870 in that one token; Seth's value wins (D1), so it has no palette of
+   its own: the product adopts the default's tally.
+   ========================================================================== */
+
+/* cool: the blue-grey sky ground under a glass stage, links in the heading navy, the
+   finer #E2E2E2 row lines. Source: Seth's prototype CSS (style1.css :root and the frame,
+   lines 6, 12-14, 76-78, 132, 195). Its paper, well, edges, hovers, coral and tones are
+   already the kit's (the default took them from it), so they are not repeated. */
+[data-palette="cool"] {
+  --ws-stage-foot: #fefbf9; /* the stage is glass over the sky, never washed warm (style1.css:76-78) */
+  --ws-edge: #e2e2e2; /* --line: row hairlines inside cards (style1.css:195) */
+  --color-text-interactive: var(--color-text-heading); /* links and acting words are the navy (style1.css:132) */
+}
+[data-palette="cool"][data-theme="dark"] {
+  --color-text-interactive: var(--color-text-heading); /* derived: the source draws no dark; links keep the heading's tone */
+}
+
+/* warm: the plain warm cream with no sky over it, the stage washed from the cream to
+   #FEF9F6, the #EDEDED tray and the #F3F1EF plate. Source: Seth's six product frames
+   (the stage 301:1630, the tray card 2.1, the agent tones). Tally #2C4870, coach #098486,
+   growth #6D4FC2, recruit salmon, error #B1042F, the tray and the plate are already the
+   kit's, so only the sky differs. */
+[data-palette="warm"] {
+  --ws-frame-top: #fefbf9; /* no sky: the frames' page is the cream itself */
+}