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.

---

Background colors

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

---

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.

---

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.

<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

---

CSS variables

CSS variables provide four alternatives to each color in the palette, which are used throughout the framework. For example, the --color-*-darker variable is used for the hover state on buttons. When overriding colors with CSS variables, you will also need to account for these variations.

:root {
  /* Base color */
  --color-primary: hsl(255deg, 73%, 58%, 1);

  /* Darker version used for the button hover state. 10% darker. */
  --color-primary-darker: hsl(255deg, 73%, 48%, 1);

  /* Not currently used but included for convenience. 10% lighter. */
  --color-primary-lighter: hsl(255deg, 73%, 68%, 1);

  /* Represents the color for text when used over the base color (buttons, tags, etc.). */
  --color-primary-text: var(--color-white);

  /* Transparentized version used for alert backgrounds. */
  --color-primary-alert: hsl(255deg, 73%, 58%, 0.2);
}
Copy

Other CSS variables.

:root {
  /* Used for the background overlay on elements like the modal. */
  --color-black-overlay: hsl(0deg, 0%, 22%, 0.5);

  /* Other colors. */
  --color-link: hsl(234deg, 100%, 64%, 1);
  --color-muted: hsl(0deg, 0%, 73%, 1);
  --color-disabled: hsl(0deg, 0%, 97%, 1);
}
Copy

---

Sass variables

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