unich-ui-kit-web
Version:
Mantine theme configuration and provider for Unich UI Kit
269 lines (267 loc) • 6.86 kB
JavaScript
// 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
};
var semanticColors = {
// Core UI Colors
primary: baseColors2.orange,
// Main brand color from logo (#FF990A)
secondary: baseColors2.blue,
// Secondary brand color (#0A85FF)
tertiary: baseColors2.gray,
// Additional UI options
// State & Feedback
success: baseColors2.green,
// Positive actions, completion
info: baseColors2.blue,
// Information, help
warning: baseColors2.yellow,
// Caution, important notices
error: baseColors2.red,
// Errors, destructive actions
// UI Elements
neutral: baseColors2.neutral,
// Text, backgrounds, borders
accent: baseColors2.blue,
// Highlights, focus states
// Special Purpose
highlight: baseColors2.yellow,
// Attention-grabbing elements
link: baseColors2.blue,
// Interactive text
border: baseColors2.gray,
// 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
}
};
var colors = {
...baseColors2
};
var getSemanticColor = (colorName, shade = 500) => {
const color = semanticColors[colorName];
if (typeof color === "string") return color;
if (typeof color === "object") {
if ("50" in color) {
return color[shade];
}
const keys = Object.keys(color);
if (keys.length > 0) {
return color[keys[0]];
}
}
return "";
};
export { baseColors2 as baseColors, colors, getSemanticColor, semanticColors };
//# sourceMappingURL=colors.mjs.map
//# sourceMappingURL=colors.mjs.map