clampography 2.0.0-beta.13 → 2.0.0-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "description": "Fluid typography system based on CSS clamp() with optional themes and extra styles. A feature-rich alternative to Tailwind CSS Typography plugin.",
   "main": "src/index.js",
   "type": "module",
@@ -45,6 +45,6 @@
     "tailwindcss": ">=4.0.0"
   },
   "devDependencies": {
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.1.18"
   }
 }

package/src/convert.js

@@ -171,13 +171,13 @@ try {
   console.log(`📖 Reading ${INPUT_FILE}...`);
   const cssContent = readFileSync(resolve(INPUT_FILE), "utf-8");
 
-  console.log("⚙️ Converting CSS to JS...");
+  console.log("✨ Converting CSS to JS...");
   const jsContent = convertCSStoJS(cssContent);
 
   console.log(`💾 Writing ${OUTPUT_FILE}...`);
   writeFileSync(resolve(OUTPUT_FILE), jsContent, "utf-8");
 
-  console.log("✅ Conversion complete!");
+  console.log("✔️ Conversion complete!");
   console.log(`📄 Output: ${OUTPUT_FILE}`);
 } catch (error) {
   console.error("❌ Error:", error.message);

package/src/extra.js

@@ -17,6 +17,8 @@ export default {
     "text-decoration-line": "underline",
     "text-decoration-thickness": "2px",
     "text-underline-offset": "4px",
+    "text-decoration-color":
+      "color-mix(in oklab, var(--clampography-link) 30%, transparent)",
     "transition-property": "color, text-decoration-color",
     "transition-duration": "150ms",
   },
@@ -35,7 +37,7 @@ export default {
   },
 
   // Inline Code
-  ":where(code, kbd, samp)": {
+  ":where(code:not(pre code), kbd, samp)": {
     "background-color": "var(--clampography-surface)",
     "color": "var(--clampography-heading)",
     "border": "1px solid var(--clampography-border)",

package/src/index.js

@@ -3,6 +3,9 @@ import { themes as builtInThemes } from "./themes.js";
 import baseStyles from "./base.js";
 import extraStyles from "./extra.js";
 
+// Import version from package.json
+import { version } from "../package.json" with { type: "json" };
+
 /**
  * Helper to resolve boolean options from CSS configuration.
  * CSS values often come as strings ("true"/"false"), which are both truthy in JS.
@@ -17,111 +20,154 @@ const resolveBool = (value, 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";
-      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;
+  (() => {
+    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 v${version} loaded successfully`);
+          firstRun = false;
         }
 
-        // Check for --prefersdark flag
-        if (themeName.toLowerCase().includes("--prefersdark")) {
-          themeName = themeName.replace(/--prefersdark/i, "").trim();
-          prefersDarkTheme = themeName;
+        // 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";
+        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 = [];
         }
 
-        // Check if theme exists in the database
-        if (builtInThemes[themeName]) {
-          themesToInclude.push(themeName);
+        // 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. Auto-configure defaults for "themes: all"
+        // If user didn't specify --default or --prefersdark flags,
+        // automatically set light as default and dark for prefers-color-scheme
+        if (isAllThemes) {
+          if (!defaultThemeName && themesToInclude.includes("light")) {
+            defaultThemeName = "light";
+          }
+
+          if (!prefersDarkTheme && themesToInclude.includes("dark")) {
+            prefersDarkTheme = "dark";
+          }
         }
-      });
-
-      // If list is empty after filtering, stop here
-      if (
-        themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
-      ) return;
-
-      // 4. Auto-configure defaults for "themes: all"
-      // If user didn't specify --default or --prefersdark flags,
-      // automatically set light as default and dark for prefers-color-scheme
-      if (isAllThemes) {
-        if (!defaultThemeName && themesToInclude.includes("light")) {
-          defaultThemeName = "light";
-        }
-        if (!prefersDarkTheme && themesToInclude.includes("dark")) {
-          prefersDarkTheme = "dark";
-        }
-      }
 
-      // 5. Generate CSS
-      const themeStyles = {};
+        // 5. Generate CSS
+        const themeStyles = {};
 
-      // A. Default theme (:root)
-      if (defaultThemeName && builtInThemes[defaultThemeName]) {
-        themeStyles[rootSelector] = builtInThemes[defaultThemeName];
-      }
+        // A. Default theme - uses :where() for lower specificity
+        if (defaultThemeName && builtInThemes[defaultThemeName]) {
+          const defaultSelector =
+            `:where(${rootSelector}),[data-theme="${defaultThemeName}"]`;
+          themeStyles[defaultSelector] = builtInThemes[defaultThemeName];
+        }
 
-      // B. Theme for prefers-color-scheme: dark
-      if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
-        themeStyles["@media (prefers-color-scheme: dark)"] = {
-          [rootSelector]: builtInThemes[prefersDarkTheme],
-        };
-      }
+        // B. Theme for prefers-color-scheme: dark - only applies to root selector
+        if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
+          themeStyles["@media (prefers-color-scheme: dark)"] = {
+            [rootSelector]: builtInThemes[prefersDarkTheme],
+          };
+        }
 
-      // C. Scoped styles [data-theme="..."]
-      themesToInclude.forEach((themeName) => {
-        themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
-      });
+        // C. All themes available via [data-theme] attribute
+        // WITH higher specificity to override media query
+        themesToInclude.forEach((themeName) => {
+          // Skip if already added as default (to avoid duplication)
+          if (themeName === defaultThemeName) return;
+
+          const selector =
+            `html[data-theme="${themeName}"], [data-theme="${themeName}"]`;
+          themeStyles[selector] = builtInThemes[themeName];
+        });
+
+        // ✅ D. CRITICAL: Override media query with data-theme selectors
+        // This ensures manual theme selection always wins over system preference
+        if (prefersDarkTheme) {
+          themeStyles["@media (prefers-color-scheme: dark)"] = {
+            ...themeStyles["@media (prefers-color-scheme: dark)"],
+          };
+
+          // Add all themes inside media query to override the :root rule
+          themesToInclude.forEach((themeName) => {
+            if (themeName === prefersDarkTheme) return; // Skip the prefersDark theme itself
+
+            const selector =
+              `html[data-theme="${themeName}"], [data-theme="${themeName}"]`;
+
+            // Add inside media query
+            if (!themeStyles["@media (prefers-color-scheme: dark)"][selector]) {
+              themeStyles["@media (prefers-color-scheme: dark)"][selector] =
+                builtInThemes[themeName];
+            }
+          });
+        }
 
-      addBase(themeStyles);
+        addBase(themeStyles);
+      };
     };
-  },
+  })(),
   // Theme extension - enables utilities like bg-surface, text-heading, etc.
   (options = {}) => {
     return {

package/src/theme-plugin.js

@@ -8,11 +8,17 @@ export default plugin.withOptions((options = {}) => {
     const isDefault = options.default ?? false;
     const isPrefersDark = options.prefersdark ?? false;
     const rootSelector = options.root ?? ":root";
-    // Defaults to light scheme if not specified
     const colorScheme = options["color-scheme"] ?? "light";
 
+    // This option is completely separate from the main plugin's logs option
+    const showLogs = options.logs !== false;
+
     if (!themeName) {
-      console.warn("Clampography: Theme definition missing 'name' property.");
+      if (showLogs) {
+        console.warn(
+          "🍀 Clampography: Theme definition missing 'name' property.",
+        );
+      }
       return;
     }
 
@@ -50,14 +56,15 @@ export default plugin.withOptions((options = {}) => {
     Object.keys(options).forEach((key) => {
       // Ignore metadata keys
       if (
-        ["name", "default", "prefersdark", "root", "color-scheme"].includes(key)
+        ["name", "default", "prefersdark", "root", "color-scheme", "logs"]
+          .includes(key)
       ) return;
 
       const value = options[key];
 
       if (keyMap[key]) {
-        // Validate color format for better DX
-        if (value && typeof value === "string") {
+        // Validate color format (only if logs enabled)
+        if (showLogs && value && typeof value === "string") {
           // Check if value starts with oklch() or is a valid CSS color
           const isOklch = value.trim().startsWith("oklch(");
           const isHex = /^#[0-9A-Fa-f]{3,8}$/.test(value.trim());
@@ -74,7 +81,7 @@ export default plugin.withOptions((options = {}) => {
 
           if (isHex || isRgb) {
             console.info(
-              `Clampography (${themeName}): Color "${key}" uses ${
+              `🍀 Clampography (${themeName}): Color "${key}" uses ${
                 isHex ? "HEX" : "RGB"
               } format. ` +
                 `Consider using OKLCH format for better color space support and smoother gradients.`,
@@ -94,15 +101,18 @@ export default plugin.withOptions((options = {}) => {
     // 4. Generate Styles
     const styles = {};
 
-    // A. Define the theme as a named data-theme
-    styles[`[data-theme="${themeName}"]`] = themeColors;
+    // Build selector based on flags
+    let selector = `[data-theme="${themeName}"]`;
 
-    // B. If default, apply to root
+    // If default, prepend :where(root) with lower specificity
     if (isDefault) {
-      styles[rootSelector] = themeColors;
+      selector = `:where(${rootSelector}),${selector}`;
     }
 
-    // C. If prefers-dark, apply to media query
+    // Apply theme to the constructed selector
+    styles[selector] = themeColors;
+
+    // If prefers-dark, apply only to root selector in media query
     if (isPrefersDark) {
       styles["@media (prefers-color-scheme: dark)"] = {
         [rootSelector]: themeColors,