@cyber-harbour/ui 1.0.74 → 1.0.75

package/src/Theme/themes/dark.ts

@@ -1,1005 +0,0 @@
-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: 'dark',
-  baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
-  // Секція кольорів з теми
-  colors: {
-    background: '#0F1317',
-    backgroundBase: '#000000',
-    primary: {
-      main: '#158EFF',
-      light: '#80A0F5',
-      lighter: '#10253A',
-      lightest: '#020E19',
-      lightest2: 'rgba(0, 66, 236, 0.05)',
-    },
-    text: {
-      main: '#FFFFFF',
-      light: '#99989C',
-      lighter: '#535353',
-      invert: '#101010',
-      success: '#31B083',
-      error: '#C93939',
-    },
-    stroke: {
-      main: '#34404C',
-      light: '#1E2226',
-      lighter: '#333333',
-    },
-    disable: '#080A0C',
-    success: '#27AE60',
-    error: '#C93939',
-    warning: '#F2994A',
-    info: '#2F80ED',
-  },
-  // Типографія
-  typography,
-  breakpoints,
-  zIndex,
-  line: {
-    size: 1,
-    color: '#1E2226',
-  },
-  button: {
-    // Варіанти кнопок з кольорами
-    fill: {
-      default: {
-        // колір default
-        default: {
-          background: '#1E2226',
-          text: '#FFFFFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #10253A',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #10253A',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#1E2226',
-          text: '#99989C',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-      },
-      primary: {
-        // колір primary
-        default: {
-          background: '#158EFF',
-          text: '#FFFFFF',
-          border: ' #158EFF',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#44a5ff',
-          text: '#FFFFFF',
-          border: ' #44a5ff',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#44a5ff',
-          text: '#FFFFFF',
-          border: ' #44a5ff',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#99989C',
-          text: '#FFFFFF',
-          border: ' #10253A',
-          boxShadow: 'none',
-        },
-      },
-      //default as secondary
-      secondary: {
-        // колір default
-        default: {
-          background: '#1E2226',
-          text: '#FFFFFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #10253A',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #10253A',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#1E2226',
-          text: '#99989C',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-      },
-      error: {
-        // колір error
-        default: {
-          background: '#C93939',
-          text: '#FFFFFF',
-          border: ' #C93939',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#d46161',
-          text: '#FFFFFF',
-          border: ' #d46161',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#d46161',
-          text: '#FFFFFF',
-          border: ' #d46161',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#511616',
-          text: '#FFFFFF',
-          border: ' #511616',
-          boxShadow: 'none',
-        },
-      },
-      soft: {
-        // колір default
-        default: {
-          background: '#80A0F5',
-          text: '#FFFFFF',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: '#10253A',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: '#10253A',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#EBEBEB',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-      light: {
-        // колір default
-        default: {
-          background: '#535353',
-          text: '#FFFFFF',
-          border: '#535353',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#99989C',
-          text: '#FFFFFF',
-          border: '#99989C',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#99989C',
-          text: '#FFFFFF',
-          border: '#99989C',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#EBEBEB',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-    },
-    outlined: {
-      default: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#FFFFFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#FFFFFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-      },
-      primary: {
-        // колір primary
-        default: {
-          background: 'transparent',
-          text: '#158EFF',
-          border: ' #158EFF',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#158EFF',
-          border: ' #158EFF',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#158EFF',
-          border: ' #158EFF',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #99989C',
-          boxShadow: 'none',
-        },
-      },
-      secondary: {
-        // колір secondary
-        default: {
-          background: 'transparent',
-          text: '#158EFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#10253A',
-          text: '#158EFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#10253A',
-          text: '#158EFF',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #1E2226',
-          boxShadow: 'none',
-        },
-      },
-      error: {
-        // колір error
-        default: {
-          background: 'transparent',
-          text: '#C93939',
-          border: ' #C93939',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#290b0b',
-          text: '#C93939',
-          border: ' #290b0b',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#290b0b',
-          text: '#C93939',
-          border: ' #290b0b',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #99989C',
-          boxShadow: 'none',
-        },
-      },
-      soft: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#1A212D',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#1A212D',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-      light: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#E8EAEE',
-          border: '#34404C',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#222A32',
-          text: '#E8EAEE',
-          border: '#34404C',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#222A32',
-          text: '#E8EAEE',
-          border: '#34404C',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-    },
-    empty: {
-      default: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#FFFFFF',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: 'transparent',
-          text: '#44a5ff',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#44a5ff',
-          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: '#10253A',
-            color: '#158EFF',
-          },
-        },
-        hover: {
-          background: 'transparent',
-          text: '#44a5ff',
-          border: 'transparent',
-          boxShadow: 'none',
-          filledIcon: {
-            background: '#158EFF',
-            color: '#0F1317',
-          },
-        },
-        active: {
-          background: 'transparent',
-          text: '#44a5ff',
-          border: 'transparent',
-          boxShadow: 'none',
-          filledIcon: {
-            background: '#158EFF',
-            color: '#0F1317',
-          },
-        },
-        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: 'transparent',
-          text: '#158EFF',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#158EFF',
-          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: '#d46161',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#d46161',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-      },
-      soft: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#80A0F5',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: 'transparent',
-          text: '#E5ECFD',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#E5ECFD',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-      },
-      light: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#E8EAEE',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: 'transparent',
-          text: '#34404C',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#34404C',
-          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: '#0F1317',
-    border: '#1E2226',
-    width: 224,
-    collapsedWidth: 65,
-    text: {
-      default: '#99989C',
-      active: '#158EFF',
-      hover: '#158EFF',
-    },
-    item: {
-      default: {
-        background: 'transparent',
-        border: 'transparent',
-        padding: '10px 16px',
-        height: 40,
-      },
-      active: {
-        background: '#10253A',
-        borderLeft: '2px solid #158EFF',
-        padding: '10px 16px',
-        height: 40,
-      },
-      hover: {
-        background: '#020E19',
-        border: 'transparent',
-        padding: '10px 16px',
-        height: 40,
-      },
-    },
-    section: {
-      background: 'transparent',
-      padding: '16px 16px 8px',
-      title: {
-        color: '#020b14',
-        fontSize: '12px',
-        fontWeight: 600,
-      },
-    },
-    delimeter: {
-      color: '#34404C',
-      thickness: 1,
-      margin: '8px 0',
-    },
-  },
-  contextMenu: {
-    button: {
-      default: {
-        background: 'transparent',
-        text: '#FFFFFF',
-        border: ' #1E2226',
-        boxShadow: 'none',
-      },
-      hover: {
-        background: 'transparent',
-        text: '#158EFF',
-        border: ' #1E2226',
-        boxShadow: 'none',
-      },
-      active: {
-        background: 'transparent',
-        text: '#158EFF',
-        border: ' #1E2226',
-        boxShadow: 'none',
-      },
-      disabled: {
-        background: '#080A0C',
-        text: '#99989C',
-        border: ' #1E2226',
-        boxShadow: 'none',
-      },
-    },
-    delimeter: {
-      color: '#34404C',
-      thickness: 1,
-      marginInline: 12,
-      marginBlock: 3,
-      style: 'solid',
-    },
-    shadow: '0px 4px 16px rgba(255, 255, 255, 0.9), 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: '#10253A',
-        text: '#FFFFFF',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      active: {
-        background: '#1E2226',
-        text: '#FFFFFF',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      disabled: {
-        background: '#080A0C',
-        text: '#99989C',
-        border: ' none',
-        boxShadow: 'none',
-      },
-    },
-    paddingBlock: 7,
-    paddingInline: 5,
-    margin: 2,
-    padding: 6,
-  },
-  // Компонент 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: '#080A0C',
-        text: '#99989C',
-        border: ' none',
-        boxShadow: 'none',
-      },
-    },
-    delimiterColor: '#34404C',
-    icon: {
-      size: 16,
-    },
-  },
-  // Компонент Input
-  input: {
-    sizes: {
-      empty: {
-        fontSize: 14,
-        paddingInline: 0,
-        paddingBlock: 0,
-        borderRadius: 0,
-        iconSize: 14,
-        height: 'auto',
-        lineHeight: 16,
-      },
-      small: {
-        fontSize: 14,
-        paddingInline: 10,
-        paddingBlock: 10,
-        borderRadius: 5,
-        iconSize: 14,
-        height: 40,
-        lineHeight: 16,
-      },
-      medium: {
-        fontSize: 16,
-        paddingInline: 10,
-        paddingBlock: 10,
-        borderRadius: 5,
-        iconSize: 16,
-        height: 40,
-        lineHeight: 18,
-      },
-    },
-    outlined: {
-      default: {
-        background: 'transparent',
-        text: '#FFFFFF',
-        placeholder: '#99989C',
-        border: ' #1E2226',
-        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: '#080A0C',
-        text: '#99989C',
-        placeholder: '#99989C',
-        border: ' #1E2226',
-        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: 'transparent',
-        text: '#99989C',
-        placeholder: '#99989C',
-        border: 'transparent',
-        boxShadow: 'none',
-        icon: '#99989C',
-      },
-    },
-  },
-  box: {
-    padding: 20,
-    borderRadius: 8,
-    border: {
-      width: 1,
-      style: 'solid',
-      color: '#1E2226',
-    },
-    background: '#0F1317',
-  },
-  // Graph2D
-  graph2D: {
-    ring: {
-      highlightFill: 'rgba(0, 90, 255, 0.3)',
-      selectionFill: 'rgba(0, 90, 255, 0.5)',
-    },
-    button: {
-      stroke: '#1A1A1A',
-      normalFill: 'rgba(0, 0, 0, 0.8)',
-      hoverFill: 'rgba(25, 25, 25, 0.9)',
-      textColor: '#99989C',
-      spinnerColor: '#80A0F5',
-    },
-    grid: {
-      dotColor: 'rgba(255, 255, 255, 0.5)',
-    },
-    link: {
-      normal: '#666',
-      highlighted: '#0066ff',
-      textColor: '#999',
-      highlightedTextColor: '#99ccff',
-      textBgColor: 'rgba(0, 0, 0, 0.8)',
-      highlightedTextBgColor: 'rgba(0, 25, 51, 0.9)',
-    },
-  },
-  contentLoader: {
-    foreground: '#99989C',
-    background: '#535353',
-  },
-  tag: {
-    outlined: {
-      borderRadius: 50,
-      paddingBlock: 5,
-      paddingInline: 10,
-      borderWidth: 1,
-      color: {
-        default: '#99989C',
-        primary: '#3991FA',
-        error: '#D82323',
-        success: '#38A473',
-        warning: '#DEB839',
-        disabled: '#ebebeb',
-        text: '#FFFFFF',
-        orange: '#d3741b',
-      },
-    },
-    fill: {
-      borderRadius: 4,
-      paddingBlock: 5,
-      paddingInline: 10,
-      borderWidth: 0,
-      color: {
-        default: '#99989C',
-        primary: '#3991FA',
-        error: '#D82323',
-        success: '#38A473',
-        warning: '#DEB839',
-        disabled: '#ebebeb',
-        text: '#FFFFFF',
-        orange: '#d3741b',
-      },
-    },
-  },
-  alert: {
-    paddingBlock: 16,
-    paddingLeft: 16,
-    paddingRight: 44,
-    borderRadius: 5,
-    fontSize: 14,
-    gap: 12,
-    icon: {
-      width: 16,
-      height: 14,
-      paddingTop: 2,
-    },
-    color: {
-      icon: '#FDC700',
-      text: '#FFEDD8',
-      background: '#68550E',
-    },
-  },
-  label: {
-    sizes: {
-      small: {
-        fontSize: 14,
-        gap: 10,
-        marginBottom: 20,
-        helpText: { fontSize: 12, marginTop: 5 },
-      },
-      medium: {
-        fontSize: 16,
-        gap: 10,
-        marginBottom: 25,
-        helpText: { fontSize: 14, marginTop: 5 },
-      },
-    },
-    color: '#ffffff',
-    helpTextColor: '#535353',
-  },
-  leanerProgress: {
-    background: '#1E2226',
-    progressColor: '#158EFF',
-  },
-  switch: {
-    default: {
-      background: '#34404C',
-      color: '#0F1317',
-    },
-    checked: {
-      background: '#158EFF',
-      color: '#0F1317',
-    },
-    disabled: {
-      background: '#1E2226',
-      color: '#0F1317',
-    },
-  },
-  drawer: {
-    padding: 20,
-    width: 573,
-    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
-  },
-  tooltip: {
-    fontSize: 14,
-    padding: 10,
-    borderRadius: 6,
-    maxWidth: 240,
-    shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
-    color: '#99989C',
-    background: '#1E2226',
-  },
-  pagination: {
-    fontSize: 14,
-    paddingBlock: 4,
-    paddingInline: 8,
-    borderRadius: 3,
-    gap: 6,
-    height: 26,
-    iconSize: 8,
-  },
-  overlay: {
-    paddingBlock: 40,
-    gap: 6,
-    background: 'rgba(0, 0, 0, 0.5)',
-  },
-  modal: {
-    padding: 20,
-    width: 545,
-    shadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
-    borderColor: '#1E2226',
-    background: '#0F1317',
-    borderRadius: 8,
-  },
-};
-
-export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;