@loidolt/theme-styles 0.6.0 → 0.8.0

package/README.md

@@ -15,4 +15,7 @@ Deep entry points include `/tokens`, `/base`, `/components`, `/utilities`, `/acc
 `/fonts`, `/dark`, and `/dark-auto`. Every slice except `/tokens` expects the token custom
 properties to be loaded first.
 
+Built-in style presets live under `/presets/*`: `loidolt`, `soft` and `compact`, each with
+`-dark` and `-dark-auto` companions. They apply under `data-preset="<name>"`.
+
 See the [design-system documentation](https://theme.loidolt.space) for customization guidance.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-styles",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -10,6 +10,7 @@
     "./tokens": "./src/tokens.css",
     "./dark": "./src/dark.css",
     "./dark-auto": "./src/dark-auto.css",
+    "./presets/*": "./src/presets/*.css",
     "./base": "./src/base.css",
     "./accessibility": "./src/accessibility.css",
     "./utilities": "./src/utilities.css",
@@ -28,7 +29,7 @@
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.6.0"
+    "@loidolt/theme-tokens": "^0.8.0"
   },
   "publishConfig": {
     "access": "public",

package/src/accessibility.css

@@ -1,15 +1,15 @@
 /* Deep slice: assumes the token custom properties are already loaded.
    Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
 :where(:focus-visible) {
-  outline: 2px solid var(--loidolt-focus-ring);
-  outline-offset: 2px;
+  outline: var(--loidolt-stroke-focus) solid var(--loidolt-focus-ring);
+  outline-offset: 2px; /* @literal clearance between control and ring */
 }
 :where(:focus:not(:focus-visible)) {
   outline: none;
 }
 /*
  * A scroll container clips an outset ring against its own edge, and children that fill the
- * container have nowhere to put one. Draw it inside those instead — same 2px indicator,
+ * container have nowhere to put one. Draw it inside those instead — same indicator,
  * just on the other side of the border box. Zero specificity, declared after the rule above,
  * so it overrides by document order without escalating specificity.
  */
@@ -22,10 +22,16 @@
     .ldt-tabs__list,
     .ldt-toggle-group,
     .ldt-listbox,
-    .ldt-media-grid
+    .ldt-media-grid,
+    .ldt-map,
+    .ldt-map-features__list,
+    .ldt-layer-manager,
+    .ldt-code__pre,
+    .ldt-toc-panel__wide,
+    .ldt-mermaid
   )
   :where(:focus-visible) {
-  outline-offset: -2px;
+  outline-offset: calc(-1 * var(--loidolt-stroke-focus));
   /* Follow the control's accessible foreground pairing so inset focus stays visible on fills. */
   outline-color: currentColor;
 }
@@ -62,7 +68,7 @@
   z-index: var(--loidolt-z-skip-link);
   top: 0;
   left: 0;
-  padding: 0.75rem 1rem;
+  padding: var(--loidolt-space-3) var(--loidolt-space-4);
   color: var(--loidolt-on-accent);
   background: var(--loidolt-accent);
   transform: translateY(-110%);
@@ -113,7 +119,12 @@
     .ldt-media-controls__speed,
     .ldt-media-controls__range,
     .ldt-lightbox__control,
-    .ldt-media-carousel__control
+    .ldt-media-carousel__control,
+    .ldt-map-features__item,
+    .ldt-map .maplibregl-ctrl-group button,
+    .ldt-layer-manager__toggle,
+    .ldt-code__copy,
+    .ldt-toc__link
   ) {
     min-height: 44px;
   }
@@ -125,10 +136,20 @@
     .ldt-chip__remove,
     .ldt-media-controls__button,
     .ldt-lightbox__control,
-    .ldt-media-carousel__control
+    .ldt-media-carousel__control,
+    .ldt-map .maplibregl-ctrl-group button
   ) {
     min-width: 44px;
   }
+  /* A map marker keeps its drawn size — it points at a spot — and takes a 44px touch. */
+  .ldt-map-marker::after {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 50%;
+    width: 44px;
+    height: 44px;
+    transform: translate(-50%, -50%);
+  }
   /* The thumb keeps its drawn size; an invisible 44px square around it takes the touch. */
   .ldt-slider__thumb {
     position: relative;
@@ -173,7 +194,7 @@
 
 @media (forced-colors: active) {
   :where(button, input, select, textarea, [role='button']) {
-    border: 1px solid ButtonText;
+    border: 1px solid ButtonText; /* @literal forced-colors boundary */
   }
   :where(:focus-visible) {
     outline-color: Highlight;

package/src/base.css

@@ -45,7 +45,7 @@
   margin-block-start: 0;
 }
 :where(h1, h2, h3, h4) {
-  font-weight: 500;
+  font-weight: var(--loidolt-heading-weight);
   line-height: var(--loidolt-font-line-height-tight);
 }
 :where(code, pre, kbd, samp) {

package/src/components/actions.css

@@ -9,17 +9,18 @@
   justify-content: center;
   gap: var(--loidolt-space-2);
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
-  border-radius: var(--loidolt-border-radius);
-  padding: 0.5rem 0.85rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: var(--loidolt-pad-control-y) var(--loidolt-pad-control-x);
   color: var(--loidolt-text);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
   line-height: 1.2;
   overflow-wrap: anywhere;
   text-align: center;
   text-decoration: none;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-control-transform);
   white-space: normal;
 }
 .ldt-button:hover:not(:disabled, [aria-disabled='true']) {
@@ -60,7 +61,7 @@
 .ldt-button--text {
   /* 1.5rem is the WCAG 2.2 minimum target size; `auto` left this at ~22px. */
   min-height: 1.5rem;
-  padding: 0.25rem;
+  padding: var(--loidolt-space-1);
   color: var(--loidolt-text-muted);
 }
 .ldt-button--text:hover:not(:disabled, [aria-disabled='true']) {
@@ -69,12 +70,12 @@
 }
 .ldt-button--sm {
   min-height: var(--loidolt-size-control-sm);
-  padding: 0.38rem 0.65rem;
+  padding: var(--loidolt-pad-control-y-sm) var(--loidolt-pad-control-x-sm);
   font-size: var(--loidolt-font-size-xs);
 }
 .ldt-button--lg {
   min-height: var(--loidolt-size-control-lg);
-  padding-inline: 1.2rem;
+  padding-inline: var(--loidolt-pad-control-x-lg);
 }
 .ldt-button:disabled,
 .ldt-button[aria-disabled='true'] {
@@ -99,9 +100,9 @@
 .ldt-spinner {
   width: 1em;
   height: 1em;
-  border: 2px solid currentColor;
+  border: 2px solid currentColor; /* @literal drawn in proportion to its 1em box */
   border-right-color: transparent;
-  border-radius: 50%;
+  border-radius: 50%; /* @literal a spinner is a circle in every preset */
   animation: ldt-spin 0.7s linear infinite;
 }
 .ldt-spinner--sm {
@@ -115,7 +116,7 @@
 .ldt-spinner--lg {
   width: 2rem;
   height: 2rem;
-  border-width: 3px;
+  border-width: 3px; /* @literal spinner ring geometry */
 }
 @keyframes ldt-spin {
   to {
@@ -129,6 +130,7 @@
   align-items: center;
   gap: var(--loidolt-space-2);
   border: 0;
+  border-radius: var(--loidolt-radius-inner);
   padding: var(--loidolt-space-1) var(--loidolt-space-2);
   color: inherit;
   background: transparent;
@@ -142,6 +144,6 @@
   text-decoration: none;
 }
 .ldt-list-row--selected {
-  box-shadow: inset 2px 0 0 var(--loidolt-accent);
+  box-shadow: inset var(--loidolt-stroke-indicator) 0 0 var(--loidolt-accent);
   background: var(--loidolt-surface-sunken);
 }

package/src/components/charts.css

@@ -0,0 +1,40 @@
+/* @loidolt/theme-charts. The chart itself is painted by ECharts from the same tokens (read at
+   runtime through `createTokenColors`); this file styles everything around the canvas. */
+.ldt-chart {
+  display: grid;
+  gap: var(--loidolt-space-2);
+  min-width: 0;
+  margin: 0;
+}
+/* The label voice, as a stat's label: a chart caption names data, it is not a heading. */
+.ldt-chart__title {
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+}
+.ldt-chart__canvas,
+.ldt-chart__state {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  height: var(--ldt-chart-height, 20rem);
+}
+.ldt-chart__canvas[hidden] {
+  display: none;
+}
+.ldt-chart__state.ldt-empty-state {
+  height: auto;
+  min-height: var(--ldt-chart-height, 20rem);
+  align-content: center;
+}
+.ldt-chart__alert :where(p) {
+  margin: 0 0 0.5rem;
+}
+.ldt-chart__table-toggle {
+  justify-self: start;
+}
+.ldt-chart__table[hidden] {
+  display: none;
+}

package/src/components/data.css

@@ -2,6 +2,7 @@
   width: 100%;
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
 }
 .ldt-table {
   width: 100%;
@@ -10,15 +11,16 @@
   background: var(--loidolt-surface);
 }
 .ldt-table :where(th, td) {
-  padding: 0.7rem 0.8rem;
+  padding: var(--loidolt-pad-cell);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
   text-align: left;
 }
 .ldt-table th {
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-table tbody tr:last-child td {
   border-bottom: 0;
@@ -50,12 +52,12 @@
   /* `border-collapse: collapse` drops the borders of a sticky cell — the collapsed edge belongs
      to the table, which scrolls away. An inset shadow is painted by the cell itself and stays. */
   border-bottom: 0;
-  box-shadow: inset 0 -1px 0 var(--loidolt-border);
+  box-shadow: inset 0 calc(-1 * var(--loidolt-border-width)) 0 var(--loidolt-border);
 }
 .ldt-table__sort {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal glyph-to-label spacing, not density */
   border: 0;
   padding: 0;
   color: inherit;
@@ -73,8 +75,8 @@
 .ldt-table__sort-indicator {
   width: 0;
   height: 0;
-  border-inline: 0.3rem solid transparent;
-  border-bottom: 0.34rem solid currentColor;
+  border-inline: 0.3rem solid transparent; /* @literal CSS triangle geometry */
+  border-bottom: 0.34rem solid currentColor; /* @literal CSS triangle geometry */
   opacity: 0;
 }
 .ldt-table__sort:hover .ldt-table__sort-indicator {
@@ -99,9 +101,10 @@
 .ldt-empty-state {
   display: grid;
   justify-items: center;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
   padding: var(--loidolt-space-10) var(--loidolt-space-6);
   border: var(--loidolt-border-width) dashed var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text-muted);
   background: var(--loidolt-surface);
   text-align: center;
@@ -124,7 +127,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--loidolt-space-2);
+  gap: var(--loidolt-gap-actions);
   margin-top: var(--loidolt-space-2);
 }
 /* Trailing action cell in a data table: content hugs the right edge, inline forms welcome. */
@@ -151,6 +154,7 @@
   display: flex;
   align-items: flex-start;
   gap: var(--loidolt-space-2);
+  border-radius: var(--loidolt-radius-inner);
   padding: var(--loidolt-space-1) var(--loidolt-space-2);
 }
 .ldt-comment--active {
@@ -175,6 +179,7 @@
   gap: var(--loidolt-space-2);
   padding: var(--loidolt-space-2) var(--loidolt-space-3);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface-sunken);
 }
 .ldt-code-block__code {
@@ -225,7 +230,7 @@
   background: var(--loidolt-surface-alt);
 }
 .ldt-table tbody tr[data-selected] td:first-child {
-  box-shadow: inset 3px 0 0 var(--loidolt-accent);
+  box-shadow: inset var(--loidolt-stroke-accent) 0 0 var(--loidolt-accent);
 }
 .ldt-data-table__spacer td {
   padding: 0;
@@ -275,7 +280,7 @@
   min-width: 1.25rem;
   place-items: center;
   margin-inline-start: 0.4rem;
-  padding-inline: 0.3rem;
+  padding-inline: 0.3rem; /* @literal count badge metrics */
   color: var(--loidolt-on-accent);
   background: var(--loidolt-accent);
   font-size: var(--loidolt-font-size-xs);
@@ -301,8 +306,9 @@
   gap: var(--loidolt-space-2);
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-data-table-pagination__size .ldt-select {
   width: auto;

package/src/components/docs.css

@@ -0,0 +1,304 @@
+/* @loidolt/theme-docs. Rendered markdown takes `.ldt-prose` for its typography; this file adds
+   what markdown documentation needs beyond it — code frames and highlighting, admonitions,
+   footnotes, diagrams, the table of contents, and the page around them. */
+
+/* --- Headings that link to themselves ------------------------------------------------------- */
+.ldt-heading-anchor {
+  color: inherit;
+  text-decoration: none;
+}
+.ldt-heading-anchor:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--loidolt-accent);
+  text-underline-offset: 0.2em;
+}
+
+/* --- Code ------------------------------------------------------------------------------------ */
+/* Shiki's CSS-variables theme reads `--ldt-syntax-*`; mapping them to the syntax tokens makes
+   highlighted code follow the light and dark themes with no second render. */
+.ldt-code {
+  --ldt-syntax-foreground: var(--loidolt-text-inverse);
+  --ldt-syntax-background: var(--loidolt-surface-inverse);
+  --ldt-syntax-token-keyword: var(--loidolt-syntax-keyword);
+  --ldt-syntax-token-string: var(--loidolt-syntax-string);
+  --ldt-syntax-token-string-expression: var(--loidolt-syntax-string);
+  --ldt-syntax-token-comment: var(--loidolt-syntax-comment);
+  --ldt-syntax-token-constant: var(--loidolt-syntax-constant);
+  --ldt-syntax-token-function: var(--loidolt-syntax-function);
+  --ldt-syntax-token-parameter: var(--loidolt-syntax-parameter);
+  --ldt-syntax-token-punctuation: var(--loidolt-syntax-punctuation);
+  --ldt-syntax-token-link: var(--loidolt-syntax-function);
+  margin: 0 0 1.1em;
+  min-width: 0;
+}
+.ldt-code__header {
+  display: flex;
+  gap: var(--loidolt-space-3);
+  align-items: center;
+  justify-content: space-between;
+  min-height: 2rem;
+  padding: 0 0 0 var(--loidolt-space-3);
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-bottom: 0;
+  color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface-alt);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-mono);
+}
+.ldt-code__filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ldt-code__copy {
+  flex: none;
+  margin-inline-start: auto;
+  min-height: 2rem;
+  padding: 0 var(--loidolt-space-3);
+  border: 0;
+  border-inline-start: var(--loidolt-border-width) solid var(--loidolt-border);
+  color: var(--loidolt-text);
+  background: none;
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+  cursor: pointer;
+}
+.ldt-code__copy:hover {
+  background: var(--loidolt-surface);
+}
+.ldt-code__pre {
+  margin: 0;
+  padding: 0.9em 1.1em; /* @literal em-based code rhythm */
+  overflow-x: auto;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  color: var(--ldt-syntax-foreground);
+  background: var(--ldt-syntax-background);
+  font: 0.85em / var(--loidolt-font-line-height-normal) var(--loidolt-font-mono);
+  tab-size: 2;
+}
+.ldt-code__pre code {
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+}
+
+/* --- Admonitions ----------------------------------------------------------------------------- */
+.ldt-admonition {
+  margin: 0 0 1.1em;
+}
+.ldt-admonition .ldt-alert__title {
+  margin: 0 0 0.25rem;
+}
+.ldt-admonition .ldt-alert__description > :last-child {
+  margin-bottom: 0;
+}
+
+/* --- Footnotes ------------------------------------------------------------------------------- */
+.ldt-footnote-ref a {
+  padding-inline: 0.1em; /* @literal optical nudge around the marker */
+  text-decoration: none;
+}
+.ldt-footnotes {
+  margin-top: 2em;
+  padding-top: 1em; /* @literal em-based prose rhythm */
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+  color: var(--loidolt-text-muted);
+  font-size: 0.9em;
+}
+.ldt-unsafe-link {
+  text-decoration: underline dotted;
+}
+
+/* --- Diagrams -------------------------------------------------------------------------------- */
+.ldt-mermaid {
+  display: grid;
+  gap: var(--loidolt-space-2);
+  margin: 0 0 1.1em;
+  padding: var(--loidolt-pad-surface);
+  overflow-x: auto;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
+  background: var(--loidolt-background);
+}
+.ldt-mermaid__diagram[hidden] {
+  display: none;
+}
+.ldt-mermaid__diagram svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+.ldt-mermaid__caption {
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-sm);
+}
+.ldt-mermaid__source summary {
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+  cursor: pointer;
+}
+.ldt-mermaid__source pre,
+.ldt-mermaid__fallback,
+pre.ldt-mermaid {
+  margin: 0.5rem 0 0;
+  white-space: pre-wrap;
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-mono);
+}
+
+/* --- Table of contents ----------------------------------------------------------------------- */
+.ldt-toc {
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+}
+.ldt-toc__title {
+  margin: 0 0 0.5rem;
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-xs);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+}
+.ldt-toc__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.ldt-toc__item {
+  padding-inline-start: calc(var(--ldt-toc-level, 0) * 0.85rem);
+}
+.ldt-toc__link {
+  display: flex;
+  align-items: center;
+  min-block-size: 1.5rem;
+  padding: 0.2rem 0 0.2rem 0.65rem; /* @literal rail inset */
+  border-inline-start: var(--loidolt-stroke-indicator) solid var(--loidolt-border-soft);
+  color: var(--loidolt-text-muted);
+  text-decoration: none;
+}
+.ldt-toc__link:hover {
+  color: var(--loidolt-text);
+}
+.ldt-toc__link[aria-current='location'] {
+  border-inline-start-color: var(--loidolt-accent);
+  color: var(--loidolt-text);
+}
+.ldt-toc-panel__wide {
+  position: sticky;
+  top: var(--ldt-docs-top, calc(var(--loidolt-size-topbar) + 1rem));
+  max-height: calc(100vh - var(--ldt-docs-top, calc(var(--loidolt-size-topbar) + 1rem)) - 1rem);
+  overflow-y: auto;
+}
+.ldt-toc-panel__compact {
+  display: none;
+}
+/* The contents go behind a button where there is no room beside the page for them. */
+@media (max-width: 1023.98px) {
+  .ldt-toc-panel__wide {
+    display: none;
+  }
+  .ldt-toc-panel__compact {
+    display: block;
+  }
+}
+
+/* --- The page -------------------------------------------------------------------------------- */
+.ldt-markdown-page {
+  display: grid;
+  gap: var(--loidolt-space-6);
+  min-width: 0;
+}
+.ldt-markdown-page__main {
+  min-width: 0;
+}
+@media (min-width: 1024px) {
+  .ldt-markdown-page--toc {
+    grid-template-columns: minmax(0, 1fr) 14rem;
+    gap: var(--loidolt-space-10);
+    align-items: start;
+  }
+  .ldt-markdown-page--toc .ldt-markdown-page__toc {
+    grid-column: 2;
+    grid-row: 1;
+  }
+  .ldt-markdown-page--toc .ldt-markdown-page__main {
+    grid-column: 1;
+    grid-row: 1;
+  }
+}
+.ldt-markdown-page__pager {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--loidolt-space-3);
+  justify-content: space-between;
+  margin-top: 2.5rem;
+  padding-top: var(--loidolt-space-5);
+  border-top: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-markdown-page__pager a {
+  display: grid;
+  gap: 0.15rem; /* @literal label-to-title spacing */
+  min-width: min(14rem, 100%);
+  padding: 0.65rem 0.9rem; /* @literal pager card metrics */
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
+  color: var(--loidolt-text);
+  text-decoration: none;
+}
+.ldt-markdown-page__pager a:hover {
+  border-color: var(--loidolt-border-strong);
+}
+.ldt-markdown-page__next {
+  margin-inline-start: auto;
+  text-align: end;
+}
+.ldt-markdown-page__direction {
+  color: var(--loidolt-text-muted);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
+}
+
+/* --- Docs index ------------------------------------------------------------------------------ */
+.ldt-docs-hub {
+  display: grid;
+  gap: 2.25rem; /* @literal hub section rhythm */
+}
+.ldt-docs-hub__title {
+  margin: 0;
+}
+.ldt-docs-hub__description {
+  margin: 0.35rem 0 0;
+  color: var(--loidolt-text-muted);
+}
+.ldt-docs-hub__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
+  gap: var(--loidolt-space-4);
+  margin: 1rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+.ldt-docs-hub__grid > li {
+  display: grid;
+}
+/* A docs card is often only a heading and a line; drop the empty body and its rule. */
+.ldt-docs-card .ldt-card__content:empty {
+  display: none;
+}
+.ldt-docs-card .ldt-card__header:has(+ .ldt-card__content:empty) {
+  border-bottom: 0;
+}
+.ldt-docs-card__eyebrow {
+  margin: 0 0 0.35rem;
+  color: var(--loidolt-text-accent);
+  font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking-wide);
+  text-transform: var(--loidolt-label-transform);
+}