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
|
@mixin dark(
$f1: #ccc,
$f2: #ddd,
$c1: #111,
$c2: #222,
$c3: #333,
$c4: #888,
$a1: #f90,
$a2: #fb0,
$a3: #f90,
$cg: #593,
$cr: #e33
) {
#{--f1}: $f1;// Font Color Primary (ccc)
#{--f2}: $f2;// Font Color Headers (ddd)
#{--c1}: $c1;// Background Color Primary (111)
#{--c2}: $c2;// Background Color Secondary (222)
#{--c3}: $c3;// Table Rows, Block quote edge, Borders (333)
#{--c4}: $c4;// Disabled Buttons, Borders, mark background (888)
#{--a1}: $a1;// link color (f90)
#{--a2}: $a2;// link hover/focus color (fb0)
#{--a3}: $a3;// link h1-h2 hover/focus color (f90)
#{--cg}: $cg;// ins green, success (593)
#{--cr}: $cr;// del red, errors (e33)
}
@mixin light(
$f1: #333,
$f2: #222,
$c1: #fff,
$c2: #eee,
$c3: #ddd,
$c4: #555,
$a1: #c40,
$a2: #e60,
$a3: #f90,
$cg: #373,
$cr: #d33
) {
#{--f1}: $f1;// Font Color Primary (444)
#{--f2}: $f2;// Font Color Headers (333)
#{--c1}: $c1;// Background Color Primary (fff)
#{--c2}: $c2;// Background Color Secondary (eee)
#{--c3}: $c3;// Table Rows, Block quote edge, Borders (ddd)
#{--c4}: $c4;// Disabled Buttons, Borders, mark background (677)
#{--a1}: $a1;// link color (c40)
#{--a2}: $a2;// link hover/focus color (e60)
#{--a3}: $a3;// link h1-h2 hover/focus color (f90)
#{--cg}: $cg;// ins green, success (373)
#{--cr}: $cr;// del red, errors (d33)
}
|
