clampography 2.0.0-beta.27 → 2.0.0-beta.29

package/css/figma-tokens.json

@@ -0,0 +1,112 @@
+{
+  "dark": {
+    "background": {
+      "value": "oklch(10% 0 0)",
+      "type": "color"
+    },
+    "border": {
+      "value": "oklch(31% 0.03 254)",
+      "type": "color"
+    },
+    "error": {
+      "value": "oklch(63% 0.22 27)",
+      "type": "color"
+    },
+    "heading": {
+      "value": "oklch(98% 0.003 264)",
+      "type": "color"
+    },
+    "info": {
+      "value": "oklch(72% 0.17 254)",
+      "type": "color"
+    },
+    "link": {
+      "value": "oklch(72% 0.17 254)",
+      "type": "color"
+    },
+    "muted": {
+      "value": "oklch(68% 0.024 254)",
+      "type": "color"
+    },
+    "primary": {
+      "value": "oklch(63% 0.258 262)",
+      "type": "color"
+    },
+    "secondary": {
+      "value": "oklch(63% 0.25 300)",
+      "type": "color"
+    },
+    "success": {
+      "value": "oklch(65% 0.17 165)",
+      "type": "color"
+    },
+    "surface": {
+      "value": "oklch(12% 0 0)",
+      "type": "color"
+    },
+    "text": {
+      "value": "oklch(95% 0 0)",
+      "type": "color"
+    },
+    "warning": {
+      "value": "oklch(72% 0.17 65)",
+      "type": "color"
+    }
+  },
+  "light": {
+    "background": {
+      "value": "oklch(100% 0 0)",
+      "type": "color"
+    },
+    "border": {
+      "value": "oklch(92% 0.003 264)",
+      "type": "color"
+    },
+    "error": {
+      "value": "oklch(63% 0.22 27)",
+      "type": "color"
+    },
+    "heading": {
+      "value": "oklch(15% 0.02 264)",
+      "type": "color"
+    },
+    "info": {
+      "value": "oklch(63% 0.258 262)",
+      "type": "color"
+    },
+    "link": {
+      "value": "oklch(43% 0.19 264)",
+      "type": "color"
+    },
+    "muted": {
+      "value": "oklch(52% 0.014 258)",
+      "type": "color"
+    },
+    "primary": {
+      "value": "oklch(63% 0.258 262)",
+      "type": "color"
+    },
+    "secondary": {
+      "value": "oklch(55% 0.28 300)",
+      "type": "color"
+    },
+    "success": {
+      "value": "oklch(65% 0.17 165)",
+      "type": "color"
+    },
+    "surface": {
+      "value": "oklch(96% 0.003 264)",
+      "type": "color"
+    },
+    "text": {
+      "value": "oklch(31% 0.02 257)",
+      "type": "color"
+    },
+    "warning": {
+      "value": "oklch(72% 0.17 65)",
+      "type": "color"
+    }
+  },
+  "themes": {},
+  "themesList": {}
+}

package/css/theme.css

@@ -1,6 +1,6 @@
 @layer base {
 
-:where(:root), [data-theme="light"] {
+:where(:root) {
   color-scheme: light;
   --clampography-background: oklch(100% 0 0);
   --clampography-border: oklch(92% 0.003 264);
@@ -35,40 +35,6 @@
    --clampography-text: oklch(95% 0 0);
    --clampography-warning: oklch(72% 0.17 65);
  }
-
- [data-theme="dark"] {
-   color-scheme: dark;
-   --clampography-background: oklch(10% 0 0);
-   --clampography-border: oklch(31% 0.03 254);
-   --clampography-error: oklch(63% 0.22 27);
-   --clampography-heading: oklch(98% 0.003 264);
-   --clampography-info: oklch(72% 0.17 254);
-   --clampography-link: oklch(72% 0.17 254);
-   --clampography-muted: oklch(68% 0.024 254);
-   --clampography-primary: oklch(63% 0.258 262);
-   --clampography-secondary: oklch(63% 0.25 300);
-   --clampography-success: oklch(65% 0.17 165);
-   --clampography-surface: oklch(12% 0 0);
-   --clampography-text: oklch(95% 0 0);
-   --clampography-warning: oklch(72% 0.17 65);
- }
-
- [data-theme="light"] {
-   color-scheme: light;
-   --clampography-background: oklch(100% 0 0);
-   --clampography-border: oklch(92% 0.003 264);
-   --clampography-error: oklch(63% 0.22 27);
-   --clampography-heading: oklch(15% 0.02 264);
-   --clampography-info: oklch(63% 0.258 262);
-   --clampography-link: oklch(43% 0.19 264);
-   --clampography-muted: oklch(52% 0.014 258);
-   --clampography-primary: oklch(63% 0.258 262);
-   --clampography-secondary: oklch(55% 0.28 300);
-   --clampography-success: oklch(65% 0.17 165);
-   --clampography-surface: oklch(96% 0.003 264);
-   --clampography-text: oklch(31% 0.02 257);
-   --clampography-warning: oklch(72% 0.17 65);
- }
 }
 
 [data-theme="dark"] {
@@ -87,4 +53,21 @@
   --clampography-text: oklch(95% 0 0);
   --clampography-warning: oklch(72% 0.17 65);
 }
+
+[data-theme="light"] {
+  color-scheme: light;
+  --clampography-background: oklch(100% 0 0);
+  --clampography-border: oklch(92% 0.003 264);
+  --clampography-error: oklch(63% 0.22 27);
+  --clampography-heading: oklch(15% 0.02 264);
+  --clampography-info: oklch(63% 0.258 262);
+  --clampography-link: oklch(43% 0.19 264);
+  --clampography-muted: oklch(52% 0.014 258);
+  --clampography-primary: oklch(63% 0.258 262);
+  --clampography-secondary: oklch(55% 0.28 300);
+  --clampography-success: oklch(65% 0.17 165);
+  --clampography-surface: oklch(96% 0.003 264);
+  --clampography-text: oklch(31% 0.02 257);
+  --clampography-warning: oklch(72% 0.17 65);
+}
 }

package/css/theme.min.css

@@ -1 +1 @@
-@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}
+@layer base{:where(:root){color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}

package/package.json

@@ -60,13 +60,12 @@
     "url": "git+https://github.com/Avaray/clampography.git"
   },
   "scripts": {
-    "build": "bun src/convert.js",
+    "build": "bun src/convert.js && bun src/export-figma.js",
     "dev": "bun run dev/server.js",
-    "dev:server": "bun run dev/server.js",
     "test": "bun test"
   },
   "sideEffects": false,
   "type": "module",
   "unpkg": "css/clampography.min.css",
-  "version": "2.0.0-beta.27"
+  "version": "2.0.0-beta.29"
 }

package/src/base.js

@@ -21,40 +21,118 @@ 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 (CSS variables)
     // Uses :where() for zero specificity so user overrides always win regardless of layer/source order
     [`:where(${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)",
+      // 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":
         "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
       "--font-family-mono":
         "ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
 
-      // Heading size tokens (30→54px, 22→30px, 18→24px, 16→20px, static)
-      // Override any of these in :root to customize individual headings.
-      "--clampography-h1-size": "clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem)",
-      "--clampography-h2-size": "clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem)",
-      "--clampography-h3-size": "clamp(1.125rem, 1rem + 0.625vw, 1.5rem)",
-      "--clampography-h4-size": "clamp(1rem, 0.917rem + 0.42vw, 1.25rem)",
-      "--clampography-h5-size": "1rem",
-      "--clampography-h6-size": "0.875rem",
+      // FLUID TYPOGRAPHY ENGINE — Viewport Bounds
+      // Unitless rem values derived from plugin options: fluid-min and fluid-max.
+      // e.g. 320px → 20rem, 1280px → 80rem
+      "--clampography-v-min": String(minScreenRem),
+      "--clampography-v-max": String(maxScreenRem),
+
+      // HEADINGS FLUID TYPOGRAPHY
+      // Each heading exposes --min and --max as unitless rem values.
+      // Override these in :root to change font-size bounds without rewriting the full clamp().
+      //
+      //   Example — reduce H1 max size on large screens:
+      //   :root { --clampography-h1-max: 3; }
+      //
+      //   Example — increase H2 minimum size on mobile:
+      //   :root { --clampography-h2-min: 1.5; }
+      //
+      // --clampography-h*-slope and --clampography-h*-base are computed automatically via CSS calc().
+      // --clampography-h*-size is the final fluid clamp() value used by the heading element.
+
+      // H1
+      "--clampography-h1-min": "1.875",
+      "--clampography-h1-max": "4",
+      "--clampography-h1-slope": "calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h1-base": "calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-v-min))",
+      "--clampography-h1-size": "clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem))",
+
+      // H2
+      "--clampography-h2-min": "1.25",
+      "--clampography-h2-max": "3",
+      "--clampography-h2-slope": "calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h2-base": "calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-v-min))",
+      "--clampography-h2-size": "clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem))",
+
+      // H3
+      "--clampography-h3-min": "1.125",
+      "--clampography-h3-max": "2.25",
+      "--clampography-h3-slope": "calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h3-base": "calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-v-min))",
+      "--clampography-h3-size": "clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem))",
+
+      // H4
+      "--clampography-h4-min": "1",
+      "--clampography-h4-max": "1.5",
+      "--clampography-h4-slope": "calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h4-base": "calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-v-min))",
+      "--clampography-h4-size": "clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem))",
+
+      // H5 — static by default (min === max); set --clampography-h5-max to a different value to make it fluid
+      "--clampography-h5-min": "1",
+      "--clampography-h5-max": "1",
+      "--clampography-h5-slope": "calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h5-base": "calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-v-min))",
+      "--clampography-h5-size": "clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem))",
+
+      // H6 — static by default (min === max)
+      "--clampography-h6-min": "0.875",
+      "--clampography-h6-max": "0.875",
+      "--clampography-h6-slope": "calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-v-max) - var(--clampography-v-min)))",
+      "--clampography-h6-base": "calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-v-min))",
+      "--clampography-h6-size": "clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem))",
 
       // Global heading scale multiplier (default: 1 = no scaling).
       // Override in :root to proportionally scale all headings at once.
@@ -73,8 +151,12 @@ export default (options = {}) => {
     // 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.
-    [root === ":root" ? "body" : root]: {
-      "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
+    [(() => {
+      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",

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",
+      },
+    },
+  };
+};