/* Generated from ui/tokens.css by tools/sync-ui.py — do not edit. Edit the source and re-run the script; validate_ui.py fails on a copy that has drifted from it. */ /* The vocabulary the machine is built from: primitives, the semantic layer the components read, and every amp. This lives in ui/ because more than one thing uses it. The app and the site had drifted into two machines — 60 of the 91 selectors they shared had different rules — and a shared component is worth nothing if the two ends disagree about what --lit means. Edited here and nowhere else. web/tokens.css and site-fresh/assets/tokens.css are generated by tools/sync-ui.py; tools/validate_ui.py fails on a copy that has drifted. See ui/theme-contract.json for what a theme owes, and ui/theme-template.css to write one. */ :root { /* ================= primitives ================= The raw palette, and the only place a colour is written down. Nothing outside this block and a theme's own may read a --p-*: a component that did could not be re-themed without editing the component (DS-INV-1). Named for what they are and never for what they do. The number is the L* of the colour, so --p-warm-15 is lighter than --p-warm-09 whatever hue a theme gives them. Family is by chroma and Lab hue rather than HSL: a near-black with a warm cast is warm and not amber however saturated the arithmetic calls it, and pure red sits near 40 degrees in Lab, so a boundary drawn at 0 files the alarm colour as orange. 30 colours, one per perceptually distinct value. It was 53 until DS-205 collapsed the groups sitting within the just-noticeable difference of one another; five of them span ΔE 1.4, which is drift rather than intent. Collapsing them would change pixels — imperceptibly, but really — so it is DS-205, not this task. */ --p-white-a03: #ffffff08; /* a surface lifting, not a colour */ --p-warm-02: #080605; --p-warm-05: #131010; --p-warm-05b: #141110; --p-warm-06: #17130f; --p-warm-08: #1a1613; --p-cool-09: #16191c; --p-warm-09: #201810; --p-warm-11: #241d18; --p-warm-14: #2a2119; --p-warm-15: #2b251f; --p-warm-20: #363029; --p-warm-29: #4a423a; --p-amber-35: #5c5039; --p-warm-35: #5a5045; --p-warm-36: #5f5340; --p-warm-36b: #5d5545; --p-warm-39: #635b52; --p-warm-41: #6a6053; --p-amber-42: #6f6046; --p-red-46: #cf2f18; --p-red-49: #a8624c; --p-warm-51: #837767; --p-amber-58: #a08a52; --p-red-59: #e8663c; --p-warm-61: #9c9184; --p-warm-69: #b3a695; --p-green-71: #4fc27a; --p-amber-78: #f5b52a; --p-amber-86: #f7d489; --p-warm-93: #f0e9dd; --bg: var(--p-warm-05b); --panel: var(--p-warm-08); --line: var(--p-warm-15); /* A lamp is a lens over a bulb, and it is a lens whether or not the bulb is lit. There are three of these on the machine — the bead on a knob cap, the pip inside a radio key, and the one that stands beside a legend — and they are one object, so it is built once here rather than written out three times in three places. Unlit it still has to be findable: a lamp you cannot see when it is out is a hole in the panel, which is what these were. What makes it findable is not brightness, it is shape — a dark glass body, a hard little catch where the room's light lands on the dome, and the element inside showing through in its own colour, nearly out. */ --lens-face: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 36%, rgba(255, 255, 255, 0) 62%), radial-gradient(circle at 50% 64%, rgba(var(--lamp-rgb, var(--lit-rgb)), .22) 0%, rgba(var(--lamp-rgb, var(--lit-rgb)), .05) 52%, rgba(var(--lamp-rgb, var(--lit-rgb)), 0) 76%), linear-gradient(180deg, var(--p-warm-15) 0%, var(--p-warm-06) 72%, var(--p-warm-05b) 100%); /* The housing: its shadow across the top of the lens, the light that got past the glass coming back up off the lip at the foot, and the panel's own edge where the lens is seated into it. */ --lens-edge: inset 0 1px 1.5px rgba(0, 0, 0, .8), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 1px 0 rgba(255, 255, 255, .05); /* The same catch kept over the lit colour — a lens does not stop being glass when the bulb comes on, and without it a lit lamp flattens to a dot. */ --lens-catch: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 32%, rgba(255, 255, 255, 0) 56%); --ink: var(--p-warm-93); --ink-dim: var(--p-warm-61); --ink-faint: var(--p-warm-39); /* Ink on the glass, which is not the same ink as on the panel. On every machine so far it has been: the fascia is dark and so is the display, so one --ink served both and nothing noticed. It stops being true the moment a machine has a light faceplate — a silverface receiver wants near-black printing on brushed aluminium and pale text inside its window, and no single token can be both. Found by building the third amp, which is what the third amp was for. Themes with a dark fascia bind these to the same values as --ink and --ink-faint and nothing changes. */ --glass-ink: var(--ink); --glass-ink-faint: var(--ink-faint); /* Ink on a key face, which is a third surface again. A key is dark on every machine — that is what a key is — so on a dark fascia its legend and the panel's printing are the same colour and one token served both. On a light faceplate they are opposites: silverface prints near-black on aluminium and had its key legends at 1.57:1 until this existed. Measured, not noticed. */ --key-ink: var(--ink-dim); /* The light this machine runs on. Everything that glows — the lamps, the glass, the readouts, the trace on the roll — is this one colour at various strengths, so a theme is three values rather than a repaint. Kept as a hex AND as a bare triplet because both are needed: the hex for solid fills, the triplet so rgba() can take an alpha the theme does not have to know about. They must agree; there is no way to derive one from the other in CSS that also works inside rgba(). */ --lit: var(--p-amber-78); --lit-rgb: 245, 181, 42; --lit-dim: var(--p-amber-58); /* The old name, kept because it reads better at the call sites that mean "in tune" rather than "the colour of light". */ --tune: var(--lit); /* No --sharp and no --flat. Being off pitch is dimmer, not another colour — see deviationColor in roll.js for why a theme cannot own the light and leave two more hues fixed around it. */ --hot: var(--p-red-46); /* Surface tooth. One fine grain, drawn at 2x and blended in greyscale so it adds texture without shifting the hue. Coarse mottle was tried and looked like a low-resolution bitmap; leather at this scale is grain, not blobs. */ --grain-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20seed%3D%2711%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.38%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.38%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%271.0%27%20intercept%3D%270.38%27%2F%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27300%27%20height%3D%27300%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E"); /* One pixel face, and it is for labels. Six reading faces were tried on the glass and all six cost more legibility than the look was worth: a pixel grid fine enough to set a sentence in stops looking like a pixel grid, and one coarse enough to look like one cannot carry a sentence. So the split is by job after all — the machine stencils its own legends in --stencil, and anything you actually read is in --font, lit the same way. */ /* ---- the three faces ---- A machine's period is mostly its type. Swapping the segment face for the pixel one, or shipping a different pixel face, changes what era the thing is from more cheaply than any amount of recolouring — which is why these are theme axes and not constants. --face-ui the interface: labels, prose, anything not behind glass --face-pixel everything on the glass. It looks like a pixel grid; it is not one. Silkscreen is an outline face with a 0.69792em advance, and rasterising it at 8, 11, 13 and 16px magnified to device pixels shows soft stem edges at every one of them — there is no size at which it lands clean. This mattered: the typescale was planned around "8px and its multiples", and that constraint is not real. --face-seg the transport clock, a real seven-segment face --font and --stencil are the names the components already use and keep using; renaming 17 rules to gain nothing is not an improvement. */ --face-ui: "Work Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --face-pixel: "Silkscreen", ui-monospace, monospace; --face-seg: "DSEG7 Classic", ui-monospace, monospace; --font: var(--face-ui); --stencil: var(--face-pixel); /* ---- the typescale ---- Sixteen sizes, of which four were within half a pixel of another and doing no work: 9.5, 10.5, 11.5 and 12 each existed once. What is left is eight steps, and they are close together at the bottom on purpose — the bottom is where this interface lives. Four of the eight sit inside 8..11px because a fascia is mostly legends, and a legend one step up from its neighbour has to still read as a legend. The steps are named for weight, not for size, so a theme that ships a wider face can move the numbers without renaming anything. Not on the scale, and deliberately: - icon sizes. `sl-icon` takes a font-size, which put 13px and 15px into the type census while sizing no type at all. They are --icon-* now. - the wordmark. 15px with 5.7px of tracking is a logotype drawn once; it is not a step anyone else should reach for. */ --type-2xs: 8px; /* glass fine print: screen tags, the dimmed upload line */ --type-xs: 9px; /* panel micro-caps: icon key faces, mix knob labels */ --type-sm: 10px; /* panel caps: the default control label */ --type-md: 11px; /* glass body: what the display says in a sentence */ --type-lg: 13px; /* glass row: song rows, panel headings, the LED count */ --type-xl: 16px; /* glass headline: verdicts, choices, confirmations */ --type-2xl: 24px; /* the lit line — the lyric being sung */ --type-3xl: 34px; /* the note readout, the biggest thing the machine says */ /* Icons are sized in the same unit as type because Shoelace renders them as a font, but they are not type and do not belong on that scale. */ --icon-sm: 13px; /* in a labelled key, beside its word */ --icon-md: 15px; /* alone in an icon key, carrying the whole meaning */ /* ---- leading ---- Twelve values, eleven of them set once. Six steps, and nothing moves by more than .05 except .curtain p (2 -> 2.1), which is 1.6px on a 16px line. --leading-flush is 1 and means it: a readout is one line of lit glass and any leading at all pushes it off its own centre. .wordmark-mark keeps line-height: 0 literally. That is not leading, it is the trick that stops an inline image adding a descender's worth of box. */ --leading-flush: 1; --leading-snug: 1.2; --leading-tight: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; --leading-loose: 2.1; /* ---- tracking ---- Already in em throughout, which is the part that was right: tracking that does not follow its size has to be re-tuned at every step. Twelve values to six; the widest move is .02em, which is a fifth of a pixel at 11px. The wordmark's .38em stays off the scale for the same reason its 15px does — it is a logotype, not a step. */ --tracking-tight: -.01em; --tracking-none: 0; --tracking-sm: .05em; --tracking-md: .1em; --tracking-lg: .12em; --tracking-xl: .16em; /* ---- the fluid typescale ---- A second typescale, for the one surface that needs one. The app is an instrument at a fixed floor of 1100px and its sizes are px on purpose; the site runs from a phone to a desktop and has five breakpoints. Forcing the app's fixed scale onto it would not unify anything, it would break the site — so the system carries both and says which is which. Its own group in the contract rather than part of --type-*: a machine that wants its own fixed sizes should not be made to invent five fluid ones it will never render. Known and not fixed: --fluid-lg reaches 2.7rem and --fluid-xl stops at 2.6rem, so above about 1400px a section heading is larger than the document title above it. That is how the site has always been; tokenising it changed nothing, and correcting it would change the live page. In ui/health.json. */ --fluid-sm: clamp(1.05rem, 1.5vw, 1.22rem); /* a lede under a heading */ --fluid-md: clamp(1.1rem, 2.2vw, 1.45rem); /* a lyric line on the site's glass */ --fluid-lg: clamp(1.75rem, 4vw, 2.7rem); /* a section heading */ --fluid-xl: clamp(1.9rem, 4.5vw, 2.6rem); /* a document title */ --fluid-2xl: clamp(2.6rem, 7.2vw, 5.6rem); /* the hero, once per page */ /* ---- spacing ---- Nine steps on a 2px base. The base is 2 and not 8 because this is an instrument fascia: 184 spacing values across gap, padding and margin, and the four most-used are 4, 10, 5 and 9. An 8-based scale would have had to move most of them. It was worth checking whether the fascia sits on the 3px grid the glyphs are drawn on. It does not — multiples of 3 are 25% of the gaps, which is roughly what chance gives you. There is no underlying grid; the values were tuned by hand, one rule at a time. So this scale is not a migration target. 73 declarations already land on it exactly and now say so; the rest stay literal on purpose, because a fascia where 5px and 4px both appear usually means someone looked at it. What the scale buys is a vocabulary for new work and a budget that stops the tail from growing — validate_design.py counts the off-scale uses and refuses to let the count rise. Negative values are not on the scale and are not counted against it: -1px, -3.5px and their kin are optical nudges pulling one thing onto another thing's line. That is not spacing, and rounding one to a step breaks the alignment it exists to make. */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 6px; --space-md: 8px; --space-lg: 10px; --space-xl: 12px; --space-2xl: 16px; --space-3xl: 20px; --space-4xl: 26px; /* ---- motion ---- --ease was already shared, which was the hard part. What was not shared was how long anything takes: 35 durations over 86 uses, six of them the same number written twice (.15s and 150ms both appear, and .18s, .25s, .32s, .34s, .4s likewise). The split here is between what answers you and what plays at you. TRANSITIONS answer you: a key lights, a panel slides, a readout fades. Sixteen durations from 60 to 400ms, and nothing depends on the exact number — six steps. Every move is under 10% except the dial's cap shadow, which was 120ms and is now 150: 30ms on a shadow, which is not a thing anyone can see, but it is a 25% move and saying "under 10%" would have been untrue. ANIMATIONS play at you, and here they are choreographed rather than arbitrary. dsp-breathe runs at 3.2s when the machine is live and at exactly half that when it is recording — recording breathes twice as fast, which is the whole point and was two unrelated numbers before. It is derived now, so it cannot drift. The wash entries stagger against --wash-ms. None of that belongs on a scale, so none of it is on one. */ --motion-flick: 60ms; /* a word lighting under the playhead */ --motion-fast: 150ms; /* the usual: a key, a hover, a lamp */ --motion-base: 180ms; /* the default for anything with a size change */ --motion-slow: 240ms; /* a panel's own chrome settling */ --motion-slower: 320ms; /* a panel arriving or leaving */ --motion-slowest: 400ms; /* the longest thing that still answers a click */ /* The two-to-one is the signal, so it is written as two-to-one. */ --breathe-live: 3.2s; --breathe-rec: calc(var(--breathe-live) / 2); /* ---- cast: the only three shadows that mean height ---- 29 distinct box-shadows over 36 uses, and the plan called them elevation and asked for levels. Counted by what they actually do, 33 of the 36 are not elevation at all: glyph 7 pixel art drawn as box-shadow on a 3px grid. Not a shadow. lamp 11 a bulb's own glow and its lens ring. That is light. material 12 inset pairs describing a surface's own form — a well, a dish, a key face. The thing is not above anything; it is shaped. cast 6 something is over something else, and says so. Nothing in this machine floats, which is the point of it: one piece of fascia with holes cut in it. So there are three cast levels and no more, and they are named for what is casting rather than numbered, because a numbered scale invites a level 4 that nothing needs. Material and lamp stay where they are. They belong to the theme — a different amp has a different dish — and pulling them into a shared depth scale is what the plan warned against. */ --cast-key: 0 8px 10px -7px rgba(0, 0, 0, 1), 0 14px 22px -12px rgba(0, 0, 0, 1); /* The two side panels cast away from each other, so the offset is one number and the mirror is derived. They were +20 and -20 written out separately, which is a pair waiting to stop matching. */ --cast-panel-x: 20px; --cast-panel: var(--cast-panel-x) 0 44px -22px rgba(0, 0, 0, .85); --cast-panel-flip: calc(-1 * var(--cast-panel-x)) 0 44px -22px rgba(0, 0, 0, .85); --cast-float: 0 18px 44px -18px #000; /* ---- radius ---- Seven steps, and a key that is not on them. The task assumed thirteen literal radii were untidiness. Four of them are arithmetic. A key is a stack of layers, each inset from the one below, and the corners have to stay concentric or they stop nesting: .btn 11 .btn::after inset 2.5 -> 8.5 = 11 - 2.5 its 2px border -> 6.5 = 8.5 - 2 .btn-face 6.5 concentric with that inner edge .btn-face::before inset 2 -> 4.5 = 6.5 - 2 So 4.5, 6.5 and 8.5 are not half-pixel sloppiness — they are the only values that keep the corners parallel, and rounding any of them to a step would show. They are derived from --radius-key now, which is what a theme moves; the stack follows it. --radius-key is deliberately off the scale. Putting it on would mean either moving every key's corner on the fascia or adding an 11px step that only one thing uses, and the key's corner is a signature rather than a step. The seven steps are the independent surfaces. 6, 8 and 10 are not invented: they are Shoelace's own small/medium/large ramp, which was already here and already right, so the scale aligns to it rather than beside it. 50% is not on the scale and is not counted against it. A knob is round; that is a shape, not a radius, and a theme that made it 40% would not have a rounder knob, it would have a broken one. */ --radius-hair: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 18px; /* A theme moves this one and the three below follow it: at 20px the stack reads 20 / 17.5 / 15.5 / 13.5, still concentric. Below about 6.5px the inner layers clamp at 0 and the key loses its inner curves — measured, not guessed: --radius-key: 4px gives 4 / 1.5 / 0 / 0. A squared-off rack is fine; it just stops being a stack of curves at that point. */ --radius-key: 11px; --radius-key-ring: calc(var(--radius-key) - 2.5px); /* .btn::after, inset 2.5 */ --radius-key-face: calc(var(--radius-key-ring) - 2px); /* inside its 2px border */ --radius-key-lip: calc(var(--radius-key-face) - 2px); /* .btn-face::before, inset 2 */ /* ---- focus ---- This machine has two ways of saying "the keyboard is here", and they are both correct because they are on different surfaces: on the panel a ring, inset into the key's own face. Outset it would cross the 3px side and touch the next key. on the glass the row's marker lights. Nothing moves; the light does — the same idiom the rest of the display uses, and an outline drawn over lit glass reads as a scratch on it. Both were already here and neither was written down, so the ring existed once, in one rule, as a literal. It is a token now, which is also what lets a theme move it: a machine with a paler fascia needs a darker ring than --ink-dim. A text field is the exception and keeps outline: none with no replacement. The caret is the indicator there, and it is a better one than a ring around a full-bleed textarea. */ --focus-ring-w: 2px; --focus-ring-color: var(--ink-dim); --focus-ring: var(--focus-ring-w) solid var(--focus-ring-color); --focus-inset: -3px; /* a key: just inside the face's own edge */ --focus-outset: 3px; /* a free-standing control: clear of the art */ /* ---- selection ---- The reader's own mark, which is the one thing on this page the machine did not put there. The browser's default is a flat grey wash laid over the text, and over a fascia it does the one thing nothing else here does: it takes the colour out of what it covers. Amber prose under it measured 2.1:1 against its own highlight, which is not a highlight, it is a smear. So the wash is the lamp at a quarter strength and the text goes *up* to full --ink rather than down. Selecting something makes it easier to read, which is what selecting something is for. Two tokens because the ink under it is not one colour: the glass rebinds --select-ink below, the same way the fascia, the glass and a key face each have their own ink already. */ --select-bg: rgba(var(--lit-rgb), .26); --select-ink: var(--ink); /* ---- layering ---- Five values, and they were five bare numbers. There is no depth model here to speak of — the whole machine is one flat fascia — so this is not a z-index scale in the usual sense. It is an order of five things that have to paint over each other, named for what they are. Worth knowing before adding a sixth: **none of these are scoped**. .glass is position: relative with no z-index, so it creates no stacking context, and neither does .display. Every one of these numbers competes in the same global stack — .glass::before at 3 and .dsp-say at 3 are peers resolved by document order, not siblings in separate contexts. That works today and it is fragile: giving .glass a z-index would silently re-scope four rules. --layer-grain is two orders above the rest on purpose. It is the film over the whole machine and the only fixed-position layer; the gap is there so nobody reasons about it alongside the in-glass stack. */ --layer-under: -1; /* a fixed backdrop, behind the page itself */ --layer-base: 0; /* the floor of a stacking context — a canvas in its box */ --layer-content: 1; /* what is on the glass, and a key's face over its collar */ --layer-scan: 2; /* something sweeping across: the scanline, the wash */ --layer-veil: 3; /* haze and lit overlays, over the content they dim */ --layer-edge: 4; /* the cut edge of the glass, above everything inside it */ /* The site's three, which the app has no use for and which are here anyway: one ladder or two surfaces that disagree, and the glass layers above are already identical in both. A marketing page has furniture an instrument does not — a bar that stays put, a drawer, a button that floats. */ --layer-mast: 20; /* a bar that stays while the page moves under it */ --layer-drawer: 25; /* a panel that slides over the page */ --layer-float: 30; /* something loose of the page entirely */ --layer-grain: 90; /* the film over the whole machine. Fixed, and alone up here */ /* ---- dimming ---- Thirteen opacity values looks like a scale that got away. Thirty-two of the forty-seven uses are 0 and 1 — a thing is lit or it is not — and three more are frames inside an animation curve, where .62 and .45 are points on a fade and moving either would bend the curve rather than tidy it. What is left is one ladder: the same ink, turned down. Six steps, and the only two that move are .6 -> .55 and .92 -> .9. 0 and 1 are not on the ladder and are not counted against it. Neither are keyframe percentages. Both are exempt by shape, the way 50% is exempt from the radius scale and negatives from spacing: they are not a choice about how faint something is. */ --dim-ghost: .13; /* the grain over the fascia — present, not visible */ --dim-faint: .22; --dim-half: .4; --dim-mid: .55; /* the workhorse: secondary text on the glass */ --dim-most: .75; --dim-near: .9; /* almost full, for something that must not read as lit */ --takes-w: 448px; /* three mix modules across, and the lyric keys at header size */ --takes-inset: 16px; /* the same gap to the edge of the app the screens keep */ /* A panel's whole column: itself, plus its gap to the edge of the app. */ --panel-col: calc(var(--takes-w) + var(--takes-inset)); --ease: cubic-bezier(.22, .68, .32, 1); /* ---- keys and knobs: the physical controls on the panel ---- Merged here from a second :root block. Two blocks meant the token layer had no single place to read, and a token could be defined twice with different values and nobody would see it. */ /* Depth without hardness. The old side was opaque var(--p-warm-02) — darker than the page behind it — so it read as a black slab rather than the edge of an object. Lifted to just above the background and cut to 2px, it turns back into an edge, and the weight moves into the ambient falloff below. */ /* Every key carries the same faint rim in every state. Without it a pressed key showed an edge that a resting one did not, and the two read as different components sitting side by side. Pressed keys take the lighter of the two: a sunk face loses its gradient, so the rim is the only thing left holding the shape. */ /* Two shadows, both soft: a close one that seats the key on the fascia, and a wide low-alpha one carrying the bulk. Nothing here has a hard boundary, which is the whole trick — depth comes from the falloff, not the edge. */ /* A recessed well: the fascia cut away rather than a thing sitting on it. An inset shadow alone reads as a printed gradient — what makes it a cut edge is the pair of hairlines. The wall above the glass is in shadow and ends in a dark line; the fascia below the glass catches the light and starts with a bright one. Both are 1px and both are needed. */ /* The lit edge of the fascia immediately under a well, outside its box. */ --well-out: 0 1px 0 rgba(255, 255, 255, .06), 0 -1px 0 rgba(0, 0, 0, .55); /* The glass's corner. Was its own 12px beside --radius-2xl's 12px; one of them had to be the source and a theme can only move one of them. */ --well-radius: var(--radius-2xl); /* One gap for every group of keys on the fascia. Groups set by eye drift apart, and once two runs of keys sit on the same row the difference reads as a mistake rather than as intent. */ --key-gap: 8px; /* ---- the material the machine is made of ---- One token per surface, holding the whole fill rather than its stops. A theme that wants four stops, a different angle or a photograph of walnut should not have to fit an amp into three named colours — and naming the stops would tie every amp to this one's construction. Named for where they sit, never for what colour they are: a brushed-steel amp and this one have to be able to share --amp-face. Each is laid under var(--grain-tex) with multiply, which is what stops a flat panel reading as plastic; that pairing lives in the components, not here. */ --amp-face: linear-gradient(180deg, var(--p-warm-09) 0%, var(--p-warm-06) 58%, var(--p-warm-02) 100%); --stage-face: linear-gradient(180deg, var(--p-warm-05b) 0%, var(--p-warm-06) 62%, var(--p-warm-09) 100%); --panel-face: linear-gradient(180deg, var(--p-warm-06) 0%, var(--p-warm-05b) 38%, var(--p-warm-02) 74%, var(--p-warm-02) 100%); /* The ledge under the window, and the one token with an invariant a theme has to keep: it belongs to the fascia, not to the display. There is no gap between the ledge and the glass above it — the fascia is one piece with holes cut in it — so a --keys-face close to the glass makes the two read as one surface and the window appears to extend past its own frame. silverface had it dark against a light plate and looked exactly like that. Nothing checks this: the value is a gradient, and the surfaces are only comparable once rendered. Look at it. */ --keys-face: linear-gradient(180deg, var(--p-warm-09) 0%, var(--p-warm-14) 100%); /* The counterpart to --hot. The machine says "finished" in this the way it says "delete this?" in the alarm colour, so a theme has to be able to move both and neither may collide with the lamp. */ --ok: var(--p-green-71); --ok-rgb: 79, 194, 122; /* ---- the room, and the controls you take hold of ---- The glow behind the panel: a valve amp warming a dark room. It is the machine's setting rather than part of it, which is why it is one token and not part of --amp-face. */ --room-glow: radial-gradient(120% 90% at 8% 100%, var(--p-warm-09) 0%, transparent 55%), radial-gradient(90% 70% at 100% 0%, var(--p-cool-09) 0%, transparent 60%); /* Turned metal. The dial is the most amp-defining thing on the panel — the one part a different machine would most obviously make differently — so each of its surfaces is named separately: the well it sits in, the cap itself, the lit lip round its edge. */ --dial-well: linear-gradient(90deg, var(--p-warm-05) 0%, var(--p-warm-06) 46%, var(--p-warm-11) 100%); --dial-face: linear-gradient(94deg, var(--p-warm-20) 0%, var(--p-warm-15) 44%, var(--p-warm-08) 78%, var(--p-warm-05b) 100%); --dial-lip: linear-gradient(180deg, var(--p-warm-05b) 0%, var(--p-warm-05b) 50%, var(--p-warm-14) 100%); --dial-tick: var(--p-warm-51); --dial-tick-lit: var(--p-warm-69); /* the ends of the sweep, brighter than the rest */ --track-face: linear-gradient(180deg, var(--p-warm-29) 0%, var(--p-warm-15) 55%, var(--p-warm-06) 100%); /* Where a control meets the fascia. Shared, because a dial and a fader that drew their edges differently would read as parts from two machines. */ --control-edge: var(--p-warm-02); /* The unlit segment ground, and a digit on a readout that has stopped reading. Not the lamp at lower opacity: an unlit segment is a physical thing with its own colour, and dimming the lit one looks like a fade. */ --led-ground: var(--p-warm-02); --led-off: var(--p-warm-15); --cap-ink: var(--p-warm-36); /* the engraved label under a readout */ --glyph-ink: var(--p-warm-36b); /* a glyph on a key face */ /* Between --ok and --hot. The tally light while it is recording you, the glass while it is asking whether to delete something, and the last stretch of the meter before the peak. Three places that had the same hex written out and no name between them — and the comments at each one all say the same thing, that red is the colour this machine has never used for "on", which is exactly why it can be spent here. */ --warn: var(--p-red-59); --warn-dim: var(--p-red-49); /* ---- ink on the glass ---- The words, before and after they are sung. Warmer than --ink-faint on purpose: lyrics sit on the stage rather than on the fascia, and taking the panel's grey there made them read as a caption. */ --lyric-now: var(--p-amber-42); --lyric-next: var(--p-amber-35); /* Marks that label rather than report: the stem letters, the little marks beside them, and the em-dash a readout shows when it has nothing to say. Three values within a few points of each other, which is deliberate — the one that means "no reading" is the faintest of them. */ --stem-ink: var(--p-warm-35); --mark-ink: var(--p-warm-41); --no-reading: var(--p-warm-20); /* The peak mark. A candidate for deriving from --lit rather than stating — it is a lit thing, and on a green amp it should be a green peak — but that would change what is on the screen today, so it is named here and left for the theme contract (DS-501) to decide. */ --peak: var(--p-amber-86); /* A hover on something behind glass: the surface lifting, not a colour. */ --hover-veil: var(--p-white-a03); /* The key's own base, and the unlit glass. Both were component-local tokens holding a literal — invisible to the literal check, because a custom property declaration is where hex belongs — and so unreachable by a theme. Building the second amp is what found them: its panel went steel and its keys stayed walnut. #roll and the confirm view still set --glass-* for themselves, which is deliberate: how dark a window needs to be depends on how much fascia surrounds it. */ --key-face: #221b13; --glass-face-top: #0a0807; --glass-face-mid: #0e0b09; --glass-face-foot: #15110c; } /* The three lamps this machine can be fitted with. A theme is the light, nothing else: the panel, the glass, the shadows and the type are the same in all of them. That is why it is three values — every lit surface in this file reads --lit or --lit-rgb, so changing the bulb changes the machine rather than requiring a repaint of it. The dim value is the same hue taken down and desaturated, not the lit one at low alpha: light through a dark filter loses saturation as well as strength, and an alpha ramp keeps it fully saturated the whole way down. Scoped to :root deliberately. The selector keys on the same attribute the lamp keys carry to name the colour they fit, and unscoped it matched those too — each key redefining --lit for everything inside itself. There is no red lamp, and there should not be: --hot is this machine's alarm, the colour it asks "delete this?" in, and a red bulb makes the alarm and the light the same thing. Every colour here has to leave that one alone. */ :root[data-lamp="green"] { --lit: #3fdd88; --lit-rgb: 63, 221, 136; --lit-dim: #4f8f6a; } :root[data-lamp="blue"] { --lit: #4aa8ff; --lit-rgb: 74, 168, 255; --lit-dim: #567fa6; } /* The cold one. Not a grey lamp — a white one, which on a warm dark panel is the look of a cathode tube in a wooden case rather than the absence of a colour. Its dim value is the only one that is genuinely neutral, because there is no hue left to take down. */ :root[data-lamp="white"] { --lit: #eef2f6; --lit-rgb: 238, 242, 246; --lit-dim: #8b9199; } :root[data-theme="steel"] { --p-steel-03: #070809; --p-steel-05: #0b0d0e; --p-steel-07: #101214; --p-steel-09: #14171a; --p-steel-12: #1b1e22; --p-steel-15: #22262b; --p-steel-20: #2d3339; --p-steel-26: #3a424a; --p-steel-34: #4c5661; --p-steel-46: #677483; --p-steel-58: #8793a1; --p-steel-72: #afb7c0; --p-steel-90: #e2e5e9; --p-alarm: #d33a22; --p-warn: #e68633; --p-ok: #59c09d; /* fascia — pressed steel, lit from a cold room */ --amp-face: linear-gradient(180deg, var(--p-steel-15) 0%, var(--p-steel-09) 58%, var(--p-steel-05) 100%); --stage-face: linear-gradient(180deg, var(--p-steel-07) 0%, var(--p-steel-09) 62%, var(--p-steel-12) 100%); --panel-face: linear-gradient(180deg, var(--p-steel-09) 0%, var(--p-steel-07) 38%, var(--p-steel-05) 74%, var(--p-steel-03) 100%); --keys-face: linear-gradient(180deg, var(--p-steel-20) 0%, var(--p-steel-15) 100%); --room-glow: radial-gradient(120% 90% at 8% 100%, var(--p-steel-12) 0%, transparent 55%), radial-gradient(90% 70% at 100% 0%, var(--p-steel-09) 0%, transparent 60%); --panel: var(--p-steel-09); --line: var(--p-steel-15); --bg: var(--p-steel-05); /* controls — machined, not turned */ --dial-well: linear-gradient(90deg, var(--p-steel-05) 0%, var(--p-steel-09) 46%, var(--p-steel-15) 100%); --dial-face: linear-gradient(94deg, var(--p-steel-34) 0%, var(--p-steel-26) 44%, var(--p-steel-12) 78%, var(--p-steel-09) 100%); --dial-lip: linear-gradient(180deg, var(--p-steel-07) 0%, var(--p-steel-07) 50%, var(--p-steel-20) 100%); --dial-tick: var(--p-steel-46); --dial-tick-lit: var(--p-steel-72); --track-face: linear-gradient(180deg, var(--p-steel-34) 0%, var(--p-steel-15) 55%, var(--p-steel-07) 100%); --control-edge: var(--p-steel-03); --key-face: var(--p-steel-15); /* glass — a tube, not a window */ --lens-face: radial-gradient(circle at 50% 64%, rgba(var(--lamp-rgb, var(--lit-rgb)), .22) 0%, rgba(var(--lamp-rgb, var(--lit-rgb)), .05) 52%, rgba(var(--lamp-rgb, var(--lit-rgb)), 0) 76%), linear-gradient(180deg, var(--p-steel-20) 0%, var(--p-steel-09) 72%, var(--p-steel-05) 100%); --lens-edge: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .8); --lens-catch: radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 44%); --led-ground: var(--p-steel-03); --led-off: var(--p-steel-15); --hover-veil: #ffffff0a; --glass-face-top: var(--p-steel-05); --glass-face-mid: var(--p-steel-07); --glass-face-foot: var(--p-steel-09); /* ink — cold, and the words a shade of the tube */ --ink: var(--p-steel-90); --ink-dim: var(--p-steel-58); --ink-faint: var(--p-steel-34); --cap-ink: var(--p-steel-34); --glyph-ink: var(--p-steel-46); --stem-ink: var(--p-steel-34); --mark-ink: var(--p-steel-46); --no-reading: var(--p-steel-20); --lyric-now: var(--p-phosphor-dim); --lyric-next: var(--p-steel-26); /* type — nothing. This machine declared all three faces and two of them were byte-identical to :root; only --face-seg differed, pointing the transport clock at the pixel face instead of the seven-segment one. That is a good idea kept for later — fonts per theme is its own piece of work — and until then steel behaves like every other machine, so the block is gone rather than left restating what it inherits. Dropping it whole keeps the group rule satisfied: a theme takes all of a group or none of it. */ /* state — none of these may be the lamp, and on a green machine that rules out more than it does on an amber one */ --hot: var(--p-alarm); --warn: var(--p-warn); --warn-dim: #a35f2c; --ok: var(--p-ok); --ok-rgb: 89, 192, 157; --peak: var(--p-steel-90); /* Dark fascia, dark glass, dark keys — all three surfaces agree here, so these bind to the panel's ink and the split costs this theme nothing. */ --glass-ink: var(--ink); --glass-ink-faint: var(--ink-faint); --key-ink: var(--ink-dim); } /* ============================================================================ silverface — a 1970s receiver: a brushed aluminium faceplate, dark glass. The first light machine, and the first that takes more than colour. It moves the typescale, the radius, the cast, the focus ring and the dimming ladder, because a machined aluminium front is not a moulded plastic one: the corners are cut rather than softened, the legends are etched small and wide, and a shadow on a light panel has to be darker to be seen at all. What it proved by existing: - --ink could not be one token. The panel wants near-black printing and the window wants pale text, and until this amp every machine was dark enough that one value served both. --glass-ink exists because of this theme. - --radius-key at 4px takes the key's inner layers to 0, which the token comment predicted. On this machine that is right — the keys should read as milled, not moulded — so the derivation is doing its job rather than failing. - dimming had to go UP, not down. .55 on a dark fascia is comfortable secondary text; on aluminium it is nearly invisible. Every step is raised, which is also the first time a theme has answered a DS-807 finding. ========================================================================= */ :root[data-theme="silverface"] { /* Brushed aluminium, warm rather than blue — the alloy of the period had a champagne cast to it, which is what separates a silverface from a rack. */ --p-alu-04: #0d0d0c; --p-alu-08: #161614; --p-alu-14: #24231f; --p-alu-22: #37352f; --p-alu-34: #55524a; --p-alu-48: #78746a; --p-alu-60: #969186; --p-alu-70: #ada79b; --p-alu-78: #c0bab0; --p-alu-84: #cfc9bf; --p-alu-88: #dad4ca; --p-alu-93: #e8e3da; --p-alu-97: #f4f0e9; /* fascia — the faceplate, lit from above the way a panel under a shelf is */ --amp-face: linear-gradient(180deg, var(--p-alu-88) 0%, var(--p-alu-84) 58%, var(--p-alu-70) 100%); --stage-face: linear-gradient(180deg, var(--p-alu-84) 0%, var(--p-alu-88) 62%, var(--p-alu-78) 100%); --panel-face: linear-gradient(180deg, var(--p-alu-88) 0%, var(--p-alu-84) 38%, var(--p-alu-78) 74%, var(--p-alu-70) 100%); --keys-face: linear-gradient(180deg, var(--p-alu-93) 0%, var(--p-alu-84) 100%); --room-glow: radial-gradient(120% 90% at 8% 100%, var(--p-alu-93) 0%, transparent 55%), radial-gradient(90% 70% at 92% 0%, var(--p-alu-97) 0%, transparent 60%); --panel: var(--p-alu-84); --line: var(--p-alu-60); --bg: var(--p-alu-78); /* controls — dark anodised caps against the light plate, which is how the period actually did it: the knob is the thing you find without looking */ --dial-well: linear-gradient(90deg, var(--p-alu-60) 0%, var(--p-alu-70) 46%, var(--p-alu-88) 100%); --dial-face: linear-gradient(94deg, var(--p-alu-97) 0%, var(--p-alu-88) 44%, var(--p-alu-70) 78%, var(--p-alu-84) 100%); --dial-lip: linear-gradient(180deg, var(--p-alu-97) 0%, var(--p-alu-93) 50%, var(--p-alu-70) 100%); --dial-tick: var(--p-alu-22); --dial-tick-lit: var(--p-alu-04); --track-face: linear-gradient(180deg, var(--p-alu-48) 0%, var(--p-alu-60) 55%, var(--p-alu-78) 100%); --control-edge: var(--p-alu-60); --key-face: var(--p-alu-78); /* glass — unchanged in kind. The window is still a window; a lit display on a light panel is darker than its surround, not lighter. */ --lens-face: radial-gradient(circle at 34% 27%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 38%, rgba(0,0,0,.22) 100%); --lens-edge: inset 0 1px 1.5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.5); --lens-catch: radial-gradient(circle at 34% 27%, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 40%, transparent 70%); --led-ground: var(--p-alu-08); --led-off: var(--p-alu-34); --hover-veil: rgba(0, 0, 0, .05); --glass-face-top: #0b0b0a; --glass-face-mid: #100f0d; --glass-face-foot: #171512; /* ink — printing on the plate. Dark, and the reason --glass-ink exists. */ --ink: var(--p-alu-08); --ink-dim: var(--p-alu-34); --ink-faint: var(--p-alu-48); --glass-ink: var(--p-alu-93); --glass-ink-faint: var(--p-alu-60); --key-ink: var(--p-alu-14); --cap-ink: var(--p-alu-34); --glyph-ink: var(--p-alu-14); --stem-ink: var(--p-alu-34); --mark-ink: var(--p-alu-48); --no-reading: var(--p-alu-60); --lyric-now: #d8a441; --lyric-next: #a8823a; /* state — deepened, because a light ground washes a saturated colour out */ --hot: #b02a17; --warn: #b26a1c; --warn-dim: #8d5a22; --ok: #2f7d5c; --ok-rgb: 47, 125, 92; --peak: #8a5a12; /* typescale — etched legends: a step smaller and opened up. An aluminium plate is silk-screened, and silk-screened type is small and wide. */ --type-2xs: 8px; --type-xs: 9px; --type-sm: 10px; --type-md: 11px; --type-lg: 12px; --type-xl: 15px; --type-2xl: 22px; --type-3xl: 30px; --icon-sm: 12px; --icon-md: 14px; --leading-flush: 1; --leading-snug: 1.2; --leading-tight: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; --leading-loose: 2.1; --tracking-tight: 0; --tracking-none: .02em; --tracking-sm: .07em; --tracking-md: .13em; --tracking-lg: .16em; --tracking-xl: .2em; /* radius — milled, not moulded. The key's inner layers clamp at 0, which is the intended look here rather than a limit being hit by accident. */ --radius-hair: 0; --radius-sm: 1px; --radius-md: 2px; --radius-lg: 3px; --radius-xl: 4px; --radius-2xl: 5px; --radius-3xl: 6px; --radius-key: 4px; /* depth — a shadow on a light plate has to be darker to exist at all */ --cast-key: 0 6px 8px -6px rgba(0, 0, 0, .55), 0 12px 20px -12px rgba(0, 0, 0, .45); --cast-panel-x: 18px; --cast-float: 0 16px 40px -16px rgba(0, 0, 0, .5); /* focus — dark ring, because --ink-dim on aluminium is the wrong direction */ --focus-ring-w: 2px; --focus-ring-color: var(--p-alu-14); --focus-inset: -3px; --focus-outset: 3px; /* selection — the mark has to darken here, and it stops being the lamp. Every lamp is lighter than this plate, so a lamp wash cannot separate from it: amber measured 1.04:1 at the base .26 and only reached 1.09:1 at .70, which is not a highlight at any strength. A dark tint at .85 measures 6.69:1 against the plate with the light ink at 8.62:1 on top, and it is the same move the focus ring above had to make for the same reason. */ --select-bg: rgba(36, 35, 31, .85); /* --p-alu-14; rgba needs the channels */ --select-ink: var(--p-alu-93); /* dimming — raised across the board. .55 is comfortable secondary text on a dark fascia and nearly gone on this one. The first theme to answer a DS-807 finding rather than inherit it. */ --dim-ghost: .07; --dim-faint: .3; --dim-half: .5; --dim-mid: .68; --dim-most: .84; --dim-near: .95; } /* ---------- the kit's own vocabulary ---------- What is left of it. This block used to carry 27 colours as well, a warm ramp for Shoelace's neutral/primary/danger scales, and both other machines carried their own retuning of it. All of it was invisible. The reason it was there said Shoelace draws the selects, tooltips and ranges. Measured, one at a time: there is no in the app or the site, though style.css still had a rule for one. Every sl-range is a .dial-input, which dial.css sets to opacity 0 — the keyboard-reachable input behind a drawn dial, so its thumb and track paint at zero alpha. And the tooltips are visible but fully overridden a few hundred lines above, background, text and arrow, because whatever --sl-tooltip-background-color resolved to was arriving translucent over a lit panel. sl-icon takes currentColor and reads no palette at all. Checked rather than reasoned about: with all 255 --sl-color-* properties forced to magenta, the fascia is unchanged and an open tooltip still measures rgb(26,21,18) on its body and its arrow. What stays is the part that does render: the face, and three radii. If a component ever arrives that draws itself from the kit's palette, this is where its colours go — and the note to whoever adds them is that the app overrides every Shoelace surface it currently shows, so check that the new one is not overridden too before tuning 27 values by hand. */ :root, :host, .sl-theme-dark { --sl-font-sans: var(--font); --sl-font-serif: var(--font); --sl-border-radius-small: 6px; --sl-border-radius-medium: 8px; --sl-border-radius-large: 10px; } /* A bulb, not a machine. Fitted to whichever amp is on: the fascia, the glass and the type are a separate choice from the light, and presenting them as one list of five was wrong — four of those five only ever changed the lamp. */ :root[data-lamp="phosphor"] { /* A P1 tube, which is a yellow-green — not the mint green the other bulb already is. It was #51d67e, which measured dE 5.2 from --lit on the green lamp when every other pair of lamps is 56 to 125 apart: two names for one bulb. That happened when the axes were split — phosphor was not a bulb at all before then, it was the tube that belonged to the steel machine ("cold rolled steel and a green phosphor tube"), and splitting the machine from the light left the tube standing on its own with nothing to distinguish it. #7dfa3c is dE 45.5 from the nearest lamp. */ --p-phosphor: #7dfa3c; --p-phosphor-dim: #4e7f30; --lit: var(--p-phosphor); --lit-rgb: 81, 214, 126; --lit-dim: var(--p-phosphor-dim); }