removed all scss functions around colors

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

@@ -46,7 +46,7 @@
     border-radius: 0 0 0 $radius;
     opacity: 1;
     transform: translate(0, 0);
-    background: transparentize($color_danger, $amount: 0.5);
+    background: $content_bg_danger;
   }
 }
 
@@ -93,7 +93,7 @@
   padding-bottom: 0 !important;
 
   .date {
-    background: transparentize($color: $content_bg, $amount: 0.2);
+    background: $content_bg;
     border-radius: $radius 0 $radius 0;
     color: $gray_25;
   }
@@ -108,7 +108,7 @@
   bottom: 1px;
   right: 0;
   font: $font_12_regular;
-  color: transparentize($color: white, $amount: 0.8);
+  color: $gray_75;
   padding: 0 6px 2px;
   z-index: 2;
   background: $content_bg_light;

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .embed {
   padding: 0 $gap;
@@ -43,7 +43,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: transparentize($content_bg, 0.15) 50% 50%;
+  background: $content_bg_backdrop 50% 50%;
   background-size: cover;
   z-index: 15;
   border-radius: $radius;

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

@@ -21,7 +21,7 @@
   position: relative;
   z-index: 1;
   display: flex;
-  background: transparentize(black, 0.8);
+  background: $content_bg_dark;
   border-radius: 0 0 $radius $radius;
   flex-wrap: wrap;
   padding: $gap * 0.25;

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

@@ -1,11 +1,11 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .avatar {
   @include outer_shadow;
 
   width: $comment_height;
   height: $comment_height;
-  background-color: transparentize(black, 0.9);
+  background-color: $content_bg_dark;
   flex-shrink: 0;
   overflow: hidden;
   border-radius: $radius;

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

@@ -1,5 +1,5 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
-@import "src/styles/mixins";
+@import 'src/styles/mixins';
 
 .button {
   width: 48px;
@@ -14,7 +14,7 @@
 }
 
 .dots {
-  @include blur($content_bg, 5px, 0.7);
+  @include blur;
 
   padding: 5px 0 0 0;
   background: $content_bg;

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

@@ -45,7 +45,6 @@
     right: 0;
     bottom: 0;
     animation: highlight 1s 0.5s forwards;
-    background: transparentize($color_primary, 0.7);
     border-radius: $radius;
     pointer-events: none;
     touch-action: none;
@@ -74,7 +73,7 @@
 .thumb {
   flex: 0 0 $comment_height;
   border-radius: $panel_radius 0 0 $panel_radius;
-  background-color: transparentize(black, 0.9);
+  background-color: $content_bg;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .cover {
   position: absolute;
@@ -22,7 +22,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
+    background: url('../../../sprites/stripes.svg') $content_bg_backdrop;
   }
 
   img {

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes fadeIn {
   0% {
@@ -29,7 +29,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
+    background: url(../../../sprites/stripes.svg) $content_bg_backdrop;
   }
 
   @include tablet {

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

@@ -3,7 +3,7 @@
 .wrap {
   width: 100vw;
   height: 100vh;
-  background: transparentize($content_bg_darker, 0.5);
+  background: $content_bg_backdrop;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -105,11 +105,7 @@
   width: 100%;
   height: 40px;
   pointer-events: none;
-  background: linear-gradient(
+  background: linear-gradient(0deg, $color_danger 50%, transparent);
-    0deg,
-    $color_danger 50%,
-    transparentize($color_danger, 1)
-  );
   display: flex;
   align-items: center;
   justify-content: center;
@@ -136,7 +132,7 @@
 
 .shade {
   position: absolute;
-  background: transparentize($content_bg, 0.3);
+  background: $content_bg_backdrop;
   top: 0;
   left: 0;
   width: 100%;

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .fixed {
   position: fixed;
@@ -46,7 +46,7 @@
 }
 
 .overlay {
-  @include modal_backdrop();
+  @include blur;
 
   position: absolute;
   top: 0;

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

@@ -10,6 +10,8 @@
 }
 
 .wrap {
+  @include blur;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -20,8 +22,6 @@
   align-items: center;
   justify-content: center;
   animation: appear 0.25s forwards;
-
-  @include blur();
 }
 
 .title {

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

@@ -68,7 +68,7 @@
   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: $content_bg_lighter, $amount: 0);
+  background: $content_bg_lighter;
 
   &:hover {
     svg {

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

@@ -1,7 +1,7 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .shade {
-  background: linear-gradient(7deg, transparentize($content_bg, 0.05) 30px, transparentize($content_bg, 1) 250px);
+  background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
   pointer-events: none;
   touch-action: none;
 

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .cell {
   @include inner_shadow;
@@ -57,13 +57,11 @@
   .quadro &,
   .horizontal & {
     max-width: calc(50% - 15px);
-    @include blur(transparentize($content_bg, 0), 10px, 0.5)
   }
 
   .quadro &,
   .vertical & {
     max-height: calc(50% - 15px);
-    @include blur(transparentize($content_bg, 0), 10px, 0.5)
   }
 }
 

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

@@ -2,7 +2,7 @@
 
 .dropdown {
   @include outer_shadow;
-  @include blur($color_danger, 15px, 0.3);
+  @include blur($content_bg_info);
 
   width: 100%;
   height: 100%;

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

@@ -46,7 +46,7 @@
     background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
     z-index: -1;
     pointer-events: none;
-    box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;
+    box-shadow: inset $gray_90 0 1px;
     touch-action: none;
     border-radius: $radius;
   }
@@ -58,11 +58,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: linear-gradient(
+    background: linear-gradient(182deg, transparent 50%, $content_bg 95%);
-      182deg,
-      transparentize($content_bg, 1) 50%,
-      transparentize($content_bg, 0) 95%
-    );
     z-index: 4;
     pointer-events: none;
     touch-action: none;

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

@@ -69,10 +69,6 @@
     &:global(.disabled) {
       cursor: auto;
     }
-
-    &:active {
-      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
-    }
   }
 
   &:global(.stretchy) {
@@ -266,5 +262,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparentize($content_bg, 0.1);
+  background: $content_bg_backdrop;
 }

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   display: flex;
@@ -6,7 +6,6 @@
 
   & > * {
     border-radius: 0;
-    box-shadow: transparentize($color: #000000, $amount: 0.1) 1px 0;
 
     &:last-child {
       border-radius: 0 $radius $radius 0;

src/components/input/Info/style.scss

@@ -13,16 +13,16 @@
 
   &:global(.danger) {
     color: white;
-    background: transparentize($color_danger, 0.5);
+    background: $content_bg_danger;
   }
 
   &:global(.warning) {
     color: white;
-    background: transparentize($color_danger, 0.5);
+    background: $content_bg_danger;
   }
 
   &:global(.primary) {
     color: white;
-    background: transparentize($color_danger, 0.5);
+    background: $content_bg_danger;
   }
 }

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

@@ -51,12 +51,6 @@
   max-height: calc(100vh - 70px - 70px);
   max-width: 100%;
   transition: box-shadow 1s;
-  box-shadow: transparentize(black, 0.7) 0 3px 5px;
-
-  :global(.swiper-slide-active) & {
-    box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
-      transparentize(black, 0.7) 0 5px 5px, $gray_90 0 -1px 2px, $gray_90 0 -1px;
-  }
 
   @include tablet {
     padding-bottom: 0;

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

@@ -9,8 +9,4 @@
 
   min-width: 0;
   border-radius: $radius;
-
-  &.heroic {
-    @include hero_gradient;
-  }
 }

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

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: row;
   font: $font_12_semibold;
-  background: transparentize(black, 0.9);
+  background: $content_bg_dark;
   border-radius: 0 0 $radius $radius;
   align-items: center;
   text-transform: uppercase;

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

@@ -21,8 +21,8 @@
   svg {
     width: 32px;
     height: 32px;
-    fill: transparentize($color: white, $amount: 0.5);
+    fill: $gray_50;
-    stroke: transparentize($color: white, $amount: 0.5);
+    stroke: $gray_50;
     transition: fill 250ms, stroke 250ms;
   }
 

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .menu {
   position: relative;
@@ -14,7 +14,7 @@
   visibility: hidden;
   pointer-events: none;
   touch-action: none;
-  background-color: transparentize($content_bg, 0.05);
+  background-color: $content_bg_backdrop;
 
   &.visible {
     visibility: visible;
@@ -27,7 +27,7 @@
   }
 
   &.translucent {
-    @include blur($content_bg, 15px, 0.5);
+    @include blur;
   }
 }
 

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

@@ -30,11 +30,11 @@ a.item {
   padding: $gap;
   font: $font_16_semibold;
   cursor: pointer;
-  background-color: transparentize($color_primary, 1);
+  background-color: transparent;
   transition: background-color 0.25s;
 
   &:hover {
-    background-color: transparentize($color_primary, 0.5);
+    background-color: $content_bg_success;
   }
 
   &:first-child {

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

@@ -2,7 +2,7 @@
 
 .placeholder {
   height: 320px;
-  background: transparentize(black, 0.8);
+  background: $content_bg_dark;
   border: $radius $radius 0 0;
   @include outer_shadow();
 

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

@@ -9,7 +9,7 @@
   &::after {
     content: ' ';
     position: absolute;
-    background: linear-gradient(transparentize($content_bg, 1), $content_bg);
+    background: linear-gradient(transparent, $content_bg);
     border-radius: 0 0 $radius $radius;
     height: 100px;
     width: 100%;

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

@@ -1,8 +1,6 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
-  // padding: $gap;
-  //background: transparentize(black, 0.8);
   border-radius: $panel_radius;
   padding: $gap 0;
 }

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

@@ -1,34 +1,5 @@
 @import 'src/styles/variables';
 
-@mixin button {
-  margin: 0 $gap;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: $gray_50;
-    transition: fill 0.25s;
-  }
-
-  &:hover {
-    svg {
-      fill: $color_danger;
-    }
-  }
-
-  &::after {
-    content: ' ';
-    flex: 0 0 6px;
-    height: $gap;
-    width: 6px;
-    border-radius: 4px;
-    background: transparentize(black, 0.7);
-    margin-left: $gap * 2;
-  }
-}
-
 .wrap {
   display: flex;
   position: relative;
@@ -83,15 +54,6 @@
   }
 }
 
-.btn {
-  flex: 1;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  fill: $gray_50;
-}
-
 .panel {
   flex: 1;
   min-width: 0;
@@ -163,7 +125,7 @@
   padding: 0 3px;
   border-radius: 10px;
   z-index: 3;
-  color: transparentize($color: white, $amount: 0.5);
+  color: $gray_50;
   pointer-events: none;
   touch-action: none;
 }
@@ -178,6 +140,7 @@
 }
 
 .button {
-  color: white;
   @include hover_opacity;
+  color: white;
+  cursor: pointer;
 }

src/components/profile/Message/index.tsx

@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-
-import classNames from 'classnames';
-
-import { Group } from '~/components/containers/Group';
-import { ImagePresets } from '~/constants/urls';
-import markdown from '~/styles/common/markdown.module.scss';
-import { IMessage } from '~/types';
-import { formatText, getPrettyDate, getURL } from '~/utils/dom';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  message: IMessage;
-  incoming: boolean;
-}
-
-const Message: FC<IProps> = ({ message, incoming }) => {
-  return (
-    <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
-      <div className={styles.text}>
-        <Group
-          dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
-          className={markdown.wrapper}
-        />
-      </div>
-
-      <div
-        className={styles.avatar}
-        style={{ backgroundImage: `url("${getURL(message.from.photo, ImagePresets.avatar)}")` }}
-      />
-
-      <div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
-    </div>
-  );
-};
-export { Message };

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

@@ -1,100 +0,0 @@
-@import 'src/styles/variables';
-
-$incoming_color: transparentize($color_primary, 0.7);
-$outgoing_color: $content_bg_light;
-
-.message {
-  align-items: flex-end !important;
-  display: flex;
-  flex-direction: row;
-  padding: 0 0 0 42px;
-  position: relative;
-  word-break: break-word;
-
-  &::before {
-    position: absolute;
-    content: '';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 20px 0 0 20px;
-    border-color: transparent transparent transparent $content_bg_light;
-    bottom: 0;
-    right: 24px;
-  }
-
-  &.incoming {
-    flex-direction: row-reverse;
-    padding: 0 40px 0 0;
-
-    .text {
-      background: $incoming_color;
-      border-radius: $radius $radius $radius 0;
-    }
-
-    .stamp {
-      left: auto;
-      right: 42px;
-    }
-
-    &::before {
-      content: '';
-      border-width: 0 0 16px 16px;
-      border-color: transparent transparent $incoming_color transparent;
-      left: 24px;
-      right: auto;
-      z-index: 1;
-    }
-  }
-}
-
-.avatar {
-  width: 40px;
-  height: 40px;
-  flex: 0 0 40px;
-  border-radius: $radius;
-
-  background: 50% 50% no-repeat;
-  background-size: cover;
-}
-
-.text {
-  padding: $gap $gap $gap * 2 $gap;
-  background: $outgoing_color;
-  word-wrap: break-word;
-  word-break: break-word;
-  width: 100%;
-  border-radius: $radius $radius 0 $radius;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.form {
-  width: 100%;
-  border-radius: $radius $radius 0 $radius;
-  background: $outgoing_color;
-  box-sizing: border-box;
-}
-
-.stamp {
-  position: absolute;
-  opacity: 0.5;
-  // background: transparentize($color: #000000, $amount: 0.9);
-  font: $font_10_regular;
-  bottom: 0;
-  left: 42px;
-  padding: 2px $gap;
-  border-radius: $radius;
-}
-
-.restore {
-  color: $color_danger;
-  fill: $color_danger;
-}
-
-.deleted {
-  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

@@ -15,7 +15,7 @@
   box-sizing: border-box;
   border-radius: $radius;
 
-  @include blur($color_danger);
+  @include blur;
 }
 
 .title {

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .content {
   padding: $gap * 2;
@@ -17,7 +17,7 @@
   min-height: 33vh;
   padding: 40px;
   box-sizing: border-box;
-  color: transparentize($color: white, $amount: 0.8);
+  color: $gray_75;
   text-transform: uppercase;
   font: $font_16_semibold;
 }

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

@@ -1,7 +1,7 @@
 @import 'src/styles/variables';
 
 .stack {
-  background: transparentize($content_bg, 0.2);
+  background: $content_bg_backdrop;
   display: flex;
   flex-direction: row-reverse;
   width: auto;

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

@@ -19,7 +19,7 @@ $row_height: 26px;
   &:hover,
   &.selected {
     opacity: 1;
-    background: transparentize($color_primary, 0.6);
+    background: $content_bg_success;
   }
 
   &.right {

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

@@ -127,7 +127,6 @@ button.delete {
   box-shadow: inset $gray_90 1px 0, transparentize(black, 0.7) -1px 0;
   width: 24px;
   height: $tag_height;
-  background: transparentize($content_bg, 0.75);
   z-index: 24;
   border: none;
   padding: 0;

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

@@ -12,7 +12,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: transparentize($color_primary, 0.7);
+  background: $content_bg_success;
   border-radius: $radius;
   z-index: 10;
   box-shadow: inset $color_primary 0 0 0 2px;

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

@@ -25,10 +25,7 @@
     left: 0;
     height: 60px;
     width: 100%;
-    background: linear-gradient(
+    background: linear-gradient(transparent, $content_bg 90%);
-      transparentize($content_bg, 1),
-      $content_bg 90%
-    );
     pointer-events: none;
     touch-action: none;
 

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

@@ -28,7 +28,7 @@
   }
 
   &.is_scrolled {
-    @include blur();
+    @include blur;
   }
 }
 

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   justify-content: flex-start;
@@ -25,6 +25,6 @@
 }
 
 .description {
-  color: transparentize($color: white, $amount: 0.7);
+  color: $gray_25;
   font: $font_14_regular;
 }

src/containers/profile/ProfileMessages/index.tsx

@@ -1,54 +0,0 @@
-import React, { FC } from 'react';
-
-import { Anchor } from '~/components/common/Anchor';
-import { NodeNoComments } from '~/components/node/NodeNoComments';
-import { Message } from '~/components/profile/Message';
-import { useUser } from '~/hooks/auth/useUser';
-import { useMessages } from '~/hooks/messages/useMessages';
-import { useProfileContext } from '~/utils/providers/ProfileProvider';
-
-import styles from './styles.module.scss';
-
-const ProfileMessages: FC = () => {
-  const { profile, isLoading: isLoadingProfile } = useProfileContext();
-  const { user } = useUser();
-  const { messages, isLoading: isLoadingMessages } = useMessages(profile?.username || '');
-
-  if (!messages.length || isLoadingProfile)
-    return <NodeNoComments is_loading={isLoadingMessages || isLoadingProfile} />;
-
-  if (messages.length <= 0) {
-    return null;
-  }
-
-  return (
-    <div className={styles.messages}>
-      <div className={styles.warning}>
-        <p>В будущем мы собираемся убрать сообщения, превратив их в заметки.</p>
-
-        <p>
-          Вся твоя история сообщений, написанных себе, сохранится. Исчезнут только сообщения другим
-          участникам.
-        </p>
-
-        <p>
-          Давай обсудим это в <Anchor href="/boris">Борисе</Anchor>, если это так важно.
-        </p>
-      </div>
-
-      {messages
-        .filter(message => !!message.text)
-        .map((
-          message // TODO: show files / memo
-        ) => (
-          <Message message={message} incoming={user.id !== message.from.id} key={message.id} />
-        ))}
-
-      {!isLoadingMessages && messages.length > 0 && (
-        <div className={styles.placeholder}>Когда-нибудь здесь будут еще сообщения</div>
-      )}
-    </div>
-  );
-};
-
-export { ProfileMessages };

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

@@ -1,43 +0,0 @@
-@import 'src/styles/variables';
-
-.messages {
-  padding: $gap;
-  background: $content_bg_dark;
-  display: flex;
-  flex-direction: column !important;
-  overflow: auto;
-
-  & > * {
-    margin: $gap * 0.5 0;
-
-    &:last-child {
-      margin-top: 0;
-    }
-
-    &:first-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.placeholder {
-  font: $font_12_regular;
-  padding: $gap;
-  text-align: center;
-}
-
-div.warning.warning {
-  padding: $gap;
-  box-shadow: $color_danger 0 0 0 2px;
-  border-radius: $radius;
-  font: $font_14_semibold;
-  margin-bottom: $gap * 2;
-
-  p {
-    margin-bottom: $gap;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}

src/styles/_colors.scss

@@ -45,9 +45,10 @@ $content_bg_light: lighten($brown, 2%);
 $content_bg_lighter: lighten($brown, 4%);
 $content_bg_lightest: lighten($brown, 6%);
 
-$content_bg_success: mix($brown, $blue, 90%);
+$content_bg_success: transparentize($wisegreen, 0.5);
-$content_bg_info: mix($brown, $wisegreen, 90%);
+$content_bg_info: transparentize($blue, 0.5);
-$content_bg_danger: mix($red, $brown, 50%);
+$content_bg_danger: transparentize($red, 0.5);
+$content_bg_backdrop: transparentize($content_bg, 0.2);
 
 // white shades (move to --vars)
 $white: white;

src/styles/_mixins.scss

@@ -58,7 +58,7 @@
     left: 0;
     height: 120px;
     width: 100%;
-    background: linear-gradient(transparentize($color, 1), $color);
+    background: linear-gradient(transparent, $color);
     border-radius: $radius;
     pointer-events: none;
     touch-action: none;
@@ -116,15 +116,13 @@
   }
 }
 
-@mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
+@mixin blur($color: $content_bg_backdrop, $radius: 15px) {
-  background: transparentize($color, math.div($opacity, 1.5));
+  background: $color;
-  backdrop-filter: blur($radius);
-  -webkit-backdrop-filter: blur($radius);
 
   @include can_backdrop {
     backdrop-filter: blur($radius);
     -webkit-backdrop-filter: blur($radius);
-    background-color: transparentize($color, $opacity);
+    background-color: $color;
   }
 }
 
@@ -156,7 +154,7 @@
 }
 
 @mixin sidebar {
-  @include blur();
+  @include blur;
 }
 
 @mixin sidebar_content($width: 400px) {
@@ -179,11 +177,6 @@
   cursor: pointer;
 }
 
-@mixin hero_gradient {
-  $color: mix($color_primary, $content_bg, 30%);
-  background: linear-gradient(170deg, lighten($color, 10%), $color);
-}
-
 @mixin flow_grid {
   width: 100%;
   box-sizing: border-box;
@@ -256,20 +249,6 @@
   }
 }
 
-@mixin modal_backdrop {
-  @include blur();
-  background: transparentize($content_bg, 0.3)
-    url('../../src/sprites/noise.png');
-
-  @include can_backdrop {
-    @supports (backdrop-filter: blur(5px)) and
-      (background-image: url('../../src/sprites/noise.png')) {
-      background: transparentize($content_bg, 0.5)
-        url('../../src/sprites/noise.png');
-    }
-  }
-}
-
 @mixin hover_opacity($initial_opacity: 0.5) {
   opacity: $initial_opacity;
   transition: opacity 0.25s;

src/styles/common/markdown.module.scss

@@ -11,7 +11,7 @@ $margin: 1em;
     margin-bottom: $margin;
     color: $color_primary;
     font-size: 0.9em;
-    background-color: transparentize($color_primary, 0.9);
+    background-color: $content_bg_success;
 
     p {
       margin: 0 $margin;
@@ -34,7 +34,7 @@ $margin: 1em;
     margin-bottom: $margin;
 
     code {
-      color: transparentize($color_primary, 0.1);
+      color: $content_bg_info;
       font-family: monospace;
       white-space: pre-wrap;
     }
@@ -43,10 +43,10 @@ $margin: 1em;
   p,
   li {
     code {
-      background-color: transparentize($color_primary, 0.9);
+      background-color: $content_bg_info;
       padding: 2px 4px;
       border-radius: 0.3em;
-      color: transparentize($color_primary, 0.1);
+      color: $gray_25;
       font-size: 0.8em;
     }
   }