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
#F4FAFB
platinum100
#EBF5F7
platinum200
#CCDFE5
platinum300
#A1BDCA
platinum400
#8EA3AD
platinum500
#6C7C83
platinum600
#556268
platinum700
#394145
platinum800
#142328
red50
#FFEFED
red100
#FED7D2
red200
#F1998E
red300
#E85C4A
red400
#E11900
red500
#AB1300
red600
#870F00
red700
#5A0A00
orange50
#FFF3EF
orange100
#FFE1D6
orange200
#FABDA5
orange300
#FA9269
orange400
#FF6937
orange500
#C14F29
orange600
#9A3F21
orange700
#672A16
yellow50
#FFFAF0
yellow100
#FFF2D9
yellow200
#FFE3AC
yellow300
#FFCF70
yellow400
#FFC043
yellow500
#BC8B2C
yellow600
#997328
yellow700
#674D1B
green50
#E6F2ED
green100
#ADDEC9
green200
#66D19E
green300
#06C167
green400
#05944F
green500
#03703C
green600
#03582F
green700
#10462D
blue50
#EFF3FE
blue100
#D4E2FC
blue200
#A0BFF8
blue300
#5B91F5
blue400
#276EF1
blue500
#1E54B7
blue600
#174291
blue700
#102C60
cobalt50
#EBEDFA
cobalt100
#D2D7F0
cobalt200
#949CE3
cobalt300
#535FCF
cobalt400
#0E1FC1
cobalt500
#0A1899
cobalt600
#081270
cobalt700
#050C4D
purple50
#F3F1F9
purple100
#E3DDF2
purple200
#C1B4E2
purple300
#957FCE
purple400
#7356BF
purple500
#574191
purple600
#453473
purple700
#2E224C
brown50
#F6F0EA
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.

API

Tokens exports

You can import this module like so:

import {colors} from 'baseui/tokens'

It exports the following components or utility functions: