[FE] ETC: blue reference token 명도차이에 따라 숫자 재배치 #1714

innovationacademy-kr · Nov 28, 2024 · 253e1f2 · 253e1f2
1 parent 52ac19a
commit 253e1f2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/frontend/src/Cabinet/assets/data/ColorTheme.ts b/frontend/src/Cabinet/assets/data/ColorTheme.ts
@@ -5,7 +5,7 @@ const lightValues = css`
   --sys-main-color: var(--ref-purple-500);
   --sys-default-main-color: var(--ref-purple-500);
   --sys-default-mine-color: var(--ref-green-100);
-  --sys-presentation-main-color: var(--ref-blue-400);
+  --sys-presentation-main-color: var(--ref-blue-650);
 
   /* component variable */
   --white-text-with-bg-color: var(--ref-white);
@@ -34,7 +34,7 @@ const lightValues = css`
   --presentation-card-speaker-name-color: var(--ref-gray-450);
   --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-150);
+  --presentation-dropdown-select-color: var(--ref-blue-200);
 
   /* cabinet */
   --mine-color: var(--ref-green-100);
@@ -62,7 +62,7 @@ const darkValues = css`
   --sys-main-color: var(--ref-purple-600);
   --sys-default-main-color: var(--ref-purple-600);
   --sys-default-mine-color: var(--ref-green-200);
-  --sys-presentation-main-color: var(--ref-blue-430);
+  --sys-presentation-main-color: var(--ref-blue-700);
 
   /* component variable */
   --white-text-with-bg-color: var(--ref-gray-100);
@@ -90,8 +90,8 @@ const darkValues = css`
   --extension-card-active-btn-color: var(--gray-line-btn-color);
   --presentation-card-speaker-name-color: var(--ref-gray-450);
   --table-even-row-bg-color: var(--ref-purple-900);
-  --presentation-table-even-row-bg-color: var(--ref-blue-500);
-  --presentation-dropdown-select-color: var(--ref-blue-470);
+  --presentation-table-even-row-bg-color: var(--ref-blue-900);
+  --presentation-dropdown-select-color: var(--ref-blue-850);
 
   /* cabinet */
   --mine-color: var(--ref-green-200);

diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts
@@ -52,7 +52,7 @@ export const manualContentData: Record<ContentStatus, ContentStatusData> = {
     contentTitle: "공유 사물함",
     iconComponent: ShareIcon,
     background:
-      "linear-gradient(to bottom, var(--ref-blue-200), var(--ref-blue-300))",
+      "linear-gradient(to bottom, var(--ref-blue-300), var(--ref-blue-600))",
     rentalPeriod: `${import.meta.env.VITE_SHARE_LENT_PERIOD}일 + n * ${
       import.meta.env.VITE_SHARE_BONUS_PER_PERSON
     }`,

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -37,18 +37,18 @@
 
   /* blue */
   --ref-blue-100: #f5f7ff;
-  --ref-blue-150: #dce7fd;
-  --ref-blue-160: #91b5fa;
-  --ref-blue-200: #7ebffb;
-  --ref-blue-210: #74b9ff;
-  --ref-blue-230: #0984e3;
-  --ref-blue-250: #5278fd;
-  --ref-blue-300: #406ee4;
-  --ref-blue-400: #3f69fd;
-  --ref-blue-430: #2c5afd;
-  --ref-blue-450: #0d4c92;
-  --ref-blue-470: #26447e;
-  --ref-blue-500: #252526;
+  --ref-blue-200: #dce7fd;
+  --ref-blue-250: #91b5fa;
+  --ref-blue-300: #7ebffb;
+  --ref-blue-350: #74b9ff;
+  --ref-blue-400: #0984e3;
+  --ref-blue-500: #5278fd;
+  --ref-blue-600: #406ee4;
+  --ref-blue-650: #3f69fd;
+  --ref-blue-700: #2c5afd;
+  --ref-blue-800: #0d4c92;
+  --ref-blue-850: #26447e;
+  --ref-blue-900: #252526;
 
   /* purple */
   --ref-purple-100: #f9f6ff;
@@ -83,9 +83,9 @@
   --session-color: var(--ref-gray-200);
 
   /* custom color */
-  --custom-blue-100: var(--ref-blue-210);
-  --custom-blue-200: var(--ref-blue-230);
-  --custom-blue-300: var(--ref-blue-450);
+  --custom-blue-100: var(--ref-blue-350);
+  --custom-blue-200: var(--ref-blue-400);
+  --custom-blue-300: var(--ref-blue-800);
   --custom-pink-100: var(--ref-pink-100);
   --custom-pink-200: var(--ref-pink-150);
   --custom-pink-300: var(--ref-pink-200);
@@ -100,11 +100,11 @@
   --color-picker-hash-color: var(--ref-gray-450);
   --sys-sub-color: var(--ref-purple-300);
   --sys-default-sub-color: var(--ref-purple-300);
-  --sys-presentation-sub-color: var(--ref-blue-160);
+  --sys-presentation-sub-color: var(--ref-blue-250);
   --tooltip-shadow-color: var(--ref-black-shadow-400);
   --color-picker-border-shadow-color: var(--ref-black-shadow-200);
-  --presentation-detail-available-color: var(--ref-blue-150);
-  --presentation-blue-pagination-btn-color: var(--ref-blue-250);
+  --presentation-detail-available-color: var(--ref-blue-200);
+  --presentation-blue-pagination-btn-color: var(--ref-blue-500);
   --mine-text-color: var(--ref-black);
 
   --size-base: 14px;