clampography 2.0.0-beta.27 → 2.0.0-beta.28

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,23 +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 {
+    // 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) ---
-    [root === ":root" ? "body" : root]: {
+    [(() => {
+      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)")]: {
@@ -150,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",
     },
 
@@ -170,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",
+      },
+    },
+  };
+};