pages/palette/palette.component.ts

0001 import { Component } from '@angular/core';
0002 import { CommonModule } from '@angular/common';
0003 import {
0004   COOL_COLORS,
0005   MEDIUM_COLORS,
0006   WARM_COLORS,
0007   METALLIC_COLORS,
0008   ALL_COLORS,
0009 } from '../../theme/cool2-geometry-ruleset';
0010
0011 interface ColorEntry {
0012   name: string;
0013   value: number;
0014   hexString: string;
0015   hsl: { h: number; s: number; l: number };
0016   saturationLevel: number;  // Extracted numeric level (50, 100, 200, etc.)
0017 }
0018
0019 function hexToRgb(hex: number): { r: number; g: number; b: number } {
0020   return {
0021     r: (hex >> 16) & 255,
0022     g: (hex >> 8) & 255,
0023     b: hex & 255,
0024   };
0025 }
0026
0027 function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
0028   r /= 255;
0029   g /= 255;
0030   b /= 255;
0031   const max = Math.max(r, g, b);
0032   const min = Math.min(r, g, b);
0033   let h = 0;
0034   let s = 0;
0035   const l = (max + min) / 2;
0036
0037   if (max !== min) {
0038     const d = max - min;
0039     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
0040     switch (max) {
0041       case r:
0042         h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
0043         break;
0044       case g:
0045         h = ((b - r) / d + 2) / 6;
0046         break;
0047       case b:
0048         h = ((r - g) / d + 4) / 6;
0049         break;
0050     }
0051   }
0052   return { h: h * 360, s: s * 100, l: l * 100 };
0053 }
0054
0055 function toHexString(num: number): string {
0056   return '#' + num.toString(16).padStart(6, '0').toUpperCase();
0057 }
0058
0059 function extractSaturationLevel(name: string): number {
0060   // Extract numeric suffix like _50, _100, _200, _300, _400, _500
0061   const match = name.match(/_(\d+)$/);
0062   if (match) {
0063     return parseInt(match[1], 10);
0064   }
0065   // For colors without numeric suffix (like SIENNA, TERRACOTTA, CHROME, etc.)
0066   return 999;  // Sort at the end of their group
0067 }
0068
0069 function processColors(colors: Record<string, number>): ColorEntry[] {
0070   return Object.entries(colors)
0071     .map(([name, value]) => {
0072       const rgb = hexToRgb(value);
0073       return {
0074         name,
0075         value,
0076         hexString: toHexString(value),
0077         hsl: rgbToHsl(rgb.r, rgb.g, rgb.b),
0078         saturationLevel: extractSaturationLevel(name),
0079       };
0080     })
0081     .sort((a, b) => {
0082       // Sort by saturation level first (50, 100, 200, etc.)
0083       if (a.saturationLevel !== b.saturationLevel) {
0084         return a.saturationLevel - b.saturationLevel;
0085       }
0086       // Then alphabetically by name
0087       return a.name.localeCompare(b.name);
0088     });
0089 }
0090
0091 @Component({
0092   selector: 'app-palette',
0093   standalone: true,
0094   imports: [CommonModule],
0095   templateUrl: './palette.component.html',
0096   styleUrls: ['./palette.component.scss'],
0097 })
0098 export class PaletteComponent {
0099   coolColors = processColors(COOL_COLORS);
0100   mediumColors = processColors(MEDIUM_COLORS);
0101   warmColors = processColors(WARM_COLORS);
0102   metallicColors = processColors(METALLIC_COLORS);
0103   allColors = processColors(ALL_COLORS);
0104
0105   getTextColor(entry: ColorEntry): string {
0106     // Use white text for dark colors, black for light colors
0107     return entry.hsl.l < 50 ? '#ffffff' : '#000000';
0108   }
0109
0110   formatHexValue(value: number): string {
0111     return '0x' + value.toString(16).toUpperCase();
0112   }
0113 }