Theme-ui: Referencing theme colors in border and boxShadow

[blummis]

I expected I could use theme colors like this, but primary is not replaced with the theme color:

import styled from '@emotion/styled';
import { Box, css } from 'theme-ui';

const Box1 = styled(Box)(css({
  borderBottom: '4px solid primary', // results in '4px solid primary'
}));

const Box2 = styled(Box)(css({
  boxShadow: '0 0 0 4px primary',
}));

Border bottom color can be achieved like this (but it took a while to realize that borderColor must be defined after borderBottom in order it to work):

const Box3 = styled(Box)(css({
  borderBottom: '4px solid', // results in 'border-bottom-color: initial';
  borderColor: 'primary', // overrides border colors with theme color
}));

For boxShadow, on the other hand, there isn't a separate property to define the color in.

It would be really handy being able to use theme colors inside border and boxShadow definitions.

[jxnblk]

Yeah, for border (and other CSS) properties, I generally recommend using the regular (not shorthand) properties (borderWidth, borderStyle, and borderColor) to avoid issues with the shorthand syntax (even when writing vanilla CSS).

As for boxShadow, since @styled-system/css doesn't currently do any string parsing, it won't pick up values within the boxShadow string value. You can use a function for a property value like so:

boxShadow: theme => `0 0 0 4px ${theme.colors.primary}`

For reference, here is a list of the properties that pick up values from the theme: https://styled-system.com/css/#theme-keys

[blummis]

Thanks! Using functions for property values is a nice feature. I couldn't find it from the docs. I think it might deserve a highlight somewhere.

Btw, have you considered adding borderBottomColor, borderBottomStyle, borderBottomWidth etc as they could add flexibility?

[jxnblk]

I've added a section to describe using functional values here: https://theme-ui.com/sx-prop/#functional-values

As far as the border properties go, at the very least it could make sense to cover the color properties in this dictionary: https://github.com/styled-system/styled-system/blob/master/packages/css/src/index.js#L45 – if you wanna take a stab at a PR, go for it, but closing this issue since it sounds like the functional values work for now

[trm217]

@jxnblk could you perhaps consider to add parsing of color variables inside the boxShadow property? While regarding the bordercolor it is not necessary due to the border-color property, in boxShadow it would be very nice.