blob: 1a48cddc1712d91f6e6845c6e4ed87431c68ebec (
plain)
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
|
$variant: "dark";
$white: #e4e6eb;
$white-alt: #b0b3b8;
$black: #000000;
$black-alt: #1d2129;
$red: #f02849;
$red-alt: #f02849;
$green: #30ab5a;
$green-alt: #39b463;
$blue: #1778f2;
$blue-alt: #1d85fc;
$yellow: #dcde81;
$yellow-alt: #808037;
$grey-000: #121315;
$grey-100: #18191a;
$grey-200: #242526;
$grey-300: #3a3b3c;
$grey-400: #4e4f50;
$grey-500: #606770;
$grey-700: #dadde1;
$grey-800: #f0f2f5;
$grey-900: #fff;
$base: null !default;
$surface0: null !default;
$surface1: null !default;
$surface2: null !default;
$text: null !default;
$subtext: null !default;
$btntext: null !default;
@if $variant == "dark" {
$base: $grey-100;
$surface0: $grey-200;
$surface1: $grey-300;
$surface2: $grey-400;
$text: $white;
$subtext: $white-alt;
$btntext: $white;
}
@if $variant == "light" {
$base: $grey-800;
$surface0: $grey-900;
$surface1: $grey-800;
$surface2: $grey-700;
$text: $black;
$subtext: $black-alt;
$btntext: $grey-500;
}
@if $variant == "amoled" {
$base: $black;
$surface0: $grey-000;
$surface1: $black;
$surface2: $grey-200;
$text: $white;
$subtext: $white-alt;
$btntext: $white;
}
$font: "Helvetica Neue", Helvetica, Verdana, Courier, monospace;
$header-font: "Facebook";
$scale: 16px;
$outer-gap: $scale;
$inner-gap: $scale;
$inner-inner-gap: $scale * 0.75;
$outer-radius: $scale / 2;
$inner-radius: $scale / 3;
$font-size: $scale;
$font-size-small: $scale * 0.75;
$base-z-index: 1;
$header-z-index: 2;
$modal-z-index: 5;
$toast-z-index: 10;
$content-width: $scale * 40;
|
