react-native-varia 0.3.0 → 0.4.1

package/lib/theme/Accordion.tsx

@@ -0,0 +1,184 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+
+export const AccordionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+export const AccordionStyles = StyleSheet.create(theme => ({
+  itemContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: 12,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+          borderColor: 'transparent',
+          borderWidth: 1,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+          borderWidth: 0,
+        },
+      },
+      size: {
+        sm: {
+          minHeight: theme.sizes[9],
+          paddingHorizontal: theme.sizes['3.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        md: {
+          minHeight: theme.sizes[10],
+          paddingHorizontal: theme.sizes[4],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        lg: {
+          minHeight: theme.sizes[11],
+          paddingHorizontal: theme.sizes['4.5'],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing[2],
+        },
+        xl: {
+          minHeight: theme.sizes[12],
+          paddingHorizontal: theme.sizes[5],
+          paddingVertical: theme.sizes[2],
+          gap: theme.spacing['2.5'],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          borderColor: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        disabled: true,
+        styles: {},
+      },
+      {
+        variant: 'ghost',
+        disabled: true,
+        styles: {
+          backgroundColor: 'transparent',
+        },
+      },
+      {
+        variant: 'subtle',
+        disabled: true,
+        styles: {
+          backgroundColor: theme.colors.bg.disabled,
+        },
+      },
+    ],
+  }),
+  header: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+        },
+        outline: {},
+        subtle: {},
+      },
+      size: {
+        sm: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[9],
+        },
+        md: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[10],
+        },
+        lg: {
+          paddingHorizontal: theme.spacing[2],
+          height: theme.sizes[11],
+        },
+        xl: {
+          paddingHorizontal: theme.spacing[3],
+          height: theme.sizes[12],
+        },
+        nosize: {},
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+  headerTitle: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: theme.fontSizes.sm,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          fontSize: theme.fontSizes.md,
+        },
+        xl: {
+          fontSize: theme.fontSizes.lg,
+        },
+        nosize: {
+          fontSize: theme.fontSizes.md,
+        },
+      },
+      active: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'solid',
+        active: true,
+        styles: {
+          color: theme.colors[colorPalette].default,
+        },
+      },
+      {
+        variant: 'outline',
+        active: true,
+        styles: {},
+      },
+      {
+        variant: 'subtle',
+        active: true,
+        styles: {},
+      },
+    ],
+  }),
+}))

package/lib/theme/Button.recipe.tsx

@@ -9,7 +9,9 @@ export const ButtonDefaultVariants = {
 export const ButtonStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     borderRadius: 12,
-
+    _web: {
+      _classNames: 'button-container-recipe',
+    },
     variants: {
       variant: {
         solid: {
@@ -107,6 +109,9 @@ export const ButtonStyles = StyleSheet.create(theme => ({
     ],
   }),
   text: (colorPalette: PalettesWithNestedKeys) => ({
+    _web: {
+      _classNames: 'button-text-recipe',
+    },
     variants: {
       variant: {
         solid: {
@@ -131,22 +136,34 @@ export const ButtonStyles = StyleSheet.create(theme => ({
       },
       size: {
         xs: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
+          lineHeight: 12,
         },
         sm: {
-          ...textStyle.sm,
+          // ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
+          lineHeight: 20,
         },
         md: {
-          ...textStyle.sm,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         lg: {
-          ...textStyle.md,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         xl: {
-          ...textStyle.md,
+          // ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         '2xl': {
-          ...textStyle.lg,
+          // ...textStyle.lg,
+          fontSize: theme.fontSizes.lg,
+          lineHeight: 28,
         },
       },
     },

package/lib/theme/Drawer.recipe.tsx

@@ -49,15 +49,13 @@ export const DrawerStyles = StyleSheet.create((theme, rt) => ({
     },
   },
   slider: (colorPalette: PalettesWithNestedKeys) => ({
-    boxShadow: `0px -10px 20px black`,
+    boxShadow: theme.shadows.sm,
     borderRadius: theme.radii.lg,
     backgroundColor: theme.colors.bg.default,
     padding: theme.spacing[3],
     variants: {
       variant: {
-        solid: {
-          backgroundColor: 'blue',
-        },
+        solid: {},
         subtle: {
           boxShadow: 'none',
           borderRadius: theme.radii.none,

package/lib/theme/Field.recipe.tsx

@@ -23,15 +23,13 @@ export const FieldStyles = StyleSheet.create(theme => ({
     color: theme.colors.fg.default,
     variants: {
       variant: {
-        solid: {
-          // transform: [{translateY: theme.spacing['3.5']}],
-          // marginLeft: theme.spacing['3'],
-          // paddingHorizontal: theme.spacing['1'],
-          backgroundColor: theme.colors.bg.default,
-          zIndex: 10,
-          flex: 0,
-          width: 'auto',
+        solid: {},
+        floating: {
           alignSelf: 'baseline',
+          width: 'auto',
+          flex: 0,
+          zIndex: 10,
+          backgroundColor: theme.colors.bg.default,
         },
       },
       size: {
@@ -43,18 +41,50 @@ export const FieldStyles = StyleSheet.create(theme => ({
         },
         md: {
           fontSize: theme.fontSizes.md,
-          transform: [{translateY: theme.spacing['4.5']}],
-          marginLeft: theme.spacing['2'],
-          paddingHorizontal: theme.spacing['1'],
         },
         lg: {
-          fontSize: theme.fontSizes['2xl'],
-          transform: [{translateY: theme.spacing['5']}],
-          marginLeft: theme.spacing['2.5'],
-          paddingHorizontal: theme.spacing['1'],
+          fontSize: theme.fontSizes['lg'],
         },
       },
     },
+    compoundVariants: [
+      {
+        variant: 'floating',
+        size: 'xs',
+        styles: {
+          paddingHorizontal: theme.spacing['1'],
+          marginLeft: theme.spacing['1'],
+          transform: [{translateY: theme.spacing['3']}],
+        },
+      },
+      {
+        variant: 'floating',
+        size: 'sm',
+        styles: {
+          paddingHorizontal: theme.spacing['1'],
+          marginLeft: theme.spacing['2'],
+          transform: [{translateY: theme.spacing['3.5']}],
+        },
+      },
+      {
+        variant: 'floating',
+        size: 'md',
+        styles: {
+          paddingHorizontal: theme.spacing['1'],
+          marginLeft: theme.spacing['2'],
+          transform: [{translateY: theme.spacing['4.5']}],
+        },
+      },
+      {
+        variant: 'floating',
+        size: 'lg',
+        styles: {
+          paddingHorizontal: theme.spacing['1.5'],
+          marginLeft: theme.spacing['2'],
+          transform: [{translateY: theme.spacing['6']}],
+        },
+      },
+    ],
   }),
   error: (colorPalette: PalettesWithNestedKeys) => ({
     color: theme.colors.fg.error,

package/lib/theme/FloatingAction.tsx

@@ -0,0 +1,112 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+
+export const FloatingActionDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+} as const
+
+export const FloatingActionStyles = StyleSheet.create(theme => ({
+  buttonContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        ghost: {},
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+      },
+    },
+  }),
+  button: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+  buttonIcon: (colorPalette: PalettesWithNestedKeys) => ({
+    variants: {
+      variant: {
+        solid: {
+          color: theme.colors.fg.default,
+        },
+        outline: {
+          color: theme.colors[colorPalette].text,
+        },
+        ghost: {
+          color: theme.colors.gray.text,
+        },
+        subtle: {
+          color: theme.colors[colorPalette].text,
+        },
+      },
+    },
+  }),
+  item: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
+    variants: {
+      variant: {
+        solid: {
+          backgroundColor: theme.colors[colorPalette].default,
+        },
+        outline: {
+          borderWidth: 1,
+          borderColor: theme.colors[colorPalette].a7,
+        },
+        subtle: {
+          backgroundColor: theme.colors[colorPalette]['a3'],
+        },
+        ghost: {
+          backgroundColor: 'transparent',
+        },
+      },
+      size: {
+        sm: {
+          height: theme.sizes['8'],
+          width: theme.sizes['8'],
+        },
+        md: {
+          height: theme.sizes['10'],
+          width: theme.sizes['10'],
+        },
+        lg: {
+          height: theme.sizes['16'],
+          width: theme.sizes['16'],
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/GradientText.recipe.tsx

@@ -1,5 +1,6 @@
+import { StyleSheet } from 'react-native-unistyles'
 import {textStyle} from '../style/varia/textStyles'
-import {createGradientTextTokens} from '../style/varia/types'
+import {createGradientTextTokens, PalettesWithNestedKeys} from '../style/varia/types'
 
 export const gradientTextTokens = createGradientTextTokens({
   defaultProps: {
@@ -25,39 +26,107 @@ export const gradientTextTokens = createGradientTextTokens({
       },
     },
     size: {
-      xs: {
-        ...textStyle.xs,
-      },
-      sm: {
-        ...textStyle.sm,
-      },
-      md: {
-        ...textStyle.md,
-      },
-      lg: {
-        ...textStyle.lg,
-      },
-      xl: {
-        ...textStyle.xl,
-      },
-      '2xl': {
-        ...textStyle['2xl'],
-      },
-      '3xl': {
-        ...textStyle['3xl'],
-      },
-      '4xl': {
-        ...textStyle['4xl'],
-      },
-      '5xl': {
-        ...textStyle['5xl'],
-      },
-      '6xl': {
-        ...textStyle['6xl'],
-      },
-      '7xl': {
-        ...textStyle['7xl'],
-      },
+      // xs: {
+      //   ...textStyle.xs,
+      // },
+      // sm: {
+      //   ...textStyle.sm,
+      // },
+      // md: {
+      //   ...textStyle.md,
+      // },
+      // lg: {
+      //   ...textStyle.lg,
+      // },
+      // xl: {
+      //   ...textStyle.xl,
+      // },
+      // '2xl': {
+      //   ...textStyle['2xl'],
+      // },
+      // '3xl': {
+      //   ...textStyle['3xl'],
+      // },
+      // '4xl': {
+      //   ...textStyle['4xl'],
+      // },
+      // '5xl': {
+      //   ...textStyle['5xl'],
+      // },
+      // '6xl': {
+      //   ...textStyle['6xl'],
+      // },
+      // '7xl': {
+      //   ...textStyle['7xl'],
+      // },
     },
   },
 } as const)
+
+const GradientTextStyles = StyleSheet.create(theme => ({
+  text: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.default,
+    variants: {
+      variant: {
+        heading: {
+          color: theme.colors.fg.default,
+          fontWeight: theme.fontWeights.bold,
+        },
+        default: {
+          color: theme.colors.fg.default,
+          fontWeight: theme.fontWeights.medium,
+        },
+      },
+      size: {
+        xs: {
+          fontSize: theme.fontSizes.xs,
+          lineHeight: 12,
+        },
+        sm: {
+          fontSize: theme.fontSizes.sm,
+          lineHeight: 20,
+        },
+        md: {
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
+        },
+        lg: {
+          fontSize: theme.fontSizes.lg,
+          lineHeight: 28,
+        },
+        xl: {
+          fontSize: theme.fontSizes.xl,
+          lineHeight: 30,
+        },
+        '2xl': {
+          fontSize: theme.fontSizes['2xl'],
+          lineHeight: 32,
+        },
+        '3xl': {
+          fontSize: theme.fontSizes['3xl'],
+          lineHeight: 38,
+        },
+        '4xl': {
+          fontSize: theme.fontSizes['4xl'],
+          lineHeight: 44,
+          letterSpacing: -0.032,
+        },
+        '5xl': {
+          fontSize: theme.fontSizes['5xl'],
+          lineHeight: 60,
+          letterSpacing: -0.032,
+        },
+        '6xl': {
+          fontSize: theme.fontSizes['6xl'],
+          lineHeight: 72,
+          letterSpacing: -0.032,
+        },
+        '7xl': {
+          fontSize: theme.fontSizes['7xl'],
+          lineHeight: 92,
+          letterSpacing: -0.032,
+        },
+      },
+    },
+  }),
+}))

package/lib/theme/Input.recipe.tsx

@@ -11,7 +11,9 @@ export const InputStyles = StyleSheet.create(theme => ({
   placeholder: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
       variant: {
-        solid: {},
+        solid: {
+          color: theme.colors.fg.subtle,
+        },
       },
       invalid: {
         true: {
@@ -38,6 +40,11 @@ export const InputStyles = StyleSheet.create(theme => ({
     variants: {
       variant: {
         solid: {},
+        underline: {
+          borderWidth: 0,
+          borderBottomWidth: 1,
+          borderRadius: 0,
+        },
       },
       focused: {
         true: {
@@ -75,14 +82,14 @@ export const InputStyles = StyleSheet.create(theme => ({
           fontSize: theme.fontSizes.sm,
         },
         md: {
-          paddingHorizontal: theme.sizes[3],
+          paddingHorizontal: theme.sizes['2.5'],
           minHeight: theme.sizes[10],
           maxHeight: theme.sizes[20],
           minWidth: theme.sizes[10],
           fontSize: theme.fontSizes.md,
         },
         lg: {
-          paddingHorizontal: theme.sizes['3.5'],
+          paddingHorizontal: theme.sizes[3],
           minHeight: theme.sizes[11],
           maxHeight: theme.sizes[11],
           minWidth: theme.sizes[11],
@@ -90,18 +97,19 @@ export const InputStyles = StyleSheet.create(theme => ({
           lineHeight: 18,
         },
         xl: {
-          paddingHorizontal: theme.sizes[4],
+          paddingHorizontal: theme.sizes['3.5'],
           minHeight: theme.sizes[12],
           maxHeight: theme.sizes[12],
           minWidth: theme.sizes[12],
           fontSize: theme.fontSizes.lg,
         },
         '2xl': {
-          paddingHorizontal: theme.sizes['4.5'],
+          paddingHorizontal: theme.sizes[4],
           minHeight: theme.sizes[16],
           maxHeight: theme.sizes[16],
           minWidth: theme.sizes[16],
-          ...textStyle['3xl'],
+          // ...textStyle['3xl'],
+          fontSize: theme.fontSizes['3xl'],
         },
         flex: {
           paddingHorizontal: theme.sizes[2],

package/lib/theme/Select.recipe.tsx

@@ -24,12 +24,15 @@ export const SelectStyles = StyleSheet.create((theme, rt) => ({
       size: {
         sm: {
           height: theme.sizes[9],
+          padding: theme.spacing[1],
         },
         md: {
           height: theme.sizes[10],
+          padding: theme.spacing[2],
         },
         lg: {
           height: theme.sizes[11],
+          padding: theme.spacing[3],
         },
         nosize: {},
       },