Use CSS for colors of VWordPress and VHomeLink

Author: obulat

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

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-tertiary hover:text-over-negative focus-visible:focus-slim-tx"
                 :label="$t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
@@ -152,7 +152,7 @@ watch(route, () => {
                 @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="text-contrast hover:no-underline focus-visible:outline-focus-ring"
   >
     <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/VImageCell/VImageCell.vue

@@ -147,7 +147,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-ring focus-visible:ring-offset-1"
       :send-external-link-click-event="false"
       @click="$emit('click', datum.source)"
       ><span

frontend/src/components/VModal/VModalContent.vue

@@ -96,6 +96,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,
@@ -134,7 +150,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"
@@ -201,6 +217,7 @@ defineExpose({
               : mode === 'dark'
                 ? 'bg-black'
                 : 'bg-overlay',
+            `modal-content-${mode}`,
           ]"
         >
           <slot />
@@ -229,4 +246,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>

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"

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-[--color-focus-ring]; /* default ring color */
   }
 
   [class*="focus-slim-filled"] {
@@ -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-[--color-focus-ring]; /* default ring color */
   }
 
   /**

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