resources/src/mediawiki.less/mediawiki.ui/variables.less

   1 /**
   2  * Minimum available screen width at which a device can be considered a mobile device
   3  * Many older feature phones have screens smaller than this value.
   4  * Number is prone to change with new information.
   5  * @since 1.31
   6  */
   7 @width-breakpoint-mobile: 320px;
   8
   9 /**
  10  * Minimum available screen width at which a device can be considered a tablet
  11  * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
  12  * enough to cover iPad (768px). Number is prone to change with new information.
  13  * @since 1.31
  14  */
  15 @width-breakpoint-tablet: 720px;
  16 /**
  17  * Minimum available screen width at which a device can be considered a desktop
  18  * Number is prone to change with new information.
  19  * @since 1.31
  20  */
  21 @width-breakpoint-desktop: 1000px;
  22
  23 // Colors for use in mediawiki.ui and elsewhere
  24
  25 // Although this defines many shades, be parsimonious in your own use of grays.
  26 // Prefer semantic color names such as `@colorText` below.
  27 @colorGray1: #000; // darkest
  28 @colorGray2: #222;
  29 @colorGray4: #444;
  30 @colorGray5: #54595d;
  31 @colorGray7: #72777d;
  32 @colorGray10: #a2a9b1;
  33 @colorGray12: #c8ccd1;
  34 @colorGray14: #eaecf0;
  35 @colorGray15: #f8f9fa; // lightest
  36 @colorBaseInverted: #fff;
  37
  38 // Semantic colors
  39 // Blue; for contextual use of a continuing action
  40 @colorProgressive: #36c;
  41 @colorProgressiveHighlight: #447ff5;
  42 @colorProgressiveActive: #2a4b8d;
  43 // Orange; for contextual use of returning to a past action
  44 @colorRegressive: #ff5d00;
  45 // Red; for contextual use of a negative action of high severity
  46 @colorDestructive: #d33;
  47 @colorDestructiveHighlight: #ff4242;
  48 @colorDestructiveActive: #b32424;
  49 // Orange; for contextual use of a potentially negative action of medium severity
  50 @colorMediumSevere: #ff5d00;
  51 // Yellow; for contextual use of a potentially negative action of low severity
  52 @colorLowSevere: #fc3;
  53
  54 // Used in mixins to darken contextual colors by the same amount (eg. focus)
  55 @colorDarkenPercentage: 13.5%;
  56 // Used in mixins to lighten contextual colors by the same amount (eg. hover)
  57 @colorLightenPercentage: 13.5%;
  58
  59 // Text colors
  60 @colorText: @colorGray2;
  61 @colorTextLight: @colorGray5;
  62 @colorButtonText: @colorGray2;
  63 @colorButtonTextHighlight: @colorGray4;
  64 @colorButtonTextActive: @colorGray1;
  65 @colorDisabledText: @colorGray12;
  66 @colorErrorText: #d33;
  67 @colorWarningText: #705000;
  68
  69 // UI colors
  70 @backgroundColorInputBinaryChecked: @colorProgressive;
  71 @backgroundColorInputBinaryActive: @colorProgressiveActive;
  72 @colorFieldBorder: #a2a9b1;
  73 @colorShadow: @colorGray14;
  74 @colorPlaceholder: @colorGray10;
  75 @colorNeutral: @colorGray7;
  76
  77 // Border colors
  78 @borderColorInputBinaryChecked: @colorProgressive;
  79 @borderColorInputBinaryActive: @colorProgressiveActive;
  80
  81 // Checked radio input border-width, equal to OOUI at 14px base font-size
  82 @borderWidthRadioChecked: 0.4285em;
  83
  84 // Global border radius to be used to buttons and inputs
  85 @borderRadius: 2px;
  86
  87 // Box shadows
  88 @boxShadowWidget: inset 0 0 0 1px transparent;
  89 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
  90 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
  91 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
  92
  93 // Icon related variables
  94 @iconSize: 1.5em;
  95 @iconGutterWidth: 1em;
  96
  97 // Form input sizes, equal to OOUI at 14px base font-size
  98 @sizeInputBinary: 1.5625em;
  99
 100 // Deprecated color variables from when WikimediaUI color palette wasn't around
 101 // See https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_colors.html
 102 @colorGray3: #333;
 103 @colorGray6: #666;
 104 @colorGray8: #888;
 105 @colorGray9: #999;
 106 @colorGray11: #bbb;
 107 @colorGray13: #ddd;