Refactor css, components

packages/adena-extension/src/common/utils/client-utils.ts

@@ -181,17 +181,17 @@ export function getStatusStyle(status: string): { color: string; statusIcon: any
   switch (status) {
     case 'SUCCESS':
       return {
-        color: theme.color.green[2],
+        color: theme.green._5,
         statusIcon: success,
       };
     case 'FAIL':
       return {
-        color: theme.color.red[2],
+        color: theme.red._5,
         statusIcon: failed,
       };
     default:
       return {
-        color: theme.color.red[2],
+        color: theme.red._5,
         statusIcon: failed,
       };
   }

packages/adena-extension/src/components/atoms/blur-screen/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Text, Icon } from '@components/atoms';
 import blurBg from '@assets/blur-bg.svg';
+import mixins from '@styles/mixins';
 
 interface BlurScreenProps {
   hasText?: boolean;
@@ -20,8 +22,8 @@ export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
 };
 
 const Wrapper = styled.div<{ hasText?: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
-  ${({ theme }): CSSProp => theme.mixins.positionCenter()};
+  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.positionCenter()};
   gap: ${({ hasText }): false | '21px' | undefined => hasText && '21px'};
   background: url(${blurBg}) no-repeat 100% 100% / 100% 100%;
   width: calc(100% - 12px);

packages/adena-extension/src/components/atoms/button/index.tsx

@@ -1,78 +1,72 @@
 import styled, { css } from 'styled-components';
 import React, { CSSProperties } from 'react';
 import mixins from '@styles/mixins';
+import { getTheme } from '@styles/theme';
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends Record<string, unknown>
   ? (Without<T, U> & U) | (Without<U, T> & T)
   : T | U;
 
-export enum ButtonHierarchy {
-  Normal = 'normal',
-  Primary = 'Primary',
-  Ghost = 'Ghost',
-  Dark = 'Dark',
-  Danger = 'Danger',
-  Custom = 'Custom',
-}
+type ButtonHierarchy = 'normal' | 'primary' | 'ghost' | 'dark' | 'danger' | 'custom';
 
 export const modeVariants = {
   normal: css`
-    background: ${({ theme }): string => theme.color.neutral[6]};
+    background: ${getTheme('neutral', '_7')};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[11]};
+      background: ${getTheme('neutral', 'b')};
     }
     /* &:disabled {
-      background: ${({ theme }): string => theme.color.primary[6]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${getTheme('primary', '_9')};
+      color: ${getTheme('neutral', '_5')};
     } */
   `,
   primary: css`
-    background: ${({ theme }): string => theme.color.primary[3]};
+    background: ${getTheme('primary', '_6')};
     &:hover {
-      background: ${({ theme }): string => theme.color.primary[4]};
+      background: ${getTheme('primary', '_7')};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.primary[6]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${getTheme('primary', '_9')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   ghost: css`
-    background: ${({ theme }): string => theme.color.neutral[8]};
-    border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
+    background: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_3')};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
+      background: ${getTheme('neutral', '_6')};
+      border: 1px solid ${getTheme('neutral', '_3')};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[6]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[3]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_7')};
+      border: 1px solid ${getTheme('neutral', '_4')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   dark: css`
-    background: ${({ theme }): string => theme.color.neutral[4]};
+    background: ${getTheme('neutral', '_5')};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[5]};
+      background: ${getTheme('neutral', '_6')};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_6')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   danger: css`
-    background: ${({ theme }): string => theme.color.red[2]};
+    background: ${getTheme('red', '_5')};
     &:hover {
-      background: ${({ theme }): string => theme.color.red[8]};
+      background: #bb150b;
     }
     /* &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_6')};
+      color: ${getTheme('neutral', '_5')};
     } */
   `,
 };
 
-type ButtonProps = XOR<
+export type ButtonProps = XOR<
   {
     fullWidth?: boolean;
     height?: CSSProperties['height'];
@@ -106,7 +100,7 @@ export const Button = (props: ButtonProps): JSX.Element => {
 };
 
 const ButtonWrapper = styled.button<ButtonProps>`
-  ${mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: ${({ width, fullWidth }): string => {
     if (width) return typeof width === 'number' ? `${width}px` : width;
     if (fullWidth) return '100%';
@@ -118,19 +112,19 @@ const ButtonWrapper = styled.button<ButtonProps>`
   }};
   margin: ${(props): any => props.margin};
   ${({ hierarchy, bgColor }): any => {
-    if (hierarchy === ButtonHierarchy.Primary) return modeVariants.primary;
-    if (hierarchy === ButtonHierarchy.Normal) return modeVariants.normal;
-    if (hierarchy === ButtonHierarchy.Ghost) return modeVariants.ghost;
-    if (hierarchy === ButtonHierarchy.Dark) return modeVariants.dark;
-    if (hierarchy === ButtonHierarchy.Danger) return modeVariants.danger;
-    if (hierarchy === ButtonHierarchy.Custom)
+    if (hierarchy === 'primary') return modeVariants.primary;
+    if (hierarchy === 'normal') return modeVariants.normal;
+    if (hierarchy === 'ghost') return modeVariants.ghost;
+    if (hierarchy === 'dark') return modeVariants.dark;
+    if (hierarchy === 'danger') return modeVariants.danger;
+    if (hierarchy === 'custom')
       return css`
         background-color: ${bgColor};
       `;
   }};
   border-radius: ${({ radius }): string => (radius ? radius : '30px')};
   transition: all 0.4s ease;
-  color: ${({ theme }): string => theme.color.neutral[0]};
+  color: ${getTheme('neutral', '_1')};
   background-color: ${({ bgColor }): string | undefined => bgColor};
 `;
 

packages/adena-extension/src/components/atoms/copy-button/index.tsx

@@ -1,17 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { Text, Button } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const CopyButton = styled(Button)<{ isClicked: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;
   transition: background-color 0.4s ease;
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
   }
 `;
 
@@ -24,6 +25,7 @@ export const Copy = ({
 }): JSX.Element => {
   const [isClicked, setIsClicked] = useState<boolean>(false);
 
+  const theme = useTheme();
   const handleButtonClick = useCallback(() => {
     setIsClicked((prev: boolean) => !prev);
     navigator.clipboard.writeText(copyStr);
@@ -42,7 +44,7 @@ export const Copy = ({
       onClick={handleButtonClick}
       disabled={isClicked}
       tabIndex={tabIndex && tabIndex}
-      bgColor={theme.color.neutral[6]}
+      bgColor={theme.neutral._7}
     >
       <Text type='body2Reg'>{isClicked ? 'Copied!' : 'Copy'}</Text>
     </CopyButton>

packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts

@@ -1,3 +1,4 @@
+import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 interface CopyButtonWrapperProps {
@@ -14,14 +15,13 @@ export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`
   svg {
     path {
       transition: 0.2s;
-      stroke: ${({ theme, checked }): string =>
-        checked ? theme.color.neutral[0] : theme.color.neutral[9]};
+      stroke: ${({ theme, checked }): string => (checked ? theme.neutral._1 : theme.neutral.a)};
     }
   }
 
   :hover svg {
     path {
-      stroke: ${({ theme }): string => theme.color.neutral[0]};
+      stroke: ${getTheme('neutral', '_1')};
     }
   }
 `;

packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { Text } from '@components/atoms';
+import mixins from '@styles/mixins';
+import { fonts, getTheme } from '@styles/theme';
 
 interface CopyTooltipProps {
   children: React.ReactNode;
@@ -10,15 +12,15 @@ interface CopyTooltipProps {
 }
 
 const ToolTipInner = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${mixins.flex('row', 'center', 'center')};
+  ${fonts.body2Reg};
   position: absolute;
   width: max-content;
   height: 25px;
   visibility: hidden;
   z-index: 1;
   padding: 0px 17px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 13px;
   transform: scale(0.6);
   cursor: default;
@@ -33,7 +35,7 @@ const ToolTipInner = styled.div`
 `;
 
 const ToolTipWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: relative;
   cursor: pointer;
   &:hover .tooltip,

packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts

@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import { fonts, getTheme } from '@styles/theme';
 
 export const CustomNetworkInputWrapper = styled.div`
   display: flex;
@@ -17,9 +19,9 @@ export const CustomNetworkInputWrapper = styled.div`
       width: 100%;
       min-height: 48px;
       padding: 12px 16px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-      background-color: ${({ theme }): string => theme.color.neutral[8]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+      ${fonts.body2Reg};
+      background-color: ${getTheme('neutral', '_9')};
+      border: 1px solid ${getTheme('neutral', '_7')};
       border-radius: 30px;
       align-items: center;
       margin-top: 12px;
@@ -37,7 +39,7 @@ export const CustomNetworkInputWrapper = styled.div`
         line-height: 25px;
 
         ::placeholder {
-          color: ${({ theme }): string => theme.color.neutral[9]};
+          color: ${getTheme('neutral', 'a')};
         }
       }
     }
@@ -46,8 +48,8 @@ export const CustomNetworkInputWrapper = styled.div`
   .error-message {
     position: relative;
     padding: 0 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
+    ${fonts.captionReg};
     height: 14px;
-    color: ${({ theme }): string => theme.color.red[2]};
+    color: ${getTheme('red', '_5')};
   }
 `;

packages/adena-extension/src/components/atoms/default-input/index.tsx

@@ -1,26 +1,27 @@
-import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import { fonts, getTheme } from '@styles/theme';
 
 interface InputProps {
   error?: boolean;
   margin?: string;
 }
 
 export const inputStyle = css`
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${fonts.body2Reg};
   width: 100%;
   height: 48px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
-  color: ${({ theme }): string => theme.color.neutral[0]};
+  background-color: ${getTheme('neutral', '_9')};
+  color: ${getTheme('neutral', '_1')};
   border-radius: 30px;
   padding: 14px 16px;
   ::placeholder {
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 `;
 
 export const DefaultInput = styled.input<InputProps>`
   ${inputStyle};
-  border: 1px solid
-    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
+  border: 1px solid ${({ error, theme }): string => (error ? theme.red._5 : theme.neutral._7)};
   margin: ${({ margin }): string | undefined => margin && margin};
 `;

packages/adena-extension/src/components/atoms/error-text/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import theme from '@styles/theme';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+
 import { Text } from '../text';
 
 const ErrorMsg = styled(Text)`
@@ -9,8 +9,9 @@ const ErrorMsg = styled(Text)`
 `;
 
 export const ErrorText = ({ text }: { text: string }): JSX.Element => {
+  const theme = useTheme();
   return (
-    <ErrorMsg type='captionReg' color={theme.color.red[2]}>
+    <ErrorMsg type='captionReg' color={theme.red._5}>
       {text}
     </ErrorMsg>
   );