Bain Logo

Theming

Jump to Props

Change the colors, the typography and much more.

All content and components in the ADAPT Design System are managed centrally in a 'theme'. For designers, this is in the Figma library. For developers, in a JavaScript Object referred to as the theme object. The theme object is where developers can define an application's color palette, type scale, font stacks, breakpoints, border radius values, and more.

This Button – with its variant set to 'primary' – is reading from the colors.primary part of the theme.

Theming with the ADAPT Design System is based on the Styled System Theme Specification. This is an emerging specification but we aim to stick closely to it for now.

Table of Contents:

Basic Setup: Using the default theme

If you don't need to customise the theme, just wrap your app in the AdaptThemeProvider and all components will have access to the default visual style. This is the recommended and default setup guideline.

Now you'll see the Button component with its colors referencing the colors.primary value of the theme.

Customizing or extending the default theme

If you need to either customize the theme or add new properties to be accessed via style props, use the themeOverrides prop on the theme provider.

In the below example, we're changing the primary/brand color from Bain red to Hot Pink.

Note that we aren't changing the button's color to pink; we're changing the primary color of the theme to pink so that the Primary Button now reads from a different color value.

Default Theme Object Reference

Colors

In most cases, you'll probably want to change the primary color of your UI. By default the ADAPT Design System's primary color may not be desirable for all products, in which case you'd want to change the primary color to something else. See the above example for this.

Adding Colors

You should avoid editing the values of colors in the default theme but you can add new colors that may be be missing to the theme.colors object in your theme override.

By default these colors can be referenced by the color, borderColor, backgroundColor, fill and stroke style props on any styled-system-based component.

Color Reference from the Theme Object

💡Interested in Dark Mode?

Typography

To manage typographical options, the theme object supports these values: fonts (font families), fontSizes, fontWeights, lineHeights, letterSpacings.

If a designer's mockups contain values outside of these in the theme, have a conversation about why.

Font Reference from the Theme Object

Breakpoints

The theme object contains default breakpoints that are used for media queries used for responsive styles:

You don't often need to write media quaries to access these breakpoints. Instead, you use responsive styles. See the below example of how to use them:

I will change size as the screen width changes.

Changing the default breakpoints

To change the breakpoints, add a breakpoints array to your theme override. These values will be used to generate mobile-first (i.e. min-width) media queries, which can then be used to apply responsive styles.

Note that the above example also reflects the theme default breakpoints.

Read more on the styled-system docs

Spacing

The ADAPT Design System is built on the 8pt Grid System. Meaning all spacing should be a multiple of 8. The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom styles.

The above padding references theme.space[3]. Try it out by changing the values

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy