# White Label

Apply Skyline Brand and Action colors in your HTML and SCSS

Skyline is built to be a fully white labelled design system. These utility classes and SCSS functions can be used to apply the current theme by including them in your application that has a theme applied. If no theme exists the components will fall back to Benevity's default colors.

# White Label Functions

# get-brand-color

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';
get-brand-color($adjusted);
Returns
Parameters
$adjusted: <bool>
Default value:false

# get-action-color

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';
get-brand-color($adjusted);
Returns
Parameters
$adjusted: <bool>
Default value:false

# White Label Classes

Please Note

The examples here are using the Benevity color scheme.

Read more about Skyline's approach to white labelled colors.

Some states will require either you to either hover or focus the example element to see the class application.

# Background Color

# Color

Goodness Matters

# Border Color

# Border Left Color

# Border Right Color

# Border Bottom Color

# Border Top Color

# Fill (svg only)

# Stroke (svg only)

# Overview

The White Label utility classes are composed in the following format:

{prefix} - {css property} - {optional state modifier} -- {colour modifier} {
  {css property}: {colour modifier} !important;
}
  • prefix

    • Following the BEMIT standard we prefix all css classes. White label uses the t prefix to tell developers this class is controlling theme
  • css property

    • The (when appropriate) shortened form of the CSS property this class controls
      • bgc = background-color
      • color = color
      • fill = fill (used for SVGs that use fill instead of stroke)
      • stroke = stroke (used for SVGs the use stroke instead of fill)
      • bc = border-color
      • blc = border-left-color
      • brc = border-right-color
      • bbc = border-bottom-color
  • optional state modifier

    • Sometimes you only need a colour to appear on certain pseudo-selector or pseudo-element
      • -focus = only applies the property on :focus
      • -hover = only applies the property on :hover
      • There's also special modifier classes for retrieving theme modified brand colors.
        • -after = only applies the property to the ::after pseudo-element
        • -before = only applies the property to the ::before pseudo-element
  • colour modifier

    • Which type of colour is being applied to the css property. EG: --brand
    • --brand-adjusted will apply the auto-calculated color mostly used for hover states or border colors.

# Deprecated White Label Classes

We are deprecating all classes with the modifier of {property}--brand-focus and {property}--brand-hover. They have been replaced by {property}-focus--brand-adjusted and {property}-hover--brand-adjusted.

For example if your component has

<div class="t-bgc--brand-hover"></div>

It would be turned into

<div class="t-bgc-hover--brand-adjusted"></div>