clampography 2.0.0-beta.6 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clampography",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "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.css

@@ -0,0 +1,535 @@
+@layer base {
+  /* --------------------------------------------------------------------------
+   ROOT CONFIGURATION
+   -------------------------------------------------------------------------- */
+
+  :root {
+    /* Fluid spacing scale */
+    --spacing-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem);
+    --spacing-sm: clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem);
+    --spacing-md: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
+    --spacing-lg: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
+    --spacing-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
+
+    /* Utility variables */
+    --scroll-offset: 5rem;
+
+    /* System font stacks - optimal performance & consistency */
+    --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto,
+      'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      'Liberation Mono', 'Courier New', monospace;
+  }
+
+  /* --------------------------------------------------------------------------
+   BODY - Global Typography Settings
+   -------------------------------------------------------------------------- */
+
+  body {
+    font-family: var(--font-family-base);
+    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+    line-height: 1.75;
+
+    /* Rendering optimizations */
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Progressive enhancement - better line breaks (Chrome 117+, Safari 16.4+) */
+    text-wrap: pretty;
+  }
+
+  /* --------------------------------------------------------------------------
+   HEADINGS (H1-H6) - Structural Hierarchy
+   -------------------------------------------------------------------------- */
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    scroll-margin-top: var(--scroll-offset);
+  }
+
+  h1 {
+    font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
+    line-height: 1.1111;
+    font-weight: 800;
+    margin-top: 0;
+    margin-bottom: var(--spacing-xl);
+  }
+
+  h2 {
+    font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
+    line-height: 1.3333;
+    font-weight: 700;
+    margin-top: var(--spacing-xl);
+    margin-bottom: var(--spacing-md);
+  }
+
+  h3 {
+    font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+    line-height: 1.5;
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  h4 {
+    font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
+    line-height: 1.5;
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-sm);
+  }
+
+  h5 {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  h6 {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-xs);
+  }
+
+  /* --------------------------------------------------------------------------
+   LINKS - Clickable Text (Structural Indicators)
+   -------------------------------------------------------------------------- */
+
+  a {
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.0625em;
+    text-underline-offset: 0.15em;
+    cursor: pointer;
+  }
+
+  /* Remove underline from heading links */
+  :where(h1, h2, h3, h4, h5, h6) a {
+    text-decoration: none;
+  }
+
+  /* --------------------------------------------------------------------------
+   MENU - Interactive Lists (Toolbars, Navigation)
+   -------------------------------------------------------------------------- */
+
+  menu {
+    list-style: none;
+    margin-bottom: var(--spacing-md);
+    padding-left: 0;
+  }
+
+  /* Remove custom markers from menu items */
+  menu > li::before {
+    display: none;
+  }
+
+  /* --------------------------------------------------------------------------
+   HGROUP - Heading Groups (Title + Subtitle)
+   -------------------------------------------------------------------------- */
+
+  hgroup {
+    margin-bottom: var(--spacing-lg);
+  }
+
+  /* Reduce spacing between heading and subtitle */
+  hgroup :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  /* Subtitle/tagline styling (typically <p>) */
+  hgroup :where(p) {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  /* --------------------------------------------------------------------------
+   TEXT CONTENT - Paragraphs & Inline Elements
+   -------------------------------------------------------------------------- */
+
+  /* Paragraphs */
+  p {
+    line-height: 1.75;
+    margin-bottom: var(--spacing-md);
+  }
+
+  /* Text modifiers - semantic emphasis */
+  :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :where(em, i, cite, var) {
+    font-style: italic;
+  }
+
+  /* Definition term - structural emphasis without forcing italic */
+  dfn {
+    font-style: normal;
+    font-weight: 600;
+  }
+
+  /* Contextual sizing - uses 'em' to scale with parent */
+  small {
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  /* Code-related elements */
+  :where(code:not(pre code), kbd, samp) {
+    padding: 0.15em 0.3em;
+  }
+
+  /* Superscript & subscript - essential for scientific notation */
+  :where(sub, sup) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sup {
+    top: -0.5em;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+
+  /* Abbreviations with titles */
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+
+  del {
+    text-decoration: line-through;
+  }
+
+  ins {
+    text-decoration: underline;
+  }
+
+  /* Strikethrough */
+  s {
+    text-decoration: line-through;
+  }
+
+  /* Underline */
+  u {
+    text-decoration: underline;
+  }
+
+  /* Mark/Highlight element */
+  mark {
+    font-style: normal;
+    font-weight: inherit;
+  }
+
+  /* Address element */
+  address {
+    font-style: normal; /* Reset browser default italic */
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+
+  /* Time element */
+  time {
+    font-style: normal;
+    font-variant-numeric: tabular-nums; /* Monospace numbers for alignment */
+  }
+
+  /* --------------------------------------------------------------------------
+   BLOCKQUOTES - Structural Spacing Only
+   -------------------------------------------------------------------------- */
+
+  blockquote {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    padding-left: var(--spacing-md);
+  }
+
+  /* Nested blockquotes - reduced spacing for hierarchy */
+  blockquote blockquote {
+    margin-top: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+    padding-left: var(--spacing-sm);
+  }
+
+  /* Inline quotes */
+  q {
+    font-style: inherit;
+    /* Browser adds quotation marks automatically */
+  }
+
+  /* --------------------------------------------------------------------------
+   LISTS - Custom Structured Markers (Prose-like)
+   -------------------------------------------------------------------------- */
+
+  /* Reset default list styles to build custom ones */
+  :where(ul, ol) {
+    list-style: none;
+    margin-bottom: var(--spacing-md);
+    padding-left: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
+  }
+
+  li {
+    position: relative;
+    padding-left: 0.375em; /* Space between marker and text */
+  }
+
+  /* Spacing between list items */
+  li + li {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Spacing for nested lists */
+  li > :where(ul, ol):first-child {
+    margin-top: var(--spacing-s);
+  }
+
+  li > :where(ul, ol):not(:first-child) {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Perfectly centered dot relative to the first line of text */
+  ul > li::before {
+    content: '';
+    position: absolute;
+    left: -1.125em;
+    top: calc(0.875em - 0.1875em);
+    width: 0.375em;
+    height: 0.375em;
+    background-color: currentColor;
+    border-radius: 50%;
+  }
+
+  /* Right-aligned numbers for professional look (e.g. "9." aligns with "10.") */
+  ol {
+    counter-reset: list-counter;
+  }
+
+  ol > li {
+    counter-increment: list-counter;
+  }
+
+  ol > li::before {
+    content: counter(list-counter) '.';
+    position: absolute;
+    left: -2.5em;
+    width: 1.75em;
+    text-align: right;
+    font-weight: 600;
+    color: currentColor;
+  }
+
+  /* Nested lists - indentation only, spacing handled by li rules above */
+  :where(ul, ol) :where(ul, ol) {
+    margin-bottom: 0; /* Parent li spacing already handles this */
+    padding-left: var(--spacing-md);
+  }
+
+  /* --------------------------------------------------------------------------
+   DEFINITION LISTS - Glossaries & Key-Value Pairs
+   -------------------------------------------------------------------------- */
+
+  dl {
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+
+  dt {
+    font-weight: 600;
+    margin-top: var(--spacing-sm);
+  }
+
+  /* First dt shouldn't have top margin */
+  dt:first-child {
+    margin-top: 0;
+  }
+
+  dd {
+    margin-left: var(--spacing-md);
+  }
+
+  /* Spacing between term and definition (consistent with lists) */
+  dt + dd {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Spacing between multiple definitions (consistent with list items) */
+  dd + dd {
+    margin-top: var(--spacing-xs);
+  }
+
+  /* Remove bottom margin from last dd */
+  dd:last-child {
+    margin-bottom: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+   CODE BLOCKS - Monospace Typography
+   -------------------------------------------------------------------------- */
+
+  pre {
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    font-family: var(--font-family-mono);
+    line-height: 1.6;
+    overflow-x: auto;
+  }
+
+  /* Code inside pre blocks */
+  pre code {
+    font-size: inherit;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+   FORMS - Basic Structure
+   -------------------------------------------------------------------------- */
+
+  fieldset {
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    padding: var(--spacing-md);
+    border: 0;
+  }
+
+  legend {
+    font-weight: 600;
+    padding: 0 var(--spacing-xs);
+  }
+
+  /* Form output element - typically displays calculation results */
+  output {
+    display: inline-block;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Visual indicator elements - structural spacing only */
+  :where(meter, progress) {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  /* --------------------------------------------------------------------------
+   MEDIA - Images, Videos, Figures
+   -------------------------------------------------------------------------- */
+
+  :where(img, video) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  figure {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+  }
+
+  figcaption {
+    margin-top: 0.375rem;
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  /* --------------------------------------------------------------------------
+   TABLES - Structural Layout
+   -------------------------------------------------------------------------- */
+
+  table {
+    width: 100%;
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    border-collapse: collapse;
+    font-size: 1em;
+    line-height: 1.6;
+  }
+
+  caption {
+    margin-bottom: var(--spacing-xs);
+    font-size: 0.875em;
+    font-weight: 600;
+    text-align: left;
+  }
+
+  th,
+  td {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+  }
+
+  /* Table sections - structural differentiation */
+  thead th {
+    vertical-align: bottom;
+  }
+
+  tbody th,
+  tbody td {
+    vertical-align: top;
+  }
+
+  tfoot th,
+  tfoot td {
+    vertical-align: top;
+  }
+
+  /* Add spacing between tbody sections if multiple exist */
+  tbody + tbody {
+    border-top-width: 2px;
+  }
+
+  /* --------------------------------------------------------------------------
+   SEPARATORS - Spacing Only
+   -------------------------------------------------------------------------- */
+
+  hr {
+    margin-top: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+    border: 0;
+  }
+
+  /* --------------------------------------------------------------------------
+   INTERACTIVE ELEMENTS - Accessibility
+   -------------------------------------------------------------------------- */
+
+  :where(:focus, :focus-visible) {
+    outline-offset: 2px;
+  }
+
+  details {
+    margin-top: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+  }
+
+  summary {
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  details[open] > summary {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  dialog {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  /* --------------------------------------------------------------------------
+   UTILITIES - Margin Cleanup
+   -------------------------------------------------------------------------- */
+
+  :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre):first-child {
+    margin-top: 0;
+  }
+
+  :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
+    margin-bottom: 0;
+  }
+}

package/src/base.js

@@ -1,12 +1,11 @@
 /**
  * Base typography and layout styles (structure only, no colors).
- * Converted from base.css.
  */
 export default {
   // Global CSS Variables (Spacing & Fonts)
   "@layer base": {
     ":root": {
-      "--spacing-xs": "clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem)",
+      "--spacing-xs": "clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem)",
       "--spacing-sm": "clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem)",
       "--spacing-md": "clamp(1rem, 0.75rem + 1.25vw, 1.5rem)",
       "--spacing-lg": "clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem)",
@@ -32,12 +31,8 @@ export default {
 
   // Shared Heading Structure
   ":where(h1, h2, h3, h4, h5, h6)": {
-    "font-weight": "700",
+    "font-weight": "600",
     "scroll-margin-top": "var(--scroll-offset)",
-    "margin-top": "var(--spacing-lg)",
-    "margin-bottom": "var(--spacing-xs)",
-    "text-decoration": "none",
-    "break-after": "avoid",
   },
 
   // Specific Headings (Values from base.css)
@@ -91,7 +86,6 @@ export default {
     "text-decoration-thickness": "0.0625em",
     "text-underline-offset": "0.15em",
     "cursor": "pointer",
-    "text-decoration": "underline",
   },
 
   ":where(h1, h2, h3, h4, h5, h6) a": {
@@ -128,7 +122,6 @@ export default {
   "p": {
     "line-height": "1.75",
     "margin-bottom": "var(--spacing-md)",
-    "margin-top": "0",
   },
 
   // Inline elements
@@ -153,10 +146,10 @@ export default {
   ":where(code, kbd, samp)": {
     "font-family": "var(--font-family-mono)",
     "padding":
-      "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
+      "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.7125rem)",
   },
 
-  ":where(code:not(pre code))": {
+  ":where(code:not(pre code), kbd, samp)": {
     "padding":
       "clamp(0.0625rem, 0.05rem + 0.0625vw, 0.125rem) clamp(0.1875rem, 0.15rem + 0.1875vw, 0.3125rem)",
   },
@@ -215,8 +208,8 @@ export default {
 
   // Blockquotes
   "blockquote": {
-    "margin-top": "0",
-    "margin-bottom": "0",
+    "margin-top": "var(--spacing-lg)",
+    "margin-bottom": "var(--spacing-lg)",
     "padding-left": "var(--spacing-md)",
   },
 
@@ -233,9 +226,8 @@ export default {
   // Lists
   ":where(ul, ol)": {
     "list-style": "none",
-    "margin-bottom": "0",
-    "padding-left": "var(--spacing-md)",
-    "margin-top": "var(--spacing-xs)",
+    "margin-bottom": "var(--spacing-md)",
+    "padding-left": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
   },
 
   "li": {
@@ -251,6 +243,10 @@ export default {
     "margin-top": "var(--spacing-xs)",
   },
 
+  "li > :where(ul, ol)": {
+    "margin-top": "var(--spacing-xs)",
+  },
+
   "ul > li::before": {
     "content": "''",
     "position": "absolute",
@@ -258,13 +254,12 @@ export default {
     "top": "calc(0.875em - 0.1875em)",
     "width": "0.375em",
     "height": "0.375em",
+    "background-color": "currentColor",
     "border-radius": "50%",
   },
 
   "ol": {
     "counter-reset": "list-counter",
-    "margin-top": "0",
-    "margin-bottom": "0",
   },
 
   "ol > li": {
@@ -278,6 +273,7 @@ export default {
     "width": "1.75em",
     "text-align": "right",
     "font-weight": "600",
+    "color": "currentColor",
   },
 
   ":where(ul, ol) :where(ul, ol)": {
@@ -286,8 +282,8 @@ export default {
   },
 
   "dl": {
-    "margin-top": "0",
-    "margin-bottom": "0",
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
   },
 
   "dt": {
@@ -322,12 +318,12 @@ export default {
     "font-family": "var(--font-family-mono)",
     "line-height": "1.6",
     "overflow-x": "auto",
-    "break-inside": "avoid",
   },
 
   "pre code": {
     "font-size": "inherit",
     "padding": "0",
+    "background": "none",
     "border-radius": "0",
   },
 
@@ -362,9 +358,8 @@ export default {
   },
 
   "figure": {
-    "margin-top": "0",
-    "margin-bottom": "0",
-    "break-inside": "avoid",
+    "margin-top": "var(--spacing-lg)",
+    "margin-bottom": "var(--spacing-lg)",
   },
 
   "figcaption": {
@@ -376,8 +371,8 @@ export default {
   // Tables
   "table": {
     "width": "100%",
-    "margin-top": "0",
-    "margin-bottom": "0",
+    "margin-top": "var(--spacing-md)",
+    "margin-bottom": "var(--spacing-md)",
     "border-collapse": "collapse",
     "font-size": "0.9375em",
     "line-height": "1.6",
@@ -393,17 +388,24 @@ export default {
   "th, td": {
     "padding": "var(--spacing-xs) var(--spacing-sm)",
     "text-align": "left",
-    "font-weight": "600",
   },
 
-  "thead th, tbody th, tbody td, tfoot th, tfoot td": {
-    "vertical-align": "top",
+  "th": {
+    "font-weight": "600",
   },
 
   "thead th": {
     "vertical-align": "bottom",
   },
 
+  "tbody th, tbody td": {
+    "vertical-align": "top",
+  },
+
+  "tfoot th, tfoot td": {
+    "vertical-align": "top",
+  },
+
   "tbody + tbody": {
     "border-top-width": "2px",
   },
@@ -439,23 +441,31 @@ export default {
     "line-height": "inherit",
   },
 
-  // Resets
-  "ul": {
-    "margin-top": "0",
-    "margin-bottom": "0",
-  },
-
-  ":where(p, pre):first-child": {
-    "margin-top": "0",
-  },
+  // Utilities - Margin Cleanup
+  ":where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre):first-child":
+    {
+      "margin-top": "0",
+    },
 
-  ":where(p, pre):last-child": {
+  ":where(p, ul, ol, dl, blockquote, figure, table, pre):last-child": {
     "margin-bottom": "0",
   },
 
+  // Print Styles
   "@media print": {
-    "table": {
+    "body": {
+      "font-size": "12pt",
+      "line-height": "1.5",
+      "color": "#000",
+    },
+    ":where(h1, h2, h3, h4, h5, h6)": {
+      "break-after": "avoid",
+    },
+    ":where(img, figure, pre, table)": {
       "break-inside": "avoid",
     },
+    "a": {
+      "text-decoration": "underline",
+    },
   },
 };

package/src/index.js

@@ -23,13 +23,8 @@ export default plugin.withOptions((options = {}) => {
     const includeBase = resolveBool(options.base, true); // Default: true
     const includeExtra = resolveBool(options.extra, false); // Default: false
 
-    if (includeBase) {
-      addBase(baseStyles);
-    }
-
-    if (includeExtra) {
-      addBase(extraStyles);
-    }
+    includeBase && addBase(baseStyles);
+    includeExtra && addBase(extraStyles);
 
     // 2. Parse themes configuration
     let configThemes = options.themes;

package/src/theme-plugin.js

@@ -8,7 +8,7 @@ export default plugin.withOptions((options = {}) => {
     const isDefault = options.default ?? false;
     const isPrefersDark = options.prefersdark ?? false;
     const rootSelector = options.root ?? ":root";
-    // Nowa opcja: color-scheme (defaults to 'light' if not specified)
+    // Defaults to light scheme if not specified
     const colorScheme = options["color-scheme"] ?? "light";
 
     if (!themeName) {