@elacity-js/uikit/dist/themes/index.js

React / Material UI Design kit for Elacity project

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { deepmerge } from '@mui/utils';
import { createTheme, alpha, responsiveFontSizes, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
import { CssBaseline } from '@mui/material';
import { isAppleMobile } from '@elacity-js/lib';
import useAppSettings from '../hooks/useAppSettings.js';
import ComponentsOverrides from './overrides/index.js';
import { commonOptions, colors } from './common.js';
import darkTheme from './dark.js';
import lightTheme from './light.js';

const themes = {
    light: lightTheme,
    dark: darkTheme,
};
/**
 * Create gradient value
 *
 * @param tilt
 * @param colors
 * @returns
 */
const createGradient = (tilt, ...colors) => {
    const values = [];
    if (typeof tilt === 'number') {
        values.push(`${tilt}deg`);
    }
    colors.forEach((c, i) => {
        if (typeof c === 'string') {
            // eslint-disable-next-line no-param-reassign
            c = [c, Math.ceil(100 * (colors.length - 1 - i))];
        }
        values.push(`${c[0]} ${c[1]}%`);
    });
    return values;
};
/**
 * Create a mui theme based on config and customization
 *
 * config: IUserPreferences {theme: 'light' | 'dark', direction: 'ltr' | 'rtl'}
 * customization: Record<'light' | 'dark', ThemeOptions>
 *
 * @showcase https://codesandbox.io/s/stoic-moon-y51cyz
 *
 * @param {*} config
 * @param {*} customization
 */
const createThemeWith = (config = {}, customization) => {
    const mode = config.theme || 'light';
    const userOptions = deepmerge(themes[mode], customization[mode] || {});
    const theme = createTheme(deepmerge(deepmerge({ direction: config.direction || 'ltr' }, commonOptions), userOptions));
    // implement glassy spec
    // for further details about what it is, see
    // https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9
    theme.glassy = (background, value = 1, blur = 0) => ({
        backdropFilter: `blur(${2 * blur}px)`,
        WebkitBackdropFilter: `blur(${2 * blur}px)`,
        background: alpha(background, value),
    });
    // setup gradient helper
    theme.gardientBackground = (tilt, ...colors) => ({
        background: `linear-gradient(${createGradient(tilt, ...colors).join(', ')})`,
    });
    theme.gardientText = (tilt, ...colors) => (Object.assign({}, (isAppleMobile()
        ? {
            color: theme.palette.primary.main,
        }
        : {
            background: `-webkit-linear-gradient(${createGradient(tilt, ...colors).join(', ')})`,
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            WebkitBoxDecorationBreak: 'clone',
        })));
    theme.radialRadientBackground = (...colors) => ({
        background: `radial-gradient(circle at center, ${createGradient(null, ...colors).join(', ')})`,
    });
    theme.palette.error = theme.palette.augmentColor({ color: { main: colors.error }, name: 'error' });
    theme.palette.success = theme.palette.augmentColor({ color: { main: colors.success }, name: 'success' });
    theme.palette.vivid = theme.palette.augmentColor({ color: { main: colors.vivid }, name: 'vivid' });
    theme.palette.vivid2 = theme.palette.augmentColor({ color: { main: colors.vivid2 }, name: 'vivid2' });
    theme.palette.badge1 = theme.palette.augmentColor({ color: { main: colors.badge1 }, name: 'badge1' });
    return responsiveFontSizes(createTheme(theme, {
        components: ComponentsOverrides(theme)
    }, {
        // handle components overrides on customization
        components: userOptions.components || {}
    }));
};
const ThemeProvider = ({ children, customization, }) => {
    const { values } = useAppSettings();
    const theme = React__default.useMemo(() => createThemeWith(values, customization), [values.theme]);
    return (jsxs(ThemeProvider$1, Object.assign({ theme: theme }, { children: [jsx(CssBaseline, {}), children] })));
};
ThemeProvider.defaultProps = {
    customization: {
        light: {},
        dark: {},
    },
};

export { ThemeProvider, createThemeWith, createThemeWith as default };
//# sourceMappingURL=index.js.map