@material-ui/core
Version:
React components that implement Google's Material Design.
230 lines (212 loc) • 9.18 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@material-ui/utils";
import { deepmerge } from '@material-ui/utils';
import common from '../colors/common';
import grey from '../colors/grey';
import indigo from '../colors/indigo';
import pink from '../colors/pink';
import red from '../colors/red';
import orange from '../colors/orange';
import blue from '../colors/blue';
import green from '../colors/green';
import { darken, getContrastRatio, lighten } from './colorManipulator';
export var 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.54)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
// Text hints.
hint: '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.white,
default: grey[50]
},
// 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
}
};
export var dark = {
text: {
primary: common.white,
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.5)',
hint: 'rgba(255, 255, 255, 0.5)',
icon: 'rgba(255, 255, 255, 0.5)'
},
divider: 'rgba(255, 255, 255, 0.12)',
background: {
paper: grey[800],
default: '#303030'
},
action: {
active: common.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) {
var tonalOffsetLight = tonalOffset.light || tonalOffset;
var tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
if (!intent[direction]) {
if (intent.hasOwnProperty(shade)) {
intent[direction] = intent[shade];
} else if (direction === 'light') {
intent.light = lighten(intent.main, tonalOffsetLight);
} else if (direction === 'dark') {
intent.dark = darken(intent.main, tonalOffsetDark);
}
}
}
export default function createPalette(palette) {
var _palette$primary = palette.primary,
primary = _palette$primary === void 0 ? {
light: indigo[300],
main: indigo[500],
dark: indigo[700]
} : _palette$primary,
_palette$secondary = palette.secondary,
secondary = _palette$secondary === void 0 ? {
light: pink.A200,
main: pink.A400,
dark: pink.A700
} : _palette$secondary,
_palette$error = palette.error,
error = _palette$error === void 0 ? {
light: red[300],
main: red[500],
dark: red[700]
} : _palette$error,
_palette$warning = palette.warning,
warning = _palette$warning === void 0 ? {
light: orange[300],
main: orange[500],
dark: orange[700]
} : _palette$warning,
_palette$info = palette.info,
info = _palette$info === void 0 ? {
light: blue[300],
main: blue[500],
dark: blue[700]
} : _palette$info,
_palette$success = palette.success,
success = _palette$success === void 0 ? {
light: green[300],
main: green[500],
dark: green[700]
} : _palette$success,
_palette$type = palette.type,
type = _palette$type === void 0 ? 'light' : _palette$type,
_palette$contrastThre = palette.contrastThreshold,
contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,
_palette$tonalOffset = palette.tonalOffset,
tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
other = _objectWithoutProperties(palette, ["primary", "secondary", "error", "warning", "info", "success", "type", "contrastThreshold", "tonalOffset"]); // 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) {
var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
if (process.env.NODE_ENV !== 'production') {
var contrast = getContrastRatio(background, contrastText);
if (contrast < 3) {
console.error(["Material-UI: The contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(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;
}
var augmentColor = function augmentColor(color) {
var mainShade = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
var lightShade = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
var darkShade = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 700;
color = _extends({}, color);
if (!color.main && color[mainShade]) {
color.main = color[mainShade];
}
if (!color.main) {
throw new Error(process.env.NODE_ENV !== "production" ? "Material-UI: The color provided to augmentColor(color) is invalid.\nThe color object needs to have a `main` property or a `".concat(mainShade, "` property.") : _formatMuiErrorMessage(4, mainShade));
}
if (typeof color.main !== 'string') {
throw new Error(process.env.NODE_ENV !== "production" ? "Material-UI: The color provided to augmentColor(color) is invalid.\n`color.main` should be a string, but `".concat(JSON.stringify(color.main), "` was provided instead.\n\nDid you intend to use one of the following approaches?\n\nimport {\xA0green } from \"@material-ui/core/colors\";\n\nconst theme1 = createTheme({ palette: {\n primary: green,\n} });\n\nconst theme2 = createTheme({ palette: {\n primary: { main: green[500] },\n} });") : _formatMuiErrorMessage(5, JSON.stringify(color.main)));
}
addLightOrDark(color, 'light', lightShade, tonalOffset);
addLightOrDark(color, 'dark', darkShade, tonalOffset);
if (!color.contrastText) {
color.contrastText = getContrastText(color.main);
}
return color;
};
var types = {
dark: dark,
light: light
};
if (process.env.NODE_ENV !== 'production') {
if (!types[type]) {
console.error("Material-UI: The palette type `".concat(type, "` is not supported."));
}
}
var paletteOutput = deepmerge(_extends({
// A collection of common colors.
common: common,
// The palette type, can be light or dark.
type: type,
// The colors used to represent primary interface elements for a user.
primary: augmentColor(primary),
// The colors used to represent secondary interface elements for a user.
secondary: augmentColor(secondary, 'A400', 'A200', 'A700'),
// The colors used to represent interface elements that the user should be made aware of.
error: augmentColor(error),
// The colors used to represent potentially dangerous actions or important messages.
warning: augmentColor(warning),
// The colors used to present information to the user that is neutral and not necessarily important.
info: augmentColor(info),
// The colors used to indicate the successful completion of an action that user triggered.
success: augmentColor(success),
// The grey colors.
grey: grey,
// Used by `getContrastText()` to maximize the contrast between
// the background and the text.
contrastThreshold: contrastThreshold,
// Takes a background color and returns the text color that maximizes the contrast.
getContrastText: getContrastText,
// Generate a rich color object.
augmentColor: 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: tonalOffset
}, types[type]), other);
return paletteOutput;
}