Merge pull request #19 from shapeshift/shapeshift-theme

feat: add theme
shapeshift · Jan 8, 2024 · 9677078 · 9677078
2 parents 1da0fef + dfd8f2b
commit 9677078
Show file tree

Hide file tree

Showing 9 changed files with 835 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "@emotion/styled": "^11.11.0",
     "framer-motion": "^10.17.9",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",

diff --git a/src/main.tsx b/src/main.tsx
@@ -4,12 +4,13 @@ import { ChakraProvider, createLocalStorageManager } from '@chakra-ui/react'
 import App from 'App'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { theme } from 'theme/theme'
 
 const manager = createLocalStorageManager('ss-theme')
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ChakraProvider colorModeManager={manager} cssVarsRoot='body'>
+    <ChakraProvider colorModeManager={manager} cssVarsRoot='body' theme={theme}>
       <App />
     </ChakraProvider>
   </React.StrictMode>,

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -0,0 +1,98 @@
+const commonColors = {
+  blue: {
+    50: '#EBEFFE',
+    100: '#B5C4FC',
+    200: '#7F99FB',
+    300: '#5F80FA',
+    400: '#486FF9',
+    500: '#3761F9',
+    600: '#2D4EC9',
+    700: '#243EA1',
+    800: '#1C317E',
+    900: '#15255F',
+  },
+  gray: {
+    950: '#090B11',
+    900: '#10151E',
+    850: '#191d28',
+    825: '#191e2a',
+    815: '#1a1f2b',
+    800: '#141A25',
+    785: '#1A202C',
+    750: '#212631',
+    700: '#2D3748',
+    600: '#4A5568',
+    500: '#718096',
+    400: '#A0AEC0',
+    300: '#CBD5E0',
+    200: '#E2E8F0',
+    100: '#EDF2F7',
+    50: '#F7FAFC',
+  },
+  green: {
+    900: '#004F3A',
+    800: '#00684D',
+    700: '#008562',
+    600: '#00A67B',
+    500: '#00CD98',
+    400: '#16D1A1',
+    300: '#33D7AD',
+    200: '#5CDFBD',
+    100: '#A1ECD9',
+    50: '#E6FAF5',
+  },
+  red: {
+    50: '#FFF5F5',
+    100: '#FFF8F8',
+    200: '#FDE3E3',
+    300: '#FAC1C0',
+    400: '#F5918F',
+    500: '#EF5350',
+    600: '#DD4D4A',
+    700: '#C74543',
+    800: '#AE3C3B',
+    900: '#923231',
+  },
+  darkTeal: {
+    500: '#144241',
+    300: '#3F6D6C',
+  },
+  darkNeutral: {
+    950: '#101214',
+    900: '#161A1D',
+    800: '#1D2125',
+    750: '#22272B',
+    700: '#282E33',
+    650: '#2C333A',
+    600: '#38414A',
+    550: '#454F59',
+    500: '#596773',
+    450: '#738496',
+    400: '#8C9BAB',
+    300: '#9FADBC',
+    200: '#B6C2CF',
+    100: '#C7D1DB',
+    50: '#C7D1DB',
+  },
+  darkNeutralAlpha: {
+    950: 'rgba(16, 18, 20, 0.80)',
+    900: 'rgba(3,4,4,0.26)',
+    800: 'rgba(188,214,240,0.04)',
+    700: 'rgba(161,189,217,0.08)',
+    600: 'rgba(200,225,249,0.1)',
+    500: 'rgba(166,197,226,0.16)',
+    400: 'rgba(195,222,254,0.2)',
+    300: 'rgba(191,219,248,0.28)',
+    200: 'rgba(155,180,202,0.5)',
+  },
+}
+
+export const brand = {
+  primary: commonColors.blue[500],
+  altBg: `radial-gradient(94.32% 94.6% at 4.04% -44.6%,${commonColors.blue[600]}66 0%,${commonColors.gray[900]}00 100%),linear-gradient(0deg,${commonColors.gray[900]},${commonColors.gray[900]})`,
+}
+
+export const colors = {
+  ...commonColors,
+  ...brand,
+}
diff --git a/src/theme/components/Button.tsx b/src/theme/components/Button.tsx
@@ -0,0 +1,272 @@
+import type { ComponentStyleConfig } from '@chakra-ui/react'
+import type { StyleFunctionProps } from '@chakra-ui/theme-tools'
+import { mode, transparentize } from '@chakra-ui/theme-tools'
+
+export const ButtonStyle: ComponentStyleConfig = {
+  // style object for base or default style
+  baseStyle: {
+    borderRadius: 'xl',
+    _focusVisible: {
+      boxShadow: 'outline-inset',
+    },
+  },
+  // styles for different sizes ("sm", "md", "lg")
+  sizes: {
+    sm: {
+      svg: {
+        width: '1rem',
+        height: '1rem',
+      },
+      lineHeight: '12px',
+    },
+    'sm-multiline': {
+      svg: {
+        width: '1rem',
+        height: '1rem',
+      },
+      whiteSpace: 'normal',
+      h: 'auto',
+      minH: '10',
+      py: '2',
+      px: '4',
+    },
+    lg: (props: StyleFunctionProps) => {
+      const { variant: v } = props
+      return {
+        svg: {
+          width: '1.5rem',
+          height: '1.5rem',
+        },
+        fontSize: v === 'nav-link' ? 'md' : 'lg',
+        px: v === 'nav-link' ? 4 : 6,
+      }
+    },
+    'lg-multiline': (props: StyleFunctionProps) => {
+      const { variant: v } = props
+      return {
+        svg: {
+          width: '1.5rem',
+          height: '1.5rem',
+        },
+        fontSize: v === 'nav-link' ? 'md' : 'lg',
+        px: v === 'nav-link' ? 4 : 6,
+        whiteSpace: 'normal',
+        h: 'auto',
+        minH: '12',
+        py: '3',
+      }
+    },
+  },
+  // styles for different visual variants ("outline", "solid")
+  variants: {
+    solid: (props: StyleFunctionProps) => {
+      const { colorScheme: c } = props
+      if (c === 'gray') {
+        return {
+          bg: 'background.button.secondary.base',
+          _hover: {
+            bg: 'background.button.secondary.hover',
+            textDecoration: 'none',
+            _disabled: {
+              bg: 'background.button.secondary.base',
+            },
+          },
+          _active: { bg: 'background.button.secondary.pressed' },
+          _checked: { bg: 'background.button.secondary.pressed' },
+        }
+      }
+      return {
+        bg: `${c}.500`,
+        color: 'white',
+        _hover: {
+          bg: mode(`${c}.600`, `${c}.300`)(props),
+          _disabled: {
+            bg: `${c}.500`,
+          },
+        },
+        _active: {
+          bg: mode(`${c}.700`, `${c}.400`)(props),
+        },
+      }
+    },
+    'ghost-filled': (props: StyleFunctionProps) => {
+      const { colorScheme: c, theme } = props
+      const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme)
+      const darkActiveBg = transparentize(`${c}.200`, 1)(theme)
+      const darkBg = transparentize(`${c}.200`, 0.2)(theme)
+      return {
+        color: mode(`${c}.500`, `${c}.200`)(props),
+        bg: mode(`${c}.50`, darkBg)(props),
+        _hover: {
+          bg: mode(`${c}.100`, darkHoverBg)(props),
+        },
+        _active: {
+          bg: mode(`${c}.500`, darkActiveBg)(props),
+          color: 'white',
+        },
+      }
+    },
+    ghost: (props: StyleFunctionProps) => {
+      const { colorScheme: c, theme } = props
+      const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme)
+      const darkActiveBg = transparentize(`${c}.200`, 0.25)(theme)
+      if (c === 'gray') {
+        return {
+          color: 'text.subtle',
+          _hover: {
+            color: mode('inherit', 'whiteAlpha.800')(props),
+            bg: 'background.button.secondary.base',
+          },
+          _active: {
+            bg: 'background.button.secondary.pressed',
+            color: mode('gray.800', 'white')(props),
+          },
+          _checked: {
+            bg: 'background.button.secondary.pressed',
+            color: 'text.base',
+          },
+        }
+      }
+      return {
+        color: mode(`${c}.500`, `${c}.200`)(props),
+        _hover: {
+          bg: mode(`${c}.50`, darkHoverBg)(props),
+          color: mode(`${c}.500`, `${c}.200`)(props),
+        },
+        _active: {
+          bg: mode(`${c}.200`, darkActiveBg)(props),
+          color: mode('white', `${c}.200`)(props),
+        },
+        _checked: {
+          bg: mode(`${c}.200`, 'gray.700')(props),
+          color: mode('white', `${c}.200`)(props),
+        },
+      }
+    },
+    input: (props: StyleFunctionProps) => {
+      const { colorScheme: c } = props
+      const borderColor = mode('gray.200', 'gray.750')(props)
+      const bg = mode('gray.50', 'gray.850')(props)
+      return {
+        border: '1px solid',
+        bg,
+        borderColor,
+        transition: 'color fill border-color 0.5s ease-in-out',
+        color: 'text.subtle',
+        _active: {
+          borderColor: `${c}.500`,
+          color: mode('black', 'white')(props),
+          svg: {
+            fill: `${c}.500`,
+          },
+        },
+        _hover: {
+          borderColor: mode('gray.300', 'gray.700')(props),
+        },
+      }
+    },
+    link: (props: StyleFunctionProps) => {
+      const { colorScheme: c } = props
+      return {
+        padding: 0,
+        height: 'auto',
+        lineHeight: 'normal',
+        verticalAlign: 'baseline',
+        color: mode(`${c}.500`, `${c}.200`)(props),
+        _hover: {
+          textDecoration: 'underline',
+          _disabled: {
+            textDecoration: 'none',
+          },
+        },
+        _active: {
+          color: mode(`${c}.700`, `${c}.500`)(props),
+        },
+        _checked: {
+          color: mode(`${c}.700`, `${c}.500`)(props),
+        },
+      }
+    },
+    tab: (props: StyleFunctionProps) => {
+      const { colorScheme: c } = props
+      return {
+        py: 4,
+        px: 0,
+        height: 'auto',
+        lineHeight: 'normal',
+        verticalAlign: 'baseline',
+        borderBottomWidth: '2px',
+        marginBottom: {
+          base: 0,
+          md: '-1px',
+        },
+        borderColor: 'transparent',
+        borderRadius: 0,
+        color: 'text.subtle',
+        _hover: {
+          borderColor: 'border.bold',
+        },
+        _active: {
+          color: mode(`${c}.500`, `${c}.200`)(props),
+          borderColor: mode(`${c}.500`, `${c}.200`)(props),
+        },
+        _checked: {
+          color: mode(`${c}.700`, `${c}.500`)(props),
+        },
+      }
+    },
+    'read-only': {
+      px: 0,
+      bg: 'none',
+      minWidth: 'auto',
+      pointerEvents: 'none',
+    },
+    'nav-link': (props: StyleFunctionProps) => {
+      const { colorScheme: c, theme } = props
+      const darkHoverBg = transparentize(`${c}.200`, 0.12)(theme)
+      const darkActiveBg = transparentize(`${c}.200`, 0.25)(theme)
+      if (c === 'gray') {
+        return {
+          color: 'text.subtle',
+          height: '48px',
+          _hover: {
+            color: mode('inherit', 'whiteAlpha.800')(props),
+            bg: mode('gray.100', 'gray.750')(props),
+          },
+          _active: {
+            bg: mode('gray.200', 'gray.700')(props),
+            color: mode('gray.800', 'white')(props),
+            svg: {
+              color: mode('blue.500', 'blue.200')(props),
+            },
+            _checked: {
+              bg: mode('gray.200', 'gray.700')(props),
+            },
+          },
+        }
+      }
+      return {
+        color: mode(`${c}.500`, `${c}.200`)(props),
+        height: '48px',
+        _hover: {
+          bg: mode(`${c}.50`, darkHoverBg)(props),
+          color: mode(`${c}.500`, `${c}.200`)(props),
+        },
+        _active: {
+          bg: mode(`${c}.200`, darkActiveBg)(props),
+          color: mode('white', `${c}.200`)(props),
+        },
+        _checked: {
+          bg: mode(`${c}.200`, 'gray.700')(props),
+          color: mode('white', `${c}.200`)(props),
+        },
+      }
+    },
+  },
+  // default values for 'size', 'variant' and 'colorScheme'
+  defaultProps: {
+    variant: 'solid',
+    size: 'md',
+    colorScheme: 'gray',
+  },
+}