@flyos/design-system 0.0.1-reserved → 1.0.0

package/scss/_theme-light.scss

@@ -0,0 +1,231 @@
+// ─── Light Theme (default) ───────────────────────────────────────────────────
+:root,
+html.light-theme {
+  color-scheme: light;
+
+
+
+  // ── FlyOS platform accent ─────────────────────────────────────────────────
+  // Platform-owned accent palette (violet). Theme-agnostic — same values in
+  // light and dark. Consumed by shell chrome (launcher tiles, documents
+  // editor, agent panel) and inherited by hosted apps that don't bring their
+  // own brand accent. App-specific token remaps live in each External App's
+  // own remote stylesheet (e.g. Circles' circles-shell-overrides.scss), NOT
+  // here.
+  // NOTE: --focus-ring is also platform-owned; its authoritative value is the
+  // orange declaration next to the window-chrome tokens further down this
+  // block (a later declaration in the same block always wins, so a second
+  // definition here would be dead code).
+  --purple:      #9333EA;
+
+  // ── THE accent knob ────────────────────────────────────────────────────────
+  // The one value that defines the platform's accent. Everything else derives from it
+  // (--primary-color, --accent-soft, --focus-ring, the fly-context-menu gradient, …), so a tenant
+  // or user override is a single write: FlyThemeService.applyAccent('#0aa') re-skins the platform.
+  // Never copy this hex elsewhere — a copy silently stops tracking the override.
+  --accent:      #9333EA;
+
+  // Alias of --accent, NOT a second brand colour. It was referenced ~163 times across the DS
+  // and shell and defined nowhere, so every `var(--primary-color)` silently shipped
+  // its orange fallback — that fallback WAS the platform's accent in practice. Defining it
+  // here turns all of those purple at once. An app may still scope its own (dashboard-app
+  // pins blue); a local override wins inside its subtree, as before.
+  --primary-color: var(--accent);
+
+  // DERIVED, never a copy. A hardcoded rgba(147,51,234,…) here would not follow a runtime
+  // accent override (see FlyThemeService.applyAccent) — you would get the new accent with
+  // the old tint beside it. Every accent-derived value must color-mix off --accent.
+  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
+
+  // Scrim — deeper veil for drawers / dialogs sitting over translucent glass
+  --scrim: rgb(0 0 0 / 50%);
+
+  // Semantic feedback — bright fg on translucent bg
+  --danger:      #ff6b6b;
+  --danger-bg:   rgb(255 59 48 / 20%);
+  --danger-line: rgb(255 59 48 / 40%);
+  --warning:     #FEBC2E;
+  --warning-bg:  rgb(254 188 46 / 18%);
+  --warning-fg:  rgb(255 255 255 / 96%);
+
+  // Decorative accent tokens — platform-owned (consumed by the shell's
+  // markdown rendering, agent panel, and thread selector; also inherited by
+  // hosted apps for colour-dot ::before content).
+  --accent-green: var(--system-green);
+  --accent-red: var(--system-red);
+  --accent-blue: var(--system-blue);
+
+  // Semantic status orange (pending / warning dots) — aliases --system-orange like its
+  // siblings. It used to hardcode the brand orange #E8732A, which is why 'orange' and
+  // 'accent' were the same colour and the brand leaked into status chrome.
+  --accent-orange: var(--system-orange);
+  --accent-yellow: var(--system-yellow);
+  --surface-ground: #f8f9fa;
+
+  // ── Glass substrate ────────────────────────────────────────────────────────
+  // These were near-CLEAR (`--surface-card` was a 10% black wash over 10% white; `--glass-bg`
+  // 10% white), which meant light-theme text was composited straight onto the wallpaper
+  // photograph. "Light theme" never implied a light backdrop: 22 of the 26 shipped wallpapers
+  // sit below 0.15 median luminance, so the real substrate was usually near-black and the
+  // theme's dark secondary ink disappeared into it.
+
+  // They now carry real opacity, in line with the dark theme's long-standing 72%/55%. The
+  // window still reads as glass — 72% white lets the wallpaper tint through and the 50px
+  // backdrop blur still does its work — but text no longer sits on a bare photo.
+  // Contract pinned by `src/app/core/theme/theme-contrast.spec.ts`.
+  // `--surface-card` / `--surface-section` are a LIFT on top of the window plate, not a second
+  // full substrate — stacking two thick layers is what reads as frosted plastic.
+  --surface-section: rgb(255 255 255 / 35%);
+  --surface-card: rgb(255 255 255 / 20%);
+
+  // Opaque surface for floating overlays (popovers, menus, tooltips) that must
+  // stay fully legible above content — see the dark theme for the rationale.
+  --surface-overlay: #fff;
+  --surface-border: rgb(0 0 0 / 6%);
+  --surface-hover: rgb(0 0 0 / 4%);
+
+  // Selected/active row tint — one step stronger than hover. Composited over an opaque panel, so a
+  // translucent tint is safe (unlike the glass surfaces above it needs no reduced-transparency pair).
+  --surface-active: rgb(0 0 0 / 8%);
+
+  // Ink is DARK in this theme, at every level. It used to contradict itself — `--text-color`
+  // was white while `--text-color-secondary` was dark ink, in the same block — so primary text
+  // vanished on light glass and secondary text vanished on a dark wallpaper, simultaneously
+  // and for opposite reasons. Both now follow the `--glass-ink-elevated` model below.
+  --text-color: rgb(17 24 39 / 92%);
+  --text-color-secondary: rgb(17 24 39 / 78%);
+  --glass-bg: rgb(255 255 255 / 60%);
+  --glass-bg-elevated: rgb(255 255 255 / 88%);
+
+  // Ink for text sitting ON `--glass-bg-elevated`. This pair was already correct when the rest
+  // of the theme was not, so it became the model the `--label-*` / `--text-color-*` families
+  // were rebuilt against. It now agrees with them rather than compensating for them; the
+  // secondary step is 72% to match `--label-secondary` (65% missed AA on the darkest wallpaper).
+  --glass-ink-elevated: rgb(17 24 39 / 92%);
+  --glass-ink-elevated-secondary: rgb(17 24 39 / 72%);
+  --glass-blur: 24px;
+
+  // A luminous WHITE edge is invisible against a 72%-white plate — that treatment only worked
+  // while the glass was near-clear and backed by a dark photo. A light glass pane takes a
+  // dark hairline instead; the white specular highlight below still supplies the glass sheen.
+  --glass-border: rgb(17 24 39 / 12%);
+  --glass-shadow: 0 8px 40px rgb(0 0 0 / 8%);
+  --glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 50%);
+  --card-radius: 16px;
+  --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. Raised to match `--glass-bg`.
+  --window-bg: rgb(255 255 255 / 60%);
+  --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-content-scrim: transparent;
+  --app-content-plate: transparent;
+  --titlebar-bg: transparent;
+  --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.
+  --dock-bg: rgb(255 255 255 / 60%);
+  --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;
+  --focus-ring: color-mix(in srgb, var(--accent) 50%, transparent);
+
+  // Segmented `.vos-btn.selected` / `.active` (Settings theme row, clock, weather, etc.): dark pill on light UI.
+  --btn-selected-bg: #111827;
+  --btn-selected-text: #fff;
+
+  // Coherently dark ink, stepping down 92 / 72 / 55. The steps are not free choices: each is
+  // the lowest alpha that still clears its WCAG target (4.5 body, 3 tertiary) once composited
+  // over the 62-72% white substrate on the DARKEST shipped wallpaper. Lowering any of them
+  // re-breaks the theme on `starfield`/`moon`; `theme-contrast.spec.ts` will say so.
+  --label-primary: rgb(17 24 39 / 92%);
+  --label-secondary: rgb(17 24 39 / 78%);
+  --label-tertiary: rgb(17 24 39 / 60%);
+  --separator-primary: rgb(0 0 0 / 10%);
+  --separator: var(--separator-primary);
+  --fill-secondary: #e5e7eb;
+  --fill-tertiary: rgb(0 0 0 / 4%);
+
+  // ── Material glass primitives — light counterparts of the dark theme's set. Only
+  // `--material-glass` existed here (and it was opaque `#fff`, i.e. not glass at all); the
+  // blur/stroke/specular siblings were dark-only, so any consumer of them rendered unstyled
+  // in light mode.
+  --material-glass: rgb(255 255 255 / 60%);
+  --material-glass-blur: 40px;
+  --material-glass-stroke: rgb(17 24 39 / 12%);
+  --material-glass-specular: inset 0 1px 0 rgb(255 255 255 / 60%),
+                              inset 0 -1px 0 rgb(17 24 39 / 4%);
+
+  // Aliases used by some Business App SCSS (not part of core visionOS tokens).
+  --fly-color-surface: #fff;
+  --fly-color-surface-alt: #f3f4f6;
+  --fly-color-border: #e5e7eb;
+  --fly-color-text-muted: rgb(17 24 39 / 55%);
+  --fly-color-primary: var(--primary-color);
+  --fly-color-primary-hover: var(--primary-hover);
+  --fly-color-danger: var(--system-red);
+  --fly-shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
+}
+
+// ── Reduced-transparency fallback — restore fully opaque / zero-blur values ──
+// The light theme had no such block while its glass was near-clear, because there was
+// nothing meaningful to make opaque. Now that the substrate is real, it needs the same
+// treatment as the dark theme or `prefers-reduced-transparency` users keep the blur.
+@media (prefers-reduced-transparency: reduce) {
+  :root,
+  html.light-theme {
+    --material-glass: #fff;
+    --material-glass-blur: 0px;
+    --app-content-plate: #f4f5f7;
+    --surface-section: #fff;
+    --surface-card: #fff;
+    --surface-overlay: #fff;
+    --glass-bg: #f7f8fa;
+    --glass-bg-elevated: #fff;
+    --glass-blur: 0px;
+    --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;
+  }
+}

package/scss/_tokens.scss

@@ -0,0 +1,119 @@
+// ─── visionOS System Colors & Design Tokens ─────────────────────────────────
+:root {
+  --system-red: #FF453A;
+  --system-orange: #FF9F0A;
+  --system-yellow: #FFD60A;
+  --system-green: #32D74B;
+  --system-mint: #66D4CF;
+  --system-teal: #6AC4DC;
+  --system-cyan: #5AC8F5;
+  --system-blue: #0A84FF;
+  --system-indigo: #5E5CE6;
+  --system-purple: #BF5AF2;
+  --system-pink: #FF375F;
+  --system-brown: #AC8E68;
+  --system-gray: #98989D;
+
+  // ── Semantic Status Colors ──
+  --status-success: var(--system-green);
+  --status-warning: var(--system-orange);
+  --status-error: var(--system-red);
+  --status-info: var(--system-blue);
+  --status-pending: var(--system-yellow);
+
+  // ── visionOS Typography ──
+  // Geist is the primary face (self-hosted, see styles/_geist-fonts.scss).
+  // SF Pro / Inter / system fonts remain as fallbacks; the cascade also picks
+  // them up for scripts Geist doesn't cover (ar / ur).
+  --font-family: 'Geist', 'SF Pro Display', 'SF Pro', 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', sans-serif;
+  --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);
+  --font-body: 510 17px/22px var(--font-family);
+  --font-callout: 590 15px/20px var(--font-family);
+  --font-subheadline: 400 15px/20px var(--font-family);
+  --font-footnote: 510 13px/18px var(--font-family);
+  --font-caption1: 510 12px/16px var(--font-family);
+  --font-caption2: 510 12px/16px var(--font-family);
+
+  // ── visionOS Label Colors ──
+  --label-primary: rgb(255 255 255 / 96%);
+  --label-secondary: rgb(255 255 255 / 56%);
+  --label-tertiary: rgb(255 255 255 / 36%);
+
+  // ── visionOS Materials ──
+  --material-glass: rgb(128 128 128 / 30%);
+  --material-glass-blur: 50px;
+  --material-glass-stroke: rgb(255 255 255 / 40%);
+  --material-glass-specular: inset 0px -0.5px 1px rgb(255 255 255 / 30%),
+                              inset 0px -0.5px 1px rgb(255 255 255 / 25%),
+                              inset 1px 1.5px 4px rgb(0 0 0 / 8%),
+                              inset 1px 1.5px 4px rgb(0 0 0 / 10%);
+  --material-recessed-bg: linear-gradient(rgb(208 208 208 / 50%), rgb(208 208 208 / 50%)),
+                           linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 10%));
+  --material-recessed-shadow: inset 1px 1.5px 4px rgb(0 0 0 / 10%),
+                               inset 1px 1.5px 4px rgb(0 0 0 / 8%),
+                               inset 0px -0.5px 1px rgb(255 255 255 / 25%),
+                               inset 0px -0.5px 1px rgb(255 255 255 / 30%);
+  --material-thin: rgb(255 255 255 / 6%);
+  --material-regular: rgb(255 255 255 / 12%);
+  --material-thick: rgb(255 255 255 / 20%);
+  --control-idle: rgb(255 255 255 / 6%);
+  --control-hover: rgb(255 255 255 / 12%);
+  --control-selected: rgb(255 255 255 / 100%);
+  --control-disabled: rgb(255 255 255 / 4%);
+  --separator: rgb(255 255 255 / 12%);
+  --blur-shadow-small: 0 2px 4px rgb(0 0 0 / 10%);
+
+  // ── visionOS Button Tokens ──
+  --btn-font-weight: 590;
+  --btn-symbol-font-weight: 510;
+  --btn-radius-capsule: 500px;
+  --btn-radius-rect-lg: 16px;
+  --btn-radius-rect-sm: 8px;
+  --btn-sm-height: 32px;
+  --btn-sm-padding: 0 12px;
+  --btn-sm-font-size: 15px;
+  --btn-sm-line-height: 20px;
+  --btn-sm-symbol-size: 17px;
+  --btn-sm-gap: 2px;
+  --btn-reg-height: 44px;
+  --btn-reg-padding: 0 20px;
+  --btn-reg-font-size: 17px;
+  --btn-reg-line-height: 22px;
+  --btn-reg-symbol-size: 19px;
+  --btn-reg-gap: 6px;
+  --btn-lg-height: 52px;
+  --btn-lg-padding: 0 25px;
+  --btn-lg-font-size: 19px;
+  --btn-lg-line-height: 24px;
+  --btn-lg-symbol-size: 22px;
+  --btn-lg-gap: 6px;
+  --btn-symbol-mini: 28px;
+  --btn-symbol-mini-font: 13px;
+  --btn-symbol-sm: 36px;
+  --btn-symbol-sm-font: 15px;
+  --btn-symbol-reg: 44px;
+  --btn-symbol-reg-font: 19px;
+  --btn-symbol-lg: 52px;
+  --btn-symbol-lg-font: 22px;
+  --btn-symbol-xl: 60px;
+  --btn-symbol-xl-font: 26px;
+  --btn-platter-lighten: rgb(255 255 255 / 6%);
+  --btn-platter-dodge: rgb(94 94 94 / 18%);
+  --btn-hover-grad-white: rgb(255 255 255 / 7%);
+  --btn-hover-grad-gray: rgb(94 94 94 / 14%);
+  --btn-disabled-lighten: rgb(255 255 255 / 4%);
+  --btn-disabled-dodge: rgb(94 94 94 / 7%);
+  --btn-disabled-text: rgb(112 112 112 / 50%);
+  --btn-selected-bg: rgb(255 255 255 / 96%);
+  --btn-selected-text: #000;
+  --link-color: #3CD3FE;
+  --link-height: 26px;
+  --link-font-size: 13px;
+}

package/scss/_vos-button-mixins.scss

@@ -0,0 +1,28 @@
+// visionOS button pseudo-element layers (used by _business-app-buttons.scss).
+// Kept separate from desktop-app glass mixins so Business Apps only pull button-related SCSS.
+
+@mixin vos-platter-layers($radius) {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: $radius;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--btn-platter-lighten), var(--btn-platter-lighten)),
+    linear-gradient(var(--btn-platter-dodge), var(--btn-platter-dodge));
+  background-blend-mode: lighten, color-dodge;
+  mix-blend-mode: screen;
+}
+
+@mixin vos-disabled-layers($radius) {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: $radius;
+  pointer-events: none;
+  background:
+    linear-gradient(var(--btn-disabled-lighten), var(--btn-disabled-lighten)),
+    linear-gradient(var(--btn-disabled-dodge), var(--btn-disabled-dodge));
+  background-blend-mode: lighten, color-dodge;
+  mix-blend-mode: screen;
+}