From b56264d722cddac809119875a622c2bf3aae33ce Mon Sep 17 00:00:00 2001
From: Chaewon <cw06155@gmail.com>
Date: Sat, 7 Sep 2024 23:05:11 +0900
Subject: [PATCH] colors edit

---
 packages/view/src/App.scss                    |   7 +-
 .../BranchSelector/BranchSelector.scss        |   7 +-
 .../view/src/components/Detail/Detail.scss    |  20 +-
 .../SelectedClusterGroup.scss                 |   2 +-
 .../AuthorBarChart/AuthorBarChart.scss        |  16 +-
 .../TemporalFilter/TemporalFilter.scss        |   4 +-
 .../ThemeSelector/ThemeSelector.scss          |   2 +-
 .../ClusterGraph/ClusterGraph.scss            |   4 +-
 .../VerticalClusterList/Summary/Summary.scss  |  12 +-
 packages/view/src/styles/_colors.scss         |  75 +++--
 packages/view/src/styles/_customTheme.scss    |  48 ---
 packages/view/src/styles/_pallette.scss       | 295 ------------------
 packages/view/src/styles/_reset.scss          |   4 +-
 packages/view/src/styles/app.scss             |   2 -
 14 files changed, 80 insertions(+), 418 deletions(-)
 delete mode 100644 packages/view/src/styles/_customTheme.scss
 delete mode 100644 packages/view/src/styles/_pallette.scss

diff --git a/packages/view/src/App.scss b/packages/view/src/App.scss
index 57d0d11a..0e87d49e 100644
--- a/packages/view/src/App.scss
+++ b/packages/view/src/App.scss
@@ -1,11 +1,12 @@
-// FIXME
+@import "styles/app";
+
 :root {
   --primary-color: #ff8272;
 }
 
 body {
-  background: #212121;
-  color: #fff;
+  background: $color-background;
+  color: $color-white;
 }
 
 .header-container {
diff --git a/packages/view/src/components/BranchSelector/BranchSelector.scss b/packages/view/src/components/BranchSelector/BranchSelector.scss
index 01993d2c..99855baa 100644
--- a/packages/view/src/components/BranchSelector/BranchSelector.scss
+++ b/packages/view/src/components/BranchSelector/BranchSelector.scss
@@ -8,13 +8,12 @@
   font-weight: $font-weight-semibold;
 
   .select-box {
-    background-color: #212121;
-    border: 1px solid var(--color-white);
-    color: var(--color-white);
+    border: 1px solid $color-white;
+    color: $color-white;
     height: 30px;
 
     & .MuiSvgIcon-root {
-      color: var(--color-white);
+      color: $color-white;
     }
 
     &.Mui-focused .MuiOutlinedInput-notchedOutline {
diff --git a/packages/view/src/components/Detail/Detail.scss b/packages/view/src/components/Detail/Detail.scss
index 1f2354bb..6d0e0dea 100644
--- a/packages/view/src/components/Detail/Detail.scss
+++ b/packages/view/src/components/Detail/Detail.scss
@@ -10,7 +10,7 @@
     margin-right: 1rem;
     flex-grow: 10;
     height: 0;
-    border: 1px solid $white;
+    border: 1px solid $color-white;
   }
 
   .detail__summary {
@@ -56,10 +56,10 @@
     width: 100%;
     display: flex;
     justify-content: space-between;
-    color: $gray-600;
+    color: $color-medium-gray;
 
     .commit-detail {
-      color: $white;
+      color: $color-white;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -83,7 +83,7 @@
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 1;
             overflow: hidden;
-            color: $white;
+            color: $color-white;
             margin: 0 4px 0 15px;
 
             &:hover {
@@ -92,7 +92,7 @@
               overflow: visible;
               position: absolute;
               z-index: 10;
-              background-color: lighten($gray-900, 5);
+              background-color: $color-dark-gray;
               padding-bottom: 5px;
               top: -7px;
             }
@@ -115,9 +115,9 @@
 
       a {
         text-decoration: none;
-        color: var(--color-lightgray);
+        color: $color-light-gray;
         &:visited {
-          color: var(--color-lightgray);
+          color: $color-light-gray;
         }
         &:hover {
           color: var(--color-primary);
@@ -143,19 +143,19 @@
   cursor: pointer;
 
   &:hover {
-    color: $gray-300;
+    color: $color-light-gray;
   }
 }
 
 .commit-id__tooltip {
   display: none;
   position: absolute;
-  background: $white;
+  background: $color-white;
   padding: 8px 16px;
   text-align: center;
   font-size: $font-size-caption;
   line-height: 1.5;
   border-radius: 5px;
-  color: $gray-900;
+  color: $color-dark-gray;
   transform: translateY(20%) translateX(-120%);
 }
diff --git a/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
index 1f6723e6..c6dfbf95 100644
--- a/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
+++ b/packages/view/src/components/SelectedClusterGroup/SelectedClusterGroup.scss
@@ -17,6 +17,6 @@
     text-overflow: ellipsis;
     justify-content: space-between;
     margin: 5px;
-    background-color: $gray-300;
+    background-color: $color-light-gray;
   }
 }
diff --git a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
index f19886ad..5088aad0 100644
--- a/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
+++ b/packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.scss
@@ -19,17 +19,17 @@
   & .select-box {
     font-size: $font-size-caption;
     background: transparent;
-    border: 1px solid $white;
+    border: 1px solid $color-white;
     border-radius: 5px;
     width: fit-content;
     padding: 0 10px;
     height: 25px;
-    color: $white;
+    color: $color-white;
     outline: none;
     text-align: center;
 
     option {
-      background: $gray-900;
+      background: $color-dark-gray;
     }
   }
 }
@@ -39,7 +39,7 @@
   margin: 20px 40px 40px;
 
   .axis {
-    color: $white;
+    color: $color-white;
     font-weight: $font-weight-semibold;
 
     &.x-axis {
@@ -50,7 +50,7 @@
 
     &.x-axis {
       .x-axis-label {
-        fill: $white;
+        fill: $color-white;
       }
     }
   }
@@ -70,7 +70,7 @@
       }
 
       .name {
-        fill: $white;
+        fill: $color-white;
         stroke: none;
         font-size: $font-size-caption;
         text-anchor: start;
@@ -83,13 +83,13 @@
 .author-bar-chart__tooltip {
   display: none;
   position: absolute;
-  background: $white;
+  background: $color-white;
   padding: 8px 16px;
   text-align: center;
   font-size: $font-size-caption;
   line-height: 1.5;
   border-radius: 5px;
-  color: $gray-900;
+  color: $color-dark-gray;
 
   .selected {
     color: var(--color-primary);
diff --git a/packages/view/src/components/TemporalFilter/TemporalFilter.scss b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
index 3d3dce73..57a1f8c6 100644
--- a/packages/view/src/components/TemporalFilter/TemporalFilter.scss
+++ b/packages/view/src/components/TemporalFilter/TemporalFilter.scss
@@ -59,7 +59,7 @@
     padding: 2px;
     border: solid 1px rgba(255, 255, 255, 0.22);
     border-radius: 3px;
-    color: white;
+    color: $color-white;
     background: rgba(255, 255, 255, 0.09);
     font-weight: $font-weight-light;
     font-size: $font-size-caption;
@@ -69,5 +69,5 @@
 .temporal-filter__label {
   font-size: $font-size-title;
   font-weight: $font-weight-semibold;
-  fill: white;
+  fill: $color-white;
 }
diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.scss b/packages/view/src/components/ThemeSelector/ThemeSelector.scss
index 13f73981..1d2249ae 100644
--- a/packages/view/src/components/ThemeSelector/ThemeSelector.scss
+++ b/packages/view/src/components/ThemeSelector/ThemeSelector.scss
@@ -12,7 +12,7 @@
   top: 2.5rem;
   left: 0;
   padding: 20px;
-  background-color: var(--color-dark-gray);
+  background-color: $color-dark-gray;
   border-radius: 0.3rem 1.5rem 1.5rem 1.5rem;
   z-index: 10;
 
diff --git a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
index 899b46ce..88050a86 100644
--- a/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
+++ b/packages/view/src/components/VerticalClusterList/ClusterGraph/ClusterGraph.scss
@@ -35,10 +35,10 @@
 .sub-graph-tooltip {
   position: absolute;
   z-index: 10;
-  background: $white;
+  background: $color-white;
   padding: 8px 16px;
   font-size: $font-size-caption;
   line-height: 1.5;
   border-radius: 5px;
-  color: $gray-900;
+  color: $color-dark-gray;
 }
diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
index 731dcb88..f9cd435e 100644
--- a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
+++ b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
@@ -20,12 +20,12 @@
       border: none;
       background-color: transparent;
       cursor: pointer;
-      color: var(--color-text-white);
+      color: $color-white;
       width: 100%;
 
       &:hover {
         border-radius: 40px;
-        background-color: lighten($gray-800, 5);
+        background-color: $color-dark-gray;
       }
     }
     .cluster-summary__info-wrapper {
@@ -35,7 +35,7 @@
 
       &.selected {
         border-radius: 25px;
-        background-color: lighten($gray-900, 5);
+        background-color: $color-dark-gray;
       }
     }
 
@@ -94,9 +94,9 @@
 
           a {
             text-decoration: none;
-            color: var(--color-light-gray);
+            color: $color-light-gray;
             &:visited {
-              color: var(--color-light-gray);
+              color: $color-light-gray;
             }
             &:hover {
               color: var(--color-primary);
@@ -130,6 +130,6 @@
   right: 26%;
   top: 34%;
   &:hover {
-    color: white;
+    color: $color-white;
   }
 }
diff --git a/packages/view/src/styles/_colors.scss b/packages/view/src/styles/_colors.scss
index e1b0e39e..d7294f6d 100644
--- a/packages/view/src/styles/_colors.scss
+++ b/packages/view/src/styles/_colors.scss
@@ -1,39 +1,46 @@
-@import "pallette";
-
-$color--dark: $white;
-$color--light: $black;
-
-$danger-color--dark: #ff4444;
-$danger-color--light: #cc0000;
-
-$warning-color--dark: #ffbb33;
-$warning-color--light: #ff8800;
-
-$success-color--dark: #00c851;
-$success-color--light: #007e33;
+$color-white: #f7f7f7;
+$color-black: #010818;
+$color-light-gray: #b4bac6;
+$color-medium-gray: #757880;
+$color-dark-gray: #3c4048;
+$color-background: #222324;
+
+html[custom-type="githru"] {
+  --color-primary: #e06091;
+  --color-secondary: #8840bb;
+  --color-tertiary: #ffd08a;
+  --color-success: #07bebe;
+  --color-failed: #ee2479;
+}
 
-$info-color--dark: #33b5e5;
-$info-color--light: #0099cc;
+html[custom-type="hacker-blue"] {
+  --color-primary: #456cf7;
+  --color-secondary: #3f4c73;
+  --color-tertiary: #6c60f0;
+  --color-success: #1fc7a9;
+  --color-failed: #ee2479;
+}
 
-$brand--primary--dark: $blue-light-A200;
-$brand--primary--light: $blue-light-A700;
+html[custom-type="aqua"] {
+  --color-primary: #51decd;
+  --color-secondary: #0687a3;
+  --color-tertiary: #a7ffff;
+  --color-success: #008cde;
+  --color-failed: #ee2479;
+}
 
-$highlight-color--dark: transparentize($brand--primary--light, 0.1);
-$highlight-color--light: transparentize($brand--primary--light, 0.1);
+html[custom-type="cotton-candy"] {
+  --color-primary: #ffcccb;
+  --color-secondary: #feffd1;
+  --color-tertiary: #a39aeb;
+  --color-success: #7ad5c4;
+  --color-failed: #ff8bbc;
+}
 
-//GRADIENTS
-@mixin linear-gradient($from, $to) {
-  background: $to;
-  background: -moz-linear-gradient(top, $from 0%, $to 100%);
-  background: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0%, $from),
-    color-stop(100%, $to)
-  );
-  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
-  background: -o-linear-gradient(top, $from 0%, $to 100%);
-  background: linear-gradient(to bottom, $from 0%, $to 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to});
+html[custom-type="mono"] {
+  --color-primary: #68788f;
+  --color-secondary: #3a4776;
+  --color-tertiary: #9aaed1;
+  --color-success: #6cafaf;
+  --color-failed: #aa4b72;
 }
diff --git a/packages/view/src/styles/_customTheme.scss b/packages/view/src/styles/_customTheme.scss
deleted file mode 100644
index 3095f931..00000000
--- a/packages/view/src/styles/_customTheme.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-:root {
-  --color-black: #010b13;
-  --color-white: #f8f8f8;
-  --color-light-gray: #b4bac6;
-  --color-medium-gray: #757880;
-  --color-dark-gray: #363a41;
-  --color-text-white: #f8f8f8;
-}
-
-html[custom-type="githru"] {
-  --color-primary: #e06091;
-  --color-secondary: #8840bb;
-  --color-tertiary: #ffd08a;
-  --color-success: #07bebe;
-  --color-failed: #ee2479;
-}
-
-html[custom-type="hacker-blue"] {
-  --color-primary: #456cf7;
-  --color-secondary: #3f4c73;
-  --color-tertiary: #6c60f0;
-  --color-success: #1fc7a9;
-  --color-failed: #ee2479;
-}
-
-html[custom-type="aqua"] {
-  --color-primary: #51decd;
-  --color-secondary: #0687a3;
-  --color-tertiary: #a7ffff;
-  --color-success: #008cde;
-  --color-failed: #ee2479;
-}
-
-html[custom-type="cotton-candy"] {
-  --color-primary: #ffcccb;
-  --color-secondary: #feffd1;
-  --color-tertiary: #a39aeb;
-  --color-success: #7ad5c4;
-  --color-failed: #ff8bbc;
-}
-
-html[custom-type="mono"] {
-  --color-primary: #68788f;
-  --color-secondary: #3a4776;
-  --color-tertiary: #9aaed1;
-  --color-success: #6cafaf;
-  --color-failed: #aa4b72;
-}
diff --git a/packages/view/src/styles/_pallette.scss b/packages/view/src/styles/_pallette.scss
deleted file mode 100644
index e600890f..00000000
--- a/packages/view/src/styles/_pallette.scss
+++ /dev/null
@@ -1,295 +0,0 @@
-//pallette from Bootstrap
-// red
-$red-50: #ffebee;
-$red-100: #ffcdd2;
-$red-200: #ef9a9a;
-$red-300: #e57373;
-$red-400: #ef5350;
-$red-500: #f44336;
-$red-600: #e53935;
-$red-700: #d32f2f;
-$red-800: #c62828;
-$red-900: #b71c1c;
-$red-A100: #ff8a80;
-$red-A200: #ff5252;
-$red-A400: #ff1744;
-$red-A700: #d50000;
-
-// pink
-$pink-50: #fce4ec;
-$pink-100: #f8bbd0;
-$pink-200: #f48fb1;
-$pink-300: #f06292;
-$pink-400: #ec407a;
-$pink-500: #e91e63;
-$pink-600: #d81b60;
-$pink-700: #c2185b;
-$pink-800: #ad1457;
-$pink-900: #880e4f;
-$pink-A100: #ff80ab;
-$pink-A200: #ff4081;
-$pink-A400: #f50057;
-$pink-A700: #c51162;
-
-// purple
-$purple-50: #f3e5f5;
-$purple-100: #e1bee7;
-$purple-200: #ce93d8;
-$purple-300: #ba68c8;
-$purple-400: #ab47bc;
-$purple-500: #9c27b0;
-$purple-600: #8e24aa;
-$purple-700: #7b1fa2;
-$purple-800: #6a1b9a;
-$purple-900: #4a148c;
-$purple-A100: #ea80fc;
-$purple-A200: #e040fb;
-$purple-A400: #d500f9;
-$purple-A700: #aa00ff;
-
-// purple-deep
-$purple-deep-50: #ede7f6;
-$purple-deep-100: #d1c4e9;
-$purple-deep-200: #b39ddb;
-$purple-deep-300: #9575cd;
-$purple-deep-400: #7e57c2;
-$purple-deep-500: #673ab7;
-$purple-deep-600: #5e35b1;
-$purple-deep-700: #512da8;
-$purple-deep-800: #4527a0;
-$purple-deep-900: #311b92;
-$purple-deep-A100: #b388ff;
-$purple-deep-A200: #7c4dff;
-$purple-deep-A400: #651fff;
-$purple-deep-A700: #6200ea;
-
-// indigo
-$indigo-50: #e8eaf6;
-$indigo-100: #c5cae9;
-$indigo-200: #9fa8da;
-$indigo-300: #7986cb;
-$indigo-400: #5c6bc0;
-$indigo-500: #3f51b5;
-$indigo-600: #3949ab;
-$indigo-700: #303f9f;
-$indigo-800: #283593;
-$indigo-900: #1a237e;
-$indigo-A100: #8c9eff;
-$indigo-A200: #536dfe;
-$indigo-A400: #3d5afe;
-$indigo-A700: #304ffe;
-
-// blue
-$blue-50: #e3f2fd;
-$blue-100: #bbdefb;
-$blue-200: #90caf9;
-$blue-300: #64b5f6;
-$blue-400: #42a5f5;
-$blue-500: #2196f3;
-$blue-600: #1e88e5;
-$blue-700: #1976d2;
-$blue-800: #1565c0;
-$blue-900: #0d47a1;
-$blue-A100: #82b1ff;
-$blue-A200: #448aff;
-$blue-A400: #2979ff;
-$blue-A700: #2962ff;
-
-// blue-light
-$blue-light-50: #e1f5fe;
-$blue-light-100: #b3e5fc;
-$blue-light-200: #81d4fa;
-$blue-light-300: #4fc3f7;
-$blue-light-400: #29b6f6;
-$blue-light-500: #03a9f4;
-$blue-light-600: #039be5;
-$blue-light-700: #0288d1;
-$blue-light-800: #0277bd;
-$blue-light-900: #01579b;
-$blue-light-A100: #80d8ff;
-$blue-light-A200: #40c4ff;
-$blue-light-A400: #00b0ff;
-$blue-light-A700: #0091ea;
-
-// cyan
-$cyan-50: #e0f7fa;
-$cyan-100: #b2ebf2;
-$cyan-200: #80deea;
-$cyan-300: #4dd0e1;
-$cyan-400: #26c6da;
-$cyan-500: #00bcd4;
-$cyan-600: #00acc1;
-$cyan-700: #0097a7;
-$cyan-800: #00838f;
-$cyan-900: #006064;
-$cyan-A100: #84ffff;
-$cyan-A200: #18ffff;
-$cyan-A400: #00e5ff;
-$cyan-A700: #00b8d4;
-
-// teal
-$teal-50: #e0f2f1;
-$teal-100: #b2dfdb;
-$teal-200: #80cbc4;
-$teal-300: #4db6ac;
-$teal-400: #26a69a;
-$teal-500: #26a69a;
-$teal-600: #00897b;
-$teal-700: #00796b;
-$teal-800: #00695c;
-$teal-900: #004d40;
-$teal-A100: #a7ffeb;
-$teal-A200: #64ffda;
-$teal-A400: #1de9b6;
-$teal-A700: #00bfa5;
-
-// green
-$green-50: #e8f5e9;
-$green-100: #c8e6c9;
-$green-200: #a5d6a7;
-$green-300: #81c784;
-$green-400: #81c784;
-$green-500: #4caf50;
-$green-600: #43a047;
-$green-700: #388e3c;
-$green-800: #2e7d32;
-$green-900: #1b5e20;
-$green-A100: #b9f6ca;
-$green-A200: #69f0ae;
-$green-A400: #00e676;
-$green-A700: #00c853;
-
-// green-light
-$green-light-50: #f1f8e9;
-$green-light-100: #dcedc8;
-$green-light-200: #c5e1a5;
-$green-light-300: #aed581;
-$green-light-400: #9ccc65;
-$green-light-500: #8bc34a;
-$green-light-600: #7cb342;
-$green-light-700: #689f38;
-$green-light-800: #558b2f;
-$green-light-900: #33691e;
-$green-light-A100: #ccff90;
-$green-light-A200: #b2ff59;
-$green-light-A400: #76ff03;
-$green-light-A700: #64dd17;
-
-// lime
-$lime-50: #f9fbe7;
-$lime-100: #f0f4c3;
-$lime-200: #e6ee9c;
-$lime-300: #dce775;
-$lime-400: #d4e157;
-$lime-500: #cddc39;
-$lime-600: #c0ca33;
-$lime-700: #afb42b;
-$lime-800: #9e9d24;
-$lime-900: #827717;
-$lime-A100: #f4ff81;
-$lime-A200: #eeff41;
-$lime-A400: #c6ff00;
-$lime-A700: #aeea00;
-
-// yellow
-$yellow-50: #fffde7;
-$yellow-100: #fff9c4;
-$yellow-200: #fff59d;
-$yellow-300: #fff176;
-$yellow-400: #ffee58;
-$yellow-500: #ffeb3b;
-$yellow-600: #fdd835;
-$yellow-700: #fbc02d;
-$yellow-800: #f9a825;
-$yellow-900: #f57f17;
-$yellow-A100: #ffff8d;
-$yellow-A200: #ffff00;
-$yellow-A400: #ffea00;
-$yellow-A700: #ffd600;
-
-// amber
-$amber-50: #fff8e1;
-$amber-100: #ffecb3;
-$amber-200: #ffe082;
-$amber-300: #ffd54f;
-$amber-400: #ffca28;
-$amber-500: #ffc107;
-$amber-600: #ffb300;
-$amber-700: #ffa000;
-$amber-800: #ff8f00;
-$amber-900: #ff6f00;
-$amber-A100: #ffe57f;
-$amber-A200: #ffd740;
-$amber-A400: #ffc400;
-$amber-A700: #ffab00;
-
-// orange
-$orange-50: #fff3e0;
-$orange-100: #ffe0b2;
-$orange-200: #ffcc80;
-$orange-300: #ffb74d;
-$orange-400: #ffa726;
-$orange-500: #ff9800;
-$orange-600: #fb8c00;
-$orange-700: #f57c00;
-$orange-800: #ef6c00;
-$orange-900: #e65100;
-$orange-A100: #ffd180;
-$orange-A200: #ffab40;
-$orange-A400: #ff9100;
-$orange-A700: #ff6d00;
-
-// orange-deep
-$orange-deep-50: #fbe9e7;
-$orange-deep-100: #ffccbc;
-$orange-deep-200: #ffab91;
-$orange-deep-300: #ff8a65;
-$orange-deep-400: #ff7043;
-$orange-deep-500: #ff5722;
-$orange-deep-600: #f4511e;
-$orange-deep-700: #e64a19;
-$orange-deep-800: #d84315;
-$orange-deep-900: #bf360c;
-$orange-deep-A100: #ff9e80;
-$orange-deep-A200: #ff6e40;
-$orange-deep-A400: #ff3d00;
-$orange-deep-A700: #dd2c00;
-
-// brown
-$brown-50: #efebe9;
-$brown-100: #d7ccc8;
-$brown-200: #bcaaa4;
-$brown-300: #a1887f;
-$brown-400: #8d6e63;
-$brown-500: #795548;
-$brown-600: #6d4c41;
-$brown-700: #5d4037;
-$brown-800: #4e342e;
-$brown-900: #3e2723;
-
-// gray
-$gray-50: #fafafa;
-$gray-100: #f5f5f5;
-$gray-200: #eeeeee;
-$gray-300: #e0e0e0;
-$gray-400: #bdbdbd;
-$gray-500: #9e9e9e;
-$gray-600: #757575;
-$gray-700: #616161;
-$gray-800: #424242;
-$gray-900: #212121;
-
-// gray-blue
-$gray-blue-50: #eceff1;
-$gray-blue-100: #cfd8dc;
-$gray-blue-200: #b0bec5;
-$gray-blue-300: #90a4ae;
-$gray-blue-400: #78909c;
-$gray-blue-500: #607d8b;
-$gray-blue-600: #546e7a;
-$gray-blue-700: #455a64;
-$gray-blue-800: #37474f;
-$gray-blue-900: #263238;
-
-$white: #fff;
-$black: #000;
diff --git a/packages/view/src/styles/_reset.scss b/packages/view/src/styles/_reset.scss
index c4ebc463..2d8b93f8 100644
--- a/packages/view/src/styles/_reset.scss
+++ b/packages/view/src/styles/_reset.scss
@@ -40,13 +40,13 @@ body {
     width: 8px;
   }
   *::-webkit-scrollbar-thumb {
-    background-color: rgba(189, 189, 189, 0.2);
+    background-color: $color-dark-gray;
     border: none;
     outline: none;
     border-radius: 10px;
 
     &:hover {
-      background-color: rgba(189, 189, 189, 0.5);
+      background-color: $color-medium-gray;
     }
   }
   *::-webkit-scrollbar-track {
diff --git a/packages/view/src/styles/app.scss b/packages/view/src/styles/app.scss
index 24c4a2f6..5ebd7460 100644
--- a/packages/view/src/styles/app.scss
+++ b/packages/view/src/styles/app.scss
@@ -1,6 +1,4 @@
-@import "customTheme";
 @import "colors";
 @import "font";
-@import "pallette";
 @import "reset";
 @import "utils";