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 @colorProgressiveActive: #2962cc;
  26 // Green; for contextual use of a positive finalizing action
  27 @colorConstructive: #00af89;
  28 @colorConstructiveHighlight: #008c6d;
  29 @colorConstructiveActive: #008c6d;
  30 // Orange; for contextual use of returning to a past action
  31 @colorRegressive: #ff5d00;
  32 // Red; for contextual use of a negative action of high severity
  33 @colorDestructive: #d11d13;
  34 @colorDestructiveHighlight: #a7170f;
  35 @colorDestructiveActive: #a7170f;
  36 // Orange; for contextual use of a potentially negative action of medium severity
  37 @colorMediumSevere: #ff5d00;
  38 // Yellow; for contextual use of a potentially negative action of low severity
  39 @colorLowSevere: #ffb50d;
  40
  41 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  42 @colorDarkenPercentage: 13.5%;
  43 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  44 @colorLightenPercentage: 13.5%;
  45
  46 // Text colors
  47 @colorText: @colorGray2;
  48 @colorTextLight: @colorGray6;
  49 @colorButtonText: @colorGray5;
  50 @colorButtonTextHighlight: @colorGray7;
  51 @colorButtonTextActive: @colorGray7;
  52 @colorDisabledText: @colorGray12;
  53 @colorErrorText: #c00;
  54
  55 // UI colors
  56 @colorFieldBorder: @colorGray12;
  57 @colorShadow: @colorGray14;
  58 @colorPlaceholder: @colorGray10;
  59 @colorNeutral: @colorGray7;
  60
  61 // The following rules are deprecated
  62 @colorWhite: #fff;
  63 @colorOffWhite: #fafafa;
  64 @colorGrayDark: #898989;
  65 @colorGrayLight: #ccc;
  66 @colorGrayLighter: #ddd;
  67 @colorGrayLightest: #eee;
  68
  69 // Global border radius to be used to buttons and inputs
  70 @borderRadius: 2px;
  71
  72 // Icon related variables
  73 @iconSize: 1.5em;
  74 @iconGutterWidth: 1em;
  75
  76 // Form input sizes
  77 @checkboxSize: 2em;
  78 @radioSize: 2em;