@aortl/admin-css 0.14.1 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",

package/src/components/accordion.css

@@ -26,7 +26,7 @@
            px-4 py-3 cursor-pointer select-none
            text-sm font-medium text-text
            hover:bg-surface-muted
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
   }
 

package/src/components/alert.css

@@ -46,51 +46,33 @@
     min-width: 0;
   }
 
+  /* Solid status fill — the variant color carries the signal, and the title,
+     leading icon, and body all sit on top in the matching `-content` color
+     (white on the colored accents, black on bright yellow). Title/icon inherit
+     that content color from the root, so no per-variant text rule is needed.
+     The description drops to 85% opacity to read as secondary text without
+     introducing a second hue. */
   .alert-info {
-    @apply bg-info-muted border-info-muted;
+    @apply bg-info border-info text-info-content;
   }
 
   .alert-success {
-    @apply bg-success-muted border-success-muted;
+    @apply bg-success border-success text-success-content;
   }
 
   .alert-warning {
-    @apply bg-warning-muted border-warning-muted;
+    @apply bg-warning border-warning text-warning-content;
   }
 
   .alert-danger {
-    @apply bg-danger-muted border-danger-muted;
+    @apply bg-danger border-danger text-danger-content;
   }
 
   .alert-title {
     @apply font-medium;
   }
 
-  .alert-info .alert-title,
-  .alert-info > :is(i, svg):first-child {
-    @apply text-info;
-  }
-
-  .alert-success .alert-title,
-  .alert-success > :is(i, svg):first-child {
-    @apply text-success;
-  }
-
-  /* Warning title/icon use `text-text` rather than `text-warning`: the warning
-     accent is yellow-400 in both modes, which fails AA contrast against the
-     muted yellow background in light mode. The muted bg + border still carry
-     the warning signal. */
-  .alert-warning .alert-title,
-  .alert-warning > :is(i, svg):first-child {
-    @apply text-text;
-  }
-
-  .alert-danger .alert-title,
-  .alert-danger > :is(i, svg):first-child {
-    @apply text-danger;
-  }
-
   .alert-description {
-    @apply text-text-muted;
+    opacity: 0.85;
   }
 }

package/src/components/badge.css

@@ -12,30 +12,28 @@
     flex-shrink: 0;
   }
 
-  /* Variants — match the alert palette so danger/success/etc. stay coherent
-     across status indicators and chips in tables. The bare `.badge` (no
-     modifier) renders the neutral look, now folded into the base. */
+  /* Variants — solid status fills, matching the alert palette so danger/
+     success/etc. stay coherent across status indicators and chips in tables.
+     Each sits on the full-strength status color with the matching `-content`
+     text (white on the colored accents, black on bright yellow). The bare
+     `.badge` (no modifier) renders the neutral look, folded into the base. */
   .badge-info {
-    @apply bg-info-muted text-info border-info-muted;
+    @apply bg-info text-info-content border-info;
   }
 
   .badge-success {
-    @apply bg-success-muted text-success border-success-muted;
+    @apply bg-success text-success-content border-success;
   }
 
-  /* Warning text uses `text-text` rather than `text-warning`: the warning
-     accent is yellow-400 in both modes, which fails AA contrast against the
-     muted yellow background in light mode. The muted bg + border still carry
-     the warning signal. */
   .badge-warning {
-    @apply bg-warning-muted text-text border-warning-muted;
+    @apply bg-warning text-warning-content border-warning;
   }
 
   .badge-danger {
-    @apply bg-danger-muted text-danger border-danger-muted;
+    @apply bg-danger text-danger-content border-danger;
   }
 
-  /* Solid variants — for stronger visual weight (counts on tabs, etc.) */
+  /* Solid neutral — high-contrast ink fill (counts on tabs, etc.) */
   .badge-primary {
     @apply bg-primary text-primary-content;
   }

package/src/components/breadcrumbs.css

@@ -11,7 +11,7 @@
     @apply inline-flex items-center gap-1.5
            text-text-muted no-underline
            hover:text-text
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   /* `aria-current` on the last item promotes it to body text weight. Non-links

package/src/components/button.css

@@ -6,7 +6,7 @@
            bg-surface-muted text-text hover:bg-surface-strong
            transition-colors duration-150
            cursor-pointer select-none
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 

package/src/components/chart.css

@@ -15,7 +15,7 @@
    *            `--donut-segments` (CSS can't sum a variable-length sibling
    *            list, so the string arrives whole).
    *
-   * Colour: single-series follows `currentColor` (default `--color-primary`,
+   * Colour: single-series follows `currentColor` (default `--color-info`,
    * recoloured by the `.chart-success`/etc. variants like `.progress`).
    * Multi-series colours are set inline per bar/segment (`--bar-color` /
    * `--segment-color` / legend `--legend-color`); there is no chart token
@@ -30,7 +30,7 @@
     --chart-height: 8rem; /* bar track cross-axis size (md) */
     --chart-size: 8rem; /* donut diameter (md) */
     --chart-gap: 0.25rem;
-    color: var(--color-primary);
+    color: var(--color-info);
   }
 
   /* Single-series semantic variants — recolour currentColor, like progress. */

package/src/components/checkbox.css

@@ -4,7 +4,7 @@
            rounded-sm border bg-surface
            cursor-pointer
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 

package/src/components/dialog.css

@@ -90,6 +90,6 @@
            hover:bg-surface-strong hover:text-text
            cursor-pointer
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 }

package/src/components/file-input.css

@@ -4,7 +4,7 @@
            bg-surface text-text
            border border-border hover:border-border-strong rounded-lg overflow-hidden
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed
            file:px-3 file:py-2 file:mr-3
            file:text-sm file:font-medium file:leading-none

package/src/components/footer.css

@@ -16,7 +16,7 @@
   .footer-link {
     @apply text-text-muted no-underline
            hover:text-text hover:underline
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            rounded-sm;
   }
 

package/src/components/input.css

@@ -6,7 +6,7 @@
            border border-border hover:border-border-strong
            transition-colors duration-150
            placeholder:text-text-muted
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 

package/src/components/link.css

@@ -1,10 +1,10 @@
 @layer components {
   .link {
     @apply inline-flex items-center gap-1
-           text-primary underline underline-offset-2
+           text-link underline underline-offset-2
            rounded-sm transition-colors duration-150
-           hover:text-primary-hover
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           hover:text-link-hover
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   /* Keep a leading icon from squishing when the link text wraps. The trailing

package/src/components/menu.css

@@ -11,7 +11,7 @@
     @apply inline-flex items-center gap-1.5
            cursor-pointer select-none
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
   }
 

package/src/components/navbar.css

@@ -23,7 +23,7 @@
            hover:bg-surface-strong
            cursor-pointer select-none
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   .navbar-item[aria-current="page"],
@@ -49,7 +49,7 @@
            rounded-md text-text bg-transparent
            hover:bg-surface-strong
            cursor-pointer
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   .navbar-mobile-toggle::before {

package/src/components/pagination.css

@@ -19,7 +19,7 @@
            hover:bg-surface-muted
            cursor-pointer select-none no-underline
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 

package/src/components/progress.css

@@ -12,7 +12,7 @@
     border-radius: 9999px;
     overflow: hidden;
     background-color: var(--color-surface-strong);
-    color: var(--color-primary);
+    color: var(--color-info);
   }
 
   .progress::-webkit-progress-bar {

package/src/components/property-list.css

@@ -73,7 +73,7 @@
            ml-auto rounded
            cursor-pointer border-0 bg-transparent
            text-text-muted hover:text-text
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     display: none;
     flex-shrink: 0;
     padding: 0.125rem;

package/src/components/radio.css

@@ -4,7 +4,7 @@
            rounded-full border bg-surface
            cursor-pointer
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 

package/src/components/select.css

@@ -6,12 +6,12 @@
            border border-border hover:border-border-strong
            cursor-pointer select-none
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
   .select[data-popup-open] {
-    @apply outline-2 outline-offset-2 outline-primary;
+    @apply outline-2 outline-offset-2 outline-focus;
   }
 
   .select[data-placeholder] {

package/src/components/sidebar.css

@@ -66,7 +66,7 @@
            bg-transparent hover:bg-surface-strong
            cursor-pointer select-none no-underline
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   .sidebar-item[aria-current="page"],
@@ -105,7 +105,7 @@
            bg-transparent hover:bg-surface-strong
            cursor-pointer select-none
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
   }
 
@@ -160,7 +160,7 @@
            bg-transparent hover:bg-surface-strong
            cursor-pointer select-none no-underline
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
   .sidebar-subitem[aria-current="page"],
@@ -182,7 +182,7 @@
   }
 
   .sidebar-collapse-toggle:has(.sidebar-toggle:focus-visible) {
-    @apply outline-2 outline-offset-2 outline-primary;
+    @apply outline-2 outline-offset-2 outline-focus;
   }
 
   /* Chevron-left when expanded; flips to chevron-right when collapsed. */

package/src/components/switch.css

@@ -4,7 +4,7 @@
            rounded-full border border-transparent
            cursor-pointer
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 

package/src/components/table.css

@@ -119,6 +119,6 @@
     @apply absolute inset-0;
   }
   .table-row-link:focus-within {
-    @apply outline-2 -outline-offset-2 outline-primary;
+    @apply outline-2 -outline-offset-2 outline-focus;
   }
 }

package/src/components/tabs.css

@@ -9,7 +9,7 @@
      page (e.g. Starlight's own <Tabs> component) doesn't pick them up. */
   .tabs .tab-list {
     @apply inline-flex items-center gap-1 border-b border-border;
-    /* Anchor for the optional .tab-indicator */
+    /* Containing block for the sliding ::before marker (see @supports below) */
     position: relative;
   }
 
@@ -20,7 +20,7 @@
            text-text-muted bg-transparent
            border-0 cursor-pointer select-none
            transition-colors duration-150
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            hover:text-text
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
@@ -54,7 +54,7 @@
   }
 
   .tabs .tab-input:focus-visible + .tab {
-    @apply outline-2 outline-offset-2 outline-primary;
+    @apply outline-2 outline-offset-2 outline-focus;
   }
 
   /* Default — underline marker on the active tab. The pseudo sits below the
@@ -86,8 +86,10 @@
     @apply gap-0 p-0.5 border border-border rounded-md bg-surface-muted;
   }
 
+  /* Sit above the sliding thumb (the anchored ::before below) so labels stay
+     legible while it passes behind them. */
   .tabs-boxed .tab {
-    @apply rounded;
+    @apply rounded relative z-[1];
   }
 
   .tabs-boxed .tab[data-selected],
@@ -96,6 +98,83 @@
     @apply bg-surface text-text shadow-sm;
   }
 
+  /* Sliding active marker — the default, with zero extra DOM. The selected tab
+     becomes a CSS anchor; a single pseudo on the .tab-list tracks it via
+     anchor() insets, and the browser interpolates those insets as the anchor
+     moves between tabs — so vanilla `:checked` markup and React both slide.
+     `anchor-scope` confines the name to each list so multiple tab sets on a
+     page don't cross-anchor; gating the whole block on its support keeps the
+     effect off where it'd misbehave, leaving the per-tab marker above as the
+     fallback. */
+  @supports (anchor-scope: --x) {
+    .tabs .tab-list {
+      anchor-scope: --tab-thumb;
+    }
+
+    .tabs .tab[data-selected],
+    .tabs .tab[aria-selected="true"],
+    .tabs .tab-input:checked + .tab {
+      anchor-name: --tab-thumb;
+    }
+
+    .tabs .tab-list::before {
+      content: "";
+      position: absolute;
+      position-anchor: --tab-thumb;
+    }
+
+    /* Bordered: a 2px bar sliding along the list's bottom edge — replaces the
+       per-tab ::after grow. */
+    .tabs:not(.tabs-boxed) .tab::after {
+      display: none;
+    }
+
+    .tabs:not(.tabs-boxed) .tab-list::before {
+      @apply bg-primary;
+      left: anchor(left);
+      right: anchor(right);
+      inset-block-end: -1px;
+      block-size: 2px;
+      transition:
+        left 180ms ease,
+        right 180ms ease;
+    }
+
+    /* Vertical bordered: bar on the trailing edge, sliding vertically. */
+    .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab-list::before {
+      inset-inline: auto;
+      inset-inline-end: -1px;
+      inline-size: 2px;
+      top: anchor(top);
+      bottom: anchor(bottom);
+      block-size: auto;
+      transition:
+        top 180ms ease,
+        bottom 180ms ease;
+    }
+
+    /* Boxed: a full-size thumb sliding behind the active label. */
+    .tabs-boxed .tab[data-selected],
+    .tabs-boxed .tab[aria-selected="true"],
+    .tabs-boxed .tab-input:checked + .tab {
+      @apply bg-transparent shadow-none;
+    }
+
+    .tabs-boxed .tab-list::before {
+      top: anchor(top);
+      right: anchor(right);
+      bottom: anchor(bottom);
+      left: anchor(left);
+      z-index: 0;
+      @apply rounded bg-surface shadow-sm;
+      transition:
+        top 180ms ease,
+        right 180ms ease,
+        bottom 180ms ease,
+        left 180ms ease;
+    }
+  }
+
   /* Full width — list stretches across the container, tabs share space evenly. */
   .tabs-full-width:not([data-orientation="vertical"]) .tab-list {
     @apply flex w-full;
@@ -167,4 +246,11 @@
   .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
     transform: scaleY(1);
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tabs .tab-list::before,
+    .tabs:not(.tabs-boxed) .tab::after {
+      transition: none;
+    }
+  }
 }

package/src/components/textarea.css

@@ -6,7 +6,7 @@
            border border-border hover:border-border-strong
            transition-colors duration-150
            placeholder:text-text-muted
-           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary
+           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 

package/src/theme.css

@@ -219,12 +219,25 @@
   --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));
 
-  /* Primary — Flexoki blue */
-  --color-primary: light-dark(var(--color-blue-600), var(--color-blue-400));
-  --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
-  --color-primary-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
+  /* 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`
+     moves *toward* the surface (you can't darken past ink), and `-muted` is a
+     neutral gray wash — `bg-primary-muted` selected/active states read as a
+     quiet fill rather than a colored highlight. The interactive blue that used
+     to live here now drives `--color-link` / `--color-focus` and `info`. */
+  --color-primary: light-dark(var(--color-black), var(--color-paper));
+  --color-primary-hover: light-dark(var(--color-base-800), var(--color-base-200));
+  --color-primary-muted: light-dark(var(--color-base-150), var(--color-base-800));
   --color-primary-content: light-dark(var(--color-paper), var(--color-black));
 
+  /* Link / focus — the interactive blue (Flexoki blue, formerly `primary`).
+     Split into two tokens so link text and focus rings can be retinted
+     independently of the `info` status color, even though both start blue. */
+  --color-link: light-dark(var(--color-blue-600), var(--color-blue-400));
+  --color-link-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-focus: light-dark(var(--color-blue-600), var(--color-blue-400));
+
   /* System accent — per-app brand signal. Drives the navbar's 2px bottom
      stripe and the footer's matching top stripe (both always on), plus
      `.brand-tile` backgrounds. Defaults to a neutral gray so an un-branded
@@ -267,10 +280,10 @@
   --color-warning-muted: light-dark(var(--color-yellow-50), var(--color-yellow-950));
   --color-warning-content: var(--color-black);
 
-  /* Info — cyan */
-  --color-info: light-dark(var(--color-cyan-600), var(--color-cyan-400));
-  --color-info-hover: light-dark(var(--color-cyan-700), var(--color-cyan-300));
-  --color-info-muted: light-dark(var(--color-cyan-50), var(--color-cyan-950));
+  /* Info — Flexoki blue (the calm "FYI" status color) */
+  --color-info: light-dark(var(--color-blue-600), var(--color-blue-400));
+  --color-info-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-info-muted: light-dark(var(--color-blue-50), var(--color-blue-950));
   --color-info-content: light-dark(var(--color-paper), var(--color-black));
 }
 

package/src/utilities.css

@@ -151,6 +151,11 @@
   "{,hover:,focus:,focus-visible:,active:}{bg,text,border,outline,ring,shadow}-{primary,system-accent,danger,success,warning,info}{,-hover,-muted,-content}"
 );
 
+/* Link / focus — interactive blue. Narrower shapes than the accents above:
+   focus rings only need `outline-focus`, links only `text-link{,-hover}`. */
+@source inline("{,focus-visible:}outline-focus");
+@source inline("{,hover:,focus-visible:}text-link{,-hover}");
+
 /* Cursor + opacity — interactive */
 @source inline(
   "{,hover:,focus:,focus-visible:,active:}cursor-{auto,default,pointer,wait,text,move,help,not-allowed,none,progress,grab,grabbing,col-resize,row-resize,zoom-in,zoom-out}"