Theme-ui: Individual border properties should reference theme values

[dburles]

I'd be happy to create a PR for this, if it makes sense. For example, this works just fine:

borderWidth: 'thin',
borderStyle: 'solid',
borderColor: 'primary',

however, this will result in the literal values winding up in the CSS:

borderBottomWidth: 'thin',
borderBottomStyle: 'solid',
borderBottomColor: 'primary',

I think it would make sense for the API to support all possible values:

X = Top, Bottom, Left, Right

borderXWidth
borderXColor
borderXStyle

X = Top, Bottom

borderXLeftRadius
borderXRightRadius

[dburles]

PR https://github.com/styled-system/styled-system/pull/671 :)

[kutyel]

In my case, when I do the following: border: '2px solid muted', where muted is a theme variable, it does not resolve it correctly, also, if I try borderBottomColor: 'muted' it does not work either, is this the same issue? :)

[dburles]

Yeah, that's right it won't resolve anything inside the shorthand string. You can either do something like:

border: theme => `${theme.borderWidths.thin}px ${theme.borderStyles.thick} ${theme.colors.muted}`

(which kinda sucks) or, a mix (which I think still has a bug if you order them incorrectly) such as:

border: theme => `${theme.borderWidths.thin}px ${theme.borderStyles.thick}`,
borderColor: 'muted'

or you can apply them individually:

borderWidth: 'thin',
borderStyle: 'thick',
borderColor: 'muted',

but it won't support borderBottomColor, which the PR addresses

[kutyel]

Awesome, that did the trick in the meantime, thanks! 🙌🏼

[jxnblk]

which I think still has a bug if you order them incorrectly

This isn’t a bug, this is due to the cascade and how CSS is designed to work FWIW

[dburles]

@jxnblk Cool thanks for clarifying, couldn't remember the exact details around it!

[dburles]

This is now supported in the latest version of @styled-system/css 🎉 run npm i theme-ui to update the dependency!

[kutyel]

Now, this works:

  borderBottomWidth: '2px',
  borderBottomStyle: 'solid',
  borderBottomColor: 'muted',

but this still does not 😟 borderBottom: '2px solid muted'

[dburles]

@kutyel think about how the values are resolved, borderBottom references borders. borderBottomColor references color, borderBottomWidth references borderWidths. Passing in a string containing values that need to be resolved across different parts of the global theme object won't work. That's why for shorthand you need to provide a function to reference the theme:

borderBottom: theme => `${theme.borderWidths.thin}px ${theme.borderStyles.thick} ${theme.colors.muted}`

[jxnblk]

@kutyel see also #81