@aortl/admin-css 0.10.0 → 0.11.0

package/package.json

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

@@ -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}");