From 727b461e43bfaa52db2f8f40c3e8d33469727c2f Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Tue, 29 Oct 2024 16:14:02 +0300
Subject: [PATCH] Use CSS for colors of VWordPress and VHomeLink

---
 .../components/VAudioTrack/VAudioTrack.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    | 10 ++++----
 frontend/src/components/VHeader/VHomeLink.vue | 21 +----------------
 .../src/components/VHeader/VWordPressLink.vue | 14 +----------
 .../src/components/VImageCell/VImageCell.vue  |  2 +-
 .../components/VMediaInfo/VMetadataValue.vue  |  2 +-
 .../src/components/VModal/VModalContent.vue   | 23 ++++++++++++++++++-
 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              | 17 ++++++++++----
 frontend/tailwind.config.ts                   |  6 ++++-
 16 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/VAudioTrack/VAudioTrack.vue b/frontend/src/components/VAudioTrack/VAudioTrack.vue
index ff93e3f21e3..85ac771c94f 100644
--- a/frontend/src/components/VAudioTrack/VAudioTrack.vue
+++ b/frontend/src/components/VAudioTrack/VAudioTrack.vue
@@ -431,7 +431,7 @@ const layoutBasedProps = computed(() =>
           "cursor-pointer",
           {
             "focus-visible:focus-bold-filled": props.layout === "box",
-            "focus-slim-tx": props.layout === "row",
+            "focus-visible:focus-slim-tx": props.layout === "row",
           },
         ],
       }
diff --git a/frontend/src/components/VBanner/VNotificationBanner.vue b/frontend/src/components/VBanner/VNotificationBanner.vue
index 3f7ab691604..d669f861801 100644
--- a/frontend/src/components/VBanner/VNotificationBanner.vue
+++ b/frontend/src/components/VBanner/VNotificationBanner.vue
@@ -66,7 +66,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 c7990ec7fb2..94bcf06238f 100644
--- a/frontend/src/components/VButton.vue
+++ b/frontend/src/components/VButton.vue
@@ -223,7 +223,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 04b9e31193d..fc24cd1a28c 100644
--- a/frontend/src/components/VFooter/VFooter.vue
+++ b/frontend/src/components/VFooter/VFooter.vue
@@ -98,7 +98,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"
@@ -112,7 +112,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 e4e43bb0f56..0c80ea3f77d 100644
--- a/frontend/src/components/VHeader/VHeaderInternal.vue
+++ b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -82,7 +82,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"
@@ -128,18 +128,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-tertiary hover:text-over-negative focus-visible:focus-slim-tx"
                 :label="$t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
@@ -155,7 +155,7 @@ watch(route, () => {
                 @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 9abcc1dbeef..c3e49377994 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="hover:bg-main h-12 px-4 text-[1.125rem] text-contrast focus-visible:ring-focus-ring"
   >
     <VSvg
       name="logo_and_wordmark"
diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
index bb44b26e1bc..e5dc463ade4 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="text-contrast hover:no-underline focus-visible:outline-focus-ring"
   >
     <i18n-t
       scope="global"
diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue
index 8058285d295..2e9f5659c47 100644
--- a/frontend/src/components/VImageCell/VImageCell.vue
+++ b/frontend/src/components/VImageCell/VImageCell.vue
@@ -150,7 +150,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 9cb4f459d14..40ff5060dbf 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-ring 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 70fd5cebe35..2f3a98483e7 100644
--- a/frontend/src/components/VModal/VModalContent.vue
+++ b/frontend/src/components/VModal/VModalContent.vue
@@ -97,6 +97,22 @@ const { height: modalHeaderHeight } = useElementSize(
   { box: "border-box" }
 )
 
+const modalStyle = computed(() => {
+  const height = modalHeaderHeight.value
+  const mode = props.mode
+  const style = {
+    "--modal-header-height": `${height}px`,
+  }
+  if (mode !== "dark") {
+    return style
+  }
+  return {
+    ...style,
+    "--color-contrast": "var(--color-white)",
+    "--color-focus-ring": "var(--color-yellow-4)",
+  }
+})
+
 defineExpose({
   dialogRef,
   deactivateFocusTrap,
@@ -135,7 +151,7 @@ defineExpose({
             'm-6 max-w-90 rounded sm:m-0 sm:w-90': variant === 'centered',
           },
         ]"
-        :style="`--modal-header-height: ${modalHeaderHeight}px;`"
+        :style="modalStyle"
         role="dialog"
         aria-modal="true"
         @keydown="onKeyDown"
@@ -202,6 +218,7 @@ defineExpose({
               : mode === 'dark'
                 ? 'bg-black'
                 : 'bg-overlay',
+            `modal-content-${mode}`,
           ]"
         >
           <slot />
@@ -230,4 +247,8 @@ by the address bar.
   max-height: calc(100vh - var(--modal-header-height, 0) - 6rem);
   overflow-y: scroll;
 }
+.modal-content-dark {
+  --color-outline-focus: var(--color-yellow-3);
+  --color-contrast: var(--color-white);
+}
 </style>
diff --git a/frontend/src/components/VRadio/VRadio.vue b/frontend/src/components/VRadio/VRadio.vue
index be4850ae1c5..185c9c0063d 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-ring 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 792293657d1..8961cd7a1c2 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 92b27f9a0b1..2b5e1ba9a37 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);
@@ -235,6 +236,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);
@@ -296,6 +298,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);
@@ -356,6 +359,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);
@@ -531,13 +535,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-[--color-focus-ring]; /* default ring color */
   }
 
   [class*="focus-slim-filled"] {
@@ -564,6 +569,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-[--color-focus-ring]; /* default ring color */
   }
 
   /**
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index b34a299e633..67966176547 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -109,6 +109,9 @@ export default {
       tx: "transparent",
       curr: "currentColor",
       current: "currentColor",
+
+      contrast: "var(--color-contrast, var(--color-text))",
+      "focus-ring": "var(--color-focus-ring, var(--color-border-focus))",
     },
     placeholderColor: {
       default: "var(--color-text-secondary)",
@@ -254,6 +257,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)",
@@ -360,7 +364,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,
             }),
           ])