clampography 2.0.0-beta.11 → 2.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.13",
   "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,37 +1,44 @@
-/**
- * Extra opinionated styles and coloring.
- * Applies colors to the structural base elements.
- */
-
 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))",
+    "color": "var(--clampography-link)",
+    "font-weight": "600",
+    "letter-spacing": "0.025em",
+    "text-decoration-line": "underline",
+    "text-decoration-thickness": "2px",
+    "text-underline-offset": "4px",
+    "transition-property": "color, text-decoration-color",
+    "transition-duration": "150ms",
+  },
+
+  "a:hover": {
+    "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)",
   },
@@ -43,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",
   },
@@ -52,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": {
@@ -69,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)
@@ -83,88 +90,73 @@ export default {
     "border-width": "0",
     "margin-top": "3rem",
     "margin-bottom": "3rem",
-    "background-color": "oklch(var(--clampography-border))",
+    "background-color": "var(--clampography-border)",
   },
 
-  // --- Opinionated Extras ---
-
   // 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))",
-  },
-
-  // Styled Links (Enhanced)
-  "a": {
-    "font-weight": "700",
-    "letter-spacing": "0.025em",
-    "text-decoration-line": "underline",
-    "text-decoration-thickness": "2px",
-    "text-underline-offset": "4px",
-    "transition-property": "color, text-decoration-color",
-    "transition-duration": "150ms",
-  },
-
-  "a:hover": {
-    "text-decoration-color": "oklch(var(--clampography-primary))",
+    "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",
   },
 
   // Buttons - All types
+  // 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
   },
 
   // Inputs - All types
+  // 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,7 +87,19 @@ 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
       const themeStyles = {};
 
       // A. Default theme (:root)
@@ -114,19 +128,19 @@ export default plugin.withOptions(
       theme: {
         extend: {
           colors: {
-            background: "oklch(var(--clampography-background) / <alpha-value>)",
-            border: "oklch(var(--clampography-border) / <alpha-value>)",
-            error: "oklch(var(--clampography-error) / <alpha-value>)",
-            heading: "oklch(var(--clampography-heading) / <alpha-value>)",
-            info: "oklch(var(--clampography-info) / <alpha-value>)",
-            link: "oklch(var(--clampography-link) / <alpha-value>)",
-            muted: "oklch(var(--clampography-muted) / <alpha-value>)",
-            primary: "oklch(var(--clampography-primary) / <alpha-value>)",
-            secondary: "oklch(var(--clampography-secondary) / <alpha-value>)",
-            success: "oklch(var(--clampography-success) / <alpha-value>)",
-            surface: "oklch(var(--clampography-surface) / <alpha-value>)",
-            text: "oklch(var(--clampography-text) / <alpha-value>)",
-            warning: "oklch(var(--clampography-warning) / <alpha-value>)",
+            background: "var(--clampography-background)",
+            border: "var(--clampography-border)",
+            error: "var(--clampography-error)",
+            heading: "var(--clampography-heading)",
+            info: "var(--clampography-info)",
+            link: "var(--clampography-link)",
+            muted: "var(--clampography-muted)",
+            primary: "var(--clampography-primary)",
+            secondary: "var(--clampography-secondary)",
+            success: "var(--clampography-success)",
+            surface: "var(--clampography-surface)",
+            text: "var(--clampography-text)",
+            warning: "var(--clampography-warning)",
           },
         },
       },

package/src/theme-plugin.js

@@ -53,10 +53,38 @@ export default plugin.withOptions((options = {}) => {
         ["name", "default", "prefersdark", "root", "color-scheme"].includes(key)
       ) return;
 
+      const value = options[key];
+
       if (keyMap[key]) {
-        themeColors[keyMap[key]] = options[key];
+        // Validate color format for better DX
+        if (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());
+          const isRgb = value.trim().startsWith("rgb(") ||
+            value.trim().startsWith("rgba(");
+
+          if (!isOklch && !isHex && !isRgb) {
+            console.warn(
+              `Clampography (${themeName}): Color "${key}" has value "${value}" which may not be a valid color format. ` +
+                `For best compatibility with opacity modifiers (e.g., bg-${key}/20), use full OKLCH format: ` +
+                `oklch(70% 0.2 180) or oklch(0.7 0.2 180)`,
+            );
+          }
+
+          if (isHex || isRgb) {
+            console.info(
+              `Clampography (${themeName}): Color "${key}" uses ${
+                isHex ? "HEX" : "RGB"
+              } format. ` +
+                `Consider using OKLCH format for better color space support and smoother gradients.`,
+            );
+          }
+        }
+
+        themeColors[keyMap[key]] = value;
       } else if (key.startsWith("--")) {
-        themeColors[key] = options[key];
+        themeColors[key] = value;
       }
     });
 

package/src/themes.js

@@ -1,67 +1,67 @@
 export const themes = {
   light: {
     "color-scheme": "light",
-    "--clampography-background": "100% 0 0",
-    "--clampography-border": "92% 0.003 264",
-    "--clampography-error": "63% 0.22 27",
-    "--clampography-heading": "15% 0.02 264",
-    "--clampography-info": "63% 0.258 262",
-    "--clampography-link": "43% 0.19 264",
-    "--clampography-muted": "52% 0.014 258",
-    "--clampography-primary": "63% 0.258 262",
-    "--clampography-secondary": "55% 0.28 300",
-    "--clampography-success": "65% 0.17 165",
-    "--clampography-surface": "96% 0.003 264",
-    "--clampography-text": "31% 0.02 257",
-    "--clampography-warning": "72% 0.17 65",
+    "--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)",
   },
   dark: {
     "color-scheme": "dark",
-    "--clampography-background": "10% 0 0",
-    "--clampography-border": "31% 0.03 254",
-    "--clampography-error": "63% 0.22 27",
-    "--clampography-heading": "98% 0.003 264",
-    "--clampography-info": "72% 0.17 254",
-    "--clampography-link": "72% 0.17 254",
-    "--clampography-muted": "68% 0.024 254",
-    "--clampography-primary": "63% 0.258 262",
-    "--clampography-secondary": "63% 0.25 300",
-    "--clampography-success": "65% 0.17 165",
-    "--clampography-surface": "12% 0 0",
-    "--clampography-text": "95% 0 0",
-    "--clampography-warning": "72% 0.17 65",
+    "--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)",
   },
   retro: {
     "color-scheme": "light",
-    "--clampography-background": "91% 0.03 85",
-    "--clampography-border": "78% 0.05 85",
-    "--clampography-error": "52% 0.15 35",
-    "--clampography-heading": "18% 0.02 35",
-    "--clampography-info": "60% 0.06 230",
-    "--clampography-link": "63% 0.13 40",
-    "--clampography-muted": "44% 0.03 45",
-    "--clampography-primary": "60% 0.19 35",
-    "--clampography-secondary": "80% 0.14 85",
-    "--clampography-success": "62% 0.10 130",
-    "--clampography-surface": "87% 0.04 85",
-    "--clampography-text": "28% 0.03 40",
-    "--clampography-warning": "80% 0.14 85",
+    "--clampography-background": "oklch(91% 0.03 85)",
+    "--clampography-border": "oklch(78% 0.05 85)",
+    "--clampography-error": "oklch(52% 0.15 35)",
+    "--clampography-heading": "oklch(18% 0.02 35)",
+    "--clampography-info": "oklch(60% 0.06 230)",
+    "--clampography-link": "oklch(63% 0.13 40)",
+    "--clampography-muted": "oklch(44% 0.03 45)",
+    "--clampography-primary": "oklch(60% 0.19 35)",
+    "--clampography-secondary": "oklch(80% 0.14 85)",
+    "--clampography-success": "oklch(62% 0.10 130)",
+    "--clampography-surface": "oklch(87% 0.04 85)",
+    "--clampography-text": "oklch(28% 0.03 40)",
+    "--clampography-warning": "oklch(80% 0.14 85)",
   },
   cyberpunk: {
     "color-scheme": "dark",
-    "--clampography-background": "8% 0.04 264",
-    "--clampography-border": "27% 0.09 254",
-    "--clampography-error": "60% 0.29 340",
-    "--clampography-heading": "100% 0 0",
-    "--clampography-info": "88% 0.16 195",
-    "--clampography-link": "60% 0.29 340",
-    "--clampography-muted": "55% 0.07 200",
-    "--clampography-primary": "93% 0.22 105",
-    "--clampography-secondary": "87% 0.20 165",
-    "--clampography-success": "87% 0.20 165",
-    "--clampography-surface": "12% 0.05 264",
-    "--clampography-text": "88% 0.16 195",
-    "--clampography-warning": "93% 0.22 105",
+    "--clampography-background": "oklch(8% 0.04 264)",
+    "--clampography-border": "oklch(27% 0.09 254)",
+    "--clampography-error": "oklch(60% 0.29 340)",
+    "--clampography-heading": "oklch(100% 0 0)",
+    "--clampography-info": "oklch(88% 0.16 195)",
+    "--clampography-link": "oklch(60% 0.29 340)",
+    "--clampography-muted": "oklch(55% 0.07 200)",
+    "--clampography-primary": "oklch(93% 0.22 105)",
+    "--clampography-secondary": "oklch(87% 0.20 165)",
+    "--clampography-success": "oklch(87% 0.20 165)",
+    "--clampography-surface": "oklch(12% 0.05 264)",
+    "--clampography-text": "oklch(88% 0.16 195)",
+    "--clampography-warning": "oklch(93% 0.22 105)",
   },
 };