Quickly pin down your brand's palette with some of the following techniques. Jack uses a number of generator functions behind the scenes to compile utility derivatives for a set of brand colors and colors that convey stateful meaning.
A carefully curated list of colors, grouped inside meaningful maps, leads to pre-generated components with your respective color themes intact. For a more ad-hoc approach, color variables can be pulled directly into components.
The examples below illustrate components which inherit brand or state color map set derivatives.
map-merge functionality of Sass to add new colors to your brand array mapping.// Testing out a new brand color
@import 'jack/settings/colors';
$colors_brand: map-merge($colors_brand, (experimental: #fa7162));
// Outputs
.btn--experimental { /* Salmon-flavored styles */ }
.alert--experimental { /* Salmon-flavored styles */ }
.divider--experimental { /* Salmon-flavored styles */ }
.card--experimental { /* Salmon-flavored styles */ }Qui optio qui mollitia repellendus quaerat laudantium dolor. Et facere nulla magnam. Quos et dolorem dolorem recusandae.Look
map-remove functionality of Sass to remove colors from your brand array mapping.// Removing default "secondary" brand color
@import 'jack/settings/colors';
$colors_brand: map-remove($colors_brand, (secondary));$colors_states array map. This map is looped through by components like buttons, cards, and alerts. Use the native map-merge functionality of Sass to add colors from your brand array mapping. The underpinnings are identical to brand color extension, the key difference being semantics reserved for indicating component state.// Add a 'welcome' state
@import 'jack/settings/colors';
$colors_brand: map-merge($colors_states, (welcome: #8bc34a));
// Outputs
.btn--welcome { background: #8bc34a; }
.alert--welcome { background: #8bc34a; }
.divider--welcome { background: #8bc34a; }
.card--welcome { background: #8bc34a; }Qui optio qui mollitia repellendus quaerat laudantium dolor. Et facere nulla magnam. Quos et dolorem dolorem recusandae.Look
color, background, border-color, or fill You may also pass rgb/rgba/hsl properties as the base color.// Generate shade derivative classes
@include generate-color-ticks('class', 'bg latte', #5258C7, 'background', 'lighten', 10%, 5);
// Outputs
.bg-latte-1 { background: #af9755; }
.bg-latte-2 { background: #bdaa74; }
.bg-latte-3 { background: #ccbd94; }
.bg-latte-4 { background: #dbd0b3; }
.bg-latte-5 { background: #eae3d2; }color, background, border-color, or fill. You may also pass rgb/rgba/hsl properties as the base color.// Generate shade derivatives placeholders
@include generate-color-ticks('placeholder', 'bg brand', #5258C7, 'background', 'darken', 10%, 5);
.section--angled:nth-of-type(1):after { @extend %bg_brand_3; }
.section--angled:nth-of-type(2):after { @extend %bg_brand_2; }
.section--angled:nth-of-type(3):after { @extend %bg_brand_4; }