# 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
To use these styles in a Vue component SCSS, you’ll need:
@import '~@skyline/scss/src/core/UI.required';
get-brand-color($adjusted);
$adjusted: <bool>
false
# get-action-color
To use these styles in a Vue component SCSS, you’ll need:
@import '~@skyline/scss/src/core/UI.required';
get-brand-color($adjusted);
$adjusted: <bool>
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
# 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
- Following the BEMIT standard we prefix all css classes. White label uses
the
css property
- The (when appropriate) shortened form of the CSS property this class
controls
bgc
= background-colorcolor
= colorfill
= fill (used for SVGs that use fill instead of stroke)stroke
= stroke (used for SVGs the use stroke instead of fill)bc
= border-colorblc
= border-left-colorbrc
= border-right-colorbbc
= border-bottom-color
- The (when appropriate) shortened form of the CSS property this class
controls
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
- Sometimes you only need a colour to appear on certain pseudo-selector or
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.
- Which type of colour is being applied to the css property. EG:
# 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>