clampography 2.0.0-beta.22 → 2.0.0-beta.23

package/README.md

@@ -4,8 +4,9 @@
 
 **Clampography** is a pure CSS typography system that uses the
 [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
-function for fluid, responsive text scaling. Built as a Tailwind CSS plugin, it
-delivers production-ready typography with optional theming support. With
+function for fluid, responsive text scaling. Built as a
+[Tailwind CSS](https://tailwindcss.com/) plugin, it delivers production-ready
+typography with optional theming support. With
 [94% global browser support](https://caniuse.com/css-math-functions), it works
 on nearly all modern devices.
 
@@ -15,16 +16,15 @@ on nearly all modern devices.
   `clamp()` (fluid)
 - **Optional theming:** Built-in light/dark themes or create your own with OKLCH
   colors
-- **Tailwind plugin:** Requires Tailwind CSS v4
 
 ## The purpose
 
 [CSS resets](https://en.wikipedia.org/wiki/Reset_style_sheet) like
 [Tailwind's Preflight](https://tailwindcss.com/docs/preflight) remove all
 browser typography defaults, leaving you with unstyled text. **Clampography**
-delivers production-ready typography that responds to viewport changes
-automatically, while leaving all aesthetic choices to you. Add themes only if
-you need them.
+delivers production-ready typography that responds to
+[viewport](https://en.wikipedia.org/wiki/Viewport) changes automatically, while
+leaving all aesthetic choices to you. Add themes only if you need them.
 
 Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
 it looks.
@@ -56,7 +56,7 @@ deno install npm:clampography
 
 ## Quick Start
 
-### Typography Only (Recommended)
+### Typography Only
 
 Load just the typography system without any colors:
 

package/package.json

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

@@ -379,20 +379,6 @@ export default (options = {}) => {
       "vertical-align": "middle",
     },
 
-    [scope("input, button, textarea, select, optgroup")]: {
-      "font-family": "inherit",
-      "font-size": "100%",
-      "line-height": "inherit",
-    },
-
-    [scope("textarea")]: {
-      "line-height": "1.5",
-    },
-
-    [scope("button, [type='button'], [type='reset'], [type='submit']")]: {
-      cursor: "pointer",
-    },
-
     // MEDIA
     [scope(":where(img, video, canvas, audio, iframe, svg)")]: {
       "max-width": "100%",
@@ -485,6 +471,16 @@ export default (options = {}) => {
       "line-height": "inherit",
     },
 
+    // TEST!!!!!!!
+    [
+      scope(
+        "input:not([type='checkbox'], [type='radio']), button, textarea, select",
+      )
+    ]: {
+      "background-color": "var(--clampography-background)",
+      "color": "var(--clampography-text)",
+    },
+
     // UTILITIES
     [
       scope(

package/src/extra.js

@@ -75,6 +75,7 @@ export default (options = {}) => {
       "border": "1px solid var(--clampography-border)",
       "border-radius": "0.25rem",
       "padding": "0.125rem var(--spacing-xs)",
+      "white-space": "nowrap",
     },
 
     [scope("kbd")]: {
@@ -150,35 +151,6 @@ export default (options = {}) => {
       "text-decoration-thickness": "2px",
     },
 
-    // Buttons
-    [scope(":where(button, [type='button'], [type='reset'], [type='submit'])")]:
-      {
-        "padding": "var(--spacing-xs) var(--spacing-sm)",
-        "border": "1px solid var(--clampography-border)",
-        "border-radius": "0.375rem",
-      },
-
-    // Inputs
-    [
-      scope(
-        ":where(input:not([type='checkbox'], [type='radio']), textarea, select)",
-      )
-    ]: {
-      "padding": "var(--spacing-xs) var(--spacing-sm)",
-      "border": "1px solid var(--clampography-border)",
-      "border-radius": "0.375rem",
-    },
-
-    // Fieldset
-    [scope("fieldset")]: {
-      "border": "1px solid var(--clampography-border)",
-      "border-radius": "0.375rem",
-    },
-
-    [scope("legend")]: {
-      "color": "var(--clampography-heading)",
-    },
-
     // Details
     [scope("details")]: {
       "border": "1px solid var(--clampography-border)",

package/src/forms.js

@@ -0,0 +1,115 @@
+export default (options = {}) => {
+  const root = options.root || ":root";
+
+  // Helper to scope selectors safely
+  const scope = (selector) => {
+    const parts = [];
+    let current = "";
+    let depth = 0;
+
+    for (let i = 0; i < selector.length; i++) {
+      const char = selector[i];
+      if (char === "(") depth++;
+      if (char === ")") depth--;
+      if (char === "," && depth === 0) {
+        parts.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    parts.push(current.trim());
+
+    return parts
+      .filter(Boolean)
+      .map((part) => {
+        if (part === ":root" || part === "body") return root;
+        return `${root} ${part}`;
+      })
+      .join(", ");
+  };
+
+  return {
+    // Forms
+    [scope("input, button, textarea, select, optgroup")]: {
+      "font-family": "inherit",
+      "font-size": "100%",
+      "line-height": "inherit",
+    },
+
+    [scope("textarea")]: {
+      "line-height": "1.5",
+    },
+
+    [scope("button, [type='button'], [type='reset'], [type='submit']")]: {
+      cursor: "pointer",
+    },
+
+    // Buttons
+    [scope(":where(button, [type='button'], [type='reset'], [type='submit'])")]:
+      {
+        "padding": "var(--spacing-xs) var(--spacing-sm)",
+        "background-color": "var(--clampography-background)",
+        "color": "var(--clampography-text)",
+        "border": "1px solid var(--clampography-border)",
+        "border-radius": "0.375rem",
+        "transition-property": "background-color, border-color",
+        "transition-duration": "150ms",
+      },
+
+    [
+      scope(
+        ":where(button, [type='button'], [type='reset'], [type='submit']):hover",
+      )
+    ]: {
+      "background-color": "var(--clampography-surface)",
+    },
+
+    // Inputs
+    [
+      scope(
+        ":where(input:not([type='checkbox'], [type='radio']), textarea, select)",
+      )
+    ]: {
+      "padding": "var(--spacing-xs) var(--spacing-sm)",
+      "background-color": "var(--clampography-background)",
+      "color": "var(--clampography-text)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "transition-property": "border-color, box-shadow",
+      "transition-duration": "150ms",
+    },
+
+    [
+      scope(
+        ":where(input:not([type='checkbox'], [type='radio']), textarea, select):focus",
+      )
+    ]: {
+      "outline": "none",
+      "border-color": "var(--clampography-primary)",
+      "box-shadow":
+        "0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)",
+    },
+
+    // Select
+    [scope("select")]: {
+      "appearance": "none",
+      "background-image":
+        `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E")`,
+      "background-position": "right 0.5rem center",
+      "background-repeat": "no-repeat",
+      "background-size": "1.5em 1.5em",
+      "padding-right": "2.5rem",
+    },
+
+    // Fieldset & Legend
+    [scope("fieldset")]: {
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+    },
+
+    [scope("legend")]: {
+      "color": "var(--clampography-heading)",
+    },
+  };
+};