@cyber-harbour/ui 1.0.17 → 1.0.18

package/src/Theme/theme.ts

@@ -1,77 +1,16 @@
-import 'styled-components';
-import { CSSProperties, DefaultTheme } from 'styled-components';
-
-type ThemeColors = DefaultTheme['colors'];
-type ColorCategory = keyof ThemeColors;
-
-export type NestedColorPaths =
-  | keyof Pick<ThemeColors, 'background' | 'disable'>
-  | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}`
-  | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}`
-  | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
-
-export type ColorVariant = NestedColorPaths;
-
-// Typography variants type
-export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
-
-declare module 'styled-components' {
-  export interface DefaultTheme {
-    colors: {
-      background: CSSProperties['color'];
-      primary: {
-        main: CSSProperties['color'];
-        light: CSSProperties['color'];
-        lighter: CSSProperties['color'];
-        lightest: CSSProperties['color'];
-        lightest2: CSSProperties['color'];
-      };
-      text: {
-        main: CSSProperties['color'];
-        light: CSSProperties['color'];
-        lighter: CSSProperties['color'];
-        invert: CSSProperties['color'];
-      };
-      stroke: {
-        main: CSSProperties['color'];
-        light: CSSProperties['color'];
-        lighter: CSSProperties['color'];
-      };
-      disable: string;
-      chart: {
-        changelog: [
-          CSSProperties['color'],
-          CSSProperties['color'],
-          CSSProperties['color'],
-          CSSProperties['color'],
-          CSSProperties['color']
-        ];
-      };
-    };
-    type: 'light' | 'dark';
-    typography: {
-      fontFamily: CSSProperties['fontFamily'];
-      lineHeight: CSSProperties['lineHeight'];
-      h1: CSSProperties['fontSize'];
-      h2: CSSProperties['fontSize'];
-      h3: CSSProperties['fontSize'];
-      body: CSSProperties['fontSize'];
-    };
-  }
-}
+import { DefaultTheme } from 'styled-components/dist/types';
 
-// Common typography configuration for both themes
-const typography = {
-  fontFamily: 'Arial, sans-serif',
-  lineHeight: '1.49',
-  h1: '22px',
-  h2: '16px',
-  h3: '14px',
-  body: '12px',
-};
+import 'styled-components';
+import { convertPaletteToRem } from './utils';
+import { Theme } from './types';
 
-const lightTheme: DefaultTheme = {
-  type: 'light',
+/**
+ * Палітра, що містить як кольори, так і розміри в px
+ * Кольори взято з теми, розміри будуть автоматично конвертовані в rem
+ */
+export const lightThemePx: Theme = {
+  mode: 'light',
+  // Секція кольорів з теми
   colors: {
     background: '#ffffff',
     primary: {
@@ -79,7 +18,7 @@ const lightTheme: DefaultTheme = {
       light: '#80A0F5',
       lighter: '#E5ECFD',
       lightest: '#F3F7FF',
-      lightest2: 'rgba(0, 66, 236. 0.05)',
+      lightest2: 'rgba(0, 66, 236, 0.05)',
     },
     text: {
       main: '#101010',
@@ -93,41 +32,452 @@ const lightTheme: DefaultTheme = {
       lighter: '#F3F3F3',
     },
     disable: '#FAFAFA',
-    chart: {
-      changelog: ['#E8E8E8', '#93E7A2', '#219846', '#216825', '#27E334'],
+    success: '#27AE60',
+    error: '#FF3B30',
+    warning: '#F2994A',
+    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,
+      },
     },
   },
-  typography,
-};
-
-const darkTheme: DefaultTheme = {
-  type: 'dark',
-  colors: {
-    background: '#1a1a1a',
-    primary: {
-      main: '#66b3ff',
-      light: '#3399ff',
-      lighter: '#E3E8FD',
-      lightest: '#F3F7FF',
-      lightest2: 'rgba(0, 66, 236. 0.05)',
+  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,
+  },
+  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',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+    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',
+        },
+        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',
+        },
+      },
+      //default as secondary
+      secondary: {
+        // колір default
+        default: {
+          background: 'transparent',
+          text: '#101010',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        hover: {
+          background: 'rgba(0, 0, 0, 0.05)',
+          text: '#101010',
+          border: 'transparent',
+          boxShadow: 'none',
+        },
+        active: {
+          background: 'rgba(0, 0, 0, 0.1)',
+          text: '#101010',
+          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: '#FFFFFF',
+    width: 224,
+    collapsedWidth: 65,
     text: {
-      main: '#ffffff',
-      light: '#CDCDCD',
-      lighter: '#959595',
-      invert: '#101010',
+      default: '#101010',
+      active: '#0042EC',
+      hover: '#535353',
     },
-    stroke: {
-      main: '#DEDEDE',
-      light: '#E8E8E8',
-      lighter: '#F3F3F3',
+    item: {
+      default: {
+        background: 'transparent',
+        border: 'transparent',
+        padding: '10px 16px',
+        height: 40,
+      },
+      active: {
+        background: '#F3F7FF',
+        borderLeft: '2px solid #0042EC',
+        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,
+      },
     },
-    disable: '#474747',
-    chart: {
-      changelog: ['#93E7A2', '#E8E8E8', '#219846', '#216825', '#27E334'],
+    delimeter: {
+      color: '#EBEBEB',
+      thickness: 1,
+      margin: '8px 0',
     },
   },
-  typography,
 };
 
-export { lightTheme, darkTheme };
+// Конвертуємо всі розміри з px в rem
+export const lightTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;
+export const darkTheme = convertPaletteToRem(lightThemePx) as DefaultTheme;