@lukeashford/aurelius 2.1.0 → 2.3.0

package/dist/styles/base.css

@@ -4,5 +4,9 @@
  */
 
 @import 'tailwindcss';
+
 @import './fonts.css';
 @import './theme.css';
+@import './prose.css';
+
+@plugin "@tailwindcss/typography";

package/dist/styles/prose.css

@@ -0,0 +1,61 @@
+@utility prose {
+  /* Body text */
+  --tw-prose-body: var(--color-silver);
+  --tw-prose-headings: var(--color-gold);
+  --tw-prose-lead: var(--color-silver);
+  --tw-prose-links: var(--color-gold);
+  --tw-prose-bold: var(--color-white);
+  --tw-prose-counters: var(--color-gold-muted);
+  --tw-prose-bullets: var(--color-gold-muted);
+  --tw-prose-hr: var(--color-ash);
+  --tw-prose-quotes: var(--color-silver);
+  --tw-prose-quote-borders: var(--color-gold-muted);
+  --tw-prose-captions: var(--color-zinc);
+  --tw-prose-kbd: var(--color-white);
+  --tw-prose-kbd-shadows: 0 0 0 var(--color-ash);
+  --tw-prose-code: var(--color-gold-light);
+  --tw-prose-pre-code: var(--color-silver);
+  --tw-prose-pre-bg: var(--color-charcoal);
+  --tw-prose-th-borders: var(--color-ash);
+  --tw-prose-td-borders: var(--color-slate);
+
+  /* Invert variants (used with prose-invert) */
+  --tw-prose-invert-body: var(--color-silver);
+  --tw-prose-invert-headings: var(--color-gold);
+  --tw-prose-invert-lead: var(--color-silver);
+  --tw-prose-invert-links: var(--color-gold);
+  --tw-prose-invert-bold: var(--color-white);
+  --tw-prose-invert-counters: var(--color-gold-muted);
+  --tw-prose-invert-bullets: var(--color-gold-muted);
+  --tw-prose-invert-hr: var(--color-ash);
+  --tw-prose-invert-quotes: var(--color-silver);
+  --tw-prose-invert-quote-borders: var(--color-gold-muted);
+  --tw-prose-invert-captions: var(--color-zinc);
+  --tw-prose-invert-kbd: var(--color-white);
+  --tw-prose-invert-kbd-shadows: 0 0 0 var(--color-ash);
+  --tw-prose-invert-code: var(--color-gold-light);
+  --tw-prose-invert-pre-code: var(--color-silver);
+  --tw-prose-invert-pre-bg: var(--color-charcoal);
+  --tw-prose-invert-th-borders: var(--color-ash);
+  --tw-prose-invert-td-borders: var(--color-slate);
+}
+
+@utility prose-inherit {
+  --tw-prose-body: currentColor;
+  --tw-prose-headings: currentColor;
+  --tw-prose-lead: currentColor;
+  --tw-prose-links: currentColor;
+  --tw-prose-bold: currentColor;
+  --tw-prose-counters: currentColor;
+  --tw-prose-bullets: currentColor;
+  --tw-prose-hr: currentColor;
+  --tw-prose-quotes: currentColor;
+  --tw-prose-quote-borders: currentColor;
+  --tw-prose-captions: currentColor;
+  --tw-prose-kbd: currentColor;
+  --tw-prose-code: currentColor;
+  --tw-prose-pre-code: currentColor;
+  --tw-prose-pre-bg: transparent;
+  --tw-prose-th-borders: currentColor;
+  --tw-prose-td-borders: currentColor;
+}

package/dist/styles/theme.css

@@ -5,7 +5,6 @@
 
 @theme {
   /* ===== COLORS ===== */
-
   /* Black spectrum */
   --color-void: #000000;
   --color-obsidian: #0a0a0a;
@@ -14,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;
@@ -39,7 +43,6 @@
   --color-info-muted: #0369a1;
 
   /* ===== TYPOGRAPHY ===== */
-
   /* Font families */
   --font-heading: "Marcellus", serif;
   --font-body: "Raleway", system-ui, sans-serif;
@@ -112,8 +115,11 @@
   --spacing-16: 4rem;
   --spacing-20: 5rem;
   --spacing-24: 6rem;
+  --spacing-25: 6.25rem;
   --spacing-28: 7rem;
   --spacing-32: 8rem;
+  --spacing-cursor: 1.1em;
+  --spacing-cursor-offset: 0.1em;
 
   /* ===== BORDER RADIUS ===== */
   --radius-sm: 0.125rem;
@@ -125,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-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;
@@ -148,37 +166,84 @@
   --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;
   --animate-slide-in-right: slide-in-right 300ms var(--ease-smooth);
   --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 {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fade-out {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes slide-in-right {
-  0% { transform: translateX(100%); opacity: 0; }
-  100% { transform: translateX(0); opacity: 1; }
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 @keyframes slide-out-right {
-  0% { transform: translateX(0); opacity: 1; }
-  100% { transform: translateX(100%); opacity: 0; }
+  0% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 }
 
 @keyframes pulse-glow {
-  0%, 100% { box-shadow: 0 0 20px rgba(201, 162, 39, 0.3); }
-  50% { box-shadow: 0 0 30px rgba(201, 162, 39, 0.5); }
+  0%,
+  100% {
+    box-shadow: 0 0 20px rgb(var(--gold-rgb) / 0.3);
+  }
+  50% {
+    box-shadow: 0 0 30px rgb(var(--gold-rgb) / 0.5);
+  }
+}
+
+@keyframes cursor-blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 
 /* ===== BASE STYLES (applied via @layer base) ===== */
@@ -202,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;
   }
 
@@ -238,22 +306,58 @@
   }
 
   /* 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 { font-size: 2.25rem; line-height: 1.25; }
-  h2 { font-size: 1.875rem; line-height: 1.25; }
-  h3 { font-size: 1.5rem; line-height: 1.375; }
-  h4 { font-size: 1.25rem; line-height: 1.375; }
-  h5 { font-size: 1.125rem; line-height: 1.5; }
-  h6 { font-size: 1rem; line-height: 1.5; }
+  h1,
+  h2 {
+    color: var(--color-gold);
+  }
+
+  h1 {
+    font-size: 2.25rem;
+    line-height: 1.25;
+  }
+
+  h2 {
+    font-size: 1.875rem;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: 1.5rem;
+    line-height: 1.375;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+    line-height: 1.375;
+  }
+
+  h5 {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  h6 {
+    font-size: 1rem;
+    line-height: 1.5;
+  }
 
   /* Code */
-  code, pre, kbd, samp {
+  code,
+  pre,
+  kbd,
+  samp {
     font-family: var(--font-mono);
     font-size: 0.875em;
   }
@@ -303,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;
@@ -317,6 +426,10 @@
   box-shadow: var(--shadow-glow-sm);
 }
 
+@utility glow-md {
+  box-shadow: var(--shadow-glow-md);
+}
+
 @utility glow-lg {
   box-shadow: var(--shadow-glow-lg);
 }
@@ -336,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;
   }
 }
@@ -366,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,22 +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 |
+| 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
@@ -109,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-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.1.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",
@@ -12,9 +12,6 @@
       "require": "./dist/index.js"
     },
     "./eslint": "./scripts/eslint.mjs",
-    "./styles/base.css": "./dist/styles/base.css",
-    "./styles/theme.css": "./dist/styles/theme.css",
-    "./styles/fonts.css": "./dist/styles/fonts.css",
     "./styles/*": "./dist/styles/*",
     "./llms.md": "./llms.md",
     "./package.json": "./package.json"
@@ -24,6 +21,12 @@
     "scripts/eslint.mjs",
     "llms.md"
   ],
+  "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,11 +72,17 @@
     }
   },
   "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",
+    "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.0.0",
     "@types/react": "^19.2.7",
@@ -81,12 +91,14 @@
     "@typescript-eslint/parser": "^8.49.0",
     "@vitejs/plugin-react": "^4.3.4",
     "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",
     "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",
@@ -110,6 +122,8 @@
   "author": "Your Name",
   "license": "MIT",
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.15",
+    "dompurify": "^3.3.1",
     "lucide-react": "^0.555.0"
   }
 }