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
// Colors
// Core colors
$primary-color: #5764c6;
$primary-color-dark: darken($primary-color, 3%);
$primary-color-light: lighten($primary-color, 3%);
$secondary-color: lighten($primary-color, 40%);
$secondary-color-dark: darken($secondary-color, 3%);
$secondary-color-light: lighten($secondary-color, 3%);
$link-color: $primary-color;
$link-color-dark: darken($link-color, 5%);
// Gray colors
$dark-color: #454d5d;
$light-color: #fff;
$gray-color: lighten($dark-color, 40%);
$gray-color-dark: darken($gray-color, 20%);
$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: #e06870;
$highlight-color: #ffe9b3;
$body-bg: $bg-color-light;
$body-font-color: lighten($dark-color, 5%);
// 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;
$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
$fallback-font-family: "Helvetica Neue", sans-serif;
$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $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: .05rem;
$unit-h: .1rem;
$unit-1: .2rem;
$unit-2: .4rem;
$unit-3: .6rem;
$unit-4: .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.428571429;
$font-size: .7rem;
$font-size-sm: .6rem;
$font-size-lg: .8rem;
$line-height: 1rem;
// 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-8;
$control-size-sm: $unit-6;
$control-size-lg: $unit-10;
$control-padding-h: $unit-2;
$control-padding-v: ($control-size - $line-height) / 2 - $border-width;
$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width;
$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width;
$control-icon-size: .7rem;
$control-min-width: 180px;
$control-max-width: 320px;
// Responsive breakpoints
$size-xs: 480px;
$size-sm: 600px;
$size-md: 840px;
$size-lg: 960px;
$size-xl: 1280px;
$size-2x: 1440px;
// Z-index
$zindex-0: 1;
$zindex-1: 100;
$zindex-2: 200;
$zindex-3: 300;
$zindex-4: 400;
|
