@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
117 lines (116 loc) • 2.97 kB
JavaScript
import { rem } from "../utils/units-converters/rem.mjs";
import { defaultVariantColorsResolver } from "./color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs";
import { DEFAULT_COLORS } from "./default-colors.mjs";
//#region packages/@mantine/core/src/core/MantineProvider/default-theme.ts
const DEFAULT_FONT_FAMILY = "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji";
const DEFAULT_THEME = {
scale: 1,
fontSmoothing: true,
focusRing: "auto",
white: "#fff",
black: "#000",
colors: DEFAULT_COLORS,
primaryShade: {
light: 6,
dark: 8
},
primaryColor: "blue",
variantColorResolver: defaultVariantColorsResolver,
autoContrast: false,
luminanceThreshold: .3,
fontFamily: DEFAULT_FONT_FAMILY,
fontFamilyMonospace: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
respectReducedMotion: false,
cursorType: "default",
defaultGradient: {
from: "blue",
to: "cyan",
deg: 45
},
defaultRadius: "md",
activeClassName: "mantine-active",
focusClassName: "",
headings: {
fontFamily: DEFAULT_FONT_FAMILY,
fontWeight: "700",
textWrap: "wrap",
sizes: {
h1: {
fontSize: rem(34),
lineHeight: "1.3"
},
h2: {
fontSize: rem(26),
lineHeight: "1.35"
},
h3: {
fontSize: rem(22),
lineHeight: "1.4"
},
h4: {
fontSize: rem(18),
lineHeight: "1.45"
},
h5: {
fontSize: rem(16),
lineHeight: "1.5"
},
h6: {
fontSize: rem(14),
lineHeight: "1.5"
}
}
},
fontSizes: {
xs: rem(12),
sm: rem(14),
md: rem(16),
lg: rem(18),
xl: rem(20)
},
lineHeights: {
xs: "1.4",
sm: "1.45",
md: "1.55",
lg: "1.6",
xl: "1.65"
},
fontWeights: {
regular: "400",
medium: "600",
bold: "700"
},
radius: {
xs: rem(2),
sm: rem(4),
md: rem(8),
lg: rem(16),
xl: rem(32)
},
spacing: {
xs: rem(10),
sm: rem(12),
md: rem(16),
lg: rem(20),
xl: rem(32)
},
breakpoints: {
xs: "36em",
sm: "48em",
md: "62em",
lg: "75em",
xl: "88em"
},
shadows: {
xs: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), 0 ${rem(1)} ${rem(2)} rgba(0, 0, 0, 0.1)`,
sm: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(10)} ${rem(15)} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(7)} ${rem(7)} ${rem(-5)}`,
md: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(20)} ${rem(25)} ${rem(-5)}, rgba(0, 0, 0, 0.04) 0 ${rem(10)} ${rem(10)} ${rem(-5)}`,
lg: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(28)} ${rem(23)} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(12)} ${rem(12)} ${rem(-7)}`,
xl: `0 ${rem(1)} ${rem(3)} rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 ${rem(36)} ${rem(28)} ${rem(-7)}, rgba(0, 0, 0, 0.04) 0 ${rem(17)} ${rem(17)} ${rem(-7)}`
},
other: {},
components: {}
};
//#endregion
export { DEFAULT_THEME };
//# sourceMappingURL=default-theme.mjs.map