cyp/app/css/variables.less

@breakpoint-menu: 480px;

cyp-app {
	--icon-size: 24px;
	--icon-spacing: 4px;
	--primary: rgb(var(--primary-raw));
	--primary-tint: rgba(var(--primary-raw), 0.1);
	--box-shadow: 0 0 3px #000;
	--border-width: 4px;
}

.light() {
	--fg: #333;
	--bg: #f0f0f0;
	--bg-alt: #e0e0e0;
	--text-shadow: none;
}

.dark() {
	--fg: #f0f0f0;
	--bg: #333;
	--bg-alt: #444;
	--text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

cyp-app[theme=light] { .light(); }
cyp-app[theme=dark] { .dark(); }

@media (prefers-color-scheme: dark) {
	cyp-app[theme=auto] { .dark(); }
}

@media (prefers-color-scheme: light) {
	cyp-app[theme=auto] { .light(); }
}

@media (max-width: 640px), (max-height:640px) {
	cyp-app[theme] {
		--text-shadow: none;
	}
}

cyp-app[color=dodgerblue] {
	--primary-raw: 30, 144, 255;
}

cyp-app[color=darkorange] {
	--primary-raw: 255, 140, 0;
}

cyp-app[color=limegreen] {
	--primary-raw: 50, 205, 50;
}