feat(components): add fonts to assets

add the rest of the components for theme

Signed-off-by: Antonette Caldwell <[email protected]>

packages/components/src/index.tsx

@@ -76,4 +76,5 @@ export {
   type FilterColumn,
   type UniversalFilterProps
 } from './custom/UniversalFilter';
-export { default as SistentProvider } from './theme/SistentProvider';
+export { default as SistentProvider } from './theme';
+export * from './theme/colors';

packages/components/src/theme/colors.ts

@@ -0,0 +1,180 @@
+import { alpha } from '@mui/material';
+
+/**
+ * Define the base common colors to derive from
+ */
+export const KEPPEL = '#00B39F';
+export const CARIBBEAN_GREEN = '#00D3A9';
+export const TEAL_BLUE = '#477E96';
+export const CHARCOAL = '#3C494F';
+export const BLACK = '#000000';
+export const WHITE = '#FFFFFF';
+export const DARK_SHADE_GRAY = '#222222';
+export const CHINESE_SILVER = '#CCCCCC'; // same as lightGray
+export const SAFFRON = '#EBC017';
+export const GRAY = '#696969';
+export const GRAY97 = '#f7f7f7';
+export const DARK_SLATE_GRAY = '#294957';
+export const LIGHT_GRAY = '#d3d3d3'; // same as tableBorder
+export const ALICE_BLUE = '#EBEFF1';
+export const LIMED_SPRUCE = '#3C494F';
+export const WHITESMOKE = '#F5F5F5';
+export const PRIMARY_COLOR = '#647881';
+export const DARK_PRIMARY_COLOR = '#51636B';
+export const SLATE_GRAY = '#7a848e';
+export const DARK_JUNGLE_GREEN = '#1E2117';
+export const CASPER = '#b1b6b8';
+export const EERIE_BLACK = '#b1b6b8';
+export const PATTERNS_BLUE = '#D9E0E2';
+export const GREEN = 'green';
+export const DARK_TEAL = '#455a64';
+export const LIGHT_TEAL = '#607d8b';
+export const CULTURED = '#F6F8F8';
+export const ANAKIWA = '#9EFFEC';
+export const NOT_FOUND = '#666666';
+export const YELLOW_SEA = '#F0A303';
+export const PINE_GREEN = '#008071';
+
+/**
+ * Use the colors below that provides the action that you want to use
+ */
+export const primaryColor = {
+  main: PRIMARY_COLOR,
+  dark: DARK_PRIMARY_COLOR
+};
+
+export const patternsBlue = {
+  main: PATTERNS_BLUE
+};
+
+export const cultured = {
+  main: CULTURED
+};
+
+export const green = {
+  main: GREEN
+};
+
+export const darkTeal = {
+  main: DARK_TEAL,
+  dark: LIGHT_TEAL
+};
+
+export const actionIcon = {
+  main: darkTeal.main,
+  hover: darkTeal.dark
+};
+
+export const tabeMenu = {
+  main: darkTeal.main,
+  hover: darkTeal.dark
+};
+
+export const darkSlateGray = {
+  main: DARK_SLATE_GRAY,
+  dark: alpha(DARK_SLATE_GRAY, 0.65)
+};
+
+export const eerieBlack = {
+  main: EERIE_BLACK,
+  light: alpha(EERIE_BLACK, 0.8),
+  lighter: alpha(EERIE_BLACK, 0.6)
+};
+
+export const casper = {
+  main: CASPER,
+  light: alpha(CASPER, 0.8),
+  lighter: alpha(CASPER, 0.6)
+};
+
+export const slateGray = {
+  main: SLATE_GRAY,
+  light: alpha(SLATE_GRAY, 0.8)
+};
+
+export const white = {
+  main: WHITE,
+  light: alpha(WHITE, 0.8),
+  lighter: alpha(WHITE, 0.6)
+};
+
+export const black = {
+  main: BLACK,
+  light: alpha(BLACK, 0.8),
+  lighter: alpha(BLACK, 0.6),
+  dark: alpha(BLACK, 0.2)
+};
+
+export const jungleGreen = {
+  main: DARK_JUNGLE_GREEN,
+  light: alpha(DARK_JUNGLE_GREEN, 0.8),
+  lighter: alpha(DARK_JUNGLE_GREEN, 0.6)
+};
+
+export const buttonDisabled = {
+  main: '#b0bec5'
+};
+
+export const tableBackgroundHover = {
+  main: '#ADD8E6'
+};
+
+export const DELETE = '#8F1F00';
+export const HOVER_DELETE = '#b32700';
+
+export const redDelete = {
+  main: DELETE,
+  light: HOVER_DELETE
+};
+
+export const buttonDelete = {
+  main: redDelete.main,
+  hover: redDelete.light
+};
+
+/**
+ * Notification Colors
+ */
+export const notificationColors = {
+  info: {
+    main: '#2196F3'
+  },
+  error: {
+    main: '#F91313',
+    dark: '#B32700'
+  },
+  warning: {
+    main: '#F0A303',
+    light: '#E75225'
+  },
+  success: {
+    main: '#206D24'
+  }
+};
+
+export const CONNECTED = KEPPEL;
+export const REGISTERED = TEAL_BLUE;
+export const DISCOVERED = notificationColors.info.main;
+export const IGNORED = primaryColor.dark;
+export const DELETED = redDelete.main;
+export const MAINTAINENCE = notificationColors.warning.main;
+export const DISCONNECTED = notificationColors.warning.light;
+
+export const connected = {
+  main: CONNECTED
+};
+
+export const anakiwa = {
+  main: ANAKIWA
+};
+
+/**
+ * Social media or equivalent icons colors
+ */
+export const socialIcons = {
+  slack: '#4A154B',
+  twitter: '#1da1f2',
+  github: '#24292e',
+  youtube: '#ff0000',
+  docker: '#2496ed'
+};

packages/components/src/theme/components.ts

@@ -1,10 +1,32 @@
 import { Components, Theme } from '@mui/material';
 import { MuiAppBar } from './components/appbar.modifiter';
+import { MuiCard } from './components/card.modifier';
+import { MuiCheckbox } from './components/checkbox.modifier';
+import { MuiCollapse } from './components/collapse.modifier';
+import { MuiCssBaseline } from './components/cssbaseline.modifier';
 import { MuiDrawer } from './components/drawer.modifier';
+import { MuiFormLabel } from './components/formlabel.modifier';
+import { MuiIconButton } from './components/iconbutton.modifier';
+import { MuiLink } from './components/link.modifier';
+import { MuiMenu } from './components/menu.modifier';
+import { MuiMenuItem } from './components/menuitem.modifier';
+import { MuiPagination } from './components/pagination.modifier';
 import { MuiSvgIcon } from './components/svgicon.modifier';
+import { MuiTab } from './components/tab.modifier.ts';
 
 export const components: Components<Theme> = {
   MuiAppBar,
+  MuiCard,
+  MuiCheckbox,
+  MuiCollapse,
+  MuiCssBaseline,
   MuiDrawer,
-  MuiSvgIcon
+  MuiFormLabel,
+  MuiIconButton,
+  MuiLink,
+  MuiMenu,
+  MuiMenuItem,
+  MuiPagination,
+  MuiSvgIcon,
+  MuiTab
 };

packages/components/src/theme/components/card.modifier.ts

@@ -0,0 +1,10 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiCard: Components<Theme>['MuiCard'] = {
+  styleOverrides: {
+    root: {
+      backgroundImage:
+        'radial-gradient( circle 3000px at 50% 50%,  rgba(30,33,23,0) 0%, rgba(30,33,23,0.05) 10%, rgba(30,33,23,.1) 100% )'
+    }
+  }
+};

packages/components/src/theme/components/checkbox.modifier.ts

@@ -0,0 +1,30 @@
+import { Components, Theme } from '@mui/material';
+import { CHARCOAL, connected, darkSlateGray } from '../colors';
+
+export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
+  styleOverrides: {
+    root: {
+      color: 'transparent',
+      '&.Mui-checked': {
+        color: darkSlateGray.main,
+        '& .MuiSvgIcon-root': {
+          width: '1.25rem',
+          height: '1.25rem',
+          borderColor: connected.main,
+          marginLeft: '0px',
+          padding: '0px'
+        }
+      },
+      '& .MuiSvgIcon-root': {
+        width: '1.25rem',
+        height: '1.25rem',
+        border: `.75px solid ${CHARCOAL}`,
+        borderRadius: '2px',
+        padding: '0px'
+      },
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+};

packages/components/src/theme/components/collapse.modifier.ts

@@ -0,0 +1,33 @@
+import { Components, Theme } from '@mui/material';
+import { patternsBlue } from '../colors';
+
+declare module '@mui/material/Collapse' {
+  interface CollapseProps {
+    variant?: 'submenu' | string;
+  }
+  interface CollapsePropsVariantOverrides {
+    submenu: true;
+  }
+}
+
+export const MuiCollapse: Components<Theme>['MuiCollapse'] = {
+  styleOverrides: {
+    root: {}
+  },
+  variants: [
+    {
+      props: { variant: 'submenu' },
+      style: ({ theme }) => {
+        const {
+          palette: { cultured }
+        } = theme;
+        return {
+          backgroundColor: cultured.main,
+          '&:active': {
+            backgroundColor: patternsBlue.main
+          }
+        };
+      }
+    }
+  ]
+};

packages/components/src/theme/components/cssbaseline.modifier.ts

@@ -0,0 +1,16 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiCssBaseline: Components<Theme>['MuiCssBaseline'] = {
+  styleOverrides: `
+    @font-face {
+      font-family: 'Qanelas Soft Regular';
+      font-style: normal;
+      font-display: swap;
+      font-weight: 400;
+      src: 
+        local('QanelasSoftRegular'),
+        local('Quanelas Soft Regular'),
+        url('/assets/fonts/QanelasSoftRegular.woff2') format('woff2');
+    }      
+    `
+};

packages/components/src/theme/components/formlabel.modifier.ts

@@ -0,0 +1,12 @@
+import { Components, Theme } from '@mui/material';
+import { connected } from '../colors';
+
+export const MuiFormLabel: Components<Theme>['MuiFormLabel'] = {
+  styleOverrides: {
+    root: {
+      '&.Mui-focused': {
+        color: connected.main
+      }
+    }
+  }
+};

packages/components/src/theme/components/iconbutton.modifier.ts

@@ -0,0 +1,11 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiIconButton: Components<Theme>['MuiIconButton'] = {
+  styleOverrides: {
+    root: {
+      '@media (max-width: 400px)': {
+        padding: '2px'
+      }
+    }
+  }
+};

packages/components/src/theme/components/link.modifier.ts

@@ -0,0 +1,26 @@
+import { Components, Theme } from '@mui/material';
+import { connected, darkTeal } from '../colors';
+
+export const MuiLink: Components<Theme>['MuiLink'] = {
+  styleOverrides: {
+    root: {
+      fontWeight: '600',
+      textDecoration: 'none',
+      color: darkTeal.main,
+      '&:visited': {
+        textDecoration: 'none'
+      },
+      '&:hover': {
+        textDecoration: 'underline'
+      },
+      '&.keppel': {
+        color: connected.main
+      },
+      '&.Mui-disabled': {
+        '&:hover': {
+          cursor: 'not-allowed'
+        }
+      }
+    }
+  }
+};

packages/components/src/theme/components/menu.modifier.ts

@@ -0,0 +1,14 @@
+import { Components, Theme } from '@mui/material';
+
+export const MuiMenu: Components<Theme>['MuiMenu'] = {
+  styleOverrides: {
+    paper: {
+      '& .MuiMenuItem-root.Mui-selected': {
+        backgroundColor: 'rgba(0, 0, 0, 0.08)',
+        '&:hover': {
+          backgroundColor: 'rgba(0, 0, 0, 0.08)'
+        }
+      }
+    }
+  }
+};