Skip to content

Commit 881330f

Browse files
jellydeckjellydeck
committed
few more tweaks 😌
1 parent 9b7add1 commit 881330f

7 files changed

Lines changed: 57 additions & 44 deletions

File tree

‎app/assets/main.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,11 @@ input[type='search']:focus-visible {
199199
outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
200200
}
201201

202+
select:focus-visible {
203+
outline: 2px solid var(--accent);
204+
outline-offset: 2px;
205+
}
206+
202207
/* Reset dd margin (browser default is margin-left: 40px) */
203208
dd {
204209
margin: 0;

‎app/components/Button/Base.vue‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,8 @@ defineExpose({
3232
<template>
3333
<button
3434
ref="el"
35-
class="group cursor-pointer inline-flex gap-x-1.5 items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid [transition:background-color,color,border,outline_200ms,border-radius_100ms] focus-visible:(outline-2 outline-accent outline-offset-2) after:(content-[''] absolute inset-0 rounded-inherit) disabled:(opacity-40 cursor-not-allowed border-transparent)"
36-
:class="{
37-
'text-sm px-4 py-2': size === 'medium',
38-
'text-xs px-2 py-0.5': size === 'small',
39-
'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
40-
variant === 'secondary',
41-
'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
42-
}"
35+
class="rounded-md outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
36+
:class="$attrs.class"
4337
:type="props.type"
4438
:disabled="
4539
/**
@@ -53,17 +47,29 @@ defineExpose({
5347
:aria-keyshortcuts="keyshortcut"
5448
>
5549
<span
56-
v-if="classicon"
57-
:class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
58-
aria-hidden="true"
59-
/>
60-
<slot />
61-
<kbd
62-
v-if="keyshortcut"
63-
class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
64-
aria-hidden="true"
50+
class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:rounded-4xl font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md [transition:border-radius_100ms]) active:after:rounded-4xl"
51+
:class="{
52+
'text-sm px-4 py-2': size === 'medium',
53+
'text-xs px-2 py-0.5': size === 'small',
54+
'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
55+
variant === 'secondary',
56+
'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
57+
'opacity-40 cursor-not-allowed border-transparent': disabled,
58+
}"
6559
>
66-
{{ keyshortcut }}
67-
</kbd>
60+
<span
61+
v-if="classicon"
62+
:class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
63+
aria-hidden="true"
64+
/>
65+
<slot />
66+
<kbd
67+
v-if="keyshortcut"
68+
class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
69+
aria-hidden="true"
70+
>
71+
{{ keyshortcut }}
72+
</kbd>
73+
</span>
6874
</button>
6975
</template>

‎app/components/Link/Base.vue‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
6262
<span
6363
v-if="disabled"
6464
:class="{
65-
'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
65+
'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-red rounded-md':
6666
isButton,
6767
'text-sm px-4 py-2': isButtonMedium,
6868
'text-xs px-2 py-0.5': isButtonSmall,
@@ -74,18 +74,22 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
7474
</span>
7575
<NuxtLink
7676
v-else
77-
class="group inline-flex gap-x-1 items-center justify-center rounded-sm focus-visible:(outline-2 outline-accent)"
78-
:class="{
79-
'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
80-
'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
81-
isLink,
82-
'font-mono border border-border rounded-md transition-all duration-200': isButton,
83-
'text-sm px-4 py-2': isButtonMedium,
84-
'text-xs px-2 py-0.5': isButtonSmall,
85-
'text-fg bg-transparent hover:(bg-fg/10 border-fg/10) focus-visible:(bg-fg/10)':
86-
variant === 'button-secondary',
87-
'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
88-
}"
77+
class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent focus-visible:(outline-2 outline-accent)"
78+
:class="[
79+
{
80+
'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
81+
!isLinkAnchor && isLink,
82+
'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
83+
isLink,
84+
'font-mono border border-solid border-transparent rounded-md transition-all duration-200':
85+
isButton,
86+
'text-sm px-4 py-2': isButtonMedium,
87+
'text-xs px-2 py-0.5': isButtonSmall,
88+
'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
89+
'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
90+
},
91+
$attrs.class,
92+
]"
8993
:to="to"
9094
:aria-keyshortcuts="keyshortcut"
9195
:target="isLinkExternal ? '_blank' : undefined"

‎app/components/Settings/AccentColorPicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ onPrehydrate(el => {
1717

1818
<template>
1919
<fieldset
20-
class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
20+
class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
2121
>
2222
<legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
2323
<label

‎app/components/Settings/BgThemePicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ onPrehydrate(el => {
1515

1616
<template>
1717
<fieldset
18-
class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
18+
class="flex items-center gap-4 has-[input:focus-visible]:(outline-2 outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
1919
>
2020
<legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
2121
<label

‎app/components/Settings/Toggle.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const checked = defineModel<boolean>({
2323
{{ label }}
2424
</span>
2525
<span
26-
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
26+
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-2 outline-accent/70 outline-offset-2 outline-solid)"
2727
:class="
2828
checked
2929
? 'bg-accent border-accent group-hover:bg-accent/80'

‎app/pages/settings.vue‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
5050
</h1>
5151
<button
5252
type="button"
53-
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
53+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5 outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2)"
5454
@click="router.back()"
5555
v-show="router.options.history.state.back !== null"
5656
>
@@ -162,7 +162,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
162162
<select
163163
id="language-select"
164164
:value="locale"
165-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
165+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
166166
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
167167
>
168168
<option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -190,15 +190,13 @@ const setLocale: typeof setNuxti18nLocale = locale => {
190190

191191
<!-- Simple help link for source locale -->
192192
<template v-else>
193-
<a
194-
href="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
195-
target="_blank"
196-
rel="noopener noreferrer"
197-
class="inline-flex items-center gap-2 text-sm text-fg-muted hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
193+
<LinkBase
194+
classicon="i-carbon:logo-github"
195+
class="font-sans"
196+
to="https://github.com/npmx-dev/npmx.dev/tree/main/i18n/locales"
198197
>
199-
<span class="i-carbon:logo-github w-4 h-4" aria-hidden="true" />
200198
{{ $t('settings.help_translate') }}
201-
</a>
199+
</LinkBase>
202200
</template>
203201
</div>
204202
</section>

0 commit comments

Comments
 (0)