/* * tokens.css: Scrollible's two shipped looks, Light and Dark, as CSS * custom properties. Every value is read out of the app rather than chosen * for the web, so a page built on these reads as the same design: * * --paper / --ink Core/Prefs.swift: lightPrimaryHex, darkPrimaryHex * (the grounds) and darkSecondaryHex, lightSecondaryHex * (the inks). Light is Dark turned over: its page is the * dark page's lightness mirrored, its ink is that page. * --ink-body the policy page's paragraph ink: ink at 0.82 * (Panels.swift, policyBlock). * --ink-muted ink at 0.66: the quietest ink that still passes WCAG * AA everywhere it is used (5.5:1 on Light's card, * 7.7:1 on Dark's). * --ink-faint ink at 0.14, the app's chip fill (ChipPaint). * --card / --edge Prefs.surfaces: a card's tone (pinned in PrefsTests) * and its hairline, the page's own extreme mixed in * at edgeLift 0.16. * --ground-top/-foot Core/PageGround.swift: white laid over the top of * the page so it lifts by L* 3.22 (Light) / 5.34 (Dark), * easing out by 420px, and black deepening the foot by * L* 1.80 / 0.96. --lit-top is what that shows. * --shadow-card, Core/Elevation.swift: Firmament's card shadow and its * --top-light one-point light along the top edge, per look. * --band / --band-ink the reel's highlight band (white at 0.86) and the ink * a verse is written in on it (darkExtremeHex). * --disabled ControlPaint.DISABLED_ALPHA. * --radius-card HomeWidget.radius; --radius-tile the app's tiles. * --gutter PAGE_SIDE, the app's one side gutter. * --tap ControlPaint.MIN_TARGET, the least a finger is promised. * * Dark follows the phone (prefers-color-scheme). A page can pin a look with * or . * * Fonts: the app uses the system face for everything but reading; its * reading face is the system serif (New York on Apple devices), which is * what the policy and the verse reference are set in here. Allura, one of * the app's verse fonts, is self-hosted from the app's own file under * /shared/fonts/ (licence: /shared/fonts/OFL.txt). Declaring it costs * nothing: a browser only downloads it if something is set in it. */ @font-face { font-family: "Allura"; src: url("/shared/fonts/Allura-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { color-scheme: light; --paper: #EBF0F4; --ink: #0B1014; --ink-body: rgba(11, 16, 20, 0.82); --ink-muted: rgba(11, 16, 20, 0.66); --ink-faint: rgba(11, 16, 20, 0.14); --card: #DBE0E4; --edge: #C9CDD1; --ground-top: rgba(255, 255, 255, 0.588); --ground-foot: rgba(0, 0, 0, 0.022); --lit-top: #F7F9FA; --shadow-card: 0 12px 26px -14px rgba(16, 24, 32, 0.24); --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.9); --band: rgba(255, 255, 255, 0.86); --band-ink: #14181C; --disabled: 0.4; --radius-card: 22px; --radius-tile: 18px; --gutter: 16px; --tap: 44px; --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-script: "Allura", "Snell Roundhand", cursive; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #0B1014; --ink: #FFFFFF; --ink-body: rgba(255, 255, 255, 0.82); --ink-muted: rgba(255, 255, 255, 0.66); --ink-faint: rgba(255, 255, 255, 0.14); --card: #1D2226; --edge: #32363A; --ground-top: rgba(255, 255, 255, 0.049); --ground-foot: rgba(0, 0, 0, 0.183); --lit-top: #171C1F; --shadow-card: 0 14px 30px -14px rgba(0, 0, 0, 0.7); --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.075); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0B1014; --ink: #FFFFFF; --ink-body: rgba(255, 255, 255, 0.82); --ink-muted: rgba(255, 255, 255, 0.66); --ink-faint: rgba(255, 255, 255, 0.14); --card: #1D2226; --edge: #32363A; --ground-top: rgba(255, 255, 255, 0.049); --ground-foot: rgba(0, 0, 0, 0.183); --lit-top: #171C1F; --shadow-card: 0 14px 30px -14px rgba(0, 0, 0, 0.7); --top-light: inset 0 1px 0 rgba(255, 255, 255, 0.075); }