@cyber-harbour/ui 1.0.35 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Header/Header.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.header(
     padding-right: 20px;
     height: 56px;
     background-color: ${theme.colors.background};
-    border-bottom: 1px solid ${theme.colors.stroke.main};
+    border-bottom: 1px solid ${theme.colors.stroke.light};
 
     &:before {
       content: '';

package/src/Core/Sidebar/Sidebar.tsx

@@ -40,8 +40,8 @@ const StyledContainer = styled.aside<StyledProps>(
     width: ${theme.sidebar.width};
     padding: 12px;
     height: 100%;
-    border-right: 1px solid ${theme.colors.stroke.light};
-    background: ${theme.colors.background};
+    border-right: 1px solid ${theme.sidebar.border};
+    background: ${theme.sidebar.background};
     ${
       $collapsed
         ? `
@@ -60,7 +60,7 @@ const StyledContainer = styled.aside<StyledProps>(
       height: 25dvh;
       transform: translateY(-100%);
       background: ${theme.colors.background};
-      border-right: 1px solid ${theme.colors.stroke.light};
+      border-right: 1px solid ${theme.sidebar.border};
 
       width: ${theme.sidebar.width};
       ${

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -16,7 +16,7 @@ const StyledDelimeter = styled.div<StyledProps>(
         min-width: 32px;
         width: 0;
 
-        border-bottom: 1px dashed ${theme.colors.stroke.main};
+        border-bottom: 1px dashed ${theme.sidebar.delimeter.color};
         margin-block: 8px;
         margin-left: 4px;
 

package/src/Graph2D/Graph2D.tsx

@@ -2,7 +2,7 @@ import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-f
 import { Graph2DProps } from './types';
 import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { forceCollide } from 'd3-force';
-import { styled } from 'styled-components';
+import { styled, useTheme } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
 import eyeLightHoverIcon from './eye_light_hover.png';
 import groupLightIcon from './group_light.png';
@@ -44,6 +44,8 @@ export const Graph2D = ({
   onLinkClick,
   onBackgroundClick,
 }: Graph2DProps) => {
+  const theme = useTheme();
+
   // Стан для підсвічування вузлів і зв'язків
   const [highlightNodes, setHighlightNodes] = useState(new Set());
   const [highlightLinks, setHighlightLinks] = useState(new Set());
@@ -227,7 +229,7 @@ export const Graph2D = ({
       // Малюємо кільце навколо вузла
       ctx.beginPath();
       ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
-      ctx.fillStyle = 'rgba(255, 165, 0, 0.3)';
+      ctx.fillStyle = theme.graph2D.ring.highlightFill;
       ctx.fill();
     },
     [config]
@@ -246,9 +248,9 @@ export const Graph2D = ({
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI, Math.PI * 2, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverTopButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverTopButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Лінія розділення між кнопками
@@ -256,16 +258,16 @@ export const Graph2D = ({
       ctx.moveTo(x - buttonRadius, y);
       ctx.lineTo(x + buttonRadius, y);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
 
       // Кнопка "згорнути" (нижня частина кільця)
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI * 2, Math.PI, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverBottomButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverBottomButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Додаємо іконку хрестика для кнопки "сховати вузол"
@@ -571,7 +573,7 @@ export const Graph2D = ({
     const gridSpacing = config.gridSpacing;
     const dotSize = config.dotSize;
 
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillStyle = theme.graph2D.grid.dotColor;
 
     for (let x = 0; x < width; x += gridSpacing) {
       for (let y = 0; y < height; y += gridSpacing) {
@@ -690,7 +692,7 @@ export const Graph2D = ({
     };
 
     // Малюємо лінію зв'язку з урахуванням місця для тексту, якщо він є
-    const lineColor = highlightLinks.has(link) ? '#ff9900' : '#999';
+    const lineColor = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     const lineWidth = highlightLinks.has(link) ? 1.5 : 0.5;
 
     if (label) {
@@ -763,7 +765,7 @@ export const Graph2D = ({
     ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
     ctx.closePath();
 
-    ctx.fillStyle = highlightLinks.has(link) ? '#ff9900' : '#999';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     ctx.fill();
     ctx.restore();
 
@@ -777,7 +779,7 @@ export const Graph2D = ({
     // Використовуємо реверсивне масштабування для тексту
     const scaledFontSize = calculateFontSize(globalScale);
     ctx.font = `${scaledFontSize}px Sans-Serif`;
-    ctx.fillStyle = '#666'; // Колір тексту
+    ctx.fillStyle = theme.graph2D.link.textColor; // Колір тексту
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
 
@@ -797,7 +799,9 @@ export const Graph2D = ({
     // Рисуємо фон для тексту для кращої читаємості
     const textWidth = ctx.measureText(label).width;
     const padding = 2;
-    ctx.fillStyle = highlightLinks.has(link) ? 'rgba(255, 230, 204, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+    ctx.fillStyle = highlightLinks.has(link)
+      ? theme.graph2D.link.highlightedTextBgColor
+      : theme.graph2D.link.textBgColor;
     ctx.fillRect(
       -textWidth / 2 - padding,
       -scaledFontSize / 2 - padding,
@@ -806,7 +810,7 @@ export const Graph2D = ({
     );
 
     // Малюємо текст
-    ctx.fillStyle = highlightLinks.has(link) ? '#663300' : '#666';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlightedTextColor : theme.graph2D.link.textColor;
     ctx.fillText(label, 0, 0);
 
     // Відновлення стану контексту
@@ -945,7 +949,9 @@ export const Graph2D = ({
         d3AlphaDecay={0.038}
         // Виділення зв'язків при наведенні
         linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
-        linkColor={(link: any) => (highlightLinks.has(link) ? '#ff9900' : '#999')}
+        linkColor={(link: any) =>
+          highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal
+        }
         onRenderFramePre={renderGrid}
         nodePointerAreaPaint={renderNodePointerAreaPaint}
         nodeCanvasObject={renderNodeCanvasObject}

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -54,6 +54,9 @@ export const StyledContainer = styled.div<StyledContainerProps>(
 `
 );
 
-const StyledMain = styled.main`
-  min-width: 0;
-`;
+const StyledMain = styled.main(
+  ({ theme }) => `
+    min-width: 0;
+    background: ${theme.colors.backgroundBase};
+  `
+);

package/src/Theme/ThemeProvider.tsx

@@ -1,11 +1,17 @@
 import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
-import { lightTheme } from './theme';
+import { lightTheme, darkTheme } from './themes';
 import { GlobalStyle } from './GlobalStyle';
 
-export const ThemeProvider = ({ children }: { children: any }) => {
+interface ThemeProviderProps {
+  children: any;
+  mode?: 'light' | 'LIGHT' | 'dark' | 'DARK';
+}
+
+export type ThemeMode = 'light' | 'LIGHT' | 'dark' | 'DARK';
+export const ThemeProvider = ({ children, mode }: ThemeProviderProps) => {
   return (
     <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-      <ThemeProviderStyled theme={lightTheme}>
+      <ThemeProviderStyled theme={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
         <GlobalStyle />
         {children}
       </ThemeProviderStyled>

package/src/Theme/index.ts

@@ -2,5 +2,5 @@ export * from './GlobalStyle';
 export * from './ThemeProvider';
 export * from './utils';
 export * from './types';
-export * from './theme';
+export * from './themes';
 export * from './componentFabric';

package/src/Theme/themes/config.ts

@@ -0,0 +1,41 @@
+// Індексні шари (z-index) для різних компонентів
+export const zIndex = {
+  dropdown: 1000,
+  sticky: 1020,
+  fixed: 1030,
+  backdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  tooltip: 1070,
+};
+
+// Розміри брейкпоінтів
+export const breakpoints = {
+  xs: 320,
+  s: 576,
+  m: 768,
+  l: 992,
+  xl: 1200,
+};
+
+// Типографія
+export const 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,
+    },
+  },
+};