Colours

Out of the box you get access to all colors in our HxUI spec. These values can be used within your style sheets, your component files and on actual components via the color class system.

Background colours

Each color from the spec gets converted to a background variant for styling within your application through a class, eg. <div class="hx-bg-red"></div>.

Below is a list of the HxUI themed color palette.

Purple
hx-bg-purple

hx-bg-purple lighten-5

hx-bg-purple lighten-4

hx-bg-purple lighten-3

hx-bg-purple lighten-2

hx-bg-purple lighten-1

hx-bg-purple darken-1

hx-bg-purple darken-2

hx-bg-purple darken-3

hx-bg-purple darken-4

Red
hx-bg-red

hx-bg-red lighten-5

hx-bg-red lighten-4

hx-bg-red lighten-3

hx-bg-red lighten-2

hx-bg-red lighten-1

hx-bg-red darken-1

hx-bg-red darken-2

hx-bg-red darken-3

hx-bg-red darken-4

Blue
hx-bg-blue

hx-bg-blue lighten-5

hx-bg-blue lighten-4

hx-bg-blue lighten-3

hx-bg-blue lighten-2

hx-bg-blue lighten-1

hx-bg-blue darken-1

hx-bg-blue darken-2

hx-bg-blue darken-3

hx-bg-blue darken-4

Green
hx-bg-green

hx-bg-green lighten-5

hx-bg-green lighten-4

hx-bg-green lighten-3

hx-bg-green lighten-2

hx-bg-green lighten-1

hx-bg-green darken-1

hx-bg-green darken-2

hx-bg-green darken-3

hx-bg-green darken-4

Orange
hx-bg-orange

hx-bg-orange lighten-5

hx-bg-orange lighten-4

hx-bg-orange lighten-3

hx-bg-orange lighten-2

hx-bg-orange lighten-1

hx-bg-orange darken-1

hx-bg-orange darken-2

hx-bg-orange darken-3

hx-bg-orange darken-4

teal
hx-bg-teal

hx-bg-teal lighten-5

hx-bg-teal lighten-4

hx-bg-teal lighten-3

hx-bg-teal lighten-2

hx-bg-teal lighten-1

hx-bg-teal darken-1

hx-bg-teal darken-2

hx-bg-teal darken-3

hx-bg-teal darken-4

grey
hx-bg-grey

hx-bg

hx-bg-grey-lightest

hx-bg-grey-lighter

hx-bg-grey-light

hx-bg-grey-dark

Primary
hx-bg-primary

White
hx-bg-white

Black
hx-bg-black

Success
hx-bg-success-pattern

Warning
hx-bg-warning-pattern

Danger
hx-bg-danger-pattern

Info
hx-bg-info-pattern

Text colours

      
<p>Easily colour text with text colour classes</p>
<table class="hx-table is-striped">
  <thead>
    <tr>
      <th>Class</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>.is-black</code></td>
      <td class="is-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr class="hx-bg-black">
      <td><code>.is-white</code></td>
      <td class="is-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-light</code></td>
      <td class="is-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-lighter</code></td>
      <td class="is-lighter">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-lightest</code></td>
      <td class="is-lightest">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-dark</code></td>
      <td class="is-dark">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-primary</code></td>
      <td class="is-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-info</code></td>
      <td class="is-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-caution</code></td>
      <td class="is-caution">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-warning</code></td>
      <td class="is-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</td>
    </tr>
    <tr>
      <td><code>.is-danger</code></td>
      <td><span class="is-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</span></td>
    </tr>
  </tbody>
</table>

Easily colour text with text colour classes

Class	Example
`.is-black`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-white`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-light`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-lighter`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-lightest`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-dark`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-primary`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-info`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-caution`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-warning`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
`.is-danger`	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.