Skip to content

Commit c76cc87

Browse files
committed
buttons & links style adjusted
1 parent 16b012a commit c76cc87

6 files changed

Lines changed: 37 additions & 18 deletions

File tree

app/assets/main.css

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -186,13 +186,28 @@ body {
186186
line-height: 1.6;
187187
}
188188

189-
:focus-visible,
190189
:-moz-focusring {
191-
/* weird Firefox behavior makes it necessary to add `!important`
192-
or otherwise the selector would need to be more specific,
193-
which it explicitly should not be. */
194-
outline: 2px solid var(--accent) !important;
195-
outline-offset: 2px !important;
190+
outline: auto;
191+
}
192+
193+
a {
194+
border-radius: 4px;
195+
}
196+
197+
a:focus-visible,
198+
button:focus-visible,
199+
select:focus-visible {
200+
outline: 2px solid var(--accent);
201+
outline-offset: 2px;
202+
}
203+
204+
input:focus {
205+
border: 1px solid var(--accent);
206+
}
207+
208+
input[type='text']:focus-visible,
209+
input[type='search']:focus-visible {
210+
outline: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
196211
}
197212

198213
/* Reset dd margin (browser default is margin-left: 40px) */

app/components/Button/Base.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,13 @@ defineExpose({
3232
<template>
3333
<button
3434
ref="el"
35-
class="group cursor-pointer inline-flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
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:all_200ms,border-radius_100ms] disabled:(opacity-40 cursor-not-allowed border-transparent) after:(content-[''] absolute inset-0 rounded-inherit pointer-events-none)"
3636
:class="{
3737
'text-sm px-4 py-2': size === 'medium',
3838
'text-xs px-2 py-0.5': size === 'small',
39-
'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':
39+
'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
4040
variant === 'secondary',
41-
'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
42-
variant === 'primary',
41+
'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
4342
}"
4443
:type="props.type"
4544
:disabled="

app/components/Button/Group.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const props = defineProps<{
77
<template>
88
<component
99
:is="props.as || 'div'"
10-
class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
10+
class="flex ms-auto rounded-2xl [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
1111
>
1212
<slot />
1313
</component>

app/components/CallToAction.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const socialLinks = computed(() => [
3737
<div
3838
v-for="link in socialLinks"
3939
:key="link.id"
40-
class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent/50"
40+
class="group relative grid gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200 sm:grid-rows-subgrid sm:row-span-3 focus-within:ring-2 focus-within:ring-accent"
4141
>
4242
<h3 class="z-1 flex gap-2">
4343
<span :class="link.icon" class="shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />

app/components/Header/AccountMenu.client.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -225,10 +225,12 @@ function openAuthModal() {
225225
v-if="!isNpmConnected"
226226
type="button"
227227
role="menuitem"
228-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
228+
class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
229229
@click="openConnectorModal"
230230
>
231-
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
231+
<span
232+
class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
233+
>
232234
<span
233235
v-if="isNpmConnecting"
234236
class="i-carbon-circle-dash w-4 h-4 text-yellow-500 animate-spin"
@@ -252,10 +254,12 @@ function openAuthModal() {
252254
v-if="!atprotoUser"
253255
type="button"
254256
role="menuitem"
255-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
257+
class="w-full px-3 py-2.5 group flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
256258
@click="openAuthModal"
257259
>
258-
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
260+
<span
261+
class="w-8 h-8 rounded-full bg-bg-muted group-hover:bg-bg-subtle flex items-center justify-center"
262+
>
259263
<span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
260264
</span>
261265
<div class="flex-1 min-w-0">

app/components/Link/Base.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
8181
'font-mono border border-border rounded-md transition-all duration-200': isButton,
8282
'text-sm px-4 py-2': isButtonMedium,
8383
'text-xs px-2 py-0.5': isButtonSmall,
84-
'bg-transparent text-fg hover:(bg-fg/10) focus-visible:(bg-fg/10)':
84+
'text-fg bg-transparent hover:(bg-fg/10 border-fg/10) focus-visible:(bg-fg/10)':
8585
variant === 'button-secondary',
8686
'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
8787
}"
@@ -91,6 +91,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
9191
>
9292
<span
9393
v-if="classicon"
94+
class="text-fg"
9495
:class="[isButtonSmall ? 'size-3' : 'size-4', classicon]"
9596
aria-hidden="true"
9697
/>
@@ -108,7 +109,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
108109
/>
109110
<kbd
110111
v-if="keyshortcut"
111-
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"
112+
class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs group-hover:text-accent bg-bg-muted border border-border rounded no-underline"
112113
aria-hidden="true"
113114
>
114115
{{ keyshortcut }}

0 commit comments

Comments
 (0)