Theming System The color theming foundation of Bolt. White

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-white class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Black

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-black class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Gray-xlight

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-gray-xlight class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-dark

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-dark class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Navy-light

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-navy-light class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Teal This theme should only be used with large text, not body or small text (which fails accessible color contrast ratio).

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Yellow

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-yellow class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Orange This theme should only be used with large text, not body or small text (which fails accessible color contrast ratio).

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Pink This theme should only be used with large text, not body or small text (which fails accessible color contrast ratio).

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Wine

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-wine class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Berry

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-berry class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button

 Violet

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-violet class.
CSS custom property
Text   var(--m-bolt-text)
Background   var(--m-bolt-bg)
Primary   var(--m-bolt-primary)
Text on Primary   var(--m-bolt-text-on-primary)
Secondary   var(--m-bolt-secondary)
Text on Secondary   var(--m-bolt-text-on-secondary)
Tertiary   var(--m-bolt-tertiary)
Text on Tertiary   var(--m-bolt-text-on-tertiary)
Link Text   var(--m-bolt-link)
Disabled   var(--m-bolt-text-on-disabled)
Text on Disabled   var(--m-bolt-disabled)
Headline Text   var(--m-bolt-headline)
Border   var(--m-bolt-border)
Neutral   var(--m-bolt-neutral)

Content Type Overview

Headline

Headline Text

Headline Text Link

Text

Body text

Body Text Link

Border

Button