@aortl/admin-css 0.8.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",
@@ -32,6 +32,8 @@
     "./admin.min.css": "./dist/admin.min.css",
     "./admin.scoped.css": "./dist/admin.scoped.css",
     "./admin.scoped.min.css": "./dist/admin.scoped.min.css",
+    "./admin.utilities.css": "./dist/admin.utilities.css",
+    "./admin.utilities.min.css": "./dist/admin.utilities.min.css",
     "./src/*": "./src/*"
   },
   "publishConfig": {
@@ -46,9 +48,11 @@
     "vitest": "4.1.6"
   },
   "scripts": {
-    "build": "pnpm build:dev && pnpm build:min && pnpm build:scoped",
+    "build": "pnpm build:dev && pnpm build:min && pnpm build:utilities && pnpm build:utilities:min && pnpm build:scoped",
     "build:dev": "tailwindcss -i ./src/admin.css -o ./dist/admin.css",
     "build:min": "tailwindcss -i ./src/admin.css -o ./dist/admin.min.css --minify",
+    "build:utilities": "tailwindcss -i ./src/utilities.css -o ./dist/admin.utilities.css",
+    "build:utilities:min": "tailwindcss -i ./src/utilities.css -o ./dist/admin.utilities.min.css --minify",
     "build:scoped": "node ./scripts/wrap-scoped.mjs",
     "dev": "tailwindcss -i ./src/admin.css -o ./dist/admin.css --watch",
     "test": "vitest run",

package/src/admin.css

@@ -1,3 +1,5 @@
+@layer theme, base, components, utilities;
+
 @import "tailwindcss";
 
 @source "../../admin-react/src/**/*.{ts,tsx}";

package/src/components/alert.css

@@ -67,9 +67,13 @@
     @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-warning;
+    @apply text-text;
   }
 
   .alert-danger .alert-title,

package/src/components/badge.css

@@ -20,8 +20,12 @@
     @apply bg-success-muted text-success border-success-muted;
   }
 
+  /* 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-warning border-warning-muted;
+    @apply bg-warning-muted text-text border-warning-muted;
   }
 
   .badge-danger {

package/src/components/code-block.css

@@ -0,0 +1,20 @@
+@layer components {
+  .code-block {
+    @apply bg-code-surface text-code-text
+           font-mono text-sm
+           rounded-lg
+           p-3;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow: auto;
+  }
+
+  /* Opt out of wrapping for log-style content where long lines should
+     scroll horizontally instead of breaking. Pair with an inline
+     `max-height` to clamp vertical growth — `overflow: auto` above
+     turns into a scrollbar automatically. */
+  .code-block-nowrap {
+    white-space: pre;
+    word-wrap: normal;
+  }
+}

package/src/components/index.css

@@ -20,6 +20,7 @@
 @import "./switch.css";
 @import "./select.css";
 @import "./card.css";
+@import "./stat-card.css";
 @import "./dialog.css";
 @import "./field.css";
 @import "./file-input.css";
@@ -30,3 +31,4 @@
 @import "./tabs.css";
 @import "./table.css";
 @import "./tooltip.css";
+@import "./code-block.css";

package/src/components/stat-card.css

@@ -0,0 +1,31 @@
+@layer components {
+  .stat-card {
+    @apply flex flex-col gap-1
+           p-4
+           bg-surface text-text
+           border border-border
+           rounded-xl
+           shadow-xs;
+  }
+
+  .stat-card-label {
+    @apply flex items-center gap-2 text-sm text-text-muted font-medium;
+  }
+
+  .stat-card-value {
+    @apply text-2xl font-bold tabular-nums leading-tight;
+  }
+
+  .stat-card-detail {
+    @apply text-sm text-text-muted;
+  }
+
+  /* Modifiers — mirror `.card`. */
+  .stat-card-compact {
+    @apply p-3 gap-0.5;
+  }
+
+  .stat-card-bordered {
+    @apply shadow-none border-border-strong;
+  }
+}

package/src/theme.css

@@ -211,6 +211,13 @@
   --color-border: light-dark(var(--color-base-150), var(--color-base-850));
   --color-border-strong: light-dark(var(--color-base-300), var(--color-base-700));
 
+  /* Code — neutral surface for <pre>-style output blocks (logs, JSON, LLM
+     output). One step darker than `surface-strong` in light mode so the
+     block visually carves out from regular chrome; matches `surface-muted`
+     depth in dark mode. */
+  --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));

package/src/utilities.css

@@ -0,0 +1,137 @@
+@layer theme, base, components, utilities;
+
+@reference "tailwindcss";
+@reference "./theme.css";
+
+@import "tailwindcss/utilities.css" layer(utilities);
+
+/*
+ * Pre-built utility safelist for the no-build `admin.utilities.css` bundle.
+ *
+ * Curated to keep wire size tight — admin density rarely needs spacing
+ * above 32, text sizes above 2xl, or interactive variants on layout
+ * primitives. Each `@source inline(...)` is a brace-expanded class set;
+ * Tailwind expands the same way bash does (empty branches `{,foo}`
+ * include both the no-prefix and prefixed forms).
+ *
+ * Variant policy per family:
+ *   - Layout (display, spacing, sizing, grid, ...) → responsive only
+ *   - Visual (colors, borders, shadow, outline)    → interactive only
+ *   - Typography (weight, leading, ...)            → neither
+ *
+ * Adding a utility: extend the matching line. Adding a new semantic
+ * color: update theme.css AND the color lines below.
+ */
+
+/* Display, position, visibility — responsive */
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}{block,inline-block,inline,flex,inline-flex,grid,inline-grid,contents,table,inline-table,table-row,table-cell,hidden,flow-root,list-item,static,fixed,absolute,relative,sticky,visible,invisible,collapse,sr-only,not-sr-only}"
+);
+@source inline("{,sm:,md:,lg:,xl:,2xl:}overflow{,-x,-y}-{auto,hidden,visible,scroll,clip}");
+
+/* Flex / grid — responsive */
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}flex-{row,row-reverse,col,col-reverse,wrap,wrap-reverse,nowrap,1,auto,initial,none}"
+);
+@source inline("{,sm:,md:,lg:,xl:,2xl:}{grow,grow-0,shrink,shrink-0}");
+@source inline("{,sm:,md:,lg:,xl:,2xl:}items-{start,end,center,baseline,stretch}");
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}justify-{start,end,center,between,around,evenly,stretch}"
+);
+@source inline("{,sm:,md:,lg:,xl:,2xl:}justify-items-{start,end,center,stretch}");
+@source inline("{,sm:,md:,lg:,xl:,2xl:}justify-self-{auto,start,end,center,stretch,baseline}");
+@source inline("{,sm:,md:,lg:,xl:,2xl:}self-{auto,start,end,center,stretch,baseline}");
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}place-{items,content,self}-{start,end,center,stretch,between,around,evenly}"
+);
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}content-{start,end,center,between,around,evenly,stretch,normal}"
+);
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}{grid-cols,grid-rows}-{1,2,3,4,5,6,7,8,9,10,11,12,none,subgrid}"
+);
+@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:}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}");
+
+/* Spacing (padding, margin, gap) — responsive */
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}{p,px,py,pt,pr,pb,pl,ps,pe,m,mx,my,mt,mr,mb,ml,ms,me,gap,gap-x,gap-y}-{0,0.5,1,1.5,2,3,4,6,8,12,16,20,24,32}"
+);
+@source inline("{,sm:,md:,lg:,xl:,2xl:}{m,mx,my,mt,mr,mb,ml,ms,me}-auto");
+
+/* Sizing (w, h, min-w, max-w, min-h, max-h) — responsive */
+@source inline(
+  "{,sm:,md:,lg:,xl:,2xl:}{w,h,min-w,max-w,min-h,max-h}-{0,0.5,1,1.5,2,3,4,6,8,12,16,20,24,32,px,auto,full,screen,fit,min,max}"
+);
+@source inline("{,sm:,md:,lg:,xl:,2xl:}{w,h}-{1/2,1/3,2/3,1/4,2/4,3/4}");
+@source inline("{,sm:,md:,lg:,xl:,2xl:}max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl,prose,none}");
+
+/* Text size + align — responsive */
+@source inline("{,sm:,md:,lg:,xl:,2xl:}text-{xs,sm,base,lg,xl,2xl}");
+@source inline("{,sm:,md:,lg:,xl:,2xl:}text-{left,center,right,justify,start,end}");
+
+/* Aspect ratio — responsive */
+@source inline("{,sm:,md:,lg:,xl:,2xl:}aspect-{auto,square,video}");
+
+/* 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}"
+);
+
+/* 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("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("{underline,overline,line-through,no-underline,truncate}");
+
+/* Borders + rounded — interactive */
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}border{,-x,-y,-t,-r,-b,-l}{,-0,-2,-4,-8}"
+);
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}border-{solid,dashed,dotted,double,hidden,none}"
+);
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}rounded{,-t,-r,-b,-l,-tl,-tr,-br,-bl}{,-none,-sm,-md,-lg,-xl,-2xl,-3xl,-full}"
+);
+
+/* Outline + ring — interactive */
+@source inline("{,hover:,focus:,focus-visible:,active:}outline{,-0,-1,-2,-4,-8}");
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}outline-{none,dashed,dotted,double,hidden}"
+);
+@source inline("{,hover:,focus:,focus-visible:,active:}outline-offset-{0,1,2,4,8}");
+@source inline("{,hover:,focus:,focus-visible:,active:}ring{,-0,-1,-2,-4,-8}");
+@source inline("{,hover:,focus:,focus-visible:,active:}ring-inset");
+
+/* Shadow — interactive */
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}shadow{,-2xs,-xs,-sm,-md,-lg,-xl,-2xl,-inner,-none}"
+);
+
+/* Foundation semantic colors — interactive (kept in sync with theme.css) */
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}{bg,text,border,outline,ring,shadow}-{surface,surface-muted,surface-strong,text,text-muted,border,border-strong}"
+);
+
+/* Accent semantic colors — each has base + -hover + -muted + -content (kept in sync with theme.css) */
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}{bg,text,border,outline,ring,shadow}-{primary,system-accent,danger,success,warning,info}{,-hover,-muted,-content}"
+);
+
+/* 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}"
+);
+@source inline(
+  "{,hover:,focus:,focus-visible:,active:}opacity-{0,5,10,15,20,25,30,40,50,60,70,75,80,90,95,100}"
+);
+
+/* Z-index — no variants */
+@source inline("z-{0,10,20,30,40,50,auto}");