swatchkit 0.11.0 → 0.12.0

package/README.md

@@ -221,15 +221,15 @@ Compiles your documentation site into `dist/swatchkit/`.
 
 1.  **Reads JSON Tokens**: Scans `tokens/*.json` and calculates fluid typography/spacing.
 2.  **Generates CSS**: Creates `css/tokens.css`. **Do not edit this file**; it is overwritten every build.
-3.  **Copies Assets**: Copies your `css/` folder (including your manually edited `global-styles.css` and `main.css`) to the output folder.
+3.  **Copies Assets**: Copies your `css/` folder (including your manually edited `main.css`, `global/variables.css`, and `global/elements.css`) to the output folder.
 4.  **Scans Patterns**: Finds all HTML files in `swatchkit/` and stitches them into the documentation site.
 5.  **Bundles JavaScript**: Collects any `.js` files from swatch folders (e.g., `swatchkit/carousel/script.js`) and section directories into a single `js/swatches.js` bundle. The default token display script (`swatchkit/tokens/script.js`) is included here — it shows computed CSS values alongside token documentation.
 
 ### Global Styles & Variables
-SwatchKit includes sensible defaults in `css/variables.css` and `css/global-styles.css`.
-*   These are **static files** copied to your project during `init`.
-*   They are **disabled by default** (commented out in `main.css`).
-*   **Action Required:** Open these files, verify that the variable names match your `tokens/*.json` names, and then uncomment the imports in `main.css` to enable them.
+SwatchKit includes sensible defaults in `css/global/variables.css` and `css/global/elements.css`.
+*   These are **static files** copied to your project during `init` and **enabled by default**.
+*   Variable references use the default token names from `tokens/*.json`. If you rename any tokens, update the `var()` references in these files to match.
+*   Both files are yours to edit — add your own variables and element styles freely.
 
 ### What is Safe to Edit?
 
@@ -237,7 +237,8 @@ SwatchKit includes sensible defaults in `css/variables.css` and `css/global-styl
 | :--- | :--- | :--- |
 | `tokens/*.json` | ✅ **YES** | Your source of truth. Safe. |
 | `css/main.css` | ✅ **YES** | Your entry point. Safe. |
-| `css/global-styles.css` | ✅ **YES** | You own this. Manually update if you rename tokens. |
+| `css/global/variables.css` | ✅ **YES** | You own this. Update var() references if you rename tokens. |
+| `css/global/elements.css` | ✅ **YES** | You own this. Update var() references if you rename tokens. |
 | `css/tokens.css` | 🚫 **NO** | Overwritten by **every** `swatchkit build` and `swatchkit init`. |
 | `swatchkit/_layout.html`| ✅ **YES** | Safe during normal use. `init --force` overwrites all init-managed files, including this one. |
 | `swatchkit/_preview.html`| ✅ **YES** | Same as `_layout.html` — safe unless you run `init --force`. |

package/build.js

@@ -698,13 +698,17 @@ function build(settings) {
         const previewPath = p.sectionSlug
           ? `preview/${p.sectionSlug}/${p.id}.html`
           : `preview/${p.id}.html`;
+        const previewLink = previewPath.replace(/\.html$/, '');
 
         return `
-      <section id="${p.id}" class="flow">
+      <section id="${p.id}" class="region flow">
         <h2>${p.name} <small style="font-weight: normal; opacity: 0.6; font-size: 0.7em">(${section})</small></h2>
-        <div class="preview">${p.content}</div>
-        <div class="swatchkit-preview-link"><a href="${previewPath}">View full screen</a></div>
-        <pre><code>${escapedContent}</code></pre>
+        <iframe src="${previewPath}" style="width: 100%; border: var(--stroke); min-height: 25rem; resize: vertical; overflow: auto;"></iframe>
+        <div class="swatchkit-preview-link"><a href="${previewLink}">View full screen</a></div>
+        <details>
+          <summary>View source</summary>
+          <pre><code>${escapedContent}</code></pre>
+        </details>
       </section>
     `;
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swatchkit",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "A lightweight tool for creating HTML pattern libraries.",
   "main": "build.js",
   "bin": {

package/src/layout.html

@@ -10,7 +10,7 @@
   </head>
   <body>
     <div class="swatchkit-ui sidebar">
-      <nav class="wrapper flow">
+      <nav class="wrapper region flow">
         <header>
           <h2>SwatchKit</h2>
         </header>