Theme specification and using theme
The System Props theme object is intended to be a general purpose format for storing design system style values and scales. The objects shape is based on the System UI Theme Specification.
The following is a list of theme object keys and their corresponding CSS properties. This list may be non-exhaustive.
| Theme Key | CSS Properties |
|---|---|
space |
margin, padding, top, right, bottom, left, grid-gap, grid-column-gap, grid-row-gap |
fontSizes |
font-size |
colors |
color, background-color, border-color |
fonts |
font-family |
fontWeights |
font-weight |
lineHeights |
line-height |
letterSpacings |
letter-spacing |
sizes |
width, height, min-width, max-width, min-height, max-height |
borders |
border, border-top, border-right, border-bottom, border-left |
borderWidths |
border-width |
borderStyles |
border-style |
radii |
border-radius |
shadows |
box-shadow, text-shadow |
zIndices |
z-index |