Colors

Frontbx provides an extensive CSS color system for enhanced styling, component customization and beyond.

• Theme colors
  • Usage
• Grays
  • Usage
• Color Palette
  • Palette
  • Usage
• Sass
  • theme-colors
  • Palette
  • Shades

Frontbx's color system is built using a combination of both CSS variables, Sass variables and Sass functions.

Theme colors

Theme colors are used for contextual styling on most Frontbx components and set the foundation for a theme's color styling.

Theme colors are available in both CSS and Sass variables. When using the Sass variable, this will always point to the CSS variable - which is assigned to the actual color in scss/src/base/_root.scss. The table below outlines the core theme colors:

Usage

All theme colors are available via Frontbx's utility helper classes as .bg-[name] and color-[name] without the word theme (e.g. bg-primary or color-success).

<div class="paper paper-rounded raised-1 bg-primary color-white">
    <p class="text-bolder no-margin">Hello World!</p>
</div>

When using any of the theme colors pre-compilation with Sass - the Sass variable will output a reference to the CSS Variable:

.my-element
{
    // color: var(--fbx-theme-primary)
    color: $theme-primary;
}

Grays

Grays are available in shades ranging from 100 (lightest) through 900 (darkest) with the default $gray variable sits in between 400 and 500. Grays are available CSS variables --fbx-gray-[num]. The table below outlines the core color palette used by Frontbx:

Usage

All gray shades are available via Frontbx's utility helper classes as .bg-gray-[num] and color-gray-[num]

<div class="paper paper-rounded raised-1 col col-3 bg-gray-800 pad-20 text-center">
    <p class="color-white text-bolder no-margin">Hello World!</p>
</div>

Color Palette

Frontbx comes with a palette of colors via both CSS ans Sass variables for changing theme colors, customizing components or building out custom UI.

Palette

With color palette, the Sass variable will point directly the actual hex color value. The table below outlines theme colors:

Usage

Palette colors are available through both Sass and CSS Variables. They are not available as a utility classes or palette shades as CSS variables unless defined as a "theme" color pre-complication.

However, they can still be used as CSS variables:

<div class="paper paper-rounded raised-1 color-white" style="background: var(--fbx-color-teal)">
    <p class="text-bolder no-margin">Hello World!</p>
</div>

Setting Frontbx's core theme color via Sass is super simple:

@import "../node_modules/frontbx/scss/frontbx/src/colors";

$theme-primary: $emerland;

$theme-secondary: $nephritis;

Alternatively, you can change a theme by simply changing the CSS variable on :root:

:root
{
    --fbx-theme-primary: var(--fbx-color-emerland);
    --fbx-theme-primary-rgb: var(--fbx-color-emerland-rgb);
}

Frontbx uses a Sass function for gradients on theme colors to style the odd component, if changing the theme color via CSS you should also update these CSS variables:

:root
{
    --fbx-theme-primary-100: #ffeaf7;
    --fbx-theme-primary-200: #ffd5ee;
    --fbx-theme-primary-300: #ff97d5;
    --fbx-theme-primary-400: #ff77c8;
    --fbx-theme-primary-500: #f22ca2;
    --fbx-theme-primary-600: #cc2588;
    --fbx-theme-primary-700: #bf2380;
    --fbx-theme-primary-800: #b32077;
    --fbx-theme-primary-900: #991c66;
}

Sass

All Sass color variable definitions (with the exception of the core "Theme Colors") will point to the the real hex value of a given color (rather than a CSS Variable).

div {
    // color: ##2ecc71;
    color: $emerland
}

Theme colors

Frontbx defines the following variables for use in a theme. Note that theme colors will point to a CSS variable defined in :root rather than the hex.

// Contexts
$theme-primary:                 var(--fbx-color-beetroot)    !default;
$theme-secondary:               var(--fbx-color-salmon)      !default;
$theme-success:                 var(--fbx-color-emerland)    !default;
$theme-info:                    var(--fbx-color-skyblue)     !default;
$theme-warning:                 var(--fbx-color-sunflower)   !default;
$theme-danger:                  var(--fbx-color-coralred)    !default;

.my-element 
{
    // color 
    color: $theme-primary;
}

Palette

All palette hex colors are available through the following:

// Prebuilt colors to choose a theme from
// Flat colors
$teal:                          #7de3b5 !default;
$turquoise:                     #1abc9c !default;
$greensea:                      #16a085 !default;
$emerland:                      #2ecc71 !default;
$nephritis:                     #27ae60 !default;
$babyblue:                      #b0e2fe !default;
$peterrive:                     #3498db !default;
$belizehol:                     #2980b9 !default;
$amethyst:                      #9b59b6 !default;
$wisteria:                      #8e44ad !default;
$wetasphalt:                    #34495e !default;
$midnightblue:                  #2c3e50 !default;
$sunflower:                     #f1c40f !default;
$orange:                        #f39c12 !default;
$carrot:                        #e67e22 !default;
$salmon:                        #ed5d81 !default;
$pumpkin:                       #d35400 !default;
$alizarin:                      #e74c3c !default;
$pomegranate:                   #c0392b !default;
$clouds:                        #ecf0f1 !default;
$silver:                        #bdc3c7 !default;
$concrete:                      #95a5a6 !default;
$asbestos:                      #7f8c8d !default;

// Neons
$neongreen:                     #2bf877 !default;
$skyblue:                       #73dcff !default;
$beetroot:                      #c349ff !default;
$hotpink:                       #ff2eaa !default;
$pineapple:                     #fff224 !default;
$coralred:                      #ff3a24 !default;
$ash:                           #838c92 !default;

// Basic colors
$white:                         #FFFFFF !default;
$black:                         #323232 !default;
$gray:                          #9597a0 !default;

.my-element 
{
    background-color: $teal;
}

Shades

Frontbx uses Sass functions to generate color shades (100 -> 900) for all palette colors and assign them as CSS Variables on :root. However doing this for all theme colors would obviously create a large amount of unnecessary CSS variables.

You can also access Base Color shades (100 -> 900) via Sass variables:

.my-element
{
    background-color: $teal-100;
}