/* Every token havelcss reads, with the value it defaults to. This file is a reference to copy from, not a stylesheet to ship: all of it is commented out, so importing it as is changes nothing. Take the lines you want to change into your own theme file and load that after havelcss. Nothing here needs a layer. Unlayered declarations beat every havelcss layer, so a plain `:root` block always wins. All colors are plain grey by default, apart from --*-color-brand and the four status colors. Havelcss picks no palette for you. */ :root { /* --------------------------------------------------------------------- Color, per scheme These feed the light-dark() pairs below. Set them, never read them: inside your own rules always use the effective --color-* tokens, so the value follows the active color scheme. Overriding just one side is fine, the other keeps its default. --------------------------------------------------------------------- */ /* --lightmode-color-bg: oklch(0.9 0 0); */ /* --lightmode-color-text: oklch(0.15 0 0); */ /* --lightmode-color-text-strong: oklch(0.05 0 0); */ /* --lightmode-color-text-muted: oklch(0.4 0 0); */ /* --lightmode-color-border: oklch(0.7 0 0); */ /* --lightmode-color-input: oklch(0.7 0 0); */ /* --lightmode-color-button: oklch(0.7 0 0); */ /* --lightmode-color-brand: #f2d; */ /* --darkmode-color-bg: oklch(0 0 0); */ /* --darkmode-color-text: oklch(0.9 0 0); */ /* --darkmode-color-text-strong: oklch(0.98 0 0); */ /* --darkmode-color-text-muted: oklch(0.7 0 0); */ /* --darkmode-color-border: oklch(0.4 0 0); */ /* --darkmode-color-input: oklch(0.4 0 0); */ /* --darkmode-color-button: oklch(0.4 0 0); */ /* --darkmode-color-brand: #f2d; */ /* Derived from --*-color-bg, only worth setting when the two steps do not suit your background. Light goes up in small steps, dark needs a big first one to lift off pure black. */ /* --lightmode-color-bg-surface: oklch(from var(--lightmode-color-bg) calc(l + 0.05) c h); */ /* --lightmode-color-bg-elevated: oklch(from var(--lightmode-color-bg-surface) calc(l + 0.05) c h); */ /* --darkmode-color-bg-surface: oklch(from var(--darkmode-color-bg) calc(l + 0.25) c h); */ /* --darkmode-color-bg-elevated: oklch(from var(--darkmode-color-bg-surface) calc(l + 0.05) c h); */ /* The chevron of select and input[list]. A , so light-dark() cannot switch it, the scheme picks one by media query instead. */ /* --lightmode-icon-chevron-down: url('data:image/svg+xml,'); */ /* --darkmode-icon-chevron-down: url('data:image/svg+xml,'); */ /* --------------------------------------------------------------------- Color, effective What every rule actually reads, and what your own rules should read. Each one resolves to the scheme pair above. Setting one of these directly pins it to a single value for both schemes, which is what you want for the few tokens that are roles rather than colors, and what you do not want for the rest. --------------------------------------------------------------------- */ /* --color-bg: light-dark(var(--lightmode-color-bg), var(--darkmode-color-bg)); */ /* --color-bg-surface: …; one step off the page: code blocks, progress and meter tracks, readonly fields */ /* --color-bg-elevated: …; details, popover, tooltip, cards */ /* --color-text: …; */ /* --color-text-strong: …; headings-weight emphasis, hover and focus states */ /* --color-text-muted: …; captions, placeholders, scrollbars */ /* --color-border: …; */ /* --color-input: …; the surface of input, select and textarea */ /* --color-button: …; the surface of button */ /* --color-brand: …; accent-color, link underline, .primary button, ::target-text */ /* Roles, derived from the above. */ /* --color-link: var(--color-text); */ /* --color-link-decoration: var(--color-brand); */ /* --color-outline: var(--color-text-strong); */ /* --color-selected: color-mix(in oklab, var(--color-input), var(--color-text) 35%); */ /* --color-range-fill: var(--color-input); */ /* --color-range-tick: var(--color-input); */ /* Set this one directly to use the same chevron in both schemes, rather than the pair above. */ /* --icon-chevron-down: var(--darkmode-icon-chevron-down); */ /* Status. The same in both schemes, so there is no pair for them. */ /* --color-success: oklch(0.7 0.14 145); */ /* --color-warning: oklch(0.78 0.228 82); */ /* --color-danger: oklch(0.72 0.2 30); */ /* --color-info: oklch(0.66 0.224 210); */ /* How far hover and focus move a surface towards the text color. */ /* --hover-mix: 10%; */ /* --------------------------------------------------------------------- Typography Havelcss ships no font. --font-family is what the system offers until you load one. --------------------------------------------------------------------- */ /* --font-family: system-ui, sans-serif; */ /* --font-family-mono: ui-monospace, sfmono-regular, menlo, consolas, monospace; */ /* --line-height: 1.5; */ /* --font-size-h1: 1.75rem; */ /* --font-size-h2: 1.5rem; */ /* --font-size-h3: 1.25rem; */ /* --font-size-h4: 1.125rem; */ /* --font-size-h5: 1rem; */ /* --font-size-h6: .875rem; */ /* --font-size-small: .8125rem; */ /* --------------------------------------------------------------------- Space One base, each step twice the one before. Set --space-xs to move the whole scale, or any single step to break out of the doubling. rem works as well as px if you want the scale to follow the root font size. --------------------------------------------------------------------- */ /* --space-xs: 2px; */ /* --space-s: calc(var(--space-xs) * 2); */ /* --space-m: calc(var(--space-s) * 2); */ /* --space-l: calc(var(--space-m) * 2); */ /* --space-xl: calc(var(--space-l) * 2); */ /* --space-xxl: calc(var(--space-xl) * 2); */ /* --------------------------------------------------------------------- Shape --------------------------------------------------------------------- */ /* --border-radius: 3px; */ /* --border-width: 1px; */ /* --outline-width: 2px; */ /* --outline-offset: 2px; */ /* --shadow: 0 2px 5px -1px oklch(0 0 0 / .15); */ /* --shadow-strong: 0 2px 10px -1px oklch(0 0 0 / .25); */ /* --------------------------------------------------------------------- Motion All three drop to 0s under prefers-reduced-motion, so a transition that uses them needs no media query of its own. --------------------------------------------------------------------- */ /* --duration-fast: 80ms; */ /* --duration-medium: .25s; */ /* --duration-slow: .35s; */ /* --------------------------------------------------------------------- Components --------------------------------------------------------------------- */ /* The page's reading width, layout bundle only. */ /* --content-width: 68rem; */ /* Form controls. --input-height is the height a single-line control ends up with, which is what a textarea starts at and what keeps input[type='color'] square. */ /* --input-height: calc(var(--space-m) * 2 + var(--line-height) * 1em); */ /* --field-inline-size: 22ch; the width of a text field without a size or cols attribute */ /* --field-max-block-size: min(25lh, 70svh); how far a textarea grows with its content */ /* input[type='range'], sizes in em so the track follows the font size. */ /* --range-track-size: .5em; */ /* --range-thumb-size: 1.125em; */ /* --range-tick-size: .3em; */ /* --range-tick-gap: .15em; */ /* --range-tick-width: 2px; */ }