@pinfold/css 0.1.0 → 0.2.0
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/README.md +3 -2
- package/dist/accordion.css +76 -178
- package/dist/all.css +118 -370
- package/dist/core.css +12 -116
- package/dist/packs.css +30 -76
- package/dist/reset.css +0 -22
- package/dist/shadcn.css +0 -15
- package/dist/tokens.css +12 -94
- package/package.json +1 -1
package/dist/core.css
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
/* Pinfold — scoped reset. Applies only inside `.pinfold`, never to the host app.
|
|
2
|
-
A library that resets the page is a library that fights its host. */
|
|
3
1
|
|
|
4
2
|
@layer pinfold.reset {
|
|
5
|
-
|
|
6
3
|
.pinfold,
|
|
7
4
|
.pinfold *,
|
|
8
5
|
.pinfold *::before,
|
|
9
6
|
.pinfold *::after {
|
|
10
7
|
box-sizing: border-box;
|
|
11
8
|
}
|
|
12
|
-
|
|
13
9
|
.pinfold {
|
|
14
10
|
font-family: var(--pinfold-font-sans);
|
|
15
11
|
font-size: var(--pinfold-text-md);
|
|
@@ -18,55 +14,42 @@
|
|
|
18
14
|
-webkit-font-smoothing: antialiased;
|
|
19
15
|
-moz-osx-font-smoothing: grayscale;
|
|
20
16
|
text-rendering: optimizeLegibility;
|
|
21
|
-
/* Proportional digits jump as numbers change; tabular ones do not. */
|
|
22
17
|
font-variant-numeric: tabular-nums;
|
|
23
18
|
}
|
|
24
|
-
|
|
25
19
|
.pinfold :where(button, input, select, textarea) {
|
|
26
20
|
font: inherit;
|
|
27
21
|
color: inherit;
|
|
28
22
|
letter-spacing: inherit;
|
|
29
23
|
margin: 0;
|
|
30
24
|
}
|
|
31
|
-
|
|
32
25
|
.pinfold :where(button) {
|
|
33
26
|
background: none;
|
|
34
27
|
border: 0;
|
|
35
28
|
cursor: pointer;
|
|
36
|
-
/* Kills the 300ms tap delay and the grey flash on touch devices. */
|
|
37
29
|
touch-action: manipulation;
|
|
38
30
|
-webkit-tap-highlight-color: transparent;
|
|
39
31
|
}
|
|
40
|
-
|
|
41
32
|
.pinfold :where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) {
|
|
42
33
|
margin: 0;
|
|
43
34
|
font-size: inherit;
|
|
44
35
|
font-weight: inherit;
|
|
45
36
|
}
|
|
46
|
-
|
|
47
37
|
.pinfold :where(img, svg, video, canvas) {
|
|
48
38
|
display: block;
|
|
49
39
|
max-width: 100%;
|
|
50
40
|
}
|
|
51
|
-
|
|
52
41
|
.pinfold :where(svg) {
|
|
53
42
|
flex: none;
|
|
54
43
|
}
|
|
55
|
-
|
|
56
44
|
.pinfold ::selection {
|
|
57
45
|
background: var(--pinfold-color-selection);
|
|
58
46
|
}
|
|
59
|
-
|
|
60
|
-
/* Two-tone focus ring, visible on any surface. `outline` stays as the
|
|
61
|
-
forced-colors fallback since box-shadow is dropped in that mode. */
|
|
62
47
|
.pinfold :where(:focus-visible) {
|
|
63
48
|
outline: var(--pinfold-focus-width) solid transparent;
|
|
64
49
|
outline-offset: var(--pinfold-focus-offset);
|
|
65
50
|
box-shadow: var(--pinfold-focus-ring);
|
|
66
51
|
border-radius: var(--pinfold-radius-xs);
|
|
67
52
|
}
|
|
68
|
-
|
|
69
|
-
/* Scrollbars inside Pinfold surfaces follow the palette instead of the OS. */
|
|
70
53
|
.pinfold :where(*) {
|
|
71
54
|
scrollbar-width: thin;
|
|
72
55
|
scrollbar-color: var(--pinfold-color-border-strong) transparent;
|
|
@@ -84,7 +67,6 @@
|
|
|
84
67
|
.pinfold :where(*)::-webkit-scrollbar-track {
|
|
85
68
|
background: transparent;
|
|
86
69
|
}
|
|
87
|
-
|
|
88
70
|
@media (prefers-reduced-motion: reduce) {
|
|
89
71
|
.pinfold,
|
|
90
72
|
.pinfold * {
|
|
@@ -94,9 +76,6 @@
|
|
|
94
76
|
scroll-behavior: auto !important;
|
|
95
77
|
}
|
|
96
78
|
}
|
|
97
|
-
|
|
98
|
-
/* Forced colors (Windows High Contrast): the OS owns colour, so drop our
|
|
99
|
-
decoration and let system colours through. */
|
|
100
79
|
@media (forced-colors: active) {
|
|
101
80
|
.pinfold :where(:focus-visible) {
|
|
102
81
|
outline-color: Highlight;
|
|
@@ -106,28 +85,12 @@
|
|
|
106
85
|
forced-color-adjust: none;
|
|
107
86
|
}
|
|
108
87
|
}
|
|
109
|
-
|
|
110
88
|
}
|
|
111
89
|
|
|
112
|
-
/* Pinfold — design tokens.
|
|
113
|
-
Single source of truth. Components style themselves only through these vars,
|
|
114
|
-
so a palette swap, a dark-mode flip and a consumer override all work through
|
|
115
|
-
the same mechanism instead of three competing ones.
|
|
116
|
-
|
|
117
|
-
Colour is authored in OKLCH for perceptual evenness. `npx pinfold theme`
|
|
118
|
-
regenerates the ramps and also writes sRGB hex fallbacks for browsers
|
|
119
|
-
without OKLCH support. */
|
|
120
90
|
|
|
121
|
-
/* Everything ships inside the `pinfold` cascade layer. Unlayered CSS — including
|
|
122
|
-
every Tailwind utility — beats a layered rule regardless of source order or
|
|
123
|
-
specificity, so `className="px-6"` just works with no `!important` and no
|
|
124
|
-
plugin. */
|
|
125
91
|
@layer pinfold.tokens {
|
|
126
|
-
|
|
127
92
|
:root {
|
|
128
93
|
color-scheme: light dark;
|
|
129
|
-
|
|
130
|
-
/* ---------------------------------------------------------------- ramps */
|
|
131
94
|
--pinfold-primary-50: oklch(0.977 0.014 274);
|
|
132
95
|
--pinfold-primary-100: oklch(0.946 0.033 274);
|
|
133
96
|
--pinfold-primary-200: oklch(0.902 0.063 274);
|
|
@@ -139,14 +102,11 @@
|
|
|
139
102
|
--pinfold-primary-800: oklch(0.432 0.181 274);
|
|
140
103
|
--pinfold-primary-900: oklch(0.380 0.146 274);
|
|
141
104
|
--pinfold-primary-950: oklch(0.283 0.101 274);
|
|
142
|
-
|
|
143
|
-
/* `accent` defaults to the brand ramp; the CLI can give it its own hue. */
|
|
144
105
|
--pinfold-accent-300: var(--pinfold-primary-300);
|
|
145
106
|
--pinfold-accent-400: var(--pinfold-primary-400);
|
|
146
107
|
--pinfold-accent-500: var(--pinfold-primary-500);
|
|
147
108
|
--pinfold-accent-600: var(--pinfold-primary-600);
|
|
148
109
|
--pinfold-accent-700: var(--pinfold-primary-700);
|
|
149
|
-
|
|
150
110
|
--pinfold-neutral-50: oklch(0.985 0.002 274);
|
|
151
111
|
--pinfold-neutral-100: oklch(0.967 0.003 274);
|
|
152
112
|
--pinfold-neutral-200: oklch(0.928 0.006 274);
|
|
@@ -158,66 +118,48 @@
|
|
|
158
118
|
--pinfold-neutral-800: oklch(0.279 0.023 274);
|
|
159
119
|
--pinfold-neutral-900: oklch(0.210 0.021 274);
|
|
160
120
|
--pinfold-neutral-950: oklch(0.145 0.017 274);
|
|
161
|
-
|
|
162
121
|
--pinfold-success-100: oklch(0.946 0.033 158);
|
|
163
122
|
--pinfold-success-300: oklch(0.828 0.111 158);
|
|
164
123
|
--pinfold-success-500: oklch(0.606 0.201 158);
|
|
165
124
|
--pinfold-success-700: oklch(0.491 0.216 158);
|
|
166
125
|
--pinfold-success-900: oklch(0.380 0.146 158);
|
|
167
|
-
|
|
168
126
|
--pinfold-warning-100: oklch(0.946 0.033 78);
|
|
169
127
|
--pinfold-warning-300: oklch(0.828 0.111 78);
|
|
170
128
|
--pinfold-warning-500: oklch(0.606 0.201 78);
|
|
171
129
|
--pinfold-warning-700: oklch(0.491 0.216 78);
|
|
172
130
|
--pinfold-warning-900: oklch(0.380 0.146 78);
|
|
173
|
-
|
|
174
131
|
--pinfold-danger-100: oklch(0.946 0.033 27);
|
|
175
132
|
--pinfold-danger-300: oklch(0.828 0.111 27);
|
|
176
133
|
--pinfold-danger-500: oklch(0.606 0.201 27);
|
|
177
134
|
--pinfold-danger-700: oklch(0.491 0.216 27);
|
|
178
135
|
--pinfold-danger-900: oklch(0.380 0.146 27);
|
|
179
|
-
|
|
180
136
|
--pinfold-info-100: oklch(0.946 0.033 245);
|
|
181
137
|
--pinfold-info-300: oklch(0.828 0.111 245);
|
|
182
138
|
--pinfold-info-500: oklch(0.606 0.201 245);
|
|
183
139
|
--pinfold-info-700: oklch(0.491 0.216 245);
|
|
184
140
|
--pinfold-info-900: oklch(0.380 0.146 245);
|
|
185
|
-
|
|
186
|
-
/* ------------------------------------------------------------ semantics */
|
|
187
141
|
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
188
142
|
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
189
143
|
--pinfold-color-surface: oklch(1 0 0);
|
|
190
144
|
--pinfold-color-surface-raised: oklch(1 0 0);
|
|
191
145
|
--pinfold-color-surface-sunken: var(--pinfold-neutral-100);
|
|
192
|
-
|
|
193
|
-
/* Interaction surfaces carry a trace of the brand, so hover reads as
|
|
194
|
-
"this control is alive" rather than "this control turned grey". */
|
|
195
146
|
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
196
147
|
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
197
148
|
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
198
|
-
|
|
199
149
|
--pinfold-color-border: var(--pinfold-neutral-200);
|
|
200
150
|
--pinfold-color-border-strong: var(--pinfold-neutral-300);
|
|
201
151
|
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
202
|
-
|
|
203
152
|
--pinfold-color-text: var(--pinfold-neutral-900);
|
|
204
153
|
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
205
154
|
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
206
155
|
--pinfold-color-text-disabled: var(--pinfold-neutral-400);
|
|
207
|
-
|
|
208
|
-
--pinfold-color-accent: var(--pinfold-
|
|
209
|
-
--pinfold-color-accent-hover: var(--pinfold-accent-700);
|
|
156
|
+
--pinfold-color-accent: var(--pinfold-primary-600);
|
|
157
|
+
--pinfold-color-accent-hover: var(--pinfold-primary-700);
|
|
210
158
|
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
211
159
|
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
212
|
-
|
|
213
|
-
--pinfold-color-ring: var(--pinfold-accent-500);
|
|
160
|
+
--pinfold-color-ring: var(--pinfold-primary-500);
|
|
214
161
|
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
215
162
|
--pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
|
|
216
|
-
|
|
217
|
-
/* --------------------------------------------------------------- depth */
|
|
218
|
-
/* Shadows are tinted with the neutral ramp, never neutral black — untinted
|
|
219
|
-
black over a tinted surface reads as dirt. Two layers: a tight contact
|
|
220
|
-
shadow plus a wide ambient one. */
|
|
221
163
|
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
222
164
|
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
223
165
|
--pinfold-shadow-sm:
|
|
@@ -232,30 +174,17 @@
|
|
|
232
174
|
--pinfold-shadow-xl:
|
|
233
175
|
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
234
176
|
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
|
|
235
|
-
|
|
236
|
-
/* Hairline highlight along the top edge of a raised surface. The detail that
|
|
237
|
-
separates "a box" from "a surface". */
|
|
238
177
|
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
|
|
239
|
-
|
|
240
|
-
/* Hooks for style packs (packs.css). Defaults are neutral: no blur, no texture. */
|
|
241
178
|
--pinfold-border-width: 1px;
|
|
242
179
|
--pinfold-backdrop: none;
|
|
243
180
|
--pinfold-texture: none;
|
|
244
|
-
|
|
245
|
-
/* ---------------------------------------------------------------- focus */
|
|
246
181
|
--pinfold-focus-width: 2px;
|
|
247
182
|
--pinfold-focus-offset: 2px;
|
|
248
|
-
/* Two-tone ring: a gap in the page colour, then the ring. Stays visible on
|
|
249
|
-
any surface, including one that matches the ring hue. */
|
|
250
183
|
--pinfold-focus-ring:
|
|
251
184
|
0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
252
185
|
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
253
|
-
|
|
254
|
-
/* ---------------------------------------------------------------- shape */
|
|
255
186
|
--pinfold-radius-scale: 1;
|
|
256
187
|
--pinfold-radius-full: 9999px;
|
|
257
|
-
|
|
258
|
-
/* -------------------------------------------------------------- spacing */
|
|
259
188
|
--pinfold-space-1: 0.25rem;
|
|
260
189
|
--pinfold-space-2: 0.5rem;
|
|
261
190
|
--pinfold-space-3: 0.75rem;
|
|
@@ -264,12 +193,9 @@
|
|
|
264
193
|
--pinfold-space-6: 1.5rem;
|
|
265
194
|
--pinfold-space-8: 2rem;
|
|
266
195
|
--pinfold-space-10: 2.5rem;
|
|
267
|
-
|
|
268
|
-
/* ----------------------------------------------------------- typography */
|
|
269
196
|
--pinfold-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
270
197
|
"Helvetica Neue", Arial, sans-serif;
|
|
271
198
|
--pinfold-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
272
|
-
/* Fluid type: grows gently with the viewport, never below the floor or past the cap. */
|
|
273
199
|
--pinfold-text-xs: 0.75rem;
|
|
274
200
|
--pinfold-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
|
|
275
201
|
--pinfold-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
|
|
@@ -280,23 +206,16 @@
|
|
|
280
206
|
--pinfold-weight-normal: 400;
|
|
281
207
|
--pinfold-weight-medium: 500;
|
|
282
208
|
--pinfold-weight-semibold: 600;
|
|
283
|
-
/* Larger text needs tighter tracking to look optically even. */
|
|
284
209
|
--pinfold-tracking-tight: -0.011em;
|
|
285
210
|
--pinfold-tracking-normal: 0em;
|
|
286
211
|
--pinfold-tracking-wide: 0.02em;
|
|
287
|
-
|
|
288
|
-
/* --------------------------------------------------------------- motion */
|
|
289
212
|
--pinfold-duration-fast: 120ms;
|
|
290
213
|
--pinfold-duration-md: 200ms;
|
|
291
214
|
--pinfold-duration-slow: 320ms;
|
|
292
|
-
/* Decelerating curve — fast start, soft landing. Reads as responsive. */
|
|
293
215
|
--pinfold-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
294
216
|
--pinfold-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
295
217
|
--pinfold-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
296
|
-
/* One gentle overshoot, for things that appear rather than move. */
|
|
297
218
|
--pinfold-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
298
|
-
|
|
299
|
-
/* ---------------------------------------------------------------- layer */
|
|
300
219
|
--pinfold-z-dropdown: 1000;
|
|
301
220
|
--pinfold-z-sticky: 1100;
|
|
302
221
|
--pinfold-z-overlay: 1200;
|
|
@@ -304,9 +223,6 @@
|
|
|
304
223
|
--pinfold-z-toast: 1400;
|
|
305
224
|
--pinfold-z-tooltip: 1500;
|
|
306
225
|
}
|
|
307
|
-
|
|
308
|
-
/* Dark palette. Only the semantic layer flips — the ramps stay identical, so a
|
|
309
|
-
consumer who overrode `--pinfold-primary-500` keeps their brand in both themes. */
|
|
310
226
|
@media (prefers-color-scheme: dark) {
|
|
311
227
|
:root:not([data-pinfold-theme="light"]) {
|
|
312
228
|
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
@@ -320,12 +236,10 @@
|
|
|
320
236
|
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
321
237
|
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
322
238
|
--pinfold-color-text-disabled: var(--pinfold-neutral-600);
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
--pinfold-color-accent: var(--pinfold-accent-400);
|
|
326
|
-
--pinfold-color-accent-hover: var(--pinfold-accent-300);
|
|
239
|
+
--pinfold-color-accent: var(--pinfold-primary-400);
|
|
240
|
+
--pinfold-color-accent-hover: var(--pinfold-primary-300);
|
|
327
241
|
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
328
|
-
--pinfold-color-ring: var(--pinfold-
|
|
242
|
+
--pinfold-color-ring: var(--pinfold-primary-400);
|
|
329
243
|
--pinfold-shadow-color: oklch(0 0 0);
|
|
330
244
|
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
331
245
|
--pinfold-shadow-sm:
|
|
@@ -343,7 +257,6 @@
|
|
|
343
257
|
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
|
|
344
258
|
}
|
|
345
259
|
}
|
|
346
|
-
|
|
347
260
|
[data-pinfold-theme="dark"] {
|
|
348
261
|
color-scheme: dark;
|
|
349
262
|
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
@@ -357,10 +270,10 @@
|
|
|
357
270
|
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
358
271
|
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
359
272
|
--pinfold-color-text-disabled: var(--pinfold-neutral-600);
|
|
360
|
-
--pinfold-color-accent: var(--pinfold-
|
|
361
|
-
--pinfold-color-accent-hover: var(--pinfold-
|
|
273
|
+
--pinfold-color-accent: var(--pinfold-primary-400);
|
|
274
|
+
--pinfold-color-accent-hover: var(--pinfold-primary-300);
|
|
362
275
|
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
363
|
-
--pinfold-color-ring: var(--pinfold-
|
|
276
|
+
--pinfold-color-ring: var(--pinfold-primary-400);
|
|
364
277
|
--pinfold-shadow-color: oklch(0 0 0);
|
|
365
278
|
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
366
279
|
--pinfold-shadow-sm:
|
|
@@ -376,7 +289,6 @@
|
|
|
376
289
|
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
|
|
377
290
|
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
|
|
378
291
|
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
|
|
379
|
-
/* Derived tokens, recomputed here so nested sections get their own. */
|
|
380
292
|
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
381
293
|
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
382
294
|
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
@@ -387,10 +299,6 @@
|
|
|
387
299
|
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
388
300
|
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
389
301
|
}
|
|
390
|
-
|
|
391
|
-
/* An explicit light section, e.g. inside a dark page. Mirrors every property the dark
|
|
392
|
-
palette flips, with the :root values; ramps are never redeclared, so a custom
|
|
393
|
-
palette still reaches it. */
|
|
394
302
|
[data-pinfold-theme="light"] {
|
|
395
303
|
color-scheme: light;
|
|
396
304
|
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
@@ -404,10 +312,10 @@
|
|
|
404
312
|
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
405
313
|
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
406
314
|
--pinfold-color-text-disabled: var(--pinfold-neutral-400);
|
|
407
|
-
--pinfold-color-accent: var(--pinfold-
|
|
408
|
-
--pinfold-color-accent-hover: var(--pinfold-
|
|
315
|
+
--pinfold-color-accent: var(--pinfold-primary-600);
|
|
316
|
+
--pinfold-color-accent-hover: var(--pinfold-primary-700);
|
|
409
317
|
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
410
|
-
--pinfold-color-ring: var(--pinfold-
|
|
318
|
+
--pinfold-color-ring: var(--pinfold-primary-500);
|
|
411
319
|
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
412
320
|
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
413
321
|
--pinfold-shadow-sm: 0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
|
|
@@ -419,7 +327,6 @@
|
|
|
419
327
|
--pinfold-shadow-xl: 0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
420
328
|
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
|
|
421
329
|
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
|
|
422
|
-
/* Derived tokens, recomputed here so nested sections get their own. */
|
|
423
330
|
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
424
331
|
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
425
332
|
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
@@ -430,10 +337,6 @@
|
|
|
430
337
|
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
431
338
|
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
432
339
|
}
|
|
433
|
-
|
|
434
|
-
/* The radius scale is a multiplier, so the radii are recomputed wherever it can change:
|
|
435
|
-
on :root, on a radius preset and on a style pack. (A custom property inherits its
|
|
436
|
-
computed value; redeclaring only the scale further down would change nothing.) */
|
|
437
340
|
:root,
|
|
438
341
|
[data-pinfold-radius],
|
|
439
342
|
[data-pinfold-style] {
|
|
@@ -444,20 +347,14 @@
|
|
|
444
347
|
--pinfold-radius-xl: calc(1rem * var(--pinfold-radius-scale));
|
|
445
348
|
--pinfold-radius-2xl: calc(1.5rem * var(--pinfold-radius-scale));
|
|
446
349
|
}
|
|
447
|
-
|
|
448
|
-
/* Radius presets, set by the CLI or by <PinfoldProvider radius>. */
|
|
449
350
|
[data-pinfold-radius="none"] { --pinfold-radius-scale: 0; }
|
|
450
351
|
[data-pinfold-radius="sm"] { --pinfold-radius-scale: 0.6; }
|
|
451
352
|
[data-pinfold-radius="md"] { --pinfold-radius-scale: 1; }
|
|
452
353
|
[data-pinfold-radius="lg"] { --pinfold-radius-scale: 1.5; }
|
|
453
354
|
[data-pinfold-radius="full"] { --pinfold-radius-scale: 2.4; }
|
|
454
|
-
|
|
455
|
-
/* Density presets scale spacing without touching type size. */
|
|
456
355
|
[data-pinfold-density="compact"] { --pinfold-density: 0.8; }
|
|
457
356
|
[data-pinfold-density="comfortable"] { --pinfold-density: 1; }
|
|
458
357
|
[data-pinfold-density="spacious"] { --pinfold-density: 1.25; }
|
|
459
|
-
|
|
460
|
-
/* Browsers without color-mix get flat approximations rather than nothing. */
|
|
461
358
|
@supports not (color: color-mix(in oklch, red, blue)) {
|
|
462
359
|
:root {
|
|
463
360
|
--pinfold-color-surface-hover: var(--pinfold-neutral-100);
|
|
@@ -473,5 +370,4 @@
|
|
|
473
370
|
--pinfold-highlight: none;
|
|
474
371
|
}
|
|
475
372
|
}
|
|
476
|
-
|
|
477
373
|
}
|
package/dist/packs.css
CHANGED
|
@@ -1,95 +1,51 @@
|
|
|
1
|
-
/* Pinfold — style packs.
|
|
2
|
-
|
|
3
|
-
import '@pinfold/css/core.css';
|
|
4
|
-
import '@pinfold/css/packs.css';
|
|
5
|
-
<PinfoldProvider stylePack="glass"> (or data-pinfold-style="glass" on any element)
|
|
6
|
-
|
|
7
|
-
A pack is only a token recipe: it re-points shape, depth, border, surface and
|
|
8
|
-
type tokens, so every component follows it with no per-component CSS.
|
|
9
|
-
Colour roles are untouched, so text contrast comes from the palette, which
|
|
10
|
-
is contrast-checked (see packs.test.ts).
|
|
11
|
-
|
|
12
|
-
Every pack yields to the user:
|
|
13
|
-
- prefers-reduced-transparency: no translucency, no blur.
|
|
14
|
-
- prefers-contrast: more: opaque surfaces, full-strength borders, no texture.
|
|
15
|
-
- forced-colors: system colours take over; decorative layers are dropped.
|
|
16
|
-
|
|
17
|
-
Packs sit in their own layer after the tokens, so they override the tokens
|
|
18
|
-
but never beat your own unlayered CSS. */
|
|
19
1
|
|
|
20
2
|
@layer pinfold.tokens, pinfold.reset, pinfold.components, pinfold.packs;
|
|
21
|
-
|
|
22
3
|
@layer pinfold.packs {
|
|
23
|
-
|
|
24
|
-
/* ------------------------------------------------------------------ glass */
|
|
25
|
-
/* Frosted, translucent surfaces over whatever is behind them. */
|
|
26
4
|
[data-pinfold-style='glass'] {
|
|
27
|
-
--pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-bg)
|
|
28
|
-
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-bg) 62%, transparent);
|
|
5
|
+
--pinfold-color-surface: color-mix(in oklch, color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-bg)) 66%, transparent);
|
|
6
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg)) 62%, transparent);
|
|
29
7
|
--pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 12%, transparent);
|
|
30
|
-
--pinfold-backdrop: blur(
|
|
31
|
-
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0)
|
|
8
|
+
--pinfold-backdrop: blur(20px) saturate(1.8);
|
|
9
|
+
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 35%, transparent),
|
|
10
|
+
inset 0 0 0 1px color-mix(in oklch, oklch(1 0 0) 6%, transparent);
|
|
11
|
+
--pinfold-shadow-sm: 0 8px 24px -12px color-mix(in oklch, var(--pinfold-color-accent) 30%, transparent);
|
|
12
|
+
--pinfold-shadow-md: 0 16px 40px -16px color-mix(in oklch, var(--pinfold-color-accent) 38%, transparent);
|
|
13
|
+
--pinfold-radius-scale: 1.5;
|
|
14
|
+
}
|
|
15
|
+
[data-pinfold-style='material'] {
|
|
16
|
+
--pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-accent) 5%, var(--pinfold-color-bg));
|
|
17
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg));
|
|
18
|
+
--pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 8%, transparent);
|
|
19
|
+
--pinfold-shadow-sm:
|
|
20
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent),
|
|
21
|
+
0 1px 3px 1px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent);
|
|
22
|
+
--pinfold-shadow-md:
|
|
23
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent),
|
|
24
|
+
0 2px 6px 2px color-mix(in oklch, var(--pinfold-shadow-color) 9%, transparent);
|
|
25
|
+
--pinfold-highlight: 0 0 0 0 transparent;
|
|
32
26
|
--pinfold-radius-scale: 1.4;
|
|
33
27
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
[data-pinfold-style='bauhaus'] {
|
|
38
|
-
--pinfold-radius-scale: 0;
|
|
39
|
-
--pinfold-border-width: 2px;
|
|
40
|
-
--pinfold-color-border: var(--pinfold-color-text);
|
|
41
|
-
--pinfold-color-border-accent: var(--pinfold-color-accent);
|
|
42
|
-
--pinfold-shadow-sm: 4px 4px 0 var(--pinfold-color-accent);
|
|
43
|
-
--pinfold-shadow-md: 6px 6px 0 var(--pinfold-color-accent);
|
|
44
|
-
--pinfold-highlight: 0 0 0 0 transparent;
|
|
45
|
-
--pinfold-font-sans: Futura, 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
|
|
46
|
-
--pinfold-tracking-tight: 0em;
|
|
28
|
+
[data-pinfold-style='noise'] {
|
|
29
|
+
--pinfold-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
30
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
47
31
|
}
|
|
48
|
-
|
|
49
|
-
/* -------------------------------------------------------------- brutalist */
|
|
50
|
-
/* Raw and loud: monospace, thick black rules, hard shadows, no rounding. */
|
|
51
32
|
[data-pinfold-style='brutalist'] {
|
|
52
|
-
--pinfold-radius-scale: 0;
|
|
53
|
-
--pinfold-border-width:
|
|
33
|
+
--pinfold-radius-scale: 0.5;
|
|
34
|
+
--pinfold-border-width: 2px;
|
|
54
35
|
--pinfold-color-border: var(--pinfold-color-text);
|
|
55
36
|
--pinfold-color-border-accent: var(--pinfold-color-text);
|
|
56
|
-
--pinfold-
|
|
57
|
-
--pinfold-shadow-
|
|
37
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
38
|
+
--pinfold-shadow-sm: 3px 3px 0 var(--pinfold-color-accent);
|
|
39
|
+
--pinfold-shadow-md: 5px 5px 0 var(--pinfold-color-accent);
|
|
58
40
|
--pinfold-highlight: 0 0 0 0 transparent;
|
|
59
|
-
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 18%, var(--pinfold-color-surface));
|
|
60
|
-
--pinfold-font-sans: var(--pinfold-font-mono);
|
|
61
|
-
--pinfold-tracking-tight: 0em;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* ------------------------------------------------------------------ noise */
|
|
65
|
-
/* Print-like grain on every surface. The texture is a 2 kB SVG, no request. */
|
|
66
|
-
[data-pinfold-style='noise'] {
|
|
67
|
-
--pinfold-texture: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
68
|
-
--pinfold-radius-scale: 0.8;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
/* ------------------------------------------------------------------- soft */
|
|
72
|
-
/* Pillowy: generous rounding, no hard borders, wide diffused shadows. */
|
|
73
|
-
[data-pinfold-style='soft'] {
|
|
74
|
-
--pinfold-radius-scale: 1.75;
|
|
75
|
-
--pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 6%, transparent);
|
|
76
|
-
--pinfold-shadow-sm:
|
|
77
|
-
0 2px 6px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
78
|
-
0 12px 32px -14px color-mix(in oklch, var(--pinfold-shadow-color) 22%, transparent);
|
|
79
|
-
--pinfold-shadow-md:
|
|
80
|
-
0 4px 10px -3px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
81
|
-
0 20px 48px -18px color-mix(in oklch, var(--pinfold-shadow-color) 28%, transparent);
|
|
82
41
|
}
|
|
83
|
-
|
|
84
|
-
/* ------------------------------------------------------- user preferences */
|
|
85
42
|
@media (prefers-reduced-transparency: reduce) {
|
|
86
43
|
[data-pinfold-style='glass'] {
|
|
87
|
-
--pinfold-color-surface: var(--pinfold-color-bg);
|
|
88
|
-
--pinfold-color-bg-subtle: var(--pinfold-
|
|
44
|
+
--pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-bg));
|
|
45
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, var(--pinfold-color-bg));
|
|
89
46
|
--pinfold-backdrop: none;
|
|
90
47
|
}
|
|
91
48
|
}
|
|
92
|
-
|
|
93
49
|
@media (prefers-contrast: more) {
|
|
94
50
|
[data-pinfold-style] {
|
|
95
51
|
--pinfold-color-surface: var(--pinfold-color-bg);
|
|
@@ -98,12 +54,10 @@
|
|
|
98
54
|
--pinfold-texture: none;
|
|
99
55
|
}
|
|
100
56
|
}
|
|
101
|
-
|
|
102
57
|
@media (forced-colors: active) {
|
|
103
58
|
[data-pinfold-style] {
|
|
104
59
|
--pinfold-backdrop: none;
|
|
105
60
|
--pinfold-texture: none;
|
|
106
61
|
}
|
|
107
62
|
}
|
|
108
|
-
|
|
109
63
|
}
|
package/dist/reset.css
CHANGED
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
/* Pinfold — scoped reset. Applies only inside `.pinfold`, never to the host app.
|
|
2
|
-
A library that resets the page is a library that fights its host. */
|
|
3
1
|
|
|
4
2
|
@layer pinfold.reset {
|
|
5
|
-
|
|
6
3
|
.pinfold,
|
|
7
4
|
.pinfold *,
|
|
8
5
|
.pinfold *::before,
|
|
9
6
|
.pinfold *::after {
|
|
10
7
|
box-sizing: border-box;
|
|
11
8
|
}
|
|
12
|
-
|
|
13
9
|
.pinfold {
|
|
14
10
|
font-family: var(--pinfold-font-sans);
|
|
15
11
|
font-size: var(--pinfold-text-md);
|
|
@@ -18,55 +14,42 @@
|
|
|
18
14
|
-webkit-font-smoothing: antialiased;
|
|
19
15
|
-moz-osx-font-smoothing: grayscale;
|
|
20
16
|
text-rendering: optimizeLegibility;
|
|
21
|
-
/* Proportional digits jump as numbers change; tabular ones do not. */
|
|
22
17
|
font-variant-numeric: tabular-nums;
|
|
23
18
|
}
|
|
24
|
-
|
|
25
19
|
.pinfold :where(button, input, select, textarea) {
|
|
26
20
|
font: inherit;
|
|
27
21
|
color: inherit;
|
|
28
22
|
letter-spacing: inherit;
|
|
29
23
|
margin: 0;
|
|
30
24
|
}
|
|
31
|
-
|
|
32
25
|
.pinfold :where(button) {
|
|
33
26
|
background: none;
|
|
34
27
|
border: 0;
|
|
35
28
|
cursor: pointer;
|
|
36
|
-
/* Kills the 300ms tap delay and the grey flash on touch devices. */
|
|
37
29
|
touch-action: manipulation;
|
|
38
30
|
-webkit-tap-highlight-color: transparent;
|
|
39
31
|
}
|
|
40
|
-
|
|
41
32
|
.pinfold :where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) {
|
|
42
33
|
margin: 0;
|
|
43
34
|
font-size: inherit;
|
|
44
35
|
font-weight: inherit;
|
|
45
36
|
}
|
|
46
|
-
|
|
47
37
|
.pinfold :where(img, svg, video, canvas) {
|
|
48
38
|
display: block;
|
|
49
39
|
max-width: 100%;
|
|
50
40
|
}
|
|
51
|
-
|
|
52
41
|
.pinfold :where(svg) {
|
|
53
42
|
flex: none;
|
|
54
43
|
}
|
|
55
|
-
|
|
56
44
|
.pinfold ::selection {
|
|
57
45
|
background: var(--pinfold-color-selection);
|
|
58
46
|
}
|
|
59
|
-
|
|
60
|
-
/* Two-tone focus ring, visible on any surface. `outline` stays as the
|
|
61
|
-
forced-colors fallback since box-shadow is dropped in that mode. */
|
|
62
47
|
.pinfold :where(:focus-visible) {
|
|
63
48
|
outline: var(--pinfold-focus-width) solid transparent;
|
|
64
49
|
outline-offset: var(--pinfold-focus-offset);
|
|
65
50
|
box-shadow: var(--pinfold-focus-ring);
|
|
66
51
|
border-radius: var(--pinfold-radius-xs);
|
|
67
52
|
}
|
|
68
|
-
|
|
69
|
-
/* Scrollbars inside Pinfold surfaces follow the palette instead of the OS. */
|
|
70
53
|
.pinfold :where(*) {
|
|
71
54
|
scrollbar-width: thin;
|
|
72
55
|
scrollbar-color: var(--pinfold-color-border-strong) transparent;
|
|
@@ -84,7 +67,6 @@
|
|
|
84
67
|
.pinfold :where(*)::-webkit-scrollbar-track {
|
|
85
68
|
background: transparent;
|
|
86
69
|
}
|
|
87
|
-
|
|
88
70
|
@media (prefers-reduced-motion: reduce) {
|
|
89
71
|
.pinfold,
|
|
90
72
|
.pinfold * {
|
|
@@ -94,9 +76,6 @@
|
|
|
94
76
|
scroll-behavior: auto !important;
|
|
95
77
|
}
|
|
96
78
|
}
|
|
97
|
-
|
|
98
|
-
/* Forced colors (Windows High Contrast): the OS owns colour, so drop our
|
|
99
|
-
decoration and let system colours through. */
|
|
100
79
|
@media (forced-colors: active) {
|
|
101
80
|
.pinfold :where(:focus-visible) {
|
|
102
81
|
outline-color: Highlight;
|
|
@@ -106,5 +85,4 @@
|
|
|
106
85
|
forced-color-adjust: none;
|
|
107
86
|
}
|
|
108
87
|
}
|
|
109
|
-
|
|
110
88
|
}
|
package/dist/shadcn.css
CHANGED
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
/* Pinfold — shadcn/ui bridge.
|
|
2
|
-
|
|
3
|
-
@import "@pinfold/css/core.css";
|
|
4
|
-
@import "@pinfold/css/shadcn.css"; after your shadcn globals.css variables
|
|
5
|
-
|
|
6
|
-
Points shadcn's CSS variables at Pinfold's tokens, so shadcn components
|
|
7
|
-
and Pinfold components share one theme: `npx pinfold theme`, the palette
|
|
8
|
-
studio, style packs and dark mode all reach both.
|
|
9
|
-
|
|
10
|
-
Dark mode: shadcn toggles a `.dark` class, Pinfold reads
|
|
11
|
-
`data-pinfold-theme`. Set both, e.g. next-themes:
|
|
12
|
-
<ThemeProvider attribute={['class', 'data-pinfold-theme']}>
|
|
13
|
-
|
|
14
|
-
Unlayered on purpose: shadcn's own variables are unlayered, and this file
|
|
15
|
-
must replace them. */
|
|
16
1
|
|
|
17
2
|
:root,
|
|
18
3
|
.dark {
|