calibrate dropdown badge colors

This commit is contained in:
Brent Schroeter 2026-03-12 18:25:13 +00:00
parent 4099a23d37
commit 1f624728c6

View file

@ -428,9 +428,9 @@
/* ======== Data Display ======== */ /* ======== Data Display ======== */
.dropdown-option-badge { .dropdown-option-badge {
--badge-color-base: #f99; --badge-color-base: #f33;
--badge-hue-rot: 0; --badge-hue-rot: 0;
--badge-background: oklch(from var(--badge-color-base) l c calc(h + var(--badge-hue-rot))); --badge-background: oklch(from var(--badge-color-base) calc(1 - (1 - l) * 0.5) c calc(h + var(--badge-hue-rot)));
background: var(--badge-background); background: var(--badge-background);
border-radius: 999px; border-radius: 999px;
@ -443,31 +443,31 @@
} }
&.dropdown-option-badge--red { &.dropdown-option-badge--red {
--badge-hue-rot: 50; --badge-hue-rot: 0;
} }
&.dropdown-option-badge--orange { &.dropdown-option-badge--orange {
--badge-hue-rot: 50; --badge-hue-rot: 45;
} }
&.dropdown-option-badge--yellow { &.dropdown-option-badge--yellow {
--badge-hue-rot: 100; --badge-background: oklch(from var(--badge-color-base) calc(1 - (1 - l) * 0.3) c calc(h + 75));
} }
&.dropdown-option-badge--green { &.dropdown-option-badge--green {
--badge-hue-rot: 150; --badge-hue-rot: 135;
} }
&.dropdown-option-badge--blue { &.dropdown-option-badge--blue {
--badge-hue-rot: 200; --badge-hue-rot: 215;
} }
&.dropdown-option-badge--indigo { &.dropdown-option-badge--indigo {
--badge-hue-rot: 250; --badge-hue-rot: 240;
} }
&.dropdown-option-badge--violet { &.dropdown-option-badge--violet {
--badge-hue-rot: 300; --badge-hue-rot: 270;
} }
button { button {