Shadows

box-shadow, text-shadow

Theme-ui defines a shadows object, the values of which are made available to the box-shadow and the text-shadow CSS properties. However box-shadow takes a spread-radius where text-shadow does not. Therefore this theme defines an object for each so that a box-shadow with a spread-radius defined is not accidently applied to a text-shadow property.

box-shadow

text-shadow

Theme

theme.shadows

json
{
  "text": {
    "0": "none",
    "1": "0 1px 2px rgba(60,64,67,0.302), 0 1px 3px rgba(60,64,67,0.149)"
  },
  "box": {
    "0": "none",
    "1": "0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149)"
  }
}