"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.dark = void 0; exports.default = createPalette; exports.light = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose")); var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage")); var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge")); var _colorManipulator = require("@mui/system/colorManipulator"); var _common = _interopRequireDefault(require("../colors/common")); var _grey = _interopRequireDefault(require("../colors/grey")); var _purple = _interopRequireDefault(require("../colors/purple")); var _red = _interopRequireDefault(require("../colors/red")); var _orange = _interopRequireDefault(require("../colors/orange")); var _blue = _interopRequireDefault(require("../colors/blue")); var _lightBlue = _interopRequireDefault(require("../colors/lightBlue")); var _green = _interopRequireDefault(require("../colors/green")); const _excluded = ["mode", "contrastThreshold", "tonalOffset"]; const light = exports.light = { // The colors used to style the text. text: { // The most important text. primary: 'rgba(0, 0, 0, 0.87)', // Secondary text. secondary: 'rgba(0, 0, 0, 0.6)', // Disabled text have even lower visual prominence. disabled: 'rgba(0, 0, 0, 0.38)' }, // The color used to divide different elements. divider: 'rgba(0, 0, 0, 0.12)', // The background colors used to style the surfaces. // Consistency between these values is important. background: { paper: _common.default.white, default: _common.default.white }, // The colors used to style the action elements. action: { // The color of an active action like an icon button. active: 'rgba(0, 0, 0, 0.54)', // The color of an hovered action. hover: 'rgba(0, 0, 0, 0.04)', hoverOpacity: 0.04, // The color of a selected action. selected: 'rgba(0, 0, 0, 0.08)', selectedOpacity: 0.08, // The color of a disabled action. disabled: 'rgba(0, 0, 0, 0.26)', // The background color of a disabled action. disabledBackground: 'rgba(0, 0, 0, 0.12)', disabledOpacity: 0.38, focus: 'rgba(0, 0, 0, 0.12)', focusOpacity: 0.12, activatedOpacity: 0.12 } }; const dark = exports.dark = { text: { primary: _common.default.white, secondary: 'rgba(255, 255, 255, 0.7)', disabled: 'rgba(255, 255, 255, 0.5)', icon: 'rgba(255, 255, 255, 0.5)' }, divider: 'rgba(255, 255, 255, 0.12)', background: { paper: '#121212', default: '#121212' }, action: { active: _common.default.white, hover: 'rgba(255, 255, 255, 0.08)', hoverOpacity: 0.08, selected: 'rgba(255, 255, 255, 0.16)', selectedOpacity: 0.16, disabled: 'rgba(255, 255, 255, 0.3)', disabledBackground: 'rgba(255, 255, 255, 0.12)', disabledOpacity: 0.38, focus: 'rgba(255, 255, 255, 0.12)', focusOpacity: 0.12, activatedOpacity: 0.24 } }; function addLightOrDark(intent, direction, shade, tonalOffset) { const tonalOffsetLight = tonalOffset.light || tonalOffset; const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5; if (!intent[direction]) { if (intent.hasOwnProperty(shade)) { intent[direction] = intent[shade]; } else if (direction === 'light') { intent.light = (0, _colorManipulator.lighten)(intent.main, tonalOffsetLight); } else if (direction === 'dark') { intent.dark = (0, _colorManipulator.darken)(intent.main, tonalOffsetDark); } } } function getDefaultPrimary(mode = 'light') { if (mode === 'dark') { return { main: _blue.default[200], light: _blue.default[50], dark: _blue.default[400] }; } return { main: _blue.default[700], light: _blue.default[400], dark: _blue.default[800] }; } function getDefaultSecondary(mode = 'light') { if (mode === 'dark') { return { main: _purple.default[200], light: _purple.default[50], dark: _purple.default[400] }; } return { main: _purple.default[500], light: _purple.default[300], dark: _purple.default[700] }; } function getDefaultError(mode = 'light') { if (mode === 'dark') { return { main: _red.default[500], light: _red.default[300], dark: _red.default[700] }; } return { main: _red.default[700], light: _red.default[400], dark: _red.default[800] }; } function getDefaultInfo(mode = 'light') { if (mode === 'dark') { return { main: _lightBlue.default[400], light: _lightBlue.default[300], dark: _lightBlue.default[700] }; } return { main: _lightBlue.default[700], light: _lightBlue.default[500], dark: _lightBlue.default[900] }; } function getDefaultSuccess(mode = 'light') { if (mode === 'dark') { return { main: _green.default[400], light: _green.default[300], dark: _green.default[700] }; } return { main: _green.default[800], light: _green.default[500], dark: _green.default[900] }; } function getDefaultWarning(mode = 'light') { if (mode === 'dark') { return { main: _orange.default[400], light: _orange.default[300], dark: _orange.default[700] }; } return { main: '#ed6c02', // closest to orange[800] that pass 3:1. light: _orange.default[500], dark: _orange.default[900] }; } function createPalette(palette) { const { mode = 'light', contrastThreshold = 3, tonalOffset = 0.2 } = palette, other = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded); const primary = palette.primary || getDefaultPrimary(mode); const secondary = palette.secondary || getDefaultSecondary(mode); const error = palette.error || getDefaultError(mode); const info = palette.info || getDefaultInfo(mode); const success = palette.success || getDefaultSuccess(mode); const warning = palette.warning || getDefaultWarning(mode); // Use the same logic as // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59 // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54 function getContrastText(background) { const contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary; if (process.env.NODE_ENV !== 'production') { const contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText); if (contrast < 3) { console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')); } } return contrastText; } const augmentColor = ({ color, name, mainShade = 500, lightShade = 300, darkShade = 700 }) => { color = (0, _extends2.default)({}, color); if (!color.main && color[mainShade]) { color.main = color[mainShade]; } if (!color.hasOwnProperty('main')) { throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid. The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage2.default)(11, name ? ` (${name})` : '', mainShade)); } if (typeof color.main !== 'string') { throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid. \`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead. Did you intend to use one of the following approaches? import { green } from "@mui/material/colors"; const theme1 = createTheme({ palette: { primary: green, } }); const theme2 = createTheme({ palette: { primary: { main: green[500] }, } });` : (0, _formatMuiErrorMessage2.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main))); } addLightOrDark(color, 'light', lightShade, tonalOffset); addLightOrDark(color, 'dark', darkShade, tonalOffset); if (!color.contrastText) { color.contrastText = getContrastText(color.main); } return color; }; const modes = { dark, light }; if (process.env.NODE_ENV !== 'production') { if (!modes[mode]) { console.error(`MUI: The palette mode \`${mode}\` is not supported.`); } } const paletteOutput = (0, _deepmerge.default)((0, _extends2.default)({ // A collection of common colors. common: (0, _extends2.default)({}, _common.default), // prevent mutable object. // The palette mode, can be light or dark. mode, // The colors used to represent primary interface elements for a user. primary: augmentColor({ color: primary, name: 'primary' }), // The colors used to represent secondary interface elements for a user. secondary: augmentColor({ color: secondary, name: 'secondary', mainShade: 'A400', lightShade: 'A200', darkShade: 'A700' }), // The colors used to represent interface elements that the user should be made aware of. error: augmentColor({ color: error, name: 'error' }), // The colors used to represent potentially dangerous actions or important messages. warning: augmentColor({ color: warning, name: 'warning' }), // The colors used to present information to the user that is neutral and not necessarily important. info: augmentColor({ color: info, name: 'info' }), // The colors used to indicate the successful completion of an action that user triggered. success: augmentColor({ color: success, name: 'success' }), // The grey colors. grey: _grey.default, // Used by `getContrastText()` to maximize the contrast between // the background and the text. contrastThreshold, // Takes a background color and returns the text color that maximizes the contrast. getContrastText, // Generate a rich color object. augmentColor, // Used by the functions below to shift a color's luminance by approximately // two indexes within its tonal palette. // E.g., shift from Red 500 to Red 300 or Red 700. tonalOffset }, modes[mode]), other); return paletteOutput; }