clampography 2.0.0-beta.9 → 2.0.1

package/src/forms.js

@@ -0,0 +1,298 @@
+export default (options = {}) => {
+  const root = options.root || ":root";
+
+  // Helper to scope selectors safely
+  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());
+
+    return parts
+      .filter(Boolean)
+      .map((part) => {
+        if (part === ":root" || part === "body") return root;
+        return `${root} ${part}`;
+      })
+      .join(", ");
+  };
+
+  return {
+    // ── Buttons ──────────────────────────────────────────────────────────────
+    [scope(":where(button, [type='button'], [type='reset'], [type='submit'])")]: {
+      "display": "inline-flex",
+      "align-items": "center",
+      "justify-content": "center",
+      "gap": "0.375em",
+      "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
+      "background-color": "var(--clampography-surface)",
+      "color": "var(--clampography-text)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "font-weight": "500",
+      "white-space": "nowrap",
+      "transition-property": "background-color, border-color, color, box-shadow",
+      "transition-duration": "150ms",
+    },
+
+    [scope(":where(button, [type='button'], [type='reset'], [type='submit']):hover")]: {
+      "background-color": "var(--clampography-background)",
+      "border-color": "var(--clampography-primary)",
+    },
+
+    [scope(":where(button, [type='button'], [type='submit']).primary, [type='submit']")]: {
+      "background-color": "var(--clampography-primary)",
+      "color": "var(--clampography-background)",
+      "border-color": "var(--clampography-primary)",
+    },
+
+    [scope(":where(button, [type='button'], [type='submit']).primary:hover, [type='submit']:hover")]: {
+      "filter": "brightness(1.1)",
+    },
+
+    // ── Text Inputs & Textarea ────────────────────────────────────────────────
+    [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select)")]: {
+      "display": "block",
+      "width": "100%",
+      "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
+      "background-color": "var(--clampography-background)",
+      "color": "var(--clampography-text)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "transition-property": "border-color, box-shadow",
+      "transition-duration": "150ms",
+    },
+
+    [scope(":where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus")]: {
+      "outline": "none",
+      "border-color": "var(--clampography-primary)",
+      "box-shadow": "0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)",
+    },
+
+    [scope(":where(input, textarea, select):disabled")]: {
+      "opacity": "0.5",
+      "cursor": "not-allowed",
+    },
+
+    [scope(":where(input, textarea, select)[readonly]")]: {
+      "background-color": "color-mix(in oklab, var(--clampography-surface) 50%, transparent)",
+      "cursor": "default",
+    },
+
+    [scope(":where(input, textarea, select):user-invalid")]: {
+      "border-color": "var(--clampography-error)",
+    },
+
+    [scope(":where(input, textarea, select):user-invalid:focus")]: {
+      "box-shadow": "0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)",
+    },
+
+    [scope("[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
+    },
+
+    [scope("[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button")]: {
+      "height": "auto",
+    },
+
+    [scope(":where(input, textarea, select)::placeholder")]: {
+      "color": "var(--clampography-muted)",
+    },
+
+    // ── Select ────────────────────────────────────────────────────────────────
+    [scope("select")]: {
+      "appearance": "none",
+      "background-image": `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E")`,
+      "background-position": "inline-end 0.5rem center",
+      "background-repeat": "no-repeat",
+      "background-size": "1.5em 1.5em",
+      "padding-inline-end": "2.5rem",
+    },
+
+    // ── File Input ────────────────────────────────────────────────────────────
+    [scope("[type='file']")]: {
+      "padding": "0",
+      "background-color": "transparent",
+      "border": "none",
+      "cursor": "pointer",
+    },
+
+    [scope("[type='file']::file-selector-button")]: {
+      "display": "inline-flex",
+      "align-items": "center",
+      "padding": "var(--clampography-spacing-xs) var(--clampography-spacing-sm)",
+      "margin-inline-end": "var(--clampography-spacing-sm)",
+      "background-color": "var(--clampography-surface)",
+      "color": "var(--clampography-text)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "font-family": "inherit",
+      "font-size": "inherit",
+      "cursor": "pointer",
+      "transition-property": "background-color, border-color",
+      "transition-duration": "150ms",
+    },
+
+    [scope("[type='file']:hover::file-selector-button")]: {
+      "background-color": "var(--clampography-background)",
+      "border-color": "var(--clampography-primary)",
+    },
+
+    // ── Checkbox & Radio ──────────────────────────────────────────────────────
+    [scope("[type='checkbox'], [type='radio']")]: {
+      "width": "1em",
+      "height": "1em",
+      "accent-color": "var(--clampography-primary)",
+      "vertical-align": "middle",
+      "cursor": "pointer",
+    },
+
+    [scope("[type='checkbox']:focus-visible, [type='radio']:focus-visible")]: {
+      "outline": "2px solid var(--clampography-primary)",
+      "outline-offset": "2px",
+    },
+
+    // ── Range ────────────────────────────────────────────────────────────────
+    [scope("[type='range']")]: {
+      "accent-color": "var(--clampography-primary)",
+      "width": "100%",
+      "cursor": "pointer",
+    },
+
+    // ── Color Picker ──────────────────────────────────────────────────────────
+    [scope("[type='color']")]: {
+      "padding": "0.125rem",
+      "width": "2.5rem",
+      "height": "2.5rem",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "background-color": "var(--clampography-background)",
+      "cursor": "pointer",
+    },
+
+    // ── Fieldset & Legend ────────────────────────────────────────────────────
+    [scope("fieldset")]: {
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.5rem",
+      "background-color": "var(--clampography-surface)",
+    },
+
+    [scope("legend")]: {
+      "color": "var(--clampography-heading)",
+    },
+
+    // ── Label ────────────────────────────────────────────────────────────────
+    [scope("label")]: {
+      "color": "var(--clampography-text)",
+    },
+
+    // ── Output ───────────────────────────────────────────────────────────────
+    [scope("output")]: {
+      "color": "var(--clampography-primary)",
+      "font-weight": "600",
+    },
+
+    // ── Progress ──────────────────────────────────────────────────────────────
+    [scope("progress")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
+      "width": "100%",
+      "height": "1em",
+      "background": "transparent",
+    },
+
+    // WebKit progress track
+    [scope("progress::-webkit-progress-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+    },
+
+    // WebKit progress value
+    [scope("progress::-webkit-progress-value")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // Firefox progress value
+    [scope("progress::-moz-progress-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // ── Meter ─────────────────────────────────────────────────────────────────
+    // Custom styling for <meter> (accent-color does not work on meter)
+    [scope("meter")]: {
+      "-webkit-appearance": "none",
+      "appearance": "none",
+      "width": "100%",
+      "height": "1em",
+      "background": "transparent",
+    },
+
+    // Firefox track (restored via Firefox-only feature query)
+    // @supports (-moz-appearance: none) is ignored by all WebKit/Blink browsers
+    "@supports (-moz-appearance: none)": {
+      [scope("progress")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+      [scope("meter")]: {
+        "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      },
+    },
+
+    // Re-establish height context for WebKit shadow DOM
+    // appearance:none breaks Chrome's flex layout; inner elements can't resolve height:100%
+    // without a concrete parent height set here.
+    // display:flex + align-items:stretch forces the child bar to fill the full height
+    // without top-anchoring it the way display:block would.
+    [scope("meter::-webkit-meter-inner-element")]: {
+      "display": "flex",
+      "align-items": "stretch",
+      "height": "1em",
+    },
+
+    // WebKit inner track
+    [scope("meter::-webkit-meter-bar")]: {
+      "background": "color-mix(in oklab, var(--clampography-text) 20%, transparent)",
+      "height": "100%",
+    },
+
+    // 1. Optimum (Success)
+    [scope("meter::-webkit-meter-optimum-value")]: {
+      "background": "var(--clampography-success)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-success)",
+    },
+
+    // 2. Sub-optimum (Warning)
+    [scope("meter::-webkit-meter-suboptimum-value")]: {
+      "background": "var(--clampography-warning)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-warning)",
+    },
+
+    // 3. Even less good (Error)
+    [scope("meter::-webkit-meter-even-less-good-value")]: {
+      "background": "var(--clampography-error)",
+      "height": "100%",
+    },
+    [scope("meter:-moz-meter-sub-sub-optimum::-moz-meter-bar")]: {
+      "background": "var(--clampography-error)",
+    },
+
+  };
+};

package/src/index.js

@@ -2,108 +2,266 @@ import plugin from "tailwindcss/plugin";
 import { themes as builtInThemes } from "./themes.js";
 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";
+
+
 
 /**
  * Helper to resolve boolean options from CSS configuration.
  * CSS values often come as strings ("true"/"false"), which are both truthy in JS.
  */
 const resolveBool = (value, defaultValue) => {
-  if (value === "false" || value === false) return false;
-  if (value === "true" || value === true) return true;
+  if (
+    value === "false" || value === false || value === "no" || value === "none"
+  ) return false;
+  if (value === "true" || value === true || value === "yes") return true;
   return defaultValue;
 };
 
 /**
  * Main plugin function.
  */
-export default plugin.withOptions((options = {}) => {
-  return ({ addBase }) => {
-    // 1. Load Base and Extra styles
-    // We use the helper to correctly parse "false" string from CSS
-    const includeBase = resolveBool(options.base, true); // Default: true
-    const includeExtra = resolveBool(options.extra, false); // Default: false
-
-    includeBase && addBase(baseStyles);
-    includeExtra && addBase(extraStyles);
-
-    // 2. Parse themes configuration
-    let configThemes = options.themes;
-    let themesToInclude = [];
-    let defaultThemeName = null;
-    let prefersDarkTheme = false;
-    let rootSelector = options.root ?? ":root";
-
-    // Normalize input to an array of strings
-    let rawThemeList = [];
-
-    if (typeof configThemes === "string") {
-      if (configThemes.trim() === "all") {
-        // Special case: themes: all
-        rawThemeList = Object.keys(builtInThemes);
-      } else if (configThemes.trim() === "false") {
-        // Explicitly disabled themes
-        rawThemeList = [];
-      } else {
-        rawThemeList = configThemes.split(",");
-      }
-    } else if (Array.isArray(configThemes)) {
-      rawThemeList = configThemes;
-    } else {
-      // Default behavior: NO themes loaded automatically.
-      // User must specify themes to load them.
-      rawThemeList = [];
-    }
-
-    // 3. Process the list and look for flags (--default, --prefersdark)
-    rawThemeList.forEach((rawItem) => {
-      let themeName = rawItem.trim();
-
-      // Ignore empty entries
-      if (!themeName) return;
-
-      // Check for --default flag
-      if (themeName.includes("--default")) {
-        themeName = themeName.replace("--default", "").trim();
-        defaultThemeName = themeName;
-      }
-
-      // Check for --prefersdark flag
-      if (themeName.toLowerCase().includes("--prefersdark")) {
-        themeName = themeName.replace(/--prefersdark/i, "").trim();
-        prefersDarkTheme = themeName;
-      }
-
-      // Check if theme exists in the database
-      if (builtInThemes[themeName]) {
-        themesToInclude.push(themeName);
-      }
-    });
-
-    // If list is empty after filtering, stop here
-    if (
-      themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
-    ) return;
-
-    // 4. Generate CSS
-    const themeStyles = {};
-
-    // A. Default theme (:root)
-    if (defaultThemeName && builtInThemes[defaultThemeName]) {
-      themeStyles[rootSelector] = builtInThemes[defaultThemeName];
-    }
-
-    // B. Theme for prefers-color-scheme: dark
-    if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
-      themeStyles["@media (prefers-color-scheme: dark)"] = {
-        [rootSelector]: builtInThemes[prefersDarkTheme],
+export default plugin.withOptions(
+  (() => {
+    let firstRun = true; // Track first run for logging
+
+    return (options = {}) => {
+      return ({ addBase }) => {
+        // Extract logs option (default: true)
+        const showLogs = resolveBool(options.logs, true);
+
+        // Show startup log only once
+        if (showLogs && firstRun) {
+          console.log(`🍀 Clampography loaded successfully`);
+          firstRun = false;
+        }
+
+        // 1. Load Base and Extra styles
+        // We use the helper to correctly parse "false" string from CSS
+        const includeBase = resolveBool(options.base, true); // Default: true
+        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 scaleMode: 'viewport' (default, uses vw) or 'container' (uses cqi)
+        const scaleMode = options["scale-mode"] || options.scaleMode || "viewport";
+
+        // Extract typography scope option (default: global)
+        const typography = options.typography || "global";
+
+        // Pass options to the style functions to enable scoping
+        includeBase && addBase(baseStyles({ ...options, fluidMin, fluidMax, scaleMode, 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;
+        let themesToInclude = [];
+        let defaultThemeName = null;
+        let prefersDarkTheme = false;
+        let rootSelector = options.root || ":root";
+        let isAllThemes = false; // Track if user specified "all"
+
+        // Normalize input to an array of strings
+        let rawThemeList = [];
+        if (typeof configThemes === "string") {
+          if (["all", "true", "yes"].includes(configThemes.trim())) {
+            // Special case: themes: all
+            isAllThemes = true;
+            rawThemeList = Object.keys(builtInThemes);
+          } else if (["false", "none", "no"].includes(configThemes.trim())) {
+            // Explicitly disabled themes
+            rawThemeList = [];
+          } else {
+            rawThemeList = configThemes.split(",");
+          }
+        } else if (Array.isArray(configThemes)) {
+          rawThemeList = configThemes;
+        } else {
+          // Default behavior: NO themes loaded automatically.
+          // User must specify themes to load them.
+          rawThemeList = [];
+        }
+
+        // 3. Process the list and look for flags (--default, --prefersdark)
+        rawThemeList.forEach((rawItem) => {
+          let themeName = rawItem.trim();
+
+          // Ignore empty entries
+          if (!themeName) return;
+
+          // Check for --default flag
+          if (themeName.includes("--default")) {
+            themeName = themeName.replace("--default", "").trim();
+            defaultThemeName = themeName;
+          }
+
+          // Check for --prefersdark flag
+          if (themeName.toLowerCase().includes("--prefersdark")) {
+            themeName = themeName.replace(/--prefersdark/i, "").trim();
+            prefersDarkTheme = themeName;
+          }
+
+          // Check if theme exists in the database
+          if (builtInThemes[themeName]) {
+            themesToInclude.push(themeName);
+          }
+        });
+
+        // 4. Auto-configure defaults for "themes: all"
+        if (isAllThemes) {
+          if (!defaultThemeName) {
+            if (themesToInclude.includes("light")) {
+              defaultThemeName = "light";
+            } else if (themesToInclude.length > 0) {
+              defaultThemeName = themesToInclude[0];
+            }
+          }
+          if (!prefersDarkTheme && themesToInclude.includes("dark")) {
+            prefersDarkTheme = "dark";
+          }
+        }
+
+        // LOGGING: Built-in themes summary
+        if (showLogs) {
+          const explicitlyDisabled = ["false", "no", "none"].includes(
+            String(options.themes).trim(),
+          );
+
+          if (themesToInclude.length > 0) {
+            const themesList = themesToInclude.map((theme) => {
+              const flags = [];
+              if (theme === defaultThemeName) flags.push("default");
+              if (theme === prefersDarkTheme) flags.push("prefersdark");
+
+              const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
+              return `${theme}${flagStr}`;
+            });
+
+            console.log(
+              `🍀 Clampography: Loaded ${themesToInclude.length} built-in themes: ${
+                themesList.join(", ")
+              }`,
+            );
+          } else if (!explicitlyDisabled) {
+            console.info("ℹ️ Clampography: No built-in themes loaded.");
+          }
+        }
+
+        // Final check before generating CSS
+        if (
+          themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
+        ) return;
+
+        // 5. Generate CSS
+        const themeStyles = {};
+
+        // A. Default theme - uses :where() for lower specificity
+        // Helper to combine root and data-theme
+        // If root is ":root", we use "html[data-theme...]" for backwards compatibility.
+        // If root is custom (e.g. "#morda"), we generate "#morda[data-theme...]"
+        const getThemeSelector = (themeName) => {
+          if (rootSelector === ":root") {
+            return `html[data-theme="${themeName}"], [data-theme="${themeName}"]`;
+          }
+          // For custom root, attach data-theme directly to it
+          // AND allow a nested data-theme inside it (optional, but good for nesting)
+          return `${rootSelector}[data-theme="${themeName}"], ${rootSelector} [data-theme="${themeName}"]`;
+        };
+
+        // A. Default theme
+        if (defaultThemeName && builtInThemes[defaultThemeName]) {
+          // Default variables applied to the root element itself without data-theme attribute
+          // uses :where() for lower specificity so it can be overridden
+          const defaultSelector = `:where(${rootSelector})`;
+
+          // Also apply if explicitly selected
+          const explicitSelector = getThemeSelector(defaultThemeName);
+
+          themeStyles[`${defaultSelector}, ${explicitSelector}`] =
+            builtInThemes[defaultThemeName];
+        }
+
+        // B. Theme for prefers-color-scheme: dark
+        if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
+          themeStyles["@media (prefers-color-scheme: dark)"] = {
+            [rootSelector]: builtInThemes[prefersDarkTheme],
+          };
+        }
+
+        // C. All themes available via [data-theme] attribute
+        themesToInclude.forEach((themeName) => {
+          if (themeName === defaultThemeName) return;
+          const selector = getThemeSelector(themeName);
+          themeStyles[selector] = builtInThemes[themeName];
+        });
+
+        // D. Override media query with data-theme selectors
+        if (prefersDarkTheme) {
+          themeStyles["@media (prefers-color-scheme: dark)"] = {
+            ...themeStyles["@media (prefers-color-scheme: dark)"],
+          };
+
+          themesToInclude.forEach((themeName) => {
+            if (themeName === prefersDarkTheme) return;
+            const selector = getThemeSelector(themeName);
+
+            if (!themeStyles["@media (prefers-color-scheme: dark)"][selector]) {
+              themeStyles["@media (prefers-color-scheme: dark)"][selector] =
+                builtInThemes[themeName];
+            }
+          });
+        }
+
+        addBase(themeStyles);
       };
-    }
+    };
+  })(),
+  // Theme extension - enables utilities like bg-surface, text-heading, etc.
+  (options = {}) => {
+    // ✅ Extract prefix option (default: "clampography")
+    // This prefix is ONLY used for Tailwind utility classes (e.g., bg-clampography-primary)
+    // CSS variables remain unchanged (always --clampography-*)
+    const prefixEnabled = resolveBool(options.prefix, true);
+    const prefix = prefixEnabled
+      ? (typeof options.prefix === "string" &&
+          !["false", "no", "none", "true"].includes(options.prefix)
+        ? options.prefix
+        : "clampography")
+      : "";
 
-    // C. Scoped styles [data-theme="..."]
-    themesToInclude.forEach((themeName) => {
-      themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
-    });
+    // Helper to add prefix with separator
+    const addPrefix = (name) => prefix ? `${prefix}-${name}` : name;
 
-    addBase(themeStyles);
-  };
-});
+    return {
+      theme: {
+        extend: {
+          colors: {
+            [addPrefix("background")]: "var(--clampography-background)",
+            [addPrefix("border")]: "var(--clampography-border)",
+            [addPrefix("error")]: "var(--clampography-error)",
+            [addPrefix("heading")]: "var(--clampography-heading)",
+            [addPrefix("info")]: "var(--clampography-info)",
+            [addPrefix("link")]: "var(--clampography-link)",
+            [addPrefix("muted")]: "var(--clampography-muted)",
+            [addPrefix("primary")]: "var(--clampography-primary)",
+            [addPrefix("secondary")]: "var(--clampography-secondary)",
+            [addPrefix("success")]: "var(--clampography-success)",
+            [addPrefix("surface")]: "var(--clampography-surface)",
+            [addPrefix("text")]: "var(--clampography-text)",
+            [addPrefix("warning")]: "var(--clampography-warning)",
+          },
+        },
+      },
+    };
+  },
+);