Compared to Styled System
What's different about System Props
Pseudo Selector Props
Inspired by Chakra UI, System Props supports pseudo selectors as props, which can be configured via createSystem. This takes your system props to the next level by giving you the ability to style the element at different states, such as hover, focus, disabled, and more.
Shorthand Property Support
System Props will parse shorthand properties, such as margin, padding, border, and boxShadow for the theme scales used within it. For example, to define a border width, style, and color (using a theme color) with Styled System, you had to use multiple props:
System Props will parse the border shorthand for theme theme color value:
Prefix design tokens with $
System Props, like Styled System, supports numeric scales in theme. For example, theme.space is frequently defined as an array, like so:
System Props will parse 3 as theme.space[3], which yields 16 (or 16px). This can be confusing since you might expect marginLeft={3} to yield 3px.
To eliminate this confusion, System Props supports (and recommends!) prefixing theme values with $ to clarify when you're using theme tokens. This is optional, and theme tokens can be referenced without them.
Quick Access to Theme with Function Value
If at any time you need access to the entire theme object, every system prop can take a value as a function where its argument is the theme:
Written in TypeScript
Get the confidence of type saftey!
Strict Mode
Particularly useful for design systems. You may prefer that exclusively theme values are supported with system props. Enabling the strict confiugration option in createSystem to accomplish this.