react-native-varia 0.0.1

package/lib/theme/GradientText.recipe.tsx

@@ -0,0 +1,49 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {createGradientTokens} from '../style/types'
+
+const gradientTextTokens = createGradientTokens({
+  defaultProps: {
+    colorPalette: 'primary',
+    direction: 'to top left',
+  },
+  variants: {
+    direction: {
+      'to top': {x1: 0, y1: 0, x2: 0, y2: 1},
+      'to bottom': {x1: 0, y1: 1, x2: 0, y2: 0},
+      'to left': {x1: 0, y1: 0, x2: 1, y2: 0},
+      'to right': {x1: 1, y1: 0, x2: 0, y2: 0},
+      'to top left': {x1: 0, y1: 0, x2: 1, y2: 1},
+      'to top right': {x1: 1, y1: 0, x2: 0, y2: 1},
+      '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',
+      },
+      secondary: {
+        startColor: 'white',
+        endColor: 'black',
+      },
+      tertiary: {
+        startColor: 'active',
+        endColor: 'violet',
+      },
+    },
+  },
+} as const)
+
+export {gradientTextTokens}
+
+const GradientTextStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {},
+      },
+    },
+  },
+}))
+
+export default GradientTextStyles

package/lib/theme/Icon.recipe.tsx

@@ -0,0 +1,122 @@
+import { StyleSheet } from "react-native-unistyles"
+import { wpx, hpx } from "../style/utils"
+import { createIconTokens } from "../style/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',
+    scale: 1,
+  },
+  variants: {
+    colorPalette: {
+      primary: {
+        color: 'foreground',
+      },
+      secondary: {
+        color: 'background',
+      },
+      tertiary: {
+        color: 'active',
+      }
+    },
+    size: {
+      sm: {
+        width: wpx(24),
+        height: hpx(24),
+        viewBoxWidth: wpx(24),
+        viewBoxHeight: hpx(24),
+      },
+      md: {
+        width: wpx(28),
+        height: hpx(28),
+        viewBoxWidth: wpx(28),
+        viewBoxHeight: hpx(28),
+      },
+      lg: {
+        width: wpx(42),
+        height: hpx(42),
+        viewBoxWidth: wpx(42),
+        viewBoxHeight: hpx(42),
+      },
+      xl: {
+        width: wpx(100),
+        height: hpx(100),
+        viewBoxWidth: wpx(100),
+        viewBoxHeight: hpx(100),
+      }
+    }
+  }
+} 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/IconWrapper.recipe.tsx

@@ -0,0 +1,121 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {wpx, hpx} from '../style/utils'
+import {createIconTokens} from '../style/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',
+    scale: 1,
+  },
+  variants: {
+    colorPalette: {
+      primary: {
+        color: 'foreground',
+      },
+      secondary: {
+        color: 'background',
+      },
+      tertiary: {
+        color: 'active',
+      },
+    },
+    size: {
+      sm: {
+        width: wpx(24),
+        height: hpx(24),
+        viewBoxWidth: wpx(24),
+        viewBoxHeight: hpx(24),
+      },
+      md: {
+        width: wpx(28),
+        height: hpx(28),
+        viewBoxWidth: wpx(28),
+        viewBoxHeight: hpx(28),
+      },
+      lg: {
+        width: wpx(42),
+        height: hpx(42),
+        viewBoxWidth: wpx(42),
+        viewBoxHeight: hpx(42),
+      },
+      xl: {
+        width: wpx(100),
+        height: hpx(100),
+        viewBoxWidth: wpx(100),
+        viewBoxHeight: hpx(100),
+      },
+    },
+  },
+} 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

@@ -0,0 +1,110 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+export const InputTokens = {
+  defaultProps: {
+    colorPalette: 'primary',
+    size: 'md',
+    spacing: 'md',
+    placeholderColor: 'white',
+    marginHorizontal: 30,
+  },
+} as const
+
+export const InputStyles = StyleSheet.create(theme => ({
+  // defaultProps: {
+  //   variantType: 'primary',
+  //   variantSize: 'xl',
+  //   variantSpacing: 'md',
+  //   color: () => "white",
+  //   placeholderColor: () => "white",
+  //   marginHorizontal: 30,
+  // },
+  label: {
+    variants: {
+      colorPalette: {
+        primary: {
+          color: theme.colors.foreground,
+        },
+        secondary: {
+          color: 'pink',
+        },
+        tertiary: {
+          color: 'blue',
+        },
+        another: {
+          color: 'green',
+        },
+      },
+      size: {
+        sm: {
+          fontSize: 16,
+        },
+        md: {
+          fontSize: 18,
+        },
+        lg: {
+          fontSize: 20,
+        },
+        xl: {
+          fontSize: 22,
+        },
+      },
+      spacing: {
+        sm: {
+          marginHorizontal: 10,
+        },
+        md: {
+          marginHorizontal: 10,
+        },
+        xl: {
+          marginHorizontal: 30,
+        },
+      },
+    },
+  },
+  input: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: {
+            xs: theme.colors.background,
+            sm: 'white',
+            lg: 'white',
+          },
+        },
+        secondary: {
+          backgroundColor: 'transparent',
+          borderBottomWidth: 1,
+          borderColor: theme.colors.foreground,
+        },
+        tertiary: {backgroundColor: 'white'},
+        another: {backgroundColor: 'red'},
+      },
+      size: {
+        sm: {
+          // width: 100,
+          height: 50,
+        },
+        md: {
+          // width: 100,
+          height: 50,
+        },
+        xl: {
+          // width: 200,
+          height: 80,
+        },
+      },
+      spacing: {
+        sm: {
+          marginHorizontal: 10,
+        },
+        md: {
+          marginHorizontal: 10,
+        },
+        xl: {
+          marginHorizontal: 30,
+        },
+      },
+    },
+  },
+}))

package/lib/theme/Link.recipe.tsx

@@ -0,0 +1,51 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+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 },
+    //   },
+    // },
+    variants: {
+      colorPalette: {
+        primary: {
+          color: theme.colors.foreground,
+        },
+        secondary: {
+          color: theme.colors.categoryAquamarine,
+        },
+      },
+      size: {
+        sm: {
+          fontSize: 14,
+        },
+        md: {
+          fontSize: 16,
+        },
+        lg: {
+          fontSize: 18,
+        },
+      },
+      // type: () => ({
+      //   underline: { textDecorationLine: 'underline' },
+      //   bold: { fontWeight: 'bold' },
+      // }),
+    },
+  },
+}))
+
+export default LinkStyles

package/lib/theme/Modal.recipe.tsx

@@ -0,0 +1,34 @@
+import {StyleSheet} from 'react-native-unistyles'
+
+export const ModalTokens = {
+  defaultProps: {
+    colorPalette: 'primary',
+  },
+  baseStyles: {
+    backgroundColor: 'blue',
+  },
+} as const
+
+export const ModalStyles = StyleSheet.create(theme => ({
+  container: {
+    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)',
+        },
+      },
+    },
+  },
+}))

package/lib/theme/ReText.recipe.tsx

@@ -0,0 +1,7 @@
+const reTextTokens = {
+  defaultProps: {
+    color: 'black',
+  },
+};
+
+export default reTextTokens;

package/lib/theme/Slider.recipe.tsx

@@ -0,0 +1,226 @@
+import {StyleSheet} from 'react-native-unistyles'
+import {hexToRgba} from '../style/utils'
+
+const SliderTokens = {
+  defaultProps: {
+    size: 'normal',
+    colorPalette: 'primary',
+  },
+  maximumTrack: {
+    variants: {
+      size: {
+        material: {
+          height: 8,
+        },
+        normal: {
+          height: 40,
+        },
+        big: {
+          height: 80,
+        },
+        fader: {
+          height: 80,
+        },
+      },
+    },
+  },
+  minimumTrack: {
+    variants: {
+      size: {
+        material: {
+          height: 40,
+        },
+        normal: {
+          height: 40,
+        },
+        big: {
+          height: 80,
+        },
+        fader: {
+          height: 80,
+        },
+      },
+    },
+  },
+  thumb: {
+    variants: {
+      size: {
+        material: {
+          width: 40,
+          height: 40,
+        },
+        normal: {
+          width: 40,
+          height: 40,
+        },
+        big: {
+          width: 20,
+          height: 150,
+        },
+        fader: {
+          width: 20,
+          height: 80,
+        },
+      },
+    },
+  },
+} as const
+const SliderStyles = StyleSheet.create(theme => ({
+  container: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.primary50,
+        },
+        secondary: {
+          backgroundColor: 'white',
+        },
+        tertiary: {
+          backgroundColor: 'black',
+        },
+      },
+      // size: {
+      //   material: {
+      //     height: 8,
+      //   },
+      //   normal: {
+      //     height: 40,
+      //   },
+      //   big: {
+      //     height: 80,
+      //   },
+      //   fader: {
+      //     height: 80,
+      //   },
+      // },
+    },
+  },
+  maximumTrack: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.primary50,
+        },
+        secondary: {
+          backgroundColor: 'white',
+        },
+        tertiary: {
+          backgroundColor: 'black',
+        },
+      },
+      size: {
+        material: {
+          height: 8,
+        },
+        normal: {
+          height: 40,
+        },
+        big: {
+          height: 80,
+        },
+        fader: {
+          height: 80,
+        },
+      },
+    },
+  },
+  minimumTrack: (opacityTrack: boolean) => ({
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: opacityTrack
+            ? hexToRgba(theme.colors.primary500, 0.5)
+            : theme.colors.primary500,
+        },
+        secondary: {
+          backgroundColor: opacityTrack
+            ? hexToRgba(theme.colors.primary100, 0.5)
+            : 'white',
+        },
+        tertiary: {
+          backgroundColor: opacityTrack
+            ? hexToRgba(theme.colors.primary100, 0.5)
+            : '#51e2be',
+        },
+      },
+      size: {
+        material: {
+          height: 40,
+        },
+        normal: {
+          height: 40,
+        },
+        big: {
+          height: 80,
+        },
+        fader: {
+          height: 80,
+        },
+      },
+    },
+  }),
+  thumb: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: theme.colors.primary100,
+        },
+        secondary: {
+          backgroundColor: 'white',
+        },
+        tertiary: {
+          backgroundColor: '#51e2be',
+        },
+      },
+      // type: {
+      //   material: {
+      //     height: 40,
+      //   },
+      //   normal: {
+      //     height: 40,
+      //   },
+      //   big: {
+      //     height: 80,
+      //   },
+      //   fader: {
+      //     height: 80,
+      //   },
+      // },
+      size: {
+        material: {
+          width: 40,
+          height: 40,
+        },
+        normal: {
+          width: 40,
+          height: 40,
+        },
+        big: {
+          width: 20,
+          height: 150,
+        },
+        fader: {
+          width: 20,
+          height: 80,
+        },
+      },
+    },
+  },
+  step: {
+    variants: {
+      colorPalette: {
+        primary: {
+          backgroundColor: 'violet',
+        },
+        secondary: {
+          backgroundColor: 'white',
+        },
+        tertiary: {
+          backgroundColor: '#51e2be',
+        },
+      },
+    },
+  },
+}))
+
+export {SliderTokens, SliderStyles}