feat: mds color version 2.2.0 update 대응

.storybook/preview.tsx

@@ -28,11 +28,11 @@ export const parameters = {
   },
   backgrounds: {
     default: 'darker',
-    dark: { name: 'darker', value: colors.black100 },
+    dark: { name: 'darker', value: colors.gray900 },
   },
   darkMode: {
     current: 'dark',
-    dark: { ...themes.dark, appBg: colors.black80 },
+    dark: { ...themes.dark, appBg: colors.gray800 },
     light: { ...themes.normal, appBg: '#fff' },
   },
   nextRouter: {

package.json

@@ -40,7 +40,7 @@
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
-    "@sopt-makers/colors": "^1.0.0",
+    "@sopt-makers/colors": "^2.2.0",
     "@tanstack/react-query": "^4.27.0",
     "await-to-js": "^3.0.0",
     "axios": "^0.27.2",

src/components/auth/identityProvider/apple/AppleAuthButton.tsx

@@ -32,7 +32,7 @@ const StyledAppleAuthButton = styled.button`
   background-color: ${colors.white};
   cursor: pointer;
   height: 48px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M}
 

src/components/auth/identityProvider/facebook/FacebookButton.tsx

@@ -38,7 +38,7 @@ const StyledFacebookButton = styled.button`
   background-color: #1877f2;
   cursor: pointer;
   height: 48px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 

src/components/auth/identityProvider/google/GoogleAuthButton.tsx

@@ -34,7 +34,7 @@ const StyledGoogleAuthButton = styled(SquareLink)`
   background-color: ${colors.white};
   cursor: pointer;
   height: 48px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M}
 

src/components/auth/register/Stepper.tsx

@@ -99,13 +99,13 @@ const Stepper: FC<StepperProps> = ({ step, className }) => {
             variants={{
               future: {
                 scale: 1,
-                backgroundColor: colors.black40,
-                color: colors.gray100,
+                backgroundColor: colors.gray600,
+                color: colors.gray500,
               },
               current: {
                 scale: [1, 1, 1.2, 1],
-                backgroundColor: [colors.black40, colors.black40, colors.blue50, colors.blue50],
-                color: [colors.gray100, colors.gray100, colors.white100, colors.white100],
+                backgroundColor: [colors.gray600, colors.gray600, colors.success, colors.success],
+                color: [colors.gray500, colors.gray500, colors.gray10, colors.gray10],
                 transition: {
                   times: [0, 0.7, 0.9, 1],
                   duration: 2,
@@ -119,10 +119,10 @@ const Stepper: FC<StepperProps> = ({ step, className }) => {
             isActive={step >= 2}
             variants={{
               future: {
-                color: colors.gray100,
+                color: colors.gray500,
               },
               current: {
-                color: [colors.gray100, colors.gray100, colors.white100],
+                color: [colors.gray500, colors.gray500, colors.gray10],
                 transition: {
                   times: [0, 0.7, 1],
                   duration: 2,
@@ -156,7 +156,7 @@ const LineArea = styled.div`
 const Line = styled(m.div)`
   position: relative;
   margin: 13px 35px 0;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   height: 2px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -167,7 +167,7 @@ const Line = styled(m.div)`
 const LineFilled = styled(m.div)`
   position: absolute;
   left: 0;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 50%;
   height: 100%;
 `;
@@ -202,7 +202,7 @@ const Circle = styled(m.div)`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 28px;
   height: 28px;
   white-space: nowrap;

src/components/auth/register/verify/HelpCard.tsx

@@ -35,12 +35,12 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
   gap: 10px;
   transition: background-color 0.3s, box-shadow 0.3s;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 19px 15px 18px;
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -68,7 +68,7 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
 const Content = styled.div`
   line-height: 140%;
   white-space: pre-line;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M}
 `;

src/components/auth/register/verify/VerifyFrame.tsx

@@ -56,7 +56,7 @@ const Title = styled.h2`
 const Description = styled.p`
   margin-top: 12px;
   text-align: center;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M}
 

src/components/auth/register/verify/VerifySubmitButton.tsx

@@ -23,14 +23,14 @@ const VerifySubmitButton = styled.button`
   ${(props) =>
     props.disabled
       ? css`
-          background-color: ${colors.black80};
+          background-color: ${colors.gray800};
           cursor: default;
-          color: ${colors.gray60};
+          color: ${colors.gray300};
         `
       : css`
-          background-color: ${colors.white100};
+          background-color: ${colors.gray10};
           cursor: pointer;
-          color: ${colors.black100};
+          color: ${colors.gray900};
         `}
 `;
 export default VerifySubmitButton;

src/components/auth/register/verify/view/ByPhoneView.tsx

@@ -136,7 +136,7 @@ const StyledByEmail = styled.div`
 const Label = styled.label`
   display: block;
   margin-bottom: 18px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_16_M};
 

src/components/common/Banner/AppJamBanner/AppJamBanner.tsx

@@ -59,7 +59,7 @@ const StyledBanner = styled.div`
   position: relative;
   align-items: center;
   justify-content: center;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 20px 0;
   width: 100%;
   height: 96px;

src/components/common/Banner/RecruitingBanner/index.tsx

@@ -112,7 +112,7 @@ const Logo = styled(MakersLogoWhite)`
 const Arrow = styled.div`
   display: none;
   grid-area: arrow;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_20_B}
 

src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx

@@ -84,7 +84,7 @@ const ContentArea = styled.div`
 
 const Title = styled.div`
   grid-area: title;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_26_B}
 
@@ -95,7 +95,7 @@ const Title = styled.div`
 
 const SubTitle = styled.div`
   grid-area: subtitle;
-  color: ${colors.black80};
+  color: ${colors.gray800};
 
   ${textStyles.SUIT_16_M};
 
@@ -119,7 +119,7 @@ const Logo = styled(MakersLogoDark)`
 const Arrow = styled.div`
   display: none;
   grid-area: arrow;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_20_B}
 

src/components/common/Banner/WelcomeBanner/index.tsx

@@ -65,13 +65,13 @@ const ContentWrapper = styled.div`
 
 const Title = styled.div`
   margin-top: 8px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_18_B};
 `;
 
 const SubTitle = styled.div`
   margin-top: 4px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   ${textStyles.SUIT_12_M};
 `;
 

src/components/common/Button/style.ts

@@ -7,15 +7,15 @@ export type ButtonSize = 'fill' | 'small' | 'medium' | 'large';
 export const buttonStyles: Record<ButtonStyle, SerializedStyles> = {
   default: css`
     background-color: #212121;
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   `,
   primary: css`
-    background-color: ${colors.white100};
-    color: ${colors.black100};
+    background-color: ${colors.gray10};
+    color: ${colors.gray900};
   `,
   danger: css`
-    background-color: ${colors.red100};
-    color: ${colors.gray40};
+    background-color: ${colors.error};
+    color: ${colors.gray200};
   `,
 };
 

src/components/common/Carousel/index.tsx

@@ -98,12 +98,12 @@ const Container = styled.div`
 const Control = styled.button`
   align-self: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 40px;
   height: 40px;
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 `;
 
@@ -130,7 +130,7 @@ const Indicators = styled.div`
 
 const Indicator = styled.div<{ isActive?: boolean }>`
   border-radius: 50%;
-  background-color: ${({ isActive }) => (isActive ? colors.white100 : colors.black40)};
+  background-color: ${({ isActive }) => (isActive ? colors.gray10 : colors.gray600)};
   cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')};
   width: 8px;
   height: 8px;

src/components/common/Checkbox/index.tsx

@@ -40,22 +40,22 @@ const StyledCheckbox = styled.span<CheckboxProps>`
   align-items: center;
   justify-content: center;
   transition: 0.2s background-color;
-  border: 1px solid ${colors.gray100};
+  border: 1px solid ${colors.gray500};
   border-radius: 4px;
   background-color: transparent;
   width: 22.5px;
   height: 22.5px;
   ${({ checked }) =>
     checked &&
     css`
-      border: 1px solid ${colors.blue40};
-      background-color: ${colors.blue50};
+      border: 1px solid ${colors.blue300};
+      background-color: ${colors.success};
     `}
 
   & > svg {
     width: 14px;
     height: 9px;
-    color: ${colors.white100};
+    color: ${colors.gray10};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {

src/components/common/Divider/Divider.tsx

@@ -6,7 +6,7 @@ interface DividerProps {
   className?: string;
   color?: string;
 }
-const Divider: FC<DividerProps> = ({ color = colors.black60, className }) => {
+const Divider: FC<DividerProps> = ({ color = colors.gray700, className }) => {
   return <StyledDivider className={className} color={color} />;
 };
 

src/components/common/EditableSelect.tsx

@@ -77,7 +77,7 @@ const StyledInput = styled.input`
   padding: 11.5px;
   width: calc(100% - 40px);
   height: 100%;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_16_M}
 

src/components/common/Footer/index.tsx

@@ -44,8 +44,8 @@ const StyledFooter = styled.div<{ hide: boolean }>`
   bottom: 0;
   transition: transform 0.3s;
   z-index: 99999;
-  border-top: 1px solid ${colors.black40};
-  background-color: ${colors.black80};
+  border-top: 1px solid ${colors.gray600};
+  background-color: ${colors.gray800};
   padding: 0 0 0 38px;
   width: 100%;
 
@@ -70,6 +70,6 @@ const FooterLink = styled.a<{ highlight?: boolean }>`
           color: ${colors.white};
         `
       : css`
-          color: ${colors.gray40};
+          color: ${colors.gray200};
         `}
 `;

src/components/common/Header/SwitchableHeader.tsx

@@ -36,7 +36,7 @@ const NotLoggedInHeader = styled.div`
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin: 0;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     height: 60px;
   }
 `;

src/components/common/Header/desktop/DesktopHeader.tsx

@@ -66,9 +66,9 @@ export default DesktopHeader;
 
 const Container = styled.header`
   display: flex;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   height: 80px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const StyledBrandLink = styled.div`
@@ -95,7 +95,7 @@ const NavItem = styled.div<{ isActive: boolean }>`
   align-items: center;
   padding: 0 8px;
   height: 100%;
-  color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)};
+  color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)};
 
   ${(props) =>
     props.isActive

src/components/common/Header/desktop/ProfileButton.tsx

@@ -30,10 +30,10 @@ const StyledProfileButton = styled.button`
   display: flex;
   align-items: center;
   border-radius: 19px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: pointer;
   height: 38px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const ImageSlot = styled.div`
@@ -42,7 +42,7 @@ const ImageSlot = styled.div`
   justify-content: center;
   margin-left: 3px;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 32px;
   height: 32px;
   overflow: hidden;