@octopusdeploy/design-system-components
Version:
The design systems component library.
199 lines (198 loc) • 8.29 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MuiThemeApplier = MuiThemeApplier;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const material_1 = require("@mui/material");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = __importDefault(require("react"));
function MuiThemeApplier({ themeName, children }) {
const muiTheme = react_1.default.useMemo(() => createMuiTheme(themeName), [themeName]);
return ((0, jsx_runtime_1.jsx)("div", { className: focusStyles, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: muiTheme, children: children }) }));
}
function createLightPalette() {
return {
primary: { main: design_system_tokens_1.colorScales.blue["500"] },
secondary: {
main: design_system_tokens_1.colorScales.blue["500"],
contrastText: design_system_tokens_1.colorScales.white,
},
text: {
// The most important text.
primary: design_system_tokens_1.colorScales.grey["800"],
// Secondary text.
secondary: design_system_tokens_1.colorScales.grey["500"],
// Disabled text have even lower visual prominence.
disabled: design_system_tokens_1.colorScales.grey["500"],
},
background: {
paper: design_system_tokens_1.colorScales.white,
default: design_system_tokens_1.colorScales.white,
},
divider: design_system_tokens_1.colorScales.grey["200"],
// The colors used to style the action elements.
action: {
// The color of an active action like an icon button.
active: design_system_tokens_1.colorScales.grey["800"],
// The color of an hovered action.
hover: design_system_tokens_1.colorScales.grey["200"],
hoverOpacity: 0.08,
// The color of a selected action.
selected: design_system_tokens_1.colorScales.grey["200"],
// The color of a disabled action.
disabled: design_system_tokens_1.colorScales.grey["500"],
// The background color of a disabled action.
disabledBackground: design_system_tokens_1.colorScales.grey["200"],
},
error: {
main: design_system_tokens_1.colorScales.red["500"],
},
status: {
danger: design_system_tokens_1.colorScales.orange["500"],
info: design_system_tokens_1.colorScales.blue["500"],
},
};
}
function createDarkPalette() {
return {
primary: { main: design_system_tokens_1.colorScales.blue["400"] },
secondary: {
main: design_system_tokens_1.colorScales.blue["400"],
},
background: {
paper: design_system_tokens_1.colorScales.navy["800"],
default: design_system_tokens_1.colorScales.navy["800"],
},
text: {
// The most important text.
primary: design_system_tokens_1.colorScales.blue["100"],
// Secondary text.
secondary: design_system_tokens_1.colorScales.navy["300"],
// Disabled text have even lower visual prominence.
disabled: design_system_tokens_1.colorScales.navy["300"],
},
divider: design_system_tokens_1.colorScales.navy["700"],
error: {
main: design_system_tokens_1.colorScales.red["500"],
},
status: {
danger: design_system_tokens_1.colorScales.orange["500"],
info: design_system_tokens_1.colorScales.blue["500"],
},
};
}
function createMuiTheme(type) {
const palette = type === "dark" ? createDarkPalette() : createLightPalette();
const options = {
palette,
typography: {
fontFamily: design_system_tokens_1.fontFamily.default,
},
components: {
MuiMenu: {
styleOverrides: {
paper: {
backgroundColor: design_system_tokens_1.themeTokens.color.background.secondary.hover,
},
},
},
MuiDivider: {
styleOverrides: {
root: {
// Remove margin when inside a menu
".MuiMenu-paper &&": {
marginTop: 0,
marginBottom: 0,
},
},
},
},
MuiPopover: {
styleOverrides: {
paper: {
boxShadow: design_system_tokens_1.themeTokens.shadow.medium,
},
},
},
MuiDialog: {
styleOverrides: {
paper: {
boxShadow: design_system_tokens_1.themeTokens.shadow.large,
},
},
},
MuiInputBase: {
styleOverrides: {
root: {
color: design_system_tokens_1.themeTokens.color.textField.text.primary,
},
input: {
"&::placeholder": {
color: design_system_tokens_1.themeTokens.color.textField.text.secondary,
},
},
},
},
MuiFormLabel: {
styleOverrides: {
root: {
color: design_system_tokens_1.themeTokens.color.textField.text.secondary,
font: design_system_tokens_1.text.body.regular.large,
"&.Mui-focused": {
color: design_system_tokens_1.themeTokens.color.textField.text.selected,
},
"&.Mui-error": {
color: design_system_tokens_1.themeTokens.color.textField.text.danger,
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
color: design_system_tokens_1.themeTokens.color.textField.text.secondary,
},
shrink: {
color: design_system_tokens_1.themeTokens.color.textField.text.secondary,
},
},
},
MuiInput: {
styleOverrides: {
underline: {
"&:before": {
borderBottomColor: design_system_tokens_1.themeTokens.color.textField.border.default,
},
"&:hover:not(.Mui-disabled):before": {
borderBottomColor: design_system_tokens_1.themeTokens.color.textField.border.hover,
borderBottomWidth: "2px",
},
"&:after": {
borderBottomColor: design_system_tokens_1.themeTokens.color.textField.border.active,
},
"&.Mui-error:after": {
borderBottomColor: design_system_tokens_1.themeTokens.color.textField.text.danger,
},
},
input: {
"&::placeholder": {
opacity: 1,
},
},
},
},
},
};
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
return (0, material_1.createTheme)(options);
}
const focusStyles = (0, css_1.css)({
// Since we're disabling MUI's ripple effect, we need to define our own focused appearance
// This affects IconButtons used with Portal's Select component, for example
[".Mui-focusVisible"]: {
background: design_system_tokens_1.themeTokens.color.background.info,
},
});