website/public/variables.css at 57988220dd5fcea680e69eff7fdf916194243d66 · trynova/website · 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
104
105
@import url("fonts/pt-sans/font.css");
@import url("fonts/pt-serif/font.css");
@import url("fonts/pt-mono/font.css");

:root {
  --font-sans: "PT Sans", sans-serif;
  --font-serif: "PT Serif", serif;
  --font-mono: "PT Mono", monospace;

  --neutral-0: light-dark(#ffffff, #000000);
  --neutral-50: light-dark(#fefefe, #0a0a0a);
  --neutral-100: light-dark(#efefef, #3d3d3d);
  --neutral-200: light-dark(#dcdcdc, #464646);
  --neutral-300: light-dark(#bdbdbd, #525252);
  --neutral-400: light-dark(#989898, #656565);
  --neutral-500: light-dark(#7c7c7c, #7c7c7c);
  --neutral-600: light-dark(#656565, #989898);
  --neutral-700: light-dark(#525252, #bdbdbd);
  --neutral-800: light-dark(#464646, #dcdcdc);
  --neutral-900: light-dark(#3d3d3d, #efefef);
  --neutral-950: light-dark(#0a0a0a, #fefefe);
  --neutral-1000: light-dark(#000000, #ffffff);

  --accent-50: light-dark(#f2f3fb);
  --accent-100: light-dark(#e7e9f8);
  --accent-200: light-dark(#d4d7f1);
  --accent-300: light-dark(#babde7);
  --accent-400: light-dark(#9e9ddc);
  --accent-500: light-dark(#8c85cf);
  --accent-600: light-dark(#796cbf);
  --accent-700: light-dark(#685ba7);
  --accent-800: light-dark(#564b88);
  --accent-900: light-dark(#48426d);
  --accent-950: light-dark(#27233a);

  --chart-pass: #2e854b;
  --chart-fail: #b52b2b;
  --chart-crash: #821d1d;
  --chart-skip: #d9a620;
  --chart-timeout: #d9a620;
  --chart-unresolved: #d9a620;

  --syntax-comment: var(--neutral-300);
  --syntax-punctuation: var(--neutral-800);
  --syntax-keyword: var(--neutral-400);
  --syntax-class: var(--neutral-600);
  --syntax-boolean: var(--neutral-400);
  --syntax-symbol: var(--neutral-700);
  --syntax-number: var(--neutral-800);
  --syntax-string: var(--neutral-400);
  --syntax-variable: var(--neutral-100);
  --syntax-operator: var(--neutral-900);
  --syntax-function: var(--neutral-600);
  --syntax-background: var(--neutral-50);
  --syntax-text: var(--neutral-800);

  --selection-color: light-dark(var(--neutral-950), #727073);

  --scrollbar-track-color: var(--neutral-0);
  --scrollbar-thumb-color: var(--neutral-950);
  --scrollbar-size: 8px;
}

:root {
  --neutral-0: light-dark(#ffffff, #000000);
  --neutral-50: light-dark(#fefefe, #0a0a0a);
  --neutral-100: light-dark(#efefef, #3d3d3d);
  --neutral-200: light-dark(#dcdcdc, #464646);
  --neutral-300: light-dark(#bdbdbd, #525252);
  --neutral-400: light-dark(#989898, #656565);
  --neutral-500: light-dark(#7c7c7c, #7c7c7c);
  --neutral-600: light-dark(#656565, #989898);
  --neutral-700: light-dark(#525252, #bdbdbd);
  --neutral-800: light-dark(#464646, #dcdcdc);
  --neutral-900: light-dark(#3d3d3d, #efefef);
  --neutral-950: light-dark(#0a0a0a, #fefefe);
  --neutral-1000: light-dark(#000000, #ffffff);

  --accent-50: light-dark(#f2f3fb, #1a1a2e);
  --accent-100: light-dark(#e7e9f8, #252541);
  --accent-200: light-dark(#d4d7f1, #2f3156);
  --accent-300: light-dark(#babde7, #3a3c6b);
  --accent-400: light-dark(#9e9ddc, #464880);
  --accent-500: light-dark(#8c85cf, #5a5d99);
  --accent-600: light-dark(#796cbf, #6e73b0);
  --accent-700: light-dark(#685ba7, #8389c7);
  --accent-800: light-dark(#564b88, #9ea1dd);
  --accent-900: light-dark(#48426d, #b6baea);
  --accent-950: light-dark(#27233a, #d1d5f7);

  /* Syntax Highlighting Colors */
  --syntax-comment: var(--neutral-300);
  --syntax-punctuation: var(--neutral-800);
  --syntax-keyword: var(--neutral-400);
  --syntax-class: var(--neutral-600);
  --syntax-boolean: var(--neutral-400);
  --syntax-symbol: var(--neutral-700);
  --syntax-number: var(--neutral-800);
  --syntax-string: var(--neutral-400);
  --syntax-variable: var(--neutral-100);
  --syntax-operator: var(--neutral-900);
  --syntax-function: var(--neutral-600);
  --syntax-background: var(--neutral-50);
  --syntax-text: var(--neutral-800);
}