Theming

In this guide, we will cover the basics of theming Base Web components. We'll go over the following topics:

Benefits

The theming system that ships with Base Web provides developers with a few useful features:

Centralized Customization

The theme object allows you to configure system-wide styling values in one place. All of our components reference the theme object when assigning style values. This removes the need for certain types of styling overrides and frees you from maintaining custom versions of components simply because your interface requires a different color palette or typography scale.

Light and Dark Themes

Because our theme is provided to components through React’s context system, we can dynamically change the theme at any time. The most common use case is toggling between Base Web’s light and dark themes, but there are many other possibilities. For example, you could introduce controls for modifying layout density or you could let users customize your interface in real-time.

Access to Design Tokens

The theme object is easily accessible when working with Base Web’s various styling utilities (including useStyletron, styled, withStyle, and Block). This makes it easy to use consistent values when extending Base components or styling your components. Using consistent design tokens results in faster development, smaller bundle sizes, and better-looking interfaces.

Setup

Even if you are not interested in creating a custom theme, we require that you select a theme as part of Base Web’s boilerplate setup. Our components require a theme to assign styles.

The theme object itself is nothing special. It is just an object with specific properties (a specific “shape”) that can be passed to our ThemeProvider or BaseProvider. Base Web components will then reference this object when assigning stylistic values such as color or font size.

Default themes

We provide two themes out of the box, LightTheme and DarkTheme, which style components in light & dark variants. If you don’t want to customize Base Web, you can use either of these ready-to-use themes as-is:

import React from 'react';
import {LightTheme, ThemeProvider} from 'baseui';
export default function App() {
return (
<ThemeProvider theme={LightTheme}>
I can use themed Base Web components here!
</ThemeProvider>
);
}

Toggling light and dark

If you want to allow for toggling between the two themes at runtime, you need to allocate some state for determining which theme is passed to ThemeProvider.

import React from 'react';
import {LightTheme, DarkTheme, ThemeProvider} from 'baseui';
import {Button} from 'baseui/button';
const THEME = {
light: 'light',
dark: 'dark',
};
export default function App() {
const [theme, setTheme] = React.useState(THEME.light);
return (
<ThemeProvider theme={theme === THEME.light ? LightTheme : DarkTheme}>
<Button
onClick={() =>
setTheme(theme === THEME.light ? THEME.dark : THEME.light)
}
>
Toggle light/dark theme!
</Button>
</ThemeProvider>
);
}

BaseProvider

While ThemeProvider will provide your theme object to any descendent Base Web components, we recommend using BaseProvider at the root of your application. BaseProvider combines the functionality of the ThemeProvider with our LayersManager utility. You should only use ThemeProvider directly if you need to provide a separate theme to a subtree of your application.

import React from 'react';
import {BaseProvider, LightTheme} from 'baseui';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';
const engine = new Styletron();
export default function App() {
return (
<StyletronProvider value={engine}>
<BaseProvider theme={LightTheme}>
I can use themed Base Web stuff here!
</BaseProvider>
</StyletronProvider>
);
}

This is all the setup required to use our default themes (including all of the Styletron boilerplate). Now let’s look at how you might configure Base Web with a custom theme.

A Custom Theme

You could start writing a theme object from scratch if you were so inclined. We provide Flow and Typescript definitions for the theme object so that you won't miss any of the required theme properties. Another approach might be to take one of our default theme objects and start reassigning properties to your desired values.

However, before you go down either of these roads, you should know that Base Web exports a handy factory function for creating theme objects.

createTheme

As you might expect, createTheme is a factory function for Base Web compliant theme objects. We provide it as a utility for you to quickly create a custom theme.

import {createTheme} from 'baseui';
const theme = createTheme(/* primitives */, /* overrides */);

primitives

Our theme object has a lot of properties. Most of these properties are assigned to a subset of reoccurring values. We call these reoccurring values, theme building primitives. Primitives are made up mostly of colors, (primary, accent, etc), gradients of those colors (primary100, primary200, etc) as well as a primaryFontFamily. To see the exact shape for primitives, reference the Flow or Typescript definitions.

These are passed as the first argument to createTheme.

import {createTheme} from 'baseui';
const primitives = {
accent: '#F127E4', // hot pink
accent50: '#FDEDFC',
accent100: '#FCD3F9',
accent200: '#F89FF3',
accent300: '#F45AEA',
accent400: '#F127E4',
accent500: '#B71DAD',
accent600: '#901788',
accent700: '#600F5B',
};
const theme = createTheme(primitives);

createTheme will use these primitive values to fill out all of the required properties on your theme object. Note, you don't have to assign every primitive right away. The primitives you pass into createTheme will override our default primitives so you can gradually build up your theme.

Once you've passed some primitives in, createTheme maps this small set of primitives to a much larger set of theme properties in a sensible manner.

But what if the default mapping (of primitives to theme properties) is not quite what you want?

overrides

The second parameter for createTheme is an overrides object.

The overrides object will be deep-merged with the initial result of mapping primitives to all of the theme properties. overrides is just a convenient shortcut for deep-merging assignments onto your theme object.

import {createTheme} from 'baseui';
const primitives = {
accent: '#F127E4', // hot pink
accent50: '#FDEDFC',
accent100: '#FCD3F9',
accent200: '#F89FF3',
accent300: '#F45AEA',
accent400: '#F127E4',
accent500: '#B71DAD',
accent600: '#901788',
accent700: '#600F5B',
};
const overrides = {
colors: {
buttonSecondaryFill: primitives.accent100,
buttonSecondaryText: primitives.accent,
buttonSecondaryHover: primitives.accent200,
buttonSecondaryActive: primitives.accent300,
buttonSecondarySelectedFill: primitives.accent200,
buttonSecondarySelectedText: primitives.accent,
buttonSecondarySpinnerForeground: primitives.accent700,
buttonSecondarySpinnerBackground: primitives.accent300,
},
};
const theme = createTheme(primitives, overrides);

In this example, we first reassign the accent color on our theme primitives to hot pink. Then we use overrides to re-map the secondary button colors to use our hot pink accent colors rather than the default primary colors.

createDarkTheme

One of the main reasons to have a dynamic theme is to toggle your app between light and dark modes. createTheme will by default map primitives to theme colors in a way suited to light themes. If you want to create a custom theme on top of our dark theme you can instead use the createDarkTheme function.

import {createDarkTheme} from 'baseui';
const primitives = {
accent: '#F127E4', // hot pink
accent50: '#FDEDFC',
accent100: '#FCD3F9',
accent200: '#F89FF3',
accent300: '#F45AEA',
accent400: '#F127E4',
accent500: '#B71DAD',
accent600: '#901788',
accent700: '#600F5B',
};
const darkTheme = createDarkTheme(primitives);

This works exactly the same way as createTheme, but createDarkTheme will map all of your primitives to theme properties in a way better suited to dark themes. Note, createDarkTheme also accepts an optional overrides object as the second argument.

import {createDarkTheme} from 'baseui';
const primitives = {
accent: '#F127E4', // hot pink
accent50: '#FDEDFC',
accent100: '#FCD3F9',
accent200: '#F89FF3',
accent300: '#F45AEA',
accent400: '#F127E4',
accent500: '#B71DAD',
accent600: '#901788',
accent700: '#600F5B',
};
const overrides = {
colors: {
buttonSecondaryFill: primitives.accent100,
buttonSecondaryText: primitives.accent,
buttonSecondaryHover: primitives.accent200,
buttonSecondaryActive: primitives.accent300,
buttonSecondarySelectedFill: primitives.accent200,
buttonSecondarySelectedText: primitives.accent,
buttonSecondarySpinnerForeground: primitives.accent700,
buttonSecondarySpinnerBackground: primitives.accent300,
},
};
const darkTheme = createDarkTheme(primitives, overrides);

This is equivalent to our earlier overrides example, only the result is a dark theme rather than a light theme.

If you aren't sure why this change in mapping is necessary, try creating a dark theme with createTheme. You might notice that the colors look somewhat off. This is because, in a typical light theme, things start light and then get darker as they require more attention, whereas, in a dark theme, things start dark and become lighter. We need to know which direction (light/dark) to go when assigning your primitive colors to theme properties. By separating the assignment logic for light and dark theme creation we can better estimate which values to assign to various properties.

Customizing Typography

The primitives object has an optional property, primaryFontFamily, which allows you to set a custom font family string for typography components.

import {createTheme} from 'baseui';
const primitives = {
primaryFontFamily: 'Verdana',
};
const theme = createTheme(primitives);

In this example, we assign primaryFontFamily to the vastly underrated Verdana font family. With this change, all Base Web components will use Verdana.

But what if we wanted to use Georgia for Display typography? For this purpose, you would need to use overrides.

import {createTheme} from 'baseui';
const primitives = {
primaryFontFamily: 'Verdana',
};
const overrides = {
typography: {
DisplayLarge: {
fontFamily: 'Georgia',
},
DisplayMedium: {
fontFamily: 'Georgia',
},
DisplaySmall: {
fontFamily: 'Georgia',
},
DisplayXSmall: {
fontFamily: 'Georgia',
},
},
};
const theme = createTheme(primitives, overrides);

Initially, Verdana will be mapped to every typography value as a primitive. By using overrides, we can easily deep-merge some reassignments over the theme object. In this case, we set our Display typography levels to use the Georgia font. We use this same overrides technique for our applications.

Customizing Icons

The theme object is also the source for customizing the icons we use in Base Web components.

You can use any React component as a replacement for an icon, as long as they accept the following properties:

  • size, to set their width and height
  • color, to set their colors
  • title, to set the title of the icon for accessibility purposes
When creating these replacement components, pay special attention not to expose these properties to the DOM. If you do, you'll run into warning messages similar to this: `Warning: Invalid attribute name: 'size'`

Your component will also recieve the following properties:

  • data-baseweb, always set to "icon"
  • viewBox, always set to "0 0 24 24"
  • children, the path elements in our default icons
  • Anything else you pass or override on the component instance

How you handle these properties is up to you — for instance, you might want to omit viewBox if your icon set uses something different.

You can find more about the Icon API here and also refer to this list of available icons.

The example below overrides the ChevronLeft icon with the ArrowLeft icon, making the pagination appear slightly different.

All the icons that can be found on the Icon component page can be overridden using this technique.

Pagination icon overrides

of 10

Customizing the Theme Type

There may be a scenario where you want to extend our default theme. We do not recommend removing theme properties, as this may lead to a run-time error when a component references a missing property. However, adding new properties are perfectly acceptable.

// @flow
import type {ThemeT} from 'baseui';
const CustomThemeT = ThemeT & {customColor: string};

You will notice, however, that you can't use createTheme with your CustomThemeT. If you want to use createTheme, we recommend that you first create a normal theme with createTheme and then extend it with your custom properties.

import {createTheme} from 'baseui';
import type {ThemeT} from 'baseui';
const CustomThemeT = ThemeT & {customColor: string};
const theme = createTheme(/*primtives, overrides*/);
const customTheme: CustomThemeT = {
...theme,
customColor: 'pink',
};
function App() {
return <BaseProvider theme={customTheme}>{/* ... */}</BaseProvider>;
}

Note, you can use the custom type theme object with our provider so long as it extends the default ThemeT. Base Web components will essentially ignore the additional properties, but the theme object will be available in component overrides.

If you are using Flow and want to use a custom theme shape with our various styling utilities, you can create new styled, withStyle, and useStyletron methods which respect your custom theme type.

// my-style-utils.js
import {
createThemedStyled,
createThemedWithStyle,
createThemedUseStyletron
} from 'baseui';
export const themedStyled = createThemedStyled<CustomThemeT>();
export const themedWithStyle = createThemedWithStyle<CustomThemeT>();
export const themedUseStyletron = createThemedUseStyletron<CustomThemeT>();

You can import these custom themed utilities wherever you want access to your custom theme.

import {themedUseStyletron as useStyletron} from 'path/to/my-style-utils.js';
function Foo() {
const [css, theme] = useStyletron();
return <div className={css({color: theme.customColor})}>Okay</div>;
}

Using the Theme

The theme object acts as a centralized API for customizing global styling properties, but it also allows developers to use consistent values when extending components or styling new components. Base Web makes access to the theme object a priority across all of our styling utilities and component overrides so that you can always use the right value.

Let's look at how you can use the theme object while extending our components and when building out your interfaces.

In some cases, the theme object may contain short-hand CSS properties, like the border values. If you had spread these values in the methods below, Styletron would raise warnings. In these cases, you can use a utility function that expands short-hand CSS properties to long-hand CSS properties. For this use-case, you may find inline-style-expand-shorthand or lostyle useful.

Extension

There are two supported methods for styling Base Web components: withStyle and overrides. Both have access to the nearest ancestor theme object.

withStyle

Whenever Base Web exports a Styletron styled component we prefix that component with Styled. You can use withStyle to extend a styled component with your custom styles:

import {withStyle} from 'baseui';
import {StyledBaseButton} from 'baseui/button';
const MyButton = withStyle(StyledBaseButton, ({$theme}) => {
return {
color: $theme.colors.accent,
};
});

Notice how the second parameter is a function that is passed an object with a $theme property. This property provides a reference to your theme object.

overrides

For in-depth information on overrides, check out the official documentation. As it relates to theming, any overrides style function will be passed a reference to the nearest ancestor theme object to make consistent styling easy.

import {Button} from 'baseui/button';
function App() {
return (
<Button
overrides={{
Base: {
style: ({$theme}) => {
return {
marginTop: $theme.sizing.scale500,
};
},
},
}}
/>
);
}

Creation

Theming and extending the built-in Base Web components will get you a long way, but sometimes you need to create something new. This is where out other styling utilities come into play.

useStyletron

import {useStyletron} from 'baseui';
function App() {
const [css, theme] = useStyletron();
return (
<div
className={css({
color: theme.colors.accent,
})}
>
Hello
</div>
);
}

useStyletron lets you generate class names to be passed directly to an element’s classNames prop. useStyletron is a wrapper around the built-in Styletron hook. Our wrapper makes sure you have access to your theme by including it as a second item in the hook’s returned array. This makes it easy to style arbitrary elements without having to create new components or replicate design tokens.

styled

import {styled} from 'baseui';
const Title = styled('div', ({$theme}) => {
return {
color: $theme.colors.accent,
};
});
function App() {
return <Title>Hello</Title>;
}

styled creates a new Styletron styled component. We provide a version that wraps Styletron’s default styled function so that it gets a reference to your theme object. We use this styled function to create all of our styled-components in Base Web.

Block

import {Block} from 'baseui/block';
function App() {
return <Block color="accent" />;
}

Block is a unique tool. It allows you to assign common styling attributes using theme tokens, without having to do theme property lookups yourself. The intention is to let you quickly assign design system tokens to common style attributes, such as font, color, margin, etc.

Theme Properties

The theme object organizes its various properties according to their respective concerns.

Animation

Control animation durations and easing functions.

theme.animation.timing100
100ms
theme.animation.timing200
200ms
theme.animation.timing300
300ms
theme.animation.timing400
400ms
theme.animation.timing500
500ms
theme.animation.timing600
600ms
theme.animation.timing700
700ms
theme.animation.timing800
800ms
theme.animation.timing900
900ms
theme.animation.timing1000
1000ms
theme.animation.easeOutCurve
cubic-bezier(.2, .8, .4, 1)
theme.animation.easeInCurve
cubic-bezier(.8, .2, .6, 1)
theme.animation.easeInOutCurve
cubic-bezier(0.4, 0, 0.2, 1)
theme.animation.easeInQuinticCurve
cubic-bezier(0.755, 0.05, 0.855, 0.06)
theme.animation.easeOutQuinticCurve
cubic-bezier(0.23, 1, 0.32, 1)
theme.animation.easeInOutQuinticCurve
cubic-bezier(0.86, 0, 0.07, 1)
theme.animation.linearCurve
cubic-bezier(0, 0, 1, 1)

Borders

Control border and border radius styles.

theme.borders.border100
solid
1px
hsla(0, 0%, 0%, 0.04)
solid
1px
hsla(0, 0%, 100%, 0.04)
theme.borders.border200
solid
1px
hsla(0, 0%, 0%, 0.08)
solid
1px
hsla(0, 0%, 100%, 0.08)
theme.borders.border300
solid
1px
hsla(0, 0%, 0%, 0.12)
solid
1px
hsla(0, 0%, 100%, 0.12)
theme.borders.border400
solid
1px
hsla(0, 0%, 0%, 0.16)
solid
1px
hsla(0, 0%, 100%, 0.16)
theme.borders.border500
solid
1px
hsla(0, 0%, 0%, 0.2)
solid
1px
hsla(0, 0%, 100%, 0.2)
theme.borders.border600
solid
1px
hsla(0, 0%, 0%, 0.24)
solid
1px
hsla(0, 0%, 100%, 0.24)
theme.borders.radius100
2px
theme.borders.radius200
4px
theme.borders.radius300
8px
theme.borders.radius400
12px

Breakpoints

Control the media query widths used to establish responsive breakpoints.

theme.breakpoints.small
320px
theme.breakpoints.medium
600px
theme.breakpoints.large
1136px

Colors

Control literal and semantic color values. These differ between light and dark themes.

theme.colors.primaryA
#000000
black
#E2E2E2
gray200
theme.colors.primaryB
#FFFFFF
white
#141414
gray900
theme.colors.accent
#276EF1
blue400
#276EF1
blue400
theme.colors.negative
#E11900
red400
#AB1300
red500
theme.colors.warning
#FFC043
yellow400
#BC8B2C
yellow500
theme.colors.positive
#05944F
green400
#05944F
green400
theme.colors.backgroundPrimary
#FFFFFF
white
#141414
gray900
theme.colors.backgroundSecondary
#F6F6F6
gray50
#1F1F1F
gray800
theme.colors.backgroundTertiary
#EEEEEE
gray100
#333333
gray700
theme.colors.backgroundInversePrimary
#000000
black
#E2E2E2
gray200
theme.colors.backgroundInverseSecondary
#1F1F1F
gray800
#CBCBCB
gray300
theme.colors.contentPrimary
#000000
black
#E2E2E2
gray200
theme.colors.contentSecondary
#545454
gray600
#AFAFAF
gray400
theme.colors.contentTertiary
#757575
gray500
#757575
gray500
theme.colors.contentInversePrimary
#FFFFFF
white
#141414
gray900
theme.colors.contentInverseSecondary
#CBCBCB
gray300
#545454
gray600
theme.colors.contentInverseTertiary
#AFAFAF
gray400
#757575
gray500
theme.colors.borderOpaque
#E2E2E2
gray200
#333333
gray700
theme.colors.borderTransparent
rgba(0, 0, 0, 0.08)
rgba(226, 226, 226, 0.08)
theme.colors.borderSelected
#000000
black
#E2E2E2
gray200
theme.colors.borderInverseOpaque
#333333
gray700
#AFAFAF
gray400
theme.colors.borderInverseTransparent
rgba(255, 255, 255, 0.2)
rgba(20, 20, 20, 0.2)
theme.colors.borderInverseSelected
#FFFFFF
white
#141414
gray900
theme.colors.backgroundStateDisabled
#F6F6F6
gray50
#1F1F1F
gray800
theme.colors.backgroundOverlayDark
rgba(0, 0, 0, 0.3)
rgba(0, 0, 0, 0.3)
theme.colors.backgroundOverlayLight
rgba(0, 0, 0, 0.08)
rgba(0, 0, 0, 0.08)
theme.colors.backgroundAccent
#276EF1
blue400
#276EF1
blue400
theme.colors.backgroundNegative
#E11900
red400
#AB1300
red500
theme.colors.backgroundWarning
#FFC043
yellow400
#BC8B2C
yellow500
theme.colors.backgroundPositive
#05944F
green400
#05944F
green400
theme.colors.backgroundLightAccent
#EFF3FE
blue50
#102C60
blue700
theme.colors.backgroundLightNegative
#FFEFED
red50
#5A0A00
red700
theme.colors.backgroundLightWarning
#FFFAF0
yellow50
#674D1B
yellow700
theme.colors.backgroundLightPositive
#E6F2ED
green50
#10462D
green700
theme.colors.backgroundAlwaysDark
#000000
black
#141414
gray900
theme.colors.backgroundAlwaysLight
#FFFFFF
white
#EEEEEE
gray100
theme.colors.contentStateDisabled
#AFAFAF
gray400
#545454
gray600
theme.colors.contentAccent
#276EF1
blue400
#5B91F5
blue300
theme.colors.borderAccentLight
#A0BFF8
blue200
#1E54B7
blue500
theme.colors.contentNegative
#E11900
red400
#E85C4A
red300
theme.colors.contentWarning
#BC8B2C
yellow500
#FFCF70
yellow300
theme.colors.contentPositive
#05944F
green400
#06C167
green300
theme.colors.contentOnColor
#FFFFFF
white
#EEEEEE
gray100
theme.colors.contentOnColorInverse
#000000
black
#141414
gray900
theme.colors.borderStateDisabled
#F6F6F6
gray50
#1F1F1F
gray800
theme.colors.borderAccent
#276EF1
blue400
#276EF1
blue400
theme.colors.borderNegative
#F1998E
red200
#AB1300
red500
theme.colors.borderWarning
#FFE3AC
yellow200
#BC8B2C
yellow500
theme.colors.borderPositive
#66D19E
green200
#03703C
green500

The following colors are "primitive" colors used to construct the theme when using createTheme. We make them available directly on the theme.colors object for your convenience.

theme.colors.primaryA
#000000
black
#E2E2E2
gray200
theme.colors.primaryB
#FFFFFF
white
#141414
gray900
theme.colors.primary
#000000
black
#FFFFFF
white
theme.colors.primary50
#F6F6F6
gray50
#F6F6F6
gray50
theme.colors.primary100
#EEEEEE
gray100
#EEEEEE
gray100
theme.colors.primary200
#E2E2E2
gray200
#E2E2E2
gray200
theme.colors.primary300
#CBCBCB
gray300
#CBCBCB
gray300
theme.colors.primary400
#AFAFAF
gray400
#AFAFAF
gray400
theme.colors.primary500
#757575
gray500
#757575
gray500
theme.colors.primary600
#545454
gray600
#545454
gray600
theme.colors.primary700
#333333
gray700
#333333
gray700
theme.colors.accent
#276EF1
blue400
#276EF1
blue400
theme.colors.accent50
#EFF3FE
blue50
#EFF3FE
blue50
theme.colors.accent100
#D4E2FC
blue100
#D4E2FC
blue100
theme.colors.accent200
#A0BFF8
blue200
#A0BFF8
blue200
theme.colors.accent300
#5B91F5
blue300
#5B91F5
blue300
theme.colors.accent400
#276EF1
blue400
#276EF1
blue400
theme.colors.accent500
#1E54B7
blue500
#1E54B7
blue500
theme.colors.accent600
#174291
blue600
#174291
blue600
theme.colors.accent700
#102C60
blue700
#102C60
blue700
theme.colors.negative
#E11900
red400
#AB1300
red500
theme.colors.negative50
#FFEFED
red50
#FFEFED
red50
theme.colors.negative100
#FED7D2
red100
#FED7D2
red100
theme.colors.negative200
#F1998E
red200
#F1998E
red200
theme.colors.negative300
#E85C4A
red300
#E85C4A
red300
theme.colors.negative400
#E11900
red400
#E11900
red400
theme.colors.negative500
#AB1300
red500
#AB1300
red500
theme.colors.negative600
#870F00
red600
#870F00
red600
theme.colors.negative700
#5A0A00
red700
#5A0A00
red700
theme.colors.warning
#FFC043
yellow400
#BC8B2C
yellow500
theme.colors.warning50
#FFFAF0
yellow50
#FFFAF0
yellow50
theme.colors.warning100
#FFF2D9
yellow100
#FFF2D9
yellow100
theme.colors.warning200
#FFE3AC
yellow200
#FFE3AC
yellow200
theme.colors.warning300
#FFCF70
yellow300
#FFCF70
yellow300
theme.colors.warning400
#FFC043
yellow400
#FFC043
yellow400
theme.colors.warning500
#BC8B2C
yellow500
#BC8B2C
yellow500
theme.colors.warning600
#997328
yellow600
#997328
yellow600
theme.colors.warning700
#674D1B
yellow700
#674D1B
yellow700
theme.colors.positive
#05944F
green400
#05944F
green400
theme.colors.positive50
#E6F2ED
green50
#E6F2ED
green50
theme.colors.positive100
#ADDEC9
green100
#ADDEC9
green100
theme.colors.positive200
#66D19E
green200
#66D19E
green200
theme.colors.positive300
#06C167
green300
#06C167
green300
theme.colors.positive400
#05944F
green400
#05944F
green400
theme.colors.positive500
#03703C
green500
#03703C
green500
theme.colors.positive600
#03582F
green600
#03582F
green600
theme.colors.positive700
#10462D
green700
#10462D
green700
theme.colors.white
#FFFFFF
white
#FFFFFF
white
theme.colors.black
#000000
black
#000000
black
theme.colors.mono100
#FFFFFF
white
#CBCBCB
gray300
theme.colors.mono200
#F6F6F6
gray50
#AFAFAF
gray400
theme.colors.mono300
#EEEEEE
gray100
#757575
gray500
theme.colors.mono400
#E2E2E2
gray200
#545454
gray600
theme.colors.mono500
#CBCBCB
gray300
#333333
gray700
theme.colors.mono600
#AFAFAF
gray400
#292929
theme.colors.mono700
#757575
gray500
#1F1F1F
gray800
theme.colors.mono800
#545454
gray600
#141414
gray900
theme.colors.mono900
#333333
gray700
#111111
theme.colors.mono1000
#000000
black
#000000
black
theme.colors.rating200
#FFE3AC
yellow200
#FFE3AC
yellow200
theme.colors.rating400
#FFC043
yellow400
#FFC043
yellow400

The theme.colors object also includes component specific properties. We won't enumerate those here since you should rarely need to reference them yourself. The best way to explore component specific properties is to go to a component's documentation page and use the sandbox at the top of the page. There is an interactive Theme tab which lets you dynamically change any property relevant to the component.

Direction

Control the dir for components. It can be auto, rtl, or ltr.

Grid

Control the columns and gutters for LayoutGrid.

theme.grid.columns
4, 8, 12
theme.grid.gutters
16px, 36px, 36px
theme.grid.margins
16px, 36px, 64px
theme.grid.gaps
0
theme.grid.maxWidth
1280px

Lighting

Control shadows.

theme.lighting.shadow400
0 1px 4px hsla(0, 0%, 0%, 0.16)
0 1px 4px hsla(0, 0%, 0%, 0.16)
theme.lighting.shadow500
0 2px 8px hsla(0, 0%, 0%, 0.16)
0 2px 8px hsla(0, 0%, 0%, 0.16)
theme.lighting.shadow600
0 4px 16px hsla(0, 0%, 0%, 0.16)
0 4px 16px hsla(0, 0%, 0%, 0.16)
theme.lighting.shadow700
0 8px 24px hsla(0, 0%, 0%, 0.16)
0 8px 24px hsla(0, 0%, 0%, 0.16)

Media Query

Control media queries added to the theme for convenience.

theme.mediaQuery.small
@media screen and (min-width: 320px)
theme.mediaQuery.medium
@media screen and (min-width: 600px)
theme.mediaQuery.large
@media screen and (min-width: 1136px)

Name

Control the name of your theme. For example, light-theme.

Sizing

Control spacing and sizing.

theme.sizing.scale0
2px
theme.sizing.scale100
4px
theme.sizing.scale200
6px
theme.sizing.scale300
8px
theme.sizing.scale400
10px
theme.sizing.scale500
12px
theme.sizing.scale550
14px
theme.sizing.scale600
16px
theme.sizing.scale650
18px
theme.sizing.scale700
20px
theme.sizing.scale750
22px
theme.sizing.scale800
24px
theme.sizing.scale850
28px
theme.sizing.scale900
32px
theme.sizing.scale950
36px
theme.sizing.scale1000
40px
theme.sizing.scale1200
48px
theme.sizing.scale1400
56px
theme.sizing.scale1600
64px
theme.sizing.scale2400
96px
theme.sizing.scale3200
128px
theme.sizing.scale4800
192px

Typography

Control typography family, size, weight, and height.

theme.typography.ParagraphXSmall
Example
12px
normal
20px
theme.typography.ParagraphSmall
Example
14px
normal
20px
theme.typography.ParagraphMedium
Example
16px
normal
24px
theme.typography.ParagraphLarge
Example
18px
normal
28px
theme.typography.LabelXSmall
Example
12px
500
16px
theme.typography.LabelSmall
Example
14px
500
16px
theme.typography.LabelMedium
Example
16px
500
20px
theme.typography.LabelLarge
Example
18px
500
24px
theme.typography.HeadingXSmall
Example
20px
500
28px
theme.typography.HeadingSmall
Example
24px
500
32px
theme.typography.HeadingMedium
Example
28px
500
36px
theme.typography.HeadingLarge
Example
32px
500
40px
theme.typography.HeadingXLarge
Example
36px
500
44px
theme.typography.HeadingXXLarge
Example
40px
500
52px
theme.typography.DisplayXSmall
Example
36px
500
44px
theme.typography.DisplaySmall
Example
44px
500
52px
theme.typography.DisplayMedium
Example
52px
500
64px
theme.typography.DisplayLarge
Example
96px
500
112px
theme.typography.MonoParagraphXSmall
Example
12px
normal
20px
theme.typography.MonoParagraphSmall
Example
14px
normal
20px
theme.typography.MonoParagraphMedium
Example
16px
normal
24px
theme.typography.MonoParagraphLarge
Example
18px
normal
28px
theme.typography.MonoLabelXSmall
Example
12px
500
16px
theme.typography.MonoLabelSmall
Example
14px
500
16px
theme.typography.MonoLabelMedium
Example
16px
500
20px
theme.typography.MonoLabelLarge
Example
18px
500
24px
theme.typography.MonoHeadingXSmall
Example
20px
500
28px
theme.typography.MonoHeadingSmall
Example
24px
500
32px
theme.typography.MonoHeadingMedium
Example
28px
500
36px
theme.typography.MonoHeadingLarge
Example
32px
500
40px
theme.typography.MonoHeadingXLarge
Example
36px
500
44px
theme.typography.MonoHeadingXXLarge
Example
40px
500
52px
theme.typography.MonoDisplayXSmall
Example
36px
500
44px
theme.typography.MonoDisplaySmall
Example
44px
500
52px
theme.typography.MonoDisplayMedium
Example
52px
500
64px
theme.typography.MonoDisplayLarge
Example
96px
500
112px

Z-Index

Control the base z-index for the theme. This should not be used and will be removed in v11 of Base Web.