tessl/npm-graphql-scalars

A collection of scalar types not included in base GraphQL.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Color Scalars

Name: tessl/npm-graphql-scalars
Author: tessl

Color format validation for various color representation systems. These scalars provide validation for color data commonly used in web development, design applications, and user interface customization.

Capabilities

RGB Scalar

Validates RGB color format.

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

Example Values:

"rgb(255, 0, 0)" (Red)
"rgb(0, 255, 0)" (Green)
"rgb(0, 0, 255)" (Blue)
"rgb(128, 128, 128)" (Gray)
"rgb(255, 255, 255)" (White)
"rgb(0, 0, 0)" (Black)

RGBA Scalar

Validates RGBA color format with alpha channel.

/**
 * 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;

Example Values:

"rgba(255, 0, 0, 1)" (Opaque red)
"rgba(0, 255, 0, 0.5)" (Semi-transparent green)
"rgba(0, 0, 255, 0.25)" (Quarter-transparent blue)
"rgba(128, 128, 128, 0.8)" (Semi-transparent gray)

HSL Scalar

Validates HSL color format.

/**
 * 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;

Example Values:

"hsl(0, 100%, 50%)" (Red)
"hsl(120, 100%, 50%)" (Green)
"hsl(240, 100%, 50%)" (Blue)
"hsl(0, 0%, 50%)" (Gray)
"hsl(60, 100%, 50%)" (Yellow)

HSLA Scalar

Validates HSLA color format with alpha channel.

/**
 * 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;

Example Values:

"hsla(0, 100%, 50%, 1)" (Opaque red)
"hsla(120, 100%, 50%, 0.5)" (Semi-transparent green)
"hsla(240, 100%, 50%, 0.25)" (Quarter-transparent blue)
"hsla(0, 0%, 50%, 0.8)" (Semi-transparent gray)

HexColorCode Scalar

Validates hexadecimal color codes.

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

Example Values:

"#FF0000" (Red)
"#00FF00" (Green)
"#0000FF" (Blue)
"#FFF" (White, short form)
"#000" (Black, short form)
"#808080" (Gray)

Hexadecimal Scalar

Validates general hexadecimal string format.

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

Example Values:

"FF0000"
"00ff00"
"0000FF"
"DEADBEEF"
"123ABC"

Usage Examples

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
  }
`;

GraphQL Operations:

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
  }
}

Variables:

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

Color Format Conversions

While each scalar validates its specific format, you can use them together in applications that need multiple color representations:

// 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)"
};

Validation Behavior

Each color scalar performs format-specific validation:

RGB/RGBA: Validates function syntax, ensures values are in correct ranges
HSL/HSLA: Validates function syntax, ensures hue (0-360), saturation/lightness (0-100%), alpha (0-1)
HexColorCode: Validates hex format with # prefix, supports both 3 and 6 digit formats
Hexadecimal: Validates general hex strings without specific formatting requirements

Validation Examples:

// 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
};

Common Use Cases

Color Scalars are commonly used for:

Theme Systems: Managing light/dark themes and color schemes
UI Customization: User-configurable interface colors
Design Systems: Consistent color palette enforcement
Data Visualization: Chart colors and styling
Brand Management: Corporate color consistency
Accessibility: High contrast color validation

Type Definitions

// 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

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