MDS 컬러 수정사항 반영

.storybook/preview.tsx

@@ -11,7 +11,7 @@ const preview: Preview = {
       values: [
         {
           name: 'dark',
-          value: '#0f1010', // $black100
+          value: '#0f1012', // $gray950
         },
       ],
     },

package.json

@@ -21,8 +21,8 @@
     "@hookform/resolvers": "^2.9.10",
     "@nanostores/react": "^0.7.1",
     "@sentry/nextjs": "^7.51.0",
-    "@sopt-makers/colors": "^1.0.0",
-    "@sopt-makers/playground-common": "^1.2.2",
+    "@sopt-makers/colors": "^2.2.0",
+    "@sopt-makers/playground-common": "^1.3.2",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^4.10.3",
     "axios": "^1.1.3",

pages/detail/index.tsx

@@ -98,10 +98,10 @@ const STabButton = styled('button', {
   pb: '$24',
   mr: '$32',
   fontStyle: 'H1',
-  color: '$gray100',
+  color: '$gray500',
 
   '&:hover': {
-    color: '$white100',
+    color: '$gray10',
   },
 
   '@tablet': {
@@ -115,14 +115,14 @@ const STabButton = styled('button', {
   variants: {
     isSelected: {
       true: {
-        color: '$white100',
-        borderBottom: `4px solid $white100`,
+        color: '$gray10',
+        borderBottom: `4px solid $gray10`,
         '@tablet': {
           borderWidth: '2px',
         },
       },
       false: {
-        color: '$gray100',
+        color: '$gray500',
         paddingBottom: '$28',
         '@tablet': {
           paddingBottom: '$18',

pages/edit/index.tsx

@@ -152,23 +152,23 @@ const SContainer = styled('div', {
 const SFormContainer = styled('div', {
   width: '100%',
   padding: '44px 40px 56px',
-  background: '$black80',
+  background: '$gray800',
   borderRadius: '15px',
 
   '@tablet': {
     padding: '40px 0 0 0',
-    background: '$black100',
+    background: '$gray950',
   },
 });
 const SFormName = styled('h1', {
   fontAg: '24_bold_100',
-  color: '$white100',
+  color: '$gray10',
   marginBottom: '90px',
 
   '@tablet': {
     margin: 0,
     paddingBottom: '40px',
-    borderBottom: '1px solid $black60',
+    borderBottom: '1px solid $gray700',
   },
 });
 const SFormWrapper = styled('div', {

pages/index.tsx

@@ -103,12 +103,12 @@ export default Home;
 const SMakeMeetingButton = styled('button', {
   flexType: 'verticalCenter',
   padding: '$16 $24 $16 $20',
-  background: '$white100',
+  background: '$gray10',
   borderRadius: '16px',
   '& > span': {
     ml: '$12',
     fontAg: '18_bold_100',
-    color: '$black100',
+    color: '$gray950',
   },
   '@tablet': {
     display: 'none',

pages/make/index.tsx

@@ -91,23 +91,23 @@ const SContainer = styled('div', {
 const SFormContainer = styled('div', {
   width: '100%',
   padding: '44px 40px 56px',
-  background: '$black80',
+  background: '$gray800',
   borderRadius: '15px',
 
   '@tablet': {
     padding: '40px 0 0 0',
-    background: '$black100',
+    background: '$gray950',
   },
 });
 const SFormName = styled('h1', {
   fontAg: '24_bold_100',
-  color: '$white100',
+  color: '$gray10',
   marginBottom: '90px',
 
   '@tablet': {
     margin: 0,
     paddingBottom: '40px',
-    borderBottom: '1px solid $black60',
+    borderBottom: '1px solid $gray700',
   },
 });
 const SFormWrapper = styled('div', {

pages/mine/index.tsx

@@ -112,10 +112,10 @@ const STab = styled('button', {
   variants: {
     isSelected: {
       true: {
-        color: '$white100',
-        backgroundColor: '$black40',
+        color: '$gray10',
+        backgroundColor: '$gray600',
       },
-      false: { color: '$gray100' },
+      false: { color: '$gray500' },
     },
   },
   '@tablet': {

pages/mine/management/index.tsx

@@ -199,9 +199,9 @@ const SListTitle = styled('div', {
 });
 
 const SDownloadButton = styled('button', {
-  color: '$white100',
+  color: '$gray10',
   fontAg: '18_bold_100',
-  border: '1px solid $white100',
+  border: '1px solid $gray10',
   borderRadius: '14px',
   padding: '$18 $24 $18 $20',
   flexType: 'verticalCenter',
@@ -242,8 +242,8 @@ const SSelectContainer = styled('div', {
 const SSelectWrapper = styled('div', {
   '& button': {
     borderRadius: '14px',
-    border: '1px solid $black40',
-    backgroundColor: '$black100',
+    border: '1px solid $gray600',
+    backgroundColor: '$gray950',
 
     '@tablet': {
       borderRadius: '8px',
@@ -255,14 +255,14 @@ const SSelectWrapper = styled('div', {
   },
 
   '& ul': {
-    background: '$black100',
+    background: '$gray950',
     position: 'absolute',
     top: '$50',
     minWidth: '$147',
   },
 
   '& div': {
-    background: '$black100',
+    background: '$gray950',
   },
 
   '& + &': {
@@ -280,9 +280,9 @@ const SEmptyView = styled('div', {
   flexType: 'center',
   height: '$820',
   borderRadius: '10px',
-  border: `1px solid $black40`,
+  border: `1px solid $gray600`,
   fontAg: '24_medium_100',
-  color: '$gray80',
+  color: '$gray400',
 
   '@tablet': {
     fontAg: '16_medium_100',

src/components/button/Arrow.tsx

@@ -24,7 +24,7 @@ export const ArrowButton = ({
   disabled = false,
   size = 16,
   color = '#fff',
-  disabledColor = '$black40',
+  disabledColor = '$gray600',
   strokeWidth = 2,
   ...props
 }: ArrowButtonProps) => {

src/components/button/Switch.tsx

@@ -27,13 +27,13 @@ const SSwitch = styled('button', {
   width: '28px',
   height: '16px',
   border: 'none',
-  backgroundColor: '$gray100',
+  backgroundColor: '$gray500',
   borderRadius: '20px',
   cursor: 'pointer',
   variants: {
     checked: {
       true: {
-        backgroundColor: '$blue50',
+        backgroundColor: '$success',
         '& > div': {
           transform: 'translate3d(12px,0,0)',
         },
@@ -49,6 +49,6 @@ const SThumb = styled('div', {
   width: '12px',
   height: '12px',
   borderRadius: '50%',
-  backgroundColor: '$white100',
+  backgroundColor: '$gray10',
   transition: 'transform 0.3s',
 });

src/components/disclosure/Disclosure.tsx

@@ -42,7 +42,7 @@ export default function Disclosure({ title, subTitle, contents, createdDate }: D
 
 const Container = styled('div', {
   padding: '48px',
-  background: '$black80',
+  background: '$gray800',
   borderRadius: '20px',
   '@mobile': {
     padding: '24px 16px',
@@ -67,7 +67,7 @@ const STitle = styled('h1', {
 });
 const SSubTitle = styled('h4', {
   fontStyle: 'T4',
-  color: 'gray60',
+  color: 'gray300',
   '@mobile': {
     fontStyle: 'B4',
   },
@@ -91,15 +91,15 @@ const SArrowIcon = styled(ArrowIcon, {
 const SDivider = styled('div', {
   height: '1px',
   margin: '36px 0 32px 0',
-  background: '$black40',
+  background: '$gray600',
   '@mobile': {
     margin: '20px 0',
   },
 });
 const SContents = styled('div', {
   padding: '0 4px',
   fontStyle: 'B2',
-  color: '$gray30',
+  color: '$gray100',
   whiteSpace: 'pre-line',
   '@mobile': {
     fontStyle: 'B4',
@@ -113,14 +113,14 @@ const SInfo = styled(Flex, {
 });
 const SCreatedAt = styled('span', {
   fontStyle: 'T6',
-  color: '$gray100',
+  color: '$gray500',
   '@mobile': {
     fontStyle: 'C1',
   },
 });
 const SDate = styled('span', {
   fontStyle: 'B4',
-  color: '$gray60',
+  color: '$gray300',
   '@mobile': {
     fontStyle: 'C1',
   },

src/components/feed/FeedActionButton/FeedActionButton.tsx

@@ -19,10 +19,10 @@ const MenuItem = styled('button', {
   flexType: 'center',
   width: '147px',
   padding: '8px 16px',
-  color: '$white100',
-  background: '$black80',
+  color: '$gray10',
+  background: '$gray800',
   fontStyle: 'B3',
-  border: '1px solid $black40',
+  border: '1px solid $gray600',
   '&:first-child': {
     borderRadius: '14px 14px 0 0',
     borderBottom: 'none',

src/components/feed/FeedCommentEditor/FeedCommentEditor.tsx

@@ -31,10 +31,10 @@ const EditorContainer = styled('div', {
   flexDirection: 'column',
   borderRadius: '8px',
   border: `1px solid $white`,
-  background: '$black100',
+  background: '$gray950',
 });
 const Editor = styled('textarea', {
-  color: '$gray40',
+  color: '$gray200',
   fontStyle: 'B2',
   background: 'transparent',
   border: 'none',
@@ -51,15 +51,15 @@ const CancelButton = styled('button', {
   padding: '4px 12px',
   flexType: 'center',
   borderRadius: '8px',
-  background: '$black60',
-  color: '$white100',
+  background: '$gray700',
+  color: '$gray10',
   fontStyle: 'T5',
 });
 const SubmitButton = styled('button', {
   padding: '4px 12px',
   flexType: 'center',
-  background: '$white100',
+  background: '$gray10',
   borderRadius: '8px',
-  color: '$black100',
+  color: '$gray950',
   fontStyle: 'T5',
 });

src/components/feed/FeedCommentInput/FeedCommentInput.tsx

@@ -47,14 +47,14 @@ const CommentInput = styled('textarea', {
   maxHeight: '120px',
   padding: '14px 24px',
   borderRadius: '25px',
-  background: '$black60',
-  color: '$white100',
+  background: '$gray700',
+  color: '$gray10',
   fontStyle: 'B2',
   border: 'none',
   outline: 'none',
   resize: 'none',
   '&::placeholder': {
-    color: '$gray60',
+    color: '$gray300',
   },
   '@tablet': {
     height: '48px',

src/components/feed/FeedCommentLikeSection/FeedCommentLikeSection.tsx

@@ -32,15 +32,15 @@ export default function FeedCommentLikeSection({
 }
 
 const Divider = styled('div', {
-  background: '$black60',
+  background: '$gray700',
   width: '1px',
   height: '24px',
 });
 const CommentWrapper = styled('div', {
   width: '400px',
   display: 'flex',
   flexType: 'center',
-  color: '$gray80',
+  color: '$gray400',
   fontStyle: 'T5',
   '@tablet': {
     width: '50%',

src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx

@@ -83,13 +83,13 @@ const AuthorWrapper = styled('a', {
 const Name = styled('span', {
   display: 'inline-block',
   marginLeft: '8px',
-  color: '$gray30',
+  color: '$gray100',
   fontStyle: 'T5',
 });
 const Date = styled('span', {
   display: 'inline-block',
   marginLeft: '4px',
-  color: '$gray100',
+  color: '$gray500',
   fontStyle: 'T6',
 });
 const MenuItems = styled(Menu.Items, {
@@ -105,7 +105,7 @@ const CommentBody = styled('div', {
   gap: '8px',
 });
 const CommentContents = styled('div', {
-  color: '$gray30',
+  color: '$gray100',
   fontStyle: 'B2',
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-all',
@@ -123,9 +123,9 @@ const LikeWrapper = styled('div', {
 const LikeIconWrapper = styled('div', {
   width: '20px',
   height: '20px',
-  color: '$gray60',
+  color: '$gray300',
 });
 const LikeCount = styled('span', {
-  color: '$gray60',
+  color: '$gray300',
   fontStyle: 'B4',
 });