resources/src/mediawiki.less/mediawiki.ui/variables.less

   1 // Colors for use in mediawiki.ui and elsewhere
   2
   3 // Although this defines many shades, be parsimonious in your own use of grays. Prefer
   4 // colors already in use in MediaWiki. Prefer semantic color names such as "@colorText".
   5 @colorGray1: #000; // darkest
   6 @colorGray2: #222;
   7 @colorGray3: #333;
   8 @colorGray4: #444;
   9 @colorGray5: #54595d;
  10 @colorGray6: #666;
  11 @colorGray7: #72777d;
  12 @colorGray8: #888;
  13 @colorGray9: #999;
  14 @colorGray10: #a2a9b1;
  15 @colorGray11: #bbb;
  16 @colorGray12: #c8ccd1;
  17 @colorGray13: #ddd;
  18 @colorGray14: #eaecf0;
  19 @colorGray15: #f8f9fa; // lightest
  20
  21 // Semantic background colors
  22 // Blue; for contextual use of a continuing action
  23 @colorProgressive: #36c;
  24 @colorProgressiveHighlight: #447ff5;
  25 @colorProgressiveActive: #2a4b8d;
  26 // Orange; for contextual use of returning to a past action
  27 @colorRegressive: #ff5d00;
  28 // Red; for contextual use of a negative action of high severity
  29 @colorDestructive: #d33;
  30 @colorDestructiveHighlight: #ff4242;
  31 @colorDestructiveActive: #b32424;
  32 // Orange; for contextual use of a potentially negative action of medium severity
  33 @colorMediumSevere: #ff5d00;
  34 // Yellow; for contextual use of a potentially negative action of low severity
  35 @colorLowSevere: #fc3;
  36
  37 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  38 @colorDarkenPercentage: 13.5%;
  39 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  40 @colorLightenPercentage: 13.5%;
  41
  42 // Text colors
  43 @colorText: @colorGray2;
  44 @colorTextLight: @colorGray6;
  45 @colorButtonText: @colorGray2;
  46 @colorButtonTextHighlight: @colorGray4;
  47 @colorButtonTextActive: @colorGray1;
  48 @colorDisabledText: @colorGray12;
  49 @colorErrorText: #c00;
  50 @colorWarningText: #705000;
  51
  52 // UI colors
  53 @colorFieldBorder: #a2a9b1;
  54 @colorShadow: @colorGray14;
  55 @colorPlaceholder: @colorGray10;
  56 @colorNeutral: @colorGray7;
  57
  58 // Global border radius to be used to buttons and inputs
  59 @borderRadius: 2px;
  60
  61 // Icon related variables
  62 @iconSize: 1.5em;
  63 @iconGutterWidth: 1em;
  64
  65 // Form input sizes
  66 @checkboxSize: 2em;
  67 @radioSize: 2em;