CSS reference - Bifrost

CSS Colors

Color guide, naming conventions, usage and contrast rules

Bifrost consists of a defined set of colors that help us convey Intilitys identity and ensure the proper contrast for accessibility.

Text classes

The most used text colors have utility classes prefixed with .bfc-* for easier use. For base backgrounds you can use the following classes:

Name	Example
.bfc-base	Sample base text
.bfc-base-2	Sample base-2 text
.bfc-disabled	Sample disabled text
.bfc-theme	Sample theme text
.bfc-brand	Sample brand text
.bfc-chill	Sample chill text
.bfc-attn	Sample attn text
.bfc-success	Sample success text
.bfc-warning	Sample warning text
.bfc-alert	Sample alert text

Background classes

Some color combinations with both a main color and its matching contrast color are also available, all with a *-bg suffix. These will also supply correct text color to nested links (like <a> elements and the .bf-link class).

Name	Example
`.bfc-base-bg`	base sample with link
`.bfc-base-2-bg`	base-2 sample with link
`.bfc-base-3-bg`	base-3 sample with link
`.bfc-dimmed-bg`	dimmed sample with link
`.bfc-inverted-bg`	inverted sample with link
`.bfc-inverted-2-bg`	inverted-2 sample with link
`.bfc-disabled-bg`	disabled sample with link
`.bfc-theme-bg`	theme sample with link
`.bfc-theme-fade-bg`	theme-fade sample with link
`.bfc-neutral-bg`	neutral sample with link
`.bfc-neutral-fade-bg`	neutral-fade sample with link
`.bfc-brand-bg`	brand sample with link
`.bfc-brand-fade-bg`	brand-fade sample with link
`.bfc-attn-bg`	attn sample with link
`.bfc-attn-fade-bg`	attn-fade sample with link
`.bfc-chill-bg`	chill sample with link
`.bfc-chill-fade-bg`	chill-fade sample with link
`.bfc-success-bg`	success sample with link
`.bfc-success-fade-bg`	success-fade sample with link
`.bfc-warning-bg`	warning sample with link
`.bfc-warning-fade-bg`	warning-fade sample with link
`.bfc-alert-bg`	alert sample with link
`.bfc-alert-fade-bg`	alert-fade sample with link

Variables

All bifrost components supports light and dark mode out of the box, and so will your project as long as you avoid using any color codes (like hex or hsl) directly. Always stick with the CSS variables as described below, and you're golden! :)

Most colors change completely between modes, click the icon in the top right corner to toggle between light and dark mode.

All colors are available as CSS custom properties (a.k.a. CSS variables), prefixed with --bfc- (which stands for bifrost colors).

For numbered color names, the -1 suffix can be omitted, which means:

base is the same as base-1
base-c is the same as base-c-1
theme is the same as theme-1 etc.

Name	Example
--bfc-base	base
--bfc-base-2	base-2
--bfc-base-3	base-3
--bfc-base-c	base-c
--bfc-base-c-2	base-c-2
--bfc-base-c-theme	base-c-theme
--bfc-base-c-brand	base-c-brand
--bfc-base-c-chill	base-c-chill
--bfc-base-c-attn	base-c-attn
--bfc-base-c-success	base-c-success
--bfc-base-c-warning	base-c-warning
--bfc-base-c-alert	base-c-alert
--bfc-base-c-wcag	base-c-wcag
--bfc-base-c-disabled	base-c-disabled
--bfc-base-c-dimmed	base-c-dimmed
--bfc-base-dimmed	base-dimmed
--bfc-base-dimmed-2	base-dimmed-2
--bfc-base-dimmed-3	base-dimmed-3
--bfc-base-disabled	base-disabled
--bfc-base-c-inverted	base-c-inverted
--bfc-base-c-inverted-2	base-c-inverted-2
--bfc-base-c-inverted-3	base-c-inverted-3
--bfc-theme	theme
--bfc-theme-2	theme-2
--bfc-theme-3	theme-3
--bfc-theme-c	theme-c
--bfc-theme-c-2	theme-c-2
--bfc-theme-hc	theme-hc
--bfc-theme-fade	theme-fade
--bfc-theme-fade-c	theme-fade-c
--bfc-neutral	neutral
--bfc-neutral-c	neutral-c
--bfc-neutral-hc	neutral-hc
--bfc-neutral-fade	neutral-fade
--bfc-neutral-fade-c	neutral-fade-c
--bfc-brand	brand
--bfc-brand-c	brand-c
--bfc-brand-hc	brand-hc
--bfc-brand-fade	brand-fade
--bfc-brand-fade-c	brand-fade-c
--bfc-chill	chill
--bfc-chill-c	chill-c
--bfc-chill-hc	chill-hc
--bfc-chill-fade	chill-fade
--bfc-chill-fade-c	chill-fade-c
--bfc-attn	attn
--bfc-attn-c	attn-c
--bfc-attn-hc	attn-hc
--bfc-attn-fade	attn-fade
--bfc-attn-fade-c	attn-fade-c
--bfc-success	success
--bfc-success-c	success-c
--bfc-success-hc	success-hc
--bfc-success-fade	success-fade
--bfc-success-fade-c	success-fade-c
--bfc-warning	warning
--bfc-warning-c	warning-c
--bfc-warning-hc	warning-hc
--bfc-warning-fade	warning-fade
--bfc-warning-fade-c	warning-fade-c
--bfc-alert	alert
--bfc-alert-2	alert-2
--bfc-alert-c	alert-c
--bfc-alert-hc	alert-hc
--bfc-alert-fade	alert-fade
--bfc-alert-fade-c	alert-fade-c
--bfc-alert-fade-2	alert-fade-2
--bfc-alert-fade-2-c	alert-fade-2-c

Color themes

New in 5.0

All color variables named --bfc-theme-* (and --bfc-base-c-theme) are teal-colored by default, but can be changed by using a .bf-theme-[color] color class. Currently available colors are:

.bf-theme-teal
.bf-theme-purple
.bf-theme-pink
.bf-theme-yellow

You can apply it globally to your entire app by adding a theme class to the root <html> element:

<html class="bf-theme-purple">
  <!-- `--bfc-theme-*` variables are now purple for your entire app -->
</html>

Or you can apply it to any individual element:

<div class="bf-theme-purple">
  <!-- `--bfc-theme-*` variables are now purple for this element and descendants -->
</div>

Also see /design/theme

More information about usage and examples

Also see /react/box

Apply theme in typesafe way with the react Box component

All theme variables

Variables that may change between color themes and light/dark mode. Some names are aliases (like theme-1 and theme).

var	current	teal	purple	pink	yellow
--bfc-base-c-theme
--bfc-theme
--bfc-theme-1
--bfc-theme-2
--bfc-theme-3
--bfc-theme-c
--bfc-theme-c-1
--bfc-theme-c-2
--bfc-theme-hc
--bfc-theme-fade
--bfc-theme-fade-c

Shadow

.bf-shadow class name applies a subtle box-shadow on an element.
Equivalent to box-shadow: var(--bf-shadow)
--bf-shadow variable contains values for box-shadow css property.
Equivalent to 0 0 8px var(--bfc-shadow)
--bfc-shadow variable contains the bifrost shadow color only. Slightly stronger in dark mode than light.

<div class="bf-shadow bf-padding bfc-base-3-bg">.bf-shadow</div>
<div style="box-shadow: var(--bf-shadow)" class="bf-padding bfc-base-3-bg">
  var(--bf-shadow)
</div>
<div
  style="box-shadow: 0 0 8px var(--bfc-shadow)"
  class="bf-padding bfc-base-3-bg"
>
  0 0 8px var(--bfc-shadow)
</div>
<div
  style="box-shadow: 0 4px 20px 5px var(--bfc-shadow)"
  class="bf-padding bfc-base-3-bg"
>
  0 4px 20px 5px var(--bfc-shadow)
</div>

.bf-shadow

var(--bf-shadow)

0 0 8px var(--bfc-shadow)

0 4px 20px 5px var(--bfc-shadow)

base-3 on base-3 example:

.bf-shadow

0 4px 20px 5px var(--bfc-shadow)

base on base example:

.bf-shadow

0 4px 20px 5px var(--bfc-shadow)

If you need a drop shadow on a transparent image you can use filter: drop-shadow(var(--bf-shadow)).

Shadow position

There are also four CSS classes and variables available for positioned shadows

<div class="bf-padding bfc-base-3-bg bf-shadow-top">.bf-shadow-top</div>
<div class="bf-padding bfc-base-3-bg" style="box-shadow: var(--bf-shadow-top)">
  --bf-shadow-top
</div>
<div class="bf-padding bfc-base-3-bg bf-shadow-right">.bf-shadow-right</div>
<div
  class="bf-padding bfc-base-3-bg"
  style="box-shadow: var(--bf-shadow-right)"
>
  --bf-shadow-right
</div>
<div class="bf-padding bfc-base-3-bg bf-shadow-bottom">.bf-shadow-bottom</div>
<div
  class="bf-padding bfc-base-3-bg"
  style="box-shadow: var(--bf-shadow-bottom)"
>
  --bf-shadow-bottom
</div>
<div class="bf-padding bfc-base-3-bg bf-shadow-left">.bf-shadow-left</div>
<div class="bf-padding bfc-base-3-bg" style="box-shadow: var(--bf-shadow-left)">
  --bf-shadow-left
</div>

.bf-shadow-top

--bf-shadow-top

.bf-shadow-right

--bf-shadow-right

.bf-shadow-bottom

--bf-shadow-bottom

.bf-shadow-left

--bf-shadow-left

Opacity through `hsla()`

Some base colors are available as HSL values only, for example, in dark mode:

var(--bfc-theme) equals hsl(173, 88%, 50%) and can be used directly anywhere a css color is expected
var(--bfc-theme-hsl) equals 173, 88%, 50% and cannot be used as a color directly
hsl(var(--bfc-theme-hsl)) equals hsl(173, 88%, 50%) and is a valid color (but not very useful, same as just writing var(--bfc-theme))
hsla(var(--bfc-theme-hsl), 0.5) equals hsla(173, 88%, 50%, 0.5), a valid theme color with 50% opacity!

Accessibility

When using transparent colors it is up to you to make sure text is still readable, following WCAG standards!

For instance, use an eye-dropper tool to find the rendered color code (for both light and dark mode), then supply the colors to a contrast checker.

Don't forget to check for both light and dark mode individually.

Opacity examples

TransparentOpaque

base with 50% opacity
hsla(var(--bfc-base-hsl), 0.5)

base-dimmed with 50% opacity
hsla(var(--bfc-base-dimmed-hsl), 0.5)

theme with 50% opacity
hsla(var(--bfc-theme-hsl), 0.5)

theme-fade with 50% opacity
hsla(var(--bfc-theme-fade-hsl), 0.5)

brand with 50% opacity
hsla(var(--bfc-brand-hsl), 0.5)

brand-fade with 50% opacity
hsla(var(--bfc-brand-fade-hsl), 0.5)

chill with 50% opacity
hsla(var(--bfc-chill-hsl), 0.5)

chill-fade with 50% opacity
hsla(var(--bfc-chill-fade-hsl), 0.5)

attn with 50% opacity
hsla(var(--bfc-attn-hsl), 0.5)

attn-fade with 50% opacity
hsla(var(--bfc-attn-fade-hsl), 0.5)

success with 50% opacity
hsla(var(--bfc-success-hsl), 0.5)

success-fade with 50% opacity
hsla(var(--bfc-success-fade-hsl), 0.5)

warning with 50% opacity
hsla(var(--bfc-warning-hsl), 0.5)

warning-fade with 50% opacity
hsla(var(--bfc-warning-fade-hsl), 0.5)

alert with 50% opacity
hsla(var(--bfc-alert-hsl), 0.5)

alert-fade with 50% opacity
hsla(var(--bfc-alert-fade-hsl), 0.5)

Force light / dark mode

Bifrost will automatically switch between light and dark mode based on prefers-color-scheme (a.k.a. "System" or "OS setting"). This is the recommended behavior in almost all cases.

If you need to force dark mode, apply the .bf-darkmode class on <html> root element, or .bf-lightmode for light.

<html>
  Bifrost colors follow OS / Browser setting (prefers-color-scheme)
</html>
<html class="bf-lightmode">
  Always light mode Bifrost colors
</html>
<html class="bf-darkmode">
  Always dark mode Bifrost colors
</html>

React color mode picker

Example of a color mode picker as a dropdown in the Nav top bar implemented in react.

Display element only in light or dark mode

Apply one of the following class names to make an element only visible in either light or dark mode:

.bf-light-only is visible when:
- Forced light mode <html class="bf-lightmode"> or
- prefers-color-scheme is "light" and <html> has no color mode class
.bf-dark-only is visible for:
- Forced dark mode <html class="bf-darkmode"> or
- prefers-color-scheme is "dark" and <html> has no color mode class

<div class="bf-light-only">
  HTML tag has "bf-lightmode" class, or `prefers-color-scheme` is "light"
</div>
<div class="bf-dark-only">
  HTML tag has "bf-darkmode" class, or `prefers-color-scheme` is "dark"
</div>

HTML tag has "bf-lightmode" class, or `prefers-color-scheme` is "light"

HTML tag has "bf-darkmode" class, or `prefers-color-scheme` is "dark"

Apply css only in light or dark mode

Partial browser support

Use a style query in CSS to check if --bf-mode is light or dark:

<style>
  .testElement:after {
    content: " Unknown :("; /* firefox? other old browser? */
  }
  @container style(--bf-mode: light) {
    .testElement:after {
      content: " Light mode!";
    }
  }
  @container style(--bf-mode: dark) {
    .testElement:after {
      content: " Dark mode!";
    }
  }
</style>
<div class="testElement">Current mode is:</div>

Current mode is:

Text classes

Background classes

Variables

Color themes

All theme variables

Shadow

Shadow position

Opacity through hsla()

Opacity examples

Force light / dark mode

Display element only in light or dark mode

Apply css only in light or dark mode

Opacity through `hsla()`