|
4 | 4 |
|
5 | 5 | Provides a way to styling components in React Native with better experience and composability. The key feature is the ability to create multi-variants styles with a type-safe definition inspired by [Stitches](https://stitches.dev/docs/variants) and [CVA](https://cva.style/docs/getting-started/variants) (for React apps). |
6 | 6 |
|
7 | | -#### Currently properties: |
| 7 | +#### Available properties: |
8 | 8 |
|
9 | 9 | - `base`: The base styles for the element. |
10 | 10 | - `variants`: The different visual styles for the element. |
11 | 11 | - `compoundVariants`: Styles that apply when multiple other variant conditions are met. |
12 | | -- `default`: Set a variant by default. |
| 12 | +- `defaultVariants`: Set a variant by default when no variant is provided. |
13 | 13 |
|
14 | 14 | #### Roadmap |
15 | 15 |
|
16 | 16 | - [x] Variants definition. |
17 | 17 | - [x] Default variants. |
18 | 18 | - [x] Support to define design tokens. |
19 | | -- [ ] Styles based on conditions. |
20 | 19 | - [ ] Default design tokens. |
21 | 20 |
|
22 | 21 | ### Create your config file |
23 | | -To configure `Jacaranda`, create a `jacaranda.config.ts` file (`.js` works too) to define your reusable design tokens and import the `createTokens` function. |
| 22 | +To configure `Jacaranda`, create a `jacaranda.config.ts` file (`.js` works too) to define your reusable design tokens and import the `defineTokens` function. |
| 23 | + |
24 | 24 | ```tsx |
25 | 25 | // jacaranda.config.ts |
26 | | -import { createTokens } from 'jacaranda'; |
| 26 | +import { defineTokens } from 'jacaranda'; |
27 | 27 | ``` |
28 | 28 |
|
29 | 29 | This function receives an object with the design tokens. |
30 | | -- `colors`: Define your colors. |
31 | | -- `fontSize`: Define your font sizes. |
32 | | -- `spacing`: Define your spacing. |
| 30 | +- `colors`: Define your colors design tokens. |
| 31 | +- `space`: Define your spacing. |
33 | 32 | - `fonts`: Define your fonts. |
| 33 | +- `fontSize`: Define your font sizes. |
34 | 34 | - `lineHeight`: Define your line heights. |
35 | 35 |
|
36 | 36 | And returns a `styles` function that you can use to style your components. |
37 | 37 |
|
38 | 38 | ```tsx |
39 | 39 | // jacaranda.config.ts |
40 | | -import { createTokens } from 'jacaranda'; |
| 40 | +import { defineTokens } from 'jacaranda'; |
41 | 41 |
|
42 | | -export const { styles } = createTokens({ |
| 42 | +export const { styles } = defineTokens({ |
43 | 43 | colors: { |
44 | 44 | primary50: '#ecfeff', |
45 | 45 | primary100: '#cffafe', |
@@ -109,7 +109,7 @@ const buttonStyles = styles({ |
109 | 109 | lg: { paddingHorizontal: 16, paddingVertical: 10 }, |
110 | 110 | }, |
111 | 111 | }, |
112 | | - default: { |
| 112 | + defaultVariants: { |
113 | 113 | intent: 'primary', |
114 | 114 | size: 'md', |
115 | 115 | }, |
|
0 commit comments