@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
49 lines • 2.13 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 { styled as muiStyled, } from '@mui/material/styles';
export var forwardNonTransientProps = function (propName) {
return !propName.startsWith('$');
};
/**
* Customized styled helper which omits transient props (starting with $) which are used for
* styling only in styled components. Use as a drop in replacement of the `styled` function
* that exists in @mui/material/styles.
*
* For example you may specify something like <StyledButton $makeItWeird={true} />
* and this version of styled will not pass $makeItWeird as prop to the HTML in the browser,
* while still allowing it to be a param in your computed style.
*
* This implementation is how Styled Components does it: https://styled-components.com/docs/api#transient-props
* Unfortunately emotion doesn't seem to care: https://github.com/emotion-js/emotion/issues/2193#issuecomment-1178372803
*/
export var styled = (function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return muiStyled(args[0], __assign({ shouldForwardProp: forwardNonTransientProps }, args[1]));
});
/**
* Function generator that will generate a `styled` function that has a specific theme type injected. E.g.,
* const styled = createThemeStyled(THEME_ENCOURAGE);
* const StyledTypography = styled(Typography)(({ theme }) => ({ color: theme.palette.branding.teal }));
*/
export var createThemeStyled = function (
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_theme) { return styled; };
//# sourceMappingURL=styled.js.map