@lepid-labs/styles 1.0.1 → 1.0.2

package/luminous-precision/components/shell.css

@@ -0,0 +1,165 @@
+/* luminous-precision — shell chrome: unfilled header and nav (hairlines over
+ * the page background), mono uppercase nav labels, the current page lit by the electric-teal path (the
+ * same 2px left bar + glow as .ld-link hover). Structure is in layout.css. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__skip {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  background: var(--ld-surface);
+  border: 1px solid var(--ld-primary-border);
+  border-radius: var(--ld-radius);
+  color: var(--ld-primary);
+  font-size: var(--ld-text-sm);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__header {
+  /* no fill: the shell background runs under the bar; the blur keeps
+   * content scrolling beneath it legible */
+  background: transparent;
+  border-bottom: 1px solid var(--ld-border);
+  backdrop-filter: blur(var(--ld-blur));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle {
+  background: none;
+  border: 1px solid var(--ld-border);
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  transition: color var(--ld-transition), border-color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle:focus-visible {
+  color: var(--ld-accent);
+  border-color: var(--ld-accent);
+  box-shadow: 0 0 10px var(--ld-accent-glow);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand {
+  color: var(--ld-on-surface);
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-bold);
+  font-size: 1.05rem;
+  letter-spacing: -0.01em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand svg,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__brand img {
+  color: var(--ld-primary);
+  filter: drop-shadow(0 0 6px var(--ld-primary-glow));
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: var(--ld-tracking-wide);
+  transition: color var(--ld-transition), background var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item:focus-visible {
+  color: var(--ld-on-surface);
+  background: var(--ld-surface-glass);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item--active,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item[aria-current="page"] {
+  color: var(--ld-accent);
+  text-shadow: 0 0 8px var(--ld-accent-glow);
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+  background: transparent; /* the shell background shows through; a hairline divides */
+  border-right: 1px solid var(--ld-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__scrim {
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__heading {
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-size: 11px;
+  font-weight: var(--ld-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  opacity: 0.8;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item {
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-mono);
+  font-size: 13px;
+  font-weight: var(--ld-font-weight-medium);
+  box-shadow: inset 0 0 0 0 var(--ld-accent);
+  transition: background var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:hover,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:focus-visible {
+  background: var(--ld-surface-glass);
+  color: var(--ld-on-surface);
+  outline: none;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item:focus-visible {
+  box-shadow: 0 0 0 1px var(--ld-primary-border);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item--active,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item[aria-current="page"] {
+  background: var(--ld-surface);
+  color: var(--ld-accent);
+  box-shadow: inset 2px 0 0 0 var(--ld-accent), 0 0 12px var(--ld-accent-glow);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item--active .ld-sidenav__icon,
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item[aria-current="page"] .ld-sidenav__icon {
+  filter: drop-shadow(0 0 4px var(--ld-accent-glow));
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__footer {
+  border-top: 1px solid var(--ld-border);
+  color: var(--ld-faint);
+  font-size: 12px;
+}
+
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__eyebrow {
+  color: var(--ld-accent);
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__title {
+  font-family: var(--ld-font-display);
+  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
+  font-weight: var(--ld-font-weight-bold);
+  letter-spacing: -0.02em;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-page__subtitle {
+  color: var(--ld-faint);
+  font-size: var(--ld-text-sm);
+}
+
+@media (width <= 48rem) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__nav {
+    background: color-mix(in srgb, var(--ld-bg-blend) 94%, transparent);
+    border-right-color: var(--ld-border-lit);
+    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-shell__nav {
+    border-right: none;
+    border-top: 1px solid var(--ld-border-lit);
+    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
+  }
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__item--active,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell--tabbar .ld-sidenav__item[aria-current="page"] {
+    background: none;
+    box-shadow: inset 0 2px 0 0 var(--ld-accent);
+    border-radius: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-shell__toggle,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-topnav__item,
+  :where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-sidenav__item {
+    transition: none;
+  }
+}

package/luminous-precision/components/table.css

@@ -26,3 +26,23 @@
   background: var(--ld-surface-glass);
   box-shadow: inset 2px 0 0 0 var(--ld-accent);
 }
+
+/* Interactive rows (.ld-table--interactive): the cursor is the affordance —
+ * plain tables hover too. Focus is an outline so it
+ * composes with the selected state (aria-selected="true"), which sits last
+ * so it outranks hover. */
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-table--interactive tbody tr:focus-visible {
+  outline: 1px solid var(--ld-primary-border);
+  outline-offset: -1px;
+  background: var(--ld-surface-glass);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-table--interactive tbody tr:active {
+  background: rgba(198, 165, 255, 0.06);
+}
+:where([data-ld-style="luminous-precision"], [data-ld-style="luminous-precision"] *).ld-table--interactive tbody tr[aria-selected="true"] {
+  background: rgba(198, 165, 255, 0.1);
+  box-shadow: inset 2px 0 0 0 var(--ld-accent), inset 0 0 12px var(--ld-primary-glow);
+}

package/luminous-precision/design.md

@@ -83,6 +83,12 @@ Class prefix `ld-` (shared token/class contract with the other themes).
   (`--ld-slide-lead` / `--ld-slide-trail`, direction from `data-ld-dir`).
   Variants tint the label only; `--block` fills the row with equal-width
   segments. Use `role="group"` + `aria-label`.
+- **Icon button** `.ld-icon-btn` (+ `--active`, `--danger`) — chromeless
+  2rem square for icon-only actions (`<button>` or `<a>`; always
+  `aria-label`). Faint glyph at rest; hover lights it orchid on a faint tint
+  with a soft glow. Active (`--active`, `aria-pressed="true"`,
+  `aria-current="page"`) is an orchid glyph in a hairline orchid inset.
+  `--danger` turns the glyph red on hover. Child `svg` sized to 1.25em.
 - **Form** `.ld-input`, `.ld-textarea`, `.ld-select`, `.ld-label`,
   `.ld-field`, `.ld-checkbox`, `.ld-radio`, `.ld-switch`, `.ld-choice` —
   checked/focus states glow teal.
@@ -96,9 +102,25 @@ Class prefix `ld-` (shared token/class contract with the other themes).
   teal with text glow; the underline is one lit bar that reaches for the new
   tab and settles with barely any overshoot (same slide tokens).
 - **Table** `.ld-table` — lit header rule; row hover shifts glass and lights
-  the teal left bar.
+  the teal left bar. `.ld-table--interactive` adds the pointer, an orchid
+  focus outline, and a selected row (`aria-selected`) held in orchid glow
+  with the teal bar.
 - **Progress** `.ld-progress`, **Spinner** `.ld-spinner` — glowing orchid
   indicators (`--accent` bar variant in teal).
+- **App shell** `.ld-shell` (+ `__skip`, `__header`, `__toggle`, `__brand`,
+  `__actions`, `__nav`, `__scrim`, `__main`, `__footer`; `.ld-topnav`/`__item`;
+  `.ld-sidenav` + `__section`, `__heading`, `__item`, `__icon`, `__label`,
+  `__badge`, `__footer`) — brand in Sora with an orchid-glow mark; mono uppercase top-nav and nav labels in faint. The current page takes the electric-teal path (indigo pane, 2px teal left bar, teal glow) — the same language as `.ld-link` hover; in the tab bar it becomes a teal top rule. The header and nav are unfilled — hairline
+  borders over the page background (`.ld-bg`), which the shell paints; the
+  header blurs what scrolls under it. The drawer and tab bar take a fill. Structure (`components/layout.css`) is shared by every theme:
+  collapsed rail on `data-ld-nav-collapsed`, drawer on `data-ld-nav-open`
+  below 48rem, `--tabbar` docks the nav at the bottom. The header
+  always spans the full width above the nav.
+- **Page layouts** `.ld-page` (`--narrow`/`--wide`/`--full`, `__header`,
+  `__eyebrow`, `__title`, `__subtitle`, `__actions`), `.ld-grid`,
+  `.ld-split`, `.ld-aside-layout`, `.ld-center` — structure only
+  (`components/page.css`, shared by every theme); the page
+  title uses the display face.
 - **Stepper** `.ld-stepper` (+ `__step`, `__node`, `__label`) — milestone
   rail: glowing orchid fill on a sunken track, 2rem nodes, uppercase mono
   labels. `__step--complete` is a solid orchid node; `--current` lights the
@@ -110,7 +132,14 @@ Class prefix `ld-` (shared token/class contract with the other themes).
   `color: var(--ld-faint)`, italic.
 - **Pre / log block** `.ld-pre` — command/log `<pre>`; the surface-sunken
   well (already documented above as this theme's "log wells" token),
-  hairline border, radius, small mono, horizontal scroll.
+  hairline border, radius, small mono, horizontal scroll. `.ld-pre--log`
+  bounds it (`--ld-log-max-height`, 420px), scrolls both ways, wraps long
+  lines, and lays faint teal scanlines over the well.
+- **Copy control** `.ld-pre-copy` — an `.ld-icon-btn` pinned top-right in
+  a `.ld-pre-wrap`; fades in on hover/focus-within, always shown on touch
+  (`hover: none`). `data-ld-copy="copied"` swaps the copy glyph for a
+  success-tinted check; `"failed"` tints it danger. Status goes to a
+  visually hidden `aria-live` `.ld-pre-copy-status`.
 
 ## Code syntax
 

package/luminous-precision/index.css

@@ -1,12 +1,16 @@
 /* luminous-precision — full theme entry point */
 @import "./tokens.css";
 @import "./base.css";
+@import "./components/layout.css";
+@import "./components/shell.css";
+@import "./components/page.css";
 @import "./components/card.css";
 @import "./components/status-card.css";
 @import "./components/link.css";
 @import "./components/button.css";
 @import "./components/button-hold.css";
 @import "./components/button-group.css";
+@import "./components/icon-button.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";

package/neon-butterfly/base.css

@@ -32,8 +32,12 @@
 
 /* Opt-in page background: the butterfly circuit artwork blended into the navy.
  * Matches the switchboard landing page. Apply to <body>, or to the attributed
- * container itself. */
-:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-bg {
+ * container itself. An app shell
+ * (.ld-shell) always paints it, and so does the <body> around one, so the
+ * page stays covered past the shell (overscroll, short pages). */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-bg,
+:where(html[data-ld-style="neon-butterfly"]) body:has(.ld-shell),
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-shell {
   background: var(--ld-bg) url("./assets/butterfly-circuit.png") center / cover fixed;
   background-blend-mode: luminosity;
   background-color: var(--ld-bg-blend);

package/neon-butterfly/components/icon-button.css

@@ -0,0 +1,66 @@
+/* neon-butterfly — icon button: chromeless square, faint glyph that lights lilac (backplane's .icon-btn).
+ * Icon-only control (<button> or <a>): give it an accessible name (aria-label).
+ * Active/current: .ld-icon-btn--active, [aria-pressed="true"], [aria-current="page"]. */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--ld-radius);
+  color: var(--ld-faint);
+  font: inherit;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn > svg {
+  width: 1.25em;
+  height: 1.25em;
+  flex: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:hover,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:focus-visible {
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:focus-visible {
+  box-shadow: 0 0 0 1px var(--ld-primary-border), 0 0 8px var(--ld-primary-glow);
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--active,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-pressed="true"],
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-current="page"] {
+  color: var(--ld-primary);
+  text-shadow: 0 0 8px var(--ld-primary-glow);
+}
+
+/* danger: destructive action (delete, remove) — faint at rest, red on hover */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--danger:hover,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn--danger:focus-visible {
+  color: var(--ld-danger);
+}
+
+/* disabled: dimmed and inert — hover never lights it; [aria-disabled] covers <a> */
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn:disabled,
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-disabled="true"] {
+  opacity: 0.4;
+  color: var(--ld-faint);
+  background: none;
+  box-shadow: none;
+  transform: none;
+  cursor: not-allowed;
+}
+:where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn[aria-disabled="true"] {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="neon-butterfly"], [data-ld-style="neon-butterfly"] *).ld-icon-btn {
+    transition: none;
+  }
+}