docs: improved examples with new approach

Author: coderdiaz

packages/app-typescript/components/Button.tsx

@@ -1,7 +1,7 @@
 import { TouchableOpacity } from 'react-native';
 import { type VariantProps } from 'jacaranda';
 import { Typography } from './Typography';
-import { styles } from '../jacaranda.config';
+import { sva } from '../jacaranda.config';
 
 type ButtonProps = VariantProps<typeof buttonStyles> & {
   children?: React.ReactNode;
@@ -15,11 +15,11 @@ export const Button = (props: ButtonProps) => {
   );
 };
 
-const buttonStyles = styles({
+const buttonStyles = sva({
   base: {
-    paddingHorizontal: '$spacing.8',
-    paddingVertical: '$spacing.3',
-    borderRadius: '$spacing.2',
+    paddingHorizontal: '$space.8',
+    paddingVertical: '$space.3',
+    borderRadius: '$space.2',
   },
   variants: {
     color: {

packages/app-typescript/components/Typography.tsx

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 import { VariantProps } from 'jacaranda';
-import { styles } from '../jacaranda.config';
+import { sva } from '../jacaranda.config';
 
 type TypographyProps = VariantProps<typeof typographyStyles> & {
   children?: React.ReactNode;
@@ -10,7 +10,7 @@ export const Typography = (props: TypographyProps) => {
   return <Text style={typographyStyles(props)}>{props.children}</Text>;
 };
 
-const typographyStyles = styles({
+const typographyStyles = sva({
   base: {},
   variants: {
     color: {

packages/app-typescript/jacaranda.config.ts

@@ -1,6 +1,6 @@
-import { createTokens } from 'jacaranda';
+import { defineTokens } from 'jacaranda';
 
-export const { styles } = createTokens({
+export const { sva, tokens } = defineTokens({
   colors: {
     white: '#ffffff',
     black: '#000000',
@@ -22,7 +22,7 @@ export const { styles } = createTokens({
     secondary600: '#016464',
     secondary700: '#014747',
   },
-  spacing: {
+  space: {
     1: 4,
     2: 8,
     3: 12,

packages/app/App.js

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { styles } from './jacaranda.config';
+import { sva } from './jacaranda.config';
 
 export const Button = (props) => {
   return (
@@ -9,8 +9,8 @@ export const Button = (props) => {
   );
 };
 
-const buttonStyles = styles({
-  base: { borderRadius: '$spacing.md' },
+const buttonStyles = sva({
+  base: { borderRadius: '$space.md' },
   variants: {
     intent: {
       primary: {
@@ -22,8 +22,8 @@ const buttonStyles = styles({
     },
     size: {
       md: {
-        paddingHorizontal: '$spacing.md',
-        paddingVertical: '$spacing.sm',
+        paddingHorizontal: '$space.md',
+        paddingVertical: '$space.sm',
       },
     },
   },

packages/app/jacaranda.config.js

@@ -20,7 +20,7 @@ export const { styles } = defineTokens({
     secondary600: '#016464',
     secondary700: '#014747',
   },
-  spacing: {
+  space: {
     xs: 4,
     sm: 8,
     md: 16,