@loidolt/theme-styles 0.3.0 → 0.4.0

package/README.md

@@ -0,0 +1,18 @@
+# @loidolt/theme-styles
+
+Fonts, foundations, component classes, accessibility rules, and layout utilities for the Loidolt
+design system.
+
+```sh
+npm install @loidolt/theme-styles
+```
+
+```css
+@import '@loidolt/theme-styles';
+```
+
+Deep entry points include `/tokens`, `/base`, `/components`, `/utilities`, `/accessibility`,
+`/fonts`, `/dark`, and `/dark-auto`. Every slice except `/tokens` expects the token custom
+properties to be loaded first.
+
+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.3.0",
+  "version": "0.4.0",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -24,14 +24,11 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "engines": {
-    "node": ">=22"
-  },
   "scripts": {
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.3.0"
+    "@loidolt/theme-tokens": "^0.4.0"
   },
   "publishConfig": {
     "access": "public",

package/src/accessibility.css

@@ -13,7 +13,15 @@
  * 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.
  */
-:where(.ldt-topbar__nav, .ldt-table-wrap, .ldt-sidebar, .ldt-dialog__body, .ldt-drawer__body)
+:where(
+    .ldt-topbar__nav,
+    .ldt-table-wrap,
+    .ldt-sidebar,
+    .ldt-dialog__body,
+    .ldt-drawer__body,
+    .ldt-tabs__list,
+    .ldt-toggle-group
+  )
   :where(:focus-visible) {
   outline-offset: -2px;
 }
@@ -49,6 +57,35 @@
   min-height: 44px;
 }
 
+/* Preserve the compact visual density for mouse/keyboard layouts, but give touch-first devices
+   the 44px target size recommended for comfortable coarse-pointer operation. */
+@media (pointer: coarse) {
+  :where(
+    .ldt-button,
+    .ldt-nav-menu,
+    .ldt-tabs__trigger,
+    .ldt-toggle-group__item,
+    .ldt-input,
+    .ldt-select,
+    .ldt-number-field__input,
+    .ldt-choice,
+    .ldt-switch,
+    .ldt-number-field__button,
+    .ldt-menu__item
+  ) {
+    min-height: 44px;
+  }
+  :where(.ldt-icon-button, .ldt-number-field__button) {
+    min-width: 44px;
+  }
+  :where(.ldt-icon-button) {
+    width: 44px;
+  }
+  .ldt-number-field {
+    grid-template-columns: 44px minmax(0, 1fr) 44px;
+  }
+}
+
 /*
  * No `!important` here. Inside a cascade layer it would beat even an app's unlayered
  * `!important`, since importance reverses layer order — an app could not opt a deliberate

package/src/components/actions.css

@@ -0,0 +1,130 @@
+/* Deep slice: assumes the token custom properties are already loaded.
+   Import '@loidolt/theme-styles/tokens' (or the whole '@loidolt/theme-styles') first. */
+.ldt-button {
+  min-height: var(--loidolt-size-control);
+  display: inline-flex;
+  align-items: center;
+  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;
+  color: var(--loidolt-text);
+  background: transparent;
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.ldt-button:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-text-inverse);
+  background: var(--loidolt-surface-inverse);
+}
+.ldt-button--primary {
+  color: var(--loidolt-on-accent);
+  border-color: var(--loidolt-accent);
+  background: var(--loidolt-accent);
+}
+.ldt-button--primary:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-on-accent);
+  border-color: var(--loidolt-accent-hover);
+  background: var(--loidolt-accent-hover);
+}
+.ldt-button--quiet {
+  color: var(--loidolt-text-muted);
+  border-color: var(--loidolt-border);
+}
+.ldt-button--danger {
+  color: var(--loidolt-on-danger);
+  border-color: var(--loidolt-danger);
+  background: var(--loidolt-danger);
+}
+/* Without this, the base hover would flip a destructive button to the neutral inverse
+   surface — the danger affordance must survive hover. */
+.ldt-button--danger:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-on-danger);
+  border-color: var(--loidolt-danger-hover);
+  background: var(--loidolt-danger-hover);
+}
+.ldt-button--ghost,
+.ldt-button--text {
+  border-color: transparent;
+  background: transparent;
+}
+.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;
+  color: var(--loidolt-text-muted);
+}
+.ldt-button--text:hover:not(:disabled, [aria-disabled='true']) {
+  color: var(--loidolt-text-accent);
+  background: transparent;
+}
+.ldt-button--sm {
+  min-height: var(--loidolt-size-control-sm);
+  padding: 0.38rem 0.65rem;
+  font-size: var(--loidolt-font-size-xs);
+}
+.ldt-button--lg {
+  min-height: var(--loidolt-size-control-lg);
+  padding-inline: 1.2rem;
+}
+.ldt-button:disabled,
+.ldt-button[aria-disabled='true'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ldt-icon-button {
+  width: var(--loidolt-size-control);
+  min-width: var(--loidolt-size-control);
+  padding: 0;
+}
+.ldt-icon-button.ldt-button--sm {
+  width: var(--loidolt-size-control-sm);
+  min-width: var(--loidolt-size-control-sm);
+  padding: 0;
+}
+.ldt-icon-button.ldt-button--lg {
+  width: var(--loidolt-size-control-lg);
+  min-width: var(--loidolt-size-control-lg);
+  padding: 0;
+}
+.ldt-spinner {
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: ldt-spin 0.7s linear infinite;
+}
+@keyframes ldt-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* A pressable row: full-width, hover surface, optional selected state. Link or button. */
+.ldt-list-row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--loidolt-space-2);
+  border: 0;
+  padding: var(--loidolt-space-1) var(--loidolt-space-2);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+}
+.ldt-list-row:hover {
+  background: var(--loidolt-surface-sunken);
+  text-decoration: none;
+}
+.ldt-list-row--selected {
+  box-shadow: inset 2px 0 0 var(--loidolt-accent);
+  background: var(--loidolt-surface-sunken);
+}

package/src/components/data.css

@@ -0,0 +1,198 @@
+.ldt-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+}
+.ldt-table :where(th, td) {
+  padding: 0.7rem 0.8rem;
+  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;
+}
+.ldt-table tbody tr:last-child td {
+  border-bottom: 0;
+}
+/* Logical values: an `end`-aligned column follows the writing direction rather than pinning
+   itself to the right in RTL. */
+.ldt-table :where(th, td)[data-align='start'] {
+  text-align: start;
+}
+.ldt-table :where(th, td)[data-align='center'] {
+  text-align: center;
+}
+.ldt-table :where(th, td)[data-align='end'] {
+  text-align: end;
+}
+/*
+ * Sticky header. The scroll container has to be bounded or there is nothing to stick within —
+ * `--ldt-table-height` is that bound, and the wrapper switches to two-axis scrolling.
+ */
+.ldt-table-wrap--sticky {
+  max-height: var(--ldt-table-height, 24rem);
+  overflow: auto;
+}
+.ldt-table--sticky thead :where(th) {
+  position: sticky;
+  z-index: var(--loidolt-z-raised);
+  top: 0;
+  background: var(--loidolt-surface-alt);
+  /* `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);
+}
+.ldt-table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.ldt-table__sort:hover {
+  color: var(--loidolt-text);
+}
+/* A CSS triangle rather than a glyph: no icon dependency, and nothing that can fall back to
+   tofu in a font that lacks the arrow. */
+.ldt-table__sort-indicator {
+  width: 0;
+  height: 0;
+  border-inline: 0.3rem solid transparent;
+  border-bottom: 0.34rem solid currentColor;
+  opacity: 0;
+}
+.ldt-table__sort:hover .ldt-table__sort-indicator {
+  opacity: 0.4;
+}
+.ldt-table__sort[data-sort='ascending'] .ldt-table__sort-indicator,
+.ldt-table__sort[data-sort='descending'] .ldt-table__sort-indicator {
+  opacity: 1;
+}
+.ldt-table__sort[data-sort='descending'] .ldt-table__sort-indicator {
+  transform: rotate(180deg);
+}
+.ldt-table__empty td {
+  padding: 0;
+  border-bottom: 0;
+}
+/* Inside a table the surrounding rule is already the boundary; a second dashed one reads as a
+   rendering fault. */
+.ldt-table__empty .ldt-empty-state {
+  border: 0;
+}
+.ldt-empty-state {
+  display: grid;
+  justify-items: center;
+  gap: 0.5rem;
+  padding: var(--loidolt-space-10) var(--loidolt-space-6);
+  border: var(--loidolt-border-width) dashed var(--loidolt-border);
+  color: var(--loidolt-text-muted);
+  background: var(--loidolt-surface);
+  text-align: center;
+}
+.ldt-empty-state__icon {
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-xl);
+  line-height: 1;
+}
+.ldt-empty-state__title {
+  margin: 0;
+  color: var(--loidolt-text);
+  font-size: var(--loidolt-font-size-md);
+}
+.ldt-empty-state__description {
+  max-width: 42rem;
+  margin: 0;
+}
+.ldt-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--loidolt-space-2);
+  margin-top: var(--loidolt-space-2);
+}
+/* Trailing action cell in a data table: content hugs the right edge, inline forms welcome. */
+.ldt-table__actions {
+  text-align: end;
+  white-space: nowrap;
+}
+.ldt-table__actions form {
+  display: inline;
+}
+.ldt-table__actions > :not(:first-child) {
+  margin-inline-start: var(--loidolt-space-2);
+}
+/* A message thread: author + meta line over a pre-wrapped body, optional numbered marker. */
+.ldt-comment-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--loidolt-space-2);
+}
+.ldt-comment {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--loidolt-space-2);
+  padding: var(--loidolt-space-1) var(--loidolt-space-2);
+}
+.ldt-comment--active {
+  background: color-mix(in srgb, var(--loidolt-accent) 12%, transparent);
+}
+.ldt-comment__content {
+  min-width: 0;
+}
+.ldt-comment__meta {
+  color: var(--loidolt-text-muted);
+  font-size: var(--loidolt-font-size-sm);
+}
+.ldt-comment__body {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+/* A monospace block for tokens and URLs — select-all text, optional one-press copy. */
+.ldt-code-block {
+  display: flex;
+  align-items: center;
+  gap: var(--loidolt-space-2);
+  padding: var(--loidolt-space-2) var(--loidolt-space-3);
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  background: var(--loidolt-surface-sunken);
+}
+.ldt-code-block__code {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--loidolt-font-mono);
+  font-size: var(--loidolt-font-size-sm);
+  word-break: break-all;
+}
+.ldt-code-block--selectable .ldt-code-block__code {
+  user-select: all;
+}
+/* Previous/next through an ordered set with an "n of N" readout — Pagination's sibling. */
+.ldt-record-stepper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--loidolt-space-1);
+}
+.ldt-record-stepper__count {
+  white-space: nowrap;
+}

package/src/components/feedback.css

@@ -0,0 +1,177 @@
+.ldt-alert {
+  padding: 0.8rem 1rem;
+  border: var(--loidolt-border-width) solid var(--loidolt-border);
+  border-left: 3px solid var(--loidolt-info);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+}
+.ldt-alert--info {
+  border-left-color: var(--loidolt-info);
+}
+.ldt-alert--success {
+  border-left-color: var(--loidolt-success);
+}
+.ldt-alert--warning {
+  border-left-color: var(--loidolt-warning);
+}
+.ldt-alert--error {
+  border-left-color: var(--loidolt-danger);
+}
+.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;
+}
+.ldt-alert__description {
+  margin: 0;
+  color: var(--loidolt-text-muted);
+}
+.ldt-progress {
+  width: 100%;
+  height: 0.35rem;
+  overflow: hidden;
+  background: var(--loidolt-border-soft);
+}
+.ldt-progress__bar {
+  width: 100%;
+  height: 100%;
+  background: var(--loidolt-accent);
+  /*
+   * Scale rather than animate `width`: a width transition relayouts on every frame, while a
+   * transform is composited. `--ldt-progress-value` is the 0..1 fraction, set by the component.
+   */
+  transform: scaleX(var(--ldt-progress-value, 0));
+  transform-origin: left center;
+  transition: transform var(--loidolt-motion-normal) var(--loidolt-motion-easing);
+}
+.ldt-progress--indeterminate .ldt-progress__bar {
+  width: 40%;
+  transform: none;
+  animation: ldt-progress-slide 1.2s var(--loidolt-motion-easing) infinite;
+}
+@keyframes ldt-progress-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+.ldt-skeleton {
+  min-height: 1rem;
+  background: linear-gradient(
+    90deg,
+    var(--loidolt-border-soft),
+    var(--loidolt-surface),
+    var(--loidolt-border-soft)
+  );
+  background-size: 200% 100%;
+  animation: ldt-shimmer 1.5s linear infinite;
+}
+@keyframes ldt-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+.ldt-toast-viewport {
+  position: fixed;
+  z-index: var(--loidolt-z-toast);
+  right: 1rem;
+  bottom: 1rem;
+  display: grid;
+  width: min(24rem, calc(100vw - 2rem));
+  gap: 0.5rem;
+}
+.ldt-toast {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.4rem 1rem;
+  padding: 0.8rem 1rem;
+  border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
+  border-left: 3px solid var(--loidolt-border-strong);
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface);
+  box-shadow: var(--loidolt-shadow-popover);
+}
+.ldt-toast--info {
+  border-left-color: var(--loidolt-info);
+}
+.ldt-toast--success {
+  border-left-color: var(--loidolt-success);
+}
+.ldt-toast--warning {
+  border-left-color: var(--loidolt-warning);
+}
+.ldt-toast--error {
+  border-left-color: var(--loidolt-danger);
+}
+.ldt-toast__title {
+  font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.ldt-toast__description {
+  grid-column: 1;
+  margin: 0;
+  color: var(--loidolt-text-muted);
+}
+.ldt-toast__dismiss {
+  grid-area: 1 / 2 / span 2 / auto;
+  align-self: start;
+}
+/* A colored dot that reports state where a Badge would be too loud. */
+.ldt-status-dot {
+  display: inline-block;
+  width: 0.6rem;
+  height: 0.6rem;
+  border-radius: var(--loidolt-border-radius-pill);
+  background: var(--loidolt-text-muted);
+  opacity: 0.5;
+  flex: none;
+}
+.ldt-status-dot--accent {
+  background: var(--loidolt-accent);
+  opacity: 1;
+}
+.ldt-status-dot--success {
+  background: var(--loidolt-success);
+  opacity: 1;
+}
+.ldt-status-dot--warning {
+  background: var(--loidolt-warning);
+  opacity: 1;
+}
+.ldt-status-dot--error {
+  background: var(--loidolt-danger);
+  opacity: 1;
+}
+.ldt-status-dot--info {
+  background: var(--loidolt-info);
+  opacity: 1;
+}
+/* A numbered accent chip — dot form for lists, pin form for points on a canvas. */
+.ldt-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  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;
+  white-space: nowrap;
+  flex: none;
+}
+.ldt-marker--pin {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50% 50% 50% 0;
+  box-shadow: var(--loidolt-shadow-popover);
+}
+.ldt-marker--active {
+  outline: 2px solid var(--loidolt-surface);
+}