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.
Scss function
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.
Scss function
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.
Scss function
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.
Scss function
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.
Scss function
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.
Scss function
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

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-teal class.
Scss function
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.
Scss function
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

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-orange class.
Scss function
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

Theme Color Tokens

The theme colors are available for use within a container that has the .t-bolt-pink class.
Scss function
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.
Scss function
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.
Scss function
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.
Scss function
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