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

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 {