@aortl/admin-css 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "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/card.css

@@ -5,7 +5,7 @@
            border border-border
            rounded-xl
            shadow-xs
-           overflow-hidden;
+           overflow-auto;
   }
 
   .card-body {
@@ -29,6 +29,14 @@
     @apply flex items-center gap-1 ml-auto -mt-0.5;
   }
 
+  /* Toolbar buttons run small (usually `btn-sm`, whose icons inherit `text-xs`);
+     bump the glyph to 1rem so the controls stay easy to scan and hit. Both
+     bundles size icons off `font-size` — the Tabler webfont (`<i>`) and React's
+     `size="1em"` SVG — so this single rule enlarges both identically. */
+  .card-toolbar :is(i, svg) {
+    font-size: 1.25rem;
+  }
+
   .card-description {
     @apply text-sm text-text-muted;
   }

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

@@ -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

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}"