Color Functions

/**
 * Mixes a color with white
 * @param $color - The base color to tint
 * @param $percent - The amount of white to mix in (percentage)
 * @returns color - The tinted color result
 */
@function tint($color, $percent);

.light-element {
  background-color: tint(#6ecaa6, 40%);
  // Result: #a8dfc9
}

.subtle-background {
  background-color: tint(#3498db, 20%);
  // Creates a light blue variant
}

/**
 * Mixes a color with black
 * @param $color - The base color to shade
 * @param $percent - The amount of black to mix in (percentage)
 * @returns color - The shaded color result
 */
@function shade($color, $percent);

.dark-element {
  background-color: shade(#ffbb52, 60%);
  // Result: #664a20
}

.hover-state {
  background-color: shade(#e74c3c, 15%);
  // Creates a darker red for hover effects
}

/**
 * Switches between two colors based on contrast to another color
 * @param $base-color - The color to evaluate lightness against
 * @param $dark-color - Color output when base is light (optional, uses global setting)
 * @param $light-color - Color output when base is dark (optional, uses global setting)
 * @returns color - Either the dark or light color based on contrast
 */
@function contrast-switch($base-color, $dark-color: null, $light-color: null);

.dynamic-button {
  background-color: #3498db;
  color: contrast-switch(#3498db);
  // Automatically chooses white or black text for best contrast
}

.brand-button {
  background-color: var(--brand-color);
  color: contrast-switch(var(--brand-color), #2c3e50, #ecf0f1);
  // Custom dark and light colors for contrast switching
}

// Configure global contrast colors
$bourbon: (
  "contrast-switch-dark-color": #2c3e50,
  "contrast-switch-light-color": #ecf0f1,
);

// This will throw an error
.invalid {
  color: tint("not-a-color", 50%);
  // Error: "`not-a-color` is not a valid color for the `$color` argument in the `tint` mixin."
}