clampography 2.0.0-beta.2 → 2.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "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/index.js

@@ -20,54 +20,45 @@ export default plugin.withOptions((options = {}) => {
 
     // Default values
     let themesToInclude = [];
-    let defaultThemeName = "light";
+    let defaultThemeName = null;
     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
+        // Special case: themes: all -> load everything
         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"];
+      // Fallback default is EMPTY array.
+      // User must explicitly ask for themes via options.
+      rawThemeList = [];
     }
 
-    // 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.
-
+    // 3. Process the list and look for flags
     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);
       }
@@ -80,7 +71,8 @@ export default plugin.withOptions((options = {}) => {
     const themeStyles = {};
 
     // A. Default theme (:root)
-    if (builtInThemes[defaultThemeName]) {
+    // Only applied if explicitly flagged with --default OR via manual logic (not applied here automatically anymore)
+    if (defaultThemeName && builtInThemes[defaultThemeName]) {
       themeStyles[rootSelector] = builtInThemes[defaultThemeName];
     }
 

package/src/theme-plugin.js

@@ -1,36 +1,30 @@
 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";
+    // Nowa opcja: color-scheme (defaults to 'light' 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",
       "surface": "--clampography-surface",
@@ -43,28 +37,40 @@ export default plugin.withOptions((options = {}) => {
       "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) => {
-      // 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,5 +1,6 @@
 export const themes = {
   light: {
+    "color-scheme": "light",
     "--clampography-background": "#ffffff",
     "--clampography-surface": "#f3f4f6",
     "--clampography-border": "#e5e7eb",
@@ -11,6 +12,7 @@ export const themes = {
     "--clampography-secondary": "#9333ea",
   },
   dark: {
+    "color-scheme": "dark",
     "--clampography-background": "#0f172a",
     "--clampography-surface": "#1e293b",
     "--clampography-border": "#334155",
@@ -22,6 +24,7 @@ export const themes = {
     "--clampography-secondary": "#a855f7",
   },
   retro: {
+    "color-scheme": "light",
     "--clampography-background": "#ece3ca",
     "--clampography-surface": "#e0d6b6",
     "--clampography-border": "#cbbd99",
@@ -33,6 +36,7 @@ export const themes = {
     "--clampography-secondary": "#f6c342",
   },
   cyberpunk: {
+    "color-scheme": "dark",
     "--clampography-background": "#000b1e",
     "--clampography-surface": "#051630",
     "--clampography-border": "#0f3661",