The first thing we need to do when we start a new project is to define all fonts, font sizes, colors, and spacing values, we’re going to use; because we want to make sure that our user interface is consistent across the project. These values are called design tokens or a theme, and they are the single source of truth for our “design decisions”.
In this lesson we’ll create a theme file (
theme.js) with constants for colors, fonts, font sizes, spacing, border radii, etc., so these values are available to our components.
In a real project, we’ll need to talk to our designer, and probably do a design audit first, but for simplicity, we’ll pretend that we’ve done that before, and already know all the values.
We’ll use following libraries:
You can either use this lesson’s Git repository or install them manually in your project:
npm install styled-components
Useful links and documentation: