calibrate dropdown badge colors
This commit is contained in:
parent
4099a23d37
commit
1f624728c6
1 changed files with 9 additions and 9 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue