Removed unused colors

src/components/auth/login/LoginDialogButtons/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .footer {
   padding: $gap;

src/components/auth/oauth/LoginSocialRegisterButtons/index.tsx

@@ -8,7 +8,7 @@ interface IProps {}
 
 const LoginSocialRegisterButtons: FC<IProps> = () => (
   <div className={styles.wrap}>
-    <Button color="secondary">Впустите меня!</Button>
+    <Button>Впустите меня!</Button>
   </div>
 );
 

src/components/auth/restore/RestoreInvalidCode/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .error_shade {
   @include outer_shadow();
@@ -19,17 +19,17 @@
   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/components/auth/restore/RestoreSent/index.tsx

@@ -18,9 +18,7 @@ const RestoreSent: VFC<RestoreSentProps> = ({ onClose }) => (
 
     <div />
 
-    <Button color="secondary" onClick={onClose}>
-      Отлично!
-    </Button>
+    <Button onClick={onClose}>Отлично!</Button>
   </Group>
 );
 

src/components/auth/restore/RestoreSent/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .shade {
   @include outer_shadow();
@@ -19,9 +19,9 @@
   text-transform: uppercase;
   font: $font_18_semibold;
   text-align: center;
-  color: $wisegreen;
+  color: $color_primary;
 
   svg {
-    fill: $wisegreen;
+    fill: $color_primary;
   }
 }

src/components/auth/restore/RestoreSuccess/index.tsx

@@ -20,9 +20,7 @@ const RestoreSuccess: VFC<RestoreSuccessProps> = ({ username, onClick }) => (
 
     <div />
 
-    <Button color="secondary" onClick={onClick}>
-      Ура!
-    </Button>
+    <Button onClick={onClick}>Ура!</Button>
   </Group>
 );
 

src/components/auth/restore/RestoreSuccess/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .shade {
   @include outer_shadow();
@@ -19,9 +19,9 @@
   text-transform: uppercase;
   font: $font_18_semibold;
   text-align: center;
-  color: $wisegreen;
+  color: $color_primary;
 
   svg {
-    fill: $wisegreen;
+    fill: $color_primary;
   }
 }

src/components/bars/PlayerBar/styles.module.scss

@@ -12,7 +12,7 @@
   display: flex;
   border-radius: $radius $radius 0 0;
   align-items: center;
-  background: lighten($content_bg, 6%);
+  background: $content_bg_lightest;
   position: absolute;
   top: 0;
   left: 0;
@@ -45,7 +45,7 @@
   svg {
     width: 32px;
     height: 32px;
-    fill: darken(white, 50%);
+    fill: $gray_50;
     stroke: none;
   }
 }
@@ -68,7 +68,7 @@
 }
 
 .title {
-  color: darken(white, 50%);
+  color: $gray_50;
   font: $font_14_semibold;
   white-space: nowrap;
   overflow: hidden;
@@ -88,7 +88,7 @@
     left: 0;
     width: 100%;
     height: 2px;
-    background: darken(white, 50%);
+    background: $gray_50;
     position: absolute;
     border-radius: 2px;
     opacity: 0.5;
@@ -100,7 +100,7 @@
   left: 0;
   width: 100%;
   height: 6px;
-  background: darken(white, 50%);
+  background: $gray_50;
   position: absolute;
   border-radius: 2px;
 }

src/components/bars/SubmitBar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: fixed;
@@ -14,7 +14,7 @@
 }
 
 .button {
-  background: $red_gradient;
+  background: $danger_gradient;
   width: $bar_height;
   height: $bar_height;
   border-radius: $bar_height * 0.5;
@@ -34,12 +34,12 @@
   }
 
   .lab & {
-    background: $blue_gradient;
+    background: $info_gradient;
   }
 }
 
 .panel {
-  background: lighten($content_bg, 4%);
+  background: $content_bg_lighter;
   position: absolute;
   bottom: 0;
   z-index: 1;

src/components/boris/BorisContactItem/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .item {
   display: flex;
@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: stretch;
   text-decoration: none;
-  color: darken(white, 50%);
+  color: $gray_50;
   padding: $gap;
   min-height: 42px;
 }

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   padding: $gap * 0.5 0;
@@ -12,7 +12,7 @@
 .time {
   font: $font_12_regular;
   line-height: 17px;
-  color: transparentize(white, 0.7)
+  color: $gray_75;
 }
 
 .subject {
@@ -30,7 +30,7 @@
   text-transform: uppercase;
 
   &.open {
-    color: $red;
+    color: $color_danger;
   }
 
   &.closed {

src/components/boris/BorisSuperpowers/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: grid;
@@ -16,5 +16,5 @@
 
 .subtitle {
   font: $font_12_regular;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
 }

src/components/boris/BorisUIDemo/index.tsx

@@ -18,8 +18,8 @@ const BorisUIDemo: FC<IProps> = () => {
       <div className={markdown.wrapper}>
         <h1>UI</h1>
         <p>
-          Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
-          разработке
+          Простая демонстрация элементов интерфейса. Используется, в основном,
+          как подсказка при разработке
         </p>
 
         <h2>Инпуты</h2>
@@ -27,8 +27,18 @@ const BorisUIDemo: FC<IProps> = () => {
         <form autoComplete="off">
           <Group>
             <InputText title="Обычный инпут" handler={setText} value={text} />
-            <InputText title="Инпут с ошибкой" error="Ошибка" handler={setText} value={text} />
-            <InputText title="Пароль" type="password" handler={setText} value={text} />
+            <InputText
+              title="Инпут с ошибкой"
+              error="Ошибка"
+              handler={setText}
+              value={text}
+            />
+            <InputText
+              title="Пароль"
+              type="password"
+              handler={setText}
+              value={text}
+            />
           </Group>
         </form>
 
@@ -38,7 +48,6 @@ const BorisUIDemo: FC<IProps> = () => {
 
         <Group horizontal className={styles.sample}>
           <Button>Primary</Button>
-          <Button color="secondary">Secondary</Button>
           <Button color="outline">Outline</Button>
           <Button color="gray">Gray</Button>
           <Button color="link">Link</Button>

src/components/boris/BorisUIDemo/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .card {
   flex: 3;
@@ -6,7 +6,7 @@
   position: relative;
   z-index: 1;
   padding: 20px 30px;
-  background-color: lighten($content_bg, 4%);
+  background-color: $content_bg_lighter;
 }
 
 .sample {

src/components/charts/StatsCountdownCard/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .content {
   width: 100%;
@@ -7,7 +7,7 @@
   align-items: center;
   justify-content: center;
   font: $font_18_semibold;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
 }
 
 span.val {

src/components/comment/CommentAvatar/styles.module.scss

@@ -1,16 +1,20 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 @keyframes appear {
-  0% { opacity: 0 }
-  100% { opacity: 1 }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .popper {
   @include outer_shadow;
 
-  background-color: darken($content_bg, 4%);
+  background-color: $content_bg_darker;
   padding: $gap;
-  box-sizing:border-box;
+  box-sizing: border-box;
   touch-action: none;
   pointer-events: none;
   border-radius: $radius;

src/components/comment/CommentContent/styles.module.scss

@@ -1,5 +1,5 @@
-@import "src/styles/variables";
-@import "~flexbin/flexbin";
+@import 'src/styles/variables';
+@import '~flexbin/flexbin';
 
 .wrap {
   @include row_shadow;
@@ -23,7 +23,7 @@
   touch-action: none;
   transition: opacity 0.25s, transform 0.25s;
   cursor: pointer;
-  background: $red;
+  background: $color_danger;
   z-index: 2;
 
   & > div {
@@ -46,7 +46,7 @@
     border-radius: 0 0 0 $radius;
     opacity: 1;
     transform: translate(0, 0);
-    background: transparentize($red, $amount: 0.5);
+    background: transparentize($color_danger, $amount: 0.5);
   }
 }
 
@@ -95,7 +95,7 @@
   .date {
     background: transparentize($color: $content_bg, $amount: 0.2);
     border-radius: $radius 0 $radius 0;
-    color: transparentize(white, 0.2);
+    color: $gray_25;
   }
 }
 
@@ -111,7 +111,7 @@
   color: transparentize($color: white, $amount: 0.8);
   padding: 0 6px 2px;
   z-index: 2;
-  background: $comment_bg;
+  background: $content_bg_light;
   border-radius: 4px;
   pointer-events: none;
   touch-action: none;

src/components/comment/CommentDistance/styles.module.scss

@@ -1,8 +1,8 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .bar {
   font: $font_12_regular;
-  color: darken(white, 60%);
+  color: $gray_50;
   user-select: none;
   width: 100%;
   text-align: center;

src/components/comment/CommentForm/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -49,7 +49,7 @@
   position: absolute;
   bottom: 0;
   left: 50%;
-  background: $red;
+  background: $color_danger;
   z-index: 10;
   font: $font_12_regular;
   box-sizing: border-box;

src/components/comment/CommentMenu/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: absolute;
@@ -9,12 +9,6 @@
   z-index: 10;
   outline: none;
   cursor: pointer;
-
-  &:hover {
-    .dot {
-      background: $secondary;
-    }
-  }
 }
 
 @keyframes appear {
@@ -57,6 +51,6 @@
   }
 
   &:hover {
-    background: $primary;
+    background: $color_primary;
   }
 }

src/components/comment/CommentTextBlock/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .text {
   padding: 0 $gap;
@@ -26,12 +26,12 @@
   }
 
   :global(.green) {
-    color: $wisegreen;
+    color: $color_primary;
   }
 
   & > :last-child::after {
     display: inline-block;
-    content: " ";
+    content: ' ';
     height: 1em;
     width: 120px;
     flex: 0 0 120px;

src/components/common/CornerMenu/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: absolute;
@@ -9,12 +9,6 @@
   z-index: 10;
   outline: none;
   cursor: pointer;
-
-  &:hover {
-    .dot {
-      background: $secondary;
-    }
-  }
 }
 
 @keyframes appear {
@@ -57,6 +51,6 @@
   }
 
   &:hover {
-    background: $primary;
+    background: $color_primary;
   }
 }

src/components/common/LoadingProgress/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes spin {
   0% {
@@ -34,5 +34,5 @@
   transform: translate(-50%, 0);
   padding: 2px 10px;
   border-radius: 10px;
-  background: $cyan_gradient;
+  background: $magic_gradient;
 }

src/components/common/ScrollHelperBottom/styles.module.scss

@@ -1,9 +1,9 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .helper {
   position: fixed;
   bottom: 0;
-  background: radial-gradient($red, transparent) 50% 24px no-repeat;
+  background: radial-gradient($color_danger, transparent) 50% 24px no-repeat;
   background-size: 100% 48px;
   display: none;
   width: calc(100% - 20px);

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,17 +1,27 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes highlight {
-  0% { opacity: 0.75; }
-  25% { opacity: 0.5; }
-  50% { opacity: 0.75; }
-  75% { opacity: 0; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 0.75;
+  }
+  25% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.75;
+  }
+  75% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .wrap {
   @include outer_shadow;
 
-  background: $comment_bg;
+  background: $content_bg_light;
   min-height: $comment_height;
   display: flex;
   position: relative;
@@ -35,7 +45,7 @@
     right: 0;
     bottom: 0;
     animation: highlight 1s 0.5s forwards;
-    background: transparentize($wisegreen, 0.7);
+    background: transparentize($color_primary, 0.7);
     border-radius: $radius;
     pointer-events: none;
     touch-action: none;
@@ -73,14 +83,15 @@
     flex-direction: row;
     flex: 0 0 40px;
     padding: 8px;
-    box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, inset rgba(0, 0, 0, 0.1) -1px -1px;
+    box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px,
+      inset rgba(0, 0, 0, 0.1) -1px -1px;
     border-radius: $panel_radius $panel_radius 0 0;
   }
 }
 
 div.thumb_image {
   height: $comment_height;
-  background: transparentize(white, 0.97) no-repeat 50% 50%;
+  background: $gray_90 no-repeat 50% 50%;
   border-radius: $panel_radius 0 0 $panel_radius;
   background-size: cover;
   flex: 0 0 $comment_height;

src/components/containers/Zone/styles.module.scss

@@ -1,7 +1,6 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
-$pad_danger: mix($red, $content_bg, 70%);
-$pad_usual: mix(white, $content_bg, 10%);
+$pad_usual: $content_bg_lightest;
 
 .title {
   position: relative;
@@ -19,7 +18,7 @@ $pad_usual: mix(white, $content_bg, 10%);
     text-transform: uppercase;
 
     .danger & {
-      background: $pad_danger;
+      background: $color_danger_slate;
     }
   }
 }
@@ -31,7 +30,7 @@ $pad_usual: mix(white, $content_bg, 10%);
   position: relative;
 
   &.danger {
-    box-shadow: inset $pad_danger 0 0 0 2px;
+    box-shadow: inset $color_danger_slate 0 0 0 2px;
   }
 
   &.with_title {

src/components/dialogs/BetterScrollDialog/styles.module.scss

@@ -1,9 +1,9 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   width: 100vw;
   height: 100vh;
-  background: transparentize(darken($content_bg, 4%), 0.5);
+  background: transparentize($content_bg_darker, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,7 +42,7 @@
 .footer {
   @include outer_shadow();
 
-  background: darken($content_bg, 2%);
+  background: $content_bg_dark;
 }
 
 .body {
@@ -66,7 +66,7 @@
 .close {
   @include outer_shadow;
 
-  background: lighten($content_bg, 4%);
+  background: $content_bg_lighter;
   width: 36px;
   height: 36px;
   position: absolute;
@@ -88,7 +88,7 @@
   }
 
   &:hover {
-    background-color: $red;
+    background-color: $color_danger;
     transform: translate(50%, 0) scale(1.25);
   }
 
@@ -105,7 +105,11 @@
   width: 100%;
   height: 40px;
   pointer-events: none;
-  background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
+  background: linear-gradient(
+    0deg,
+    $color_danger 50%,
+    transparentize($color_danger, 1)
+  );
   display: flex;
   align-items: center;
   justify-content: center;

src/components/dialogs/Tabs/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -22,7 +22,7 @@
   border: none;
 
   &.active {
-    background: lighten($content_bg, 4%);
+    background: $content_bg_lighter;
   }
 }
 

src/components/editors/EditorButtons/index.tsx

@@ -32,7 +32,7 @@ const EditorButtons: FC = () => {
         <Button
           title={isTablet ? undefined : 'Сохранить'}
           iconRight="check"
-          color={values.is_promoted ? 'primary' : 'lab'}
+          color={values.is_promoted ? 'danger' : 'info'}
           disabled={isSubmitting}
           type="submit"
         />

src/components/editors/EditorConfirmClose/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 @keyframes appear {
   0% {
@@ -37,6 +37,6 @@
 
 .subtitle {
   font: $font_12_medium;
-  color: darken(white, 50%);
+  color: $gray_50;
   max-width: 300px;
 }

src/components/editors/EditorPublicSwitch/index.tsx

@@ -12,14 +12,14 @@ interface IProps extends IEditorComponentProps {}
 const EditorPublicSwitch: FC<IProps> = () => {
   const { values, setFieldValue } = useNodeFormContext();
 
-  const onChange = useCallback(() => setFieldValue('is_promoted', !values.is_promoted), [
-    values.is_promoted,
-    setFieldValue,
-  ]);
+  const onChange = useCallback(
+    () => setFieldValue('is_promoted', !values.is_promoted),
+    [values.is_promoted, setFieldValue],
+  );
 
   return (
     <Button
-      color={values.is_promoted ? 'primary' : 'lab'}
+      color={values.is_promoted ? 'danger' : 'info'}
       type="button"
       size="giant"
       label={

src/components/editors/EditorUploadButton/index.tsx

@@ -31,18 +31,25 @@ const EditorUploadButton: FC<IProps> = ({
       event.preventDefault();
 
       const files = Array.from(event.target.files || []).filter(
-        file => !type || getFileType(file) === type
+        (file) => !type || getFileType(file) === type,
       );
 
       uploadFiles(files);
     },
-    [type, uploadFiles]
+    [type, uploadFiles],
   );
 
-  const color = values.is_promoted ? 'primary' : 'lab';
+  const color = values.is_promoted ? 'danger' : 'info';
 
   return (
-    <Button type="button" round size="giant" className={styles.wrap} label={label} color={color}>
+    <Button
+      type="button"
+      round
+      size="giant"
+      className={styles.wrap}
+      label={label}
+      color={color}
+    >
       <Icon icon={icon} size={24} />
       <input type="file" onChange={onInputChange} accept={accept} multiple />
     </Button>

src/components/editors/EditorUploadCoverButton/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   @include outer_shadow();
@@ -9,7 +9,7 @@
   border-radius: $radius;
   cursor: pointer;
   transition: opacity 0.5s;
-  background: lighten($content_bg, 4%);
+  background: $content_bg_lighter;
   flex: 0 1 $upload_button_height * 4;
   display: flex;
   align-items: center;
@@ -68,11 +68,11 @@
   justify-content: center;
   box-shadow: inset rgba(255, 255, 255, 0.05) 1px 1px, rgba(0, 0, 0, 0.3) -1px 0;
   border-radius: $upload_button_height;
-  background: transparentize($color: lighten($content_bg, 4%), $amount: 0);
+  background: transparentize($color: $content_bg_lighter, $amount: 0);
 
   &:hover {
     svg {
-      fill: $red;
+      fill: $color_danger;
     }
   }
 

src/components/editors/VideoEditor/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .preview {
   padding-top: 56.25%;
@@ -6,7 +6,6 @@
   border-radius: $radius;
   background: 50% 50% no-repeat;
   background-size: cover;
-  // background: darken($color: $content_bg, $amount: 2%);
 }
 
 .input_wrap {
@@ -34,6 +33,6 @@
   }
 
   &:global(.active) {
-    background: $red;
+    background: $color_danger;
   }
 }

src/components/flow/FlowCellMenu/styles.module.scss

@@ -1,8 +1,8 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .dropdown {
   @include outer_shadow;
-  @include blur($red, 15px, 0.3);
+  @include blur($color_danger, 15px, 0.3);
 
   width: 100%;
   height: 100%;

src/components/flow/FlowRecentItem/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .item {
   display: flex;
@@ -30,7 +30,7 @@
       width: 12px;
       height: 12px;
       border-radius: 100%;
-      background: $red;
+      background: $color_danger;
       box-shadow: $content_bg 0 0 0 5px;
       position: absolute;
       right: -2px;
@@ -61,7 +61,7 @@
 .comment {
   font: $font_12_regular;
   margin-top: 4px;
-  color: darken(white, 50%);
+  color: $gray_50;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/components/flow/FlowSearchResults/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   flex: 1;
@@ -12,7 +12,7 @@
   flex-direction: column;
   flex: 1;
   opacity: 0.3;
-  fill: transparentize(white, 0.7);
+  fill: $gray_75;
   stroke: none;
   min-height: 250px;
 }

src/components/flow/FlowSwiperHero/styles.module.scss

@@ -163,5 +163,5 @@ img.preview {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: transparentize(white, 0.95);
+  color: $gray_90;
 }

src/components/flow/HeroPlaceholder/style.scss

@@ -1,10 +1,11 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .container {
   height: 280px;
   width: 100%;
-  background: transparentize(white, 0.9)
-    url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg') no-repeat 50% 30%;
+  background: $gray_90
+    url('http://37.192.131.144/hero/photos/photo-20140527-1639766.jpg')
+    no-repeat 50% 30%;
   background-size: cover;
   opacity: 0.7;
   will-change: transform;

src/components/input/ArcProgress/styles.module.scss

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .icon {
-  fill: $red;
+  fill: $color_danger;
   stroke: none;
 
   //path {

src/components/input/Button/index.tsx

@@ -1,4 +1,10 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FC,
+  memo,
+  useMemo,
+} from 'react';
 
 import Tippy from '@tippyjs/react';
 import classnames from 'classnames';
@@ -14,7 +20,16 @@ type IButtonProps = DetailedHTMLProps<
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat';
+  color?:
+    | 'primary'
+    | 'danger'
+    | 'info'
+    | 'outline'
+    | 'link'
+    | 'gray'
+    | 'lab'
+    | 'outline-white'
+    | 'flat';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   title?: string;
@@ -65,7 +80,7 @@ const Button: FC<IButtonProps> = memo(
         children,
         iconOnly,
         round,
-      ]
+      ],
     );
 
     const loaderSize = useMemo(() => {
@@ -79,9 +94,23 @@ const Button: FC<IButtonProps> = memo(
     return (
       <Tippy content={label || ''} disabled={!label}>
         <button className={computedClassName} {...props}>
-          {iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
+          {iconLeft && (
+            <Icon
+              icon={iconLeft}
+              size={20}
+              key={0}
+              className={styles.icon_left}
+            />
+          )}
           {!!title ? <span>{title}</span> : children}
-          {iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
+          {iconRight && (
+            <Icon
+              icon={iconRight}
+              size={20}
+              key={2}
+              className={styles.icon_right}
+            />
+          )}
           {loading && (
             <div className={styles.loading}>
               <LoaderCircle size={loaderSize} />
@@ -90,7 +119,7 @@ const Button: FC<IButtonProps> = memo(
         </button>
       </Tippy>
     );
-  }
+  },
 );
 
 export { Button };

src/components/input/Button/styles.module.scss

@@ -25,7 +25,7 @@
   cursor: pointer;
   margin: 0;
 
-  background: $primary;
+  background: $color_primary;
   border-radius: $radius;
 
   fill: white;
@@ -82,7 +82,7 @@
 
   &:global(.disabled),
   &:global(.grey) {
-    background: transparentize(white, 0.9);
+    background: $gray_90;
     color: white;
   }
 
@@ -118,26 +118,26 @@
 
   &.outline {
     background: transparent;
-    box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
-    color: transparentize(white, 0.8);
+    box-shadow: inset $gray_75 0 0 0 2px;
+    color: $gray_75;
 
     svg {
-      fill: transparentize(white, 0.8);
+      fill: $gray_75;
     }
   }
 
   &.outline-white {
     background: transparent;
-    box-shadow: inset transparentize(white, 0) 0 0 0 2px;
-    color: transparentize(white, 0);
+    box-shadow: inset $white 0 0 0 2px;
+    color: $white;
 
     svg {
-      fill: transparentize(white, 0);
+      fill: $white;
     }
   }
 
   &.gray {
-    background: lighten($content_bg, 8%);
+    background: $content_bg_lightest;
   }
 
   &.link {
@@ -234,12 +234,17 @@
 
 .primary {
   @include outer_shadow;
-  background: $red_gradient_alt;
+  background: $color_primary_gradient;
 }
 
-.secondary {
+.danger {
   @include outer_shadow;
-  background: $red;
+  background: $danger_gradient;
+}
+
+.info {
+  @include outer_shadow;
+  background: $info_gradient;
 }
 
 .lab {
@@ -248,8 +253,8 @@
 
 .flat {
   box-shadow: none;
-  background: $comment_bg;
-  color: darken(white, 20%);
+  background: $content_bg_light;
+  color: $gray_25;
 }
 
 .loading {

src/components/input/Info/style.scss

@@ -9,20 +9,20 @@
   font: $font_14_regular;
   line-height: 1.2em;
   padding: $gap;
-  background: transparentize(white, 0.9);
+  background: $gray_90;
 
   &:global(.danger) {
     color: white;
-    background: transparentize($red, 0.5);
+    background: transparentize($color_danger, 0.5);
   }
 
   &:global(.warning) {
     color: white;
-    background: transparentize($red, 0.5);
+    background: transparentize($color_danger, 0.5);
   }
 
   &:global(.primary) {
     color: white;
-    background: transparentize($red, 0.5);
+    background: transparentize($color_danger, 0.5);
   }
 }

src/components/input/InputText/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .input {
   display: flex;
@@ -6,7 +6,7 @@
   color: inherit;
 
   &.has_error {
-    color: $red;
+    color: $color_danger;
   }
 
   &.has_prefix {
@@ -29,7 +29,8 @@
   }
 }
 
-.suffix, .prefix{
+.suffix,
+.prefix {
   fill: currentColor;
   stroke: currentColor;
 

src/components/input/InputWrapper/styles.module.scss

@@ -17,11 +17,12 @@
   }
 
   &.has_error {
-    box-shadow: inset $red 0 0 0 1px;
+    box-shadow: inset $color_danger 0 0 0 1px;
   }
 }
 
-.error, .title {
+.error,
+.title {
   pointer-events: none;
   touch-action: none;
   user-select: none;
@@ -37,7 +38,7 @@
   padding: 0 $gap * 0.5;
   border-radius: 4px;
   color: white;
-  background-color: $red;
+  background-color: $color_danger;
   bottom: 0;
   right: $gap * 0.5;
   transform: translate(0, 50%);
@@ -57,12 +58,14 @@
   color: $input_grey_color;
   text-transform: uppercase;
 
-  .focused &, .not_empty & {
+  .focused &,
+  .not_empty & {
     transform: translate(0, -100%) scale(0.75);
   }
 
-  .focused.has_error &, .not_empty.has_error & {
+  .focused.has_error &,
+  .not_empty.has_error & {
     color: white;
-    background-color: $red;
+    background-color: $color_danger;
   }
 }

src/components/input/Toggle/styles.module.scss

@@ -1,11 +1,11 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .toggle {
   height: 24px;
   width: 48px;
   flex: 0 0 48px;
   border-radius: 12px;
-  background-color: transparentize(white, 0.9);
+  background-color: $gray_90;
   display: flex;
   border: none;
   outline: none;
@@ -33,7 +33,7 @@
     height: 18px;
     width: 18px;
     border-radius: 11px;
-    background-color: darken(white, 50%);
+    background-color: $gray_50;
     transform: translate(0, 0);
     transition: transform 0.25s, color 0.25s, background-color;
   }
@@ -45,11 +45,11 @@
     }
 
     &.primary {
-      background-color: $wisegreen;
+      background-color: $color_primary;
     }
 
     &.secondary {
-      background-color: transparentize(white, 0.85);
+      background-color: $gray_90;
     }
 
     &.lab {
@@ -57,7 +57,7 @@
     }
 
     &.danger {
-      background-color: $red;
+      background-color: $color_danger;
     }
 
     &.monochrome {

src/components/lab/LabBottomPanel/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .wrap {
   padding: $gap $lab_gap $lab_gap;
@@ -10,13 +10,14 @@
 
 .timestamp {
   font: $font_12_regular;
-  color: darken(white, 40%);
+  color: $gray_50;
 }
 
-.comments, .like {
+.comments,
+.like {
   flex: 0;
   font: $font_16_semibold;
-  color: darken(white, 50%);
+  color: $gray_50;
   fill: currentColor;
   stroke: none;
   column-gap: $gap !important;
@@ -25,6 +26,6 @@
   padding-left: $gap;
 
   &.active {
-    color: $red;
+    color: $color_danger;
   }
 }

src/components/lab/LabHero/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .wrap {
   min-width: 0;
@@ -7,7 +7,7 @@
 }
 
 .star {
-  fill: darken(white, 76%);
+  fill: $gray_75;
   flex: 0 0 32px;
 }
 
@@ -16,14 +16,14 @@
   text-overflow: ellipsis;
   line-height: 22px;
   word-break: break-all;
-  color: darken(white, 40%);
+  color: $gray_50;
 
-  @include clamp(2, 22px)
+  @include clamp(2, 22px);
 }
 
 .description {
   font: $font_10_regular;
-  color: darken(white, 50%);
+  color: $gray_50;
   padding-top: 4px;
 }
 

src/components/lab/LabImage/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .wrapper {
   display: flex;
@@ -21,7 +21,6 @@
       font-size: 32px;
     }
   }
-
 }
 
 .slide {
@@ -56,9 +55,7 @@
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
-    transparentize(black, 0.7) 0 5px 5px,
-    transparentize(white, 0.95) 0 -1px 2px,
-    transparentize(white, 0.95) 0 -1px;
+      transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
   }
 
   @include tablet {

src/components/lab/LabNodeTitle/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .wrap {
   padding: $lab_gap - $gap $lab_gap 0;
@@ -30,6 +30,6 @@
 }
 
 .star {
-  fill: darken(white, 50%);
+  fill: $gray_50;
   flex: 0 0 24px;
 }

src/components/main/Footer/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .footer {
   display: flex;
@@ -8,7 +8,7 @@
   border-radius: 0 0 $radius $radius;
   align-items: center;
   text-transform: uppercase;
-  color: darken(white, 80%);
+  color: $gray_75;
   padding-top: 2px;
   box-sizing: border-box;
 

src/components/main/UserButton/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: relative;
@@ -30,7 +30,7 @@
   background: white;
   border-radius: $radius;
   margin-left: ($gap + 2px) !important;
-  background: 50% 50% no-repeat $wisegreen;
+  background: 50% 50% no-repeat $color_primary;
   display: flex;
   align-items: center;
   justify-content: center;

src/components/media/AudioPlayer/styles.module.scss

@@ -67,7 +67,7 @@
     opacity: 1;
     font-size: 12px;
     padding-right: 140px;
-    color: transparentize(white, 0.7);
+    color: $gray_75;
   }
 }
 
@@ -92,7 +92,7 @@
     position: absolute;
     height: 10px;
     border-radius: 5px;
-    background: transparentize(white, 0.95);
+    background: $gray_90;
     width: 100%;
     top: 5px;
     left: 0;
@@ -100,7 +100,7 @@
 }
 
 .bar {
-  background: $green_gradient;
+  background: $color_primary_gradient;
   position: absolute;
   height: 10px;
   left: 0;

src/components/menu/HorizontalMenu/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .menu {
   @include inner_shadow;
@@ -21,9 +21,9 @@
 
 .item {
   flex: 0 0 auto;
-  padding: $gap * 0.5 $gap  $gap * 0.5 $gap;
+  padding: $gap * 0.5 $gap $gap * 0.5 $gap;
   fill: currentColor;
-  color: darken(white, 50%);
+  color: $gray_50;
   transition: color 0.25s;
   cursor: pointer;
   border-radius: $radius;
@@ -46,15 +46,15 @@
     color: white;
 
     &.green {
-      background: $green_gradient;
+      background: $color_primary_gradient;
     }
 
     &.orange {
-      background: $red_gradient;
+      background: $danger_gradient;
     }
 
     &.yellow {
-      background: $yellow_gradient;
+      background: $warning_gradient;
     }
   }
 }

src/components/menu/SeparatedMenu/styles.module.scss

@@ -1,5 +1,5 @@
-@import "src/styles/mixins";
-@import "src/styles/variables";
+@import 'src/styles/mixins';
+@import 'src/styles/variables';
 
 .menu {
   flex: 0;
@@ -27,14 +27,14 @@
     position: absolute;
     width: 3px;
     height: 16px;
-    background: darken($content_bg, 1%);
+    background: $content_bg_darker;
     display: flex;
     top: 5px;
     right: -$gap * 2 - 2px;
     border-radius: 2px;
 
     @include tablet {
-      right : -$gap - 1px;
+      right: -$gap - 1px;
     }
   }
 }

src/components/menu/VerticalMenu/styles.module.scss

@@ -1,5 +1,5 @@
-@import "src/styles/variables";
-@import "src/styles/mixins";
+@import 'src/styles/variables';
+@import 'src/styles/mixins';
 
 .menu {
   border-radius: $radius;
@@ -30,11 +30,11 @@ a.item {
   padding: $gap;
   font: $font_16_semibold;
   cursor: pointer;
-  background-color: transparentize($secondary, 1);
+  background-color: transparentize($color_primary, 1);
   transition: background-color 0.25s;
 
   &:hover {
-    background-color: transparentize($secondary, 0.5);
+    background-color: transparentize($color_primary, 0.5);
   }
 
   &:first-child {

src/components/node/CommendDeleted/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -15,9 +15,9 @@
 }
 
 .button {
-  color: $red !important;
+  color: $color_danger !important;
 
   svg {
-    fill: $red !important;
+    fill: $color_danger !important;
   }
 }

src/components/node/MenuButton/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .button {
   fill: white;
@@ -24,6 +24,6 @@
 
 .description {
   font: $font_12_regular;
-  color: transparentize(white, 0.6);
+  color: $gray_75;
   white-space: nowrap;
 }

src/components/node/NodeAuthorBlock/styles.module.scss

@@ -1,10 +1,10 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 div.block {
   @include inner_shadow_active;
 
   cursor: pointer;
-  background: $inset_bg;
+  background: linear-gradient(135deg, $content_bg_dark, $content_bg);
   padding: $gap;
   border-radius: $radius;
   display: flex;

src/components/node/NodeDeletedBadge/styles.module.scss

@@ -1,10 +1,10 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .badge {
   padding: $gap;
   text-align: center;
   border-radius: $radius;
-  color: $red;
+  color: $color_danger;
   padding: $gap * 4 $gap;
   text-transform: uppercase;
   font: $font_18_semibold;

src/components/node/NodeImageBlockPlaceholder/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .placeholder {
   height: 320px;
@@ -11,6 +11,6 @@
   justify-content: center;
 
   svg {
-    fill: transparentize(white, 0.95);
+    fill: $gray_90;
   }
 }

src/components/node/NodeImageSwiperBlock/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .wrapper {
   border-radius: $radius;
@@ -15,7 +15,7 @@
     left: 50%;
     bottom: $gap * 2;
     transform: translate(-50%, 0);
-    background: darken($content_bg, 4%);
+    background: $content_bg_darker;
     width: auto;
     padding: 5px 10px;
     border-radius: 10px;
@@ -82,7 +82,6 @@
       }
     }
   }
-
 }
 
 .slide.slide {
@@ -127,9 +126,7 @@
 
   :global(.swiper-slide-active) & {
     box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
-      transparentize(black, 0.7) 0 5px 5px,
-      transparentize(white, 0.95) 0 -1px 2px,
-      transparentize(white, 0.95) 0 -1px;
+      transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
   }
 
   @include tablet {

src/components/node/NodeNoComments/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   user-select: none;
@@ -49,7 +49,7 @@
   transform: translate(-50%, -50%);
   font: $font_18_semibold;
   text-transform: uppercase;
-  color: darken(white, 75%);
+  color: $gray_75;
   height: 20px;
   margin-top: 0 !important;
   text-align: center;

src/components/node/NodeRelatedItem/styles.module.scss

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .item {
-  background: lighten($content_bg, 2%) 50% 50% no-repeat;
+  background: $content_bg_light 50% 50% no-repeat;
   padding-bottom: 100%;
   border-radius: $cell_radius;
   cursor: pointer;
@@ -29,7 +29,8 @@ div.thumb {
   }
 }
 
-.letters, .title {
+.letters,
+.title {
   @include outer_shadow;
 
   position: absolute;
@@ -41,7 +42,7 @@ div.thumb {
   width: 100%;
   height: 100%;
   font: $font_24_semibold;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
   border-radius: $cell_radius;
 }
 
@@ -53,7 +54,7 @@ div.thumb {
   justify-content: flex-start;
   word-break: break-word;
   overflow: hidden;
-  color: transparentize(white, 0.3);
+  color: $gray_25;
 
   .large & {
     font: $font_14_semibold;

src/components/node/NodeTitle/styles.module.scss

@@ -8,13 +8,13 @@
   justify-content: center;
 
   svg {
-    fill: darken(white, 50%);
+    fill: $gray_50;
     transition: fill 0.25s;
   }
 
   &:hover {
     svg {
-      fill: $red;
+      fill: $color_danger;
     }
   }
 
@@ -75,7 +75,7 @@
 
 .name {
   font: $font_12_regular;
-  color: transparentize(white, 0.5);
+  color: $gray_50;
   text-transform: lowercase;
 
   @include tablet {
@@ -89,7 +89,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  fill: transparentize(white, 0.5);
+  fill: $gray_50;
 }
 
 .panel {
@@ -134,16 +134,16 @@
     opacity: 1;
 
     svg {
-      fill: $red;
+      fill: $color_danger;
     }
 
     .like_count {
-      color: $red;
+      color: $color_danger;
     }
   }
 
   &:hover {
-    fill: $red;
+    fill: $color_danger;
     animation: pulse 0.75s infinite;
 
     .like_count {
@@ -159,7 +159,7 @@
   bottom: 0;
   opacity: 1;
   transition: opacity 0.25s, color 0.25s;
-  background: $node_bg;
+  background: $content_bg_dark;
   padding: 0 3px;
   border-radius: 10px;
   z-index: 3;

src/components/notifications/NotificationBubble/styles.module.scss

@@ -1,6 +1,6 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
-$notification_color: darken($content_bg, 2%);
+$notification_color: $content_bg_dark;
 
 @keyframes appear {
   0% {

src/components/profile/Message/styles.module.scss

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
-$incoming_color: transparentize($wisegreen, 0.7);
-$outgoing_color: $comment_bg;
+$incoming_color: transparentize($color_primary, 0.7);
+$outgoing_color: $content_bg_light;
 
 .message {
   align-items: flex-end !important;
@@ -18,7 +18,7 @@ $outgoing_color: $comment_bg;
     height: 0;
     border-style: solid;
     border-width: 20px 0 0 20px;
-    border-color: transparent transparent transparent $comment_bg;
+    border-color: transparent transparent transparent $content_bg_light;
     bottom: 0;
     right: 24px;
   }
@@ -88,12 +88,12 @@ $outgoing_color: $comment_bg;
 }
 
 .restore {
-  color: $red;
-  fill: $red;
+  color: $color_danger;
+  fill: $color_danger;
 }
 
 .deleted {
-  background: mix($red, $content_bg, 50%);
+  background: mix($color_danger, $content_bg, 50%);
   border-radius: $radius $radius $radius 0;
   padding: $gap * 0.5;
   z-index: 2;

src/components/profile/ProfileAccountsError/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: absolute;
@@ -15,7 +15,7 @@
   box-sizing: border-box;
   border-radius: $radius;
 
-  @include blur($red);
+  @include blur($color_danger);
 }
 
 .title {

src/components/profile/ProfileAvatar/index.tsx

@@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
   onChangePhoto: (file: File) => void;
 }
 
-const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
+const ProfileAvatar: FC<ProfileAvatarProps> = ({
+  photo,
+  onChangePhoto,
+  canEdit,
+  size,
+}) => {
   const onInputChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       if (!event.target.files?.length) {
@@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
 
       onChangePhoto(event.target.files[0]);
     },
-    [onChangePhoto]
+    [onChangePhoto],
   );
 
-  const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined;
+  const backgroundImage = photo
+    ? `url("${getURL(photo, ImagePresets.avatar)}")`
+    : undefined;
 
   return (
     <div
@@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
       }}
     >
       {canEdit && <input type="file" onInput={onInputChange} />}
-      {canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
+      {canEdit && (
+        <Button
+          color="info"
+          iconLeft="photo_add"
+          round
+          iconOnly
+          className={styles.button}
+        />
+      )}
     </div>
   );
 };

src/components/profile/ProfileAvatar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .avatar {
   @include outer_shadow();
@@ -21,7 +21,7 @@
   }
 }
 
-.can_edit {
+.button {
   position: absolute;
   right: -4px;
   bottom: -4px;

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
               Отмена
             </Button>
 
-            <Button color="secondary" type="submit">
-              Сохранить
-            </Button>
+            <Button type="submit">Сохранить</Button>
           </div>
         </Form>
       </SettingsProvider>

src/components/sidebar/SidebarStack/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .stack {
   background: transparentize($content_bg, 0.2);
@@ -15,7 +15,7 @@
 }
 
 .card {
-  box-shadow: transparentize(white, 0.9) -1px 0, transparentize(black, 0.7) -5px 0 15px;
+  box-shadow: $gray_90 -1px 0, transparentize(black, 0.7) -5px 0 15px;
   border-radius: $radius 0 0 $radius;
   display: flex;
   flex-direction: column;

src/components/tags/TagAutocomplete/styles.module.scss

@@ -1,8 +1,12 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes appear {
-  0% { opacity: 0 }
-  100% { opacity: 100 }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 100;
+  }
 }
 
 $row_height: 24px;
@@ -16,7 +20,7 @@ $row_height: 24px;
   right: -2px;
   width: calc(100vw - 15px);
   max-width: 300px;
-  background: darken($content_bg, 2%);
+  background: $content_bg_dark;
   z-index: 10;
   border-radius: 4px;
   animation: appear 0.25s forwards;

src/components/tags/TagAutocompleteRow/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 $row_height: 26px;
 
@@ -16,13 +16,14 @@ $row_height: 26px;
   text-overflow: ellipsis;
   overflow: hidden;
 
-  &:hover, &.selected {
+  &:hover,
+  &.selected {
     opacity: 1;
-    background: transparentize($wisegreen, 0.6);
+    background: transparentize($color_primary, 0.6);
   }
 
   &.right {
-    color: lighten($wisegreen, 4%);
+    color: lighten($color_primary, 4%);
     opacity: 1;
   }
 

src/components/tags/TagWrapper/styles.module.scss

@@ -8,7 +8,7 @@ $big: 1.2;
   overflow: hidden;
   cursor: default;
   height: $tag_height;
-  background: $tag_bg;
+  background: $content_bg_light;
   border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5);
   font: $font_14_semibold;
   align-self: flex-start;
@@ -42,29 +42,29 @@ $big: 1.2;
 
   &:global(.is_editing) {
     cursor: pointer;
-    background-color: lighten($tag_bg, 10%);
+    background-color: lighten($content_bg_light, 10%);
   }
 
   &:global(.red) {
-    background: $red_gradient;
+    background: $danger_gradient;
   }
 
   &:global(.blue) {
-    background: $blue_gradient;
+    background: $info_gradient;
   }
 
   &:global(.green) {
-    background: $green_gradient;
+    background: $color_primary_gradient;
   }
 
   &:global(.black) {
     background: transparentize(black, 0.7);
     box-shadow: none;
-    color: transparentize(white, 0.6);
+    color: $gray_75;
     font: $font_14_medium;
 
     .hole::after {
-      background: transparentize(white, 0.98);
+      background: $gray_90;
     }
   }
 
@@ -124,8 +124,7 @@ $big: 1.2;
 }
 
 button.delete {
-  box-shadow: inset transparentize(white, 0.9) 1px 0,
-    transparentize(black, 0.7) -1px 0;
+  box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
   width: 24px;
   height: $tag_height;
   background: transparentize($content_bg, 0.75);

src/components/upload/AudioUpload/styles.module.scss

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
-  background: lighten($content_bg, 4%);
+  background: $content_bg_lighter;
   // padding-bottom: 100%;
   border-radius: $radius;
   position: relative;
@@ -72,6 +72,6 @@
 
   &:hover {
     opacity: 1;
-    background-color: $red;
+    background-color: $color_danger;
   }
 }

src/components/upload/ImageUpload/styles.module.scss

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
-  background: lighten($content_bg, 4%);
+  background: $content_bg_lighter;
   padding-bottom: 100%;
   border-radius: $radius;
   position: relative;
@@ -18,7 +18,7 @@
 
   &:global(.is_uploading) {
     .thumb {
-       filter: blur(10px);
+      filter: blur(10px);
     }
   }
 }
@@ -81,6 +81,6 @@
 
   &:hover {
     opacity: 1;
-    background-color: $red;
+    background-color: $color_danger;
   }
 }

src/components/upload/UploadDropzone/styles.module.scss

@@ -12,17 +12,18 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: transparentize($wisegreen, 0.7);
+  background: transparentize($color_primary, 0.7);
   border-radius: $radius;
   z-index: 10;
-  box-shadow: inset $wisegreen 0 0 0 2px;
+  box-shadow: inset $color_primary 0 0 0 2px;
   display: none;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   touch-action: none;
 
-  &.active, :global(.dragging) & {
+  &.active,
+  :global(.dragging) & {
     display: flex;
   }
 }
@@ -30,5 +31,5 @@
 svg.icon {
   width: auto;
   height: 72px;
-  fill: $wisegreen;
+  fill: $color_primary;
 }

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;

src/layouts/BorisLayout/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -7,7 +7,6 @@
   flex-direction: column;
 }
 
-
 .grid {
   padding: $gap;
 }
@@ -117,40 +116,6 @@
     text-transform: uppercase;
     margin-bottom: $gap * 2;
   }
-
-  &__container {
-    background: darken($content_bg, 4%);
-    border-radius: 0 $radius $radius 0;
-    box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
-    padding: $gap;
-    box-sizing: border-box;
-    flex: 0 0 auto;
-
-    @include tablet {
-      border-radius: 0;
-    }
-  }
-
-  &__title {
-    font: $font_12_semibold;
-    text-transform: uppercase;
-    opacity: 0.3;
-    margin-top: 16px !important;
-  }
-
-  &__about {
-    line-height: 1.4em;
-
-    p {
-      margin-bottom: $gap;
-    }
-  }
-
-  &__wrap {
-    @include tablet {
-      display: none;
-    }
-  }
 }
 
 .content {
@@ -162,7 +127,3 @@
     border-radius: 0;
   }
 }
-
-.super_powers {
-  padding: $gap * 2 0;
-}

src/layouts/FlowLayout/styles.module.scss

@@ -1,6 +1,6 @@
-@use "sass:math";
+@use 'sass:math';
 
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   max-width: 2000px;
@@ -36,7 +36,7 @@ $cols: math.div($content_width, $cell);
   grid-row-end: 2;
   grid-column-start: 1;
   grid-column-end: -1;
-  background: darken($content_bg, 2%);
+  background: $content_bg_dark;
   border-radius: $radius;
   display: flex;
   align-items: center;
@@ -53,7 +53,7 @@ $cols: math.div($content_width, $cell);
   overflow: hidden;
   position: relative;
 
-  @media(max-width: $flow_hide_recents) {
+  @media (max-width: $flow_hide_recents) {
     grid-column-start: 1;
     grid-row-end: span 1;
   }

src/layouts/SettingsLayout/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .container {
   width: 100vw;
@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: row;
   margin-top: $page_top_offset;
-  background: darken($content_bg, 2%);
+  background: $content_bg_dark;
 
   @include tablet {
     margin-top: 0;

src/styles/_colors.scss

@@ -1,39 +1,47 @@
-// palette
-$red: #ff3344;
+// palette (use inside)
 $yellow: #ffd60f;
 $dark_blue: #592071;
 $blue: #582cd0;
 $green: #00d2b9;
-$olive: #8bc12a;
-$orange: #ff7549;
 $wisegreen: #007962;
-$lightgreen: lighten(adjust_hue($wisegreen, -30deg), 10%);
+$olive: #8bc12a;
+$red: #ff3344;
+$orange: #ff7549;
+$color_primary: #007962;
+$lightgreen: lighten(adjust_hue(#007962, -30deg), 10%);
 $soft_blue: #3c75ff;
+$color_danger_slate: mix(#ff3344, #23201f, 60%);
 
-// main definitions
-$primary: $red;
-$secondary: $wisegreen;
+// main definitions (move to --vars)
+$color_primary: $wisegreen;
+$color_danger: $red;
+$color_online: $olive;
+$color_link: $red;
+$color_flow: $red;
+$color_lab: $blue;
 
-// gradients
-$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
-$yellow_gradient: linear-gradient(165deg, $yellow -50%, $red 150%);
-$blue_gradient: linear-gradient(170deg, $blue, $dark_blue);
-$green_gradient: linear-gradient(170deg, $lightgreen -50%, $wisegreen 150%);
-$cyan_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
-$red_gradient_alt: linear-gradient(170deg, #ff4545, #d2004c);
+// gradients (move to --vars)
+$danger_gradient: linear-gradient(165deg, $orange -50%, $color_danger 150%);
+$info_gradient: linear-gradient(170deg, $blue, $dark_blue);
+$warning_gradient: linear-gradient(165deg, $yellow -50%, $color_danger 150%);
+$color_primary_gradient: linear-gradient(
+  170deg,
+  $lightgreen -50%,
+  $color_primary 150%
+);
+$magic_gradient: linear-gradient(260deg, $soft_blue -50%, #7b2653 150%);
 
-$text_color: white;
-$scroll_color: $red_gradient;
-$scroll_inactive_opacity: 0.5;
-
-// --color-base
+// backgrounds (move to --vars)
 $content_bg: #23201f;
+$content_bg_dark: darken($content_bg, 2%);
+$content_bg_darker: darken($content_bg, 4%);
+$content_bg_light: lighten($content_bg, 2%);
+$content_bg_lighter: lighten($content_bg, 4%);
+$content_bg_lightest: lighten($content_bg, 6%);
 
-// --color-base-light
-$comment_bg: lighten($content_bg, 2%);
-$tag_bg: lighten($content_bg, 2%);
-$menu_bg: lighten($content_bg, 2%);
-
-// --color-base-dark
-$node_bg: darken($content_bg, 2%);
-$inset_bg: linear-gradient(135deg, darken($content_bg, 2%), $content_bg);
+// white shades (move to --vars)
+$white: white;
+$gray_25: mix($content_bg, white, 25%);
+$gray_50: mix($content_bg, white, 50%);
+$gray_75: mix($content_bg, white, 75%);
+$gray_90: mix($content_bg, white, 92%);