emily-css 1.0.17 → 1.0.18

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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**

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.17",
+  "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/index.js

@@ -983,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;
@@ -1003,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}`;
 
@@ -1150,4 +1162,4 @@ module.exports = {
   addResponsiveVariants,
   generateFontCSS,
   codeUtilities,
-};
+};