chore: update theme's colors (#589)

Co-authored-by: nina992 <[email protected]>
reearth · Jul 28, 2023 · 714fb91 · 714fb91
1 parent 847db6c
commit 714fb91
Show file tree

Hide file tree

Showing 65 changed files with 341 additions and 618 deletions.
diff --git a/web/package.json b/web/package.json
@@ -49,6 +49,7 @@
         "@testing-library/react": "14.0.0",
         "@testing-library/user-event": "14.4.3",
         "@types/apollo-upload-client": "14.1.0",
+        "@types/carbon__colors": "10.31.0",
         "@types/gapi.auth2": "0.0.57",
         "@types/gapi.client": "1.0.5",
         "@types/gapi.client.sheets": "4.0.20201031",
@@ -97,6 +98,7 @@
         "@apollo/client": "3.7.14",
         "@auth0/auth0-react": "2.1.0",
         "@aws-amplify/ui-react": "5.0.2",
+        "@carbon/colors": "11.18.0",
         "@emotion/react": "11.11.0",
         "@emotion/styled": "11.11.0",
         "@floating-ui/react": "0.24.7",
@@ -177,4 +179,4 @@
         "use-file-input": "1.0.0",
         "uuid": "9.0.0"
     }
-}
+}
diff --git a/web/src/beta/components/Avatar/index.tsx b/web/src/beta/components/Avatar/index.tsx
@@ -32,10 +32,10 @@ const Avatar: React.FC<Props> = ({
       justify="center"
       size={size}
       avatar={avatar}
-      background={background ?? theme.general.bg.veryWeak}
+      background={background ?? theme.bg[4]}
       borderRadius={borderRadius}>
       {innerText && (
-        <Text size="h4" color={theme.general.content.strong}>
+        <Text size="h4" color={theme.content.withBackground}>
           {typeof innerText === "number" ? `+${innerText.toString()}` : innerText.charAt(0)}
         </Text>
       )}

diff --git a/web/src/beta/components/Button/index.tsx b/web/src/beta/components/Button/index.tsx
@@ -90,28 +90,28 @@ const StyledButton = styled.button<ButtonProps>`
   border-color: ${({ buttonType, disabled, theme }) =>
     buttonType === "danger"
       ? disabled
-        ? theme.general.button.danger.disable
-        : theme.general.button.danger.main
+        ? theme.content.weaker
+        : theme.dangerous.main
       : buttonType === "secondary"
       ? disabled
-        ? theme.general.button.secondary.disable
-        : theme.general.button.secondary.main
+        ? theme.content.weaker
+        : theme.secondary.main
       : disabled
-      ? theme.general.button.primary.disable
-      : theme.general.button.primary.main};
+      ? theme.content.weaker
+      : theme.primary.main};
   background: inherit;
   color: ${({ buttonType, disabled, theme }) =>
     buttonType === "danger"
       ? disabled
-        ? theme.general.button.danger.contentDisable
-        : theme.general.button.danger.content
+        ? theme.content.weaker
+        : theme.dangerous.main
       : buttonType === "secondary"
       ? disabled
-        ? theme.general.button.secondary.contentDisable
-        : theme.general.button.secondary.content
+        ? theme.content.weaker
+        : theme.content.main
       : disabled
-      ? theme.general.button.primary.contentDisable
-      : theme.general.button.primary.content};
+      ? theme.content.weaker
+      : theme.primary.main};
   padding: ${({ large }) =>
     large
       ? `${metricsSizes["s"]}px ${metricsSizes["2xl"]}px`
@@ -125,29 +125,6 @@ const StyledButton = styled.button<ButtonProps>`
   align-items: center;
   transition-property: color, background;
   transition-duration: 0.4s;
-
-  &:hover {
-    background: ${({ buttonType, disabled, theme }) =>
-      disabled
-        ? "inherit"
-        : buttonType === "danger"
-        ? theme.general.button.danger.hover
-        : buttonType === "secondary"
-        ? theme.general.button.secondary.hover
-        : theme.general.button.primary.hover};
-    color: ${({ buttonType, disabled, theme }) =>
-      buttonType === "danger"
-        ? disabled
-          ? theme.general.button.danger.contentDisable
-          : theme.general.button.danger.contentHover
-        : buttonType === "secondary"
-        ? disabled
-          ? theme.general.button.secondary.contentDisable
-          : theme.general.button.secondary.contentHover
-        : disabled
-        ? theme.general.button.primary.contentDisable
-        : theme.general.button.primary.contentHover};
-  }
 `;
 
 const IconWrapper = styled.span<{ text: boolean; iconRight?: boolean; large?: boolean }>`

diff --git a/web/src/beta/components/CheckboxField/index.tsx b/web/src/beta/components/CheckboxField/index.tsx
@@ -14,7 +14,7 @@ const CheckBoxField: React.FC<Props> = ({ onClick, checked, label }) => {
     <Field onClick={() => onClick?.(!checked)}>
       <BoxField>{checked && <CheckMark icon="checkmark" />}</BoxField>
       {label && (
-        <Text size="footnote" color={theme.general.content.main}>
+        <Text size="footnote" color={theme.content.main}>
           {label}
         </Text>
       )}
@@ -37,14 +37,14 @@ const BoxField = styled.div`
   box-sizing: border-box;
   width: 20px;
   height: 20px;
-  border: 1px solid ${({ theme }) => theme.general.content.weak};
+  border: 1px solid ${({ theme }) => theme.outline.weak};
   border-radius: 4px;
 `;
 
 const CheckMark = styled(Icon)`
   width: 15px;
   height: 10.83px;
-  color: ${({ theme }) => theme.general.content.main};
+  color: ${({ theme }) => theme.item.default};
 `;
 
 export default CheckBoxField;
diff --git a/web/src/beta/components/ContentPicker/index.stories.tsx b/web/src/beta/components/ContentPicker/index.stories.tsx
@@ -1,9 +1,21 @@
 import { Meta } from "@storybook/react";
 
-import ContentPicker from ".";
+import ContentPicker, { Item } from ".";
 
 export default {
   component: ContentPicker,
 } as Meta;
 
-export const Default = () => <ContentPicker />;
+const items: Item[] = [
+  {
+    id: "1",
+    name: "2",
+    icon: "crosshair",
+  },
+  {
+    id: "1",
+    name: "2",
+    icon: "crosshair",
+  },
+];
+export const Default = () => <ContentPicker items={items} />;
diff --git a/web/src/beta/components/ContentPicker/index.tsx b/web/src/beta/components/ContentPicker/index.tsx
@@ -46,14 +46,14 @@ const ContentPicker: React.FC<ContentsPickerProps> = ({
 };
 
 const Wrapper = styled.div`
-  background: ${({ theme }) => theme.general.bg.main};
+  background: ${({ theme }) => theme.bg[2]};
   margin-top: 5px;
   padding: 10px;
   box-sizing: border-box;
   border-radius: 3px;
   width: 288px;
-  color: ${({ theme }) => theme.general.content.main};
-  box-shadow: 0 0 5px ${({ theme }) => theme.general.bg.veryStrong};
+  color: ${({ theme }) => theme.content.main};
+  box-shadow: 0 0 5px ${({ theme }) => theme.bg[0]};
   &:after {
     content: "";
     position: absolute;
@@ -64,7 +64,7 @@ const Wrapper = styled.div`
     height: 0px;
     margin: auto;
     border-style: solid;
-    border-color: transparent transparent ${({ theme }) => theme.general.bg.main} transparent;
+    border-color: transparent transparent ${({ theme }) => theme.bg[2]} transparent;
     border-width: 0 10px 10px 10px;
   }
 `;
@@ -94,7 +94,7 @@ const ContentButton = styled.div`
 
   &:hover {
     border-radius: 6px;
-    border: solid 0.5px ${({ theme }) => theme.general.select};
+    border: solid 0.5px ${({ theme }) => theme.select.main};
   }
 `;
 

diff --git a/web/src/beta/components/Dropdown/index.tsx b/web/src/beta/components/Dropdown/index.tsx
@@ -156,8 +156,8 @@ const Parent = styled.div<{ noHover?: boolean; centered?: boolean }>`
     ${({ noHover, theme }) =>
       !noHover &&
       `
-    color: ${theme.general.content.main};
-    background: ${theme.general.bg.main};
+    color: ${theme.content.main};
+    background: ${theme.bg[2]};
       `}
   }
 `;
@@ -208,7 +208,7 @@ const StyledMenuList = styled(MenuList)<{
   gap?: Gap;
 }>`
   position: absolute;
-  background: ${({ theme }) => theme.navbar.bg.main};
+  background: ${({ theme }) => theme.bg[0]};
 
   width: ${({ dropdownWidth }) => (dropdownWidth ? `${dropdownWidth}px` : "200px")};
   margin: 0 auto;
@@ -224,7 +224,7 @@ const StyledMenuList = styled(MenuList)<{
 `;
 
 const StyledIcon = styled(Icon)`
-  color: ${({ theme }) => theme.general.content.weak};
+  color: ${({ theme }) => theme.content.weak};
   pointer-events: none;
 `;
 
@@ -234,7 +234,7 @@ const SelectedIcon = styled.div<{ isActive: boolean }>`
   border-radius: 50%;
   margin-left: 4px;
   order: 2;
-  background-color: ${({ theme }) => theme.general.select};
+  background-color: ${({ theme }) => theme.select.main};
 `;
 
 // const ChildrenWrapper = styled.div`
@@ -243,7 +243,7 @@ const SelectedIcon = styled.div<{ isActive: boolean }>`
 // `;
 
 const Spacer = styled.div`
-  border-top: 0.5px solid ${({ theme }) => theme.general.border};
+  border-top: 0.5px solid ${({ theme }) => theme.outline.weak};
   margin: 2px 0;
 `;
 

diff --git a/web/src/beta/components/InsertionBar/index.stories.tsx b/web/src/beta/components/InsertionBar/index.stories.tsx
@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import InsertionBar from ".";
+
+export default {
+  component: InsertionBar,
+} as Meta;
+
+type Story = StoryObj<typeof InsertionBar>;
+
+export const Default: Story = {};
diff --git a/web/src/beta/components/InsertionBar/index.tsx b/web/src/beta/components/InsertionBar/index.tsx
@@ -81,7 +81,7 @@ const InsertionBar: React.FC<Props> = ({
 };
 
 const StyledAddButton = styled(Icon)`
-  background: ${({ theme }) => theme.general.bg.main};
+  background: ${({ theme }) => theme.bg[2]};
   cursor: pointer;
   display: block;
   padding: 0 3px;
@@ -93,8 +93,7 @@ const ButtonWrapper = styled.div<{ visible?: boolean; hovered?: boolean }>`
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: ${({ hovered, theme }) =>
-    hovered ? theme.general.content.strong : theme.general.content.main};
+  color: ${({ hovered, theme }) => (hovered ? theme.content.withBackground : theme.content.main)};
 `;
 
 const InsertLine = styled.div<{ circleVisible?: boolean }>`
@@ -104,7 +103,7 @@ const InsertLine = styled.div<{ circleVisible?: boolean }>`
   top: 50%;
   transform: translateY(-50%);
   height: 2px;
-  background: ${({ theme }) => theme.general.select};
+  background: ${({ theme }) => theme.select.main};
 
   &::before {
     display: ${props => (props.circleVisible ? "block" : "none")};
@@ -114,7 +113,7 @@ const InsertLine = styled.div<{ circleVisible?: boolean }>`
     top: -4px;
     width: 6px;
     height: 6px;
-    border: 2px solid ${({ theme }) => theme.general.select};
+    border: 2px solid ${({ theme }) => theme.select.main};
     border-radius: 50%;
   }
 `;

diff --git a/web/src/beta/components/InsertionButton/index.tsx b/web/src/beta/components/InsertionButton/index.tsx
@@ -38,15 +38,15 @@ const Border = styled.object`
   height: 1px;
   width: 100%;
 
-  background: ${props => props.theme.general.select};
+  background: ${props => props.theme.select.main};
   border-radius: 1px;
 `;
 
 const StyledIcon = styled(Icon)`
-  background: ${props => props.theme.general.select};
+  background: ${props => props.theme.select.main};
   border-radius: 50%;
   padding: 2px;
-  color: ${props => props.theme.general.bg.transparent};
+  color: ${props => props.theme.bg.transparentBlack};
 `;
 
 export default InsertionButton;
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -61,7 +61,7 @@ const Inner = styled.button<{ border?: boolean; isSelected?: boolean }>`
   border-radius: 6px;
   box-sizing: border-box;
   padding: 8px 20px 8px 4px;
-  background: ${({ theme, isSelected }) => (isSelected ? theme.general.select : "inherit")};
+  background: ${({ theme, isSelected }) => (isSelected ? theme.select.main : "inherit")};
   transition: all 0.15s;
 
   ${({ isSelected }) => isSelected && `background-color: #3B3CD0;`}

diff --git a/web/src/beta/components/Loading/index.tsx b/web/src/beta/components/Loading/index.tsx
@@ -27,7 +27,7 @@ const Loading: React.FC<Props> = ({
   const theme = useTheme();
   const loading = (
     <LoadingWrapper className={className} fixed={fixed} overlay={overlay} relative={relative}>
-      <RingLoader size={animationSize ?? 33} color={animationColor ?? theme.general.content.main} />
+      <RingLoader size={animationSize ?? 33} color={animationColor ?? theme.content.main} />
     </LoadingWrapper>
   );
   return portal ? <Portal>{loading}</Portal> : loading;
@@ -43,7 +43,7 @@ const LoadingWrapper = styled.div<{ fixed?: boolean; overlay?: boolean; relative
   position: ${({ fixed, relative }) => (fixed ? "fixed" : relative ? "relative" : "absolute")};
   top: 0;
   left: 0;
-  background: ${({ overlay, theme }) => (overlay ? theme.general.bg.veryStrong : null)};
+  background: ${({ overlay, theme }) => (overlay ? theme.bg[0] : null)};
   opacity: 0.8;
   z-index: ${props => props.theme.zIndexes.loading};
 `;

diff --git a/web/src/beta/components/Modal/ModalFrame/index.tsx b/web/src/beta/components/Modal/ModalFrame/index.tsx
@@ -48,7 +48,7 @@ const Modal: React.FC<Props> = ({ className, size, isVisible, title, onClose, ch
 };
 
 const Bg = styled.div<{ state: TransitionStatus }>`
-  background: ${({ theme }) => theme.general.bg.transparent};
+  background: ${({ theme }) => theme.bg.transparentBlack};
   position: fixed;
   z-index: ${({ theme }) => theme.zIndexes.fullScreenModal};
   left: 0;

diff --git a/web/src/beta/components/Modal/index.tsx b/web/src/beta/components/Modal/index.tsx
@@ -99,15 +99,15 @@ const NavBarWrapper = styled.div`
   flex-direction: column;
   padding: 16px;
   gap: 10px;
-  border-right: 1px solid #525252;
+  border-right: 1px solid ${({ theme }) => theme.bg[3]};
 `;
 
 const Tab = styled.button<{ isSelected?: boolean }>`
   display: flex;
   padding: 4px 8px;
   border-radius: 4px;
-  background: ${({ isSelected }) => (isSelected ? "#393939" : "transparent")};
-  color: ${({ isSelected }) => (isSelected ? "#E0E0E0" : "#393939")};
+  background: ${({ isSelected, theme }) => (isSelected ? theme.bg[2] : "transparent")};
+  color: ${({ isSelected, theme }) => (isSelected ? theme.content.main : theme.bg[2])};
 `;
 
 const ContentWrapper = styled.div`
@@ -128,7 +128,7 @@ const ButtonWrapper = styled.div`
   flex-direction: row;
   align-self: stretch;
   justify-content: flex-end;
-  border-top: 1px solid #525252;
+  border-top: 1px solid ${({ theme }) => theme.bg[3]};
 `;
 
 export default Modal;
diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx
@@ -29,7 +29,7 @@ const Wrapper = styled.div`
   justify-content: center;
   padding-top: 40vh;
   height: 100%;
-  background: ${({ theme }) => theme.general.bg.main};
+  background: ${({ theme }) => theme.bg[2]};
 `;
 
 const IconWrapper = styled.div`