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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
/**
* Codex Design Tokens v1.22.0
* Design System for Wikimedia
* See https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
*/
:root {
--color-base: #eaecf0;
--color-base--hover: #f8f9fa;
--color-emphasized: #f8f9fa;
--color-subtle: #a2a9b1;
--color-disabled: #54595d;
--color-disabled-emphasized: #72777d;
--color-inverted: #101418;
--color-progressive: #88a3e8; /* 'Progressive' Color and states */
--color-progressive--hover: #b0c1f0;
--color-progressive--active: #cbd6f6;
--color-destructive: #fd7865; /* 'Destructive' Color and states */
--color-destructive--hover: #fea898;
--color-destructive--active: #ffc8bd;
--color-visited: #a799cd; /* 'Visited' color. In combination with progressive. Used for default links. */
--color-visited--hover: #c5b9dd;
--color-visited--active: #d9d0e9;
--color-destructive--visited: #c99391; /* Red link 'Visited' color. Used for visited red links. */
--color-destructive--visited--hover: #dcb5b3;
--color-destructive--visited--active: #e8cecd;
--color-error: #fd7865;
--color-error--hover: #fea898;
--color-error--active: #ffc8bd;
--color-warning: #ca982e;
--color-success: #2cb491;
--color-notice: #a2a9b1;
--color-content-added: #80cdb3;
--color-content-removed: #fd7865;
--color-base--subtle: #a2a9b1;
--box-shadow-color-base: #72777d;
--box-shadow-color-progressive--focus: #6485d1;
--box-shadow-color-progressive-selected: #88a3e8;
--box-shadow-color-progressive-selected--hover: #b0c1f0;
--box-shadow-color-progressive-selected--active: #cbd6f6;
--box-shadow-color-destructive--focus: #6485d1;
--box-shadow-color-inverted: #000;
--box-shadow-color-alpha-base: rgba( 0, 0, 0, 0.87 );
--mix-blend-mode-blend: screen;
--background-color-base: #101418; /* Background Colors for static elements (for page layout, sections, etc.) from here on. */
--background-color-neutral: #27292d;
--background-color-neutral-subtle: #202122;
--background-color-interactive: #27292d;
--background-color-interactive--hover: #404244;
--background-color-interactive--active: #54595d;
--background-color-interactive-subtle: #202122;
--background-color-interactive-subtle--hover: #27292d;
--background-color-interactive-subtle--active: #404244;
--background-color-disabled: #404244; /* Components like Buttons, Checkboxes, Radios, ProgressBars…. */
--background-color-disabled-subtle: #27292d; /* Components like TextInputs, Selects…. */
--background-color-inverted: #f8f9fa;
--background-color-progressive--focus: #6485d1;
--background-color-progressive-subtle: #1b223d;
--background-color-progressive-subtle--hover: #233566;
--background-color-progressive-subtle--active: #3056a9;
--background-color-destructive--focus: #6485d1;
--background-color-destructive-subtle: #3c1a13;
--background-color-destructive-subtle--hover: #612419;
--background-color-destructive-subtle--active: #9f3526;
--background-color-error-subtle: #3c1a13;
--background-color-error-subtle--hover: #612419;
--background-color-error-subtle--active: #9f3526;
--background-color-warning-subtle: #2d2212;
--background-color-success-subtle: #132821;
--background-color-notice-subtle: #27292d;
--background-color-content-added: #233566;
--background-color-content-removed: #453217;
--background-color-backdrop-light: rgba( 0, 0, 0, 0.65 ); /* Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. */
--background-color-backdrop-dark: rgba( 255, 255, 255, 0.65 );
--border-color-base: #72777d;
--border-color-subtle: #54595d;
--border-color-muted: #404244;
--border-color-interactive--hover: #a2a9b1;
--border-color-interactive--active: #c8ccd1;
--border-color-disabled: #54595d;
--border-color-inverted: #101418;
--border-color-progressive--hover: #88a3e8;
--border-color-progressive--active: #b0c1f0;
--border-color-progressive--focus: #6485d1;
--border-color-destructive--hover: #fd7865;
--border-color-destructive--active: #fea898;
--border-color-destructive--focus: #6485d1;
--border-color-error--hover: #fd7865;
--border-color-error--active: #fea898;
--border-color-content-added: #233566;
--border-color-content-removed: #987027;
}
|
