@flyos/design-system 3.2.0 → 3.4.0

package/package.json

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

package/scss/_fly-theme.scss

@@ -3,6 +3,11 @@
 //   stylePreprocessorOptions.includePaths → design-system src folder
 //   @use 'scss/fly-theme' or @use 'fly-theme' when scss is on the path.
 @use 'tokens';
+
+// The Arabic face the RTL half of `--font-family` names. Emits an @font-face and
+// nothing else, and must be @used from here alone — see the partial's header for
+// why it is a design-system concern rather than a shell one.
+@use 'sf-arabic-font';
 @use 'theme-light';
 @use 'theme-dark';
 

package/scss/_nova-tokens.scss

@@ -110,6 +110,19 @@ html.light-theme {
   --sys-green: #1B7355;
   --sys-purple: #6A3FC0;
 
+  // ── Greeting gradient ──────────────────────────────────────────────────────
+  // The three stops the Home greeting cycles through (`.mb-ctx__greeting`, via the
+  // `greetShift` keyframe; design §7 "Header context / greeting"). Ported from the
+  // design's own per-theme stop sets rather than re-pointed at --accent/--sys-*:
+  // those are a BRAND knob and STATUS hues, and borrowing them drew a saturated
+  // violet→cyan run where the design draws a deeper violet→teal on light glass.
+  // Deliberately NOT accent-derived, so a tenant `applyAccent` re-skin does not
+  // carry the greeting — that is the trade the design's fixed stops ask for.
+  // Tune HERE, never at the call site.
+  --greet-grad-1: #5B3FA8;
+  --greet-grad-2: #0A6E8F;
+  --greet-grad-3: #8A3FB0;
+
   // ── System TINTS ───────────────────────────────────────────────────────────
   // The status-wash step the hue family was missing. Before these existed, 75
   // feature-app call sites minted their own Tailwind-palette literal at a fixed
@@ -332,6 +345,15 @@ html.dark-theme {
   --sys-green: #4dd6a8;
   --sys-purple: #a48ce0;
 
+  // ── Greeting gradient ──────────────────────────────────────────────────────
+  // Same role as the light block (see its comment for the full rationale). The
+  // design draws the dark greeting as a pale lavender → cyan → mauve wash: these
+  // stops sit near white on a near-black plate, which is why they are nowhere
+  // near the saturated hues the status family carries at this position.
+  --greet-grad-1: #E4DBFF;
+  --greet-grad-2: #BFF0FF;
+  --greet-grad-3: #F3DEFF;
+
   // ── System TINTS ───────────────────────────────────────────────────────────
   // Same two-step law as the light block (see its comment for the full
   // rationale). Dark strengths are HIGHER on purpose: these hues are bright

package/scss/_nova-type.scss

@@ -22,12 +22,18 @@
 
 // ── The Display/Text split ───────────────────────────────────────────────────
 // The design distinguishes a Display face (headings ≥ ~13.5px bold) from Text
-// (everything else), but D8 (skill §7, ratified) forbids ever shipping a
-// second face for it — no SF fonts, ever. Geist is ONE family for both; the
-// split rides WEIGHT and LETTER-SPACING only, never `font-family`. Proof
-// point: `--nova-font-menu-item` and `--nova-font-section-title` share the
-// exact same 13.5px SIZE and sit on opposite sides of the split (500/normal
-// Text vs 700/-0.01em Display) — that pairing IS the split in action.
+// (everything else). Since the UI-owner's 2026-08-18 one-system ruling that
+// split rides `font-family` as well as weight and tracking: the six title roles
+// below resolve `var(--font-family-display)`, every other role resolves
+// `var(--font-family)`. Those are the platform's only two families and both are
+// device-resident system faces, so honouring the split still ships no font file
+// — which is what the earlier D8 prohibition was actually protecting.
+//  ·
+// Before that ruling the split was carried by WEIGHT and LETTER-SPACING alone,
+// because D8 forbade a second face outright. The proof point that pairing left
+// behind still reads: `--nova-font-menu-item` and `--nova-font-section-title`
+// share the exact same 13.5px SIZE and sit on opposite sides (500/normal Text vs
+// 700/-0.01em Display) — now they differ in family too.
 
 // ── Snap vs mint ─────────────────────────────────────────────────────────────
 // Each role is annotated SNAP (aliases an existing `--font-*` ramp step from
@@ -54,30 +60,30 @@
   // compact hero headline read visibly looser than the design. Pair with the
   // `greetShift` keyframe (`_nova-motion.scss`) for the animated gradient
   // fill; the fill itself is the caller's concern, not baked in here.
-  --nova-font-page-headline: 700 28px/1.1 var(--font-family);
+  --nova-font-page-headline: 700 28px/1.1 var(--font-family-display);
   --nova-tracking-page-headline: -0.022em;
 
   // MINT. Size coincides with --font-title1 (24px), but that step's 32/24 ≈
   // 1.333 line-height ratio is a third looser than this role's 1.15 — the
   // assistant's hero greeting would visibly loosen on snap.
-  --nova-font-hero-greeting: 700 24px/1.15 var(--font-family);
+  --nova-font-hero-greeting: 700 24px/1.15 var(--font-family-display);
   --nova-tracking-hero-greeting: -0.018em;
 
   // MINT. No ramp step sits at 26px, and none pairs a semibold (600) weight
   // with a sub-30px size. Colour/text-shadow (the D1 extraction notes
   // "#fff + text-shadow") are the caller's concern, not part of the type role.
-  --nova-font-hero-card-name: 600 26px/1.14 var(--font-family);
+  --nova-font-hero-card-name: 600 26px/1.14 var(--font-family-display);
   --nova-tracking-hero-card-name: -0.01em;
 
   // ── Chrome / structural headings (Display) ────────────────────────────────
   // MINT. --font-headline (17px/700) is the nearest ramp step; its 22/17 ≈
   // 1.294 line-height ratio is far looser than this role's 1.1, and the ramp
   // carries no letter-spacing vocabulary at all.
-  --nova-font-drawer-title: 700 16px/1.1 var(--font-family);
+  --nova-font-drawer-title: 700 16px/1.1 var(--font-family-display);
   --nova-tracking-drawer-title: -0.016em;
 
   // MINT. Nothing in the ramp sits near 14.5px at weight 700.
-  --nova-font-dialog-title: 700 14.5px/1.1 var(--font-family);
+  --nova-font-dialog-title: 700 14.5px/1.1 var(--font-family-display);
   --nova-tracking-dialog-title: -0.014em;
 
   // MINT. The design gives a 500-600 WEIGHT RANGE at 14px; --font-footnote
@@ -95,7 +101,7 @@
   // ramp has no vocabulary for at all. Shares its 13.5px SIZE with
   // --nova-font-menu-item below on the opposite side of the Display/Text
   // split — see the file header.
-  --nova-font-section-title: 700 13.5px/1.2 var(--font-family);
+  --nova-font-section-title: 700 13.5px/1.2 var(--font-family-display);
   --nova-tracking-section-title: -0.01em;
 
   // ── Workhorse text — repeated everywhere, snapped where fidelity allows ───
@@ -159,6 +165,39 @@
   --nova-tracking-timestamp: normal;
 }
 
+// ── RTL: tracking off, everywhere, once ─────────────────────────────────────
+// Latin display type is tightened (down to -0.022em on the page headline) because
+// negative tracking is how a large Latin heading stops looking loose. Applied to
+// Arabic the same declaration is not a tightening at all: `letter-spacing` inserts
+// its value BETWEEN glyphs, and Arabic glyphs are joined — so any non-zero value,
+// negative or positive, forces the shaper to break the cursive connections and the
+// word visibly falls apart. That is why the eyebrow's POSITIVE 0.03em is reset here
+// too; "reduce the negative ones" would be the wrong reading of the rule.
+//  ·
+// Every role is listed, including the ones already `normal`, for the same reason the
+// block above gives every role a tracking token at all: a caller writes one pattern
+// regardless of role, and a reader can see at a glance that the reset is total
+// rather than having to diff two lists. `nova-type.spec.ts` pins that completeness.
+//  ·
+// Unlayered, like the `:root` it mirrors — see the RTL note in `_tokens.scss` for
+// why a layered copy of this would silently never apply.
+html[dir='rtl'] {
+  --nova-tracking-page-headline: normal;
+  --nova-tracking-hero-greeting: normal;
+  --nova-tracking-hero-card-name: normal;
+  --nova-tracking-drawer-title: normal;
+  --nova-tracking-dialog-title: normal;
+  --nova-tracking-header-context: normal;
+  --nova-tracking-section-title: normal;
+  --nova-tracking-menu-item: normal;
+  --nova-tracking-body: normal;
+  --nova-tracking-row-label: normal;
+  --nova-tracking-field-label: normal;
+  --nova-tracking-tooltip: normal;
+  --nova-tracking-eyebrow: normal;
+  --nova-tracking-timestamp: normal;
+}
+
 // ── Rule A: tabular numerals (skill §7, mechanical) ─────────────────────────
 // "font-variant-numeric: tabular-nums on every count, timestamp and pagination
 // number." `_app-surface-utilities.scss` already ships `.mono` bundling this

package/scss/_sf-arabic-font.scss

@@ -0,0 +1,32 @@
+// ─── 'SF Arabic' — the Arabic face, declared ONCE for the whole estate ───────
+//  ·
+// This is a `local()`-ONLY @font-face: it names faces already installed on the
+// device and downloads nothing. That is what keeps it inside the platform's
+// "self-hosted only, no CDN" rule — the rule bans *fetching* a font from
+// someone else's server, and this fetches nothing at all.
+//  ·
+// It lives in the design system rather than in the shell's `src/styles/` on
+// purpose: External App remotes (Circles, Thoughts, PPM) consume `fly-theme` and
+// would otherwise inherit `--font-family`'s reference to a family no @font-face
+// in their document ever declared — the exact dev/prod skew the Kufi partial's
+// header records for `page-header.component.scss`. `_fly-theme.scss` is the one
+// entry point that `@use`s this, so the block is emitted exactly once.
+//  ·
+// WHERE IT DOES NOT RESOLVE — say it plainly, because it is half the estate:
+// 'SF Arabic' and 'Geeza Pro' ship with macOS / iOS. On Windows and Linux none
+// of the three `local()` names match, the @font-face contributes nothing, and
+// Arabic falls through the stack to `system-ui` (Segoe UI on Windows). That is a
+// deliberate consequence of the UI-owner's 2026-08-18 stack ruling, which retired
+// the self-hosted Noto Kufi Arabic that had covered every OS equally.
+//  ·
+// `font-weight: 400 700` declares a RANGE over the local faces so a 600 title
+// and a 400 body both resolve here instead of falling out of the family at the
+// first weight the single named face cannot supply.
+
+@font-face {
+  font-family: 'SF Arabic';
+  src: local('SF Arabic'), local('SFArabic-Regular'), local('Geeza Pro');
+  font-weight: 400 700;
+  font-style: normal;
+  font-display: swap;
+}

package/scss/_tokens.scss

@@ -22,27 +22,42 @@
   --status-pending: var(--system-yellow);
 
   // ── FlyOS Typography ──
-  // Geist is the primary face (self-hosted, see styles/_geist-fonts.scss). Inter and the
-  // system stack are the fallbacks. 'Noto Kufi Arabic' (self-hosted, styles/_kufi-fonts.scss,
-  // post-G7) carries the Arabic script for ar/ur: its @font-face is unicode-range-scoped to
-  // Arabic blocks, so per-GLYPH fallback gives Kufi to Arabic text and never touches Latin —
-  // Geist stays the Latin face in every locale, and no per-locale restatement is needed.
-  // In a consumer without that @font-face the name simply skips (pre-Kufi behaviour: system
-  // Arabic face) — External Apps declare their own faces per the estate convention.
-  // ---
-  // 2.0.0 removed 'SF Pro Display' / 'SF Pro' — D8 (no SF fonts, ever, for licensing). The
-  // repo had been SHIPPING them: 9 self-hosted woff2 faces, preloaded from index.html.
-  // Removing them changed NOTHING for ar/ur: SF Pro carries no unicode-range and no Arabic
-  // glyphs, so before Kufi those scripts always resolved to the system Arabic face.
-  --font-family: 'Geist', 'Inter', 'Noto Kufi Arabic', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
+  // ONE typographic system, expressed as TWO stacks: Text carries body/UI, Display
+  // carries titles. The split rides `font-family` (UI-owner ruling 2026-08-18) — it
+  // used to ride weight + letter-spacing alone, because D8 forbade shipping a second
+  // face. Both stacks are resolved from faces already ON the device: nothing is
+  // downloaded, so "no CDN / self-hosted only" is satisfied by shipping no font file
+  // at all rather than by vendoring one. That is what makes naming SF here legal
+  // where the 2.0.0 removal of the SHIPPED SF Pro woff2 set was not.
+  //  ·
+  // These two are the ONLY family declarations in the platform. Everything inherits
+  // from the root rule (`styles/_reset.scss`); the title stack reaches type through
+  // the `--font-*` title roles below and the `--nova-font-*` roles in `_nova-type.scss`.
+  // A component must never restate a stack — inheritance or a role token, never both.
+  //  ·
+  // RTL: the `html[dir='rtl']` block after this one re-points BOTH names at their
+  // Arabic-leading variants. It sits unlayered, in this same cascade tier, because a
+  // layered override would lose to this `:root` — unlayered beats every `@layer`.
+  // 'SF Arabic' is declared `local()`-only in `styles/_sf-arabic-font.scss`; on a
+  // device without it (Windows, Linux) the stack falls through to `system-ui`.
+  --font-family: -apple-system, blinkmacsystemfont, 'SF Pro Text', system-ui, sans-serif;
+  --font-family-display: -apple-system, blinkmacsystemfont, 'SF Pro Display', system-ui, sans-serif;
+
+  // Monospace survives the one-system rule because it is a FUNCTION, not a voice:
+  // code blocks, diffs, ids and log output are unreadable proportionally spaced.
+  // 'Geist Mono' stays self-hosted (`styles/_geist-fonts.scss`) — the Geist SANS half
+  // is what the ruling above retires.
   --font-family-mono: 'Geist Mono', ui-monospace, 'SF Mono', menlo, monospace;
-  --font-xl-title1: 700 48px/56px var(--font-family);
-  --font-xl-title2: 700 38px/46px var(--font-family);
-  --font-large-title: 700 29px/38px var(--font-family);
-  --font-title1: 700 24px/32px var(--font-family);
-  --font-title2: 700 22px/28px var(--font-family);
-  --font-title3: 700 19px/24px var(--font-family);
-  --font-headline: 700 17px/22px var(--font-family);
+
+  // Title roles → Display. Body roles → Text. The boundary is `--font-headline`:
+  // everything at or above it is a heading treatment, everything below is copy.
+  --font-xl-title1: 700 48px/56px var(--font-family-display);
+  --font-xl-title2: 700 38px/46px var(--font-family-display);
+  --font-large-title: 700 29px/38px var(--font-family-display);
+  --font-title1: 700 24px/32px var(--font-family-display);
+  --font-title2: 700 22px/28px var(--font-family-display);
+  --font-title3: 700 19px/24px var(--font-family-display);
+  --font-headline: 700 17px/22px var(--font-family-display);
   --font-body: 510 17px/22px var(--font-family);
   --font-callout: 590 15px/20px var(--font-family);
   --font-subheadline: 400 15px/20px var(--font-family);
@@ -126,3 +141,24 @@
   --link-height: 26px;
   --link-font-size: 13px;
 }
+
+// ─── RTL: the whole typographic system, swapped once ─────────────────────────
+// The ONLY direction-aware font rule in the platform. `dir="rtl"` is set on <html>
+// by `I18nService` and nowhere else, so re-pointing the two family names here
+// re-faces every surface — no per-component `[dir=rtl]` font rule exists or may be
+// added.
+//  ·
+// UNLAYERED, deliberately, and this is the trap that makes it non-obvious: the shell
+// keeps its RTL overrides in `styles-rtl.scss` inside `@layer shell`, and a custom
+// property redeclared there would LOSE to the `:root` block above — under Cascade
+// Level 5 an unlayered declaration beats every layered one regardless of specificity.
+// So the swap has to live in the token layer, beside the values it swaps.
+// `styles.scss` already sets the RTL precedent for `--shell-screen-slide` the same way.
+//  ·
+// Tracking is neutralised rather than merely reduced: negative letter-spacing pulls
+// Arabic glyphs out of their joined forms, which is a legibility failure, not a
+// tightening. `_nova-type.scss` carries the companion `--nova-tracking-*` reset.
+html[dir='rtl'] {
+  --font-family: 'SF Arabic', -apple-system, blinkmacsystemfont, 'SF Pro Text', system-ui, sans-serif;
+  --font-family-display: 'SF Arabic', -apple-system, blinkmacsystemfont, 'SF Pro Display', system-ui, sans-serif;
+}