jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.3 Phase 4j: colour grammar correction — record red, brand orange separate, wirelines bumped

Browse Source 
Major correction per round-8 redirect.

Problem.

  - Brown/copper --color-accent #C97845/#9D5F32 was dragging the UI
    back into the warm-brutalist palette and competing with semantic
    yellow.
  - Record button about to become blue (Lumotia primary). Wrong —
    record is universally red across products and OSes.
  - Brand orange conflated with primary action. Orange should be
    brand mark only.

Solution.

  Source tokens — identity-only, never used directly in components:
    --source-red    #FF0700
    --source-yellow #FFCD00
    --source-green  #00FF56
    --source-blue   #000AFF
    --source-orange-brand #F0620A
    --{role}-complement-source for the wireline layer

  Component tokens — what components subscribe to. Hand-tuned hex
  values verified at WCAG AA on the foreground each button pairs with.
  Tonal scales (red-50..red-950 etc.) reserved for a focused future
  commit; component names stay stable through that upgrade:

    --button-record-bg     #DC2626  (red)
    --button-record-fg     #FFFFFF
    --button-record-border #B91C1C
    --button-record-wire   #00D8E0  (cyan, red's complement)

    --button-primary-bg    #2563EB  (blue)
    --button-primary-fg    #FFFFFF
    --button-primary-wire  #F6E600  (yellow, blue's complement)

    --button-danger-bg     same as record (red, fg white, cyan wire)

    --button-success-bg    #15803D dark / #166534 light  (green)
    --button-success-wire  #E600A0  (magenta, green's complement)

    --button-caution-bg    #FACC15  (yellow, fg #1A1500 near-black)
    --button-caution-wire  #1850D8  (blue, yellow's complement)

    --brand-accent          #F0620A (orange, LOGO ONLY)
    --brand-wire            #0A98F0 (cyan-blue, orange's complement)

  --color-accent repointed:
    quietware dark:   #4A7BFF  (was #C97845 copper)
    quietware light:  #1D4ED8  (was #9D5F32 copper)
    HC:               #005FCC  (existing, unchanged)
    v0.2 fallback:    var(--color-accent) preserved → v0.2 stays amber.

  New LumotiaButton variant: "record". Used by DictationPage's
  record control. Existing v0.2 record button class swapped from
  bg-accent (amber) to bg-[var(--button-record-bg)] (red). v0.2
  fallback at :root maps --button-record-bg to var(--color-danger)
  so non-quietware surface keeps its red-when-recording / amber-when-
  idle behaviour.

Wirelines (renamed from counterlines).

    --wire-width 1px / --wire-width-active 2px / --wire-width-focus 2px
    --wire-opacity-dark 0.75 (was 0.32; bumped per round-8 spec)
    --wire-opacity-light 0.6 (was 0.22)
    --wire-opacity-active 0.9
    --wire-opacity-focus 1
    --wire-opacity is a mode-aware resolver (-dark dark / -light light)
    --wire-style solid (dotted reserved for design-preview / drag-drop)

  HC contract: --wire-width 0, --wire-width-focus 2px kept.
  --focus-ring-color #005FCC (strong blue), not a decorative complement.

  Legacy --counterline-* tokens kept as aliases pointing at the new
  --wire-* set so Phase 4h/4i opt-in code still works.

Design-system-v2 preview now shows the new record variant alongside
primary so both red and blue button identities are visible.

Verified.

  - npm run check: 0 errors, 0 warnings across 5707 files.

Phase 5c (Dictation layout migration) still queued for the next
focused sitting. This commit gives Phase 5c the correct grammar to
build on.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-05-15 15:39:21 +01:00
parent 001d8fe83d
commit 2c6f5ca230
5 changed files with 294 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
src/design-system/v0.3-quietware-tokens.css
View File

@@ -84,14 +84,40 @@
}
/* ============================================================
Semantic source hues. Identity-only, never used directly.
Each --color-{role}-{tier} is a hand-tuned derivation.
Phase 4j — colour-grammar correction (2026-05-15 round 8).
Five source hues + five complement sources. Never used directly
in component CSS; consumed only by role and component tokens.
Red record / error / destructive / blocked
Blue primary app action / info / processing
Green ready / saved / success
Yellow caution / needs review / pending
Orange Lumotia brand mark only, NOT default action
Component tokens are defined below in each theme block. Tonal
scales (red-50 .. red-950 etc.) will land in a focused future
commit; for now the component layer picks hand-tuned hex values
verified at WCAG AA on their target surface.
============================================================ */
:root[data-design="quietware"] {
--semantic-red-source: #FF0700;
--semantic-yellow-source: #FFCD00;
--semantic-green-source: #00FF56;
--semantic-blue-source: #000AFF;
--source-red: #FF0700;
--source-yellow: #FFCD00;
--source-green: #00FF56;
--source-blue: #000AFF;
--source-orange-brand: #F0620A;
--red-complement-source: #00F8FF;
--yellow-complement-source: #0032FF;
--green-complement-source: #FF00A9;
--blue-complement-source: #FFF500;
--orange-complement-source: #0A98F0;
/* Legacy alias retained for the v0.2 path. */
--semantic-red-source: var(--source-red);
--semantic-yellow-source: var(--source-yellow);
--semantic-green-source: var(--source-green);
--semantic-blue-source: var(--source-blue);
}
/* ============================================================
@@ -120,6 +146,40 @@
--notice-caution-icon: var(--color-caution);
--notice-caution-border: color-mix(in oklab, var(--color-caution) 40%, transparent);
--notice-caution-bg: color-mix(in oklab, var(--color-caution) 8%, transparent);
/* v0.2 fallback button-component tokens. When quietware is off these
keep components rendering with their existing v0.2 colours via the
v0.2 --color-accent / --color-danger semantic tokens. Quietware
blocks below override with the Phase 4j specific values. */
--button-record-bg: var(--color-danger);
--button-record-fg: #FFFFFF;
--button-record-border: var(--color-danger);
--button-record-wire: transparent;
--button-primary-bg: var(--color-accent);
--button-primary-fg: #FFFFFF;
--button-primary-border: var(--color-accent);
--button-primary-wire: transparent;
--button-danger-bg: var(--color-danger);
--button-danger-fg: #FFFFFF;
--button-danger-border: var(--color-danger);
--button-danger-wire: transparent;
--button-success-bg: var(--color-success);
--button-success-fg: #FFFFFF;
--button-success-border: var(--color-success);
--button-success-wire: transparent;
--button-caution-bg: var(--color-caution);
--button-caution-fg: #000000;
--button-caution-border: var(--color-caution);
--button-caution-wire: transparent;
--brand-accent: var(--color-accent);
--wire-width: 0px;
--wire-width-focus: 2px;
--wire-opacity-dark: 0;
--wire-opacity-light: 0;
--wire-opacity-focus: 0;
--wire-style: solid;
--focus-ring-color: var(--color-accent);
}
/* ============================================================
@@ -137,11 +197,19 @@
--color-text-secondary: #BDB6A9;
--color-text-tertiary: #908779;
/* Brand accent. Copper-clay, distinct from semantic yellow. */
--color-accent: #C97845;
--color-accent-hover: #B96638;
--color-accent-subtle: #C9784514;
--color-accent-glow: #C9784525;
/* Phase 4j — brand-accent is bright orange #F0620A, restricted to
logo / brand surfaces. Primary action colour is BLUE, not orange.
--color-accent stays as the convenience alias for primary action
so v0.2 component callers (bg-accent etc.) get blue under
quietware. Brand-only surfaces use --brand-accent. */
--brand-accent: var(--source-orange-brand);
--brand-accent-strong: #C24E07;
--brand-wire: var(--orange-complement-source);
--color-accent: #4A7BFF; /* primary action — blue, AA on dark + white */
--color-accent-hover: #2F62F0;
--color-accent-subtle: #4A7BFF14;
--color-accent-glow: #4A7BFF25;
/* Four-tier role tokens. Signal stays bright (the role's identity);
ink lightens for text legibility on dark; border is a middle value;
@@ -219,53 +287,79 @@
--quietware-texture-color: rgba(243, 239, 231, 1);
/* ----------------------------------------------------------
Phase 4i — counterlines as interactive-affordance identity
(per round-7 redirect). Three-level model:
Phase 4j — wirelines (renamed from counterlines) and component
tokens for buttons (round-8 spec).
Level 0 no counterline (panels, notices, content, disabled)
Level 1 quiet (controls, chips, active nav)
Level 2 strong / focus (keyboard focus, recording state)
Wireline levels (unchanged):
Level 0 none panels, notices (default), content, disabled
Level 1 quiet controls, chips, active nav
Level 2 focus keyboard focus, recording state
Notices retire from default counterline rendering (they have
enough semantic language already: bar + icon + border + bg +
label). Notice can still opt in via the `counterline` prop.
HC contract zeroes the normal width but keeps the focus width
because the HC focus ring IS the tactile detail in that mode.
Opacity bumped per round-8 (was 0.32/0.22/0.85; now 0.75/0.6/1.0)
so Level 1 reads at standard viewing without becoming noisy.
---------------------------------------------------------- */
--counterline-width: 1px;
--counterline-width-focus: 2px;
--counterline-opacity-dark: 0.48;
--counterline-opacity-light: 0.34;
--counterline-opacity-focus: 0.85;
--wire-width: 1px;
--wire-width-active: 2px;
--wire-width-focus: 2px;
--wire-opacity-dark: 0.75;
--wire-opacity-light: 0.6;
--wire-opacity-active: 0.9;
--wire-opacity-focus: 1;
--wire-opacity: var(--wire-opacity-dark); /* mode-aware resolver */
--wire-style: solid;
/* Raw complementary hues. Brand orange gets its own counterline
(soft blue) so primary buttons land in the same identity as the
other roles. */
--role-info-counterline: var(--color-accent);
--role-danger-counterline: #6EA8FF;
--role-success-counterline: #B891FF;
--role-caution-counterline: #3A6BFF;
--role-brand-counterline: #3A6BFF;
/* Legacy counterline aliases retained for Phase 4h/4i opt-in path. */
--counterline-width: var(--wire-width);
--counterline-width-focus: var(--wire-width-focus);
--counterline-opacity-dark: var(--wire-opacity-dark);
--counterline-opacity-light: var(--wire-opacity-light);
--counterline-opacity-focus: var(--wire-opacity-focus);
/* Component usage tokens. Buttons + chips + nav subscribe to these.
Default opacity is dark; light-mode override below replaces. */
--button-brand-counterline: color-mix(in srgb, var(--role-brand-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--button-danger-counterline: color-mix(in srgb, var(--role-danger-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--button-info-counterline: color-mix(in srgb, var(--role-info-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--button-success-counterline: color-mix(in srgb, var(--role-success-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--button-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
/* Component tokens for buttons. Hand-tuned hex values cleared at
WCAG AA on the foreground each button pairs with. Tonal scales
(red-50..red-950 etc.) will replace these in a focused future
commit; component names stay stable. */
--button-record-bg: #DC2626;
--button-record-fg: #FFFFFF;
--button-record-border: #B91C1C;
--button-record-wire: #00D8E0; /* cyan — complement of red */
/* Notice-level counterline tokens kept available for opt-in only.
LumotiaNotice no longer applies them by default per round-7. */
--notice-info-counterline: color-mix(in srgb, var(--role-info-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--notice-danger-counterline: color-mix(in srgb, var(--role-danger-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--notice-success-counterline: color-mix(in srgb, var(--role-success-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--notice-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) calc(var(--counterline-opacity-dark) * 100%), transparent);
--button-primary-bg: #2563EB;
--button-primary-fg: #FFFFFF;
--button-primary-border: #1D4ED8;
--button-primary-wire: #F6E600; /* yellow — complement of blue */
/* Focus ring colour — defaults to brand accent. Components can
override per-context (eg. info focus = info-counterline). */
--focus-ring-color: var(--color-accent);
--button-danger-bg: var(--button-record-bg);
--button-danger-fg: var(--button-record-fg);
--button-danger-border: var(--button-record-border);
--button-danger-wire: var(--button-record-wire);
--button-success-bg: #15803D;
--button-success-fg: #FFFFFF;
--button-success-border: #14532D;
--button-success-wire: #E600A0; /* magenta — complement of green */
--button-caution-bg: #FACC15;
--button-caution-fg: #1A1500;
--button-caution-border: #CA8A04;
--button-caution-wire: #1850D8; /* blue — complement of yellow */
/* Notice counterline tokens retired from defaults (LumotiaNotice
stays opt-in via the `counterline` prop). Tokens kept available
for the opt-in path; same value pattern as Phase 4i. */
--notice-info-counterline: color-mix(in srgb, var(--source-blue) calc(var(--wire-opacity-dark) * 100%), transparent);
--notice-danger-counterline: color-mix(in srgb, var(--red-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent);
--notice-success-counterline: color-mix(in srgb, var(--green-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent);
--notice-caution-counterline: color-mix(in srgb, var(--yellow-complement-source) calc(var(--wire-opacity-dark) * 100%), transparent);
--button-brand-counterline: var(--brand-wire);
/* Focus ring colour — defaults to primary blue. Components can
override per-context (eg. record-button focus could use red). */
--focus-ring-color: var(--button-primary-bg);
}
[data-wire-style="dotted"] {
--wire-style: dotted;
}
/* ============================================================
@@ -285,10 +379,16 @@
--color-text-secondary: #5E574C;
--color-text-tertiary: #74685B;
--color-accent: #9D5F32;
--color-accent-hover: #854E29;
--color-accent-subtle: #9D5F3214;
--color-accent-glow: #9D5F3225;
/* Phase 4j — brand-accent stays as #F0620A (logo only); --color-accent
(primary action) is BLUE under quietware. */
--brand-accent: var(--source-orange-brand);
--brand-accent-strong: #C24E07;
--brand-wire: var(--orange-complement-source);
--color-accent: #1D4ED8; /* primary blue, AA on cream */
--color-accent-hover: #1E40AF;
--color-accent-subtle: #1D4ED814;
--color-accent-glow: #1D4ED825;
/* Four-tier role tokens, light mode. Bg values hand-picked as
clean pale tints, not muddy color-mix products. */
@@ -349,18 +449,44 @@
--quietware-texture-opacity: var(--grain-opacity);
--quietware-texture-color: rgba(29, 27, 24, 1);
/* Phase 4i light-mode counterlines. Lower opacity per Jake's spec
so the detail stays restrained against the cream surface. */
--button-brand-counterline: color-mix(in srgb, var(--role-brand-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--button-danger-counterline: color-mix(in srgb, var(--role-danger-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--button-info-counterline: color-mix(in srgb, var(--role-info-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--button-success-counterline: color-mix(in srgb, var(--role-success-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--button-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
/* Phase 4j light-mode component tokens for buttons. Same component
names as dark mode; values tuned for paper-mode contrast. The
filled buttons keep their dark-mode bg colours (they pair with
white foreground regardless of theme); the wireline tokens drop
opacity via --wire-opacity-light when applied. */
--button-record-bg: #B91C1C; /* slightly darker red so 4.5:1 holds */
--button-record-fg: #FFFFFF;
--button-record-border: #7F1D1D;
--button-record-wire: #00D8E0;
--notice-info-counterline: color-mix(in srgb, var(--role-info-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--notice-danger-counterline: color-mix(in srgb, var(--role-danger-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--notice-success-counterline: color-mix(in srgb, var(--role-success-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--notice-caution-counterline: color-mix(in srgb, var(--role-caution-counterline) calc(var(--counterline-opacity-light) * 100%), transparent);
--button-primary-bg: #1D4ED8;
--button-primary-fg: #FFFFFF;
--button-primary-border: #1E3A8A;
--button-primary-wire: #F6E600;
--button-danger-bg: var(--button-record-bg);
--button-danger-fg: var(--button-record-fg);
--button-danger-border: var(--button-record-border);
--button-danger-wire: var(--button-record-wire);
--button-success-bg: #166534;
--button-success-fg: #FFFFFF;
--button-success-border: #14532D;
--button-success-wire: #E600A0;
--button-caution-bg: #FACC15;
--button-caution-fg: #1A1500;
--button-caution-border: #A16207;
--button-caution-wire: #1850D8;
--wire-opacity: var(--wire-opacity-light); /* light-mode resolver */
/* Legacy notice counterline tokens — opt-in only. */
--notice-info-counterline: color-mix(in srgb, var(--source-blue) calc(var(--wire-opacity-light) * 100%), transparent);
--notice-danger-counterline: color-mix(in srgb, var(--red-complement-source) calc(var(--wire-opacity-light) * 100%), transparent);
--notice-success-counterline: color-mix(in srgb, var(--green-complement-source) calc(var(--wire-opacity-light) * 100%), transparent);
--notice-caution-counterline: color-mix(in srgb, var(--yellow-complement-source) calc(var(--wire-opacity-light) * 100%), transparent);
--button-brand-counterline: var(--brand-wire);
}
/* ============================================================