@function tint($color, $percentage) {
	@return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
	@return mix(black, $color, $percentage);
}

@mixin color-variants($name, $color) {
	#{'--color-'+$name+'-rgb'}: red($color), green($color), blue($color);
	#{'--color-'+$name+'-lucid'}: tint($color, 85%);
	#{'--color-'+$name+'-tinted'}: tint($color, 30%);
	#{'--color-'+$name+'-tint'}: tint($color, 15%);
	#{'--color-'+$name}: $color;
	#{'--color-'+$name+'-shade'}: shade($color, 15%);
	#{'--color-'+$name+'-shaded'}: shade($color, 30%);
	#{'--color-'+$name+'-dark'}: shade($color, 50%);
}

@mixin colors-classes($name) {
	#{'.color-' + $name} {
		color: #{'var(--color-' + $name + ')'} !important;
	}

	#{'.color-' + $name + '-tint'} {
		color: #{'var(--color-' + $name + '-tint)'} !important;
	}

	#{'.color-' + $name + '-shade'} {
		color: #{'var(--color-' + $name + '-shade)'} !important;
	}

	#{'.background-' + $name} {
		background-color: #{'var(--color-' + $name + ')'} !important;
	}

	#{'.background-' + $name + '-tint'} {
		background-color: #{'var(--color-' + $name + '-tint)'} !important;
	}

	#{'.background-' + $name + '-shade'} {
		background-color: #{'var(--color-' + $name + '-shade)'} !important;
	}
}