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.
   4 // Prefer semantic color names such as `@colorText` below.
   5 @colorGray1: #000; // darkest
   6 @colorGray2: #222;
   7 @colorGray4: #444;
   8 @colorGray5: #54595d;
   9 @colorGray7: #72777d;
  10 @colorGray10: #a2a9b1;
  11 @colorGray12: #c8ccd1;
  12 @colorGray14: #eaecf0;
  13 @colorGray15: #f8f9fa; // lightest
  14 @colorBaseInverted: #fff;
  15
  16 // Semantic colors
  17 // Blue; for contextual use of a continuing action
  18 @colorProgressive: #36c;
  19 @colorProgressiveHighlight: #447ff5;
  20 @colorProgressiveActive: #2a4b8d;
  21 // Orange; for contextual use of returning to a past action
  22 @colorRegressive: #ff5d00;
  23 // Red; for contextual use of a negative action of high severity
  24 @colorDestructive: #d33;
  25 @colorDestructiveHighlight: #ff4242;
  26 @colorDestructiveActive: #b32424;
  27 // Orange; for contextual use of a potentially negative action of medium severity
  28 @colorMediumSevere: #ff5d00;
  29 // Yellow; for contextual use of a potentially negative action of low severity
  30 @colorLowSevere: #fc3;
  31
  32 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  33 @colorDarkenPercentage: 13.5%;
  34 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  35 @colorLightenPercentage: 13.5%;
  36
  37 // Text colors
  38 @colorText: @colorGray2;
  39 @colorTextLight: @colorGray5;
  40 @colorButtonText: @colorGray2;
  41 @colorButtonTextHighlight: @colorGray4;
  42 @colorButtonTextActive: @colorGray1;
  43 @colorDisabledText: @colorGray12;
  44 @colorErrorText: #c00;
  45 @colorWarningText: #705000;
  46
  47 // UI colors
  48 @backgroundColorInputBinaryChecked: @colorProgressive;
  49 @backgroundColorInputBinaryActive: @colorProgressiveActive;
  50 @colorFieldBorder: #a2a9b1;
  51 @colorShadow: @colorGray14;
  52 @colorPlaceholder: @colorGray10;
  53 @colorNeutral: @colorGray7;
  54
  55 // Border colors
  56 @borderColorInputBinaryChecked: @colorProgressive;
  57 @borderColorInputBinaryActive: @colorProgressiveActive;
  58
  59 // Checked radio input border-width, equal to OOUI at 14px base font-size
  60 @borderWidthRadioChecked: 0.4285em;
  61
  62 // Global border radius to be used to buttons and inputs
  63 @borderRadius: 2px;
  64
  65 // Box shadows
  66 @boxShadowWidget: inset 0 0 0 1px transparent;
  67 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
  68 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
  69 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
  70
  71 // Icon related variables
  72 @iconSize: 1.5em;
  73 @iconGutterWidth: 1em;
  74
  75 // Form input sizes, equal to OOUI at 14px base font-size
  76 @sizeInputBinary: 1.5625em;
  77
  78 // Deprecated color variables from when WikimediaUI color palette wasn't around
  79 // See https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_colors.html
  80 @colorGray3: #333;
  81 @colorGray6: #666;
  82 @colorGray8: #888;
  83 @colorGray9: #999;
  84 @colorGray11: #bbb;
  85 @colorGray13: #ddd;