/* ============================================================================================ OLIVE — warm paper, one olive action, one lime marker. ============================================================================================ THIS FILE STATES NO SIZE, NO SPACE AND NO POSITION. Not one padding, margin, grid, inset or gap; no `--c-u`, no `--c-gap`, no `--c-rhythm`, no `--c-gut`, no `--c-measure`. Delete it and the page is the same page, in grey. `lib/designs/paint.test.js` is that sentence as a test. IT IS A PORT. Every value below comes off the token specification attached to the theme board (idea `t_0mygk49x`, `535ae71433f8cd9ecfde.html`), which states its palette, its type, its shape, its grade, its motion and its four rules in its own words. Where a line here is NOT the specification's, the comment says so and BRIEF.md says why. WHAT IT IS. A cream page with nothing on it but hairlines and value. The neutrals are a warm YELLOW-GREEN off-white — `#FAF8EA`, one step off neutral, never a grey-white and never the amber of a letterpress cream — carrying near-black type at -0.02em. A card is that page gone to pure white with a single pixel of `#E2DFCB` round it and NO shadow at all: "confidence comes from flatness — hairlines and value shifts do the separating, so nothing needs a shadow." Schibsted Grotesk carries everything, at 500 for a heading and 400 for a sentence. ITS TWO COLOURS DO DIFFERENT JOBS. The accent is the OWNER'S and it is spent once per screen — the button, a tick, a pill, a chart stroke. Beside it sits a lime `#DFF23C` that is a FIXED brand mark: it never derives from the accent, it always carries `#14150F`, and it appears on a page perhaps twice, like a highlighter pen. WHAT IT REFUSES. No accent on body text, on a heading, on an in-paragraph link, on a card background, on a border or on any large field. No blurred shadow on anything that is not standing on a photograph. No grey-white page. No second typeface. No loose tracking on a heading — "loosen the heading tracking until the type goes generic" is the specification's own description of a bad copy of it. ============================================================================================ */ /* ── THE RAMP — WARM, AND NOT THE ACCENT'S ───────────────────────────────────────────────── Ten steps of one hue: a desaturated yellow-green, the colour of unbleached paper. `--c-brand` is 0% where the layout's default is 7% and Marigold's is 6% — the specification's ninth rule says in as many words that the surfaces "never move", and a cream that took a per-business tint would make every site's paper a slightly different colour while the design's whole argument is that the paper is the constant and the ACCENT is the variable. */ :root, :is(#clay-page,#design-sheets).olive{ --accent:#33580F; /* the olive — the one live variable */ --c-brand:0%; /* THE FIXED MARK. A lime that is not a tint of anything: "the lime is a fixed brand mark, not a tint of the accent", and "highlight only ever carries #14150F". One colour, one ink, both rooms, and it is the one value in this file an owner cannot change. */ --ol-mark:#DFF23C; --ol-mark-ink:#14150F; /* the one shadow this design has, and it is only ever used where a card overlaps a photograph */ --ol-float:0 8px 24px rgba(20,21,15,.10); /* how dense the veil over the page behind a sheet is — see `.sheet-veil` at the foot of this file, and `--c-over`, which is stated SOLID because parts.css derives a photograph band's every ink from it */ --ol-veil:55%; } /* ── THE LIGHT ROOM, WHICH IS THE DESIGN ─────────────────────────────────────────────────── The specimen is light throughout. The page is `--ol-100`, one step down from the white a card goes to, so a card reads as a card by being BRIGHTER than what it stands on — the opposite of the dark room below, where everything climbs away from the floor. */ :is(#clay-page,#design-sheets).olive, #clay-page.olive[data-mode="light"], #design-sheets.olive[data-mode="light"], :root[data-mode="light"] #clay-page.olive, :root[data-mode="light"] #design-sheets.olive{ --ol-050:#FFFFFF; --ol-100:#FAF8EA; --ol-200:#F1EFDD; --ol-300:#E9E6D2; --ol-400:#E2DFCB; --ol-500:#CFCBB2; --ol-600:#8A8B7E; --ol-700:#6B6D5F; --ol-800:#4A4C41; --ol-900:#14150F; --ol-950:#0B0C08; /* the inverse block — the one deep plate */ --c-paper:var(--ol-100); --c-ink:var(--ol-900); --c-soft:var(--ol-800); /* 7.6:1 on the fill, 8.7:1 on the paper */ /* THE SPECIFICATION'S `--text-muted` IS #8A8B7E AND IT DOES NOT PASS. Measured against the sunken step it sits on most often it is 3.27:1, and Clay holds the tertiary text step to 4.5 because it carries an eyebrow, a caption and the small print under a checkout button — see "a theme's secondary and tertiary text can be read on its own grounds" in contract.test.js. `--ol-700` is the same hue two steps down and measures 4.61 on the fill, 5.00 on the paper. The pale one is kept as `--ol-600` and used where it is not text: the map's ground. */ --c-faint:var(--ol-700); --c-line:var(--ol-400); --c-fill:var(--ol-200); --c-card-bg:var(--ol-050); /* the one pure white on the page */ /* THE BAND'S SECOND SURFACE IS THE SUNKEN STEP, NOT A TINT OF THE ACCENT. The layout's default for `--c-ground-fill` is 14% of the owner's colour mixed into the paper, which is exactly the "large background field" the restraint rule bans. A page of this design changes PAPER STOCK between bands; it does not change colour. */ --c-ground-fill:var(--ol-200); --c-map-ground:var(--ol-300); /* `--c-over` IS A GROUND, NOT A VEIL. parts.css writes `--g:var(--c-over)` on a photograph band and derives every ink on it from that colour, so a value with alpha in it hands the derivation a transparent colour and every word over a picture comes out transparent too. Stated solid; the transparency is applied where the veil is drawn — see `.sheet-veil`. */ --c-over:var(--ol-950); --c-flip:var(--ol-950); /* re-derived from the owner's hue below */ --c-flip-ink:#FAF8EA; --c-block-bg:#1E2018; /* one step inside the plate — re-derived below */ --c-accent:var(--c-accent-slot); --c-accent-ink:#2A4A0C; /* re-derived below */ --c-band-accent:var(--accent); /* A QUOTATION IS A WHITE CARD, NOT A COLOURED ONE. "Banned: card backgrounds" is the fourth line of the restraint rule, and the proof band already sits on the sunken step — a white card on it is the value shift this design separates things with. */ --c-quote-bg:var(--ol-050); --c-field-bg:var(--ol-050); --c-field-bg-hi:color-mix(in oklab, var(--accent) 6%, var(--ol-050)); /* DECIDED, and not in the specification: it names no colour for open-or-closed. Open is a fact and a fact is never the accent, and it is never the lime either — the mark is a mark. */ --ol-live:#2F7D32; --ol-thing:#2A2C23; /* a card standing on the plate — re-derived below */ } /* ── THE DARK ROOM — the specification's own second ramp ──────────────────────────────────── "Dark is a surface-and-ink swap, not a new theme. Surfaces, border, text and the state washes flip; radii, type, tracking, motion and the highlight are identical in both." The one thing that reverses is the direction a surface moves: light SINKS to make the page and lifts to make a card, dark starts at the floor and every surface climbs. */ #clay-page.olive[data-mode="dark"], #design-sheets.olive[data-mode="dark"], :root[data-mode="dark"] #clay-page.olive, :root[data-mode="dark"] #design-sheets.olive{ --ol-050:#F7F5E9; --ol-100:#F2F0E2; --ol-200:#D3D5C6; --ol-300:#B6B8A8; --ol-400:#7E8172; --ol-500:#454936; --ol-600:#2E3125; --ol-700:#262920; --ol-800:#1B1D16; --ol-900:#12130E; --ol-950:#0B0C08; --c-paper:var(--ol-900); --c-ink:var(--ol-100); --c-soft:var(--ol-300); /* 9.3:1 on the paper */ --c-faint:var(--ol-400); /* 4.69 on the paper, 4.93 on the sunken step */ --c-line:var(--ol-600); --c-fill:var(--ol-950); /* in the dark room the second surface SINKS */ --c-card-bg:var(--ol-800); /* …and the card climbs */ --c-ground-fill:var(--ol-950); --c-map-ground:var(--ol-800); --c-over:#050603; --c-flip:#26281F; /* a LIFT, not a sink — re-derived below */ --c-flip-ink:#F2F0E2; --c-block-bg:#31342A; /* re-derived below */ --c-accent:var(--c-accent-slot); --c-accent-ink:#A9CC6B; /* re-derived below */ --c-band-accent:var(--accent); --c-quote-bg:var(--ol-800); --c-field-bg:var(--ol-800); --c-field-bg-hi:color-mix(in oklab, var(--accent) 10%, var(--ol-800)); --ol-live:#7BC47F; --ol-thing:#35382D; } /* ── THE OWNER'S ACCENT, HELD WHERE IT CAN BE READ ───────────────────────────────────────── "If a chosen accent fails, darken it in OKLCH until both hold. Never lighten the surface, never hand-swap the text token." That is the specification's contrast rule and this is it: the slot is the colour the owner typed, and `--c-accent` is that colour with a floor under it in the dark room, where the default olive itself has to lift to `#7FA83C` to clear 3:1 on `#12130E`. The light room needs no correction and takes none. */ :is(#clay-page,#design-sheets).olive{--c-accent-slot:var(--accent)} @supports (color: oklch(from red l c h)){ #clay-page.olive[data-mode="dark"], #design-sheets.olive[data-mode="dark"], :root[data-mode="dark"] #clay-page.olive, :root[data-mode="dark"] #design-sheets.olive{ --c-accent-slot:oklch(from var(--accent) max(l, .62) c h); } } /* ── THE PLATE AND THE ACCENT AS TEXT, TAKEN FROM THE OWNER'S HUE ────────────────────────── The contract asks every theme's deep surfaces to carry the business's hue rather than a fixed near-black, and this design's refusal is "no colour on a surface" — so the ROTATION is nought and the chroma cap is the tightest of the five (.016 on the plate, .012 one step inside it). At that cap a red business gets a plate a degree warmer than a blue one and neither reads as coloured, which is the whole of what a temperature is meant to do here. THE LIGHTNESS NEVER MOVES: every number below is the oklch lightness of the hex it replaces (`#0B0C08` is l .15), so the page keeps the weight, the seam and the contrast it already had. THE PAGE IS NOT TOUCHED IN EITHER ROOM — tinting a dark room's paper takes the band with it. */ @supports (color: oklch(from red l c h)){ :is(#clay-page,#design-sheets).olive, #clay-page.olive[data-mode="light"], #design-sheets.olive[data-mode="light"], :root[data-mode="light"] #clay-page.olive, :root[data-mode="light"] #design-sheets.olive{ --c-flip:oklch(from var(--accent) .15 min(c, .016) h); --c-block-bg:oklch(from var(--accent) .27 min(c, .012) h); --ol-thing:oklch(from var(--accent) .33 min(c, .012) h); /* THE ACCENT AS TEXT IS NOT THE ACCENT AS A FILL. On the cream the owner's colour is dropped to l .44 at most so a sentence in it can be read; on the dark ramp it is lifted instead. The BUTTON keeps the hue exactly as it was typed — parts.css holds the correction in a hairline round it. */ --c-accent-ink:oklch(from var(--accent) min(l, .44) c h); } #clay-page.olive[data-mode="dark"], #design-sheets.olive[data-mode="dark"], :root[data-mode="dark"] #clay-page.olive, :root[data-mode="dark"] #design-sheets.olive{ --c-flip:oklch(from var(--accent) .28 min(c, .013) h); --c-block-bg:oklch(from var(--accent) .35 min(c, .011) h); --ol-thing:oklch(from var(--accent) .40 min(c, .011) h); --c-accent-ink:oklch(from var(--accent) max(l, .82) calc(c * .85) h); } } /* ── TYPE — one face, two weights, and tight ─────────────────────────────────────────────── "Schibsted Grotesk. Heading 500 / body 400. Tracking −0.02em headings, −0.005em body." There is no second family and no third weight: the specification's own description of a bad copy is one that "loosens the heading tracking until the type goes generic". `--c-base` is 16px and `--c-ratio` 1.26, which is the specification's own scale read off its steps (64/48/36/28/20 over a 16px body). `--c-ratio-sm` is the phone's, and it is smaller, because Clay's steps are fluid: on a phone the top step is `base * ratio⁴` and a ratio that looks right on a desk doubles a heading on a telephone. */ :is(#clay-page,#design-sheets).olive{ --c-display:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; --c-body:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; --c-label:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif; --c-weight:500; --c-case:none; --c-track:-.02em; --c-lead-h:1.05; --c-body-h:1.5; --c-base:16px; /* 1.33, READ OFF THE SPECIMEN'S OWN STEPS: 64 · 48 · 36 · 28 · 20 over a 16px body is a third between the display sizes, not the quarter the small end suggests. It matters more here than it looks: Clay's steps are FLUID — on a wide page the top two are clamped by `4.2cqw` and `6cqw` whatever a theme says, and on a phone they are `base * ratio^n`, which is the theme's alone. At 1.26 a heading is 32px on a phone against 59 on a desk and the h1 40 against 84, and `sizes.test.js` holds every role to 1.8x on the ground that "a role that doubles between the two is a role a phone never sees the design of". At the specimen's own 1.33 they land at 1.56x and 1.68x. */ --c-ratio:1.33; --c-ratio-sm:1.18; --c-display-adj:1; --c-label-weight:500; --c-label-case:uppercase; --c-label-track:.14em; --c-eyebrow-deco:none; } /* ── TREATMENT — corners, one hairline, and no shadow ────────────────────────────────────── 20 on a card, 28 on a large box, 16 on a picture, a full pill on anything you press. ONE pixel of border everywhere: this design separates things by value and by hairline, and a second weight of line would be a second idea. `--c-card-shadow` is left where parts.css puts it, which is `none` — "shadow only when a card overlaps a photo", and that one case is the last rule in this file. These are shape, not size: a corner moves nothing. */ :is(#clay-page,#design-sheets).olive{ --c-r:20px; --c-r-lg:28px; --c-bw:1px; --c-card-bw:1px; --c-quote-bw:1px; --c-field-bw:1px; --c-field-bw-b:1px; } /* ── THE GRADE ───────────────────────────────────────────────────────────────────────────── "No duotone, no grayscale. Grade saturate(1.05) contrast(1.03)." A correction so light it is almost a refusal, and that is the point: the design's confidence comes from "full-colour photography of real faces", so a filter's job here is to make forty phones agree, not to make them a look. The overlay is the specification's — a wash from the ink at the TOP of the frame, where a caption sits, and nothing at the bottom. */ :is(#clay-page,#design-sheets).olive{ --c-photo:saturate(1.05) contrast(1.03); --c-photo-wash:none; --c-photo-wash-blend:normal; --c-scrim-a:0; --c-scrim-b:.55; --c-scrim-dim:.35; } #clay-page.olive[data-mode="dark"], #design-sheets.olive[data-mode="dark"], :root[data-mode="dark"] #clay-page.olive, :root[data-mode="dark"] #design-sheets.olive{ --c-photo:saturate(1.02) contrast(1.05) brightness(.92); --c-scrim-b:.62; } /* THE ESCAPE HATCH — the picture as they took it, the grade off. */ :root[data-photos="raw"], :root[data-photos="raw"] :is(#clay-page,#design-sheets).olive{--c-photo:none} /* ── THE ACTION ──────────────────────────────────────────────────────────────────────────── "--accent is the only user-changeable colour", and the button is where it is spent. The specification draws its primary as the accent with `--accent-text` on it; the ink is derived by luminance in parts.css instead, which is the same answer arrived at from the fill rather than stated, and it is right for every accent rather than for one. The label is sentence case at the body weight — "All 52px, pill radius, weight 500, 15px" — which is the one place this design is NOT tracked capitals, and it is deliberate: a button is a thing somebody reads, not a label on a shelf. */ :is(#clay-page,#design-sheets).olive{ --c-act-font:var(--c-body); --c-act-weight:500; --c-act-case:none; --c-act-track:-.01em; --c-act-bg:var(--c-accent); --c-act-bar-bg:var(--c-accent); --c-band-accent:var(--c-accent); /* the plate under a way in is not the action — left alone it defaults to the button's ground and every ways-in card becomes a slab of the owner's colour, which is the banned list */ --c-nav-dim:1; } /* ── THE LIME, WHERE IT IS ALLOWED TO BE ─────────────────────────────────────────────────── Twice on a page and never as a ground: the mark under a rating and the fill of a meter are what the specimen uses it for. It carries `#14150F` and nothing else, in both rooms. */ :is(#clay-page,#design-sheets).olive mark, :is(#clay-page,#design-sheets).olive .c-star{background:var(--ol-mark);color:var(--ol-mark-ink)} /* ── AND THE ONE SHADOW ──────────────────────────────────────────────────────────────────── "Shadow only when a card overlaps a photo." A card standing on a photograph band has no value step to separate it from what is behind it — the picture is every value at once — so this is the one place the float earns itself. Everywhere else the hairline does it. */ :is(#clay-page,#design-sheets).olive .c-g-photo .c-card, :is(#clay-page,#design-sheets).olive .c-behind .c-card{box-shadow:var(--ol-float)} /* ============================================================================================ THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO — and they are older than this design. ============================================================================================ An owner's page loads editor-ui.css and site.css for the panel, the dock and the pickers. Both carry UNSCOPED class rules on names the design layer also uses — `.sheet`, `.card`, `.wrap`, `.field`, `.fgrid` — and the result is visible only to the OWNER, which is why it survives a whole test suite. Everything those files set on a shared name is put back to the browser's own value here. This is plumbing, not design: it undoes, it does not decide. ============================================================================================ */ :is(#clay-page,#design-sheets).olive .sheet{color:inherit;font-family:inherit;background:none;border:0} :is(#clay-page,#design-sheets).olive .card{background:none;border-radius:0;transition:none} /* A BUTTON IS NOT A BUTTON-SHAPED BOX. Anything clickable is a real