white → $grey-100

components/AccountModal/index.scss

@@ -28,7 +28,7 @@
     }
 
     .Thumb {
-      background: white;
+      background: $grey-100;
       border-radius: 13px;
       display: block;
       height: 26px;
@@ -41,7 +41,7 @@
       }
 
       &[data-state="checked"] {
-        background: white;
+        background: $grey-100;
         transform: translateX(21px);
       }
     }

components/Alert/index.scss

@@ -11,7 +11,7 @@
 }
 
 .Alert {
-  background: white;
+  background: $grey-100;
   border-radius: $unit;
   display: flex;
   flex-direction: column;

components/Button/index.scss

@@ -11,7 +11,7 @@
   padding: 8px 12px;
 
   &:hover {
-    background: white;
+    background: $grey-100;
     cursor: pointer;
     color: $grey-10;
 
@@ -27,10 +27,10 @@
 
   &.destructive:hover {
     background: $error;
-    color: white;
+    color: $grey-100;
 
     .icon svg {
-      fill: white;
+      fill: $grey-100;
     }
   }
 
@@ -100,7 +100,7 @@
   }
 
   &.Active {
-    background: white;
+    background: $grey-100;
   }
 
   &.btn-blue {

components/CharLimitedFieldset/index.scss

@@ -1,5 +1,5 @@
 .Limited {
-  background: white;
+  background: $grey-100;
   border-radius: 6px;
   border: 2px solid transparent;
   box-sizing: border-box;

components/ElementToggle/index.scss

@@ -9,7 +9,7 @@
   padding: calc($unit / 2);
 
   .ToggleItem {
-    background: white;
+    background: $grey-100;
     border: none;
     border-radius: 18px;
     color: $grey-40;

components/Fieldset/index.scss

@@ -9,7 +9,7 @@
     -webkit-font-smoothing: antialiased;
     border: none;
 
-    background-color: white;
+    background-color: $grey-100;
     border-radius: 6px;
     box-sizing: border-box;
     color: $grey-10;

components/Header/index.scss

@@ -22,7 +22,7 @@
       padding-bottom: 16px;
 
       .Button {
-        background: white;
+        background: $grey-100;
       }
 
       .Menu {

components/HeaderMenu/index.scss

@@ -1,5 +1,5 @@
 .Menu {
-  background: white;
+  background: $grey-100;
   border-radius: 6px;
   display: none;
   min-width: 220px;
@@ -13,7 +13,7 @@
   font-weight: $normal;
 
   &:hover:not(.disabled) {
-    background: $grey-100;
+    background: $grey-95;
     color: $grey-10;
     cursor: pointer;
 
@@ -54,7 +54,7 @@
       .Thumb {
         $diameter: 18px;
 
-        background: white;
+        background: $grey-100;
         border-radius: calc($diameter / 2);
         display: block;
         height: $diameter;
@@ -68,14 +68,14 @@
         }
 
         &[data-state="checked"] {
-          background: white;
+          background: $grey-100;
           transform: translateX(17px);
         }
       }
 
       .left,
       .right {
-        color: white;
+        color: $grey-100;
         font-size: 10px;
         font-weight: $bold;
         position: absolute;
@@ -113,7 +113,7 @@
     &:hover {
       i.tag {
         background: $grey-60;
-        color: white;
+        color: $grey-100;
       }
     }
 

components/SearchFilter/index.scss

@@ -36,7 +36,7 @@
 }
 
 .Dropdown {
-  background: white;
+  background: $grey-100;
   border-radius: $unit;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
   display: flex;
@@ -49,7 +49,7 @@
     overflow: hidden;
 
     svg {
-      fill: white;
+      fill: $grey-100;
       filter: drop-shadow(0px 0px 1px rgb(0 0 0 / 0.18));
     }
   }

components/WeaponUnit/index.scss

@@ -72,7 +72,7 @@
   }
 
   .Button {
-    background: white;
+    background: $grey-100;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
     display: none;
     position: absolute;

styles/globals.scss

@@ -127,7 +127,7 @@ select {
 
   animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running
     openModal;
-  background: white;
+  background: $grey-100;
   border-radius: $unit;
   display: flex;
   flex-direction: column;
@@ -212,7 +212,7 @@ select {
 .Hovercard {
   background: #222;
   border-radius: $unit;
-  color: white;
+  color: $grey-100;
   display: flex;
   flex-direction: column;
   gap: $unit * 2;

styles/themes.scss

@@ -4,8 +4,8 @@
 
   --grid-rep-hover: #{$grid--rep--hover--light};
 
-  --card-bg: white;
-  --bar-bg: white;
+  --card-bg: #{$grey-100};
+  --bar-bg: #{$grey-100};
 
   --input-bg: #{$input--bg--light};
   --input-bg-hover: #{$input--bg--light--hover};

styles/variables.scss

@@ -23,7 +23,8 @@ $grey-60: #a9a9a9;
 $grey-70: #c6c6c6;
 $grey-80: #e9e9e9;
 $grey-90: #f5f5f5;
-$grey-100: #fafafa;
+$grey-95: #fafafa;
+$grey-100: white;
 
 $page--bg--light: $grey-90;
 $page--bg--dark: $grey-10;