clampography 0.9.11 → 2.0.0-beta.10

package/README.md

@@ -1,5 +1,7 @@
 # 🙌 Clampography
 
+> **WARNING**: Beta 2.0.0 is in development and currently unstable.
+
 **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. It's designed as an alternative to

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "clampography",
-  "version": "0.9.11",
-  "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.10",
+  "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",
@@ -26,11 +24,14 @@
     "font-size",
     "markdown",
     "style",
+    "styles",
     "tailwind",
     "tailwind-css",
     "tailwind-plugin",
     "tailwindcss",
     "text",
+    "theme",
+    "themes",
     "typography"
   ],
   "repository": {
@@ -39,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,474 @@
+export default {
+  // ROOT CONFIGURATION
+  "@layer base": {
+    ":root": {
+      "--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)",
+      "--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",
+    },
+  },
+
+  // 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",
+    "text-rendering": "optimizeLegibility",
+    "-webkit-font-smoothing": "antialiased",
+    "-moz-osx-font-smoothing": "grayscale",
+    "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.5",
+    "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)",
+  },
+
+  ":is(h1, h2, h3, h4, h5, h6):first-child": {
+    "margin-top": "0",
+  },
+
+  // LINKS - Clickable Text (Structural Indicators)
+  a: {
+    "text-decoration-line": "underline",
+    "text-decoration-thickness": "0.0625em",
+    "text-underline-offset": "0.15em",
+    cursor: "pointer",
+  },
+
+  ":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",
+  },
+
+  "menu > li::before": {
+    display: "none",
+  },
+
+  // HGROUP - Heading Groups (Title + Subtitle)
+  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",
+  },
+
+  // TEXT CONTENT - Paragraphs & Inline Elements
+  p: {
+    "line-height": "1.75",
+    "margin-bottom": "var(--spacing-md)",
+  },
+
+  ":where(strong, b)": {
+    "font-weight": "700",
+  },
+
+  ":where(em, i, cite, var)": {
+    "font-style": "italic",
+  },
+
+  dfn: {
+    "font-style": "italic",
+    "font-weight": "600",
+  },
+
+  small: {
+    "font-size": "0.875em",
+    "line-height": "1.5",
+  },
+
+  kbd: {
+    "font-family": "var(--font-family-mono)",
+    "font-size": "0.875em",
+    "font-weight": "600",
+  },
+
+  samp: {
+    "font-family": "var(--font-family-mono)",
+    "font-size": "0.875em",
+  },
+
+  data: {
+    "font-variant-numeric": "tabular-nums",
+  },
+
+  ":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": "italic",
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
+  },
+
+  time: {
+    "font-style": "normal",
+    "font-variant-numeric": "tabular-nums",
+  },
+
+  // BLOCKQUOTES - Structural Spacing Only
+  blockquote: {
+    "margin-top": "var(--spacing-lg)",
+    "margin-bottom": "var(--spacing-lg)",
+    "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",
+  },
+
+  // LISTS - Custom Structured Markers (Prose-like)
+  ":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",
+  },
+
+  "li + li": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
+  "li > ul, li > ol": {
+    "margin-top": "var(--spacing-xs)",
+    "margin-bottom": "var(--spacing-sm)",
+    "padding-left": "var(--spacing-md)",
+  },
+
+  "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",
+  },
+
+  "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",
+  },
+
+  // 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)",
+  },
+
+  "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",
+  },
+
+  // 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",
+  },
+
+  "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)",
+  },
+
+  label: {
+    display: "inline-block",
+    "font-weight": "600",
+    "margin-bottom": "var(--spacing-xs)",
+  },
+
+  output: {
+    display: "inline-block",
+    "font-variant-numeric": "tabular-nums",
+  },
+
+  ":where(meter, progress)": {
+    display: "inline-block",
+    "vertical-align": "middle",
+  },
+
+  // FORM CONTROLS - Typography Inheritance
+  "input, button, textarea, select, optgroup": {
+    "font-family": "inherit",
+    "font-size": "100%",
+    "line-height": "inherit",
+  },
+
+  textarea: {
+    "line-height": "1.5",
+  },
+
+  "button, [type='button'], [type='reset'], [type='submit']": {
+    cursor: "pointer",
+  },
+
+  // MEDIA - Images, Videos, Figures
+  ":where(img, video, canvas, audio, iframe, svg)": {
+    "max-width": "100%",
+    height: "auto",
+    "vertical-align": "middle",
+  },
+
+  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": "1em",
+    "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",
+  },
+
+  "thead th": {
+    "vertical-align": "bottom",
+  },
+
+  "tbody th, tbody td": {
+    "vertical-align": "top",
+  },
+
+  "tfoot th, tfoot td": {
+    "vertical-align": "top",
+  },
+
+  "tbody + tbody": {
+    "border-top-width": "2px",
+  },
+
+  // SEPARATORS - Spacing Only
+  hr: {
+    "margin-top": "var(--spacing-xl)",
+    "margin-bottom": "var(--spacing-xl)",
+    border: "0",
+    "border-top": "1px solid",
+  },
+
+  // 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:not(li > ul, li > ol), ol:not(li > ul, li > 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",
+  },
+};

package/src/extra.js

@@ -0,0 +1,138 @@
+/**
+ * Extra opinionated styles and coloring.
+ * Applies colors to the structural base elements.
+ */
+export default {
+  // --- Basic Coloring (Applying theme variables) ---
+
+  "body": {
+    "background-color": "var(--clampography-background)",
+    "color": "var(--clampography-text)",
+  },
+
+  ":where(h1, h2, h3, h4, h5, h6)": {
+    "color": "var(--clampography-heading)",
+  },
+
+  "a": {
+    "color": "var(--clampography-link)",
+  },
+
+  // Lists
+  "ul > li::before": {
+    "background-color": "var(--clampography-primary)", // Bullet points
+  },
+
+  "ol > li::before": {
+    "color": "var(--clampography-secondary)", // Numbers
+  },
+
+  // Inline Code
+  ":where(code, kbd, samp)": {
+    "background-color": "var(--clampography-surface)",
+    "color": "var(--clampography-heading)",
+    "border": "1px solid var(--clampography-border)",
+    "border-radius": "0.25rem",
+  },
+
+  // Preformatted Code Blocks
+  "pre": {
+    "background-color": "var(--clampography-surface)",
+    "border": "1px solid var(--clampography-border)",
+    "border-radius": "0.375rem",
+    "padding": "1rem",
+  },
+
+  // Tables
+  "th": {
+    "color": "var(--clampography-heading)",
+  },
+
+  "th, td": {
+    "border-bottom": "1px solid var(--clampography-border)",
+  },
+
+  "thead th": {
+    "border-bottom-width": "2px",
+  },
+
+  // Captions & Muted text
+  "caption, figcaption, .muted": {
+    "color": "var(--clampography-muted)",
+  },
+
+  // Horizontal Rule (Thematic)
+  "hr": {
+    "height": "1px",
+    "border-width": "0",
+    "margin-top": "3rem",
+    "margin-bottom": "3rem",
+    "background-color": "var(--clampography-border)",
+  },
+
+  // --- Opinionated Extras ---
+
+  // Styled Blockquote
+  "blockquote": {
+    "border-left-width": "4px",
+    "border-left-color": "var(--clampography-primary)",
+    "background-color": "var(--clampography-surface)",
+    "padding": "1rem",
+    "border-radius": "0.25rem",
+    "font-style": "italic",
+    "color": "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": "var(--clampography-primary)",
+  },
+
+  // Mark
+  "mark": {
+    "background-color": "var(--clampography-primary)",
+    "color": "var(--clampography-background)",
+  },
+
+  // Deleted Text
+  "del": {
+    "text-decoration-color": "var(--clampography-secondary)",
+    "text-decoration-thickness": "2px",
+  },
+
+  // Fieldset
+  "fieldset": {
+    "border": "1px solid var(--clampography-border)",
+    "border-radius": "0.375rem",
+  },
+
+  "legend": {
+    "color": "var(--clampography-heading)",
+  },
+
+  // Details
+  "details": {
+    "border": "1px solid var(--clampography-border)",
+    "border-radius": "0.375rem",
+    "padding": "0.5rem",
+  },
+
+  "summary": {
+    "color": "var(--clampography-heading)",
+  },
+
+  "details[open] > summary": {
+    "border-bottom": "1px solid var(--clampography-border)",
+    "padding-bottom": "0.5rem",
+  },
+};

package/src/index.js

@@ -0,0 +1,109 @@
+import plugin from "tailwindcss/plugin";
+import { themes as builtInThemes } from "./themes.js";
+import baseStyles from "./base.js";
+import extraStyles from "./extra.js";
+
+/**
+ * Helper to resolve boolean options from CSS configuration.
+ * CSS values often come as strings ("true"/"false"), which are both truthy in JS.
+ */
+const resolveBool = (value, defaultValue) => {
+  if (value === "false" || value === false) return false;
+  if (value === "true" || value === true) return true;
+  return defaultValue;
+};
+
+/**
+ * Main plugin function.
+ */
+export default plugin.withOptions((options = {}) => {
+  return ({ addBase }) => {
+    // 1. Load Base and Extra styles
+    // We use the helper to correctly parse "false" string from CSS
+    const includeBase = resolveBool(options.base, true); // Default: true
+    const includeExtra = resolveBool(options.extra, false); // Default: false
+
+    includeBase && addBase(baseStyles);
+    includeExtra && addBase(extraStyles);
+
+    // 2. Parse themes configuration
+    let configThemes = options.themes;
+    let themesToInclude = [];
+    let defaultThemeName = null;
+    let prefersDarkTheme = false;
+    let rootSelector = options.root ?? ":root";
+
+    // Normalize input to an array of strings
+    let rawThemeList = [];
+
+    if (typeof configThemes === "string") {
+      if (configThemes.trim() === "all") {
+        // Special case: themes: all
+        rawThemeList = Object.keys(builtInThemes);
+      } else if (configThemes.trim() === "false") {
+        // Explicitly disabled themes
+        rawThemeList = [];
+      } else {
+        rawThemeList = configThemes.split(",");
+      }
+    } else if (Array.isArray(configThemes)) {
+      rawThemeList = configThemes;
+    } else {
+      // Default behavior: NO themes loaded automatically.
+      // User must specify themes to load them.
+      rawThemeList = [];
+    }
+
+    // 3. Process the list and look for flags (--default, --prefersdark)
+    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
+      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 && !defaultThemeName && !prefersDarkTheme
+    ) return;
+
+    // 4. Generate CSS
+    const themeStyles = {};
+
+    // A. Default theme (:root)
+    if (defaultThemeName && 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,82 @@
+import plugin from "tailwindcss/plugin";
+import { themes as builtInThemes } from "./themes.js";
+
+export default plugin.withOptions((options = {}) => {
+  return ({ addBase }) => {
+    // 1. Extract metadata
+    const themeName = options.name;
+    const isDefault = options.default ?? false;
+    const isPrefersDark = options.prefersdark ?? false;
+    const rootSelector = options.root ?? ":root";
+    // Defaults to light scheme if not specified
+    const colorScheme = options["color-scheme"] ?? "light";
+
+    if (!themeName) {
+      console.warn("Clampography: Theme definition missing 'name' property.");
+      return;
+    }
+
+    // 2. Prepare Base Colors (Fallback)
+    // We fetch the full palette of the requested color scheme (light/dark)
+    // to fill in any missing gaps in the user's definition.
+    const fallbackTheme = builtInThemes[colorScheme] || builtInThemes["light"];
+
+    // 3. Extract & Merge Colors
+    const themeColors = {};
+
+    // Mapping of simplified keys to full CSS variable names
+    const keyMap = {
+      "background": "--clampography-background",
+      "surface": "--clampography-surface",
+      "border": "--clampography-border",
+      "heading": "--clampography-heading",
+      "text": "--clampography-text",
+      "muted": "--clampography-muted",
+      "link": "--clampography-link",
+      "primary": "--clampography-primary",
+      "secondary": "--clampography-secondary",
+    };
+
+    // First, populate with fallback colors
+    Object.keys(fallbackTheme).forEach((key) => {
+      themeColors[key] = fallbackTheme[key];
+    });
+
+    // Then override with user provided values
+    Object.keys(options).forEach((key) => {
+      // Ignore metadata keys
+      if (
+        ["name", "default", "prefersdark", "root", "color-scheme"].includes(key)
+      ) return;
+
+      if (keyMap[key]) {
+        themeColors[keyMap[key]] = options[key];
+      } else if (key.startsWith("--")) {
+        themeColors[key] = options[key];
+      }
+    });
+
+    // Add the CSS property 'color-scheme' for browser UI adaptation (scrollbars, etc.)
+    themeColors["color-scheme"] = colorScheme;
+
+    // 4. Generate Styles
+    const styles = {};
+
+    // A. Define the theme as a named data-theme
+    styles[`[data-theme="${themeName}"]`] = themeColors;
+
+    // B. If default, apply to root
+    if (isDefault) {
+      styles[rootSelector] = themeColors;
+    }
+
+    // C. If 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,52 @@
+export const themes = {
+  light: {
+    "color-scheme": "light",
+    "--clampography-background": "#ffffff",
+    "--clampography-surface": "#f3f4f6",
+    "--clampography-border": "#e5e7eb",
+    "--clampography-heading": "#111827",
+    "--clampography-text": "#374151",
+    "--clampography-muted": "#6b7280",
+    "--clampography-link": "#2563eb",
+    "--clampography-primary": "#3b82f6",
+    "--clampography-secondary": "#9333ea",
+  },
+  dark: {
+    "color-scheme": "dark",
+    "--clampography-background": "#0f172a",
+    "--clampography-surface": "#1e293b",
+    "--clampography-border": "#334155",
+    "--clampography-heading": "#f8fafc",
+    "--clampography-text": "#cbd5e1",
+    "--clampography-muted": "#94a3b8",
+    "--clampography-link": "#60a5fa",
+    "--clampography-primary": "#3b82f6",
+    "--clampography-secondary": "#a855f7",
+  },
+  retro: {
+    "color-scheme": "light",
+    "--clampography-background": "#ece3ca",
+    "--clampography-surface": "#e0d6b6",
+    "--clampography-border": "#cbbd99",
+    "--clampography-heading": "#2c2420",
+    "--clampography-text": "#4a3b32",
+    "--clampography-muted": "#756354",
+    "--clampography-link": "#d97757",
+    "--clampography-primary": "#e45f2b",
+    "--clampography-secondary": "#f6c342",
+  },
+  cyberpunk: {
+    "color-scheme": "dark",
+    "--clampography-background": "#000b1e",
+    "--clampography-surface": "#051630",
+    "--clampography-border": "#0f3661",
+    "--clampography-heading": "#ffffff",
+    "--clampography-text": "#00f0ff",
+    "--clampography-muted": "#008f99",
+    "--clampography-link": "#ff0099",
+    "--clampography-primary": "#fcee0a",
+    "--clampography-secondary": "#05ffa1",
+  },
+};
+
+export const themesList = Object.keys(themes);

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);
-  }
-}