1@import "tailwindcss";
2@import "tw-animate-css";
3@plugin "tailwind-scrollbar";
4
5@custom-variant dark {
6  &:is(.dark *) {
7    @slot;
8  }
9
10  /* media-based dark mode (for blog pages only) */
11  @media (prefers-color-scheme: dark) {
12    &:is(.blog-root *) {
13      @slot;
14    }
15  }
16}
17
18@theme inline {
19  --font-sans: var(--font-ibm-plex-sans);
20  --font-mono: var(--font-inconsolata);
21
22  --color-background: var(--background);
23  --color-foreground: var(--foreground);
24  --color-sidebar-border: var(--sidebar-border);
25  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
26  --color-sidebar-accent: var(--sidebar-accent);
27  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
28  --color-sidebar-primary: var(--sidebar-primary);
29  --color-sidebar-foreground: var(--sidebar-foreground);
30  --color-sidebar: var(--sidebar);
31  --color-chart-5: var(--chart-5);
32  --color-chart-4: var(--chart-4);
33  --color-chart-3: var(--chart-3);
34  --color-chart-2: var(--chart-2);
35  --color-chart-1: var(--chart-1);
36  --color-ring: var(--ring);
37  --color-input: var(--input);
38  --color-border: var(--border);
39  --color-destructive: var(--destructive);
40  --color-accent-foreground: var(--accent-foreground);
41  --color-accent: var(--accent);
42  --color-muted-foreground: var(--muted-foreground);
43  --color-muted: var(--muted);
44  --color-secondary-foreground: var(--secondary-foreground);
45  --color-secondary: var(--secondary);
46  --color-primary-foreground: var(--primary-foreground);
47  --color-primary: var(--primary);
48  --color-popover-foreground: var(--popover-foreground);
49  --color-popover: var(--popover);
50  --color-card-foreground: var(--card-foreground);
51  --color-card: var(--card);
52  --color-diff-green: var(--diff-green);
53  --color-diff-red: var(--diff-red);
54  --color-upvote: var(--upvote);
55  --color-downvote: var(--downvote);
56  --color-vote: var(--vote);
57
58  --radius-sm: calc(var(--radius) - 4px);
59  --radius-md: calc(var(--radius) - 2px);
60  --radius-lg: var(--radius);
61  --radius-xl: calc(var(--radius) + 4px);
62  --radius-2xl: calc(var(--radius) + 8px);
63  --radius-3xl: calc(var(--radius) + 12px);
64  --radius-4xl: calc(var(--radius) + 16px);
65}
66
67:root {
68  --radius: 0.625rem;
69  --background: oklch(1 0 0);
70  --foreground: oklch(0.129 0.042 264.695);
71  --card: oklch(1 0 0);
72  --card-foreground: oklch(0.129 0.042 264.695);
73  --popover: oklch(1 0 0);
74  --popover-foreground: oklch(0.129 0.042 264.695);
75  --primary: oklch(0.208 0.042 265.755);
76  --primary-foreground: oklch(0.984 0.003 247.858);
77  --secondary: oklch(0.968 0.007 247.896);
78  --secondary-foreground: oklch(0.208 0.042 265.755);
79  --muted: oklch(0.968 0.007 247.896);
80  --muted-foreground: oklch(0.554 0.046 257.417);
81  --accent: oklch(0.968 0.007 247.896);
82  --accent-foreground: oklch(0.208 0.042 265.755);
83  --destructive: oklch(0.577 0.245 27.325);
84  --border: oklch(0.929 0.013 255.508);
85  --input: oklch(0.929 0.013 255.508);
86  --ring: oklch(0.704 0.04 256.788);
87  --chart-1: oklch(0.646 0.222 41.116);
88  --chart-2: oklch(0.6 0.118 184.704);
89  --chart-3: oklch(0.398 0.07 227.392);
90  --chart-4: oklch(0.828 0.189 84.429);
91  --chart-5: oklch(0.769 0.188 70.08);
92  --sidebar: oklch(0.984 0.003 247.858); /* slate-50 */
93  --sidebar-foreground: oklch(0.129 0.042 264.695);
94  --sidebar-primary: oklch(97.6% 0.005 247.877); /* slate-75 */
95  --sidebar-primary-foreground: oklch(
96    0.129 0.042 264.695
97  ); /* same as sidebar-foreground */
98  --sidebar-accent: oklch(0.968 0.007 247.896);
99  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
100  --sidebar-border: oklch(0.929 0.013 255.508);
101  --sidebar-ring: oklch(0.704 0.04 256.788);
102  --diff-red: oklch(98.5% 0.01 17.38);
103  --diff-green: oklch(98.5% 0.01 155.826);
104  --upvote: oklch(72.75% 0.198 51.769);
105  --downvote: oklch(0.208 0.042 265.755);
106  --vote: oklch(77.7% 0.023 257.417);
107}
108
109/* TODO: dark mode disabled for now
110@media (prefers-color-scheme: dark) {
111  :root {
112    --background: oklch(0.129 0.042 264.695);
113    --foreground: oklch(0.984 0.003 247.858);
114    --card: oklch(0.208 0.042 265.755);
115    --card-foreground: oklch(0.984 0.003 247.858);
116    --popover: oklch(0.208 0.042 265.755);
117    --popover-foreground: oklch(0.984 0.003 247.858);
118    --primary: oklch(0.929 0.013 255.508);
119    --primary-foreground: oklch(0.208 0.042 265.755);
120    --secondary: oklch(0.279 0.041 260.031);
121    --secondary-foreground: oklch(0.984 0.003 247.858);
122    --muted: oklch(0.279 0.041 260.031);
123    --muted-foreground: oklch(0.704 0.04 256.788);
124    --accent: oklch(0.279 0.041 260.031);
125    --accent-foreground: oklch(0.984 0.003 247.858);
126    --destructive: oklch(0.704 0.191 22.216);
127    --border: oklch(1 0 0 / 10%);
128    --input: oklch(1 0 0 / 15%);
129    --ring: oklch(0.551 0.027 264.364);
130    --chart-1: oklch(0.488 0.243 264.376);
131    --chart-2: oklch(0.696 0.17 162.48);
132    --chart-3: oklch(0.769 0.188 70.08);
133    --chart-4: oklch(0.627 0.265 303.9);
134    --chart-5: oklch(0.645 0.246 16.439);
135    --sidebar: oklch(0.208 0.042 265.755);
136    --sidebar-foreground: oklch(0.984 0.003 247.858);
137    --sidebar-primary: oklch(0.488 0.243 264.376);
138    --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
139    --sidebar-accent: oklch(0.279 0.041 260.031);
140    --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
141    --sidebar-border: oklch(1 0 0 / 10%);
142    --sidebar-ring: oklch(0.551 0.027 264.364);
143    --diff-red: oklch(98.5% 0.01 17.38);
144    --diff-green: oklch(98.5% 0.01 155.826);
145    --upvote: oklch(72.75% 0.198 51.769);
146    --downvote: oklch(0.929 0.013 255.508);
147    --vote: oklch(50.2% 0.02 256.788);
148  }
149}
150*/
151
152.blog-root {
153  background-color: var(--background);
154  color: var(--foreground);
155}
156
157@media (prefers-color-scheme: dark) {
158  .blog-root {
159    --background: oklch(0.129 0.042 264.695);
160    --foreground: oklch(0.984 0.003 247.858);
161    --card: oklch(0.208 0.042 265.755);
162    --card-foreground: oklch(0.984 0.003 247.858);
163    --popover: oklch(0.208 0.042 265.755);
164    --popover-foreground: oklch(0.984 0.003 247.858);
165    --primary: oklch(0.929 0.013 255.508);
166    --primary-foreground: oklch(0.208 0.042 265.755);
167    --secondary: oklch(0.279 0.041 260.031);
168    --secondary-foreground: oklch(0.984 0.003 247.858);
169    --muted: oklch(0.279 0.041 260.031);
170    --muted-foreground: oklch(0.704 0.04 256.788);
171    --accent: oklch(0.279 0.041 260.031);
172    --accent-foreground: oklch(0.984 0.003 247.858);
173    --destructive: oklch(0.704 0.191 22.216);
174    --border: oklch(1 0 0 / 10%);
175    --input: oklch(1 0 0 / 15%);
176    --ring: oklch(0.551 0.027 264.364);
177    --chart-1: oklch(0.488 0.243 264.376);
178    --chart-2: oklch(0.696 0.17 162.48);
179    --chart-3: oklch(0.769 0.188 70.08);
180    --chart-4: oklch(0.627 0.265 303.9);
181    --chart-5: oklch(0.645 0.246 16.439);
182  }
183}
184
185@layer base {
186  * {
187    @apply border-border focus-visible:outline-ring/50;
188  }
189  body {
190    @apply bg-background text-foreground;
191  }
192}
193