/
variables.scss
67 lines (52 loc) · 2.22 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
:root {
--sidebar-width: 180px;
--snippets-list-width: 250px;
--title-bar-height: 15px;
--title-bar-height-offset: -5px;
--menu-header: 80px;
--spacing-unit: 4px;
--spacing-xs: calc(var(--spacing-unit) * 2);
--spacing-sm: calc(var(--spacing-unit) * 4);
--spacing-md: calc(var(--spacing-unit) * 6);
--spacing-lg: calc(var(--spacing-unit) * 8);
--spacing-xl: calc(var(--spacing-unit) * 10);
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-code: 'SF Mono', 'Consolas', Menlo, Monaco, "Courier New", monospace;
--text-base-size: 10px;
--text-xs: calc(var(--text-base-size) * 1);
--text-sm: calc(var(--text-base-size) * 1.2);
--text-md: calc(var(--text-base-size) * 1.4);
--text-lg: calc(var(--text-base-size) * 1.8);
--text-xl: calc(var(--text-base-size) * 2.4);
--text-xxl: calc(var(--text-base-size) * 3.2);
--text-xxxl: calc(var(--text-base-size) * 3.6);
--color-primary: hsl(215, 93%, 52%);
--color-bg: hsl(0, 0%, 100%);
--color-contrast-lower: hsl(0, 0%, 97%);
--color-contrast-lower-alt: hsl(0, 0%, 92%);
--color-contrast-low: hsl(0, 0%, 85%);
--color-contrast-low-alt: hsl(0, 0%, 80%);
--color-contrast-medium: hsl(0, 0%, 50%);
--color-contrast-high: hsl(0, 0%, 15%);
--color-contrast-higher: hsl(0, 0%, 0%);
--color-text: hsl(0, 0%, 0%);
--color-text-2: hsl(0, 0%, 15%);
--color-text-3: hsl(0, 0%, 50%);
--color-text-4: hsl(0, 0%, 80%);
--color-text-5: hsl(0, 0%, 85%);
--color-border: var(--color-contrast-low);
--color-button: var(--color-contrast-lower-alt);
--color-button-hover: var(--color-contrast-low);
--color-button-action: var(--color-contrast-medium);
--color-button-action-hover: var(--color-contrast-lower-alt);
--color-sidebar: var(--color-contrast-lower);
--color-sidebar-item-selected: var(--color-contrast-low);
--color-sidebar-icon: var(--color-text);
--color-sidebar-icon-selected: #fff;
--color-snippet-selected: hsl(0, 0%, 94%);
--color-snippet-list: var(--color-bg);
--color-editor-scrollbar: rgba(121, 121, 121, 0.4);
--color-menu-selected: var(--color-contrast-lower-alt);
--color-tag-delete: var(--color-contrast-lower-alt);
}