/* =========================================================== Thesis A++ — Calm Dense, compressed Same vocabulary as A, with the volume turned down. Activate by adding [data-density="dense"] to (or to ), and by loading this file AFTER tokens/a.css. What changes: · Row height 32 → 28 px (matches C-instrument compact) · Body type 14 → 13 px (heading scale -1 px) · Spacing scale tightens at the meso and macro steps; micro (4/8 px) stays the same so border-radius and gap stay legible · Section vertical rhythm halved · Card and detail padding tightened · Table cell padding tightened to match the new row height What does NOT change: · Color palette, accent rules, status semantics · Font families (Inter + Geist Mono + Khand) · Iconography, motion easings, focus ring · Component class names — everything still works =========================================================== */ [data-thesis="a"][data-density="dense"], [data-density="dense"] [data-thesis="a"] { /* ---- Type — drop one step at body/heading; eyebrow stays small ---- */ --type-display-2xl: 700 48px/1.05 var(--font-display); --type-display-xl: 600 34px/1.1 var(--font-display); --type-display-lg: 600 24px/1.2 var(--font-display); --type-display-md: 600 20px/1.25 var(--font-display); --type-heading-lg: 600 16px/1.3 var(--font-ui); --type-heading-md: 600 13.5px/1.4 var(--font-ui); --type-heading-sm: 600 12.5px/1.4 var(--font-ui); --type-body: 400 13px/1.45 var(--font-ui); --type-body-strong: 500 13px/1.45 var(--font-ui); --type-caption: 400 11.5px/1.4 var(--font-ui); --type-eyebrow: 600 10.5px/1.3 var(--font-ui); --type-mono: 400 12px/1.4 var(--font-mono); /* ---- Spacing — micro unchanged, meso & macro tightened ---- Old → new --space-3: 12 → 10 --space-4: 16 → 12 --space-5: 20 → 16 --space-6: 24 → 18 --space-8: 32 → 24 --space-10: 40 → 28 --space-12: 48 → 36 --space-16: 64 → 48 --space-20: 80 → 60 */ --space-3: 10px; --space-4: 12px; --space-5: 16px; --space-6: 18px; --space-8: 24px; --space-10: 28px; --space-12: 36px; --space-16: 48px; --space-20: 60px; /* ---- Controls + rows ---- */ --control-height-sm: 24px; --control-height-md: 32px; --control-height-lg: 40px; --row-height: 28px; } /* ---- Component-level overrides where token shrinking isn't enough ---- */ /* Body itself can use the new body type. */ [data-thesis="a"][data-density="dense"], [data-density="dense"] [data-thesis="a"] body { font: var(--type-body); } /* Tables in dense: TWO sizes still — header same size as body, just bolder. Shrink everything by 0.5 px from standard. */ [data-density="dense"] .data-table th, [data-density="dense"] .data-table td { padding: 0 10px; font-size: 12.5px; line-height: 1.35; } [data-density="dense"] .data-table thead th { height: 28px; font-size: 12.5px; } [data-density="dense"] .data-table .mono, [data-density="dense"] .data-table td.mono, [data-density="dense"] .data-table .data-table__num, [data-density="dense"] .data-table td.data-table__num, [data-density="dense"] .data-table td.data-table__num.mono, [data-density="dense"] .data-table .data-table__link { font-size: 12.5px; line-height: 1.35; } /* AG Grid in dense — match the table values. */ [data-density="dense"] .ag-theme-quartz { --ag-font-size: 12.5px; --ag-row-height: 28px; --ag-header-height: 28px; --ag-cell-horizontal-padding: 10px; } /* Toolbar above the table — slightly less chrome. */ [data-density="dense"] .tbl-toolbar { padding: 4px 6px; gap: 2px; } [data-density="dense"] .tbl-view, [data-density="dense"] .tbl-chip { padding: 4px 7px; font-size: 12px; } [data-density="dense"] .tbl-applied { padding: 6px 8px; } [data-density="dense"] .tbl-applied__chip { padding: 2px 7px; font-size: 11.5px; } /* Cat-section vertical rhythm — close in by ~40%. */ [data-density="dense"] .cat-section { padding: 28px 0; } [data-density="dense"] .cat-section__head { margin-bottom: 16px; } [data-density="dense"] .cat-section__title { font-size: 22px; } /* Page head — compact on work surfaces: small title, no empty top band. The dropped padding-top was pure whitespace above the title; a 24px title reads as a label, not a hero (matches the cases/finance page heads), leaving the data as the focus. */ [data-density="dense"] .page__head { margin-bottom: 14px; padding-top: 0; } [data-density="dense"] .page__title { font-size: 24px; line-height: 1.1; } [data-density="dense"] .page__lede { font-size: 13.5px; max-width: 56ch; } /* Workbench-specific densing — the same rules but with tighter rails. */ [data-density="dense"] .wb { grid-template-columns: 240px 1fr; } [data-density="dense"] .wb__rail-head { padding: 10px 14px 8px; } [data-density="dense"] .wb__rail-item { padding: 8px 14px; } [data-density="dense"] .wb__rail-item__title { font-size: 12.5px; } [data-density="dense"] .wb__rail-item__meta { font-size: 10.5px; } [data-density="dense"] .wb__detail { padding: 20px 24px 32px; } [data-density="dense"] .wb__actions { margin-bottom: 16px; padding-bottom: 12px; } [data-density="dense"] .wb__header { margin-bottom: 16px; } [data-density="dense"] .wb__header__title { font-size: 22px; } [data-density="dense"] .wb__header__sub { font-size: 11.5px; } [data-density="dense"] .wb__card { padding: 12px 14px; margin-bottom: 14px; } [data-density="dense"] .wb__card__head { margin-bottom: 8px; } [data-density="dense"] .wb__next { padding: 8px 12px; margin-bottom: 14px; gap: 12px; } [data-density="dense"] .wb__next__title { font-size: 13px; } /* Buttons — slimmer pad inside the action toolbar. */ [data-density="dense"] .wb__actions .btn { padding: 6px 10px; font-size: 12.5px; } [data-density="dense"] .wb__actions .btn svg { width: 14px; height: 14px; } [data-density="dense"] .wb__actions kbd { font-size: 9.5px; padding: 1px 4px; } /* Definition lists inside cards — close the row gap, no padding inflation. */ [data-density="dense"] .def-list--inline { gap: 10px 18px; } [data-density="dense"] .def-list--inline .def-list__row dt { font-size: 10px; } [data-density="dense"] .def-list--inline .def-list__row dd { font-size: 12.5px; } [data-density="dense"] .def-list .def-list__row { padding: 8px 0; } /* Modal — keep the focused-workspace breathing room; only shrink type. */ [data-density="dense"] .wb-modal__head { padding: 12px 16px; } [data-density="dense"] .wb-modal__body { padding: 16px; gap: 12px; } [data-density="dense"] .wb-modal__title { font-size: 14.5px; } [data-density="dense"] .wb-modal__label { font-size: 10px; } [data-density="dense"] .wb-modal__field input, [data-density="dense"] .wb-modal__field textarea, [data-density="dense"] .wb-modal__field select { padding: 6px 8px; font-size: 12.5px; } [data-density="dense"] .wb-modal__foot { padding: 10px 16px; } /* Catalogue cards (foundations / components / etc.) — tighten if A++ is loaded across the whole site rather than just on /patterns. */ [data-density="dense"] .ref-grid { gap: 10px; } [data-density="dense"] .card { padding: 14px 16px; } [data-density="dense"] .card__title { font-size: 16px; } [data-density="dense"] .card__lede { font-size: 12.5px; }