clampography 2.0.0-beta.11 → 2.0.0-beta.12

package/package.json

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

@@ -1,8 +1,3 @@
-/**
- * Extra opinionated styles and coloring.
- * Applies colors to the structural base elements.
- */
-
 export default {
   // --- Basic Coloring (Applying theme variables) ---
   "body": {
@@ -14,8 +9,20 @@ export default {
     "color": "oklch(var(--clampography-heading))",
   },
 
+  // Styled Links (Enhanced)
   "a": {
     "color": "oklch(var(--clampography-link))",
+    "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))",
   },
 
   // Lists
@@ -86,8 +93,6 @@ export default {
     "background-color": "oklch(var(--clampography-border))",
   },
 
-  // --- Opinionated Extras ---
-
   // Styled Blockquote
   "blockquote": {
     "border-left-width": "4px",
@@ -99,21 +104,6 @@ export default {
     "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))",
-  },
-
   // Mark
   "mark": {
     "background-color": "oklch(var(--clampography-primary))",
@@ -129,6 +119,7 @@ export default {
   },
 
   // 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))",
@@ -136,6 +127,7 @@ export default {
   },
 
   // 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))",

package/src/index.js

@@ -114,19 +114,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)",
   },
 };