@cyber-harbour/ui 1.0.34 → 1.0.36

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',
@@ -455,6 +423,7 @@ export const lightThemePx: Theme = {
   // Компонент Sidebar
   sidebar: {
     background: '#FFFFFF',
+    border: '#EBEBEB',
     width: 224,
     collapsedWidth: 65,
     text: {
@@ -706,8 +675,28 @@ 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)',
+    },
+  },
 };
 
-// Конвертуємо всі розміри з 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,28 @@ 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;
+    };
+  };
 };
 
 //TODO check and refactoring