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

components/account/AccountHandle.vue

@@ -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>

components/account/AccountHeader.vue

@@ -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>

components/account/AccountHoverCard.vue

@@ -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>

components/account/AccountInfo.vue

@@ -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 />

components/common/CommonPaginator.vue

@@ -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>

components/common/dropdown/DropdownItem.vue

@@ -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 }}

components/nav/NavFooter.vue

@@ -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

components/nav/NavTitle.vue

@@ -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>

components/publish/PublishWidget.vue

@@ -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>

components/status/StatusAccountDetails.vue

@@ -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>

components/status/StatusCard.vue

@@ -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>

components/status/StatusDetails.vue

@@ -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

components/status/StatusReplyingTo.vue

@@ -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

components/status/edit/StatusEditIndicator.vue

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

components/tiptap/TiptapMentionList.vue

@@ -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)"
       >

components/user/UserSignIn.vue

@@ -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>

components/user/UserSignInEntry.vue

@@ -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()">

styles/vars.css

@@ -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;
 }

unocss.config.ts

@@ -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]',