@loidolt/theme-styles 0.6.0 → 0.8.0

package/src/components/feedback.css

@@ -1,7 +1,8 @@
 .ldt-alert {
-  padding: 0.8rem 1rem;
+  padding: var(--loidolt-pad-callout);
   border: var(--loidolt-border-width) solid var(--loidolt-border);
-  border-left: 3px solid var(--loidolt-info);
+  border-left: var(--loidolt-stroke-accent) solid var(--loidolt-info);
+  border-radius: var(--loidolt-radius-surface);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
 }
@@ -20,8 +21,9 @@
 .ldt-alert__title {
   margin: 0 0 0.2rem;
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.6);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-alert__description {
   margin: 0;
@@ -145,15 +147,16 @@
   bottom: 1rem;
   display: grid;
   width: min(24rem, calc(100vw - 2rem));
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
 }
 .ldt-toast {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  gap: 0.4rem 1rem;
-  padding: 0.8rem 1rem;
+  gap: 0.4rem 1rem; /* @literal title-to-description rhythm */
+  padding: var(--loidolt-pad-callout);
   border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
-  border-left: 3px solid var(--loidolt-border-strong);
+  border-left: var(--loidolt-stroke-accent) solid var(--loidolt-border-strong);
+  border-radius: var(--loidolt-radius-overlay);
   color: var(--loidolt-text);
   background: var(--loidolt-surface);
   box-shadow: var(--loidolt-shadow-popover);
@@ -172,8 +175,9 @@
 }
 .ldt-toast__title {
   font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
+  font-weight: var(--loidolt-label-weight);
+  letter-spacing: calc(var(--loidolt-label-tracking) * 0.6);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-toast__description {
   grid-column: 1;
@@ -188,7 +192,7 @@
   grid-column: 1;
   display: flex;
   flex-wrap: wrap;
-  gap: 0.4rem;
+  gap: 0.4rem; /* @literal button cluster */
   margin-top: 0.2rem;
 }
 /* Logical insets, so `start`/`end` follow the writing direction. */
@@ -250,21 +254,21 @@
   justify-content: center;
   min-width: 1.25rem;
   height: 1.25rem;
-  padding: 0 0.25rem;
+  padding: 0 var(--loidolt-space-1);
   border-radius: var(--loidolt-border-radius-pill);
   color: var(--loidolt-on-accent);
   background: var(--loidolt-accent);
   font-size: var(--loidolt-font-size-xs);
-  font-weight: 700;
+  font-weight: 700; /* @literal a numeral in a 1.25rem chip needs the heaviest weight */
   white-space: nowrap;
   flex: none;
 }
 .ldt-marker--pin {
   min-width: 1.5rem;
   height: 1.5rem;
-  border-radius: 50% 50% 50% 0;
+  border-radius: 50% 50% 50% 0; /* @literal the pin silhouette */
   box-shadow: var(--loidolt-shadow-popover);
 }
 .ldt-marker--active {
-  outline: 2px solid var(--loidolt-surface);
+  outline: 2px solid var(--loidolt-surface); /* @literal halo that lifts the pin off a canvas */
 }

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);