react-native-varia 0.0.1 → 0.2.0

package/lib/theme/Badge.recipe.tsx

@@ -1,68 +1,73 @@
 import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
 
-const BadgeStyles = StyleSheet.create(theme => ({
-  container: {
+export const BadgeDefaultVariants = {
+  variant: 'solid',
+  size: 'sm',
+} as const
+
+export const BadgeStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: 'tomato',
-          borderColor: 'tomato',
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+          borderColor: theme.colors[colorPalette].fg,
+        },
+        subtle: {
+          backgroundColor: theme.colors.bg.subtle,
+          borderColor: theme.colors.border.subtle,
+          borderWidth: 1,
         },
-        secondary: {
-          backgroundColor: theme.colors.foreground,
-          borderColor: theme.colors.categoryAquamarine,
+        outline: {
+          borderWidth: 2,
+          borderColor: theme.colors.border.default,
         },
       },
       size: {
         sm: {
-          height: 32,
-          maxHeight: 32,
-          padding: 6,
+          height: theme.sizes[5],
+          maxHeight: theme.sizes[5],
+          minWidth: theme.sizes[5],
         },
         md: {
-          maxHeight: 48,
-          height: 48,
-          padding: 8,
+          maxHeight: theme.sizes[6],
+          height: theme.sizes[6],
+          minWidth: theme.sizes[6],
         },
         lg: {
-          maxHeight: 64,
-          height: 64,
-          padding: 12,
-        },
-        xl: {
-          maxHeight: 80,
-          height: 80,
-          padding: 16,
+          maxHeight: theme.sizes[7],
+          height: theme.sizes[7],
+          minWidth: theme.sizes[7],
         },
       },
     },
-  },
-  text: {
+  }),
+  text: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
-      colorPalette: {
-        primary: {
-          color: 'white',
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette].fg,
         },
-        secondary: {
-          color: theme.colors.categoryAquamarine,
+        subtle: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors.fg.default,
         },
       },
       size: {
         sm: {
-          fontSize: 24,
+          ...textStyle.xs,
         },
         md: {
-          fontSize: 28,
+          ...textStyle.xs,
         },
         lg: {
-          fontSize: 32,
-        },
-        xl: {
-          fontSize: 36,
+          ...textStyle.sm,
         },
       },
     },
-  },
+  }),
 }))
-
-export default BadgeStyles

package/lib/theme/Button.recipe.tsx

@@ -1,83 +1,174 @@
 import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
 
-export const ButtonTokens = {
-  defaultProps: {
-    colorPalette: 'primary',
-    size: 'md',
-  },
+export const ButtonDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
 } as const
 export const ButtonStyles = StyleSheet.create(theme => ({
-  container: {
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: 12,
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.primary500,
-          borderColor: theme.colors.accentBackground,
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
         },
-        secondary: {
-          backgroundColor: theme.colors.foreground,
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
         },
       },
       size: {
+        xs: {
+          minHeight: theme.sizes[8],
+          paddingHorizontal: theme.sizes[3],
+          paddingVertical: theme.sizes['1.5'],
+          gap: theme.spacing[2],
+        },
         sm: {
-          // height: 32,
-          // maxHeight: 32,
-          padding: 6,
-          borderRadius: theme.radii.sm,
-          borderWidth: 1,
+          minHeight: theme.sizes[9],
+          paddingHorizontal: theme.sizes['3.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
         },
         md: {
-          // maxHeight: 48,
-          // height: 48,
-          padding: 8,
-          borderRadius: theme.radii.md,
-          borderWidth: 1,
+          minHeight: theme.sizes[10],
+          paddingHorizontal: theme.sizes[4],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
         },
         lg: {
-          // maxHeight: 64,
-          // height: 64,
-          padding: 12,
-          borderRadius: theme.radii.lg,
-          borderWidth: 1,
+          minHeight: theme.sizes[11],
+          paddingHorizontal: theme.sizes['4.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
         },
         xl: {
-          // maxHeight: 80,
-          // height: 80,
-          padding: 16,
-          borderRadius: theme.radii.xl,
-          borderWidth: 5,
+          minHeight: theme.sizes[12],
+          paddingHorizontal: theme.sizes[5],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing['2.5'],
+        },
+        '2xl': {
+          minHeight: theme.sizes[16],
+          paddingHorizontal: theme.sizes[7],
+          paddingVertical: theme.sizes[3],
+          gap: theme.spacing[3],
         },
       },
+      disabled: {
+        true: {},
+        false: {},
+      },
     },
-  },
-  text: {
+    compoundVariants: [
+      {
+        variant: 'solid',
+        disabled: true,
+        styles: {
+          backgroundColor: theme.colors.bg.disabled,
+        },
+      },
+      {
+        variant: 'outline',
+        disabled: true,
+        styles: {
+          borderColor: theme.colors.border.disabled,
+        },
+      },
+      {
+        variant: 'ghost',
+        disabled: true,
+        styles: {
+          backgroundColor: 'transparent',
+        },
+      },
+      {
+        variant: 'subtle',
+        disabled: true,
+        styles: {
+          backgroundColor: theme.colors.bg.disabled,
+        },
+      },
+    ],
+  }),
+  text: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
-      colorPalette: {
-        primary: {
-          color: 'white',
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette].fg,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        ghost: {
+          color: theme.colors.gray.text,
         },
-        secondary: {
-          color: theme.colors.categoryAquamarine,
+        subtle: {
+          color: theme.colors[colorPalette].text,
         },
       },
+      disabled: {
+        true: {},
+        false: {},
+      },
       size: {
+        xs: {
+          ...textStyle.xs,
+        },
         sm: {
-          fontSize: 24,
-          fontWeight: '400',
+          ...textStyle.sm,
         },
         md: {
-          fontSize: 28,
-          fontWeight: '400',
+          ...textStyle.sm,
         },
         lg: {
-          fontSize: 32,
-          fontWeight: '600',
+          ...textStyle.md,
         },
         xl: {
-          fontSize: 36,
-          fontWeight: '800',
+          ...textStyle.md,
+        },
+        '2xl': {
+          ...textStyle.lg,
         },
       },
     },
-  },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        disabled: true,
+        styles: {
+          color: theme.colors[colorPalette].fg,
+        },
+      },
+      {
+        variant: 'outline',
+        disabled: true,
+        styles: {
+          color: theme.colors.fg.disabled,
+        },
+      },
+      {
+        variant: 'ghost',
+        disabled: true,
+        styles: {
+          color: theme.colors.fg.disabled,
+        },
+      },
+      {
+        variant: 'subtle',
+        disabled: true,
+        styles: {
+          color: theme.colors.fg.disabled,
+        },
+      },
+    ],
+  }),
 }))

package/lib/theme/Checkbox.recipe.tsx

@@ -0,0 +1,121 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const CheckboxDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+  checked: false,
+} as const
+
+export const CheckboxStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          gap: theme.sizes[2],
+        },
+        md: {
+          gap: theme.sizes[3],
+        },
+        lg: {
+          gap: theme.sizes[4],
+        },
+      },
+    },
+  }),
+  checkContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii['xs'],
+    borderWidth: 1,
+    borderColor: theme.colors.border.default,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: 'transparent',
+        },
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          width: theme.sizes[4],
+          height: theme.sizes[4],
+        },
+        md: {
+          width: theme.sizes[5],
+          height: theme.sizes[5],
+        },
+        lg: {
+          width: theme.sizes[6],
+          height: theme.sizes[6],
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        checked: true,
+        styles: {
+          backgroundColor: theme.colors[colorPalette].default,
+          borderColor: theme.colors[colorPalette].default,
+        },
+      },
+    ],
+  }),
+  check: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette].fg,
+        },
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          width: theme.sizes[3],
+        },
+        md: {
+          width: theme.sizes['3.5'],
+        },
+        lg: {
+          width: theme.sizes[4],
+        },
+      },
+    },
+  }),
+  label: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.default,
+    fontWeight: '500',
+    variants: {
+      variant: {
+        solid: {},
+      },
+      checked: {
+        true: {},
+        false: {},
+      },
+      size: {
+        sm: {
+          fontSize: 14,
+        },
+        md: {
+          fontSize: 16,
+        },
+        lg: {
+          fontSize: 18,
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/CircleProgress.recipe.tsx

@@ -1,42 +1,36 @@
-const circleProgressTokens = {
+import {createCircleProgressTokens} from '../style/varia/types'
+
+const circleProgressTokens = createCircleProgressTokens({
   defaultProps: {
-    type: 'primary',
+    variant: 'solid',
     size: 'lg',
-    // circleSize: 'md',
   },
   variants: {
     size: {
       sm: {
         trackStrokeWidth: 10,
         progressStrokeWidth: 8,
-        size: 80,
       },
       md: {
-        trackStrokeWidth: 16,
-        progressStrokeWidth: 14,
-        size: 100,
+        trackStrokeWidth: 20,
+        progressStrokeWidth: 30,
       },
       lg: {
-        trackStrokeWidth: 20,
-        progressStrokeWidth: 6,
-        size: 100,
+        trackStrokeWidth: 40,
+        progressStrokeWidth: 32,
       },
     },
-    type: {
-      primary: {
-        trackColor: 'accentLines',
-        progressColor: 'categoryAquamarine',
-      },
-      secondary: {
-        trackColor: 'background',
-        progressColor: 'foreground',
+    variant: {
+      solid: {
+        trackColor: 'transparent',
+        progressColor: 'colorPalette.9',
       },
-      tertiary: {
-        trackColor: 'background',
-        progressColor: 'foreground',
+      outline: {
+        trackColor: 'accent.9',
+        progressColor: 'accent.fg',
       },
     },
   },
-} as const
+})
 
 export {circleProgressTokens}

package/lib/theme/Field.recipe.tsx

@@ -0,0 +1,66 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const DefaultFieldVariants = {
+  size: 'md',
+  variant: 'solid',
+} as const
+export const FieldStyles = StyleSheet.create(theme => ({
+  root: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+      },
+      size: {
+        xs: {gap: theme.spacing['0.5']},
+        sm: {gap: theme.spacing['1']},
+        md: {gap: theme.spacing['2']},
+        lg: {gap: theme.spacing['3']},
+      },
+    },
+  }),
+  label: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.default,
+    variants: {
+      variant: {
+        solid: {},
+      },
+      size: {
+        xs: {
+          fontSize: theme.fontSizes.xs,
+        },
+        sm: {
+          fontSize: theme.fontSizes.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.lg,
+        },
+      },
+    },
+  }),
+  error: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.error,
+    variants: {
+      variant: {
+        solid: {},
+      },
+      size: {
+        xs: {
+          fontSize: theme.fontSizes.xs,
+        },
+        sm: {
+          fontSize: theme.fontSizes.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.lg,
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/GradientBackground.recipe.tsx

@@ -1,8 +1,7 @@
-import {StyleSheet} from 'react-native-unistyles'
-import {createGradientTokens} from '../style/types'
+import {createGradientTokens} from '../style/varia/types'
 
 const gradientBackgroundTokens = createGradientTokens({
-  defaultProps: {colorPalette: 'primary', direction: 'to top left'},
+  defaultProps: {variant: 'solid', direction: 'to top left'},
   variants: {
     direction: {
       'to top': {x1: 0, y1: 0, x2: 0, y2: 1},
@@ -14,25 +13,13 @@ const gradientBackgroundTokens = createGradientTokens({
       'to bottom left': {x1: 0, y1: 1, x2: 1, y2: 0},
       'to bottom right': {x1: 1, y1: 1, x2: 0, y2: 0},
     },
-    colorPalette: {
-      primary: {startColor: 'blue', endColor: 'background2'},
-      secondary: {startColor: 'white', endColor: 'black'},
-      tertiary: {startColor: 'lime', endColor: 'violet'},
-      quaternary: {startColor: 'lime', endColor: 'tomato'},
+    variant: {
+      solid: {
+        startColor: 'colorPalette.6',
+        endColor: 'colorPalette.9',
+      },
     },
   },
 } as const)
 
 export {gradientBackgroundTokens}
-
-const GradientBackgroundStyles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      colorPalette: {
-        primary: {},
-      },
-    },
-  },
-}))
-
-export default GradientBackgroundStyles