clampography 2.0.0-beta.26 → 2.0.0-beta.28

package/package.json

@@ -24,9 +24,8 @@
     "src",
     "css"
   ],
-  "unpkg": "css/clampography.min.css",
-  "jsdelivr": "css/clampography.min.css",
   "homepage": "https://next.dav.one/clampography/",
+  "jsdelivr": "css/clampography.min.css",
   "keywords": [
     "alternative",
     "blog",
@@ -61,12 +60,12 @@
     "url": "git+https://github.com/Avaray/clampography.git"
   },
   "scripts": {
-    "build": "bun src/convert.js",
-    "test": "bun test",
-    "dev:css": "bunx @tailwindcss/cli -i ./dev/input.css -o ./dev/output.css --watch",
-    "dev:server": "bun run dev/server.js",
-    "dev": "bun run dev/server.js"
+    "build": "bun src/convert.js && bun src/export-figma.js",
+    "dev": "bun run dev/server.js",
+    "test": "bun test"
   },
+  "sideEffects": false,
   "type": "module",
-  "version": "2.0.0-beta.26"
+  "unpkg": "css/clampography.min.css",
+  "version": "2.0.0-beta.28"
 }

package/src/base.js

@@ -21,34 +21,91 @@ export default (options = {}) => {
     }
     parts.push(current.trim());
 
+    const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+
     return parts
       .filter(Boolean) // Remove empty strings
       .map((part) => {
         if (part === ":root" || part === "body") return root;
+        
+        // Apply typography scope isolation if configured
+        if (typographyPrefix) {
+          return `${root}${typographyPrefix} ${part}`;
+        }
+        
         // Avoid double spacing
         return `${root} ${part}`;
       })
       .join(", ");
   };
 
+  // Fluid math engine: Generates mathematically perfect clamp() strings
+  // dynamically based on the configured min and max screen sizes.
+  const minScreenRem = (options.fluidMin || 320) / 16;
+  const maxScreenRem = (options.fluidMax || 1280) / 16;
+
+  const makeFluid = (minRem, maxRem) => {
+    // If min and max are the same, or if we have invalid screens, just return the static value
+    if (minRem === maxRem || minScreenRem >= maxScreenRem) return `${minRem}rem`;
+
+    const slope = (maxRem - minRem) / (maxScreenRem - minScreenRem);
+    const intersection = minRem - slope * minScreenRem;
+
+    const format = (num) => parseFloat(num.toFixed(4));
+    
+    return `clamp(${minRem}rem, ${format(intersection)}rem + ${format(slope * 100)}vw, ${maxRem}rem)`;
+  };
+
   return {
-    // ROOT CONFIGURATION
-    [root]: {
-      "--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
-      "--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
-      "--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
-      "--spacing-lg": "clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem)",
-      "--spacing-xl": "clamp(1rem, 5vw, 3rem)",
-      "--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
+    // ROOT CONFIGURATION (CSS variables)
+    // Uses :where() for zero specificity so user overrides always win regardless of layer/source order
+    [`:where(${root})`]: {
+      // FLUID SPACING SYSTEM
+      "--spacing-xs": makeFluid(0.25, 0.75),
+      "--spacing-sm": makeFluid(0.375, 1.25),
+      "--spacing-md": makeFluid(0.5, 1.5),
+      "--spacing-lg": makeFluid(0.75, 2.5),
+      "--spacing-xl": makeFluid(1, 3),
+      "--list-indent": makeFluid(1.5, 2),
       "--scroll-offset": "5rem",
       "--font-family-base":
-        "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+        "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
       "--font-family-mono":
-        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-
-      // Body styles applied to the root container
-      "font-family": "var(--font-family-base)",
-      "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
+        "ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+
+      // HEADINGS FLUID TYPOGRAPHY
+      // Matches Tailwind CSS sizes: sm (min) to 2xl (max)
+      // Override any of these in :root to customize individual headings.
+      "--clampography-h1-size": makeFluid(1.875, 4),
+      "--clampography-h2-size": makeFluid(1.25, 3),
+      "--clampography-h3-size": makeFluid(1.125, 2.25),
+      "--clampography-h4-size": makeFluid(1, 1.5),
+      "--clampography-h5-size": "1rem",
+      "--clampography-h6-size": "0.875rem",
+
+      // Global heading scale multiplier (default: 1 = no scaling).
+      // Override in :root to proportionally scale all headings at once.
+      // Example: :root { --clampography-heading-scale: 0.85; }
+      "--clampography-heading-scale": "1",
+      
+      // Individual heading scales (default to global scale)
+      "--clampography-h1-scale": "var(--clampography-heading-scale)",
+      "--clampography-h2-scale": "var(--clampography-heading-scale)",
+      "--clampography-h3-scale": "var(--clampography-heading-scale)",
+      "--clampography-h4-scale": "var(--clampography-heading-scale)",
+      "--clampography-h5-scale": "var(--clampography-heading-scale)",
+      "--clampography-h6-scale": "var(--clampography-heading-scale)",
+    },
+
+    // BODY STYLES (Typography baseline)
+    // Note: font-family is intentionally NOT set here.
+    // It is applied in extra.js with user-font priority via --font-sans.
+    [(() => {
+      const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+      const bodyBase = root === ":root" ? "body" : root;
+      return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
+    })()]: {
+      "font-size": makeFluid(0.875, 1.125),
       "line-height": "1.75",
       "text-rendering": "optimizeLegibility",
       "-webkit-font-smoothing": "antialiased",
@@ -63,7 +120,7 @@ export default (options = {}) => {
     },
 
     [scope("h1")]: {
-      "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
+      "font-size": "calc(var(--clampography-h1-size) * var(--clampography-h1-scale))",
       "line-height": "1.1111",
       "font-weight": "800",
       "margin-top": "0",
@@ -71,7 +128,7 @@ export default (options = {}) => {
     },
 
     [scope("h2")]: {
-      "font-size": "clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem)",
+      "font-size": "calc(var(--clampography-h2-size) * var(--clampography-h2-scale))",
       "line-height": "1.3333",
       "font-weight": "700",
       "margin-top": "var(--spacing-xl)",
@@ -79,28 +136,28 @@ export default (options = {}) => {
     },
 
     [scope("h3")]: {
-      "font-size": "clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem)",
+      "font-size": "calc(var(--clampography-h3-size) * var(--clampography-h3-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-lg)",
       "margin-bottom": "var(--spacing-sm)",
     },
 
     [scope("h4")]: {
-      "font-size": "clamp(1rem, 0.975rem + 0.125vw, 1.125rem)",
+      "font-size": "calc(var(--clampography-h4-size) * var(--clampography-h4-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-lg)",
       "margin-bottom": "var(--spacing-sm)",
     },
 
     [scope("h5")]: {
-      "font-size": "1rem",
+      "font-size": "calc(var(--clampography-h5-size) * var(--clampography-h5-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-xs)",
     },
 
     [scope("h6")]: {
-      "font-size": "0.875rem",
+      "font-size": "calc(var(--clampography-h6-size) * var(--clampography-h6-scale))",
       "line-height": "1.5",
       "margin-top": "var(--spacing-md)",
       "margin-bottom": "var(--spacing-xs)",
@@ -175,6 +232,8 @@ export default (options = {}) => {
     [scope(":where(code, kbd, samp)")]: {
       "font-family": "var(--font-family-mono)",
       "font-size": "0.875em",
+      "-webkit-font-smoothing": "auto",
+      "-moz-osx-font-smoothing": "auto",
     },
 
     [scope("kbd")]: {
@@ -358,6 +417,8 @@ export default (options = {}) => {
       "font-family": "var(--font-family-mono)",
       "line-height": "1.6",
       "overflow-x": "auto",
+      "-webkit-font-smoothing": "auto",
+      "-moz-osx-font-smoothing": "auto",
     },
 
     [scope("pre code")]: {

package/src/export-figma.js

@@ -0,0 +1,43 @@
+import fs from "fs";
+import { resolve } from "path";
+import * as themes from "./themes.js";
+
+const OUTPUT_DIR = "css";
+const OUTPUT_FILE = "figma-tokens.json";
+
+function exportTokens() {
+  console.log("🎨 Starting Figma Design Tokens export...");
+  
+  if (!fs.existsSync(OUTPUT_DIR)) {
+    fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  const tokens = {};
+  let themeCount = 0;
+
+  for (const [themeName, themeData] of Object.entries(themes)) {
+    // Figma convention: nested objects by theme name
+    tokens[themeName] = {};
+    themeCount++;
+    
+    for (const [key, value] of Object.entries(themeData)) {
+      // Skip non-color attributes like color-scheme
+      if (!key.startsWith("--clampography-")) continue;
+      
+      // Clean up the key name for Figma (e.g., "--clampography-primary" -> "primary")
+      const colorName = key.replace("--clampography-", "");
+      
+      tokens[themeName][colorName] = {
+        value: value,
+        type: "color"
+      };
+    }
+  }
+
+  const outputPath = resolve(OUTPUT_DIR, OUTPUT_FILE);
+  fs.writeFileSync(outputPath, JSON.stringify(tokens, null, 2), "utf-8");
+
+  console.log(`✅ Successfully exported ${themeCount} themes to ${OUTPUT_DIR}/${OUTPUT_FILE}!`);
+}
+
+exportTokens();

package/src/extra.js

@@ -21,20 +21,45 @@ export default (options = {}) => {
     }
     parts.push(current.trim());
 
+    const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+
     return parts
       .filter(Boolean)
       .map((part) => {
         if (part === ":root" || part === "body") return root;
+        if (typographyPrefix) {
+          return `${root}${typographyPrefix} ${part}`;
+        }
         return `${root} ${part}`;
       })
       .join(", ");
   };
 
   return {
-    // --- Basic Coloring ---
-    [root]: {
+    // Transition duration token — drives smooth color changes when the theme changes.
+    // Scoped here (not in base.js) because transitions are an extra.js concern.
+    // Users can override: :root { --clampography-transition-duration: 0ms; } to disable.
+    [`:where(${root})`]: {
+      "--clampography-transition-duration": "200ms",
+    },
+
+    // --- Basic Coloring & Font (with user-font priority) ---
+    [(() => {
+      const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+      const bodyBase = root === ":root" ? "body" : root;
+      return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
+    })()]: {
       "background-color": "var(--clampography-background)",
       "color": "var(--clampography-text)",
+      // --font-sans is Tailwind v4's way to expose the user's font choice.
+      // If the user sets a font in their project, it wins. If not, fallback to clampography's system stack.
+      "font-family": "var(--font-sans, var(--font-family-base))",
+      // Smooth theme transitions: all color CSS variables animate when data-theme changes.
+      // Duration is driven by the token set in base.js (default 200ms).
+      // Automatically disabled by the prefers-reduced-motion media query in base.js.
+      "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
+      "transition-duration": "var(--clampography-transition-duration, 200ms)",
+      "transition-timing-function": "ease",
     },
 
     [scope(":where(h1, h2, h3, h4, h5, h6)")]: {
@@ -147,7 +172,7 @@ export default (options = {}) => {
 
     // Deleted Text
     [scope("del")]: {
-      "text-decoration-color": "var(--clampography-secondary)",
+      "text-decoration-color": "var(--clampography-error)",
       "text-decoration-thickness": "2px",
     },
 
@@ -167,5 +192,66 @@ export default (options = {}) => {
       "border-bottom-width": "1px",
       "padding-bottom": "var(--spacing-sm)",
     },
+
+    // ACCESSIBILITY: Disable all transitions for users who prefer reduced motion.
+    // Respects the OS-level "Reduce Motion" setting on macOS, Windows, iOS, and Android.
+    // Placed here (not in base.js) because it targets the transitions added above.
+    "@media (prefers-reduced-motion: reduce)": {
+      [(() => {
+        const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+        const bodyBase = root === ":root" ? "body" : root;
+        return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
+      })()]: {
+        "transition": "none",
+        "--clampography-transition-duration": "0ms",
+      },
+    },
+
+    // ACCESSIBILITY: High-contrast mode for users who need maximum legibility.
+    // Triggered automatically by the OS "Increase Contrast" setting on macOS,
+    // Windows High Contrast Mode, or Android's Accessibility settings.
+    "@media (prefers-contrast: more)": {
+      [(() => {
+        const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+        const bodyBase = root === ":root" ? "body" : root;
+        return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
+      })()]: {
+        // Override theme colors with absolute black/white for maximum legibility
+        "background-color": "white",
+        "color": "black",
+      },
+      [scope(":where(h1, h2, h3, h4, h5, h6)")]: {
+        "color": "black",
+      },
+      [scope("a")]: {
+        "color": "black",
+        "text-decoration": "underline",
+        "text-decoration-thickness": "2px",
+        "font-weight": "700",
+      },
+      [scope(":where(code:not(pre code), kbd, samp)")]: {
+        "background-color": "#f0f0f0",
+        "color": "black",
+        "border": "2px solid black",
+      },
+      [scope("pre")]: {
+        "background-color": "#f0f0f0",
+        "color": "black",
+        "border": "2px solid black",
+      },
+      [scope("blockquote")]: {
+        "background-color": "#f0f0f0",
+        "border-left-color": "black",
+        "border-left-width": "6px",
+        "color": "black",
+      },
+      [scope("th, td")]: {
+        "border": "2px solid black",
+      },
+      [scope("hr")]: {
+        "background-color": "black",
+        "height": "2px",
+      },
+    },
   };
 };

package/src/index.js

@@ -4,6 +4,7 @@ import baseStyles from "./base.js";
 import extraStyles from "./extra.js";
 import formsStyles from "./forms.js";
 import kbdStyles from "./kbd.js";
+import printStyles from "./print.js";
 
 // Import version from package.json
 import { version } from "../package.json" with { type: "json" };
@@ -44,12 +45,21 @@ export default plugin.withOptions(
         const includeExtra = resolveBool(options.extra, false); // Default: false
         const includeForms = resolveBool(options.forms, false); // Default: false
         const includeKbd = resolveBool(options.kbd, false);   // Default: false
+        const includePrint = resolveBool(options.print, false); // Default: false
+
+        // Extract fluid bounds for clampography math engine
+        const fluidMin = parseInt(options["fluid-min"] || options.fluidMin || "320");
+        const fluidMax = parseInt(options["fluid-max"] || options.fluidMax || "1280");
+
+        // Extract typography scope option (default: global)
+        const typography = options.typography || "global";
 
         // Pass options to the style functions to enable scoping
-        includeBase && addBase(baseStyles(options));
-        includeExtra && addBase(extraStyles(options));
-        includeForms && addBase(formsStyles(options));
-        includeKbd && addBase(kbdStyles(options));
+        includeBase && addBase(baseStyles({ ...options, fluidMin, fluidMax, typography }));
+        includeExtra && addBase(extraStyles({ ...options, typography }));
+        includeForms && addBase(formsStyles({ ...options, typography }));
+        includeKbd && addBase(kbdStyles({ ...options, typography }));
+        includePrint && addBase(printStyles({ ...options, typography }));
 
         // 2. Parse themes configuration
         let configThemes = options.themes;

package/src/print.js

@@ -0,0 +1,92 @@
+export default (options = {}) => {
+  const root = options.root || ":root";
+
+  // Helper to scope selectors safely (ignoring commas inside parentheses)
+  const scope = (selector) => {
+    const parts = [];
+    let current = "";
+    let depth = 0;
+
+    for (let i = 0; i < selector.length; i++) {
+      const char = selector[i];
+      if (char === "(") depth++;
+      if (char === ")") depth--;
+
+      if (char === "," && depth === 0) {
+        parts.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    parts.push(current.trim());
+
+    const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+
+    return parts
+      .filter(Boolean)
+      .map((part) => {
+        if (part === ":root" || part === "body") return root;
+        if (typographyPrefix) {
+          return `${root}${typographyPrefix} ${part}`;
+        }
+        return `${root} ${part}`;
+      })
+      .join(", ");
+  };
+
+  return {
+    // PRINT OPTIMIZATION: Force clean, ink-friendly output for printing and PDF export.
+    // Overrides all theme colors, removes backgrounds, and converts fluid vw units to
+    // static sizes so text renders correctly on physical paper (A4/Letter).
+    "@media print": {
+      [(() => {
+        const typographyPrefix = options.typography && options.typography !== "global" ? ` ${options.typography}` : "";
+        const bodyBase = root === ":root" ? "body" : root;
+        return typographyPrefix ? `${bodyBase}${typographyPrefix}` : bodyBase;
+      })()]: {
+        // Static sizes — vw-based clamp() is meaningless on paper
+        "font-size": "12pt",
+        "line-height": "1.6",
+        // Force black-on-white for max legibility and ink saving
+        "color": "black",
+        "background": "white",
+        // Disable all transitions
+        "transition": "none",
+      },
+      [scope(":where(h1, h2, h3, h4, h5, h6)")]: {
+        "color": "black",
+        "page-break-after": "avoid",
+      },
+      [scope("h1")]: { "font-size": "28pt" },
+      [scope("h2")]: { "font-size": "22pt" },
+      [scope("h3")]: { "font-size": "18pt" },
+      [scope("h4")]: { "font-size": "14pt" },
+      [scope("h5")]: { "font-size": "12pt" },
+      [scope("h6")]: { "font-size": "11pt" },
+      [scope("a")]: {
+        // Force readable link styling on paper
+        "color": "black",
+        "text-decoration": "underline",
+      },
+      [scope("pre, blockquote")]: {
+        // Avoid cutting code blocks and blockquotes across page breaks
+        "page-break-inside": "avoid",
+        "border": "1px solid #ccc",
+        "background": "#f5f5f5",
+      },
+      [scope("table")]: {
+        "page-break-inside": "avoid",
+        "border": "1px solid #ccc",
+      },
+      [scope("th, td")]: {
+        "border": "1px solid #ccc",
+      },
+      [scope("img, figure")]: {
+        // Prevent images from overflowing the page
+        "max-width": "100%",
+        "page-break-inside": "avoid",
+      },
+    },
+  };
+};