Design tokens are values used to style the system and your product. In Arcade, we expose tokens for units, fonts, colors and viewport sizes. To keep the tokens available for use in the product without any additional runtime setup, we use design tokens as css variables.
All css variables start with an --arcade prefix to avoid conflicts with external variables.
Arcade themes support dark mode on the token level, so you won't need to tweak components behavior for every component. To get access to the token values, first you need to wrap your application with Arcade provider and pass theme and mode you would like to use.
This provider gives you access to theming utilities inside your application. For instance, you can switch color mode with useColorMode hook.
All colors exposed from Arcade are not just abstract color palette values. Instead, we're connecting our color tokens to specific component-agnostic UI roles: foreground, border and background. These roles let the token values work for components light and dark mode without adding any additional logic while still staying accessible.
Color token names follow the same structure to keep the naming scalable. Let's take a look at a couple of examples:
By combining these value, we get the following tokens:
There are two colors that preserve their values in both light and dark mode so that they can be used on top of the media content, like images or videos:
Units are values to let you consistently define elements sizes or spacing between them. We use a grid with 4px baseline by default and expose a number multiplied values for quick use.
If you need a custom unit, using the same grid baseline, you can get it by using css calc:
For the radius, we expose 3 tokens that can be used based on the component size:
Same as for radius we expose 3 token for border width:
Typography in Arcade is responsive based on the viewport sizes. Since that requires defining a group of variables for css properites and CSS doesn't support mixins out-of-the-box, we recommend using Text component for the typography definitions.
In Arcade, we use mobile-first CSS approach. This means that we treat the smallest viewport size as a default one. Other viewports should be used to override mobile behaviour.
There is no native support for custom media queries in CSS, but we expose multiple media queries by using PostCSS custom media plugin.
We still export small viewport media-query in case you need to override something specifically for mobile screen.
Since all variables are defined in CSS, you don't have to call any utilities or hooks to get access to the tokens. Instead, you can use them directly even in your inline styles or css-in-js code.