import Foundation import SwiftUI // MARK: - FigmaMCP Color Extensions public extension Color { /// Figma MCP Color namespace enum FigmaMCP { // MARK: - Base Palette /// Base color palette generated from Figma selections /// Colors are defined using hex values from Figma design tokens public enum Palette { // MARK: - Black/White public static let white = Color(hex: "#FFFFFF") public static let black = Color(hex: "#000000") // MARK: - Dumbo (Gray Scale) public static let dumbo50 = Color(hex: "#101012") public static let dumbo100 = Color(hex: "#1C1C1F") public static let dumbo150 = Color(hex: "#252529") public static let dumbo200 = Color(hex: "#2E2E33") public static let dumbo250 = Color(hex: "#38383E") public static let dumbo300 = Color(hex: "#424249") public static let dumbo350 = Color(hex: "#4E4D55") public static let dumbo400 = Color(hex: "#5B5B62") public static let dumbo450 = Color(hex: "#6A6A72") public static let dumbo500 = Color(hex: "#7D7C83") public static let dumbo550 = Color(hex: "#919093") public static let dumbo600 = Color(hex: "#A3A3A3") public static let dumbo650 = Color(hex: "#B3B3B2") public static let dumbo700 = Color(hex: "#C2C2C1") public static let dumbo750 = Color(hex: "#D2D0CE") public static let dumbo800 = Color(hex: "#E0DEDA") public static let dumbo850 = Color(hex: "#EDEAE4") public static let dumbo900 = Color(hex: "#F7F4EF") public static let dumbo950 = Color(hex: "#FCFBF9") // MARK: - Strawberry (Pink) public static let strawberry100 = Color(hex: "#2E0C1D") public static let strawberry200 = Color(hex: "#4F1330") public static let strawberry300 = Color(hex: "#701943") public static let strawberry400 = Color(hex: "#981E59") public static let strawberry500 = Color(hex: "#DE1677") public static let strawberry600 = Color(hex: "#FD429C") // Primary accent public static let strawberry700 = Color(hex: "#FF78B9") public static let strawberry800 = Color(hex: "#FFA4D0") public static let strawberry900 = Color(hex: "#FFCFE6") // MARK: - Dodger Blue public static let dodgerBlue100 = Color(hex: "#002041") public static let dodgerBlue200 = Color(hex: "#003671") public static let dodgerBlue300 = Color(hex: "#004A98") public static let dodgerBlue400 = Color(hex: "#005CBE") public static let dodgerBlue500 = Color(hex: "#0071EA") public static let dodgerBlue600 = Color(hex: "#1F8BFF") // Primary accent public static let dodgerBlue700 = Color(hex: "#58A8FF") public static let dodgerBlue800 = Color(hex: "#91C6FF") public static let dodgerBlue900 = Color(hex: "#CAE3FF") // MARK: - Pumpkin (Orange) public static let pumpkin100 = Color(hex: "#3B1900") public static let pumpkin200 = Color(hex: "#652A00") public static let pumpkin300 = Color(hex: "#8D3B00") public static let pumpkin400 = Color(hex: "#BC4E00") public static let pumpkin500 = Color(hex: "#FF6A00") // Primary accent public static let pumpkin600 = Color(hex: "#FF9448") public static let pumpkin700 = Color(hex: "#FFB27B") public static let pumpkin800 = Color(hex: "#FFCBA6") public static let pumpkin900 = Color(hex: "#FFE3D0") // MARK: - Slime (Green) public static let slime100 = Color(hex: "#003516") public static let slime200 = Color(hex: "#015725") public static let slime300 = Color(hex: "#017431") public static let slime400 = Color(hex: "#01903D") public static let slime500 = Color(hex: "#02AF4A") public static let slime600 = Color(hex: "#02D95C") // Primary accent public static let slime700 = Color(hex: "#23FD7E") public static let slime800 = Color(hex: "#7AFEB1") public static let slime900 = Color(hex: "#C6FEDD") // MARK: - Dandelion (Yellow) public static let dandelion100 = Color(hex: "#2B2201") public static let dandelion200 = Color(hex: "#504102") public static let dandelion300 = Color(hex: "#725F03") public static let dandelion400 = Color(hex: "#947D04") public static let dandelion500 = Color(hex: "#B49C05") public static let dandelion600 = Color(hex: "#D4BB06") public static let dandelion700 = Color(hex: "#F5D907") // Primary accent public static let dandelion800 = Color(hex: "#F9E54F") public static let dandelion850 = Color(hex: "#FAED87") public static let dandelion900 = Color(hex: "#FBF4BA") public static let dandelion950 = Color(hex: "#FDFAE2") // MARK: - Amethyst (Purple) public static let amethyst100 = Color(hex: "#251B51") public static let amethyst200 = Color(hex: "#3D2A87") public static let amethyst300 = Color(hex: "#4D33B7") public static let amethyst400 = Color(hex: "#6244D7") public static let amethyst500 = Color(hex: "#7251F7") public static let amethyst600 = Color(hex: "#8B6EFE") // Primary accent public static let amethyst700 = Color(hex: "#9E86FF") public static let amethyst800 = Color(hex: "#B7A4FF") public static let amethyst900 = Color(hex: "#D7CDFF") // MARK: - Vermilion (Error) public static let vermilion100 = Color(hex: "#3B0C02") public static let vermilion200 = Color(hex: "#661503") public static let vermilion300 = Color(hex: "#901E04") public static let vermilion400 = Color(hex: "#C32906") public static let vermilion500 = Color(hex: "#F8441B") // Primary accent public static let vermilion600 = Color(hex: "#FA7658") public static let vermilion700 = Color(hex: "#FB9B85") public static let vermilion800 = Color(hex: "#FCBAAB") public static let vermilion900 = Color(hex: "#FEDAD2") // MARK: - Grass (Success) public static let grass100 = Color(hex: "#173501") public static let grass200 = Color(hex: "#255602") public static let grass300 = Color(hex: "#317203") public static let grass400 = Color(hex: "#3D8D03") public static let grass500 = Color(hex: "#4AAB04") // Primary accent public static let grass600 = Color(hex: "#5BD205") public static let grass700 = Color(hex: "#7AFA1F") public static let grass800 = Color(hex: "#AEFC76") public static let grass900 = Color(hex: "#DDFEC5") // MARK: - Legacy Colors (for compatibility) public static let legacyGray50 = Color(hex: "#0E0808") public static let legacyGray100 = Color(hex: "#252020") public static let legacyGray200 = Color(hex: "#363030") public static let legacyGray300 = Color(hex: "#4A4545") public static let legacyGray350 = Color(hex: "#565252") public static let legacyGray400 = Color(hex: "#676363") public static let legacyGray450 = Color(hex: "#726E6C") public static let legacyGray500 = Color(hex: "#8B8785") public static let legacyGray600 = Color(hex: "#BAB4B1") public static let legacyGray700 = Color(hex: "#D1CBC7") public static let legacyGray800 = Color(hex: "#E8E1DD") public static let legacyGray850 = Color(hex: "#EFEAE7") public static let legacyGray900 = Color(hex: "#F5F0ED") public static let legacyGray950 = Color(hex: "#FAF7F5") public static let legacyBrown900 = Color(hex: "#B3AAAA") public static let legacyBrown800 = Color(hex: "#A39898") public static let legacyBrown700 = Color(hex: "#948787") public static let legacyBrown600 = Color(hex: "#756565") public static let legacyBrown500 = Color(hex: "#665454") public static let legacyBrown400 = Color(hex: "#564646") public static let legacyBrown300 = Color(hex: "#473131") public static let legacyBrown200 = Color(hex: "#2E1C1C") public static let legacyBrown100 = Color(hex: "#2E1C1C") public static let legacyPink500 = Color(hex: "#C73D66") public static let legacyRed500 = Color(hex: "#F24018") public static let legacyGreen500 = Color(hex: "#46731B") public static let legacyBlue500 = Color(hex: "#1000C0") public static let legacySalmon500 = Color(hex: "#E45645") public static let legacyPurple500 = Color(hex: "#631E8D") public static let legacyGrape500 = Color(hex: "#4F1D9F") } // MARK: - Semantic Colors (From Figma Design File) /// Semantic color roles exactly as defined in the Figma design system public enum Semantic { // MARK: - Accent Colors (from Figma) public static var accentBrand = Palette.strawberry600 // Pink.500 public static var accentV4 = Color(hex: "#c3e734") // Matches Figma Accent/V4 public static var accentError = Palette.vermilion500 // Red.500 public static var accentSuccess = Palette.grass500 // Green.500 // MARK: - Background Colors (from Figma) public static var backgroundPrimary = dynamicColor( light: Palette.dumbo900, // Dumbo 900 (Light Mode) dark: Palette.dumbo50 // Gray 50 (Dark Mode) ) public static var backgroundSecondary = dynamicColor( light: Palette.dumbo850, // Dumbo 850 (Light Mode) dark: Palette.dumbo100 // Gray 100 (Dark Mode) ) public static var backgroundTertiary = dynamicColor( light: Palette.dumbo800, // Dumbo 800 (Light Mode) dark: Palette.dumbo200 // Gray 200 (Dark Mode) ) // MARK: - Background Glass Effects (from Figma) public static var backgroundPrimaryGlass = Color(hex: "#FFFFFF00") // White 0% public static var backgroundSecondaryGlass = Color(hex: "#FFFFFF1A") // White 10% public static var backgroundTertiaryGlass = Color(hex: "#FFFFFF33") // White 20% // MARK: - Glass Effects (from Figma) public static var glassThin = dynamicColor( light: Color(hex: "#0000000A"), // Black 4% (Light Mode) dark: Color(hex: "#FFFFFF0A") // White 4% (Dark Mode) ) public static var glassThick = dynamicColor( light: Color(hex: "#0000001A"), // Black 10% (Light Mode) dark: Color(hex: "#FFFFFF1A") // White 10% (Dark Mode) ) public static var glassDense = dynamicColor( light: Color(hex: "#00000033"), // Black 20% (Light Mode) dark: Color(hex: "#FFFFFF33") // White 20% (Dark Mode) ) // MARK: - Fog Effects (from Figma) public static var fogThin = Color(hex: "#FFFFFF0A") // White 4% public static var fogThick = Color(hex: "#FFFFFF1A") // White 10% public static var fogDense = Color.white.opacity(0.30) // White 30% - different from Figma for increased contrast // MARK: - Smoke Effects (from Figma) public static var smokeThin = Color(hex: "#0000000A") // Black 4% - consistent across modes public static var smokeThick = Color(hex: "#0000001A") // Black 10% - consistent across modes public static var smokeDense = Color(hex: "#00000033") // Black 20% - consistent across modes // MARK: - Background Overlays (from Figma) public static var backgroundLightOverlay = Color(hex: "#FFFFFFE6") // White 90% public static var backgroundDarkOverlay = Color(hex: "#0000004D") // Black 30% // MARK: - Foreground Colors (from Figma) public static var foregroundPrimary = dynamicColor( light: Palette.dumbo50, // Dumbo 50 (Light Mode) dark: Palette.dumbo900 // Dumbo 900 (Dark Mode) ) public static var foregroundSecondary = dynamicColor( light: Palette.dumbo400, // Dumbo 400 (Light Mode) dark: Palette.dumbo700 // Gray 700 (Dark Mode) ) public static var foregroundTertiary = dynamicColor( light: Palette.dumbo500, // Dumbo 500 (Light Mode) dark: Palette.dumbo600 // Gray 600 (Dark Mode) ) public static var foregroundInactive = dynamicColor( light: Palette.dumbo600, // Dumbo 600 (Light Mode) dark: Palette.dumbo450 // Gray 450 (Dark Mode) ) public static var foregroundOnError = Palette.white // MARK: - Foreground Glass Effects (from Figma) public static var foregroundPrimaryGlass = Color(hex: "#FFFFFFE6") // White 90% public static var foregroundSecondaryGlass = Color(hex: "#FFFFFFBF") // White 75% public static var foregroundTertiaryGlass = Color(hex: "#FFFFFF80") // White 50% public static var foregroundInactiveGlass = Color(hex: "#FFFFFF4D") // White 30% // MARK: - Border Colors (from Figma) public static var borderPrimary = dynamicColor( light: Color(hex: "#00000026"), // Black 15% (Light Mode) dark: Color(hex: "#FFFFFF4D") // White 30% (Dark Mode) ) public static var borderSecondary = dynamicColor( light: Color(hex: "#00000014"), // Black 8% (Light Mode) dark: Color(hex: "#FFFFFF26") // White 15% (Dark Mode) ) // MARK: - Border Glass Effects (from Figma) public static var borderPrimaryGlass = Color(hex: "#FFFFFF4D") // White 30% public static var borderSecondaryGlass = Color(hex: "#FFFFFF26") // White 15% // MARK: - Overlay Colors (from Figma) public static var overlayOnPrimary = Color(hex: "#FFFFFF1A") // White 10% public static var overlayOnLight = Color(hex: "#FFFFFF1A") // White 10% public static var overlayOnDark = Color(hex: "#0000001A") // Black 10% } } } // MARK: - Hex Color Initializer public extension Color { /// Initialize Color from hex string /// Supports both 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex values init(hex: String) { let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted) var int: UInt64 = 0 Scanner(string: hex).scanHexInt64(&int) let a, r, g, b: UInt64 switch hex.count { case 3: // RGB (12-bit) (a, r, g, b) = (255, (int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17) case 6: // RGB (24-bit) (a, r, g, b) = (255, int >> 16, int >> 8 & 0xFF, int & 0xFF) case 8: // RGBA (32-bit) (r, g, b, a) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF) default: (a, r, g, b) = (1, 1, 1, 0) } self.init( .sRGB, red: Double(r) / 255, green: Double(g) / 255, blue: Double(b) / 255, opacity: Double(a) / 255 ) } } // MARK: - UIColor Extension public extension UIColor { /// FigmaMCP UIColor namespace for when UIColor is needed enum FigmaMCP { public enum Palette { // TODO: Add UIColor versions if needed for specific use cases // static let primary500 = UIColor(Color.FigmaMCP.Palette.primary500) } } } #if DEBUG // MARK: - Preview Support struct FigmaMCPColorPreview: View { var body: some View { ScrollView { VStack(alignment: .leading, spacing: 16) { Text("FigmaMCP Color Palette") .font(.title) .padding(.bottom) VStack(alignment: .leading, spacing: 8) { Text("Palette Colors") .font(.headline) // Main palette colors ColorSwatch(name: "White", color: Color.FigmaMCP.Palette.white, hex: "#FFFFFF") ColorSwatch(name: "Black", color: Color.FigmaMCP.Palette.black, hex: "#000000") ColorSwatch(name: "Dumbo 50", color: Color.FigmaMCP.Palette.dumbo50, hex: "#101012") ColorSwatch(name: "Dumbo 500", color: Color.FigmaMCP.Palette.dumbo500, hex: "#7D7C83") ColorSwatch(name: "Dumbo 950", color: Color.FigmaMCP.Palette.dumbo950, hex: "#FCFBF9") ColorSwatch(name: "Strawberry 600", color: Color.FigmaMCP.Palette.strawberry600, hex: "#FD429C") ColorSwatch(name: "Dodger Blue 600", color: Color.FigmaMCP.Palette.dodgerBlue600, hex: "#1F8BFF") ColorSwatch(name: "Pumpkin 500", color: Color.FigmaMCP.Palette.pumpkin500, hex: "#FF6A00") ColorSwatch(name: "Slime 600", color: Color.FigmaMCP.Palette.slime600, hex: "#02D95C") ColorSwatch(name: "Dandelion 700", color: Color.FigmaMCP.Palette.dandelion700, hex: "#F5D907") ColorSwatch(name: "Amethyst 600", color: Color.FigmaMCP.Palette.amethyst600, hex: "#8B6EFE") } VStack(alignment: .leading, spacing: 8) { Text("Semantic Colors") .font(.headline) // Background Colors ColorSwatch(name: "Background Primary", color: Color.FigmaMCP.Semantic.backgroundPrimary, hex: "Dynamic") ColorSwatch(name: "Background Secondary", color: Color.FigmaMCP.Semantic.backgroundSecondary, hex: "Dynamic") ColorSwatch(name: "Background Tertiary", color: Color.FigmaMCP.Semantic.backgroundTertiary, hex: "Dynamic") // Foreground Colors ColorSwatch(name: "Foreground Primary", color: Color.FigmaMCP.Semantic.foregroundPrimary, hex: "Dynamic") ColorSwatch(name: "Foreground Secondary", color: Color.FigmaMCP.Semantic.foregroundSecondary, hex: "Dynamic") ColorSwatch(name: "Foreground Tertiary", color: Color.FigmaMCP.Semantic.foregroundTertiary, hex: "Dynamic") // Glass Effects ColorSwatch(name: "Glass Thin", color: Color.FigmaMCP.Semantic.glassThin, hex: "Dynamic") ColorSwatch(name: "Glass Thick", color: Color.FigmaMCP.Semantic.glassThick, hex: "Dynamic") ColorSwatch(name: "Glass Dense", color: Color.FigmaMCP.Semantic.glassDense, hex: "Dynamic") // Accent Colors ColorSwatch(name: "Accent Brand", color: Color.FigmaMCP.Semantic.accentBrand, hex: "#FD429C") ColorSwatch(name: "Accent V4", color: Color.FigmaMCP.Semantic.accentV4, hex: "#017431") ColorSwatch(name: "Accent Error", color: Color.FigmaMCP.Semantic.accentError, hex: "#F8441B") ColorSwatch(name: "Accent Success", color: Color.FigmaMCP.Semantic.accentSuccess, hex: "#4AAB04") } } .padding() } } } struct ColorSwatch: View { let name: String let color: Color let hex: String var body: some View { HStack(spacing: 12) { RoundedRectangle(cornerRadius: 8) .fill(color) .frame(width: 40, height: 40) .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.gray.opacity(0.3), lineWidth: 1) ) VStack(alignment: .leading, spacing: 2) { Text(name) .font(.body) .fontWeight(.medium) Text(hex.uppercased()) .font(.caption) .foregroundColor(.secondary) } Spacer() } .padding(.vertical, 4) } } #Preview { FigmaMCPColorPreview() } #endif