react-native-varia 0.0.1 → 0.2.0

package/lib/theme/Switch.recipe.tsx

@@ -1,70 +1,91 @@
-import { StyleSheet } from 'react-native-unistyles'
+import {StyleSheet} from 'react-native-unistyles'
+import {PalettesWithNestedKeys} from '../style/varia/types'
 
-const SwitchTokens = {
-  track: {
-    variants: {
-      size: {
-        xs: {height: 30, width: 200},
-        md: {height: 60, width: 250},
-        lg: {height: 40, width: 60},
-      },
-      colorPalette: {
-        primary: {
-          enabled: {backgroundColor: 'background'},
-          disabled: {backgroundColor: 'foreground'},
-          borderColor: 'white',
-          borderWidth: 1,
+export const SwitchTokens = {
+  defaultProps: {
+    variant: 'solid',
+    size: 'md',
+    animation: 'defaultSpring',
+  },
+  variants: {
+    animation: {
+      defaultSpring: {
+        type: 'withSpring',
+        props: {
+          damping: 18,
+          stiffness: 180,
+          mass: 1,
+          overshootClamping: true,
         },
-        secondary: {
-          enabled: {backgroundColor: 'foreground'},
-          disabled: {backgroundColor: 'background'},
-          borderColor: 'white',
-          borderWidth: 15,
+      },
+      defaultTiming: {
+        type: 'withTiming',
+        props: {
+          duration: 100,
         },
       },
     },
   },
-  thumb: {
+} as const
+
+export const SwitchStyles = StyleSheet.create(theme => ({
+  container: (colorPalette: PalettesWithNestedKeys) => ({
+    borderRadius: theme.radii.full,
     variants: {
-      size: {
-        xs: {height: 20, width: 20},
-        md: {height: 50, width: 50},
-        lg: {height: 30, width: 30},
+      variant: {
+        solid: {},
       },
-      colorPalette: {
-        primary: {
-          enabled: {backgroundColor: 'foreground'},
-          disabled: {backgroundColor: 'background'},
+      size: {
+        sm: {
+          padding: theme.spacing['0.5'],
+          maxWidth: theme.sizes[10],
+        },
+        md: {
+          padding: theme.spacing['0.5'],
+          maxWidth: theme.sizes[16],
         },
-        secondary: {
-          enabled: {backgroundColor: 'background'},
-          disabled: {backgroundColor: 'foreground'},
+        lg: {
+          padding: theme.spacing[1],
+          maxWidth: theme.sizes[20],
         },
       },
+      enabled: {
+        true: {},
+        false: {},
+      },
     },
-  },
-}
-
-export {SwitchTokens};
-const SwitchStyles = StyleSheet.create(theme => ({
-  track: {
+    compoundVariants: [
+      {
+        variant: 'solid',
+        enabled: true,
+        styles: {backgroundColor: theme.colors[colorPalette].default},
+      },
+      {
+        variant: 'solid',
+        enabled: false,
+        styles: {backgroundColor: theme.colors.bg.disabled},
+      },
+    ],
+  }),
+  thumb: (colorPalette: PalettesWithNestedKeys) => ({
+    backgroundColor: theme.colors.bg.default,
+    borderRadius: theme.radii.full,
     variants: {
+      variant: {
+        solid: {},
+      },
       size: {
-        xs: {height: 30, width: '100%'},
-        md: {height: 60, width: '100%'},
-        lg: {height: 40, width: '100%'},
-      }
+        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]},
+      },
     },
-  },
-  thumb: {
-    variants: {
-      size: {
-        xs: {height: 20, width: 20},
-        md: {height: 50, width: 50},
-        lg: {height: 30, width: 80},
-      }
-    }
-  }
+    compoundVariants: [
+      {
+        variant: 'solid',
+        enabled: true,
+        styles: {},
+      },
+    ],
+  }),
 }))
-
-export {SwitchStyles};

package/lib/theme/Text.recipe.tsx

@@ -1,10 +1,68 @@
 import {StyleSheet} from 'react-native-unistyles'
-
-const textStyles = StyleSheet.create(theme => ({
-  text: {
-    color: theme.colors.foreground,
-    // fontSize: 100,
-  },
+import {PalettesWithNestedKeys} from '../style/varia/types'
+import {textStyle} from '../style/varia/textStyles'
+export const DefaultTextVariants = {
+  size: 'md',
+} as const
+export const TextStyles = StyleSheet.create(theme => ({
+  text: (colorPalette: PalettesWithNestedKeys) => ({
+    color: theme.colors.fg.default,
+    variants: {
+      variant: {
+        heading: {
+          color: theme.colors.fg.default,
+          fontWeight: theme.fontWeights.semibold,
+        },
+        default: {
+          color: theme.colors.fg.default,
+          fontWeight: theme.fontWeights.medium,
+        },
+      },
+      size: {
+        xs: {
+          ...textStyle.xs,
+        },
+        sm: {
+          ...textStyle.sm,
+        },
+        md: {
+          ...textStyle.md,
+        },
+        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,
+        },
+      },
+    },
+  }),
 }))
-
-export default textStyles

package/lib/theme/animations.tsx

@@ -0,0 +1,13 @@
+import {Keyframe} from 'react-native-reanimated'
+
+export const animations = {
+  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),
+}

package/lib/varia/colorPalettes/amber.ts

@@ -0,0 +1,54 @@
+export const amber = {
+  light: {
+    '1': '#fefdfb',
+    '2': '#fefbe9',
+    '3': '#fff7c2',
+    '4': '#ffee9c',
+    '5': '#fbe577',
+    '6': '#f3d673',
+    '7': '#e9c162',
+    '8': '#e2a336',
+    '9': '#ffc53d',
+    '10': '#ffba18',
+    '11': '#ab6400',
+    '12': '#4f3422',
+    a1: '#c0800004',
+    a2: '#f4d10016',
+    a3: '#ffde003d',
+    a4: '#ffd40063',
+    a5: '#f8cf0088',
+    a6: '#eab5008c',
+    a7: '#dc9b009d',
+    a8: '#da8a00c9',
+    a9: '#ffb300c2',
+    a10: '#ffb300e7',
+    a11: '#ab6400',
+    a12: '#341500dd',
+  },
+  dark: {
+    '1': '#16120c',
+    '2': '#1d180f',
+    '3': '#302008',
+    '4': '#3f2700',
+    '5': '#4d3000',
+    '6': '#5c3d05',
+    '7': '#714f19',
+    '8': '#8f6424',
+    '9': '#ffc53d',
+    '10': '#ffd60a',
+    '11': '#ffca16',
+    '12': '#ffe7b3',
+    a1: '#e63c0006',
+    a2: '#fd9b000d',
+    a3: '#fa820022',
+    a4: '#fc820032',
+    a5: '#fd8b0041',
+    a6: '#fd9b0051',
+    a7: '#ffab2567',
+    a8: '#ffae3587',
+    a9: '#ffc53d',
+    a10: '#ffd60a',
+    a11: '#ffca16',
+    a12: '#ffe7b3',
+  },
+}

package/lib/varia/colorPalettes/blue.ts

@@ -0,0 +1,54 @@
+export const blue = {
+  light: {
+    '1': '#fbfdff',
+    '2': '#f4faff',
+    '3': '#e6f4fe',
+    '4': '#d5efff',
+    '5': '#c2e5ff',
+    '6': '#acd8fc',
+    '7': '#8ec8f6',
+    '8': '#5eb1ef',
+    '9': '#0090ff',
+    '10': '#0588f0',
+    '11': '#0d74ce',
+    '12': '#113264',
+    a1: '#0080ff04',
+    a2: '#008cff0b',
+    a3: '#008ff519',
+    a4: '#009eff2a',
+    a5: '#0093ff3d',
+    a6: '#0088f653',
+    a7: '#0083eb71',
+    a8: '#0084e6a1',
+    a9: '#0090ff',
+    a10: '#0086f0fa',
+    a11: '#006dcbf2',
+    a12: '#002359ee',
+  },
+  dark: {
+    '1': '#0d1520',
+    '2': '#111927',
+    '3': '#0d2847',
+    '4': '#003362',
+    '5': '#004074',
+    '6': '#104d87',
+    '7': '#205d9e',
+    '8': '#2870bd',
+    '9': '#0090ff',
+    '10': '#3b9eff',
+    '11': '#70b8ff',
+    '12': '#c2e6ff',
+    a1: '#004df211',
+    a2: '#1166fb18',
+    a3: '#0077ff3a',
+    a4: '#0075ff57',
+    a5: '#0081fd6b',
+    a6: '#0f89fd7f',
+    a7: '#2a91fe98',
+    a8: '#3094feb9',
+    a9: '#0090ff',
+    a10: '#3b9eff',
+    a11: '#70b8ff',
+    a12: '#c2e6ff',
+  },
+}

package/lib/varia/colorPalettes/bronze.ts

@@ -0,0 +1,54 @@
+export const bronze = {
+  light: {
+    '1': '#fdfcfc',
+    '2': '#fdf7f5',
+    '3': '#f6edea',
+    '4': '#efe4df',
+    '5': '#e7d9d3',
+    '6': '#dfcdc5',
+    '7': '#d3bcb3',
+    '8': '#c2a499',
+    '9': '#a18072',
+    '10': '#957468',
+    '11': '#7d5e54',
+    '12': '#43302b',
+    a1: '#55000003',
+    a2: '#cc33000a',
+    a3: '#92250015',
+    a4: '#80280020',
+    a5: '#7423002c',
+    a6: '#7324003a',
+    a7: '#6c1f004c',
+    a8: '#671c0066',
+    a9: '#551a008d',
+    a10: '#4c150097',
+    a11: '#3d0f00ab',
+    a12: '#1d0600d4',
+  },
+  dark: {
+    '1': '#141110',
+    '2': '#1c1917',
+    '3': '#262220',
+    '4': '#302a27',
+    '5': '#3b3330',
+    '6': '#493e3a',
+    '7': '#5a4c47',
+    '8': '#6f5f58',
+    '9': '#a18072',
+    '10': '#ae8c7e',
+    '11': '#d4b3a5',
+    '12': '#ede0d9',
+    a1: '#d1110004',
+    a2: '#fbbc910c',
+    a3: '#faceb817',
+    a4: '#facdb622',
+    a5: '#ffd2c12d',
+    a6: '#ffd1c03c',
+    a7: '#fdd0c04f',
+    a8: '#ffd6c565',
+    a9: '#fec7b09b',
+    a10: '#fecab5a9',
+    a11: '#ffd7c6d1',
+    a12: '#fff1e9ec',
+  },
+}

package/lib/varia/colorPalettes/brown.ts

@@ -0,0 +1,54 @@
+export const brown = {
+  light: {
+    '1': '#fefdfc',
+    '2': '#fcf9f6',
+    '3': '#f6eee7',
+    '4': '#f0e4d9',
+    '5': '#ebdaca',
+    '6': '#e4cdb7',
+    '7': '#dcbc9f',
+    '8': '#cea37e',
+    '9': '#ad7f58',
+    '10': '#a07553',
+    '11': '#815e46',
+    '12': '#3e332e',
+    a1: '#aa550003',
+    a2: '#aa550009',
+    a3: '#a04b0018',
+    a4: '#9b4a0026',
+    a5: '#9f4d0035',
+    a6: '#a04e0048',
+    a7: '#a34e0060',
+    a8: '#9f4a0081',
+    a9: '#823c00a7',
+    a10: '#723300ac',
+    a11: '#522100b9',
+    a12: '#140600d1',
+  },
+  dark: {
+    '1': '#12110f',
+    '2': '#1c1816',
+    '3': '#28211d',
+    '4': '#322922',
+    '5': '#3e3128',
+    '6': '#4d3c2f',
+    '7': '#614a39',
+    '8': '#7c5f46',
+    '9': '#ad7f58',
+    '10': '#b88c67',
+    '11': '#dbb594',
+    '12': '#f2e1ca',
+    a1: '#91110002',
+    a2: '#fba67c0c',
+    a3: '#fcb58c19',
+    a4: '#fbbb8a24',
+    a5: '#fcb88931',
+    a6: '#fdba8741',
+    a7: '#ffbb8856',
+    a8: '#ffbe8773',
+    a9: '#feb87da8',
+    a10: '#ffc18cb3',
+    a11: '#fed1aad9',
+    a12: '#feecd4f2',
+  },
+}

package/lib/varia/colorPalettes/crimson.ts

@@ -0,0 +1,55 @@
+// src/colors/crimson.ts
+export const crimson = {
+  light: {
+    '1': '#fffcfd',
+    '2': '#fef7f9',
+    '3': '#ffe9f0',
+    '4': '#fedce7',
+    '5': '#facedd',
+    '6': '#f3bed1',
+    '7': '#eaacc3',
+    '8': '#e093b2',
+    '9': '#e93d82',
+    '10': '#df3478',
+    '11': '#cb1d63',
+    '12': '#621639',
+    a1: '#ff005503',
+    a2: '#e0004008',
+    a3: '#ff005216',
+    a4: '#f8005123',
+    a5: '#e5004f31',
+    a6: '#d0004b41',
+    a7: '#bf004753',
+    a8: '#b6004a6c',
+    a9: '#e2005bc2',
+    a10: '#d70056cb',
+    a11: '#c4004fe2',
+    a12: '#530026e9',
+  },
+  dark: {
+    '1': '#191114',
+    '2': '#201318',
+    '3': '#381525',
+    '4': '#4d122f',
+    '5': '#5c1839',
+    '6': '#6d2545',
+    '7': '#873356',
+    '8': '#b0436e',
+    '9': '#e93d82',
+    '10': '#ee518a',
+    '11': '#ff92ad',
+    '12': '#fdd3e8',
+    a1: '#f4126709',
+    a2: '#f22f7a11',
+    a3: '#fe2a8b2a',
+    a4: '#fd158741',
+    a5: '#fd278f51',
+    a6: '#fe459763',
+    a7: '#fd559b7f',
+    a8: '#fe5b9bab',
+    a9: '#fe418de8',
+    a10: '#ff5693ed',
+    a11: '#ff92ad',
+    a12: '#ffd5eafd',
+  },
+}

package/lib/varia/colorPalettes/cyan.ts

@@ -0,0 +1,54 @@
+export const cyan = {
+  light: {
+    '1': '#fafdfe',
+    '2': '#f2fafb',
+    '3': '#def7f9',
+    '4': '#caf1f6',
+    '5': '#b5e9f0',
+    '6': '#9ddde7',
+    '7': '#7dcedc',
+    '8': '#3db9cf',
+    '9': '#00a2c7',
+    '10': '#0797b9',
+    '11': '#107d98',
+    '12': '#0d3c48',
+    a1: '#0099cc05',
+    a2: '#009db10d',
+    a3: '#00c2d121',
+    a4: '#00bcd435',
+    a5: '#01b4cc4a',
+    a6: '#00a7c162',
+    a7: '#009fbb82',
+    a8: '#00a3c0c2',
+    a9: '#00a2c7',
+    a10: '#0094b7f8',
+    a11: '#007491ef',
+    a12: '#00323ef2',
+  },
+  dark: {
+    '1': '#0b161a',
+    '2': '#101b20',
+    '3': '#082c36',
+    '4': '#003848',
+    '5': '#004558',
+    '6': '#045468',
+    '7': '#12677e',
+    '8': '#11809c',
+    '9': '#00a2c7',
+    '10': '#23afd0',
+    '11': '#4ccce6',
+    '12': '#b6ecf7',
+    a1: '#0091f70a',
+    a2: '#02a7f211',
+    a3: '#00befd28',
+    a4: '#00baff3b',
+    a5: '#00befd4d',
+    a6: '#00c7fd5e',
+    a7: '#14cdff75',
+    a8: '#11cfff95',
+    a9: '#00cfffc3',
+    a10: '#28d6ffcd',
+    a11: '#52e1fee5',
+    a12: '#bbf3fef7',
+  },
+}

package/lib/varia/colorPalettes/gold.ts

@@ -0,0 +1,54 @@
+export const gold = {
+  light: {
+    '1': '#fdfdfc',
+    '2': '#faf9f2',
+    '3': '#f2f0e7',
+    '4': '#eae6db',
+    '5': '#e1dccf',
+    '6': '#d8d0bf',
+    '7': '#cbc0aa',
+    '8': '#b9a88d',
+    '9': '#978365',
+    '10': '#8c7a5e',
+    '11': '#71624b',
+    '12': '#3b352b',
+    a1: '#55550003',
+    a2: '#9d8a000d',
+    a3: '#75600018',
+    a4: '#6b4e0024',
+    a5: '#60460030',
+    a6: '#64440040',
+    a7: '#63420055',
+    a8: '#633d0072',
+    a9: '#5332009a',
+    a10: '#492d00a1',
+    a11: '#362100b4',
+    a12: '#130c00d4',
+  },
+  dark: {
+    '1': '#121211',
+    '2': '#1b1a17',
+    '3': '#24231f',
+    '4': '#2d2b26',
+    '5': '#38352e',
+    '6': '#444039',
+    '7': '#544f46',
+    '8': '#696256',
+    '9': '#978365',
+    '10': '#a39073',
+    '11': '#cbb99f',
+    '12': '#e8e2d9',
+    a1: '#91911102',
+    a2: '#f9e29d0b',
+    a3: '#f8ecbb15',
+    a4: '#ffeec41e',
+    a5: '#feecc22a',
+    a6: '#feebcb37',
+    a7: '#ffedcd48',
+    a8: '#fdeaca5f',
+    a9: '#ffdba690',
+    a10: '#fedfb09d',
+    a11: '#fee7c6c8',
+    a12: '#fef7ede7',
+  },
+}

package/lib/varia/colorPalettes/grass.ts

@@ -0,0 +1,54 @@
+export const grass = {
+  light: {
+    '1': '#fbfefb',
+    '2': '#f5fbf5',
+    '3': '#e9f6e9',
+    '4': '#daf1db',
+    '5': '#c9e8ca',
+    '6': '#b2ddb5',
+    '7': '#94ce9a',
+    '8': '#65ba74',
+    '9': '#46a758',
+    '10': '#3e9b4f',
+    '11': '#2a7e3b',
+    '12': '#203c25',
+    a1: '#00c00004',
+    a2: '#0099000a',
+    a3: '#00970016',
+    a4: '#009f0725',
+    a5: '#00930536',
+    a6: '#008f0a4d',
+    a7: '#018b0f6b',
+    a8: '#008d199a',
+    a9: '#008619b9',
+    a10: '#007b17c1',
+    a11: '#006514d5',
+    a12: '#002006df',
+  },
+  dark: {
+    '1': '#0e1511',
+    '2': '#141a15',
+    '3': '#1b2a1e',
+    '4': '#1d3a24',
+    '5': '#25482d',
+    '6': '#2d5736',
+    '7': '#366740',
+    '8': '#3e7949',
+    '9': '#46a758',
+    '10': '#53b365',
+    '11': '#71d083',
+    '12': '#c2f0c2',
+    a1: '#00de1205',
+    a2: '#5ef7780a',
+    a3: '#70fe8c1b',
+    a4: '#57ff802c',
+    a5: '#68ff8b3b',
+    a6: '#71ff8f4b',
+    a7: '#77fd925d',
+    a8: '#77fd9070',
+    a9: '#65ff82a1',
+    a10: '#72ff8dae',
+    a11: '#89ff9fcd',
+    a12: '#ceffceef',
+  },
+}