[FE] FIX: black reference token 9가지로 정리 #1714

frontend/src/Cabinet/assets/data/ColorTheme.ts

@@ -12,29 +12,30 @@ const lightValues = css`
   --card-content-bg-color: var(--ref-white);
   --bg-color: var(--ref-white);
   --card-bg-color: var(--ref-gray-100);
-  --color-picker-hash-bg-color: var(--ref-gray-150);
-  --capsule-btn-border-color: var(--ref-gray-150);
-  --map-floor-color: var(--ref-gray-150);
-  --presentation-no-event-past-color: var(--ref-gray-150);
-  --inventory-item-title-border-btm-color: var(--ref-gray-200);
-  --service-man-title-border-btm-color: var(--ref-gray-200);
-  --line-color: var(--ref-gray-300);
-  --light-gray-line-btn-color: var(--ref-gray-300);
+  --color-picker-hash-bg-color: var(--ref-gray-200);
+  --capsule-btn-border-color: var(--ref-gray-200);
+  --map-floor-color: var(--ref-gray-200);
+  --presentation-no-event-past-color: var(--ref-gray-200);
+  --inventory-item-title-border-btm-color: var(--ref-gray-300);
+  --service-man-title-border-btm-color: var(--ref-gray-300);
+  --line-color: var(--ref-gray-400);
+  --light-gray-line-btn-color: var(--ref-gray-400);
   --gray-line-btn-color: var(--ref-gray-500);
-  --coin-log-date-color: var(--ref-gray-600);
   --pie-chart-label-text-color: var(--ref-gray-700);
-  --notion-btn-text-color: var(--ref-gray-850);
+  --notion-btn-text-color: var(--ref-gray-900);
   --normal-text-color: var(--ref-black);
 
   --button-line-color: var(--sys-main-color);
   --capsule-btn-hover-bg-color: var(--ref-transparent-purple-100);
   --presentation-no-event-cur-color: var(--bg-color);
   --color-picker-bg-color: var(--bg-color);
   --extension-card-active-btn-color: var(--sys-main-color);
-  --presentation-card-speaker-name-color: var(--ref-gray-400);
+  --presentation-card-speaker-name-color: var(--ref-gray-500);
+  --presentation-card-sub-title-color: var(--ref-gray-800);
   --table-even-row-bg-color: var(--ref-purple-100);
   --presentation-table-even-row-bg-color: var(--ref-blue-100);
   --presentation-dropdown-select-color: var(--ref-blue-200);
+  --color-picker-hash-color: var(--ref-gray-400);
 
   /* cabinet */
   --mine-color: var(--ref-green-100);
@@ -66,21 +67,20 @@ const darkValues = css`
 
   /* component variable */
   --white-text-with-bg-color: var(--ref-gray-100);
-  --card-content-bg-color: var(--ref-gray-650);
+  --card-content-bg-color: var(--ref-gray-700);
   --bg-color: var(--ref-gray-900);
   --card-bg-color: var(--ref-gray-800);
-  --color-picker-hash-bg-color: var(--ref-gray-650);
+  --color-picker-hash-bg-color: var(--ref-gray-700);
   --capsule-btn-border-color: var(--ref-gray-700);
   --map-floor-color: var(--ref-gray-800);
   --presentation-no-event-past-color: var(--ref-gray-900);
   --inventory-item-title-border-btm-color: var(--ref-gray-500);
   --line-color: var(--ref-gray-500);
   --service-man-title-border-btm-color: var(--ref-gray-700);
   --light-gray-line-btn-color: var(--ref-gray-700);
-  --gray-line-btn-color: var(--ref-gray-300);
-  --coin-log-date-color: var(--ref-gray-300);
-  --pie-chart-label-text-color: var(--ref-gray-200);
-  --notion-btn-text-color: var(--ref-gray-150);
+  --gray-line-btn-color: var(--ref-gray-400);
+  --pie-chart-label-text-color: var(--ref-gray-300);
+  --notion-btn-text-color: var(--ref-gray-200);
   --normal-text-color: var(--ref-gray-100);
 
   --button-line-color: var(--sys-main-color);
@@ -89,9 +89,11 @@ const darkValues = css`
   --color-picker-bg-color: var(--ref-gray-600);
   --extension-card-active-btn-color: var(--gray-line-btn-color);
   --presentation-card-speaker-name-color: var(--ref-gray-400);
+  --presentation-card-sub-title-color: var(--ref-gray-300);
   --table-even-row-bg-color: var(--ref-purple-900);
   --presentation-table-even-row-bg-color: var(--ref-blue-900);
   --presentation-dropdown-select-color: var(--ref-blue-800);
+  --color-picker-hash-color: var(--ref-gray-500);
 
   /* cabinet */
   --mine-color: var(--ref-green-200);

frontend/src/Cabinet/pages/admin/AdminStorePage.tsx

@@ -341,7 +341,7 @@ const CoinCollectTitleWrapperStyled = styled.div`
   }
 
   & > div > span {
-    color: var(--ref-gray-300);
+    color: var(--ref-gray-400);
     height: 20px;
     line-height: 18px;
   }

frontend/src/Presentation/components/Home/PresentationCard.tsx

@@ -125,7 +125,7 @@ const SubTitleStyled = styled.div`
   word-break: break-all;
   line-height: 1.5;
   margin-bottom: 12px;
-  color: var(--gray-line-btn-color);
+  color: var(--presentation-card-sub-title-color);
 `;
 
 const DetailFooterStyled = styled.div`

frontend/src/Presentation/components/Home/PresentationCardMobile.tsx

@@ -180,7 +180,7 @@ const SubTitleStyled = styled.div`
   word-break: break-all;
   line-height: 1.5;
   margin-bottom: 12px;
-  color: var(--gray-line-btn-color);
+  color: var(--presentation-card-sub-title-color);
 `;
 
 const DetailFooterStyled = styled.div`

frontend/src/index.css

@@ -5,16 +5,13 @@
   /* white, gray, black */
   --ref-white: #ffffff;
   --ref-gray-100: #f5f5f5;
-  --ref-gray-150: #eeeeee;
-  --ref-gray-200: #d9d9d9;
-  --ref-gray-300: #bcbcbc;
-  --ref-gray-400: #8c8c8c;
+  --ref-gray-200: #eeeeee;
+  --ref-gray-300: #d9d9d9;
+  --ref-gray-400: #bcbcbc;
   --ref-gray-500: #7b7b7b;
-  --ref-gray-600: #505354;
-  --ref-gray-650: #3d3f40;
+  --ref-gray-600: #525252;
   --ref-gray-700: #3c3c3c;
-  --ref-gray-800: #313233;
-  --ref-gray-850: #262626;
+  --ref-gray-800: #2e2e2e;
   --ref-gray-900: #1f1f1f;
   --ref-black: #181818;
 
@@ -72,10 +69,10 @@
   --ref-black-shadow-400: rgba(0, 0, 0, 0.8);
 
   /* cabinet */
-  --full-color: var(--ref-gray-150);
+  --full-color: var(--ref-gray-200);
   --banned-color: var(--ref-gray-700);
   --broken-color: var(--ref-gray-700);
-  --session-color: var(--ref-gray-150);
+  --session-color: var(--ref-gray-200);
 
   /* custom color */
   --custom-blue-100: var(--ref-blue-300);
@@ -92,7 +89,6 @@
   --custom-green-200: var(--ref-green-400);
 
   /* component variable */
-  --color-picker-hash-color: var(--ref-gray-400);
   --sys-sub-color: var(--ref-purple-300);
   --sys-default-sub-color: var(--ref-purple-300);
   --sys-presentation-sub-color: var(--ref-blue-300);