worked on GarageApp stuff
This commit is contained in:
parent
60aaf17af3
commit
eb606572b0
51919 changed files with 2168177 additions and 18 deletions
339
node_modules/@mui/material/styles/createPalette.js
generated
vendored
Normal file
339
node_modules/@mui/material/styles/createPalette.js
generated
vendored
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
"use strict";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.contrastColor = contrastColor;
|
||||
exports.dark = void 0;
|
||||
exports.default = createPalette;
|
||||
exports.light = void 0;
|
||||
var _formatMuiErrorMessage = _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"));
|
||||
function getLight() {
|
||||
return {
|
||||
// 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 light = exports.light = getLight();
|
||||
function getDark() {
|
||||
return {
|
||||
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
|
||||
}
|
||||
};
|
||||
}
|
||||
const dark = exports.dark = getDark();
|
||||
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 mixLightOrDark(colorSpace, 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 = `color-mix(in ${colorSpace}, ${intent.main}, #fff ${(tonalOffsetLight * 100).toFixed(0)}%)`;
|
||||
} else if (direction === 'dark') {
|
||||
intent.dark = `color-mix(in ${colorSpace}, ${intent.main}, #000 ${(tonalOffsetDark * 100).toFixed(0)}%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
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]
|
||||
};
|
||||
}
|
||||
|
||||
// Use the same name as the experimental CSS `contrast-color` function.
|
||||
function contrastColor(background) {
|
||||
return `oklch(from ${background} var(--__l) 0 h / var(--__a))`;
|
||||
}
|
||||
function createPalette(palette) {
|
||||
const {
|
||||
mode = 'light',
|
||||
contrastThreshold = 3,
|
||||
tonalOffset = 0.2,
|
||||
colorSpace,
|
||||
...other
|
||||
} = palette;
|
||||
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) {
|
||||
if (colorSpace) {
|
||||
return contrastColor(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 = {
|
||||
...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.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage.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.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + ' primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + ' primary: { main: green[500] },\n' + '} });' : (0, _formatMuiErrorMessage.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
|
||||
}
|
||||
if (colorSpace) {
|
||||
mixLightOrDark(colorSpace, color, 'light', lightShade, tonalOffset);
|
||||
mixLightOrDark(colorSpace, color, 'dark', darkShade, tonalOffset);
|
||||
} else {
|
||||
addLightOrDark(color, 'light', lightShade, tonalOffset);
|
||||
addLightOrDark(color, 'dark', darkShade, tonalOffset);
|
||||
}
|
||||
if (!color.contrastText) {
|
||||
color.contrastText = getContrastText(color.main);
|
||||
}
|
||||
return color;
|
||||
};
|
||||
let modeHydrated;
|
||||
if (mode === 'light') {
|
||||
modeHydrated = getLight();
|
||||
} else if (mode === 'dark') {
|
||||
modeHydrated = getDark();
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (!modeHydrated) {
|
||||
console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
|
||||
}
|
||||
}
|
||||
const paletteOutput = (0, _deepmerge.default)({
|
||||
// A collection of common colors.
|
||||
common: {
|
||||
..._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,
|
||||
// The light and dark mode object.
|
||||
...modeHydrated
|
||||
}, other);
|
||||
return paletteOutput;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue