@lukeashford/aurelius 2.2.0 → 2.3.0

package/dist/styles/theme.css

@@ -13,13 +13,18 @@
   --color-slate: #2a2a2a;
   --color-ash: #3d3d3d;
 
-  /* Gold spectrum */
+  /* Core RGB helpers (reduce repeated rgba() literals) */
+  --ink-rgb: 0 0 0;
+  --gold-rgb: 201 162 39;
+  --glass-rgb: 20 20 20;
+
+  /* Gold spectrum (derived from one base where possible) */
   --color-gold: #c9a227;
-  --color-gold-light: #d4b84a;
-  --color-gold-bright: #e5c84d;
-  --color-gold-muted: #8b7355;
-  --color-gold-pale: #d4c4a8;
-  --color-gold-glow: rgba(201, 162, 39, 0.15);
+  --color-gold-light: color-mix(in oklab, var(--color-gold) 75%, white);
+  --color-gold-bright: color-mix(in oklab, var(--color-gold) 60%, white);
+  --color-gold-muted: color-mix(in oklab, var(--color-gold) 55%, #6b5a44);
+  --color-gold-pale: color-mix(in oklab, var(--color-gold) 25%, white);
+  --color-gold-glow: rgb(var(--gold-rgb) / 0.15);
 
   /* Neutrals */
   --color-white: #ffffff;
@@ -126,19 +131,31 @@
   --radius-full: 9999px;
 
   /* ===== SHADOWS ===== */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
-  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  --shadow-glow: 0 0 20px rgba(201, 162, 39, 0.3);
-  --shadow-glow-sm: 0 0 10px rgba(201, 162, 39, 0.2);
-  --shadow-glow-md: 0 0 15px rgba(201, 162, 39, 0.3);
-  --shadow-glow-lg: 0 0 40px rgba(201, 162, 39, 0.4);
-  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+  --shadow-sm: 0 1px 2px 0 rgb(var(--ink-rgb) / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(var(--ink-rgb) / 0.4),
+  0 2px 4px -2px rgb(var(--ink-rgb) / 0.3);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--ink-rgb) / 0.4),
+  0 4px 6px -4px rgb(var(--ink-rgb) / 0.3);
+  --shadow-xl: 0 20px 25px -5px rgb(var(--ink-rgb) / 0.4),
+  0 8px 10px -6px rgb(var(--ink-rgb) / 0.3);
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--ink-rgb) / 0.5);
+
+  --shadow-glow: 0 0 20px rgb(var(--gold-rgb) / 0.3);
+  --shadow-glow-sm: 0 0 10px rgb(var(--gold-rgb) / 0.2);
+  --shadow-glow-md: 0 0 15px rgb(var(--gold-rgb) / 0.3);
+  --shadow-glow-lg: 0 0 40px rgb(var(--gold-rgb) / 0.4);
+
+  --shadow-inner: inset 0 2px 4px 0 rgb(var(--ink-rgb) / 0.3);
 
   /* ===== TRANSITIONS ===== */
-  /* Durations */
+  /* Durations - use --transition-duration-* for Tailwind v4 duration-* utilities */
+  --transition-duration-instant: 75ms;
+  --transition-duration-fast: 150ms;
+  --transition-duration-normal: 200ms;
+  --transition-duration-slow: 300ms;
+  --transition-duration-slower: 500ms;
+
+  /* Legacy duration aliases for CSS usage */
   --duration-instant: 75ms;
   --duration-fast: 150ms;
   --duration-normal: 200ms;
@@ -149,6 +166,9 @@
   --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-snap: cubic-bezier(0.5, 0, 0.1, 1);
 
+  /* ===== ASPECT RATIOS ===== */
+  --aspect-ratio-wide: 21 / 9;
+
   /* ===== ANIMATIONS ===== */
   --animate-fade-in: fade-in 200ms ease-out;
   --animate-fade-out: fade-out 150ms ease-in;
@@ -156,6 +176,13 @@
   --animate-slide-out-right: slide-out-right 200ms ease-in;
   --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
   --animate-cursor-blink: cursor-blink 1s steps(1) infinite;
+
+  /* ===== LAYOUT TOKENS ===== */
+  --container-sm: 640px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+  --container-xl: 1280px;
+  --container-2xl: 1536px;
 }
 
 @keyframes fade-in {
@@ -199,19 +226,22 @@
 }
 
 @keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 20px rgba(201, 162, 39, 0.3);
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgb(var(--gold-rgb) / 0.3);
   }
   50% {
-    box-shadow: 0 0 30px rgba(201, 162, 39, 0.5);
+    box-shadow: 0 0 30px rgb(var(--gold-rgb) / 0.5);
   }
 }
 
 @keyframes cursor-blink {
-  0%, 50% {
+  0%,
+  50% {
     opacity: 1;
   }
-  51%, 100% {
+  51%,
+  100% {
     opacity: 0;
   }
 }
@@ -237,11 +267,14 @@
     width: 100%;
   }
 
-  table, th, td {
+  table,
+  th,
+  td {
     border: 1px solid var(--color-gold-muted);
   }
 
-  th, td {
+  th,
+  td {
     padding: 0.5rem 0.75rem;
   }
 
@@ -273,14 +306,20 @@
   }
 
   /* Headings */
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: var(--font-heading);
     font-weight: 600;
     letter-spacing: -0.025em;
     color: var(--color-white);
   }
 
-  h1, h2 {
+  h1,
+  h2 {
     color: var(--color-gold);
   }
 
@@ -315,7 +354,10 @@
   }
 
   /* Code */
-  code, pre, kbd, samp {
+  code,
+  pre,
+  kbd,
+  samp {
     font-family: var(--font-mono);
     font-size: 0.875em;
   }
@@ -365,7 +407,12 @@
 
 /* ===== UTILITY CLASSES ===== */
 @utility text-gradient-gold {
-  background: linear-gradient(to right, var(--color-gold), var(--color-gold-light), var(--color-gold));
+  background: linear-gradient(
+      to right,
+      var(--color-gold),
+      var(--color-gold-light),
+      var(--color-gold)
+  );
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
@@ -402,12 +449,12 @@
 
 @utility backdrop-glass {
   backdrop-filter: blur(12px);
-  background-color: rgba(20, 20, 20, 0.8);
+  background-color: rgb(var(--glass-rgb) / 0.8);
 }
 
 @utility focus-ring {
   &:focus-visible {
-    outline: 2px solid #c9a227;
+    outline: 2px solid var(--color-gold);
     outline-offset: 2px;
   }
 }
@@ -432,3 +479,78 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+@utility aspect-wide {
+  aspect-ratio: var(--aspect-ratio-wide);
+}
+
+/* ===== LAYOUT COMPONENTS ===== */
+/* Container - Responsive max-width wrapper with horizontal padding */
+@utility container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--spacing-4);
+
+  @media (min-width: 640px) {
+    max-width: var(--container-sm);
+  }
+
+  @media (min-width: 768px) {
+    max-width: var(--container-md);
+  }
+
+  @media (min-width: 1024px) {
+    max-width: var(--container-lg);
+  }
+
+  @media (min-width: 1280px) {
+    max-width: var(--container-xl);
+  }
+
+  @media (min-width: 1536px) {
+    max-width: var(--container-2xl);
+  }
+}
+
+/* Container size variants */
+@utility container-sm {
+  width: 100%;
+  max-width: var(--container-sm);
+  margin-inline: auto;
+  padding-inline: var(--spacing-4);
+}
+
+@utility container-md {
+  width: 100%;
+  max-width: var(--container-md);
+  margin-inline: auto;
+  padding-inline: var(--spacing-4);
+}
+
+@utility container-lg {
+  width: 100%;
+  max-width: var(--container-lg);
+  margin-inline: auto;
+  padding-inline: var(--spacing-4);
+}
+
+@utility container-xl {
+  width: 100%;
+  max-width: var(--container-xl);
+  margin-inline: auto;
+  padding-inline: var(--spacing-4);
+}
+
+@utility container-fluid {
+  width: 100%;
+  padding-inline: var(--spacing-4);
+}
+
+/* Row - CSS Grid-based 12-column layout
+ * Uses CSS Grid instead of flexbox for cleaner, modern layout.
+ * Children use Tailwind's col-span-* utilities (e.g., col-span-6, md:col-span-4).
+ */
+@utility row {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}

package/llms.md

@@ -6,7 +6,7 @@
 
 ```bash
 npm install @lukeashford/aurelius
-npm install -D eslint @typescript-eslint/parser eslint-plugin-better-tailwindcss @poupe/eslint-plugin-tailwindcss @eslint/css tailwind-csstree
+npm install -D tailwindcss postcss @tailwindcss/postcss eslint @typescript-eslint/parser eslint-plugin-better-tailwindcss @poupe/eslint-plugin-tailwindcss @eslint/css tailwind-csstree
 ```
 
 ### 2. Import the design system
@@ -57,31 +57,51 @@ Import from `@lukeashford/aurelius`:
 
 | Component | Props |
 |-----------|-------|
+| Accordion | defaultValue, value |
 | Alert | variant (info, success, warning, error), title |
 | Avatar | src, alt, name, size (xs, sm, md, lg, xl, 2xl), status (online, offline, busy) |
 | Badge | variant (default, gold, success, error, warning, info) |
 | BrandIcon | size (sm, md, lg), variant (solid, outline) |
+| Breadcrumb | separator |
 | Button | variant (primary, important, elevated, outlined, featured, ghost, danger), size (sm, md, lg, xl), loading |
-| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected |
+| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected, noPadding |
 | ChatHistory | messages |
 | Checkbox | label |
+| Col | children |
 | ColorSwatch | color, label |
+| Container | size (sm, md, lg, xl, fluid, responsive) |
+| Dialog | description, confirmText, cancelText, isLoading |
+| Divider | orientation (horizontal, vertical), variant (solid, dashed, dotted), label |
+| Drawer | isOpen, position (left, right, top, bottom), title, children, className |
 | HelperText | error |
 | ImageCard | src, alt, title, subtitle, aspectRatio (${number}/${number}), overlay, mediaClassName, contentClassName |
 | Input | error, leadingIcon, trailingIcon |
+| InputGroup | children |
 | Label | required |
+| List | ordered |
 | MarkdownContent | content, sanitizeConfig |
+| Menu | children, open |
 | Message | variant (user, assistant), content, isStreaming |
 | Modal | isOpen, title, children, className |
+| Navbar | fixed, bordered |
+| Pagination | page, totalPages, siblingCount, showEdges |
+| Popover | children, trigger, position (top, bottom, left, right), align (start, center, end), open, closeOnClickOutside |
+| Progress | value, max, size (sm, md, lg), variant (default, success, warning, error), showValue, indeterminate |
 | Radio | label |
+| Row | gutter, gutterX, gutterY, justify (start, center, end, between, around, evenly), align (start, center, end, stretch, baseline) |
 | SectionHeading | level (h2, h3) |
 | Select | error, options |
 | Skeleton | children |
+| Slider | value, defaultValue, min, max, step, disabled, showTooltip |
 | Spinner | size (sm, md, lg) |
+| Stack | direction (horizontal, vertical), align (start, center, end, stretch, baseline), justify (start, center, end, between, around, evenly), gap, wrap |
 | Stepper | steps, currentStep, status (complete, error) |
 | StreamingCursor | children |
 | Switch | checked, defaultChecked, label |
+| Table | responsive |
+| Tabs | defaultValue, value |
 | Textarea | error |
+| Toast | children, position (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center), defaultDuration |
 | Tooltip | content, children, open, side (top, right, bottom, left) |
 
 ### Component usage example
@@ -118,8 +138,15 @@ border-void, border-obsidian, border-charcoal, border-graphite, border-slate, bo
 
 Standard Tailwind classes for size (`text-sm`, `text-lg`, etc.), weight (`font-medium`, `font-bold`), and spacing are available.
 
+### Layout Classes
+**Containers:** `container`, `container-sm`, `container-md`, `container-lg`, `container-xl`, `container-fluid`
+
+**Grid:** `row` (creates 12-column CSS Grid)
+
+**Columns (Tailwind built-in):** `col-span-{1-12}`, `col-span-full`, `col-auto`, `sm:col-span-*`, `md:col-span-*`, `lg:col-span-*`, `xl:col-span-*`
+
 ### Custom Utilities
-text-gradient-gold, glow, glow-sm, glow-md, glow-lg, scroll-smooth, scrollbar-hide, backdrop-glass, focus-ring, line-clamp-2, line-clamp-3, center-absolute
+text-gradient-gold, glow, glow-sm, glow-md, glow-lg, scroll-smooth, scrollbar-hide, backdrop-glass, focus-ring, line-clamp-2, line-clamp-3, center-absolute, aspect-wide, container, container-sm, container-md, container-lg, container-xl, container-fluid, row
 
 ### Opacity modifiers
 Append `/10`, `/20`, `/30`, etc. to colors: `bg-gold/20`, `border-ash/50`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukeashford/aurelius",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Design system for Aurelius applications — A cohesive visual language for creative technologists",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -24,6 +24,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "engines": {
+    "node": ">=22.14.0"
+  },
   "scripts": {
     "build": "npm run typecheck && npm run lint && tsup && node scripts/generate-manifest.js",
     "dev": "tsup --watch",
@@ -31,7 +34,8 @@
     "lint": "eslint src --max-warnings 0",
     "prepublishOnly": "npm run build",
     "dev:demo": "npm --prefix demo run dev",
-    "dev:all": "concurrently -k \"npm run dev\" \"npm run dev:demo\""
+    "dev:all": "concurrently -k \"npm run dev\" \"npm run dev:demo\"",
+    "test": "npm run build && npm --prefix demo run test && npm --prefix demo run test:e2e"
   },
   "peerDependencies": {
     "@eslint/css": ">=0.9.0",
@@ -68,8 +72,13 @@
     }
   },
   "devDependencies": {
+    "@commitlint/cli": "*",
+    "@commitlint/config-conventional": "*",
     "@eslint/css": "^0.9.0",
     "@poupe/eslint-plugin-tailwindcss": "^0.2.4",
+    "@semantic-release/changelog": "*",
+    "@semantic-release/git": "*",
+    "@semantic-release/github": "*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -81,20 +90,15 @@
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@commitlint/cli": "*",
-    "@commitlint/config-conventional": "*",
-    "@semantic-release/changelog": "*",
-    "@semantic-release/github": "*",
-    "@semantic-release/git": "*",
     "concurrently": "^8.2.2",
     "conventional-changelog-conventionalcommits": "*",
     "eslint": "^9.0.0",
     "eslint-plugin-better-tailwindcss": "^4.0.0-beta",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "semantic-release": "*",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "semantic-release": "*",
     "tailwindcss": "^4.1.17",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",