-
Notifications
You must be signed in to change notification settings - Fork 36
/
variables.scss
86 lines (67 loc) · 2.09 KB
/
variables.scss
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
:root {
--ff: "Lato", arial, helvetica, sans-serif;
--ff-headlines: "Poppins", sans-serif;
--ff-code: "Roboto Mono", monospace;
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-bold: 700;
--fs-small: 0.7rem;
--fs-base: 14px;
--fs-large: 1rem;
--fs-h1: 1.5rem;
--fs-h2: 1.2rem;
--fs-h3: 1rem;
--lh-normal: 1.5;
--lh-medium: 1.6;
--lh-large: 1.7;
--ui-max-inline-size: 1024px;
// FIXME: this should be changed to --spacer-xs, --spacer-s, and so
--spacer-smaller: 0.3rem;
--spacer-small: 0.5rem;
--spacer-normal: 1rem;
--spacer-medium: 1.5rem;
--spacer-large: 2rem;
--icon-size-xxxs: 12px;
--icon-size-xxs: 16px;
--icon-size-xs: 20px;
--icon-size-s: 24px;
--icon-size: 28px;
--icon-size-m: 32px;
--icon-size-l: 36px;
--icon-size-xl: 40px;
--icon-size-xxl: 44px;
--icon-size-xxxl: 10rem;
--stack-gutter: var(--spacer-normal);
--split-gutter: var(--spacer-small);
--wrapper-padding: var(--spacer-small);
--wrapper-background: white;
--color-primary: #0c322c;
--color-primary-lighter: #30ba78;
--color-gray-light: #fcfcfc;
--color-gray: #f2f2f2;
--color-gray-dark: #efefef; // Fog
--color-gray-darker: #999;
--color-gray-dimmed: #888;
--color-gray-dimmest: #666;
--color-link: #0c322c;
--color-link-hover: #30ba78;
--color-button-primary: var(--color-link);
--color-button-primary-hover: var(--color-link-hover);
--color-button-plain-link: var(--color-link);
--color-button-plain-link-hover: var(--color-link-hover);
--color-background-primary: var(--color-primary);
--color-background-secondary: var(--color-gray-dark);
--color-text-primary: var(--color-primary);
--color-text-secondary: var(--color-gray-dark);
--color-success: #30ba78;
--color-warn: #d4351c; // #FE7C3F; // Persimmon
--focus-color: #00b2e2; //cerulean 500
--gradient-border-angle: 45deg;
--gradient-border-start-color: var(--color-gray);
--gradient-border-end-color: transparent;
--header-icon-size: var(--icon-size-m);
--section-icon-size: var(--icon-size);
--header-block-size: auto;
--footer-block-size: auto;
}