@import (reference) "./func.less";

@hue-0: spin(@primary-color, -(hue(@primary-color)));
@hue-10: spin(@hue-0, 10);
@hue-20: spin(@hue-0, 20);
@hue-30: spin(@hue-0, 30);
@hue-40: spin(@hue-0, 40);
@hue-50: spin(@hue-0, 50);
@hue-60: spin(@hue-0, 60);
@hue-90: spin(@hue-0, 90);
@hue-120: spin(@hue-0, 120);
@hue-150: spin(@hue-0, 150);
@hue-180: spin(@hue-0, 180);
@hue-210: spin(@hue-0, 210);
@hue-240: spin(@hue-0, 240);
@hue-270: spin(@hue-0, 270);
@hue-300: spin(@hue-0, 300);
@hue-330: spin(@hue-0, 330);

@red: @hue-0;
@orange: @hue-30;
@yellow: @hue-60;
@green: @hue-120;
@cyan: @hue-180;
@azure: @hue-210;
@purple: @hue-270;
@pink: @hue-330;

.common() {
	.shades(~"red", @red);
	.shades(~"orange", @orange);
	.shades(~"yellow", @yellow);
	.shades(~"green", @green);
	.shades(~"cyan", @cyan);
	.shades(~"azure", @azure);
	.shades(~"purple", @purple);
	.shades(~"pink", @pink);

	// btn
	--btn-color: var(--text-default);
	--btn-color-primary: var(--primary-contrast);
	--btn-color-complementary: var(--complementary-contrast);
	--btn-color-muted: var(--primary-muted-color);
	--btn-color-text: var(--text-emphasis);
	--btn-color-disabled: var(--text-disabled);

	--btn-bg-disabled: var(--bg-disabled);

	--btn-bg-primary: var(--primary);
	--btn-bg-primary-hover: var(--primary-hover);
	--btn-bg-primary-active: var(--primary-active);

	--btn-bg-complementary: var(--complementary);
	--btn-bg-complementary-hover: var(--complementary-hover);
	--btn-bg-complementary-active: var(--complementary-active);

	--btn-bg-muted: var(--primary-muted);
	--btn-bg-muted-hover: var(--primary-muted-hover);
	--btn-bg-muted-active: var(--primary-muted-active);

	--btn-border: var(--border-default);
	--btn-border-hover: var(--border-hover);
	--btn-border-active: var(--border-active);
	--btn-border-disabled: var(--border-disabled);

	// input
	--input-color: var(--text-default);
	--input-color-placeholder: var(--text-placeholder);
	--input-color-disabled: var(--text-disabled);

	--input-bg: var(--bg-default);
	--input-bg-fix: var(--bg-secondary);
	--input-bg-disabled: var(--bg-disabled);

	--input-border: var(--border-default);
	--input-border-hover: var(--border-hover);
	--input-border-active: var(--primary);
	--input-border-disabled: var(--border-disabled);

	// alert
	--alert-color: var(--text-default);
	--alert-color-primary: var(--primary-muted-color);

	--alert-bg: var(--bg-secondary);
	--alert-bg-primary: var(--primary-muted);

	--alert-border: var(--border-secondary);
	--alert-border-primary: var(--primary-muted-hover);

	// clear
	--clear-bg: var(--gray-18);
}