# Component Color Schemes

User interface color schemes

We provide a generateColors mixin that takes 3 parameters: name, color and hover-color and generates a color scheme for all UI elements. This is the signature of the mixin:

generateColors($name, $color, $hover-color)

For example, to create a UI color scheme of brightblue for all UI elements, you can include this mixin in your SASS files:

@include generateColors("brightblue", #003BFF, white);

This creates a uniform color scheme for every Rubix Bootstrap component. These styles can be applied using the bsStyle prop of a component. For example:

<Button bsStyle='brightblue'>Delete</Button>

However, you can also individually style UI components. We provide mixins for the common UI components that would need visual styling:


Button mixin

The signature for the button mixin is as follows:

generate-button($name, $color, $hover-color)

For example,

@include generate-button("deepred", #D71F4B, white);

creates a color scheme for the button element. You can then apply this scheme to your button like so:

<Button bsStyle='deepred'>Delete</Button>

Menu mixin

The signature for the menu mixin is as follows:

generate-menu($name, $color, $hover-color)

For example,

@include generate-menu("deepred", #D71F4B, white);

Nav mixin

The signature for the nav mixin is as follows:

generate-nav($name, $color, $hover-color)

For example,

@include generate-nav("deepred", #D71F4B, white);

Tab mixin

The signature for the tab mixin is as follows:

generate-tab($name, $color, $hover-color)

For example,

@include generate-tab("deepred", #D71F4B, white);

Timeline mixin

The signature for the Timeline mixin is as follows:

generate-timeline($name, $color, $hover-color)

For example,

@include generate-timeline("deepred", #D71F4B, white);

ListGroup mixin

The signature for the ListGroup mixin is as follows:

generate-list($name, $color, $hover-color)

For example,

@include generate-list("deepred", #D71F4B, white);

Background color mixin

The signature for the background color mixin is as follows:

generate-bg-colors($name, $color, $hover-color)

For example,

@include generate-bg-colors("deepred", #D71F4B, white);

You can use this with any element like so:

<div class='bg-deepred'>Deepred background div</div>

Foreground color mixin

The signature for the foreground color mixin is as follows:

generate-fg-colors($name, $color, $hover-color)

For example,

@include generate-fg-colors("deepred", #D71F4B, white);

You can use this with any element like so:

<div class='fg-deepred'>Deepred color div</div>

Border mixin

The signature for the border color mixin is as follows:

generate-border-colors($name, $color, $hover-color)

For example,

@include generate-border-colors("deepred", #D71F4B, white);

You can use this with any element like so:

<div class='border-deepred' style={{borderWidth: 2, borderStyle: 'solid'}}>Deepred color border</div>