@re-flex/ui
Version:
Re-Flex ui library
43 lines (42 loc) • 2.14 kB
JavaScript
import { UI_ACTIVE_THEME } from "@re-flex/styles";
import { convertUnit2Rem } from "@re-flex/utils";
const breakPointsVarGenerator = (breakpoints = UI_ACTIVE_THEME.breakpoints.values) => {
const mediaRules = {};
Object.entries(breakpoints).forEach(([key, value]) => {
mediaRules[`--breakpoint-${key}`] = convertUnit2Rem(value) || "0";
});
return mediaRules;
};
const AppBaseLineInitialStyle = (theme) => {
const { prefix, palette, typography, transitions: { duration: { shortest }, easing: { easeInOut }, }, direction, breakpoints, } = theme;
return {
":root": {
"--direction": direction === "rtl" ? "right" : "left",
...breakPointsVarGenerator(breakpoints.values),
"--typography-color": palette.text.primary,
"--typography-letter-spacing": convertUnit2Rem(typography.letterSpacing),
"--typography-font-size": convertUnit2Rem(typography.htmlFontSize),
"--typography-font-family": typography.fontFamily,
"--typography-font-style": typography.fontStyle,
"--typography-font-weight": String(typography.fontWeight),
"--typography-font-stretch": typography.fontStretch,
"--typography-opacity": typography.opacity,
"--typography-text-align": "var(--direction)",
"--body-background": palette.background.default,
"--component-background": palette.background.paper,
},
[`.${prefix}-typography`]: {
color: "var(--typography-color)",
"letter-spacing": "var(--typography-letter-spacing)",
"font-size": "var(--typography-font-size)",
"font-family": "var(--typography-font-family)",
"font-style": "var(--typography-font-style)",
"font-weight": "var(--typography-font-weight)",
"font-stretch": "var(--typography-font-stretch)",
"text-align": "var(--typography-text-align)",
"text-transform": "var(--typography-text-transform)",
opacity: "var(--typography-opacity)",
},
};
};
export default AppBaseLineInitialStyle;