clampography 2.0.0-beta.25 → 2.0.0-beta.26
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.
- package/css/base.css +7 -6
- package/css/base.min.css +1 -1
- package/css/clampography.css +90 -16
- package/css/clampography.min.css +1 -1
- package/css/extra.css +8 -7
- package/css/extra.min.css +1 -1
- package/css/forms.css +74 -2
- package/css/forms.min.css +1 -1
- package/css/kbd.css +1 -1
- package/css/kbd.min.css +1 -1
- package/package.json +5 -2
- package/src/base.js +7 -6
- package/src/extra.js +8 -7
- package/src/forms.js +87 -3
- package/src/kbd.js +1 -1
- package/src/themes.js +1377 -1
package/css/base.css
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
@layer base {
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--spacing-xs: clamp(0.
|
|
5
|
-
--spacing-sm: clamp(0.
|
|
6
|
-
--spacing-md: clamp(
|
|
7
|
-
--spacing-lg: clamp(
|
|
8
|
-
--spacing-xl: clamp(
|
|
4
|
+
--spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
|
|
5
|
+
--spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
|
|
6
|
+
--spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
|
|
7
|
+
--spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
|
|
8
|
+
--spacing-xl: clamp(1rem, 5vw, 3rem);
|
|
9
9
|
--list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
|
|
10
10
|
--scroll-offset: 5rem;
|
|
11
11
|
--font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
|
@@ -160,6 +160,7 @@
|
|
|
160
160
|
|
|
161
161
|
:root abbr[title] {
|
|
162
162
|
text-decoration: underline dotted;
|
|
163
|
+
text-underline-offset: 4px;
|
|
163
164
|
cursor: help;
|
|
164
165
|
}
|
|
165
166
|
|
|
@@ -333,7 +334,7 @@
|
|
|
333
334
|
:root fieldset {
|
|
334
335
|
margin-top: var(--spacing-md);
|
|
335
336
|
margin-bottom: var(--spacing-md);
|
|
336
|
-
padding: var(--spacing-
|
|
337
|
+
padding: var(--spacing-sm);
|
|
337
338
|
}
|
|
338
339
|
|
|
339
340
|
:root legend {
|
package/css/base.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{:root{--spacing-xs:clamp(0.
|
|
1
|
+
@layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 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;text-underline-offset:4px;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-sm)}: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}}
|
package/css/clampography.css
CHANGED
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
@layer base {
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
-
--spacing-xs: clamp(0.
|
|
11
|
-
--spacing-sm: clamp(0.
|
|
12
|
-
--spacing-md: clamp(
|
|
13
|
-
--spacing-lg: clamp(
|
|
14
|
-
--spacing-xl: clamp(
|
|
10
|
+
--spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
|
|
11
|
+
--spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
|
|
12
|
+
--spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
|
|
13
|
+
--spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
|
|
14
|
+
--spacing-xl: clamp(1rem, 5vw, 3rem);
|
|
15
15
|
--list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
|
|
16
16
|
--scroll-offset: 5rem;
|
|
17
17
|
--font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
|
@@ -166,6 +166,7 @@
|
|
|
166
166
|
|
|
167
167
|
:root abbr[title] {
|
|
168
168
|
text-decoration: underline dotted;
|
|
169
|
+
text-underline-offset: 4px;
|
|
169
170
|
cursor: help;
|
|
170
171
|
}
|
|
171
172
|
|
|
@@ -339,7 +340,7 @@
|
|
|
339
340
|
:root fieldset {
|
|
340
341
|
margin-top: var(--spacing-md);
|
|
341
342
|
margin-bottom: var(--spacing-md);
|
|
342
|
-
padding: var(--spacing-
|
|
343
|
+
padding: var(--spacing-sm);
|
|
343
344
|
}
|
|
344
345
|
|
|
345
346
|
:root legend {
|
|
@@ -605,7 +606,7 @@
|
|
|
605
606
|
background-color: var(--clampography-surface);
|
|
606
607
|
border: 1px solid var(--clampography-border);
|
|
607
608
|
border-radius: 0.375rem;
|
|
608
|
-
padding:
|
|
609
|
+
padding: var(--spacing-md);
|
|
609
610
|
}
|
|
610
611
|
|
|
611
612
|
:root table {
|
|
@@ -636,8 +637,8 @@
|
|
|
636
637
|
:root hr {
|
|
637
638
|
height: 1px;
|
|
638
639
|
border-width: 0;
|
|
639
|
-
margin-top:
|
|
640
|
-
margin-bottom:
|
|
640
|
+
margin-top: var(--spacing-xl);
|
|
641
|
+
margin-bottom: var(--spacing-xl);
|
|
641
642
|
background-color: var(--clampography-border);
|
|
642
643
|
}
|
|
643
644
|
|
|
@@ -645,7 +646,7 @@
|
|
|
645
646
|
border-left-width: 4px;
|
|
646
647
|
border-left-color: var(--clampography-primary);
|
|
647
648
|
background-color: var(--clampography-surface);
|
|
648
|
-
padding:
|
|
649
|
+
padding: var(--spacing-md);
|
|
649
650
|
border-radius: 0.25rem;
|
|
650
651
|
font-style: italic;
|
|
651
652
|
color: var(--clampography-heading);
|
|
@@ -666,16 +667,17 @@
|
|
|
666
667
|
:root details {
|
|
667
668
|
border: 1px solid var(--clampography-border);
|
|
668
669
|
border-radius: 0.375rem;
|
|
669
|
-
padding:
|
|
670
|
+
padding: var(--spacing-sm);
|
|
670
671
|
}
|
|
671
672
|
|
|
672
673
|
:root summary {
|
|
673
674
|
color: var(--clampography-heading);
|
|
675
|
+
border-bottom: 0px solid var(--clampography-border);
|
|
674
676
|
}
|
|
675
677
|
|
|
676
678
|
:root details[open] > summary {
|
|
677
|
-
border-bottom: 1px
|
|
678
|
-
padding-bottom:
|
|
679
|
+
border-bottom-width: 1px;
|
|
680
|
+
padding-bottom: var(--spacing-sm);
|
|
679
681
|
}
|
|
680
682
|
}
|
|
681
683
|
|
|
@@ -847,9 +849,81 @@
|
|
|
847
849
|
font-weight: 600;
|
|
848
850
|
}
|
|
849
851
|
|
|
850
|
-
:root
|
|
851
|
-
|
|
852
|
+
:root progress {
|
|
853
|
+
-webkit-appearance: none;
|
|
854
|
+
appearance: none;
|
|
855
|
+
width: 100%;
|
|
856
|
+
height: 1em;
|
|
857
|
+
background: transparent;
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
:root progress::-webkit-progress-bar {
|
|
861
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
:root progress::-webkit-progress-value {
|
|
865
|
+
background: var(--clampography-success);
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
:root progress::-moz-progress-bar {
|
|
869
|
+
background: var(--clampography-success);
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
:root meter {
|
|
873
|
+
-webkit-appearance: none;
|
|
874
|
+
appearance: none;
|
|
852
875
|
width: 100%;
|
|
876
|
+
height: 1em;
|
|
877
|
+
background: transparent;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
@supports (-moz-appearance: none) {
|
|
881
|
+
|
|
882
|
+
:root progress {
|
|
883
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
884
|
+
}
|
|
885
|
+
|
|
886
|
+
:root meter {
|
|
887
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
:root meter::-webkit-meter-inner-element {
|
|
892
|
+
display: flex;
|
|
893
|
+
align-items: stretch;
|
|
894
|
+
height: 1em;
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
:root meter::-webkit-meter-bar {
|
|
898
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
899
|
+
height: 100%;
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
:root meter::-webkit-meter-optimum-value {
|
|
903
|
+
background: var(--clampography-success);
|
|
904
|
+
height: 100%;
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
:root meter:-moz-meter-optimum::-moz-meter-bar {
|
|
908
|
+
background: var(--clampography-success);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
:root meter::-webkit-meter-suboptimum-value {
|
|
912
|
+
background: var(--clampography-warning);
|
|
913
|
+
height: 100%;
|
|
914
|
+
}
|
|
915
|
+
|
|
916
|
+
:root meter:-moz-meter-sub-optimum::-moz-meter-bar {
|
|
917
|
+
background: var(--clampography-warning);
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
:root meter::-webkit-meter-even-less-good-value {
|
|
921
|
+
background: var(--clampography-error);
|
|
922
|
+
height: 100%;
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|
926
|
+
background: var(--clampography-error);
|
|
853
927
|
}
|
|
854
928
|
}
|
|
855
929
|
|
|
@@ -859,7 +933,7 @@
|
|
|
859
933
|
:root kbd {
|
|
860
934
|
display: inline-block;
|
|
861
935
|
padding: 0.1em 0.45em;
|
|
862
|
-
min-width:
|
|
936
|
+
min-width: 2em;
|
|
863
937
|
text-align: center;
|
|
864
938
|
font-size: 0.8em;
|
|
865
939
|
font-weight: 700;
|
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{: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)}}
|
|
1
|
+
@layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 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;text-underline-offset:4px;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-sm)}: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:var(--spacing-md)}: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:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);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:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}@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 progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;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/extra.css
CHANGED
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
background-color: var(--clampography-surface);
|
|
51
51
|
border: 1px solid var(--clampography-border);
|
|
52
52
|
border-radius: 0.375rem;
|
|
53
|
-
padding:
|
|
53
|
+
padding: var(--spacing-md);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
:root table {
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
:root hr {
|
|
82
82
|
height: 1px;
|
|
83
83
|
border-width: 0;
|
|
84
|
-
margin-top:
|
|
85
|
-
margin-bottom:
|
|
84
|
+
margin-top: var(--spacing-xl);
|
|
85
|
+
margin-bottom: var(--spacing-xl);
|
|
86
86
|
background-color: var(--clampography-border);
|
|
87
87
|
}
|
|
88
88
|
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
border-left-width: 4px;
|
|
91
91
|
border-left-color: var(--clampography-primary);
|
|
92
92
|
background-color: var(--clampography-surface);
|
|
93
|
-
padding:
|
|
93
|
+
padding: var(--spacing-md);
|
|
94
94
|
border-radius: 0.25rem;
|
|
95
95
|
font-style: italic;
|
|
96
96
|
color: var(--clampography-heading);
|
|
@@ -111,15 +111,16 @@
|
|
|
111
111
|
:root details {
|
|
112
112
|
border: 1px solid var(--clampography-border);
|
|
113
113
|
border-radius: 0.375rem;
|
|
114
|
-
padding:
|
|
114
|
+
padding: var(--spacing-sm);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
:root summary {
|
|
118
118
|
color: var(--clampography-heading);
|
|
119
|
+
border-bottom: 0px solid var(--clampography-border);
|
|
119
120
|
}
|
|
120
121
|
|
|
121
122
|
:root details[open] > summary {
|
|
122
|
-
border-bottom: 1px
|
|
123
|
-
padding-bottom:
|
|
123
|
+
border-bottom-width: 1px;
|
|
124
|
+
padding-bottom: var(--spacing-sm);
|
|
124
125
|
}
|
|
125
126
|
}
|
package/css/extra.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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);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:
|
|
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);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:var(--spacing-md)}: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:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);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:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}
|
package/css/forms.css
CHANGED
|
@@ -165,8 +165,80 @@
|
|
|
165
165
|
font-weight: 600;
|
|
166
166
|
}
|
|
167
167
|
|
|
168
|
-
:root
|
|
169
|
-
|
|
168
|
+
:root progress {
|
|
169
|
+
-webkit-appearance: none;
|
|
170
|
+
appearance: none;
|
|
170
171
|
width: 100%;
|
|
172
|
+
height: 1em;
|
|
173
|
+
background: transparent;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:root progress::-webkit-progress-bar {
|
|
177
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
:root progress::-webkit-progress-value {
|
|
181
|
+
background: var(--clampography-success);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
:root progress::-moz-progress-bar {
|
|
185
|
+
background: var(--clampography-success);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
:root meter {
|
|
189
|
+
-webkit-appearance: none;
|
|
190
|
+
appearance: none;
|
|
191
|
+
width: 100%;
|
|
192
|
+
height: 1em;
|
|
193
|
+
background: transparent;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
@supports (-moz-appearance: none) {
|
|
197
|
+
|
|
198
|
+
:root progress {
|
|
199
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
:root meter {
|
|
203
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
:root meter::-webkit-meter-inner-element {
|
|
208
|
+
display: flex;
|
|
209
|
+
align-items: stretch;
|
|
210
|
+
height: 1em;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
:root meter::-webkit-meter-bar {
|
|
214
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
215
|
+
height: 100%;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
:root meter::-webkit-meter-optimum-value {
|
|
219
|
+
background: var(--clampography-success);
|
|
220
|
+
height: 100%;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
:root meter:-moz-meter-optimum::-moz-meter-bar {
|
|
224
|
+
background: var(--clampography-success);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
:root meter::-webkit-meter-suboptimum-value {
|
|
228
|
+
background: var(--clampography-warning);
|
|
229
|
+
height: 100%;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
:root meter:-moz-meter-sub-optimum::-moz-meter-bar {
|
|
233
|
+
background: var(--clampography-warning);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
:root meter::-webkit-meter-even-less-good-value {
|
|
237
|
+
background: var(--clampography-error);
|
|
238
|
+
height: 100%;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|
242
|
+
background: var(--clampography-error);
|
|
171
243
|
}
|
|
172
244
|
}
|
package/css/forms.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@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 :
|
|
1
|
+
@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 progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}
|
package/css/kbd.css
CHANGED
package/css/kbd.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:
|
|
1
|
+
@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;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/package.json
CHANGED
|
@@ -62,8 +62,11 @@
|
|
|
62
62
|
},
|
|
63
63
|
"scripts": {
|
|
64
64
|
"build": "bun src/convert.js",
|
|
65
|
-
"test": "bun test"
|
|
65
|
+
"test": "bun test",
|
|
66
|
+
"dev:css": "bunx @tailwindcss/cli -i ./dev/input.css -o ./dev/output.css --watch",
|
|
67
|
+
"dev:server": "bun run dev/server.js",
|
|
68
|
+
"dev": "bun run dev/server.js"
|
|
66
69
|
},
|
|
67
70
|
"type": "module",
|
|
68
|
-
"version": "2.0.0-beta.
|
|
71
|
+
"version": "2.0.0-beta.26"
|
|
69
72
|
}
|
package/src/base.js
CHANGED
|
@@ -34,11 +34,11 @@ export default (options = {}) => {
|
|
|
34
34
|
return {
|
|
35
35
|
// ROOT CONFIGURATION
|
|
36
36
|
[root]: {
|
|
37
|
-
"--spacing-xs": "clamp(0.
|
|
38
|
-
"--spacing-sm": "clamp(0.
|
|
39
|
-
"--spacing-md": "clamp(
|
|
40
|
-
"--spacing-lg": "clamp(
|
|
41
|
-
"--spacing-xl": "clamp(
|
|
37
|
+
"--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
|
|
38
|
+
"--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
|
|
39
|
+
"--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
|
|
40
|
+
"--spacing-lg": "clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem)",
|
|
41
|
+
"--spacing-xl": "clamp(1rem, 5vw, 3rem)",
|
|
42
42
|
"--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
|
|
43
43
|
"--scroll-offset": "5rem",
|
|
44
44
|
"--font-family-base":
|
|
@@ -202,6 +202,7 @@ export default (options = {}) => {
|
|
|
202
202
|
|
|
203
203
|
[scope("abbr[title]")]: {
|
|
204
204
|
"text-decoration": "underline dotted",
|
|
205
|
+
"text-underline-offset": "4px",
|
|
205
206
|
cursor: "help",
|
|
206
207
|
},
|
|
207
208
|
|
|
@@ -386,7 +387,7 @@ export default (options = {}) => {
|
|
|
386
387
|
[scope("fieldset")]: {
|
|
387
388
|
"margin-top": "var(--spacing-md)",
|
|
388
389
|
"margin-bottom": "var(--spacing-md)",
|
|
389
|
-
padding: "var(--spacing-
|
|
390
|
+
padding: "var(--spacing-sm)",
|
|
390
391
|
},
|
|
391
392
|
|
|
392
393
|
[scope("legend")]: {
|
package/src/extra.js
CHANGED
|
@@ -87,7 +87,7 @@ export default (options = {}) => {
|
|
|
87
87
|
"background-color": "var(--clampography-surface)",
|
|
88
88
|
"border": "1px solid var(--clampography-border)",
|
|
89
89
|
"border-radius": "0.375rem",
|
|
90
|
-
"padding": "
|
|
90
|
+
"padding": "var(--spacing-md)",
|
|
91
91
|
},
|
|
92
92
|
|
|
93
93
|
// Tables
|
|
@@ -121,8 +121,8 @@ export default (options = {}) => {
|
|
|
121
121
|
[scope("hr")]: {
|
|
122
122
|
"height": "1px",
|
|
123
123
|
"border-width": "0",
|
|
124
|
-
"margin-top": "
|
|
125
|
-
"margin-bottom": "
|
|
124
|
+
"margin-top": "var(--spacing-xl)",
|
|
125
|
+
"margin-bottom": "var(--spacing-xl)",
|
|
126
126
|
"background-color": "var(--clampography-border)",
|
|
127
127
|
},
|
|
128
128
|
|
|
@@ -131,7 +131,7 @@ export default (options = {}) => {
|
|
|
131
131
|
"border-left-width": "4px",
|
|
132
132
|
"border-left-color": "var(--clampography-primary)",
|
|
133
133
|
"background-color": "var(--clampography-surface)",
|
|
134
|
-
"padding": "
|
|
134
|
+
"padding": "var(--spacing-md)",
|
|
135
135
|
"border-radius": "0.25rem",
|
|
136
136
|
"font-style": "italic",
|
|
137
137
|
"color": "var(--clampography-heading)",
|
|
@@ -155,16 +155,17 @@ export default (options = {}) => {
|
|
|
155
155
|
[scope("details")]: {
|
|
156
156
|
"border": "1px solid var(--clampography-border)",
|
|
157
157
|
"border-radius": "0.375rem",
|
|
158
|
-
"padding": "
|
|
158
|
+
"padding": "var(--spacing-sm)",
|
|
159
159
|
},
|
|
160
160
|
|
|
161
161
|
[scope("summary")]: {
|
|
162
162
|
"color": "var(--clampography-heading)",
|
|
163
|
+
"border-bottom": "0px solid var(--clampography-border)",
|
|
163
164
|
},
|
|
164
165
|
|
|
165
166
|
[scope("details[open] > summary")]: {
|
|
166
|
-
"border-bottom": "1px
|
|
167
|
-
"padding-bottom": "
|
|
167
|
+
"border-bottom-width": "1px",
|
|
168
|
+
"padding-bottom": "var(--spacing-sm)",
|
|
168
169
|
},
|
|
169
170
|
};
|
|
170
171
|
};
|