Добавил тему "Веспера"

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,17 @@ 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'
+    | 'flow'
+    | 'lab'
+    | 'outline-white'
+    | 'flat';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   title?: string;
@@ -65,7 +81,7 @@ const Button: FC<IButtonProps> = memo(
         children,
         iconOnly,
         round,
-      ]
+      ],
     );
 
     const loaderSize = useMemo(() => {
@@ -79,9 +95,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 +120,7 @@ const Button: FC<IButtonProps> = memo(
         </button>
       </Tippy>
     );
-  }
+  },
 );
 
 export { Button };

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

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 @keyframes pulse {
   0% {
@@ -25,7 +25,7 @@
   cursor: pointer;
   margin: 0;
 
-  background: $button_bg_color;
+  background: $color_primary;
   border-radius: $radius;
 
   fill: white;
@@ -36,7 +36,8 @@
   align-items: center;
   justify-content: center;
 
-  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
+  transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s,
+    background-color 0.5s;
 
   input {
     position: absolute;
@@ -68,10 +69,6 @@
     &:global(.disabled) {
       cursor: auto;
     }
-
-    &:active {
-      box-shadow: transparentize(#e933a5, 0.6) 0 0 0;
-    }
   }
 
   &:global(.stretchy) {
@@ -81,7 +78,7 @@
 
   &:global(.disabled),
   &:global(.grey) {
-    background: transparentize(white, 0.9);
+    background: $gray_90;
     color: white;
   }
 
@@ -117,26 +114,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 {
@@ -233,22 +230,31 @@
 
 .primary {
   @include outer_shadow;
-  background: $red_gradient_alt;
+  background: $primary_gradient;
 }
 
-.secondary {
+.danger {
   @include outer_shadow;
-  background: $green_gradient;
+  background: $danger_gradient;
+}
+
+.info {
+  @include outer_shadow;
+  background: $info_gradient;
 }
 
 .lab {
-  background: $blue;
+  background: $lab_gradient;
+}
+
+.flow {
+  background: $flow_gradient;
 }
 
 .flat {
   box-shadow: none;
-  background: $comment_bg;
-  color: darken(white, 20%);
+  background: $content_bg_light;
+  color: $gray_25;
 }
 
 .loading {
@@ -260,5 +266,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: transparentize($content_bg, 0.1);
+  background: $content_bg_backdrop;
 }