Removed unused colors

src/containers/boris/BorisSidebar/index.tsx

@@ -4,9 +4,10 @@ import { BorisContacts } from '~/components/boris/BorisContacts';
 import { BorisStats } from '~/components/boris/BorisStats';
 import { Group } from '~/components/containers/Group';
 import { SuperPowersToggle } from '~/containers/auth/SuperPowersToggle';
-import styles from '~/layouts/BorisLayout/styles.module.scss';
 import { BorisUsageStats } from '~/types/boris';
 
+import styles from './styles.module.scss';
+
 interface Props {
   isUser: boolean;
   stats: BorisUsageStats;
@@ -14,14 +15,14 @@ interface Props {
 }
 
 const BorisSidebar: FC<Props> = ({ isUser, stats, isLoading }) => (
-  <Group className={styles.stats__container}>
+  <Group className={styles.container}>
     <div className={styles.super_powers}>
       <SuperPowersToggle />
     </div>
 
     <BorisContacts />
 
-    <div className={styles.stats__wrap}>
+    <div className={styles.wrap}>
       <BorisStats stats={stats} isLoading={isLoading} />
     </div>
   </Group>

src/containers/boris/BorisSidebar/styles.module.scss

@@ -0,0 +1,23 @@
+@import 'src/styles/variables';
+
+.wrap {
+  @include tablet {
+    display: none;
+  }
+}
+
+.container {
+  background: $content_bg_dark;
+  border-radius: 0 $radius $radius 0;
+  padding: $gap;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+
+  @include tablet {
+    border-radius: 0;
+  }
+}
+
+.super_powers {
+  padding: $gap * 2 0;
+}

src/containers/dialogs/LoginDialog/styles.module.scss

@@ -1,10 +1,4 @@
-@import "src/styles/variables";
-
-$secondary_color: darken(desaturate($blue, 100%), 30%);
-$vk_color: $secondary_color;
-
-.dialog {
-}
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -17,32 +11,6 @@ $vk_color: $secondary_color;
   }
 }
 
-.secondary_button {
-  background: $content_bg;
-  box-shadow: inset $vk_color 0 0 0 2px;
-  color: $vk_color;
-
-  svg {
-    fill: $vk_color;
-    margin-right: $gap;
-  }
-}
-
 .forgot_button {
   opacity: 0.5;
 }
-
-.buttons {
-  margin: $gap * 2 0 0 0 !important;
-  padding: $gap * 2 0 0 0;
-  border-top: 1px solid black;
-}
-
-.links {
-  font: $font_14_regular;
-  text-align: center;
-
-  a {
-    color: lighten($content_bg, 40%);
-  }
-}

src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   padding: $login_dialog_padding;
@@ -13,6 +13,6 @@
 
   span {
     padding-left: $gap;
-    color: darken(white, 50%);
+    color: $gray_50;
   }
 }

src/containers/dialogs/RestorePasswordDialog/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   padding: $gap $gap $gap * 4;
@@ -11,7 +11,7 @@
 .text {
   font: $font_14_regular;
   padding: $gap;
-  color: darken(white, 50%);
+  color: $gray_50;
 }
 
 .shade,
@@ -34,18 +34,18 @@
   text-transform: uppercase;
   font: $font_18_semibold;
   text-align: center;
-  color: $wisegreen;
+  color: $color_primary;
 
   svg {
-    fill: $wisegreen;
+    fill: $color_primary;
   }
 }
 
 .error_shade {
-  color: $red;
+  color: $color_danger;
 
   svg {
-    fill: $red;
+    fill: $color_danger;
   }
 }
 

src/containers/dialogs/RestoreRequestDialog/index.tsx

@@ -15,24 +15,24 @@ import styles from './styles.module.scss';
 
 interface RestoreRequestDialogProps extends DialogComponentProps {}
 
-const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }) => {
+const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({
+  onRequestClose,
+}) => {
   useCloseOnEscape(onRequestClose);
 
   const [isSent, setIsSent] = useState(false);
   const onSent = useCallback(() => setIsSent(true), [setIsSent]);
 
-  const { isSubmitting, handleSubmit, handleChange, errors, values } = useRestoreRequestForm(
-    apiRequestRestoreCode,
-    onSent
-  );
+  const { isSubmitting, handleSubmit, handleChange, errors, values } =
+    useRestoreRequestForm(apiRequestRestoreCode, onSent);
 
   const buttons = useMemo(
     () => (
       <Group className={styles.buttons}>
-        <Button color="secondary">Восстановить</Button>
+        <Button>Восстановить</Button>
       </Group>
     ),
-    []
+    [],
   );
 
   const header = useMemo(() => <div className={styles.illustration} />, []);
@@ -58,7 +58,8 @@ const RestoreRequestDialog: VFC<RestoreRequestDialogProps> = ({ onRequestClose }
             />
 
             <div className={styles.text}>
-              Введите имя пользователя или адрес почты. Мы пришлем ссылку для сброса пароля.
+              Введите имя пользователя или адрес почты. Мы пришлем ссылку для
+              сброса пароля.
             </div>
           </Group>
         </div>

src/containers/dialogs/RestoreRequestDialog/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   padding: $gap $gap $gap * 4;
@@ -11,7 +11,7 @@
 .text {
   font: $font_14_regular;
   padding: $gap;
-  color: darken(white, 50%);
+  color: $gray_50;
 }
 
 .illustration {

src/containers/flow/FlowStamp/styles.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
 
 .wrap {
   display: flex;
@@ -25,7 +25,10 @@
     left: 0;
     height: 60px;
     width: 100%;
-    background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
+    background: linear-gradient(
+      transparentize($content_bg, 1),
+      $content_bg 90%
+    );
     pointer-events: none;
     touch-action: none;
 
@@ -73,7 +76,7 @@
 .search {
   @include outer_shadow();
 
-  background: lighten($content_bg, 3%);
+  background: $content_bg_lighter;
   padding: $gap;
   border-radius: $radius;
 }
@@ -91,7 +94,6 @@
 }
 
 .toggles {
-
   & > div {
     padding: $gap;
     font: $font_14_semibold;

src/containers/lab/LabStats/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .title {
   padding-bottom: $gap;
@@ -16,7 +16,7 @@
   @include outer_shadow;
 
   border-radius: $radius;
-  background: $comment_bg;
+  background: $content_bg_light;
   padding: $gap;
 }
 

src/containers/main/Header/index.tsx

@@ -52,9 +52,10 @@ const Header: FC<HeaderProps> = observer(() => {
     [borisCommentedAt, isUser, user.last_seen_boris],
   );
 
-  const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [
-    labStats.updates,
-  ]);
+  const hasLabUpdates = useMemo(
+    () => labStats.updates.length > 0,
+    [labStats.updates],
+  );
   const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
 
   // Needed for SSR
@@ -113,12 +114,7 @@ const Header: FC<HeaderProps> = observer(() => {
         )}
 
         {!isUser && (
-          <Button
-            className={styles.user_button}
-            onClick={onLogin}
-            round
-            color="secondary"
-          >
+          <Button className={styles.user_button} onClick={onLogin} round>
             ВДОХ
           </Button>
         )}

src/containers/main/Header/styles.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
 
 @keyframes appear {
   from {
@@ -86,7 +86,7 @@
   white-space: nowrap;
 
   &:hover {
-    color: $red;
+    color: $color_danger;
   }
 
   &::before {
@@ -109,7 +109,7 @@
     width: 6px;
     height: 6px;
     border-radius: 4px;
-    background: lighten($red, 10%);
+    background: lighten($color_danger, 10%);
     right: 12px;
     top: 6px;
     transition: opacity 0.5s;
@@ -127,7 +127,7 @@
   }
 
   &.boris::after {
-    background: lighten($wisegreen, 10%);
+    background: lighten($color_primary, 10%);
   }
 
   @include tablet {

src/containers/profile/ProfileAccounts/styles.module.scss

@@ -1,11 +1,11 @@
-@import "../../../styles/variables";
+@import '../../../styles/variables';
 
 .wrap {
 }
 
 .list {
   border-radius: $radius;
-  background: transparentize(white, 0.95);
+  background: $gray_90;
 }
 
 .buttons {
@@ -38,7 +38,7 @@
   grid-template-columns: 20px auto 20px;
   grid-column-gap: $gap * 1.5;
   align-items: center;
-  border-bottom: 1px solid transparentize(white, 0.9);
+  border-bottom: 1px solid $gray_90;
   padding: $gap;
 
   &:last-child {
@@ -70,7 +70,7 @@
     cursor: pointer;
     opacity: 0.5;
     transition: opacity 0.25s;
-    fill: $red;
+    fill: $color_danger;
     display: flex;
     align-items: center;
 

src/containers/profile/ProfileMessages/styles.module.scss

@@ -1,8 +1,8 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .messages {
   padding: $gap;
-  background: $node_bg;
+  background: $content_bg_dark;
   display: flex;
   flex-direction: column !important;
   overflow: auto;
@@ -28,7 +28,7 @@
 
 div.warning.warning {
   padding: $gap;
-  box-shadow: $red 0 0 0 2px;
+  box-shadow: $color_danger 0 0 0 2px;
   border-radius: $radius;
   font: $font_14_semibold;
   margin-bottom: $gap * 2;

src/containers/profile/ProfilePageLeft/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   @include outer_shadow;
@@ -9,7 +9,7 @@
   align-items: stretch;
   justify-content: stretch;
   flex-direction: column;
-  background: $comment_bg;
+  background: $content_bg_light;
   height: 100%;
   border-radius: $radius;
 }
@@ -39,7 +39,7 @@
   font: $font_14_regular;
   box-sizing: border-box;
   width: 100%;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
 }
 
 .description {

src/containers/profile/ProfileQuickInfo/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrapper {
   @include outer_shadow;
@@ -35,10 +35,10 @@ div.top.top {
 .status {
   font: $font_12_regular;
   margin-top: $gap;
-  color: darken(white, 50%);
+  color: $gray_50;
 
   &.active {
-    color: $olive;
+    color: $color_online;
   }
 
   &::before {

src/containers/settings/SettingsNotes/index.tsx

@@ -25,7 +25,7 @@ const List = () => {
 
   return (
     <>
-      {notes.map(note => (
+      {notes.map((note) => (
         <NoteCard
           remove={() => onRemove(note.id)}
           update={(text, callback) => update(note.id, text, callback)}
@@ -59,7 +59,6 @@ const SettingsNotes: VFC<SettingsNotesProps> = () => {
                 onClick={() => setFormIsShown(true)}
                 size="mini"
                 iconRight="plus"
-                color="secondary"
               >
                 Добавить
               </Button>

src/containers/settings/UserSettingsView/styles.module.scss

@@ -1,7 +1,4 @@
-@import "src/styles/variables";
-
-$pad_danger: mix($red, $content_bg, 70%);
-$pad_usual: mix(white, $content_bg, 10%);
+@import 'src/styles/variables';
 
 .about {
   flex: 4;
@@ -17,9 +14,6 @@ $pad_usual: mix(white, $content_bg, 10%);
   padding: 0 $gap 0;
 }
 
-.grid {
-}
-
 div.base_info.base_info {
   align-items: stretch;
 }

src/containers/sidebars/TagSidebar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   @include sidebar_content(400px);
@@ -56,7 +56,7 @@
   padding-left: $gap * 2;
 
   svg {
-    fill: transparentize(white, 0.5);
+    fill: $gray_50;
   }
 }
 
@@ -65,28 +65,20 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  background: darken($content_bg, 2%);
+  background: $content_bg_dark;
   height: 2px;
   z-index: 2;
   pointer-events: none;
   touch-action: none;
 }
 
-.bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background: lighten($content_bg, 20%);
-}
-
 .none {
   padding: 40px $gap;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: transparentize(white, 0.9);
+  color: $gray_90;
   fill: currentColor;
   font: $font_18_semibold;
   stroke: none;