@aortl/admin-css 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.11.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/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/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/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}");
@@ -116,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(