Skip to content

Commit 955d0ed

Browse files
jellydeckjellydeck
committed
move to css var & oklch colors
1 parent 205556c commit 955d0ed

4 files changed

Lines changed: 122 additions & 71 deletions

File tree

‎app/app.vue‎

Lines changed: 88 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ const router = useRouter()
77
const isHomepage = computed(() => route.path === '/')
88
99
useHead({
10+
htmlAttrs: {
11+
'data-theme': 'light',
12+
},
1013
titleTemplate: titleChunk => {
1114
return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
1215
},
@@ -69,6 +72,52 @@ if (import.meta.client) {
6972
box-sizing: border-box;
7073
}
7174
75+
:root[data-theme='dark'] {
76+
--bg: oklch(0.145 0 0);
77+
--bg-subtle: oklch(0.178 0 0);
78+
--bg-muted: oklch(0.218 0 0);
79+
--bg-elevated: oklch(0.252 0 0);
80+
81+
--fg: oklch(0.985 0 0);
82+
--fg-muted: oklch(0.709 0 0);
83+
--fg-subtle: oklch(0.633 0 0);
84+
85+
--border: oklch(0.269 0 0);
86+
--border-subtle: oklch(0.239 0 0);
87+
--border-hover: oklch(0.371 0 0);
88+
89+
--accent: oklch(1 0 0);
90+
--accent-muted: oklch(0.922 0 0);
91+
92+
--syntax-fn: oklch(0.727 0.137 299.149);
93+
--syntax-str: oklch(0.829 0.088 252.458);
94+
--syntax-kw: oklch(0.721 0.162 15.494);
95+
--syntax-comment: oklch(0.551 0.019 250.976);
96+
}
97+
98+
:root[data-theme='light'] {
99+
--bg: oklch(1 0 0);
100+
--bg-subtle: oklch(0.979 0.001 286.375);
101+
--bg-muted: oklch(0.979 0.001 286.375 / 90%);
102+
--bg-elevated: oklch(0.955 0 0);
103+
104+
--fg: oklch(0.145 0 0);
105+
--fg-muted: oklch(0.439 0 0);
106+
--fg-subtle: oklch(0.556 0 0);
107+
108+
--border: oklch(0.8514 0 0);
109+
--border-subtle: oklch(0.922 0 0);
110+
--border-hover: oklch(0.715 0 0);
111+
112+
--accent: oklch(0.145 0 0);
113+
--accent-muted: oklch(0.205 0 0);
114+
115+
--syntax-fn: oklch(0.502 0.188 294.988);
116+
--syntax-str: oklch(0.54 0.191 257.481);
117+
--syntax-kw: oklch(0.588 0.193 20.469);
118+
--syntax-comment: oklch(0.551 0.019 250.976);
119+
}
120+
72121
html {
73122
-webkit-font-smoothing: antialiased;
74123
-moz-osx-font-smoothing: grayscale;
@@ -88,30 +137,30 @@ html {
88137
89138
body {
90139
margin: 0;
91-
background-color: #0a0a0a;
92-
color: #fafafa;
140+
background-color: var(--bg);
141+
color: var(--fg);
93142
line-height: 1.6;
94143
padding-bottom: var(--footer-height, 0);
95144
}
96145
97146
/* Default link styling for accessibility on dark background */
98147
a {
99-
color: #fafafa;
148+
color: var(--fg);
100149
text-decoration: underline;
101150
text-underline-offset: 3px;
102-
text-decoration-color: #404040;
151+
text-decoration-color: var(--fg-subtle);
103152
transition:
104153
color 0.2s ease,
105154
text-decoration-color 0.2s ease;
106155
}
107156
108157
a:hover {
109-
color: #ffffff;
110-
text-decoration-color: #a1a1a1;
158+
color: var(--accent);
159+
text-decoration-color: var(--accent);
111160
}
112161
113162
a:focus-visible {
114-
outline: 2px solid rgba(250, 250, 250, 0.2);
163+
outline: 2px solid var(--border);
115164
outline-offset: 2px;
116165
border-radius: 2px;
117166
}
@@ -132,7 +181,8 @@ button {
132181
133182
/* Selection */
134183
::selection {
135-
background-color: rgba(255, 255, 255, 0.15);
184+
background-color: var(--fg-muted);
185+
color: var(--bg-subtle);
136186
}
137187
138188
/* Scrollbar styling */
@@ -142,11 +192,11 @@ button {
142192
}
143193
144194
::-webkit-scrollbar-track {
145-
background: #0a0a0a;
195+
background: var(--bg);
146196
}
147197
148198
::-webkit-scrollbar-thumb {
149-
background: #262626;
199+
background: var(--border);
150200
border-radius: 4px;
151201
}
152202
@@ -160,8 +210,8 @@ button {
160210
top: -100%;
161211
left: 0;
162212
padding: 0.5rem 1rem;
163-
background: #fafafa;
164-
color: #0a0a0a;
213+
background: var(--fg);
214+
color: var(--bg);
165215
font-size: 0.875rem;
166216
z-index: 100;
167217
transition: top 0.2s ease;
@@ -173,7 +223,7 @@ button {
173223
174224
/* README prose styling */
175225
.readme-content {
176-
color: #a1a1a1;
226+
color: var(--fg-muted);
177227
line-height: 1.75;
178228
/* Prevent horizontal overflow on mobile */
179229
overflow-wrap: break-word;
@@ -189,7 +239,7 @@ button {
189239
.readme-content h4,
190240
.readme-content h5,
191241
.readme-content h6 {
192-
color: #fafafa;
242+
color: var(--fg);
193243
@apply font-mono;
194244
font-weight: 500;
195245
margin-top: 2rem;
@@ -208,7 +258,7 @@ button {
208258
.readme-content [data-level='2'] {
209259
font-size: 1.25rem;
210260
padding-bottom: 0.5rem;
211-
border-bottom: 1px solid #262626;
261+
border-bottom: 1px solid var(--border);
212262
}
213263
.readme-content [data-level='3'] {
214264
font-size: 1.125rem;
@@ -228,31 +278,31 @@ button {
228278
}
229279
230280
.readme-content a {
231-
color: #fafafa;
281+
color: var(--fg);
232282
text-decoration: underline;
233283
text-underline-offset: 4px;
234-
text-decoration-color: #404040;
284+
text-decoration-color: var(--fg-subtle);
235285
transition: text-decoration-color 0.2s ease;
236286
}
237287
238288
.readme-content a:hover {
239-
text-decoration-color: #fafafa;
289+
text-decoration-color: var(--accent);
240290
}
241291
242292
.readme-content code {
243293
@apply font-mono;
244294
font-size: 0.875em;
245-
background: #1a1a1a;
295+
background: var(--bg-muted);
246296
padding: 0.2em 0.4em;
247297
border-radius: 4px;
248-
border: 1px solid #262626;
298+
border: 1px solid var(--border);
249299
}
250300
251301
/* Code blocks - including Shiki output */
252302
.readme-content pre,
253303
.readme-content .shiki {
254-
background: #111111 !important;
255-
border: 1px solid #262626;
304+
background: oklch(0.145 0 0) !important;
305+
border: 1px solid oklch(0.2686 0 0);
256306
border-radius: 8px;
257307
padding: 1rem;
258308
overflow-x: auto;
@@ -269,7 +319,7 @@ button {
269319
padding: 0;
270320
@apply font-mono;
271321
font-size: 0.875rem;
272-
color: #fafafa;
322+
color: var(--fg);
273323
/* Prevent code from forcing width */
274324
white-space: pre;
275325
word-break: normal;
@@ -296,25 +346,24 @@ button {
296346
}
297347
298348
.readme-content li::marker {
299-
color: #404040;
349+
color: var(--border-hover);
300350
}
301351
302352
.readme-content blockquote {
303-
border-left: 2px solid #262626;
353+
border-left: 2px solid var(--border);
304354
padding-left: 1rem;
305355
margin: 1.5rem 0;
306-
color: #8a8a8a;
356+
color: var(--fg-subtle);
307357
font-style: italic;
308358
}
309359
310360
/* GitHub-style callouts/alerts */
311361
.readme-content blockquote[data-callout] {
312362
border-left-width: 3px;
313-
border-radius: 6px;
314363
padding: 1rem 1rem 1rem 1.25rem;
315-
background: #111111;
364+
background: var(--bg-subtle);
316365
font-style: normal;
317-
color: #a1a1a1;
366+
color: var(--fg-subtle);
318367
}
319368
320369
.readme-content blockquote[data-callout]::before {
@@ -337,7 +386,7 @@ button {
337386
338387
/* Note - blue */
339388
.readme-content blockquote[data-callout='note'] {
340-
border-left-color: #3b82f6;
389+
border-left-color: var(--syntax-str);
341390
background: rgba(59, 130, 246, 0.05);
342391
}
343392
.readme-content blockquote[data-callout='note']::before {
@@ -357,12 +406,12 @@ button {
357406
358407
/* Important - purple */
359408
.readme-content blockquote[data-callout='important'] {
360-
border-left-color: #a855f7;
409+
border-left-color: var(--syntax-fn);
361410
background: rgba(168, 85, 247, 0.05);
362411
}
363412
.readme-content blockquote[data-callout='important']::before {
364413
content: 'Important';
365-
color: #a855f7;
414+
color: var(--syntax-fn);
366415
}
367416
368417
/* Warning - yellow/orange */
@@ -397,19 +446,19 @@ button {
397446
398447
.readme-content th,
399448
.readme-content td {
400-
border: 1px solid #262626;
449+
border: 1px solid var(--border);
401450
padding: 0.75rem 1rem;
402451
text-align: left;
403452
}
404453
405454
.readme-content th {
406-
background: #111111;
407-
color: #fafafa;
455+
background: var(--bg-subtle);
456+
color: var(--fg);
408457
font-weight: 500;
409458
}
410459
411460
.readme-content tr:hover {
412-
background: #111111;
461+
background: var(--bg-subtle);
413462
}
414463
415464
.readme-content img {
@@ -421,7 +470,7 @@ button {
421470
422471
.readme-content hr {
423472
border: none;
424-
border-top: 1px solid #262626;
473+
border-top: 1px solid var(--border);
425474
margin: 2rem 0;
426475
}
427476
@@ -438,10 +487,10 @@ p > span > code,
438487
.line-clamp-2 code {
439488
@apply font-mono;
440489
font-size: 0.85em;
441-
background: #1a1a1a;
490+
background: var(--bg-muted);
442491
padding: 0.1em 0.3em;
443492
border-radius: 3px;
444-
border: 1px solid #262626;
493+
border: 1px solid var(--border);
445494
}
446495
447496
/* View transition for search box (includes / and input) */

‎app/components/SettingsMenu.vue‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,14 +90,16 @@ onKeyStroke(',', e => {
9090
>
9191
<span class="text-sm text-fg select-none">Relative dates</span>
9292
<span
93-
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
94-
:class="settings.relativeDates ? 'bg-fg' : 'bg-bg-subtle'"
93+
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none shadow"
94+
:class="settings.relativeDates ? 'bg-fg' : 'bg-bg'"
9595
aria-hidden="true"
9696
>
9797
<span
9898
class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
9999
:class="
100-
settings.relativeDates ? 'translate-x-4 bg-bg' : 'translate-x-0 bg-fg-muted'
100+
settings.relativeDates
101+
? 'translate-x-4 bg-bg-subtle'
102+
: 'translate-x-0 bg-fg-muted'
101103
"
102104
/>
103105
</span>
@@ -106,22 +108,22 @@ onKeyStroke(',', e => {
106108
<!-- Include @types in install toggle -->
107109
<button
108110
type="button"
109-
class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
111+
class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inset-shadow"
110112
role="menuitemcheckbox"
111113
:aria-checked="settings.includeTypesInInstall"
112114
@click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
113115
>
114116
<span class="text-sm text-fg select-none">Include @types in install</span>
115117
<span
116-
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none"
117-
:class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg-subtle'"
118+
class="relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-[background-color] duration-200 ease-in-out motion-reduce:transition-none border border-border shadow"
119+
:class="settings.includeTypesInInstall ? 'bg-fg' : 'bg-bg'"
118120
aria-hidden="true"
119121
>
120122
<span
121123
class="pointer-events-none inline-block h-4 w-4 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
122124
:class="
123125
settings.includeTypesInInstall
124-
? 'translate-x-4 bg-bg'
126+
? 'translate-x-4 bg-bg-subtle'
125127
: 'translate-x-0 bg-fg-muted'
126128
"
127129
/>

‎app/pages/[...package].vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -764,7 +764,7 @@ defineOgImageComponent('Package', {
764764
</h2>
765765
<!-- Package manager tabs -->
766766
<div
767-
class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border rounded-md"
767+
class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md"
768768
role="tablist"
769769
aria-label="Package manager"
770770
>
@@ -774,11 +774,11 @@ defineOgImageComponent('Package', {
774774
:key="pm.id"
775775
role="tab"
776776
:aria-selected="selectedPM === pm.id"
777-
class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
777+
class="px-2 py-1 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
778778
:class="
779779
selectedPM === pm.id
780-
? 'bg-bg-elevated text-fg'
781-
: 'text-fg-subtle hover:text-fg-muted'
780+
? 'bg-bg shadow text-fg border-border'
781+
: 'text-fg-subtle hover:text-fg border-transparent'
782782
"
783783
@click="selectedPM = pm.id"
784784
>
@@ -799,11 +799,11 @@ defineOgImageComponent('Package', {
799799
</div>
800800
<div class="relative group">
801801
<!-- Terminal-style install command -->
802-
<div class="bg-[#0d0d0d] border border-border rounded-lg overflow-hidden">
802+
<div class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
803803
<div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
804-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
805-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
806-
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
804+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
805+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
806+
<span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
807807
</div>
808808
<div class="space-y-1 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
809809
<!-- Main package install -->

0 commit comments

Comments
 (0)