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:

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"

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

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",

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"

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

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>

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>

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"

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"

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",

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"

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

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

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"

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"

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"],
   },
 }
 

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 */
   }
 
   /**

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,
             }),
           ])