@yoast/style-guide NPM

Style guide

Design guidelines for use within different Yoast projects. Includes a shiny colors palette.

General guidelines:

all palette colors variables must be prefixed with $palette_
do not use $palette_* variables directly, instead map them to other color variables with prefix $color_ and use these in the various locations
use underscores _ instead of hyphens - for variable names; note that in Sass variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably
prefer underscores anyways
do not use rgba colors in the palette, instead use the rgba() function on specific locations
platform specific colors (e.g. WordPress focus style) shouldn't be part of the palette or hardcoded in reusable components
add new colors only if they're really needed: if they're used just once or twice, they're probably not needed

Helper functions:

for use in the JS components, the rgba() function can be used to output a CSS rgba color. Usage examples:

${ rgba( "#ff0000", .8 ) }
${ rgba( "#f00", .8 ) }
${ rgba( `${ colors.$color_red }`, .8 ) }

Removed/replaced colors:

$color_border: #f7f7f7;					renamed in $color_border_light: #f7f7f7;
$color_buttons: #555555;				replaced with $color_button_text: #555;
$color_caret: #555555;					removed and replaced with $color_grey_dark: #555;
$color_caret_focus: #1074a8;			removed and replaced with #$color_blue: #0075b3;
$color_caret_hover: #bfbfbf;			removed and replaced with $color_grey_text: #646464;
$color_input_border_focus: #1074a8;		removed, the platform should take care of focus styles
$color_progress_background: #f7f7f7;	removed and replaced with $color_background_light: #f7f7f7;
$color-shadow-*							removed all, they were duplicating the base colors; use the base colors instead.

Changed colors:

$color_border: #f7f7f7;					mapped to $palette_grey_medium #ccc;
$color_button_border: #dbdbdb;			mapped to $palette_grey_medium: #ccc;
$color-error: #E23132;					changed in $color_error > $palette_red: #dc3232;
$color-grey: #DCDCDC;					changed in $color_grey: #ddd;
$color-grey-cta: #DCDCDC;				mapped to $palette_grey: #ddd;
$color-grey-hover: #CDCDCD;				changed in $color_grey_hover: darken( $palette_grey, 6% );
$color-grey-line: #E6E6E6;				mapped to $palette_grey: #ddd;
$color-grey-quote: #8C8C8C;				mapped to $palette_grey_text: #646464;
$color-grey-text: #646464;				mapped to $palette_grey_text: #646464;
$color_input_border: #bfbfbf;			mapped to $palette_grey: #ddd;
$color_marker_disabled: #e6e6e6;		mapped to $palette_grey_disabled: #a0a5aa;
$color-orange-hover: #F58223;			changed in $color_orange_hover: darken( $palette_orange, 5% );
$color-pink: #D93F69;					changed in $color_pink: #d73763;
$color-pink-light: #D93F69;				changed in $color_pink_light: #e1bee7;

New colors:

$palette_green_medium:		#008a00;
$palette_grey:              #ddd;
$palette_grey_disabled:     #a0a5aa; // Should be used only for disabled controls text.
$palette_grey_light:        #f1f1f1;
$palette_grey_medium:       #ccc;
$palette_grey_medium_dark:  #888;
$palette_pink_light:        #e1bee7;

Snippet preview colors:

(see https://github.com/Yoast/wordpress-seo/issues/6042)

$color_google_title:     #1a0dab;
$color_google_url:       #006621;
$color_google_date:      #808080;
$color_google_desc:      #545454;
$color_google_desc_bold: #6a6a6a;