ish-ui 1.0.2 → 1.0.3

package/src/themes/appTheme.ts

@@ -1,324 +0,0 @@
-import { grey, yellow } from '@mui/material/colors';
-import { alpha, darken } from '@mui/material/styles';
-import { ThemeValues, AppTheme } from '@src/model';
-
-export const theme: { [K in ThemeValues]: Partial<AppTheme> } = {
-  default: {
-    heading: {
-      color: '#4b6390'
-    },
-    blog: {
-      root: {
-        backgroundColor: yellow[100]
-      }
-    },
-    share: {
-      exportContainer: {
-        backgroundColor: '#302A22'
-      },
-      closeButton: {
-        color: '#f7941d'
-      },
-      shareButton: {
-        color: '#302A22',
-        backgroundColor: '#fff',
-        backgroundColorHover: alpha('#fff', 0.9)
-      },
-      color: {
-        headerText: '#fff',
-        itemText: 'rgba(255,255,255,0.6)',
-        selectedItemText: 'rgba(255,255,255,1)',
-        customLabel: 'rgba(255,255,255,.5)'
-      }
-    },
-    statistics: {
-      coloredHeaderText: {
-        color: '#f7941d'
-      },
-      enrolmentText: {
-        color: '#73cba7',
-        strokeColor: '#73cba7'
-      },
-      revenueText: {
-        color: '#ffd876',
-        strokeColor: '#ffd876'
-      },
-      rightColumn: {
-        color: alpha('rgba(0, 0, 0, 0.87)', 0.4)
-      }
-    },
-    appBar: {
-      header: {
-        background: '#fbf9f0',
-        color: '#222',
-      },
-      headerAlternate: {
-        background: '#fff',
-        color: '#222',
-      },
-    },
-    appBarButton: {
-      close: {
-        color: '#f7941d',
-      },
-      helpMenu: {
-        color: '#f7941d',
-      }
-    },
-    tabList: {
-      listContainer: {
-        backgroundColor: '#4b6390'
-      },
-      listItemRoot: {
-        color: '#fff'
-      },
-    },
-    table: {
-      contrastRow: {
-        main: '#f8f8f8',
-        light: '#f4f3ec'
-      }
-    },
-    addButtonColor: {
-      color: '#f7941d'
-    }
-  },
-  dark: {
-    heading: {
-      color: '#9bbeff'
-    },
-    blog: {
-      root: {
-        backgroundColor: '#303030'
-      }
-    },
-    share: {
-      exportContainer: {
-        backgroundColor: '#302A22'
-      },
-      closeButton: {
-        color: '#f7941d'
-      },
-      shareButton: {
-        color: '#302A22',
-        backgroundColor: '#fff',
-        backgroundColorHover: alpha('#fff', 0.9)
-      },
-      color: {
-        headerText: '#fff',
-        itemText: 'rgba(255,255,255,0.6)',
-        selectedItemText: 'rgba(255,255,255,1)',
-        customLabel: 'rgba(255,255,255,.5)'
-      }
-    },
-    statistics: {
-      coloredHeaderText: {
-        color: '#f7941d'
-      },
-      enrolmentText: {
-        color: '#73cba7',
-        strokeColor: '#73cba7'
-      },
-      revenueText: {
-        color: '#ffd876',
-        strokeColor: '#ffd876'
-      },
-      rightColumn: {
-        color: alpha('rgba(255, 255, 255, 0.87)', 0.4)
-      }
-    },
-    appBar: {
-      header: {
-        background: '#1b1b1b',
-        color: '#fff',
-      },
-      headerAlternate: {
-        background: '#f7941d',
-        color: '#fff',
-      },
-    },
-    appBarButton: {
-      close: {
-        color: 'white'
-      },
-      helpMenu: {
-        color: '#fff'
-      }
-    },
-    tabList: {
-      listContainer: {
-        backgroundColor: '#302A22'
-      },
-      listItemRoot: {
-        color: '#fff'
-      },
-    },
-    table: {
-      contrastRow: {
-        main: '#696969',
-        light: '#696969bf'
-      }
-    },
-    addButtonColor: {
-      color: darken(grey[400], 0.1)
-    }
-  },
-  monochrome: {
-    heading: {
-      color: '#000'
-    },
-    blog: {
-      root: {
-        backgroundColor: '#eee'
-      }
-    },
-    share: {
-      exportContainer: {
-        backgroundColor: '#222222'
-      },
-      closeButton: {
-        color: '#eaeaea'
-      },
-      shareButton: {
-        color: '#fff',
-        backgroundColor: '#3e8ef7',
-        backgroundColorHover: alpha('#3e8ef7', 0.9)
-      },
-      color: {
-        headerText: '#fff',
-        itemText: 'rgba(255,255,255,0.6)',
-        selectedItemText: 'rgba(255,255,255,1)',
-        customLabel: 'rgba(255,255,255,.5)'
-      }
-    },
-    statistics: {
-      coloredHeaderText: {
-        color: '#222222'
-      },
-      enrolmentText: {
-        color: '#73cba7',
-        strokeColor: '#73cba7'
-      },
-      revenueText: {
-        color: '#ffd876',
-        strokeColor: '#ffd876'
-      },
-      rightColumn: {
-        color: alpha('#222222', 0.4)
-      }
-    },
-    appBar: {
-      header: {
-        background: '#fff',
-        color: '#000',
-      },
-      headerAlternate: {
-        background: '#f4f4f4',
-        color: '#000',
-      },
-    },
-    appBarButton: {
-      close: {
-        color: '#222222'
-      },
-      helpMenu: {
-        color: '#222222'
-      }
-    },
-    tabList: {
-      listContainer: {
-        backgroundColor: '#e3e3e3'
-      },
-      listItemRoot: {
-        color: '#000',
-      },
-    },
-    table: {
-      contrastRow: {
-        main: '#f8f8f8',
-        light: '#f4f3ec'
-      }
-    },
-    addButtonColor: {
-      color: '#000'
-    }
-  },
-  highcontrast: {
-    heading: {
-      color: '#424242'
-    },
-    blog: {
-      root: {
-        backgroundColor: '#fff'
-      }
-    },
-    share: {
-      exportContainer: {
-        backgroundColor: '#eee'
-      },
-      closeButton: {
-        color: '#111111'
-      },
-      shareButton: {
-        color: '#fff',
-        backgroundColor: '#111111',
-        backgroundColorHover: alpha('#fff', 0.9)
-      },
-      color: {
-        headerText: '#000',
-        itemText: 'rgba(17,17,17,0.6)',
-        selectedItemText: 'rgba(17,17,17,1)',
-        customLabel: 'rgba(17,17,17,.5)'
-      }
-    },
-    statistics: {
-      coloredHeaderText: {
-        color: '#111111'
-      },
-      enrolmentText: {
-        color: '#111111'
-      },
-      revenueText: {
-        color: '#111111'
-      },
-      rightColumn: {
-        color: '#111111'
-      }
-    },
-    appBar: {
-      header: {
-        background: '#f2f2f2',
-        color: '#222',
-      },
-      headerAlternate: {
-        background: '#111',
-        color: '#fff',
-      },
-    },
-    appBarButton: {
-      close: {
-        color: '#222'
-      },
-      helpMenu: {
-        color: '#222'
-      }
-    },
-    tabList: {
-      listContainer: {
-        backgroundColor: '#292929'
-      },
-      listItemRoot: {
-        color: '#fff'
-      },
-    },
-    table: {
-      contrastRow: {
-        main: '#f8f8f8',
-        light: '#f4f3ec'
-      }
-    },
-    addButtonColor: {
-      color: '#111111'
-    }
-  }
-};

package/src/themes/ishTheme.ts

@@ -1,401 +0,0 @@
-/*
- * Copyright ish group pty ltd 2022.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-
-import { createTheme } from '@mui/material/styles';
-import { Components } from '@mui/material/styles/components';
-import { PaletteMode } from '@mui/material';
-import { theme } from './appTheme';
-import {
-  AppTheme,
-  DarkThemeKey,
-  DefaultThemeKey,
-  HighcontrastThemeKey,
-  MonochromeThemeKey,
-  ThemeValues
-} from '@src/model';
-
-const createOverrides = (palette):{ components: Components } => ({
-  components: {
-    MuiButtonBase: {
-      styleOverrides: {
-        root: {
-          userSelect: 'auto',
-        }
-      }
-    },
-    MuiCollapse: {
-      styleOverrides: {
-        entered: {
-          height: 'auto',
-          overflow: 'visible'
-        }
-      }
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          maxWidth: '100%',
-        }
-      }
-    },
-    MuiFormControlLabel: {
-      styleOverrides: {
-        label: {
-          fontSize: '14px',
-          '&$disabled': {
-            color: 'unset'
-          }
-        },
-        disabled: {}
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        underline: {
-          '&:before': {
-            borderBottom: '1px solid transparent',
-          },
-          '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
-            borderBottom: `1px solid ${palette.primary.main}`
-          },
-          '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
-            borderBottom: `1px solid ${palette.primary.contrastText}`
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        shrink: {
-          '& .inputAdornmentIcon': {
-            transform: 'scale(1.25)'
-          }
-        }
-      }
-    },
-    MuiSelect: {
-      styleOverrides: {
-        select: {
-          '&:focus': {
-            backgroundColor: 'none',
-          },
-        },
-      }
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        root: {
-          lineHeight: 1.2,
-          whiteSpace: 'nowrap'
-        },
-      }
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          maxWidth: '100%',
-          width: '100%',
-          MuiInput: {
-            root: {
-              '&:before': {
-                borderBottom: '1px solid transparent',
-              },
-              '&:hover:not(.Mui-disabled):not(.primaryContarstUnderline):before': {
-                borderBottom: `1px solid ${palette.primary.main}`
-              },
-              '&.primaryContarstUnderline:hover:not(.Mui-disabled):before': {
-                borderBottom: `1px solid ${palette.primary.contrastText}`
-              }
-            },
-          },
-        },
-        input: {
-          '&.Mui-disabled': {
-            fontWeight: 300,
-            WebkitTextFillColor: 'inherit'
-          },
-          '&::placeholder': {
-            opacity: 0.15
-          },
-          textOverflow: 'ellipsis',
-          color: palette.text.primaryEditable,
-          fontWeight: 400,
-          '&:hover:not(.Mui-disabled):not(&:focus):not(.primaryContarstHover)': {
-            color: palette.primary.main,
-            MuiSelect: {
-              icon: {
-                color: palette.primary.main,
-              },
-            },
-          },
-        },
-        inputMultiline: {
-          lineHeight: '1.5em'
-        }
-      }
-    },
-    MuiCssBaseline: {
-      styleOverrides: {
-        body: {
-          fontFeatureSettings:
-            '"dlig" 0, "numr" 0, "dnom" 0, "tnum" 0, "case" 0, "zero" 0, "frac" 0, '
-            + '"sups" 0, "subs" 0, "cpsp" 0, "salt" 0, "ss01" 0, "ss02" 0, "ss03" 0, '
-            + '"cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", '
-            + '"cv10", "cv11", "calt", "liga", "kern"',
-          fontSize: '0.875rem'
-        }
-      }
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          fontWeight: 400,
-          '@media (min-width: 600px)': {
-            minHeight: '36px'
-          }
-        }
-      }
-    },
-    MuiTableSortLabel: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            color: palette.text.primary
-          },
-          '&$active': {
-            color: palette.text.primary
-          }
-        },
-        active: {},
-        icon: {
-          fontSize: '18px'
-        }
-      }
-    },
-    MuiAutocomplete: {
-      styleOverrides: {
-        inputRoot: {
-          flexWrap: 'inherit',
-        }
-      }
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        root: {
-          marginLeft: 0
-        }
-      }
-    }
-  }
-});
-
-const commonTypography = {
-  typography: {
-    fontFamily: 'Inter, sans-serif',
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 600,
-    body2: {
-      fontWeight: 300
-    },
-    body1: {
-      fontWeight: 300
-    },
-    caption: {
-      fontWeight: 300
-    }
-  }
-};
-
-// Default Theme
-
-const defaultThemePalette = {
-  primary: {
-    main: '#f7941d',
-    contrastText: '#fff'
-  },
-  background: {
-    default: '#fbf9f0'
-  },
-  secondary: {
-    main: '#4b6390'
-  },
-  text: {
-    secondary: 'rgba(0, 0, 0, 0.54)',
-    primary: 'rgba(0, 0, 0, 0.87)',
-    primaryEditable: 'rgba(0, 0, 0, 0.95)',
-    disabled: 'rgba(34, 34, 34, 0.38)',
-    hint: 'rgba(34, 34, 34, 0.38)',
-    grey: '#434343',
-  }
-};
-
-export const defaultTheme = createTheme({
-  palette: defaultThemePalette,
-  ...commonTypography,
-  ...theme.default,
-  ...createOverrides(defaultThemePalette)
-}) as AppTheme;
-
-// Dark Theme
-const darkThemePalette = {
-  mode: 'dark' as PaletteMode,
-  common: { black: '#000', white: '#fff' },
-  primary: {
-    main: '#f7941d',
-    dark: 'rgba(255, 143, 0, 1)',
-    contrastText: 'rgba(255, 255, 255, 1)'
-  },
-  background: {
-    default: '#1b1b1b',
-    paper: '#313131'
-  },
-  secondary: {
-    light: 'rgba(75, 99, 144, 1)',
-    main: '#9bbeff',
-    dark: 'rgba(75, 99, 144, 1)',
-    contrastText: '#fff'
-  },
-  error: {
-    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
-  },
-  text: {
-    primary: 'rgba(255, 255, 255, 0.87)',
-    primaryEditable: 'rgba(255, 255, 255, 0.95)',
-    secondary: 'rgba(255, 255, 255, 0.65)',
-    disabled: 'rgba(255, 255, 255, 0.38)',
-    hint: 'rgba(255, 255, 255, 0.38)',
-    grey: 'rgba(255, 255, 255, 0.65)',
-  }
-};
-
-export const darkTheme = createTheme({
-  palette: darkThemePalette,
-  ...commonTypography,
-  ...theme.dark,
-  ...createOverrides(darkThemePalette)
-}) as AppTheme;
-
-// Monochrome Theme
-
-const monochromeThemePalette = {
-  mode: 'light' as PaletteMode,
-  common: { black: '#000', white: '#fff' },
-  primary: {
-    main: '#111111',
-    dark: '#76838f',
-    contrastText: '#fff'
-  },
-  secondary: {
-    light: '#9bbeff',
-    main: '#111111',
-    dark: '#111111',
-    contrastText: '#fff'
-  },
-  error: {
-    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
-  },
-  text: {
-    primary: '#222222',
-    primaryEditable: '#181818',
-    secondary: 'rgba(34, 34, 34, 0.54)',
-    disabled: 'rgba(34, 34, 34, 0.38)',
-    hint: 'rgba(34, 34, 34, 0.38)',
-    grey: '#434343',
-  }
-};
-
-export const monochromeTheme = createTheme({
-  palette: monochromeThemePalette,
-  ...commonTypography,
-  ...theme.monochrome,
-  ...createOverrides(monochromeThemePalette)
-}) as AppTheme;
-
-// High Contrast Theme
-
-const highcontrastThemePalette = {
-  common: { black: '#111111', white: '#fff' },
-  primary: {
-    main: '#111111',
-    dark: '#76838f',
-    contrastText: '#fff'
-  },
-  secondary: {
-    light: '#9bbeff',
-    main: '#111111',
-    dark: '#111111',
-    contrastText: '#fff'
-  },
-  background: {
-    default: '#f2f2f2'
-  },
-  error: {
-    light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
-  },
-  text: {
-    primary: '#111111',
-    primaryEditable: '#070707',
-    secondary: '#111111',
-    disabled: 'rgba(34, 34, 34, 0.38)',
-    hint: 'rgba(34, 34, 34, 0.38)',
-    grey: '#434343',
-  },
-  action: {
-    selected: 'rgba(0, 0, 0, 0.3)'
-  },
-  divider: 'rgba(0, 0, 0, 0.40)'
-};
-
-export const highcontrastTheme = createTheme({
-  palette: highcontrastThemePalette,
-  ...commonTypography,
-  ...theme.highcontrast,
-  ...createOverrides(highcontrastThemePalette)
-}) as AppTheme;
-
-export const currentTheme = (themeName: ThemeValues): AppTheme => {
-  switch (themeName) {
-    case DarkThemeKey: {
-      return darkTheme;
-    }
-    case DefaultThemeKey: {
-      return defaultTheme;
-    }
-    case MonochromeThemeKey: {
-      return monochromeTheme;
-    }
-    case HighcontrastThemeKey: {
-      return highcontrastTheme;
-    }
-    default: {
-      return defaultTheme;
-    }
-  }
-};
-
-export const getTheme = (): AppTheme => {
-  let actualTheme = defaultTheme;
-
-  try {
-    const storageThemeName = localStorage.getItem('theme') as ThemeValues;
-    if (storageThemeName) {
-      actualTheme = currentTheme(storageThemeName);
-    }
-  } catch (e) {
-    console.error(e);
-    return actualTheme;
-  }
-
-  return actualTheme;
-};
-
-export const useAppTheme = (): AppTheme => ({
-  ...getTheme()
-});