@cyber-harbour/ui 1.0.73 → 1.0.75

package/src/Theme/themes/light.ts

@@ -1,1004 +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 lightThemePx: Theme = {
-  mode: 'light',
-  baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
-  // Секція кольорів з теми
-  colors: {
-    background: '#ffffff',
-    backgroundBase: '#F7F8FC',
-    primary: {
-      main: '#0042EC',
-      light: '#80A0F5',
-      lighter: '#E5ECFD',
-      lightest: '#F3F7FF',
-      lightest2: 'rgba(0, 66, 236, 0.05)',
-    },
-    text: {
-      main: '#101010',
-      light: '#535353',
-      lighter: '#99989C',
-      invert: '#ffffff',
-      success: '#31B083',
-      error: '#C93939',
-    },
-    stroke: {
-      main: '#C7C5C5',
-      light: '#EBEBEB',
-      lighter: '#F3F3F3',
-    },
-    disable: '#FAFAFA',
-    success: '#27AE60',
-    error: '#C93939',
-    warning: '#F2994A',
-    info: '#2F80ED',
-  },
-  // Типографія
-  typography,
-  breakpoints,
-  zIndex,
-  line: {
-    size: 1,
-    color: '#EBEBEB',
-  },
-  button: {
-    // Варіанти кнопок з кольорами
-    fill: {
-      default: {
-        // колір default
-        default: {
-          background: '#E8EAEE',
-          text: '#101010',
-          border: ' #E8EAEE',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#101010',
-          border: ' #E5ECFD',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#101010',
-          border: ' #E5ECFD',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: '#EBEBEB',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-      primary: {
-        // колір primary
-        default: {
-          background: '#0042EC',
-          text: '#FFFFFF',
-          border: ' #0042EC',
-          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: '#101010',
-          border: ' #E8EAEE',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#101010',
-          border: ' #E5ECFD',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#101010',
-          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',
-        },
-      },
-      soft: {
-        // колір default
-        default: {
-          background: '#80A0F5',
-          text: '#FFFFFF',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#0042EC',
-          text: '#FFFFFF',
-          border: '#0042EC',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#0042EC',
-          text: '#FFFFFF',
-          border: '#0042EC',
-          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: '#101010',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#101010',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#101010',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-      primary: {
-        // колір primary
-        default: {
-          background: 'transparent',
-          text: '#0042EC',
-          border: ' #0042EC',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#0042EC',
-          border: ' #0042EC',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#0042EC',
-          border: ' #0042EC',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #99989C',
-          boxShadow: 'none',
-        },
-      },
-      secondary: {
-        // колір secondary
-        default: {
-          background: 'transparent',
-          text: '#0042EC',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#0042EC',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#0042EC',
-          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',
-        },
-      },
-      soft: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#E5ECFD',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#E5ECFD',
-          text: '#80A0F5',
-          border: '#80A0F5',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-      light: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#535353',
-          border: '#EBEBEB',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: '#EEEEEE',
-          text: '#535353',
-          border: '#EBEBEB',
-          boxShadow: 'none',
-        },
-        active: {
-          background: '#EEEEEE',
-          text: '#535353',
-          border: '#EBEBEB',
-          boxShadow: 'none',
-        },
-        disabled: {
-          background: 'transparent',
-          text: '#99989C',
-          border: ' #EBEBEB',
-          boxShadow: 'none',
-        },
-      },
-    },
-    empty: {
-      default: {
-        // колір default
-        default: {
-          background: 'transparent',
-          text: '#101010',
-          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: '#0042EC',
-          border: 'transparent',
-          boxShadow: 'none',
-          filledIcon: {
-            background: '#E5ECFD',
-            color: '#0042EC',
-          },
-        },
-        hover: {
-          background: 'transparent',
-          text: '#80A0F5',
-          border: 'transparent',
-          boxShadow: 'none',
-          filledIcon: {
-            background: '#0042EC',
-            color: '#ffffff',
-          },
-        },
-        active: {
-          background: 'transparent',
-          text: '#80A0F5',
-          border: 'transparent',
-          boxShadow: 'none',
-          filledIcon: {
-            background: '#0042EC',
-            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: '#101010',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: 'transparent',
-          text: '#0042EC',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#0042EC',
-          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',
-        },
-      },
-      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: '#535353',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        hover: {
-          background: 'transparent',
-          text: '#99989C',
-          border: 'transparent',
-          boxShadow: 'none',
-        },
-        active: {
-          background: 'transparent',
-          text: '#99989C',
-          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: '#FFFFFF',
-    border: '#EBEBEB',
-    width: 224,
-    collapsedWidth: 65,
-    text: {
-      default: '#535353',
-      active: '#0042EC',
-      hover: '#0042EC',
-    },
-    item: {
-      default: {
-        background: 'transparent',
-        border: 'transparent',
-        padding: '10px 16px',
-        height: 40,
-      },
-      active: {
-        background: '#E5ECFD',
-        borderLeft: '2px solid #0042EC',
-        padding: '10px 16px',
-        height: 40,
-      },
-      hover: {
-        background: '#F3F7FF',
-        border: 'transparent',
-        padding: '10px 16px',
-        height: 40,
-      },
-    },
-    section: {
-      background: 'transparent',
-      padding: '16px 16px 8px',
-      title: {
-        color: '#99989C',
-        fontSize: '12px',
-        fontWeight: 600,
-      },
-    },
-    delimeter: {
-      color: '#C7C5C5',
-      thickness: 1,
-      margin: '8px 0',
-    },
-  },
-  contextMenu: {
-    button: {
-      default: {
-        background: 'transparent',
-        text: '#101010',
-        border: ' #EBEBEB',
-        boxShadow: 'none',
-      },
-      hover: {
-        background: 'transparent',
-        text: '#0042EC',
-        border: ' #EBEBEB',
-        boxShadow: 'none',
-      },
-      active: {
-        background: 'transparent',
-        text: '#0042EC',
-        border: ' #EBEBEB',
-        boxShadow: 'none',
-      },
-      disabled: {
-        background: '#FAFAFA',
-        text: '#99989C',
-        border: ' #EBEBEB',
-        boxShadow: 'none',
-      },
-    },
-    delimeter: {
-      color: '#C7C5C5',
-      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: '#101010',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      hover: {
-        background: '#E5ECFD',
-        text: '#101010',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      active: {
-        background: '#E8EAEE',
-        text: '#101010',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      disabled: {
-        background: '#FAFAFA',
-        text: '#99989C',
-        border: ' none',
-        boxShadow: 'none',
-      },
-    },
-    paddingBlock: 7,
-    paddingInline: 5,
-    margin: 2,
-    padding: 6,
-  },
-  // Компонент RowActionsMenu
-  rowActionsMenu: {
-    button: {
-      default: {
-        background: 'transparent',
-        text: '#101010',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      hover: {
-        background: 'transparent',
-        text: '#0042EC',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      active: {
-        background: 'transparent',
-        text: '#0042EC',
-        border: ' none',
-        boxShadow: 'none',
-      },
-      disabled: {
-        background: '#FAFAFA',
-        text: '#99989C',
-        border: ' none',
-        boxShadow: 'none',
-      },
-    },
-    delimiterColor: '#C7C5C5',
-    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: '#101010',
-        placeholder: '#99989C',
-        border: ' #EBEBEB',
-        boxShadow: 'none',
-        icon: '#101010',
-      },
-      focus: {
-        background: 'transparent',
-        text: '#101010',
-        placeholder: '#99989C',
-        border: ' #0042EC',
-        boxShadow: 'none',
-        icon: '#101010',
-      },
-      error: {
-        background: 'transparent',
-        text: '#101010',
-        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: '#101010',
-        placeholder: '#99989C',
-        border: ' transparent',
-        boxShadow: 'none',
-        icon: '#101010',
-      },
-      focus: {
-        background: 'transparent',
-        text: '#101010',
-        placeholder: '#99989C',
-        border: ' transparent',
-        boxShadow: 'none',
-        icon: '#101010',
-      },
-      error: {
-        background: 'transparent',
-        text: '#101010',
-        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)',
-      selectionFill: 'rgba(0, 66, 236, 0.3)',
-    },
-    button: {
-      stroke: '#e5e5e5',
-      normalFill: 'rgba(255, 255, 255, 0.8)',
-      hoverFill: 'rgba(230, 230, 230, 0.9)',
-      textColor: '#99989C',
-      spinnerColor: '#80A0F5',
-    },
-    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: '#E2E2E2E2',
-    background: '#F3F3F3',
-  },
-  tag: {
-    outlined: {
-      borderRadius: 50,
-      paddingBlock: 5,
-      paddingInline: 10,
-      borderWidth: 1,
-      color: {
-        default: '#535353',
-        primary: '#0042EC',
-        error: '#D82323',
-        success: '#38A473',
-        warning: '#DEB839',
-        disabled: '#ebebeb',
-        text: '#101010',
-        orange: '#d3741b',
-      },
-    },
-    fill: {
-      borderRadius: 4,
-      paddingBlock: 5,
-      paddingInline: 10,
-      borderWidth: 0,
-      color: {
-        default: '#535353',
-        primary: '#0042EC',
-        error: '#D82323',
-        success: '#38A473',
-        warning: '#DEB839',
-        disabled: '#ebebeb',
-        text: '#101010',
-        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: '#894B00',
-      background: '#FFFBE0',
-    },
-  },
-  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: '#101010',
-    helpTextColor: '#99989C',
-  },
-  leanerProgress: {
-    background: '#EBEBEB',
-    progressColor: '#0042EC',
-  },
-  switch: {
-    default: {
-      background: '#C7C5C5',
-      color: '#FFFFFF',
-    },
-    checked: {
-      background: '#0042EC',
-      color: '#FFFFFF',
-    },
-    disabled: {
-      background: '#EBEBEB',
-      color: '#FFFFFF',
-    },
-  },
-  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: '#535353',
-    background: '#EBEBEB',
-  },
-  pagination: {
-    fontSize: 14,
-    paddingBlock: 4,
-    paddingInline: 8,
-    borderRadius: 3,
-    gap: 6,
-    height: 26,
-    iconSize: 8,
-  },
-  overlay: {
-    paddingBlock: 40,
-    gap: 6,
-    background: 'rgba(16, 16, 16, 0.1)',
-  },
-  modal: {
-    padding: 20,
-    width: 545,
-    shadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
-    borderColor: '#EBEBEB',
-    background: '#FFFFFF',
-    borderRadius: 8,
-  },
-};
-
-export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;