npm - @cyber-harbour/ui - Versions diffs - 1.0.35 → 1.0.36 - Mend

@cyber-harbour/ui 1.0.35 → 1.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/index.d.mts +35 -3
package/dist/index.d.ts +35 -3
package/dist/index.js +149 -148
package/dist/index.js.map +1 -1
package/dist/index.mjs +135 -134
package/dist/index.mjs.map +1 -1
package/package.json +1 -1
package/src/Core/Header/Header.tsx +1 -1
package/src/Core/Sidebar/Sidebar.tsx +3 -3
package/src/Core/Sidebar/SidebarDelimeter.tsx +1 -1
package/src/Graph2D/Graph2D.tsx +20 -14
package/src/Layouts/PageLayout/PageLayout.tsx +6 -3
package/src/Theme/ThemeProvider.tsx +9 -3
package/src/Theme/index.ts +1 -1
package/src/Theme/themes/config.ts +41 -0
package/src/Theme/themes/dark.ts +703 -0
package/src/Theme/themes/index.ts +2 -0
package/src/Theme/{theme.ts → themes/light.ts} +30 -41
package/src/Theme/types.ts +24 -0

package/src/Theme/themes/dark.ts ADDED Viewed

@@ -0,0 +1,703 @@
+import { DefaultTheme } from 'styled-components/dist/types';
+import { convertPaletteToRem } from '../utils';
+import { Theme } from '../types';
+import { breakpoints, typography, zIndex } from './config';
+/**
+ * Палітра, що містить як кольори, так і розміри в px
+ * Кольори взято з теми, розміри будуть автоматично конвертовані в rem
+ */
+export const darkThemePx: Theme = {
+  mode: 'light',
+  baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
+  // Секція кольорів з теми
+  colors: {
+    background: '#0A0A0A',
+    backgroundBase: '#000000',
+    primary: {
+      main: '#158EFF',
+      light: '#80A0F5',
+      lighter: '#10253A',
+      lightest: '#020E19',
+      lightest2: 'rgba(0, 66, 236, 0.05)',
+    },
+    text: {
+      main: '#FFFFFF',
+      light: '#99989C',
+      lighter: '#99989C',
+      invert: '#101010',
+    },
+    stroke: {
+      main: '#34404C',
+      light: '#1E2226',
+      lighter: '#333333',
+    },
+    disable: '#080A0C',
+    success: '#27AE60',
+    error: '#FF3B30',
+    warning: '#F2994A',
+    info: '#2F80ED',
+  },
+  // Типографія
+  typography,
+  breakpoints,
+  zIndex,
+  line: {
+    size: 1,
+    color: '#EBEBEB',
+  },
+  button: {
+    // Варіанти кнопок з кольорами
+    fill: {
+      default: {
+        // колір default
+        default: {
+          background: '#E8EAEE',
+          text: '#FFFFFF',
+          border: ' #E8EAEE',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #E5ECFD',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #E5ECFD',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: '#EBEBEB',
+          text: '#99989C',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+      },
+      primary: {
+        // колір primary
+        default: {
+          background: '#158EFF',
+          text: '#FFFFFF',
+          border: ' #158EFF',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#4D7BF2',
+          text: '#FFFFFF',
+          border: ' #4D7BF2',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#4D7BF2',
+          text: '#FFFFFF',
+          border: ' #4D7BF2',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: '#99989C',
+          text: '#FFFFFF',
+          border: ' #E5ECFD',
+          boxShadow: 'none',
+        },
+      },
+      //default as secondary
+      secondary: {
+        // колір default
+        default: {
+          background: '#E8EAEE',
+          text: '#FFFFFF',
+          border: ' #E8EAEE',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #E5ECFD',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #E5ECFD',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: '#EBEBEB',
+          text: '#99989C',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+      },
+      error: {
+        // колір error
+        default: {
+          background: '#C93939',
+          text: '#FFFFFF',
+          border: ' #C93939',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#C53939',
+          text: '#FFFFFF',
+          border: ' #C53939',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#C53939',
+          text: '#FFFFFF',
+          border: ' #C53939',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: '#FFCCCB',
+          text: '#FFFFFF',
+          border: ' #FFCCCB',
+          boxShadow: 'none',
+        },
+      },
+    },
+    outlined: {
+      default: {
+        // колір default
+        default: {
+          background: 'transparent',
+          text: '#FFFFFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#E5ECFD',
+          text: '#FFFFFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+      },
+      primary: {
+        // колір primary
+        default: {
+          background: 'transparent',
+          text: '#158EFF',
+          border: ' #158EFF',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#E5ECFD',
+          text: '#158EFF',
+          border: ' #158EFF',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#E5ECFD',
+          text: '#158EFF',
+          border: ' #158EFF',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: ' #99989C',
+          boxShadow: 'none',
+        },
+      },
+      secondary: {
+        // колір secondary
+        default: {
+          background: 'transparent',
+          text: '#158EFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#E5ECFD',
+          text: '#158EFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#E5ECFD',
+          text: '#158EFF',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: ' #EBEBEB',
+          boxShadow: 'none',
+        },
+      },
+      error: {
+        // колір error
+        default: {
+          background: 'transparent',
+          text: '#C93939',
+          border: ' #C93939',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: '#FCF5F5',
+          text: '#C93939',
+          border: ' #C93939',
+          boxShadow: 'none',
+        },
+        active: {
+          background: '#FCF5F5',
+          text: '#C93939',
+          border: ' #C93939',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: ' #99989C',
+          boxShadow: 'none',
+        },
+      },
+    },
+    empty: {
+      default: {
+        // колір default
+        default: {
+          background: 'transparent',
+          text: '#FFFFFF',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: 'transparent',
+          text: '#80A0F5',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        active: {
+          background: 'transparent',
+          text: '#80A0F5',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+      },
+      primary: {
+        // колір primary
+        default: {
+          background: 'transparent',
+          text: '#158EFF',
+          border: 'transparent',
+          boxShadow: 'none',
+          filledIcon: {
+            background: '#E5ECFD',
+            color: '#158EFF',
+          },
+        },
+        hover: {
+          background: 'transparent',
+          text: '#80A0F5',
+          border: 'transparent',
+          boxShadow: 'none',
+          filledIcon: {
+            background: '#158EFF',
+            color: '#ffffff',
+          },
+        },
+        active: {
+          background: 'transparent',
+          text: '#80A0F5',
+          border: 'transparent',
+          boxShadow: 'none',
+          filledIcon: {
+            background: '#158EFF',
+            color: '#ffffff',
+          },
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: 'transparent',
+          boxShadow: 'none',
+          filledIcon: {
+            background: '#BEBEBE',
+            color: '#99989C',
+          },
+        },
+      },
+      //default as secondary
+      secondary: {
+        // колір default
+        default: {
+          background: 'transparent',
+          text: '#FFFFFF',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: 'rgba(0, 0, 0, 0.05)',
+          text: '#FFFFFF',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        active: {
+          background: 'rgba(0, 0, 0, 0.1)',
+          text: '#FFFFFF',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+      },
+      error: {
+        // колір error
+        default: {
+          background: 'transparent',
+          text: '#C93939',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: 'transparent',
+          text: '#FCF5F5',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        active: {
+          background: 'transparent',
+          text: '#FCF5F5',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        disabled: {
+          background: 'transparent',
+          text: '#99989C',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+      },
+    },
+    // Розміри кнопок
+    sizes: {
+      small: {
+        fontSize: 14,
+        iconSize: 16,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        borderWidth: 1,
+        gap: 10,
+      },
+      medium: {
+        fontSize: 16,
+        iconSize: 16,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        borderWidth: 1,
+        gap: 10,
+      },
+    },
+  },
+  // Компонент Sidebar
+  sidebar: {
+    background: '#0A0A0A',
+    border: '#1E2226',
+    width: 224,
+    collapsedWidth: 65,
+    text: {
+      default: '#ffffff',
+      active: '#158EFF',
+      hover: '#99989C',
+    },
+    item: {
+      default: {
+        background: 'transparent',
+        border: 'transparent',
+        padding: '10px 16px',
+        height: 40,
+      },
+      active: {
+        background: '#F3F7FF',
+        borderLeft: '2px solid #158EFF',
+        padding: '10px 16px',
+        height: 40,
+      },
+      hover: {
+        background: '#F3F3F3',
+        border: 'transparent',
+        padding: '10px 16px',
+        height: 40,
+      },
+    },
+    section: {
+      background: 'transparent',
+      padding: '16px 16px 8px',
+      title: {
+        color: '#99989C',
+        fontSize: '12px',
+        fontWeight: 600,
+      },
+    },
+    delimeter: {
+      color: '#34404C',
+      thickness: 1,
+      margin: '8px 0',
+    },
+  },
+  contextMenu: {
+    button: {
+      default: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: 'transparent',
+        text: '#158EFF',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      active: {
+        background: 'transparent',
+        text: '#158EFF',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+      },
+    },
+    delimeter: {
+      color: '#EBEBEB',
+      thickness: 1,
+      marginInline: 12,
+      marginBlock: 3,
+      style: 'solid',
+    },
+    shadow: '0px 4px 16px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)',
+    padding: 5,
+    icon: {
+      size: 7,
+    },
+  },
+  // Компонент Select
+  select: {
+    item: {
+      default: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: '#E5ECFD',
+        text: '#FFFFFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: '#E8EAEE',
+        text: '#FFFFFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+  },
+  // Компонент RowActionsMenu
+  rowActionsMenu: {
+    button: {
+      default: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: 'transparent',
+        text: '#158EFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: 'transparent',
+        text: '#158EFF',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+    delimiterColor: '#EBEBEB',
+    icon: {
+      size: 16,
+    },
+  },
+  // Компонент Input
+  input: {
+    sizes: {
+      empty: {
+        fontSize: 14,
+        paddingInline: 0,
+        paddingBlock: 0,
+        borderRadius: 0,
+        iconSize: 14,
+        height: 'auto',
+      },
+      small: {
+        fontSize: 14,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        iconSize: 14,
+        height: 40,
+      },
+      medium: {
+        fontSize: 16,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        iconSize: 16,
+        height: 40,
+      },
+    },
+    outlined: {
+      default: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+        icon: '#FFFFFF',
+      },
+      focus: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' #158EFF',
+        boxShadow: 'none',
+        icon: '#FFFFFF',
+      },
+      error: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' #C93939',
+        boxShadow: 'none',
+        icon: '#C93939',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        placeholder: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+        icon: '#99989C',
+      },
+    },
+    empty: {
+      default: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#FFFFFF',
+      },
+      focus: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#FFFFFF',
+      },
+      error: {
+        background: 'transparent',
+        text: '#FFFFFF',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#C93939',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        placeholder: '#99989C',
+        border: 'transparent',
+        boxShadow: 'none',
+        icon: '#99989C',
+      },
+    },
+  },
+  box: {
+    padding: 20,
+    borderRadius: 8,
+    border: {
+      width: 1,
+      style: 'solid',
+      color: '#EBEBEB',
+    },
+    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)',
+    },
+  },
+};
+export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/index.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export * from './light';
2	+ export * from './dark';