@aortl/admin-css 0.15.1 → 0.16.0

package/src/components/chart.css

@@ -33,7 +33,9 @@
     color: var(--color-info);
   }
 
-  /* Single-series semantic variants — recolour currentColor, like progress. */
+  /* Single-series semantic variants — recolour currentColor, like progress.
+     `info` is the base colour (`.chart` above), so it needs no class — the
+     default `variant="info"` simply emits no modifier. */
   .chart-success {
     color: var(--color-success);
   }
@@ -43,9 +45,6 @@
   .chart-danger {
     color: var(--color-danger);
   }
-  .chart-info {
-    color: var(--color-info);
-  }
 
   /* --------------------------------------------------------------------- *
    * BAR CHART — horizontal (default)                                      *

package/src/components/checkbox.css

@@ -25,6 +25,30 @@
     @apply inline-flex items-center justify-center size-3 text-primary-content;
   }
 
+  /* Native input variant: state is driven by :checked / :indeterminate, the
+     glyph is masked onto ::after. Mirrors the Base UI button variant above so a
+     vanilla <input class="checkbox"> renders identically (indeterminate reads
+     the same as checked, matching the data-* rule). The mask is the same
+     checkmark polyline the React indicator draws. */
+  input.checkbox {
+    @apply appearance-none border-border-strong hover:border-text-muted;
+    --checkbox-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  }
+
+  input.checkbox:checked,
+  input.checkbox:indeterminate {
+    @apply bg-primary border-primary hover:bg-primary-hover;
+  }
+
+  input.checkbox:checked::after,
+  input.checkbox:indeterminate::after {
+    content: "";
+    @apply size-3;
+    background-color: var(--color-primary-content);
+    -webkit-mask: var(--checkbox-check) center / contain no-repeat;
+    mask: var(--checkbox-check) center / contain no-repeat;
+  }
+
   /* A <label> wrapping a checkbox + text lays out inline with a small gap.
      Covers both the vanilla input.checkbox and Base UI's button.checkbox. */
   label:has(> .checkbox) {

package/src/components/dialog.css

@@ -26,7 +26,7 @@
   }
 
   .dialog::backdrop {
-    background: rgb(0 0 0 / 0.4);
+    background: var(--color-scrim);
     transition:
       display 150ms allow-discrete,
       overlay 150ms allow-discrete,
@@ -40,7 +40,7 @@
       transform: translateY(-0.5rem) scale(0.98);
     }
     .dialog[open]::backdrop {
-      background: rgb(0 0 0 / 0);
+      background: transparent;
     }
   }
 
@@ -66,8 +66,18 @@
     @apply px-5 -mt-2 mb-3 text-sm text-text-muted;
   }
 
+  /* `flex-1 min-h-0` lets the body fill the remaining height and shrink below
+     its content (a flex item's default `min-height: auto` would refuse to), so
+     tall content scrolls here while the header/footer stay pinned. */
   .dialog-body {
-    @apply px-5 py-3 overflow-y-auto flex flex-col gap-3;
+    @apply flex-1 min-h-0 px-5 py-3 overflow-y-auto flex flex-col gap-3;
+  }
+
+  /* When the body is wrapped in a `<form>` (the form-dialog pattern), the form
+     becomes the dialog's sole flex child — make it the flex column so the body's
+     `flex-1 min-h-0` still resolves and scrolls. */
+  .dialog > form {
+    @apply flex flex-col min-h-0 flex-1;
   }
 
   .dialog-footer {

package/src/components/index.css

@@ -34,4 +34,5 @@
 @import "./table.css";
 @import "./tooltip.css";
 @import "./code-block.css";
+@import "./prose.css";
 @import "./chart.css";

package/src/components/kbd.css

@@ -7,8 +7,7 @@
            rounded border border-border
            bg-surface-strong text-text-muted
            text-[0.75em] font-mono leading-none align-middle
-           whitespace-nowrap;
-    font-variant-numeric: tabular-nums;
+           whitespace-nowrap tabular-nums;
   }
 
   /* Cluster of `.kbd` chips. Always emitted by the React `<Kbd>` component so

package/src/components/property-list.css

@@ -1,5 +1,5 @@
 @layer components {
-  /* Outer section — owns striped, copyable, hide-if-empty modifiers. Title
+  /* Outer section — owns striped, hide-if-empty modifiers. Title
      (optional) and the items grid stack vertically. */
   .property-list {
     @apply flex flex-col text-sm text-text;
@@ -18,23 +18,18 @@
 
   .property-list-label,
   .property-list-value {
-    display: flex;
-    align-items: center;
-    padding: 0.375rem 0.75rem;
-    min-height: 2rem;
+    @apply flex items-center px-3 py-1.5 min-h-8;
   }
 
   .property-list-label {
     @apply text-text-muted;
   }
 
-  /* `min-width: 0` lets the value's grid track shrink below its content; pair
-     it with `overflow-wrap` so long unbreakable values (IDs, hashes, emails,
-     URLs, file paths) break instead of overflowing the column. */
+  /* `min-w-0` lets the value's grid track shrink below its content; pair it
+     with `break-words` so long unbreakable values (IDs, hashes, emails, URLs,
+     file paths) break instead of overflowing the column. */
   .property-list-value {
-    gap: 0.5rem;
-    min-width: 0;
-    overflow-wrap: break-word;
+    @apply gap-2 min-w-0 break-words;
   }
 
   /* Compact density — tighter rows for sidebar info blocks or very many
@@ -45,8 +40,7 @@
 
   .property-list-compact .property-list-label,
   .property-list-compact .property-list-value {
-    padding: 0.125rem 0.5rem;
-    min-height: 1.5rem;
+    @apply px-2 py-0.5 min-h-6;
   }
 
   /* Numeric — right-align + tabular-nums on the value. */

package/src/components/prose.css

@@ -0,0 +1,115 @@
+@layer components {
+  /*
+   * Long-form rendered HTML — markdown output, CMS bodies, anything you can't
+   * annotate with the system's semantic class names. The global reset strips
+   * margins, list markers, and link styling from bare elements (so admin chrome
+   * stays neutral); `.prose` re-establishes them for its descendants only, using
+   * the semantic tokens so it follows dark mode and `--color-*` overrides.
+   *
+   * Descendant rules use `:where()` to stay at specificity 0 — a consumer's own
+   * `.prose a { … }` wins without `!important`.
+   */
+  .prose {
+    @apply text-sm leading-normal text-text;
+  }
+
+  /* Vertical rhythm — space between flow blocks, none at the container edges. */
+  .prose :where(p, ul, ol, blockquote, pre, table, figure) {
+    @apply my-3;
+  }
+  .prose > :first-child {
+    margin-top: 0;
+  }
+  .prose > :last-child {
+    margin-bottom: 0;
+  }
+
+  /* Headings — base.css already sizes h1–h3; here we add h4–h6 and the
+     sectioning rhythm. The edge reset above zeroes a leading heading's margin. */
+  .prose :where(h1, h2, h3, h4, h5, h6) {
+    @apply mt-6 mb-2 font-semibold leading-tight;
+  }
+  .prose :where(h4) {
+    @apply text-sm;
+  }
+  .prose :where(h5, h6) {
+    @apply text-xs uppercase tracking-wide text-text-muted;
+  }
+
+  /* Lists — restore the markers the reset removes. */
+  .prose :where(ul) {
+    @apply list-disc ps-5;
+  }
+  .prose :where(ol) {
+    @apply list-decimal ps-5;
+  }
+  .prose :where(li) {
+    @apply my-1;
+  }
+  /* Loose lists wrap each item's text in <p> — tighten those back down. */
+  .prose :where(li) :where(p) {
+    @apply my-1;
+  }
+  /* Nested lists hug their parent item rather than taking full block spacing. */
+  .prose :where(li > ul, li > ol) {
+    @apply my-1;
+  }
+
+  /* Links — the .link treatment without needing the class on every anchor. */
+  .prose :where(a) {
+    @apply rounded-sm text-link underline underline-offset-2
+           hover:text-link-hover
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
+  }
+
+  /* Inline code — a tinted chip. */
+  .prose :where(code) {
+    @apply rounded border border-border bg-code-surface px-1 py-0.5
+           font-mono text-code-text;
+    font-size: 0.85em;
+  }
+
+  /* Code blocks — the .code-block surface; strip the inline chip off nested
+     <code> so a highlighter's own tokens show through. */
+  .prose :where(pre) {
+    @apply rounded-lg bg-code-surface p-3 font-mono text-sm text-code-text;
+    white-space: pre;
+    overflow-x: auto;
+  }
+  .prose :where(pre) code {
+    @apply rounded-none border-0 bg-transparent p-0;
+    font-size: inherit;
+  }
+
+  /* Blockquote — a quiet inline-start rule. */
+  .prose :where(blockquote) {
+    @apply border-s-2 border-border-strong ps-3 text-text-muted;
+  }
+
+  /* Thematic break. */
+  .prose :where(hr) {
+    @apply my-6 border-0 border-t border-border;
+  }
+
+  /* Tables — adopt the .table look for markdown's simple grids. */
+  .prose :where(table) {
+    @apply w-full border-collapse text-sm;
+  }
+  .prose :where(th, td) {
+    @apply border-b border-border px-3 py-2 text-start align-top;
+  }
+  .prose :where(thead th) {
+    @apply font-semibold text-text-muted;
+  }
+
+  /* Media + emphasis. */
+  .prose :where(img) {
+    @apply h-auto max-w-full rounded-md;
+  }
+  .prose :where(figcaption) {
+    @apply mt-1 text-xs text-text-muted;
+  }
+  .prose :where(strong) {
+    @apply font-semibold;
+  }
+}

package/src/components/radio.css

@@ -24,6 +24,23 @@
     @apply inline-flex size-1.5 rounded-full bg-primary-content;
   }
 
+  /* Native input variant: state is driven by :checked, the dot is ::after.
+     Mirrors the Base UI span variant above so a vanilla <input class="radio">
+     renders identically (the dot matches .radio-indicator's size + colour). */
+  input.radio {
+    @apply appearance-none border-border-strong hover:border-text-muted;
+  }
+
+  input.radio:checked {
+    @apply bg-primary border-primary hover:bg-primary-hover;
+  }
+
+  input.radio:checked::after {
+    content: "";
+    @apply size-1.5 rounded-full;
+    background-color: var(--color-primary-content);
+  }
+
   .radio-group {
     @apply inline-flex flex-wrap gap-4;
   }

package/src/components/select.css

@@ -37,12 +37,16 @@
 
   /* Native <select> usage: same class, but suppress the native chevron and
      supply our own via background-image so the look matches the Base UI
-     trigger. Chevron stroke uses Flexoki base-500, which reads as neutral
-     in both light and dark mode. */
+     trigger. A bare native <select> is a replaced element and can't host a
+     tinted `::after` (the React trigger uses a real `.select-icon` SVG), and
+     data URIs can't read CSS variables — so the chevron can't ride the
+     `--color-text-muted` token directly. The stroke is Flexoki `base-500`
+     (#848484), the same mid-gray as the token's dark-mode value, which reads
+     as a neutral chevron in both light and dark mode. */
   select.select {
     appearance: none;
     padding-right: 2rem;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23878580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848484' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
     background-repeat: no-repeat;
     background-position: right 0.5rem center;
     background-size: 1rem;

package/src/components/sidebar.css

@@ -202,7 +202,7 @@
 
   /* Mobile drawer surface (rendered inside a Base UI Dialog) */
   .sidebar-drawer-backdrop {
-    @apply fixed inset-0 z-40 bg-black/40
+    @apply fixed inset-0 z-40 bg-scrim
            transition-opacity duration-150;
   }
 

package/src/components/tabs.css

@@ -198,7 +198,7 @@
     @apply pt-3 outline-none;
   }
 
-  /* Vanilla radio-input pattern: only the panel whose data-for matches the
+  /* Vanilla radio-input pattern: only the panel whose data-value matches the
      checked input is shown. Each .tabs root scopes its own selectors. */
   .tabs .tab-panel {
     display: none;

package/src/components/textarea.css

@@ -33,9 +33,9 @@
   }
 
   /* Grow with content (Chromium 123+; degrades to a fixed resizable box
-     elsewhere). `min-h-*` / the `rows` attribute stays the floor; cap growth
-     with a consumer `max-height`. Manual drag-resize is off — height is
-     content-driven. */
+     elsewhere). The floor is the larger of the base `min-h-*` and the `rows`
+     attribute; cap growth with a consumer `max-height`. Manual drag-resize is
+     off — height is content-driven. */
   .textarea-autosize {
     field-sizing: content;
     resize: none;

package/src/theme.css

@@ -219,6 +219,11 @@
   --color-code-surface: light-dark(var(--color-base-150), var(--color-base-950));
   --color-code-text: light-dark(var(--color-base-800), var(--color-base-200));
 
+  /* Modal scrim — the dimming layer behind a `<dialog>` and the mobile
+     sidebar drawer. One tint from black so both overlays match and stay
+     retintable from a single token. */
+  --color-scrim: color-mix(in oklab, var(--color-black) 40%, transparent);
+
   /* Primary — high-contrast neutral (ink). Inverts with the mode: near-black
      on light surfaces, near-white on dark ones, so a solid `btn-primary` fill
      always reads against the surface. Unlike the colored accents, `-hover`