Additional design revisions to dark mode theme (#43634)

This commit is contained in:
Luke Heath
2026-04-23 10:13:21 -05:00
committed by GitHub
parent bf3a12a960
commit 255be3fd80
38 changed files with 372 additions and 161 deletions
@@ -160,7 +160,7 @@ export const generateCustomDropdownStyles = (
const buttonVariantContainer = {
borderRadius: "6px",
"&:active": {
backgroundColor: "rgba(25, 33, 71, 0.05)",
backgroundColor: COLORS["ui-fleet-black-5"],
},
height: "38px",
};
@@ -190,7 +190,7 @@ export const generateCustomDropdownStyles = (
stroke: COLORS["ui-fleet-black-75"],
},
"&:hover": {
backgroundColor: "rgba(25, 33, 71, 0.05)",
backgroundColor: COLORS["ui-fleet-black-5"],
boxShadow: "none",
".dropdown-wrapper__placeholder": {
color: COLORS["ui-fleet-black-75-over"],
@@ -199,8 +199,8 @@ export const generateCustomDropdownStyles = (
stroke: COLORS["ui-fleet-black-75-over"],
},
},
".react-select__control--is-focused": {
backgroundColor: "rgba(25, 33, 71, 0.05)",
...(state.isFocused && {
backgroundColor: COLORS["ui-fleet-black-5"],
boxShadow: "none",
".dropdown-wrapper__placeholder": {
color: COLORS["ui-fleet-black-75-down"],
@@ -208,19 +208,15 @@ export const generateCustomDropdownStyles = (
".dropdown-wrapper__indicator path": {
stroke: COLORS["ui-fleet-black-75-down"],
},
},
...(state.isFocused && {
backgroundColor: "rgba(25, 33, 71, 0.05)",
}),
...(state.menuIsOpen && {
backgroundColor: COLORS["ui-fleet-black-5"],
".dropdown-wrapper__placeholder": {
color: COLORS["ui-fleet-black-75-down"],
},
".dropdown-wrapper__indicator path": {
stroke: COLORS["ui-fleet-black-75-down"],
},
}),
// TODO: Figure out a way to apply separate &:focus-visible styling
// Currently only relying on &:focus styling for tabbing through app
...(state.menuIsOpen && {
".dropdown-wrapper__indicator svg": {
transform: "rotate(180deg)",
transition: "transform 0.25s ease",