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
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
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
)