/
variables.scss
61 lines (52 loc) · 2.18 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
// breakpoints
$mobile: 768px; // up to
$tablet: 769px; // from
$max-content: 1128px; // from
// indents
$section-side-padding: 24px;
$section-indent-mobile: 64px;
$section-indent-desktop: 80px;
// fonts
$font-family-regular: 'Rubik-Regular', arial, sans-serif;
$font-family-medium: 'Rubik-Medium', arial, sans-serif;
$font-family-bold: 'Rubik-Bold', arial, sans-serif;
// fonts size
$font-size-title-1: 48px;
$font-size-title-1-mobile: 28px;
$font-size-body-1: 22px;
$font-size-body-1-mobile: 18px;
$font-size-body-2: 18px;
$font-size-body-2-mobile: 16px;
$font-size-body-3: 16px;
$font-size-body-3-mobile: 14px;
// colors
:root {
// light theme
--text-primary: rgb(22, 22, 23);
--text-secondary: rgb(110, 109, 122);
--line-color: rgb(231, 231, 233);
--background-color: rgb(243, 243, 244);
--html-background-color: rgb(255, 255, 255);
// dark theme
&.dark-mode {
--text-primary: rgb(250, 250, 250);
--text-secondary: rgb(188, 187, 201);
--line-color: rgb(45, 55, 72);
--background-color: rgb(45, 55, 72);
--html-background-color: rgb(26, 32, 44);
}
}
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$line-color: var(--line-color);
$background-color: var(--background-color);
$html-background-color: var(--html-background-color);
$primary: rgb(102, 93, 245);
$white: rgb(255, 255, 255);
// transition
$transition-time-default: 210ms;
$transition-default: all $transition-time-default ease-in-out;
// other
$line-default: 1px solid $line-color;
$box-shadow-default: 0 25px 60px rgba(0, 0, 0, 0.12);
$border-radius-primary: 16px;