@aortl/admin-css 0.10.0 → 0.12.0

package/package.json

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

package/src/components/badge.css

@@ -3,15 +3,13 @@
     @apply inline-flex items-center justify-center gap-1
            px-2 h-5 rounded-full
            text-xs font-medium leading-none whitespace-nowrap
-           border border-transparent;
+           border border-transparent
+           bg-surface-strong text-text;
   }
 
   /* Variants — match the alert palette so danger/success/etc. stay coherent
-     across status indicators and chips in tables. */
-  .badge-neutral {
-    @apply bg-surface-strong text-text;
-  }
-
+     across status indicators and chips in tables. The bare `.badge` (no
+     modifier) renders the neutral look, now folded into the base. */
   .badge-info {
     @apply bg-info-muted text-info border-info-muted;
   }

package/src/components/button.css

@@ -2,28 +2,27 @@
   .btn {
     @apply inline-flex items-center justify-center gap-2 px-4 py-2
            rounded-lg font-medium text-sm leading-none
-           border border-transparent
+           border border-border
+           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
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Variants */
+  /* Variants — the bare `.btn` (no modifier) is the low-emphasis default, so
+     most admin buttons need no variant class. The colored variants reset the
+     border to transparent since the base now carries a visible one. */
   .btn-primary {
-    @apply bg-primary text-primary-content hover:bg-primary-hover;
-  }
-
-  .btn-secondary {
-    @apply bg-surface-muted text-text border-border hover:bg-surface-strong;
+    @apply bg-primary text-primary-content border-transparent hover:bg-primary-hover;
   }
 
   .btn-ghost {
-    @apply bg-transparent text-text hover:bg-surface-muted;
+    @apply bg-transparent text-text border-transparent hover:bg-surface-muted;
   }
 
   .btn-danger {
-    @apply bg-danger text-danger-content hover:opacity-90;
+    @apply bg-danger text-danger-content border-transparent hover:opacity-90;
   }
 
   /* Sizes (md is the default; modifiers override) */

package/src/components/card.css

@@ -1,7 +1,7 @@
 @layer components {
   .card {
     @apply flex flex-col
-           bg-surface text-text
+           bg-surface-strong text-text
            border border-border
            rounded-xl
            shadow-xs
@@ -45,4 +45,55 @@
   .card-bordered {
     @apply shadow-none border-border-strong;
   }
+
+  /* Neutral variant — sits flush with the page (`--color-surface`, the same
+     fill as `html`/`.app-shell`) instead of the raised `surface-strong` of a
+     default card. For de-emphasised or grouped panels that shouldn't pop off
+     the background. No accent, no status meaning. */
+  .card-muted {
+    @apply bg-surface;
+  }
+
+  /* Color variants — tinted surface + matching border, mirroring Alert. The
+     title (and any leading icon, via `currentColor`) picks up the accent for
+     fast scanning. */
+  .card-primary {
+    @apply bg-primary-muted border-primary-muted;
+  }
+
+  .card-info {
+    @apply bg-info-muted border-info-muted;
+  }
+
+  .card-success {
+    @apply bg-success-muted border-success-muted;
+  }
+
+  .card-warning {
+    @apply bg-warning-muted border-warning-muted;
+  }
+
+  .card-danger {
+    @apply bg-danger-muted border-danger-muted;
+  }
+
+  .card-primary .card-title {
+    @apply text-primary;
+  }
+
+  .card-info .card-title {
+    @apply text-info;
+  }
+
+  .card-success .card-title {
+    @apply text-success;
+  }
+
+  .card-danger .card-title {
+    @apply text-danger;
+  }
+
+  /* `card-warning` keeps its title at `text-text`: the warning accent is
+     yellow-400 in both modes and fails AA contrast on the muted yellow
+     surface. The tinted bg still carries the warning signal. */
 }

package/src/components/container.css

@@ -0,0 +1,35 @@
+@layer components {
+  /* Page content region — a centered, max-width column that also owns the
+     vertical rhythm between stacked page sections. Drop it inside the bare
+     `.app-shell-main` (which has no padding of its own). Width presets just
+     set `--container-max`; override the var per-instance to deviate. */
+  .container {
+    @apply flex flex-col gap-6 w-full mx-auto px-6 py-6;
+    max-width: var(--container-max, 90rem);
+  }
+
+  .container-sm {
+    --container-max: 60rem;
+  }
+
+  .container-lg {
+    --container-max: 115rem;
+  }
+
+  /* Full-bleed: edge-to-edge within `main`, padding retained. */
+  .container-fluid {
+    --container-max: none;
+  }
+
+  /* Denser vertical rhythm + tighter block padding for packed screens. */
+  .container-compact {
+    @apply gap-4 py-4;
+  }
+
+  /* Less horizontal padding on small viewports — reuses the shell breakpoint. */
+  @media (max-width: 48rem) {
+    .container {
+      @apply px-4;
+    }
+  }
+}

package/src/components/file-input.css

@@ -2,7 +2,7 @@
   .file-input {
     @apply inline-flex items-center w-full pr-3 text-sm leading-none
            bg-surface text-text
-           border border-transparent rounded-lg overflow-hidden
+           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
            disabled:opacity-50 disabled:cursor-not-allowed
@@ -13,16 +13,12 @@
            file:cursor-pointer;
   }
 
-  .file-input-bordered {
-    @apply border-border hover:border-border-strong;
-  }
-
   .file-input-ghost {
-    @apply bg-transparent hover:bg-surface-muted;
+    @apply bg-transparent border-transparent hover:bg-surface-muted hover:border-transparent;
   }
 
   .file-input-danger {
-    @apply border-danger focus-visible:outline-danger;
+    @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
   /* Sizes */

package/src/components/index.css

@@ -1,6 +1,7 @@
 @import "./accordion.css";
 @import "./alert.css";
 @import "./app-shell.css";
+@import "./container.css";
 @import "./badge.css";
 @import "./brand-tile.css";
 @import "./kbd.css";

package/src/components/input.css

@@ -3,23 +3,19 @@
     @apply inline-flex items-center w-full px-3 py-2
            rounded-lg text-sm leading-none
            bg-surface text-text
-           border border-transparent
+           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
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
-  .input-bordered {
-    @apply border-border hover:border-border-strong;
-  }
-
   .input-ghost {
-    @apply bg-transparent hover:bg-surface-muted;
+    @apply bg-transparent border-transparent hover:bg-surface-muted hover:border-transparent;
   }
 
   .input-danger {
-    @apply border-danger focus-visible:outline-danger;
+    @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
   /* Sizes */

package/src/components/select.css

@@ -3,7 +3,7 @@
     @apply inline-flex items-center justify-between gap-2 w-full px-3 py-2
            rounded-lg text-sm leading-none text-left
            bg-surface text-text
-           border border-transparent
+           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
@@ -18,16 +18,12 @@
     @apply text-text-muted;
   }
 
-  .select-bordered {
-    @apply border-border hover:border-border-strong;
-  }
-
   .select-ghost {
-    @apply bg-transparent hover:bg-surface-muted;
+    @apply bg-transparent border-transparent hover:bg-surface-muted hover:border-transparent;
   }
 
   .select-danger {
-    @apply border-danger focus-visible:outline-danger;
+    @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
   /* Sizes */

package/src/components/stat-card.css

@@ -1,11 +1,13 @@
 @layer components {
+  /* A KPI tile is a `.card` shell with no inner `.card-body` — label / value /
+     detail stack directly on the card. Pair `.stat-card` with `.card` in the
+     markup so it inherits the surface, border, radius, and shadow, plus every
+     card modifier: `.card-bordered`, `.card-compact`, and the color variants
+     (`.card-primary`, `.card-muted`, …). `.stat-card` only adds the flat inner
+     padding/gap and the inverted hierarchy (the value dominates, the label is a
+     small annotation). */
   .stat-card {
-    @apply flex flex-col gap-1
-           p-4
-           bg-surface text-text
-           border border-border
-           rounded-xl
-           shadow-xs;
+    @apply gap-1 p-4;
   }
 
   .stat-card-label {
@@ -20,12 +22,31 @@
     @apply text-sm text-text-muted;
   }
 
-  /* Modifiers — mirror `.card`. */
-  .stat-card-compact {
+  /* `.card-compact` tightens `.card-body`, but a stat card has no body — apply
+     the same padding step to the stat-card root, with a tighter gap to match. */
+  .card-compact.stat-card {
     @apply p-3 gap-0.5;
   }
 
-  .stat-card-bordered {
-    @apply shadow-none border-border-strong;
+  /* Color variants (`.card-primary`, `.card-success`, …) supply the tinted
+     surface + border via `.card`. Here we tint the value to the matching accent
+     — the headline metric is a stat card's analog of `.card-title`, so a status
+     KPI reads its colour at a glance. `warning` is skipped for the same reason
+     `.card-warning` skips its title: yellow-400 fails AA on the muted yellow
+     surface. The tinted surface still carries the warning signal. */
+  .card-primary .stat-card-value {
+    @apply text-primary;
+  }
+
+  .card-info .stat-card-value {
+    @apply text-info;
+  }
+
+  .card-success .stat-card-value {
+    @apply text-success;
+  }
+
+  .card-danger .stat-card-value {
+    @apply text-danger;
   }
 }

package/src/components/tabs.css

@@ -52,14 +52,13 @@
     @apply outline-2 outline-offset-2 outline-primary;
   }
 
-  /* Bordered (default) — underline marker on the active tab. The pseudo sits
-     below the .tab, overlapping the .tab-list bottom border. */
-  .tabs-bordered .tab,
+  /* Default — underline marker on the active tab. The pseudo sits below the
+     .tab, overlapping the .tab-list bottom border. Applies to any tabs root
+     that isn't .tabs-boxed, so the bare `.tabs` default gets it for free. */
   .tabs:not(.tabs-boxed) .tab {
     position: relative;
   }
 
-  .tabs-bordered .tab::after,
   .tabs:not(.tabs-boxed) .tab::after {
     content: "";
     position: absolute;
@@ -71,9 +70,6 @@
     transition: transform 150ms ease;
   }
 
-  .tabs-bordered .tab[data-selected]::after,
-  .tabs-bordered .tab[aria-selected="true"]::after,
-  .tabs-bordered .tab-input:checked + .tab::after,
   .tabs:not(.tabs-boxed) .tab[data-selected]::after,
   .tabs:not(.tabs-boxed) .tab[aria-selected="true"]::after,
   .tabs:not(.tabs-boxed) .tab-input:checked + .tab::after {
@@ -153,7 +149,6 @@
     @apply w-full justify-start;
   }
 
-  .tabs[data-orientation="vertical"].tabs-bordered .tab::after,
   .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab::after {
     inset-inline: auto;
     inset-inline-end: -1px;
@@ -163,8 +158,6 @@
     transform: scaleY(0);
   }
 
-  .tabs[data-orientation="vertical"].tabs-bordered .tab[data-selected]::after,
-  .tabs[data-orientation="vertical"].tabs-bordered .tab[aria-selected="true"]::after,
   .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[data-selected]::after,
   .tabs[data-orientation="vertical"]:not(.tabs-boxed) .tab[aria-selected="true"]::after {
     transform: scaleY(1);

package/src/components/textarea.css

@@ -3,23 +3,19 @@
     @apply block w-full px-3 py-2 min-h-20 resize-y
            rounded-lg text-sm
            bg-surface text-text
-           border border-transparent
+           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
            disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
-  .textarea-bordered {
-    @apply border-border hover:border-border-strong;
-  }
-
   .textarea-ghost {
-    @apply bg-transparent hover:bg-surface-muted;
+    @apply bg-transparent border-transparent hover:bg-surface-muted hover:border-transparent;
   }
 
   .textarea-danger {
-    @apply border-danger focus-visible:outline-danger;
+    @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
   /* Sizes */

package/src/utilities.css

@@ -53,6 +53,9 @@
 @source inline(
   "{,sm:,md:,lg:,xl:,2xl:}{col-span,row-span}-{1,2,3,4,5,6,7,8,9,10,11,12,full,auto}"
 );
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}{col-start,col-end,row-start,row-end}-{1,2,3,4,5,6,7,8,9,10,11,12,13,auto}"
+);
 @source inline("{,sm:,md:,lg:,xl:,2xl:}grid-flow-{row,col,dense,row-dense,col-dense}");
 @source inline("{,sm:,md:,lg:,xl:,2xl:}{auto-cols,auto-rows}-{auto,min,max,fr}");
 @source inline("{,sm:,md:,lg:,xl:,2xl:}order-{1,2,3,4,5,6,7,8,9,10,11,12,first,last,none}");
@@ -77,6 +80,12 @@
 /* Aspect ratio — responsive */
 @source inline("{,sm:,md:,lg:,xl:,2xl:}aspect-{auto,square,video}");
 
+/* Object fit + position (avatars, thumbnails, logos) — responsive */
+@source inline("{,sm:,md:,lg:,xl:,2xl:}object-{contain,cover,fill,none,scale-down}");
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}object-{top,bottom,left,right,center,left-top,left-bottom,right-top,right-bottom}"
+);
+
 /* Translate (x/y only — full transforms intentionally skipped) — responsive */
 @source inline(
   "{,sm:,md:,lg:,xl:,2xl:}translate-{x,y}-{0,0.5,1,1.5,2,3,4,6,8,12,16,20,24,32,1/2,full}"
@@ -85,9 +94,18 @@
 /* Typography (non-size) — no variants */
 @source inline("font-{thin,extralight,light,normal,medium,semibold,bold,extrabold,black}");
 @source inline("font-{sans,mono,serif}");
+@source inline("{italic,not-italic}");
+@source inline("{uppercase,lowercase,capitalize,normal-case}");
+@source inline(
+  "{normal-nums,ordinal,slashed-zero,lining-nums,oldstyle-nums,proportional-nums,tabular-nums}"
+);
 @source inline("leading-{none,tight,snug,normal,relaxed,loose,3,4,5,6,7,8,9,10}");
 @source inline("tracking-{tighter,tight,normal,wide,wider,widest}");
 @source inline("text-{wrap,nowrap,balance,pretty}");
+@source inline("whitespace-{normal,nowrap,pre,pre-line,pre-wrap,break-spaces}");
+@source inline("break-{normal,words,all,keep}");
+@source inline("align-{baseline,top,middle,bottom,text-top,text-bottom,sub,super}");
+@source inline("list-{disc,decimal,none,inside,outside}");
 @source inline("{underline,overline,line-through,no-underline,truncate}");
 
 /* Borders + rounded — interactive */
@@ -101,6 +119,14 @@
   "{,hover:,focus:,focus-visible:,active:}rounded{,-t,-r,-b,-l,-tl,-tr,-br,-bl}{,-none,-sm,-md,-lg,-xl,-2xl,-3xl,-full}"
 );
 
+/* Divide — borders between flex/grid children. Structural separators, so no
+   variants (a divider rarely changes on hover or at a breakpoint). Colors are
+   the two foundation borders only. */
+@source inline("divide-{x,y}{,-0,-2,-4,-8}");
+@source inline("divide-{x,y}-reverse");
+@source inline("divide-{solid,dashed,dotted,double,none}");
+@source inline("divide-{border,border-strong}");
+
 /* Outline + ring — interactive */
 @source inline("{,hover:,focus:,focus-visible:,active:}outline{,-0,-1,-2,-4,-8}");
 @source inline(
@@ -133,5 +159,9 @@
   "{,hover:,focus:,focus-visible:,active:}opacity-{0,5,10,15,20,25,30,40,50,60,70,75,80,90,95,100}"
 );
 
+/* Interaction primitives (select-all an ID cell, disable a layer) — no variants */
+@source inline("pointer-events-{none,auto}");
+@source inline("select-{none,text,all,auto}");
+
 /* Z-index — no variants */
 @source inline("z-{0,10,20,30,40,50,auto}");