clampography 2.0.0-beta.2 → 2.0.0-beta.21

package/src/css/extra.css

@@ -0,0 +1,145 @@
+@layer base {
+
+:root {
+  background-color: var(--clampography-background);
+  color: var(--clampography-text);
+}
+
+:root :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--clampography-heading);
+}
+
+:root a {
+  color: var(--clampography-link);
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  text-decoration-line: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in oklab, var(--clampography-link) 30%, transparent);
+  transition-property: color, text-decoration-color;
+  transition-duration: 150ms;
+}
+
+:root a:hover {
+  text-decoration-color: var(--clampography-link);
+}
+
+:root ul > li::before {
+  background-color: var(--clampography-primary);
+}
+
+:root ol > li::before {
+  color: var(--clampography-primary);
+}
+
+:root :where(code:not(pre code), kbd, samp) {
+  background-color: var(--clampography-surface);
+  color: var(--clampography-heading);
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.25rem;
+  padding: 0.125rem var(--spacing-xs);
+}
+
+:root kbd {
+  transform: translateY(-0.15em);
+}
+
+:root pre {
+  background-color: var(--clampography-surface);
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.375rem;
+  padding: 1rem;
+}
+
+:root table {
+  padding: var(--spacing-sm);
+  border: 1px solid var(--clampography-border);
+}
+
+:root th {
+  color: var(--clampography-heading);
+}
+
+:root th, :root td {
+  border: 1px solid var(--clampography-border);
+}
+
+:root thead th {
+  border-bottom-width: 2px;
+}
+
+:root tbody tr:nth-child(even) {
+  background-color: var(--clampography-surface);
+}
+
+:root caption, :root figcaption, :root .muted {
+  color: var(--clampography-muted);
+}
+
+:root hr {
+  height: 1px;
+  border-width: 0;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+  background-color: var(--clampography-border);
+}
+
+:root 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);
+}
+
+:root mark {
+  background-color: var(--clampography-primary);
+  color: var(--clampography-background);
+  padding: 0.125rem var(--spacing-xs);
+  border-radius: 0.25rem;
+}
+
+:root del {
+  text-decoration-color: var(--clampography-secondary);
+  text-decoration-thickness: 2px;
+}
+
+:root :where(button, [type='button'], [type='reset'], [type='submit']) {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.375rem;
+}
+
+:root :where(input:not([type='checkbox'], [type='radio']), textarea, select) {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.375rem;
+}
+
+:root fieldset {
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.375rem;
+}
+
+:root legend {
+  color: var(--clampography-heading);
+}
+
+:root details {
+  border: 1px solid var(--clampography-border);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+}
+
+:root summary {
+  color: var(--clampography-heading);
+}
+
+:root details[open] > summary {
+  border-bottom: 1px solid var(--clampography-border);
+  padding-bottom: 0.5rem;
+}
+}

package/src/css/extra.css.min

@@ -0,0 +1 @@
+@layer base{:root{background-color:var(--clampography-background);color:var(--clampography-text)}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs)}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:1rem}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:3rem;margin-bottom:3rem;background-color:var(--clampography-border)}:root 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)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root :where(button, [type='button'], [type='reset'], [type='submit']){padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--clampography-border);border-radius:0.375rem}:root :where(input:not([type='checkbox'], [type='radio']), textarea, select){padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--clampography-border);border-radius:0.375rem}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.375rem}:root legend{color:var(--clampography-heading)}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:0.5rem}:root summary{color:var(--clampography-heading)}:root details[open] > summary{border-bottom:1px solid var(--clampography-border);padding-bottom:0.5rem}}

package/src/extra.js

@@ -1,138 +1,198 @@
-/**
- * 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",
-  },
+export default (options = {}) => {
+  const root = options.root || ":root";
+
+  // Helper to scope selectors safely
+  const scope = (selector) => {
+    const parts = [];
+    let current = "";
+    let depth = 0;
+
+    for (let i = 0; i < selector.length; i++) {
+      const char = selector[i];
+      if (char === "(") depth++;
+      if (char === ")") depth--;
+
+      if (char === "," && depth === 0) {
+        parts.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    parts.push(current.trim());
+
+    return parts
+      .filter(Boolean)
+      .map((part) => {
+        if (part === ":root" || part === "body") return root;
+        return `${root} ${part}`;
+      })
+      .join(", ");
+  };
+
+  return {
+    // --- Basic Coloring ---
+    [root]: {
+      "background-color": "var(--clampography-background)",
+      "color": "var(--clampography-text)",
+    },
+
+    [scope(":where(h1, h2, h3, h4, h5, h6)")]: {
+      "color": "var(--clampography-heading)",
+    },
+
+    // Styled Links
+    [scope("a")]: {
+      "color": "var(--clampography-link)",
+      "font-weight": "600",
+      "letter-spacing": "0.025em",
+      "text-decoration-line": "underline",
+      "text-decoration-thickness": "2px",
+      "text-underline-offset": "4px",
+      "text-decoration-color":
+        "color-mix(in oklab, var(--clampography-link) 30%, transparent)",
+      "transition-property": "color, text-decoration-color",
+      "transition-duration": "150ms",
+    },
+
+    [scope("a:hover")]: {
+      "text-decoration-color": "var(--clampography-link)",
+    },
+
+    // Lists
+    [scope("ul > li::before")]: {
+      "background-color": "var(--clampography-primary)",
+    },
+
+    [scope("ol > li::before")]: {
+      "color": "var(--clampography-primary)",
+    },
+
+    // Inline Code
+    [scope(":where(code:not(pre code), kbd, samp)")]: {
+      "background-color": "var(--clampography-surface)",
+      "color": "var(--clampography-heading)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.25rem",
+      "padding": "0.125rem var(--spacing-xs)",
+    },
+
+    [scope("kbd")]: {
+      transform: "translateY(-0.15em)",
+    },
+
+    // Preformatted Code Blocks
+    [scope("pre")]: {
+      "background-color": "var(--clampography-surface)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "padding": "1rem",
+    },
+
+    // Tables
+    [scope("table")]: {
+      "padding": "var(--spacing-sm)",
+      "border": "1px solid var(--clampography-border)",
+    },
+
+    [scope("th")]: {
+      "color": "var(--clampography-heading)",
+    },
+
+    [scope("th, td")]: {
+      "border": "1px solid var(--clampography-border)",
+    },
+
+    [scope("thead th")]: {
+      "border-bottom-width": "2px",
+    },
+
+    [scope("tbody tr:nth-child(even)")]: {
+      "background-color": "var(--clampography-surface)",
+    },
+
+    // Captions & Muted
+    [scope("caption, figcaption, .muted")]: {
+      "color": "var(--clampography-muted)",
+    },
+
+    // Horizontal Rule
+    [scope("hr")]: {
+      "height": "1px",
+      "border-width": "0",
+      "margin-top": "3rem",
+      "margin-bottom": "3rem",
+      "background-color": "var(--clampography-border)",
+    },
+
+    // Blockquote
+    [scope("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)",
+    },
+
+    // Mark
+    [scope("mark")]: {
+      "background-color": "var(--clampography-primary)",
+      "color": "var(--clampography-background)",
+      "padding": "0.125rem var(--spacing-xs)",
+      "border-radius": "0.25rem",
+    },
+
+    // Deleted Text
+    [scope("del")]: {
+      "text-decoration-color": "var(--clampography-secondary)",
+      "text-decoration-thickness": "2px",
+    },
+
+    // Buttons
+    [scope(":where(button, [type='button'], [type='reset'], [type='submit'])")]:
+      {
+        "padding": "var(--spacing-xs) var(--spacing-sm)",
+        "border": "1px solid var(--clampography-border)",
+        "border-radius": "0.375rem",
+      },
+
+    // Inputs
+    [
+      scope(
+        ":where(input:not([type='checkbox'], [type='radio']), textarea, select)",
+      )
+    ]: {
+      "padding": "var(--spacing-xs) var(--spacing-sm)",
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+    },
+
+    // Fieldset
+    [scope("fieldset")]: {
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+    },
+
+    [scope("legend")]: {
+      "color": "var(--clampography-heading)",
+    },
+
+    // Details
+    [scope("details")]: {
+      "border": "1px solid var(--clampography-border)",
+      "border-radius": "0.375rem",
+      "padding": "0.5rem",
+    },
+
+    [scope("summary")]: {
+      "color": "var(--clampography-heading)",
+    },
+
+    [scope("details[open] > summary")]: {
+      "border-bottom": "1px solid var(--clampography-border)",
+      "padding-bottom": "0.5rem",
+    },
+  };
 };