@cyber-harbour/ui 1.0.35 → 1.0.37

package/src/Theme/{theme.ts → themes/light.ts}

@@ -1,8 +1,8 @@
 import { DefaultTheme } from 'styled-components/dist/types';
 
-import 'styled-components';
-import { convertPaletteToRem } from './utils';
-import { Theme } from './types';
+import { convertPaletteToRem } from '../utils';
+import { Theme } from '../types';
+import { breakpoints, typography, zIndex } from './config';
 
 /**
  * Палітра, що містить як кольори, так і розміри в px
@@ -14,6 +14,7 @@ export const lightThemePx: Theme = {
   // Секція кольорів з теми
   colors: {
     background: '#ffffff',
+    backgroundBase: '#F7F8FC',
     primary: {
       main: '#0042EC',
       light: '#80A0F5',
@@ -39,42 +40,9 @@ export const lightThemePx: Theme = {
     info: '#2F80ED',
   },
   // Типографія
-  typography: {
-    fontFamily:
-      'Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;',
-    lineHeight: 1.49,
-    // Розміри текстових елементів
-    variants: {
-      h1: {
-        fontSize: 22,
-      },
-      h2: {
-        fontSize: 16,
-      },
-      h3: {
-        fontSize: 14,
-      },
-      body: {
-        fontSize: 12,
-      },
-    },
-  },
-  breakpoints: {
-    xs: 320,
-    s: 576,
-    m: 768,
-    l: 992,
-    xl: 1200,
-  },
-  zIndex: {
-    dropdown: 1000,
-    sticky: 1020,
-    fixed: 1030,
-    backdrop: 1040,
-    modal: 1050,
-    popover: 1060,
-    tooltip: 1070,
-  },
+  typography,
+  breakpoints,
+  zIndex,
   line: {
     size: 1,
     color: '#EBEBEB',
@@ -383,14 +351,14 @@ export const lightThemePx: Theme = {
           boxShadow: 'none',
         },
         hover: {
-          background: 'rgba(0, 0, 0, 0.05)',
-          text: '#101010',
+          background: 'transparent',
+          text: '#0042EC',
           border: 'transparent',
           boxShadow: 'none',
         },
         active: {
-          background: 'rgba(0, 0, 0, 0.1)',
-          text: '#101010',
+          background: 'transparent',
+          text: '#0042EC',
           border: 'transparent',
           boxShadow: 'none',
         },
@@ -455,12 +423,13 @@ export const lightThemePx: Theme = {
   // Компонент Sidebar
   sidebar: {
     background: '#FFFFFF',
+    border: '#EBEBEB',
     width: 224,
     collapsedWidth: 65,
     text: {
-      default: '#101010',
+      default: '#535353',
       active: '#0042EC',
-      hover: '#535353',
+      hover: '#0042EC',
     },
     item: {
       default: {
@@ -470,13 +439,13 @@ export const lightThemePx: Theme = {
         height: 40,
       },
       active: {
-        background: '#F3F7FF',
+        background: '#E5ECFD',
         borderLeft: '2px solid #0042EC',
         padding: '10px 16px',
         height: 40,
       },
       hover: {
-        background: '#F3F3F3',
+        background: '#F3F7FF',
         border: 'transparent',
         padding: '10px 16px',
         height: 40,
@@ -492,7 +461,7 @@ export const lightThemePx: Theme = {
       },
     },
     delimeter: {
-      color: '#EBEBEB',
+      color: '#C7C5C5',
       thickness: 1,
       margin: '8px 0',
     },
@@ -525,7 +494,7 @@ export const lightThemePx: Theme = {
       },
     },
     delimeter: {
-      color: '#EBEBEB',
+      color: '#C7C5C5',
       thickness: 1,
       marginInline: 12,
       marginBlock: 3,
@@ -594,7 +563,7 @@ export const lightThemePx: Theme = {
         boxShadow: 'none',
       },
     },
-    delimiterColor: '#EBEBEB',
+    delimiterColor: '#C7C5C5',
     icon: {
       size: 16,
     },
@@ -706,8 +675,32 @@ export const lightThemePx: Theme = {
     },
     background: '#FFFFFF',
   },
+  // Graph2D
+  graph2D: {
+    ring: {
+      highlightFill: 'rgba(255, 165, 0, 0.3)',
+    },
+    button: {
+      stroke: '#e5e5e5',
+      normalFill: 'rgba(255, 255, 255, 0.8)',
+      hoverFill: 'rgba(230, 230, 230, 0.9)',
+    },
+    grid: {
+      dotColor: 'rgba(0, 0, 0, 0.5)',
+    },
+    link: {
+      normal: '#999',
+      highlighted: '#ff9900',
+      textColor: '#666',
+      highlightedTextColor: '#663300',
+      textBgColor: 'rgba(255, 255, 255, 0.8)',
+      highlightedTextBgColor: 'rgba(255, 230, 204, 0.9)',
+    },
+  },
+  contentLoader: {
+    foreground: '#535353',
+    background: '#99989C',
+  },
 };
 
-// Конвертуємо всі розміри з px в rem
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;
-export const darkTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -62,6 +62,7 @@ export type Theme = {
   baseSize: number;
   colors: {
     background: string;
+    backgroundBase: string;
     primary: {
       main: string;
       light: string;
@@ -118,6 +119,7 @@ export type Theme = {
   };
   sidebar: {
     background: string;
+    border: string;
     width: number;
     collapsedWidth: number;
     text: {
@@ -205,6 +207,32 @@ export type Theme = {
       color: string;
     };
   };
+  // Graph2D component
+  graph2D: {
+    ring: {
+      highlightFill: string;
+    };
+    button: {
+      stroke: string;
+      normalFill: string;
+      hoverFill: string;
+    };
+    grid: {
+      dotColor: string;
+    };
+    link: {
+      normal: string;
+      highlighted: string;
+      textColor: string;
+      highlightedTextColor: string;
+      textBgColor: string;
+      highlightedTextBgColor: string;
+    };
+  };
+  contentLoader: {
+    foreground: string;
+    background: string;
+  };
 };
 
 //TODO check and refactoring