/* ============================================================ Studio design system: core components Rules shared by every sheet and output. Values come only from tokens.css; link this file right after it: Component classes carry the c- prefix so no page class (a sheet called "plastic", say) can pick them up by accident. check_tokens.py scans this file through every page that links it, and fails any element that is both .c-plastic and .sheet. ============================================================ */ @import "ink-rules.css"; /* the pre-inked line assets (generated by tools/studio/ink_rules.py) */ /* --- Clear plastic: the frosted panel, F2 Edge-lit ---------------- Locked 30 Oct (Aaron; tokens.css, Material 2): the sleek counterweight to raw ink and concrete. A soft frost with a cool neutral cast and a faint fine grain, a white rim inked top and left, a faint deep-blue far edge inked right and bottom, squircle corners, a soft, tight shadow. No electric, no glow. It lifts a panel; what lies under it shows as soft shape. Built and measured in plastic-studies.html (build_plastic_studies.py, round 3); the 14 px panel it replaces is archived in studio-system/archive/ 2026-10-30-components-pre-redo.css. Use: class="c-plastic". It is position: relative by default so its layers stay panel-sized in normal flow; a page may set absolute or fixed to place it. Add .on-deep when the panel sits over a deep-blue field (31 Oct): the frost thins (--plastic-frost-on-deep) so paper text holds, and the white rim carries the edge (rules.md 4.3). Add .on-ink over an ink field (rules.md 3.1b; CMF round 7): the same thin frost on screen, and on paper its own premixed fill, --plastic-print-fill-on-ink. Frost always carries its edges and the contact shadow (ban 14). Deprecated: .on-4 (the smoked panel over concrete-4, which left the system on 31 Oct) is kept only so archives and cmf.html render; check_tokens.py fails it on any other page. Corners: border-radius --plastic-radius with corner-shape: squircle. corner-shape renders only in Chromium 139 and later; Safari and Firefox ignore it and draw a 22 px round corner (the edges' drawn squircle corner is then clipped to the round one). Edges: both are drawn in the ink hand by tools/studio/ink_rules.py and baked with their colour (--ink-rule-rim-lit, --ink-rule-rim-far in ink-rules.css), so they are plain images on screen and on paper. The far edge is decorative: 2.83:1 on paper and lost on a deep field; the white rim carries the edge. Grain: plastic-studies/grain-f2.png, written by build_plastic_studies.py (grain_tile, fixed seed), shown at --plastic-grain-size. Rule: a panel holds text, marks and line art only. Never a whole page section and never a sheet: on paper the panel's shadow layer is rasterised, so keep it to a panel-sized box. Screen: translucent frost + grain + backdrop blur + box-shadow; the edges are the ::after layer, drawn over the panel's edge. Print (default, no authoring): Chromium's print-to-PDF drops backdrop-filter and prints a blurred box-shadow as a flat grey rectangle. So on paper the panel's own background goes transparent and a ::before layer behind its content carries the pre-mixed opaque fill (--plastic-print-fill-on-0 / -on-deep) with the grain, and --plastic-shadow-print. Only that layer is rasterised; the panel's text stays vector and selectable. Lines under the panel are hidden on paper. Print, opt-in show-through (hero panels only): add the attribute data-plastic-show and give the panel a direct child The .c-plastic-under box clips to the panel; the page positions the inner copy of what the panel covers so it lines up (SVG art can be copied with ). On paper the copy shows, blurred like the backdrop, under the frost. check_tokens.py fails any data-plastic-show without a .c-plastic-under child. ---------------------------------------------------------------- */ .c-plastic { position: relative; /* anchors the ::before/::after layers; a page's own position wins */ box-sizing: border-box; isolation: isolate; background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-frost); -webkit-backdrop-filter: var(--plastic-backdrop); backdrop-filter: var(--plastic-backdrop); border-radius: var(--plastic-radius); corner-shape: squircle; box-shadow: var(--plastic-shadow); } .c-plastic.on-deep, .c-plastic.on-ink, .c-plastic.on-4 { /* .on-ink: over an ink field, the same thin frost; .on-4: deprecated alias */ color: var(--paper); background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-frost-on-deep); } .c-plastic::before, .c-plastic::after, .c-plastic > .c-plastic-under { corner-shape: inherit; } .c-plastic::after { /* the edges, over the panel's edge, in the ink hand */ content: ""; position: absolute; inset: 0; border-radius: inherit; /* clips the edges' far ends to the panel's corners */ background: var(--ink-rule-rim-lit) left top no-repeat, var(--ink-rule-rim-far) right bottom no-repeat; pointer-events: none; } .c-plastic[data-plastic-show] > :not(.c-plastic-under) { position: relative; } .c-plastic > .c-plastic-under { display: none; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .c-plastic > .c-plastic-under > * { /* the copy; the page sets its offset and size */ position: absolute; background: var(--paper); filter: var(--plastic-backdrop); } .c-plastic > .c-plastic-under::after { content: ""; position: absolute; inset: 0; background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-frost); } .c-plastic.on-deep > .c-plastic-under::after, .c-plastic.on-ink > .c-plastic-under::after, .c-plastic.on-4 > .c-plastic-under::after { background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-frost-on-deep); } @media print { .c-plastic { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } .c-plastic::before { /* fill + grain + shadow, behind the content; the only raster */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-print-fill-on-0); filter: var(--plastic-shadow-print); } .c-plastic.on-deep::before { background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-print-fill-on-deep); } .c-plastic.on-ink::before { /* over an ink field (CMF round 7) */ background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-print-fill-on-ink); } .c-plastic.on-4::before { /* deprecated: over concrete-4, for archives and cmf.html */ background: url("plastic-studies/grain-f2.png") 0 0 / var(--plastic-grain-size) var(--plastic-grain-size), var(--plastic-print-fill-on-4); } .c-plastic[data-plastic-show] > .c-plastic-under { display: block; } } /* --- The live button: electric fill, electric inked edge, no glow --- Aaron, 30 Oct: "the live buttons should be electric edge lit" (plastic round 2's lit Edge-lit, archived in studio-system/archive/2026-10-30-plastic-studies-round2.html); then, 31 Oct, CMF round 7: "the glow effect on the live button can come off". Nothing in the system glows (ban 7, no exception; rules.md 5.3). The glow version is archived in studio-system/archive/2026-10-31-components-pre-r7.css and 2026-10-31-live-button-pre-r7/. Use: class="c-button-live" on the one main action in a view (an or