refactor: change color variables name

wanted-fork-fork · Nov 10, 2024 · 9a4587c · 9a4587c
1 parent d5c1b10
commit 9a4587c
Show file tree

Hide file tree

Showing 40 changed files with 96 additions and 96 deletions.
diff --git a/src/entities/profile/ui/ProfileCard/ProfileCard.module.css b/src/entities/profile/ui/ProfileCard/ProfileCard.module.css
@@ -1,6 +1,6 @@
 .Container {
     position: relative;
-    background: var(--color-neutral-10);
+    background: var(--color-neutral-100);
     border-radius: 24px;
     padding: 16px;
     display: flex;
@@ -71,15 +71,15 @@
 }
 
 .DetailTable th {
-    color: var(--color-neutral-70);
+    color: var(--color-neutral-700);
     font-weight: 600;
     font-size: 14px;
     line-height: 14px;
     width: 42px;
 }
 
 .DetailTable td {
-    color: var(--color-neutral-80);
+    color: var(--color-neutral-800);
     font-weight: 500;
     font-size: 14px;
     line-height: 14px;

diff --git a/src/features/ProfileShare/ProfileShareBottomSheet.module.css b/src/features/ProfileShare/ProfileShareBottomSheet.module.css
@@ -16,7 +16,7 @@
   font-weight: 600;
   line-height: 14px;
   text-align: left;
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-500);
 }
 
 .ButtonWrapper {

diff --git a/src/pages/form/confirm/FormConfirmPage.module.css b/src/pages/form/confirm/FormConfirmPage.module.css
@@ -21,7 +21,7 @@
 
     & small {
         font-size: 14px;
-        color: var(--color-neutral-50);
+        color: var(--color-neutral-500);
     }
 }
 

diff --git a/src/pages/form/ideal_partner/IdealPartnerPage.module.css b/src/pages/form/ideal_partner/IdealPartnerPage.module.css
@@ -13,7 +13,7 @@
 .FormCount {
   font-weight: 500;
   font-size: 16px;
-  color: var(--color-neutral-40);
+  color: var(--color-neutral-400);
 }
 
 .Description {
@@ -22,7 +22,7 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 24px;
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-500);
 
   & strong {
     font-size: 14px;

diff --git a/src/pages/form/intro/ProfileFormIntroPage.module.css b/src/pages/form/intro/ProfileFormIntroPage.module.css
@@ -29,7 +29,7 @@
   & a {
     font-weight: 500;
     font-size: 16px;
-    color: var(--color-neutral-50);
+    color: var(--color-neutral-500);
     text-decoration: none;
   }
 

diff --git a/src/pages/form/my_profile/MyProfilePage.module.css b/src/pages/form/my_profile/MyProfilePage.module.css
@@ -11,7 +11,7 @@
 .FormCount {
   font-weight: 500;
   font-size: 16px;
-  color: var(--color-neutral-40);
+  color: var(--color-neutral-400);
 }
 
 .Description {
@@ -20,7 +20,7 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 21px;
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-500);
 
   & strong {
     font-size: 14px;

diff --git a/src/pages/layout/WideDeviceLayout.module.css b/src/pages/layout/WideDeviceLayout.module.css
@@ -2,7 +2,7 @@
   position: relative;
   width: 100dvw;
   height: 100dvh;
-  background-color: var(--color-neutral-10);
+  background-color: var(--color-neutral-100);
   display: grid;
   grid-template-columns: 1fr minmax(auto, 480px) 1fr;
 }

diff --git a/src/pages/main/onboarding/OnboardingPage.module.css b/src/pages/main/onboarding/OnboardingPage.module.css
@@ -48,7 +48,7 @@
         width: 10px;
         height: 10px;
         border-radius: 50%;
-        background-color: var(--color-neutral-30);
+        background-color: var(--color-neutral-300);
     }
 
     & li[data-selected=true]:before {

diff --git a/src/pages/mypage/MyPage.module.css b/src/pages/mypage/MyPage.module.css
@@ -43,7 +43,7 @@
 .Logout {
     font-weight: 600;
     font-size: 14px;
-    color: var(--color-neutral-70);
+    color: var(--color-neutral-700);
 
     margin-top: 32px;
     margin-left: 20px;

diff --git a/src/pages/profile/ProfilePage.module.css b/src/pages/profile/ProfilePage.module.css
@@ -23,7 +23,7 @@
 }
 
 .DeleteButton {
-    color: var(--color-neutral-60) !important;
+    color: var(--color-neutral-600) !important;
 }
 
 .DeleteModal {
@@ -58,7 +58,7 @@
 
 .ImageLayout {
     width: 100%;
-    background-color: var(--color-neutral-10);
+    background-color: var(--color-neutral-100);
 
     display: grid;
     overflow: hidden;

diff --git a/src/pages/shared_profile/components/ExpiredDateTimer.module.css b/src/pages/shared_profile/components/ExpiredDateTimer.module.css
@@ -1,6 +1,6 @@
 .Box {
   padding: 15px 20px;
-  background-color: var(--color-neutral-70);
+  background-color: var(--color-neutral-700);
 
   display: flex;
   justify-content: space-between;
@@ -35,7 +35,7 @@
   transform: translateX(-50%);
   width: max-content;
 
-  background-color: var(--color-neutral-70);
+  background-color: var(--color-neutral-700);
   border-radius: 48px;
 
   display: flex;

diff --git a/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.module.css b/src/processes/ideal_partner/HeightStyleForm/HeightStyleForm.module.css
@@ -25,5 +25,5 @@
 .PictureLabelDescription {
   font-weight: 500;
   font-size: 14px;
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-500);
 }
diff --git a/src/processes/ideal_partner/LocationForm/LocationForm.module.css b/src/processes/ideal_partner/LocationForm/LocationForm.module.css
@@ -24,7 +24,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
 
-    border: 2px solid var(--color-neutral-30);
+    border: 2px solid var(--color-neutral-300);
     border-left: none;
     border-right: none;
 

diff --git a/src/processes/my_profile/LocationForm/LocationForm.module.css b/src/processes/my_profile/LocationForm/LocationForm.module.css
@@ -24,7 +24,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
 
-    border: 2px solid var(--color-neutral-30);
+    border: 2px solid var(--color-neutral-300);
     border-left: none;
     border-right: none;
 

diff --git a/src/processes/my_profile/MbtiForm/MbtiForm.module.css b/src/processes/my_profile/MbtiForm/MbtiForm.module.css
@@ -10,7 +10,7 @@
 }
 
 .MbtiResult {
-    border-bottom: 1px solid var(--color-neutral-80);
+    border-bottom: 1px solid var(--color-neutral-800);
     padding: 8px;
     font-weight: 500;
     font-size: 16px;
@@ -22,7 +22,7 @@
             content: '.';
             color: transparent;
         }
-        border-color: var(--color-neutral-30);
+        border-color: var(--color-neutral-300);
     }
 }
 
@@ -48,7 +48,7 @@
     font-weight: 600;
     font-size: 24px;
     line-height: 24px;
-    color: var(--color-neutral-30);
+    color: var(--color-neutral-300);
 
     cursor: pointer;
 

diff --git a/src/processes/my_profile/PersonalInfoForm/PersonalInfoForm.module.css b/src/processes/my_profile/PersonalInfoForm/PersonalInfoForm.module.css
@@ -14,7 +14,7 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 21px;
-  color: var(--color-neutral-50);
+  color: var(--color-neutral-500);
 
   & strong {
     font-size: 14px;

diff --git a/src/processes/my_profile/QuestionForm/FormContent.module.css b/src/processes/my_profile/QuestionForm/FormContent.module.css
@@ -6,7 +6,7 @@
     padding-bottom: 30px;
 
     & label > span {
-        color: var(--color-neutral-90);
+        color: var(--color-neutral-900);
         display: block;
         margin-bottom: 8px;
     }
@@ -18,7 +18,7 @@
     gap: 8px;
 
     & small {
-        color: var(--color-neutral-50);
+        color: var(--color-neutral-500);
         font-size: 14px;
     }
 }

diff --git a/src/processes/shortcut/Shortcut.module.css b/src/processes/shortcut/Shortcut.module.css
@@ -4,7 +4,7 @@
     height: 48px;
     width: 48px;
     border-radius: 50%;
-    background-color: var(--color-neutral-20);
+    background-color: var(--color-neutral-200);
 
     position: absolute;
     right: 20px;
@@ -50,7 +50,7 @@
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 6px;
-    color: var(--color-neutral-60);
+    color: var(--color-neutral-600);
 }
 
 .MenuSection {
@@ -79,7 +79,7 @@
     font-weight: 500;
     font-size: 14px;
     line-height: 24px;
-    color: var(--color-neutral-50);
+    color: var(--color-neutral-500);
 
     & strong {
         font-size: 14px;

diff --git a/src/shared/styles/typography.css b/src/shared/styles/typography.css
@@ -2,43 +2,43 @@ h2 {
     font-size: 20px;
     font-weight: 600;
     text-align: left;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     line-height: 30px;
 }
 
 h3 {
     font-size: 14px;
     font-weight: 600;
     text-align: left;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     line-height: 21px;
 }
 
 label {
     font-size: 14px;
     font-weight: 600;
     text-align: left;
-    color: var(--color-neutral-60);
+    color: var(--color-neutral-600);
     line-height: 14px;
 }
 
 label.strong {
     font-size: 16px;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     line-height: 16px;
 }
 
 legend {
     font-size: 14px;
     font-weight: 600;
     text-align: left;
-    color: var(--color-neutral-40);
+    color: var(--color-neutral-400);
     line-height: 14px;
 }
 
 legend.strong {
     font-size: 16px;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     line-height: 16px;
 }
 
@@ -59,22 +59,22 @@ ul {
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     list-style-position: outside;
     padding-left:  20px;
 }
 
 p {
     font-size: 16px;
     font-weight: 500;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
     line-height: 24px;
 
     &.label {
         font-size: 14px;
         font-weight: 600;
         text-align: left;
-        color: var(--color-neutral-60);
+        color: var(--color-neutral-600);
         line-height: 14px;
     }
 }

diff --git a/src/shared/styles/variables.css b/src/shared/styles/variables.css
@@ -2,15 +2,15 @@
     --color-primary: #d752ff;
     --color-positive: #3bb5a3;
     --color-negative: #f35b5b;
-    --color-neutral-90: #121113;
-    --color-neutral-80: #333036;
-    --color-neutral-70: #534e55;
-    --color-neutral-60: #726d74;
-    --color-neutral-50: #918b92;
-    --color-neutral-40: #afaab1;
-    --color-neutral-30: #cdcace;
-    --color-neutral-20: #ebeaeb;
-    --color-neutral-10: #f5f5f5;
+    --color-neutral-900: #121113;
+    --color-neutral-800: #333036;
+    --color-neutral-700: #534e55;
+    --color-neutral-600: #726d74;
+    --color-neutral-500: #918b92;
+    --color-neutral-400: #afaab1;
+    --color-neutral-300: #cdcace;
+    --color-neutral-200: #ebeaeb;
+    --color-neutral-100: #f5f5f5;
     --color-neutral-0: #fff;
 
     --z-index-bottomsheet: 10;

diff --git a/src/shared/ui/Accordion/Accordion.module.css b/src/shared/ui/Accordion/Accordion.module.css
@@ -2,7 +2,7 @@
     font-size: 16px;
     font-weight: 600;
     line-height: 0;
-    color: var(--color-neutral-90);
+    color: var(--color-neutral-900);
 
     width: 100%;
 

diff --git a/src/shared/ui/Avatar/Avatar.module.css b/src/shared/ui/Avatar/Avatar.module.css
@@ -10,7 +10,7 @@
     position: relative;
     overflow: hidden;
     border-radius: 16px;
-    background-color: var(--color-neutral-10);
+    background-color: var(--color-neutral-100);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -29,7 +29,7 @@
                 rgba(255, 255, 255, 0) 40%,
                 rgba(255, 255, 255, .5) 50%,
                 rgba(255, 255, 255, 0) 60%
-        ) var(--color-neutral-10);
+        ) var(--color-neutral-100);
         background-size: 200% 100%;
         background-position-x: 180%;
         animation: 1s shine ease-in-out infinite;