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 @colorBaseInverted: #fff;
  21
  22 // Semantic colors
  23 // Blue; for contextual use of a continuing action
  24 @colorProgressive: #36c;
  25 @colorProgressiveHighlight: #447ff5;
  26 @colorProgressiveActive: #2a4b8d;
  27 // Orange; for contextual use of returning to a past action
  28 @colorRegressive: #ff5d00;
  29 // Red; for contextual use of a negative action of high severity
  30 @colorDestructive: #d33;
  31 @colorDestructiveHighlight: #ff4242;
  32 @colorDestructiveActive: #b32424;
  33 // Orange; for contextual use of a potentially negative action of medium severity
  34 @colorMediumSevere: #ff5d00;
  35 // Yellow; for contextual use of a potentially negative action of low severity
  36 @colorLowSevere: #fc3;
  37
  38 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  39 @colorDarkenPercentage: 13.5%;
  40 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  41 @colorLightenPercentage: 13.5%;
  42
  43 // Text colors
  44 @colorText: @colorGray2;
  45 @colorTextLight: @colorGray5;
  46 @colorButtonText: @colorGray2;
  47 @colorButtonTextHighlight: @colorGray4;
  48 @colorButtonTextActive: @colorGray1;
  49 @colorDisabledText: @colorGray12;
  50 @colorErrorText: #c00;
  51 @colorWarningText: #705000;
  52
  53 // UI colors
  54 @backgroundColorInputBinaryChecked: @colorProgressive;
  55 @backgroundColorInputBinaryActive: @colorProgressiveActive;
  56 @colorFieldBorder: #a2a9b1;
  57 @colorShadow: @colorGray14;
  58 @colorPlaceholder: @colorGray10;
  59 @colorNeutral: @colorGray7;
  60
  61 // Border colors
  62 @borderColorInputBinaryChecked: @colorProgressive;
  63 @borderColorInputBinaryActive: @colorProgressiveActive;
  64
  65 // Checked radio input border-width, equal to OOUI at 14px base font-size
  66 @borderWidthRadioChecked: 0.4285em;
  67
  68 // Global border radius to be used to buttons and inputs
  69 @borderRadius: 2px;
  70
  71 // Box shadows
  72 @boxShadowWidget: inset 0 0 0 1px transparent;
  73 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
  74 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
  75 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
  76
  77 // Icon related variables
  78 @iconSize: 1.5em;
  79 @iconGutterWidth: 1em;
  80
  81 // Form input sizes, equal to OOUI at 14px base font-size
  82 @sizeInputBinary: 1.5625em;