Инициализация в новом репозитории

FRONT/DEV/src/const/theme/globalStyles.ts

@@ -0,0 +1,55 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+    body {
+        background-color: ${(props) => props.theme.backgroundColor};
+        color: ${(props) => props.theme.textColor};
+        box-sizing: border-box;
+        font-family: sans-serif;
+        box-sizing: border-box;
+        min-height: 100%;
+        height: 100%;
+        margin: 0;
+
+        h1, h2, h3, h4, P{
+            margin: 0;
+            display: unset;
+        }
+    }
+
+    #root{
+        width: 100%;
+        height: 100%;
+        margin: 0; 
+        padding: 0;
+    }
+
+    .react-flow__controls{
+        border-radius: 12px;
+        background-color: ${(props) => props.theme.secondary};
+        button{
+            background-color: ${(props) => props.theme.secondary};
+            border: none;
+            border-radius: 12px;
+
+            &:hover{
+                background-color: ${(props) => props.theme.primary};
+            }
+        }
+
+        .react-flow__controls-button{
+            border-radius: 12px;
+        }   
+    }
+
+    .react-flow__handle{
+        background-color: ${(props) => props.theme.nodeColor};
+    }
+
+    .unselectable {
+            user-select: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+        }
+`;

FRONT/DEV/src/const/theme/icons.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { useTheme } from 'styled-components';
+import { themeNames } from './names';
+
+import light from '@iconify/icons-ic/baseline-brightness-7';
+import dark from '@iconify/icons-ic/baseline-brightness-5';
+import system from '@iconify/icons-ic/baseline-brightness-6';
+
+export const ICONS = {
+    [themeNames[1]]: light,
+    [themeNames[2]]: dark,
+    [themeNames[3]]: system,
+
+} as const;
+
+type IconName = keyof typeof ICONS;
+
+interface IconsProps {
+    name: IconName,
+    width?: string
+    height?: string
+    setColor?: string
+}
+
+export const IconComponent = ({ name, width = "24", height = "24", setColor}: IconsProps) => {
+    const theme = useTheme();
+    return (
+        <Icon 
+            icon={ICONS[name]} 
+            width={width} 
+            height={height} 
+            color={setColor || theme.textColor} 
+        />
+    );
+}

FRONT/DEV/src/const/theme/names.ts

@@ -0,0 +1,10 @@
+import { names } from "../types/types"
+
+export const themeNames: names ={
+    1: 'light',
+    2: 'dark',
+    3: 'system'
+}
+
+const themeType = themeNames[1] || themeNames[2] || themeNames[3]
+export type ThemName = typeof themeType

FRONT/DEV/src/const/theme/theme.ts

@@ -0,0 +1,20 @@
+const baseTheme = {
+    accent: '#007ACC',
+    accentHover: '#4A90E2',
+}
+
+export const light = {
+    ...baseTheme,
+    primary: '#F3F3F3',
+    secondary: '#EDEDED',
+    background: '#E8E8E8',
+    textColor: '#000000',
+};
+
+export const dark = {
+    ...baseTheme,
+    primary: '#1E1E1E',
+    secondary: '#252525',
+    background: '#3A3A3A',
+    textColor: '#FFFFFF',
+};