/* mosaic.css — the mosaic design contract, v0.1.0 * * The published design-token layer any external mosaic app can adopt so it * feels native next to the built-in apps. Plain CSS custom properties — no * framework required. Link it, or copy it and override --color-accent with * your app's identity color (accent is the ONLY thing an app changes; * neutrals always come from this shared ramp). * * Docs: /docs/design Manifest contract: /docs/apps * * Ramp: iOS-native system colors, dark by default, light via * prefers-color-scheme, with a manual override on * (mosaic persists the user's choice in `mosaic.style.theme` localStorage — * same-origin apps can read it; cross-origin apps get the media query). */ :root { /* iOS dark: grouped background + elevated surfaces, systemGray labels, systemBlue accent. */ --color-bg: #000000; --color-surface: #1c1c1e; --color-surface-2: #2c2c2e; --color-border: #38383a; --color-fg: #ffffff; --color-muted: #8e8e93; --color-accent: #0a84ff; /* Scale. Radii: ctl 8px (inputs, thumbnails), card 12px, sheet 16px, pills full. One list-row height everywhere. */ --radius-ctl: 8px; --radius-card: 12px; --radius-sheet: 16px; --row-h: 56px; /* Chrome defaults — override only when your app's chrome differs. */ --nav-h: 2.75rem; --mini-player-h: 0px; } @media (prefers-color-scheme: light) { :root { /* iOS light: systemGroupedBackground + white cards. */ --color-bg: #f2f2f7; --color-surface: #ffffff; --color-surface-2: #e5e5ea; --color-border: #d1d1d6; --color-fg: #000000; --color-muted: #8e8e93; --color-accent: #007aff; } } /* Manual theme override (user preference from mosaic's Style page). */ :root[data-theme="light"] { --color-bg: #f2f2f7; --color-surface: #ffffff; --color-surface-2: #e5e5ea; --color-border: #d1d1d6; --color-fg: #000000; --color-muted: #8e8e93; --color-accent: #007aff; } :root[data-theme="dark"] { --color-bg: #000000; --color-surface: #1c1c1e; --color-surface-2: #2c2c2e; --color-border: #38383a; --color-fg: #ffffff; --color-muted: #8e8e93; --color-accent: #0a84ff; } /* Base document feel. Type ramp (use your framework's utilities to match): * page/section label 10px light uppercase tracking 0.25em muted * hero number text-4xl font-thin tabular-nums * row primary text-sm * row secondary/meta text-xs muted */ html, body { background: var(--color-bg); color: var(--color-fg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1, "cv11" 1; overscroll-behavior: none; } * { -webkit-tap-highlight-color: transparent; } /* Standard list-row height. */ .row-h { height: var(--row-h); } /* Safe-area helpers (notch insets). Backgrounds bleed to physical edges; no pressables inside the reserved bands. */ .safe-bottom { padding-bottom: env(safe-area-inset-bottom); } .safe-top { padding-top: env(safe-area-inset-top); }