unich-ui-kit-web
Version:
Mantine theme configuration and provider for Unich UI Kit
389 lines (384 loc) • 10.1 kB
JavaScript
import { createTheme, rem, MantineProvider } from '@mantine/core';
import { jsx } from 'react/jsx-runtime';
// src/theme/provider.tsx
// src/theme/generated-colors.ts
var baseColors = {
// PRIMARY COLORS
// Primary brand color based on logo palette
orange: {
50: "#fff7ed",
// Subtle backgrounds - HSL: 33,10000,9600
100: "#ffeed8",
// Hover states - HSL: 34,10000,9200
200: "#ffdbb0",
// Borders - HSL: 33,10000,8500
300: "#ffc888",
// Icons - HSL: 32,10000,7700
400: "#ffb55f",
// Secondary actions - HSL: 32,10000,6900
500: "#ff990a",
// Primary actions - HSL: 35,10000,5200
600: "#e38607",
// Hover - HSL: 35,9400,4600
700: "#c87304",
// Active - HSL: 34,9600,4000
800: "#ad6102",
// Dark variant - HSL: 33,9800,3400
900: "#935001",
// Extra dark - HSL: 32,9900,2900
950: "#7a3f00"
// Maximum contrast - HSL: 31,10000,2400
},
// NEUTRAL COLORS
// Brand neutral colors from light to dark palette
neutral: {
50: "#ececec",
// Background, cards - HSL: 0,0,9300
100: "#e1e1e1",
// Subtle backgrounds - HSL: 0,0,8800
200: "#cacaca",
// Borders, dividers - HSL: 0,0,7900
300: "#b4b4b4",
// Disabled states - HSL: 0,0,7100
400: "#9f9f9f",
// Placeholder text - HSL: 0,0,6200
500: "#808080",
// Secondary text - HSL: 0,0,5000
600: "#696969",
// Body text - HSL: 0,0,4100
700: "#535353",
// Headings - HSL: 0,0,3300
800: "#3e3e3e",
// High contrast text - HSL: 0,0,2400
900: "#2a2a2a",
// Extra high contrast - HSL: 0,0,1600
950: "#171717"
// Maximum contrast - HSL: 0,0,900
},
// Grayscale for UI elements palette
gray: {
50: "#f9f9f9",
// Background, cards - HSL: 0,0,9800
100: "#f0f0f1",
// Subtle backgrounds - HSL: 240,300,9400
200: "#dedee1",
// Borders, dividers - HSL: 240,500,8800
300: "#ccccd1",
// Disabled states - HSL: 240,500,8100
400: "#bbbbc1",
// Placeholder text - HSL: 240,500,7500
500: "#a1a1aa",
// Secondary text - HSL: 240,500,6500
600: "#83838a",
// Body text - HSL: 240,300,5300
700: "#66666c",
// Headings - HSL: 240,300,4100
800: "#4a4a4f",
// High contrast text - HSL: 240,300,3000
900: "#303034",
// Extra high contrast - HSL: 240,400,2000
950: "#18181b"
// Maximum contrast - HSL: 240,600,1000
},
// SEMANTIC COLORS
// Error and danger states palette
red: {
50: "#fef2f2",
// HSL: 0,8600,9700
100: "#ffe2df",
// HSL: 6,10000,9400
200: "#ffc2ba",
// HSL: 7,10000,8600
300: "#ffa297",
// HSL: 6,10000,8000
400: "#fb8074",
// HSL: 5,9400,7200
500: "#ef4444",
// HSL: 0,8400,6000
600: "#ca3738",
// HSL: 360,5800,5000
700: "#a72b2d",
// HSL: 359,5900,4100
800: "#842022",
// HSL: 359,6100,3200
900: "#641517",
// HSL: 358,6500,2400
950: "#450a0a"
// HSL: 0,7500,1500
},
// Success states palette
green: {
50: "#f0fdf4",
// HSL: 138,7600,9700
100: "#e0f8e5",
// HSL: 133,6300,9300
200: "#beedc6",
// HSL: 130,5700,8400
300: "#9be2a8",
// HSL: 131,5500,7500
400: "#76d78b",
// HSL: 133,5500,6500
500: "#22c55e",
// HSL: 142,7100,4500
600: "#1ca44f",
// HSL: 143,7100,3800
700: "#168440",
// HSL: 143,7100,3000
800: "#106631",
// HSL: 143,7300,2300
900: "#0a4923",
// HSL: 144,7600,1600
950: "#052e16"
// HSL: 145,8000,1000
},
// Warning states palette
yellow: {
50: "#fefce8",
// HSL: 55,9200,9500
100: "#fef4d5",
// HSL: 45,9500,9200
200: "#fde6ae",
// HSL: 43,9500,8400
300: "#f9d788",
// HSL: 42,9000,7500
400: "#f4c860",
// HSL: 42,8700,6700
500: "#eab308",
// HSL: 45,9300,4700
600: "#c6930e",
// HSL: 43,8700,4200
700: "#a37410",
// HSL: 41,8200,3500
800: "#81560f",
// HSL: 37,7900,2800
900: "#613a0d",
// HSL: 32,7600,2200
950: "#422006"
// HSL: 26,8300,1400
},
// ACCENT COLORS
// Secondary brand color for accent use palette
blue: {
50: "#f0f7ff",
// HSL: 212,10000,9700
100: "#e1ebff",
// HSL: 220,10000,9400
200: "#c1d3ff",
// HSL: 223,10000,8800
300: "#9fbcff",
// HSL: 222,10000,8100
400: "#78a5ff",
// HSL: 220,10000,7400
500: "#0a85ff",
// HSL: 210,10000,5200
600: "#0775e3",
// HSL: 210,9400,4600
700: "#0466c7",
// HSL: 210,9600,4000
800: "#0257ac",
// HSL: 210,9800,3400
900: "#014992",
// HSL: 210,9900,2900
950: "#003b79"
// HSL: 211,10000,2400
}
};
// src/theme/colors.ts
var baseColors2 = {
// Neutral - Brand neutral colors from light to dark
neutral: baseColors.neutral,
// Primary - Brand orange from logo
orange: baseColors.orange,
// Secondary - Brand blue accent color
blue: baseColors.blue,
// Grayscale UI elements
gray: baseColors.gray,
// Error & Danger
red: baseColors.red,
// Success
green: baseColors.green,
// Warning
yellow: baseColors.yellow
};
({
// Borders and dividers
background: {
// Background hierarchy
page: baseColors2.neutral[50],
// Light background (#ECECEC)
card: baseColors2.neutral[100],
active: baseColors2.neutral[200],
dark: baseColors2.neutral[950]
// Dark background (#171717)
},
text: {
// Text hierarchy
primary: baseColors2.neutral[900],
secondary: baseColors2.neutral[700],
tertiary: baseColors2.neutral[500],
disabled: baseColors2.neutral[400],
onDark: baseColors2.neutral[50]
// Text on dark background
}
});
// src/theme/index.ts
var convertPaletteToArray = (palette) => {
return [
palette["50"] || palette["100"],
palette["100"],
palette["200"],
palette["300"],
palette["400"],
palette["500"],
palette["600"],
palette["700"],
palette["800"],
palette["900"],
palette["950"]
];
};
var theme = createTheme({
// Use orange as primary color (matches our main logo color)
primaryColor: "orange",
defaultRadius: "xs",
fontFamily: "Montserrat, sans-serif",
fontFamilyMonospace: "Monaco, Courier, monospace",
// Use shade 5 (which corresponds to 500) as default
primaryShade: { light: 5, dark: 5 },
cursorType: "pointer",
autoContrast: true,
luminanceThreshold: 0.2,
// Enhanced typography settings
headings: {
fontFamily: "Montserrat, sans-serif",
fontWeight: "600",
sizes: {
h1: { fontSize: rem(36), lineHeight: "1.4", fontWeight: "700" },
h2: { fontSize: rem(30), lineHeight: "1.4", fontWeight: "600" },
h3: { fontSize: rem(24), lineHeight: "1.4", fontWeight: "600" },
h4: { fontSize: rem(20), lineHeight: "1.4", fontWeight: "500" },
h5: { fontSize: rem(16), lineHeight: "1.4", fontWeight: "500" },
h6: { fontSize: rem(14), lineHeight: "1.4", fontWeight: "500" }
}
},
// Enhanced spacing system
spacing: {
xs: rem(4),
// Compact elements
sm: rem(8),
// Tight spacing
md: rem(16),
// Standard spacing
lg: rem(24),
// Relaxed spacing
xl: rem(32),
// Section spacing
"2xl": rem(48),
// Large sections
"3xl": rem(64)
// Page sections
},
// Custom shadows for depth
shadows: {
xs: "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)",
sm: "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0px 2px 4px",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
},
// Enhanced focus ring for better accessibility
focusRing: "auto",
// Configure all the color palettes for Mantine
colors: {
// Base colors
neutral: convertPaletteToArray(baseColors2.neutral),
orange: convertPaletteToArray(baseColors2.orange),
blue: convertPaletteToArray(baseColors2.blue),
gray: convertPaletteToArray(baseColors2.gray),
red: convertPaletteToArray(baseColors2.red),
yellow: convertPaletteToArray(baseColors2.yellow),
green: convertPaletteToArray(baseColors2.green)
},
// Component-specific styles
components: {
Button: {
defaultProps: {
radius: "sm"
},
styles: {
root: {
transition: "all 0.2s ease",
"&:hover": {
transform: "translateY(-1px)"
}
}
}
},
Card: {
defaultProps: {
radius: "md",
shadow: "sm"
}
},
Alert: {
styles: {
root: {
borderRadius: "var(--mantine-radius-md)"
}
}
}
}
});
var themeVariants = {
// Brand Theme - Orange primary (logo color)
brand: theme,
// Dark Brand Theme - Dark background with orange primary
darkBrand: createTheme({
...theme,
primaryColor: "orange",
// For dark mode, handle this via MantineProvider's colorScheme prop
colors: {
...theme.colors
}
}),
// Blue Accent Theme - Blue primary
blue: createTheme({
...theme,
primaryColor: "blue",
colors: {
...theme.colors
}
}),
// Neutral Theme - Gray primary
gray: createTheme({
...theme,
primaryColor: "gray",
colors: {
...theme.colors
}
}),
// Legacy default theme
default: theme
};
function ThemeProvider({
children,
themeOverrides,
variant = "brand",
...otherProps
}) {
if (variant && !themeVariants[variant]) {
console.warn(`Invalid theme variant "${variant}". Falling back to "brand" theme.`);
}
const selectedTheme = themeVariants[variant] || themeVariants.brand;
const finalTheme = createTheme({
...selectedTheme,
...themeOverrides || {}
});
return /* @__PURE__ */ jsx(MantineProvider, { theme: finalTheme, ...otherProps, children });
}
var extendTheme = (themeOverrides) => {
return createTheme({ ...theme, ...themeOverrides });
};
export { ThemeProvider, extendTheme };
//# sourceMappingURL=provider.mjs.map
//# sourceMappingURL=provider.mjs.map