clampography 2.0.0-beta.12 → 2.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.14",
   "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",

package/src/base.js

@@ -83,8 +83,6 @@ export default {
   // LINKS - Clickable Text (Structural Indicators)
   a: {
     "text-decoration-line": "underline",
-    "text-decoration-thickness": "0.0625em",
-    "text-underline-offset": "0.15em",
     cursor: "pointer",
   },
 

package/src/extra.js

@@ -1,18 +1,18 @@
 export default {
   // --- Basic Coloring (Applying theme variables) ---
   "body": {
-    "background-color": "oklch(var(--clampography-background))",
-    "color": "oklch(var(--clampography-text))",
+    "background-color": "var(--clampography-background)",
+    "color": "var(--clampography-text)",
   },
 
   ":where(h1, h2, h3, h4, h5, h6)": {
-    "color": "oklch(var(--clampography-heading))",
+    "color": "var(--clampography-heading)",
   },
 
   // Styled Links (Enhanced)
   "a": {
-    "color": "oklch(var(--clampography-link))",
-    "font-weight": "700",
+    "color": "var(--clampography-link)",
+    "font-weight": "600",
     "letter-spacing": "0.025em",
     "text-decoration-line": "underline",
     "text-decoration-thickness": "2px",
@@ -22,23 +22,23 @@ export default {
   },
 
   "a:hover": {
-    "text-decoration-color": "oklch(var(--clampography-primary))",
+    "text-decoration-color": "var(--clampography-link)",
   },
 
   // Lists
   "ul > li::before": {
-    "background-color": "oklch(var(--clampography-primary))", // Bullet points
+    "background-color": "var(--clampography-primary)", // Bullet points
   },
 
   "ol > li::before": {
-    "color": "oklch(var(--clampography-secondary))", // Numbers
+    "color": "var(--clampography-secondary)", // Numbers
   },
 
   // Inline Code
   ":where(code, kbd, samp)": {
-    "background-color": "oklch(var(--clampography-surface))",
-    "color": "oklch(var(--clampography-heading))",
-    "border": "1px solid oklch(var(--clampography-border))",
+    "background-color": "var(--clampography-surface)",
+    "color": "var(--clampography-heading)",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.25rem",
     "padding": "0.125rem var(--spacing-xs)",
   },
@@ -50,8 +50,8 @@ export default {
 
   // Preformatted Code Blocks
   "pre": {
-    "background-color": "oklch(var(--clampography-surface))",
-    "border": "1px solid oklch(var(--clampography-border))",
+    "background-color": "var(--clampography-surface)",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.375rem",
     "padding": "1rem",
   },
@@ -59,15 +59,15 @@ export default {
   // Tables
   "table": {
     "padding": "var(--spacing-sm)",
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
   },
 
   "th": {
-    "color": "oklch(var(--clampography-heading))",
+    "color": "var(--clampography-heading)",
   },
 
   "th, td": {
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
   },
 
   "thead th": {
@@ -76,12 +76,12 @@ export default {
 
   // Zebra striping for table rows
   "tbody tr:nth-child(even)": {
-    "background-color": "oklch(var(--clampography-surface))",
+    "background-color": "var(--clampography-surface)",
   },
 
   // Captions & Muted text
   "caption, figcaption, .muted": {
-    "color": "oklch(var(--clampography-muted))",
+    "color": "var(--clampography-muted)",
   },
 
   // Horizontal Rule (Thematic)
@@ -90,31 +90,31 @@ export default {
     "border-width": "0",
     "margin-top": "3rem",
     "margin-bottom": "3rem",
-    "background-color": "oklch(var(--clampography-border))",
+    "background-color": "var(--clampography-border)",
   },
 
   // Styled Blockquote
   "blockquote": {
     "border-left-width": "4px",
-    "border-left-color": "oklch(var(--clampography-primary))",
-    "background-color": "oklch(var(--clampography-surface))",
+    "border-left-color": "var(--clampography-primary)",
+    "background-color": "var(--clampography-surface)",
     "padding": "1rem",
     "border-radius": "0.25rem",
     "font-style": "italic",
-    "color": "oklch(var(--clampography-heading))",
+    "color": "var(--clampography-heading)",
   },
 
   // Mark
   "mark": {
-    "background-color": "oklch(var(--clampography-primary))",
-    "color": "oklch(var(--clampography-background))",
+    "background-color": "var(--clampography-primary)",
+    "color": "var(--clampography-background)",
     "padding": "0.125rem var(--spacing-xs)",
     "border-radius": "0.25rem",
   },
 
   // Deleted Text
   "del": {
-    "text-decoration-color": "oklch(var(--clampography-secondary))",
+    "text-decoration-color": "var(--clampography-secondary)",
     "text-decoration-thickness": "2px",
   },
 
@@ -122,7 +122,7 @@ export default {
   // WILL BE REMOVED FROM THIS FILE
   ":where(button, [type='button'], [type='reset'], [type='submit'])": {
     "padding": "var(--spacing-xs) var(--spacing-sm)",
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.375rem", // ← Rounded corners
   },
 
@@ -130,33 +130,33 @@ export default {
   // WILL BE REMOVED FROM THIS FILE
   ":where(input:not([type='checkbox'], [type='radio']), textarea, select)": {
     "padding": "var(--spacing-xs) var(--spacing-sm)",
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.375rem", // ← Rounded corners
   },
 
   // Fieldset
   "fieldset": {
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.375rem",
   },
 
   "legend": {
-    "color": "oklch(var(--clampography-heading))",
+    "color": "var(--clampography-heading)",
   },
 
   // Details
   "details": {
-    "border": "1px solid oklch(var(--clampography-border))",
+    "border": "1px solid var(--clampography-border)",
     "border-radius": "0.375rem",
     "padding": "0.5rem",
   },
 
   "summary": {
-    "color": "oklch(var(--clampography-heading))",
+    "color": "var(--clampography-heading)",
   },
 
   "details[open] > summary": {
-    "border-bottom": "1px solid oklch(var(--clampography-border))",
+    "border-bottom": "1px solid var(--clampography-border)",
     "padding-bottom": "0.5rem",
   },
 };

package/src/index.js

@@ -33,6 +33,7 @@ export default plugin.withOptions(
       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 = [];
@@ -40,6 +41,7 @@ export default plugin.withOptions(
       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
@@ -85,23 +87,40 @@ export default plugin.withOptions(
         themesToInclude.length === 0 && !defaultThemeName && !prefersDarkTheme
       ) return;
 
-      // 4. Generate CSS
+      // 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 (daisyUI v5 approach)
       const themeStyles = {};
 
-      // A. Default theme (:root)
+      // A. Default theme - uses :where() for lower specificity
       if (defaultThemeName && builtInThemes[defaultThemeName]) {
-        themeStyles[rootSelector] = builtInThemes[defaultThemeName];
+        const defaultSelector =
+          `:where(${rootSelector}),[data-theme="${defaultThemeName}"]`;
+        themeStyles[defaultSelector] = builtInThemes[defaultThemeName];
       }
 
-      // B. Theme for prefers-color-scheme: dark
+      // 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="..."]
+      // C. All themes available via [data-theme] attribute
       themesToInclude.forEach((themeName) => {
+        // Skip if already added as default (to avoid duplication)
+        if (themeName === defaultThemeName) return;
+
         themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
       });
 

package/src/theme-plugin.js

@@ -91,18 +91,21 @@ export default plugin.withOptions((options = {}) => {
     // Add the CSS property 'color-scheme' for browser UI adaptation (scrollbars, etc.)
     themeColors["color-scheme"] = colorScheme;
 
-    // 4. Generate Styles
+    // 4. Generate Styles (daisyUI v5 approach)
     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,