teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix(a11y): solid color for secondary text (#148)

Browse source
This commit is contained in:
patak 2022-11-26 21:41:18 +01:00 committed by GitHub
parent 730eeca5b2
commit e45ecf55f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 36 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/account/AccountHandle.vue
View file

@ -10,7 +10,7 @@ const serverName = $computed(() => getServerName(account))
<template>
<p>
<span>{{ getShortHandle(account) }}</span>
<span v-if="serverName" text="gray/95">@{{ serverName }}</span>
<span text-secondary>{{ getShortHandle(account) }}</span>
<span v-if="serverName" text-secondary-light>@{{ serverName }}</span>
</p>
</template>

16
components/account/AccountHeader.vue
View file

@ -67,7 +67,7 @@ function previewAvatar() {
</button>
<div flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" op50 />
<AccountHandle :account="account" />
</div>
</div>
<div flex gap-2 items-center>
@ -81,12 +81,12 @@ function previewAvatar() {
</div>
</div>
<div v-if="account.note">
<ContentRich text-4 text-gray :content="account.note" :emojis="account.emojis" />
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
</div>
<div flex flex-wrap gap-4>
<div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center>
<div v-if="getFieldNameIcon(field.name)" op50 :class="getFieldNameIcon(field.name)" :title="field.name" />
<div v-else op50 uppercase text-xs font-bold>
<div v-for="field in fields" :key="field.name" flex="~ gap-1" items-center >
<div v-if="getFieldNameIcon(field.name)" text-secondary :class="getFieldNameIcon(field.name)" :title="field.name" />
<div v-else text-secondary uppercase text-xs font-bold>
{{ field.name }} |
</div>
<ContentRich text-sm filter-saturate-0 :content="field.value" />
@ -94,13 +94,13 @@ function previewAvatar() {
</div>
<div flex gap-5>
<NuxtLink :to="getAccountPath(account)" exact-active-class="text-primary">
<span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span op50>Posts</span>
<span font-bold>{{ formattedNumber(account.statusesCount) }}</span> <span text-secondary>Posts</span>
</NuxtLink>
<NuxtLink :to="`${getAccountPath(account)}/following`" exact-active-class="text-primary">
<span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span op50>Following</span>
<span font-bold>{{ humanReadableNumber(account.followingCount) }}</span> <span text-secondary>Following</span>
</NuxtLink>
<NuxtLink :to="`${getAccountPath(account)}/followers`" exact-active-class="text-primary">
<span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span op50>Followers</span>
<span font-bold>{{ humanReadableNumber(account.followersCount) }}</span> <span text-secondary>Followers</span>
</NuxtLink>
</div>
</div>

4
components/account/AccountHoverCard.vue
View file

@ -9,7 +9,7 @@ defineProps<{
<template>
<div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
<AccountInfo :account="account" />
<div text-sm flex flex-row text-gray mt-4>
<div text-sm flex flex-row text-secondary mt-4>
<NuxtLink :to="`/${getFullHandle(account)}/`">
{{ formattedNumber(account.statusesCount) }} Posts
</NuxtLink>
@ -22,6 +22,6 @@ defineProps<{
{{ humanReadableNumber(account.followersCount) }} Followers
</NuxtLink>
</div>
<ContentRich text-4 text-gray :content="account.note" :emojis="account.emojis" />
<ContentRich text-4 text-secondary :content="account.note" :emojis="account.emojis" />
</div>
</template>

2
components/account/AccountInfo.vue
View file

@ -18,7 +18,7 @@ const { account, link = true, fullServer = false } = defineProps<{
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm op35 />
<AccountHandle :account="account" text-sm />
<slot name="bottom" />
</NuxtLink>
<slot />

8
components/common/CommonPaginator.vue
View file

@ -28,13 +28,13 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
</template>
<div ref="endAnchor" />
<div v-if="state === 'loading'" p5 text-center flex="~ col" items-center animate-pulse>
<div op50 i-ri:loader-2-fill animate-spin text-2xl />
<span op50>Loading...</span>
<div text-secondary i-ri:loader-2-fill animate-spin text-2xl />
<span text-secondary>Loading...</span>
</div>
<div v-else-if="state === 'done'" p5 op50 italic text-center>
<div v-else-if="state === 'done'" p5 text-secondary italic text-center>
End of the list
</div>
<div v-else-if="state === 'error'" p5 op50>
<div v-else-if="state === 'error'" p5 text-secondary>
ERROR: {{ error }}
</div>
</div>

2
components/common/dropdown/DropdownItem.vue
View file

@ -27,7 +27,7 @@ const handleClick = (evt: MouseEvent) => {
<div text-15px>
<slot />
</div>
<div text-3 text="gray/90">
<div text-3 text-secondary>
<slot name="description">
<p v-if="description">
{{ description }}

2
components/nav/NavFooter.vue
View file

@ -6,7 +6,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
</script>
<template>
<div p4 text-sm op25 flex="~ col">
<div p4 text-sm text-secondary-light flex="~ col">
<div flex="~ gap2">
<button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
<button

2
components/nav/NavTitle.vue
View file

@ -3,7 +3,7 @@
<NuxtLink flex px3 py2 items-center text-2xl gap-2 hover:bg-active focus-visible:ring="2 current" rounded-full to="/" external>
<img aria-label="Elk Logo" src="/logo.svg" w-10 h-10>
<div>
Elk <sup text-sm italic op50 mt-1>alpha</sup>
Elk <sup text-sm italic text-secondary mt-1>alpha</sup>
</div>
</NuxtLink>
</template>

4
components/publish/PublishWidget.vue
View file

@ -150,7 +150,7 @@ onUnmounted(() => {
<div v-if="currentUser" flex="~ col gap-1">
<template v-if="draft.editingStatus">
<div flex="~ col gap-1">
<div text-gray self-center>
<div text-secondary self-center>
Editing
</div>
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" />
@ -235,7 +235,7 @@ onUnmounted(() => {
<CommonDropdown>
<button btn-action-icon w-12>
<div :class="currentVisibility.icon" />
<div i-ri:arrow-down-s-line text-sm op50 mr--1 />
<div i-ri:arrow-down-s-line text-sm text-secondary mr--1 />
</button>
<template #popper>

2
components/status/StatusAccountDetails.vue
View file

@ -13,6 +13,6 @@ const { account, link = true } = defineProps<{
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
>
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" op50 />
<AccountHandle :account="account" />
</NuxtLink>
</template>

6
components/status/StatusCard.vue
View file

@ -40,7 +40,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<template>
<div :id="`status-${status.id}`" ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
<div v-if="rebloggedBy" pl8>
<div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
<div flex="~ wrap" gap-1 items-center text-secondary text-sm>
<div i-ri:repeat-fill mr-1 />
<AccountInlineInfo font-bold :account="rebloggedBy" />
reblogged
@ -52,10 +52,10 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<div flex>
<StatusAccountDetails :account="status.account" />
<div flex-auto />
<div text-sm op50 flex="~ row nowrap" hover:underline>
<div text-sm text-secondary flex="~ row nowrap" hover:underline>
<CommonTooltip :content="createdAt">
<a :title="status.createdAt" :href="getStatusPath(status)" @click.prevent="go">
<time text-sm op50 hover:underline :datetime="status.createdAt">
<time text-sm hover:underline :datetime="status.createdAt">
{{ timeago }}
</time>
</a>

2
components/status/StatusDetails.vue
View file

@ -30,7 +30,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
:status="status"
/>
</StatusSpoiler>
<div flex="~ gap-1" items-center op50 text-sm>
<div flex="~ gap-1" items-center text-secondary text-sm>
<div flex>
<div>{{ createdAt }}</div>
<StatusEditIndicator

4
components/status/StatusReplyingTo.vue
View file

@ -11,11 +11,11 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
<template>
<NuxtLink
v-if="status.inReplyToId"
flex="~ wrap" items-center text-sm text-gray:85
flex="~ wrap" items-center text-sm text-secondary
:to="getStatusInReplyToPath(status)"
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
>
<div i-ri:reply-fill rotate-180 op50 class="mr-1.5" />
<div i-ri:reply-fill rotate-180 text-secondary class="mr-1.5" />
<AccountInlineInfo v-if="account" :account="account" :link="false" />
<span v-else>Someone</span>
's post

1
components/status/edit/StatusEditIndicator.vue
View file

@ -17,6 +17,7 @@ const formatted = useFormattedDateTime(status.editedAt)
:title="editedAt"
:datetime="editedAt"
font-bold underline decoration-dashed
text-secondary
>&nbsp;*</time>
</CommonTooltip>

2
components/tiptap/TiptapMentionList.vue
View file

@ -46,7 +46,7 @@ defineExpose({
<button
v-for="(item, index) in items"
:key="index"
:class="index === selectedIndex ? 'bg-active' : 'op50'"
:class="index === selectedIndex ? 'bg-active' : 'text-secondary'"
block m0 w-full text-left px2 py1
@click="selectItem(index)"
>

2
components/user/UserSignIn.vue
View file

@ -24,7 +24,7 @@ async function handleInput() {
</div>
<div>Mastodon Server Name</div>
<div flex bg-gray:10 px2 py1 mxa rounded border="~ border" text-xl items-center>
<span op35 mr1 text-sm>https://</span>
<span text-secondary-light mr1 text-sm>https://</span>
<input v-model="server" :placeholder="DEFAULT_SERVER" outline-none bg-transparent @input="handleInput">
</div>
<button btn-solid mt2>

2
components/user/UserSignInEntry.vue
View file

@ -1,6 +1,6 @@
<template>
<div p8 flex="~ col gap4">
<div text-sm op50>
<div text-sm text-secondary>
Sign in to follow profiles or hashtags, favourite, share and reply to posts, or interact from your account on a different server.
</div>
<button class="btn-solid text-center" @click="openSigninDialog()">

2
styles/vars.css
View file

@ -8,6 +8,7 @@
--c-bg-selection: #8885;
--c-text-base: #222;
--c-text-secondary: #888;
--c-text-secondary-light: #bbb;
}
.dark {
@ -15,4 +16,5 @@
--c-bg-active: #151515;
--c-bg-code: #ffffff06;
--c-text-base: #fff;
--c-text-secondary-light: #555;
}

1
unocss.config.ts
View file

@ -22,6 +22,7 @@ export default defineConfig({
// text
'text-base': 'text-$c-text-base',
'text-secondary': 'text-$c-text-secondary',
'text-secondary-light': 'text-$c-text-secondary-light',
// buttons
'btn-base': 'cursor-pointer disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0 disabled:brightness-[0.7] disabled:contrast-[2]',