@@ -150,128 +150,6 @@ pnpm i @pandabox/postcss-plugins
150
150
- ` removeUnusedCssVars `
151
151
- ` removeUnusedKeyframes `
152
152
153
- ## @pandabox/define-theme
154
-
155
- End to end type-safe theme definition (without any codegen step), so that the ` panda.config.ts ` can also benefit from
156
- type-safety and token/conditions/utilities autocomplete.
157
-
158
- ``` bash
159
- pnpm i @pandabox/define-theme
160
- ```
161
-
162
- ## Usage
163
-
164
- ``` ts
165
- import { defineTheme } from ' @pandabox/define-theme'
166
-
167
- const t = defineTheme ()
168
-
169
- // Define tokens with the builder. TypeScript infers the structure.
170
- const theme = t
171
- .conditions ({
172
- hover: ' &:is(:hover, [data-hover])' ,
173
- focus: ' &:is(:focus, [data-focus])' ,
174
- })
175
- .breakpoints ({
176
- sm: ' 640px' ,
177
- md: ' 768px' ,
178
- lg: ' 1024px' ,
179
- xl: ' 1280px' ,
180
- ' 2xl' : ' 1536px' ,
181
- })
182
- .tokens ({
183
- colors: {
184
- black: { value: ' #000' },
185
- white: { value: ' #fff' },
186
- rose: {
187
- 50 : { value: ' #fff1f2' },
188
- 100 : { value: ' #ffe4e6' },
189
- 200 : { value: ' #fecdd3' },
190
- },
191
- },
192
- sizes: {
193
- sm: { value: ' 0.75rem' },
194
- md: { value: ' 1rem' },
195
- lg: { value: ' 1.25rem' },
196
- },
197
- })
198
- .semanticTokens ({
199
- colors: {
200
- primary: { value: ' blue' },
201
- text: {
202
- DEFAULT: { value: ' xxx' },
203
- foreground: { value: ' xxx' },
204
- background: { value: ' xxx' },
205
- heading: {
206
- DEFAULT: { value: ' xxx' },
207
- value: { base: ' xxx' , _osDark: ' xxx' },
208
- subheading: { value: ' xxx' },
209
- },
210
- },
211
- },
212
- sizes: {
213
- header: {
214
- value: { base: ' xxx' , md: ' xxx' , xl: ' xxx' },
215
- },
216
- },
217
- zIndex: {
218
- tooltip: { value: ' xxx' },
219
- },
220
- })
221
- .utilities ({
222
- background: {
223
- shorthand: ' bg' ,
224
- className: ' bg' ,
225
- values: ' colors' ,
226
- },
227
- width: {
228
- shorthand: ' w' ,
229
- className: ' w' ,
230
- values: ' sizes' ,
231
- },
232
- height: {
233
- shorthand: ' h' ,
234
- className: ' h' ,
235
- values: ' sizes' ,
236
- },
237
- color: {
238
- className: ' text' ,
239
- values: ' colors' ,
240
- },
241
- })
242
-
243
- const config = theme .build ()
244
-
245
- // Everything here will be typed, without any codegen
246
- config .defineStyles ({ bg: ' text.background' , background: ' text.foreground' })
247
- config .defineRecipe ({
248
- className: ' aaa' ,
249
- base: {
250
- _hover: {
251
- color: ' text' ,
252
- sm: {
253
- _focus: {
254
- fontSize: ' 12px' ,
255
- },
256
- },
257
- },
258
- display: ' flex' ,
259
- background: ' text' ,
260
- },
261
- variants: {
262
- type: {
263
- success: {
264
- bg: ' rose.200' ,
265
- background: ' tex.' ,
266
- },
267
- },
268
- },
269
- defaultVariants: {
270
- type: ' success' ,
271
- },
272
- })
273
- ```
274
-
275
153
## @pandabox/define-recipe
276
154
277
155
``` bash
0 commit comments