Use pseudo-classing within `system`

Author: gausieCreated Mar 24, 2020Updated Nov 9, 2022

Labelsenhancement

It would be nice to be able to use system to produce pseudo-classed styling. There are different ways you could do this, perhaps:

javascript

system({
  colorHover: { property: "color", scale: "colors", pseudo: "hover" },
  bgHover: { property: "backgroundColor", scale: "colors", pseudo: "hover" },
  borderColorHover: { property: "borderColor", scale: "colors", pseudo: "hover" }
})

(or perhaps using object or dot notation in the property properties)

becoming

css

&:hover {
  color: <colorHover prop>;
  background: <bgHover prop>;
  borderColor: <borderColorHover prop>;
}

Source: styled-system/styled-system

View original on GitHub View discussion on GitHub