clampography 0.9.10 → 2.0.0-beta.2

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,76 @@
+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",
+      "surface": "--clampography-surface",
+      "border": "--clampography-border",
+      "heading": "--clampography-heading",
+      "text": "--clampography-text",
+      "muted": "--clampography-muted",
+      "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,48 @@
+export const themes = {
+  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: {
+    "--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: {
+    "--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: {
+    "--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);