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
#6e45e2
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-primaryPrimary
has-text-warningWarning
has-text-infoInfo
has-text-dangerDanger
has-text-successSuccess
has-text-blackBlack
has-text-darkDark
has-text-nightNight
has-text-lightLight
has-text-whiteWhite
has-text-light-greyLight grey
has-text-dark-greyDark grey
has-text-link
has-text-disabledDisabled
has-text-mutedMuted


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.


VariableTypeDefault value
$primarycolor#6e45e2
$warningcolor#ffdd57
$infocolor#bfd9fe
$dangercolor#ff2b56
$successcolor#00e3ae
$blackcolor#393939
$darkcolor#304352
$nightcolor#4e4376
$whitecolor#ffffff
$lightcolor#eef1f5
$light-greycolor#d7d2cc
$dark-greycolor#616161
$linkcolor#495aff
$disabledcolor#f7f7f7
$mutedcolorlighten($dark-grey, 35%)
$custom-palettemap(empty)
$color-palettemap(
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
)