react-native-varia 0.0.1 → 0.2.0

package/lib/theme/Slider.recipe.tsx

@@ -1,226 +1,142 @@
 import {StyleSheet} from 'react-native-unistyles'
-import {hexToRgba} from '../style/utils'
+import {hexToRgba} from '../style/varia/utils'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
-const SliderTokens = {
-  defaultProps: {
-    size: 'normal',
-    colorPalette: 'primary',
-  },
-  maximumTrack: {
+export const SliderDefaultVariants = {
+  size: 'md',
+  variant: 'solid',
+} as const
+export const SliderStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.emphasized,
+    borderRadius: theme.radii.full,
     variants: {
-      size: {
-        material: {
-          height: 8,
-        },
-        normal: {
-          height: 40,
-        },
-        big: {
-          height: 80,
-        },
-        fader: {
-          height: 80,
-        },
+      variant: {
+        solid: {},
       },
-    },
-  },
-  minimumTrack: {
-    variants: {
       size: {
-        material: {
-          height: 40,
+        xs: {
+          height: theme.sizes[2],
         },
-        normal: {
-          height: 40,
+        sm: {
+          height: theme.sizes[4],
         },
-        big: {
-          height: 80,
+        md: {
+          height: theme.sizes[5],
         },
-        fader: {
-          height: 80,
+        lg: {
+          height: theme.sizes[8],
+        },
+        xl: {
+          height: theme.sizes[10],
         },
       },
     },
-  },
-  thumb: {
+  }),
+  maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.emphasized,
+    borderRadius: theme.radii.full,
     variants: {
+      variant: {
+        solid: {},
+      },
       size: {
-        material: {
-          width: 40,
-          height: 40,
-        },
-        normal: {
-          width: 40,
-          height: 40,
-        },
-        big: {
-          width: 20,
-          height: 150,
+        xs: {
+          height: theme.sizes[2],
         },
-        fader: {
-          width: 20,
-          height: 80,
+        sm: {
+          height: theme.sizes[4],
         },
-      },
-    },
-  },
-} as const
-const SliderStyles = StyleSheet.create(theme => ({
-  container: {
-    variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.primary50,
+        md: {
+          height: theme.sizes[5],
         },
-        secondary: {
-          backgroundColor: 'white',
+        lg: {
+          height: theme.sizes[8],
         },
-        tertiary: {
-          backgroundColor: 'black',
+        xl: {
+          height: theme.sizes[10],
         },
       },
-      // size: {
-      //   material: {
-      //     height: 8,
-      //   },
-      //   normal: {
-      //     height: 40,
-      //   },
-      //   big: {
-      //     height: 80,
-      //   },
-      //   fader: {
-      //     height: 80,
-      //   },
-      // },
     },
-  },
-  maximumTrack: {
+  }),
+  minimumTrack: (
+    colorPalette: PalettesWithNestedKeys,
+    opacityTrack: boolean,
+  ) => ({
+    backgroundColor: opacityTrack
+      ? hexToRgba(theme.colors[colorPalette].default, 0.5)
+      : theme.colors[colorPalette].default,
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.primary50,
-        },
-        secondary: {
-          backgroundColor: 'white',
-        },
-        tertiary: {
-          backgroundColor: 'black',
-        },
+      variant: {
+        solid: {},
       },
       size: {
-        material: {
-          height: 8,
+        xs: {
+          height: theme.sizes[2],
+        },
+        sm: {
+          height: theme.sizes[4],
         },
-        normal: {
-          height: 40,
+        md: {
+          height: theme.sizes[5],
         },
-        big: {
-          height: 80,
+        lg: {
+          height: theme.sizes[8],
         },
-        fader: {
-          height: 80,
+        xl: {
+          height: theme.sizes[10],
         },
       },
     },
-  },
-  minimumTrack: (opacityTrack: boolean) => ({
+  }),
+  thumb: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.default,
+    borderColor: theme.colors[colorPalette].default,
+    borderRadius: theme.radii.full,
+    borderWidth: 2,
     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',
-        },
+      variant: {
+        solid: {},
       },
       size: {
-        material: {
-          height: 40,
+        xs: {
+          width: theme.sizes[4],
+          height: theme.sizes[4],
+        },
+        sm: {
+          width: theme.sizes[6],
+          height: theme.sizes[6],
         },
-        normal: {
-          height: 40,
+        md: {
+          width: theme.sizes[7],
+          height: theme.sizes[7],
         },
-        big: {
-          height: 80,
+        lg: {
+          width: theme.sizes[8],
+          height: theme.sizes[8],
         },
-        fader: {
-          height: 80,
+        xl: {
+          width: theme.sizes[11],
+          height: theme.sizes[11],
         },
       },
     },
   }),
-  thumb: {
+  step: (colorPalette: PalettesWithNestedKeys) => ({
+    // TODO: type correctly theme.colors
+    // @ts-ignore
+    backgroundColor: theme.colors.white['0'],
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.primary100,
-        },
-        secondary: {
-          backgroundColor: 'white',
-        },
-        tertiary: {
-          backgroundColor: '#51e2be',
-        },
+      variant: {
+        solid: {},
       },
-      // 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',
-        },
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
       },
     },
-  },
+  }),
 }))
-
-export {SliderTokens, SliderStyles}

package/lib/theme/Slideshow.recipe.tsx

@@ -1,8 +1,9 @@
-import { StyleSheet } from 'react-native-unistyles';
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 export const SlideshowTokens = {
   defaultProps: {
-    colorScheme: 'primary',
+    variant: 'solid',
     spacing: 'default',
     animation: 'defaultSpring',
   },
@@ -32,111 +33,32 @@ export const SlideshowTokens = {
           duration: 300,
         },
       },
-    }
-  }
+    },
+  },
 } as const
 
-export const SlideshowStyles = StyleSheet.create((theme) => ({
-  container: {
+export const SlideshowStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.default,
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.background,
-          borderColor: theme.colors.foreground,
-          borderWidth: 0,
-          borderRadius: 0,
-        },
-        secondary: {
-          backgroundColor: theme.colors.background,
-          borderColor: 'blue',
-          borderWidth: 5,
-          borderRadius: 20,
-        },
-        tertiary: {
-          backgroundColor: theme.colors.foreground,
-          borderColor: theme.colors.foreground,
-          borderWidth: 0,
-          borderRadius: 0,
-        },
-      },
-      spacing: {
-        // default: {
-        //   margin: 10,
-        // },
-        // large: {
-        //   margin: 20,
-        // },
-        // small: {
-        //   margin: 5,
-        // },
-        // none: {
-        //   margin: 0,
-        // },
+      variant: {
+        solid: {},
+        outline: {},
       },
-    }
-  },
-    // animation: {
-    //   defaultSpring: {
-    //     type: 'withSpring',
-    //     props: {
-    //       damping: 20,
-    //       stiffness: 200,
-    //       mass: 1,
-    //       overshootClamping: true,
-    //     },
-    //   },
-    //   slowSpring: {
-    //     type: 'withSpring',
-    //     props: {
-    //       damping: 200,
-    //       stiffness: 20,
-    //       mass: 10,
-    //       overshootClamping: true,
-    //     },
-    //   },
-    //   defaultTiming: {
-    //     type: 'withTiming',
-    //     props: {
-    //       duration: 300,
-    //     },
-    //   },
-    // },
-  slideContainer: {
+    },
+  }),
+  slideContainer: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: 'transparent',
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: 'transparent',
-          borderWidth: 0,
-          borderRadius: 0,
-          borderColor: 'transparent',
-        },
-        secondary: {
-          backgroundColor: 'transparent',
-          borderWidth: 0,
-          borderRadius: 20,
-          borderColor: 'transparent',
-        },
-        tertiary: {
-          backgroundColor: "transparent",
-          borderWidth: 5,
-          borderRadius: 20,
-          borderColor: 'black',
-        },
-      },
-      spacing: {
-        default: {
-          margin: 10,
-        },
-        large: {
-          margin: 20,
-        },
-        small: {
-          margin: 5,
-        },
-        none: {
-          margin: 0,
+      variant: {
+        solid: {},
+        outline: {
+          borderColor: theme.colors.border.default,
+          borderWidth: 1,
+          borderRadius: theme.radii['3xl'],
+          margin: theme.spacing[2],
         },
       },
     },
-  },
-}));
+  }),
+}))

package/lib/theme/SlidingDrawer.recipe.tsx

@@ -1,12 +1,10 @@
-import { StyleSheet } from 'react-native-unistyles';
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
 export const SlidingDrawerTokens = {
   defaultProps: {
-    colorScheme: 'primary',
-    animation: "defaultSpring",
-    backgroundColor: "white",
-    borderRadius: 16,
-    boxShadow: '0px -10px 20px rgba(100, 0, 250, 0.6)',
+    variant: 'solid',
+    animation: 'defaultSpring',
   },
   variants: {
     animation: {
@@ -33,59 +31,23 @@ export const SlidingDrawerTokens = {
         props: {
           duration: 1000,
         },
-      }
+      },
     },
-  }
-}
-export const SlidingDrawerStyles = StyleSheet.create((theme) => ({
-  // defaultProps: {
-  //     colorScheme: 'primary',
-  //     animation: "defaultSpring",
-  //     backgroundColor: "white",
-  //     borderRadius: 16,
-  //     boxShadow: '0px -10px 20px rgba(100, 0, 250, 0.6)',
-  //   },
-  container: {
+  },
+} as const
+export const SlidingDrawerStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    boxShadow: `0px -10px 20px black`,
+    borderRadius: theme.radii.lg,
+    backgroundColor: theme.colors.bg.default,
+    padding: theme.spacing[3],
     variants: {
-      colorPalette: {
-        primary: {
-          backgroundColor: theme.colors.accentBackground,
-          // boxShadow: '0px -10px 20px #000000',
-        },
-        secondary: {
-          backgroundColor: "white",
-          // boxShadow: `0px -10px 20px lime`,
-        },
-        tertiary: {
-          backgroundColor: 'lime',
-        },
+      variant: {
+        solid: {},
       },
-      // animation: {
-      //   defaultSpring: {
-      //     type: 'withSpring' as const,
-      //     props: {
-      //       damping: 20,
-      //       stiffness: 200,
-      //       mass: 1,
-      //       overshootClamping: true,
-      //     },
-      //   },
-      //   slowSpring: {
-      //     type: 'withSpring' as const,
-      //     props: {
-      //       damping: 200,
-      //       stiffness: 20,
-      //       mass: 10,
-      //       overshootClamping: true,
-      //     },
-      //   },
-      //   defaultTiming: {
-      //     type: 'withTiming' as const,
-      //     props: {
-      //       duration: 1000,
-      //     },
-      //   },
-      // },
-    }
-  }
-}));
+    },
+  }),
+  backdrop: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.backdrop,
+  }),
+}))

package/lib/theme/Spinner.recipe.tsx

@@ -1,8 +1,33 @@
-import {SliderTokensType} from '../style/types'
+import {StyleSheet} from 'react-native-unistyles'
+import {SliderTokensType} from '../style/varia/types'
 
 export const SpinnerTokens = {
   defaultProps: {
-    size: 24,
-    color: 'categoryOrange',
+    size: 'xl',
+    color: 'colorPalette.9',
   },
 } as SliderTokensType
+
+export const SpinnerStyles = StyleSheet.create(theme => ({
+  base: {
+    variants: {
+      size: {
+        xs: {
+          width: theme.sizes[3],
+        },
+        sm: {
+          width: theme.sizes[4],
+        },
+        md: {
+          width: theme.sizes[6],
+        },
+        lg: {
+          width: theme.sizes[8],
+        },
+        xl: {
+          width: theme.sizes[12],
+        },
+      },
+    },
+  },
+}))