Pseudo-Classes and the Theme Specification

[pjaws]

Just want to start out by saying thank you for developing this, as it's made my life much easier as a developer.

I'm wondering if there is current, undocumented functionality for pseudo-classes or if plans exist to implement this?

For example:

// theme.js
{
  buttons: {
    bg: 'blue',
    color: 'white',
    hover: {
      bg: 'white',
      color: 'blue',
    }
  }
}

Without this ability, the variants feature really loses a lot of its usefulness, since I can't entirely define variant styles inside the theme and have them "just work". Instead, I have to do something like: background: ${({ theme, variant }) => theme.buttons[variant].hoverBg} for all of my styles.

Hopefully this makes sense. I'm still figuring out how to use this theme spec and styled-system to their fullest, so let me know if I am missing something!

[jxnblk]

In as far as the Theme UI implementation goes and sort of implied by this spec, defining pseudoclasses in variants is absolutely possible. E.g.:

{
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      ':hover': {
        bg: 'secondary',
      }   
    }   
  }
}

[pjaws]

@jxnblk Thank you for this response! Is this documented anywhere? I've been using various tools in this little "family" for a couple months now, and it's not really clear that this is possible or what the syntax to do it is.

[jxnblk]

Emotion documents this, but this seems like a gap in our current documentation. I'm working on some updates that should make this more clear in the https://theme-ui.com/sx-prop/ docs, so thanks for bringing this up!

[cmavelis]

Hey, just picking up theme-ui -- couldn't see any mention of it in your docs still. Am I mistaken?

[fwextensions]

I don't know about a year ago, but as of 2022-05-30, there's a mention on that sx-prop page:

Though I think it could use its own section.

I got here looking for support for the ::marker pseudo-element. Using a literal number to specify the fontSize produces sizes that aren't listed in the theme. So something strange is going on with that one pseudo-element.