add vanilla extract

ensdomains · Sep 28, 2023 · b2733db · b2733db
1 parent ca117c0
commit b2733db
Show file tree

Hide file tree

Showing 19 changed files with 1,827 additions and 215 deletions.
diff --git a/components/package.json b/components/package.json
@@ -61,14 +61,21 @@
     "@types/rimraf": "^3.0.2",
     "@types/styled-components": "^5",
     "@types/testing-library__jest-dom": "^5.14.1",
-    "@vanilla-extract/css": "1.13.0",
+    "@vanilla-extract/css": "^1.13.0",
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/dynamic": "^2.0.3",
+    "@vanilla-extract/recipes": "^0.5.0",
+    "@vanilla-extract/sprinkles": "^1.6.1",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
+    "@vanilla-extract/private": "^1.0.3",
     "babel-plugin-styled-components": "^2.0.6",
     "deepmerge": "^4.2.2",
     "esbuild-darwin-arm64": "^0.14.27",
     "glob": "^7.2.0",
     "jest": "^27.3.1",
     "jest-styled-components": "^7.0.8",
     "jest-watch-typeahead": "^1.0.0",
+    "rainbow-sprinkles": "0.17.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",

diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
+import { rainbowSprinkles } from '@/src/css/rainbow-spinkles.css'
+
 type NativeImgAttributes = React.ImgHTMLAttributes<HTMLImageElement>
 
 type Shape = 'circle' | 'square'
@@ -61,41 +63,22 @@ const Container = styled.div<Container>(
   `,
 )
 
-const Placeholder = styled.div<{ $url?: string; $disabled: boolean }>(
-  ({ theme, $url, $disabled }) => css`
-    background: ${$url || theme.colors.gradients.blue};
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-
-    ${$disabled &&
-    css`
-      filter: grayscale(1);
-    `}
-  `,
-)
-
-const Img = styled.img<{ $shown: boolean; $disabled: boolean }>(
-  ({ $shown, $disabled }) => css`
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    display: none;
-
-    ${$shown &&
-    css`
-      display: block;
-    `}
-
-    ${$disabled &&
-    css`
-      filter: grayscale(1);
-    `}
-  `,
-)
+const placeholderStyles = ({
+  disabled,
+  url,
+}: {
+  disabled: boolean
+  url?: string
+}) =>
+  rainbowSprinkles({
+    filter: disabled ? 'grayscale(1)' : undefined,
+    backgroundColor: url || '$blueGradient',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  })
 
 export type Props = {
   /** Accessibility text. */
@@ -153,20 +136,27 @@ export const Avatar = ({
   }, [ref, hideImg, showImg])
 
   const isImageVisible = showImage && !!src
+
+  const imgProps = rainbowSprinkles({
+    display: isImageVisible ? 'block' : 'none',
+    height: '100%',
+    objectFit: 'cover',
+    width: '100%',
+    filter: disabled ? 'grayscale(1)' : undefined,
+    ...props,
+  })
+
   return (
     <Container $noBorder={!showImage || noBorder} $shape={shape}>
       {overlay}
       {!isImageVisible && (
-        <Placeholder
-          $disabled={disabled}
-          $url={placeholder}
+        <div
+          {...placeholderStyles({ disabled, url: placeholder })}
           aria-label={label}
         />
       )}
-      <Img
-        {...props}
-        $disabled={disabled}
-        $shown={isImageVisible}
+      <img
+        {...imgProps}
         alt={label}
         decoding={decoding}
         ref={ref}

diff --git a/components/src/components/atoms/Banner/Banner.tsx b/components/src/components/atoms/Banner/Banner.tsx
@@ -8,6 +8,7 @@ import { WithAlert } from '../../../types'
 import { Typography } from '../Typography'
 
 import { AlertSVG, CrossSVG, EthSVG, UpRightArrowSVG } from '../..'
+import { Box, BoxProps } from '../Box/Box'
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
@@ -52,69 +53,90 @@ type WithoutAnchor = {
 
 type NonNullableAlert = NonNullable<Props['alert']>
 
-const Container = styled.div<{
-  $alert: NonNullableAlert
-  $hasAction: boolean
-}>(
-  ({ theme, $alert, $hasAction }) => css`
-    position: relative;
-    background: ${theme.colors.backgroundPrimary};
-    border: 1px solid ${theme.colors.border};
-    border-radius: ${theme.radii['2xLarge']};
-    padding: ${theme.space[4]};
-    display: flex;
-    align-items: stretch;
-    gap: ${theme.space[4]};
-    width: ${theme.space.full};
-    transition: all 150ms ease-in-out;
-
-    ${mq.sm.min(
-      css`
-        padding: ${theme.space['6']};
-        gap: ${theme.space[6]};
-        align-items: center;
-      `,
-    )}
-
-    ${$hasAction &&
-    css`
-      padding-right: ${theme.space[8]};
-      &:hover {
-        transform: translateY(-1px);
-        background: ${theme.colors.greySurface};
-        ${$alert === 'error' &&
-        css`
-          background: ${theme.colors.redLight};
-        `}
-        ${$alert === 'warning' &&
-        css`
-          background: ${theme.colors.yellowLight};
-        `}
-      }
-    `}
-
-    ${$alert === 'error' &&
-    css`
-      background: ${theme.colors.redSurface};
-      border: 1px solid ${theme.colors.redPrimary};
-    `}
-
-    ${$alert === 'warning' &&
-    css`
-      background: ${theme.colors.yellowSurface};
-      border: 1px solid ${theme.colors.yellowPrimary};
-    `};
-  `,
-)
+const getColorForAlert = (
+  alert: NonNullableAlert,
+  field: 'background' | 'border',
+  hover = false,
+) => {
+  return {
+    error: {
+      background: {
+        default: '$redSurface',
+        hover: '$redLight',
+      },
+      border: {
+        default: '$redPrimary',
+        hover: '$redPrimary',
+      },
+    },
+    warning: {
+      background: {
+        default: '$yellowSurface',
+        hover: '$yellowLight',
+      },
+      border: {
+        default: '$yellowPrimary',
+        hover: '$yellowPrimary',
+      },
+    },
+    info: {
+      background: {
+        default: '$backgroundPrimary',
+        hover: '$greySurface',
+      },
+      border: {
+        default: '$border',
+        hover: '$border',
+      },
+    },
+  }[alert][field][hover ? 'hover' : 'default']
+}
 
-const Content = styled.div(
-  ({ theme }) => css`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: ${theme.space[1]};
-  `,
+const ContainerBox = React.forwardRef<
+  HTMLDivElement,
+  {
+    $alert: NonNullableAlert
+    $hasAction: boolean
+  } & BoxProps
+>(
+  (
+    {
+      $alert,
+      $hasAction,
+      ...props
+    }: {
+      $alert: NonNullableAlert
+      $hasAction: boolean
+    } & BoxProps,
+    ref,
+  ) => (
+    <Box
+      alignItems={{ base: 'stretch', sm: 'center' }}
+      backgroundColor={{
+        base: getColorForAlert($alert, 'background'),
+        hover: getColorForAlert($alert, 'background', true),
+      }}
+      borderColor={getColorForAlert($alert, 'border')}
+      borderRadius="$2xLarge"
+      borderStyle="solid"
+      borderWidth="$1x"
+      display="flex"
+      gap={{ xs: '$4', sm: '$6' }}
+      padding={{ base: '$4', sm: '$6' }}
+      position="relative"
+      pr={$hasAction ? '$8' : undefined}
+      ref={ref}
+      transform={{
+        base: 'translateY(0)',
+        hover: $hasAction ? 'translateY(-1px)' : 'translateY(0px)',
+      }}
+      transitionDuration="$150"
+      transitionProperty="all"
+      transitionTimingFunction="$ease-in-out"
+      width="$full"
+      {...props}
+    />
+  ),
 )
 
 const IconContainer = styled.div<{
@@ -299,7 +321,7 @@ export const Banner = React.forwardRef<
     const _iconType = iconType || defaultIconType(alert, icon)
 
     return (
-      <Container
+      <ContainerBox
         {...props}
         $alert={alert}
         $hasAction={hasAction}
@@ -311,17 +333,23 @@ export const Banner = React.forwardRef<
             {Icon}
           </IconContainer>
         )}
-        <Content>
+        <Box
+          display="flex"
+          flex={1}
+          flexDirection="column"
+          gap="$1"
+          justifyContent="center"
+        >
           {title && <Typography fontVariant="largeBold">{title}</Typography>}
           <Typography>{children}</Typography>
-        </Content>
+        </Box>
         <ActionButton
           alert={alert}
           hasHref={hasHref}
           icon={props.actionIcon}
           onDismiss={onDismiss}
         />
-      </Container>
+      </ContainerBox>
     )
   },
 )

diff --git a/components/src/components/atoms/Banner/styles.css.ts b/components/src/components/atoms/Banner/styles.css.ts
diff --git a/components/src/components/atoms/Box/Box.tsx b/components/src/components/atoms/Box/Box.tsx
@@ -0,0 +1,19 @@
+import React, { AllHTMLAttributes, ElementType, forwardRef } from 'react'
+
+import { Sprinkles, rainbowSprinkles } from '../../../css/rainbow-spinkles.css'
+
+type HTMLProperties = Omit<AllHTMLAttributes<HTMLElement>, 'as'>
+
+export type BoxProps = Sprinkles & HTMLProperties & { as?: ElementType }
+
+export const Box = forwardRef<HTMLElement, BoxProps>(
+  ({ as, children, ...props }, ref) => {
+    const Component = as || 'div'
+    const { className, style, otherProps } = rainbowSprinkles(props)
+    return (
+      <Component className={className} ref={ref} style={style} {...otherProps}>
+        {children}
+      </Component>
+    )
+  },
+)