feat(fabric): Buttons redesign (#1785)

centrifuge · Dec 13, 2023 · 648b9db · 648b9db
1 parent 4cc73e1
commit 648b9db
Show file tree

Hide file tree

Showing 19 changed files with 113 additions and 135 deletions.
diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -213,7 +213,7 @@ const DataRow = styled(Row)<any>`
             }
           : undefined,
       '&:focus-visible': {
-        boxShadow: 'inset 0 0 0 3px var(--fabric-color-focus)',
+        boxShadow: 'inset 0 0 0 3px var(--fabric-focus)',
       },
     })}
 `
@@ -255,7 +255,7 @@ const HeaderCol = styled(DataCol)`
   align-items: center;
 
   &:has(:focus-visible) {
-    box-shadow: inset 0 0 0 3px var(--fabric-color-focus);
+    box-shadow: inset 0 0 0 3px var(--fabric-focus);
   }
 `
 

diff --git a/centrifuge-app/src/components/PillButton.tsx b/centrifuge-app/src/components/PillButton.tsx
@@ -23,7 +23,7 @@ const Pill = styled.button<{ variant?: 'small' | 'regular' }>(
   }),
   {
     '&:focus-visible': {
-      boxShadow: '3px 3px 0 var(--fabric-color-focus)',
+      boxShadow: '3px 3px 0 var(--fabric-focus)',
     },
   },
   ({ variant }) =>

diff --git a/centrifuge-app/src/components/TextLink.tsx b/centrifuge-app/src/components/TextLink.tsx
@@ -26,7 +26,7 @@ export const TextLink = styled.span`
       bottom: -1px;
       width: 100%;
       height: 2px;
-      background-color: var(--fabric-color-focus);
+      background-color: var(--fabric-focus);
       pointer-events: none;
     }
   }

diff --git a/fabric/src/components/Button/VisualButton.tsx b/fabric/src/components/Button/VisualButton.tsx
@@ -68,9 +68,9 @@ export const StyledButton = styled.span<StyledProps>(
       justifySelf: 'center',
     },
   },
-  ({ $variant, $disabled, $small, $active, $iconOnly, $loading, theme }) => {
+  ({ $variant, $disabled, $small, $active, $iconOnly, $loading }) => {
     const isTertiaryIcon = $variant === 'tertiary' && $iconOnly
-    const variant = $variant //=== 'wallet' ? 'secondary' : $variant
+    const variant = $variant === 'wallet' ? 'secondary' : $variant
     const variantToken = variant[0].toUpperCase().concat(variant.slice(1))
     const bg = `backgroundButton${variantToken}`
     const bgFocus = `backgroundButton${variantToken}Focus`
@@ -87,35 +87,27 @@ export const StyledButton = styled.span<StyledProps>(
     const borderHover = `borderButton${variantToken}Hover`
     const borderPressed = `borderButton${variantToken}Pressed`
     const borderDisabled = `borderButton${variantToken}Disabled`
-    const shadow = `shadowButton${variantToken}Pressed`
+    const shadow = `button${variantToken}`
 
     return css({
       color: $disabled ? fgDisabled : $active ? fgHover : fg,
-      backgroundColor: $disabled ? bgDisabled : $active && !isTertiaryIcon && variant !== 'wallet' ? bgHover : bg,
-      borderColor: $disabled
-        ? borderDisabled
-        : $active && !isTertiaryIcon && variant !== 'wallet'
-        ? borderHover
-        : border,
+      backgroundColor: $disabled ? bgDisabled : $active ? bgHover : bg,
+      borderColor: $disabled ? borderDisabled : $active ? borderHover : border,
       borderWidth: 1,
-      borderRadius: $variant === 'wallet' ? 40 : 4,
+      borderRadius: 'button',
       pointerEvents: $disabled ? 'none' : 'initial',
       minHeight: $small ? 32 : 40,
-      '--fabric-color-focus': theme.colors[shadow],
-      boxShadow:
-        $active && variant === 'secondary' ? 'buttonActive' : $variant === 'wallet' ? 'cardInteractive' : 'none',
+      boxShadow: variant !== 'tertiary' && !$disabled ? shadow : 'none',
 
       '&:hover': {
         color: fgHover,
         backgroundColor: isTertiaryIcon ? undefined : bgHover,
         borderColor: isTertiaryIcon ? undefined : borderHover,
-        boxShadow: variant === 'secondary' ? 'buttonActive' : variant === 'wallet' ? 'cardInteractive' : 'none',
       },
       '&:active': {
         color: fgPressed,
         backgroundColor: isTertiaryIcon ? undefined : bgPressed,
         borderColor: isTertiaryIcon ? undefined : borderPressed,
-        boxShadow: variant === 'wallet' ? 'cardInteractive' : variant !== 'tertiary' ? 'buttonActive' : 'none',
       },
 
       'a:focus-visible &, button:focus-visible &': {
@@ -138,7 +130,7 @@ const Spinner = styled(IconSpinner)`
   animation: ${rotate} 600ms linear infinite;
 `
 
-export const VisualButton: React.FC<VisualButtonProps> = ({
+export function VisualButton({
   variant = 'primary',
   small,
   icon: IconComp,
@@ -148,11 +140,10 @@ export const VisualButton: React.FC<VisualButtonProps> = ({
   loadingMessage,
   children,
   active,
-}) => {
+}: VisualButtonProps) {
   const isTertiaryIcon = variant === 'tertiary' && !children
   const isWallet = variant === 'wallet'
-  const px = isWallet ? '12px' : isTertiaryIcon ? 1 : variant === 'tertiary' || small ? 2 : 3
-  const iconSize = isTertiaryIcon && !small ? 'iconMedium' : 'iconSmall'
+  const iconSize = isTertiaryIcon && !small ? 'iconMedium' : '20px'
 
   return (
     <StyledButton
@@ -165,7 +156,7 @@ export const VisualButton: React.FC<VisualButtonProps> = ({
     >
       <DefaultContent
         gap={1}
-        px={px}
+        px={2}
         py={small ? '5px' : '7px'}
         position="relative"
         justifyContent={isWallet ? 'start' : 'center'}
@@ -180,18 +171,18 @@ export const VisualButton: React.FC<VisualButtonProps> = ({
         ) : (
           <>
             {children && (
-              <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={500}>
+              <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={400}>
                 {children}
               </Text>
             )}
           </>
         )}
         {IconRightComp && (isComponent(IconRightComp) ? <IconRightComp size="iconSmall" /> : IconRightComp)}
       </DefaultContent>
-      <LoadingContent px={px} gap={1} justifyContent="center">
+      <LoadingContent px={2} gap={1} justifyContent="center">
         <Spinner size={small ? 'iconSmall' : 'iconMedium'} />
         {loadingMessage && (
-          <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={500}>
+          <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={400}>
             {loadingMessage}
           </Text>
         )}

diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -74,7 +74,7 @@ export const WalletButton: React.VFC<WalletButtonProps> = ({
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
               <Text
                 fontSize={small ? 14 : 16}
-                color="inherit"
+                color="textPrimary"
                 fontWeight={500}
                 style={{
                   overflow: 'hidden',
@@ -86,12 +86,17 @@ export const WalletButton: React.VFC<WalletButtonProps> = ({
             </Shelf>
           </Box>
         ) : (
-          <Text fontSize={small ? 14 : 16} color="inherit" fontWeight={500} style={{ margin: address ? 0 : 'auto' }}>
+          <Text
+            fontSize={small ? 14 : 16}
+            color="textPrimary"
+            fontWeight={500}
+            style={{ margin: address ? 0 : 'auto' }}
+          >
             {displayAddress ? truncate(displayAddress) : connectLabel}
           </Text>
         )}
         {address && balance && (
-          <Text variant="body3" color="inherit" style={{ marginLeft: 'auto' }}>
+          <Text variant="body3" color="textPrimary" style={{ marginLeft: 'auto' }}>
             {balance}
           </Text>
         )}

diff --git a/fabric/src/components/Checkbox/index.tsx b/fabric/src/components/Checkbox/index.tsx
@@ -85,7 +85,7 @@ const StyledOutline = styled.span`
   width: auto;
   height: auto;
   margin: auto;
-  border: 2px solid var(--fabric-color-focus);
+  border: 2px solid var(--fabric-focus);
   border-radius: 4px;
 `
 

diff --git a/fabric/src/components/CurrencyInput/index.tsx b/fabric/src/components/CurrencyInput/index.tsx
@@ -58,7 +58,7 @@ const StyledMaxButton = styled(Box)`
   }
 
   &:focus-visible {
-    box-shadow: ${({ theme }) => theme.shadows.buttonActive};
+    box-shadow: ${({ theme }) => theme.shadows.buttonPrimary};
   }
 `.withComponent('button')
 

diff --git a/fabric/src/components/GlobalStyle/index.ts b/fabric/src/components/GlobalStyle/index.ts
diff --git a/fabric/src/components/GlobalStyle/index.tsx b/fabric/src/components/GlobalStyle/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { createGlobalStyle, useTheme } from 'styled-components'
+
+export const StyledGlobalStyle = createGlobalStyle`
+  html {
+    box-sizing: border-box;
+    accent-color: ${(props) => props.theme.colors.accentPrimary};
+    color-scheme: ${(props) => props.theme.scheme};
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  html, body {
+    margin: 0;
+    padding: 0;
+    background-color: ${(props) => props.theme.colors.backgroundPage};
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  *:focus {
+    outline: none;
+  }
+`
+
+export function GlobalStyle() {
+  const theme = useTheme()
+  React.useLayoutEffect(() => {
+    Object.entries(theme.colors).forEach(([key, color]) => {
+      if (typeof color === 'string') document.documentElement.style.setProperty(`--fabric-${key}`, color)
+    })
+  }, [])
+  return <StyledGlobalStyle />
+}
diff --git a/fabric/src/components/InputBox/index.tsx b/fabric/src/components/InputBox/index.tsx
@@ -25,7 +25,7 @@ const InputWrapper = styled(Stack)<{ $active?: boolean; $disabled?: boolean }>`
     $disabled ? theme.colors.backgroundSecondary : $active ? theme.colors.textSelected : theme.colors.grayScale[300]};
   &:focus,
   &:focus-within {
-    border-color: var(--fabric-color-focus);
+    border-color: var(--fabric-focus);
   }
 `
 

diff --git a/fabric/src/components/RadioButton/index.tsx b/fabric/src/components/RadioButton/index.tsx
@@ -42,7 +42,7 @@ const StyledOutline = styled.span`
   right: -4px;
   bottom: -4px;
   left: -4px;
-  border: 2px solid var(--fabric-color-focus);
+  border: 2px solid var(--fabric-focus);
   border-radius: 20px;
 `
 

diff --git a/fabric/src/theme/altairDark.ts b/fabric/src/theme/altairDark.ts
@@ -12,6 +12,7 @@ export const altairDark: FabricTheme = {
     ...modeDark.colors,
     primarySelectedBackground: yellowScale[500],
     secondarySelectedBackground: yellowScale[700],
+    focus: yellowScale[500],
     borderFocus: yellowScale[500],
     borderSelected: yellowScale[500],
     textSelected: yellowScale[500],
@@ -25,7 +26,7 @@ export const altairDark: FabricTheme = {
   shadows: {
     ...baseTheme.shadows,
     cardInteractive: '0 1px 5px rgba(255, 255, 255, .8)',
-    cardActive: '0 0 0 1px var(--fabric-color-focus), 0 1px 5px rgba(255, 255, 255, .8)',
+    cardActive: '0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(255, 255, 255, .8)',
     cardOverlay: '4px 8px 24px rgba(255, 255, 255, .4)',
   },
 }

diff --git a/fabric/src/theme/altairLight.ts b/fabric/src/theme/altairLight.ts
@@ -12,6 +12,7 @@ export const altairLight: FabricTheme = {
     ...modeLight.colors,
     primarySelectedBackground: blueScale[500],
     secondarySelectedBackground: blueScale[50],
+    focus: blueScale[500],
     borderFocus: blueScale[500],
     borderSelected: blueScale[500],
     textSelected: blueScale[500],

diff --git a/fabric/src/theme/centrifugeDark.ts b/fabric/src/theme/centrifugeDark.ts
@@ -12,6 +12,7 @@ export const centrifugeDark: FabricTheme = {
     ...modeDark.colors,
     primarySelectedBackground: blueScale[500],
     secondarySelectedBackground: blueScale[700],
+    focus: blueScale[500],
     borderFocus: blueScale[500],
     borderSelected: blueScale[500],
     textSelected: blueScale[400],
@@ -25,7 +26,7 @@ export const centrifugeDark: FabricTheme = {
   shadows: {
     ...baseTheme.shadows,
     cardInteractive: '0 1px 5px rgba(255, 255, 255, .8)',
-    cardActive: '0 0 0 1px var(--fabric-color-focus), 0 1px 5px rgba(255, 255, 255, .8)',
+    cardActive: '0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(255, 255, 255, .8)',
     cardOverlay: '4px 8px 24px rgba(255, 255, 255, .4)',
   },
 }

diff --git a/fabric/src/theme/centrifugeLight.ts b/fabric/src/theme/centrifugeLight.ts
@@ -12,6 +12,7 @@ export const centrifugeLight: FabricTheme = {
     ...modeLight.colors,
     primarySelectedBackground: blueScale[500],
     secondarySelectedBackground: blueScale[50],
+    focus: blueScale[500],
     borderFocus: blueScale[500],
     borderSelected: blueScale[500],
     textSelected: blueScale[500],

diff --git a/fabric/src/theme/tokens/baseTheme.ts b/fabric/src/theme/tokens/baseTheme.ts
@@ -29,9 +29,10 @@ export const baseTheme: Omit<FabricTheme, 'colors' | 'scheme'> = {
   },
   shadows: {
     cardInteractive: '1px 3px 6px rgba(0, 0, 0, 0.15)',
-    cardActive: ' 0 0 0 1px var(--fabric-color-focus), 0 1px 5px rgba(0, 0, 0, 0.2)',
+    cardActive: ' 0 0 0 1px var(--fabric-focus), 0 1px 5px rgba(0, 0, 0, 0.2)',
     cardOverlay: '4px 8px 24px rgba(0, 0, 0, 0.2)',
-    buttonActive: `4px 4px 1px var(--fabric-color-focus)`,
+    buttonPrimary: `1px 2px 7px var(--fabric-shadowButtonPrimary)`,
+    buttonSecondary: `1px 2px 1px var(--fabric-shadowButtonSecondary)`,
   },
   zIndices: {
     sticky: 10,

diff --git a/fabric/src/theme/tokens/modeDark.ts b/fabric/src/theme/tokens/modeDark.ts
@@ -52,7 +52,7 @@ const darkColors = {
   borderButtonPrimaryHover: 'white',
   borderButtonPrimaryPressed: 'white',
   borderButtonPrimaryDisabled: grayScale[600],
-  shadowButtonPrimaryPressed: altairYellow,
+  shadowButtonPrimary: altairYellow,
 
   backgroundButtonSecondary: 'transparent',
   backgroundButtonSecondaryFocus: 'transparent',
@@ -70,7 +70,7 @@ const darkColors = {
   borderButtonSecondaryHover: grayScale[600],
   borderButtonSecondaryPressed: 'white',
   borderButtonSecondaryDisabled: grayScale[600],
-  shadowButtonSecondaryPressed: 'white',
+  shadowButtonSecondary: 'white',
 
   backgroundButtonTertiary: 'transparent',
   backgroundButtonTertiaryFocus: 'transparent',
@@ -87,23 +87,6 @@ const darkColors = {
   borderButtonTertiaryHover: 'transparent',
   borderButtonTertiaryPressed: yellowScale[500],
   borderButtonTertiaryDisabled: 'transparent',
-
-  backgroundButtonWallet: 'black',
-  backgroundButtonWalletFocus: grayScale[900],
-  backgroundButtonWalletHover: grayScale[900],
-  backgroundButtonWalletPressed: 'black',
-  backgroundButtonWalletDisabled: 'transparent',
-  textButtonWallet: 'white',
-  textButtonWalletFocus: 'white',
-  textButtonWalletHover: 'white',
-  textButtonWalletPressed: 'white',
-  textButtonWalletDisabled: grayScale[600],
-  borderButtonWallet: grayScale[600],
-  borderButtonWalletFocus: 'white',
-  borderButtonWalletHover: grayScale[400],
-  borderButtonWalletPressed: 'white',
-  borderButtonWalletDisabled: grayScale[600],
-  shadowButtonWalletPressed: 'white',
 }
 
 export const modeDark = {