@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
481 lines • 16.3 kB
JavaScript
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var _a, _b, _c;
import { accordionClasses } from '@mui/material/Accordion';
import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
import { common, grey } from '@mui/material/colors';
import { listItemTextClasses } from '@mui/material/ListItemText';
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import DLS_COMPONENT_SLOT_NAMES from "../../constants/DLS_COMPONENT_SLOT_NAMES";
import cssRadius from "../../helpers/cssRadius";
import px from "../../helpers/px";
import pxToNumber from "../../helpers/pxToNumber";
import { navy, seafoam, mist, surface, teal } from './colors';
import customDims from './customDims';
import palette, { customPalette, navyHover } from './palette';
import shadows from './shadows';
import spacing, { SPACING_PX } from './spacing';
import typography, { BASE_FONT_SIZE, INPUT_FONT_SIZE, secondaryFontFamily, } from './typography';
import zIndex from './zIndex';
export var LARGE_RADIUS_VALUE = 1000;
// This is way more than we actually need, but the browser will dial it back
// to an appropriate level, and we have a larger value here if we happen to
// have a larger component that needs it. This should cover a component up to
// height = 2 * borderRadius
export var LARGE_RADIUS = cssRadius(LARGE_RADIUS_VALUE);
// Base values found here:
// https://github.com/act-org/dls/blob/main/src/styles/themeActEt/components.ts
export var components = (_a = {},
_a[DLS_COMPONENT_NAMES.BAR_CHART] = {
defaultProps: {
yAxisProps: {
width: 76,
},
},
},
_a[DLS_COMPONENT_NAMES.PIE_CHART] = {
styleOverrides: (_b = {},
_b[DLS_COMPONENT_SLOT_NAMES[DLS_COMPONENT_NAMES.PIE_CHART]
.PIE_LEGEND_LABEL] = (_c = {},
_c["& .".concat(listItemTextClasses.secondary)] = {
color: grey[700],
},
_c),
_b),
},
_a.MuiAccordion = {
defaultProps: {
square: true,
},
styleOverrides: {
root: function (_a) {
var _b;
var ownerState = _a.ownerState;
return (__assign({}, (!ownerState.disableGutters && (_b = {
'&::before': {
display: 'none',
},
'&:first-of-type': {
marginTop: 0,
},
'&:last-of-type': {
marginBottom: 0,
},
boxShadow: 'none',
margin: "".concat(spacing(1), " 0")
},
_b["&.".concat(accordionClasses.expanded)] = {
margin: "".concat(spacing(1), " 0"),
},
_b))));
},
},
},
_a.MuiAccordionDetails = {
styleOverrides: {
root: {
padding: "".concat(spacing(3), " ").concat(spacing(2), " ").concat(spacing(2)),
},
},
},
_a.MuiAccordionSummary = {
styleOverrides: {
content: function (_a) {
var _b;
var ownerState = _a.ownerState;
return (__assign({ alignItems: 'center', margin: 0, minHeight: 48 }, (!ownerState.disableGutters && (_b = {},
_b["&.".concat(accordionSummaryClasses.expanded)] = {
margin: 0,
},
_b))));
},
root: function (_a) {
var _b;
var ownerState = _a.ownerState;
return (__assign(__assign(__assign({}, cssRadius(12)), { background: navy[15], border: "1px solid ".concat(navy[30]), padding: "".concat(spacing(2), " ").concat(spacing(3)) }), (!ownerState.disableGutters && (_b = {},
_b["&.".concat(accordionSummaryClasses.expanded)] = {
minHeight: undefined,
},
_b))));
},
},
},
_a.MuiAlert = {
styleOverrides: {
action: {
paddingTop: '0',
},
icon: {
height: '100%',
marginBottom: 'auto',
marginTop: px(2),
},
root: __assign(__assign({}, cssRadius(4)), { alignItems: 'center' }),
},
},
_a.MuiAppBar = {
defaultProps: {
position: 'static',
},
styleOverrides: {
root: __assign(__assign({}, cssRadius(0)), { boxShadow: 'unset', height: customDims.heights.header, position: 'relative', width: '100%', zIndex: zIndex.appBar }),
},
},
_a.MuiAutocomplete = {
styleOverrides: {
endAdornment: {
display: 'none',
},
inputRoot: {
padding: spacing(0.5),
paddingLeft: spacing(2),
},
popper: {
paddingLeft: spacing(2.5),
paddingRight: spacing(2.5),
},
tag: {
marginLeft: spacing(0.5),
},
},
},
_a.MuiAvatar = {
styleOverrides: {
root: {
background: common.white,
},
rounded: __assign({}, cssRadius(8)),
square: __assign({}, cssRadius(0)),
},
},
_a.MuiBackdrop = {
styleOverrides: {
root: {
background: customPalette.background.overlay,
},
},
},
_a.MuiBreadcrumbs = {
styleOverrides: {
separator: __assign(__assign({}, typography.body1), { color: customPalette.text.over.light.medium }),
},
},
_a.MuiButton = {
styleOverrides: {
contained: __assign(__assign({}, LARGE_RADIUS), { '&:hover': {
boxShadow: 'none',
}, boxShadow: 'none' }),
containedPrimary: {
'&:disabled': {
backgroundColor: customPalette.background.disabled,
color: palette.primary.contrastText,
},
'&:hover': {
backgroundColor: navyHover,
},
},
outlined: __assign({}, LARGE_RADIUS),
outlinedPrimary: {
'&:disabled': {
backgroundColor: palette.primary.contrastText,
color: customPalette.background.disabled,
},
'&:hover': {
backgroundColor: palette.action.hover,
border: "1px solid ".concat(palette.primary.light),
color: palette.primary.main,
},
backgroundColor: palette.primary.contrastText,
border: "1px solid ".concat(palette.primary.light),
},
root: {
height: undefined,
},
sizeLarge: __assign(__assign(__assign({}, INPUT_FONT_SIZE), LARGE_RADIUS), { height: undefined, paddingBottom: spacing(2), paddingLeft: spacing(6), paddingRight: spacing(6), paddingTop: spacing(2) }),
sizeMedium: __assign(__assign(__assign({}, INPUT_FONT_SIZE), LARGE_RADIUS), { paddingBottom: spacing(1), paddingLeft: spacing(3), paddingRight: spacing(3), paddingTop: spacing(1) }),
sizeSmall: __assign(__assign(__assign({}, INPUT_FONT_SIZE), LARGE_RADIUS), { height: undefined, paddingBottom: spacing(0.5), paddingLeft: spacing(3), paddingRight: spacing(3), paddingTop: spacing(0.5) }),
text: {
'&:hover': {
backgroundColor: palette.action.hover,
border: "1px solid ".concat(palette.primary.light),
},
// This is to keep the button from jumping around when we show the border on hover
border: "1px solid transparent",
},
// Adjust these padding sizes for text buttons to account for
// the 1px (sometimes invisible) border, otherwise text buttons
// become 2px taller than other buttons of the same size
textSizeLarge: {
paddingBottom: px(SPACING_PX * 2 - 1),
paddingTop: px(SPACING_PX * 2 - 1),
},
textSizeMedium: {
paddingBottom: px(SPACING_PX - 1),
paddingTop: px(SPACING_PX - 1),
},
textSizeSmall: {
paddingBottom: px(SPACING_PX * 0.5 - 1),
paddingTop: px(SPACING_PX * 0.5 - 1),
},
},
},
_a.MuiButtonBase = {
styleOverrides: {
root: __assign(__assign({}, INPUT_FONT_SIZE), LARGE_RADIUS),
},
},
_a.MuiCard = {
styleOverrides: {
root: {
background: common.white,
},
},
},
_a.MuiChip = {
styleOverrides: {
filled: {
background: seafoam[30],
border: "1px solid ".concat(seafoam[100]),
},
label: {
paddingBottom: 0,
paddingLeft: spacing(1),
paddingRight: spacing(1),
paddingTop: 0,
},
root: __assign(__assign({}, cssRadius(12)), { fontFamily: secondaryFontFamily, fontSize: 14, lineHeight: 20 / 14 }),
sizeMedium: {
height: 20 + SPACING_PX * 2,
paddingBottom: spacing(1),
paddingLeft: spacing(1),
paddingRight: spacing(1),
paddingTop: spacing(1),
},
sizeSmall: {
height: 20 + SPACING_PX,
paddingBottom: spacing(0.5),
paddingLeft: 0,
paddingRight: 0,
paddingTop: spacing(0.5),
},
},
},
_a.MuiContainer = {
defaultProps: {
maxWidth: 'lg',
},
},
_a.MuiDialogActions = {
styleOverrides: {
root: {
margin: spacing(2),
},
},
},
_a.MuiDivider = {
styleOverrides: {
fullWidth: {
width: '100%',
},
root: {
border: "1px solid ".concat(mist[100]),
borderWidth: 1,
},
},
},
_a.MuiFilledInput = {
styleOverrides: {
hiddenLabel: {
paddingBottom: spacing(1.5),
paddingTop: spacing(1.5),
},
input: {
'&:-webkit-autofill': {
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
},
},
},
},
_a.MuiFormControl = {
styleOverrides: {
root: {
marginTop: spacing(1),
},
},
},
_a.MuiIconButton = {
styleOverrides: {
root: {
'&:disabled': {
'&:hover': {
color: palette.primary.main,
},
},
'&:hover > svg': {
opacity: 0.8,
},
},
},
},
_a.MuiInputBase = {
styleOverrides: {
root: {
'&.Mui-disabled': {
background: mist[30],
},
padding: spacing(1),
},
sizeSmall: {
padding: spacing(1),
},
},
},
_a.MuiInputLabel = {
styleOverrides: {
formControl: {
position: undefined,
transform: undefined,
},
outlined: {
'&.MuiInputLabel-marginDense': {
transform: undefined,
},
marginLeft: spacing(2.5),
transform: undefined,
transformOrigin: undefined,
},
root: {
color: surface.black[60],
fontFamily: secondaryFontFamily,
fontSize: 14,
fontWeight: typography.fontWeightMedium,
letterSpacing: px(1),
lineHeight: px(20),
},
},
},
_a.MuiLinearProgress = {
styleOverrides: {
bar: {
background: customPalette.progress.ongoing,
},
root: __assign(__assign({}, cssRadius(6)), { height: 12 }),
},
},
_a.MuiLink = {
styleOverrides: {
root: __assign(__assign({}, BASE_FONT_SIZE), { fontFamily: secondaryFontFamily }),
},
},
_a.MuiListItemButton = {
styleOverrides: {
root: __assign({}, cssRadius(0)),
},
},
_a.MuiOutlinedInput = {
styleOverrides: {
adornedEnd: {
paddingRight: spacing(3),
},
input: function (_a) {
var ownerState = _a.ownerState;
return (__assign(__assign(__assign({ padding: "".concat(spacing(1.5), " ").concat(spacing(3)) }, (ownerState.startAdornment && {
paddingRight: 0,
})), (ownerState.endAdornment && {
paddingRight: 0,
})), (ownerState.multiline && __assign({}, cssRadius(12)))));
},
root: function (_a) {
var ownerState = _a.ownerState;
return (__assign(__assign(__assign(__assign({}, cssRadius(pxToNumber(BASE_FONT_SIZE.lineHeight) / 2 + SPACING_PX * 1.5)), BASE_FONT_SIZE), { '& legend': {
marginLeft: spacing(2.5),
}, background: common.white, padding: 0 }), (ownerState.multiline && __assign({}, cssRadius(12)))));
},
},
},
_a.MuiPaper = {
defaultProps: {
elevation: 2,
},
styleOverrides: {
elevation1: {
boxShadow: shadows[1],
},
elevation2: {
boxShadow: shadows[2],
},
// Add here as needed
root: __assign(__assign({}, cssRadius(0)), { background: palette.background.paper }),
rounded: __assign({}, cssRadius(8)),
},
},
_a.MuiSelect = {
styleOverrides: {
icon: {
top: 'unset',
},
select: {
padding: '8.5px 14px',
},
},
},
_a.MuiSvgIcon = {
styleOverrides: {
fontSizeSmall: {
height: '16px',
width: '16px',
},
},
},
_a.MuiTab = {
styleOverrides: {
root: __assign(__assign({}, cssRadius(0)), { color: navy[100] }),
},
},
_a.MuiTabs = {
styleOverrides: {
indicator: {
background: teal[100],
},
},
},
_a.MuiTextField = {
defaultProps: {
InputLabelProps: {
shrink: true,
},
InputProps: {
notched: true,
size: 'medium',
},
},
styleOverrides: {
root: {
marginBottom: 0,
},
},
},
_a.MuiTooltip = {
styleOverrides: {
tooltip: __assign({}, cssRadius(6)),
},
},
_a);
export default components;
//# sourceMappingURL=components.js.map