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: #111; // darkest
   6 @colorGray2: #222;
   7 @colorGray3: #333;
   8 @colorGray4: #444;
   9 @colorGray5: #555;
  10 @colorGray6: #666;
  11 @colorGray7: #777;
  12 @colorGray8: #888;
  13 @colorGray9: #999;
  14 @colorGray10: #AAA;
  15 @colorGray11: #BBB;
  16 @colorGray12: #CCC;
  17 @colorGray13: #DDD;
  18 @colorGray14: #EEE;
  19 @colorGray15: #F9F9F9; // lightest
  20
  21 // Semantic background colors
  22 // Blue; for contextual use of a continuing action
  23 @colorProgressive: #347bff;
  24 // Green; for contextual use of a positive finalizing action
  25 @colorConstructive: #00af89;
  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: #d11d13;
  30 // Orange; for contextual use of a potentially negative action of medium severity
  31 @colorMediumSevere: #FF5D00;
  32 // Yellow; for contextual use of a potentially negative action of low severity
  33 @colorLowSevere: #FFB50D;
  34
  35 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  36 @colorDarkenPercentage: 13.5%;
  37 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  38 @colorLightenPercentage: 13.5%;
  39
  40 // Text colors
  41 @colorText: @colorGray2;
  42 @colorTextLight: @colorGray6;
  43 @colorButtonText: @colorGray5;
  44 @colorDisabledText: @colorGray12;
  45 @colorErrorText: #CC0000;
  46
  47 // UI colors
  48 @colorFieldBorder: @colorGray12;
  49 @colorShadow: @colorGray14;
  50 @colorPlaceholder: @colorGray10;
  51 @colorNeutral: @colorGray7;
  52
  53 // The following rules are deprecated
  54 @colorWhite: #fff;
  55 @colorOffWhite: #fafafa;
  56 @colorGrayDark: #898989;
  57 @colorGrayLight: #ccc;
  58 @colorGrayLighter: #ddd;
  59 @colorGrayLightest: #eee;
  60
  61 // Global border radius to be used to buttons and inputs
  62 @borderRadius: 2px;
  63
  64
  65 // Icon related variables
  66 @iconSize: 1.4em;
  67 @iconGutterWidth: 1em;