Merge pull request #81 from ensdomains/feat/new-colours

feat: refactored colour file
ensdomains · Dec 12, 2022 · 121e72f · 121e72f
2 parents c72b360 + 5b48242
commit 121e72f
Show file tree

Hide file tree

Showing 194 changed files with 3,622 additions and 1,869 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm lint-staged
+pnpm lint-staged
diff --git a/components/package.json b/components/package.json
@@ -39,6 +39,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@babel/core": "^7.20.5",
     "@honkhonk/vite-plugin-svgr": "^1.1.0",
     "@jest/types": "^27.2.5",
     "@stylelint/postcss-css-in-js": "^0.38.0",
@@ -69,12 +70,12 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.7",
     "ts-node": "^10.4.0",
-    "vite": "^2.6.13",
-    "vite-plugin-babel-macros": "^1.0.5",
-    "vite-plugin-dts": "^0.9.2",
+    "vite": "^3.2.5",
+    "vite-plugin-babel-macros": "^1.0.6",
+    "vite-plugin-dts": "1.6.6",
     "vite-plugin-stylelint": "^2.2.3",
     "vite-plugin-svgr": "^1.1.0",
-    "vite-tsconfig-paths": "^3.3.17"
+    "vite-tsconfig-paths": "^4.0.1"
   },
   "peerDependencies": {
     "react": "^17",

diff --git a/components/src/components/atoms/Avatar/Avatar.test.tsx b/components/src/components/atoms/Avatar/Avatar.test.tsx
@@ -4,9 +4,10 @@ import { ThemeProvider } from 'styled-components'
 
 import { cleanup, render, screen, waitFor } from '@/test'
 
-import { Avatar } from './Avatar'
 import { lightTheme } from '@/src/tokens'
 
+import { Avatar } from './Avatar'
+
 describe('<Avatar />', () => {
   afterEach(cleanup)
 

diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -36,14 +36,14 @@ const Container = styled.div<Container>(
     ${!$noBorder &&
     css`
       &::after {
-        box-shadow: ${theme.shadows['-px']} ${theme.colors.foregroundTertiary};
+        box-shadow: ${theme.shadows['-px']} ${theme.colors.backgroundSecondary};
         content: '';
         inset: 0;
         position: absolute;
       }
     `}
 
-    background-color: ${theme.colors.foregroundSecondary};
+    background-color: ${theme.colors.backgroundSecondary};
 
     width: 100%;
     padding-bottom: 100%;

diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
@@ -19,16 +19,11 @@ export const BackdropSurface = styled.div<{
 
     ${!$empty && $state === 'entered'
       ? css`
-          background-color: rgba(
-            0,
-            0,
-            0,
-            ${theme.shades.backgroundHideFallback}
-          );
+          background-color: rgba(0, 0, 0, ${theme.opacity.overlayFallback});
 
           @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
             backdrop-filter: blur(16px);
-            background-color: ${theme.colors.backgroundHide};
+            background-color: rgba(0, 0, 0, ${theme.opacity.overlay});
           }
         `
       : css`

diff --git a/components/src/components/atoms/Button/Button.test.tsx b/components/src/components/atoms/Button/Button.test.tsx
@@ -4,9 +4,10 @@ import { ThemeProvider } from 'styled-components'
 
 import { cleanup, render, screen } from '@/test'
 
-import { Button } from './Button'
 import { lightTheme } from '@/src/tokens'
 
+import { Button } from './Button'
+
 describe('<Button />', () => {
   afterEach(cleanup)
 

diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
@@ -43,8 +43,8 @@ type BaseProps = {
   zIndex?: string
   /** If true, sets the style to indicate "on" state. Useful for toggles switches. */
   pressed?: boolean
-  /** If true, removes the box-shadow */
-  shadowless?: boolean
+  /** If true, adds a box-shadow */
+  shadow?: boolean
   /** If true, adds an outline to the button */
   outlined?: boolean
   /** If true, makes inner div full width*/
@@ -81,7 +81,7 @@ type WithoutAnchor = {
 
 interface ButtonElement {
   $pressed: boolean
-  $shadowless: boolean
+  $shadow: boolean
   $outlined: boolean
   $shape?: BaseProps['shape']
   $size?: BaseProps['size']
@@ -101,17 +101,13 @@ const getAccentColour = (
     | 'accentSecondary'
     | 'accentSecondaryHover',
   type?: 'secondary',
-) => {
-  if (tone === 'accent') {
-    return theme.colors[accent]
-  }
-
+): string => {
   if (tone === 'grey') {
     switch (accent) {
       case 'accentText':
         return theme.colors.text
       case 'accentSecondary':
-        return theme.colors.foregroundTertiary
+        return theme.colors.textSecondary
       default:
         return type === 'secondary'
           ? theme.colors.textSecondary
@@ -123,13 +119,13 @@ const getAccentColour = (
     case 'accent':
       return theme.colors[tone]
     case 'accentText':
-      return theme.colors.white
+      return theme.colors.textAccent
     case 'accentGradient':
-      return theme.colors.gradients[tone]
+      return theme.colors.gradients[tone === 'accent' ? 'blue' : tone]
     case 'accentSecondary':
-      return `rgba(${theme.accentsRaw[tone]}, ${theme.shades[accent]})`
+      return theme.colors[`${tone}Surface`]
     case 'accentSecondaryHover':
-      return `rgba(${theme.accentsRaw[tone]}, ${theme.shades[accent]})`
+      return theme.colors[`${tone}Bright`]
     default:
       return ``
   }
@@ -141,7 +137,7 @@ const ButtonElement = styled.button<ButtonElement>(
     disabled,
     $center,
     $pressed,
-    $shadowless,
+    $shadow,
     $outlined,
     $size,
     $variant,
@@ -162,7 +158,12 @@ const ButtonElement = styled.button<ButtonElement>(
 
     &:hover {
       transform: translateY(-1px);
-      filter: brightness(1.05);
+      ${$variant !== 'transparent' &&
+      css`
+        filter: ${$variant === 'secondary'
+          ? 'contrast(0.95)'
+          : 'brightness(1.05)'};
+      `}
     }
 
     &:active {
@@ -185,7 +186,7 @@ const ButtonElement = styled.button<ButtonElement>(
           filter: brightness(0.95);
         `
       : ``};
-    ${$shadowless
+    ${!$shadow
       ? css`
           box-shadow: none !important;
         `
@@ -194,7 +195,7 @@ const ButtonElement = styled.button<ButtonElement>(
     ${$outlined
       ? css`
           border: ${theme.borderWidths.px} ${theme.borderStyles.solid}
-            ${theme.colors.borderTertiary};
+            ${theme.colors.border};
         `
       : ``}
 
@@ -236,7 +237,7 @@ const ButtonElement = styled.button<ButtonElement>(
         case 'secondary':
           return css`
             color: ${getAccentColour(theme, $tone, 'accent', 'secondary')};
-            background: ${getAccentColour(theme, $tone, 'accentSecondary')};
+            background: ${theme.colors[`${$tone}Surface`]};
           `
         case 'action':
           return css`
@@ -245,14 +246,14 @@ const ButtonElement = styled.button<ButtonElement>(
           `
         case 'transparent':
           return css`
-            color: ${theme.colors.textTertiary};
+            color: ${theme.colors.text};
 
             &:hover {
-              background-color: ${theme.colors.foregroundTertiary};
+              background-color: ${theme.colors.greySurface};
             }
 
             &:active {
-              background-color: ${theme.colors.foregroundTertiary};
+              background-color: ${theme.colors.greyBright};
             }
           `
         default:
@@ -292,7 +293,7 @@ const ButtonElement = styled.button<ButtonElement>(
     }}
 
   ${() => {
-      if ($shadowless && $pressed && $variant === 'transparent') {
+      if (!$shadow && $pressed && $variant === 'transparent') {
         return css`
           background-color: ${theme.colors.backgroundSecondary};
         `
@@ -312,14 +313,22 @@ const ButtonElement = styled.button<ButtonElement>(
   `,
 )
 
-const PrefixContainer = styled.div<GetCenterProps>(
+const ItemContainer = styled.div(
+  ({ theme }) => css`
+    & > svg {
+      display: block;
+      width: ${theme.space['4']};
+      height: ${theme.space['4']};
+    }
+  `,
+)
+
+const PrefixContainer = styled(ItemContainer)<GetCenterProps>(
   () => css`
     ${getCenterProps}
   `,
 )
 
-const LoadingContainer = styled.div(() => css``)
-
 const LabelContainer = styled(Typography)<{
   $fullWidthContent: boolean
 }>(
@@ -356,7 +365,7 @@ export const Button = React.forwardRef(
       zIndex,
       onClick,
       pressed = false,
-      shadowless = false,
+      shadow = false,
       outlined = false,
       fullWidthContent = false,
       as: asProp,
@@ -371,7 +380,11 @@ export const Button = React.forwardRef(
     )
     let childContent: ReactNodeNoStrings
     if (shape) {
-      childContent = loading ? <Spinner color="background" /> : labelContent
+      childContent = loading ? (
+        <Spinner color="backgroundPrimary" />
+      ) : (
+        labelContent
+      )
     } else {
       childContent = (
         <>
@@ -382,9 +395,9 @@ export const Button = React.forwardRef(
           )}
           {labelContent}
           {(loading || suffix) && (
-            <LoadingContainer {...{ center, size, side: 'right' }}>
-              {loading ? <Spinner color="background" /> : suffix}
-            </LoadingContainer>
+            <ItemContainer {...{ center, size, side: 'right' }}>
+              {loading ? <Spinner color="backgroundPrimary" /> : suffix}
+            </ItemContainer>
           )}
         </>
       )
@@ -397,7 +410,7 @@ export const Button = React.forwardRef(
         $fullWidthContent={fullWidthContent}
         $outlined={outlined}
         $pressed={pressed}
-        $shadowless={shadowless}
+        $shadow={shadow}
         $shape={shape}
         $size={size}
         $tone={tone}

diff --git a/components/src/components/atoms/Card/Card.test.tsx b/components/src/components/atoms/Card/Card.test.tsx
@@ -4,9 +4,10 @@ import { ThemeProvider } from 'styled-components'
 
 import { cleanup, render, screen } from '@/test'
 
-import { Card } from './Card'
 import { lightTheme } from '@/src/tokens'
 
+import { Card } from './Card'
+
 describe('<Card />', () => {
   afterEach(cleanup)
 

diff --git a/components/src/components/atoms/Card/Card.tsx b/components/src/components/atoms/Card/Card.tsx
@@ -1,42 +1,20 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import { mq } from '@/src/utils/responsiveHelpers'
-
-const Container = styled.div<{ $shadow?: boolean }>(
-  ({ theme, $shadow }) => css`
+const Container = styled.div(
+  ({ theme }) => css`
     padding: ${theme.space['6']};
     border-radius: ${theme.radii['2xLarge']};
     background-color: ${theme.colors.background};
-    ${mq.lg.min(css`
-      border-radius: ${theme.radii['3xLarge']};
-    `)}
-
-    ${$shadow &&
-    theme.mode === 'light' &&
-    css`
-      box-shadow: 0px 0px ${theme.radii['2xLarge']} rgba(0, 0, 0, 0.1);
-      border-radius: ${theme.radii['2xLarge']};
-      ${mq.lg.min(css`
-        box-shadow: 0px 0px ${theme.radii['3xLarge']} rgba(0, 0, 0, 0.1);
-        border-radius: ${theme.radii['3xLarge']};
-      `)}
-    `}
+    border: 1px solid ${theme.colors.border};
   `,
 )
 
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
-export type Props = {
-  /** Adds shadow when theme is in light mode.  */
-  shadow?: boolean
-} & NativeDivProps
+export type Props = NativeDivProps
 
-export const Card = ({ children, shadow, ...props }: Props) => {
-  return (
-    <Container {...props} $shadow={shadow}>
-      {children}
-    </Container>
-  )
+export const Card = ({ children, ...props }: Props) => {
+  return <Container {...props}>{children}</Container>
 }
 
 Card.displayName = 'Card'
diff --git a/components/src/components/atoms/Field/Field.test.tsx b/components/src/components/atoms/Field/Field.test.tsx
@@ -4,9 +4,10 @@ import { ThemeProvider } from 'styled-components'
 
 import { cleanup, render, screen } from '@/test'
 
-import { Field } from './Field'
 import { lightTheme } from '@/src/tokens'
 
+import { Field } from './Field'
+
 describe('<Field />', () => {
   afterEach(cleanup)
 

diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
@@ -2,12 +2,12 @@ import * as React from 'react'
 
 import styled, { css } from 'styled-components'
 
+import { Space } from '@/src/tokens'
+
 import { ReactNodeNoStrings } from '../../../types'
 import { useFieldIds } from '../../../hooks'
 import { VisuallyHidden } from '../VisuallyHidden'
 
-import { Space } from '@/src/tokens'
-
 type State = ReturnType<typeof useFieldIds> | undefined
 const Context = React.createContext<State>(undefined)
 

diff --git a/components/src/components/atoms/Heading/Heading.test.tsx b/components/src/components/atoms/Heading/Heading.test.tsx
@@ -4,9 +4,10 @@ import { ThemeProvider } from 'styled-components'
 
 import { cleanup, render, screen } from '@/test'
 
-import { Heading } from './Heading'
 import { lightTheme } from '@/src/tokens'
 
+import { Heading } from './Heading'
+
 describe('<Heading />', () => {
   afterEach(cleanup)