Building design system with styled-components and styled-system III

const colors = {
  red: "#F44336",
  blue: "green"
};
export default { colors };

This looks very simple because it is simple. The keys inside colors object resolve to it’s values inside our components. So, to be clear I created two colors one is red and another one is blue. The red color has a different shade of red than standard one, but the blue one has value of green which might seem odd. This for explaining that there is no rule for having the key similar to value. If in your project if you try to use blue, it will actually resolve to green. Some people prefer to use keys like primary, secondary etc. Some like to give them names. It’s your choice ultimately. Now I am going to use a simple Text component ( you already know how to create this using styled system).

<Text color="blue">This is text</Text>;

The color blue is ultimately resolved to green as defined in theme. This example is for colors you might want to setup margins, paddings, fontSizes, layouts, borders, etc. To understand which of key to use for each check this table. Remember the keys inside colors doesn’t matter but the keys inside the final object matters. The themeProvider will look for predefined keys to add it to theme. So, If you want to have custom colors, you should provide colors object to theme, if you want custom font families, you should provide fonts object to theme. The keys inside those doesn’t matter.

Note: The theme values are resolved automatically when you are using styled system, however you want them to use it with styled-components you have to handle it yourself.

responsiveness:

It’s important in projects that your app or website is responsive across all devices. To achieve this your components must be able to adapt to the screen sizes and change styles based on that. With CSS we often do this through media queries. It’s similar here, but you just need to make some tweaks. Let’s make our Text component responsive. By default breakpoints are set at 3 positions ‘40em‘, ‘52em‘, ‘64em‘. You can change this by setting your own breakpoints in theme object. You can read about it here.

<Text fontSize={[4, 6, 7]}>Hello World</Text>

The font-sizes 4, 6, 7 are being resolved from theme object. You can look them up here. Now our text component is responsive. As the screen size increases the fontSize increases and vice versa. It’s up-to you to decide the best font-size based on your design and branding.