clampography 2.0.0-beta.24 → 2.0.0-beta.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +6 -31
  3. package/css/clampography.css +93 -1
  4. package/css/clampography.min.css +1 -1
  5. package/css/theme.css +90 -0
  6. package/css/theme.min.css +1 -0
  7. package/package.json +1 -1
  8. package/src/convert.js +1 -1
  9. package/src/theme.js +34 -0
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Dawid Wąsowski
3
+ Copyright (c) 2026 Dawid Wąsowski
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of
6
6
  this software and associated documentation files (the "Software"), to deal in
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  > **WARNING**: Beta 2.0.0 is in development and currently unstable.
4
4
 
5
- **Clampography** is a pure CSS typography system designed mainly for blogs and
5
+ **Clampography** is a CSS typography system designed mainly for blogs and
6
6
  documentation sites. It uses the CSS `clamp()` function for fluid, responsive
7
7
  text scaling. Built as a [Tailwind CSS](https://tailwindcss.com/) plugin, it
8
8
  delivers production-ready typography with optional theming support. Basic
@@ -28,11 +28,9 @@ delivers production-ready typography that responds to
28
28
  [viewport](https://en.wikipedia.org/wiki/Viewport) changes automatically, while
29
29
  leaving all aesthetic choices to you. Add themes only if you need them.
30
30
 
31
-
32
-
33
31
  ## Requirements
34
32
 
35
- - **Tailwind CSS v4** (required)
33
+ - **[Tailwind CSS](https://tailwindcss.com/)** v4
36
34
  - A build tool like [Vite](https://vitejs.dev/),
37
35
  [Webpack](https://webpack.js.org/), or framework with CSS bundling like
38
36
  [Astro](https://astro.build/), [Next.js](https://nextjs.org/),
@@ -57,29 +55,6 @@ bun install clampography
57
55
  deno install npm:clampography
58
56
  ```
59
57
 
60
- ### Via CDN (Vanilla CSS)
61
-
62
- 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.
63
-
64
- #### Option 1: All-in-One (Recommended)
65
- This includes `base`, `extra`, `forms`, and `kbd` in a single file.
66
- ```html
67
- <link rel="stylesheet" href="https://unpkg.com/clampography/css/clampography.min.css" />
68
- <!-- or -->
69
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clampography/css/clampography.min.css" />
70
- ```
71
-
72
- #### Option 2: Modular
73
- If you only want specific modules, you can load them individually. Note that `base.min.css` is required for the fluid typography to work.
74
- ```html
75
- <!-- Required -->
76
- <link rel="stylesheet" href="https://unpkg.com/clampography/css/base.min.css" />
77
-
78
- <!-- Optional additions -->
79
- <link rel="stylesheet" href="https://unpkg.com/clampography/css/extra.min.css" />
80
- <link rel="stylesheet" href="https://unpkg.com/clampography/css/forms.min.css" />
81
- <link rel="stylesheet" href="https://unpkg.com/clampography/css/kbd.min.css" />
82
- ```
83
58
 
84
59
  ## Quick Start
85
60
 
@@ -173,14 +148,14 @@ Create your own theme with OKLCH colors:
173
148
 
174
149
  ## Learn More
175
150
 
176
- 📖 **[Complete Usage Guide](docs/usage.md)** - Detailed documentation:
151
+ 📖 **[Complete Usage Guide](docs/usage.md)** - Detailed documentation covering:
177
152
 
178
- - All configuration options
153
+ - Installation (NPM & CDN)
154
+ - Basic configuration options
179
155
  - Built-in themes
180
156
  - Creating custom themes
181
157
  - Scoped themes for widgets
182
- - Advanced scenarios
183
- - Tailwind utilities
158
+ - Form styles & Tailwind utilities
184
159
  - Troubleshooting
185
160
 
186
161
  ## Inspirations
package/css/clampography.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Clampography CSS Bundle
3
- * Contains: base.js, extra.js, forms.js, kbd.js
3
+ * Contains: base.js, theme.js, extra.js, forms.js, kbd.js
4
4
  */
5
5
 
6
6
  /* --- base.js --- */
@@ -460,6 +460,98 @@
460
460
  }
461
461
  }
462
462
 
463
+ /* --- theme.js --- */
464
+ @layer base {
465
+
466
+ :where(:root), [data-theme="light"] {
467
+ color-scheme: light;
468
+ --clampography-background: oklch(100% 0 0);
469
+ --clampography-border: oklch(92% 0.003 264);
470
+ --clampography-error: oklch(63% 0.22 27);
471
+ --clampography-heading: oklch(15% 0.02 264);
472
+ --clampography-info: oklch(63% 0.258 262);
473
+ --clampography-link: oklch(43% 0.19 264);
474
+ --clampography-muted: oklch(52% 0.014 258);
475
+ --clampography-primary: oklch(63% 0.258 262);
476
+ --clampography-secondary: oklch(55% 0.28 300);
477
+ --clampography-success: oklch(65% 0.17 165);
478
+ --clampography-surface: oklch(96% 0.003 264);
479
+ --clampography-text: oklch(31% 0.02 257);
480
+ --clampography-warning: oklch(72% 0.17 65);
481
+ }
482
+
483
+ @media (prefers-color-scheme: dark) {
484
+
485
+ :root {
486
+ color-scheme: dark;
487
+ --clampography-background: oklch(10% 0 0);
488
+ --clampography-border: oklch(31% 0.03 254);
489
+ --clampography-error: oklch(63% 0.22 27);
490
+ --clampography-heading: oklch(98% 0.003 264);
491
+ --clampography-info: oklch(72% 0.17 254);
492
+ --clampography-link: oklch(72% 0.17 254);
493
+ --clampography-muted: oklch(68% 0.024 254);
494
+ --clampography-primary: oklch(63% 0.258 262);
495
+ --clampography-secondary: oklch(63% 0.25 300);
496
+ --clampography-success: oklch(65% 0.17 165);
497
+ --clampography-surface: oklch(12% 0 0);
498
+ --clampography-text: oklch(95% 0 0);
499
+ --clampography-warning: oklch(72% 0.17 65);
500
+ }
501
+
502
+ [data-theme="dark"] {
503
+ color-scheme: dark;
504
+ --clampography-background: oklch(10% 0 0);
505
+ --clampography-border: oklch(31% 0.03 254);
506
+ --clampography-error: oklch(63% 0.22 27);
507
+ --clampography-heading: oklch(98% 0.003 264);
508
+ --clampography-info: oklch(72% 0.17 254);
509
+ --clampography-link: oklch(72% 0.17 254);
510
+ --clampography-muted: oklch(68% 0.024 254);
511
+ --clampography-primary: oklch(63% 0.258 262);
512
+ --clampography-secondary: oklch(63% 0.25 300);
513
+ --clampography-success: oklch(65% 0.17 165);
514
+ --clampography-surface: oklch(12% 0 0);
515
+ --clampography-text: oklch(95% 0 0);
516
+ --clampography-warning: oklch(72% 0.17 65);
517
+ }
518
+
519
+ [data-theme="light"] {
520
+ color-scheme: light;
521
+ --clampography-background: oklch(100% 0 0);
522
+ --clampography-border: oklch(92% 0.003 264);
523
+ --clampography-error: oklch(63% 0.22 27);
524
+ --clampography-heading: oklch(15% 0.02 264);
525
+ --clampography-info: oklch(63% 0.258 262);
526
+ --clampography-link: oklch(43% 0.19 264);
527
+ --clampography-muted: oklch(52% 0.014 258);
528
+ --clampography-primary: oklch(63% 0.258 262);
529
+ --clampography-secondary: oklch(55% 0.28 300);
530
+ --clampography-success: oklch(65% 0.17 165);
531
+ --clampography-surface: oklch(96% 0.003 264);
532
+ --clampography-text: oklch(31% 0.02 257);
533
+ --clampography-warning: oklch(72% 0.17 65);
534
+ }
535
+ }
536
+
537
+ [data-theme="dark"] {
538
+ color-scheme: dark;
539
+ --clampography-background: oklch(10% 0 0);
540
+ --clampography-border: oklch(31% 0.03 254);
541
+ --clampography-error: oklch(63% 0.22 27);
542
+ --clampography-heading: oklch(98% 0.003 264);
543
+ --clampography-info: oklch(72% 0.17 254);
544
+ --clampography-link: oklch(72% 0.17 254);
545
+ --clampography-muted: oklch(68% 0.024 254);
546
+ --clampography-primary: oklch(63% 0.258 262);
547
+ --clampography-secondary: oklch(63% 0.25 300);
548
+ --clampography-success: oklch(65% 0.17 165);
549
+ --clampography-surface: oklch(12% 0 0);
550
+ --clampography-text: oklch(95% 0 0);
551
+ --clampography-warning: oklch(72% 0.17 65);
552
+ }
553
+ }
554
+
463
555
  /* --- extra.js --- */
464
556
  @layer base {
465
557
 
package/css/clampography.min.css CHANGED
@@ -1 +1 @@
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}}@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);white-space:nowrap}: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 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}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root :where(meter, progress){accent-color:var(--clampography-primary);width:100%}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:1.6em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
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}}@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}@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);white-space:nowrap}: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 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}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root :where(meter, progress){accent-color:var(--clampography-primary);width:100%}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:1.6em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
package/css/theme.css ADDED
@@ -0,0 +1,90 @@
1
+ @layer base {
2
+
3
+ :where(:root), [data-theme="light"] {
4
+ color-scheme: light;
5
+ --clampography-background: oklch(100% 0 0);
6
+ --clampography-border: oklch(92% 0.003 264);
7
+ --clampography-error: oklch(63% 0.22 27);
8
+ --clampography-heading: oklch(15% 0.02 264);
9
+ --clampography-info: oklch(63% 0.258 262);
10
+ --clampography-link: oklch(43% 0.19 264);
11
+ --clampography-muted: oklch(52% 0.014 258);
12
+ --clampography-primary: oklch(63% 0.258 262);
13
+ --clampography-secondary: oklch(55% 0.28 300);
14
+ --clampography-success: oklch(65% 0.17 165);
15
+ --clampography-surface: oklch(96% 0.003 264);
16
+ --clampography-text: oklch(31% 0.02 257);
17
+ --clampography-warning: oklch(72% 0.17 65);
18
+ }
19
+
20
+ @media (prefers-color-scheme: dark) {
21
+
22
+ :root {
23
+ color-scheme: dark;
24
+ --clampography-background: oklch(10% 0 0);
25
+ --clampography-border: oklch(31% 0.03 254);
26
+ --clampography-error: oklch(63% 0.22 27);
27
+ --clampography-heading: oklch(98% 0.003 264);
28
+ --clampography-info: oklch(72% 0.17 254);
29
+ --clampography-link: oklch(72% 0.17 254);
30
+ --clampography-muted: oklch(68% 0.024 254);
31
+ --clampography-primary: oklch(63% 0.258 262);
32
+ --clampography-secondary: oklch(63% 0.25 300);
33
+ --clampography-success: oklch(65% 0.17 165);
34
+ --clampography-surface: oklch(12% 0 0);
35
+ --clampography-text: oklch(95% 0 0);
36
+ --clampography-warning: oklch(72% 0.17 65);
37
+ }
38
+
39
+ [data-theme="dark"] {
40
+ color-scheme: dark;
41
+ --clampography-background: oklch(10% 0 0);
42
+ --clampography-border: oklch(31% 0.03 254);
43
+ --clampography-error: oklch(63% 0.22 27);
44
+ --clampography-heading: oklch(98% 0.003 264);
45
+ --clampography-info: oklch(72% 0.17 254);
46
+ --clampography-link: oklch(72% 0.17 254);
47
+ --clampography-muted: oklch(68% 0.024 254);
48
+ --clampography-primary: oklch(63% 0.258 262);
49
+ --clampography-secondary: oklch(63% 0.25 300);
50
+ --clampography-success: oklch(65% 0.17 165);
51
+ --clampography-surface: oklch(12% 0 0);
52
+ --clampography-text: oklch(95% 0 0);
53
+ --clampography-warning: oklch(72% 0.17 65);
54
+ }
55
+
56
+ [data-theme="light"] {
57
+ color-scheme: light;
58
+ --clampography-background: oklch(100% 0 0);
59
+ --clampography-border: oklch(92% 0.003 264);
60
+ --clampography-error: oklch(63% 0.22 27);
61
+ --clampography-heading: oklch(15% 0.02 264);
62
+ --clampography-info: oklch(63% 0.258 262);
63
+ --clampography-link: oklch(43% 0.19 264);
64
+ --clampography-muted: oklch(52% 0.014 258);
65
+ --clampography-primary: oklch(63% 0.258 262);
66
+ --clampography-secondary: oklch(55% 0.28 300);
67
+ --clampography-success: oklch(65% 0.17 165);
68
+ --clampography-surface: oklch(96% 0.003 264);
69
+ --clampography-text: oklch(31% 0.02 257);
70
+ --clampography-warning: oklch(72% 0.17 65);
71
+ }
72
+ }
73
+
74
+ [data-theme="dark"] {
75
+ color-scheme: dark;
76
+ --clampography-background: oklch(10% 0 0);
77
+ --clampography-border: oklch(31% 0.03 254);
78
+ --clampography-error: oklch(63% 0.22 27);
79
+ --clampography-heading: oklch(98% 0.003 264);
80
+ --clampography-info: oklch(72% 0.17 254);
81
+ --clampography-link: oklch(72% 0.17 254);
82
+ --clampography-muted: oklch(68% 0.024 254);
83
+ --clampography-primary: oklch(63% 0.258 262);
84
+ --clampography-secondary: oklch(63% 0.25 300);
85
+ --clampography-success: oklch(65% 0.17 165);
86
+ --clampography-surface: oklch(12% 0 0);
87
+ --clampography-text: oklch(95% 0 0);
88
+ --clampography-warning: oklch(72% 0.17 65);
89
+ }
90
+ }
package/css/theme.min.css ADDED
@@ -0,0 +1 @@
1
+ @layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}
package/package.json CHANGED
@@ -65,5 +65,5 @@
65
65
  "test": "bun test"
66
66
  },
67
67
  "type": "module",
68
- "version": "2.0.0-beta.24"
68
+ "version": "2.0.0-beta.25"
69
69
  }
package/src/convert.js CHANGED
@@ -9,7 +9,7 @@ import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "fs
9
9
  import { basename, resolve } from "path";
10
10
 
11
11
  // Configuration
12
- const FILES_TO_CONVERT = ["base.js", "extra.js", "forms.js", "kbd.js"];
12
+ const FILES_TO_CONVERT = ["base.js", "theme.js", "extra.js", "forms.js", "kbd.js"];
13
13
  const OUTPUT_DIR = "css";
14
14
 
15
15
  // Options passed to the JS functions (simulating plugin config)
package/src/theme.js ADDED
@@ -0,0 +1,34 @@
1
+ import { themes } from "./themes.js";
2
+
3
+ /**
4
+ * CDN Theme Generator
5
+ * Extracts light/dark themes from themes.js and structures them
6
+ * for the Vanilla CSS build process.
7
+ */
8
+ export default (options = {}) => {
9
+ const root = options.root || ":root";
10
+ const themeStyles = {};
11
+
12
+ // 1. Default Theme (Light)
13
+ if (themes["light"]) {
14
+ // :where() lowers specificity so users can override it easily
15
+ themeStyles[`:where(${root}), [data-theme="light"]`] = themes["light"];
16
+ }
17
+
18
+ // 2. Dark Mode (prefers-color-scheme)
19
+ if (themes["dark"]) {
20
+ themeStyles["@media (prefers-color-scheme: dark)"] = {
21
+ // Default to dark if system prefers dark
22
+ [root]: themes["dark"],
23
+ // Keep data-theme="dark" inside media query for completeness
24
+ [`[data-theme="dark"]`]: themes["dark"],
25
+ // Allow overriding back to light even if system is dark
26
+ [`[data-theme="light"]`]: themes["light"]
27
+ };
28
+
29
+ // 3. Explicit Data Theme (Dark) - works regardless of system preference
30
+ themeStyles[`[data-theme="dark"]`] = themes["dark"];
31
+ }
32
+
33
+ return themeStyles;
34
+ };