1 // Colors for use in mediawiki.ui and elsewhere
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: #000; // darkest
14 @colorGray10: #a2a9b1;
16 @colorGray12: #c8ccd1;
18 @colorGray14: #eaecf0;
19 @colorGray15: #f8f9fa; // lightest
20 @colorBaseInverted: #fff;
23 // Blue; for contextual use of a continuing action
24 @colorProgressive: #36c;
25 @colorProgressiveHighlight: #447ff5;
26 @colorProgressiveActive: #2a4b8d;
27 // Orange; for contextual use of returning to a past action
28 @colorRegressive: #ff5d00;
29 // Red; for contextual use of a negative action of high severity
30 @colorDestructive: #d33;
31 @colorDestructiveHighlight: #ff4242;
32 @colorDestructiveActive: #b32424;
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: #fc3;
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%;
44 @colorText: @colorGray2;
45 @colorTextLight: @colorGray5;
46 @colorButtonText: @colorGray2;
47 @colorButtonTextHighlight: @colorGray4;
48 @colorButtonTextActive: @colorGray1;
49 @colorDisabledText: @colorGray12;
50 @colorErrorText: #c00;
51 @colorWarningText: #705000;
54 @backgroundColorInputBinaryChecked: @colorProgressive;
55 @backgroundColorInputBinaryActive: @colorProgressiveActive;
56 @colorFieldBorder: #a2a9b1;
57 @colorShadow: @colorGray14;
58 @colorPlaceholder: @colorGray10;
59 @colorNeutral: @colorGray7;
62 @borderColorInputBinaryChecked: @colorProgressive;
63 @borderColorInputBinaryActive: @colorProgressiveActive;
65 // Checked radio input border-width, equal to OOUI at 14px base font-size
66 @borderWidthRadioChecked: 0.4285em;
68 // Global border radius to be used to buttons and inputs
72 @boxShadowWidget: inset 0 0 0 1px transparent;
73 @boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
74 @boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
75 @boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
77 // Icon related variables
79 @iconGutterWidth: 1em;
81 // Form input sizes, equal to OOUI at 14px base font-size
82 @sizeInputBinary: 1.5625em;