@pickle-ui/react 1.0.0-beta.4 → 1.0.0-beta.5
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 +7 -4
- package/package.json +14 -16
- package/src/theme.css +1 -195
package/README.md
CHANGED
|
@@ -228,7 +228,8 @@ own:
|
|
|
228
228
|
|
|
229
229
|
- `@pickle-ui/react/theme.css` holds the tokens only: the Tailwind theme mapping and
|
|
230
230
|
the light and dark values. Import it to share Pickle's palette in a project
|
|
231
|
-
that does not use the components.
|
|
231
|
+
that does not use the components. It re-exports `@pickle-ui/tokens/theme.css`,
|
|
232
|
+
which `@pickle-ui/react` installs as a dependency.
|
|
232
233
|
- `@pickle-ui/react/base.css` holds everything else: animation and variant plugins,
|
|
233
234
|
the `.dark` variant, the `Text` type scale, shared utilities, and element
|
|
234
235
|
resets. Import it with a token set of your own instead of `theme.css`.
|
|
@@ -482,9 +483,11 @@ pnpm run lint
|
|
|
482
483
|
|
|
483
484
|
## Releasing
|
|
484
485
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
486
|
+
Releases use [Changesets](https://changesets.dev). Add a changeset to every
|
|
487
|
+
pull request that changes a package (`pnpm changeset`). On `main`, the
|
|
488
|
+
`Release` workflow keeps a "Version Packages" pull request up to date; merging
|
|
489
|
+
it publishes each package that changed. Packages version independently, and a
|
|
490
|
+
new `@pickle-ui/tokens` release always comes with a new `@pickle-ui/react`.
|
|
488
491
|
|
|
489
492
|
## License
|
|
490
493
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pickle-ui/react",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React component library built with Base UI, shadcn/ui, Tailwind CSS, and reui.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -36,18 +36,6 @@
|
|
|
36
36
|
"dist",
|
|
37
37
|
"src"
|
|
38
38
|
],
|
|
39
|
-
"scripts": {
|
|
40
|
-
"dev": "storybook dev -p 6006",
|
|
41
|
-
"clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
|
|
42
|
-
"build": "pnpm run clean && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths",
|
|
43
|
-
"typecheck": "tsc --noEmit",
|
|
44
|
-
"storybook": "storybook dev -p 6006",
|
|
45
|
-
"build-storybook": "storybook build",
|
|
46
|
-
"test": "vitest run",
|
|
47
|
-
"doctor": "react-doctor",
|
|
48
|
-
"prepublishOnly": "pnpm run build",
|
|
49
|
-
"release": "release-it"
|
|
50
|
-
},
|
|
51
39
|
"keywords": [
|
|
52
40
|
"react",
|
|
53
41
|
"components",
|
|
@@ -65,7 +53,8 @@
|
|
|
65
53
|
"clsx": "^2.1.1",
|
|
66
54
|
"culori": "^4.0.2",
|
|
67
55
|
"tailwind-merge": "^3.6.0",
|
|
68
|
-
"tw-animate-css": "^1.4.0"
|
|
56
|
+
"tw-animate-css": "^1.4.0",
|
|
57
|
+
"@pickle-ui/tokens": "1.0.0-beta.5"
|
|
69
58
|
},
|
|
70
59
|
"devDependencies": {
|
|
71
60
|
"@fontsource-variable/geist": "5.2.9",
|
|
@@ -90,7 +79,6 @@
|
|
|
90
79
|
"react-doctor": "^0.5.6",
|
|
91
80
|
"react-dom": "^19.2.7",
|
|
92
81
|
"react-hook-form": "^7.79.0",
|
|
93
|
-
"release-it": "^20.2.0",
|
|
94
82
|
"storybook": "^10.6.3",
|
|
95
83
|
"storybook-addon-pseudo-states": "^10.6.3",
|
|
96
84
|
"tailwindcss": "^4.3.0",
|
|
@@ -105,5 +93,15 @@
|
|
|
105
93
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
106
94
|
"react-hook-form": "^7.0.0",
|
|
107
95
|
"tailwindcss": "^4.0.0"
|
|
96
|
+
},
|
|
97
|
+
"scripts": {
|
|
98
|
+
"dev": "storybook dev -p 6006",
|
|
99
|
+
"clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true })\"",
|
|
100
|
+
"build": "pnpm run clean && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json --resolve-full-paths",
|
|
101
|
+
"typecheck": "tsc --noEmit",
|
|
102
|
+
"storybook": "storybook dev -p 6006",
|
|
103
|
+
"build-storybook": "storybook build",
|
|
104
|
+
"test": "vitest run",
|
|
105
|
+
"doctor": "react-doctor"
|
|
108
106
|
}
|
|
109
|
-
}
|
|
107
|
+
}
|
package/src/theme.css
CHANGED
|
@@ -1,195 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Pickle design tokens: Tailwind theme mapping plus light and dark values.
|
|
3
|
-
* Import this file alone to reuse the tokens without Pickle's base styles,
|
|
4
|
-
* or override any variable after importing `@pickle-ui/react/styles.css`.
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
@theme inline {
|
|
8
|
-
--font-sans: var(--font-sans);
|
|
9
|
-
--font-heading: var(--font-sans);
|
|
10
|
-
--font-mono: var(--font-mono);
|
|
11
|
-
--color-background: var(--background);
|
|
12
|
-
--color-foreground: var(--foreground);
|
|
13
|
-
--color-card: var(--card);
|
|
14
|
-
--color-card-foreground: var(--card-foreground);
|
|
15
|
-
--color-popover: var(--popover);
|
|
16
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
17
|
-
--color-primary: var(--primary);
|
|
18
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
19
|
-
--color-secondary: var(--secondary);
|
|
20
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
21
|
-
--color-muted: var(--muted);
|
|
22
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
23
|
-
--color-accent: var(--accent);
|
|
24
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
25
|
-
--color-destructive: var(--destructive);
|
|
26
|
-
--color-destructive-foreground: var(--destructive-foreground);
|
|
27
|
-
--color-destructive-subtle: var(--destructive-subtle);
|
|
28
|
-
--color-destructive-subtle-foreground: var(--destructive-subtle-foreground);
|
|
29
|
-
--color-info: var(--info);
|
|
30
|
-
--color-info-foreground: var(--info-foreground);
|
|
31
|
-
--color-info-subtle: var(--info-subtle);
|
|
32
|
-
--color-info-subtle-foreground: var(--info-subtle-foreground);
|
|
33
|
-
--color-success: var(--success);
|
|
34
|
-
--color-success-foreground: var(--success-foreground);
|
|
35
|
-
--color-success-subtle: var(--success-subtle);
|
|
36
|
-
--color-success-subtle-foreground: var(--success-subtle-foreground);
|
|
37
|
-
--color-warning: var(--warning);
|
|
38
|
-
--color-warning-foreground: var(--warning-foreground);
|
|
39
|
-
--color-warning-subtle: var(--warning-subtle);
|
|
40
|
-
--color-warning-subtle-foreground: var(--warning-subtle-foreground);
|
|
41
|
-
--color-border: var(--border);
|
|
42
|
-
--color-input: var(--input);
|
|
43
|
-
--color-ring: var(--ring);
|
|
44
|
-
--color-chart-1: var(--chart-1);
|
|
45
|
-
--color-chart-2: var(--chart-2);
|
|
46
|
-
--color-chart-3: var(--chart-3);
|
|
47
|
-
--color-chart-4: var(--chart-4);
|
|
48
|
-
--color-chart-5: var(--chart-5);
|
|
49
|
-
--color-sidebar: var(--sidebar);
|
|
50
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
51
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
52
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
53
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
54
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
55
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
56
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
57
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
58
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
59
|
-
--radius-lg: var(--radius);
|
|
60
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
61
|
-
--radius-2xl: calc(var(--radius) + 8px);
|
|
62
|
-
--animate-skeleton: skeleton 2s -1s infinite linear;
|
|
63
|
-
@keyframes skeleton {
|
|
64
|
-
to {
|
|
65
|
-
background-position: -200% 0;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
:root {
|
|
71
|
-
--radius: 0.625rem;
|
|
72
|
-
--background: var(--color-white);
|
|
73
|
-
--foreground: var(--color-neutral-800);
|
|
74
|
-
--card: var(--color-white);
|
|
75
|
-
--card-foreground: var(--color-neutral-800);
|
|
76
|
-
--popover: var(--color-white);
|
|
77
|
-
--popover-foreground: var(--color-neutral-800);
|
|
78
|
-
--primary: var(--color-neutral-800);
|
|
79
|
-
--primary-foreground: var(--color-neutral-50);
|
|
80
|
-
--secondary: --alpha(var(--color-black) / 4%);
|
|
81
|
-
--secondary-foreground: var(--color-neutral-800);
|
|
82
|
-
--muted: --alpha(var(--color-black) / 4%);
|
|
83
|
-
--muted-foreground: color-mix(
|
|
84
|
-
in srgb,
|
|
85
|
-
var(--color-neutral-500) 90%,
|
|
86
|
-
var(--color-black)
|
|
87
|
-
);
|
|
88
|
-
--accent: --alpha(var(--color-black) / 4%);
|
|
89
|
-
--accent-foreground: var(--color-neutral-800);
|
|
90
|
-
--destructive: var(--color-red-500);
|
|
91
|
-
--destructive-foreground: var(--color-white);
|
|
92
|
-
--destructive-subtle: --alpha(var(--destructive) / 8%);
|
|
93
|
-
--destructive-subtle-foreground: var(--color-red-700);
|
|
94
|
-
--info: var(--color-blue-500);
|
|
95
|
-
--info-foreground: var(--color-white);
|
|
96
|
-
--info-subtle: --alpha(var(--info) / 8%);
|
|
97
|
-
--info-subtle-foreground: var(--color-blue-700);
|
|
98
|
-
--success: var(--color-emerald-500);
|
|
99
|
-
--success-foreground: var(--color-white);
|
|
100
|
-
--success-subtle: --alpha(var(--success) / 8%);
|
|
101
|
-
--success-subtle-foreground: var(--color-emerald-700);
|
|
102
|
-
--warning: var(--color-amber-500);
|
|
103
|
-
--warning-foreground: var(--color-amber-950);
|
|
104
|
-
--warning-subtle: --alpha(var(--warning) / 8%);
|
|
105
|
-
--warning-subtle-foreground: var(--color-amber-700);
|
|
106
|
-
--border: --alpha(var(--color-black) / 8%);
|
|
107
|
-
--input: --alpha(var(--color-black) / 10%);
|
|
108
|
-
--ring: var(--color-neutral-400);
|
|
109
|
-
--chart-1: var(--color-blue-600);
|
|
110
|
-
--chart-2: var(--color-emerald-600);
|
|
111
|
-
--chart-3: var(--color-amber-600);
|
|
112
|
-
--chart-4: var(--color-purple-600);
|
|
113
|
-
--chart-5: var(--color-rose-600);
|
|
114
|
-
--sidebar: var(--color-neutral-50);
|
|
115
|
-
--sidebar-foreground: color-mix(
|
|
116
|
-
in srgb,
|
|
117
|
-
var(--color-neutral-800) 64%,
|
|
118
|
-
var(--sidebar)
|
|
119
|
-
);
|
|
120
|
-
--sidebar-primary: var(--color-neutral-800);
|
|
121
|
-
--sidebar-primary-foreground: var(--color-neutral-50);
|
|
122
|
-
--sidebar-accent: --alpha(var(--color-black) / 4%);
|
|
123
|
-
--sidebar-accent-foreground: var(--color-neutral-800);
|
|
124
|
-
--sidebar-border: --alpha(var(--color-black) / 6%);
|
|
125
|
-
--sidebar-ring: var(--color-neutral-400);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.dark {
|
|
129
|
-
--background: color-mix(
|
|
130
|
-
in srgb,
|
|
131
|
-
var(--color-neutral-950) 96%,
|
|
132
|
-
var(--color-white)
|
|
133
|
-
);
|
|
134
|
-
--foreground: var(--color-neutral-100);
|
|
135
|
-
--card: color-mix(in srgb, var(--background) 98%, var(--color-white));
|
|
136
|
-
--card-foreground: var(--color-neutral-100);
|
|
137
|
-
--popover: color-mix(in srgb, var(--background) 96%, var(--color-white));
|
|
138
|
-
--popover-foreground: var(--color-neutral-100);
|
|
139
|
-
--primary: var(--color-neutral-100);
|
|
140
|
-
--primary-foreground: var(--color-neutral-800);
|
|
141
|
-
--secondary: --alpha(var(--color-white) / 4%);
|
|
142
|
-
--secondary-foreground: var(--color-neutral-100);
|
|
143
|
-
--muted: --alpha(var(--color-white) / 4%);
|
|
144
|
-
--muted-foreground: color-mix(
|
|
145
|
-
in srgb,
|
|
146
|
-
var(--color-neutral-500) 90%,
|
|
147
|
-
var(--color-white)
|
|
148
|
-
);
|
|
149
|
-
--accent: --alpha(var(--color-white) / 4%);
|
|
150
|
-
--accent-foreground: var(--color-neutral-100);
|
|
151
|
-
--destructive: color-mix(
|
|
152
|
-
in srgb,
|
|
153
|
-
var(--color-red-500) 90%,
|
|
154
|
-
var(--color-white)
|
|
155
|
-
);
|
|
156
|
-
--destructive-foreground: var(--color-white);
|
|
157
|
-
--destructive-subtle: --alpha(var(--destructive) / 16%);
|
|
158
|
-
--destructive-subtle-foreground: var(--color-red-400);
|
|
159
|
-
--info: var(--color-blue-500);
|
|
160
|
-
--info-foreground: var(--color-white);
|
|
161
|
-
--info-subtle: --alpha(var(--info) / 16%);
|
|
162
|
-
--info-subtle-foreground: var(--color-blue-400);
|
|
163
|
-
--success: var(--color-emerald-500);
|
|
164
|
-
--success-foreground: var(--color-white);
|
|
165
|
-
--success-subtle: --alpha(var(--success) / 16%);
|
|
166
|
-
--success-subtle-foreground: var(--color-emerald-400);
|
|
167
|
-
--warning: var(--color-amber-500);
|
|
168
|
-
--warning-foreground: var(--color-amber-950);
|
|
169
|
-
--warning-subtle: --alpha(var(--warning) / 16%);
|
|
170
|
-
--warning-subtle-foreground: var(--color-amber-400);
|
|
171
|
-
--border: --alpha(var(--color-white) / 6%);
|
|
172
|
-
--input: --alpha(var(--color-white) / 8%);
|
|
173
|
-
--ring: var(--color-neutral-500);
|
|
174
|
-
--chart-1: var(--color-blue-500);
|
|
175
|
-
--chart-2: var(--color-emerald-500);
|
|
176
|
-
--chart-3: var(--color-amber-500);
|
|
177
|
-
--chart-4: var(--color-purple-500);
|
|
178
|
-
--chart-5: var(--color-rose-500);
|
|
179
|
-
--sidebar: color-mix(
|
|
180
|
-
in srgb,
|
|
181
|
-
var(--color-neutral-950) 97%,
|
|
182
|
-
var(--color-white)
|
|
183
|
-
);
|
|
184
|
-
--sidebar-foreground: color-mix(
|
|
185
|
-
in srgb,
|
|
186
|
-
var(--color-neutral-100) 64%,
|
|
187
|
-
var(--sidebar)
|
|
188
|
-
);
|
|
189
|
-
--sidebar-primary: var(--color-neutral-100);
|
|
190
|
-
--sidebar-primary-foreground: var(--color-neutral-800);
|
|
191
|
-
--sidebar-accent: --alpha(var(--color-white) / 4%);
|
|
192
|
-
--sidebar-accent-foreground: var(--color-neutral-100);
|
|
193
|
-
--sidebar-border: --alpha(var(--color-white) / 5%);
|
|
194
|
-
--sidebar-ring: var(--color-neutral-500);
|
|
195
|
-
}
|
|
1
|
+
@import '@pickle-ui/tokens/theme.css';
|