@flyos/design-system 3.10.0 → 3.12.0

package/package.json

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

package/scss/_app-surface-tokens.scss

@@ -151,12 +151,12 @@
 :root,
 html.light-theme {
   // ── Neutrals — text ──────────────────────────────────────────────────────
-  --ink: oklch(18% 0.005 250deg);        // primary text, primary button fills
-  --ink-2: oklch(32% 0.005 250deg);      // secondary text
-  --ink-3: oklch(50% 0.005 250deg);      // tertiary text, icons
-  --ink-4: oklch(65% 0.005 250deg);      // disabled, muted labels
-  --ink-inverse: oklch(99% 0 0deg);      // text on dark / gradient fills
-  --ink-hover: oklch(28% 0.005 250deg);  // hover shade of --ink-filled controls
+  --ink: oklch(18% 0.005 250deg); // primary text, primary button fills
+  --ink-2: oklch(32% 0.005 250deg); // secondary text
+  --ink-3: oklch(50% 0.005 250deg); // tertiary text, icons
+  --ink-4: oklch(65% 0.005 250deg); // disabled, muted labels
+  --ink-inverse: oklch(99% 0 0deg); // text on dark / gradient fills
+  --ink-hover: oklch(28% 0.005 250deg); // hover shade of --ink-filled controls
 
   // Label for a fill of `--ink` itself (the primary button). Distinct from
   // `--ink-inverse`, which is a FIXED near-white for coloured/gradient fills and
@@ -169,14 +169,14 @@ html.light-theme {
   --on-ink: var(--ink-inverse);
 
   // ── Neutrals — borders ───────────────────────────────────────────────────
-  --line: oklch(92% 0.004 250deg);       // default borders
-  --line-2: oklch(88% 0.004 250deg);     // hover borders
-  --line-3: oklch(96% 0.003 250deg);     // inner row dividers
+  --line: oklch(92% 0.004 250deg); // default borders
+  --line-2: oklch(88% 0.004 250deg); // hover borders
+  --line-3: oklch(96% 0.003 250deg); // inner row dividers
 
   // ── Surfaces (opaque by design — see the header note) ────────────────────
-  --bg: oklch(98.5% 0.003 100deg);       // app background (warm off-white)
-  --bg-2: oklch(100% 0 0deg);            // cards, table
-  --bg-3: oklch(97% 0.004 100deg);       // sidebar, table header
+  --bg: oklch(98.5% 0.003 100deg); // app background (warm off-white)
+  --bg-2: oklch(100% 0 0deg); // cards, table
+  --bg-3: oklch(97% 0.004 100deg); // sidebar, table header
   --bg-hover: oklch(96% 0.005 250deg);
 
   // ── Brand primitives ─────────────────────────────────────────────────────
@@ -188,11 +188,7 @@ html.light-theme {
     oklch(60% 0.19 305deg),
     oklch(45% 0.2 285deg)
   );
-  --grad-soft: linear-gradient(
-    135deg,
-    oklch(74% 0.13 195deg / 12%),
-    oklch(55% 0.18 295deg / 12%)
-  );
+  --grad-soft: linear-gradient(135deg, oklch(74% 0.13 195deg / 12%), oklch(55% 0.18 295deg / 12%));
 
   // ── Accent plate/ink PAIRS ───────────────────────────────────────────────
   // NEVER paint --accent on an --accent-soft plate: that is purple-on-purple,
@@ -239,10 +235,10 @@ html.light-theme {
   // ── Icon size ramp ───────────────────────────────────────────────────────
   // ONE scale for every icon (PrimeIcons + inline SVG). Icons had drifted to
   // ~13 different sizes, which is why they never lined up beside each other.
-  --icon-xs: 12px;   // dense meta rows, chips
-  --icon-sm: 14px;   // text buttons, section-header actions
-  --icon-md: 16px;   // default — icon buttons, rails, nav
-  --icon-lg: 20px;   // emphasis / empty states
+  --icon-xs: 12px; // dense meta rows, chips
+  --icon-sm: 14px; // text buttons, section-header actions
+  --icon-md: 16px; // default — icon buttons, rails, nav
+  --icon-lg: 20px; // emphasis / empty states
 
   // ── Status chips (workflow-generic) ──────────────────────────────────────
   --st-published: oklch(55% 0.13 165deg);
@@ -273,6 +269,20 @@ html.light-theme {
   --scrim: rgb(0 0 0 / 50%);
   --glass-blur: 24px;
 
+  // ── Module-card teal (app-home fidelity pass, 2026-08-20) ────────────────
+  // The launch-card family (`.ah__card--feature` tile, hover wash, hover ring)
+  // is deliberately THEME-FIXED — decoupled from the running `--accent` and
+  // from `--sys-teal`'s per-theme flip. Since the app-brand cascade (3.12.0)
+  // this pair is the FALLBACK: `fly-app-home` prefers a cascaded
+  // `--app-color`/`--app-color-deep` (published by the shell window from the
+  // app's authored brand colour), and renders this fixed teal only where no
+  // app colour cascades in. Consumers derive the design's alphas via
+  // color-mix; only these two literals exist (conventions-spec rule: raw
+  // colour values live in this file alone). Declared once in `:root`, no
+  // dark-scope redefinition, same as `--ink-inverse`.
+  --module-teal: #2896a0;
+  --module-teal-deep: #105a5a;
+
   // ── Spacing scale (4px base) ─────────────────────────────────────────────
   --sp-1: 4px;
   --sp-2: 8px;
@@ -284,17 +294,17 @@ html.light-theme {
   --sp-8: 56px;
 
   // ── Typography scale ─────────────────────────────────────────────────────
-  --text-2xs: 11.5px;   // field labels, field errors, footer hints
-  --text-xs: 11px;      // eyebrows, badges, metric labels
-  --text-sm: 12.5px;    // meta, hints, crumbs
-  --text-md: 13.5px;    // body in cards, subtitles
-  --text-base: 14px;    // controls, table body
-  --text-lg: 16px;      // page body
-  --text-xl: 18px;      // card titles, dialog titles
-  --text-2xl: 28px;     // detail page h1
-  --text-3xl: 32px;     // listing page h1
+  --text-2xs: 11.5px; // field labels, field errors, footer hints
+  --text-xs: 11px; // eyebrows, badges, metric labels
+  --text-sm: 12.5px; // meta, hints, crumbs
+  --text-md: 13.5px; // body in cards, subtitles
+  --text-base: 14px; // controls, table body
+  --text-lg: 16px; // page body
+  --text-xl: 18px; // card titles, dialog titles
+  --text-2xl: 28px; // detail page h1
+  --text-3xl: 32px; // listing page h1
   --text-display: 44px; // hero title
-  --fw-book: 450;       // between regular and medium (segmented buttons)
+  --fw-book: 450; // between regular and medium (segmented buttons)
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;
@@ -312,10 +322,10 @@ html.light-theme {
   --font-mono: var(--font-sans);
 
   // ── Radii ────────────────────────────────────────────────────────────────
-  --r-sm: 6px;   // icon buttons, kbd
-  --r-md: 8px;   // buttons, inputs, nav items
-  --r-lg: 12px;  // cards, table wrapper, filter panel
-  --r-xl: 16px;  // reserved
+  --r-sm: 6px; // icon buttons, kbd
+  --r-md: 8px; // buttons, inputs, nav items
+  --r-lg: 12px; // cards, table wrapper, filter panel
+  --r-xl: 16px; // reserved
 
   // ── Layout ───────────────────────────────────────────────────────────────
   --row-h: 56px; // table row
@@ -323,8 +333,8 @@ html.light-theme {
   // ── Z-index scale ────────────────────────────────────────────────────────
   --z-sticky: 10;
   --z-bulkbar: 50;
-  --z-overlay: 100;   // drawers, scrims
-  --z-dialog: 110;    // centered dialogs / confirms
+  --z-overlay: 100; // drawers, scrims
+  --z-dialog: 110; // centered dialogs / confirms
   --z-toast: 200;
   --z-tooltip: 1000;
 
@@ -342,10 +352,12 @@ html.light-theme {
   --shadow-accent: 0 4px 12px color-mix(in srgb, var(--accent) 25%, transparent);
   --shadow-tooltip: 0 4px 16px oklch(0% 0 0deg / 18%);
   --shadow-focus-soft: 0 0 0 3px oklch(0% 0 0deg / 4%);
-  --shadow-drawer: -24px 0 64px oklch(0% 0 0deg / 8%);      // end-side panel (LTR)
-  --shadow-drawer-rtl: 24px 0 64px oklch(0% 0 0deg / 8%);   // mirrored under RTL
-  --shadow-dialog: 0 24px 64px oklch(18% 0.005 250deg / 18%), 0 8px 24px oklch(18% 0.005 250deg / 10%);
-  --shadow-toast: 0 12px 32px oklch(18% 0.005 250deg / 14%), 0 4px 12px oklch(18% 0.005 250deg / 8%);
+  --shadow-drawer: -24px 0 64px oklch(0% 0 0deg / 8%); // end-side panel (LTR)
+  --shadow-drawer-rtl: 24px 0 64px oklch(0% 0 0deg / 8%); // mirrored under RTL
+  --shadow-dialog:
+    0 24px 64px oklch(18% 0.005 250deg / 18%), 0 8px 24px oklch(18% 0.005 250deg / 10%);
+  --shadow-toast:
+    0 12px 32px oklch(18% 0.005 250deg / 14%), 0 4px 12px oklch(18% 0.005 250deg / 8%);
 
   // ── Transitions ──────────────────────────────────────────────────────────
   --t-state: 0.12s ease;
@@ -393,11 +405,7 @@ html.dark-theme {
     oklch(70% 0.19 305deg),
     oklch(60% 0.2 285deg)
   );
-  --grad-soft: linear-gradient(
-    135deg,
-    oklch(78% 0.13 195deg / 18%),
-    oklch(68% 0.18 295deg / 18%)
-  );
+  --grad-soft: linear-gradient(135deg, oklch(78% 0.13 195deg / 18%), oklch(68% 0.18 295deg / 18%));
 
   // ── Interaction state layers — light veil on dark surfaces ───────────────
   --state-hover: oklch(95% 0.02 285deg / 6%);
@@ -409,7 +417,7 @@ html.dark-theme {
   --st-published-bg: oklch(28% 0.06 165deg);
   --st-approved: oklch(82% 0.15 245deg);
   --st-approved-bg: oklch(28% 0.06 245deg);
-  --st-draft: var(--ink-2);              // same grey as secondary text on dark
+  --st-draft: var(--ink-2); // same grey as secondary text on dark
   --st-draft-bg: oklch(24% 0.003 250deg);
   --st-archived: oklch(82% 0.06 60deg);
   --st-archived-bg: oklch(28% 0.05 60deg);
@@ -577,6 +585,8 @@ $_plate-ink: 'clamp(0, (0.1791 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) * infin
   :root,
   html.light-theme,
   html.dark-theme {
-    --on-accent-fill: color(from var(--accent-fill) srgb-linear #{$_plate-ink} #{$_plate-ink} #{$_plate-ink} / 100%);
+    --on-accent-fill: color(
+      from var(--accent-fill) srgb-linear #{$_plate-ink} #{$_plate-ink} #{$_plate-ink} / 100%
+    );
   }
 }

package/scss/_nova-glass.scss

@@ -147,7 +147,8 @@
     // 2026-08-17 review fixed for dark. Alpha-1 in both themes; dark's twins are
     // byte-identical to the base pair, so this changes nothing there.
     @if $nested {
-      @return $glow, $sheen, linear-gradient(180deg, var(--mat-menu-solid-a), var(--mat-menu-solid-b));
+      @return $glow, $sheen,
+        linear-gradient(180deg, var(--mat-menu-solid-a), var(--mat-menu-solid-b));
     }
 
     @return $glow, $sheen, linear-gradient(180deg, var(--mat-menu-a), var(--mat-menu-b));
@@ -350,8 +351,12 @@
     border-radius: inherit;
     background: var(--window-edge-gradient);
     pointer-events: none;
-    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
   }
@@ -533,8 +538,12 @@
       rgb(255 255 255 / 42%)
     );
     pointer-events: none;
-    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
   }