clampography 2.0.0-beta.13 → 2.0.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.13",
+  "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/index.js

@@ -99,23 +99,28 @@ export default plugin.withOptions(
         }
       }
 
-      // 5. Generate CSS
+      // 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,