//Color guide for Wikipedia Android App



// COLOR HEX //

// Accent colors - blues
@accent-color-10 : #EAF3FF;
@accent-color-50 : #36c;
@accent-color-90 : #2A4B8D;


// Base colors - all greys 
@base-color-0: #FFFFFF;
@base-color-10: #F5F6F7;
@base-color-20: #EAECF0;
@base-color-40: #C8CCD1;
@base-color-50: #A2A9B1;
@base-color-70: #7D8389;
@base-color-80: #71777D;
@base-color-90: #222222;
@base-color-100: #000000;


// Negative  reds
@n-color-10: #FFE7E6;
@n-color-50: #CC3333;
@n-color-90: #873636;


// Positive greens
@p-color-10: #D5FDF4;
@p-color-50: #00AF89;
@p-color-90: #296054;


// Warning / highlight
@h-color-10: #FEF6E7;
@h-color-50: #FFCC33;
@h-color-90: #7B4E10;


// USE OF COLOR //

// main app tint color
@app-tint-color: @accent-color-50;


//layouts
@app-background: @base-color-20;
@content-background: @base-color-0;
@article-background: @content-background;
@card-background: @content-background;

// specific ui elements
@article-action-toolbar: @base-color-80;
@article-tabs-view-background: @base-color-90;

// new navigation ui elements
@app-bottom-bar: @base-color-0;
@app-bottom-bar-icon-selected: @app-tint-color;
@app-bottom-bar-icon-unselected: @base-color-50;
@app-top-brand-background: @app-tint-color;

// common UI elements - use app tint color (blue) for all ui elements. 
@raised-button-background: @app-tint-color;
@raised-button-text: @base-color-0;
@textfield-tint: @app-tint-color;
@textfield-label: @app-tint-color;
@flat-button: @app-tint-color;
@floating-action-button: @app-tint-color;
@article-loading-bar: @app-tint-color;

//Feed card icons
@card-header-default: @base-color-50;
@card-header-featured: @h-color-50;
@card-header-trending: @accent-color-50;
@today-on-wikipedia-icon: @p-color-50;
@randomizer-icon: @accent-color-50;

// card actions  e.g. Download, share
@card-action: @base-color-50;

// any placeholders, including list items
@image-placeholder-background: @base-color-20;
@image-placeholder-icon: @base-color-50;


// article body
@article-text: @base-color-90;
@article-blue-link:  @app-tint-color;
@article-red-link: @n-color-50;
@article-metadata: @base-color-50;
@wikidata-description: @article-metadata;
@article-title-divider: @article-metadata;