Primer React components come with built-in access to our Primer theme. The theme file contains an object which holds values for common variables such as color, fonts, box shadows, and more. Our theme file pulls many of its color and typography values from primer-primitives.
Many of our theme keys correspond to system props on our components. For example, if you'd like to set the max width on a <Box> set the maxWidth prop to medium: <Box maxWidth='medium'>
In the background, styled-system does the work of finding the medium value from maxWidth key in the theme file and applying the corresponding CSS.