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 @colorProgressiveHighlight: #2962CC;
  25 // Green; for contextual use of a positive finalizing action
  26 @colorConstructive: #00af89;
  27 @colorConstructiveHighlight: #008C6D;
  28 // Orange; for contextual use of returning to a past action
  29 @colorRegressive: #FF5D00;
  30 // Red; for contextual use of a negative action of high severity
  31 @colorDestructive: #d11d13;
  32 @colorDestructiveHighlight: #A7170F;
  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: #FFB50D;
  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: @colorGray6;
  46 @colorButtonText: @colorGray5;
  47 @colorButtonTextHighlight: @colorGray7;
  48 @colorDisabledText: @colorGray12;
  49 @colorErrorText: #CC0000;
  50
  51 // UI colors
  52 @colorFieldBorder: @colorGray12;
  53 @colorShadow: @colorGray14;
  54 @colorPlaceholder: @colorGray10;
  55 @colorNeutral: @colorGray7;
  56
  57 // The following rules are deprecated
  58 @colorWhite: #fff;
  59 @colorOffWhite: #fafafa;
  60 @colorGrayDark: #898989;
  61 @colorGrayLight: #ccc;
  62 @colorGrayLighter: #ddd;
  63 @colorGrayLightest: #eee;
  64
  65 // Global border radius to be used to buttons and inputs
  66 @borderRadius: 2px;
  67
  68
  69 // Icon related variables
  70 @iconSize: 1.5em;
  71 @iconGutterWidth: 1em;