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