summaryrefslogtreecommitdiff
path: root/resources/src/mediawiki.less/mediawiki.ui/variables.less
blob: e91302bebea6d449cc14b23af2ac2cd13785ab9a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// Colors for use in mediawiki.ui and elsewhere

// Although this defines many shades, be parsimonious in your own use of grays. Prefer
// colors already in use in MediaWiki. Prefer semantic color names such as "@colorText".
@colorGray1: #111; // darkest
@colorGray2: #222;
@colorGray3: #333;
@colorGray4: #444;
@colorGray5: #555;
@colorGray6: #666;
@colorGray7: #777;
@colorGray8: #888;
@colorGray9: #999;
@colorGray10: #AAA;
@colorGray11: #BBB;
@colorGray12: #CCC;
@colorGray13: #DDD;
@colorGray14: #EEE;
@colorGray15: #F9F9F9; // lightest

// Semantic background colors
// Blue; for contextual use of a continuing action
@colorProgressive: #347bff;
// Green; for contextual use of a positive finalizing action
@colorConstructive: #00af89;
// Orange; for contextual use of returning to a past action
@colorRegressive: #FF5D00;
// Red; for contextual use of a negative action of high severity
@colorDestructive: #d11d13;
// Orange; for contextual use of a potentially negative action of medium severity
@colorMediumSevere: #FF5D00;
// Yellow; for contextual use of a potentially negative action of low severity
@colorLowSevere: #FFB50D;

// Used in mixins to darken contextual colors by the same amount (eg. focus)
@colorDarkenPercentage: 13.5%;
// Used in mixins to lighten contextual colors by the same amount (eg. hover)
@colorLightenPercentage: 13.5%;

// Text colors
@colorText: @colorGray2;
@colorTextLight: @colorGray6;
@colorButtonText: @colorGray5;
@colorDisabledText: @colorGray12;
@colorErrorText: #CC0000;

// UI colors
@colorFieldBorder: @colorGray12;
@colorShadow: @colorGray14;
@colorPlaceholder: @colorGray10;
@colorNeutral: @colorGray7;

// The following rules are deprecated
@colorWhite: #fff;
@colorOffWhite: #fafafa;
@colorGrayDark: #898989;
@colorGrayLight: #ccc;
@colorGrayLighter: #ddd;
@colorGrayLightest: #eee;

// Global border radius to be used to buttons and inputs
@borderRadius: 2px;