clampography 2.0.0-beta.1 → 2.0.0-beta.11

package/src/theme-plugin.js

@@ -1,66 +1,80 @@
 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",
-];
+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; // lowercase because CSS might force it
+    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. 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 = {};
+    // 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"];
 
-    // 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.
+    // 3. Extract & Merge Colors
+    const themeColors = {};
 
-    // Helper to map simplified keys to full CSS vars (optional convenience)
+    // Mapping of simplified keys to full CSS variable names
     const keyMap = {
       "background": "--clampography-background",
-      "text": "--clampography-text",
+      "border": "--clampography-border",
+      "error": "--clampography-error",
+      "heading": "--clampography-heading",
+      "info": "--clampography-info",
       "link": "--clampography-link",
+      "muted": "--clampography-muted",
       "primary": "--clampography-primary",
       "secondary": "--clampography-secondary",
+      "success": "--clampography-success",
+      "surface": "--clampography-surface",
+      "text": "--clampography-text",
+      "warning": "--clampography-warning",
     };
 
+    // 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) => {
-      // Check if it's one of our mapped short keys
+      // Ignore metadata keys
+      if (
+        ["name", "default", "prefersdark", "root", "color-scheme"].includes(key)
+      ) return;
+
       if (keyMap[key]) {
         themeColors[keyMap[key]] = options[key];
-      } // Or if it is already a custom property key (starts with --)
-      else if (key.startsWith("--")) {
+      } else if (key.startsWith("--")) {
         themeColors[key] = options[key];
       }
     });
 
-    // 3. Generate Styles
+    // 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 (always available)
+    // A. Define the theme as a named data-theme
     styles[`[data-theme="${themeName}"]`] = themeColors;
 
-    // B. If marked as default, apply to :root
+    // B. If default, apply to root
     if (isDefault) {
       styles[rootSelector] = themeColors;
     }
 
-    // C. If marked as prefers-dark, apply to media query
+    // C. If prefers-dark, apply to media query
     if (isPrefersDark) {
       styles["@media (prefers-color-scheme: dark)"] = {
         [rootSelector]: themeColors,

package/src/themes.js

@@ -1,31 +1,67 @@
 export const themes = {
   light: {
-    "--clampography-background": "#ffffff",
-    "--clampography-text": "#1f2937",
-    "--clampography-link": "#2563eb",
-    "--clampography-primary": "#3b82f6",
-    "--clampography-secondary": "#9333ea",
+    "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",
   },
   dark: {
-    "--clampography-background": "#0f172a",
-    "--clampography-text": "#f3f4f6",
-    "--clampography-link": "#60a5fa",
-    "--clampography-primary": "#3b82f6",
-    "--clampography-secondary": "#a855f7",
+    "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",
   },
   retro: {
-    "--clampography-background": "#ece3ca",
-    "--clampography-text": "#2c2420",
-    "--clampography-link": "#d97757",
-    "--clampography-primary": "#e45f2b",
-    "--clampography-secondary": "#f6c342",
+    "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",
   },
   cyberpunk: {
-    "--clampography-background": "#000b1e",
-    "--clampography-text": "#00f0ff",
-    "--clampography-link": "#ff0099",
-    "--clampography-primary": "#fcee0a",
-    "--clampography-secondary": "#05ffa1",
+    "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",
   },
 };