-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path_variables.styl
103 lines (103 loc) · 3.37 KB
/
_variables.styl
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
// Core variables
$version = "0.5.3"
// Core features
$rtl = false
// Core colors
$primary-color = #23D5CA
$primary-color-dark = darken($primary-color, 3%)
$primary-color-light = lighten($primary-color, 3%)
$secondary-color = lighten($primary-color, 37.5%)
$secondary-color-dark = darken($secondary-color, 3%)
$secondary-color-light = lighten($secondary-color, 3%)
// Gray colors
$dark-color = #454d5d
$light-color = white
$gray-color = lighten($dark-color, 40%)
$gray-color-dark = darken($gray-color, 25%)
$gray-color-light = lighten($gray-color, 20%)
$border-color = lighten($dark-color, 60%)
$border-color-dark = darken($border-color, 10%)
$bg-color = lighten($dark-color, 66%)
$bg-color-dark = darken($bg-color, 3%)
$bg-color-light = $light-color
// Control colors
$success-color = #32b643
$warning-color = #ffb700
$error-color = #e85600
// Other colors
$code-color = #d73e48
$highlight-color = #ffe9b3
$body-bg = $bg-color-light
$body-font-color = lighten($dark-color, 5%)
$link-color = $primary-color
$link-color-dark = darken($link-color, 10%)
$link-color-light = lighten($link-color, 10%)
// Fonts
// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
//$base-font-family = -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
$base-font-family = 'Libre Franklin', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
$mono-font-family = "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace
$fallback-font-family = "Helvetica Neue", sans-serif
$cjk-zh-hans-font-family = $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family
$cjk-zh-hant-font-family = $base-font-family, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", $fallback-font-family
$cjk-jp-font-family = $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family
$cjk-ko-font-family = $base-font-family, "Malgun Gothic", $fallback-font-family
$body-font-family = $base-font-family, $fallback-font-family
// Unit sizes
$unit-o = 0.05rem
$unit-h = 0.1rem
$unit-1 = 0.2rem
$unit-2 = 0.4rem
$unit-3 = 0.6rem
$unit-4 = 0.8rem
$unit-5 = 1rem
$unit-6 = 1.2rem
$unit-7 = 1.4rem
$unit-8 = 1.6rem
$unit-9 = 1.8rem
$unit-10 = 2rem
$unit-12 = 2.4rem
$unit-16 = 3.2rem
// Font sizes
$html-font-size = 20px
$html-line-height = 1.5
$font-size = 0.8rem
$font-size-sm = 0.7rem
$font-size-lg = 0.9rem
$line-height = 1.2rem
// Sizes
$layout-spacing = $unit-2
$layout-spacing-sm = $unit-1
$layout-spacing-lg = $unit-4
$border-radius = $unit-h
$border-width = $unit-o
$border-width-lg = $unit-h
$control-size = $unit-9
$control-size-sm = $unit-7
$control-size-lg = $unit-10
$control-padding-x = $unit-2
$control-padding-x-sm = $unit-2 * 0.75
$control-padding-x-lg = $unit-2 * 1.5
$control-padding-y = ($control-size - $line-height) / 2 - $border-width
$control-padding-y-sm = ($control-size-sm - $line-height) / 2 - $border-width
$control-padding-y-lg = ($control-size-lg - $line-height) / 2 - $border-width
$control-icon-size = 0.8rem
$control-width-xs = 180px
$control-width-sm = 320px
$control-width-md = 640px
$control-width-lg = 960px
$control-width-xl = 1280px
// Responsive breakpoints
$size-xs = 480px
$size-sm = 600px
$size-md = 840px
$size-lg = 960px
$size-xl = 1280px
$size-2x = 1440px
$responsive-breakpoint = $size-xs
// Z-index
$zindex-0 = 1
$zindex-1 = 100
$zindex-2 = 200
$zindex-3 = 300
$zindex-4 = 400