@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
870 lines • 25.4 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 _a;
var _b, _c, _d, _e, _f, _g;
import { common, grey } from '@mui/material/colors';
import Color from 'color';
import FilterVariant from "../../icons/FilterVariant";
import DLS_COMPONENT_NAMES from "../../constants/DLS_COMPONENT_NAMES";
import CUSTOM_DIMS from './customDims';
import { COLORS } from './palette';
import SHAPE from './shape';
import spacing from './spacing';
import TYPOGRAPHY from './typography';
export var components = (_a = {},
_a[DLS_COMPONENT_NAMES.BAR_CHART] = {
defaultProps: {
xAxisProps: {
style: {
fill: grey[700],
fontSize: (_b = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _b === void 0 ? void 0 : _b.fontSize,
},
},
yAxisProps: {
width: 85,
},
},
},
_a[DLS_COMPONENT_NAMES.LINE_CHART] = {
defaultProps: {
xAxisProps: {
style: {
fill: grey[700],
fontSize: (_c = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _c === void 0 ? void 0 : _c.fontSize,
},
},
yAxisProps: {
style: {
fill: grey[700],
fontSize: (_d = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _d === void 0 ? void 0 : _d.fontSize,
fontWeight: TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.fontWeightRegular,
},
},
},
},
_a[DLS_COMPONENT_NAMES.PIE_CHART] = {
defaultProps: {
chartLegendTextFontSize: (_e = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.body2) === null || _e === void 0 ? void 0 : _e.fontSize,
chartLegendTextFontSizeSmall: (_f = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _f === void 0 ? void 0 : _f.fontSize,
},
},
_a[DLS_COMPONENT_NAMES.STACKED_BAR_CHART] = {
defaultProps: {
customizeBarText: function (i) {
var _a;
return ({
fill: i === 2 ? common.white : common.black,
fontSize: (_a = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _a === void 0 ? void 0 : _a.fontSize,
});
},
subLabelProps: {
style: {
fill: common.black,
fontSize: (_g = TYPOGRAPHY === null || TYPOGRAPHY === void 0 ? void 0 : TYPOGRAPHY.caption) === null || _g === void 0 ? void 0 : _g.fontSize,
},
},
},
},
_a.MuiAccordion = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAccordionActions = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAccordionDetails = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAccordionSummary = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAlert = {
defaultProps: {
closeText: 'Close',
severity: 'info',
variant: 'standard',
},
styleOverrides: {
outlinedError: {
color: COLORS.ERROR_DARK,
},
outlinedInfo: {
color: COLORS.INFO_DARK,
},
outlinedSuccess: {
color: COLORS.SUCCESS_DARK,
},
outlinedWarning: {
color: COLORS.WARNING_DARK,
},
},
},
_a.MuiAlertTitle = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAppBar = {
defaultProps: {},
styleOverrides: {
root: {
height: CUSTOM_DIMS.heights.header,
},
},
},
_a.MuiAutocomplete = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAvatar = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiAvatarGroup = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiBackdrop = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiBadge = {
defaultProps: {},
styleOverrides: {
badge: {
fontSize: 10,
},
},
},
_a.MuiBottomNavigation = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiBottomNavigationAction = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiBreadcrumbs = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiButton = {
defaultProps: {
variant: 'outlined',
},
styleOverrides: {
contained: {
borderRadius: 18,
},
outlined: {
'&:hover': {
borderWidth: 2,
},
borderRadius: 18,
borderStyle: 'solid',
borderWidth: 2,
},
outlinedPrimary: {
'&:active': {
backgroundColor: COLORS.PRIMARY_DARK,
borderColor: COLORS.PRIMARY_DARK,
color: common.white,
},
'&:hover': {
borderWidth: 2,
},
borderColor: COLORS.PRIMARY,
borderStyle: 'solid',
borderWidth: 2,
},
outlinedSizeLarge: {
borderRadius: 24,
},
root: {
fontSize: 14,
height: 36,
},
sizeLarge: {
fontSize: 18,
height: 40,
},
sizeSmall: {
fontSize: 12,
height: 32,
},
textPrimary: {
'&:active': {
color: COLORS.PRIMARY_DARK,
},
},
},
},
_a.MuiButtonBase = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiButtonGroup = {
defaultProps: {
disableElevation: true,
},
styleOverrides: {},
},
_a.MuiCard = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCardActionArea = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCardActions = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCardContent = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCardHeader = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCardMedia = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCheckbox = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiChip = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCircularProgress = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCollapse = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiContainer = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiCssBaseline = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDataGrid = {
defaultProps: {
disableRowSelectionOnClick: true,
slots: {
columnFilteredIcon: FilterVariant,
},
},
styleOverrides: {
root: {
'& .MuiDataGrid-footerContainer': {
'& .MuiTablePagination-root': {
'& .MuiToolbar-root': {
'& .MuiSelect-root': {
fontSize: 14,
},
},
},
},
'& .MuiDataGrid-main': {
'& .MuiDataGrid-columnHeader': {
'& .MuiDataGrid-columnHeaderTitleContainer': {
'& .MuiDataGrid-columnHeaderTitle': {
color: common.black,
userSelect: 'none',
},
},
'& .MuiDataGrid-iconButtonContainer': {
'& .MuiIconButton-root': {
color: Color(common.black).fade(0).rgb().string(),
padding: '0 0 1px 0',
},
'& .MuiIconButton-root[aria-label="Show filters"]': {
color: "".concat(common.black, " !important"),
},
alignItems: 'center',
display: 'flex',
},
'& .MuiDataGrid-menuIcon': {
'& .MuiIconButton-root[aria-label="Menu"]': {
color: Color(common.black).fade(0.35).rgb().string(),
},
},
'&.MuiDataGrid-withBorder': {
borderRightColor: grey[300],
},
outline: 'none',
paddingLeft: spacing(0.5),
paddingRight: spacing(0.5),
},
'& .MuiDataGrid-columnHeader--sorted': {
'& .MuiIconButton-root[aria-label="Sort"]': {
color: "".concat(common.black, " !important"),
},
backgroundColor: grey[300],
},
'& .MuiDataGrid-columnHeaderWrapper': {
backgroundColor: grey[200],
},
'& .MuiDataGrid-columnSeparator': {
display: 'none',
},
'& .MuiDataGrid-overlay': {
backgroundColor: Color(common.white).fade(0.35).rgb().string(),
zIndex: 1,
},
},
'& .MuiDataGrid-toolbarContainer': {
'& .MuiButton-root': {
marginRight: spacing(1),
},
padding: spacing(1),
},
'&.primary': {
'& .MuiDataGrid-main': {
'& .MuiDataGrid-columnHeader': {
'& .MuiDataGrid-columnHeaderTitleContainer': {
'& .MuiCheckbox-root': {
color: common.white,
},
'& .MuiDataGrid-columnHeaderTitle': {
color: common.white,
},
},
'& .MuiDataGrid-iconButtonContainer': {
'& .MuiIconButton-root': {
color: Color(common.white).fade(0.1).rgb().string(),
},
'& .MuiIconButton-root[aria-label="Show filters"]': {
color: "".concat(common.white, " !important"),
},
},
'& .MuiDataGrid-menuIcon': {
'& .MuiIconButton-root[aria-label="Menu"]': {
color: Color(common.white).fade(0.35).rgb().string(),
},
},
'&.MuiDataGrid-withBorder': {
borderRightColor: Color(COLORS.PRIMARY).lighten(0.2).hex(),
},
},
'& .MuiDataGrid-columnHeader--sorted': {
'& .MuiIconButton-root[aria-label="Sort"]': {
color: "".concat(common.white, " !important"),
},
backgroundColor: Color(COLORS.PRIMARY).darken(0.15).hex(),
},
'& .MuiDataGrid-columnHeaderWrapper': {
backgroundColor: COLORS.PRIMARY,
},
},
},
'&.secondary': {
'& .MuiDataGrid-main': {
'& .MuiDataGrid-columnHeader': {
'& .MuiDataGrid-columnHeaderTitleContainer': {
'& .MuiCheckbox-root': {
color: common.white,
},
'& .MuiDataGrid-columnHeaderTitle': {
color: common.white,
},
},
'& .MuiDataGrid-iconButtonContainer': {
'& .MuiIconButton-root': {
color: Color(common.white).fade(0.1).rgb().string(),
},
'& .MuiIconButton-root[aria-label="Show filters"]': {
color: "".concat(common.white, " !important"),
},
},
'& .MuiDataGrid-menuIcon': {
'& .MuiIconButton-root[aria-label="Menu"]': {
color: Color(common.white).fade(0.35).rgb().string(),
},
},
'&.MuiDataGrid-withBorder': {
borderRightColor: Color(COLORS.SECONDARY).lighten(0.5).hex(),
},
},
'& .MuiDataGrid-columnHeader--sorted': {
'& .MuiIconButton-root[aria-label="Sort"]': {
color: "".concat(common.white, " !important"),
},
backgroundColor: Color(COLORS.SECONDARY).darken(0.15).hex(),
},
'& .MuiDataGrid-columnHeaderWrapper': {
backgroundColor: COLORS.SECONDARY,
},
},
},
borderRadius: SHAPE.borderRadius,
overflow: 'hidden',
},
},
},
_a.MuiDialog = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDialogActions = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDialogContent = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDialogContentText = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDialogTitle = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDivider = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiDrawer = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFab = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFilledInput = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFormControl = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFormControlLabel = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFormGroup = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFormHelperText = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiFormLabel = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiGrid = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiIcon = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiIconButton = {
defaultProps: {},
styleOverrides: {
root: {
height: 36,
width: 36,
},
sizeSmall: {
height: 32,
width: 32,
},
},
},
_a.MuiImageList = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiImageListItem = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiImageListItemBar = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiInput = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiInputAdornment = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiInputBase = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiInputLabel = {
defaultProps: {},
styleOverrides: {
formControl: {
position: 'relative',
transform: 'unset',
},
// marginDense: {
// transform: 'unset',
// },
outlined: {
'&.MuiInputLabel-marginDense': {
transform: 'unset',
},
transform: 'unset',
transformOrigin: 'unset',
},
root: {
color: common.black,
fontSize: 14,
fontWeight: 600,
marginBottom: spacing(1),
},
},
},
_a.MuiLinearProgress = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiLink = {
defaultProps: {
color: 'primary',
underline: 'hover',
},
styleOverrides: {
root: {
cursor: 'pointer',
},
},
},
_a.MuiList = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItem = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItemAvatar = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItemButton = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItemIcon = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItemSecondaryAction = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListItemText = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiListSubheader = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiMenu = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiMenuItem = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiMobileStepper = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiModal = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiNativeSelect = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiOutlinedInput = {
defaultProps: {},
styleOverrides: {
input: {
'&.Mui-disabled': {
cursor: 'not-allowed',
},
},
root: {
backgroundColor: common.white,
fontSize: 14,
},
},
},
_a.MuiPagination = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiPaginationItem = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiPaper = {
defaultProps: {
elevation: 3,
},
styleOverrides: {},
},
_a.MuiPopover = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiRadio = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiRating = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiScopedCssBaseline = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSelect = {
defaultProps: {
variant: 'outlined',
},
styleOverrides: {},
},
_a.MuiSkeleton = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSlider = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSnackbar = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSnackbarContent = {},
_a.MuiSpeedDial = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSpeedDialAction = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSpeedDialIcon = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStack = {
defaultProps: {},
},
_a.MuiStep = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepButton = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepConnector = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepContent = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepIcon = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepLabel = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiStepper = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiSvgIcon = {
defaultProps: {},
styleOverrides: {
fontSizeLarge: {
height: 32,
width: 32,
},
fontSizeSmall: {
height: 17,
width: 17,
},
root: {
height: 22,
width: 22,
},
},
},
_a.MuiSwitch = {
defaultProps: {},
styleOverrides: {
root: {
height: 26,
margin: spacing(1),
padding: 0,
width: 42,
},
sizeSmall: {
height: 26 * 0.9,
width: 42 * 0.9,
},
switchBase: {
'&.Mui-checked': {
'& + $track': {
backgroundColor: COLORS.PRIMARY,
border: COLORS.PRIMARY,
opacity: 1,
},
color: common.white,
transform: 'translateX(16px)',
},
'&.Mui-focusVisible .MuiSwitch-thumb': {
border: "6px solid ".concat(common.white),
color: COLORS.PRIMARY,
},
height: 'unset',
padding: 3,
width: 'unset',
},
thumb: {
boxShadow: '0 1px 2px 1px rgba(0, 0, 0, 0.08)',
color: common.white,
height: 20,
width: 20,
},
track: {
backgroundColor: grey[300],
border: "1px solid ".concat(grey[300]),
borderRadius: 26 / 2,
opacity: 1,
},
},
},
_a.MuiTab = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTable = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableBody = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableCell = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableContainer = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableFooter = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableHead = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTablePagination = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableRow = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTableSortLabel = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTabs = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTextField = {
defaultProps: {
InputLabelProps: {
shrink: true,
},
InputProps: {
notched: false,
},
size: 'small',
variant: 'outlined',
},
styleOverrides: {},
},
_a.MuiToggleButton = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiToggleButtonGroup = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiToolbar = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTooltip = {
defaultProps: {
arrow: true,
},
styleOverrides: {},
},
_a.MuiTouchRipple = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiTypography = {
defaultProps: {},
styleOverrides: {},
},
_a.MuiUseMediaQuery = {
defaultProps: {},
},
_a);
export default components;
//# sourceMappingURL=components.js.map