/* ═══ tokens.css ═══ */ /* ───────────────────────────────────────────────────────────────────────────── INKLINE · design tokens (single source of truth — everything else derives) Flat ink, one accent, one continuous line, generous space. No second hue. No gradients. No glow. No grain. No pure black or white. Two themes, same brand: ink (default, dark) · paper (light) Switch with — components only use the semantic tokens (--ik-bg, --ik-text, …), never the raw palette, so they follow. Mirrored in tokens.json — change both together. ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── core palette (raw — reference these only to define semantics) ─────── */ --ik-ink: #090A0C; /* the ground. never use #000 */ --ik-paper: #F6F3EC; /* the page / the chalk. never use #fff */ --ik-dim: #C9C4B8; /* secondary line & text on ink */ --ik-faint: #8E897D; /* edges, hairlines, tertiary text on ink */ --ik-marker: #FF5A2D; /* THE accent. one per view, on the one thing that matters */ --ik-marker-text: #C4360F; /* marker for small text on paper (AA 4.9:1) */ --ik-marker-deep: #B8380F; /* a darker marker: the base a filled marker button rests on */ /* raised surfaces + rules per ground */ /* secondary / disabled text per ground — the only greys the UI text uses */ --ik-text-2-ink: #A9A497; --ik-text-3-ink: #6E6A60; --ik-text-2-paper: #625E54; --ik-text-3-paper: #A29D90; /* raised surfaces on ink: true neutral (R = G = B) — no blue cast, no brown cast */ --ik-ink-1: #121212; --ik-ink-2: #1B1B1B; --ik-ink-rule: #272727; --ik-paper-1: #FBF9F4; --ik-paper-2: #EFEBE1; --ik-paper-rule: #DDD8CB; /* ── extension colours: OPT-IN, emphasis only (growth · wins · questions) ── Not part of the core brand. Never decoration, never used to tell kinds apart (that is what shapes are for). Introduced in ICOR × Inkline. */ --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; /* ── type ───────────────────────────────────────────────────────────────── */ --ik-font-display: "Bricolage Grotesque", system-ui, sans-serif; /* headlines, big numbers — 700/800, tight tracking */ --ik-font-body: "Instrument Sans", system-ui, sans-serif; /* everything you read */ --ik-font-hand: "Caveat", cursive; /* short human notes, always in marker */ --ik-fs-display: clamp(52px, 8vw, 88px); --ik-fs-h1: clamp(34px, 5vw, 48px); --ik-fs-h2: 28px; --ik-fs-h3: 20px; --ik-fs-body: 16px; --ik-fs-small: 14px; --ik-fs-label: 11px; --ik-fs-hand: 26px; --ik-track-display: -0.035em; --ik-track-heading: -0.022em; --ik-track-label: 0.1em; --ik-track-label-tight: 0.06em; /* ── space (4pt grid) ───────────────────────────────────────────────────── */ --ik-s-1: 4px; --ik-s-2: 8px; --ik-s-3: 12px; --ik-s-4: 16px; --ik-s-5: 20px; --ik-s-6: 24px; --ik-s-7: 32px; --ik-s-8: 48px; --ik-s-9: 72px; --ik-s-10: 120px; /* ── shape ──────────────────────────────────────────────────────────────── */ --ik-r-xs: 6px; /* tags, kbd */ --ik-r-sm: 8px; /* row leads, checkboxes */ --ik-r-btn: 10px; /* buttons (compact) */ --ik-r-md: 14px; /* buttons (touch), menus, toasts, tab items */ --ik-r-lg: 18px; /* cards */ --ik-r-xl: 26px; /* hero, sheets */ --ik-r-pill: 999px; --ik-hair: 1px; /* every outline is this thin */ --ik-gutter-float: 8px; /* every floating panel stays this far inside the screen (Inkline.place) */ /* layers (UI-3): one scale instead of literal z-indexes — a toast is never under a dialog, a tooltip never under a menu */ --ik-z-raised: 1; --ik-z-sticky: 20; --ik-z-dock: 50; --ik-z-float: 90; --ik-z-pop: 100; --ik-z-modal: 200; --ik-z-tip: 300; --ik-z-toast: 400; --ik-z-drag: 500; /* focus (UI-5): one ring, never thinner than 1.5px (the hairline drops to .5px on sharp screens) */ --ik-focus-w: 1.5px; /* touch (UI-6): every control is at least this big to a finger, whatever it looks like */ --ik-target: 44px; --ik-glass-blur: blur(24px) saturate(180%); /* how much the glass (.ik-tabbar--glass) softens what scrolls under it */ /* phone geometry (UI-8): the side rail, and the dock — the tab bar and its gap — that floating pieces sit above */ --ik-rail-w: 252px; --ik-dock: 0px; --ik-bar: 0px; --ik-topbar-h: 56px; /* --ik-topbar-h: the phone top bar (the admin tool sits under it) · --ik-bar: an editor bar on the page (set by inkline.css); bottom-floating pieces lift above it */ /* breakpoints, named (used in @media as plain numbers): phone ≤ 560 · tablet ≤ 860 · laptop ≤ 1180 */ --ik-stroke-glyph: 1.8px; /* glyph units: a 12px glyph ≈ 1px line; larger sizes thin it down */ --ik-stroke-line: 1.5px; /* diagram line */ --ik-stroke-marker: 2.5px; /* the marker tracing progress */ /* ── depth: NEVER a blur, NEVER a grey underline ───────────────────────────── · filled buttons rest on a darker version of their own colour (--ik-sink tall) · everything else is flat: a thin outline (--ik-outline) or a fill, and when pressed it moves INTO the surface (fill sinks + a hard 2px inner top edge) */ --ik-sink: 4px; /* height of a filled button's tonal base */ --ik-outline: color-mix(in srgb, var(--ik-faint) 34%, transparent); /* the thin outline (02.1: lighter — a line you notice second) */ /* ── motion: everything gives back. springs, not eases. ─────────────────── */ /* PRESS = spring(stiffness 720, damping 20, mass 0.6) · ~18% overshoot */ --ik-press: 320ms linear(0, 0.025, 0.091, 0.187, 0.303, 0.429, 0.557, 0.681, 0.795, 0.896, 0.982, 1.052, 1.105, 1.143, 1.166, 1.177, 1.177, 1.169, 1.154, 1.135, 1.114, 1.091, 1.068, 1.047, 1.028, 1.011, 0.997, 0.986, 0.978, 0.972, 0.969, 0.968, 0.969, 0.971, 0.974, 0.978, 0.982, 0.986, 0.99, 0.993, 0.997, 0.999, 1.002, 1.003, 1.005, 1.005, 1.006, 1.006, 1); /* SOFT = spring(stiffness 220, damping 22) · pills sliding, sheets, layout moves */ --ik-soft: 500ms linear(0, 0.016, 0.057, 0.117, 0.189, 0.267, 0.349, 0.431, 0.51, 0.585, 0.654, 0.717, 0.773, 0.823, 0.866, 0.902, 0.933, 0.959, 0.979, 0.995, 1.008, 1.017, 1.023, 1.028, 1.03, 1.031, 1.031, 1.03, 1.028, 1.026, 1.023, 1.021, 1.018, 1.016, 1.013, 1.011, 1.009, 1.007, 1.006, 1.004, 1.003, 1.002, 1.001, 1.001, 1, 1, 1, 0.999, 1); --ik-quick: 160ms cubic-bezier(0.2, 0.9, 0.25, 1); /* colour / opacity changes */ --ik-trace: 900ms cubic-bezier(0.3, 0.7, 0.2, 1); /* the marker drawing a line */ --ik-fly: 640ms linear(0, 0.012, 0.045, 0.094, 0.154, 0.222, 0.295, 0.37, 0.446, 0.52, 0.592, 0.66, 0.724, 0.783, 0.837, 0.886, 0.929, 0.966, 0.998, 1.024, 1.044, 1.058, 1.067, 1.071, 1.071, 1.068, 1.062, 1.054, 1.045, 1.036, 1.026, 1.018, 1.01, 1.004, 0.999, 0.996, 0.994, 0.994, 0.995, 0.996, 0.998, 0.999, 1); /* Holista fly-out: a soft arrival with one small overshoot */ --ik-slide: 500ms cubic-bezier(0.32, 0.72, 0, 1); /* iOS's own glide (15z-d): a sheet rising, a page pushed — fast out, long settle, no overshoot (a sheet never lifts off the bottom) */ } /* ═══ INK — the default ground (dark) ═════════════════════════════════════ */ :root, :root[data-theme="ink"] { --ik-bg: var(--ik-ink); --ik-surface: var(--ik-ink-1); --ik-surface-2: var(--ik-ink-2); --ik-text: var(--ik-paper); --ik-text-2: var(--ik-text-2-ink); /* meta, captions (AA 8:1) */ --ik-text-3: var(--ik-text-3-ink); /* disabled / decorative only */ --ik-rule: var(--ik-ink-rule); --ik-line: var(--ik-faint); /* outlines that must be seen */ --ik-solid: var(--ik-paper); /* solid controls invert with the ground */ --ik-on-solid: var(--ik-ink); --ik-on-solid-accent: #C4360F; /* accent text/icons ON a solid surface (paper here) */ --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 60%, transparent); /* hard inner top edge of something pressed in */ --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-paper) 7%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 62%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .30), 0 6px 12px -2px rgb(0 0 0 / .30), 0 22px 36px -8px rgb(0 0 0 / .38), 0 52px 80px -18px rgb(0 0 0 / .42); /* a card floating toward you: a tight contact shadow, then ever longer and softer ones, as if it stood far out of the screen */ --ik-float-up: 0 2px 3px rgb(0 0 0 / .28), 0 10px 18px -2px rgb(0 0 0 / .32), 0 34px 52px -8px rgb(0 0 0 / .40), 0 72px 110px -20px rgb(0 0 0 / .46); --ik-sage: #86A97A; --ik-sage-ink: #A9C79E; --ik-sage-tint: #1E2A1B; --ik-ochre: #EDB742; --ik-ochre-ink: #EDC46B; --ik-ochre-tint: #2C2412; --ik-slate: #7FA0BD; --ik-slate-ink: #A4C1DA; --ik-slate-tint: #17222C; /* the four ICOR circles (framework, tool set, category picker) */ --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #D9826B; /* glass (post-release 01): the ONE translucent, blurred material — the phone's floating tab bar (.ik-tabbar--glass), as iOS draws its own */ --ik-glass: color-mix(in srgb, var(--ik-ink) 56%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-paper) 24%, transparent); color-scheme: dark; } /* ═══ PAPER — the light ground ════════════════════════════════════════════ */ :root[data-theme="paper"] { --ik-bg: var(--ik-paper); --ik-surface: var(--ik-paper-1); --ik-surface-2: var(--ik-paper-2); --ik-text: var(--ik-ink); --ik-text-2: var(--ik-text-2-paper); /* AA 5.8:1 */ --ik-text-3: var(--ik-text-3-paper); /* disabled / decorative only (2.4:1 — never for content) */ --ik-rule: var(--ik-paper-rule); --ik-outline: color-mix(in srgb, var(--ik-faint) 44%, transparent); --ik-line: var(--ik-faint); --ik-solid: var(--ik-ink); --ik-on-solid: var(--ik-paper); --ik-on-solid-accent: #FF5A2D; --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 16%, transparent); --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker-text); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-ink) 5.5%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 38%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .14), 0 6px 12px -2px rgb(0 0 0 / .16), 0 22px 36px -8px rgb(0 0 0 / .22), 0 52px 80px -18px rgb(0 0 0 / .26); --ik-float-up: 0 2px 3px rgb(0 0 0 / .16), 0 10px 18px -2px rgb(0 0 0 / .20), 0 34px 52px -8px rgb(0 0 0 / .26), 0 72px 110px -20px rgb(0 0 0 / .30); --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #C0583B; --ik-glass: color-mix(in srgb, var(--ik-paper) 62%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-ink) 8%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) { --ik-fly: 1ms linear; --ik-press: 1ms linear; --ik-soft: 1ms linear; --ik-quick: 1ms linear; --ik-trace: 1ms linear; --ik-slide: 1ms linear; } } /* the member's own choice beats the device (UI-4): ; absent = follow the device */ :root[data-motion="reduce"] { --ik-fly: 1ms linear; --ik-press: 1ms linear; --ik-soft: 1ms linear; --ik-quick: 1ms linear; --ik-trace: 1ms linear; --ik-slide: 1ms linear; } @media (max-width: 860px) { :root { --ik-dock: calc(80px + env(safe-area-inset-bottom, 0px)); } } /* native tab bar mode (post-release 01): inside the iPhone and iPad app the app draws iOS's own tab bar. The app sets and --ik-native-tabbar-h (the bar's height above the home indicator, 49px on iPhone; 0 when the web view ends above the bar); the web bar is not drawn and the dock is the native bar + the safe area + 12px */ :root[data-ik-native-tabbar] { --ik-dock: calc(var(--ik-native-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 12px); } :root[data-ik-rail] { --ik-rail-w: 80px; } /* ═══ HAIRLINE — on sharp screens an outline is one device pixel (02.1) ══════ */ @media (min-resolution: 2dppx) { :root { --ik-hair: .5px; } } /* ═══ scoped copy of tokens.css for [data-look] (generated by build-library.js) ═══ */ [data-look] { --ik-ink: #090A0C; --ik-paper: #F6F3EC; --ik-dim: #C9C4B8; --ik-faint: #8E897D; --ik-marker: #FF5A2D; --ik-marker-text: #C4360F; --ik-marker-deep: #B8380F; --ik-text-2-ink: #A9A497; --ik-text-3-ink: #6E6A60; --ik-text-2-paper: #625E54; --ik-text-3-paper: #A29D90; --ik-ink-1: #121212; --ik-ink-2: #1B1B1B; --ik-ink-rule: #272727; --ik-paper-1: #FBF9F4; --ik-paper-2: #EFEBE1; --ik-paper-rule: #DDD8CB; --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; --ik-outline: color-mix(in srgb, var(--ik-faint) 34%, transparent); } [data-look]:not([data-theme="paper"]) { --ik-bg: var(--ik-ink); --ik-surface: var(--ik-ink-1); --ik-surface-2: var(--ik-ink-2); --ik-text: var(--ik-paper); --ik-text-2: var(--ik-text-2-ink); --ik-text-3: var(--ik-text-3-ink); --ik-rule: var(--ik-ink-rule); --ik-line: var(--ik-faint); --ik-solid: var(--ik-paper); --ik-on-solid: var(--ik-ink); --ik-on-solid-accent: #C4360F; --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 60%, transparent); --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-paper) 7%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 62%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .30), 0 6px 12px -2px rgb(0 0 0 / .30), 0 22px 36px -8px rgb(0 0 0 / .38), 0 52px 80px -18px rgb(0 0 0 / .42); --ik-float-up: 0 2px 3px rgb(0 0 0 / .28), 0 10px 18px -2px rgb(0 0 0 / .32), 0 34px 52px -8px rgb(0 0 0 / .40), 0 72px 110px -20px rgb(0 0 0 / .46); --ik-sage: #86A97A; --ik-sage-ink: #A9C79E; --ik-sage-tint: #1E2A1B; --ik-ochre: #EDB742; --ik-ochre-ink: #EDC46B; --ik-ochre-tint: #2C2412; --ik-slate: #7FA0BD; --ik-slate-ink: #A4C1DA; --ik-slate-tint: #17222C; --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #D9826B; --ik-glass: color-mix(in srgb, var(--ik-ink) 56%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-paper) 15%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-paper) 24%, transparent); color-scheme: dark; } [data-look][data-theme="paper"] { --ik-bg: var(--ik-paper); --ik-surface: var(--ik-paper-1); --ik-surface-2: var(--ik-paper-2); --ik-text: var(--ik-ink); --ik-text-2: var(--ik-text-2-paper); --ik-text-3: var(--ik-text-3-paper); --ik-rule: var(--ik-paper-rule); --ik-outline: color-mix(in srgb, var(--ik-faint) 44%, transparent); --ik-line: var(--ik-faint); --ik-solid: var(--ik-ink); --ik-on-solid: var(--ik-paper); --ik-on-solid-accent: #FF5A2D; --ik-pressed-edge: color-mix(in srgb, var(--ik-ink) 16%, transparent); --ik-accent: var(--ik-marker); --ik-accent-text: var(--ik-marker-text); --ik-on-accent: var(--ik-ink); --ik-fill: color-mix(in srgb, var(--ik-ink) 5.5%, transparent); --ik-fill-2: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-scrim: color-mix(in srgb, var(--ik-ink) 38%, transparent); --ik-float: 0 1px 2px rgb(0 0 0 / .14), 0 6px 12px -2px rgb(0 0 0 / .16), 0 22px 36px -8px rgb(0 0 0 / .22), 0 52px 80px -18px rgb(0 0 0 / .26); --ik-float-up: 0 2px 3px rgb(0 0 0 / .16), 0 10px 18px -2px rgb(0 0 0 / .20), 0 34px 52px -8px rgb(0 0 0 / .26), 0 72px 110px -20px rgb(0 0 0 / .30); --ik-sage: #6E8F62; --ik-sage-ink: #3F5F35; --ik-sage-tint: #E3EADB; --ik-ochre: #E0A22A; --ik-ochre-ink: #8A5E0A; --ik-ochre-tint: #F6E8C6; --ik-slate: #5C7C99; --ik-slate-ink: #33546F; --ik-slate-tint: #DFE7EE; --ik-circle-pkm: var(--ik-slate); --ik-circle-bkm: var(--ik-sage); --ik-circle-ppm: var(--ik-ochre); --ik-circle-bpm: #C0583B; --ik-glass: color-mix(in srgb, var(--ik-paper) 62%, transparent); --ik-glass-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); --ik-glass-pill: color-mix(in srgb, var(--ik-ink) 8%, transparent); --ik-glass-pill-edge: color-mix(in srgb, var(--ik-ink) 12%, transparent); color-scheme: light; } /* ═══ theme.css ═══ */ /* ───────────────────────── INKLINE Synth · THEME BUILDER ───────────────────────── Three independent, optional switches on . The DEFAULT (flat · sharp · inkline) is pure INKLINE and breaks none of its rules; the other settings are opt-in "synth" looks that Tom asked for on 2026-10-05, so every effect lives behind an attribute selector: data-palette = inkline | ember | amber | aqua | phosphor | lavender | ice | custom (colours) data-depth = flat | raised (3D: bevels, gradients, drop shadows) data-light = sharp | bloom (glow on everything that is lit) plus two strengths, --sx-relief and --sx-bloom (0 … 1.5, default 1), and data-theme = ink | paper as before. SCOPED LOOKS: put the same attributes plus data-look on ANY element and the look applies to that element's area only — the rest of the page keeps its own. (every `:root` rule below reads `:is(:root, [data-look])`; build-library.js adds a scoped copy of tokens.css for [data-look] — the raw colours too, so a look never inherits a page palette's --ik-paper / --ik-ink — and guards every *-theme.css selector so a flat / sharp look inside a raised / bloom page stays flat.) LIGHT MODE: the depth vocabulary below is drawn for the ground it sits on (ink · paper); screens keep the ink one (see "SCREENS"). This file only DEFINES the vocabulary (colours, gradients, shadows, glows) as custom properties. Elements USE it from their own `lib/css/-theme.css`, always inside a `[data-depth="raised"]` or `[data-light="bloom"]` selector — never in the base rules. Raw colours are allowed in THIS file only, in the palette block (that is what a palette is). */ /* ── strengths ─────────────────────────────────────────────────────────────────────────────────────────────── */ :is(:root, [data-look]) { --sx-relief: 1; --sx-bloom: 1; } /* a scoped look is self-contained: the optional accent input of the page's palette (ember sets one) must not leak into a look that has none */ [data-look] { --sx-in-accent: initial; } /* ── palettes: five inputs each. Everything else is derived below, so a custom palette is just five colours ─── */ :is(:root, [data-look])[data-palette="ember"] { --sx-in-ground: #0B0705; --sx-in-plate: #1B1512; --sx-in-text: #EEE5DC; --sx-in-lit: #FF7A45; --sx-in-hot: #FFD9BF; --sx-in-accent: #FF7A45; } :is(:root, [data-look])[data-palette="amber"] { --sx-in-ground: #0A0804; --sx-in-plate: #1A1610; --sx-in-text: #F1E8D4; --sx-in-lit: #FFB02E; --sx-in-hot: #FFE9B0; } :is(:root, [data-look])[data-palette="aqua"] { --sx-in-ground: #050A0A; --sx-in-plate: #111B1B; --sx-in-text: #DCEDEA; --sx-in-lit: #5FD3C6; --sx-in-hot: #FF7A45; } :is(:root, [data-look])[data-palette="phosphor"] { --sx-in-ground: #050A06; --sx-in-plate: #111A12; --sx-in-text: #DDEBD8; --sx-in-lit: #7BD88F; --sx-in-hot: #F2FFD0; } :is(:root, [data-look])[data-palette="lavender"] { --sx-in-ground: #07070C; --sx-in-plate: #15151F; --sx-in-text: #E4E4F2; --sx-in-lit: #8B9CFF; --sx-in-hot: #FFD9BF; } :is(:root, [data-look])[data-palette="ice"] { --sx-in-ground: #06080B; --sx-in-plate: #131921; --sx-in-text: #E6EEF7; --sx-in-lit: #D7E6F5; --sx-in-hot: #5FD3C6; } /* --sx-in-accent (optional, default = hot) is the colour of the marker KEYS and rules (buttons, selected rows); --sx-in-hot is the one hot PIXEL (a peak, a playhead). In ember the original had orange keys and a cream peak, so ember sets both. data-palette="custom": the Theme panel writes the five --sx-in-* itself (style on ) */ /* a palette (any but inkline) maps its five inputs onto the INKLINE tokens every element already reads. lit → --ik-solid / --sx-lit · hot → --ik-marker · text → --ik-paper · ground/plate → the ink surfaces. */ :is(:root, [data-look])[data-palette]:not([data-palette="inkline"]) { --ik-marker: var(--sx-in-accent, var(--sx-in-hot)); --ik-marker-deep: color-mix(in srgb, var(--sx-in-accent, var(--sx-in-hot)) 62%, var(--sx-in-ground)); --ik-marker-text: var(--sx-in-accent, var(--sx-in-hot)); --ik-accent: var(--sx-in-accent, var(--sx-in-hot)); --ik-on-accent: var(--sx-in-ground); --ik-solid: var(--sx-in-lit); --ik-on-solid: var(--sx-in-ground); --sx-lit: var(--sx-in-lit); --sx-lit-2: color-mix(in srgb, var(--sx-in-lit) 72%, var(--sx-in-ground)); --sx-lit-3: color-mix(in srgb, var(--sx-in-lit) 42%, var(--sx-in-ground)); --sx-hot: var(--sx-in-hot); --sx-screen: var(--sx-in-ground); --sx-screen-2: color-mix(in srgb, var(--sx-in-ground) 88%, var(--sx-in-text)); --sx-screen-rule: color-mix(in srgb, var(--sx-in-ground) 84%, var(--sx-in-text)); --sx-unlit: color-mix(in srgb, var(--sx-in-lit) 10%, transparent); } :is(:root, [data-look])[data-theme="ink"][data-palette]:not([data-palette="inkline"]), :is(:root, [data-look]):not([data-theme])[data-palette]:not([data-palette="inkline"]) { --ik-ink: var(--sx-in-ground); --ik-ink-1: var(--sx-in-plate); --ik-ink-2: color-mix(in srgb, var(--sx-in-plate) 90%, var(--sx-in-text)); --ik-ink-rule: color-mix(in srgb, var(--sx-in-plate) 84%, var(--sx-in-text)); --ik-paper: var(--sx-in-text); --ik-dim: color-mix(in srgb, var(--sx-in-text) 76%, var(--sx-in-ground)); --ik-faint: color-mix(in srgb, var(--sx-in-text) 46%, var(--sx-in-ground)); --ik-text-2-ink: color-mix(in srgb, var(--sx-in-text) 66%, var(--sx-in-ground)); --ik-text-3-ink: color-mix(in srgb, var(--sx-in-text) 40%, var(--sx-in-ground)); --ik-bg: var(--sx-in-ground); --ik-surface: var(--sx-in-plate); --ik-surface-2: color-mix(in srgb, var(--sx-in-plate) 90%, var(--sx-in-text)); --ik-text: var(--sx-in-text); --ik-text-2: color-mix(in srgb, var(--sx-in-text) 66%, var(--sx-in-ground)); --ik-text-3: color-mix(in srgb, var(--sx-in-text) 40%, var(--sx-in-ground)); --ik-rule: color-mix(in srgb, var(--sx-in-plate) 84%, var(--sx-in-text)); --ik-fill: color-mix(in srgb, var(--sx-in-text) 7%, transparent); --ik-fill-2: color-mix(in srgb, var(--sx-in-text) 15%, transparent); --ik-outline: color-mix(in srgb, var(--sx-in-text) 22%, transparent); --ik-line: color-mix(in srgb, var(--sx-in-text) 46%, var(--sx-in-ground)); } /* ── lit TEXT on a sheet ───────────────────────────────────────────────────────────────────────────────────────── --sx-lit is a light: perfect on an ink ground and on screens, unreadable as text on paper (inkline: it IS paper; a palette: a light tint, ~2.5:1). --sx-lit-text is the lit colour made readable on the ground it sits on: the light itself on ink · ink on paper · on paper with a palette the lit colour mixed into ink (≥ 5.6:1 on paper for every preset, ≥ 4.6:1 in a well; marker text ≥ 4.9:1). On paper with a palette the marker TEXT is darkened the same way (INKLINE's own paper uses a darker marker for small text too); the marker FILL keeps its colour. Screens are always ink: text on a screen keeps --sx-lit. */ :is(:root, [data-look]) { --sx-lit-text: var(--sx-lit); } :is(:root, [data-look])[data-theme="paper"] { --sx-lit-text: var(--ik-text); } :is(:root, [data-look])[data-theme="paper"][data-palette]:not([data-palette="inkline"]) { --sx-lit-text: color-mix(in srgb, var(--sx-in-lit) 40%, var(--ik-ink)); --ik-marker-text: color-mix(in srgb, var(--sx-in-accent, var(--sx-in-hot)) 40%, var(--ik-ink)); --ik-accent-text: var(--ik-marker-text); } /* ── DEPTH · raised (3D) ──────────────────────────────────────────────────────────────────────────────────────── light comes from above: a highlight on the top edge, a shade on the bottom, a soft drop shadow underneath. Use these as ready-made layers: background: var(--sx-cap); box-shadow: var(--sx-rim), var(--sx-bevel), var(--sx-lift-md); The vocabulary is drawn for the GROUND it sits on: the first block is the ink ground, the second rebuilds it for paper (a well is a slightly darker paper, a cap a light sheet with a soft lower edge, shades a light ink, the rim a faint ink line). Family composites (a knob dome, a knurl, svg gradient stops) mix with the two ground inputs, never with raw --ik-ink / --ik-paper: --sx-shine the colour a highlight mixes in (paper on ink · the lightest paper on paper) --sx-shade-k the strength of every ink shade (1 on ink · about a quarter on paper): color-mix(in srgb, var(--ik-ink) calc(24% * var(--sx-relief) * var(--sx-shade-k)), …) */ :is(:root, [data-look])[data-depth="raised"] { --sx-shine: var(--ik-paper); --sx-shade-k: 1; --sx-hi: color-mix(in srgb, var(--ik-paper) calc(15% * var(--sx-relief)), transparent); /* top-edge highlight */ --sx-lo: color-mix(in srgb, var(--ik-ink) calc(72% * var(--sx-relief)), transparent); /* shade + drop shadow */ --sx-lo-2: color-mix(in srgb, var(--ik-ink) calc(40% * var(--sx-relief)), transparent); --sx-plate: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(5% * var(--sx-relief)), var(--ik-surface)) 0%, var(--ik-surface) 100%); /* big sheets: faces, panels */ --sx-cap: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(13% * var(--sx-relief)), var(--ik-surface-2)) 0%, color-mix(in srgb, var(--ik-ink) calc(24% * var(--sx-relief)), var(--ik-surface-2)) 100%); /* things you press or turn */ --sx-cap-down: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(18% * var(--sx-relief)), var(--ik-surface-2)) 0%, color-mix(in srgb, var(--ik-paper) calc(6% * var(--sx-relief)), var(--ik-surface-2)) 100%); /* the same, pressed */ --sx-cap-lit: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(20% * var(--sx-relief)), var(--ik-solid)) 0%, color-mix(in srgb, var(--ik-ink) calc(22% * var(--sx-relief)), var(--ik-solid)) 100%); /* a lit / latched cap */ --sx-cap-hot: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(18% * var(--sx-relief)), var(--ik-marker)) 0%, color-mix(in srgb, var(--ik-ink) calc(24% * var(--sx-relief)), var(--ik-marker)) 100%); /* the marker cap */ --sx-well: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(55% * var(--sx-relief)), var(--ik-bg)) 0%, var(--ik-bg) 100%); /* a recess: slot, trough, bezel */ --sx-glass: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(4% * var(--sx-relief)), var(--sx-screen)) 0%, var(--sx-screen) 60%); /* a screen's glass */ --sx-rim: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-paper) calc(9% * var(--sx-relief)), transparent); /* a hairline of light around an edge */ --sx-bevel: inset 0 1px 0 var(--sx-hi), inset 0 -1px 0 var(--sx-lo-2); /* the lit top edge and the shaded bottom edge */ --sx-bevel-down: inset 0 1px 2px var(--sx-lo), inset 0 -1px 0 var(--sx-hi); /* pressed in */ --sx-recess: inset 0 1px 3px var(--sx-lo), inset 0 0 0 var(--ik-hair) var(--sx-lo-2); /* sunk into the surface */ --sx-lift-sm: 0 1px 2px var(--sx-lo); --sx-lift-md: 0 calc(3px * var(--sx-relief)) calc(8px * var(--sx-relief)) -2px var(--sx-lo), 0 1px 2px var(--sx-lo-2); --sx-lift-lg: 0 calc(18px * var(--sx-relief)) calc(36px * var(--sx-relief)) -10px var(--sx-lo), 0 2px 6px var(--sx-lo-2); } /* the same vocabulary on a PAPER ground (bevel, recess and lifts follow from hi / lo, which are redefined here on the same element) */ :is(:root, [data-look])[data-depth="raised"][data-theme="paper"] { --sx-shine: var(--ik-paper-1); --sx-shade-k: .26; --sx-hi: color-mix(in srgb, var(--ik-paper-1) calc(90% * var(--sx-relief)), transparent); --sx-lo: color-mix(in srgb, var(--ik-ink) calc(20% * var(--sx-relief)), transparent); --sx-lo-2: color-mix(in srgb, var(--ik-ink) calc(11% * var(--sx-relief)), transparent); --sx-plate: linear-gradient(180deg, var(--ik-paper-1) 0%, color-mix(in srgb, var(--ik-ink) calc(2.5% * var(--sx-relief)), var(--ik-surface)) 100%); --sx-cap: linear-gradient(180deg, var(--ik-paper-1) 0%, color-mix(in srgb, var(--ik-ink) calc(6% * var(--sx-relief)), var(--ik-surface-2)) 100%); --sx-cap-down: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(9% * var(--sx-relief)), var(--ik-surface-2)) 0%, var(--ik-surface-2) 100%); --sx-well: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(6% * var(--sx-relief)), var(--ik-bg)) 0%, var(--ik-bg) 100%); --sx-rim: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-ink) calc(10% * var(--sx-relief)), transparent); } /* SCREENS stay ink on paper too, and so must the depth of what sits ON a screen (a terminal's plates, a prompt bar's field and keys, a power key on a splash screen). Each screen that hosts controls gets the ink vocabulary back, drawn from the always-ink tokens; everything inside inherits it, so a .btn on a screen needs no rule of its own. Only on paper (on ink the root vocabulary already is ink). Screen hosts: .term .fd-solo (feedback), .tinput .lcd-ui (buttons, displays), .pwr-screen (structure) — add a new screen host here. Scoped-safe: not inside an ink or flat look. */ [data-depth="raised"][data-theme="paper"] :is(.term, .fd-solo, .tinput, .lcd-ui, .pwr-screen):not([data-look]:not([data-theme="paper"]) *):not([data-look]:not([data-depth="raised"]) *) { --sx-shine: var(--ik-paper); --sx-shade-k: 1; --sx-hi: color-mix(in srgb, var(--ik-paper) calc(15% * var(--sx-relief)), transparent); --sx-lo: color-mix(in srgb, var(--ik-ink) calc(72% * var(--sx-relief)), transparent); --sx-lo-2: color-mix(in srgb, var(--ik-ink) calc(40% * var(--sx-relief)), transparent); --sx-plate: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(5% * var(--sx-relief)), var(--ik-ink-1)) 0%, var(--ik-ink-1) 100%); --sx-cap: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(13% * var(--sx-relief)), var(--ik-ink-2)) 0%, color-mix(in srgb, var(--ik-ink) calc(24% * var(--sx-relief)), var(--ik-ink-2)) 100%); --sx-cap-down: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(18% * var(--sx-relief)), var(--ik-ink-2)) 0%, color-mix(in srgb, var(--ik-paper) calc(6% * var(--sx-relief)), var(--ik-ink-2)) 100%); --sx-cap-lit: linear-gradient(180deg, color-mix(in srgb, var(--ik-paper) calc(20% * var(--sx-relief)), var(--sx-lit)) 0%, color-mix(in srgb, var(--ik-ink) calc(22% * var(--sx-relief)), var(--sx-lit)) 100%); --sx-well: linear-gradient(180deg, color-mix(in srgb, var(--ik-ink) calc(55% * var(--sx-relief)), var(--sx-screen)) 0%, var(--sx-screen) 100%); --sx-rim: inset 0 0 0 var(--ik-hair) color-mix(in srgb, var(--ik-paper) calc(9% * var(--sx-relief)), transparent); --sx-bevel: inset 0 1px 0 var(--sx-hi), inset 0 -1px 0 var(--sx-lo-2); --sx-bevel-down: inset 0 1px 2px var(--sx-lo), inset 0 -1px 0 var(--sx-hi); --sx-recess: inset 0 1px 3px var(--sx-lo), inset 0 0 0 var(--ik-hair) var(--sx-lo-2); --sx-lift-sm: 0 1px 2px var(--sx-lo); --sx-lift-md: 0 calc(3px * var(--sx-relief)) calc(8px * var(--sx-relief)) -2px var(--sx-lo), 0 1px 2px var(--sx-lo-2); --sx-lift-lg: 0 calc(18px * var(--sx-relief)) calc(36px * var(--sx-relief)) -10px var(--sx-lo), 0 2px 6px var(--sx-lo-2); } /* ── LIGHT · bloom (glow) ─────────────────────────────────────────────────────────────────────────────────────── anything that is LIT blooms in its own colour; the HOT one blooms in the hot colour. Strength = --sx-bloom. box-shadow layers: box-shadow: var(--sx-bloom-sm); text: text-shadow: var(--sx-tbloom); svg/img: filter: var(--sx-fbloom); */ :is(:root, [data-look])[data-light="bloom"] { --sx-bloom-sm: 0 0 calc(5px * var(--sx-bloom)) color-mix(in srgb, var(--sx-lit) calc(55% * var(--sx-bloom)), transparent); --sx-bloom-md: 0 0 calc(10px * var(--sx-bloom)) color-mix(in srgb, var(--sx-lit) calc(60% * var(--sx-bloom)), transparent); --sx-bloom-lg: 0 0 calc(22px * var(--sx-bloom)) color-mix(in srgb, var(--sx-lit) calc(48% * var(--sx-bloom)), transparent); --sx-bloom-hot-sm: 0 0 calc(6px * var(--sx-bloom)) color-mix(in srgb, var(--ik-marker) calc(70% * var(--sx-bloom)), transparent); --sx-bloom-hot-md: 0 0 calc(14px * var(--sx-bloom)) color-mix(in srgb, var(--ik-marker) calc(62% * var(--sx-bloom)), transparent); --sx-tbloom: 0 0 calc(8px * var(--sx-bloom)) color-mix(in srgb, var(--sx-lit) calc(60% * var(--sx-bloom)), transparent); --sx-tbloom-hot: 0 0 calc(10px * var(--sx-bloom)) color-mix(in srgb, var(--ik-marker) calc(70% * var(--sx-bloom)), transparent); --sx-fbloom: drop-shadow(0 0 calc(4px * var(--sx-bloom)) color-mix(in srgb, var(--sx-lit) calc(65% * var(--sx-bloom)), transparent)); --sx-fbloom-hot: drop-shadow(0 0 calc(5px * var(--sx-bloom)) color-mix(in srgb, var(--ik-marker) calc(75% * var(--sx-bloom)), transparent)); }