White Label

Apply Skyline Brand and Action colors in your HTML and SCSS

• White Label Functions
  • get-brand-color
  • get-action-color
• White Label Classes
  • Background Color
  • Color
  • Border Color
  • Border Left Color
  • Border Right Color
  • Border Bottom Color
  • Border Top Color
  • Fill (svg only)
  • Stroke (svg only)
• Overview
  • Deprecated White Label Classes

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

Choose a utility class to apply.t-bgc--brandt-bgc-after--brandt-bgc-before--brandt-bgc-focus--brandt-bgc-hover--brandt-bgc-focus--brand-adjustedt-bgc-hover--brand-adjusted

Color

Choose a utility class to apply.t-color--brandt-color-after--brandt-color-before--brandt-color-focus--brandt-color-hover--brandt-color-focus--brand-adjustedt-color-hover--brand-adjusted

Goodness Matters

Border Color

Choose a utility class to apply.t-bc--brandt-bc-after--brandt-bc-before--brandt-bc-focus--brandt-bc-hover--brandt-bc-focus--brand-adjustedt-bc-hover--brand-adjusted

Border Left Color

Choose a utility class to apply.t-blc--brandt-blc-after--brandt-blc-before--brandt-blc-focus--brandt-blc-hover--brandt-blc-focus--brand-adjustedt-blc-hover--brand-adjusted

Border Right Color

Choose a utility class to apply.t-brc--brandt-brc-after--brandt-brc-before--brandt-brc-focus--brandt-brc-hover--brandt-brc-focus--brand-adjustedt-brc-hover--brand-adjusted

Border Bottom Color

Choose a utility class to apply.t-bbc--brandt-bbc-after--brandt-bbc-before--brandt-bbc-focus--brandt-bbc-hover--brandt-bbc-focus--brand-adjustedt-bbc-hover--brand-adjusted

Border Top Color

Choose a utility class to apply.t-btc--brandt-btc-after--brandt-btc-before--brandt-btc-focus--brandt-btc-hover--brandt-btc-focus--brand-adjustedt-btc-hover--brand-adjusted

Fill (svg only)

Choose a utility class to apply.t-fill--brandt-fill-focus--brandt-fill-hover--brandt-fill-focus--brand-adjustedt-fill-hover--brand-adjusted

Stroke (svg only)

Choose a utility class to apply.t-stroke--brandt-stroke-focus--brandt-stroke-hover--brandt-stroke-focus--brand-adjustedt-stroke-hover--brand-adjusted

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>