@worktif/purei
Version:
Work TIF Material UI Theme Provider and Customization Suite for React applications with dark mode support and dynamic color schemes
125 lines • 6.9 kB
JavaScript
;
/*
* Work TIF, Raman Marozau.
* All rights reserved.
* Copyright(c), 2025-present.
*
* Business Source License 1.1
*
* Copyright (C) 2025 Raman Marozau, raman@worktif.com
* Use of this software is governed by the Business Source License included in the LICENSE file and at www.mariadb.com/bsl11.
*
* Change Date: Never
* On the date above, in accordance with the Business Source License, use of this software will be governed by the open source license specified in the LICENSE file.
* Additional Use Grant: Free for personal and non-commercial research use only.
*
*
* SPDX-License-Identifier: BUSL-1.1
*/
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AppTheme = AppTheme;
const React = __importStar(require("react"));
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const customization_1 = require("./customization");
const themePrimitives_1 = require("./themePrimitives");
// @todo: random pallete color accorgin to a start of a live application
// Write: even our application lives your colors
const colors = [
['#F054A5', '#FABF37', '#7b88fa', '#f3ff48', '#000a5c'],
['#7AFDD6', '#77FF94', '#ED6A5A', '#613F75', '#FFE1C6'],
['#A682FF', '#715AFF', '#5887FF', '#55C1FF', '#102E4A'],
['#FEE440', '#FCA17D', '#DA627D', '#9A348E', '#AFE3C0'],
['#540D6E', '#DC2E3F', '#FFD23F', '#F6E8EA', '#97EAD2'],
['#F7B2B7', '#F7717D', '#DE639A', '#7F2982', '#16001E'],
['#08415C', '#388697', '#B5FFE1', '#DAD4EF', '#FC6471'],
['#5603AD', '#DCD6F7', '#EEE3AB', '#E86252', '#21897E'],
['#4C1A57', '#FF3CC7', '#F0F600', '#00E5E8', '#007C77'],
['#F3E9DC', '#C08552', '#5E3023', '#895737', '#DAB49D'],
['#F7C1BB', '#885A5A', '#353A47', '#84B082', '#DC136C'],
['#048A81', '#06D6A0', '#54C6EB', '#8A89C0', '#CDA2AB'],
['#916953', '#CF8E80', '#FCB5B5', '#FCDDF2', '#FAF6F6'],
['#5603AD', '#DCD6F7', '#EEE3AB', '#E86252', '#4381C1'],
['#360568', '#5B2A86', '#7785AC', '#9AC6C5', '#A5E6BA'],
['#E88D67', '#E9CE2C', '#C0E6DE', '#7B8CDE', '#02182B'],
['#FFC6D9', '#FFE1C6', '#FFF7AE', '#48284A', '#916C80'],
['#002642', '#840032', '#E59500', '#E5DADA', '#02040F'], // selected at first
['#52E0D0', '#ED1D7A', '#282A3E', '#FF7033', '#ADFFAD'],
['#9B97B2', '#D8A7CA', '#36F1CD', '#C7B8EA', '#F6F930'],
['#21FFA5', '#FF85F5', '#7A21FF', '#0000F6', '#B6B6B6'],
['#2A1E5C', '#FF47A4', '#ff4343', '#2FEEC8', '#F4E4BA'],
['#582707', '#CD3600', '#FF4B3E', '#FFB20F', '#FDFF31'],
['#FF5B3D', '#FF9679', '#FFC3D4', '#B2FC52', '#3DFF81'],
['#7404CE', '#F7567C', '#FFE6B7', '#140092', '#FFDB2B'],
['#FF3D3D', '#7D3DFF', '#D7C3FF', '#FFABAB', '#D8FF63'],
['#D7FF1F', '#AC8FFF', '#27D7FF', '#FFCAD4', '#FF8251'],
['#27187E', '#758BFD', '#9EC7FF', '#F1F2F6', '#FFAE00'],
['#00D1E8', '#FF5A5F', '#A38CFF', '#4343FF'],
['#A40027', '#FF9332', '#F8F4A6', '#ABFFA2', '#3545FF'],
];
/**
* A functional component that provides a theme context for its children.
* It conditionally applies a custom theme or defaults to no theme based on the provided props.
*
* @param {Object} props - The properties object.
* @param {React.ReactNode} props.children - The child components or elements to which the theme context will be applied.
* @param {boolean} props.disableCustomTheme - Determines whether the custom theme is disabled. If true, the default theme is used.
* @param {Object} props.themeComponents - Custom theme components or overrides to be merged into the theme configuration.
* @return {JSX.Element} A JSX.Element wrapping the children with or without a custom theme.
*/
function AppTheme({ children, disableCustomTheme, defaultTheme, themeComponents }) {
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
: (0, styles_1.createTheme)(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, themePrimitives_1.getDesignTokens)('dark')), {
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
cssVariables: {
colorSchemeSelector: 'data-mui-color-scheme',
cssVarPrefix: 'template',
}, colorSchemes: themePrimitives_1.colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
typography: // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
themePrimitives_1.typography,
shadows: themePrimitives_1.shadows,
shape: themePrimitives_1.shape }), defaultTheme), { components: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, customization_1.inputsCustomizations), customization_1.dataDisplayCustomizations), customization_1.feedbackCustomizations), customization_1.navigationCustomizations), customization_1.surfacesCustomizations), themeComponents) }));
}, [disableCustomTheme, themeComponents]);
if (disableCustomTheme) {
return React.createElement(React.Fragment, null, children);
}
return (React.createElement(material_1.ThemeProvider, { theme: theme, defaultMode: 'dark', noSsr: true },
React.createElement(material_1.CssBaseline, { enableColorScheme: true }),
children));
}
//# sourceMappingURL=app.theme.js.map