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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
/*
* Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
* Copyright (c) 2016-present Sven Greb <development@svengreb.de>
*
* Project: Nord
* Version: 0.2.0
* Repository: https://github.com/arcticicestudio/color
* License: MIT
* References:
* https://www.w3.org/TR/css-variables
* https://www.w3.org/TR/selectors/#root-pseudo
* https://drafts.csswg.org/css-variables
* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
* http://warpspire.com/kss
* https://github.com/kss-node/kss-node
*/
/*
An arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
ambiance.
Styleguide Nord
*/
:root {
/*
Base component color of "Polar Night".
Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
Markup:
<div style="background-color:#2e3440; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--color0: #2e3440;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Markup:
<div style="background-color:#3b4252; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--color1: #3b4252;
/*
Lighter shade color of the base component color.
Used as line highlighting in the editor.
In the UI scope it may be used as selection- and highlight color.
Markup:
<div style="background-color:#434c5e; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--color2: #434c5e;
/*
Lighter shade color of the base component color.
Used for comments, invisibles, indent- and wrap guide marker.
In the UI scope used as pseudoclass color for disabled elements.
Markup:
<div style="background-color:#4c566a; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--color3: #4c566a;
/*
Base component color of "Snow Storm".
Main color for text, variables, constants and attributes.
In the UI scope used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#d8dee9; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--color4: #d8dee9;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#e5e9f0; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--color5: #e5e9f0;
/*
Lighter shade color of the base component color.
Used for punctuations, carets and structuring characters like curly- and square brackets.
In the UI scope used as background, selection- and highlight color depending on the theme shading design.
Markup:
<div style="background-color:#eceff4; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--color6: #eceff4;
/*
Bluish core color.
Used for classes, types and documentation tags.
Markup:
<div style="background-color:#8fbcbb; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--color7: #8fbcbb;
/*
Bluish core accent color.
Represents the accent color of the color palette.
Main color for primary UI elements and methods/functions.
Can be used for
- Markup quotes
- Markup link URLs
Markup:
<div style="background-color:#88c0d0; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--color8: #88c0d0;
/*
Bluish core color.
Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
punctuations like (semi)colons,commas and braces.
Markup:
<div style="background-color:#81a1c1; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--color9: #81a1c1;
/*
Bluish core color.
Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
Markup:
<div style="background-color:#5e81ac; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--color10: #5e81ac;
/*
Colorful component color.
Used for errors, git/diff deletion and linter marker.
Markup:
<div style="background-color:#bf616a; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--color11: #bf616a;
/*
Colorful component color.
Used for annotations.
Markup:
<div style="background-color:#d08770; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--color12: #d08770;
/*
Colorful component color.
Used for escape characters, regular expressions and markup entities.
In the UI scope used for warnings and git/diff renamings.
Markup:
<div style="background-color:#ebcb8b; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--color13: #ebcb8b;
/*
Colorful component color.
Main color for strings and attribute values.
In the UI scope used for git/diff additions and success visualizations.
Markup:
<div style="background-color:#a3be8c; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--color14: #a3be8c;
/*
Colorful component color.
Used for numbers.
Markup:
<div style="background-color:#b48ead; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--color15: #b48ead;
}
|
