react-native-varia 0.3.0 → 0.4.0

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/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: {},
       },

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,
+    },
   },
 }))