userscripts/src/shared/variables.css at main · LouLouStyle/userscripts · GitHub

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
/* Base styles */
:root {
	/* Layout variables */
	--border-radius: 0.188rem;
	--font-family: -apple-system, "Helvetica Neue", "Helvetica", sans-serif;
	--letter-spacing-default: -0.029rem;
	--letter-spacing-large: -0.031rem;
	--letter-spacing-medium: -0.018rem;
	--letter-spacing-small: -0.008rem;
	--opacity-disabled: 0.3;
	--text-default: 1rem/1.5rem var(--font-family);
	--text-large: 1.25rem/1.5rem var(--font-family);
	--text-medium: 0.875rem/1.313rem var(--font-family);
	--text-small: 0.719rem/1rem var(--font-family);

	/* Editor layout variables */
	--editor-font: monaco, monospace;
	--editor-font-size: 14px;
	--editor-line-height: 24px;
	--editor-active-line: var(--color-bg-secondary);
	--editor-error: var(--color-red);
	--editor-non-matching-bracket: var(--editor-error);
	--editor-selected-bg: rgb(116 178 235 / 0.35);
	--editor-matched-highlight: rgb(116 178 235 / 0.2);
	--editor-search-highlight: rgb(255 166 0 / 0.3);

	/* Dark theme (default) */
	--color-bg-primary: #323639;
	--color-bg-secondary: #2f3337;
	--color-bg-theme: var(--color-black);
	--color-script-highlighted: #364049;
	--color-black: #1d2023;
	--color-white: #fff;
	--color-blue: #74b1eb;
	--color-green: #60f36c;
	--color-grey: rgb(255 255 255 / 0.15);
	--color-red: #ff453a;
	--color-yellow: #e4f360;
	--text-color-primary: rgb(255 255 255);
	--text-color-secondary: rgb(255 255 255 / 0.65);
	--text-color-disabled: rgb(255 255 255 / 0.4);
	--box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 0.25);
	--button-color: var(--color-black);
	--border-color: var(--color-black);

	/* Editor dark theme colors */
	--editor-invisible: rgb(255 255 255 / 0.15);
	--editor-number: #77e26a;
	--editor-comment: rgb(255 255 255 / 0.35);
	--editor-def: #efc371;
	--editor-default: #cdcfd1;
	--editor-keyword: #96c3ed;
	--editor-atom: #59ebf5;
	--editor-operator: #8c99a7;
	--editor-property: #e86c8a;
	--editor-string: #f5eea2;
	--editor-string-2: #cdabff;
	--editor-cursor: #e3e7eb;
	--editor-matching-bracket-color: #fff;
	--editor-matching-bracket-border: var(--editor-number);
	--editor-blurred-background: rgb(50 54 57 / 0.65);
}

/* Light theme */
@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light dark;
		--color-bg-primary: #fafafa;
		--color-bg-secondary: #f1f1f1;
		--color-bg-theme: var(--color-white);
		--color-script-highlighted: #e2ebf3;
		--color-black: #333;
		--color-white: #fff;
		--color-blue: #317eff;
		--color-green: #2bb239;
		--color-grey: rgb(51 51 51 / 0.15);
		--color-red: #ff453a;
		--color-yellow: #b8722c;
		--text-color-primary: rgb(51 51 51);
		--text-color-secondary: rgb(51 51 51 / 0.65);
		--text-color-disabled: rgb(51 51 51 / 0.35);
		--box-shadow: 0 0.25rem 1rem 0 rgb(0 0 0 / 0.15);
		--button-color: var(--color-white);
		--border-color: var(--color-grey);

		/* Editor light theme colors */
		--editor-invisible: rgb(51 51 51 / 0.15);
		--editor-number: var(--color-green);
		--editor-comment: var(--text-color-disabled);
		--editor-def: #b86d17;
		--editor-default: #777;
		--editor-keyword: #3a68ff;
		--editor-atom: #00adad;
		--editor-operator: #8c99a7;
		--editor-property: #ff453a;
		--editor-string: var(--editor-atom);
		--editor-string-2: #a34fe6;
		--editor-cursor: #7e7e7f;
		--editor-matching-bracket-color: var(--text-color-primary);
		--editor-matching-bracket-border: #ff00ea;
		--editor-blurred-background: rgb(255 255 255 / 0.65);
	}
}