Color Manipulation

/**
 * Get the color raw value from theme
 * @param theme - The theme object
 * @param color - The color path ("green.200")
 * @param fallback - The fallback color
 * @returns Color value as hex string
 */
function getColor(theme: Dict, color: string, fallback?: string): string;

/**
 * Get the color css variable from theme
 * @param theme - The theme object
 * @param color - The color path
 * @param fallback - The fallback value
 * @returns CSS variable reference or fallback
 */
function getColorVar(theme: Dict, color: string, fallback?: string): string;

type Dict = { [key: string]: any };

import { getColor, getColorVar } from "@chakra-ui/theme-tools/color";

const theme = {
  colors: {
    blue: { 500: "#3182ce", 600: "#2c5282" },
    gray: { 100: "#f7fafc", 800: "#2d3748" }
  }
};

// Get color from theme
const primaryColor = getColor(theme, "blue.500"); // "#3182ce"
const fallbackColor = getColor(theme, "purple.500", "#805ad5"); // "#805ad5"

// Get CSS variable reference
const colorVar = getColorVar(theme, "blue.500"); // CSS variable reference

/**
 * Determines if the tone of given color is "light" or "dark"
 * @param color - The color in hex, rgb, or hsl
 * @returns Function that takes theme and returns tone
 */
function tone(color: string): (theme: Dict) => "light" | "dark";

/**
 * Determines if a color tone is "dark"
 * @param color - The color in hex, rgb, or hsl
 * @returns Function that takes theme and returns boolean
 */
function isDark(color: string): (theme: Dict) => boolean;

/**
 * Determines if a color tone is "light"
 * @param color - The color in hex, rgb, or hsl
 * @returns Function that takes theme and returns boolean
 */
function isLight(color: string): (theme: Dict) => boolean;

import { tone, isDark, isLight } from "@chakra-ui/theme-tools/color";

const theme = { colors: { white: "#ffffff", black: "#000000" } };

// Check color tone
const whiteTone = tone("white")(theme); // "light"
const blackTone = tone("black")(theme); // "dark"

// Boolean checks
const isWhiteDark = isDark("white")(theme); // false
const isBlackLight = isLight("black")(theme); // false

/**
 * Make a color transparent
 * @param color - The color in hex, rgb, or hsl
 * @param opacity - The amount of opacity the color should have (0-1)
 * @returns Function that takes theme and returns transparent color
 */
function transparentize(color: string, opacity: number): (theme: Dict) => string;

/**
 * Add white to a color
 * @param color - The color in hex, rgb, or hsl
 * @param amount - The amount white to add (0-100)
 * @returns Function that takes theme and returns whitened color
 */
function whiten(color: string, amount: number): (theme: Dict) => string;

/**
 * Add black to a color
 * @param color - The color in hex, rgb, or hsl
 * @param amount - The amount black to add (0-100)
 * @returns Function that takes theme and returns blackened color
 */
function blacken(color: string, amount: number): (theme: Dict) => string;

/**
 * Darken a specified color
 * @param color - The color in hex, rgb, or hsl
 * @param amount - The amount to darken (0-100)
 * @returns Function that takes theme and returns darkened color
 */
function darken(color: string, amount: number): (theme: Dict) => string;

/**
 * Lighten a specified color
 * NOTE: This function has a bug in version 2.2.8 - it's missing a return statement
 * @param color - The color in hex, rgb, or hsl
 * @param amount - The amount to lighten (0-100)
 * @returns Function that takes theme and returns lightened color (currently returns undefined due to bug)
 */
function lighten(color: string, amount: number): (theme: Dict) => string;

/**
 * Get the complementary color (180 degrees on color wheel)
 * @param color - The color in hex, rgb, or hsl
 * @returns Function that takes theme and returns complementary color
 */
function complementary(color: string): (theme: Dict) => string;

import { transparentize, darken, lighten, whiten, blacken, complementary } from "@chakra-ui/theme-tools/color";

const theme = { colors: { blue: { 500: "#3182ce" } } };

// Color transformations
const semiTransparent = transparentize("blue.500", 0.5)(theme); // 50% opacity
const darker = darken("blue.500", 20)(theme); // 20% darker
const lighter = lighten("blue.500", 20)(theme); // 20% lighter (NOTE: Currently returns undefined due to bug)
const whitened = whiten("blue.500", 30)(theme); // Mix with 30% white
const blackened = blacken("blue.500", 30)(theme); // Mix with 30% black
const complement = complementary("blue.500")(theme); // Complementary color

/**
 * Checks the contrast ratio between 2 colors, based on WCAG 2.0
 * @param fg - The foreground or text color
 * @param bg - The background color
 * @returns Function that takes theme and returns contrast ratio
 */
function contrast(fg: string, bg: string): (theme: Dict) => number;

/**
 * Checks if a color meets WCAG 2.0 contrast ratio guidelines
 * @param textColor - The foreground or text color
 * @param bgColor - The background color
 * @param options - WCAG compliance options
 * @returns Function that takes theme and returns accessibility status
 */
function isAccessible(
  textColor: string,
  bgColor: string,
  options?: WCAG2Params
): (theme: Dict) => boolean;

/**
 * Checks if two colors meet WCAG 2.0 readability standards
 * @param color1 - First color
 * @param color2 - Second color
 * @param wcag2 - WCAG compliance parameters
 * @returns Boolean indicating if colors are readable
 */
function isReadable(
  color1: string,
  color2: string,
  wcag2?: WCAG2Params
): boolean;

/**
 * Calculate readability ratio between two colors
 * @param color1 - First color
 * @param color2 - Second color
 * @returns Readability ratio number
 */
function readability(color1: string, color2: string): number;

interface WCAG2Params {
  /** WCAG compliance level */
  level?: "AA" | "AAA";
  /** Text size category */
  size?: "large" | "small";
}

import { contrast, isAccessible, isReadable } from "@chakra-ui/theme-tools/color";

const theme = {
  colors: {
    white: "#ffffff",
    black: "#000000",
    blue: { 500: "#3182ce" }
  }
};

// Check contrast ratio
const contrastRatio = contrast("black", "white")(theme); // ~21 (high contrast)

// Check accessibility
const isGoodContrast = isAccessible("black", "white", { level: "AA", size: "small" })(theme); // true

// Direct readability check
const readable = isReadable("#000000", "#ffffff", { level: "AAA", size: "large" }); // true

/**
 * Generate CSS for striped background pattern
 * @param size - Size of each stripe (default: "1rem")
 * @param color - Color of stripes (default: "rgba(255, 255, 255, 0.15)")
 * @returns CSS object with background properties
 */
function generateStripe(size?: string, color?: string): {
  backgroundImage: string;
  backgroundSize: string;
};

/**
 * Generate random color with various options
 * @param opts - Options for random color generation
 * @returns Random color as hex string
 */
function randomColor(opts?: RandomColorOptions): string;

interface RandomColorOptions {
  /** If passed, string will be used to generate random color */
  string?: string;
  /** List of colors to pick from at random */
  colors?: string[];
}

import { generateStripe, randomColor } from "@chakra-ui/theme-tools/color";

// Generate stripe pattern
const stripeCSS = generateStripe("2rem", "rgba(0, 0, 0, 0.1)");
// Returns: { backgroundImage: "linear-gradient(...)", backgroundSize: "2rem 2rem" }

// Random colors
const randomHex = randomColor(); // "#a3c4f2" (random)
const fromString = randomColor({ string: "user123" }); // Consistent color based on string
const fromList = randomColor({ colors: ["#ff0000", "#00ff00", "#0000ff"] }); // Random from list