Tokens

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

const acmeBlue = '#0000FF';

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.

Not every color listed in tokens 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?

You could employ either of those strategies. However, we think the best way to use tokens with baseui is to assign them to your theme's properties.

You can create a custom theme with your choice of color tokens. Here is what that might look like:

// myTheme.js
import {createTheme, lightThemePrimitives} from 'baseui';
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 primitive color tokens as overrides on the theme if there is a specific theme property that needs further customization. Sometimes our default mapping of theme's building primitives to theme properties may differ from your own intentions.

// myTheme.js
import {createTheme, lightThemePrimitives} from 'baseui';
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 theme's building primitives level, with overrides as a backup. 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.

Primitive Color Tokens

white
#FFFFFF
gray50
#F6F6F6
gray100
#EEEEEE
gray200
#E2E2E2
gray300
#CBCBCB
gray400
#AFAFAF
gray500
#757575
gray600
#545454
gray700
#333333
gray800
#1F1F1F
gray900
#141414
black
#000000
platinum50
#F5F7F8
platinum100
#EBF5F7
platinum200
#CCDFE5
platinum300
#A1BDCA
platinum400
#8EA3AD
platinum500
#6C7C83
platinum600
#556268
platinum700
#394145
blue50
#EDF3FD
blue100
#D4E2FC
blue200
#9FBFF8
blue300
#5A90F4
blue400
#276EF1
blue500
#1D53B7
blue600
#174291
blue700
#0F2C60
red50
#FBEFEE
red100
#F6D9D6
red200
#ECACA5
red300
#DE7063
red400
#D44333
red500
#A13226
red600
#7F281E
red700
#541A14
green50
#F0FAF3
green100
#CFF3DD
green200
#9EE2B8
green300
#43BF75
green400
#21A453
green500
#09863D
green600
#156A36
green700
#0D4020
orange50
#FDF3EE
orange100
#FBE2D6
orange200
#F7BFA5
orange300
#F19063
orange400
#ED6E33
orange500
#B45326
orange600
#8E421E
orange700
#5F2C14
purple50
#F3F1F9
purple100
#E3DDF2
purple200
#C1B4E2
purple300
#957FCE
purple400
#7356BF
purple500
#574191
purple600
#453372
purple700
#2E224C
yellow50
#FFF9EF
yellow100
#FFF2D9
yellow200
#FFE3AC
yellow300
#FFCF70
yellow400
#FFC043
yellow500
#C19132
yellow600
#997328
yellow700
#664C1A
brown50
#F6F2F0
brown100
#EBE0DB
brown200
#D2BAB0
brown300
#B18976
brown400
#99644C
brown500
#744C39
brown600
#5B3C2D
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.

API

Tokens exports

You can import this module like so:

import {colors} from 'baseui/tokens'

It exports the following components or utility functions: