react-native-varia 0.0.1 → 0.2.1

package/lib/theme/GradientText.recipe.tsx

@@ -1,9 +1,10 @@
-import {StyleSheet} from 'react-native-unistyles'
-import {createGradientTokens} from '../style/types'
+import {textStyle} from '../style/varia/textStyles'
+import {createGradientTextTokens} from '../style/varia/types'
 
-const gradientTextTokens = createGradientTokens({
+export const gradientTextTokens = createGradientTextTokens({
   defaultProps: {
-    colorPalette: 'primary',
+    variant: 'solid',
+    size: 'md',
     direction: 'to top left',
   },
   variants: {
@@ -17,33 +18,46 @@ const gradientTextTokens = 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: 'accentLines',
+    variant: {
+      solid: {
+        startColor: 'colorPalette.6',
+        endColor: 'colorPalette.9',
       },
-      secondary: {
-        startColor: 'white',
-        endColor: 'black',
+    },
+    size: {
+      xs: {
+        ...textStyle.xs,
       },
-      tertiary: {
-        startColor: 'active',
-        endColor: 'violet',
+      sm: {
+        ...textStyle.sm,
       },
-    },
-  },
-} as const)
-
-export {gradientTextTokens}
-
-const GradientTextStyles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      colorPalette: {
-        primary: {},
+      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'],
       },
     },
   },
-}))
-
-export default GradientTextStyles
+} as const)

package/lib/theme/IconWrapper.recipe.tsx

@@ -1,32 +1,22 @@
-import {StyleSheet} from 'react-native-unistyles'
-import {wpx, hpx} from '../style/utils'
-import {createIconTokens} from '../style/types'
+import {wpx, hpx} from '../style/varia/utils'
+import {createIconTokens} from '../style/varia/types'
 
 export const IconTokens = createIconTokens({
-  // width: wpx(28),
-  // height: hpx(28),
-  // viewBoxWidth: wpx(28),
-  // viewBoxHeight: hpx(28),
-  // defaultScale: 1,
-  // defaultColor: '#000000',
   defaultProps: {
-    colorPalette: 'primary',
-    size: 'md',
+    variant: 'solid',
+    sizeVariant: 'md',
     scale: 1,
   },
   variants: {
-    colorPalette: {
-      primary: {
-        color: 'foreground',
+    variant: {
+      solid: {
+        color: 'fg.default',
       },
-      secondary: {
-        color: 'background',
-      },
-      tertiary: {
-        color: 'active',
+      subtle: {
+        color: 'accent.a3',
       },
     },
-    size: {
+    sizeVariant: {
       sm: {
         width: wpx(24),
         height: hpx(24),
@@ -54,68 +44,3 @@ export const IconTokens = createIconTokens({
     },
   },
 } as const)
-
-// const IconStyles = StyleSheet.create(theme => ({
-//   container: {
-//     variants: {
-//       colorPalette: {
-//         primary: {
-//           backgroundColor: 'tomato',
-//         },
-//         secondary: {
-//           backgroundColor: theme.colors.foreground,
-//         }
-//       },
-//       size: {
-//         sm: {
-//           height: 32,
-//           maxHeight: 32,
-//           padding: 6,
-//         },
-//         md: {
-//           maxHeight: 48,
-//           height: 48,
-//           padding: 8,
-//         },
-//         lg: {
-//           maxHeight: 64,
-//           height: 64,
-//           padding: 12,
-//         },
-//         xl: {
-//           maxHeight: 80,
-//           height: 80,
-//           padding: 16,
-//         }
-//       }
-//     },
-//   },
-//   text: {
-//     variants: {
-//       colorPalette: {
-//         primary: {
-//           color: 'white',
-//         },
-//         secondary: {
-//           color: theme.colors.categoryAquamarine,
-//         }
-//       },
-//       size: {
-//         sm: {
-//           fontSize: 24,
-//         },
-//         md: {
-//           fontSize: 28,
-//         },
-//         lg: {
-//           fontSize: 32,
-//         },
-//         xl: {
-//           fontSize: 36,
-//         }
-//       }
-//     }
-//   }
-// }))
-
-// export default IconStyles

package/lib/theme/Input.recipe.tsx

@@ -1,110 +1,103 @@
 import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
 
-export const InputTokens = {
-  defaultProps: {
-    colorPalette: 'primary',
-    size: 'md',
-    spacing: 'md',
-    placeholderColor: 'white',
-    marginHorizontal: 30,
-  },
+export const InputDefaultVariants = {
+  variant: 'solid',
+  size: 'md',
+  spacing: 'md',
 } as const
 
 export const InputStyles = StyleSheet.create(theme => ({
-  // defaultProps: {
-  //   variantType: 'primary',
-  //   variantSize: 'xl',
-  //   variantSpacing: 'md',
-  //   color: () => "white",
-  //   placeholderColor: () => "white",
-  //   marginHorizontal: 30,
-  // },
-  label: {
+  placeholder: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
-      colorPalette: {
-        primary: {
-          color: theme.colors.foreground,
-        },
-        secondary: {
-          color: 'pink',
-        },
-        tertiary: {
-          color: 'blue',
-        },
-        another: {
-          color: 'green',
+      invalid: {
+        true: {
+          color: theme.colors.fg.error,
         },
+        false: {},
       },
       size: {
-        sm: {
-          fontSize: 16,
-        },
-        md: {
-          fontSize: 18,
-        },
-        lg: {
-          fontSize: 20,
-        },
-        xl: {
-          fontSize: 22,
-        },
-      },
-      spacing: {
-        sm: {
-          marginHorizontal: 10,
-        },
-        md: {
-          marginHorizontal: 10,
-        },
-        xl: {
-          marginHorizontal: 30,
-        },
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
       },
     },
-  },
-  input: {
+  }),
+  input: (colorPalette: PalettesWithNestedKeys) => ({
+    borderColor: theme.colors.border.default,
+    borderWidth: 1,
+    borderRadius: 4,
+    color: theme.colors.fg.default,
+    lineHeight: 10,
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: {
-            xs: theme.colors.background,
-            sm: 'white',
-            lg: 'white',
-          },
+      focused: {
+        true: {
+          borderColor: theme.colors[colorPalette].default,
         },
-        secondary: {
-          backgroundColor: 'transparent',
-          borderBottomWidth: 1,
-          borderColor: theme.colors.foreground,
+        false: {
+          borderColor: theme.colors.border.default,
         },
-        tertiary: {backgroundColor: 'white'},
-        another: {backgroundColor: 'red'},
       },
-      size: {
-        sm: {
-          // width: 100,
-          height: 50,
-        },
-        md: {
-          // width: 100,
-          height: 50,
+      disabled: {
+        true: {
+          opacity: 0.4,
         },
-        xl: {
-          // width: 200,
-          height: 80,
+        false: {},
+      },
+      invalid: {
+        true: {
+          borderColor: theme.colors.fg.error,
         },
+        false: {},
       },
-      spacing: {
+      size: {
+        xs: {
+          paddingHorizontal: theme.sizes[2],
+          minHeight: theme.sizes[8],
+          maxHeight: theme.sizes[8],
+          minWidth: theme.sizes[8],
+          fontSize: theme.fontSizes.xs,
+        },
         sm: {
-          marginHorizontal: 10,
+          paddingHorizontal: theme.sizes['2.5'],
+          minHeight: theme.sizes[9],
+          maxHeight: theme.sizes[9],
+          minWidth: theme.sizes[9],
+          fontSize: theme.fontSizes.sm,
         },
         md: {
-          marginHorizontal: 10,
+          paddingHorizontal: theme.sizes[3],
+          minHeight: theme.sizes[10],
+          maxHeight: theme.sizes[10],
+          minWidth: theme.sizes[10],
+          fontSize: theme.fontSizes.md,
+        },
+        lg: {
+          paddingHorizontal: theme.sizes['3.5'],
+          minHeight: theme.sizes[11],
+          maxHeight: theme.sizes[11],
+          minWidth: theme.sizes[11],
+          fontSize: theme.fontSizes.md,
+          lineHeight: 18,
         },
         xl: {
-          marginHorizontal: 30,
+          paddingHorizontal: theme.sizes[4],
+          minHeight: theme.sizes[12],
+          maxHeight: theme.sizes[12],
+          minWidth: theme.sizes[12],
+          fontSize: theme.fontSizes.lg,
+        },
+        '2xl': {
+          paddingHorizontal: theme.sizes['4.5'],
+          minHeight: theme.sizes[16],
+          maxHeight: theme.sizes[16],
+          minWidth: theme.sizes[16],
+          ...textStyle['3xl'],
         },
       },
     },
-  },
+  }),
 }))

package/lib/theme/Link.recipe.tsx

@@ -1,51 +1,24 @@
 import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
-const LinkStyles = StyleSheet.create(theme => ({
-  // return {
-  //   defaultProps: {
-  //     as: 'h1',
-  //     color: () => "white",
-  //     underline: false,
-  //     colorScheme: 'primary',
-  // },
-  link: {
-    // customVariants: {
-    //   elevation: {
-    //     sm: { backgroundColor: 'red' },
-    //     md: { backgroundColor: 'green' },
-    //     xl: { backgroundColor: 'blue' },
-    //   },
-    //   shape: {
-    //     roundBorder: { borderRadius: 10 },
-    //     square: { borderRadius: 0 },
-    //   },
-    // },
+export const LinkTokens = {
+  defaultProps: {
+    variant: 'solid',
+    size: 'md',
+  },
+} as const
+
+export const LinkStyles = StyleSheet.create(theme => ({
+  link: (colorPalette: PalettesWithNestedKeys) => ({
     variants: {
-      colorPalette: {
-        primary: {
-          color: theme.colors.foreground,
-        },
-        secondary: {
-          color: theme.colors.categoryAquamarine,
-        },
-      },
-      size: {
-        sm: {
-          fontSize: 14,
-        },
-        md: {
-          fontSize: 16,
+      variant: {
+        solid: {
+          color: theme.colors[colorPalette].default,
         },
-        lg: {
-          fontSize: 18,
+        outline: {
+          color: theme.colors[colorPalette].text,
         },
       },
-      // type: () => ({
-      //   underline: { textDecorationLine: 'underline' },
-      //   bold: { fontWeight: 'bold' },
-      // }),
     },
-  },
+  }),
 }))
-
-export default LinkStyles

package/lib/theme/Modal.recipe.tsx

@@ -1,34 +1,72 @@
 import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {FadeIn, FadeOut, Keyframe} from 'react-native-reanimated'
+import {textStyle} from '../style/varia/textStyles'
 
 export const ModalTokens = {
   defaultProps: {
-    colorPalette: 'primary',
+    variant: 'solid',
+    animation: 'animation1',
   },
-  baseStyles: {
-    backgroundColor: 'blue',
+  animations: {
+    variants: {
+      animation1: {
+        enteringOverlay: FadeIn.duration(100),
+        exitingOverlay: FadeOut.duration(150),
+        enteringContent: new Keyframe({
+          0: {opacity: 0, transform: [{translateY: 40}]},
+          20: {opacity: 0.3, transform: [{translateY: 20}]},
+          100: {opacity: 1, transform: [{translateY: 0}]},
+        }).duration(150),
+        exitingContent: new Keyframe({
+          0: {opacity: 1, transform: [{translateY: 0}]},
+          100: {opacity: 0, transform: [{translateY: 40}]},
+        }).duration(100),
+      },
+      animation2: {
+        enteringOverlay: FadeIn.duration(100),
+        exitingOverlay: FadeOut.duration(250),
+        enteringContent: new Keyframe({
+          0: {opacity: 0, transform: [{scale: 0.85}]},
+          20: {opacity: 0.5, transform: [{scale: 0.95}]},
+          100: {opacity: 1, transform: [{scale: 1}]},
+        }).duration(100),
+        exitingContent: new Keyframe({
+          0: {opacity: 1, transform: [{scale: 1}]},
+          100: {opacity: 0, transform: [{scale: 0.8}]},
+        }).duration(100),
+      },
+    },
   },
 } as const
 
 export const ModalStyles = StyleSheet.create(theme => ({
-  container: {
+  content: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.default,
+    boxShadow: theme.shadows.lg,
+    borderRadius: theme.radii.lg,
+    padding: theme.spacing[4],
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: 'aquamarine',
-          boxShadow: '0px 0px 50px rgba(250, 250, 250, 0.6)',
-        },
-        secondary: {
-          backgroundColor: 'aliceblue',
-          boxShadow: '0px 0px 50px rgba(250, 250, 250, 0.6)',
-        },
-        tertiary: {
-          backgroundColor: {
-            md: theme.colors.categoryGreen,
-            xl: theme.colors.accentBackground,
-          },
-          boxShadow: '0px 0px 50px rgba(250, 250, 250, 0.6)',
-        },
+      variant: {
+        solid: {},
       },
     },
-  },
+  }),
+  overlay: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.backdrop,
+    variants: {
+      variant: {
+        solid: {},
+      },
+    },
+  }),
+  title: (colorPalette: PalettesWithNestedKeys) => ({
+    fontWeight: theme.fontWeights.semibold,
+    ...textStyle.lg,
+    variants: {
+      variant: {
+        solid: {},
+      },
+    },
+  }),
 }))