Color Modification

/**
 * Sets the alpha value and returns this instance
 * @param value - Alpha value between 0 (transparent) and 1 (opaque)
 * @returns tinycolor instance (chainable)
 */
setAlpha(value: number): tinycolor;

import tinycolor from "tinycolor2";

const red = tinycolor("red");
const semiTransparent = red.setAlpha(0.5);
const almostTransparent = red.setAlpha(0.1);

console.log(red.toRgbString());                    // "rgb(255, 0, 0)"
console.log(semiTransparent.toRgbString());        // "rgba(255, 0, 0, 0.5)"
console.log(almostTransparent.toRgbString());      // "rgba(255, 0, 0, 0.1)"

// Chain with other modifications
const result = tinycolor("blue")
  .lighten(20)
  .setAlpha(0.7)
  .toRgbString();

/**
 * Lightens the color by the specified amount
 * @param amount - Percentage to lighten (0-100), default is 10
 * @returns new tinycolor instance (chainable)
 */
lighten(amount?: number): tinycolor;

const darkBlue = tinycolor("#000080");

const lightened10 = darkBlue.lighten();    // Default 10%
const lightened25 = darkBlue.lighten(25);  // Lighten by 25%
const lightened50 = darkBlue.lighten(50);  // Lighten by 50%

console.log(darkBlue.toHexString());     // "#000080"
console.log(lightened10.toHexString());  // "#1a1a99"
console.log(lightened25.toHexString());  // "#4040bf"
console.log(lightened50.toHexString());  // "#8080ff"

// Create a lightness scale
const baseColor = tinycolor("#2c3e50");
const scale = [0, 10, 20, 30, 40, 50].map(amount => 
  baseColor.lighten(amount).toHexString()
);

/**
 * Darkens the color by the specified amount
 * @param amount - Percentage to darken (0-100), default is 10
 * @returns new tinycolor instance (chainable)
 */
darken(amount?: number): tinycolor;

const lightGreen = tinycolor("#90EE90");

const darkened10 = lightGreen.darken();     // Default 10%
const darkened25 = lightGreen.darken(25);   // Darken by 25%
const darkened50 = lightGreen.darken(50);   // Darken by 50%

console.log(lightGreen.toHexString());   // "#90ee90"
console.log(darkened10.toHexString());   // "#7dd97d"
console.log(darkened25.toHexString());   // "#59c359"
console.log(darkened50.toHexString());   // "#2d912d"

// Create hover effects
const buttonColor = tinycolor("#3498db");
const hoverColor = buttonColor.darken(10);
const activeColor = buttonColor.darken(20);

/**
 * Brightens the color by adjusting RGB values
 * @param amount - Percentage to brighten (0-100), default is 10
 * @returns new tinycolor instance (chainable)
 */
brighten(amount?: number): tinycolor;

const gray = tinycolor("#808080");

const brightened = gray.brighten(20);

console.log(gray.toHexString());        // "#808080"
console.log(brightened.toHexString());  // "#b3b3b3"

// Compare brighten vs lighten
const color = tinycolor("#4a90e2");
const brightened = color.brighten(20);
const lightened = color.lighten(20);

console.log("Original:", color.toHexString());      // "#4a90e2"
console.log("Brightened:", brightened.toHexString()); // Different result
console.log("Lightened:", lightened.toHexString());   // Different result

/**
 * Desaturates the color by the specified amount
 * @param amount - Percentage to desaturate (0-100), default is 10
 * @returns new tinycolor instance (chainable)
 */
desaturate(amount?: number): tinycolor;

const vibrantRed = tinycolor("#ff0000");

const desaturated10 = vibrantRed.desaturate();     // Default 10%
const desaturated50 = vibrantRed.desaturate(50);   // 50% less saturated
const desaturated100 = vibrantRed.desaturate(100); // Completely desaturated

console.log(vibrantRed.toHexString());     // "#ff0000"
console.log(desaturated10.toHexString());  // "#f20d0d"
console.log(desaturated50.toHexString());  // "#bf4040"
console.log(desaturated100.toHexString()); // "#808080"

// Create muted color palette
const baseColors = ["#e74c3c", "#3498db", "#2ecc71"];
const mutedPalette = baseColors.map(color => 
  tinycolor(color).desaturate(30).toHexString()
);

/**
 * Saturates the color by the specified amount
 * @param amount - Percentage to saturate (0-100), default is 10
 * @returns new tinycolor instance (chainable)
 */
saturate(amount?: number): tinycolor;

const mutedBlue = tinycolor("#6699cc");

const saturated10 = mutedBlue.saturate();     // Default 10%
const saturated30 = mutedBlue.saturate(30);   // Much more vibrant
const saturated50 = mutedBlue.saturate(50);   // Very vibrant

console.log(mutedBlue.toHexString());    // "#6699cc"
console.log(saturated10.toHexString());  // "#5fa3d9"
console.log(saturated30.toHexString());  // "#4db8f2"
console.log(saturated50.toHexString());  // "#3dc7ff"

// Enhance dull colors
function enhanceColor(colorInput, boost = 20) {
  return tinycolor(colorInput).saturate(boost);
}

/**
 * Converts the color to grayscale (removes all saturation)
 * @returns new tinycolor instance (chainable)
 */
greyscale(): tinycolor;

const rainbow = [
  tinycolor("red"),
  tinycolor("orange"), 
  tinycolor("yellow"),
  tinycolor("green"),
  tinycolor("blue"),
  tinycolor("purple")
];

const grayscale = rainbow.map(color => color.greyscale());

console.log("Original:", rainbow.map(c => c.toHexString()));
console.log("Grayscale:", grayscale.map(c => c.toHexString()));

// Create grayscale version of image colors
function toGrayscale(color) {
  return tinycolor(color).greyscale().toHexString();
}

/**
 * Rotates the hue by the specified degrees
 * @param amount - Degrees to rotate hue (-360 to 360)
 * @returns new tinycolor instance (chainable)
 */
spin(amount: number): tinycolor;

const red = tinycolor("red");

const orange = red.spin(30);     // Rotate 30 degrees clockwise
const purple = red.spin(-60);    // Rotate 60 degrees counter-clockwise
const cyan = red.spin(180);      // Rotate 180 degrees (complement)

console.log(red.toHexString());    // "#ff0000"
console.log(orange.toHexString()); // "#ff8000"
console.log(purple.toHexString()); // "#8000ff"
console.log(cyan.toHexString());   // "#00ffff"

// Create color wheel
const baseHue = tinycolor("#ff0000");
const colorWheel = [];
for (let i = 0; i < 12; i++) {
  colorWheel.push(baseHue.spin(i * 30).toHexString());
}

// Animate hue rotation
function animateHue(startColor, steps = 12) {
  const colors = [];
  const step = 360 / steps;
  for (let i = 0; i < steps; i++) {
    colors.push(tinycolor(startColor).spin(i * step).toHexString());
  }
  return colors;
}

/**
 * Creates a new tinycolor instance with the same color values
 * @returns new tinycolor instance
 */
clone(): tinycolor;

const original = tinycolor("#3498db");
const copy = original.clone();

// Modify copy independently
const modified = copy.lighten(20).saturate(10);

console.log(original.toHexString()); // "#3498db" (unchanged)
console.log(modified.toHexString()); // "#5dade8" (modified copy)

// Safe color modifications
function safeModify(color, modifications) {
  let result = color.clone();
  
  if (modifications.lighten) result = result.lighten(modifications.lighten);
  if (modifications.darken) result = result.darken(modifications.darken);
  if (modifications.saturate) result = result.saturate(modifications.saturate);
  if (modifications.desaturate) result = result.desaturate(modifications.desaturate);
  if (modifications.spin) result = result.spin(modifications.spin);
  if (modifications.alpha !== undefined) result = result.setAlpha(modifications.alpha);
  
  return result;
}

// Create a sophisticated color transformation
const baseColor = tinycolor("#2c3e50");

const transformed = baseColor
  .lighten(15)        // Make it lighter
  .saturate(20)       // Make it more vibrant
  .spin(45)           // Shift hue
  .setAlpha(0.8);     // Add transparency

console.log(baseColor.toHexString());   // "#2c3e50"
console.log(transformed.toRgbString()); // "rgba(91, 142, 125, 0.8)"

// Create color variations
const primary = tinycolor("#e74c3c");
const variations = {
  light: primary.clone().lighten(20),
  dark: primary.clone().darken(20),
  muted: primary.clone().desaturate(30),
  bright: primary.clone().saturate(20).brighten(10),
  complement: primary.clone().spin(180),
  transparent: primary.clone().setAlpha(0.3)
};

function createTheme(primaryColor, options = {}) {
  const base = tinycolor(primaryColor);
  const {
    lightAmount = 20,
    darkAmount = 20,
    mutedAmount = 30,
    accentSpin = 180
  } = options;
  
  return {
    primary: base.toHexString(),
    light: base.clone().lighten(lightAmount).toHexString(),
    dark: base.clone().darken(darkAmount).toHexString(),
    muted: base.clone().desaturate(mutedAmount).toHexString(),
    accent: base.clone().spin(accentSpin).toHexString(),
    success: base.clone().spin(120).saturate(10).toHexString(),
    warning: base.clone().spin(45).saturate(20).toHexString(),
    error: base.clone().spin(-30).saturate(15).toHexString()
  };
}

const blueTheme = createTheme("#3498db");
const greenTheme = createTheme("#2ecc71");

function createColorSequence(startColor, endColor, steps = 10) {
  const start = tinycolor(startColor);
  const end = tinycolor(endColor);
  
  const sequence = [];
  for (let i = 0; i <= steps; i++) {
    const progress = i / steps;
    const mixed = tinycolor.mix(start, end, progress * 100);
    sequence.push(mixed.toHexString());
  }
  
  return sequence;
}

// Pulse effect
function createPulse(baseColor, intensity = 30, steps = 20) {
  const base = tinycolor(baseColor);
  const bright = base.clone().lighten(intensity);
  
  const sequence = [];
  for (let i = 0; i <= steps; i++) {
    const progress = Math.sin((i / steps) * Math.PI * 2);
    const amount = (progress + 1) / 2 * intensity;
    sequence.push(base.clone().lighten(amount).toHexString());
  }
  
  return sequence;
}