@pinfold/css 0.0.0-stage → 0.1.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 +64 -2
- package/dist/accordion.css +455 -0
- package/dist/all.css +1043 -0
- package/dist/core.css +477 -0
- package/dist/packs.css +109 -0
- package/dist/reset.css +110 -0
- package/dist/shadcn.css +51 -0
- package/dist/tailwind.css +87 -0
- package/dist/tokens.css +366 -0
- package/package.json +55 -4
- package/tailwind/preset.cjs +146 -0
- package/tailwind/theme.css +87 -0
package/dist/all.css
ADDED
|
@@ -0,0 +1,1043 @@
|
|
|
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
|
+
|
|
4
|
+
@layer pinfold.reset {
|
|
5
|
+
|
|
6
|
+
.pinfold,
|
|
7
|
+
.pinfold *,
|
|
8
|
+
.pinfold *::before,
|
|
9
|
+
.pinfold *::after {
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.pinfold {
|
|
14
|
+
font-family: var(--pinfold-font-sans);
|
|
15
|
+
font-size: var(--pinfold-text-md);
|
|
16
|
+
line-height: var(--pinfold-leading-normal);
|
|
17
|
+
color: var(--pinfold-color-text);
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
-moz-osx-font-smoothing: grayscale;
|
|
20
|
+
text-rendering: optimizeLegibility;
|
|
21
|
+
/* Proportional digits jump as numbers change; tabular ones do not. */
|
|
22
|
+
font-variant-numeric: tabular-nums;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pinfold :where(button, input, select, textarea) {
|
|
26
|
+
font: inherit;
|
|
27
|
+
color: inherit;
|
|
28
|
+
letter-spacing: inherit;
|
|
29
|
+
margin: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.pinfold :where(button) {
|
|
33
|
+
background: none;
|
|
34
|
+
border: 0;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
/* Kills the 300ms tap delay and the grey flash on touch devices. */
|
|
37
|
+
touch-action: manipulation;
|
|
38
|
+
-webkit-tap-highlight-color: transparent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.pinfold :where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) {
|
|
42
|
+
margin: 0;
|
|
43
|
+
font-size: inherit;
|
|
44
|
+
font-weight: inherit;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.pinfold :where(img, svg, video, canvas) {
|
|
48
|
+
display: block;
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.pinfold :where(svg) {
|
|
53
|
+
flex: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.pinfold ::selection {
|
|
57
|
+
background: var(--pinfold-color-selection);
|
|
58
|
+
}
|
|
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
|
+
.pinfold :where(:focus-visible) {
|
|
63
|
+
outline: var(--pinfold-focus-width) solid transparent;
|
|
64
|
+
outline-offset: var(--pinfold-focus-offset);
|
|
65
|
+
box-shadow: var(--pinfold-focus-ring);
|
|
66
|
+
border-radius: var(--pinfold-radius-xs);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Scrollbars inside Pinfold surfaces follow the palette instead of the OS. */
|
|
70
|
+
.pinfold :where(*) {
|
|
71
|
+
scrollbar-width: thin;
|
|
72
|
+
scrollbar-color: var(--pinfold-color-border-strong) transparent;
|
|
73
|
+
}
|
|
74
|
+
.pinfold :where(*)::-webkit-scrollbar {
|
|
75
|
+
width: 10px;
|
|
76
|
+
height: 10px;
|
|
77
|
+
}
|
|
78
|
+
.pinfold :where(*)::-webkit-scrollbar-thumb {
|
|
79
|
+
background: var(--pinfold-color-border-strong);
|
|
80
|
+
border: 3px solid transparent;
|
|
81
|
+
border-radius: var(--pinfold-radius-full);
|
|
82
|
+
background-clip: content-box;
|
|
83
|
+
}
|
|
84
|
+
.pinfold :where(*)::-webkit-scrollbar-track {
|
|
85
|
+
background: transparent;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
@media (prefers-reduced-motion: reduce) {
|
|
89
|
+
.pinfold,
|
|
90
|
+
.pinfold * {
|
|
91
|
+
animation-duration: 0.01ms !important;
|
|
92
|
+
animation-iteration-count: 1 !important;
|
|
93
|
+
transition-duration: 0.01ms !important;
|
|
94
|
+
scroll-behavior: auto !important;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Forced colors (Windows High Contrast): the OS owns colour, so drop our
|
|
99
|
+
decoration and let system colours through. */
|
|
100
|
+
@media (forced-colors: active) {
|
|
101
|
+
.pinfold :where(:focus-visible) {
|
|
102
|
+
outline-color: Highlight;
|
|
103
|
+
box-shadow: none;
|
|
104
|
+
}
|
|
105
|
+
.pinfold :where([data-state="open"], [data-state="selected"]) {
|
|
106
|
+
forced-color-adjust: none;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
}
|
|
111
|
+
|
|
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
|
+
|
|
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
|
+
@layer pinfold.tokens {
|
|
126
|
+
|
|
127
|
+
:root {
|
|
128
|
+
color-scheme: light dark;
|
|
129
|
+
|
|
130
|
+
/* ---------------------------------------------------------------- ramps */
|
|
131
|
+
--pinfold-primary-50: oklch(0.977 0.014 274);
|
|
132
|
+
--pinfold-primary-100: oklch(0.946 0.033 274);
|
|
133
|
+
--pinfold-primary-200: oklch(0.902 0.063 274);
|
|
134
|
+
--pinfold-primary-300: oklch(0.828 0.111 274);
|
|
135
|
+
--pinfold-primary-400: oklch(0.714 0.163 274);
|
|
136
|
+
--pinfold-primary-500: oklch(0.606 0.201 274);
|
|
137
|
+
--pinfold-primary-600: oklch(0.541 0.223 274);
|
|
138
|
+
--pinfold-primary-700: oklch(0.491 0.216 274);
|
|
139
|
+
--pinfold-primary-800: oklch(0.432 0.181 274);
|
|
140
|
+
--pinfold-primary-900: oklch(0.380 0.146 274);
|
|
141
|
+
--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
|
+
--pinfold-accent-300: var(--pinfold-primary-300);
|
|
145
|
+
--pinfold-accent-400: var(--pinfold-primary-400);
|
|
146
|
+
--pinfold-accent-500: var(--pinfold-primary-500);
|
|
147
|
+
--pinfold-accent-600: var(--pinfold-primary-600);
|
|
148
|
+
--pinfold-accent-700: var(--pinfold-primary-700);
|
|
149
|
+
|
|
150
|
+
--pinfold-neutral-50: oklch(0.985 0.002 274);
|
|
151
|
+
--pinfold-neutral-100: oklch(0.967 0.003 274);
|
|
152
|
+
--pinfold-neutral-200: oklch(0.928 0.006 274);
|
|
153
|
+
--pinfold-neutral-300: oklch(0.872 0.010 274);
|
|
154
|
+
--pinfold-neutral-400: oklch(0.707 0.015 274);
|
|
155
|
+
--pinfold-neutral-500: oklch(0.551 0.019 274);
|
|
156
|
+
--pinfold-neutral-600: oklch(0.446 0.021 274);
|
|
157
|
+
--pinfold-neutral-700: oklch(0.373 0.023 274);
|
|
158
|
+
--pinfold-neutral-800: oklch(0.279 0.023 274);
|
|
159
|
+
--pinfold-neutral-900: oklch(0.210 0.021 274);
|
|
160
|
+
--pinfold-neutral-950: oklch(0.145 0.017 274);
|
|
161
|
+
|
|
162
|
+
--pinfold-success-100: oklch(0.946 0.033 158);
|
|
163
|
+
--pinfold-success-300: oklch(0.828 0.111 158);
|
|
164
|
+
--pinfold-success-500: oklch(0.606 0.201 158);
|
|
165
|
+
--pinfold-success-700: oklch(0.491 0.216 158);
|
|
166
|
+
--pinfold-success-900: oklch(0.380 0.146 158);
|
|
167
|
+
|
|
168
|
+
--pinfold-warning-100: oklch(0.946 0.033 78);
|
|
169
|
+
--pinfold-warning-300: oklch(0.828 0.111 78);
|
|
170
|
+
--pinfold-warning-500: oklch(0.606 0.201 78);
|
|
171
|
+
--pinfold-warning-700: oklch(0.491 0.216 78);
|
|
172
|
+
--pinfold-warning-900: oklch(0.380 0.146 78);
|
|
173
|
+
|
|
174
|
+
--pinfold-danger-100: oklch(0.946 0.033 27);
|
|
175
|
+
--pinfold-danger-300: oklch(0.828 0.111 27);
|
|
176
|
+
--pinfold-danger-500: oklch(0.606 0.201 27);
|
|
177
|
+
--pinfold-danger-700: oklch(0.491 0.216 27);
|
|
178
|
+
--pinfold-danger-900: oklch(0.380 0.146 27);
|
|
179
|
+
|
|
180
|
+
--pinfold-info-100: oklch(0.946 0.033 245);
|
|
181
|
+
--pinfold-info-300: oklch(0.828 0.111 245);
|
|
182
|
+
--pinfold-info-500: oklch(0.606 0.201 245);
|
|
183
|
+
--pinfold-info-700: oklch(0.491 0.216 245);
|
|
184
|
+
--pinfold-info-900: oklch(0.380 0.146 245);
|
|
185
|
+
|
|
186
|
+
/* ------------------------------------------------------------ semantics */
|
|
187
|
+
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
188
|
+
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
189
|
+
--pinfold-color-surface: oklch(1 0 0);
|
|
190
|
+
--pinfold-color-surface-raised: oklch(1 0 0);
|
|
191
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
196
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
197
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
198
|
+
|
|
199
|
+
--pinfold-color-border: var(--pinfold-neutral-200);
|
|
200
|
+
--pinfold-color-border-strong: var(--pinfold-neutral-300);
|
|
201
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
202
|
+
|
|
203
|
+
--pinfold-color-text: var(--pinfold-neutral-900);
|
|
204
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
205
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
206
|
+
--pinfold-color-text-disabled: var(--pinfold-neutral-400);
|
|
207
|
+
|
|
208
|
+
--pinfold-color-accent: var(--pinfold-accent-600);
|
|
209
|
+
--pinfold-color-accent-hover: var(--pinfold-accent-700);
|
|
210
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
211
|
+
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
212
|
+
|
|
213
|
+
--pinfold-color-ring: var(--pinfold-accent-500);
|
|
214
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
215
|
+
--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
|
+
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
222
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
223
|
+
--pinfold-shadow-sm:
|
|
224
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
|
|
225
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent);
|
|
226
|
+
--pinfold-shadow-md:
|
|
227
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 7%, transparent),
|
|
228
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent);
|
|
229
|
+
--pinfold-shadow-lg:
|
|
230
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
231
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 14%, transparent);
|
|
232
|
+
--pinfold-shadow-xl:
|
|
233
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
234
|
+
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
|
+
--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
|
+
--pinfold-border-width: 1px;
|
|
242
|
+
--pinfold-backdrop: none;
|
|
243
|
+
--pinfold-texture: none;
|
|
244
|
+
|
|
245
|
+
/* ---------------------------------------------------------------- focus */
|
|
246
|
+
--pinfold-focus-width: 2px;
|
|
247
|
+
--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
|
+
--pinfold-focus-ring:
|
|
251
|
+
0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
252
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
253
|
+
|
|
254
|
+
/* ---------------------------------------------------------------- shape */
|
|
255
|
+
--pinfold-radius-scale: 1;
|
|
256
|
+
--pinfold-radius-full: 9999px;
|
|
257
|
+
|
|
258
|
+
/* -------------------------------------------------------------- spacing */
|
|
259
|
+
--pinfold-space-1: 0.25rem;
|
|
260
|
+
--pinfold-space-2: 0.5rem;
|
|
261
|
+
--pinfold-space-3: 0.75rem;
|
|
262
|
+
--pinfold-space-4: 1rem;
|
|
263
|
+
--pinfold-space-5: 1.25rem;
|
|
264
|
+
--pinfold-space-6: 1.5rem;
|
|
265
|
+
--pinfold-space-8: 2rem;
|
|
266
|
+
--pinfold-space-10: 2.5rem;
|
|
267
|
+
|
|
268
|
+
/* ----------------------------------------------------------- typography */
|
|
269
|
+
--pinfold-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
270
|
+
"Helvetica Neue", Arial, sans-serif;
|
|
271
|
+
--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
|
+
--pinfold-text-xs: 0.75rem;
|
|
274
|
+
--pinfold-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
|
|
275
|
+
--pinfold-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
|
|
276
|
+
--pinfold-text-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
|
|
277
|
+
--pinfold-text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.375rem);
|
|
278
|
+
--pinfold-leading-tight: 1.3;
|
|
279
|
+
--pinfold-leading-normal: 1.55;
|
|
280
|
+
--pinfold-weight-normal: 400;
|
|
281
|
+
--pinfold-weight-medium: 500;
|
|
282
|
+
--pinfold-weight-semibold: 600;
|
|
283
|
+
/* Larger text needs tighter tracking to look optically even. */
|
|
284
|
+
--pinfold-tracking-tight: -0.011em;
|
|
285
|
+
--pinfold-tracking-normal: 0em;
|
|
286
|
+
--pinfold-tracking-wide: 0.02em;
|
|
287
|
+
|
|
288
|
+
/* --------------------------------------------------------------- motion */
|
|
289
|
+
--pinfold-duration-fast: 120ms;
|
|
290
|
+
--pinfold-duration-md: 200ms;
|
|
291
|
+
--pinfold-duration-slow: 320ms;
|
|
292
|
+
/* Decelerating curve — fast start, soft landing. Reads as responsive. */
|
|
293
|
+
--pinfold-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
294
|
+
--pinfold-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
295
|
+
--pinfold-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
296
|
+
/* One gentle overshoot, for things that appear rather than move. */
|
|
297
|
+
--pinfold-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
298
|
+
|
|
299
|
+
/* ---------------------------------------------------------------- layer */
|
|
300
|
+
--pinfold-z-dropdown: 1000;
|
|
301
|
+
--pinfold-z-sticky: 1100;
|
|
302
|
+
--pinfold-z-overlay: 1200;
|
|
303
|
+
--pinfold-z-modal: 1300;
|
|
304
|
+
--pinfold-z-toast: 1400;
|
|
305
|
+
--pinfold-z-tooltip: 1500;
|
|
306
|
+
}
|
|
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
|
+
@media (prefers-color-scheme: dark) {
|
|
311
|
+
:root:not([data-pinfold-theme="light"]) {
|
|
312
|
+
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
313
|
+
--pinfold-color-bg-subtle: oklch(0.178 0.019 274);
|
|
314
|
+
--pinfold-color-surface: oklch(0.196 0.020 274);
|
|
315
|
+
--pinfold-color-surface-raised: oklch(0.232 0.021 274);
|
|
316
|
+
--pinfold-color-surface-sunken: oklch(0.165 0.018 274);
|
|
317
|
+
--pinfold-color-border: oklch(0.286 0.023 274);
|
|
318
|
+
--pinfold-color-border-strong: oklch(0.352 0.024 274);
|
|
319
|
+
--pinfold-color-text: var(--pinfold-neutral-100);
|
|
320
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
321
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
322
|
+
--pinfold-color-text-disabled: var(--pinfold-neutral-600);
|
|
323
|
+
/* Dark surfaces need a lighter, slightly less saturated accent to hold
|
|
324
|
+
contrast without glowing. */
|
|
325
|
+
--pinfold-color-accent: var(--pinfold-accent-400);
|
|
326
|
+
--pinfold-color-accent-hover: var(--pinfold-accent-300);
|
|
327
|
+
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
328
|
+
--pinfold-color-ring: var(--pinfold-accent-400);
|
|
329
|
+
--pinfold-shadow-color: oklch(0 0 0);
|
|
330
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
331
|
+
--pinfold-shadow-sm:
|
|
332
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent),
|
|
333
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent);
|
|
334
|
+
--pinfold-shadow-md:
|
|
335
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 45%, transparent),
|
|
336
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent);
|
|
337
|
+
--pinfold-shadow-lg:
|
|
338
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent),
|
|
339
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent);
|
|
340
|
+
--pinfold-shadow-xl:
|
|
341
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
|
|
342
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
|
|
343
|
+
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
[data-pinfold-theme="dark"] {
|
|
348
|
+
color-scheme: dark;
|
|
349
|
+
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
350
|
+
--pinfold-color-bg-subtle: oklch(0.178 0.019 274);
|
|
351
|
+
--pinfold-color-surface: oklch(0.196 0.020 274);
|
|
352
|
+
--pinfold-color-surface-raised: oklch(0.232 0.021 274);
|
|
353
|
+
--pinfold-color-surface-sunken: oklch(0.165 0.018 274);
|
|
354
|
+
--pinfold-color-border: oklch(0.286 0.023 274);
|
|
355
|
+
--pinfold-color-border-strong: oklch(0.352 0.024 274);
|
|
356
|
+
--pinfold-color-text: var(--pinfold-neutral-100);
|
|
357
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
358
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
359
|
+
--pinfold-color-text-disabled: var(--pinfold-neutral-600);
|
|
360
|
+
--pinfold-color-accent: var(--pinfold-accent-400);
|
|
361
|
+
--pinfold-color-accent-hover: var(--pinfold-accent-300);
|
|
362
|
+
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
363
|
+
--pinfold-color-ring: var(--pinfold-accent-400);
|
|
364
|
+
--pinfold-shadow-color: oklch(0 0 0);
|
|
365
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
366
|
+
--pinfold-shadow-sm:
|
|
367
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent),
|
|
368
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent);
|
|
369
|
+
--pinfold-shadow-md:
|
|
370
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 45%, transparent),
|
|
371
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent);
|
|
372
|
+
--pinfold-shadow-lg:
|
|
373
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent),
|
|
374
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent);
|
|
375
|
+
--pinfold-shadow-xl:
|
|
376
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
|
|
377
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
|
|
378
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
381
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
382
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
383
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
384
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
385
|
+
--pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
|
|
386
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
387
|
+
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
388
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
389
|
+
}
|
|
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
|
+
[data-pinfold-theme="light"] {
|
|
395
|
+
color-scheme: light;
|
|
396
|
+
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
397
|
+
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
398
|
+
--pinfold-color-surface: oklch(1 0 0);
|
|
399
|
+
--pinfold-color-surface-raised: oklch(1 0 0);
|
|
400
|
+
--pinfold-color-surface-sunken: var(--pinfold-neutral-100);
|
|
401
|
+
--pinfold-color-border: var(--pinfold-neutral-200);
|
|
402
|
+
--pinfold-color-border-strong: var(--pinfold-neutral-300);
|
|
403
|
+
--pinfold-color-text: var(--pinfold-neutral-900);
|
|
404
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
405
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
406
|
+
--pinfold-color-text-disabled: var(--pinfold-neutral-400);
|
|
407
|
+
--pinfold-color-accent: var(--pinfold-accent-600);
|
|
408
|
+
--pinfold-color-accent-hover: var(--pinfold-accent-700);
|
|
409
|
+
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
410
|
+
--pinfold-color-ring: var(--pinfold-accent-500);
|
|
411
|
+
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
412
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
413
|
+
--pinfold-shadow-sm: 0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
|
|
414
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent);
|
|
415
|
+
--pinfold-shadow-md: 0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 7%, transparent),
|
|
416
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent);
|
|
417
|
+
--pinfold-shadow-lg: 0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
418
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 14%, transparent);
|
|
419
|
+
--pinfold-shadow-xl: 0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
420
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
|
|
421
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
424
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
425
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
426
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
427
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
428
|
+
--pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
|
|
429
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
430
|
+
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
431
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
432
|
+
}
|
|
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
|
+
:root,
|
|
438
|
+
[data-pinfold-radius],
|
|
439
|
+
[data-pinfold-style] {
|
|
440
|
+
--pinfold-radius-xs: calc(0.25rem * var(--pinfold-radius-scale));
|
|
441
|
+
--pinfold-radius-sm: calc(0.375rem * var(--pinfold-radius-scale));
|
|
442
|
+
--pinfold-radius-md: calc(0.5rem * var(--pinfold-radius-scale));
|
|
443
|
+
--pinfold-radius-lg: calc(0.75rem * var(--pinfold-radius-scale));
|
|
444
|
+
--pinfold-radius-xl: calc(1rem * var(--pinfold-radius-scale));
|
|
445
|
+
--pinfold-radius-2xl: calc(1.5rem * var(--pinfold-radius-scale));
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Radius presets, set by the CLI or by <PinfoldProvider radius>. */
|
|
449
|
+
[data-pinfold-radius="none"] { --pinfold-radius-scale: 0; }
|
|
450
|
+
[data-pinfold-radius="sm"] { --pinfold-radius-scale: 0.6; }
|
|
451
|
+
[data-pinfold-radius="md"] { --pinfold-radius-scale: 1; }
|
|
452
|
+
[data-pinfold-radius="lg"] { --pinfold-radius-scale: 1.5; }
|
|
453
|
+
[data-pinfold-radius="full"] { --pinfold-radius-scale: 2.4; }
|
|
454
|
+
|
|
455
|
+
/* Density presets scale spacing without touching type size. */
|
|
456
|
+
[data-pinfold-density="compact"] { --pinfold-density: 0.8; }
|
|
457
|
+
[data-pinfold-density="comfortable"] { --pinfold-density: 1; }
|
|
458
|
+
[data-pinfold-density="spacious"] { --pinfold-density: 1.25; }
|
|
459
|
+
|
|
460
|
+
/* Browsers without color-mix get flat approximations rather than nothing. */
|
|
461
|
+
@supports not (color: color-mix(in oklch, red, blue)) {
|
|
462
|
+
:root {
|
|
463
|
+
--pinfold-color-surface-hover: var(--pinfold-neutral-100);
|
|
464
|
+
--pinfold-color-surface-active: var(--pinfold-neutral-200);
|
|
465
|
+
--pinfold-color-surface-selected: var(--pinfold-neutral-200);
|
|
466
|
+
--pinfold-color-border-accent: var(--pinfold-color-accent);
|
|
467
|
+
--pinfold-color-accent-subtle: var(--pinfold-primary-50);
|
|
468
|
+
--pinfold-color-overlay: var(--pinfold-neutral-900);
|
|
469
|
+
--pinfold-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
470
|
+
--pinfold-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
|
|
471
|
+
--pinfold-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
|
|
472
|
+
--pinfold-shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.18);
|
|
473
|
+
--pinfold-highlight: none;
|
|
474
|
+
}
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
/* Pinfold — accordion.
|
|
480
|
+
|
|
481
|
+
Two-layer variables: the `size` preset writes the `*-base` vars, and the
|
|
482
|
+
`dimensions` config writes `--pinfold-accordion-*` which wins through the
|
|
483
|
+
var() fallback. Overriding one measurement keeps the preset for the rest.
|
|
484
|
+
|
|
485
|
+
Nothing clips. Rounded rows give their trigger the matching radius instead
|
|
486
|
+
of relying on `overflow: hidden`, because a clipping ancestor would also cut
|
|
487
|
+
off the focus ring. Collapse is pure CSS (`grid-template-rows`) — no height
|
|
488
|
+
measurement, no ResizeObserver, no layout thrash. */
|
|
489
|
+
|
|
490
|
+
@layer pinfold.components {
|
|
491
|
+
|
|
492
|
+
.pinfold-accordion {
|
|
493
|
+
/* preset layer (set by [data-size]) */
|
|
494
|
+
--pinfold-acc-pad-x-base: var(--pinfold-space-4);
|
|
495
|
+
--pinfold-acc-pad-y-base: var(--pinfold-space-3);
|
|
496
|
+
--pinfold-acc-font-base: var(--pinfold-text-md);
|
|
497
|
+
--pinfold-acc-radius-base: var(--pinfold-radius-lg);
|
|
498
|
+
--pinfold-acc-gap-base: 0px;
|
|
499
|
+
|
|
500
|
+
/* config layer (set by `dimensions`) */
|
|
501
|
+
--pinfold-acc-pad-x: var(--pinfold-accordion-padding-x, var(--pinfold-acc-pad-x-base));
|
|
502
|
+
--pinfold-acc-pad-y: var(--pinfold-accordion-padding-y, var(--pinfold-acc-pad-y-base));
|
|
503
|
+
--pinfold-acc-panel-pad-x: var(--pinfold-accordion-panel-padding-x, var(--pinfold-acc-pad-x));
|
|
504
|
+
--pinfold-acc-panel-pad-y: var(--pinfold-accordion-panel-padding-y, var(--pinfold-acc-pad-y));
|
|
505
|
+
--pinfold-acc-font: var(--pinfold-accordion-font-size, var(--pinfold-acc-font-base));
|
|
506
|
+
--pinfold-acc-title: var(--pinfold-accordion-title-size, inherit);
|
|
507
|
+
--pinfold-acc-desc: var(--pinfold-accordion-description-size, var(--pinfold-text-sm));
|
|
508
|
+
--pinfold-acc-icon: var(--pinfold-accordion-icon-size, 1.5em);
|
|
509
|
+
--pinfold-acc-ind: var(--pinfold-accordion-indicator-size, 1em);
|
|
510
|
+
--pinfold-acc-radius: var(--pinfold-accordion-radius, var(--pinfold-acc-radius-base));
|
|
511
|
+
--pinfold-acc-gap: var(--pinfold-accordion-gap, var(--pinfold-acc-gap-base));
|
|
512
|
+
--pinfold-acc-border: var(--pinfold-accordion-border-width, var(--pinfold-border-width));
|
|
513
|
+
--pinfold-acc-duration: var(--pinfold-accordion-duration, var(--pinfold-duration-md));
|
|
514
|
+
|
|
515
|
+
--pinfold-acc-accent: var(--pinfold-color-accent);
|
|
516
|
+
--pinfold-acc-item-radius: 0px;
|
|
517
|
+
|
|
518
|
+
display: flex;
|
|
519
|
+
flex-direction: column;
|
|
520
|
+
gap: var(--pinfold-acc-gap);
|
|
521
|
+
/* Responds to its own width, not the viewport (see "responsive" below). */
|
|
522
|
+
container: pinfold-accordion / inline-size;
|
|
523
|
+
width: var(--pinfold-accordion-width, 100%);
|
|
524
|
+
min-width: var(--pinfold-accordion-min-width, 0);
|
|
525
|
+
max-width: var(--pinfold-accordion-max-width, none);
|
|
526
|
+
height: var(--pinfold-accordion-height, auto);
|
|
527
|
+
max-height: var(--pinfold-accordion-max-height, none);
|
|
528
|
+
font-size: var(--pinfold-acc-font);
|
|
529
|
+
letter-spacing: var(--pinfold-tracking-tight);
|
|
530
|
+
color: var(--pinfold-color-text);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
/* `dimensions.maxHeight` caps the root and scrolls the rows. */
|
|
534
|
+
.pinfold-accordion[data-clamp] {
|
|
535
|
+
overflow-y: auto;
|
|
536
|
+
overscroll-behavior: contain;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
/* ------------------------------------------------------------------ sizes */
|
|
540
|
+
.pinfold-accordion[data-size='sm'] {
|
|
541
|
+
--pinfold-acc-pad-x-base: var(--pinfold-space-3);
|
|
542
|
+
--pinfold-acc-pad-y-base: var(--pinfold-space-2);
|
|
543
|
+
--pinfold-acc-font-base: var(--pinfold-text-sm);
|
|
544
|
+
--pinfold-acc-radius-base: var(--pinfold-radius-md);
|
|
545
|
+
}
|
|
546
|
+
.pinfold-accordion[data-size='lg'] {
|
|
547
|
+
--pinfold-acc-pad-x-base: var(--pinfold-space-5);
|
|
548
|
+
--pinfold-acc-pad-y-base: var(--pinfold-space-4);
|
|
549
|
+
--pinfold-acc-font-base: var(--pinfold-text-lg);
|
|
550
|
+
--pinfold-acc-radius-base: var(--pinfold-radius-xl);
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/* ------------------------------------------------------------------ tones */
|
|
554
|
+
.pinfold-accordion[data-tone='neutral'] { --pinfold-acc-accent: var(--pinfold-color-text); }
|
|
555
|
+
.pinfold-accordion[data-tone='success'] { --pinfold-acc-accent: var(--pinfold-success-500); }
|
|
556
|
+
.pinfold-accordion[data-tone='warning'] { --pinfold-acc-accent: var(--pinfold-warning-500); }
|
|
557
|
+
.pinfold-accordion[data-tone='danger'] { --pinfold-acc-accent: var(--pinfold-danger-500); }
|
|
558
|
+
.pinfold-accordion[data-tone='info'] { --pinfold-acc-accent: var(--pinfold-info-500); }
|
|
559
|
+
|
|
560
|
+
/* ------------------------------------------------------------------- item */
|
|
561
|
+
.pinfold-accordion__item {
|
|
562
|
+
position: relative;
|
|
563
|
+
border-radius: var(--pinfold-acc-item-radius);
|
|
564
|
+
}
|
|
565
|
+
.pinfold-accordion__header,
|
|
566
|
+
.pinfold-accordion__trigger {
|
|
567
|
+
border-radius: inherit;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
/* Accent edge on the open row. Scales from the centre, so it reads as the row
|
|
571
|
+
opening rather than a bar appearing. */
|
|
572
|
+
.pinfold-accordion__item::before {
|
|
573
|
+
content: '';
|
|
574
|
+
position: absolute;
|
|
575
|
+
inset-block: 0;
|
|
576
|
+
inset-inline-start: 0;
|
|
577
|
+
width: 2px;
|
|
578
|
+
background: var(--pinfold-acc-accent);
|
|
579
|
+
border-start-start-radius: inherit;
|
|
580
|
+
border-end-start-radius: inherit;
|
|
581
|
+
transform: scaleY(0);
|
|
582
|
+
opacity: 0;
|
|
583
|
+
transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
|
|
584
|
+
opacity var(--pinfold-duration-fast) linear;
|
|
585
|
+
pointer-events: none;
|
|
586
|
+
}
|
|
587
|
+
.pinfold-accordion__item[data-state='open']::before {
|
|
588
|
+
transform: scaleY(1);
|
|
589
|
+
opacity: 1;
|
|
590
|
+
}
|
|
591
|
+
/* Bordered rows already signal state through the border; the bar would double up. */
|
|
592
|
+
.pinfold-accordion[data-variant='outline'] .pinfold-accordion__item::before,
|
|
593
|
+
.pinfold-accordion[data-variant='separated'] .pinfold-accordion__item::before {
|
|
594
|
+
content: none;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
/* --------------------------------------------------------------- variants */
|
|
598
|
+
/* solid — one card, hairline-divided rows. Corners are rounded on the parts
|
|
599
|
+
that touch them rather than clipped off the container. */
|
|
600
|
+
.pinfold-accordion[data-variant='solid'] {
|
|
601
|
+
background: var(--pinfold-color-surface);
|
|
602
|
+
background-image: var(--pinfold-texture);
|
|
603
|
+
-webkit-backdrop-filter: var(--pinfold-backdrop);
|
|
604
|
+
backdrop-filter: var(--pinfold-backdrop);
|
|
605
|
+
border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
|
|
606
|
+
border-radius: var(--pinfold-acc-radius);
|
|
607
|
+
box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
|
|
608
|
+
}
|
|
609
|
+
.pinfold-accordion[data-variant='solid'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
|
|
610
|
+
border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
|
|
611
|
+
}
|
|
612
|
+
.pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:first-child .pinfold-accordion__trigger {
|
|
613
|
+
border-start-start-radius: var(--pinfold-acc-radius);
|
|
614
|
+
border-start-end-radius: var(--pinfold-acc-radius);
|
|
615
|
+
}
|
|
616
|
+
.pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:last-child .pinfold-accordion__panel {
|
|
617
|
+
border-end-start-radius: var(--pinfold-acc-radius);
|
|
618
|
+
border-end-end-radius: var(--pinfold-acc-radius);
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/* outline — each row is its own bordered box */
|
|
622
|
+
.pinfold-accordion[data-variant='outline'] {
|
|
623
|
+
--pinfold-acc-gap-base: var(--pinfold-space-2);
|
|
624
|
+
}
|
|
625
|
+
.pinfold-accordion[data-variant='outline'] .pinfold-accordion__item {
|
|
626
|
+
--pinfold-acc-item-radius: var(--pinfold-acc-radius);
|
|
627
|
+
border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
|
|
628
|
+
transition: border-color var(--pinfold-duration-md) var(--pinfold-ease);
|
|
629
|
+
}
|
|
630
|
+
.pinfold-accordion[data-variant='outline'] .pinfold-accordion__item[data-state='open'] {
|
|
631
|
+
border-color: var(--pinfold-color-border-accent);
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
/* separated — cards with air and elevation */
|
|
635
|
+
.pinfold-accordion[data-variant='separated'] {
|
|
636
|
+
--pinfold-acc-gap-base: var(--pinfold-space-3);
|
|
637
|
+
}
|
|
638
|
+
.pinfold-accordion[data-variant='separated'] .pinfold-accordion__item {
|
|
639
|
+
--pinfold-acc-item-radius: var(--pinfold-acc-radius);
|
|
640
|
+
background: var(--pinfold-color-surface);
|
|
641
|
+
background-image: var(--pinfold-texture);
|
|
642
|
+
-webkit-backdrop-filter: var(--pinfold-backdrop);
|
|
643
|
+
backdrop-filter: var(--pinfold-backdrop);
|
|
644
|
+
border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
|
|
645
|
+
box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
|
|
646
|
+
transition: box-shadow var(--pinfold-duration-md) var(--pinfold-ease),
|
|
647
|
+
border-color var(--pinfold-duration-md) var(--pinfold-ease),
|
|
648
|
+
transform var(--pinfold-duration-md) var(--pinfold-ease-out);
|
|
649
|
+
}
|
|
650
|
+
.pinfold-accordion[data-variant='separated'] .pinfold-accordion__item:hover {
|
|
651
|
+
box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
|
|
652
|
+
}
|
|
653
|
+
.pinfold-accordion[data-variant='separated'] .pinfold-accordion__item[data-state='open'] {
|
|
654
|
+
border-color: var(--pinfold-color-border-accent);
|
|
655
|
+
box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* filled — tinted rows, no borders */
|
|
659
|
+
.pinfold-accordion[data-variant='filled'] {
|
|
660
|
+
--pinfold-acc-gap-base: var(--pinfold-space-2);
|
|
661
|
+
}
|
|
662
|
+
.pinfold-accordion[data-variant='filled'] .pinfold-accordion__item {
|
|
663
|
+
--pinfold-acc-item-radius: var(--pinfold-acc-radius);
|
|
664
|
+
background: var(--pinfold-color-bg-subtle);
|
|
665
|
+
background-image: var(--pinfold-texture);
|
|
666
|
+
-webkit-backdrop-filter: var(--pinfold-backdrop);
|
|
667
|
+
backdrop-filter: var(--pinfold-backdrop);
|
|
668
|
+
transition: background-color var(--pinfold-duration-md) var(--pinfold-ease);
|
|
669
|
+
}
|
|
670
|
+
.pinfold-accordion[data-variant='filled'] .pinfold-accordion__item[data-state='open'] {
|
|
671
|
+
background-color: var(--pinfold-color-surface-selected);
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
/* ghost — text only, hover reveals the row */
|
|
675
|
+
.pinfold-accordion[data-variant='ghost'] .pinfold-accordion__item {
|
|
676
|
+
--pinfold-acc-item-radius: var(--pinfold-acc-radius);
|
|
677
|
+
}
|
|
678
|
+
.pinfold-accordion[data-variant='ghost'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
|
|
679
|
+
border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
/* ----------------------------------------------------------------- header */
|
|
683
|
+
.pinfold-accordion__header {
|
|
684
|
+
display: flex;
|
|
685
|
+
margin: 0;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
.pinfold-accordion__trigger {
|
|
689
|
+
display: flex;
|
|
690
|
+
align-items: center;
|
|
691
|
+
gap: var(--pinfold-space-3);
|
|
692
|
+
width: 100%;
|
|
693
|
+
padding: var(--pinfold-acc-pad-y) var(--pinfold-acc-pad-x);
|
|
694
|
+
font-size: inherit;
|
|
695
|
+
font-weight: var(--pinfold-weight-medium);
|
|
696
|
+
line-height: var(--pinfold-leading-tight);
|
|
697
|
+
text-align: start;
|
|
698
|
+
color: var(--pinfold-color-text);
|
|
699
|
+
transition: background-color var(--pinfold-duration-fast) var(--pinfold-ease),
|
|
700
|
+
color var(--pinfold-duration-fast) var(--pinfold-ease);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.pinfold-accordion__trigger:hover {
|
|
704
|
+
background: var(--pinfold-color-surface-hover);
|
|
705
|
+
}
|
|
706
|
+
.pinfold-accordion__trigger:active {
|
|
707
|
+
background: var(--pinfold-color-surface-active);
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Text in the accent: pulled toward the text colour so every tone (500 steps included) clears
|
|
711
|
+
4.5:1 on every variant's open background, in light and dark mode (the a11y report checks). */
|
|
712
|
+
.pinfold-accordion__trigger[data-state='open'] {
|
|
713
|
+
color: color-mix(in oklch, var(--pinfold-acc-accent) 62%, var(--pinfold-color-text));
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
.pinfold-accordion__trigger[data-disabled] {
|
|
717
|
+
color: var(--pinfold-color-text-disabled);
|
|
718
|
+
cursor: not-allowed;
|
|
719
|
+
}
|
|
720
|
+
.pinfold-accordion__trigger[data-disabled]:hover,
|
|
721
|
+
.pinfold-accordion__trigger[data-disabled]:active {
|
|
722
|
+
background: none;
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
/* The ring is drawn by the core reset as a box-shadow; raise the focused row
|
|
726
|
+
so a neighbouring row's background cannot paint over it. */
|
|
727
|
+
.pinfold-accordion__trigger:focus-visible {
|
|
728
|
+
position: relative;
|
|
729
|
+
z-index: 1;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__trigger {
|
|
733
|
+
flex-direction: row-reverse;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
/* ------------------------------------------------------------------ parts */
|
|
737
|
+
.pinfold-accordion__icon {
|
|
738
|
+
display: inline-flex;
|
|
739
|
+
flex: none;
|
|
740
|
+
align-items: center;
|
|
741
|
+
justify-content: center;
|
|
742
|
+
width: var(--pinfold-acc-icon);
|
|
743
|
+
height: var(--pinfold-acc-icon);
|
|
744
|
+
color: var(--pinfold-acc-accent);
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.pinfold-accordion__label {
|
|
748
|
+
display: flex;
|
|
749
|
+
flex: 1 1 auto;
|
|
750
|
+
flex-direction: column;
|
|
751
|
+
gap: 2px;
|
|
752
|
+
min-width: 0;
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.pinfold-accordion__title {
|
|
756
|
+
font-size: var(--pinfold-acc-title);
|
|
757
|
+
overflow-wrap: anywhere;
|
|
758
|
+
}
|
|
759
|
+
|
|
760
|
+
/* Overflow policy per slot: wrap (default for titles), truncate, or clamp to n lines. */
|
|
761
|
+
.pinfold-accordion [data-overflow='truncate'] {
|
|
762
|
+
overflow: hidden;
|
|
763
|
+
text-overflow: ellipsis;
|
|
764
|
+
white-space: nowrap;
|
|
765
|
+
}
|
|
766
|
+
.pinfold-accordion [data-overflow='clamp'] {
|
|
767
|
+
display: -webkit-box;
|
|
768
|
+
-webkit-box-orient: vertical;
|
|
769
|
+
-webkit-line-clamp: var(--pinfold-lines, 2);
|
|
770
|
+
line-clamp: var(--pinfold-lines, 2);
|
|
771
|
+
overflow: hidden;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
.pinfold-accordion__description {
|
|
775
|
+
font-size: var(--pinfold-acc-desc);
|
|
776
|
+
font-weight: var(--pinfold-weight-normal);
|
|
777
|
+
letter-spacing: var(--pinfold-tracking-normal);
|
|
778
|
+
color: var(--pinfold-color-text-muted);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.pinfold-accordion__badge {
|
|
782
|
+
flex: none;
|
|
783
|
+
padding: 2px var(--pinfold-space-2);
|
|
784
|
+
font-size: var(--pinfold-text-xs);
|
|
785
|
+
font-weight: var(--pinfold-weight-semibold);
|
|
786
|
+
letter-spacing: var(--pinfold-tracking-wide);
|
|
787
|
+
/* Small text on a tint of its own colour: pulled halfway toward the text colour, so it
|
|
788
|
+
clears 4.5:1 in light and dark mode for every tone (checked by the a11y report). */
|
|
789
|
+
color: color-mix(in oklch, var(--pinfold-acc-accent) 55%, var(--pinfold-color-text));
|
|
790
|
+
background: color-mix(in oklch, var(--pinfold-acc-accent) 12%, transparent);
|
|
791
|
+
border-radius: var(--pinfold-radius-full);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.pinfold-accordion__indicator {
|
|
795
|
+
display: inline-flex;
|
|
796
|
+
flex: none;
|
|
797
|
+
align-items: center;
|
|
798
|
+
justify-content: center;
|
|
799
|
+
font-size: var(--pinfold-acc-ind);
|
|
800
|
+
color: var(--pinfold-color-text-subtle);
|
|
801
|
+
transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
|
|
802
|
+
color var(--pinfold-duration-fast) var(--pinfold-ease);
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
.pinfold-accordion__trigger:hover .pinfold-accordion__indicator {
|
|
806
|
+
color: var(--pinfold-color-text-muted);
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
.pinfold-accordion__trigger[data-state='open'] .pinfold-accordion__indicator {
|
|
810
|
+
color: var(--pinfold-acc-accent);
|
|
811
|
+
transform: rotate(180deg);
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
/* The plus glyph morphs into a minus instead of spinning. */
|
|
815
|
+
.pinfold-accordion__indicator .pinfold-accordion__indicator-bar {
|
|
816
|
+
transform-origin: center;
|
|
817
|
+
transition: opacity var(--pinfold-acc-duration) var(--pinfold-ease),
|
|
818
|
+
transform var(--pinfold-acc-duration) var(--pinfold-ease-out);
|
|
819
|
+
}
|
|
820
|
+
.pinfold-accordion__trigger[data-state='open']
|
|
821
|
+
.pinfold-accordion__indicator:has(.pinfold-accordion__indicator-bar) {
|
|
822
|
+
transform: none;
|
|
823
|
+
}
|
|
824
|
+
.pinfold-accordion__trigger[data-state='open'] .pinfold-accordion__indicator-bar {
|
|
825
|
+
opacity: 0;
|
|
826
|
+
transform: rotate(90deg);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* ------------------------------------------------------------------ panel */
|
|
830
|
+
.pinfold-accordion__panel {
|
|
831
|
+
display: grid;
|
|
832
|
+
grid-template-rows: 1fr;
|
|
833
|
+
color: var(--pinfold-color-text-muted);
|
|
834
|
+
font-size: var(--pinfold-text-sm);
|
|
835
|
+
line-height: var(--pinfold-leading-normal);
|
|
836
|
+
letter-spacing: var(--pinfold-tracking-normal);
|
|
837
|
+
}
|
|
838
|
+
|
|
839
|
+
.pinfold-accordion__panel[data-state='closed'] {
|
|
840
|
+
grid-template-rows: 0fr;
|
|
841
|
+
/* Takes closed content out of the accessibility tree and the tab order once
|
|
842
|
+
the collapse finishes. */
|
|
843
|
+
visibility: hidden;
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
/* Find-in-page: once the inner box carries hidden="until-found", the browser
|
|
847
|
+
owns its visibility (content-visibility), so the panel itself must stay
|
|
848
|
+
visible for matches to be found. Before hydration the rule above applies. */
|
|
849
|
+
.pinfold-accordion__panel[data-state='closed']:has(> [hidden='until-found']) {
|
|
850
|
+
visibility: visible;
|
|
851
|
+
}
|
|
852
|
+
|
|
853
|
+
.pinfold-accordion[data-animate] .pinfold-accordion__panel {
|
|
854
|
+
transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease-out),
|
|
855
|
+
visibility 0s linear 0s;
|
|
856
|
+
}
|
|
857
|
+
.pinfold-accordion[data-animate] .pinfold-accordion__panel[data-state='closed'] {
|
|
858
|
+
transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease),
|
|
859
|
+
visibility 0s linear var(--pinfold-acc-duration);
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.pinfold-accordion__panel-inner {
|
|
863
|
+
min-height: 0;
|
|
864
|
+
overflow: hidden;
|
|
865
|
+
}
|
|
866
|
+
|
|
867
|
+
/* Content settles in slightly behind the row opening — the lag is what makes
|
|
868
|
+
the motion read as physical rather than mechanical. */
|
|
869
|
+
.pinfold-accordion[data-animate] .pinfold-accordion__content {
|
|
870
|
+
opacity: 0;
|
|
871
|
+
transform: translateY(-4px);
|
|
872
|
+
transition: opacity var(--pinfold-acc-duration) var(--pinfold-ease),
|
|
873
|
+
transform var(--pinfold-acc-duration) var(--pinfold-ease-out);
|
|
874
|
+
}
|
|
875
|
+
.pinfold-accordion[data-animate] .pinfold-accordion__panel[data-state='open'] .pinfold-accordion__content {
|
|
876
|
+
opacity: 1;
|
|
877
|
+
transform: none;
|
|
878
|
+
transition-delay: calc(var(--pinfold-acc-duration) * 0.35);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
/* `dimensions.panelMaxHeight` caps the open panel and scrolls the rest. */
|
|
882
|
+
.pinfold-accordion[data-scroll] .pinfold-accordion__panel[data-state='open'] .pinfold-accordion__panel-inner {
|
|
883
|
+
max-height: var(--pinfold-accordion-panel-max-height);
|
|
884
|
+
overflow-y: auto;
|
|
885
|
+
overscroll-behavior: contain;
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
.pinfold-accordion__content {
|
|
889
|
+
padding: 0 var(--pinfold-acc-panel-pad-x) var(--pinfold-acc-panel-pad-y);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
.pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__content {
|
|
893
|
+
padding-inline-start: calc(var(--pinfold-acc-panel-pad-x) + var(--pinfold-acc-icon) + var(--pinfold-space-3));
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
/* ------------------------------------------------------------- responsive */
|
|
897
|
+
/* Narrow containers: the badge drops under the title so the title keeps its
|
|
898
|
+
width; the indicator stays on the first line. */
|
|
899
|
+
@container pinfold-accordion (max-width: 26rem) {
|
|
900
|
+
.pinfold-accordion__trigger {
|
|
901
|
+
flex-wrap: wrap;
|
|
902
|
+
row-gap: var(--pinfold-space-1);
|
|
903
|
+
}
|
|
904
|
+
/* Leaves room for the icon and indicator only, so the badge must wrap. */
|
|
905
|
+
.pinfold-accordion__label {
|
|
906
|
+
flex-basis: calc(100% - 4.5em);
|
|
907
|
+
}
|
|
908
|
+
.pinfold-accordion__indicator {
|
|
909
|
+
order: 1;
|
|
910
|
+
}
|
|
911
|
+
.pinfold-accordion__badge {
|
|
912
|
+
order: 2;
|
|
913
|
+
margin-inline-start: calc(var(--pinfold-acc-icon) + var(--pinfold-space-3));
|
|
914
|
+
}
|
|
915
|
+
.pinfold-accordion__trigger:not(:has(.pinfold-accordion__icon)) .pinfold-accordion__badge {
|
|
916
|
+
margin-inline-start: 0;
|
|
917
|
+
}
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
/* Touch: every trigger is at least 44px tall (WCAG 2.5.5 / 2.5.8). */
|
|
921
|
+
@media (pointer: coarse) {
|
|
922
|
+
.pinfold-accordion__trigger {
|
|
923
|
+
min-height: 44px;
|
|
924
|
+
}
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
@supports not (color: color-mix(in oklch, red, blue)) {
|
|
928
|
+
.pinfold-accordion__badge {
|
|
929
|
+
background: var(--pinfold-color-bg-subtle);
|
|
930
|
+
}
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
/* Pinfold — style packs.
|
|
936
|
+
|
|
937
|
+
import '@pinfold/css/core.css';
|
|
938
|
+
import '@pinfold/css/packs.css';
|
|
939
|
+
<PinfoldProvider stylePack="glass"> (or data-pinfold-style="glass" on any element)
|
|
940
|
+
|
|
941
|
+
A pack is only a token recipe: it re-points shape, depth, border, surface and
|
|
942
|
+
type tokens, so every component follows it with no per-component CSS.
|
|
943
|
+
Colour roles are untouched, so text contrast comes from the palette, which
|
|
944
|
+
is contrast-checked (see packs.test.ts).
|
|
945
|
+
|
|
946
|
+
Every pack yields to the user:
|
|
947
|
+
- prefers-reduced-transparency: no translucency, no blur.
|
|
948
|
+
- prefers-contrast: more: opaque surfaces, full-strength borders, no texture.
|
|
949
|
+
- forced-colors: system colours take over; decorative layers are dropped.
|
|
950
|
+
|
|
951
|
+
Packs sit in their own layer after the tokens, so they override the tokens
|
|
952
|
+
but never beat your own unlayered CSS. */
|
|
953
|
+
|
|
954
|
+
@layer pinfold.tokens, pinfold.reset, pinfold.components, pinfold.packs;
|
|
955
|
+
|
|
956
|
+
@layer pinfold.packs {
|
|
957
|
+
|
|
958
|
+
/* ------------------------------------------------------------------ glass */
|
|
959
|
+
/* Frosted, translucent surfaces over whatever is behind them. */
|
|
960
|
+
[data-pinfold-style='glass'] {
|
|
961
|
+
--pinfold-color-surface: color-mix(in oklch, var(--pinfold-color-bg) 68%, transparent);
|
|
962
|
+
--pinfold-color-bg-subtle: color-mix(in oklch, var(--pinfold-color-bg) 62%, transparent);
|
|
963
|
+
--pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 12%, transparent);
|
|
964
|
+
--pinfold-backdrop: blur(18px) saturate(1.6);
|
|
965
|
+
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 40%, transparent);
|
|
966
|
+
--pinfold-radius-scale: 1.4;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
/* ---------------------------------------------------------------- bauhaus */
|
|
970
|
+
/* Geometry and primaries: square corners, heavy rules, offset colour blocks. */
|
|
971
|
+
[data-pinfold-style='bauhaus'] {
|
|
972
|
+
--pinfold-radius-scale: 0;
|
|
973
|
+
--pinfold-border-width: 2px;
|
|
974
|
+
--pinfold-color-border: var(--pinfold-color-text);
|
|
975
|
+
--pinfold-color-border-accent: var(--pinfold-color-accent);
|
|
976
|
+
--pinfold-shadow-sm: 4px 4px 0 var(--pinfold-color-accent);
|
|
977
|
+
--pinfold-shadow-md: 6px 6px 0 var(--pinfold-color-accent);
|
|
978
|
+
--pinfold-highlight: 0 0 0 0 transparent;
|
|
979
|
+
--pinfold-font-sans: Futura, 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
|
|
980
|
+
--pinfold-tracking-tight: 0em;
|
|
981
|
+
}
|
|
982
|
+
|
|
983
|
+
/* -------------------------------------------------------------- brutalist */
|
|
984
|
+
/* Raw and loud: monospace, thick black rules, hard shadows, no rounding. */
|
|
985
|
+
[data-pinfold-style='brutalist'] {
|
|
986
|
+
--pinfold-radius-scale: 0;
|
|
987
|
+
--pinfold-border-width: 3px;
|
|
988
|
+
--pinfold-color-border: var(--pinfold-color-text);
|
|
989
|
+
--pinfold-color-border-accent: var(--pinfold-color-text);
|
|
990
|
+
--pinfold-shadow-sm: 5px 5px 0 var(--pinfold-color-text);
|
|
991
|
+
--pinfold-shadow-md: 8px 8px 0 var(--pinfold-color-text);
|
|
992
|
+
--pinfold-highlight: 0 0 0 0 transparent;
|
|
993
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 18%, var(--pinfold-color-surface));
|
|
994
|
+
--pinfold-font-sans: var(--pinfold-font-mono);
|
|
995
|
+
--pinfold-tracking-tight: 0em;
|
|
996
|
+
}
|
|
997
|
+
|
|
998
|
+
/* ------------------------------------------------------------------ noise */
|
|
999
|
+
/* Print-like grain on every surface. The texture is a 2 kB SVG, no request. */
|
|
1000
|
+
[data-pinfold-style='noise'] {
|
|
1001
|
+
--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");
|
|
1002
|
+
--pinfold-radius-scale: 0.8;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
/* ------------------------------------------------------------------- soft */
|
|
1006
|
+
/* Pillowy: generous rounding, no hard borders, wide diffused shadows. */
|
|
1007
|
+
[data-pinfold-style='soft'] {
|
|
1008
|
+
--pinfold-radius-scale: 1.75;
|
|
1009
|
+
--pinfold-color-border: color-mix(in oklch, var(--pinfold-color-text) 6%, transparent);
|
|
1010
|
+
--pinfold-shadow-sm:
|
|
1011
|
+
0 2px 6px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
1012
|
+
0 12px 32px -14px color-mix(in oklch, var(--pinfold-shadow-color) 22%, transparent);
|
|
1013
|
+
--pinfold-shadow-md:
|
|
1014
|
+
0 4px 10px -3px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
1015
|
+
0 20px 48px -18px color-mix(in oklch, var(--pinfold-shadow-color) 28%, transparent);
|
|
1016
|
+
}
|
|
1017
|
+
|
|
1018
|
+
/* ------------------------------------------------------- user preferences */
|
|
1019
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
1020
|
+
[data-pinfold-style='glass'] {
|
|
1021
|
+
--pinfold-color-surface: var(--pinfold-color-bg);
|
|
1022
|
+
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
1023
|
+
--pinfold-backdrop: none;
|
|
1024
|
+
}
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
@media (prefers-contrast: more) {
|
|
1028
|
+
[data-pinfold-style] {
|
|
1029
|
+
--pinfold-color-surface: var(--pinfold-color-bg);
|
|
1030
|
+
--pinfold-color-border: var(--pinfold-color-text);
|
|
1031
|
+
--pinfold-backdrop: none;
|
|
1032
|
+
--pinfold-texture: none;
|
|
1033
|
+
}
|
|
1034
|
+
}
|
|
1035
|
+
|
|
1036
|
+
@media (forced-colors: active) {
|
|
1037
|
+
[data-pinfold-style] {
|
|
1038
|
+
--pinfold-backdrop: none;
|
|
1039
|
+
--pinfold-texture: none;
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
}
|