css-reference/sass/variables.sass at v1 · itsjw/css-reference · GitHub

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
// Colors
$plum: #310736
$plum-invert: #fff
$plum-dark: #622369
$plum-light: #94529c

$alpha: #05ffb0
$alpha-invert: $plum
$beta: #00e7eb
$beta-invert: $plum

$orange:    hsl(14, 100%, 53%)
$yellow:    hsl(48, 100%, 67%)
$green:     hsl(141, 71%, 48%)
$turquoise: hsl(171, 100%, 41%)
$blue:      hsl(217, 71%, 53%)
$purple:    hsl(271, 100%, 71%)
$pink:      hsl(348, 100%, 61%)
$red:       hsl(4, 100%, 61%)

$orange-invert:    findColorInvert($orange)
$yellow-invert:    findColorInvert($yellow)
$green-invert:     findColorInvert($green)
$turquoise-invert: findColorInvert($turquoise)
$blue-invert:      findColorInvert($blue)
$purple-invert:    findColorInvert($purple)
$red-invert:       findColorInvert($red)

$turquoise-dark: hsl(171, 100%, 21%)
$turquoise-light: hsl(171, 100%, 96%)

$purple-dark: hsl(271, 100%, 51%)
$purple-light: hsl(271, 100%, 96%)

// Social
$facebook:    #3b5998
$github:      #333333
$instagram:   #3f729b
$hacker-news: #ff6600
$soundcloud:  #ff8800
$twitter:     #55acee
$rss:         #f26522

// Inferred
$text:        hsl(0, 0%, 30%)
$text-light:  hsl(0, 0%, 50%)
$text-strong: hsl(0, 0%, 20%)

$primary: $turquoise
$primary-invert: $turquoise-invert
$primary-light: $turquoise-light
$primary-dark: $turquoise-dark

$link: $blue
$link-invert: $blue-invert

$background: hsl(0, 0%, 95%)
$border: hsl(0, 0%, 90%)

// Typography
$family-primary: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace: "Source Code Pro", "Consolas", "Monaco", "Courier", monospace

$weight-light: 300
$weight-normal: 400
$weight-bold: 700

// Dimensions
$logo-width: 190px
$menu-width: $logo-width + (2 * 18px)
// $menu-width: 240px
$header-height: calc(100vh - #{$menu-width})

// Miscellaneous
$shadow: 0 0 1rem rgba(#000, 0.1)
$speed: 300ms