-
Notifications
You must be signed in to change notification settings - Fork 15
/
color.html
200 lines (177 loc) · 7.18 KB
/
color.html
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<link rel="import" href="version.html">
<link rel="import" href="../polymer/lib/elements/custom-style.html">
<link rel="import" href="../polymer/lib/elements/dom-module.html">
<custom-style>
<style>
html {
/* Base (background) */
--lumo-base-color: #FFF;
/* Tint */
--lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
--lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
--lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
--lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
--lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
--lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
--lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
--lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
--lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
--lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
--lumo-tint: #FFF;
/* Shade */
--lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
--lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
--lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
--lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
--lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
--lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);
--lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);
--lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);
--lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
--lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
--lumo-shade: hsl(214, 35%, 15%);
/* Contrast */
--lumo-contrast-5pct: var(--lumo-shade-5pct);
--lumo-contrast-10pct: var(--lumo-shade-10pct);
--lumo-contrast-20pct: var(--lumo-shade-20pct);
--lumo-contrast-30pct: var(--lumo-shade-30pct);
--lumo-contrast-40pct: var(--lumo-shade-40pct);
--lumo-contrast-50pct: var(--lumo-shade-50pct);
--lumo-contrast-60pct: var(--lumo-shade-60pct);
--lumo-contrast-70pct: var(--lumo-shade-70pct);
--lumo-contrast-80pct: var(--lumo-shade-80pct);
--lumo-contrast-90pct: var(--lumo-shade-90pct);
--lumo-contrast: var(--lumo-shade);
/* Text */
--lumo-header-text-color: var(--lumo-contrast);
--lumo-body-text-color: var(--lumo-contrast-90pct);
--lumo-secondary-text-color: var(--lumo-contrast-70pct);
--lumo-tertiary-text-color: var(--lumo-contrast-50pct);
--lumo-disabled-text-color: var(--lumo-contrast-30pct);
/* Primary */
--lumo-primary-color: hsl(214, 90%, 52%);
--lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);
--lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);
--lumo-primary-text-color: var(--lumo-primary-color);
--lumo-primary-contrast-color: #FFF;
/* Error */
--lumo-error-color: hsl(3, 100%, 61%);
--lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
--lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
--lumo-error-text-color: hsl(3, 92%, 53%);
--lumo-error-contrast-color: #FFF;
/* Success */
--lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
--lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
--lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
--lumo-success-text-color: hsl(145, 100%, 32%);
--lumo-success-contrast-color: #FFF;
}
</style>
</custom-style>
<dom-module id="lumo-color">
<template>
<style>
[theme~="dark"] {
/* Base (background) */
--lumo-base-color: hsl(214, 35%, 21%);
/* Tint */
--lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
--lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
--lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
--lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
--lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
--lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
--lumo-tint-60pct: hsla(214, 82%, 90%, 0.6);
--lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);
--lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
--lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
--lumo-tint: hsl(214, 100%, 98%);
/* Shade */
--lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
--lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
--lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
--lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
--lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
--lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
--lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
--lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
--lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
--lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
--lumo-shade: hsl(214, 33%, 13%);
/* Contrast */
--lumo-contrast-5pct: var(--lumo-tint-5pct);
--lumo-contrast-10pct: var(--lumo-tint-10pct);
--lumo-contrast-20pct: var(--lumo-tint-20pct);
--lumo-contrast-30pct: var(--lumo-tint-30pct);
--lumo-contrast-40pct: var(--lumo-tint-40pct);
--lumo-contrast-50pct: var(--lumo-tint-50pct);
--lumo-contrast-60pct: var(--lumo-tint-60pct);
--lumo-contrast-70pct: var(--lumo-tint-70pct);
--lumo-contrast-80pct: var(--lumo-tint-80pct);
--lumo-contrast-90pct: var(--lumo-tint-90pct);
--lumo-contrast: var(--lumo-tint);
/* Text */
--lumo-header-text-color: var(--lumo-contrast);
--lumo-body-text-color: var(--lumo-contrast-90pct);
--lumo-secondary-text-color: var(--lumo-contrast-70pct);
--lumo-tertiary-text-color: var(--lumo-contrast-50pct);
--lumo-disabled-text-color: var(--lumo-contrast-30pct);
/* Primary */
--lumo-primary-color: hsl(214, 86%, 55%);
--lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
--lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
--lumo-primary-text-color: hsl(214, 100%, 70%);
--lumo-primary-contrast-color: #FFF;
/* Error */
--lumo-error-color: hsl(3, 90%, 63%);
--lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);
--lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);
--lumo-error-text-color: hsl(3, 100%, 67%);
/* Success */
--lumo-success-color: hsl(145, 65%, 42%);
--lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);
--lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);
--lumo-success-text-color: hsl(145, 85%, 47%);
}
html {
color: var(--lumo-body-text-color);
background-color: var(--lumo-base-color);
}
[theme~="dark"] {
color: var(--lumo-body-text-color);
background-color: var(--lumo-base-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--lumo-header-text-color);
}
a {
color: var(--lumo-primary-text-color);
}
blockquote {
color: var(--lumo-secondary-text-color);
}
code,
pre {
background-color: var(--lumo-contrast-10pct);
border-radius: var(--lumo-border-radius-m);
}
</style>
</template>
</dom-module>
<!-- Only needed for IE11 when you want to use the dark palette inside the light palette -->
<dom-module id="lumo-color-legacy">
<template>
<style include="lumo-color">
:host {
color: var(--lumo-body-text-color) !important;
background-color: var(--lumo-base-color) !important;
}
</style>
</template>
</dom-module>