@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.
Files changed (9) hide show
  1. package/README.md +3 -2
  2. package/dist/accordion.css +76 -178
  3. package/dist/all.css +118 -370
  4. package/dist/core.css +12 -116
  5. package/dist/packs.css +30 -76
  6. package/dist/reset.css +0 -22
  7. package/dist/shadcn.css +0 -15
  8. package/dist/tokens.css +12 -94
  9. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -1,22 +1,7 @@
1
- /* Pinfold — design tokens.
2
- Single source of truth. Components style themselves only through these vars,
3
- so a palette swap, a dark-mode flip and a consumer override all work through
4
- the same mechanism instead of three competing ones.
5
1
 
6
- Colour is authored in OKLCH for perceptual evenness. `npx pinfold theme`
7
- regenerates the ramps and also writes sRGB hex fallbacks for browsers
8
- without OKLCH support. */
9
-
10
- /* Everything ships inside the `pinfold` cascade layer. Unlayered CSS — including
11
- every Tailwind utility — beats a layered rule regardless of source order or
12
- specificity, so `className="px-6"` just works with no `!important` and no
13
- plugin. */
14
2
  @layer pinfold.tokens {
15
-
16
3
  :root {
17
4
  color-scheme: light dark;
18
-
19
- /* ---------------------------------------------------------------- ramps */
20
5
  --pinfold-primary-50: oklch(0.977 0.014 274);
21
6
  --pinfold-primary-100: oklch(0.946 0.033 274);
22
7
  --pinfold-primary-200: oklch(0.902 0.063 274);
@@ -28,14 +13,11 @@
28
13
  --pinfold-primary-800: oklch(0.432 0.181 274);
29
14
  --pinfold-primary-900: oklch(0.380 0.146 274);
30
15
  --pinfold-primary-950: oklch(0.283 0.101 274);
31
-
32
- /* `accent` defaults to the brand ramp; the CLI can give it its own hue. */
33
16
  --pinfold-accent-300: var(--pinfold-primary-300);
34
17
  --pinfold-accent-400: var(--pinfold-primary-400);
35
18
  --pinfold-accent-500: var(--pinfold-primary-500);
36
19
  --pinfold-accent-600: var(--pinfold-primary-600);
37
20
  --pinfold-accent-700: var(--pinfold-primary-700);
38
-
39
21
  --pinfold-neutral-50: oklch(0.985 0.002 274);
40
22
  --pinfold-neutral-100: oklch(0.967 0.003 274);
41
23
  --pinfold-neutral-200: oklch(0.928 0.006 274);
@@ -47,66 +29,48 @@
47
29
  --pinfold-neutral-800: oklch(0.279 0.023 274);
48
30
  --pinfold-neutral-900: oklch(0.210 0.021 274);
49
31
  --pinfold-neutral-950: oklch(0.145 0.017 274);
50
-
51
32
  --pinfold-success-100: oklch(0.946 0.033 158);
52
33
  --pinfold-success-300: oklch(0.828 0.111 158);
53
34
  --pinfold-success-500: oklch(0.606 0.201 158);
54
35
  --pinfold-success-700: oklch(0.491 0.216 158);
55
36
  --pinfold-success-900: oklch(0.380 0.146 158);
56
-
57
37
  --pinfold-warning-100: oklch(0.946 0.033 78);
58
38
  --pinfold-warning-300: oklch(0.828 0.111 78);
59
39
  --pinfold-warning-500: oklch(0.606 0.201 78);
60
40
  --pinfold-warning-700: oklch(0.491 0.216 78);
61
41
  --pinfold-warning-900: oklch(0.380 0.146 78);
62
-
63
42
  --pinfold-danger-100: oklch(0.946 0.033 27);
64
43
  --pinfold-danger-300: oklch(0.828 0.111 27);
65
44
  --pinfold-danger-500: oklch(0.606 0.201 27);
66
45
  --pinfold-danger-700: oklch(0.491 0.216 27);
67
46
  --pinfold-danger-900: oklch(0.380 0.146 27);
68
-
69
47
  --pinfold-info-100: oklch(0.946 0.033 245);
70
48
  --pinfold-info-300: oklch(0.828 0.111 245);
71
49
  --pinfold-info-500: oklch(0.606 0.201 245);
72
50
  --pinfold-info-700: oklch(0.491 0.216 245);
73
51
  --pinfold-info-900: oklch(0.380 0.146 245);
74
-
75
- /* ------------------------------------------------------------ semantics */
76
52
  --pinfold-color-bg: var(--pinfold-neutral-50);
77
53
  --pinfold-color-bg-subtle: var(--pinfold-neutral-100);
78
54
  --pinfold-color-surface: oklch(1 0 0);
79
55
  --pinfold-color-surface-raised: oklch(1 0 0);
80
56
  --pinfold-color-surface-sunken: var(--pinfold-neutral-100);
81
-
82
- /* Interaction surfaces carry a trace of the brand, so hover reads as
83
- "this control is alive" rather than "this control turned grey". */
84
57
  --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
85
58
  --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
86
59
  --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
87
-
88
60
  --pinfold-color-border: var(--pinfold-neutral-200);
89
61
  --pinfold-color-border-strong: var(--pinfold-neutral-300);
90
62
  --pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
91
-
92
63
  --pinfold-color-text: var(--pinfold-neutral-900);
93
64
  --pinfold-color-text-muted: var(--pinfold-neutral-600);
94
65
  --pinfold-color-text-subtle: var(--pinfold-neutral-500);
95
66
  --pinfold-color-text-disabled: var(--pinfold-neutral-400);
96
-
97
- --pinfold-color-accent: var(--pinfold-accent-600);
98
- --pinfold-color-accent-hover: var(--pinfold-accent-700);
67
+ --pinfold-color-accent: var(--pinfold-primary-600);
68
+ --pinfold-color-accent-hover: var(--pinfold-primary-700);
99
69
  --pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
100
70
  --pinfold-color-accent-contrast: oklch(1 0 0);
101
-
102
- --pinfold-color-ring: var(--pinfold-accent-500);
71
+ --pinfold-color-ring: var(--pinfold-primary-500);
103
72
  --pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
104
73
  --pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
105
-
106
- /* --------------------------------------------------------------- depth */
107
- /* Shadows are tinted with the neutral ramp, never neutral black — untinted
108
- black over a tinted surface reads as dirt. Two layers: a tight contact
109
- shadow plus a wide ambient one. */
110
74
  --pinfold-shadow-color: var(--pinfold-neutral-900);
111
75
  --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
112
76
  --pinfold-shadow-sm:
@@ -121,30 +85,17 @@
121
85
  --pinfold-shadow-xl:
122
86
  0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
123
87
  0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
124
-
125
- /* Hairline highlight along the top edge of a raised surface. The detail that
126
- separates "a box" from "a surface". */
127
88
  --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
128
-
129
- /* Hooks for style packs (packs.css). Defaults are neutral: no blur, no texture. */
130
89
  --pinfold-border-width: 1px;
131
90
  --pinfold-backdrop: none;
132
91
  --pinfold-texture: none;
133
-
134
- /* ---------------------------------------------------------------- focus */
135
92
  --pinfold-focus-width: 2px;
136
93
  --pinfold-focus-offset: 2px;
137
- /* Two-tone ring: a gap in the page colour, then the ring. Stays visible on
138
- any surface, including one that matches the ring hue. */
139
94
  --pinfold-focus-ring:
140
95
  0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
141
96
  0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
142
-
143
- /* ---------------------------------------------------------------- shape */
144
97
  --pinfold-radius-scale: 1;
145
98
  --pinfold-radius-full: 9999px;
146
-
147
- /* -------------------------------------------------------------- spacing */
148
99
  --pinfold-space-1: 0.25rem;
149
100
  --pinfold-space-2: 0.5rem;
150
101
  --pinfold-space-3: 0.75rem;
@@ -153,12 +104,9 @@
153
104
  --pinfold-space-6: 1.5rem;
154
105
  --pinfold-space-8: 2rem;
155
106
  --pinfold-space-10: 2.5rem;
156
-
157
- /* ----------------------------------------------------------- typography */
158
107
  --pinfold-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
159
108
  "Helvetica Neue", Arial, sans-serif;
160
109
  --pinfold-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
161
- /* Fluid type: grows gently with the viewport, never below the floor or past the cap. */
162
110
  --pinfold-text-xs: 0.75rem;
163
111
  --pinfold-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
164
112
  --pinfold-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
@@ -169,23 +117,16 @@
169
117
  --pinfold-weight-normal: 400;
170
118
  --pinfold-weight-medium: 500;
171
119
  --pinfold-weight-semibold: 600;
172
- /* Larger text needs tighter tracking to look optically even. */
173
120
  --pinfold-tracking-tight: -0.011em;
174
121
  --pinfold-tracking-normal: 0em;
175
122
  --pinfold-tracking-wide: 0.02em;
176
-
177
- /* --------------------------------------------------------------- motion */
178
123
  --pinfold-duration-fast: 120ms;
179
124
  --pinfold-duration-md: 200ms;
180
125
  --pinfold-duration-slow: 320ms;
181
- /* Decelerating curve — fast start, soft landing. Reads as responsive. */
182
126
  --pinfold-ease: cubic-bezier(0.32, 0.72, 0, 1);
183
127
  --pinfold-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
184
128
  --pinfold-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
185
- /* One gentle overshoot, for things that appear rather than move. */
186
129
  --pinfold-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
187
-
188
- /* ---------------------------------------------------------------- layer */
189
130
  --pinfold-z-dropdown: 1000;
190
131
  --pinfold-z-sticky: 1100;
191
132
  --pinfold-z-overlay: 1200;
@@ -193,9 +134,6 @@
193
134
  --pinfold-z-toast: 1400;
194
135
  --pinfold-z-tooltip: 1500;
195
136
  }
196
-
197
- /* Dark palette. Only the semantic layer flips — the ramps stay identical, so a
198
- consumer who overrode `--pinfold-primary-500` keeps their brand in both themes. */
199
137
  @media (prefers-color-scheme: dark) {
200
138
  :root:not([data-pinfold-theme="light"]) {
201
139
  --pinfold-color-bg: var(--pinfold-neutral-950);
@@ -209,12 +147,10 @@
209
147
  --pinfold-color-text-muted: var(--pinfold-neutral-400);
210
148
  --pinfold-color-text-subtle: var(--pinfold-neutral-500);
211
149
  --pinfold-color-text-disabled: var(--pinfold-neutral-600);
212
- /* Dark surfaces need a lighter, slightly less saturated accent to hold
213
- contrast without glowing. */
214
- --pinfold-color-accent: var(--pinfold-accent-400);
215
- --pinfold-color-accent-hover: var(--pinfold-accent-300);
150
+ --pinfold-color-accent: var(--pinfold-primary-400);
151
+ --pinfold-color-accent-hover: var(--pinfold-primary-300);
216
152
  --pinfold-color-accent-contrast: var(--pinfold-neutral-950);
217
- --pinfold-color-ring: var(--pinfold-accent-400);
153
+ --pinfold-color-ring: var(--pinfold-primary-400);
218
154
  --pinfold-shadow-color: oklch(0 0 0);
219
155
  --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
220
156
  --pinfold-shadow-sm:
@@ -232,7 +168,6 @@
232
168
  --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
233
169
  }
234
170
  }
235
-
236
171
  [data-pinfold-theme="dark"] {
237
172
  color-scheme: dark;
238
173
  --pinfold-color-bg: var(--pinfold-neutral-950);
@@ -246,10 +181,10 @@
246
181
  --pinfold-color-text-muted: var(--pinfold-neutral-400);
247
182
  --pinfold-color-text-subtle: var(--pinfold-neutral-500);
248
183
  --pinfold-color-text-disabled: var(--pinfold-neutral-600);
249
- --pinfold-color-accent: var(--pinfold-accent-400);
250
- --pinfold-color-accent-hover: var(--pinfold-accent-300);
184
+ --pinfold-color-accent: var(--pinfold-primary-400);
185
+ --pinfold-color-accent-hover: var(--pinfold-primary-300);
251
186
  --pinfold-color-accent-contrast: var(--pinfold-neutral-950);
252
- --pinfold-color-ring: var(--pinfold-accent-400);
187
+ --pinfold-color-ring: var(--pinfold-primary-400);
253
188
  --pinfold-shadow-color: oklch(0 0 0);
254
189
  --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
255
190
  --pinfold-shadow-sm:
@@ -265,7 +200,6 @@
265
200
  0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
266
201
  0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
267
202
  --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
268
- /* Derived tokens, recomputed here so nested sections get their own. */
269
203
  --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
270
204
  --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
271
205
  --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
@@ -276,10 +210,6 @@
276
210
  --pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
277
211
  0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
278
212
  }
279
-
280
- /* An explicit light section, e.g. inside a dark page. Mirrors every property the dark
281
- palette flips, with the :root values; ramps are never redeclared, so a custom
282
- palette still reaches it. */
283
213
  [data-pinfold-theme="light"] {
284
214
  color-scheme: light;
285
215
  --pinfold-color-bg: var(--pinfold-neutral-50);
@@ -293,10 +223,10 @@
293
223
  --pinfold-color-text-muted: var(--pinfold-neutral-600);
294
224
  --pinfold-color-text-subtle: var(--pinfold-neutral-500);
295
225
  --pinfold-color-text-disabled: var(--pinfold-neutral-400);
296
- --pinfold-color-accent: var(--pinfold-accent-600);
297
- --pinfold-color-accent-hover: var(--pinfold-accent-700);
226
+ --pinfold-color-accent: var(--pinfold-primary-600);
227
+ --pinfold-color-accent-hover: var(--pinfold-primary-700);
298
228
  --pinfold-color-accent-contrast: oklch(1 0 0);
299
- --pinfold-color-ring: var(--pinfold-accent-500);
229
+ --pinfold-color-ring: var(--pinfold-primary-500);
300
230
  --pinfold-shadow-color: var(--pinfold-neutral-900);
301
231
  --pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
302
232
  --pinfold-shadow-sm: 0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
@@ -308,7 +238,6 @@
308
238
  --pinfold-shadow-xl: 0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
309
239
  0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
310
240
  --pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 60%, transparent);
311
- /* Derived tokens, recomputed here so nested sections get their own. */
312
241
  --pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
313
242
  --pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
314
243
  --pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
@@ -319,10 +248,6 @@
319
248
  --pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
320
249
  0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
321
250
  }
322
-
323
- /* The radius scale is a multiplier, so the radii are recomputed wherever it can change:
324
- on :root, on a radius preset and on a style pack. (A custom property inherits its
325
- computed value; redeclaring only the scale further down would change nothing.) */
326
251
  :root,
327
252
  [data-pinfold-radius],
328
253
  [data-pinfold-style] {
@@ -333,20 +258,14 @@
333
258
  --pinfold-radius-xl: calc(1rem * var(--pinfold-radius-scale));
334
259
  --pinfold-radius-2xl: calc(1.5rem * var(--pinfold-radius-scale));
335
260
  }
336
-
337
- /* Radius presets, set by the CLI or by <PinfoldProvider radius>. */
338
261
  [data-pinfold-radius="none"] { --pinfold-radius-scale: 0; }
339
262
  [data-pinfold-radius="sm"] { --pinfold-radius-scale: 0.6; }
340
263
  [data-pinfold-radius="md"] { --pinfold-radius-scale: 1; }
341
264
  [data-pinfold-radius="lg"] { --pinfold-radius-scale: 1.5; }
342
265
  [data-pinfold-radius="full"] { --pinfold-radius-scale: 2.4; }
343
-
344
- /* Density presets scale spacing without touching type size. */
345
266
  [data-pinfold-density="compact"] { --pinfold-density: 0.8; }
346
267
  [data-pinfold-density="comfortable"] { --pinfold-density: 1; }
347
268
  [data-pinfold-density="spacious"] { --pinfold-density: 1.25; }
348
-
349
- /* Browsers without color-mix get flat approximations rather than nothing. */
350
269
  @supports not (color: color-mix(in oklch, red, blue)) {
351
270
  :root {
352
271
  --pinfold-color-surface-hover: var(--pinfold-neutral-100);
@@ -362,5 +281,4 @@
362
281
  --pinfold-highlight: none;
363
282
  }
364
283
  }
365
-
366
284
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pinfold/css",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Pinfold styles: tokens, reset and per-component CSS in cascade layers, plus the Tailwind v3 preset and v4 theme. Framework-free.",
5
5
  "author": "Indranil Bhattacharya",
6
6
  "keywords": [