/* ========================================================================== assets/slab.css — floating panel material. (Slab System v1.0) WHY THIS EXISTS ALONGSIDE glass.css, NOT INSTEAD OF IT ------------------------------------------------------ The reference image gets its depth a different way from the glass layer, and measuring the two side by side shows why that matters: my glass panel #1C2026 over base #0E1218 -> 1.15 : 1 a slab #242933 over base #0E1218 -> 1.29 : 1 A 6% white tint over a dark backdrop is barely a step. The panel edge was doing almost all the work, which is why panels read as regions of the page rather than as objects on top of it. The reference panels are OPAQUE and clearly lighter than what is behind them. Depth comes from value and shadow, not from blur. That is also why they survive being photographed at an angle — there is nothing to see through. So: glass stays where something is genuinely behind it and moving — the navigation, the ambient background, the overlay chrome. Slabs are for content panels, which is what the reference is showing. EVERY VALUE HERE WAS MEASURED ----------------------------- dark flow #242933 step 1.29 body 13.71 muted 5.87 AA dark raised #2A2F3A step 1.40 body 12.60 muted 5.40 AA light flow #FFFFFF step 1.11 body 17.98 muted 5.52 AA ========================================================================== */ :root { /* The material. Opaque on purpose. */ --s-slab: #242933; --s-slab-raised: #2A2F3A; --s-slab-sunken: #1B1F27; /* The top edge catches light; the bottom does not. One-directional, like a real object lit from above — a uniform ring around every panel is what makes an interface look drawn rather than lit. */ --s-edge-top: rgba(255, 255, 255, .07); --s-edge: rgba(255, 255, 255, .04); /* Three shadows, not one. A tight contact shadow anchors the panel, a mid shadow gives it thickness, a wide soft one puts it above the page. A single large blur reads as fog. */ --s-lift-1: 0 1px 2px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.28); --s-lift-2: 0 1px 2px rgba(0,0,0,.38), 0 6px 16px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.30); --s-lift-3: 0 2px 4px rgba(0,0,0,.44), 0 12px 32px rgba(0,0,0,.40), 0 36px 88px rgba(0,0,0,.38); /* Dense panels. The reference runs tighter than the platform default because a properties panel is scanned, not read. */ --s-row-h: 26px; --s-row-pad: 10px; --s-gutter: 12px; --s-radius: 10px; } html[data-theme="light"] { --s-slab: #FFFFFF; --s-slab-raised: #FFFFFF; --s-slab-sunken: #F4F6FA; --s-edge-top: rgba(255, 255, 255, .9); --s-edge: rgba(18, 23, 31, .08); --s-lift-1: 0 1px 2px rgba(18,23,31,.06), 0 2px 6px rgba(18,23,31,.05); --s-lift-2: 0 1px 2px rgba(18,23,31,.07), 0 6px 16px rgba(18,23,31,.08), 0 18px 44px rgba(18,23,31,.07); --s-lift-3: 0 2px 4px rgba(18,23,31,.09), 0 12px 32px rgba(18,23,31,.11), 0 36px 88px rgba(18,23,31,.10); } /* -------------------------------------------------------------------------- 1 · THE SLAB Detached on purpose. In the reference every panel has space around it — that separation is most of what makes them read as objects rather than as regions of one surface. -------------------------------------------------------------------------- */ .slab { position: relative; background: var(--s-slab); border-radius: var(--s-radius); box-shadow: var(--s-lift-2); /* No border. The shadow and the value step do the separating; adding an outline on top makes it look drawn rather than lit. */ border: 0; } /* The lit top edge. inset so it costs no element and cannot be confused with a focus ring. */ .slab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 var(--s-edge-top); } .slab-flat { box-shadow: var(--s-lift-1); } .slab-float { background: var(--s-slab-raised); box-shadow: var(--s-lift-3); } .slab-sunken { background: var(--s-slab-sunken); box-shadow: none; } /* -------------------------------------------------------------------------- 2 · PANEL HEADER Small, uppercase, low contrast — a label for the panel, not a heading competing with the content inside it. -------------------------------------------------------------------------- */ .slab-h { display: flex; align-items: center; gap: 8px; padding: 8px var(--s-row-pad); font: 600 var(--k-text-xs, 12px)/1 var(--k-font-body, system-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--k-text-subtle, #5E697F); } .slab-h .ic { width: 13px; height: 13px; } /* A collapse caret, as in the reference's "▾ Transform". */ .slab-h[data-open] { cursor: pointer; } .slab-h[data-open]::before { content: ""; width: 0; height: 0; flex: 0 0 auto; border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(90deg); transition: transform var(--m-fast, 150ms) var(--m-out, ease); } .slab-h[data-open="0"]::before { transform: none; } /* -------------------------------------------------------------------------- 3 · KEY / VALUE ROWS The Transform panel pattern: label left, value right, monospaced and right-aligned so digits line up in a column. That alignment is the whole reason the reference is readable at that density — an engineer compares 26.3 against 7.97 vertically, and proportional digits make that impossible. -------------------------------------------------------------------------- */ .slab-rows { padding: 2px 0 6px; } .slab-row { display: flex; align-items: center; gap: var(--s-gutter); min-height: var(--s-row-h); padding: 0 var(--s-row-pad); font: 400 var(--k-text-sm, 13px)/1 var(--k-font-body, system-ui); color: var(--k-text-muted, #9AA5B9); } .slab-row:hover { background: rgba(255, 255, 255, .03); } html[data-theme="light"] .slab-row:hover { background: rgba(18, 23, 31, .03); } .slab-k { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .slab-v { flex: 0 0 auto; font-family: var(--k-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; /* the digits must line up */ color: var(--k-text, #F6F8FB); text-align: right; } /* An indented sub-row, as in Location > X / Y / Z. */ .slab-row-sub .slab-k { padding-left: 14px; opacity: .85; } /* An editable value. Reads as a field only on hover, so a dense panel is not a wall of boxes. */ .slab-v-edit { min-width: 76px; padding: 2px 7px; border: 1px solid transparent; border-radius: var(--k-radius-xs, 4px); background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; text-align: right; } .slab-v-edit:hover { border-color: var(--s-edge); background: var(--s-slab-sunken); } .slab-v-edit:focus { outline: none; border-color: var(--g-accent, #22D3EE); background: var(--s-slab-sunken); } .slab-v-edit:focus-visible { outline: 2px solid var(--g-accent, #22D3EE); outline-offset: 1px; } /* -------------------------------------------------------------------------- 4 · SEGMENTED BUTTON ROW The Align panel's X | Y | Z | All. One control, several choices, equal widths — so the eye reads it as a set rather than four loose buttons. -------------------------------------------------------------------------- */ .slab-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; margin: 3px var(--s-row-pad) 6px; } .slab-seg > button { min-height: 24px; padding: 0 6px; border: 1px solid var(--s-edge); border-radius: var(--k-radius-xs, 4px); background: var(--s-slab-sunken); color: var(--k-text-muted, #9AA5B9); font: 500 var(--k-text-xs, 12px)/1 var(--k-font-body, system-ui); cursor: pointer; transition: background var(--m-instant, 90ms) var(--m-out, ease), color var(--m-instant, 90ms) var(--m-out, ease); } .slab-seg > button:hover { background: var(--s-slab-raised); color: var(--k-text, #F6F8FB); /* paired — never a fill without its text */ } .slab-seg > button[aria-pressed="true"] { background: var(--g-accent, #22D3EE); color: var(--g-on-accent, #080C12); border-color: transparent; } .slab-seg > button:focus-visible { outline: 2px solid var(--g-accent, #22D3EE); outline-offset: 1px; } /* -------------------------------------------------------------------------- 5 · DIVIDERS Barely there. In the reference the groups are separated by value, not by lines — a visible rule between every group is what makes a dense panel look like a spreadsheet. -------------------------------------------------------------------------- */ .slab-div { height: 1px; margin: 5px var(--s-row-pad); background: var(--s-edge); border: 0; } /* -------------------------------------------------------------------------- 6 · FLOATING GROUP Panels sit apart from each other and from the edge. This is the spacing that makes them read as separate objects. -------------------------------------------------------------------------- */ .slab-stack { display: flex; flex-direction: column; gap: var(--k-space-3, 12px); padding: var(--k-space-3, 12px); } /* -------------------------------------------------------------------------- 7 · ACCESSIBILITY The slab is opaque, so forced-colors needs far less undoing than glass did — but the shadow carries the separation, and shadows are dropped in forced colours, so a border has to take over. -------------------------------------------------------------------------- */ @media (forced-colors: active) { .slab, .slab-float, .slab-flat { background: Canvas; border: 1px solid CanvasText; box-shadow: none; } .slab::before { display: none; } .slab-seg > button { border: 1px solid CanvasText; } .slab-seg > button[aria-pressed="true"] { background: Highlight; color: HighlightText; } } @media (prefers-reduced-motion: reduce) { .slab-h[data-open]::before, .slab-seg > button, .slab-v-edit { transition: none !important; } } @media (pointer: coarse) { .slab-row { min-height: var(--k-tap-min, 44px); } .slab-seg > button { min-height: 34px; } } @media print { .slab, .slab-float, .slab-flat { background: none !important; box-shadow: none !important; border: 1px solid #999; } .slab::before { display: none; } }