tokens.css

1/* THEME */23:root {4  color-scheme: light;5  --ground: var(--white);6  --bg: #f8f8f9;7  --panel: #f1f1f2;8  --deep: #e8e8e9;9  --line: #dddddf;10  --fg: var(--black);11  --dim: #555558;12  --accent: var(--blue);13  --on-accent: var(--white);14}1516/* SURFACE */1718:root {19  --art: var(--ground);20  --scrim: color-mix(in srgb, var(--black) 40%, transparent);21  --mix: 45%;22}2324/* TYPE */2526:root {27  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans Symbols 2", "Noto Color Emoji";28  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif, "Noto Sans Symbols 2", "Noto Color Emoji";29  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Noto Sans Symbols 2", "Noto Color Emoji";30  --text: 15px;31  --read-text: 17px;32}3334/* SPACE */3536:root {37  --s1: 0.25rem;38  --s2: 0.5rem;39  --s3: 0.75rem;40  --s4: 1rem;41  --s5: 1.5rem;42  --s6: 2rem;43  --s7: 3rem;44  --s8: 4rem;45}4647/* SHAPE */4849:root {50  --r1: 4px;51  --r2: 8px;52  --r3: 12px;53  --round: 999px;54  --hair: 1px solid var(--line);55  --ring: 2px solid var(--accent);56}5758/* FRAME */5960:root {61  --head: 3rem;62  --pane: clamp(13rem, 18vw, 17.5rem);63  --read: 72ch;64  --page: 72rem;65  --frame: calc(var(--page) + 2 * var(--pane));66  --touch: 44px;67}6869/* MOTION */7071:root {72  --pace: 150ms;73  --ease: cubic-bezier(0.4, 0, 0.2, 1);74}7576/* KIT */7778:root {79  --site-line: var(--line);80  --site-hair: var(--hair);81  --site-panel: var(--panel);82  --site-art: var(--art);83  --site-fg: var(--fg);84  --site-dim: var(--dim);85  --site-accent: var(--accent);86  --site-mix: var(--mix);87  --site-mono: var(--mono);88  --site-read: var(--read);89  --site-r2: var(--r2);90  --site-s1: var(--s1);91  --site-s2: var(--s2);92  --site-s3: var(--s3);93  --site-s4: var(--s4);94  --site-s5: var(--s5);95  --site-s6: var(--s6);96}9798/* FACE */99100:root[data-font="sans"] { --face: "Noto Sans", var(--sans); }101:root[data-font="serif"] { --face: "Noto Serif", var(--serif); }102:root[data-font="mono"] { --face: "Noto Sans Mono", var(--mono); }103:root[data-font="mrly"] { --face: "MrlyFont", var(--mono); }104105/* DARK */106107@media (prefers-color-scheme: dark) {108  :root:not([data-theme="light"]) {109    color-scheme: dark;110    --ground: var(--black);111    --bg: #070707;112    --panel: #111112;113    --deep: var(--black);114    --line: #1f1f20;115    --fg: var(--white);116    --dim: var(--gray);117    --scrim: color-mix(in srgb, var(--black) 55%, transparent);118    --mix: 100%;119  }120}121122:root[data-theme="dark"] {123  color-scheme: dark;124  --ground: var(--black);125  --bg: #070707;126  --panel: #111112;127  --deep: var(--black);128  --line: #1f1f20;129  --fg: var(--white);130  --dim: var(--gray);131  --scrim: color-mix(in srgb, var(--black) 55%, transparent);132  --mix: 100%;133}