/* --------------------------------------------------------------------------- Design tokens. The only file that names a raw color. Every other stylesheet reads through these custom properties, which is what makes the two themes a data change rather than a code change. Four layers, in order: 1. the palette — ink, lines, accent, status 2. project colors — the set a project can be assigned 3. the glass layer — what a floating panel is made of 4. the ambient ground — what the glass has to blur --------------------------------------------------------------------------- */ :root { --ground:#eaeef3; --surface:#ffffff; --surface-2:#f5f8fc; --ink:#161d29; --ink-2:#3a4658; --muted:#6c7889; --faint:#98a3b3; --line:#d7dee8; --line-2:#e6ebf2; --accent:#a1571f; --accent-ink:#8a4a19; --accent-bg:#f6e8d9; --read:#6c7889; --read-bg:#e7ebf1; --spine:#cfd7e2; --shadow:0 1px 2px rgba(20,30,45,.05),0 6px 20px rgba(20,30,45,.06); /* Status is not the accent: ochre already means "you are here", so it cannot also mean "this is late". */ --danger:#a8321f; --danger-bg:#f8e4e0; --ok:#2f7a4d; --ok-bg:#e2f0e8; /* --- project colors --- One register: mid-dark inks against very light tints of the same hue. Pick any of them for a project; nothing here carries a fixed meaning. Adding an eighth is two lines here and one line in COLORS (data.js). */ --c-blue:#2b62d6; --c-blue-bg:#e3ebfb; --c-teal:#0d7a86; --c-teal-bg:#dcf0f1; --c-violet:#7a4fd0; --c-violet-bg:#ece3fb; --c-ochre:#a1571f; --c-ochre-bg:#f6e8d9; --c-rose:#b0356b; --c-rose-bg:#fae1ed; --c-moss:#5f7a1f; --c-moss-bg:#f0f4e0; --c-slate:#4a5a70; --c-slate-bg:#e6ebf2; /* --- glass --- A panel is a translucent slab, a hairline of refracted light along its top edge, and a shadow deep enough to lift it off the ground. --fill and --hover are what sits *on* glass: tinted, never opaque, or the blur underneath stops reading. */ --glass:rgba(255,255,255,.60); --glass-2:rgba(255,255,255,.38); --glass-hi:rgba(255,255,255,.90); --glass-edge:rgba(20,30,45,.10); --glass-shadow: 0 1px 1px rgba(20,30,45,.04), 0 8px 22px -8px rgba(20,30,45,.16), 0 26px 60px -24px rgba(20,30,45,.22); --blur:saturate(170%) blur(24px); /* Opaque on purpose: this is a frozen pane, and its job is to hide what scrolls under it. See the note in components/calendar.css. */ --sticky:rgb(247,249,252); --on-accent:#ffffff; --fill:rgba(255,255,255,.62); --fill-2:rgba(20,30,45,.045); --hover:rgba(20,30,45,.05); --sel:rgba(20,30,45,.085); --hair:rgba(20,30,45,.08); /* --- ambient ground --- Four of the project colors, far out of focus. The wallpaper is the palette rather than an unrelated gradient. */ --mesh-a:rgba(43,98,214,.17); --mesh-b:rgba(122,79,208,.15); --mesh-c:rgba(161,87,31,.14); --mesh-d:rgba(13,122,134,.13); color-scheme: light; } /* Tokens that do not change between themes. */ :root { --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace; --r:8px; /* controls */ --r-md:12px; /* inner blocks */ --r-lg:18px; /* floating cards */ /* Space around and between cards. Tied to the card radius rather than set independently: two 18px corners facing across a 14px gap open it into a 50px funnel at the ends, and against the page edge the corner scoops out more than the margin around it. Either way the leftover background reads as a wedge someone forgot rather than as spacing. Never let the gap be narrower than the corners that carve into it. */ --shell:18px; --r-pill:999px; /* How wide the board is allowed to get before it stops and centres. Without this every card grows with the display and the whole thing sprawls; the ambient ground is fixed to the viewport, so what fills the space either side is the background rather than more nothing. The number is set by the calendar, which is the one thing here with a natural width. A week column is a seventh of the calendar card, so: card = board - 36 (page padding) - 228 (rail) - 18 - 330 (task list) - 18 per day = (card - 54 gutter) / 7 At 1440 that is 108px a day and a full week is visible with the rail open, which is what this is set to. It scrolls rather than breaking if you go narrower — the columns have a 96px floor — so the real lower bound is about 1300, and past that a week no longer fits. */ --board:1440px; --ease:cubic-bezier(.32,.72,0,1); } /* Dark is not an inversion — the accent is lifted so it still reads on a dark ground, and the project colors are re-picked rather than lightened. */ @media (prefers-color-scheme: dark) { :root { --ground:#0f1319; --surface:#161b22; --surface-2:#1b212a; --ink:#e8edf4; --ink-2:#bcc7d5; --muted:#8996a7; --faint:#67727f; --line:#2a323c; --line-2:#212832; --accent:#d8863f; --accent-ink:#e59a56; --accent-bg:#332110; --read:#8996a7; --read-bg:#232a34; --spine:#2f3844; --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.32); --danger:#f0836b; --danger-bg:#3a1c16; --ok:#5cc184; --ok-bg:#16301f; --c-blue:#7ea6f5; --c-blue-bg:#182740; --c-teal:#49c3cf; --c-teal-bg:#0d2c30; --c-violet:#b295ee; --c-violet-bg:#251c3d; --c-ochre:#d8863f; --c-ochre-bg:#332110; --c-rose:#e88ab4; --c-rose-bg:#3a1b2a; --c-moss:#a8c46a; --c-moss-bg:#232c14; --c-slate:#9aabc2; --c-slate-bg:#222a35; --glass:rgba(28,34,44,.62); --glass-2:rgba(38,45,57,.44); --glass-hi:rgba(255,255,255,.13); --glass-edge:rgba(255,255,255,.09); --glass-shadow: 0 1px 1px rgba(0,0,0,.4), 0 8px 22px -8px rgba(0,0,0,.55), 0 26px 60px -24px rgba(0,0,0,.75); --sticky:rgb(21,26,34); --on-accent:#1b1206; --fill:rgba(255,255,255,.075); --fill-2:rgba(255,255,255,.045); --hover:rgba(255,255,255,.06); --sel:rgba(255,255,255,.11); --hair:rgba(255,255,255,.07); --mesh-a:rgba(43,98,214,.26); --mesh-b:rgba(122,79,208,.22); --mesh-c:rgba(161,87,31,.18); --mesh-d:rgba(13,122,134,.20); color-scheme: dark; } } /* An explicit choice always beats the OS preference — in both directions, which is why light is restated here and not left to the cascade. */ :root[data-theme="light"] { --ground:#eaeef3; --surface:#ffffff; --surface-2:#f5f8fc; --ink:#161d29; --ink-2:#3a4658; --muted:#6c7889; --faint:#98a3b3; --line:#d7dee8; --line-2:#e6ebf2; --accent:#a1571f; --accent-ink:#8a4a19; --accent-bg:#f6e8d9; --read:#6c7889; --read-bg:#e7ebf1; --spine:#cfd7e2; --shadow:0 1px 2px rgba(20,30,45,.05),0 6px 20px rgba(20,30,45,.06); --danger:#a8321f; --danger-bg:#f8e4e0; --ok:#2f7a4d; --ok-bg:#e2f0e8; --c-blue:#2b62d6; --c-blue-bg:#e3ebfb; --c-teal:#0d7a86; --c-teal-bg:#dcf0f1; --c-violet:#7a4fd0; --c-violet-bg:#ece3fb; --c-ochre:#a1571f; --c-ochre-bg:#f6e8d9; --c-rose:#b0356b; --c-rose-bg:#fae1ed; --c-moss:#5f7a1f; --c-moss-bg:#f0f4e0; --c-slate:#4a5a70; --c-slate-bg:#e6ebf2; --glass:rgba(255,255,255,.60); --glass-2:rgba(255,255,255,.38); --glass-hi:rgba(255,255,255,.90); --glass-edge:rgba(20,30,45,.10); --glass-shadow: 0 1px 1px rgba(20,30,45,.04), 0 8px 22px -8px rgba(20,30,45,.16), 0 26px 60px -24px rgba(20,30,45,.22); /* Opaque on purpose: this is a frozen pane, and its job is to hide what scrolls under it. See the note in components/calendar.css. */ --sticky:rgb(247,249,252); --on-accent:#ffffff; --fill:rgba(255,255,255,.62); --fill-2:rgba(20,30,45,.045); --hover:rgba(20,30,45,.05); --sel:rgba(20,30,45,.085); --hair:rgba(20,30,45,.08); --mesh-a:rgba(43,98,214,.17); --mesh-b:rgba(122,79,208,.15); --mesh-c:rgba(161,87,31,.14); --mesh-d:rgba(13,122,134,.13); color-scheme: light; } :root[data-theme="dark"] { --ground:#0f1319; --surface:#161b22; --surface-2:#1b212a; --ink:#e8edf4; --ink-2:#bcc7d5; --muted:#8996a7; --faint:#67727f; --line:#2a323c; --line-2:#212832; --accent:#d8863f; --accent-ink:#e59a56; --accent-bg:#332110; --read:#8996a7; --read-bg:#232a34; --spine:#2f3844; --shadow:0 1px 2px rgba(0,0,0,.45),0 6px 20px rgba(0,0,0,.32); --danger:#f0836b; --danger-bg:#3a1c16; --ok:#5cc184; --ok-bg:#16301f; --c-blue:#7ea6f5; --c-blue-bg:#182740; --c-teal:#49c3cf; --c-teal-bg:#0d2c30; --c-violet:#b295ee; --c-violet-bg:#251c3d; --c-ochre:#d8863f; --c-ochre-bg:#332110; --c-rose:#e88ab4; --c-rose-bg:#3a1b2a; --c-moss:#a8c46a; --c-moss-bg:#232c14; --c-slate:#9aabc2; --c-slate-bg:#222a35; --glass:rgba(28,34,44,.62); --glass-2:rgba(38,45,57,.44); --glass-hi:rgba(255,255,255,.13); --glass-edge:rgba(255,255,255,.09); --glass-shadow: 0 1px 1px rgba(0,0,0,.4), 0 8px 22px -8px rgba(0,0,0,.55), 0 26px 60px -24px rgba(0,0,0,.75); --sticky:rgb(21,26,34); --on-accent:#1b1206; --fill:rgba(255,255,255,.075); --fill-2:rgba(255,255,255,.045); --hover:rgba(255,255,255,.06); --sel:rgba(255,255,255,.11); --hair:rgba(255,255,255,.07); --mesh-a:rgba(43,98,214,.26); --mesh-b:rgba(122,79,208,.22); --mesh-c:rgba(161,87,31,.18); --mesh-d:rgba(13,122,134,.20); color-scheme: dark; } /* Color → tint mapping. Anything carrying data-color picks up --tint/--tint-bg, so no component ever names a color. "none" is the unassigned case: legible, and visibly not a choice anyone made. */ [data-color="blue"] { --tint: var(--c-blue); --tint-bg: var(--c-blue-bg); } [data-color="teal"] { --tint: var(--c-teal); --tint-bg: var(--c-teal-bg); } [data-color="violet"] { --tint: var(--c-violet); --tint-bg: var(--c-violet-bg); } [data-color="ochre"] { --tint: var(--c-ochre); --tint-bg: var(--c-ochre-bg); } [data-color="rose"] { --tint: var(--c-rose); --tint-bg: var(--c-rose-bg); } [data-color="moss"] { --tint: var(--c-moss); --tint-bg: var(--c-moss-bg); } [data-color="slate"] { --tint: var(--c-slate); --tint-bg: var(--c-slate-bg); } [data-color="none"] { --tint: var(--faint); --tint-bg: var(--read-bg); } /* A color chosen rather than picked. --tint arrives on the element's own style — paint() in lib/dom.js puts it there, because a hex cannot have a rule here — and the wash under it is derived rather than named, so a custom project cannot end up with a background that fights its own ink. Mixed with `transparent` rather than with a page color: these tints sit on glass, and an opaque wash would put a flat patch on top of the blur. */ [data-color="custom"] { --tint-bg: color-mix(in srgb, var(--tint) 14%, transparent); }