Code, drawn on the same sheet.
Boluo Light is a syntax theme for HTML, CSS, JavaScript, TypeScript and JSX. Two inks and one literal colour, told apart by weight as much as by colour, every pair measured on every ground it sits on.
Roles, and the colours they use7
Every token a highlighter emits maps to one of these roles, drawn from 4 colour tokens; only rind has a hue. Ratios are WCAG 2, computed from the token values when the site is built, on the code ground and on the ground of a marked line.
| Role | Covers | Token | Weight | On code-ground | On code-mark | Looks like |
|---|---|---|---|---|---|---|
| Text | Identifiers, props, attribute and property names | --code-text | 400 | 10.44 PASS | 8.94 PASS | label |
| Keyword | import, const, return, @media, :hover, !important | --code-strong | 500 | 19.90 PASS | 17.03 PASS | return |
| Definition | The name being declared: a function, const, type or CSS selector | --code-strong | 600 | 19.90 PASS | 17.03 PASS | CopyButton |
| Name | Tags, components, types, calls | --code-name | 400 | 19.90 PASS | 17.03 PASS | useState |
| Literal | Strings, numbers, units, booleans, colours, regex | --code-literal | 400 | 6.33 PASS | 5.42 PASS | "b-btn" |
| Comment | // … · /* … */ · <!-- … --> | --code-quiet | 400 | 5.28 PASS | 4.52 PASS | // why |
| Punctuation | Brackets, operators, separators, line numbers | --code-quiet | 400 | 5.28 PASS | 4.52 PASS | { } => |
Four languages
<!-- One primary action per row --><nav class="b-nav" aria-label="Sheets"> <a href="/principles" aria-current="page">Principles</a> <a href="/components">Components</a></nav><button class="b-btn" type="button" disabled> Copy tokens</button>/* One focus ring for every control */:where(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px;}.b-caption { font-size: 12px; letter-spacing: 0.04em;}@media (prefers-reduced-motion: reduce) { .b-rise { animation: none !important; }}import { readFileSync } from "node:fs"; export type Token = { name: string; value: string }; // Every value is on the scale: read it from tokens.css.export function getTokens(file = "public/tokens.css"): Token[] { const css = readFileSync(file, "utf8"); const found = css.matchAll(/--([\w-]+):\s*([^;]+);/g); return [...found].map(([, name, value]) => ({ name, value }));} export const MIN_RATIO = 4.5;"use client";import { useState } from "react"; type CopyButtonProps = { text: string; label?: string }; export function CopyButton({ text, label = "Copy" }: CopyButtonProps) {Highlighted line: const [copied, setCopied] = useState(false); async function copy() { await navigator.clipboard.writeText(text); setCopied(true); } return ( <button className="b-btn" type="button" onClick={copy}> {copied ? "Copied" : label} </button> );}Marks, not tints
A highlighted line carries ▸, an added line +, a removed line − and a strike. The code-mark ground only backs the sign up.
.b-code { background: var(--surface);Removed line: color: #555;Added line: color: var(--code-text); border-radius: var(--radius-md);}Selection inverts, like hover: ink ground, paper text. Inline code keeps the Prose style, mono in ink on heat-0, as in var(--code-text).
- Pineapple is a fill, and the page’s one spot is the mark. A pineapple-pale line would drop comments to 4.30:1.
- Geist Mono has none, and slanted mono is harder to scan. A comment is told apart by its delimiter and its grey.
- Geist Mono 13/22. Line numbers and signs can’t be selected, so copied code stays clean.
Three files
A VS Code colour theme with TextMate scopes, for Shiki, VS Code and any TextMate highlighter. Editors only know bold, so definitions are bold and keywords stay regular.
The .b-code block plus Prism and highlight.js token classes, each mapped to a role. Standalone: it carries the tokens it needs.
Seven code tokens, each an alias of an existing colour. Change a base token and the theme follows.
import { codeToHtml } from "shiki"; const theme = await fetch("https://boluo.design/themes/boluo-light.json").then((r) => r.json());const html = await codeToHtml(source, { lang: "tsx", theme });<link rel="stylesheet" href="https://boluo.design/themes/code.css"> <div class="b-code"> <pre><code class="language-css">…</code></pre></div>