@loidolt/theme-styles 0.6.0 → 0.8.0

package/src/components/prose.css

@@ -38,7 +38,7 @@
   margin-block: 1.8em 0.6em;
   color: var(--loidolt-text);
   font-family: var(--loidolt-font-display);
-  font-weight: 500;
+  font-weight: var(--loidolt-heading-weight);
   line-height: var(--loidolt-font-line-height-tight);
   /* Clears a sticky top bar when a heading is the target of an in-page link. */
   scroll-margin-top: calc(var(--loidolt-size-topbar) + var(--loidolt-space-4));
@@ -48,7 +48,7 @@
   font-size: 2em;
 }
 :where(.ldt-prose h2):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding-block-end: 0.3em;
+  padding-block-end: 0.3em; /* @literal em-based prose rhythm */
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
   font-size: 1.5em;
 }
@@ -63,8 +63,8 @@
   color: var(--loidolt-text-muted);
   font-family: var(--loidolt-font-utility);
   font-size: 0.8em;
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 /* A heading directly after another heading sits closer to it. */
 :where(.ldt-prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6)):not(
@@ -86,19 +86,21 @@
 /* Only one weight per family ships, so bold is synthesized; colour keeps it legible. */
 :where(.ldt-prose :is(strong, b)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   color: var(--loidolt-text);
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose :not(pre) > code):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.12em 0.35em;
+  padding: 0.12em 0.35em; /* @literal em-based inline code */
   border: var(--loidolt-border-width) solid var(--loidolt-border-soft);
+  border-radius: var(--loidolt-radius-inner);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-sunken);
   font-size: 0.875em;
 }
 :where(.ldt-prose kbd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.05em 0.4em;
+  padding: 0.05em 0.4em; /* @literal em-based key cap */
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
-  border-bottom-width: 2px;
+  border-radius: var(--loidolt-radius-inner);
+  border-bottom-width: 2px; /* @literal key-cap depth */
   background: var(--loidolt-surface);
   font-size: 0.85em;
 }
@@ -110,7 +112,7 @@
 /* --- Lists --------------------------------------------------------------------------------- */
 
 :where(.ldt-prose :is(ul, ol)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding-inline-start: 1.5em;
+  padding-inline-start: 1.5em; /* @literal em-based list indent */
 }
 :where(.ldt-prose li):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-block: 0.3em;
@@ -131,7 +133,7 @@
   accent-color: var(--loidolt-accent);
 }
 :where(.ldt-prose dt):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose dd):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin: 0 0 0.6em 1.5em;
@@ -141,8 +143,8 @@
 
 :where(.ldt-prose blockquote):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-inline: 0;
-  padding: 0.7em 1em;
-  border-inline-start: 3px solid var(--loidolt-accent);
+  padding: 0.7em 1em; /* @literal em-based prose rhythm */
+  border-inline-start: var(--loidolt-stroke-accent) solid var(--loidolt-accent);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
 }
@@ -168,9 +170,10 @@
  * surface so it reads as code in both colour schemes.
  */
 :where(.ldt-prose pre):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.9em 1.1em;
+  padding: 0.9em 1.1em; /* @literal em-based code rhythm */
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font-size: 0.85em;
@@ -199,14 +202,14 @@
   font-size: 0.9em;
 }
 :where(.ldt-prose :is(th, td)):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.5em 0.8em;
+  padding: 0.5em 0.8em; /* @literal em-based table rhythm */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
   text-align: start;
   vertical-align: top;
 }
 :where(.ldt-prose th):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   background: var(--loidolt-surface-alt);
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose td):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   background: var(--loidolt-surface);
@@ -221,12 +224,13 @@
 /* --- Disclosure ---------------------------------------------------------------------------- */
 
 :where(.ldt-prose details):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  padding: 0.5em 0.9em;
+  padding: 0.5em 0.9em; /* @literal em-based prose rhythm */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface);
 }
 :where(.ldt-prose summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
-  font-weight: 700;
+  font-weight: 700; /* @literal bold means bold in running text */
 }
 :where(.ldt-prose details[open] > summary):not(:where(.ldt-not-prose, .ldt-not-prose *)) {
   margin-block-end: 0.5em;

package/src/components/selection.css

@@ -13,15 +13,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   border: 0;
-  padding: 0.75rem 0;
+  padding: var(--loidolt-space-3) 0;
   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);
   text-align: left;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-control-transform);
 }
 .ldt-accordion__trigger:hover:not([data-disabled]) {
   color: var(--loidolt-text-accent);
@@ -34,15 +35,15 @@
   width: 0;
   height: 0;
   flex: 0 0 auto;
-  border-inline: 0.3rem solid transparent;
-  border-top: 0.34rem solid currentColor;
+  border-inline: 0.3rem solid transparent; /* @literal CSS triangle geometry */
+  border-top: 0.34rem solid currentColor; /* @literal CSS triangle geometry */
   transition: transform var(--loidolt-motion-normal) var(--loidolt-motion-easing);
 }
 .ldt-accordion__trigger[data-state='open'] .ldt-accordion__indicator {
   transform: rotate(180deg);
 }
 .ldt-accordion__body {
-  padding-bottom: 1rem;
+  padding-bottom: var(--loidolt-space-4);
   color: var(--loidolt-text-muted);
 }
 .ldt-toggle-group {
@@ -50,6 +51,7 @@
   display: inline-flex;
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-control);
   overscroll-behavior-inline: contain;
   scrollbar-width: thin;
 }
@@ -62,15 +64,16 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal glyph-to-label spacing, not density */
   border: 0;
-  padding: 0 0.85rem;
+  padding: 0 var(--loidolt-pad-control-x);
   color: var(--loidolt-text-muted);
   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;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-control-transform);
   white-space: nowrap;
 }
 /* One shared rule between neighbours, so the group reads as a single object rather than a row
@@ -101,18 +104,18 @@
 }
 .ldt-toggle-group--sm .ldt-toggle-group__item {
   min-height: var(--loidolt-size-control-sm);
-  padding: 0 0.65rem;
+  padding: 0 var(--loidolt-pad-control-x-sm);
   font-size: var(--loidolt-font-size-xs);
 }
 .ldt-toggle-group--lg .ldt-toggle-group__item {
   min-height: var(--loidolt-size-control-lg);
-  padding: 0 1.2rem;
+  padding: 0 var(--loidolt-pad-control-x-lg);
 }
 .ldt-breadcrumbs__list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem 0.5rem;
+  gap: 0.35rem 0.5rem; /* @literal separator rhythm, not density */
   margin: 0;
   padding: 0;
   list-style: none;
@@ -121,7 +124,7 @@
   min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
 }
 /* Generated content, so the separator is never selected, copied, or read aloud. */
 .ldt-breadcrumbs__item + .ldt-breadcrumbs__item::before {
@@ -132,9 +135,10 @@
 .ldt-breadcrumbs__current {
   overflow: hidden;
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
   text-overflow: ellipsis;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-label-transform);
   white-space: nowrap;
 }
 .ldt-breadcrumbs__link {
@@ -155,10 +159,10 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.3rem; /* @literal page buttons sit nearly flush */
 }
 .ldt-pagination__ellipsis {
-  padding-inline: 0.35rem;
+  padding-inline: 0.35rem; /* @literal matches the page-button gap */
   color: var(--loidolt-text-muted);
 }
 .ldt-pagination__page {
@@ -179,6 +183,7 @@
   display: inline-flex;
   overflow-x: auto;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-control);
   overscroll-behavior-inline: contain;
   scrollbar-width: thin;
 }
@@ -207,6 +212,7 @@
   gap: var(--loidolt-space-1);
   padding: var(--loidolt-space-1);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-inner);
   color: inherit;
   background: none;
   font: inherit;
@@ -244,15 +250,16 @@
 .ldt-chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.2rem;
+  gap: 0.2rem; /* @literal chip glyph spacing */
   min-height: 1.5rem;
   max-width: 100%;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding-inline-start: 0.45rem;
+  border-radius: var(--loidolt-radius-control);
+  padding-inline-start: 0.45rem; /* @literal chip label inset */
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.04em;
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.4);
 }
 .ldt-chip > span {
   overflow: hidden;

package/src/components/surfaces.css

@@ -1,6 +1,7 @@
 .ldt-card,
 .ldt-panel {
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
 }
@@ -25,7 +26,7 @@
 .ldt-panel__header,
 .ldt-panel__content,
 .ldt-panel__footer {
-  padding: var(--loidolt-space-4);
+  padding: var(--loidolt-pad-surface);
 }
 .ldt-card__header,
 .ldt-panel__header {
@@ -56,15 +57,16 @@
   display: inline-flex;
   align-items: center;
   min-height: 1.4rem;
-  padding: 0.15rem 0.5rem;
+  padding: 0.15rem 0.5rem; /* @literal inline badge metrics, sized to sit in running text */
   border: var(--loidolt-border-width) solid var(--loidolt-border);
   border-radius: var(--loidolt-border-radius-pill);
   color: var(--loidolt-text-muted);
   background: var(--loidolt-surface-sunken);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
   /* The label voice (`.ldt-eyebrow`, `.ldt-field__label`), not the tighter control voice. */
-  letter-spacing: var(--loidolt-font-tracking-wide);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking-wide);
+  text-transform: var(--loidolt-label-transform);
 }
 /*
  * Size steps take the button scale's *box* so a badge in a row of controls lines up with them,
@@ -83,17 +85,17 @@
 }
 .ldt-badge--sm {
   min-height: var(--loidolt-size-control-sm);
-  padding: 0.38rem 0.7rem;
+  padding: var(--loidolt-pad-control-y-sm) 0.7rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--md {
   min-height: var(--loidolt-size-control);
-  padding: 0.5rem 0.9rem;
+  padding: var(--loidolt-pad-control-y) 0.9rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--lg {
   min-height: var(--loidolt-size-control-lg);
-  padding: 0.5rem 1.25rem;
+  padding: var(--loidolt-pad-control-y) 1.25rem; /* @literal inline pad sits between control steps */
   line-height: 1;
 }
 .ldt-badge--accent {
@@ -130,6 +132,7 @@
   aspect-ratio: var(--ldt-thumbnail-ratio, 4 / 3);
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface-sunken);
 }
 .ldt-thumbnail--paper {
@@ -169,8 +172,9 @@
 /* A dashboard tile: one hero number over a utility label; the link form invites a click. */
 .ldt-stat {
   display: block;
-  padding: var(--loidolt-space-4);
+  padding: var(--loidolt-pad-surface);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   text-decoration: none;
@@ -183,14 +187,15 @@ a.ldt-stat:hover {
   margin: 0;
   font-family: var(--loidolt-font-display);
   font-size: var(--loidolt-font-size-xl);
-  font-weight: 600;
+  font-weight: var(--loidolt-strong-weight);
 }
 .ldt-stat__label {
   margin: 0.25rem 0 0;
   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-separator {
   width: 100%;
@@ -214,10 +219,11 @@ a.ldt-stat:hover {
   place-items: center;
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-control);
   color: var(--loidolt-text-muted);
   background: var(--loidolt-surface-sunken);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.06em;
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.6);
 }
 .ldt-avatar--sm {
   width: var(--loidolt-size-control-sm);

package/src/components.css

@@ -7,4 +7,7 @@
 @import './components/selection.css';
 @import './components/layout.css';
 @import './components/media.css';
+@import './components/charts.css';
+@import './components/maps.css';
 @import './components/prose.css';
+@import './components/docs.css';

package/src/index.css

@@ -8,9 +8,14 @@
  * `loidolt.a11y` is last so the focus ring and the reduced-motion overrides beat component
  * styles by layer order alone — no `!important` needed, which keeps app CSS able to override
  * them (unlayered styles outrank every layer for normal declarations).
+ *
+ * `loidolt.vendor` holds third-party stylesheets a loidolt package ships with — MapLibre's, for
+ * `@loidolt/theme-maps`. Vendor CSS left unlayered would outrank every layer here; slotted after
+ * `base` and before `components`, our resets cannot break it and our component styles can
+ * restyle it, whichever order the two stylesheets are imported in.
  */
-@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.components, loidolt.utilities,
-  loidolt.a11y;
+@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
+  loidolt.utilities, loidolt.a11y;
 
 @import '@loidolt/theme-tokens/css' layer(loidolt.tokens);
 @import './fonts.css' layer(loidolt.base);

package/src/presets/compact-dark-auto.css

@@ -0,0 +1,2 @@
+/* The compact preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/compact-dark-auto';

package/src/presets/compact-dark.css

@@ -0,0 +1,2 @@
+/* The compact preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/compact-dark';

package/src/presets/compact.css

@@ -0,0 +1,2 @@
+/* The compact preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/compact';

package/src/presets/loidolt-dark-auto.css

@@ -0,0 +1,2 @@
+/* The loidolt preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/loidolt-dark-auto';

package/src/presets/loidolt-dark.css

@@ -0,0 +1,2 @@
+/* The loidolt preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/loidolt-dark';

package/src/presets/loidolt.css

@@ -0,0 +1,2 @@
+/* The loidolt preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/loidolt';

package/src/presets/soft-dark-auto.css

@@ -0,0 +1,2 @@
+/* The soft preset (dark-auto colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/soft-dark-auto';

package/src/presets/soft-dark.css

@@ -0,0 +1,2 @@
+/* The soft preset (dark colours). See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/soft-dark';

package/src/presets/soft.css

@@ -0,0 +1,2 @@
+/* The soft preset. See '@loidolt/theme-tokens' definePreset() to build your own. */
+@import '@loidolt/theme-tokens/css/presets/soft';

package/src/utilities.css

@@ -32,10 +32,14 @@
  * scope has to re-declare it. Put this on the wrapper you redefine tokens on:
  *
  *   <div class="ldt-theme" style="--loidolt-surface: #10212c; --loidolt-text: #dceaf2">
+ *
+ * The same goes for `font-family`, which `<html>` sets once: a subtree preset that changes the
+ * display face needs it re-declared here to reach running text.
  */
 .ldt-theme {
   color: var(--loidolt-text);
   background: var(--loidolt-background);
+  font-family: var(--loidolt-font-display);
 }
 /* Muted body voice for meta lines (author · timestamp). Unlike .ldt-utility-text it keeps
    sentence case and the body face, so names and dates stay readable. */
@@ -63,15 +67,17 @@
 .ldt-utility-text {
   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-eyebrow {
   margin: 0 0 0.4rem;
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: var(--loidolt-font-tracking-wide);
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking-wide);
+  text-transform: var(--loidolt-label-transform);
 }
 
 /* Print-only content — a URL written out after a link, a signature line. The counterpart to