@aortl/admin-css 0.9.0 → 0.11.0

package/package.json

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

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

@@ -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;
   }
@@ -20,8 +18,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/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/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/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";
@@ -20,6 +21,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 +32,4 @@
 @import "./tabs.css";
 @import "./table.css";
 @import "./tooltip.css";
+@import "./code-block.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

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

@@ -77,6 +77,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 +91,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 */
@@ -133,5 +148,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}");