@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
97 lines • 4.2 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);
};
import { grey } from '@mui/material/colors';
import Grid from '@mui/material/Grid';
import TableCell from '@mui/material/TableCell';
import Typography from '@mui/material/Typography';
import clsx from 'clsx';
import Color from 'color';
import ChevronDown from "../../../icons/ChevronDown";
import ChevronUp from "../../../icons/ChevronUp";
import { createThemeStyled } from "../../../helpers/styled";
import { typeOk } from "../../../helpers/types";
var ICON_SIZE = 14;
var styled = createThemeStyled();
export var StyledChevronUp = styled(ChevronUp)(function (_a) {
var $colorProp = _a.$colorProp, theme = _a.theme;
return ({
color: clsx($colorProp === 'default' && 'rgba(0, 0, 0, 0.35)', $colorProp === 'primary' &&
Color(theme.palette.primary.contrastText).fade(0.35).rgb().string(), $colorProp === 'secondary' &&
Color(theme.palette.secondary.contrastText).fade(0.35).rgb().string()),
cursor: 'pointer',
fontSize: theme.typography.fontSize,
height: ICON_SIZE,
userSelect: 'auto',
width: ICON_SIZE,
});
});
export var StyledChevronDown = styled(ChevronDown)(function (_a) {
var $colorProp = _a.$colorProp, theme = _a.theme;
return ({
color: clsx($colorProp === 'default' && 'rgba(0, 0, 0, 0.35)', $colorProp === 'primary' &&
Color(theme.palette.primary.contrastText).fade(0.35).rgb().string(), $colorProp === 'secondary' &&
Color(theme.palette.secondary.contrastText).fade(0.35).rgb().string()),
cursor: 'pointer',
fontSize: theme.typography.fontSize,
height: ICON_SIZE,
userSelect: 'auto',
width: ICON_SIZE,
});
});
export var StyledGrid = styled(Grid)(function (_a) {
var theme = _a.theme;
return ({
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
position: 'absolute',
right: theme.spacing(1),
top: "calc(50% - ".concat(ICON_SIZE, "px)"),
width: ICON_SIZE,
});
});
export var StyledTableCell = styled(TableCell)(function (_a) {
var $sortBy = _a.$sortBy, $sortIsApplied = _a.$sortIsApplied, color = _a.color, theme = _a.theme;
var cssProperties = typeOk()({
backgroundColor: clsx(color === 'default' && grey[200], color === 'primary' && theme.palette.primary.main, color === 'secondary' && theme.palette.secondary.main),
border: 'none',
boxSizing: 'border-box',
height: theme.customDims.heights.tableHeader,
position: 'relative',
});
if ($sortIsApplied) {
cssProperties = typeOk()(__assign(__assign({}, cssProperties), { backgroundColor: clsx(color === 'default' && grey[300], color === 'primary' &&
Color(theme.palette.primary.main).darken(0.15).hex(), color === 'secondary' &&
Color(theme.palette.secondary.main).darken(0.15).hex()) }));
}
if ($sortBy) {
cssProperties = typeOk()(__assign(__assign({}, cssProperties), { cursor: 'pointer', paddingRight: theme.spacing(4) }));
}
return cssProperties;
});
export var StyledTypography = styled(Typography)(function (_a) {
var $colorProp = _a.$colorProp, theme = _a.theme;
return ({
color: clsx($colorProp === 'default' && theme.palette.text.primary, $colorProp === 'primary' && theme.palette.primary.contrastText, $colorProp === 'secondary' && theme.palette.secondary.contrastText),
fontSize: theme.typography.body1.fontSize,
fontWeight: Number(theme.typography.fontWeightMedium),
lineHeight: 1,
userSelect: 'none',
});
});
//# sourceMappingURL=styles.js.map