@re-flex/styles
Version:
Core Style Util Package
275 lines (274 loc) • 7.58 kB
JavaScript
import { boxShadowGenerator } from "@re-flex/utils";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import weekDay from "dayjs/plugin/weekday";
dayjs.extend(relativeTime);
dayjs.extend(weekDay);
const DefaultTheme = {
prefix: "reflex",
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
up(breakPoint) {
return `@media screen and (min-width: ${this.values[breakPoint] || 0}px)`;
},
down(breakPoint) {
return `@media screen and (max-width: ${this.values[breakPoint] || 0}px)`;
},
has(breakPoint) {
return !!this.values?.[breakPoint];
},
},
dayjs,
spaceValues: {
normal: 8,
dense: 4,
large: 12,
},
spaceTypes: "normal",
space: 8,
sizes: {
xs: 1.5,
sm: 2,
md: 2.5,
lg: 3,
xl: 4,
},
direction: "ltr",
mixins: {},
overrides: {},
palette: {
common: { black: "#000", white: "#fff" },
type: "light",
primary: {
light: "#7986cb",
main: "#3f51b5",
dark: "#303f9f",
contrastText: "#fff",
},
secondary: {
light: "#ff4081",
main: "#f50057",
dark: "#c51162",
contrastText: "#fff",
},
error: {
light: "#e57373",
main: "#f44336",
dark: "#d32f2f",
contrastText: "#fff",
},
warning: {
light: "#ffb74d",
main: "#ff9800",
dark: "#f57c00",
contrastText: "rgba(0, 0, 0, 0.87)",
},
info: {
light: "#64b5f6",
main: "#2196f3",
dark: "#1976d2",
contrastText: "#fff",
},
success: {
light: "#81c784",
main: "#4caf50",
dark: "#388e3c",
contrastText: "rgba(0, 0, 0, 0.87)",
},
grey: {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
A100: "#d5d5d5",
A200: "#aaaaaa",
A400: "#303030",
A700: "#616161",
},
contrastThreshold: 3,
tonalOffset: 0.2,
text: {
primary: "rgba(0, 0, 0, 0.87)",
secondary: "rgba(0, 0, 0, 0.54)",
disabled: "rgba(0, 0, 0, 0.38)",
hint: "rgba(0, 0, 0, 0.38)",
},
divider: "#eeeeee",
background: {
paper: "#ffffff",
default: "#fafafa",
level2: "#dedede",
level1: "#eeeeee",
},
action: {
active: "rgba(0, 0, 0, 0.54)",
hover: "rgba(0, 0, 0, 0.04)",
hoverOpacity: 0.04,
selected: "rgba(0, 0, 0, 0.08)",
selectedOpacity: 0.08,
disabled: "rgba(0, 0, 0, 0.26)",
disabledBackground: "rgba(0, 0, 0, 0.12)",
disabledOpacity: 0.38,
focus: "rgba(0, 0, 0, 0.12)",
focusOpacity: 0.12,
activatedOpacity: 0.12,
},
},
props: {},
shadows: Array(12)
.fill("")
.map((_, k) => boxShadowGenerator(k + 1)),
typography: {
importFonts: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
htmlFontSize: 12,
fontFamily: '"Roboto", sans-serif',
fontSize: "0.0875rem",
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
fontWeightBold: 700,
fontWeight: 400,
fontStyle: "normal",
fontStretch: "normal",
textTransform: "inherit",
opacity: 1,
letterSpacing: 0,
h1: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${96 / 16}rem`,
fontWeight: 300,
letterSpacing: -1.5,
},
h2: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${60 / 16}rem`,
fontWeight: 300,
letterSpacing: -0.5,
},
h3: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${48 / 16}rem`,
fontWeight: 400,
letterSpacing: 0,
},
h4: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${34 / 16}rem`,
fontWeight: 400,
letterSpacing: 0.5,
},
h5: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${24 / 16}rem`,
fontWeight: 400,
letterSpacing: 0,
},
h6: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${20 / 16}rem`,
fontWeight: "500",
letterSpacing: 0.15,
},
subtitle1: {
opacity: 0.87,
textTransform: "capitalize",
fontSize: `${16 / 16}rem`,
fontWeight: 400,
lineHeight: 12,
letterSpacing: 0.15,
},
subtitle2: {
opacity: 0.87,
textTransform: "capitalize",
fontSize: `${14 / 16}rem`,
fontWeight: 500,
lineHeight: 12,
letterSpacing: 0.1,
},
body1: {
textTransform: "capitalize",
fontSize: `${16 / 16}rem`,
fontWeight: 400,
lineHeight: 14,
letterSpacing: 0.5,
},
body2: {
opacity: 0.87,
textTransform: "capitalize",
fontSize: `${14 / 16}rem`,
fontWeight: 400,
lineHeight: 10,
letterSpacing: 0.25,
},
button: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${14 / 16}rem`,
fontWeight: 500,
letterSpacing: 1.25,
},
caption: {
opacity: 0.87,
textTransform: "capitalize",
fontSize: `${12 / 16}rem`,
fontWeight: 400,
lineHeight: 8,
letterSpacing: 0.4,
},
overline: {
opacity: 0.87,
textTransform: "uppercase",
fontSize: `${10 / 16}rem`,
fontWeight: 500,
lineHeight: 8,
letterSpacing: 1.5,
},
},
shape: { borderRadius: 4 },
transitions: {
easing: {
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
linear: "linear",
},
duration: {
shortest: 150,
shorter: 200,
short: 250,
standard: 300,
complex: 375,
enteringScreen: 225,
leavingScreen: 195,
},
},
zIndex: {
mobileStepper: 1000,
speedDial: 1050,
appBar: 1100,
drawer: 1200,
modal: 1300,
snackbar: 1400,
tooltip: 1500,
},
};
export default DefaultTheme;