Page MenuHomec4science
Files F99646189

createPalette.js
No OneTemporary
Actions

File Metadata

Created
Sat, Jan 25, 23:21

createPalette.js
View Options

"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 _utils = require("@mui/utils");
var _system = require("@mui/system");
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 = {
// 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
}
};
exports.light = light;
const 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
}
};
exports.dark = dark;
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, _system.lighten)(intent.main, tonalOffsetLight);
} else if (direction === 'dark') {
intent.dark = (0, _system.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, _system.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
if (process.env.NODE_ENV !== 'production') {
const contrast = (0, _system.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, _utils.formatMuiErrorMessage)(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, _utils.formatMuiErrorMessage)(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, _utils.deepmerge)((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;
}

Event Timeline

c4science · Help