@loidolt/theme-styles 0.7.0 → 0.8.1

package/src/components/forms.css

@@ -1,6 +1,6 @@
 .ldt-field {
   display: grid;
-  gap: 0.35rem;
+  gap: var(--loidolt-gap-field);
   min-width: 0;
 }
 .ldt-label,
@@ -10,8 +10,9 @@
   justify-content: space-between;
   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-field__description {
   margin: 0;
@@ -32,8 +33,9 @@
   min-height: var(--loidolt-size-control);
   border: 0;
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  /* Square even when controls are rounded: a radius on a bottom-only border reads as a fault. */
   border-radius: 0;
-  padding: 0.45rem 0.15rem;
+  padding: var(--loidolt-pad-field);
   color: var(--loidolt-text);
   background: transparent;
 }
@@ -42,7 +44,8 @@
 .ldt-textarea--boxed,
 .ldt-number-field--boxed {
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding-inline: 0.65rem;
+  border-radius: var(--loidolt-radius-control);
+  padding-inline: var(--loidolt-pad-control-x-sm);
   background: var(--loidolt-surface-input);
 }
 /* The focus ring itself comes from the `loidolt.a11y` layer; this only tints the border. */
@@ -66,10 +69,10 @@
   min-height: 1.5rem;
   display: inline-flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.55rem; /* @literal glyph-to-label spacing, not density */
   color: var(--loidolt-text-muted);
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.06em;
+  letter-spacing: calc(var(--loidolt-control-tracking) * 0.75);
 }
 .ldt-choice input {
   width: 1rem;
@@ -85,7 +88,7 @@
 }
 .ldt-choice__text {
   display: grid;
-  gap: 0.15rem;
+  gap: 0.15rem; /* @literal glyph-to-label spacing, not density */
 }
 .ldt-choice__description {
   color: var(--loidolt-text-muted);
@@ -108,15 +111,15 @@
 .ldt-fieldset__body {
   display: grid;
   gap: var(--ldt-gap, var(--loidolt-space-3));
-  margin-top: 0.35rem;
+  margin-top: var(--loidolt-gap-field);
 }
 .ldt-fieldset > :where(.ldt-field__description, .ldt-field__error) {
-  margin-top: 0.35rem;
+  margin-top: var(--loidolt-gap-field);
 }
 .ldt-radio-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem 1rem;
+  gap: var(--loidolt-space-3) var(--loidolt-space-4);
 }
 .ldt-radio-group--vertical {
   flex-direction: column;
@@ -125,7 +128,7 @@
   min-height: 1.5rem;
   display: inline-flex;
   align-items: center;
-  gap: 0.65rem;
+  gap: 0.65rem; /* @literal glyph-to-label spacing, not density */
   border: 0;
   padding: 0;
   background: transparent;
@@ -133,14 +136,17 @@
 .ldt-switch__track {
   width: 2.4rem;
   height: 1.25rem;
-  padding: 2px;
+  padding: 2px; /* @literal thumb travel is computed from the track geometry */
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-control);
   background: var(--loidolt-surface-alt);
 }
 .ldt-switch__thumb {
   display: block;
   width: 0.9rem;
   height: 0.9rem;
+  /* Concentric with the track: its radius less the 2px inset and 1px border. */
+  border-radius: max(0px, calc(var(--loidolt-radius-control) - 3px));
   background: var(--loidolt-text-muted);
   transition: transform var(--loidolt-motion-fast) var(--loidolt-motion-easing);
 }
@@ -180,12 +186,14 @@
 .ldt-file-input::file-selector-button {
   margin-inline-end: var(--loidolt-space-2);
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding: 0.25rem 0.65rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: var(--loidolt-space-1) var(--loidolt-pad-control-x-sm);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
+  text-transform: var(--loidolt-control-transform);
   cursor: pointer;
 }
 .ldt-file-input::file-selector-button:hover {
@@ -201,7 +209,8 @@
   display: inline-block;
   width: 1.75rem;
   height: 1.75rem;
-  border: 2px solid transparent;
+  border: var(--loidolt-stroke-indicator) solid transparent;
+  border-radius: var(--loidolt-radius-control);
   background: var(--ldt-swatch);
   cursor: pointer;
 }
@@ -213,8 +222,8 @@
   border-color: var(--loidolt-accent);
 }
 .ldt-swatch-group__swatch:has(input:focus-visible) {
-  outline: 2px solid var(--loidolt-focus-ring);
-  outline-offset: 1px;
+  outline: var(--loidolt-stroke-focus) solid var(--loidolt-focus-ring);
+  outline-offset: 1px; /* @literal gap between swatch and ring */
 }
 .ldt-swatch-group__swatch:has(input:disabled) {
   opacity: 0.4;
@@ -230,14 +239,15 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.3rem; /* @literal chip spacing */
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding: 0.2rem 0 0.2rem 0.15rem;
+  padding: 0.2rem 0 0.2rem 0.15rem; /* @literal chip well inset */
   color: var(--loidolt-text);
 }
 .ldt-combobox--boxed {
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
-  padding-inline: 0.5rem 0;
+  border-radius: var(--loidolt-radius-control);
+  padding-inline: var(--loidolt-space-2) 0;
   background: var(--loidolt-surface-input);
 }
 .ldt-combobox:focus-within {
@@ -255,7 +265,7 @@
   min-width: 0;
   min-height: 1.5rem;
   border: 0;
-  padding: 0.2rem 0;
+  padding: 0.2rem 0; /* @literal sits inside the well's own padding */
   color: inherit;
   background: transparent;
 }
@@ -279,7 +289,7 @@
 .ldt-multi-select__chips {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.3rem;
+  gap: 0.3rem; /* @literal chip spacing */
   margin: 0;
   padding: 0;
   list-style: none;
@@ -322,7 +332,7 @@
   display: block;
   width: var(--ldt-slider-thumb);
   height: var(--ldt-slider-thumb);
-  border: 2px solid var(--loidolt-accent);
+  border: var(--loidolt-stroke-indicator) solid var(--loidolt-accent);
   background: var(--loidolt-surface-input);
   cursor: grab;
   transition: background var(--loidolt-motion-fast) var(--loidolt-motion-easing);
@@ -382,6 +392,7 @@
 }
 .ldt-password-input--boxed {
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-control);
   background: var(--loidolt-surface-input);
 }
 .ldt-password-input:focus-within {
@@ -394,12 +405,12 @@
   flex: 1;
   min-width: 0;
   border: 0;
-  padding: 0.45rem 0.15rem;
+  padding: var(--loidolt-pad-field);
   color: var(--loidolt-text);
   background: transparent;
 }
 .ldt-password-input--boxed .ldt-password-input__input {
-  padding-inline: 0.65rem;
+  padding-inline: var(--loidolt-pad-control-x-sm);
 }
 .ldt-password-input__toggle {
   display: inline-grid;
@@ -420,7 +431,7 @@
 .ldt-otp-input {
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.35rem; /* @literal cell spacing */
 }
 .ldt-otp-input__cell {
   position: relative;
@@ -429,6 +440,7 @@
   display: grid;
   place-items: center;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-control);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-input);
   font: var(--loidolt-font-size-lg) var(--loidolt-font-utility);
@@ -437,8 +449,8 @@
 /* The input is visually hidden, so the active cell carries the focus indicator for it. */
 .ldt-otp-input:focus-within .ldt-otp-input__cell[data-active] {
   border-color: var(--loidolt-accent);
-  outline: 2px solid var(--loidolt-focus-ring);
-  outline-offset: 1px;
+  outline: var(--loidolt-stroke-focus) solid var(--loidolt-focus-ring);
+  outline-offset: 1px; /* @literal gap between cell and ring */
 }
 .ldt-otp-input:has([aria-invalid='true']) .ldt-otp-input__cell {
   border-color: var(--loidolt-danger);
@@ -468,6 +480,7 @@
 .ldt-signature__surface {
   position: relative;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-input);
 }

package/src/components/layout.css

@@ -28,8 +28,8 @@
   /* Reflow at whatever width runs out of room, rather than only at the compact breakpoint. */
   flex-wrap: wrap;
   align-items: center;
-  gap: 1.25rem;
-  padding: 0 1.35rem;
+  gap: var(--loidolt-space-5);
+  padding: 0 var(--loidolt-pad-bar-x);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
 }
@@ -37,7 +37,7 @@
   display: inline-flex;
   flex: 0 0 auto;
   align-items: baseline;
-  gap: 0.55rem;
+  gap: 0.55rem; /* @literal brand lockup */
   color: var(--loidolt-text);
   text-decoration: none;
 }
@@ -46,14 +46,15 @@
 }
 .ldt-brand__name {
   font-size: var(--loidolt-font-size-lg);
-  font-weight: 500;
-  letter-spacing: -0.02em;
+  font-weight: var(--loidolt-heading-weight);
+  letter-spacing: -0.02em; /* @literal brand lockup */
 }
 .ldt-brand__meta {
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 1.2);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-topbar__nav {
   /*
@@ -72,21 +73,22 @@
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal icon-button cluster */
 }
 .ldt-nav-menu {
   min-height: var(--loidolt-size-control);
   display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.35rem; /* @literal glyph-to-label spacing, not density */
   border: 0;
-  border-bottom: 2px solid transparent;
-  padding: 0 0.75rem;
+  border-bottom: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-space-3);
   color: var(--loidolt-text-muted);
   background: transparent;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-control-weight);
+  letter-spacing: var(--loidolt-control-tracking);
+  text-transform: var(--loidolt-control-transform);
 }
 .ldt-nav-menu:hover:not(:disabled, [aria-disabled='true']) {
   color: var(--loidolt-text);
@@ -105,8 +107,8 @@
   display: inline-flex;
   align-items: center;
   align-self: stretch;
-  border-bottom: 2px solid transparent;
-  padding: 0 0.85rem;
+  border-bottom: var(--loidolt-stroke-indicator) solid transparent;
+  padding: 0 var(--loidolt-pad-control-x);
   color: var(--loidolt-text-muted);
   font-size: var(--loidolt-font-size-sm);
   text-decoration: none;
@@ -125,8 +127,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 0.4rem 1.35rem;
+  gap: var(--loidolt-space-4);
+  padding: 0.4rem var(--loidolt-pad-bar-x); /* @literal vertical inset is fixed by size-contextbar */
   border-block: var(--loidolt-border-width) solid var(--loidolt-border);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
@@ -135,14 +137,15 @@
   min-width: 0;
   display: flex;
   align-items: baseline;
-  gap: 0.65rem;
+  gap: 0.65rem; /* @literal title-to-detail spacing */
 }
 .ldt-contextbar__section {
   flex: 0 0 auto;
   color: var(--loidolt-text-accent);
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-contextbar__actions {
   flex: 0 0 auto;
@@ -189,7 +192,7 @@
 .ldt-sidebar {
   min-width: 0;
   overflow-y: auto;
-  padding: 1.25rem;
+  padding: var(--loidolt-pad-pane);
   border-right: var(--loidolt-border-width) solid var(--loidolt-border);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
@@ -200,7 +203,7 @@
 }
 .ldt-workspace__main {
   min-width: 0;
-  padding: var(--loidolt-space-6);
+  padding: var(--loidolt-pad-page);
 }
 /* A toolbar floated over a positioned container (canvas, map, viewer). The parent must be
    position: relative; the bar is a pointer-events island above the stage content. */
@@ -211,7 +214,7 @@
   gap: var(--loidolt-space-1);
   padding: var(--loidolt-space-1);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
-  border-radius: var(--loidolt-border-radius);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface);
   z-index: var(--loidolt-z-raised);
   pointer-events: auto;
@@ -239,7 +242,7 @@
   display: flex;
   align-items: end;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   margin-bottom: var(--loidolt-space-6);
   padding-bottom: var(--loidolt-space-4);
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
@@ -263,7 +266,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   margin-bottom: var(--loidolt-space-4);
 }
 .ldt-section__title {
@@ -275,8 +278,8 @@
 @media (max-width: 760px) {
   .ldt-topbar {
     min-height: auto;
-    padding-block: 0.75rem;
-    gap: 0.75rem;
+    padding-block: var(--loidolt-space-3);
+    gap: var(--loidolt-space-3);
   }
   .ldt-topbar__actions {
     width: 100%;
@@ -288,7 +291,7 @@
   }
   .ldt-contextbar__location {
     display: grid;
-    gap: 0.15rem;
+    gap: 0.15rem; /* @literal stacked title and detail */
   }
   .ldt-contextbar__detail {
     overflow: visible;
@@ -341,6 +344,7 @@
   align-items: center;
   gap: var(--loidolt-space-2);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   padding: var(--loidolt-space-2) var(--loidolt-space-3);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);
@@ -382,6 +386,7 @@
 .ldt-filter-panel__body {
   margin-top: var(--loidolt-space-2);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   padding: var(--loidolt-space-4);
   color: var(--loidolt-text);
   background: var(--loidolt-surface-alt);

package/src/components/maps.css

@@ -8,6 +8,7 @@
   height: var(--ldt-map-height, 25rem);
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-map-land);
 }
 .ldt-map__canvas {
@@ -99,7 +100,7 @@
 }
 .ldt-map .maplibregl-ctrl-attrib a {
   display: inline-block;
-  padding-block: 0.35rem;
+  padding-block: 0.35rem; /* @literal attribution link target */
   color: var(--loidolt-text);
   line-height: 1.5;
 }
@@ -116,8 +117,9 @@
 
 /* Controls of our own: legends, coordinates, the basemap switcher. */
 .ldt-map-control {
-  padding: 0.5rem 0.65rem;
+  padding: var(--loidolt-space-2) var(--loidolt-pad-control-x-sm);
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
 }
@@ -128,7 +130,7 @@
 }
 .ldt-map-legend {
   display: grid;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal swatch-to-label spacing */
   min-width: 9rem;
   max-width: 16rem;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
@@ -138,26 +140,27 @@
   margin: 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-map-legend__summary {
   cursor: pointer;
 }
 .ldt-map-legend__section {
   display: grid;
-  gap: 0.35rem;
+  gap: 0.35rem; /* @literal legend rhythm */
 }
 .ldt-map-legend__items {
   display: grid;
-  gap: 0.25rem;
+  gap: var(--loidolt-space-1);
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .ldt-map-legend__item {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
   align-items: center;
 }
 .ldt-map-legend__key {
@@ -184,7 +187,7 @@
 }
 .ldt-map-coordinates {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--loidolt-space-3);
   margin: 0;
   font: var(--loidolt-font-size-xs) var(--loidolt-font-mono);
   font-variant-numeric: tabular-nums;
@@ -203,19 +206,20 @@
 }
 .ldt-layer-manager__toggle {
   width: 100%;
-  padding: 0.15rem 0;
+  padding: 0.15rem 0; /* @literal toggle hit area */
   border: 0;
   color: var(--loidolt-text-muted);
   background: none;
   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-align: start;
-  text-transform: uppercase;
+  text-transform: var(--loidolt-label-transform);
   cursor: pointer;
 }
 .ldt-layer-manager__list {
   display: grid;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
   margin: 0.4rem 0 0;
   padding: 0;
   list-style: none;
@@ -226,9 +230,9 @@
 .ldt-layer-manager__row {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.35rem 0.5rem;
+  gap: 0.35rem 0.5rem; /* @literal separator rhythm */
   align-items: center;
-  padding-top: 0.5rem;
+  padding-top: var(--loidolt-space-2);
   border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
 }
 .ldt-layer-manager__row:first-child {
@@ -237,7 +241,7 @@
 }
 .ldt-layer-manager__move {
   display: flex;
-  gap: 0.15rem;
+  gap: 0.15rem; /* @literal icon pair */
 }
 .ldt-layer-manager__opacity {
   grid-column: 1 / -1;
@@ -272,9 +276,9 @@ span.ldt-map-marker {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: start;
-  gap: 0.25rem;
+  gap: var(--loidolt-space-1);
   max-width: min(18rem, 80vw);
-  padding: 0.5rem 0.35rem 0.6rem 0.75rem;
+  padding: 0.5rem 0.35rem 0.6rem 0.75rem; /* @literal popup inset clears the close button */
 }
 .ldt-map-popup__body > :first-child {
   margin-top: 0.3rem;
@@ -292,12 +296,12 @@ span.ldt-map-marker {
 }
 .ldt-map-features__item {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between lines */
   width: 100%;
-  padding: 0.55rem 0.75rem;
+  padding: 0.55rem 0.75rem; /* @literal feature list metrics */
   border: 0;
   border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
-  border-left: 3px solid transparent;
+  border-left: var(--loidolt-stroke-accent) solid transparent;
   color: var(--loidolt-text);
   background: none;
   font: inherit;

package/src/components/media.css

@@ -84,7 +84,7 @@
 }
 .ldt-media-player__meta {
   display: grid;
-  gap: 0.1rem;
+  gap: 0.1rem; /* @literal hairline between lines */
   min-width: 0;
 }
 .ldt-media-player--audio .ldt-media-player__meta:first-child {
@@ -125,7 +125,7 @@
   color: var(--loidolt-accent);
 }
 .ldt-media-controls__text {
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  letter-spacing: var(--loidolt-label-tracking);
 }
 /* Focus rings on the dark bar follow the ink so they stay visible in both themes. */
 .ldt-media-controls :focus-visible {
@@ -169,7 +169,8 @@
 .ldt-media-controls__speed {
   min-height: 1.5rem;
   border: var(--loidolt-border-width) solid currentColor;
-  padding: 0 0.3rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: 0 0.3rem; /* @literal compact readout */
   color: inherit;
   background: transparent;
   font: inherit;
@@ -191,6 +192,7 @@
   aspect-ratio: var(--ldt-aspect-ratio, 16 / 9);
   overflow: hidden;
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-surface);
   background: var(--loidolt-surface-inverse);
 }
 .ldt-media-embed__frame {
@@ -225,12 +227,13 @@
 }
 .ldt-media-embed__title {
   max-width: 32rem;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.5rem; /* @literal caption chip */
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-sm) 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-media-embed__unsupported {
   display: grid;
@@ -310,12 +313,13 @@
   border-color: var(--loidolt-accent);
 }
 .ldt-media-tile__kind {
-  padding: 0.1rem 0.4rem;
+  padding: 0.1rem 0.4rem; /* @literal kind chip */
   color: var(--loidolt-text-inverse);
   background: var(--loidolt-surface-inverse);
   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-media-tile__caption {
   color: var(--loidolt-text-muted);
@@ -347,7 +351,7 @@
 .ldt-lightbox__counter {
   font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
   font-variant-numeric: tabular-nums;
-  letter-spacing: var(--loidolt-font-tracking-utility);
+  letter-spacing: var(--loidolt-label-tracking);
 }
 .ldt-lightbox__tools {
   display: flex;
@@ -360,7 +364,8 @@
   min-height: var(--loidolt-size-control-sm);
   place-items: center;
   border: var(--loidolt-border-width) solid currentColor;
-  padding: 0 0.5rem;
+  border-radius: var(--loidolt-radius-control);
+  padding: 0 var(--loidolt-space-2);
   color: inherit;
   background: var(--loidolt-surface-inverse);
   font: var(--loidolt-font-size-base) var(--loidolt-font-utility);
@@ -402,7 +407,7 @@
   width: 0.55rem;
   height: 0.55rem;
   border: solid currentColor;
-  border-width: 0 0 2px 2px;
+  border-width: 0 0 2px 2px; /* @literal chevron glyph */
   transform: translateX(0.1rem) rotate(45deg);
 }
 .ldt-lightbox__nav--next .ldt-lightbox__chevron,
@@ -437,6 +442,7 @@
   min-height: var(--loidolt-size-control-sm);
   place-items: center;
   border: var(--loidolt-border-width) solid var(--loidolt-border-control);
+  border-radius: var(--loidolt-radius-control);
   padding: 0;
   color: var(--loidolt-text);
   background: var(--loidolt-surface);