clampography 2.0.0-beta.23 → 2.0.0-beta.24

package/LICENSE

@@ -1,20 +1,20 @@
-MIT License
-
-Copyright (c) 2025 Dawid Wąsowski
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Dawid Wąsowski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -2,19 +2,21 @@
 
 > **WARNING**: Beta 2.0.0 is in development and currently unstable.
 
-**Clampography** is a pure CSS typography system that uses the
-[clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
-function for fluid, responsive text scaling. Built as a
-[Tailwind CSS](https://tailwindcss.com/) plugin, it delivers production-ready
-typography with optional theming support. With
-[94% global browser support](https://caniuse.com/css-math-functions), it works
-on nearly all modern devices.
+**Clampography** is a pure CSS typography system designed mainly for blogs and
+documentation sites. It uses the CSS `clamp()` function for fluid, responsive
+text scaling. Built as a [Tailwind CSS](https://tailwindcss.com/) plugin, it
+delivers production-ready typography with optional theming support. Basic
+features work in about 95% of browsers using standard CSS
+[clamp()](https://caniuse.com/css-math-functions). When you enable Themes with
+[oklch()](https://caniuse.com/wf-oklab) colors, browser support decreases to
+about 92%.
 
 - **Typography first:** Fluid, responsive text scaling without any styling
 - **Structure only:** Manages size, spacing, weight, and font-family
 - **Smart scaling:** Contextual elements use `em` (relative), blocks use
   `clamp()` (fluid)
-- **Optional theming:** Built-in light/dark themes or create your own with OKLCH
+- **Optional theming:** Built-in light/dark themes or create your own with
+  [OKLCH](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch)
   colors
 
 ## The purpose
@@ -26,8 +28,7 @@ delivers production-ready typography that responds to
 [viewport](https://en.wikipedia.org/wiki/Viewport) changes automatically, while
 leaving all aesthetic choices to you. Add themes only if you need them.
 
-Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
-it looks.
+
 
 ## Requirements
 
@@ -40,6 +41,8 @@ it looks.
 
 ## Installation
 
+### Via Package Manager (Tailwind Plugin)
+
 ```bash
 # Install with NPM
 npm install clampography
@@ -54,6 +57,30 @@ bun install clampography
 deno install npm:clampography
 ```
 
+### Via CDN (Vanilla CSS)
+
+If you aren't using Tailwind CSS, you can drop the pre-built stylesheet into your HTML to get all base typography, extra styles, forms, and keyboard key styling instantly.
+
+#### Option 1: All-in-One (Recommended)
+This includes `base`, `extra`, `forms`, and `kbd` in a single file.
+```html
+<link rel="stylesheet" href="https://unpkg.com/clampography/css/clampography.min.css" />
+<!-- or -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clampography/css/clampography.min.css" />
+```
+
+#### Option 2: Modular
+If you only want specific modules, you can load them individually. Note that `base.min.css` is required for the fluid typography to work.
+```html
+<!-- Required -->
+<link rel="stylesheet" href="https://unpkg.com/clampography/css/base.min.css" />
+
+<!-- Optional additions -->
+<link rel="stylesheet" href="https://unpkg.com/clampography/css/extra.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/clampography/css/forms.min.css" />
+<link rel="stylesheet" href="https://unpkg.com/clampography/css/kbd.min.css" />
+```
+
 ## Quick Start
 
 ### Typography Only
@@ -67,7 +94,7 @@ Load just the typography system without any colors:
 
 **Result:**
 
-- ✅ Fluid typography (headings, paragraphs, lists)
+- ✅ Fluid typography (headings, paragraphs, lists, etc.)
 - ✅ Responsive spacing system
 - ✅ Structural base styles
 - ❌ No colors, borders, or decorations
@@ -88,7 +115,7 @@ Add automatic light/dark theming:
 ```css
 @import "tailwindcss";
 @plugin "clampography" {
-  themes: all; /* Loads light, dark, retro, and cyberpunk */
+  themes: all; /* Loads all built-in themes */
 }
 ```
 
@@ -136,6 +163,8 @@ Create your own theme with OKLCH colors:
   themes: "all" | "light, dark" | false;  /* Load themes (optional) */
   base: true | false;                     /* Typography styles (default: true) */
   extra: true | false;                    /* Enhanced styling (default: false) */
+  forms: true | false;                    /* Styled form elements (default: false) */
+  kbd: true | false;                      /* 3D keyboard key effect on <kbd> (default: false) */
   prefix: "clampography" | false;         /* Utility class prefix */
   root: ":root" | "#app";                 /* Scope to element */
   logs: true | false;                     /* Console output */
@@ -144,16 +173,22 @@ Create your own theme with OKLCH colors:
 
 ## Learn More
 
-📖 **[Complete Usage Guide](USAGE.md)** - Detailed documentation:
+📖 **[Complete Usage Guide](docs/usage.md)** - Detailed documentation:
 
 - All configuration options
-- Built-in themes (light, dark, retro, cyberpunk)
+- Built-in themes
 - Creating custom themes
 - Scoped themes for widgets
 - Advanced scenarios
 - Tailwind utilities
 - Troubleshooting
 
+## Inspirations
+
+Two main inspirations behind this project were:
+- **daisyUI** created by [Pouya Saadeghi](https://saadeghi.com/)
+- The official **Typography** plugin for Tailwind CSS: [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)
+
 ## License
 
-MIT
+[MIT](LICENSE)

package/{src/css → css}/base.css

@@ -6,6 +6,7 @@
   --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);
+  --list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
   --scroll-offset: 5rem;
   --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;
@@ -213,29 +214,38 @@
 :root :where(ul, ol) {
   list-style: none;
   margin-bottom: var(--spacing-md);
-  padding-left: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
+  padding-left: var(--list-indent);
 }
 
 :root li {
   position: relative;
-  padding-left: 0.375em;
 }
 
 :root li + li {
   margin-top: var(--spacing-xs);
 }
 
-:root li > ul, :root li > ol {
-  margin-top: var(--spacing-xs);
+:root li > :where(p, dl, figure, table, pre) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:root li > blockquote {
+  margin-top: var(--spacing-sm);
   margin-bottom: var(--spacing-sm);
-  padding-left: var(--spacing-md);
+}
+
+:root li > :where(ul, ol) {
+  margin-top: var(--spacing-xs);
+  margin-bottom: 0;
 }
 
 :root ul > li::before {
   content: '';
   position: absolute;
-  left: -1.125em;
-  top: calc(0.875em - 0.1875em);
+  right: 100%;
+  margin-right: 0.75em;
+  top: 0.65em;
   width: 0.375em;
   height: 0.375em;
   background-color: currentColor;
@@ -253,10 +263,11 @@
 :root ol > li::before {
   content: counter(list-counter) '.';
   position: absolute;
-  left: -2.5em;
-  width: 1.75em;
-  text-align: right;
+  right: 100%;
+  margin-right: 0.5em;
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
   color: currentColor;
 }
 
@@ -305,6 +316,20 @@
   border-radius: 0;
 }
 
+:root input, :root button, :root textarea, :root select, :root optgroup {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: inherit;
+}
+
+:root textarea {
+  line-height: 1.5;
+}
+
+:root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
+  cursor: pointer;
+}
+
 :root fieldset {
   margin-top: var(--spacing-md);
   margin-bottom: var(--spacing-md);
@@ -332,20 +357,6 @@
   vertical-align: middle;
 }
 
-:root input, :root button, :root textarea, :root select, :root optgroup {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: inherit;
-}
-
-:root textarea {
-  line-height: 1.5;
-}
-
-:root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
-  cursor: pointer;
-}
-
 :root :where(img, video, canvas, audio, iframe, svg) {
   max-width: 100%;
   height: auto;

package/css/base.min.css

@@ -0,0 +1 @@
+@layer base{:root{--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);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--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;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root 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)}:root 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)}:root 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)}:root 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)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-md)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}:root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}