add sansevieria theme

src/constants/themes/index.ts

@@ -1,6 +1,7 @@
 export enum Theme {
   Default = 'Default',
   Horizon = 'Horizon',
+  Sansevieria = 'Sansevieria',
 }
 
 interface ThemeColors {
@@ -28,4 +29,13 @@ export const themeColors: Record<Theme, ThemeColors> = {
     ],
     background: 'url("/images/horizon_bg.svg") 50% 50% / cover rgb(28, 30, 38)',
   },
+  [Theme.Sansevieria]: {
+    name: 'Сансевирия',
+    colors: [
+      'linear-gradient(165deg, #f4e7aa -50%, #a23500 150%)',
+      'linear-gradient(165deg, #ff7e56 -50%, #280003 150%)',
+      'linear-gradient(170deg, #476695, #22252d)',
+    ],
+    background: '#1f2625',
+  },
 };

src/containers/settings/ThemeSwitcher/index.tsx

@@ -28,7 +28,7 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = () => {
         >
           <Group>
             <div className={styles.palette}>
-              {item.colors.map((color) => (
+              {[...item.colors].reverse().map((color) => (
                 <div
                   key={color}
                   className={styles.sample}

src/styles/_global.scss

@@ -1,5 +1,6 @@
 @use './themes/default' as theme_default;
 @use './themes/horizon' as theme_horizon;
+@use './themes/sanseviria' as theme_sanseviria;
 
 @import 'src/styles/variables';
 
@@ -12,6 +13,7 @@
 
 @include theme_default.apply();
 @include theme_horizon.apply();
+@include theme_sanseviria.apply();
 
 html {
   min-height: 100vh;

src/styles/themes/_sanseviria.scss

@@ -0,0 +1,49 @@
+@mixin apply {
+  :root.theme-sansevieria {
+    --color_primary: #e28166;
+    --color_danger: rgb(180, 109, 99);
+    --color_online: #1eb1ac;
+    --color_offline: #a3584b;
+    --color_link: #dbd58a;
+    --color_like: #d56c68;
+    --color_flow: rgb(123, 60, 65);
+    --color_lab: #2c2f4c;
+    --color_boris: #5c827f;
+    --danger_gradient: linear-gradient(165deg, #ff7e56 -50%, #280003 150%);
+    --info_gradient: linear-gradient(170deg, #476695, #22252d);
+    --warning_gradient: linear-gradient(165deg, #f4e7aa -50%, #a23500 150%);
+    --primary_gradient: linear-gradient(170deg, #fd9bce -150%, #59361c);
+    --magic_gradient: linear-gradient(260deg, #e95678 -50%, #ff7549 150%);
+    --global_loader_gradient: linear-gradient(90deg, #c9ab8e, #694b5a, #43040a);
+    --flow_gradient: var(--primary_gradient);
+    --lab_gradient: var(--info_gradient);
+    --content_bg: #1f2625;
+    --content_bg_dark: #181e1c;
+    --content_bg_darker: #151a13;
+    --content_bg_light: #2b3130;
+    --content_bg_lighter: #2f3530;
+    --content_bg_lightest: #414842;
+    --content_bg_success: #e956784d;
+    --content_bg_info: #fab7954d;
+    --content_bg_danger: #ff334480;
+    --content_bg_backdrop: url() #1f2625dd;
+    --content_bg_hero: url() #4d322677;
+    --white: #fff;
+    --gray_25: #ffffffbf;
+    --gray_50: #ffffff80;
+    --gray_75: #ffffff40;
+    --gray_90: #ffffff0d;
+    --page-background: url() #101315 fixed;
+    --page-background-top: linear-gradient(
+      #050505 -150%,
+      #25b0bc03 100px,
+      #25b0bc00 200px
+    );
+    --boris-background: linear-gradient(
+      170deg,
+      #080332 -150%,
+      #54302850 250px,
+      #00000000 600px
+    );
+  }
+}

src/utils/providers/ThemeProvider.tsx

@@ -21,6 +21,7 @@ const ThemeContext = createContext({
 const themeClass: Record<Theme, string> = {
   [Theme.Default]: '',
   [Theme.Horizon]: 'theme-horizon',
+  [Theme.Sansevieria]: 'theme-sansevieria',
 };
 
 const ThemeProvider: FC<ProvidersProps> = ({ children }) => {