@loidolt/theme-styles 0.7.0 → 0.8.1

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.7.0",
+  "version": "0.8.1",
   "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.7.0"
+    "@loidolt/theme-tokens": "^0.8.1"
   },
   "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.
  */
@@ -31,7 +31,7 @@
     .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;
 }
@@ -68,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%);
@@ -194,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

@@ -2,7 +2,7 @@
    runtime through `createTokenColors`); this file styles everything around the canvas. */
 .ldt-chart {
   display: grid;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
   min-width: 0;
   margin: 0;
 }
@@ -10,8 +10,9 @@
 .ldt-chart__title {
   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-chart__canvas,
 .ldt-chart__state {

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

@@ -33,11 +33,11 @@
 }
 .ldt-code__header {
   display: flex;
-  gap: 0.75rem;
+  gap: var(--loidolt-space-3);
   align-items: center;
   justify-content: space-between;
   min-height: 2rem;
-  padding: 0 0 0 0.75rem;
+  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);
@@ -53,14 +53,15 @@
   flex: none;
   margin-inline-start: auto;
   min-height: 2rem;
-  padding: 0 0.75rem;
+  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);
-  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);
   cursor: pointer;
 }
 .ldt-code__copy:hover {
@@ -68,7 +69,7 @@
 }
 .ldt-code__pre {
   margin: 0;
-  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);
   color: var(--ldt-syntax-foreground);
@@ -97,12 +98,12 @@
 
 /* --- Footnotes ------------------------------------------------------------------------------- */
 .ldt-footnote-ref a {
-  padding-inline: 0.1em;
+  padding-inline: 0.1em; /* @literal optical nudge around the marker */
   text-decoration: none;
 }
 .ldt-footnotes {
   margin-top: 2em;
-  padding-top: 1em;
+  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;
@@ -114,11 +115,12 @@
 /* --- Diagrams -------------------------------------------------------------------------------- */
 .ldt-mermaid {
   display: grid;
-  gap: 0.5rem;
+  gap: var(--loidolt-space-2);
   margin: 0 0 1.1em;
-  padding: 1rem;
+  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] {
@@ -137,8 +139,9 @@
 .ldt-mermaid__source summary {
   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);
   cursor: pointer;
 }
 .ldt-mermaid__source pre,
@@ -157,8 +160,8 @@ pre.ldt-mermaid {
   margin: 0 0 0.5rem;
   color: var(--loidolt-text-muted);
   font-size: var(--loidolt-font-size-xs);
-  letter-spacing: var(--loidolt-font-tracking-utility);
-  text-transform: uppercase;
+  letter-spacing: var(--loidolt-label-tracking);
+  text-transform: var(--loidolt-label-transform);
 }
 .ldt-toc__list {
   margin: 0;
@@ -172,8 +175,8 @@ pre.ldt-mermaid {
   display: flex;
   align-items: center;
   min-block-size: 1.5rem;
-  padding: 0.2rem 0 0.2rem 0.65rem;
-  border-inline-start: 2px solid var(--loidolt-border-soft);
+  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;
 }
@@ -206,7 +209,7 @@ pre.ldt-mermaid {
 /* --- The page -------------------------------------------------------------------------------- */
 .ldt-markdown-page {
   display: grid;
-  gap: 1.5rem;
+  gap: var(--loidolt-space-6);
   min-width: 0;
 }
 .ldt-markdown-page__main {
@@ -215,7 +218,7 @@ pre.ldt-mermaid {
 @media (min-width: 1024px) {
   .ldt-markdown-page--toc {
     grid-template-columns: minmax(0, 1fr) 14rem;
-    gap: 2.5rem;
+    gap: var(--loidolt-space-10);
     align-items: start;
   }
   .ldt-markdown-page--toc .ldt-markdown-page__toc {
@@ -230,18 +233,19 @@ pre.ldt-mermaid {
 .ldt-markdown-page__pager {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: var(--loidolt-space-3);
   justify-content: space-between;
   margin-top: 2.5rem;
-  padding-top: 1.25rem;
+  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;
+  gap: 0.15rem; /* @literal label-to-title spacing */
   min-width: min(14rem, 100%);
-  padding: 0.65rem 0.9rem;
+  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;
 }
@@ -255,14 +259,15 @@ pre.ldt-mermaid {
 .ldt-markdown-page__direction {
   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);
 }
 
 /* --- Docs index ------------------------------------------------------------------------------ */
 .ldt-docs-hub {
   display: grid;
-  gap: 2.25rem;
+  gap: 2.25rem; /* @literal hub section rhythm */
 }
 .ldt-docs-hub__title {
   margin: 0;
@@ -274,7 +279,7 @@ pre.ldt-mermaid {
 .ldt-docs-hub__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
-  gap: 1rem;
+  gap: var(--loidolt-space-4);
   margin: 1rem 0 0;
   padding: 0;
   list-style: none;
@@ -293,6 +298,7 @@ pre.ldt-mermaid {
   margin: 0 0 0.35rem;
   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);
 }

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 */
 }