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
|
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
@mixin clearfix {
&::after {
clear: both;
content: '';
display: block;
}
}
@mixin size($height, $width) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
@mixin vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
background-color: mix($midColor, $endColor, 80%);
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
background-repeat: no-repeat;
}
@mixin highlight-anchor {
a:not(.button) {
color: var(--color--highlight);
&:hover {
color: var(--color--highlight-hover);
text-decoration: none;
}
}
}
@function luminance($value) {
@if $value <= 0.03928 {
@return calc($value / 12.92);
} @else {
@return calc((($value + 0.055) / 1.055) * (($value + 0.055) / 1.055));
}
}
@function relative-luminance($color) {
$rgb: calc(red($color) / 255), calc(green($color) / 255), calc(blue($color) / 255);
@return luminance(nth($rgb, 1)) * 0.2126 + luminance(nth($rgb, 2)) * 0.7152 + luminance(nth($rgb, 3)) * 0.0722;
}
@function contrast-ratio($color1, $color2) {
$luminance1: relative-luminance($color1) + 0.05;
$luminance2: relative-luminance($color2) + 0.05;
@if $luminance1 > $luminance2 {
@return calc($luminance1 / $luminance2);
} @else {
@return calc($luminance2 / $luminance1);
}
}
@function text-contrast($color, $dark, $light, $threshold: 4.5) {
$ratio: contrast-ratio($color, $dark);
@if $ratio < $threshold {
@return $light;
} @else {
@return $dark;
}
}
|
