@canmingir/link 1.1.7 → 1.2.0

package/minimal/src/theme/custom-shadows.js

@@ -1,32 +0,0 @@
-import { alpha } from '@mui/material/styles';
-
-import { grey, info, error, common, primary, success, warning, secondary } from './palette';
-
-// ----------------------------------------------------------------------
-
-export function customShadows(mode) {
-  const color = mode === 'light' ? grey[500] : common.black;
-
-  const transparent = alpha(color, 0.16);
-
-  return {
-    z1: `0 1px 2px 0 ${transparent}`,
-    z4: `0 4px 8px 0 ${transparent}`,
-    z8: `0 8px 16px 0 ${transparent}`,
-    z12: `0 12px 24px -4px ${transparent}`,
-    z16: `0 16px 32px -4px ${transparent}`,
-    z20: `0 20px 40px -4px ${transparent}`,
-    z24: `0 24px 48px 0 ${transparent}`,
-    //
-    card: `0 0 2px 0 ${alpha(color, 0.2)}, 0 12px 24px -4px ${alpha(color, 0.12)}`,
-    dropdown: `0 0 2px 0 ${alpha(color, 0.24)}, -20px 20px 40px -4px ${alpha(color, 0.24)}`,
-    dialog: `-40px 40px 80px -8px ${alpha(common.black, 0.24)}`,
-    //
-    primary: `0 8px 16px 0 ${alpha(primary.main, 0.24)}`,
-    info: `0 8px 16px 0 ${alpha(info.main, 0.24)}`,
-    secondary: `0 8px 16px 0 ${alpha(secondary.main, 0.24)}`,
-    success: `0 8px 16px 0 ${alpha(success.main, 0.24)}`,
-    warning: `0 8px 16px 0 ${alpha(warning.main, 0.24)}`,
-    error: `0 8px 16px 0 ${alpha(error.main, 0.24)}`,
-  };
-}

package/minimal/src/theme/index.jsx

@@ -1,80 +0,0 @@
-import { useMemo } from 'react';
-import merge from 'lodash/merge';
-import PropTypes from 'prop-types';
-
-import CssBaseline from '@mui/material/CssBaseline';
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-
-import { useLocales } from 'src/locales';
-
-import { useSettingsContext } from 'src/components/settings';
-
-// system
-import { palette } from './palette';
-import { shadows } from './shadows';
-import { typography } from './typography';
-// options
-import RTL from './options/right-to-left';
-import { customShadows } from './custom-shadows';
-import { componentsOverrides } from './overrides';
-import { createPresets } from './options/presets';
-import { createContrast } from './options/contrast';
-
-// ----------------------------------------------------------------------
-
-export default function ThemeProvider({ children }) {
-  const { currentLang } = useLocales();
-
-  const settings = useSettingsContext();
-
-  const presets = createPresets(settings.themeColorPresets);
-
-  const contrast = createContrast(settings.themeContrast, settings.themeMode);
-
-  const memoizedValue = useMemo(
-    () => ({
-      palette: {
-        ...palette(settings.themeMode),
-        ...presets.palette,
-        ...contrast.palette,
-      },
-      customShadows: {
-        ...customShadows(settings.themeMode),
-        ...presets.customShadows,
-      },
-      direction: settings.themeDirection,
-      shadows: shadows(settings.themeMode),
-      shape: { borderRadius: 8 },
-      typography,
-    }),
-    [
-      settings.themeMode,
-      settings.themeDirection,
-      presets.palette,
-      presets.customShadows,
-      contrast.palette,
-    ]
-  );
-
-  const theme = createTheme(memoizedValue);
-
-  theme.components = merge(componentsOverrides(theme), contrast.components);
-
-  const themeWithLocale = useMemo(
-    () => createTheme(theme, currentLang.systemValue),
-    [currentLang.systemValue, theme]
-  );
-
-  return (
-    <MuiThemeProvider theme={themeWithLocale}>
-      <RTL themeDirection={settings.themeDirection}>
-        <CssBaseline />
-        {children}
-      </RTL>
-    </MuiThemeProvider>
-  );
-}
-
-ThemeProvider.propTypes = {
-  children: PropTypes.node,
-};

package/minimal/src/theme/options/contrast.js

@@ -1,34 +0,0 @@
-import { grey } from '../palette';
-import { customShadows } from '../custom-shadows';
-
-// ----------------------------------------------------------------------
-
-export function createContrast(contrast, mode) {
-  const theme = {
-    ...(contrast === 'bold' &&
-      mode === 'light' && {
-        palette: {
-          background: {
-            default: grey[200],
-          },
-        },
-      }),
-  };
-
-  const components = {
-    ...(contrast === 'bold' && {
-      MuiCard: {
-        styleOverrides: {
-          root: {
-            boxShadow: customShadows(mode).z1,
-          },
-        },
-      },
-    }),
-  };
-
-  return {
-    ...theme,
-    components,
-  };
-}

package/minimal/src/theme/options/presets.js

@@ -1,89 +0,0 @@
-import { alpha } from '@mui/material/styles';
-
-import { grey, primary } from '../palette';
-
-// ----------------------------------------------------------------------
-
-export function createPresets(preset) {
-  const primaryColor = getPrimary(preset);
-
-  const theme = {
-    palette: {
-      primary: primaryColor,
-    },
-    customShadows: {
-      primary: `0 8px 16px 0 ${alpha(`${primaryColor?.main}`, 0.24)}`,
-    },
-  };
-
-  return {
-    ...theme,
-  };
-}
-
-// ----------------------------------------------------------------------
-
-const cyan = {
-  lighter: '#CCF4FE',
-  light: '#68CDF9',
-  main: '#078DEE',
-  dark: '#0351AB',
-  darker: '#012972',
-  contrastText: '#FFFFFF',
-};
-
-const purple = {
-  lighter: '#EBD6FD',
-  light: '#B985F4',
-  main: '#7635dc',
-  dark: '#431A9E',
-  darker: '#200A69',
-  contrastText: '#FFFFFF',
-};
-
-const blue = {
-  lighter: '#D1E9FC',
-  light: '#76B0F1',
-  main: '#2065D1',
-  dark: '#103996',
-  darker: '#061B64',
-  contrastText: '#FFFFFF',
-};
-
-const orange = {
-  lighter: '#FEF4D4',
-  light: '#FED680',
-  main: '#fda92d',
-  dark: '#B66816',
-  darker: '#793908',
-  contrastText: grey[800],
-};
-
-const red = {
-  lighter: '#FFE3D5',
-  light: '#FFC1AC',
-  main: '#FF3030',
-  dark: '#B71833',
-  darker: '#7A0930',
-  contrastText: '#FFFFFF',
-};
-
-export const presetOptions = [
-  { name: 'default', value: primary.main },
-  { name: 'cyan', value: cyan.main },
-  { name: 'purple', value: purple.main },
-  { name: 'blue', value: blue.main },
-  { name: 'orange', value: orange.main },
-  { name: 'red', value: red.main },
-];
-
-export function getPrimary(preset) {
-  return {
-    default: primary,
-    cyan,
-    purple,
-    blue,
-    orange,
-    red,
-  }[preset];
-}

package/minimal/src/theme/options/right-to-left.jsx

@@ -1,31 +0,0 @@
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import createCache from '@emotion/cache';
-import rtlPlugin from 'stylis-plugin-rtl';
-import { CacheProvider } from '@emotion/react';
-
-// ----------------------------------------------------------------------
-
-export default function RTL({ children, themeDirection }) {
-  useEffect(() => {
-    document.dir = themeDirection;
-  }, [themeDirection]);
-
-  const cacheRtl = createCache({
-    key: 'rtl',
-    prepend: true,
-    // https://github.com/styled-components/stylis-plugin-rtl/issues/35
-    stylisPlugins: [rtlPlugin],
-  });
-
-  if (themeDirection === 'rtl') {
-    return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
-  }
-
-  return <>{children}</>;
-}
-
-RTL.propTypes = {
-  children: PropTypes.node,
-  themeDirection: PropTypes.oneOf(['rtl', 'ltr']),
-};

package/minimal/src/theme/overrides/components/accordion.js

@@ -1,43 +0,0 @@
-import { accordionClasses } from '@mui/material/Accordion';
-import { typographyClasses } from '@mui/material/Typography';
-import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
-
-// ----------------------------------------------------------------------
-
-export function accordion(theme) {
-  return {
-    MuiAccordion: {
-      styleOverrides: {
-        root: {
-          backgroundColor: 'transparent',
-          [`&.${accordionClasses.expanded}`]: {
-            boxShadow: theme.customShadows.z8,
-            borderRadius: theme.shape.borderRadius,
-            backgroundColor: theme.palette.background.paper,
-          },
-          [`&.${accordionClasses.disabled}`]: {
-            backgroundColor: 'transparent',
-          },
-        },
-      },
-    },
-    MuiAccordionSummary: {
-      styleOverrides: {
-        root: {
-          paddingLeft: theme.spacing(2),
-          paddingRight: theme.spacing(1),
-          [`&.${accordionSummaryClasses.disabled}`]: {
-            opacity: 1,
-            color: theme.palette.action.disabled,
-            [`& .${typographyClasses.root}`]: {
-              color: 'inherit',
-            },
-          },
-        },
-        expandIconWrapper: {
-          color: 'inherit',
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/alert.js

@@ -1,68 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { alertClasses } from '@mui/material/Alert';
-
-// ----------------------------------------------------------------------
-
-const COLORS = ['info', 'success', 'warning', 'error'];
-
-// ----------------------------------------------------------------------
-
-export function alert(theme) {
-  const lightMode = theme.palette.mode === 'light';
-
-  const rootStyles = (ownerState) => {
-    const standardVariant = ownerState.variant === 'standard';
-
-    const filledVariant = ownerState.variant === 'filled';
-
-    const outlinedVariant = ownerState.variant === 'outlined';
-
-    const colorStyle = COLORS.map((color) => ({
-      ...(ownerState.severity === color && {
-        // STANDARD
-        ...(standardVariant && {
-          color: theme.palette[color][lightMode ? 'darker' : 'lighter'],
-          backgroundColor: theme.palette[color][lightMode ? 'lighter' : 'darker'],
-          [`& .${alertClasses.icon}`]: {
-            color: theme.palette[color][lightMode ? 'main' : 'light'],
-          },
-        }),
-        // FILLED
-        ...(filledVariant && {
-          color: theme.palette[color].contrastText,
-          backgroundColor: theme.palette[color].main,
-        }),
-        // OUTLINED
-        ...(outlinedVariant && {
-          backgroundColor: alpha(theme.palette[color].main, 0.08),
-          color: theme.palette[color][lightMode ? 'dark' : 'light'],
-          border: `solid 1px ${alpha(theme.palette[color].main, 0.16)}`,
-          [`& .${alertClasses.icon}`]: {
-            color: theme.palette[color].main,
-          },
-        }),
-      }),
-    }));
-
-    return [...colorStyle];
-  };
-
-  return {
-    MuiAlert: {
-      styleOverrides: {
-        root: ({ ownerState }) => rootStyles(ownerState),
-        icon: {
-          opacity: 1,
-        },
-      },
-    },
-    MuiAlertTitle: {
-      styleOverrides: {
-        root: {
-          marginBottom: theme.spacing(0.5),
-          fontWeight: theme.typography.fontWeightSemiBold,
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/appbar.js

@@ -1,13 +0,0 @@
-// ----------------------------------------------------------------------
-
-export function appBar(theme) {
-  return {
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          boxShadow: 'none',
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/autocomplete.js

@@ -1,44 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { autocompleteClasses } from '@mui/material/Autocomplete';
-
-import { paper, menuItem } from '../../css';
-
-// ----------------------------------------------------------------------
-
-export function autocomplete(theme) {
-  return {
-    MuiAutocomplete: {
-      styleOverrides: {
-        root: {
-          [`& span.${autocompleteClasses.tag}`]: {
-            ...theme.typography.subtitle2,
-            height: 24,
-            minWidth: 24,
-            lineHeight: '24px',
-            textAlign: 'center',
-            padding: theme.spacing(0, 0.75),
-            color: theme.palette.text.secondary,
-            borderRadius: theme.shape.borderRadius,
-            backgroundColor: alpha(theme.palette.grey[500], 0.16),
-          },
-        },
-        paper: {
-          ...paper({ theme, dropdown: true }),
-        },
-        listbox: {
-          padding: 0,
-          [`& .${autocompleteClasses.option}`]: {
-            ...menuItem(theme),
-          },
-        },
-        endAdornment: {
-          [`& .${svgIconClasses.root}`]: {
-            width: 18,
-            height: 18,
-          },
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/avatar.js

@@ -1,103 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { avatarGroupClasses } from '@mui/material/AvatarGroup';
-
-// ----------------------------------------------------------------------
-
-const COLORS = ['default', 'primary', 'secondary', 'info', 'success', 'warning', 'error'];
-
-const colorByName = (name) => {
-  const charAt = name.charAt(0).toLowerCase();
-
-  if (['a', 'c', 'f'].includes(charAt)) return 'primary';
-  if (['e', 'd', 'h'].includes(charAt)) return 'secondary';
-  if (['i', 'k', 'l'].includes(charAt)) return 'info';
-  if (['m', 'n', 'p'].includes(charAt)) return 'success';
-  if (['q', 's', 't'].includes(charAt)) return 'warning';
-  if (['v', 'x', 'y'].includes(charAt)) return 'error';
-  return 'default';
-};
-
-// ----------------------------------------------------------------------
-
-export function avatar(theme) {
-  return {
-    MuiAvatar: {
-      variants: COLORS.map((color) =>
-        color === 'default'
-          ? {
-              props: { color: 'default' },
-              style: {
-                color: theme.palette.text.secondary,
-                backgroundColor: alpha(theme.palette.grey[500], 0.24),
-              },
-            }
-          : {
-              props: { color },
-              style: {
-                color: theme.palette[color].contrastText,
-                backgroundColor: theme.palette[color].main,
-              },
-            }
-      ),
-
-      styleOverrides: {
-        rounded: {
-          borderRadius: theme.shape.borderRadius * 1.5,
-        },
-        colorDefault: ({ ownerState }) => {
-          const color = colorByName(`${ownerState.alt}`);
-
-          return {
-            ...(!!ownerState.alt && {
-              ...(color !== 'default'
-                ? {
-                    color: theme.palette[color].contrastText,
-                    backgroundColor: theme.palette[color].main,
-                  }
-                : {
-                    color: theme.palette.text.secondary,
-                    backgroundColor: alpha(theme.palette.grey[500], 0.24),
-                  }),
-            }),
-          };
-        },
-      },
-    },
-    MuiAvatarGroup: {
-      styleOverrides: {
-        root: ({ ownerState }) => ({
-          justifyContent: 'flex-end',
-          ...(ownerState.variant === 'compact' && {
-            width: 40,
-            height: 40,
-            position: 'relative',
-            [`& .${avatarGroupClasses.avatar}`]: {
-              margin: 0,
-              width: 28,
-              height: 28,
-              position: 'absolute',
-              '&:first-of-type': {
-                left: 0,
-                bottom: 0,
-                zIndex: 9,
-              },
-              '&:last-of-type': {
-                top: 0,
-                right: 0,
-              },
-            },
-          }),
-        }),
-        avatar: {
-          fontSize: 16,
-          fontWeight: theme.typography.fontWeightSemiBold,
-          '&:first-of-type': {
-            fontSize: 12,
-            color: theme.palette.primary.dark,
-            backgroundColor: theme.palette.primary.lighter,
-          },
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/backdrop.js

@@ -1,18 +0,0 @@
-import { alpha } from '@mui/material/styles';
-
-// ----------------------------------------------------------------------
-
-export function backdrop(theme) {
-  return {
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: alpha(theme.palette.grey[900], 0.8),
-        },
-        invisible: {
-          background: 'transparent',
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/badge.js

@@ -1,90 +0,0 @@
-import { badgeClasses } from '@mui/material/Badge';
-
-// ----------------------------------------------------------------------
-
-export function badge(theme) {
-  return {
-    MuiBadge: {
-      styleOverrides: {
-        dot: {
-          borderRadius: '50%',
-        },
-        root: ({ ownerState }) => {
-          const alway = ownerState.variant === 'alway';
-
-          const online = ownerState.variant === 'online';
-
-          const busy = ownerState.variant === 'busy';
-
-          const offline = ownerState.variant === 'offline';
-
-          const invisible = ownerState.variant === 'invisible';
-
-          const baseStyles = {
-            [`&.${badgeClasses.invisible}`]: {
-              transform: 'unset',
-            },
-            width: 10,
-            zIndex: 9,
-            padding: 0,
-            height: 10,
-            minWidth: 'auto',
-            '&:before, &:after': {
-              content: "''",
-              borderRadius: 1,
-              backgroundColor: theme.palette.common.white,
-            },
-          };
-
-          return {
-            ...(online && {
-              [`& .${badgeClasses.badge}`]: {
-                ...baseStyles,
-                backgroundColor: theme.palette.success.main,
-              },
-            }),
-            ...(busy && {
-              [`& .${badgeClasses.badge}`]: {
-                ...baseStyles,
-                backgroundColor: theme.palette.error.main,
-                '&:before': { width: 6, height: 2 },
-              },
-            }),
-            ...(offline && {
-              [`& .${badgeClasses.badge}`]: {
-                ...baseStyles,
-                backgroundColor: theme.palette.text.disabled,
-                '&:before': {
-                  width: 6,
-                  height: 6,
-                  borderRadius: '50%',
-                },
-              },
-            }),
-            ...(alway && {
-              [`& .${badgeClasses.badge}`]: {
-                ...baseStyles,
-                backgroundColor: theme.palette.warning.main,
-                '&:before': {
-                  width: 2,
-                  height: 4,
-                  transform: 'translateX(1px) translateY(-1px)',
-                },
-                '&:after': {
-                  width: 2,
-                  height: 4,
-                  transform: 'translateY(1px) rotate(125deg)',
-                },
-              },
-            }),
-            ...(invisible && {
-              [`& .${badgeClasses.badge}`]: {
-                display: 'none',
-              },
-            }),
-          };
-        },
-      },
-    },
-  };
-}

package/minimal/src/theme/overrides/components/breadcrumbs.js

@@ -1,21 +0,0 @@
-// ----------------------------------------------------------------------
-
-export function breadcrumbs(theme) {
-  return {
-    MuiBreadcrumbs: {
-      styleOverrides: {
-        separator: {
-          marginLeft: theme.spacing(2),
-          marginRight: theme.spacing(2),
-        },
-        li: {
-          display: 'inline-flex',
-          margin: theme.spacing(0.25, 0),
-          '& > *': {
-            ...theme.typography.body2,
-          },
-        },
-      },
-    },
-  };
-}