clampography 2.0.0-beta.1 → 2.0.0-beta.3

package/package.json

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

@@ -1,8 +1,9 @@
 /**
- * Base typography and reset styles converted from base.css
+ * Base typography and layout styles (structure only, no colors).
+ * Converted from base.css.
  */
 export default {
-  // Global CSS Variables
+  // Global CSS Variables (Spacing & Fonts)
   "@layer base": {
     ":root": {
       "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
@@ -17,7 +18,7 @@ export default {
     },
   },
 
-  // Typography & Resets
+  // Body Structure
   "body": {
     "font-family": "var(--font-family-base)",
     "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
@@ -28,6 +29,7 @@ export default {
     "text-wrap": "pretty",
   },
 
+  // Headings Structure
   ":where(h1, h2, h3, h4, h5, h6)": {
     "font-weight": "700",
     "scroll-margin-top": "var(--scroll-offset)",
@@ -54,6 +56,7 @@ export default {
     "margin-bottom": "var(--spacing-xs)",
   },
 
+  // Links
   "a": {
     "text-decoration-line": "underline",
     "text-decoration-thickness": "0.0625em",
@@ -66,6 +69,7 @@ export default {
     "text-decoration": "none",
   },
 
+  // Lists & Menus
   "menu": {
     "list-style": "none",
     "margin-bottom": "var(--spacing-md)",
@@ -98,6 +102,7 @@ export default {
     "margin-top": "0",
   },
 
+  // Inline elements
   ":where(strong, b)": {
     "font-weight": "700",
   },
@@ -179,6 +184,7 @@ export default {
     "font-variant-numeric": "tabular-nums",
   },
 
+  // Blockquotes
   "blockquote": {
     "margin-top": "0",
     "margin-bottom": "0",
@@ -195,6 +201,7 @@ export default {
     "font-style": "inherit",
   },
 
+  // Lists
   ":where(ul, ol)": {
     "list-style": "none",
     "margin-bottom": "0",
@@ -222,7 +229,6 @@ export default {
     "top": "calc(0.875em - 0.1875em)",
     "width": "0.375em",
     "height": "0.375em",
-    "background-color": "currentColor",
     "border-radius": "50%",
   },
 
@@ -243,7 +249,6 @@ export default {
     "width": "1.75em",
     "text-align": "right",
     "font-weight": "600",
-    "color": "currentColor",
   },
 
   ":where(ul, ol) :where(ul, ol)": {
@@ -281,6 +286,7 @@ export default {
     "margin-bottom": "0",
   },
 
+  // Pre / Code
   "pre": {
     "margin-top": "var(--spacing-md)",
     "margin-bottom": "var(--spacing-md)",
@@ -293,10 +299,10 @@ export default {
   "pre code": {
     "font-size": "inherit",
     "padding": "0",
-    "background": "none",
     "border-radius": "0",
   },
 
+  // Fieldset & Form
   "fieldset": {
     "margin-top": "var(--spacing-md)",
     "margin-bottom": "var(--spacing-md)",
@@ -319,6 +325,7 @@ export default {
     "vertical-align": "middle",
   },
 
+  // Media
   ":where(img, video)": {
     "max-width": "100%",
     "height": "auto",
@@ -337,6 +344,7 @@ export default {
     "line-height": "1.5",
   },
 
+  // Tables
   "table": {
     "width": "100%",
     "margin-top": "0",
@@ -371,12 +379,14 @@ export default {
     "border-top-width": "2px",
   },
 
+  // Horizontal Rule
   "hr": {
     "margin-top": "var(--spacing-xl)",
     "margin-bottom": "var(--spacing-xl)",
     "border": "0",
   },
 
+  // Interactive
   ":where(:focus, :focus-visible)": {
     "outline-offset": "2px",
   },
@@ -400,6 +410,7 @@ export default {
     "line-height": "inherit",
   },
 
+  // Resets
   "ul": {
     "margin-top": "0",
     "margin-bottom": "0",
@@ -414,11 +425,6 @@ export default {
   },
 
   "@media print": {
-    "body": {
-      "font-size": "12pt",
-      "line-height": "1.5",
-      "color": "#000",
-    },
     "table": {
       "break-inside": "avoid",
     },

package/src/extra.js

@@ -1,34 +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", /* my-12 (12 * 0.25rem) */
-    "margin-bottom": "3rem", /* my-12 */
-    "background-color": "var(--clampography-secondary)",
+    "margin-top": "3rem",
+    "margin-bottom": "3rem",
+    "background-color": "var(--clampography-border)",
   },
 
+  // --- Opinionated Extras ---
+
+  // Styled Blockquote
   "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 */
+    "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": {
-    "color": "var(--clampography-link)",
-    "font-weight": "700", /* font-bold */
-    "letter-spacing": "0.025em", /* tracking-wide */
+    "font-weight": "700",
+    "letter-spacing": "0.025em",
     "text-decoration-line": "underline",
-    "text-decoration-thickness": "2px", /* decoration-2 */
-    "text-underline-offset": "4px", /* underline-offset-4 */
+    "text-decoration-thickness": "2px",
+    "text-underline-offset": "4px",
     "transition-property": "color, text-decoration-color",
-    "transition-duration": "150ms", /* duration-150 */
+    "transition-duration": "150ms",
   },
 
   "a:hover": {
-    // Używamy zmiennej zdefiniowanej w themes.js (bez prefixu --color-)
     "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/theme-plugin.js

@@ -1,66 +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",
-];
+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",
+      "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) => {
-      // 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,28 +1,48 @@
 export const themes = {
   light: {
+    "color-scheme": "light",
     "--clampography-background": "#ffffff",
-    "--clampography-text": "#1f2937",
+    "--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-text": "#f3f4f6",
+    "--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-text": "#2c2420",
+    "--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",