emily-css 1.0.15 → 1.0.18

package/CHANGELOG.md

@@ -4,6 +4,30 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
+## v1.0.18 — May 2026
+
+****
+
+### Changed
+- added more utitlies as a code block
+
+---
+## v1.0.17 — May 2026
+
+**added new utilties, and added component patterns**
+
+### Added
+- added new utilties, and added component patterns
+
+---
+## v1.0.16 — May 2026
+
+**feat: add Round 2 utility set — 156/156 tests passing**
+
+### Added
+- feat: add Round 2 utility set — 156/156 tests passing
+
+---
 ## v1.0.15 — May 2026
 
 **updated readme**

package/README.md

@@ -20,7 +20,7 @@ emilyCSS is built for real-world systems like **Drupal, Power Pages, WordPress,
 npx emily-css init
 ```
 
-This creates your `emily.config.json`, walks you through your brand settings, and runs your first build.
+This creates your `emily.config.json`, walks you through your brand settings (colours, fonts, spacing, etc.), and runs your first build.
 
 ### 2. Link the CSS
 
@@ -28,17 +28,13 @@ This creates your `emily.config.json`, walks you through your brand settings, an
 <link rel="stylesheet" href="./dist/emily.min.css">
 ```
 
-### 3. Development
+### 3. Start Building
 
-```bash
-npx emily-css watch     # Rebuilds automatically on config/template changes
-npx emily-css build     # Manual rebuild
-```
-
-Open the showcase:
+Use the generated utilities and browse the showcase for ready-to-copy components.
 
 ```bash
-npm run emily:showcase   # Serves at http://localhost:3456
+npx emily-css build     # Rebuild after config changes
+npx emily-css watch     # Watch mode for development
 ```
 
 ## Core Features
@@ -48,30 +44,24 @@ npm run emily:showcase   # Serves at http://localhost:3456
 - **Accessibility First** — Focus-visible rings, motion utilities, WCAG 2.2 AA colours
 - **No Build Pipeline Required** — Just a static CSS file
 - **Smart Purge** — Remove unused utilities for tiny production files
-- **UI Starter Kit** — Copy-paste accessible components from the showcase
+- **UI Starter Kit** — Copy-paste accessible components from showcase.html
 
 ## Commands
 
 ```bash
-npx emily-css init      # Setup + first build
-npx emily-css build     # Regenerate CSS
-npx emily-css watch     # Development watch mode
-npx emily-css purge     # Remove unused styles for production
+npx emily-css init     # Setup config + first build
+npx emily-css build    # Regenerate CSS
+npx emily-css watch    # Development watch mode
+npx emily-css purge    # Remove unused styles for production
 ```
 
 ## How Purge Works
 
 emilyCSS scans your templates for used class names and removes everything else.
 
-Configure it in `emily.config.json`:
-
-```json
-"purge": {
-  "extensions": [".html", ".php", ".twig", ".liquid", ".jsx", ".vue", ".astro"]
-}
-```
+Supported files: `.html`, `.php`, `.twig`, `.liquid`, `.jsx`, `.vue`, `.astro`, etc. (configurable).
 
-**Important:** Dynamically constructed classes (e.g. `bg-${colour}`) are not detected. Use static strings or add them to your safelist.
+**Important:** Dynamically constructed classes like `bg-${colour}` are not detected. Use static strings or add them to the safelist.
 
 ## File Size (Typical)
 
@@ -80,7 +70,9 @@ Configure it in `emily.config.json`:
 | Full build | ~1.1 MB |
 | After purge | 10–50 KB |
 
-## Configuration Example
+## Configuration
+
+Edit `emily.config.json`:
 
 ```json
 {
@@ -95,7 +87,7 @@ Configure it in `emily.config.json`:
     "neutral": "#57534E"
   },
   "purge": {
-    "extensions": [".html", ".php", ".jsx", ".vue"]
+    "content": ["./**/*.{html,php,jsx,tsx,vue}"]
   }
 }
 ```
@@ -104,12 +96,12 @@ After changes: `npx emily-css build`
 
 ## Component Showcase
 
-After building, run `npm run emily:showcase` and visit `http://localhost:3456`. It contains production-ready, accessible components built with your exact brand.
+After your first build, open `showcase.html` in your browser. It contains production-ready, accessible components (buttons, forms, alerts, cards, etc.) built with your brand.
 
 ## EmilyUI vs emilyCSS
 
 - **EmilyUI** — The broader brand / ecosystem
-- **emilyCSS** — The current product (`emily-css` npm package + CLI)
+- **emilyCSS** — The current product (the emily-css npm package + CLI)
 
 ## Example Components
 
@@ -124,7 +116,7 @@ After building, run `npm run emily:showcase` and visit `http://localhost:3456`.
 ### Responsive Card
 
 ```html
-<div class="w-full md:w-96 p-6 rounded-lg bg-white border border-neutral-30 shadow-sm">
+<div class="w-full md:w-96 p-6 rounded-xl bg-white border border-neutral-20 shadow-sm">
   <h2 class="text-2xl font-semibold text-neutral-90">Card Title</h2>
   <p class="mt-3 text-neutral-70">Content goes here.</p>
 </div>
@@ -132,7 +124,7 @@ After building, run `npm run emily:showcase` and visit `http://localhost:3456`.
 
 ## Fonts
 
-emilyCSS applies font stacks but does not include font files. Use `@fontsource` (recommended):
+emilyCSS applies font stacks but does not include font files. Recommended approach:
 
 ```bash
 npm install @fontsource/inter @fontsource/lexend
@@ -147,4 +139,4 @@ Then import the weights you need.
 
 ## License
 
-MIT
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emily-css",
-  "version": "1.0.15",
+  "version": "1.0.18",
   "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
   "main": "src/index.js",
   "bin": {

package/src/generators.js

@@ -65,6 +65,7 @@ function sizingUtilities(spacing) {
   css += `.max-w-5xl { max-width: 64rem; }\n`;
   css += `.max-w-6xl { max-width: 72rem; }\n`;
   css += `.max-w-7xl { max-width: 80rem; }\n`;
+  css += `.max-w-prose { max-width: 65ch; }\n`;
 
   // Aspect ratio
   css += `.aspect-auto { aspect-ratio: auto; }\n`;
@@ -137,6 +138,7 @@ function overflowUtilities() {
 .overflow-y-auto { overflow-y: auto; }
 .overflow-y-hidden { overflow-y: hidden; }
 .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
 .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@@ -148,7 +150,7 @@ function overflowUtilities() {
 
 // Opacity
 function opacityUtilities() {
-  const opacities = [0, 5, 10, 25, 50, 75, 90, 95, 100];
+  const opacities = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
   let css = `/* Opacity */\n`;
 
   opacities.forEach(op => {
@@ -277,6 +279,11 @@ function ringUtilities(colours) {
   css += `.outline-0 { outline-width: 0; }\n`;
   css += `.outline-1 { outline-width: 1px; }\n`;
   css += `.outline-2 { outline-width: 2px; }\n`;
+  css += `.outline-offset-0 { outline-offset: 0px; }\n`;
+  css += `.outline-offset-1 { outline-offset: 1px; }\n`;
+  css += `.outline-offset-2 { outline-offset: 2px; }\n`;
+  css += `.outline-offset-4 { outline-offset: 4px; }\n`;
+  css += `.outline-offset-8 { outline-offset: 8px; }\n`;
 
   css += `\n`;
   return css;
@@ -353,6 +360,8 @@ function svgUtilities(colours) {
 function formUtilities() {
   return `/* Forms */
 .appearance-none { appearance: none; }
+.caret-transparent { caret-color: transparent; }
+.caret-current { caret-color: currentColor; }
 .placeholder-transparent::placeholder { color: transparent; }
 .placeholder-current::placeholder { color: currentColor; }
 .autofill\\:bg-transparent:autofill { background-color: transparent !important; }
@@ -398,6 +407,10 @@ function contentScrollUtilities() {
 .snap-both { scroll-snap-type: both var(--emily-scroll-snap-strictness); }
 .snap-mandatory { --emily-scroll-snap-strictness: mandatory; }
 .snap-proximity { --emily-scroll-snap-strictness: proximity; }
+.snap-start { scroll-snap-align: start; }
+.snap-center { scroll-snap-align: center; }
+.snap-end { scroll-snap-align: end; }
+.snap-align-none { scroll-snap-align: none; }
 
 `;
 }
@@ -442,6 +455,16 @@ function cursorUtilities() {
 .select-text { user-select: text; }
 .select-all { user-select: all; }
 .select-auto { user-select: auto; }
+.resize-none { resize: none; }
+.resize { resize: both; }
+.resize-x { resize: horizontal; }
+.resize-y { resize: vertical; }
+.isolate { isolation: isolate; }
+.isolation-auto { isolation: auto; }
+.will-change-auto { will-change: auto; }
+.will-change-scroll { will-change: scroll-position; }
+.will-change-contents { will-change: contents; }
+.will-change-transform { will-change: transform; }
 
 `;
 }
@@ -453,6 +476,15 @@ function accessibilityUtilities() {
 .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
 .focus-visible:focus { outline: 2px solid currentColor; outline-offset: 2px; }
 .focus\\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
+
+/* Touch target — WCAG 2.2 SC 2.5.8 minimum 24x24px hit area */
+.touch-target { position: relative; }
+.touch-target::before { content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%); }
+
+/* Skip link — reveals on focus for keyboard/AT users */
+.skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 1070; width: auto; height: auto; padding: 0.75rem 1.25rem; background-color: #ffffff; color: #000000; font-weight: 700; text-decoration: underline; border: 2px solid currentColor; border-radius: 4px; clip: auto; white-space: normal; }
+
 @media (prefers-reduced-motion: reduce) {
   .motion-reduce\\:transition-none { transition-property: none; }
   .motion-reduce\\:animate-none { animation: none; }
@@ -515,6 +547,175 @@ function codeUtilities() {
 `;
 }
 
+// Animations
+function animationUtilities() {
+  return `/* Animations — keyframes */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: 0.5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+}
+
+/* Animations — utilities */
+.animate-none { animation: none; }
+.animate-spin { animation: spin 1s linear infinite; }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce { animation: bounce 1s infinite; }
+
+`;
+}
+
+
+// Backdrop Filters
+function backdropUtilities() {
+  return `/* Backdrop Filters */
+.backdrop-blur-none { backdrop-filter: blur(0); }
+.backdrop-blur-sm { backdrop-filter: blur(4px); }
+.backdrop-blur { backdrop-filter: blur(8px); }
+.backdrop-blur-md { backdrop-filter: blur(12px); }
+.backdrop-blur-lg { backdrop-filter: blur(16px); }
+.backdrop-blur-xl { backdrop-filter: blur(24px); }
+.backdrop-blur-2xl { backdrop-filter: blur(40px); }
+
+`;
+}
+
+// Space Between
+function spaceUtilities(spacing) {
+  let css = `/* Space Between */\n`;
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = key.replace(/\./g, '\\.');
+    css += `.space-x-${escaped} > * + * { margin-left: ${value}; }\n`;
+    css += `.space-y-${escaped} > * + * { margin-top: ${value}; }\n`;
+    css += `.-space-x-${escaped} > * + * { margin-left: -${value}; }\n`;
+    css += `.-space-y-${escaped} > * + * { margin-top: -${value}; }\n`;
+  });
+  css += `.space-x-auto > * + * { margin-left: auto; }\n`;
+  css += `.space-y-auto > * + * { margin-top: auto; }\n`;
+  css += `\n`;
+  return css;
+}
+
+// Divide
+function divideUtilities(spacing, colours) {
+  let css = `/* Divide */\n`;
+  // Widths
+  css += `.divide-x > * + * { border-left-width: 1px; border-left-style: solid; }\n`;
+  css += `.divide-y > * + * { border-top-width: 1px; border-top-style: solid; }\n`;
+  css += `.divide-x-0 > * + * { border-left-width: 0px; }\n`;
+  css += `.divide-y-0 > * + * { border-top-width: 0px; }\n`;
+  css += `.divide-x-2 > * + * { border-left-width: 2px; border-left-style: solid; }\n`;
+  css += `.divide-y-2 > * + * { border-top-width: 2px; border-top-style: solid; }\n`;
+  css += `.divide-x-4 > * + * { border-left-width: 4px; border-left-style: solid; }\n`;
+  css += `.divide-y-4 > * + * { border-top-width: 4px; border-top-style: solid; }\n`;
+  // Styles
+  css += `.divide-solid > * + * { border-style: solid; }\n`;
+  css += `.divide-dashed > * + * { border-style: dashed; }\n`;
+  css += `.divide-dotted > * + * { border-style: dotted; }\n`;
+  css += `.divide-none > * + * { border-style: none; }\n`;
+  // Colours
+  Object.entries(colours).forEach(([colourName, shades]) => {
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.divide-${colourName}-${shade} > * + * { border-color: var(--color-${colourName}-${shade}); }\n`;
+    });
+  });
+  css += `.divide-white > * + * { border-color: #ffffff; }\n`;
+  css += `.divide-black > * + * { border-color: #000000; }\n`;
+  css += `.divide-transparent > * + * { border-color: transparent; }\n`;
+  css += `\n`;
+  return css;
+}
+
+// Background Utilities
+function backgroundUtilities() {
+  return `/* Background */
+.bg-fixed { background-attachment: fixed; }
+.bg-local { background-attachment: local; }
+.bg-scroll { background-attachment: scroll; }
+.bg-clip-border { background-clip: border-box; }
+.bg-clip-padding { background-clip: padding-box; }
+.bg-clip-content { background-clip: content-box; }
+.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
+.bg-repeat { background-repeat: repeat; }
+.bg-no-repeat { background-repeat: no-repeat; }
+.bg-repeat-x { background-repeat: repeat-x; }
+.bg-repeat-y { background-repeat: repeat-y; }
+.bg-repeat-round { background-repeat: round; }
+.bg-repeat-space { background-repeat: space; }
+.bg-auto { background-size: auto; }
+.bg-cover { background-size: cover; }
+.bg-contain { background-size: contain; }
+.bg-center { background-position: center; }
+.bg-top { background-position: top; }
+.bg-bottom { background-position: bottom; }
+.bg-left { background-position: left; }
+.bg-right { background-position: right; }
+.bg-left-top { background-position: left top; }
+.bg-left-bottom { background-position: left bottom; }
+.bg-right-top { background-position: right top; }
+.bg-right-bottom { background-position: right bottom; }
+
+`;
+}
+
+// CSS Filters
+function filterUtilities() {
+  return `/* Filters */
+.filter-none { filter: none; }
+.blur-none { filter: blur(0); }
+.blur-sm { filter: blur(4px); }
+.blur { filter: blur(8px); }
+.blur-md { filter: blur(12px); }
+.blur-lg { filter: blur(16px); }
+.blur-xl { filter: blur(24px); }
+.brightness-0 { filter: brightness(0); }
+.brightness-50 { filter: brightness(.5); }
+.brightness-75 { filter: brightness(.75); }
+.brightness-90 { filter: brightness(.9); }
+.brightness-100 { filter: brightness(1); }
+.brightness-110 { filter: brightness(1.1); }
+.brightness-125 { filter: brightness(1.25); }
+.brightness-150 { filter: brightness(1.5); }
+.brightness-200 { filter: brightness(2); }
+.contrast-0 { filter: contrast(0); }
+.contrast-50 { filter: contrast(.5); }
+.contrast-75 { filter: contrast(.75); }
+.contrast-100 { filter: contrast(1); }
+.contrast-125 { filter: contrast(1.25); }
+.contrast-150 { filter: contrast(1.5); }
+.contrast-200 { filter: contrast(2); }
+.grayscale-0 { filter: grayscale(0); }
+.grayscale { filter: grayscale(100%); }
+.invert-0 { filter: invert(0); }
+.invert { filter: invert(100%); }
+.sepia-0 { filter: sepia(0); }
+.sepia { filter: sepia(100%); }
+.saturate-0 { filter: saturate(0); }
+.saturate-50 { filter: saturate(.5); }
+.saturate-100 { filter: saturate(1); }
+.saturate-150 { filter: saturate(1.5); }
+.saturate-200 { filter: saturate(2); }
+.hue-rotate-0 { filter: hue-rotate(0deg); }
+.hue-rotate-15 { filter: hue-rotate(15deg); }
+.hue-rotate-30 { filter: hue-rotate(30deg); }
+.hue-rotate-60 { filter: hue-rotate(60deg); }
+.hue-rotate-90 { filter: hue-rotate(90deg); }
+.hue-rotate-180 { filter: hue-rotate(180deg); }
+.-hue-rotate-30 { filter: hue-rotate(-30deg); }
+.-hue-rotate-60 { filter: hue-rotate(-60deg); }
+.-hue-rotate-90 { filter: hue-rotate(-90deg); }
+
+`;
+}
 module.exports = {
   displayUtilities,
   sizingUtilities,
@@ -535,5 +736,11 @@ module.exports = {
   cursorUtilities,
   accessibilityUtilities,
   containerUtilities,
-  codeUtilities
+  codeUtilities,
+  animationUtilities,
+  backdropUtilities,
+  spaceUtilities,
+  divideUtilities,
+  backgroundUtilities,
+  filterUtilities,
 };

package/src/index.js

@@ -288,7 +288,13 @@ const {
   cursorUtilities,
   accessibilityUtilities,
   containerUtilities,
-  codeUtilities
+  codeUtilities,
+  animationUtilities,
+  backdropUtilities,
+  spaceUtilities,
+  divideUtilities,
+  backgroundUtilities,
+  filterUtilities,
 } = require('./generators');
 
 // ============================================================================
@@ -498,6 +504,27 @@ function generateTypographyUtilities(config) {
   css += `.underline { text-decoration: underline; }\n`;
   css += `.no-underline { text-decoration: none; }\n`;
   css += `.line-through { text-decoration: line-through; }\n`;
+  css += `.underline-offset-auto { text-underline-offset: auto; }\n`;
+  css += `.underline-offset-1 { text-underline-offset: 1px; }\n`;
+  css += `.underline-offset-2 { text-underline-offset: 2px; }\n`;
+  css += `.underline-offset-4 { text-underline-offset: 4px; }\n`;
+  css += `.underline-offset-8 { text-underline-offset: 8px; }\n`;
+  css += `.decoration-auto { text-decoration-thickness: auto; }\n`;
+  css += `.decoration-from-font { text-decoration-thickness: from-font; }\n`;
+  css += `.decoration-1 { text-decoration-thickness: 1px; }\n`;
+  css += `.decoration-2 { text-decoration-thickness: 2px; }\n`;
+  css += `.decoration-4 { text-decoration-thickness: 4px; }\n`;
+
+  // Font variant numeric
+  css += `.normal-nums { font-variant-numeric: normal; }\n`;
+  css += `.ordinal { font-variant-numeric: ordinal; }\n`;
+  css += `.slashed-zero { font-variant-numeric: slashed-zero; }\n`;
+  css += `.lining-nums { font-variant-numeric: lining-nums; }\n`;
+  css += `.oldstyle-nums { font-variant-numeric: oldstyle-nums; }\n`;
+  css += `.proportional-nums { font-variant-numeric: proportional-nums; }\n`;
+  css += `.tabular-nums { font-variant-numeric: tabular-nums; }\n`;
+  css += `.diagonal-fractions { font-variant-numeric: diagonal-fractions; }\n`;
+  css += `.stacked-fractions { font-variant-numeric: stacked-fractions; }\n`;
 
   // Text transform
   css += `.uppercase { text-transform: uppercase; }\n`;
@@ -739,6 +766,7 @@ function addStateVariants(css) {
   const states = [
     { name: 'hover', selector: ':hover' },
     { name: 'focus', selector: ':focus' },
+    { name: 'focus-within', selector: ':focus-within' },
     { name: 'focus-visible', selector: ':focus-visible' },
     { name: 'active', selector: ':active' },
     { name: 'disabled', selector: ':disabled' }
@@ -774,6 +802,63 @@ function addStateVariants(css) {
   return variantCss;
 }
 
+
+// ============================================================================
+// PATTERN COMPONENTS
+// ============================================================================
+// Composite classes that combine multiple utilities into named patterns.
+// These live in @layer components so utilities always take precedence in the cascade.
+// Gap values reference spacing variables generated from emily.config.json,
+// with pixel fallbacks so they work even without the variables in scope.
+
+function generatePatternComponents() {
+  return `
+  /* ---- Centering ---- */
+
+  /* Full-viewport overlay centering — use for modals, lightboxes, toasts */
+  .center-screen {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Transform-based centering within a relative/absolute parent */
+  .center-absolute {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* ---- Reading / Prose ---- */
+
+  /* Comfortable reading column — limits line length, centers the block */
+  .prose {
+    max-width: 65ch;
+    margin-inline: auto;
+  }
+
+  /* ---- Composition ---- */
+
+  /* Vertical stack with consistent gap — replaces manual margin chains */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4, 1rem);
+  }
+
+  /* Horizontal grouping with wrapping — for tags, button rows, icon lists */
+  .cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-4, 1rem);
+    align-items: center;
+  }
+`;
+}
+
 // ============================================================================
 // BUILD FUNCTION
 // ============================================================================
@@ -831,6 +916,12 @@ function buildFullFramework() {
   utilityCss += accessibilityUtilities();
   utilityCss += containerUtilities();
   utilityCss += codeUtilities();
+  utilityCss += animationUtilities();
+  utilityCss += backdropUtilities();
+  utilityCss += spaceUtilities(spacing);
+  utilityCss += divideUtilities(spacing, colours);
+  utilityCss += backgroundUtilities();
+  utilityCss += filterUtilities();
 
   // Add state, dark mode, and responsive variants to utilities
   utilityCss = addStateVariants(utilityCss);
@@ -892,19 +983,40 @@ function buildFullFramework() {
     overflow-wrap: break-word;
   }
 
-  /* Code blocks — VSCode Dark+ style by default */
+  /* Code — terminal style by default */
+  code {
+    font-family: "Menlo", "Monaco", "Courier New", monospace;
+    font-size: 0.875em;
+    background-color: #0d0c0b;
+    color: #a3c986;
+    padding: 0.125rem 0.4rem;
+    border-radius: 4px;
+    display: inline;
+  }
+
+  /* Block code — terminal command style, no extra classes needed */
+  code.block {
+    display: block;
+    padding: 0.625rem 1rem;
+    border-radius: 6px;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+  }
+
+  /* Pre — wraps multi-line code, consistent terminal look */
   pre {
-    background-color: #1e1e1e;
-    color: #d4d4d4;
+    background-color: #0d0c0b;
+    color: #e4e0db;
     padding: 1.25rem;
-    border-radius: 0 0 6px;
+    border-radius: 6px;
     overflow-x: auto;
     font-family: "Menlo", "Monaco", "Courier New", monospace;
     font-size: 0.875rem;
     line-height: 1.7;
-    border: 1px solid #333;
+    border: 1px solid #2a2520;
   }
 
+  /* Reset code inside pre — inherits pre's colours */
   pre code {
     background: none;
     padding: 0;
@@ -912,16 +1024,7 @@ function buildFullFramework() {
     color: inherit;
     font-size: inherit;
     font-family: inherit;
-  }
-
-  /* Inline code */
-  code {
-    font-family: "Menlo", "Monaco", "Courier New", monospace;
-    font-size: 0.875em;
-    background-color: #2d2d2d;
-    color: #d4d4d4;
-    padding: 0.125rem 0.375rem;
-    border-radius: 4px;
+    display: inline;
   }
 ${bodyFont}`;
 
@@ -931,7 +1034,7 @@ ${bodyFont}`;
   css += `@layer theme {\n${variablesCss}}\n\n`;
   const baseStylesCss = generateBaseStyles(config);
   css += `@layer base {${baseCss}${baseStylesCss}}\n\n`;
-  css += `@layer components {\n  /* Reserved for component styles in a future release. */\n}\n\n`;
+  css += `@layer components {\n${generatePatternComponents()}}\n\n`;
   css += `@layer utilities {\n${utilityCss}}\n`;
 
   // Write output