Color Scalars

/**
 * GraphQL scalar for RGB color validation
 * Accepts RGB format: rgb(r, g, b) where r, g, b are 0-255
 */
const GraphQLRGB: GraphQLScalarType;

/**
 * GraphQL scalar for RGBA color validation
 * Accepts RGBA format: rgba(r, g, b, a) where r, g, b are 0-255 and a is 0-1
 */
const GraphQLRGBA: GraphQLScalarType;

/**
 * GraphQL scalar for HSL color validation
 * Accepts HSL format: hsl(h, s%, l%) where h is 0-360, s and l are 0-100%
 */
const GraphQLHSL: GraphQLScalarType;

/**
 * GraphQL scalar for HSLA color validation
 * Accepts HSLA format: hsla(h, s%, l%, a) where h is 0-360, s and l are 0-100%, a is 0-1
 */
const GraphQLHSLA: GraphQLScalarType;

/**
 * GraphQL scalar for hexadecimal color code validation
 * Accepts hex format: #RRGGBB or #RGB
 */
const GraphQLHexColorCode: GraphQLScalarType;

/**
 * GraphQL scalar for hexadecimal string validation
 * Accepts hexadecimal strings (0-9, A-F, a-f)
 */
const GraphQLHexadecimal: GraphQLScalarType;

import { 
  GraphQLRGB,
  GraphQLRGBA,
  GraphQLHSL,
  GraphQLHexColorCode
} from "graphql-scalars";

// In a GraphQL schema
const ThemeType = new GraphQLObjectType({
  name: "Theme",
  fields: {
    primaryColor: { type: GraphQLHexColorCode },
    secondaryColor: { type: GraphQLRGB },
    accentColor: { type: GraphQLHSL },
    overlayColor: { type: GraphQLRGBA },
  },
});

// Using with type definitions
const typeDefs = `
  scalar RGB
  scalar RGBA
  scalar HSL
  scalar HSLA
  scalar HexColorCode
  
  type Theme {
    name: String!
    primaryColor: HexColorCode
    secondaryColor: RGB
    accentColor: HSL
    overlayColor: RGBA
  }
  
  type UIComponent {
    backgroundColor: HexColorCode
    textColor: RGB
    borderColor: HSL
    shadowColor: RGBA
  }
`;

query GetTheme($themeId: ID!) {
  theme(id: $themeId) {
    name
    primaryColor
    secondaryColor
    accentColor
    overlayColor
  }
}

mutation UpdateTheme($id: ID!, $colors: ThemeColorsInput!) {
  updateTheme(id: $id, colors: $colors) {
    id
    name
    primaryColor
    secondaryColor
    accentColor
  }
}

{
  "themeId": "theme-dark",
  "colors": {
    "primaryColor": "#007ACC",
    "secondaryColor": "rgb(45, 45, 45)",
    "accentColor": "hsl(210, 100%, 40%)",
    "overlayColor": "rgba(0, 0, 0, 0.5)"
  }
}

// Theme definition using different color formats
const darkTheme = {
  // Hex for primary branding
  primaryColor: "#007ACC",
  
  // RGB for programmatic manipulation
  backgroundColor: "rgb(30, 30, 30)",
  
  // HSL for design system consistency
  accentColor: "hsl(210, 100%, 40%)",
  
  // RGBA for overlays and transparency
  modalOverlay: "rgba(0, 0, 0, 0.7)"
};

// Valid color values
const validColors = {
  rgb: "rgb(255, 128, 0)",      // Valid RGB
  rgba: "rgba(255, 128, 0, 0.8)", // Valid RGBA
  hsl: "hsl(30, 100%, 50%)",    // Valid HSL
  hsla: "hsla(30, 100%, 50%, 0.8)", // Valid HSLA
  hex: "#FF8000",               // Valid hex color
  hexShort: "#F80"              // Valid short hex
};

// Invalid color values
const invalidColors = {
  rgb: "rgb(300, 128, 0)",      // Invalid: red > 255
  rgba: "rgba(255, 128, 0, 1.5)", // Invalid: alpha > 1
  hsl: "hsl(400, 100%, 50%)",   // Invalid: hue > 360
  hsla: "hsla(30, 150%, 50%, 0.8)", // Invalid: saturation > 100%
  hex: "#GG0000",               // Invalid: non-hex characters
  hexShort: "#F"                // Invalid: too short
};

// String constants for schema building
const RGB: string;           // "scalar RGB"
const RGBA: string;          // "scalar RGBA"
const HSL: string;           // "scalar HSL"
const HSLA: string;          // "scalar HSLA"
const HexColorCode: string;  // "scalar HexColorCode"
const Hexadecimal: string;   // "scalar Hexadecimal"

// Mock data generators for testing
const RGBMock: () => string;
const RGBAMock: () => string;
const HSLMock: () => string;
const HSLAMock: () => string;
const HexColorCodeMock: () => string;
const HexadecimalMock: () => string;