react-native-varia 0.3.0 → 0.4.1

package/lib/theme/Slider.recipe.tsx

@@ -8,7 +8,7 @@ export const SliderDefaultVariants = {
 export const SliderStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.emphasized,
-    borderRadius: theme.radii['2xl'],
+    borderRadius: theme.radii.xl,
     variants: {
       axis: {
         x: {},
@@ -16,34 +16,25 @@ export const SliderStyles = StyleSheet.create(theme => ({
       },
       variant: {
         solid: {},
-      },
-      size: {
-        xs: {
-          // height: theme.sizes[2],
-        },
-        sm: {
-          // height: theme.sizes[4],
-        },
-        md: {
-          // height: theme.sizes[5],
+        outline: {
+          borderRadius: theme.radii.sm,
+          borderColor: theme.colors[colorPalette].default,
+          borderWidth: 1,
         },
-        lg: {
-          // height: theme.sizes[8],
-        },
-        xl: {
-          // height: theme.sizes[10],
+        subtle: {
+          backgroundColor: theme.colors.bg.subtle,
         },
+      },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
         flex: {},
+        minimal: {},
       },
     },
     compoundVariants: [
-      {
-        axis: 'x',
-        size: 'xs',
-        styles: {
-          height: theme.sizes[2],
-        },
-      },
       {
         axis: 'x',
         size: 'sm',
@@ -79,13 +70,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
           minHeight: 50,
         },
       },
-      {
-        axis: 'y',
-        size: 'xs',
-        styles: {
-          width: theme.sizes[2],
-        },
-      },
       {
         axis: 'y',
         size: 'sm',
@@ -125,8 +109,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
   }),
   maximumTrack: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.emphasized,
-    // borderRadius: theme.radii.full,
-    // height: theme.sizes[5],
     variants: {
       axis: {
         x: {},
@@ -134,34 +116,21 @@ export const SliderStyles = StyleSheet.create(theme => ({
       },
       variant: {
         solid: {},
+        outline: {},
+        subtle: {
+          backgroundColor: theme.colors.bg.subtle,
+        },
       },
       size: {
-        xs: {
-          // height: theme.sizes[2],
-        },
-        sm: {
-          // height: theme.sizes[4],
-        },
-        md: {
-          // height: theme.sizes[5],
-        },
-        lg: {
-          // height: theme.sizes[8],
-        },
-        xl: {
-          // height: theme.sizes[10],
-        },
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
         flex: {},
+        minimal: {},
       },
     },
     compoundVariants: [
-      {
-        axis: 'x',
-        size: 'xs',
-        styles: {
-          height: theme.sizes[2],
-        },
-      },
       {
         axis: 'x',
         size: 'sm',
@@ -195,13 +164,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         size: 'flex',
         styles: {},
       },
-      {
-        axis: 'y',
-        size: 'xs',
-        styles: {
-          width: theme.sizes[2],
-        },
-      },
       {
         axis: 'y',
         size: 'sm',
@@ -232,50 +194,38 @@ export const SliderStyles = StyleSheet.create(theme => ({
       },
     ],
   }),
-  minimumTrack: (
-    colorPalette: PalettesWithNestedKeys,
-    opacityTrack: boolean,
-  ) => ({
+  minimumTrack: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors[colorPalette].default,
-    // opacityTrack
-    //   ? hexToRgba(theme.colors[colorPalette].default, 0.5)
-    //   : theme.colors[colorPalette].default,
-    // height: theme.sizes[5],
     variants: {
       axis: {
-        x: {},
-        y: {},
+        x: {
+          borderBottomLeftRadius: theme.radii.xl,
+          borderBottomRightRadius: 0,
+          borderTopLeftRadius: theme.radii.xl,
+        },
+        y: {
+          borderBottomLeftRadius: theme.radii.xl,
+          borderBottomRightRadius: theme.radii.xl,
+          borderTopLeftRadius: 0,
+        },
       },
       variant: {
         solid: {},
+        outline: {},
+        subtle: {},
       },
       size: {
-        xs: {
-          // height: theme.sizes[2],
-        },
-        sm: {
-          // height: theme.sizes[4],
-        },
-        md: {
-          // height: theme.sizes[5],
-        },
-        lg: {
-          // height: theme.sizes[8],
-        },
-        xl: {
-          // height: theme.sizes[10],
-        },
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
         flex: {},
+        minimal: {
+          borderRadius: theme.radii.sm,
+        },
       },
     },
     compoundVariants: [
-      {
-        axis: 'x',
-        size: 'xs',
-        styles: {
-          height: theme.sizes[2],
-        },
-      },
       {
         axis: 'x',
         size: 'sm',
@@ -309,13 +259,6 @@ export const SliderStyles = StyleSheet.create(theme => ({
         size: 'flex',
         styles: {},
       },
-      {
-        axis: 'y',
-        size: 'xs',
-        styles: {
-          width: theme.sizes[2],
-        },
-      },
       {
         axis: 'y',
         size: 'sm',
@@ -344,59 +287,43 @@ export const SliderStyles = StyleSheet.create(theme => ({
           width: theme.sizes[10],
         },
       },
+      {
+        axis: 'y',
+        size: 'flex',
+        styles: {},
+      },
     ],
   }),
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
-    backgroundColor: theme.colors.bg.default,
-    borderColor: theme.colors[colorPalette].default,
-    borderRadius: theme.radii.full,
-    borderWidth: 2,
-    // width: theme.sizes[7],
-    // height: theme.sizes[7],
     variants: {
       axis: {
         x: {},
         y: {},
       },
       variant: {
-        solid: {},
-      },
-      size: {
-        xs: {
-          // width: theme.sizes[4],
-          // height: theme.sizes[4],
-        },
-        sm: {
-          // width: theme.sizes[6],
-          // height: theme.sizes[6],
-        },
-        md: {
-          // width: theme.sizes[7],
-          // height: theme.sizes[7],
-        },
-        lg: {
-          // width: theme.sizes[8],
-          // height: theme.sizes[8],
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+          borderColor: theme.colors[colorPalette].default,
+          borderRadius: theme.radii.full,
+          borderWidth: 2,
         },
-        xl: {
-          // width: theme.sizes[11],
-          // height: theme.sizes[11],
+        subtle: {
+          backgroundColor: theme.colors[colorPalette].default,
         },
-        flex: {
-          // width: 30,
-          // height: 50,
+        outline: {
+          backgroundColor: theme.colors[colorPalette][11],
         },
       },
+      size: {
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {},
+        flex: {},
+        minimal: {},
+      },
     },
     compoundVariants: [
-      {
-        axis: 'x',
-        size: 'xs',
-        styles: {
-          width: theme.sizes[4],
-          height: theme.sizes[4],
-        },
-      },
       {
         axis: 'x',
         size: 'sm',
@@ -440,11 +367,13 @@ export const SliderStyles = StyleSheet.create(theme => ({
         },
       },
       {
-        axis: 'y',
-        size: 'xs',
+        axis: 'x',
+        size: 'minimal',
         styles: {
-          width: theme.sizes[4],
-          height: theme.sizes[4],
+          width: 0,
+          // height: 50,
+          // alignSel: 'stretch',
+          // flex: 1,
         },
       },
       {
@@ -487,11 +416,17 @@ export const SliderStyles = StyleSheet.create(theme => ({
           height: 30,
         },
       },
+      {
+        axis: 'y',
+        size: 'minimal',
+        styles: {
+          alignSelf: 'stretch',
+          height: 5,
+        },
+      },
     ],
   }),
   step: (colorPalette: PalettesWithNestedKeys) => ({
-    // TODO: type correctly theme.colors
-    // @ts-ignore
     backgroundColor: theme.colors.bg.default,
     variants: {
       axis: {
@@ -499,18 +434,19 @@ export const SliderStyles = StyleSheet.create(theme => ({
         y: {},
       },
       variant: {
-        solid: {},
+        solid: {
+          backgroundColor: theme.colors.bg.default,
+        },
+        subtle: {},
+        outline: {},
       },
       size: {
-        xs: {},
         sm: {},
         md: {},
         lg: {},
         xl: {},
-        flex: {
-          width: 5,
-          height: 5,
-        },
+        flex: {},
+        minimal: {},
       },
     },
   }),

package/lib/theme/Spinner.recipe.tsx

@@ -10,6 +10,7 @@ export const SpinnerTokens = {
 
 export const SpinnerStyles = StyleSheet.create(theme => ({
   base: {
+    height: 100,
     variants: {
       size: {
         xs: {
@@ -29,5 +30,8 @@ export const SpinnerStyles = StyleSheet.create(theme => ({
         },
       },
     },
+    _web: {
+      height: 120,
+    },
   },
 }))

package/lib/theme/Switch.recipe.tsx

@@ -30,7 +30,11 @@ export const SwitchTokens = {
 
 export const SwitchStyles = StyleSheet.create(theme => ({
   container: (colorPalette: PalettesWithNestedKeys) => ({
+    // width: theme.sizes[16],
+    // height: theme.sizes[16],
     borderRadius: theme.radii.full,
+    padding: theme.spacing['0.5'],
+    borderWidth: 0,
     variants: {
       variant: {
         solid: {},
@@ -39,14 +43,21 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         sm: {
           padding: theme.spacing['0.5'],
           maxWidth: theme.sizes[10],
+          minWidth: theme.sizes[10],
         },
         md: {
           padding: theme.spacing['0.5'],
           maxWidth: theme.sizes[16],
+          minWidth: theme.sizes[16],
         },
         lg: {
           padding: theme.spacing[1],
           maxWidth: theme.sizes[20],
+          minWidth: theme.sizes[20],
+        },
+        flex: {
+          borderRadius: theme.radii.md,
+          // alignSelf: 'stretch',
         },
       },
       enabled: {
@@ -70,6 +81,8 @@ export const SwitchStyles = StyleSheet.create(theme => ({
   thumb: (colorPalette: PalettesWithNestedKeys) => ({
     backgroundColor: theme.colors.bg.default,
     borderRadius: theme.radii.full,
+    // width: theme.sizes[6],
+    // height: theme.sizes[6],
     variants: {
       variant: {
         solid: {},
@@ -78,6 +91,12 @@ export const SwitchStyles = StyleSheet.create(theme => ({
         sm: {height: theme.sizes[5], width: theme.sizes[5]},
         md: {height: theme.sizes[6], width: theme.sizes[6]},
         lg: {height: theme.sizes[8], width: theme.sizes[8]},
+        flex: {
+          borderRadius: theme.radii.md,
+          alignSelf: 'stretch',
+          width: 30,
+          minHeight: 30,
+        },
       },
     },
     compoundVariants: [

package/lib/theme/Text.recipe.tsx

@@ -11,7 +11,7 @@ export const TextStyles = StyleSheet.create(theme => ({
       variant: {
         heading: {
           color: theme.colors.fg.default,
-          fontWeight: theme.fontWeights.semibold,
+          fontWeight: theme.fontWeights.bold,
         },
         default: {
           color: theme.colors.fg.default,
@@ -19,46 +19,97 @@ export const TextStyles = StyleSheet.create(theme => ({
         },
       },
       size: {
+        // xs: {
+        //   ...textStyle.xs,
+        //   // fontSize: 100
+        // },
+        // sm: {
+        //   ...textStyle.sm,
+        //   // fontSize: 100
+        // },
+        // md: {
+        //   // ...textStyle.md,
+        //   fontSize: 100
+        // },
+        // lg: {
+        //   ...textStyle.lg,
+        // },
+        // xl: {
+        //   ...textStyle.xl,
+        // },
+        // '2xl': {
+        //   ...textStyle['2xl'],
+        //   lineHeight: 32,
+        // },
+        // '3xl': {
+        //   ...textStyle['3xl'],
+        //   lineHeight: 38,
+        // },
+        // '4xl': {
+        //   ...textStyle['4xl'],
+        //   lineHeight: 44,
+        //   letterSpacing: -0.032,
+        // },
+        // '5xl': {
+        //   ...textStyle['5xl'],
+        //   lineHeight: 60,
+        //   letterSpacing: -0.032,
+        // },
+        // '6xl': {
+        //   ...textStyle['6xl'],
+        //   lineHeight: 72,
+        //   letterSpacing: -0.032,
+        // },
+        // '7xl': {
+        //   ...textStyle['7xl'],
+        //   lineHeight: 92,
+        //   letterSpacing: -0.032,
+        // },
         xs: {
-          ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
+          lineHeight: 12,
         },
         sm: {
-          ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
+          lineHeight: 20,
         },
         md: {
-          ...textStyle.md,
+          fontSize: theme.fontSizes.md,
+          lineHeight: 24,
         },
         lg: {
-          ...textStyle.lg,
+          fontSize: theme.fontSizes.lg,
+          lineHeight: 28,
         },
         xl: {
-          ...textStyle.xl,
+          fontSize: theme.fontSizes.xl,
+          lineHeight: 30,
         },
         '2xl': {
-          ...textStyle['2xl'],
+          fontSize: theme.fontSizes['2xl'],
           lineHeight: 32,
         },
         '3xl': {
-          ...textStyle['3xl'],
+          fontSize: theme.fontSizes['3xl'],
           lineHeight: 38,
         },
         '4xl': {
-          ...textStyle['4xl'],
+          fontSize: theme.fontSizes['4xl'],
           lineHeight: 44,
           letterSpacing: -0.032,
         },
         '5xl': {
-          ...textStyle['5xl'],
+          fontSize: theme.fontSizes['5xl'],
           lineHeight: 60,
           letterSpacing: -0.032,
         },
         '6xl': {
-          ...textStyle['6xl'],
+          fontSize: theme.fontSizes['6xl'],
           lineHeight: 72,
           letterSpacing: -0.032,
         },
         '7xl': {
-          ...textStyle['7xl'],
+          fontSize: theme.fontSizes['7xl'],
           lineHeight: 92,
           letterSpacing: -0.032,
         },

package/lib/theme/Toast.recipe.tsx

@@ -8,7 +8,34 @@ export const ToastDefaultVariants = {
 } as const
 
 export const ToastStyles = StyleSheet.create(theme => ({
+  root: {
+    variants: {
+      variant: {
+        solid: {},
+        subtle: {},
+        outline: {},
+        error: {},
+      },
+      size: {
+        sm: {
+          marginVertical: theme.spacing[6],
+          marginHorizontal: theme.spacing[6],
+        },
+        md: {
+          marginVertical: theme.spacing[10],
+          marginHorizontal: theme.spacing[10],
+        },
+        lg: {
+          marginVertical: theme.spacing[12],
+          marginHorizontal: theme.spacing[10],
+        },
+      },
+    },
+  },
   container: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.md,
+    alignItems: 'center',
+    backgroundColor: theme.colors[colorPalette].default,
     variants: {
       variant: {
         solid: {
@@ -21,7 +48,8 @@ export const ToastStyles = StyleSheet.create(theme => ({
         },
         outline: {
           borderWidth: 2,
-          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.bg.subtle,
+          borderColor: theme.colors[colorPalette][5],
         },
         error: {
           borderColor: theme.colors.red[9],
@@ -31,13 +59,15 @@ export const ToastStyles = StyleSheet.create(theme => ({
       },
       size: {
         sm: {
-          bottom: theme.spacing[5],
+          padding: theme.spacing[3],
         },
         md: {
-          bottom: theme.spacing[5],
+          padding: theme.spacing[4],
+          alignSelf: 'stretch',
         },
         lg: {
-          bottom: theme.spacing[8],
+          padding: theme.spacing[4],
+          alignSelf: 'stretch',
         },
       },
     },
@@ -57,13 +87,16 @@ export const ToastStyles = StyleSheet.create(theme => ({
       },
       size: {
         sm: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
         },
         md: {
-          ...textStyle.xs,
+          // ...textStyle.xs,
+          fontSize: theme.fontSizes.xs,
         },
         lg: {
-          ...textStyle.sm,
+          // ...textStyle.sm,
+          fontSize: theme.fontSizes.sm,
         },
       },
     },

package/lib/varia/types.ts

@@ -279,6 +279,9 @@ export function createCircleProgressTokens<
 
 export type AlignSelf = ViewStyle['alignSelf']
 export type StackDirection = 'row' | 'column'
+export type JustifyContent = ViewStyle['justifyContent']
+export type Gap = ViewStyle['gap']
+export type AlignItems = ViewStyle['alignItems']
 export type progressDirection = 'forward' | 'reverse'
 export type rotationDirection = 'clockwise' | 'counterclockwise'
 export type Flex = ViewStyle['flex']