Tokens

You can import Base Web design tokens from baseui/tokens. A token is just an alias for a value in your design system, such as a hex or pixel value. For example:

const acmeBlue = '#00F';

Anytime someone needs to reference the blue for Acme Co. there is a single place it is defined and exported. Note, this is a little different from a theme, which assigns semantic meaning to colors. A token is just a consistent way to reference an immutable value in a design system.

Currently we only export colors from baseui/tokens. In the future, we may add more types of values to the module such as typography and spacing values. Eventually we may even move tokens into a separate package entirely- to better support other platforms and keep baseui focused on components.

Colors

white
#FFFFFF
black
#000000
gray50
#F6F6F6
gray100
#EEEEEE
gray200
#E2E2E2
gray300
#CBCBCB
gray400
#AFAFAF
gray500
#757575
gray600
#545454
gray700
#333333
blue50
#EEF3FE
blue100
#D4E2FC
blue200
#A0BFF9
blue300
#5B91F4
blue400
#276EF1
blue500
#1E54B7
blue600
#174291
blue700
#102C60
red50
#FDF0EF
red100
#FADBD7
red200
#F4AFA7
red300
#EB7567
red400
#D44333
red500
#AE372A
red600
#892C21
red700
#5C1D16
green50
#F0F9F4
green100
#DAF0E3
green200
#AEDDC2
green300
#73C496
green400
#3AA76D
green500
#368759
green600
#2B6B46
green700
#1C472F
orange50
#FEF3EF
orange100
#FBE2D6
orange200
#F7BFA5
orange300
#F19164
orange400
#ED6E33
orange500
#B45427
orange600
#8E421F
orange700
#5F2C14
purple50
#F4F1FA
purple100
#F4F1FA
purple200
#C1B5E3
purple300
#957FCE
purple400
#7356BF
purple500
#574191
purple600
#453473
purple700
#2E224C
yellow50
#FFFAF0
yellow100
#FFF2D9
yellow200
#FFE3AC
yellow300
#FFCF70
yellow400
#FFC043
yellow500
#BC8B2C
yellow600
#997328
yellow700
#664D1B
brown50
#F7F3F1
brown100
#EBE0DB
brown200
#D2BBB0
brown300
#B18977
brown400
#99644C
brown500
#744C3A
brown600
#5C3C2E
brown700
#3D281E

Not every color listed here is used in a baseui component. This is simply the complete set of official Base Web colors. Ideally these are the only colors you would need to use in a Base Web project.

Usage

So what do you do with a token? Should you import it wherever you need to use the color? Should you alias it in your theme object?

In a pinch you could certainly employ either of those strategies. However, we think the best way to use tokens with baseui is to assign them to your theme's primitive variables. Here is what that might look like:

// myTheme.js
import {createTheme, lightThemePrimitives} from 'baseui/themes';
import {colors} from 'baseui/tokens';
const myThemePrimitives = {
...lightThemePrimitives,
primary: colors.blue400,
primary50: colors.blue50,
primary100: colors.blue100,
primary200: colors.blue200,
primary300: colors.blue300,
primary400: colors.blue400,
primary500: colors.blue500,
primary600: colors.blue600,
primary700: colors.blue700,
};
const myTheme = createTheme(myThemePrimitives);
export default myTheme;

You could also assign tokens as overrides on the theme if the primitives don't cover your use case. Sometimes our default mapping of primitives to theme properties may differ from your own intentions.

// myTheme.js
import {createTheme, lightThemePrimitives} from 'baseui/themes';
import {colors} from 'baseui/tokens';
const myThemeOverrides = {
colors: {
borderFocus: colors.yellow200,
},
};
const myTheme = createTheme(lightThemePrimitives, myThemeOverrides);
export default myTheme;

It is best to assign things at the primitives level, with overrides as a backup. This will generally insulate you from future changes in baseui. When you assign tokens directly in component code or alias them on the theme object you are opting out of the baseui way of doing things. We will try to support those use cases the best we can, but our priority will always be supporting theme primitives and overrides first.

For more on baseui theming check out the documentation.