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

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,10 +30,10 @@
   text-transform: uppercase;
 
   &.open {
-    color: $red;
+    color: $color_offline;
   }
 
   &.closed {
-    color: $green;
+    color: $color_online;
   }
 }

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 {