/* ============================================================================ THE SKIN CONTRACT · Todomodo / Slosar design system ---------------------------------------------------------------------------- One truth, two halves. contract.css draws the components, and carries the BUILT-IN skin. skins/*.css supply values only. Never draw anything. The built-in skin (the :root block below) is "Plex" -- the calm one the Lab dashboard and the work queue already use. It lives here rather than in skins/plex.css so there is exactly one copy of those values: a file loaded with no skin still renders correctly, and there is nothing to drift. This is the WinAmp arrangement: the player owns the behaviour, the skin owns the look. A skin that has to add a rule to work is a skin that has found a hole in this file -- fix the hole, do not patch the skin. ── WHAT A SKIN MAY CHANGE ──────────────────────────────────────────────── Every --ds-* custom property declared in :root below. Colour, type, corner geometry, density, depth, motion duration. That is the whole surface area. ── WHAT A SKIN MAY NEVER CHANGE ────────────────────────────────────────── The invariants block near the bottom of this file. They are accessibility floors, not taste: · 44px minimum on anything you tap (motor accessibility) · a visible keyboard focus ring (never `outline:none`) · honouring prefers-reduced-motion (motion is optional, always) · 16px minimum body text, no `user-scalable=no` · a scrim floor under translucent material (added with .ds-mat) · a lit .ds-node differs by stroke weight, not only by colour (v0.3) · a .ds-portlet cannot resize or paint outside the host (v0.3) · a .ds-gauge cap mark cannot be deleted by a skin (v0.6) · an alert's severity is a WORD, not only a colour (v0.6) ── THE THIRD AXIS ──────────────────────────────────────────────────────── v0.3 adds `data-mood`: six identity hues, 60 degrees apart, that say what register a surface is in -- alert level, health, priority, semantic group. It composes with data-skin and data-theme and it is NOT a skin. See the MOOD block below, and GRAMMAR.md for what each mood means. A skin cannot opt out of these: they sit in the first-declared @layer and are !important, which is the one cascade arrangement no ordinary stylesheet can beat. See the block at the bottom -- the first attempt got this wrong and a hostile-skin test caught it. Appearance is configurable, access is not. ── THEMES ──────────────────────────────────────────────────────────────── Every skin ships light AND dark, in three blocks, because the viewer has three states and only two of them are stamped on the root element: :root the complete light palette :root:not([data-theme=light]) @media dark, when the OS says dark :root[data-theme=dark] dark, when the user says dark A token defined in only one of those renders one theme's ink on the other theme's ground. ========================================================================== */ /* Layer order, declared before any rule so it cannot depend on link order. ds-invariants is FIRST because for !important declarations the earlier layer wins -- the accessibility floors outrank the mood, which outranks a skin. */ @layer ds-invariants, ds-mood; :root{ /* ---- ground & surfaces -------------------------------------------------- */ --ds-ground:#EDF0F4; --ds-surface:#FFFFFF; --ds-surface-2:#F6F8FA; /* ---- ink ---------------------------------------------------------------- */ --ds-ink:#15181E; --ds-ink-2:#4E5765; --ds-ink-3:#646C77; /* 5.31:1 on surface, 4.65:1 on GROUND. #6E7783 was 3.97 on ground */ /* ---- lines -------------------------------------------------------------- */ --ds-line:#D6DCE4; --ds-line-2:#E7ECF1; /* ---- accent: identity. NOT state. --------------------------------------- */ --ds-accent:#1B5FA6; --ds-accent-ink:#FFFFFF; --ds-accent-soft:#E3EDF8; /* ---- accent 2: the counterpoint. Both todomodo pages are two-accent designs -- an orange frame against a blue panel field -- and one accent token cannot express that. Still identity, still NOT state. -- */ --ds-accent-2:#6B4E93; --ds-accent-2-soft:#EDE7F6; /* ink that reads on ANY saturated fill in this skin: the accents and the four state colours. One token, not five, because within a single skin the state palette is consistent in luminance -- Plex's states are all dark so white reads on all of them; todomodo's are all bright so black does. A skin whose fills disagree in luminance has a palette problem, not a token problem. */ --ds-on-fill:var(--ds-accent-ink); /* ---- state: semantic, and deliberately separate from the accent, so a skin can change its identity colour without changing what "critical" looks like ------------------------------------------------------- */ --ds-ok:#166B47; --ds-ok-soft:#E2F0E9; --ds-warn:#9A3F12; --ds-warn-soft:#F8E9DF; --ds-crit:#A32020; --ds-crit-soft:#F9E3E3; --ds-idle:#0F4C81; --ds-idle-soft:#E1EBF5; /* ---- type --------------------------------------------------------------- */ --ds-font-body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --ds-font-display:var(--ds-font-body); --ds-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ds-text:16px; --ds-text-sm:14px; --ds-lh:1.55; --ds-display-weight:700; --ds-display-spacing:-.015em; --ds-display-transform:none; /* labels: the eyebrow / column-head / chip voice */ --ds-label-transform:uppercase; --ds-label-spacing:.12em; --ds-label-weight:600; --ds-label-size:11.5px; /* ---- geometry ----------------------------------------------------------- */ --ds-radius:10px; --ds-radius-sm:6px; --ds-radius-pill:999px; --ds-border:1px; /* --ds-elbow is the asymmetric corner: 0 on three corners, large on one. A rounded-rectangle skin sets it to var(--ds-radius) and nothing moves. */ --ds-elbow:var(--ds-radius); --ds-rail:0px; /* width of a left colour rail on a card; 0 = none */ /* ---- density ------------------------------------------------------------ */ --ds-pad:16px; --ds-pad-tight:11px; --ds-gap:12px; /* THE PAGE MEASURE -- v0.7, and it is Lab Manager's ask 5, which was not "change 940 to 1200" but "is this a contract value at all". It is. They measured four surfaces on one design language at a 1400px viewport and got four measures -- dashboard 1200, feature index 1040, queue 720, this console 940 -- so the reading column jumped 130px every time a reader crossed between them. Each number was locally reasonable when it was written and nobody could see the disagreement until the four were opened side by side, which is exactly the class of thing a token fixes and a convention does not. A DEFAULT, not a law: a surface with a real reason to be narrower or wider says so in one declaration on its wrapper and is legible about it. What the token removes is the surface that differs by accident. 16px minimum inline padding pairs with it, because --ds-chrome-bleed defaults to --ds-pad and the chrome's full bleed only cancels exactly when the wrapper pads at the same number. See .ds-page. */ --ds-measure:1200px; /* ---- depth -------------------------------------------------------------- */ --ds-shadow:0 1px 2px rgba(15,25,40,.06),0 4px 14px rgba(15,25,40,.05); /* the emphasis halo. `none` by default: a glow is a todomodo idea, not a universal one, and a skin that does not want one must not have to undo it. */ --ds-glow:none; /* ---- material ---------------------------------------------------------- .ds-mat draws translucency; these values dial it. The defaults below are FLAT -- alpha 1, blur 0, scrim 1 -- so on Plex, console and instrument a .ds-mat renders what .ds-card renders. Nothing moves for a skin that does not opt in. ------------------------------------------------------------ */ --ds-mat-tint:var(--ds-surface); /* the colour of the glass itself */ --ds-mat-scrim:1; /* 0-1 opacity of that tint. FLOORED at .55. */ --ds-mat-blur:0px; /* backdrop blur radius */ --ds-mat-sat:1; /* backdrop saturation multiplier */ --ds-mat-edge:var(--ds-line); /* ---- data palette: categorical, NOT semantic --------------------------- The four educational simulators each carry five or six distinct hues used to tell things APART, not to say good or bad -- gol's mint/aqua/violet/ gold/danger, core's sky/green/amber/pink/lime. The four state colours cannot do that job: a series is not "warn". These are for series, legends, traces and categories, and a skin owns all eight. ---------------------- */ --ds-d1:oklch(0.50 0.110 250); /* #2A669F */ --ds-d2:oklch(0.50 0.110 295); /* #68559B */ --ds-d3:oklch(0.50 0.110 340); /* #8C4877 */ --ds-d4:oklch(0.50 0.110 25); /* #984742 */ --ds-d5:oklch(0.50 0.110 70); /* #8A5600 */ --ds-d6:oklch(0.50 0.110 115); /* #626A09 */ --ds-d7:oklch(0.50 0.110 160); /* #0B764D */ --ds-d8:oklch(0.50 0.110 205); /* #007481 */ /* ---- controls ---------------------------------------------------------- Sizing for the interactive vocabulary lifted from the simulators. Density is a skin's business; the 44px tap floor is not, and is not a token. ---- */ --ds-track:6px; /* slider rail thickness */ --ds-thumb:22px; /* slider handle */ --ds-ctl-gap:10px; /* ---- readouts ---------------------------------------------------------- The gauge is sized to be read from across the room, which is Lab Manager's stated requirement for the one screen the lab is run from. The NUMBER is the primary element and the bar confirms it. ---------------------------- */ --ds-gauge-track:10px; /* bar thickness */ --ds-gauge-size:30px; /* the numeral. Deliberately larger than body text. */ --ds-dot-size:10px; /* ---- frame ------------------------------------------------------------- Sizing for the bar / side / cap chrome. Values only; the frame is drawn below and a skin that never uses it pays nothing. ----------------------- */ --ds-frame-gap:10px; --ds-frame-bar-h:60px; --ds-frame-foot-h:44px; --ds-frame-side-w:200px; --ds-frame-cap-w:150px; /* ---- motion ------------------------------------------------------------- */ --ds-motion:160ms; --ds-ease:cubic-bezier(.2,.6,.2,1); } :root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){ --ds-ground:#11141A; --ds-surface:#191D25; --ds-surface-2:#1F242E; --ds-ink:#E8ECF2; --ds-ink-2:#AEB8C6; --ds-ink-3:#828D9C; --ds-line:#2C333F; --ds-line-2:#242A34; --ds-accent:#79ADE8; --ds-accent-ink:#0E1319; --ds-accent-soft:#1C2A3A; --ds-accent-2:#B49BE0; --ds-accent-2-soft:#2A2338; --ds-d1:oklch(0.80 0.120 250); /* #80C3FF */ --ds-d2:oklch(0.80 0.120 295); /* #C3AEFF */ --ds-d3:oklch(0.80 0.120 340); /* #F19FD6 */ --ds-d4:oklch(0.80 0.120 25); /* #FF9E96 */ --ds-d5:oklch(0.80 0.120 70); /* #EFB062 */ --ds-d6:oklch(0.80 0.120 115); /* #BBC769 */ --ds-d7:oklch(0.80 0.120 160); /* #71D6A3 */ --ds-d8:oklch(0.80 0.120 205); /* #44D4E2 */ --ds-d1:oklch(0.80 0.120 250); /* #80C3FF */ --ds-d2:oklch(0.80 0.120 295); /* #C3AEFF */ --ds-d3:oklch(0.80 0.120 340); /* #F19FD6 */ --ds-d4:oklch(0.80 0.120 25); /* #FF9E96 */ --ds-d5:oklch(0.80 0.120 70); /* #EFB062 */ --ds-d6:oklch(0.80 0.120 115); /* #BBC769 */ --ds-d7:oklch(0.80 0.120 160); /* #71D6A3 */ --ds-d8:oklch(0.80 0.120 205); /* #44D4E2 */ --ds-ok:#63C79B; --ds-ok-soft:#16281F; --ds-warn:#E9A377; --ds-warn-soft:#33241A; --ds-crit:#F08A8A; --ds-crit-soft:#331A1A; --ds-idle:#8FC0F0; --ds-idle-soft:#182534; --ds-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3); } } :root[data-theme="dark"]{ --ds-ground:#11141A; --ds-surface:#191D25; --ds-surface-2:#1F242E; --ds-ink:#E8ECF2; --ds-ink-2:#AEB8C6; --ds-ink-3:#828D9C; --ds-line:#2C333F; --ds-line-2:#242A34; --ds-accent:#79ADE8; --ds-accent-ink:#0E1319; --ds-accent-soft:#1C2A3A; --ds-accent-2:#B49BE0; --ds-accent-2-soft:#2A2338; --ds-d1:oklch(0.80 0.120 250); /* #80C3FF */ --ds-d2:oklch(0.80 0.120 295); /* #C3AEFF */ --ds-d3:oklch(0.80 0.120 340); /* #F19FD6 */ --ds-d4:oklch(0.80 0.120 25); /* #FF9E96 */ --ds-d5:oklch(0.80 0.120 70); /* #EFB062 */ --ds-d6:oklch(0.80 0.120 115); /* #BBC769 */ --ds-d7:oklch(0.80 0.120 160); /* #71D6A3 */ --ds-d8:oklch(0.80 0.120 205); /* #44D4E2 */ --ds-ok:#63C79B; --ds-ok-soft:#16281F; --ds-warn:#E9A377; --ds-warn-soft:#33241A; --ds-crit:#F08A8A; --ds-crit-soft:#331A1A; --ds-idle:#8FC0F0; --ds-idle-soft:#182534; --ds-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3); } /* ========================================================================== MOOD -- the third axis, and the one Tony asked for by drawing a wheel -------------------------------------------------------------------------- WARM and COOL were shipped as two skins. They were not two skins. Diffed against each other they are the same file with the hue rotated 180 degrees, which is the definition of two positions on one wheel rather than two designs. This block is that wheel, with six positions instead of two. ── WHAT A MOOD IS ──────────────────────────────────────────────────────── A mood is the IDENTITY hue of a surface, and it carries meaning: alert level, health, priority, or plain semantic grouping. It is set at the highest level of page organisation -- the frame, the plane, the tab set -- so a reader knows what register they are in before reading a word. ── WHAT A MOOD IS NOT ──────────────────────────────────────────────────── A mood is NOT the state palette. --ds-ok / warn / crit / idle do not move when the mood does. That separation is the whole reason a page can BE in `alert` and still contain a card that is individually `ok`: the page-level hue says how the situation is, the component-level state says how that one component is. Collapse them and the page can only ever say one thing. A mood is also NOT the ground. Every mood shares the skin's ground, surface and ink -- the room does not change, only the light in it. That is what makes a mood compose with EVERY skin instead of only with its own. ── THE GEOMETRY ────────────────────────────────────────────────────────── Six hues, 60 degrees apart, anchored so that 70 is the orange the old `warm` led with and 250 is the blue `cool` led with. Both survive; they are now `active` and `survey`. Equal radius is the constraint, not a decoration. --ds-mood-c is ONE chroma for all six, so no mood is louder than another merely because sRGB happens to hold more of its hue. 0.128 at L 0.76 is the largest circle sRGB can actually contain at any single lightness -- measured, not guessed. The cost is honest and worth naming: a mood accent is slightly less saturated than the #FF9900 the todomodo pages lead with, because #FF9900 sits outside the circle that also contains a blue of equal loudness. Raise --ds-mood-c in a skin to trade the parity back for punch. ── PRECEDENCE ──────────────────────────────────────────────────────────── The attribute is doubled -- :root[data-mood][data-mood] -- which is specificity (0,3,0) and beats any skin's (0,2,0) no matter what order the stylesheets are linked in. Consumers generate their tags from a directory listing; an axis that depends on link order is an axis that breaks the first time a directory sorts differently. ========================================================================== */ :root{ /* The list, so a consumer can build a mood selector without holding a list of its own. Read it with getComputedStyle(root).getPropertyValue. Lab Manager's rule -- "no hand-written skin list survives anywhere in ~/ops" -- is the right rule, and it is the reason the NAME and the one-line MEANING of each mood are tokens too (--ds-mood-name and --ds-mood-says). A consuming tool can render the whole selector, labels and explanations included, while holding nothing that can go stale. */ --ds-version:"0.10"; --ds-moods:alert active steady inspect survey focus; /* The radii: one value each, shared by all six positions -- that is the "equidistant" in the sketch. They are per THEME because light and dark are different gamuts: 0.128 is the largest circle sRGB holds at L 0.76, and 0.082 the largest it holds at the L a light accent has to sit at. Measured against every hue the six moods can produce, not guessed. */ --ds-mood-c:.082; /* accent chroma */ --ds-mood-c2:.075; /* counterpoint chroma */ --ds-mood-cd:.080; /* categorical ramp */ } /* The six positions. Two numbers and a name each -- adding a seventh mood is this line, and nothing else in the system. */ :root[data-mood="alert"] {--ds-mood-h:10; --ds-mood-h2:130; --ds-mood-name:"Alert"; --ds-mood-says:"Something is wrong now and needs a person.";} :root[data-mood="active"] {--ds-mood-h:70; --ds-mood-h2:190; --ds-mood-name:"Active"; --ds-mood-says:"Work is in flight on this surface.";} :root[data-mood="steady"] {--ds-mood-h:130; --ds-mood-h2:250; --ds-mood-name:"Steady"; --ds-mood-says:"Healthy, and running unattended.";} :root[data-mood="inspect"]{--ds-mood-h:190; --ds-mood-h2:310; --ds-mood-name:"Inspect"; --ds-mood-says:"One thing, opened up and examined.";} :root[data-mood="survey"] {--ds-mood-h:250; --ds-mood-h2:310; --ds-mood-name:"Survey"; --ds-mood-says:"Reading, reference and browsing.";} :root[data-mood="focus"] {--ds-mood-h:310; --ds-mood-h2:70; --ds-mood-name:"Focus"; --ds-mood-says:"A single task, everything else out of the way.";} /* The counterpoint sits 120 degrees round, in whichever direction misses the alert wedge (340-40), so no mood accidentally grows a red second accent and reads as a warning it is not. `survey` is the one hand-set pair: blue with gol.html's violet, kept because that pairing is read off a real page. */ /* ---- The two lightness registers ------------------------------------------ Declared on plain :root, NOT gated on [data-mood], so that a mood selector can draw a swatch for a mood the page is not currently in -- each swatch substitutes its own hue and needs these to resolve regardless. Verified: accent on white and white on accent both clear 4.5:1 at every one of the six hues, lowest 5.27. The ramp clears 3:1 at all 24 hues it can produce, lowest 5.26. In dark, accent on surface clears 7.84 and the ink on a filled accent clears 8.41. */ :root{ /* .48, not .52. A mood accent has to clear 4.5:1 on the DARKEST ground any skin ships -- instrument's #DFE1E4 -- not merely on white, because the plane chrome and the tab underline sit on the ground. At .52 the accent measured 4.01:1 there. The full sweep in the console is what found it. */ --ds-mood-l:.48; --ds-mood-soft-l:.93; --ds-mood-soft-c:.028; --ds-mood-on:#FFFFFF; } :root:not([data-theme="light"]){ @media (prefers-color-scheme: dark){ --ds-mood-l:.76; --ds-mood-c:.128; --ds-mood-c2:.108; --ds-mood-cd:.120; --ds-mood-soft-l:.27; --ds-mood-soft-c:.040; --ds-mood-on:oklch(.17 .022 var(--ds-mood-h,255)); } } :root[data-theme="dark"]{ --ds-mood-l:.76; --ds-mood-c:.128; --ds-mood-c2:.108; --ds-mood-cd:.120; --ds-mood-soft-l:.27; --ds-mood-soft-c:.040; --ds-mood-on:oklch(.17 .022 var(--ds-mood-h,255)); } /* ---- The formulas. Written once; every mood is the same eleven lines with one number substituted, which is the point. ── WHY THIS IS IN A LAYER, WITH !important ─────────────────────────────── The first attempt used a doubled attribute selector -- :root[data-mood] [data-mood], specificity (0,3,0) -- on the theory that it would outrank any skin. It did not. A skin's dark block is `:root[data-skin=liquid][data-theme=dark]`, ALSO (0,3,0), and it is linked after the contract, so the skin won on source order and every mood rendered as graphite. The media-query variant is (0,4,0) and would have beaten a tripled attribute too. Counting attributes is a race, not a rule. The cascade arrangement that is actually decisive is the one the invariants already use, because for !important declarations the EARLIER layer wins and an unlayered !important is the weakest important there is: skin, normal loses (important beats normal) skin, !important loses (unlayered important loses to any layer) skin in its own layer loses (ds-mood is declared before it) ds-invariants WINS (declared first, and stays supreme) So a skin cannot take the identity tokens back, which is the intended semantics rather than a side effect: identity belongs to the mood, and a skin that wants to set an accent is a skin doing the mood's job. The two composite tokens keep their geometry skinnable -- a skin still sets --ds-glow-blur and --ds-glow-y and only the COLOUR comes from the mood. -- */ @layer ds-mood{ :root[data-mood]{ --ds-accent:oklch(var(--ds-mood-l) var(--ds-mood-c) var(--ds-mood-h)) !important; --ds-accent-ink:var(--ds-mood-on) !important; --ds-accent-soft:oklch(var(--ds-mood-soft-l) var(--ds-mood-soft-c) var(--ds-mood-h)) !important; --ds-accent-2:oklch(var(--ds-mood-l) var(--ds-mood-c2) var(--ds-mood-h2)) !important; --ds-accent-2-soft:oklch(var(--ds-mood-soft-l) var(--ds-mood-soft-c) var(--ds-mood-h2)) !important; --ds-on-fill:var(--ds-mood-on) !important; --ds-d1:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 0)) !important; --ds-d2:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 45)) !important; --ds-d3:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 90)) !important; --ds-d4:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 135)) !important; --ds-d5:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 180)) !important; --ds-d6:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 225)) !important; --ds-d7:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 270)) !important; --ds-d8:oklch(var(--ds-mood-l) var(--ds-mood-cd) calc(var(--ds-mood-h) + 315)) !important; --ds-glow:0 var(--ds-glow-y,3px) var(--ds-glow-blur,14px) oklch(var(--ds-mood-l) var(--ds-mood-c) var(--ds-mood-h) / var(--ds-glow-a,.42)) !important; --ds-mat-edge:oklch(var(--ds-mood-l) var(--ds-mood-c) var(--ds-mood-h) / .26) !important; } } /* ========================================================================== COMPONENTS -- these read tokens and are never overridden by a skin ========================================================================== */ *{box-sizing:border-box;} body{ margin:0; background:var(--ds-ground); color:var(--ds-ink); font-family:var(--ds-font-body); font-size:var(--ds-text); line-height:var(--ds-lh); -webkit-text-size-adjust:100%; } .ds-display{ font-family:var(--ds-font-display); font-weight:var(--ds-display-weight); letter-spacing:var(--ds-display-spacing); text-transform:var(--ds-display-transform); text-wrap:balance; margin:0; } .ds-label{ font-family:var(--ds-font-mono); font-size:var(--ds-label-size); font-weight:var(--ds-label-weight); letter-spacing:var(--ds-label-spacing); text-transform:var(--ds-label-transform); color:var(--ds-ink-3); } /* -- card ---------------------------------------------------------------- */ .ds-card{ background:var(--ds-surface); border:var(--ds-border) solid var(--ds-line); border-radius:var(--ds-elbow) var(--ds-radius) var(--ds-radius) var(--ds-radius); box-shadow:var(--ds-shadow); border-left-width:calc(var(--ds-border) + var(--ds-rail)); overflow:hidden; } .ds-card[data-state="ok"]{border-left-color:var(--ds-ok);} .ds-card[data-state="warn"]{border-left-color:var(--ds-warn);} .ds-card[data-state="crit"]{border-left-color:var(--ds-crit);} /* A FOLDED CARD DOES NOT STRETCH, v0.7, and it is the first of the two host requirements Lab Manager paid for and asked us to write down. It is written down HERE, in the component, because the host should never have had to know. A grid stretches its items to the row height. A closed
has nothing to fill that height with, so the moment two cards share a row and one of them is folded -- which is most of the time -- the folded one draws its state rail down the side of nothing. They measured a closed Network card at 622px. Only the FOLDED case is exempted. Open cards still stretch, so a row of open cards keeps its flush bottom edge, which is the reason `stretch` is the grid default in the first place. And only details.ds-card matches: a card that is a plain
has content at its own height and is not this bug. */ details.ds-card:not([open]){align-self:start;} /* WRAPS since v0.6, and the reason is U1 below: a card head now routinely carries a name, a freshness line and a state chip, which is more than fits across a 430px phone card. A head with two children never wraps and is unchanged; one that would have overflowed now folds instead of clipping. Same fix, same reason, as .ds-row in v0.4. */ .ds-card-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:var(--ds-pad-tight) var(--ds-pad); border-bottom:var(--ds-border) solid var(--ds-line-2); background:var(--ds-surface-2); } .ds-card-name{ font-family:var(--ds-font-mono); font-size:var(--ds-label-size); font-weight:var(--ds-label-weight); letter-spacing:var(--ds-label-spacing); text-transform:var(--ds-label-transform); color:var(--ds-ink-2); margin-right:auto; } .ds-card-body{padding:var(--ds-pad-tight) var(--ds-pad);} /* -- row: label on the left, value on the right, digits aligned ----------- */ .ds-row{ display:flex; align-items:baseline; gap:var(--ds-gap); padding:7px 0; border-bottom:var(--ds-border) solid var(--ds-line-2); } .ds-row:last-child{border-bottom:none;} .ds-row dt{color:var(--ds-ink-2); font-size:var(--ds-text-sm); margin:0;} .ds-row dd{ margin:0 0 0 auto; font-family:var(--ds-font-mono); font-size:var(--ds-text-sm); font-variant-numeric:tabular-nums; color:var(--ds-ink); font-weight:500; } /* -- chip: state encoded in form as well as in the word ------------------- */ .ds-chip{ display:inline-block; font-family:var(--ds-font-mono); font-size:var(--ds-label-size); font-weight:var(--ds-label-weight); letter-spacing:var(--ds-label-spacing); text-transform:var(--ds-label-transform); padding:3px 9px; border-radius:var(--ds-radius-pill); white-space:nowrap; color:var(--ds-idle); background:var(--ds-idle-soft); } .ds-chip[data-state="ok"]{color:var(--ds-ok); background:var(--ds-ok-soft);} .ds-chip[data-state="warn"]{color:var(--ds-warn); background:var(--ds-warn-soft);} .ds-chip[data-state="crit"]{color:var(--ds-crit); background:var(--ds-crit-soft);} /* -- button --------------------------------------------------------------- */ .ds-btn{ font-family:var(--ds-font-body); font-size:var(--ds-text-sm); font-weight:500; line-height:1; cursor:pointer; padding:12px 15px; border-radius:var(--ds-radius-sm); border:var(--ds-border) solid var(--ds-line); background:var(--ds-surface); color:var(--ds-ink-2); transition:border-color var(--ds-motion) var(--ds-ease), background var(--ds-motion) var(--ds-ease); } .ds-btn:hover:not(:disabled){border-color:var(--ds-ink-3);} .ds-btn[aria-pressed="true"],.ds-btn.is-on{ background:var(--ds-accent); color:var(--ds-accent-ink); border-color:transparent; font-weight:600; } .ds-btn:disabled{opacity:.4; cursor:default;} /* AN IRREVERSIBLE ACTION IS DECLARED ON THE CONTROL -- v0.10, ITM W31, Tony's ruling. Not a state: the button is not in a crit condition, the thing it does cannot be undone. A VARIANT of .ds-btn, the way .ds-exit[data-rel] declares a relation rather than being a second component -- the reader's question at the control is still "do it now", and the answer to "can I take it back" is what the colour carries. Found on the deployment plane, where "Deploy to production" and "Deploy preview" rendered identically and the plane had to style one from --ds-crit locally. data-armed is the host's press-twice confirmation: one press arms, the second fires, and no modal -- a modal blocks every event on the page. The ARMED LOOK is the contract's, so "press again" reads the same on every plane; the timer and the label swap are the host's. */ .ds-btn[data-irreversible]{border-color:var(--ds-crit); color:var(--ds-crit);} .ds-btn[data-irreversible]:hover:not(:disabled){border-color:var(--ds-crit);} .ds-btn[data-irreversible][data-armed]{ background:var(--ds-crit); color:var(--ds-on-fill); border-color:var(--ds-crit); font-weight:600; } /* -- row sub-line: a second, quieter line under a row ---------------------- Lab Manager: several dashboard cards "drop context because there is nowhere to put it", and a long task title "is currently just long". Both are the same gap. .ds-row now wraps, so a third child at full width falls to its own line. A two-child row -- every row that exists today -- never wraps and is unchanged. What DOES change: a row whose label and value together overflow now wraps instead of squeezing. That is the improvement they asked for. */ .ds-row{flex-wrap:wrap;} .ds-row-sub{ flex:0 0 100%; margin:2px 0 0; font-size:var(--ds-text-sm); line-height:1.4; color:var(--ds-ink-3); } /* -- dot: state as a mark, for a card header ------------------------------ The third spelling of the state vocabulary Lab Manager is currently writing three ways (.status-dot / .tag / .gauge-fill). All three collapse onto ok | warn | crit | idle, which is what the contract has always used. A dot is colour and nothing else, so it is NEVER the only carrier of a state: give it an accessible name, and keep the word somewhere on the card. The ring is what keeps it visible on a ground that happens to match it. */ .ds-dot{ display:inline-block; flex:none; width:var(--ds-dot-size); height:var(--ds-dot-size); border-radius:var(--ds-radius-pill); background:var(--ds-idle); box-shadow:0 0 0 2px var(--ds-surface); } .ds-dot[data-state="ok"]{background:var(--ds-ok);} .ds-dot[data-state="warn"]{background:var(--ds-warn);} .ds-dot[data-state="crit"]{background:var(--ds-crit);} /* -- gauge: a number, confirmed by a bar ----------------------------------- Used for CPU, memory and disk. The value is set large and in tabular figures; the bar restates it. Remove the bar entirely and the reading is unchanged, which is the test for whether a readout is colour-only. */ .ds-gauge{display:block;} .ds-gauge-head{ display:flex; align-items:baseline; gap:var(--ds-gap); margin-bottom:6px; } .ds-gauge-label{ font-family:var(--ds-font-mono); font-size:var(--ds-label-size); font-weight:var(--ds-label-weight); letter-spacing:var(--ds-label-spacing); text-transform:var(--ds-label-transform); color:var(--ds-ink-2); } .ds-gauge-value{ margin-left:auto; font-family:var(--ds-font-mono); font-size:var(--ds-gauge-size); font-variant-numeric:tabular-nums; font-weight:600; line-height:1; color:var(--ds-ink); } .ds-gauge-unit{font-size:.5em; color:var(--ds-ink-3); margin-left:1px;} .ds-gauge-track{ height:var(--ds-gauge-track); border-radius:var(--ds-radius-pill); background:var(--ds-line-2); overflow:hidden; } .ds-gauge-fill{ height:100%; border-radius:inherit; background:var(--ds-idle); transition:width var(--ds-motion) var(--ds-ease); } .ds-gauge[data-state="ok"] .ds-gauge-fill{background:var(--ds-ok);} .ds-gauge[data-state="warn"] .ds-gauge-fill{background:var(--ds-warn);} .ds-gauge[data-state="crit"] .ds-gauge-fill{background:var(--ds-crit);} /* -- gauge threshold: draw the cap, and the level that means it is not holding ----------------------------------------------------------------- v0.6, from Lab Manager, and the case that names it is the good one: journald is capped at 1 GB and their alert fires at 1.25x, because journald FILLS to its cap and vacuums back. Sitting at 100% is journald working correctly -- and an unmarked bar at 100% says the opposite. So anything with a SELF-ENFORCED limit draws the limit, and draws the level that means the limit is not holding. That is most quotas. Position comes from --ds-at, a percentage along the track, because CSS cannot read a number out of an attribute. The mark is ink with a surface ring -- the same trick .ds-dot uses -- so it reads over the filled part of the track and over the empty part. NEVER the only carrier: .ds-gauge-scale states the same numbers in words underneath, which is the rule the gauge already passes for its bar. */ .ds-gauge-track{position:relative;} /* Overhang needs the clip lifted, and only for a track that has a mark, so nothing moves on the gauges that do not. */ .ds-gauge-track:has(.ds-gauge-mark){overflow:visible;} .ds-gauge-mark{ position:absolute; top:-3px; bottom:-3px; left:clamp(1px, var(--ds-at,100%), calc(100% - 1px)); width:2px; margin-left:-1px; border-radius:1px; background:var(--ds-ink); box-shadow:0 0 0 1px var(--ds-surface); } /* The cap is a fact about the system. The alert level is a judgement about when the fact has stopped being true, so it is heavier and it is crit. */ .ds-gauge-mark[data-kind="alert"]{ width:3px; margin-left:-1.5px; background:var(--ds-crit); } .ds-gauge-scale{ display:flex; flex-wrap:wrap; gap:4px var(--ds-gap); margin:6px 0 0; font-family:var(--ds-font-mono); font-size:var(--ds-label-size); color:var(--ds-ink-3); } .ds-gauge-scale > *{display:inline-flex; align-items:center; gap:6px;} .ds-gauge-scale > *::before{ content:""; flex:none; width:10px; height:2px; background:var(--ds-ink); } .ds-gauge-scale > [data-kind="alert"]::before{height:3px; background:var(--ds-crit);} /* -- nodata: absent on purpose, not broken -------------------------------- Three of the lab's cards read a remote box over ssh and can be absent entirely. Lab Manager: "no data is a real, frequent state and needs to look deliberate rather than broken." So it is drawn deliberately -- a dashed edge reads as a placeholder rather than a failure -- and it is idle, NEVER crit. An optional box being unreachable is not an emergency, and colouring it like one trains the eye to ignore real ones. */ .ds-nodata{ display:flex; align-items:center; gap:10px; padding:var(--ds-pad-tight) var(--ds-pad); border:var(--ds-border) dashed var(--ds-line); border-radius:var(--ds-radius-sm); background:var(--ds-surface-2); color:var(--ds-ink-3); font-size:var(--ds-text-sm); } .ds-nodata::before{ content:"\2014"; /* the em dash they already use for null */ font-family:var(--ds-font-mono); color:var(--ds-idle); font-weight:600; } /* ========================================================================== SLOT -- a named position in a set that is deliberately still empty -------------------------------------------------------------------------- v0.8. `.ds-nodata` says THERE IS NO DATA HERE AND THAT IS NORMAL. A slot says something stronger and more useful: THIS SET HAS A PLACE FOR ONE MORE, HERE IS WHERE IT GOES, AND HERE IS WHAT IT WILL BE CALLED. Absence with an identity, which is a different fact from absence. From slosars.me, where Tony asked for "a clear border where additional public pages go, ghost in holding spot for John Fox Slosar". The same shape exists on three other surfaces already: the deployment plane that is not built, a rack position with nothing in it, an ID project that is staged and not started. Every one of them had been drawn as prose or not drawn at all. Why it is not `.ds-realm[data-state="planned"]`: that is a REALM, a frame that owns cards and is headed by a device. A slot owns nothing. It is one position, and its whole content is the name of what is coming. DASHED, like .ds-nodata, because a dashed edge reads as a placeholder rather than a failure. NEVER a state colour: an empty position is not a condition, and colouring it like one trains the eye to discount the real ones. The word comes from the attribute, so the label cannot disagree with the markup -- same rule as .ds-alert's severity. */ .ds-slot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:52px; padding:var(--ds-pad-tight) var(--ds-pad); border:var(--ds-border) dashed var(--ds-line); border-radius:var(--ds-radius-sm); background:transparent; color:var(--ds-ink-3); } .ds-slot::before{ content:attr(data-slot); font-family:var(--ds-font-mono); font-size:var(--ds-label-size); letter-spacing:var(--ds-label-spacing); text-transform:var(--ds-label-transform); color:var(--ds-idle); border:var(--ds-border) solid var(--ds-line); border-radius:999px; padding:2px 9px; } .ds-slot-name{ font-family:var(--ds-font-display); font-size:16px; color:var(--ds-ink-3); } .ds-slot-note{ margin:0; margin-inline-start:auto; font-size:var(--ds-text-sm); color:var(--ds-ink-3); } /* ========================================================================== TREE -- a hierarchy you can see the shape of -------------------------------------------------------------------------- v0.8, and rule 1 in GIZMOS.md is satisfied twice over: slosars.me needed one for a member's holdings, and Lab Manager's feature index has been a tree of features since before this contract existed, drawn by hand. IT IS NOT A TAB SET AND NOT A PLANE SWITCH. Those answer WHICH ONE AM I LOOKING AT. A tree answers WHAT IS IN HERE, AND HOW IS IT ARRANGED -- every branch is visible at once, and the shape itself is the information. That is why the connectors are drawn: a list of five links is not a tree, and the difference is the only reason to reach for this. Plain