unich-ui-kit-web/dist/theme/colors.mjs.map

Mantine theme configuration and provider for Unich UI Kit

{"version":3,"sources":["../../src/theme/generated-colors.ts","../../src/theme/colors.ts"],"names":["baseColors"],"mappings":"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","file":"colors.mjs","sourcesContent":["// Generated Color System\n// Auto-generated by generate-colors.ts\nexport const baseColors = {\n  // PRIMARY COLORS\n  // Primary brand color based on logo palette\n  orange: {\n    50: '#fff7ed', // Subtle backgrounds - HSL: 33,10000,9600\n    100: '#ffeed8', // Hover states - HSL: 34,10000,9200\n    200: '#ffdbb0', // Borders - HSL: 33,10000,8500\n    300: '#ffc888', // Icons - HSL: 32,10000,7700\n    400: '#ffb55f', // Secondary actions - HSL: 32,10000,6900\n    500: '#ff990a', // Primary actions - HSL: 35,10000,5200\n    600: '#e38607', // Hover - HSL: 35,9400,4600\n    700: '#c87304', // Active - HSL: 34,9600,4000\n    800: '#ad6102', // Dark variant - HSL: 33,9800,3400\n    900: '#935001', // Extra dark - HSL: 32,9900,2900\n    950: '#7a3f00', // Maximum contrast - HSL: 31,10000,2400\n  },\n\n  // NEUTRAL COLORS\n  // Brand neutral colors from light to dark palette\n  neutral: {\n    50: '#ececec', // Background, cards - HSL: 0,0,9300\n    100: '#e1e1e1', // Subtle backgrounds - HSL: 0,0,8800\n    200: '#cacaca', // Borders, dividers - HSL: 0,0,7900\n    300: '#b4b4b4', // Disabled states - HSL: 0,0,7100\n    400: '#9f9f9f', // Placeholder text - HSL: 0,0,6200\n    500: '#808080', // Secondary text - HSL: 0,0,5000\n    600: '#696969', // Body text - HSL: 0,0,4100\n    700: '#535353', // Headings - HSL: 0,0,3300\n    800: '#3e3e3e', // High contrast text - HSL: 0,0,2400\n    900: '#2a2a2a', // Extra high contrast - HSL: 0,0,1600\n    950: '#171717', // Maximum contrast - HSL: 0,0,900\n  },\n\n  // Grayscale for UI elements palette\n  gray: {\n    50: '#f9f9f9', // Background, cards - HSL: 0,0,9800\n    100: '#f0f0f1', // Subtle backgrounds - HSL: 240,300,9400\n    200: '#dedee1', // Borders, dividers - HSL: 240,500,8800\n    300: '#ccccd1', // Disabled states - HSL: 240,500,8100\n    400: '#bbbbc1', // Placeholder text - HSL: 240,500,7500\n    500: '#a1a1aa', // Secondary text - HSL: 240,500,6500\n    600: '#83838a', // Body text - HSL: 240,300,5300\n    700: '#66666c', // Headings - HSL: 240,300,4100\n    800: '#4a4a4f', // High contrast text - HSL: 240,300,3000\n    900: '#303034', // Extra high contrast - HSL: 240,400,2000\n    950: '#18181b', // Maximum contrast - HSL: 240,600,1000\n  },\n\n  // SEMANTIC COLORS\n  // Error and danger states palette\n  red: {\n    50: '#fef2f2', // HSL: 0,8600,9700\n    100: '#ffe2df', // HSL: 6,10000,9400\n    200: '#ffc2ba', // HSL: 7,10000,8600\n    300: '#ffa297', // HSL: 6,10000,8000\n    400: '#fb8074', // HSL: 5,9400,7200\n    500: '#ef4444', // HSL: 0,8400,6000\n    600: '#ca3738', // HSL: 360,5800,5000\n    700: '#a72b2d', // HSL: 359,5900,4100\n    800: '#842022', // HSL: 359,6100,3200\n    900: '#641517', // HSL: 358,6500,2400\n    950: '#450a0a', // HSL: 0,7500,1500\n  },\n\n  // Success states palette\n  green: {\n    50: '#f0fdf4', // HSL: 138,7600,9700\n    100: '#e0f8e5', // HSL: 133,6300,9300\n    200: '#beedc6', // HSL: 130,5700,8400\n    300: '#9be2a8', // HSL: 131,5500,7500\n    400: '#76d78b', // HSL: 133,5500,6500\n    500: '#22c55e', // HSL: 142,7100,4500\n    600: '#1ca44f', // HSL: 143,7100,3800\n    700: '#168440', // HSL: 143,7100,3000\n    800: '#106631', // HSL: 143,7300,2300\n    900: '#0a4923', // HSL: 144,7600,1600\n    950: '#052e16', // HSL: 145,8000,1000\n  },\n\n  // Warning states palette\n  yellow: {\n    50: '#fefce8', // HSL: 55,9200,9500\n    100: '#fef4d5', // HSL: 45,9500,9200\n    200: '#fde6ae', // HSL: 43,9500,8400\n    300: '#f9d788', // HSL: 42,9000,7500\n    400: '#f4c860', // HSL: 42,8700,6700\n    500: '#eab308', // HSL: 45,9300,4700\n    600: '#c6930e', // HSL: 43,8700,4200\n    700: '#a37410', // HSL: 41,8200,3500\n    800: '#81560f', // HSL: 37,7900,2800\n    900: '#613a0d', // HSL: 32,7600,2200\n    950: '#422006', // HSL: 26,8300,1400\n  },\n\n  // ACCENT COLORS\n  // Secondary brand color for accent use palette\n  blue: {\n    50: '#f0f7ff', // HSL: 212,10000,9700\n    100: '#e1ebff', // HSL: 220,10000,9400\n    200: '#c1d3ff', // HSL: 223,10000,8800\n    300: '#9fbcff', // HSL: 222,10000,8100\n    400: '#78a5ff', // HSL: 220,10000,7400\n    500: '#0a85ff', // HSL: 210,10000,5200\n    600: '#0775e3', // HSL: 210,9400,4600\n    700: '#0466c7', // HSL: 210,9600,4000\n    800: '#0257ac', // HSL: 210,9800,3400\n    900: '#014992', // HSL: 210,9900,2900\n    950: '#003b79', // HSL: 211,10000,2400\n  },\n};\n","/**\n * Color System for unich-ui-kit-web\n *\n * Design Principles:\n * 1. Hierarchical: Clear primary/secondary/accent color hierarchy\n * 2. Semantic: Colors convey meaning and function\n * 3. Accessible: WCAG 2.1 AA compliant contrast ratios\n * 4. Systematic: Consistent shade progression (50-950)\n * 5. Harmonious: Colors work together in various combinations\n */\n\n// Import generated colors\nimport { baseColors as generatedColors } from './generated-colors';\n\n// Base color palette - using generated colors from user's brand colors\nexport const baseColors = {\n  // Neutral - Brand neutral colors from light to dark\n  neutral: generatedColors.neutral,\n\n  // Primary - Brand orange from logo\n  orange: generatedColors.orange,\n\n  // Secondary - Brand blue accent color\n  blue: generatedColors.blue,\n\n  // Grayscale UI elements\n  gray: generatedColors.gray,\n\n  // Error & Danger\n  red: generatedColors.red,\n\n  // Success\n  green: generatedColors.green,\n\n  // Warning\n  yellow: generatedColors.yellow,\n};\n\n/**\n * Semantic color mappings for UI elements and states\n * Organized by function and context for intuitive usage\n */\nexport const semanticColors = {\n  // Core UI Colors\n  primary: baseColors.orange, // Main brand color from logo (#FF990A)\n  secondary: baseColors.blue, // Secondary brand color (#0A85FF)\n  tertiary: baseColors.gray, // Additional UI options\n\n  // State & Feedback\n  success: baseColors.green, // Positive actions, completion\n  info: baseColors.blue, // Information, help\n  warning: baseColors.yellow, // Caution, important notices\n  error: baseColors.red, // Errors, destructive actions\n\n  // UI Elements\n  neutral: baseColors.neutral, // Text, backgrounds, borders\n  accent: baseColors.blue, // Highlights, focus states\n\n  // Special Purpose\n  highlight: baseColors.yellow, // Attention-grabbing elements\n  link: baseColors.blue, // Interactive text\n  border: baseColors.gray, // Borders and dividers\n  background: {\n    // Background hierarchy\n    page: baseColors.neutral[50], // Light background (#ECECEC)\n    card: baseColors.neutral[100],\n    active: baseColors.neutral[200],\n    dark: baseColors.neutral[950], // Dark background (#171717)\n  },\n  text: {\n    // Text hierarchy\n    primary: baseColors.neutral[900],\n    secondary: baseColors.neutral[700],\n    tertiary: baseColors.neutral[500],\n    disabled: baseColors.neutral[400],\n    onDark: baseColors.neutral[50], // Text on dark background\n  },\n};\n\n/**\n * Export the main colors object for Mantine compatibility\n */\nexport const colors = {\n  ...baseColors,\n};\n\n// Type definitions for semantic colors\nexport interface ColorShades {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n  950: string;\n}\n\nexport interface BackgroundColors {\n  page: string;\n  card: string;\n  active: string;\n  dark: string;\n}\n\nexport interface TextColors {\n  primary: string;\n  secondary: string;\n  tertiary: string;\n  disabled: string;\n  onDark: string;\n}\n\nexport type SemanticColor = ColorShades | BackgroundColors | TextColors | string;\n\n/**\n * Helper function to get a specific semantic color shade\n * @param colorName - The semantic color name\n * @param shade - The shade value (50-950)\n * @returns The hex color value\n */\nexport const getSemanticColor = (\n  colorName: keyof typeof semanticColors,\n  shade: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 = 500\n): string => {\n  const color = semanticColors[colorName] as SemanticColor;\n\n  // Handle direct string values\n  if (typeof color === 'string') return color;\n\n  // Handle nested objects (like background and text)\n  if (typeof color === 'object') {\n    // If it's a color palette object with shades\n    if ('50' in color) {\n      return (color as ColorShades)[shade];\n    }\n\n    // If it's a semantic object (like background or text)\n    // Just return the first property value as a fallback\n    const keys = Object.keys(color);\n    if (keys.length > 0) {\n      // Type assertion to unknown first for safety\n      return (color as unknown as Record<string, string>)[keys[0]];\n    }\n  }\n\n  return '';\n};\n"]}