Skip to content

Commit 8b2726e

Browse files
committed
chore: rm define-theme from README
1 parent f0c7ef0 commit 8b2726e

File tree

1 file changed

+0
-122
lines changed

1 file changed

+0
-122
lines changed

README.md

-122
Original file line numberDiff line numberDiff line change
@@ -150,128 +150,6 @@ pnpm i @pandabox/postcss-plugins
150150
- `removeUnusedCssVars`
151151
- `removeUnusedKeyframes`
152152

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-
275153
## @pandabox/define-recipe
276154

277155
```bash

0 commit comments

Comments
 (0)