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  --show-dark: none;15  --show-light: block;16}1718/* SURFACE */1920:root {21  --art: var(--ground);22  --scrim: color-mix(in srgb, var(--black) 40%, transparent);23  --mix: 45%;24}2526/* TYPE */2728:root {29  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Noto Sans Symbols 2", "Noto Color Emoji";30  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif, "Noto Sans Symbols 2", "Noto Color Emoji";31  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, "Noto Sans Symbols 2", "Noto Color Emoji";32  --text: 15px;33  --read-text: 17px;34}3536/* SPACE */3738:root {39  --s1: 0.25rem;40  --s2: 0.5rem;41  --s3: 0.75rem;42  --s4: 1rem;43  --s5: 1.5rem;44  --s6: 2rem;45  --s7: 3rem;46  --s8: 4rem;47}4849/* SHAPE */5051:root {52  --r1: 4px;53  --r2: 8px;54  --r3: 12px;55  --round: 999px;56  --hair: 1px solid var(--line);57  --ring: 2px solid var(--accent);58}5960/* FRAME */6162:root {63  --head: 3rem;64  --pane: clamp(13rem, 18vw, 17.5rem);65  --read: 72ch;66  --page: 72rem;67  --frame: calc(var(--page) + 2 * var(--pane));68  --touch: 44px;69}7071/* MOTION */7273:root {74  --pace: 150ms;75  --ease: cubic-bezier(0.4, 0, 0.2, 1);76}7778/* FACE */7980:root[data-font="sans"] { --face: "Noto Sans", var(--sans); }81:root[data-font="serif"] { --face: "Noto Serif", var(--serif); }82:root[data-font="mono"] { --face: "Noto Sans Mono", var(--mono); }83:root[data-font="mrly"] { --face: "MrlyFont", var(--mono); }8485/* DARK */8687@media (prefers-color-scheme: dark) {88  :root:not([data-theme="light"]) {89    color-scheme: dark;90    --ground: var(--black);91    --bg: #070707;92    --panel: #111112;93    --deep: var(--black);94    --line: #1f1f20;95    --fg: var(--white);96    --dim: var(--gray);97    --show-dark: block;98    --show-light: none;99    --scrim: color-mix(in srgb, var(--black) 55%, transparent);100    --mix: 100%;101  }102}103104:root[data-theme="dark"] {105  color-scheme: dark;106  --ground: var(--black);107  --bg: #070707;108  --panel: #111112;109  --deep: var(--black);110  --line: #1f1f20;111  --fg: var(--white);112  --dim: var(--gray);113  --show-dark: block;114  --show-light: none;115  --scrim: color-mix(in srgb, var(--black) 55%, transparent);116  --mix: 100%;117}