clampography 0.9.9 → 2.0.0-beta.1

package/README.md

@@ -15,10 +15,12 @@ on nearly all modern devices.
 
 ## The purpose
 
-CSS resets like [Tailwind's Preflight](https://tailwindcss.com/docs/preflight)
-remove all browser typography defaults, leaving you with unstyled text.
-**Clampography** delivers production-ready text scaling that responds to
-viewport changes automatically, while leaving all aesthetic choices to you.
+[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 text scaling that responds to viewport changes
+automatically, while leaving all aesthetic choices to you.
+
 Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
 it looks.
 

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "clampography",
-  "version": "0.9.9",
-  "description": "Fluid typography system based on CSS clamp(). Alternative to Tailwind CSS Typography plugin.",
-  "main": "clampography.css",
-  "style": "clampography.css",
-  "files": [
-    "clampography.css",
-    "presets/"
-  ],
+  "version": "2.0.0-beta.1",
+  "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",
   "exports": {
-    ".": "./clampography.css",
-    "./base": "./clampography.css",
-    "./*": "./presets/*.css"
+    ".": "./src/index.js",
+    "./theme": "./src/theme-plugin.js"
   },
+  "files": [
+    "src"
+  ],
   "keywords": [
     "alternative",
     "blog",
     "clamp",
+    "clampography",
     "content",
     "css",
     "fluid",
@@ -25,11 +24,14 @@
     "font-size",
     "markdown",
     "style",
+    "styles",
     "tailwind",
     "tailwind-css",
     "tailwind-plugin",
     "tailwindcss",
     "text",
+    "theme",
+    "themes",
     "typography"
   ],
   "repository": {
@@ -38,5 +40,11 @@
   },
   "homepage": "https://next.dav.one/clampography/",
   "author": "Dawid Wąsowski",
-  "license": "MIT"
+  "license": "MIT",
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "devDependencies": {
+    "tailwindcss": "^4.0.0"
+  }
 }

package/src/base.js

@@ -0,0 +1,426 @@
+/**
+ * Base typography and reset styles converted from base.css
+ */
+export default {
+  // Global CSS Variables
+  "@layer base": {
+    ":root": {
+      "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
+      "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
+      "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
+      "--spacing-xl": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+      "--scroll-offset": "5rem",
+      "--font-family-base":
+        "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+      "--font-family-mono":
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    },
+  },
+
+  // Typography & Resets
+  "body": {
+    "font-family": "var(--font-family-base)",
+    "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
+    "line-height": "1.75",
+    "text-rendering": "optimizeLegibility",
+    "-webkit-font-smoothing": "antialiased",
+    "-moz-osx-font-smoothing": "grayscale",
+    "text-wrap": "pretty",
+  },
+
+  ":where(h1, h2, h3, h4, h5, h6)": {
+    "font-weight": "700",
+    "scroll-margin-top": "var(--scroll-offset)",
+    "font-size": "1rem",
+    "line-height": "1.5",
+    "margin-top": "0",
+    "margin-bottom": "var(--spacing-xs)",
+    "text-decoration": "none",
+    "break-after": "avoid",
+  },
+
+  "h1": {
+    "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
+    "line-height": "1.1111",
+    "font-weight": "800",
+    "margin-top": "0",
+    "margin-bottom": "var(--spacing-xl)",
+  },
+
+  "h6": {
+    "font-size": "0.875rem",
+    "line-height": "1.5",
+    "margin-top": "0",
+    "margin-bottom": "var(--spacing-xs)",
+  },
+
+  "a": {
+    "text-decoration-line": "underline",
+    "text-decoration-thickness": "0.0625em",
+    "text-underline-offset": "0.15em",
+    "cursor": "pointer",
+    "text-decoration": "underline",
+  },
+
+  ":where(h1, h2, h3, h4, h5, h6) a": {
+    "text-decoration": "none",
+  },
+
+  "menu": {
+    "list-style": "none",
+    "margin-bottom": "var(--spacing-md)",
+    "padding-left": "0",
+  },
+
+  "menu > li::before": {
+    "display": "none",
+  },
+
+  "hgroup": {
+    "margin-bottom": "var(--spacing-lg)",
+  },
+
+  "hgroup :where(h1, h2, h3, h4, h5, h6)": {
+    "margin-bottom": "var(--spacing-xs)",
+  },
+
+  "hgroup :where(p)": {
+    "margin-top": "0",
+    "margin-bottom": "0",
+    "font-size": "0.875em",
+    "font-weight": "400",
+    "line-height": "1.5",
+  },
+
+  "p": {
+    "line-height": "1.75",
+    "margin-bottom": "var(--spacing-md)",
+    "margin-top": "0",
+  },
+
+  ":where(strong, b)": {
+    "font-weight": "700",
+  },
+
+  ":where(em, i, cite, var)": {
+    "font-style": "italic",
+  },
+
+  "dfn": {
+    "font-style": "normal",
+    "font-weight": "600",
+  },
+
+  "small": {
+    "font-size": "0.875em",
+    "line-height": "1.5",
+  },
+
+  ":where(code, kbd, samp)": {
+    "font-family": "var(--font-family-mono)",
+    "padding":
+      "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
+  },
+
+  ":where(code:not(pre code))": {
+    "padding":
+      "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
+  },
+
+  ":where(sub, sup)": {
+    "font-size": "0.75em",
+    "line-height": "0",
+    "position": "relative",
+    "vertical-align": "baseline",
+  },
+
+  "sup": {
+    "top": "-0.5em",
+  },
+
+  "sub": {
+    "bottom": "-0.25em",
+  },
+
+  "abbr[title]": {
+    "text-decoration": "underline dotted",
+    "cursor": "help",
+  },
+
+  "del": {
+    "text-decoration": "line-through",
+  },
+
+  "ins": {
+    "text-decoration": "underline",
+  },
+
+  "s": {
+    "text-decoration": "line-through",
+  },
+
+  "u": {
+    "text-decoration": "underline",
+  },
+
+  "mark": {
+    "font-style": "normal",
+    "font-weight": "inherit",
+  },
+
+  "address": {
+    "font-style": "normal",
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
+  },
+
+  "time": {
+    "font-style": "normal",
+    "font-variant-numeric": "tabular-nums",
+  },
+
+  "blockquote": {
+    "margin-top": "0",
+    "margin-bottom": "0",
+    "padding-left": "var(--spacing-md)",
+  },
+
+  "blockquote blockquote": {
+    "margin-top": "var(--spacing-sm)",
+    "margin-bottom": "var(--spacing-sm)",
+    "padding-left": "var(--spacing-sm)",
+  },
+
+  "q": {
+    "font-style": "inherit",
+  },
+
+  ":where(ul, ol)": {
+    "list-style": "none",
+    "margin-bottom": "0",
+    "padding-left": "var(--spacing-md)",
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "li": {
+    "position": "relative",
+    "padding-left": "0.375em",
+  },
+
+  "li + li": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "li > :where(ul, ol):first-child": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "ul > li::before": {
+    "content": "''",
+    "position": "absolute",
+    "left": "-1.125em",
+    "top": "calc(0.875em - 0.1875em)",
+    "width": "0.375em",
+    "height": "0.375em",
+    "background-color": "currentColor",
+    "border-radius": "50%",
+  },
+
+  "ol": {
+    "counter-reset": "list-counter",
+    "margin-top": "0",
+    "margin-bottom": "0",
+  },
+
+  "ol > li": {
+    "counter-increment": "list-counter",
+  },
+
+  "ol > li::before": {
+    "content": "counter(list-counter) '.'",
+    "position": "absolute",
+    "left": "-2.5em",
+    "width": "1.75em",
+    "text-align": "right",
+    "font-weight": "600",
+    "color": "currentColor",
+  },
+
+  ":where(ul, ol) :where(ul, ol)": {
+    "margin-bottom": "0",
+    "padding-left": "var(--spacing-md)",
+  },
+
+  "dl": {
+    "margin-top": "0",
+    "margin-bottom": "0",
+  },
+
+  "dt": {
+    "font-weight": "600",
+    "margin-top": "var(--spacing-sm)",
+  },
+
+  "dt:first-child": {
+    "margin-top": "0",
+  },
+
+  "dd": {
+    "margin-left": "var(--spacing-md)",
+  },
+
+  "dt + dd": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "dd + dd": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "dd:last-child": {
+    "margin-bottom": "0",
+  },
+
+  "pre": {
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
+    "font-family": "var(--font-family-mono)",
+    "line-height": "1.6",
+    "overflow-x": "auto",
+    "break-inside": "avoid",
+  },
+
+  "pre code": {
+    "font-size": "inherit",
+    "padding": "0",
+    "background": "none",
+    "border-radius": "0",
+  },
+
+  "fieldset": {
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
+    "padding": "var(--spacing-md)",
+    "border": "0",
+  },
+
+  "legend": {
+    "font-weight": "600",
+    "padding": "0 var(--spacing-xs)",
+  },
+
+  "output": {
+    "display": "inline-block",
+    "font-variant-numeric": "tabular-nums",
+  },
+
+  ":where(meter, progress)": {
+    "display": "inline-block",
+    "vertical-align": "middle",
+  },
+
+  ":where(img, video)": {
+    "max-width": "100%",
+    "height": "auto",
+    "break-inside": "avoid",
+  },
+
+  "figure": {
+    "margin-top": "0",
+    "margin-bottom": "0",
+    "break-inside": "avoid",
+  },
+
+  "figcaption": {
+    "margin-top": "0.375rem",
+    "font-size": "0.875em",
+    "line-height": "1.5",
+  },
+
+  "table": {
+    "width": "100%",
+    "margin-top": "0",
+    "margin-bottom": "0",
+    "border-collapse": "collapse",
+    "font-size": "0.9375em",
+    "line-height": "1.6",
+  },
+
+  "caption": {
+    "margin-bottom": "var(--spacing-xs)",
+    "font-size": "0.875em",
+    "font-weight": "600",
+    "text-align": "left",
+  },
+
+  "th, td": {
+    "padding": "var(--spacing-xs) var(--spacing-sm)",
+    "text-align": "left",
+    "font-weight": "600",
+  },
+
+  "thead th, tbody th, tbody td, tfoot th, tfoot td": {
+    "vertical-align": "top",
+  },
+
+  "thead th": {
+    "vertical-align": "bottom",
+  },
+
+  "tbody + tbody": {
+    "border-top-width": "2px",
+  },
+
+  "hr": {
+    "margin-top": "var(--spacing-xl)",
+    "margin-bottom": "var(--spacing-xl)",
+    "border": "0",
+  },
+
+  ":where(:focus, :focus-visible)": {
+    "outline-offset": "2px",
+  },
+
+  "details": {
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
+  },
+
+  "summary": {
+    "cursor": "pointer",
+    "font-weight": "600",
+  },
+
+  "details[open] > summary": {
+    "margin-bottom": "var(--spacing-xs)",
+  },
+
+  "dialog": {
+    "font-size": "inherit",
+    "line-height": "inherit",
+  },
+
+  "ul": {
+    "margin-top": "0",
+    "margin-bottom": "0",
+  },
+
+  ":where(p, pre):first-child": {
+    "margin-top": "0",
+  },
+
+  ":where(p, pre):last-child": {
+    "margin-bottom": "0",
+  },
+
+  "@media print": {
+    "body": {
+      "font-size": "12pt",
+      "line-height": "1.5",
+      "color": "#000",
+    },
+    "table": {
+      "break-inside": "avoid",
+    },
+  },
+};

package/src/extra.js

@@ -0,0 +1,34 @@
+export default {
+  "hr": {
+    "height": "1px",
+    "border-width": "0",
+    "margin-top": "3rem", /* my-12 (12 * 0.25rem) */
+    "margin-bottom": "3rem", /* my-12 */
+    "background-color": "var(--clampography-secondary)",
+  },
+
+  "blockquote": {
+    "border-left-width": "4px",
+    "border-color": "var(--clampography-primary)",
+    "padding-left": "1rem", /* pl-4 */
+    "padding-top": "0.5rem", /* py-2 */
+    "padding-bottom": "0.5rem", /* py-2 */
+    "padding-right": "0.5rem", /* pr-2 */
+  },
+
+  "a": {
+    "color": "var(--clampography-link)",
+    "font-weight": "700", /* font-bold */
+    "letter-spacing": "0.025em", /* tracking-wide */
+    "text-decoration-line": "underline",
+    "text-decoration-thickness": "2px", /* decoration-2 */
+    "text-underline-offset": "4px", /* underline-offset-4 */
+    "transition-property": "color, text-decoration-color",
+    "transition-duration": "150ms", /* duration-150 */
+  },
+
+  "a:hover": {
+    // Używamy zmiennej zdefiniowanej w themes.js (bez prefixu --color-)
+    "text-decoration-color": "var(--clampography-primary)",
+  },
+};

package/src/index.js

@@ -0,0 +1,101 @@
+import plugin from "tailwindcss/plugin";
+import { themes as builtInThemes } from "./themes.js";
+import baseStyles from "./base.js";
+import extraStyles from "./extra.js";
+
+/**
+ * Main plugin function.
+ */
+export default plugin.withOptions((options = {}) => {
+  return ({ addBase }) => {
+    // 1. Load Base and Extra styles
+    const includeBase = options.base ?? true;
+    const includeExtra = options.extra ?? false;
+
+    if (includeBase) addBase(baseStyles);
+    if (includeExtra) addBase(extraStyles);
+
+    // 2. Parse themes configuration
+    let configThemes = options.themes;
+
+    // Default values
+    let themesToInclude = [];
+    let defaultThemeName = "light";
+    let prefersDarkTheme = false;
+    let rootSelector = options.root ?? ":root";
+
+    // Normalize input to an array of strings
+    // CSS might pass this as a single long string separated by commas
+    let rawThemeList = [];
+
+    if (typeof configThemes === "string") {
+      if (configThemes.trim() === "all") {
+        // Special case: themes: all
+        rawThemeList = Object.keys(builtInThemes);
+      } else if (configThemes.trim() === "false") {
+        rawThemeList = [];
+      } else {
+        // Split by comma: "light --default, dark --prefersdark"
+        rawThemeList = configThemes.split(",");
+      }
+    } else if (Array.isArray(configThemes)) {
+      rawThemeList = configThemes;
+    } else {
+      // Default fallback if nothing provided
+      rawThemeList = ["light", "dark"];
+    }
+
+    // 3. Process the list and look for flags (--default, --prefersdark)
+    // If "all" was used, we don't look for flags (we use default light/dark logic) unless implemented otherwise.
+    // Here we focus on the explicit list.
+
+    rawThemeList.forEach((rawItem) => {
+      let themeName = rawItem.trim();
+
+      // Ignore empty entries
+      if (!themeName) return;
+
+      // Check for --default flag
+      if (themeName.includes("--default")) {
+        themeName = themeName.replace("--default", "").trim();
+        defaultThemeName = themeName;
+      }
+
+      // Check for --prefersdark flag (case insensitive just in case)
+      if (themeName.toLowerCase().includes("--prefersdark")) {
+        themeName = themeName.replace(/--prefersdark/i, "").trim();
+        prefersDarkTheme = themeName;
+      }
+
+      // Check if theme exists in the database
+      if (builtInThemes[themeName]) {
+        themesToInclude.push(themeName);
+      }
+    });
+
+    // If list is empty after filtering, stop here
+    if (themesToInclude.length === 0) return;
+
+    // 4. Generate CSS
+    const themeStyles = {};
+
+    // A. Default theme (:root)
+    if (builtInThemes[defaultThemeName]) {
+      themeStyles[rootSelector] = builtInThemes[defaultThemeName];
+    }
+
+    // B. Theme for prefers-color-scheme: dark
+    if (prefersDarkTheme && builtInThemes[prefersDarkTheme]) {
+      themeStyles["@media (prefers-color-scheme: dark)"] = {
+        [rootSelector]: builtInThemes[prefersDarkTheme],
+      };
+    }
+
+    // C. Scoped styles [data-theme="..."]
+    themesToInclude.forEach((themeName) => {
+      themeStyles[`[data-theme="${themeName}"]`] = builtInThemes[themeName];
+    });
+
+    addBase(themeStyles);
+  };
+});

package/src/theme-plugin.js

@@ -0,0 +1,72 @@
+import plugin from "tailwindcss/plugin";
+
+// List of required color keys for validation (optional but good practice)
+const REQUIRED_KEYS = [
+  "--clampography-background",
+  "--clampography-text",
+  "--clampography-link",
+  "--clampography-primary",
+  "--clampography-secondary",
+];
+
+export default plugin.withOptions((options = {}) => {
+  return ({ addBase }) => {
+    // 1. Extract metadata
+    const themeName = options.name;
+    const isDefault = options.default ?? false;
+    const isPrefersDark = options.prefersdark ?? false; // lowercase because CSS might force it
+    const rootSelector = options.root ?? ":root";
+
+    if (!themeName) {
+      console.warn("Clampography: Theme definition missing 'name' property.");
+      return;
+    }
+
+    // 2. Extract colors from options
+    // We iterate over the options object and pick anything that looks like our CSS variable
+    // or simply take all known keys.
+    const themeColors = {};
+
+    // You can also support short aliases here if you want (e.g., 'primary' -> '--clampography-primary')
+    // For now, let's assume user passes full variable names or mapped keys.
+
+    // Helper to map simplified keys to full CSS vars (optional convenience)
+    const keyMap = {
+      "background": "--clampography-background",
+      "text": "--clampography-text",
+      "link": "--clampography-link",
+      "primary": "--clampography-primary",
+      "secondary": "--clampography-secondary",
+    };
+
+    Object.keys(options).forEach((key) => {
+      // Check if it's one of our mapped short keys
+      if (keyMap[key]) {
+        themeColors[keyMap[key]] = options[key];
+      } // Or if it is already a custom property key (starts with --)
+      else if (key.startsWith("--")) {
+        themeColors[key] = options[key];
+      }
+    });
+
+    // 3. Generate Styles
+    const styles = {};
+
+    // A. Define the theme as a named data-theme (always available)
+    styles[`[data-theme="${themeName}"]`] = themeColors;
+
+    // B. If marked as default, apply to :root
+    if (isDefault) {
+      styles[rootSelector] = themeColors;
+    }
+
+    // C. If marked as prefers-dark, apply to media query
+    if (isPrefersDark) {
+      styles["@media (prefers-color-scheme: dark)"] = {
+        [rootSelector]: themeColors,
+      };
+    }
+
+    addBase(styles);
+  };
+});

package/src/themes.js

@@ -0,0 +1,32 @@
+export const themes = {
+  light: {
+    "--clampography-background": "#ffffff",
+    "--clampography-text": "#1f2937",
+    "--clampography-link": "#2563eb",
+    "--clampography-primary": "#3b82f6",
+    "--clampography-secondary": "#9333ea",
+  },
+  dark: {
+    "--clampography-background": "#0f172a",
+    "--clampography-text": "#f3f4f6",
+    "--clampography-link": "#60a5fa",
+    "--clampography-primary": "#3b82f6",
+    "--clampography-secondary": "#a855f7",
+  },
+  retro: {
+    "--clampography-background": "#ece3ca",
+    "--clampography-text": "#2c2420",
+    "--clampography-link": "#d97757",
+    "--clampography-primary": "#e45f2b",
+    "--clampography-secondary": "#f6c342",
+  },
+  cyberpunk: {
+    "--clampography-background": "#000b1e",
+    "--clampography-text": "#00f0ff",
+    "--clampography-link": "#ff0099",
+    "--clampography-primary": "#fcee0a",
+    "--clampography-secondary": "#05ffa1",
+  },
+};
+
+export const themesList = Object.keys(themes);

package/clampography.css

@@ -1,571 +0,0 @@
-@layer base {
-  /* --------------------------------------------------------------------------
-   ROOT CONFIGURATION
-   -------------------------------------------------------------------------- */
-
-  :root {
-    /* Fluid spacing scale */
-    --spacing-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem);
-    --spacing-sm: clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem);
-    --spacing-md: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
-    --spacing-lg: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
-    --spacing-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
-
-    /* Utility variables */
-    --scroll-offset: 5rem;
-
-    /* System font stacks - optimal performance & consistency */
-    --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto,
-      'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      'Liberation Mono', 'Courier New', monospace;
-  }
-
-  /* --------------------------------------------------------------------------
-   BODY - Global Typography Settings
-   -------------------------------------------------------------------------- */
-
-  body {
-    font-family: var(--font-family-base);
-    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
-    line-height: 1.75;
-
-    /* Rendering optimizations */
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    /* Progressive enhancement - better line breaks (Chrome 117+, Safari 16.4+) */
-    text-wrap: pretty;
-  }
-
-  /* --------------------------------------------------------------------------
-   HEADINGS (H1-H6) - Structural Hierarchy
-   -------------------------------------------------------------------------- */
-
-  :where(h1, h2, h3, h4, h5, h6) {
-    font-weight: 600;
-    scroll-margin-top: var(--scroll-offset);
-  }
-
-  h1 {
-    font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
-    line-height: 1.1111;
-    font-weight: 800;
-    margin-top: 0;
-    margin-bottom: var(--spacing-xl);
-  }
-
-  h2 {
-    font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
-    line-height: 1.3333;
-    font-weight: 700;
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-md);
-  }
-
-  h3 {
-    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
-    line-height: 1.6;
-    margin-top: var(--spacing-lg);
-    margin-bottom: var(--spacing-sm);
-  }
-
-  h4 {
-    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
-    line-height: 1.5;
-    margin-top: var(--spacing-lg);
-    margin-bottom: var(--spacing-sm);
-  }
-
-  h5 {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-xs);
-  }
-
-  h6 {
-    font-size: 0.875rem;
-    line-height: 1.5;
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-xs);
-  }
-
-  /* --------------------------------------------------------------------------
-   LINKS - Clickable Text (Structural Indicators)
-   -------------------------------------------------------------------------- */
-
-  a {
-    text-decoration-line: underline;
-    text-decoration-thickness: 0.0625em;
-    text-underline-offset: 0.15em;
-    cursor: pointer;
-  }
-
-  /* Remove underline from heading links */
-  :where(h1, h2, h3, h4, h5, h6) a {
-    text-decoration: none;
-  }
-
-  /* --------------------------------------------------------------------------
-   MENU - Interactive Lists (Toolbars, Navigation)
-   -------------------------------------------------------------------------- */
-
-  menu {
-    list-style: none;
-    margin-bottom: var(--spacing-md);
-    padding-left: 0;
-  }
-
-  /* Remove custom markers from menu items */
-  menu > li::before {
-    display: none;
-  }
-
-  /* --------------------------------------------------------------------------
-   HGROUP - Heading Groups (Title + Subtitle)
-   -------------------------------------------------------------------------- */
-
-  hgroup {
-    margin-bottom: var(--spacing-lg);
-  }
-
-  /* Reduce spacing between heading and subtitle */
-  hgroup :where(h1, h2, h3, h4, h5, h6) {
-    margin-bottom: var(--spacing-xs);
-  }
-
-  /* Subtitle/tagline styling (typically <p>) */
-  hgroup :where(p) {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-size: 0.875em;
-    font-weight: 400;
-    line-height: 1.5;
-  }
-
-  /* --------------------------------------------------------------------------
-   TEXT CONTENT - Paragraphs & Inline Elements
-   -------------------------------------------------------------------------- */
-
-  /* Paragraphs */
-  p {
-    line-height: 1.75;
-    margin-bottom: var(--spacing-md);
-  }
-
-  /* Text modifiers - semantic emphasis */
-  :where(strong, b) {
-    font-weight: 700;
-  }
-
-  :where(em, i, cite, var) {
-    font-style: italic;
-  }
-
-  /* Definition term - structural emphasis without forcing italic */
-  dfn {
-    font-style: normal;
-    font-weight: 600;
-  }
-
-  /* Contextual sizing - uses 'em' to scale with parent */
-  small {
-    font-size: 0.875em;
-    line-height: 1.5;
-  }
-
-  /* Code-related elements */
-  :where(code, kbd, samp) {
-    font-family: var(--font-family-mono);
-    padding: clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem)
-      clamp(0.1875rem, 0.15rem + 0.1875vw, 0.7125rem);
-  }
-
-  /* Inline code - minimal, scaled padding */
-  :where(code:not(pre code), kbd, samp) {
-    padding: clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem)
-      clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem);
-  }
-
-  /* Superscript & subscript - essential for scientific notation */
-  :where(sub, sup) {
-    font-size: 0.75em;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sup {
-    top: -0.5em;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-
-  /* Abbreviations with titles */
-  abbr[title] {
-    text-decoration: underline dotted;
-    cursor: help;
-  }
-
-  del {
-    text-decoration: line-through;
-  }
-
-  ins {
-    text-decoration: underline;
-  }
-
-  /* Strikethrough */
-  s {
-    text-decoration: line-through;
-  }
-
-  /* Underline */
-  u {
-    text-decoration: underline;
-  }
-
-  /* Mark/Highlight element */
-  mark {
-    font-style: normal;
-    font-weight: inherit;
-  }
-
-  /* Address element */
-  address {
-    font-style: normal; /* Reset browser default italic */
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-  }
-
-  /* Time element */
-  time {
-    font-style: normal;
-    font-variant-numeric: tabular-nums; /* Monospace numbers for alignment */
-  }
-
-  /* --------------------------------------------------------------------------
-   BLOCKQUOTES - Structural Spacing Only
-   -------------------------------------------------------------------------- */
-
-  blockquote {
-    margin-top: var(--spacing-lg);
-    margin-bottom: var(--spacing-lg);
-    padding-left: var(--spacing-md);
-  }
-
-  /* Nested blockquotes - reduced spacing for hierarchy */
-  blockquote blockquote {
-    margin-top: var(--spacing-sm);
-    margin-bottom: var(--spacing-sm);
-    padding-left: var(--spacing-sm);
-  }
-
-  /* Inline quotes */
-  q {
-    font-style: inherit;
-    /* Browser adds quotation marks automatically */
-  }
-
-  /* --------------------------------------------------------------------------
-   LISTS - Custom Structured Markers (Prose-like)
-   -------------------------------------------------------------------------- */
-
-  /* Reset default list styles to build custom ones */
-  :where(ul, ol) {
-    list-style: none;
-    margin-bottom: var(--spacing-md);
-    padding-left: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
-  }
-
-  li {
-    position: relative;
-    padding-left: 0.375em; /* Space between marker and text */
-  }
-
-  /* Spacing between list items */
-  li + li {
-    margin-top: var(--spacing-xs);
-  }
-
-  /* Spacing before nested lists */
-  li > :where(ul, ol),
-  li > :where(ul, ol):first-child {
-    margin-top: var(--spacing-xs);
-  }
-
-  /* Spacing before nested lists */
-  li > :where(ul, ol) {
-    margin-top: var(--spacing-xs);
-  }
-
-  /* Perfectly centered dot relative to the first line of text */
-  ul > li::before {
-    content: '';
-    position: absolute;
-    left: -1.125em;
-    top: calc(0.875em - 0.1875em);
-    width: 0.375em;
-    height: 0.375em;
-    background-color: currentColor;
-    border-radius: 50%;
-    opacity: 0.4;
-  }
-
-  /* Right-aligned numbers for professional look (e.g. "9." aligns with "10.") */
-  ol {
-    counter-reset: list-counter;
-  }
-
-  ol > li {
-    counter-increment: list-counter;
-  }
-
-  ol > li::before {
-    content: counter(list-counter) '.';
-    position: absolute;
-    left: -2.5em;
-    width: 1.75em;
-    text-align: right;
-    font-weight: 600;
-    color: currentColor;
-    opacity: 0.6;
-  }
-
-  /* Nested lists - indentation only, spacing handled by li rules above */
-  :where(ul, ol) :where(ul, ol) {
-    margin-bottom: 0; /* Parent li spacing already handles this */
-    padding-left: var(--spacing-md);
-  }
-
-  /* --------------------------------------------------------------------------
-   DEFINITION LISTS - Glossaries & Key-Value Pairs
-   -------------------------------------------------------------------------- */
-
-  dl {
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-  }
-
-  dt {
-    font-weight: 600;
-    margin-top: var(--spacing-sm);
-  }
-
-  /* First dt shouldn't have top margin */
-  dt:first-child {
-    margin-top: 0;
-  }
-
-  dd {
-    margin-left: var(--spacing-md);
-  }
-
-  /* Spacing between term and definition (consistent with lists) */
-  dt + dd {
-    margin-top: var(--spacing-xs);
-  }
-
-  /* Spacing between multiple definitions (consistent with list items) */
-  dd + dd {
-    margin-top: var(--spacing-xs);
-  }
-
-  /* Remove bottom margin from last dd */
-  dd:last-child {
-    margin-bottom: 0;
-  }
-
-  /* --------------------------------------------------------------------------
-   CODE BLOCKS - Monospace Typography
-   -------------------------------------------------------------------------- */
-
-  pre {
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-    font-family: var(--font-family-mono);
-    line-height: 1.6;
-    overflow-x: auto;
-  }
-
-  /* Code inside pre blocks */
-  pre code {
-    font-size: inherit;
-    padding: 0;
-    background: none;
-    border-radius: 0;
-  }
-
-  /* --------------------------------------------------------------------------
-   FORMS - Basic Structure
-   -------------------------------------------------------------------------- */
-
-  fieldset {
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-    padding: var(--spacing-md);
-    border: 0;
-  }
-
-  legend {
-    font-weight: 600;
-    padding: 0 var(--spacing-xs);
-  }
-
-  /* Form output element - typically displays calculation results */
-  output {
-    display: inline-block;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Visual indicator elements - structural spacing only */
-  :where(meter, progress) {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  /* --------------------------------------------------------------------------
-   MEDIA - Images, Videos, Figures
-   -------------------------------------------------------------------------- */
-
-  :where(img, video) {
-    max-width: 100%;
-    height: auto;
-  }
-
-  figure {
-    margin-top: var(--spacing-lg);
-    margin-bottom: var(--spacing-lg);
-  }
-
-  figcaption {
-    margin-top: 0.375rem;
-    font-size: 0.875em;
-    line-height: 1.5;
-  }
-
-  /* --------------------------------------------------------------------------
-   TABLES - Structural Layout
-   -------------------------------------------------------------------------- */
-
-  table {
-    width: 100%;
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-    border-collapse: collapse;
-    font-size: 0.9375em;
-    line-height: 1.6;
-  }
-
-  caption {
-    margin-bottom: var(--spacing-xs);
-    font-size: 0.875em;
-    font-weight: 600;
-    text-align: left;
-  }
-
-  th,
-  td {
-    padding: var(--spacing-xs) var(--spacing-sm);
-    text-align: left;
-  }
-
-  th {
-    font-weight: 600;
-  }
-
-  /* Table sections - structural differentiation */
-  thead th {
-    vertical-align: bottom;
-  }
-
-  tbody th,
-  tbody td {
-    vertical-align: top;
-  }
-
-  tfoot th,
-  tfoot td {
-    vertical-align: top;
-  }
-
-  /* Add spacing between tbody sections if multiple exist */
-  tbody + tbody {
-    border-top-width: 2px;
-  }
-
-  /* --------------------------------------------------------------------------
-   SEPARATORS - Spacing Only
-   -------------------------------------------------------------------------- */
-
-  hr {
-    margin-top: var(--spacing-xl);
-    margin-bottom: var(--spacing-xl);
-    border: 0;
-  }
-
-  /* --------------------------------------------------------------------------
-   INTERACTIVE ELEMENTS - Accessibility
-   -------------------------------------------------------------------------- */
-
-  :where(:focus, :focus-visible) {
-    outline-offset: 2px;
-  }
-
-  details {
-    margin-top: var(--spacing-md);
-    margin-bottom: var(--spacing-md);
-  }
-
-  summary {
-    cursor: pointer;
-    font-weight: 600;
-  }
-
-  details[open] > summary {
-    margin-bottom: var(--spacing-xs);
-  }
-
-  dialog {
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  /* --------------------------------------------------------------------------
-   UTILITIES - Margin Cleanup
-   -------------------------------------------------------------------------- */
-
-  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre):first-child {
-    margin-top: 0;
-  }
-
-  :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
-    margin-bottom: 0;
-  }
-
-  /* --------------------------------------------------------------------------
-   PRINT STYLES - Optimized for Paper
-   -------------------------------------------------------------------------- */
-
-  @media print {
-    body {
-      font-size: 12pt;
-      line-height: 1.5;
-      color: #000;
-    }
-
-    :where(h1, h2, h3, h4, h5, h6) {
-      break-after: avoid;
-    }
-
-    :where(img, figure, pre, table) {
-      break-inside: avoid;
-    }
-
-    a {
-      text-decoration: underline;
-    }
-  }
-}

package/presets/daisyUI.css

@@ -1,19 +0,0 @@
-/* You need daisyUI for this preset. Make sure its colors are accessible. */
-
-@import '../clampography.css';
-
-@layer base {
-  a {
-    @apply text-primary font-bold tracking-wider underline decoration-2 underline-offset-4 transition-colors duration-150;
-
-    text-decoration-color: color-mix(
-      in srgb,
-      var(--color-primary) 30%,
-      transparent
-    );
-  }
-
-  a:hover {
-    text-decoration-color: var(--color-primary);
-  }
-}