1 // Colors for use in mediawiki.ui and elsewhere
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
10 @colorGray10: #a2a9b1;
11 @colorGray12: #c8ccd1;
12 @colorGray14: #eaecf0;
13 @colorGray15: #f8f9fa; // lightest
14 @colorBaseInverted: #fff;
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;
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%;
38 @colorText: @colorGray2;
39 @colorTextLight: @colorGray5;
40 @colorButtonText: @colorGray2;
41 @colorButtonTextHighlight: @colorGray4;
42 @colorButtonTextActive: @colorGray1;
43 @colorDisabledText: @colorGray12;
44 @colorErrorText: #c00;
45 @colorWarningText: #705000;
48 @backgroundColorInputBinaryChecked: @colorProgressive;
49 @backgroundColorInputBinaryActive: @colorProgressiveActive;
50 @colorFieldBorder: #a2a9b1;
51 @colorShadow: @colorGray14;
52 @colorPlaceholder: @colorGray10;
53 @colorNeutral: @colorGray7;
56 @borderColorInputBinaryChecked: @colorProgressive;
57 @borderColorInputBinaryActive: @colorProgressiveActive;
59 // Checked radio input border-width, equal to OOUI at 14px base font-size
60 @borderWidthRadioChecked: 0.4285em;
62 // Global border radius to be used to buttons and inputs
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;
71 // Icon related variables
73 @iconGutterWidth: 1em;
75 // Form input sizes, equal to OOUI at 14px base font-size
76 @sizeInputBinary: 1.5625em;
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