Flexible Framework: Color Variables

Color Variables: Code

Set base colors. Set the percentages by which the base colors are darkened. Set the percentages by which the base colors are lightened. Set lightened and darkened colors manually.

/* --------------- Color Variables --------------- */

/* Colors - Set base colors. */
$black: #000;
$white: #fff;
$gray: #8e8e93;
$primary: #007aff; /* Blue */
$success: #28cd41; /* Green */
$danger: #ff3b30; /* Red */
$warning: #ff9500; /* Orange */
$info: #009193; /* Aqua */
$harvest: #ffcc00; /* Yellow */
$royal: #af52de; /* Purple */

/* Colors Darkened - Set the percentages by which the base colors are darkened. */
$darkest: 25%;
$darker: 15%;
$dark: 5%;

/* Colors Lightened - Set the percentages by which the base colors are lightened. */
$lightest: 35%;
$lighter: 25%;
$light: 15%;

/* Colors Darkened & Lightened - Directly alter the dark and light version of the base colors. */
$gray-darkest: darken($gray, $darkest);
$gray-darker: darken($gray, $darker);
$gray-dark: darken($gray, $dark);
$gray-light: lighten($gray, $light);
$gray-lighter: lighten($gray, $lighter);
$gray-lightest: lighten($gray, $lightest);

$primary-darkest: darken($primary, $darkest);
$primary-darker: darken($primary, $darker);
$primary-dark: darken($primary, $darker);
$primary-light: lighten($primary, $light);
$primary-lighter: lighten($primary, $lighter);
$primary-lightest: lighten($primary, $lightest);

$success-darkest: darken($success, $darkest);
$success-darker: darken($success, $darker);
$success-dark: darken($success, $dark);
$success-light: lighten($success, $light);
$success-lighter: lighten($success, $lighter);
$success-lightest: lighten($success, $lightest);

$danger-darkest: darken($danger, $darkest);
$danger-darker: darken($danger, $darker);
$danger-dark: darken($danger, $dark);
$danger-light: lighten($danger, $light);
$danger-lighter: lighten($danger, $lighter);
$danger-lightest: lighten($danger, $lightest);

$warning-darkest: darken($warning, $darkest);
$warning-darker: darken($warning, $darker);
$warning-dark: darken($warning, $dark);
$warning-light: lighten($warning, $light);
$warning-lighter: lighten($warning, $lighter);
$warning-lightest: lighten($warning, $lightest);

$info-darkest: darken($info, $darkest);
$info-darker: darken($info, $darker);
$info-dark: darken($info, $dark);
$info-light: lighten($info, $light);
$info-lighter: lighten($info, $lighter);
$info-lightest: lighten($info, $lightest);

$harvest-darkest: darken($harvest, $darkest);
$harvest-darker: darken($harvest, $darker);
$harvest-dark: darken($harvest, $dark);
$harvest-light: lighten($harvest, $light);
$harvest-lighter: lighten($harvest, $lighter);
$harvest-lightest: lighten($harvest, $lightest);

$royal-darkest: darken($royal, $darkest);
$royal-darker: darken($royal, $darker);
$royal-dark: darken($royal, $dark);
$royal-light: lighten($royal, $light);
$royal-lighter: lighten($royal, $lighter);
$royal-lightest: lighten($royal, $lightest);

/* --------------- /Color Variables --------------- */

Color Variables: Required By

SCSS files that require the code in _color-variables.scss.

• _background-colors.scss
• _color.scss