@flyos/design-system 2.6.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyos/design-system",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "description": "FlyOS design system — shared components, directives, pipes, services, and models for Business App developers.",
   "keywords": [
     "flyos",

package/scss/_nova-tokens.scss

@@ -247,21 +247,15 @@ html.light-theme {
   --mat-menu-solid-a: rgb(238 242 247);
   --mat-menu-solid-b: rgb(222 229 238);
 
-  // The agent aside — the PANEL hue on its own alpha ramp, top-to-bottom. It was a
-  // hardcoded literal inside `_nova-glass.scss`'s `agent` branch, and that literal
-  // was `rgb(56 54 60)` — byte-identical to the DARK `--mat-panel`, so the aside
-  // painted the dark panel colour in both themes and could never flip. Every sibling
-  // branch (`panel`, `menu`) already routed through a theme-aware token; this pair is
-  // that same shape, so the aside stops being the one surface outside the system.
-  // 0.52 -> 0.60 (S6.-1 fan-in ruling). The aside is painted straight against the
-  // WALLPAPER, exactly like `--window-bg`, and 22 of the 26 shipped wallpapers are
-  // dark: at 0.52 the top stop composited to 4.06:1 for body ink over the darkest
-  // one — sub-AA, and measured as such by `theme-contrast.spec`. The window plate
-  // solves this with the adaptive `--fly-glass-alpha` knob; this pair is not in that
-  // set, so it takes the static equivalent instead. 0.60 is not arbitrary: it leaves
-  // 40% transmission, the same as the window plate's ratified floor, so the aside
-  // and the window beside it now let the wallpaper through by the same amount.
-  --mat-agent-a-alpha: 0.6;
+  // The agent aside — the design's translucent vertical ramp, verbatim (fidelity
+  // ruling, 2026-08-17): `Home.dc.html` draws `--mat-agent-a/-b` at 52% → 65% of the
+  // theme hue, and the desktop must look as the design does, full stop. The top stop
+  // spent a day at 0.60 (the S6.-1 fan-in bump: at 0.52 body ink measured 4.06:1
+  // over the darkest wallpaper) — that legibility debt now rides the same rails as
+  // the pinned `--mat-*` chrome plates: a measured `exempt` row in
+  // `theme-contrast.ts` SURFACES on the adverse pairing, not a value the design
+  // never drew. Do not re-thicken these; the sanctioned exit is DS-side ink work.
+  --mat-agent-a-alpha: 0.52;
   --mat-agent-a: rgb(230 236 243 / calc(var(--mat-agent-a-alpha) * 100%));
   --mat-agent-b-alpha: 0.65;
   --mat-agent-b: rgb(230 236 243 / calc(var(--mat-agent-b-alpha) * 100%));
@@ -297,9 +291,22 @@ html.light-theme {
 // Selector matches `_theme-dark.scss`.
 html.dark-theme {
   // ── Chrome + nav rail ──────────────────────────────────────────────────────
-  --chrome-ink: rgb(255 255 255 / 65%);
+  // 90%, not the design mock's 65% (RULED 2026-08-17). The `--mat-*` plates are
+  // PINNED at the mock's static alphas under the fidelity ruling — the adaptive
+  // thickening that briefly compensated for a weak ink was itself the "bar and rail
+  // are darker than Home" defect — so the ink is the ONLY legibility lever this
+  // chrome has left. At the pinned `--mat-rail-alpha: .38`, 65% ink measures 4.45:1
+  // over a mid-luminance wallpaper (sub-AA) where 90% measures 6.81:1, and it
+  // roughly halves the depth of the bright-room exemption cells that remain
+  // (`theme-contrast.ts` SURFACES carries them, measured). Weakening this back
+  // toward the mock's 65% re-fails the mid rooms — `theme-contrast.spec.ts` pins
+  // exactly that recomputation.
+  // —
+  // Hover affordance is unaffected: both the rail item and the header buttons carry
+  // hover on the BACKGROUND (`--w05` / `--tint-hover`), not on this ink delta.
+  --chrome-ink: rgb(255 255 255 / 90%);
   --chrome-ink-hover: #fff;
-  --rail-ink: rgb(255 255 255 / 65%);
+  --rail-ink: rgb(255 255 255 / 90%);
   --rail-stroke: rgb(255 255 255 / 12%);
 
   // Selection family — accent-derived (the 2026-08-17 two-purples ruling, the
@@ -414,22 +421,21 @@ html.dark-theme {
   --mat-menu-solid-a: rgb(32 31 37);
   --mat-menu-solid-b: rgb(26 25 30);
 
-  // Translucent again (2026-08-16), on S6W's COOL hues — half of that ruling reversed, half
-  // kept, and the split is deliberate. S6W found the aside compositing muddy brown over warm
-  // wallpapers and went alpha-1 on the menu pair's stops. Two facts have changed since:
-  //   · the warm rgb(56 54 60) hue was half the mud, and it stays gone — these stops remain
-  //     the cool menu-pair hues, which tint cool-neutral rather than brown;
-  //   · the model now knows about the shell's 35% black wallpaper scrim (`shellBackdrop`),
-  //     which darkens and mutes whatever shows through — the "wallpaper tints the plate"
-  //     dose S6W measured was computed against a backdrop the browser does not paint.
-  // At 0.6/0.68 every aside row clears AA through the scrim over the WORST shipped backdrop
-  // (primary 7.36/9.15, secondary 4.99/5.99 — theme-contrast gate), and the aside once again
-  // matches the design's translucent panel (the mock's aside was 0.52→0.65) and its light-theme
-  // sibling right above (0.6/0.65) instead of being the one opaque slab in the shell.
-  --mat-agent-a-alpha: 0.6;
-  --mat-agent-a: rgb(32 31 37 / calc(var(--mat-agent-a-alpha) * 100%));
-  --mat-agent-b-alpha: 0.68;
-  --mat-agent-b: rgb(26 25 30 / calc(var(--mat-agent-b-alpha) * 100%));
+  // The design's aside, verbatim (fidelity ruling, 2026-08-17): ONE hue — the panel's
+  // rgb(56 54 60) — at 52% → 65%, exactly as `Home.dc.html` draws it. This pair has
+  // been alpha-1 on the menu hues (S6W: "muddy brown over warm wallpapers"), then
+  // translucent on the menu hues at 0.6/0.68 — and both retunes were measured through
+  // layers that no longer exist: the 35% wallpaper scrim their AA numbers assumed was
+  // removed by the raw-wallpaper ruling, and the mud S6W saw was the UNBLURRED
+  // wallpaper showing through (dark used to neutralise the aside's backdrop-filter;
+  // the fidelity pass restored the design's blur(16) saturate(180) brightness(.95),
+  // which is what actually averages a warm backdrop to neutral). Sub-AA cells at
+  // these values are measured `exempt` rows in `theme-contrast.ts` SURFACES, same
+  // rails as the pinned `--mat-*` chrome — do not re-thicken or re-cool these stops.
+  --mat-agent-a-alpha: 0.52;
+  --mat-agent-a: rgb(56 54 60 / calc(var(--mat-agent-a-alpha) * 100%));
+  --mat-agent-b-alpha: 0.65;
+  --mat-agent-b: rgb(56 54 60 / calc(var(--mat-agent-b-alpha) * 100%));
   --mat-tip-a-alpha: 0.82;
   --mat-tip-a: rgb(46 44 52 / calc(var(--mat-tip-a-alpha) * 100%));
   --mat-tip-b-alpha: 0.86;

package/scss/_shell-embed-bridge.scss

@@ -32,15 +32,32 @@
 @mixin app-surface-on-glass {
   // Surfaces: the window chrome supplies the material, so the app's own page
   // background is nothing at all; cards/tracks are lifts ON that plate.
-  --bg: transparent;
-  --bg-2: var(--surface-card);
-  --bg-3: var(--fill-tertiary);
-  --bg-hover: var(--surface-active);
 
-  // Hairlines.
+  // LIFTS COME FROM THE NOVA RAMP, NOT FROM `--surface-card`. The design canon
+  // for content regions inside a window (MainContent.dc.html — the signals
+  // listing) is a `--w03` plate with `--w06` header bars, `--w05` row hover and
+  // `--w07` hairlines: a barely-there ink wash the window glass glows through.
+  // `--surface-card` is a different design element — the CHROME card (home
+  // widgets), which in dark is a 55% smoke (`rgb(28 28 32 / .55)`). Stacked on
+  // an already-dark window plate that composites to a near-opaque black slab —
+  // measured live on PPM's `fly-data-table`, and exactly the mismatch a
+  // side-by-side with the design shows. The ramp flips polarity per theme
+  // (white-lift on dark glass, ink-wash on light), which is also what the
+  // design's own components do — they never branch on theme.
+  --bg: transparent;
+  --bg-2: var(--w03);
+  --bg-3: var(--w06);
+  --bg-hover: var(--w05);
+
+  // Hairlines. `--line`/`--line-2` stay on the chrome separators (14% ≈ the
+  // design's `--w14` CONTROL border — FormField.dc.html inputs), which is the
+  // role `--line` now serves: containers and header underlines draw their own
+  // canon ramp step (`--w08`/`--w1`) directly in the components, the same way
+  // detail-card/detail-shell already did. Row dividers drop to the design's
+  // hairline step so they read as hairlines on a `--w03` plate.
   --line: var(--separator);
   --line-2: var(--surface-border);
-  --line-3: var(--separator);
+  --line-3: var(--w07);
 
   // Ink — opaque label tokens, never a surface token. Aliasing a translucent
   // surface onto an ink slot is what turns a control into an empty coloured

package/scss/_theme-dark.scss

@@ -138,59 +138,50 @@ html.dark-theme {
   --card-padding: 20px;
   --card-gap: 14px;
 
-  // ── Apps launcher card tokens — dark glass variant ──────────────────────────
-  --launcher-card-bg: rgb(28 28 32 / 45%);
-  --launcher-card-border: rgb(255 255 255 / 12%);
-  --launcher-card-blur: 50px;
-  --launcher-card-radius: 16px;
-  --launcher-card-icon-bg: rgb(255 255 255 / 8%);
-  --launcher-card-icon-border: rgb(255 255 255 / 14%);
-  --launcher-card-icon-blur: 4px;
-  --launcher-card-title: rgb(255 255 255 / 92%);
-  --launcher-card-desc: rgb(255 255 255 / 58%);
+  // ── `--launcher-card-*` — DELETED (2026-08-18) ─────────────────────────────
+  // The nine-token "dark glass variant" of a launcher tile that paints
+  // `--surface-card` inside `--window-bg` and takes its ink from the label
+  // family. No consumers in either theme; see `_theme-light.scss`.
 
   // ── Window chrome ───────────────────────────────────────────────────────────
-  // 0.55, down from 0.70 (2026-08-16), and the history matters: 42% was genuinely too thin
-  // (white body text ~2.9:1 over `alpine-lake`), but the 70% that fixed it was solved against
-  // the RAW wallpaper — a backdrop the browser never paints. Every dark surface sits on the
-  // shell's 35% black scrim (`.desktop-wallpaper.dark-theme::after`), and through it the full
-  // window ink ladder passes at 0.55: primary 7.35:1, secondary 4.99:1, tertiary 3.30:1 over
-  // the brightest shipped backdrop (theme-contrast gate, measured per row). 0.55 is alpha
-  // parity with `--mat-panel`, so a window and Home read as the same glass — the fork where a
-  // maximized window sat visibly thicker than the launcher beside it is what this closes.
-  --window-bg: rgb(20 20 24 / 55%);
+  // ONE GLASS FAMILY (RULED 2026-08-17, second window ruling of the day): the
+  // window wears the CHROME material — the magic bar / nav rail recipe — not the
+  // mock's content-panel plate. The first fidelity pass shipped `panelStyle`
+  // verbatim (quartet glow + sheen over `--mat-panel` .55, blur 72), and it WAS
+  // byte-exact — a pixel-accurate render over `tropical.jpg` reproduced the shell
+  // to the digit — but the .55 plate over the darker wallpaper midfield read as a
+  // separate, muddier glass beside the .38 chrome, and the owner ruled the shell
+  // shows one family: flat `--mat-rail` fill, `--w16` hairline, the `--w2`
+  // half-pixel inset, `blur(36px) saturate(180%)`. The drop pair stays the
+  // design's window shadow (16/40 + 4/10) — a floating window still needs a
+  // window's elevation, and the shadow does not touch the plate colour.
+  // The AA ladder re-measures on the thinner plate; sub-AA cells ride the exempt
+  // rails in `theme-contrast.ts` as measured rows, same as every other pin.
+  --window-bg: var(--mat-rail);
   --window-radius: 24px;
-  --window-blur: 30px;
-  --window-backdrop-saturate: 160%;
-  --window-shadow: 0 36px 120px rgb(0 0 0 / 52%);
-  --window-border: var(--material-glass-stroke);
-  --window-specular: inset 0 1px 0 rgb(255 255 255 / 12%),
-                     inset 0 -1px 0 rgb(255 255 255 / 6%);
+  --window-blur: 36px;
+  --window-backdrop-saturate: 180%;
+  --window-shadow: 0 16px 40px rgb(0 0 0 / 20%), 0 4px 10px rgb(0 0 0 / 10%);
+  --window-border: var(--w16);
+  --window-specular: inset 0 0.5px 0 var(--w2);
   --window-content-scrim: transparent;
 
   // ── Titlebar ────────────────────────────────────────────────────────────────
-  --titlebar-bg: transparent;
+  // The design's in-window header row (`MainContent.dc.html`): a `--w06` strip
+  // over a `--w1` bottom hairline (the hairline is authored in
+  // `_window-titlebar.scss` — it is structure, not a theme value).
+  --titlebar-bg: var(--w06);
   --titlebar-height: 44px;
   --titlebar-padding: 0 14px;
 
-  // ── Dock ────────────────────────────────────────────────────────────────────
-  --dock-bg: rgb(18 18 22 / 60%);
-  --dock-border: var(--material-glass-stroke);
-  --dock-blur: 50px;
-
-  // ── Menubar ─────────────────────────────────────────────────────────────────
-  --menubar-bg: rgb(14 14 18 / 80%);
-  --menubar-border: var(--material-glass-stroke);
-  --menubar-text: var(--label-primary);
-  --menubar-blur: 40px;
-  --menubar-radius: 24px;
-
-  // ── Sidebar ─────────────────────────────────────────────────────────────────
-  --sidebar-bg: rgb(18 18 22 / 72%);
-  --sidebar-border: var(--material-glass-stroke);
-  --sidebar-width: 60px;
-  --sidebar-icon-size: 36px;
-  --sidebar-radius: 28px;
+  // ── `--dock-*` / `--menubar-*` / `--sidebar-*` — DELETED (2026-08-18) ───────
+  // Three surfaces this shell does not have, described in fifteen tokens. The
+  // mobile dock is `bottom-nav` and it takes `glass.chrome`; there is no menubar
+  // and no sidebar. Their last references — `--dock-bg` in ~300 lines of dead
+  // CSS in `desktop-icons.component.scss`, `--dock-blur`/`--dock-border` in
+  // `tasks-panel` — went in the same sweep. See `_theme-light.scss` for why they
+  // were deleted rather than left: 40px/50px blurs and 60–80% fills advertised
+  // to whoever goes looking for a shell plate, beside the three ratified tiers.
   --focus-ring: color-mix(in srgb, var(--accent) 60%, transparent);
 
   // ── Button selected state — white-tint pill on dark surface ─────────────────
@@ -214,12 +205,5 @@ html.dark-theme {
     --window-bg: #141416;
     --window-blur: 0px;
     --window-backdrop-saturate: 100%;
-    --dock-bg: #121214;
-    --dock-blur: 0px;
-    --menubar-bg: #0e0e10;
-    --menubar-blur: 0px;
-    --sidebar-bg: #121214;
-    --launcher-card-bg: #1c1c1f;
-    --launcher-card-blur: 0px;
   }
 }

package/scss/_theme-light.scss

@@ -78,8 +78,9 @@ html.light-theme {
   --surface-section: rgb(255 255 255 / 35%);
   --surface-card: rgb(255 255 255 / 20%);
 
-  // The substrate plate alpha — ONE knob, three consumers (`--window-bg`, `--glass-bg`,
-  // `--dock-bg`). 0.6 is the ratified static plate; `WallpaperGlassService` overrides it at
+  // The substrate plate alpha — ONE knob, two consumers (`--window-bg`, `--glass-bg`; the
+  // third, `--dock-bg`, went with the dead dock tokens below).
+  // 0.6 is the ratified static plate; `WallpaperGlassService` overrides it at
   // runtime with the thinnest alpha in [0.6, 0.7] that keeps the WEAKEST substrate body ink
   // (`--text-color-secondary`, 78%) at AA over the ACTIVE wallpaper. Over bright and mid rooms
   // that is 0.6 itself; over a starfield-dark room it steps to 0.62 (0.6 measures 4.51:1 there —
@@ -151,55 +152,67 @@ html.light-theme {
   --card-padding: 20px;
   --card-gap: 14px;
 
-  // Apps launcher card tokens — matches Figma frosted glass card spec
-  --launcher-card-bg: rgb(224 224 224 / 30%);
-  --launcher-card-border: rgb(255 255 255 / 40%);
-  --launcher-card-blur: 50px;
-  --launcher-card-radius: 16px;
-  --launcher-card-icon-bg: rgb(255 255 255 / 10%);
-  --launcher-card-icon-border: rgb(255 255 255 / 10%);
-  --launcher-card-icon-blur: 4px;
-
-  // The tile paints `--surface-card` inside `--window-bg`, so its ink follows the label family
-  // rather than keeping a private white. (`--launcher-card-bg` above has no consumers.)
-  --launcher-card-title: var(--label-primary);
-  --launcher-card-desc: var(--label-secondary);
-
-  // Window chrome — light frosted glass similar to Figma spec (soft white plate,
-  // strong background blur, subtle luminous border).
-  // The app window plate. At 6% this was the single biggest cause of the reported failure:
-  // every app's body text was effectively painted on the wallpaper. Matches `--glass-bg`,
-  // including its adaptive-knob composition.
+  // ── `--launcher-card-*` — DELETED (2026-08-18) ─────────────────────────────
+  // Nine tokens "matching the Figma frosted glass card spec" for a launcher tile
+  // that paints `--surface-card` inside `--window-bg` and reads its ink from the
+  // label family. A note here already recorded that `--launcher-card-bg` had no
+  // consumers; the truth was that none of the nine did. They carried a 50px blur
+  // and a 30–45% fill — a plate recipe nothing painted, next to the three tiers
+  // the language actually has.
+
+  // ── Window chrome ───────────────────────────────────────────────────────────
+  // ONE GLASS FAMILY, light half (2026-08-18). Dark's ruling put the window on
+  // the CHROME material — the magic bar / nav rail recipe — and this block kept
+  // the panel family whole: `.46`-class fill, the 72px panel blur, the `--w18`
+  // rim and the `--w22` inset. Only the FILL ever had a reason.
+  // —
+  // The fill genuinely diverges and stays: the mock's static `--mat-panel` plate
+  // (.46 pale slate) measures 2.74:1 for window BODY text over the dark-wallpaper
+  // majority — 2.0:1 for tertiary — which is app content unreadable in the light
+  // theme's common case, not a label on an adverse pairing. The exemption
+  // mechanism is for edges, not for the main reading surface, so the adaptive
+  // white `--fly-glass-alpha` composition stays: the thinnest white plate that
+  // holds the weakest body ink at AA over the CURRENT wallpaper (0.6 floor, one
+  // step more white over a dark room). Over bright rooms — the pairing the mock
+  // actually draws — the two plates are near-identical anyway.
+  // —
+  // The other three carried NO contrast argument. Blur radius, rim step and
+  // specular step do not enter a contrast calculation at all — they came along
+  // because the panel recipe was copied whole — and while they stayed, a light
+  // window read as a different glass from the light rail beside it: the exact
+  // complaint the dark ruling answered, still live on the other theme. They now
+  // match `glass.chrome`: 36px tier, `--w16` hairline, `--w2` inset.
+  // —
+  // What is left is one honest divergence (the fill, with a measured floor)
+  // instead of four, three of which nobody had decided.
   --window-bg: rgb(255 255 255 / calc(var(--fly-glass-alpha) * 100%));
   --window-radius: 24px;
-  --window-blur: 24px;
-  --window-backdrop-saturate: 175%;
-  --window-shadow: 0 28px 96px rgb(0 0 0 / 18%);
-  --window-border: rgb(17 24 39 / 10%);
-  --window-specular: inset 0 1px 0 rgb(255 255 255 / 30%),
-                     inset 0 -1px 0 rgb(255 255 255 / 16%);
+  --window-blur: 36px;
+  --window-backdrop-saturate: 180%;
+  --window-shadow: 0 16px 40px rgb(0 0 0 / 20%), 0 4px 10px rgb(0 0 0 / 10%);
+  --window-border: var(--w16);
+  --window-specular: inset 0 0.5px 0 var(--w2);
   --window-content-scrim: transparent;
   --app-content-plate: transparent;
-  --titlebar-bg: transparent;
+  --titlebar-bg: var(--w06);
   --titlebar-height: 44px;
   --titlebar-padding: 0 14px;
 
-  // Backs BOTH the dock and the top Finder bar (`.topbar-glass`), which is why it needs a real
-  // substrate: at 15% the bar's labels and icons sat on the wallpaper like everything else.
-  // Same plate as the window, same adaptive knob.
-  --dock-bg: rgb(255 255 255 / calc(var(--fly-glass-alpha) * 100%));
-  --dock-border: rgb(17 24 39 / 12%);
-  --dock-blur:50px;
-  --menubar-bg: rgb(255 255 255 / 60%);
-  --menubar-border: rgb(17 24 39 / 10%);
-  --menubar-text: var(--label-primary);
-  --menubar-blur: 40px;
-  --menubar-radius: 24px;
-  --sidebar-bg: rgb(255 255 255 / 60%);
-  --sidebar-border: rgb(17 24 39 / 10%);
-  --sidebar-width: 60px;
-  --sidebar-icon-size: 36px;
-  --sidebar-radius: 28px;
+  // ── `--dock-*` / `--menubar-*` / `--sidebar-*` — DELETED (2026-08-18) ───────
+  // Fifteen tokens describing three surfaces this shell does not have. The
+  // "dock" and "top Finder bar (`.topbar-glass`)" the comment here named were
+  // gone; the menubar and sidebar never shipped at all. The last three
+  // references were `--dock-bg` in ~300 lines of dead CSS in
+  // `desktop-icons.component.scss`, and `--dock-blur`/`--dock-border` in
+  // `tasks-panel`, both fixed in the same sweep. (`--dock-dd-gap` is a
+  // different, live token — it is defined locally in `magic-bar-cluster`, not
+  // here.)
+  // —
+  // Deleted rather than left harmless because they were not harmless: they
+  // advertised 40px/50px blurs and 60–80% fills to anyone who went looking for a
+  // shell plate — a menu of answers the Nova language does not contain, next to
+  // the three tiers it does. The same reasoning retired the pre-Nova
+  // `glass-panel` mixin family in `src/styles/_mixins.scss`.
   --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent);
 
   // Segmented `.fos-btn.selected` / `.active` (Settings theme row, clock, weather, etc.): dark pill on light UI.
@@ -259,12 +272,5 @@ html.light-theme {
     --window-bg: #f7f8fa;
     --window-blur: 0px;
     --window-backdrop-saturate: 100%;
-    --dock-bg: #f4f5f7;
-    --dock-blur: 0px;
-    --menubar-bg: #f7f8fa;
-    --menubar-blur: 0px;
-    --sidebar-bg: #f4f5f7;
-    --launcher-card-bg: #fff;
-    --launcher-card-blur: 0px;
   }
 }