// Colors for use in mediawiki.ui and elsewhere

// Although this defines many shades, be parsimonious in your own use of grays. Prefer
// colors already in use in MediaWiki. Prefer semantic color names such as "@colorText".
@colorGray1: #000; // darkest
@colorGray2: #222;
@colorGray3: #333;
@colorGray4: #444;
@colorGray5: #54595d;
@colorGray6: #666;
@colorGray7: #72777d;
@colorGray8: #888;
@colorGray9: #999;
@colorGray10: #a2a9b1;
@colorGray11: #bbb;
@colorGray12: #c8ccd1;
@colorGray13: #ddd;
@colorGray14: #eaecf0;
@colorGray15: #f8f9fa; // lightest

// Semantic background colors
// Blue; for contextual use of a continuing action
@colorProgressive: #36c;
@colorProgressiveHighlight: #447ff5;
@colorProgressiveActive: #2a4b8d;
// Orange; for contextual use of returning to a past action
@colorRegressive: #ff5d00;
// Red; for contextual use of a negative action of high severity
@colorDestructive: #d33;
@colorDestructiveHighlight: #ff4242;
@colorDestructiveActive: #b32424;
// Orange; for contextual use of a potentially negative action of medium severity
@colorMediumSevere: #ff5d00;
// Yellow; for contextual use of a potentially negative action of low severity
@colorLowSevere: #fc3;

// Used in mixins to darken contextual colors by the same amount (eg. focus)
@colorDarkenPercentage: 13.5%;
// Used in mixins to lighten contextual colors by the same amount (eg. hover)
@colorLightenPercentage: 13.5%;

// Text colors
@colorText: @colorGray2;
@colorTextLight: @colorGray6;
@colorButtonText: @colorGray2;
@colorButtonTextHighlight: @colorGray4;
@colorButtonTextActive: @colorGray1;
@colorDisabledText: @colorGray12;
@colorErrorText: #c00;
@colorWarningText: #705000;

// UI colors
@colorFieldBorder: #a2a9b1;
@colorShadow: @colorGray14;
@colorPlaceholder: @colorGray10;
@colorNeutral: @colorGray7;

// Global border radius to be used to buttons and inputs
@borderRadius: 2px;

// Icon related variables
@iconSize: 1.5em;
@iconGutterWidth: 1em;

// Form input sizes
@checkboxSize: 2em;
@radioSize: 2em;
