1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126
127. 127
128. 128
129. 129
130. 130
131. 131
132. 132
133. 133
134. 134

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
//
// SPDX-License-Identifier: Apache-2.0

import { css } from "./css.ts";

export const globalStyles = css`
	/* Variables */
	:root {
		font-size: 1em;

		--baseline: 1.75;
		line-height: var(--baseline);

		--color-primary: rgb(217, 59, 133);

		--color-bg: #fafafa;
		--color-bg-accent: #eaeaea;
		--color-fg: #333;
		--color-fg-sub: #534c37;
		--color-fg-light: #c5c5c5;
		--color-border: #b4af9d;
		--color-subtle-overlay: hsl(0deg 0% 0% / 0.035);
		color: var(--color-fg);

		--obsidian-color-red: #e03131;
		--obsidian-color-blue: #4c6ef5;
		--obsidian-color-orange: #f76707;
		--obsidian-color-yellow: #fcc419;
		--obsidian-color-green: #2f9e44;
		--obsidian-color-cyan: #22b8cf;
		--obsidian-color-purple: #ae3ec9;
		--obsidian-color-fallback: #adb5bd;

		--canvas-color-red: var(--obsidian-color-red);
		--canvas-color-orange: var(--obsidian-color-orange);
		--canvas-color-yellow: var(--obsidian-color-yellow);
		--canvas-color-green: var(--obsidian-color-green);
		--canvas-color-cyan: var(--obsidian-color-cyan);
		--canvas-color-purple: var(--obsidian-color-purple);
		--canvas-color-fallback: var(--obsidian-color-fallback);

		--callout-color-info: var(--obsidian-color-blue);
		--callout-color-todo: var(--obsidian-color-blue);
		--callout-color-tip: var(--obsidian-color-cyan);
		--callout-color-success: var(--obsidian-color-green);
		--callout-color-question: var(--obsidian-color-yellow);
		--callout-color-warning: var(--obsidian-color-yellow);
		--callout-color-failure: var(--obsidian-color-red);
		--callout-color-danger: var(--obsidian-color-red);
		--callout-color-bug: var(--obsidian-color-red);
		--callout-color-example: var(--obsidian-color-purple);
		--callout-color-quote: var(--obsidian-color-fallback);

		--canvas-node-bg-opacity: 0.05;
		--canvas-node-stroke-width: 2px;
		--canvas-edge-stroke-width: 6px;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-bg: #222228;
			--color-bg-accent: #323135;
			--color-fg: #fafafa;
			--color-fg-sub: #f3edd9;
			--color-fg-light: #c5c5c5;
			--color-border: #b4af9d;
			--color-subtle-overlay: hsl(0deg 0% 100% / 0.1);

			--canvas-node-bg-opacity: 0.1;
		}
	}

	/* Elements */
	html {
		font-family: "Inter", sans-serif;
	}

	html[lang="ja"] {
		font-family: "Inter", "Noto Sans JP", sans-serif;
	}

	body {
		margin: 0;
		line-height: calc(var(--baseline) * 1rem);

		background: var(--color-bg);
	}

	*,
	::before,
	::after {
		box-sizing: border-box;
	}

	h1:hover > a[data-hash-link],
	h2:hover > a[data-hash-link],
	h3:hover > a[data-hash-link],
	h4:hover > a[data-hash-link],
	h5:hover > a[data-hash-link],
	h6:hover > a[data-hash-link] {
		opacity: 1;
	}

	a[data-hash-link] {
		display: inline-block;
		margin-left: -1em;
		padding-right: 0.3em;

		text-decoration: none;

		opacity: 0;
	}
	a[data-hash-link]:hover {
		text-decoration: underline;
	}
	a[data-hash-link]:focus {
		opacity: 1;
	}

	/* Syntax highlight */
	.macana--highlight [data-hl-node~="token"][data-hl-node~="content"] {
		color: var(--color-bg);
	}
	.macana--highlight [data-hl-node~="token"][data-hl-node~="punctuation"] {
		color: #ccc;
	}

	@media (prefers-color-scheme: dark) {
		.macana--highlight [data-hl-node~="token"][data-hl-node~="punctuation"] {
			color: #888;
		}
	}
`;