@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/reset.css
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
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
|
+
}
|
package/dist/shadcn.css
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
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
|
+
|
|
17
|
+
:root,
|
|
18
|
+
.dark {
|
|
19
|
+
--background: var(--pinfold-color-bg);
|
|
20
|
+
--foreground: var(--pinfold-color-text);
|
|
21
|
+
--card: var(--pinfold-color-surface);
|
|
22
|
+
--card-foreground: var(--pinfold-color-text);
|
|
23
|
+
--popover: var(--pinfold-color-surface-raised);
|
|
24
|
+
--popover-foreground: var(--pinfold-color-text);
|
|
25
|
+
--primary: var(--pinfold-color-accent);
|
|
26
|
+
--primary-foreground: var(--pinfold-color-accent-contrast);
|
|
27
|
+
--secondary: var(--pinfold-color-bg-subtle);
|
|
28
|
+
--secondary-foreground: var(--pinfold-color-text);
|
|
29
|
+
--muted: var(--pinfold-color-bg-subtle);
|
|
30
|
+
--muted-foreground: var(--pinfold-color-text-muted);
|
|
31
|
+
--accent: var(--pinfold-color-surface-hover);
|
|
32
|
+
--accent-foreground: var(--pinfold-color-text);
|
|
33
|
+
--destructive: var(--pinfold-danger-500);
|
|
34
|
+
--border: var(--pinfold-color-border);
|
|
35
|
+
--input: var(--pinfold-color-border-strong);
|
|
36
|
+
--ring: var(--pinfold-color-ring);
|
|
37
|
+
--radius: var(--pinfold-radius-lg);
|
|
38
|
+
--chart-1: var(--pinfold-primary-500);
|
|
39
|
+
--chart-2: var(--pinfold-info-500);
|
|
40
|
+
--chart-3: var(--pinfold-success-500);
|
|
41
|
+
--chart-4: var(--pinfold-warning-500);
|
|
42
|
+
--chart-5: var(--pinfold-danger-500);
|
|
43
|
+
--sidebar: var(--pinfold-color-bg-subtle);
|
|
44
|
+
--sidebar-foreground: var(--pinfold-color-text);
|
|
45
|
+
--sidebar-primary: var(--pinfold-color-accent);
|
|
46
|
+
--sidebar-primary-foreground: var(--pinfold-color-accent-contrast);
|
|
47
|
+
--sidebar-accent: var(--pinfold-color-surface-hover);
|
|
48
|
+
--sidebar-accent-foreground: var(--pinfold-color-text);
|
|
49
|
+
--sidebar-border: var(--pinfold-color-border);
|
|
50
|
+
--sidebar-ring: var(--pinfold-color-ring);
|
|
51
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/* Pinfold — Tailwind CSS v4 theme.
|
|
2
|
+
*
|
|
3
|
+
* @import "tailwindcss";
|
|
4
|
+
* @import "@pinfold/css/core.css";
|
|
5
|
+
* @import "@pinfold/css/tailwind.css";
|
|
6
|
+
*
|
|
7
|
+
* Maps Pinfold tokens onto Tailwind's `--color-*` / `--radius-*` namespaces, so
|
|
8
|
+
* `bg-primary-600` and `rounded-lg` follow `npx pinfold theme`, dark mode and any
|
|
9
|
+
* runtime override. For Tailwind v3, use the preset instead.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
@theme inline {
|
|
13
|
+
--color-primary-50: var(--pinfold-primary-50);
|
|
14
|
+
--color-primary-100: var(--pinfold-primary-100);
|
|
15
|
+
--color-primary-200: var(--pinfold-primary-200);
|
|
16
|
+
--color-primary-300: var(--pinfold-primary-300);
|
|
17
|
+
--color-primary-400: var(--pinfold-primary-400);
|
|
18
|
+
--color-primary-500: var(--pinfold-primary-500);
|
|
19
|
+
--color-primary-600: var(--pinfold-primary-600);
|
|
20
|
+
--color-primary-700: var(--pinfold-primary-700);
|
|
21
|
+
--color-primary-800: var(--pinfold-primary-800);
|
|
22
|
+
--color-primary-900: var(--pinfold-primary-900);
|
|
23
|
+
--color-primary-950: var(--pinfold-primary-950);
|
|
24
|
+
|
|
25
|
+
--color-neutral-50: var(--pinfold-neutral-50);
|
|
26
|
+
--color-neutral-100: var(--pinfold-neutral-100);
|
|
27
|
+
--color-neutral-200: var(--pinfold-neutral-200);
|
|
28
|
+
--color-neutral-300: var(--pinfold-neutral-300);
|
|
29
|
+
--color-neutral-400: var(--pinfold-neutral-400);
|
|
30
|
+
--color-neutral-500: var(--pinfold-neutral-500);
|
|
31
|
+
--color-neutral-600: var(--pinfold-neutral-600);
|
|
32
|
+
--color-neutral-700: var(--pinfold-neutral-700);
|
|
33
|
+
--color-neutral-800: var(--pinfold-neutral-800);
|
|
34
|
+
--color-neutral-900: var(--pinfold-neutral-900);
|
|
35
|
+
--color-neutral-950: var(--pinfold-neutral-950);
|
|
36
|
+
|
|
37
|
+
--color-accent: var(--pinfold-color-accent);
|
|
38
|
+
--color-accent-300: var(--pinfold-accent-300);
|
|
39
|
+
--color-accent-400: var(--pinfold-accent-400);
|
|
40
|
+
--color-accent-500: var(--pinfold-accent-500);
|
|
41
|
+
--color-accent-600: var(--pinfold-accent-600);
|
|
42
|
+
--color-accent-700: var(--pinfold-accent-700);
|
|
43
|
+
|
|
44
|
+
--color-success-500: var(--pinfold-success-500);
|
|
45
|
+
--color-warning-500: var(--pinfold-warning-500);
|
|
46
|
+
--color-danger-500: var(--pinfold-danger-500);
|
|
47
|
+
--color-info-500: var(--pinfold-info-500);
|
|
48
|
+
|
|
49
|
+
--color-bg: var(--pinfold-color-bg);
|
|
50
|
+
--color-bg-subtle: var(--pinfold-color-bg-subtle);
|
|
51
|
+
--color-surface: var(--pinfold-color-surface);
|
|
52
|
+
--color-surface-raised: var(--pinfold-color-surface-raised);
|
|
53
|
+
--color-surface-hover: var(--pinfold-color-surface-hover);
|
|
54
|
+
--color-surface-selected: var(--pinfold-color-surface-selected);
|
|
55
|
+
--color-content: var(--pinfold-color-text);
|
|
56
|
+
--color-content-muted: var(--pinfold-color-text-muted);
|
|
57
|
+
--color-content-subtle: var(--pinfold-color-text-subtle);
|
|
58
|
+
--color-line: var(--pinfold-color-border);
|
|
59
|
+
--color-line-strong: var(--pinfold-color-border-strong);
|
|
60
|
+
|
|
61
|
+
--radius-xs: var(--pinfold-radius-xs);
|
|
62
|
+
--radius-sm: var(--pinfold-radius-sm);
|
|
63
|
+
--radius-md: var(--pinfold-radius-md);
|
|
64
|
+
--radius-lg: var(--pinfold-radius-lg);
|
|
65
|
+
--radius-xl: var(--pinfold-radius-xl);
|
|
66
|
+
--radius-2xl: var(--pinfold-radius-2xl);
|
|
67
|
+
|
|
68
|
+
--font-sans: var(--pinfold-font-sans);
|
|
69
|
+
--font-mono: var(--pinfold-font-mono);
|
|
70
|
+
|
|
71
|
+
--shadow-xs: var(--pinfold-shadow-xs);
|
|
72
|
+
--shadow-sm: var(--pinfold-shadow-sm);
|
|
73
|
+
--shadow-md: var(--pinfold-shadow-md);
|
|
74
|
+
--shadow-lg: var(--pinfold-shadow-lg);
|
|
75
|
+
--shadow-xl: var(--pinfold-shadow-xl);
|
|
76
|
+
|
|
77
|
+
--ease-pinfold: var(--pinfold-ease);
|
|
78
|
+
--ease-pinfold-out: var(--pinfold-ease-out);
|
|
79
|
+
--ease-pinfold-spring: var(--pinfold-ease-spring);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Variants matching the `data-*` state Pinfold components expose. */
|
|
83
|
+
@custom-variant open (&[data-state="open"]);
|
|
84
|
+
@custom-variant closed (&[data-state="closed"]);
|
|
85
|
+
@custom-variant selected (&[data-state="selected"]);
|
|
86
|
+
@custom-variant disabled-row (&[data-disabled]);
|
|
87
|
+
@custom-variant pinfold-dark (&:is([data-pinfold-theme="dark"] *));
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,366 @@
|
|
|
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
|
+
|
|
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
|
+
@layer pinfold.tokens {
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
color-scheme: light dark;
|
|
18
|
+
|
|
19
|
+
/* ---------------------------------------------------------------- ramps */
|
|
20
|
+
--pinfold-primary-50: oklch(0.977 0.014 274);
|
|
21
|
+
--pinfold-primary-100: oklch(0.946 0.033 274);
|
|
22
|
+
--pinfold-primary-200: oklch(0.902 0.063 274);
|
|
23
|
+
--pinfold-primary-300: oklch(0.828 0.111 274);
|
|
24
|
+
--pinfold-primary-400: oklch(0.714 0.163 274);
|
|
25
|
+
--pinfold-primary-500: oklch(0.606 0.201 274);
|
|
26
|
+
--pinfold-primary-600: oklch(0.541 0.223 274);
|
|
27
|
+
--pinfold-primary-700: oklch(0.491 0.216 274);
|
|
28
|
+
--pinfold-primary-800: oklch(0.432 0.181 274);
|
|
29
|
+
--pinfold-primary-900: oklch(0.380 0.146 274);
|
|
30
|
+
--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
|
+
--pinfold-accent-300: var(--pinfold-primary-300);
|
|
34
|
+
--pinfold-accent-400: var(--pinfold-primary-400);
|
|
35
|
+
--pinfold-accent-500: var(--pinfold-primary-500);
|
|
36
|
+
--pinfold-accent-600: var(--pinfold-primary-600);
|
|
37
|
+
--pinfold-accent-700: var(--pinfold-primary-700);
|
|
38
|
+
|
|
39
|
+
--pinfold-neutral-50: oklch(0.985 0.002 274);
|
|
40
|
+
--pinfold-neutral-100: oklch(0.967 0.003 274);
|
|
41
|
+
--pinfold-neutral-200: oklch(0.928 0.006 274);
|
|
42
|
+
--pinfold-neutral-300: oklch(0.872 0.010 274);
|
|
43
|
+
--pinfold-neutral-400: oklch(0.707 0.015 274);
|
|
44
|
+
--pinfold-neutral-500: oklch(0.551 0.019 274);
|
|
45
|
+
--pinfold-neutral-600: oklch(0.446 0.021 274);
|
|
46
|
+
--pinfold-neutral-700: oklch(0.373 0.023 274);
|
|
47
|
+
--pinfold-neutral-800: oklch(0.279 0.023 274);
|
|
48
|
+
--pinfold-neutral-900: oklch(0.210 0.021 274);
|
|
49
|
+
--pinfold-neutral-950: oklch(0.145 0.017 274);
|
|
50
|
+
|
|
51
|
+
--pinfold-success-100: oklch(0.946 0.033 158);
|
|
52
|
+
--pinfold-success-300: oklch(0.828 0.111 158);
|
|
53
|
+
--pinfold-success-500: oklch(0.606 0.201 158);
|
|
54
|
+
--pinfold-success-700: oklch(0.491 0.216 158);
|
|
55
|
+
--pinfold-success-900: oklch(0.380 0.146 158);
|
|
56
|
+
|
|
57
|
+
--pinfold-warning-100: oklch(0.946 0.033 78);
|
|
58
|
+
--pinfold-warning-300: oklch(0.828 0.111 78);
|
|
59
|
+
--pinfold-warning-500: oklch(0.606 0.201 78);
|
|
60
|
+
--pinfold-warning-700: oklch(0.491 0.216 78);
|
|
61
|
+
--pinfold-warning-900: oklch(0.380 0.146 78);
|
|
62
|
+
|
|
63
|
+
--pinfold-danger-100: oklch(0.946 0.033 27);
|
|
64
|
+
--pinfold-danger-300: oklch(0.828 0.111 27);
|
|
65
|
+
--pinfold-danger-500: oklch(0.606 0.201 27);
|
|
66
|
+
--pinfold-danger-700: oklch(0.491 0.216 27);
|
|
67
|
+
--pinfold-danger-900: oklch(0.380 0.146 27);
|
|
68
|
+
|
|
69
|
+
--pinfold-info-100: oklch(0.946 0.033 245);
|
|
70
|
+
--pinfold-info-300: oklch(0.828 0.111 245);
|
|
71
|
+
--pinfold-info-500: oklch(0.606 0.201 245);
|
|
72
|
+
--pinfold-info-700: oklch(0.491 0.216 245);
|
|
73
|
+
--pinfold-info-900: oklch(0.380 0.146 245);
|
|
74
|
+
|
|
75
|
+
/* ------------------------------------------------------------ semantics */
|
|
76
|
+
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
77
|
+
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
78
|
+
--pinfold-color-surface: oklch(1 0 0);
|
|
79
|
+
--pinfold-color-surface-raised: oklch(1 0 0);
|
|
80
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
85
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
86
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
87
|
+
|
|
88
|
+
--pinfold-color-border: var(--pinfold-neutral-200);
|
|
89
|
+
--pinfold-color-border-strong: var(--pinfold-neutral-300);
|
|
90
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
91
|
+
|
|
92
|
+
--pinfold-color-text: var(--pinfold-neutral-900);
|
|
93
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
94
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
95
|
+
--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);
|
|
99
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
100
|
+
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
101
|
+
|
|
102
|
+
--pinfold-color-ring: var(--pinfold-accent-500);
|
|
103
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
104
|
+
--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
|
+
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
111
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
112
|
+
--pinfold-shadow-sm:
|
|
113
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
|
|
114
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent);
|
|
115
|
+
--pinfold-shadow-md:
|
|
116
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 7%, transparent),
|
|
117
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent);
|
|
118
|
+
--pinfold-shadow-lg:
|
|
119
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
120
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 14%, transparent);
|
|
121
|
+
--pinfold-shadow-xl:
|
|
122
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
123
|
+
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
|
+
--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
|
+
--pinfold-border-width: 1px;
|
|
131
|
+
--pinfold-backdrop: none;
|
|
132
|
+
--pinfold-texture: none;
|
|
133
|
+
|
|
134
|
+
/* ---------------------------------------------------------------- focus */
|
|
135
|
+
--pinfold-focus-width: 2px;
|
|
136
|
+
--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
|
+
--pinfold-focus-ring:
|
|
140
|
+
0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
141
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
142
|
+
|
|
143
|
+
/* ---------------------------------------------------------------- shape */
|
|
144
|
+
--pinfold-radius-scale: 1;
|
|
145
|
+
--pinfold-radius-full: 9999px;
|
|
146
|
+
|
|
147
|
+
/* -------------------------------------------------------------- spacing */
|
|
148
|
+
--pinfold-space-1: 0.25rem;
|
|
149
|
+
--pinfold-space-2: 0.5rem;
|
|
150
|
+
--pinfold-space-3: 0.75rem;
|
|
151
|
+
--pinfold-space-4: 1rem;
|
|
152
|
+
--pinfold-space-5: 1.25rem;
|
|
153
|
+
--pinfold-space-6: 1.5rem;
|
|
154
|
+
--pinfold-space-8: 2rem;
|
|
155
|
+
--pinfold-space-10: 2.5rem;
|
|
156
|
+
|
|
157
|
+
/* ----------------------------------------------------------- typography */
|
|
158
|
+
--pinfold-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
|
|
159
|
+
"Helvetica Neue", Arial, sans-serif;
|
|
160
|
+
--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
|
+
--pinfold-text-xs: 0.75rem;
|
|
163
|
+
--pinfold-text-sm: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
|
|
164
|
+
--pinfold-text-md: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
|
|
165
|
+
--pinfold-text-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
|
|
166
|
+
--pinfold-text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.375rem);
|
|
167
|
+
--pinfold-leading-tight: 1.3;
|
|
168
|
+
--pinfold-leading-normal: 1.55;
|
|
169
|
+
--pinfold-weight-normal: 400;
|
|
170
|
+
--pinfold-weight-medium: 500;
|
|
171
|
+
--pinfold-weight-semibold: 600;
|
|
172
|
+
/* Larger text needs tighter tracking to look optically even. */
|
|
173
|
+
--pinfold-tracking-tight: -0.011em;
|
|
174
|
+
--pinfold-tracking-normal: 0em;
|
|
175
|
+
--pinfold-tracking-wide: 0.02em;
|
|
176
|
+
|
|
177
|
+
/* --------------------------------------------------------------- motion */
|
|
178
|
+
--pinfold-duration-fast: 120ms;
|
|
179
|
+
--pinfold-duration-md: 200ms;
|
|
180
|
+
--pinfold-duration-slow: 320ms;
|
|
181
|
+
/* Decelerating curve — fast start, soft landing. Reads as responsive. */
|
|
182
|
+
--pinfold-ease: cubic-bezier(0.32, 0.72, 0, 1);
|
|
183
|
+
--pinfold-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
184
|
+
--pinfold-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
185
|
+
/* One gentle overshoot, for things that appear rather than move. */
|
|
186
|
+
--pinfold-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
187
|
+
|
|
188
|
+
/* ---------------------------------------------------------------- layer */
|
|
189
|
+
--pinfold-z-dropdown: 1000;
|
|
190
|
+
--pinfold-z-sticky: 1100;
|
|
191
|
+
--pinfold-z-overlay: 1200;
|
|
192
|
+
--pinfold-z-modal: 1300;
|
|
193
|
+
--pinfold-z-toast: 1400;
|
|
194
|
+
--pinfold-z-tooltip: 1500;
|
|
195
|
+
}
|
|
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
|
+
@media (prefers-color-scheme: dark) {
|
|
200
|
+
:root:not([data-pinfold-theme="light"]) {
|
|
201
|
+
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
202
|
+
--pinfold-color-bg-subtle: oklch(0.178 0.019 274);
|
|
203
|
+
--pinfold-color-surface: oklch(0.196 0.020 274);
|
|
204
|
+
--pinfold-color-surface-raised: oklch(0.232 0.021 274);
|
|
205
|
+
--pinfold-color-surface-sunken: oklch(0.165 0.018 274);
|
|
206
|
+
--pinfold-color-border: oklch(0.286 0.023 274);
|
|
207
|
+
--pinfold-color-border-strong: oklch(0.352 0.024 274);
|
|
208
|
+
--pinfold-color-text: var(--pinfold-neutral-100);
|
|
209
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
210
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
211
|
+
--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);
|
|
216
|
+
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
217
|
+
--pinfold-color-ring: var(--pinfold-accent-400);
|
|
218
|
+
--pinfold-shadow-color: oklch(0 0 0);
|
|
219
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
220
|
+
--pinfold-shadow-sm:
|
|
221
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent),
|
|
222
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent);
|
|
223
|
+
--pinfold-shadow-md:
|
|
224
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 45%, transparent),
|
|
225
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent);
|
|
226
|
+
--pinfold-shadow-lg:
|
|
227
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent),
|
|
228
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent);
|
|
229
|
+
--pinfold-shadow-xl:
|
|
230
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
|
|
231
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
|
|
232
|
+
--pinfold-highlight: inset 0 1px 0 color-mix(in oklch, oklch(1 0 0) 8%, transparent);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
[data-pinfold-theme="dark"] {
|
|
237
|
+
color-scheme: dark;
|
|
238
|
+
--pinfold-color-bg: var(--pinfold-neutral-950);
|
|
239
|
+
--pinfold-color-bg-subtle: oklch(0.178 0.019 274);
|
|
240
|
+
--pinfold-color-surface: oklch(0.196 0.020 274);
|
|
241
|
+
--pinfold-color-surface-raised: oklch(0.232 0.021 274);
|
|
242
|
+
--pinfold-color-surface-sunken: oklch(0.165 0.018 274);
|
|
243
|
+
--pinfold-color-border: oklch(0.286 0.023 274);
|
|
244
|
+
--pinfold-color-border-strong: oklch(0.352 0.024 274);
|
|
245
|
+
--pinfold-color-text: var(--pinfold-neutral-100);
|
|
246
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-400);
|
|
247
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
248
|
+
--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);
|
|
251
|
+
--pinfold-color-accent-contrast: var(--pinfold-neutral-950);
|
|
252
|
+
--pinfold-color-ring: var(--pinfold-accent-400);
|
|
253
|
+
--pinfold-shadow-color: oklch(0 0 0);
|
|
254
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 30%, transparent);
|
|
255
|
+
--pinfold-shadow-sm:
|
|
256
|
+
0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent),
|
|
257
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 40%, transparent);
|
|
258
|
+
--pinfold-shadow-md:
|
|
259
|
+
0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 45%, transparent),
|
|
260
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent);
|
|
261
|
+
--pinfold-shadow-lg:
|
|
262
|
+
0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 50%, transparent),
|
|
263
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent);
|
|
264
|
+
--pinfold-shadow-xl:
|
|
265
|
+
0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 55%, transparent),
|
|
266
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 60%, transparent);
|
|
267
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
270
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
271
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
272
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
273
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
274
|
+
--pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
|
|
275
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
276
|
+
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
277
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
278
|
+
}
|
|
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
|
+
[data-pinfold-theme="light"] {
|
|
284
|
+
color-scheme: light;
|
|
285
|
+
--pinfold-color-bg: var(--pinfold-neutral-50);
|
|
286
|
+
--pinfold-color-bg-subtle: var(--pinfold-neutral-100);
|
|
287
|
+
--pinfold-color-surface: oklch(1 0 0);
|
|
288
|
+
--pinfold-color-surface-raised: oklch(1 0 0);
|
|
289
|
+
--pinfold-color-surface-sunken: var(--pinfold-neutral-100);
|
|
290
|
+
--pinfold-color-border: var(--pinfold-neutral-200);
|
|
291
|
+
--pinfold-color-border-strong: var(--pinfold-neutral-300);
|
|
292
|
+
--pinfold-color-text: var(--pinfold-neutral-900);
|
|
293
|
+
--pinfold-color-text-muted: var(--pinfold-neutral-600);
|
|
294
|
+
--pinfold-color-text-subtle: var(--pinfold-neutral-500);
|
|
295
|
+
--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);
|
|
298
|
+
--pinfold-color-accent-contrast: oklch(1 0 0);
|
|
299
|
+
--pinfold-color-ring: var(--pinfold-accent-500);
|
|
300
|
+
--pinfold-shadow-color: var(--pinfold-neutral-900);
|
|
301
|
+
--pinfold-shadow-xs: 0 1px 1px color-mix(in oklch, var(--pinfold-shadow-color) 5%, transparent);
|
|
302
|
+
--pinfold-shadow-sm: 0 1px 2px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent),
|
|
303
|
+
0 1px 3px -1px color-mix(in oklch, var(--pinfold-shadow-color) 6%, transparent);
|
|
304
|
+
--pinfold-shadow-md: 0 2px 4px -1px color-mix(in oklch, var(--pinfold-shadow-color) 7%, transparent),
|
|
305
|
+
0 8px 20px -6px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent);
|
|
306
|
+
--pinfold-shadow-lg: 0 4px 8px -2px color-mix(in oklch, var(--pinfold-shadow-color) 8%, transparent),
|
|
307
|
+
0 16px 40px -12px color-mix(in oklch, var(--pinfold-shadow-color) 14%, transparent);
|
|
308
|
+
--pinfold-shadow-xl: 0 8px 16px -4px color-mix(in oklch, var(--pinfold-shadow-color) 10%, transparent),
|
|
309
|
+
0 32px 72px -20px color-mix(in oklch, var(--pinfold-shadow-color) 18%, transparent);
|
|
310
|
+
--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
|
+
--pinfold-color-surface-hover: color-mix(in oklch, var(--pinfold-color-accent) 6%, var(--pinfold-color-surface));
|
|
313
|
+
--pinfold-color-surface-active: color-mix(in oklch, var(--pinfold-color-accent) 11%, var(--pinfold-color-surface));
|
|
314
|
+
--pinfold-color-surface-selected: color-mix(in oklch, var(--pinfold-color-accent) 14%, var(--pinfold-color-surface));
|
|
315
|
+
--pinfold-color-border-accent: color-mix(in oklch, var(--pinfold-color-accent) 45%, var(--pinfold-color-border));
|
|
316
|
+
--pinfold-color-accent-subtle: color-mix(in oklch, var(--pinfold-color-accent) 10%, transparent);
|
|
317
|
+
--pinfold-color-selection: color-mix(in oklch, var(--pinfold-color-accent) 22%, transparent);
|
|
318
|
+
--pinfold-color-overlay: color-mix(in oklch, var(--pinfold-neutral-950) 45%, transparent);
|
|
319
|
+
--pinfold-focus-ring: 0 0 0 var(--pinfold-focus-offset) var(--pinfold-color-bg),
|
|
320
|
+
0 0 0 calc(var(--pinfold-focus-offset) + var(--pinfold-focus-width)) var(--pinfold-color-ring);
|
|
321
|
+
}
|
|
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
|
+
:root,
|
|
327
|
+
[data-pinfold-radius],
|
|
328
|
+
[data-pinfold-style] {
|
|
329
|
+
--pinfold-radius-xs: calc(0.25rem * var(--pinfold-radius-scale));
|
|
330
|
+
--pinfold-radius-sm: calc(0.375rem * var(--pinfold-radius-scale));
|
|
331
|
+
--pinfold-radius-md: calc(0.5rem * var(--pinfold-radius-scale));
|
|
332
|
+
--pinfold-radius-lg: calc(0.75rem * var(--pinfold-radius-scale));
|
|
333
|
+
--pinfold-radius-xl: calc(1rem * var(--pinfold-radius-scale));
|
|
334
|
+
--pinfold-radius-2xl: calc(1.5rem * var(--pinfold-radius-scale));
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
/* Radius presets, set by the CLI or by <PinfoldProvider radius>. */
|
|
338
|
+
[data-pinfold-radius="none"] { --pinfold-radius-scale: 0; }
|
|
339
|
+
[data-pinfold-radius="sm"] { --pinfold-radius-scale: 0.6; }
|
|
340
|
+
[data-pinfold-radius="md"] { --pinfold-radius-scale: 1; }
|
|
341
|
+
[data-pinfold-radius="lg"] { --pinfold-radius-scale: 1.5; }
|
|
342
|
+
[data-pinfold-radius="full"] { --pinfold-radius-scale: 2.4; }
|
|
343
|
+
|
|
344
|
+
/* Density presets scale spacing without touching type size. */
|
|
345
|
+
[data-pinfold-density="compact"] { --pinfold-density: 0.8; }
|
|
346
|
+
[data-pinfold-density="comfortable"] { --pinfold-density: 1; }
|
|
347
|
+
[data-pinfold-density="spacious"] { --pinfold-density: 1.25; }
|
|
348
|
+
|
|
349
|
+
/* Browsers without color-mix get flat approximations rather than nothing. */
|
|
350
|
+
@supports not (color: color-mix(in oklch, red, blue)) {
|
|
351
|
+
:root {
|
|
352
|
+
--pinfold-color-surface-hover: var(--pinfold-neutral-100);
|
|
353
|
+
--pinfold-color-surface-active: var(--pinfold-neutral-200);
|
|
354
|
+
--pinfold-color-surface-selected: var(--pinfold-neutral-200);
|
|
355
|
+
--pinfold-color-border-accent: var(--pinfold-color-accent);
|
|
356
|
+
--pinfold-color-accent-subtle: var(--pinfold-primary-50);
|
|
357
|
+
--pinfold-color-overlay: var(--pinfold-neutral-900);
|
|
358
|
+
--pinfold-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
359
|
+
--pinfold-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.1);
|
|
360
|
+
--pinfold-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
|
|
361
|
+
--pinfold-shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.18);
|
|
362
|
+
--pinfold-highlight: none;
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,57 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinfold/css",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Pinfold styles: tokens, reset and per-component CSS in cascade layers, plus the Tailwind v3 preset and v4 theme. Framework-free.",
|
|
5
|
+
"author": "Indranil Bhattacharya",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"pinfold",
|
|
8
|
+
"css",
|
|
9
|
+
"design-tokens",
|
|
10
|
+
"tailwind",
|
|
11
|
+
"tailwindcss",
|
|
12
|
+
"oklch",
|
|
13
|
+
"cascade-layers"
|
|
14
|
+
],
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"homepage": "https://pinfold.indranildev.in",
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "git+https://github.com/IndranilBhattacharya/pinfold.git",
|
|
20
|
+
"directory": "packages/css"
|
|
21
|
+
},
|
|
22
|
+
"bugs": "https://github.com/IndranilBhattacharya/pinfold/issues",
|
|
23
|
+
"sideEffects": [
|
|
24
|
+
"*.css"
|
|
25
|
+
],
|
|
26
|
+
"exports": {
|
|
27
|
+
"./core.css": "./dist/core.css",
|
|
28
|
+
"./reset.css": "./dist/reset.css",
|
|
29
|
+
"./tokens.css": "./dist/tokens.css",
|
|
30
|
+
"./all.css": "./dist/all.css",
|
|
31
|
+
"./accordion.css": "./dist/accordion.css",
|
|
32
|
+
"./packs.css": "./dist/packs.css",
|
|
33
|
+
"./shadcn.css": "./dist/shadcn.css",
|
|
34
|
+
"./tailwind.css": "./dist/tailwind.css",
|
|
35
|
+
"./tailwind": "./tailwind/preset.cjs",
|
|
36
|
+
"./package.json": "./package.json"
|
|
37
|
+
},
|
|
38
|
+
"files": [
|
|
39
|
+
"dist",
|
|
40
|
+
"tailwind"
|
|
41
|
+
],
|
|
42
|
+
"scripts": {
|
|
43
|
+
"build": "node build.mjs"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"tailwindcss": ">=3"
|
|
47
|
+
},
|
|
48
|
+
"peerDependenciesMeta": {
|
|
49
|
+
"tailwindcss": {
|
|
50
|
+
"optional": true
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"publishConfig": {
|
|
54
|
+
"access": "public",
|
|
55
|
+
"provenance": true
|
|
56
|
+
}
|
|
57
|
+
}
|