style-guide

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 Yoast/wordpress-seo#6042)

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