Colors

Control sitewide colors with the color palette

The OrbitCSS color palette generates a handful of global and module-specific modifiers that enable you to control the background and text color of various elements.

Primary
#6e45e2

Warning
#ffdd57

Info
#bfd9fe

Danger
#ff2b56

Success
#00e3ae

Black
#393939

Dark
#304352

Night
#4e4376

Light
#eef1f5

White
#ffffff

Light grey
#d7d2cc

Dark grey
#616161

Link
#495aff

Disabled
#f7f7f7

Background colors

The has-bg-* modifier can be used to set the background color of an element.

`has-bg-primary`
`has-bg-warning`
`has-bg-info`
`has-bg-danger`
`has-bg-success`
`has-bg-black`
`has-bg-dark`
`has-bg-night`
`has-bg-light`
`has-bg-white`
`has-bg-light-grey`
`has-bg-dark-grey`
`has-bg-link`
`has-bg-disabled`

Text colors

The has-text-* modifier can be used to set the text color of an element. As most elements in the framework inherit their color this will apply right down the HTML hierarchy.

`has-text-primary`	Primary
`has-text-warning`	Warning
`has-text-info`	Info
`has-text-danger`	Danger
`has-text-success`	Success
`has-text-black`	Black
`has-text-dark`	Dark
`has-text-night`	Night
`has-text-light`	Light
`has-text-white`	White
`has-text-light-grey`	Light Grey
`has-text-dark-grey`	Dark Grey
`has-text-link`	Link
`has-text-disabled`	Disabled
`has-text-muted`	Muted

The has-text-muted modifier is an addition and not apart of the color palette. You can control the color value of muted with the $muted variable.

Custom palette

The $custom-palette variable can extend the existing palette without having to redeclare all of the palettes default values.

$custom-palette : (
  orange: #e28945
);

Copy

Colors in the custom palette will then be available in all color modifiers, including module specific modifiers.

A panel using the has-bg-orange modifier.

An alert using the is-orange modifier.

<div class="panel has-bg-orange">
  A panel using the <code>has-bg-orange</code> modifier.
</div>

<div class="alert is-orange">
  <div>
    An alert using the <code>is-orange</code> modifier.
  </div>
</div>

<button class="button is-orange">An orange button</button>
</> Show code

Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable	Type	Default Value
$primary	color	#6e45e2
$warning	color	#ffdd57
$info	color	#bfd9fe
$danger	color	#ff2b56
$success	color	#00e3ae
$black	color	#393939
$dark	color	#304352
$night	color	#4e4376
$white	color	#ffffff
$light	color	#eef1f5
$light-grey	color	#d7d2cc
$dark-grey	color	#616161
$link	color	#495aff
$disabled	color	#f7f7f7
$muted	color	lighten($dark-grey, 35%)
$custom-palette	map	(empty)
$color-palette	map	( primary: $primary, warning: $warning, info: $info, danger: $danger, success: $success, black: $black, dark: $dark, night: $night, white: $white, light: $light, light-grey: $light-grey, dark-grey: $dark-grey, link: $link, disabled: $disabled )