Manager

Back Back Up Advanced Editor

// See https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
// Colors copied from https://codepen.io/hugobaeta/pen/RNOzoV

$color-wp-blue: #0073aa;
$color-medium-blue: #00a0d2;
$color-light-blue: #00b9eb;

$color-ultra-dark-gray: #191e23;
$color-dark-gray: #23282d;
$color-base-gray: #32373c;
$color-dark-medium-gray: lighten($color-base-gray,15%);
$color-dark-silver-gray: #82878c;
$color-silver-gray: #a0a5aa;
$color-light-silver-gray: #b4b9be;
// $color-medium-gray: mix($color-base-gray,$color-dark-silver-gray,20%);
$color-medium-gray: #999;

$color-gray-900: $color-ultra-dark-gray;
$color-gray-800: $color-dark-gray;
$color-gray-700: $color-base-gray;
$color-gray-600: lighten($color-base-gray,6%);
$color-gray-500: lighten($color-base-gray,15%);
$color-gray-400: lighten($color-base-gray,20%);
$color-gray-300: lighten($color-base-gray,25%);
$color-gray-200: lighten($color-base-gray,32%);
$color-gray-100: lighten($color-base-gray,38%);

$color--gray-light-900: lighten($color-base-gray,45%);
$color--gray-light-800: lighten($color-base-gray,52%);
$color--gray-light-700: lighten($color-base-gray,60%);
$color--gray-light-600: lighten($color-base-gray,64%);
$color--gray-light-500: lighten($color-base-gray,68%);
$color--gray-light-400: lighten($color-base-gray,70%);
$color--gray-light-300: lighten($color-base-gray,72%);
$color--gray-light-200: lighten($color-base-gray,74%);
$color--gray-light-100: lighten($color-base-gray,77%);

$color-accent-red: #dc3232;
$color-accent-fire-orange: #d54e21;
$color-accent-orange: #f56e28;
$color-accent-yellow: #ffb900;
$color-accent-green: #46b450; //old #64b450;
$color-accent-blue: $color-medium-blue;
$color-accent-purple: #826eb4;

//Tints and Tones and Shades - Oh My!

$color-accent-red-shade30: shade($color-accent-red,30%);
$color-accent-red-shade20: shade($color-accent-red,20%);
$color-accent-red-shade10: shade($color-accent-red,10%);
$color-accent-red-tint20: tint($color-accent-red,20%);
$color-accent-red-tint40: tint($color-accent-red,40%);
$color-accent-red-tint60: tint($color-accent-red,60%);
$color-accent-red-tint90: tint($color-accent-red,90%);

$color-accent-fire-orange-shade10: shade($color-accent-fire-orange,10%);
$color-accent-fire-orange-shade5: shade($color-accent-fire-orange,5%);
$color-accent-orange-tint20: tint($color-accent-orange,20%);
$color-accent-orange-tint40: tint($color-accent-orange,40%);
$color-accent-orange-tint60: tint($color-accent-orange,60%);
$color-accent-orange-tint90: tint($color-accent-orange,90%);

$color-accent-yellow-tonefire40: mix($color-accent-fire-orange,$color-accent-yellow,40%);
$color-accent-yellow-tonefire20: mix($color-accent-fire-orange,$color-accent-yellow,20%);
$color-accent-yellow-tint20: tint($color-accent-yellow,20%);
$color-accent-yellow-tint40: tint($color-accent-yellow,40%);
$color-accent-yellow-tint60: tint($color-accent-yellow,60%);
$color-accent-yellow-tint90: tint($color-accent-yellow,90%);

$color-accent-green-toneblue5shade25: shade(mix($color-wp-blue, $color-accent-green,5%),25%);
$color-accent-green-toneblue5shade15: shade(mix($color-wp-blue, $color-accent-green,5%),15%);
$color-accent-green-tint20: tint($color-accent-green,20%);
$color-accent-green-tint40: tint($color-accent-green,40%);
$color-accent-green-tint60: tint($color-accent-green,60%);
$color-accent-green-tint70: tint($color-accent-green,70%);
$color-accent-green-tint90: tint($color-accent-green,90%);

$color-accent-wp-blue-shade10: shade($color-wp-blue,10%);
$color-accent-blue-toneblue80: mix($color-wp-blue,$color-accent-blue,80%);
$color-accent-blue-toneblue60: mix($color-wp-blue,$color-accent-blue,60%);
$color-accent-blue-toneblue40: mix($color-wp-blue,$color-accent-blue,40%);
$color-accent-blue-tint20: tint($color-accent-blue,20%);
$color-accent-blue-tint40: tint($color-accent-blue,40%);
$color-accent-blue-tint60: tint($color-accent-blue,60%);
$color-accent-blue-tint75: tint($color-accent-blue,75%);
$color-accent-blue-tint90: tint($color-accent-blue,90%);

$color-accent-purple-shade40: shade($color-accent-purple,40%);
$color-accent-purple-shade20: shade($color-accent-purple,20%);
$color-accent-purple-tint20: tint($color-accent-purple,20%);
$color-accent-purple-tint40: tint($color-accent-purple,40%);
$color-accent-purple-tint60: tint($color-accent-purple,60%);
$color-accent-purple-tint90: tint($color-accent-purple,90%);

//Text Colors
$textcolor-dark: rgba($color-base-gray,.8);
$textcolor-dark-mid: rgba($color-base-gray,.5);
$textcolor-light: rgba(#fff,.8);
$textcolor-light-mid: rgba(#fff,.5);