From 0b7fd138663a4b9cf79d85b071f416e1323d1f85 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Mon, 6 Jan 2025 20:52:40 +0300
Subject: [PATCH] Use CSS for colors of VWordPress and VHomeLink (#5110)

* Use CSS for colors of VWordPress and VHomeLink
* Fix modal background and uncommon ring color
* Re-add focus
* Fix missing focus-visible:
---
 .../components/VAudioTrack/VAudioTrack.vue    |  2 +-
 .../VAudioTrack/layouts/VGlobalLayout.vue     |  2 +-
 .../VBanner/VNotificationBanner.vue           |  2 +-
 frontend/src/components/VButton.vue           |  2 +-
 .../src/components/VCheckbox/VCheckbox.vue    |  2 +-
 frontend/src/components/VFooter/VFooter.vue   |  4 ++--
 .../components/VHeader/VHeaderInternal.vue    | 12 +++++------
 frontend/src/components/VHeader/VHomeLink.vue | 21 +------------------
 .../src/components/VHeader/VWordPressLink.vue | 14 +------------
 .../VHeader/meta/VHomeLink.stories.ts         | 14 +------------
 .../components/VImageResult/VImageResult.vue  |  2 +-
 .../components/VMediaInfo/VMetadataValue.vue  |  2 +-
 .../src/components/VModal/VModalContent.vue   |  4 +++-
 frontend/src/components/VRadio/VRadio.vue     |  2 +-
 frontend/src/components/VTabs/VTab.vue        |  2 +-
 frontend/src/components/meta/Focus.stories.js |  2 +-
 frontend/src/styles/tailwind.css              | 19 +++++++++++------
 frontend/tailwind.config.ts                   | 19 ++++++++++++-----
 18 files changed, 51 insertions(+), 76 deletions(-)

diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index f39b1834794..c945ce73b83 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -487,7 +487,7 @@ const handleWaveformBlur = () => {
     :class="{
       'audio-link cursor-pointer focus-visible:focus-bold-filled':
         layout === 'box',
-      'cursor-pointer focus-slim-tx': layout === 'row',
+      'cursor-pointer focus-visible:focus-slim-tx': layout === 'row',
     }"
     :aria-label="ariaLabel"
     :role="isComposite ? 'application' : undefined"
diff --git a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
index 06c4aa9b0d3..2facbc4e509 100644
--- a/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
+++ b/frontend/src/components/VAudioTrack/layouts/VGlobalLayout.vue
@@ -16,7 +16,7 @@ const { isHidden: shouldBlur } = useSensitiveMedia(audio)
 
 <template>
   <div
-    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-gray-3 ring-opacity-20"
+    class="global-track grid w-full grid-cols-[3rem,1fr] grid-rows-[3rem,3rem] rounded ring-1 ring-[--color-gray-3] ring-opacity-20"
   >
     <div class="h-12 w-12 rounded-ss">
       <VAudioThumbnail class="rounded-ss" :audio="audio" />
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index 4a109b534ed..390d7f394ed 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -65,7 +65,7 @@ const iconClassNames = computed(() =>
 
 const closeButtonClassNames = computed(() =>
   props.variant === "dark"
-    ? "focus-slim-tx-bg-complementary hover:bg-tertiary-hover"
+    ? "focus-visible:focus-slim-tx hover:bg-tertiary-hover"
     : {
         info: "hover:!bg-info-3",
         warning: "hover:!bg-warning-3",
diff --git a/frontend/src/components/VButton.vue b/frontend/src/components/VButton.vue
index 75cfc0fe82e..cc84a72b914 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -225,7 +225,7 @@ watch(
         border: !isPlainDangerous,
         'focus-visible:outline-tx': isPlainDangerous,
         'focus-slim-filled': isFocusSlimFilled,
-        'focus-slim-tx': isFocusSlimTx,
+        'focus-visible:focus-slim-tx': isFocusSlimTx,
       },
     ]"
     :aria-pressed="pressed"
diff --git a/frontend/src/components/VCheckbox/VCheckbox.vue b/frontend/src/components/VCheckbox/VCheckbox.vue
index 99b53c65477..7dab28ee9ac 100644
--- a/frontend/src/components/VCheckbox/VCheckbox.vue
+++ b/frontend/src/components/VCheckbox/VCheckbox.vue
@@ -121,7 +121,7 @@ const onChange = () => {
                 'h-5',
                 'w-5',
                 'rounded-sm',
-                'focus-slim-tx',
+                'focus-visible:focus-slim-tx',
                 'checked:focus-visible:border-bg-ring',
               ]
         "
diff --git a/frontend/src/components/VFooter/VFooter.vue b/frontend/src/components/VFooter/VFooter.vue
index 295ecfffc29..cc71ac401a3 100644
--- a/frontend/src/components/VFooter/VFooter.vue
+++ b/frontend/src/components/VFooter/VFooter.vue
@@ -96,7 +96,7 @@ const linkColumnHeight = computed(() => ({
     <!-- Locale chooser and WordPress affiliation graphic -->
     <div class="locale-and-wp flex flex-col justify-between">
       <template v-if="showThemeSwitcher">
-        <VWordPressLink mode="light" />
+        <VWordPressLink />
         <div class="flex flex-row items-center gap-6">
           <VLanguageSelect
             v-bind="languageProps"
@@ -110,7 +110,7 @@ const linkColumnHeight = computed(() => ({
           v-bind="languageProps"
           class="language max-w-full border-secondary"
         />
-        <VWordPressLink mode="light" />
+        <VWordPressLink />
       </template>
     </div>
   </footer>
diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
index 8ebe34c0109..20b7d9eae84 100644
--- a/frontend/src/components/VHeader/VHeaderInternal.vue
+++ b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -79,7 +79,7 @@ watch(route, () => {
     ref="nodeRef"
     class="main-header z-30 flex h-20 w-full items-stretch justify-between gap-x-2 border-b border-tx px-2 py-4 md:py-4 lg:pe-10 lg:ps-6"
   >
-    <VHomeLink variant="dark" />
+    <VHomeLink />
     <nav class="hidden lg:flex">
       <VPageLinks
         mode="light"
@@ -125,18 +125,18 @@ watch(route, () => {
           :hide="closePageMenu"
           variant="full"
           mode="dark"
-          modal-content-classes="flex sm:hidden"
+          content-classes="flex sm:hidden"
           :visible="isModalVisible"
           @open="openPageMenu"
         >
           <template #top-bar>
             <div class="flex h-20 w-full justify-between px-2 py-4">
-              <VHomeLink variant="light" />
+              <VHomeLink />
               <VIconButton
                 variant="transparent-tx"
                 size="large"
                 :icon-props="{ name: 'close' }"
-                class="text-white focus-slim-tx hover:bg-tertiary hover:text-over-negative"
+                class="text-white hover:bg-surface focus-visible:focus-slim-tx"
                 :label="$t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
@@ -147,12 +147,12 @@ watch(route, () => {
               <VPageLinks
                 mode="dark"
                 class="mt-3 flex flex-col items-end gap-y-6"
-                nav-link-classes="text-white text-3xl focus-visible:outline-yellow-3"
+                nav-link-classes="text-white text-3xl focus-visible:outline-focus"
                 :is-in-modal="true"
                 @close="closePageMenu"
               />
             </nav>
-            <VWordPressLink class="mt-auto" mode="dark" />
+            <VWordPressLink class="mt-auto" />
           </template>
         </VModalContent>
       </template>
diff --git a/frontend/src/components/VHeader/VHomeLink.vue b/frontend/src/components/VHeader/VHomeLink.vue
index 41421cbb812..44771a69082 100644
--- a/frontend/src/components/VHeader/VHomeLink.vue
+++ b/frontend/src/components/VHeader/VHomeLink.vue
@@ -3,22 +3,8 @@
  * The home link for the internal header. Shows the Openverse logo and wordmark,
  * and does not have a loading state.
  */
-
 import VButton from "~/components/VButton.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
-
-withDefaults(
-  defineProps<{
-    /**
-     * In `light` mode, the links are white and the background is dark charcoal.
-     * In `dark` mode, the links are dark charcoal and the background is transparent.
-     *
-     * @default 'light'
-     */
-    variant?: "light" | "dark"
-  }>(),
-  { variant: "light" }
-)
 </script>
 
 <template>
@@ -28,12 +14,7 @@ withDefaults(
     :aria-label="$t('header.homeLink', { openverse: 'Openverse' })"
     variant="transparent-tx"
     size="disabled"
-    :class="
-      variant === 'dark'
-        ? 'text-default hover:bg-complementary'
-        : 'focus-slim-tx-bg-complementary text-white'
-    "
-    class="h-12 px-4 text-[1.125rem]"
+    class="h-12 px-4 text-[1.125rem] text-contrast"
   >
     <VSvg
       name="logo_and_wordmark"
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index b810ca6f741..2b1f5772ea6 100644
--- a/frontend/src/components/VHeader/VWordPressLink.vue
+++ b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -1,25 +1,13 @@
 <script setup lang="ts">
 import VLink from "~/components/VLink.vue"
 import VSvg from "~/components/VSvg/VSvg.vue"
-
-withDefaults(
-  defineProps<{
-    mode?: "dark" | "light"
-  }>(),
-  { mode: "light" }
-)
 </script>
 
 <template>
   <VLink
     href="https://wordpress.org"
     :aria-label="$t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
-    class="hover:no-underline"
-    :class="
-      mode === 'dark'
-        ? 'text-white focus-visible:outline-yellow-3'
-        : 'text-default'
-    "
+    class="max-w-fit text-contrast hover:no-underline focus-visible:outline-focus"
   >
     <i18n-t
       scope="global"
diff --git a/frontend/src/components/VHeader/meta/VHomeLink.stories.ts b/frontend/src/components/VHeader/meta/VHomeLink.stories.ts
index aa7026914d8..1085d745d4b 100644
--- a/frontend/src/components/VHeader/meta/VHomeLink.stories.ts
+++ b/frontend/src/components/VHeader/meta/VHomeLink.stories.ts
@@ -7,16 +7,6 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 const meta = {
   title: "Components/VHeader/HomeLinks/VHomeLink",
   component: VHomeLink,
-
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["dark", "light"],
-    },
-  },
-  args: {
-    variant: "dark",
-  },
 } satisfies Meta<typeof VHomeLink>
 
 export default meta
@@ -26,9 +16,7 @@ export const Default: Story = {
   render: (args) => ({
     components: { VHomeLink },
     setup() {
-      const bg = args.variant === "dark" ? "bg-default" : "bg-black"
-      return () =>
-        h("div", { class: `flex p-4 ${bg}` }, h(VHomeLink, { ...args }))
+      return () => h("div", { class: `flex p-4` }, h(VHomeLink, { ...args }))
     },
   }),
   name: "Default",
diff --git a/frontend/src/components/VImageResult/VImageResult.vue b/frontend/src/components/VImageResult/VImageResult.vue
index c5c9c89c143..dc1f1d08d5b 100644
--- a/frontend/src/components/VImageResult/VImageResult.vue
+++ b/frontend/src/components/VImageResult/VImageResult.vue
@@ -146,7 +146,7 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
       :class="
         isSquare
           ? 'focus-visible:focus-bold-filled'
-          : 'focus-slim-tx focus-visible:-m-2 focus-visible:w-[calc(100%+theme(spacing.4))] focus-visible:p-2 sm:focus-visible:m-0 sm:focus-visible:w-full sm:focus-visible:p-0 focus-visible:sm:focus-bold-filled'
+          : 'focus-visible:-m-2 focus-visible:w-[calc(100%+theme(spacing.4))] focus-visible:p-2 focus-visible:focus-slim-tx sm:focus-visible:m-0 sm:focus-visible:w-full sm:focus-visible:p-0 focus-visible:sm:focus-bold-filled'
       "
       :aria-label="contextSensitiveLabel"
       @mousedown="sendSelectSearchResultEvent"
diff --git a/frontend/src/components/VMediaInfo/VMetadataValue.vue b/frontend/src/components/VMediaInfo/VMetadataValue.vue
index 3446c52b15d..695723e5de9 100644
--- a/frontend/src/components/VMediaInfo/VMetadataValue.vue
+++ b/frontend/src/components/VMediaInfo/VMetadataValue.vue
@@ -18,7 +18,7 @@ defineEmits<{
     <VLink
       v-if="datum.url"
       :href="datum.url"
-      class="focus-visible:ring-border-focus flex text-link focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-1"
+      class="flex text-link focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-focus focus-visible:ring-offset-1"
       :send-external-link-click-event="false"
       @click="$emit('click', datum.source)"
       ><span
diff --git a/frontend/src/components/VModal/VModalContent.vue b/frontend/src/components/VModal/VModalContent.vue
index 4a9ad5541b1..8d1f0bcc577 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -122,7 +122,9 @@ defineExpose({
         v-bind="$attrs"
         class="flex flex-col"
         :class="[
-          mode === 'dark' ? 'bg-black text-default' : 'bg-overlay text-default',
+          mode === 'dark'
+            ? 'dark-mode bg-black text-default'
+            : 'bg-overlay text-default',
           {
             'w-full md:max-w-[768px] lg:w-[768px] xl:w-[1024px] xl:max-w-[1024px]':
               variant === 'default',
diff --git a/frontend/src/components/VRadio/VRadio.vue b/frontend/src/components/VRadio/VRadio.vue
index be4850ae1c5..3f366dfa10a 100644
--- a/frontend/src/components/VRadio/VRadio.vue
+++ b/frontend/src/components/VRadio/VRadio.vue
@@ -42,7 +42,7 @@ const handleInput = () => {
       :id="id"
       v-bind="$attrs"
       :value="value"
-      class="radio focus-visible:ring-border-focus relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-tertiary bg-default focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-2 disabled:border-disabled disabled:bg-secondary"
+      class="radio relative me-3 h-5 w-5 flex-shrink-0 appearance-none rounded-full border border-tertiary bg-default focus-visible:outline-none focus-visible:ring focus-visible:ring-focus focus-visible:ring-offset-2 disabled:border-disabled disabled:bg-secondary"
       type="radio"
       :checked="isChecked"
       @input="handleInput"
diff --git a/frontend/src/components/VTabs/VTab.vue b/frontend/src/components/VTabs/VTab.vue
index 1df9437ad86..d0b590d434f 100644
--- a/frontend/src/components/VTabs/VTab.vue
+++ b/frontend/src/components/VTabs/VTab.vue
@@ -159,7 +159,7 @@ const variant = computed(() => tabContext.variant.value)
     size="disabled"
     variant="plain--avoid"
     v-bind="tabProps"
-    class="rounded-none bg-default focus-slim-tx focus:z-10"
+    class="rounded-none bg-default focus:z-10 focus-visible:focus-slim-tx"
     :class="[variant, `size-${size}`, { [`${variant}-selected`]: isSelected }]"
     @click="handleSelection"
     @focus="handleFocus"
diff --git a/frontend/src/components/meta/Focus.stories.js b/frontend/src/components/meta/Focus.stories.js
index f4e282e5579..fa6db9b6ce8 100644
--- a/frontend/src/components/meta/Focus.stories.js
+++ b/frontend/src/components/meta/Focus.stories.js
@@ -27,7 +27,7 @@ export const SlimTransparent = {
   name: "Slim transparent",
 
   args: {
-    classNames: ["focus-slim-tx"],
+    classNames: ["focus-visible:focus-slim-tx"],
   },
 }
 
diff --git a/frontend/src/styles/tailwind.css b/frontend/src/styles/tailwind.css
index a98fc92baf0..6610194a0bd 100644
--- a/frontend/src/styles/tailwind.css
+++ b/frontend/src/styles/tailwind.css
@@ -177,6 +177,7 @@
       --color-border-focus: var(--color-pink-8);
       --color-border-bg-ring: var(--color-white);
       --color-border-disabled: var(--color-gray-5);
+      --color-focus-ring: var(--color-pink-8);
 
       /* Text */
       --color-text: var(--color-gray-12);
@@ -236,6 +237,7 @@
       --color-border-focus: var(--color-yellow-4);
       --color-border-bg-ring: var(--color-gray-13);
       --color-border-disabled: var(--color-gray-8);
+      --color-focus-ring: var(--color-yellow-4);
 
       /* Text */
       --color-text: var(--color-gray-1);
@@ -297,6 +299,7 @@
     --color-border-focus: var(--color-pink-8);
     --color-border-bg-ring: var(--color-white);
     --color-border-disabled: var(--color-gray-5);
+    --color-focus-ring: var(--color-pink-8);
 
     /* Text */
     --color-text: var(--color-gray-12);
@@ -357,6 +360,7 @@
     --color-border-focus: var(--color-yellow-4);
     --color-border-bg-ring: var(--color-gray-13);
     --color-border-disabled: var(--color-gray-8);
+    --color-focus-ring: var(--color-yellow-4);
 
     /* Text */
     --color-text: var(--color-gray-1);
@@ -532,13 +536,14 @@ Time                - 11px - xs semibold (default leading-tight)
     @apply ring-offset-1;
   }
 
-  [class*="focus-slim-tx"] {
-    @apply focus-visible:outline-none; /* UA styles: none */
-    @apply focus-visible:ring; /* outer-stroke: box-shadow */
-    @apply focus-visible:border-tx; /* inner-stroke: transparent border */
+  .focus-slim-tx {
+    @apply outline-style-none; /* UA styles: none */
+    @apply ring; /* outer-stroke: box-shadow */
+    @apply border-tx; /* inner-stroke: transparent border */
 
     /* It is up to the component to apply border utilities. */
-    @apply focus-visible:hover:border-tx; /* focus prevails over hover */
+    @apply hover:border-tx; /* focus prevails over hover */
+    @apply ring-focus; /* default ring color */
   }
 
   [class*="focus-slim-filled"] {
@@ -552,7 +557,7 @@ Time                - 11px - xs semibold (default leading-tight)
     @apply focus-visible:after:-left-px focus-visible:after:-top-px;
 
     @apply focus-visible:after:border-bg-ring;
-    @apply focus-visible:outline-[--tw-outline-color];
+    @apply focus-visible:outline-focus;
     /* @apply ring-offset-bg-default; */
   }
 
@@ -565,6 +570,8 @@ Time                - 11px - xs semibold (default leading-tight)
 
     @apply after:pointer-events-none after:absolute after:inset-0 after:rounded-inherit;
     @apply after:z-10 after:shadow-bold-filled; /* inner-stroke: pseudo-element */
+
+    @apply ring-focus; /* default ring color */
   }
 
   /**
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 8a27ed90956..5d9260429d3 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -99,16 +99,18 @@ export default {
       pink: shadeScale("pink"),
       yellow: shadeScale("yellow"),
 
+      // Special keywords
+      tx: "transparent",
+      curr: "currentColor",
+      current: "currentColor",
+
       // Focus ring colors
       focus: {
         DEFAULT: "var(--color-border-focus)",
         yellow: "var(--color-yellow-3)",
       },
 
-      // Special keywords
-      tx: "transparent",
-      curr: "currentColor",
-      current: "currentColor",
+      contrast: "var(--color-contrast, var(--color-text))",
     },
     placeholderColor: {
       default: "var(--color-text-secondary)",
@@ -254,6 +256,7 @@ export default {
         "over-dark": "var(--color-text-over-dark)",
         "over-negative": "var(--color-text-over-negative)",
         "secondary-over-dark": "var(--color-text-secondary-over-dark)",
+        contrast: "var(--color-contrast, var(--color-text))",
       },
       backgroundColor: {
         default: "var(--color-bg)",
@@ -319,6 +322,12 @@ export default {
         1.5: "1.5px",
         3: "3px",
       },
+      outlineColor: {
+        focus: "var(--color-border-focus)",
+      },
+      ringColor: {
+        focus: "var(--color-border-focus)",
+      },
       typography: () => ({
         DEFAULT: {
           css: {
@@ -360,7 +369,7 @@ export default {
             item,
             (value) => ({
               "--tw-ring-offset-color": "var(--color-bg-curr-page)",
-              "--tw-ring-color": value,
+              "--tw-ring-color": `var(--color-accent, var(${value}))`,
               "--tw-outline-color": value,
             }),
           ])