@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
98 lines (95 loc) • 2.98 kB
JavaScript
import { rem } from '../utils/units-converters/rem.mjs';
import 'react';
import 'react/jsx-runtime';
import '@mantine/hooks';
import { defaultVariantColorsResolver } from './color-functions/default-variant-colors-resolver/default-variant-colors-resolver.mjs';
import { DEFAULT_COLORS } from './default-colors.mjs';
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: 0.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: "sm",
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"
},
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: {}
};
export { DEFAULT_THEME };
//# sourceMappingURL=default-theme.mjs.map