styleguide2/src/theme/variables.styl at development · csseditor/styleguide2 · 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
// Variables
//––––––––––––––––––––––––––––––––––––––––––––––––––

// Typography
$font-family = "Avenir Next", "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
$font-family-mono = "Roboto mono", menlo, Monaco, monospace;
$font-size = 15px;
$line-height = 28px;
$link-color = #1eaedb

// Misc
$border-radius = 3px

// Colors

// // Primary Brand Colors
$primary-color-1 = #01ACEE
$primary-color-2 = #D63AFF
$primary-color-3 = #FF4C43
$primary-color-4 = #FFC23C

// // Secondary Colors
$secondary-color-1 = #ff9a57
$secondary-color-2 = #DC94C0
$secondary-color-3 = #2EDFC7
$secondary-color-4 = #504F57;

// // Background Colors
$bg-color-1 = #222228
$bg-color-2 = #5C666F
$bg-color-3 = #e3e5e7
$bg-color-4 = #eee

// // Status Colors
$bg-status-error = #FF3E00
$bg-status-success = #7ED321
$bg-status-warning = #F0CC00
$bg-status-info = #01ACEE

// // Text colors
$color-text-black = rgba(#000, .86)
$color-text-white = white

$color-text = $color-text-black
$color-text-light = rgba(#000, .54)
$color-text-lighter = rgba(#000, .26)

$color-text-contrast = $color-text-white
$color-text-contrast-light = rgba(white, .70)
$color-text-contrast-lighter = rgba(white, .30)


// Breakpoints
$bp-larger-than-mobile     = "min-width: 480px"
$bp-larger-than-phablet    = "min-width: 550px"
$bp-larger-than-tablet     = "min-width: 768px"
$bp-larger-than-desktop    = "min-width: 992px"
$bp-larger-than-desktophd  = "min-width: 1200px"