Update the homepage dark color (WordPress#4983)

* Fix link focus rings

* Fix the page links

* Update snapshots

* Fix focus-slim-offset offset color

* Update the homepage dark color

* Use border-tx button for search type

* Fix search bar focus styles

* Fix border and text-secondary colors

* Update snapshots

* Use inner ring for search button focus ring

* Fix the popover border color

* Fix close buttons

* Fix button borders

* Make sure button is hovered in test

* Update snapshots

frontend/src/components/VButton.vue

@@ -122,6 +122,7 @@ const props = withDefaults(
     hasIconStart: false,
     hasIconEnd: false,
     iconOnly: false,
+    pressed: undefined,
   }
 )
 
@@ -152,7 +153,9 @@ const isActive = computed(() => {
 const variantClass = computed(() => {
   if (
     isActive.value &&
-    ["bordered-white", "transparent-dark"].includes(props.variant)
+    ["bordered-white", "bordered-tx", "transparent-dark"].includes(
+      props.variant
+    )
   ) {
     return `${props.variant}-pressed`
   }
@@ -283,14 +286,21 @@ a.button {
 .bordered-gray {
   @apply border-default bg-default text-default hover:border-hover focus-visible:border-tx hover:focus-visible:border-tx;
 }
+.bordered-tx {
+  @apply border-tx bg-tx text-default hover:border-transparent-hover hover:focus-visible:border-tx dark:hover:border-[--color-gray-9];
+}
+.bordered-tx-pressed {
+  @apply border-tx bg-tertiary text-over-dark hover:border-hover;
+}
+
 .transparent-tx {
   @apply border-tx;
 }
 .transparent-gray {
-  @apply border-tx bg-tx text-default hover:bg-secondary disabled:text-disabled;
+  @apply border-tx bg-tx text-default hover:bg-transparent-hover disabled:text-disabled;
 }
 .transparent-dark {
-  @apply border-tx bg-tx text-default hover:bg-secondary-hover hover:text-over-dark;
+  @apply border-tx bg-tx text-default hover:bg-tertiary hover:text-over-dark;
 }
 .transparent-dark-pressed {
   @apply border-tx bg-tertiary text-over-dark hover:border-hover;

frontend/src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -45,7 +45,7 @@ const { doneHydrating } = useHydrating()
   <VButton
     class="min-w-12 gap-x-2"
     :class="{ '!px-3': showLabel }"
-    variant="bordered-white"
+    variant="bordered-tx"
     :icon-only="!showLabel"
     :disabled="!doneHydrating"
     size="large"

frontend/src/components/VFourOhFour.vue

@@ -38,7 +38,7 @@ useHead({
 <template>
   <div class="error grid overflow-x-hidden">
     <VSvg
-      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20"
+      class="z-0 pointer-events-none col-start-1 row-start-1 -mx-[15%] fill-gray-12 opacity-5 lg:mx-15 lg:-mt-20 dark:fill-gray-8"
       viewBox="0 0 1320 569"
       name="oops"
     />

frontend/src/components/VHeader/VHeader.vue

@@ -36,7 +36,12 @@ const headerComponent = computed(() => {
   }[props.kind]
 })
 
-const bg = computed(() => `bg-${props.color}`)
+const bg = computed(() => {
+  if (props.color === "default") {
+    return "bg-default"
+  }
+  return "bg-complementary dark:bg-default"
+})
 </script>
 
 <template>

frontend/src/components/VHeader/VHeaderInternal.vue

@@ -139,7 +139,7 @@ watch(route, () => {
                 variant="transparent-tx"
                 size="large"
                 :icon-props="{ name: 'close' }"
-                class="focus-visible:ring-bg-complementary text-white focus-slim-tx hover:bg-tertiary"
+                class="text-white focus-slim-tx hover:bg-tertiary hover:text-over-negative"
                 :label="$t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
@@ -150,15 +150,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:ring-bg-complementary"
+                nav-link-classes="text-white text-3xl focus-visible:outline-yellow-3"
                 :is-in-modal="true"
                 @close="closePageMenu"
               />
             </nav>
-            <VWordPressLink
-              class="focus-visible:ring-bg-complementary mt-auto focus-visible:ring-offset-0"
-              mode="dark"
-            />
+            <VWordPressLink class="mt-auto" mode="dark" />
           </template>
         </VModalContent>
       </template>

frontend/src/components/VHeader/VPageLinks.vue

@@ -77,10 +77,10 @@ const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
   <ul v-else>
     <li v-for="page in allPages" :key="page.id">
       <VLink
-        class="flex flex-row rounded-sm hover:underline focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-tx disabled:text-disabled"
+        class="flex flex-row rounded-sm hover:underline disabled:text-disabled"
         :class="[
           { 'font-semibold': currentPage === page.id },
-          { 'focus-visible:ring-border-focus text-default': mode === 'light' },
+          { 'text-default': mode === 'light' },
           navLinkClasses,
         ]"
         :href="page.link"

frontend/src/components/VHeader/VSearchBar/VSearchButton.vue

@@ -22,15 +22,16 @@ const { doneHydrating } = useHydrating()
     :aria-label="$t('search.search')"
     size="disabled"
     :disabled="!doneHydrating"
-    variant="plain"
+    variant="plain--avoid"
     :class="[
-      'h-full flex-shrink-0 rounded-s-none border-s-0 p-0.5px ps-1.5px focus-slim-filled hover:text-over-dark focus-visible:border-s group-focus-within:border-tx group-focus-within:bg-primary group-focus-within:text-over-dark group-focus-within:hover:bg-primary-hover group-hover:border-tx group-hover:bg-primary group-hover:text-over-dark',
+      'h-full flex-shrink-0 rounded-s-none border-1.5 p-0.5px hover:text-over-dark focus-visible:rounded-sm focus-visible:border-default focus-visible:ring focus-visible:ring-inset focus-visible:ring-[--color-bg] group-focus-within:border-tx group-focus-within:bg-primary group-focus-within:text-over-dark group-focus-within:hover:bg-primary-hover group-hover:border-tx group-hover:bg-primary group-hover:text-over-dark dark:focus-visible:ring-[--color-bg-overlay]',
       route === 'search' ? 'w-12' : 'w-14 sm:w-16',
       {
         'border-tx bg-secondary hover:bg-primary': route === 'search',
         'border-tx bg-primary text-over-dark hover:!bg-primary-hover':
           route === 'home',
-        'border-black': route === '404',
+        'border-s-0 border-black hover:border-s-1.5 focus-visible:border-s-1.5 group-focus-within:border-s-1.5 dark:border-tx':
+          route === '404',
       },
     ]"
   >

frontend/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue

@@ -50,14 +50,16 @@ defineExpose({ focusInput })
   <form
     action="/search"
     role="search"
-    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-default sm:h-16 dark:bg-overlay"
     @submit.prevent="handleSearch"
   >
     <div
-      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border border-e-0 p-0.5px pe-2 focus-within:border-1.5 focus-within:border-e-0 focus-within:p-0 focus-within:pe-2"
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm rounded-e-none border p-0.5px"
       :class="[
-        route === 'home' ? 'border-tx' : 'border-black',
-        hasPopover ? 'focus-within:border-tx' : 'focus-within:border-focus',
+        route === 'home'
+          ? 'border-tx pe-[7px]'
+          : 'border-1.5 border-e-0 border-black pe-[7.5px] dark:border-tx',
+        { 'has-popover': hasPopover },
       ]"
     >
       <input
@@ -66,7 +68,7 @@ defineExpose({ focusInput })
         type="search"
         name="q"
         :placeholder="$t('hero.search.placeholder')"
-        class="paragraph-large md:label-regular ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-default placeholder-gray-8 focus-visible:outline-none"
+        class="paragraph-large md:label-regular focus-visible:outline-style-none ms-4 h-full w-full appearance-none rounded-none bg-tx leading-none text-default placeholder-gray-8 dark:placeholder-gray-4"
         :aria-label="
           $t('search.searchBarLabel', {
             openverse: 'Openverse',
@@ -79,3 +81,13 @@ defineExpose({ focusInput })
     <VSearchButton :route="route" />
   </form>
 </template>
+
+<style scoped>
+.input-field:has(#search-bar:focus-visible) {
+  @apply border-1.5 border-focus p-0 pe-2;
+}
+
+.input-field.has-popover:has(#search-bar:focus-visible) {
+  @apply border-tx;
+}
+</style>

frontend/src/components/VHeader/VWordPressLink.vue

@@ -14,7 +14,12 @@ withDefaults(
   <VLink
     href="https://wordpress.org"
     :aria-label="$t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
-    class="focus-visible:ring-border-focus text-default hover:no-underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-offset-tx"
+    class="hover:no-underline"
+    :class="
+      mode === 'dark'
+        ? 'text-white focus-visible:outline-yellow-3'
+        : 'text-default'
+    "
   >
     <i18n-t
       scope="global"

frontend/src/components/VItemGroup/VItem.vue

@@ -109,7 +109,7 @@ const splitAttrs = computed(() => {
       {
         [`${contextProps.direction}-bordered`]: contextProps.bordered,
         [`${contextProps.direction}-popover-item`]: isInPopover,
-        'border border-default': contextProps.bordered,
+        'border border-overlay': contextProps.bordered,
         'has-check': contextProps.showCheck,
         'font-semibold': selected && !contextProps.showCheck,
         'bg-transparent':

frontend/src/components/VLink.vue

@@ -10,7 +10,7 @@
  */
 import { useNuxtApp } from "#imports"
 
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
 
 import { useAnalytics } from "~/composables/use-analytics"
 
@@ -112,12 +112,29 @@ const handleClick = (e: MouseEvent) => {
     url: props.href,
   })
 }
+const defaultRounded = "rounded-sm"
+const attrs = useAttrs()
+
+// Add `rounded-sm` class to links that don't have a rounded class.
+const roundedClass = computed(() => {
+  if (
+    !attrs.class ||
+    typeof attrs.class !== "string" ||
+    !attrs.class.includes("rounded-")
+  ) {
+    return defaultRounded
+  }
+  return ""
+})
 </script>
 
 <!-- eslint-disable vue/no-restricted-syntax -->
 <template>
   <NuxtLink
-    :class="{ 'inline-flex w-max items-center gap-x-2': showExternalIcon }"
+    :class="[
+      roundedClass,
+      { 'inline-flex w-max items-center gap-x-2': showExternalIcon },
+    ]"
     :aria-disabled="!to"
     v-bind="linkProps"
     :to="to"

frontend/src/components/VPopover/VPopoverContent.vue

@@ -67,7 +67,7 @@ const { onKeyDown, onBlur, heightProperties, style } = usePopoverContent({
     ref="popoverRef"
     role="dialog"
     aria-modal="true"
-    class="popover-content w-max-content absolute left-0 top-0 overflow-y-auto overflow-x-hidden rounded-sm border border-default bg-overlay shadow"
+    class="popover-content w-max-content absolute left-0 top-0 overflow-y-auto overflow-x-hidden rounded-sm border border-overlay bg-overlay shadow"
     :class="`z-${zIndex}`"
     :style="{ ...heightProperties, ...style }"
     :tabindex="-1"

frontend/src/components/VTabs/VTabPanel.vue

@@ -43,7 +43,7 @@ const panelVariantStyle = computed(() =>
     :aria-labelledby="`tab-${id}`"
     role="tabpanel"
     :tabindex="isSelected ? 0 : -1"
-    class="min-h-0 overflow-y-auto border-default p-6"
+    class="min-h-0 overflow-y-auto border-overlay p-6"
     :class="[panelVariantStyle, { hidden: !isSelected }]"
   >
     <slot />

frontend/src/components/meta/VButton.stories.js

@@ -28,11 +28,11 @@ export default {
   argTypes: {
     as: { options: buttonForms, control: { type: "radio" } },
 
-    variant: { options: buttonVariants },
+    variant: { options: buttonVariants, control: { type: "select" } },
 
     pressed: { control: "boolean" },
 
-    size: { options: buttonSizes, control: { type: "radio" } },
+    size: { options: buttonSizes, control: { type: "select" } },
 
     disabled: { control: "boolean" },
 

frontend/src/error.vue

@@ -94,8 +94,14 @@ useHead({
         <NuxtLayout name="default">
           <VFourOhFour class="flex-grow" :error="error" />
         </NuxtLayout>
-        <div id="modal"></div>
       </Body>
     </Html>
   </div>
 </template>
+
+<style>
+body {
+  /* This is used by some elements. */
+  --color-bg-curr-page: var(--color-bg-complementary);
+}
+</style>

frontend/src/layouts/default.vue

@@ -11,12 +11,12 @@ defineOptions({
 
 <template>
   <div
-    class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-complementary"
+    class="app h-dyn-screen grid grid-cols-1 grid-rows-[auto,1fr] flex-col bg-complementary dark:bg-default"
   >
     <VHeader class="header-el" kind="internal" color="complementary" />
     <div class="main-content flex flex-grow flex-col overflow-y-scroll">
       <slot class="flex-grow" />
-      <VFooter mode="internal" class="bg-complementary" />
+      <VFooter mode="internal" class="bg-complementary dark:bg-default" />
     </div>
   </div>
 </template>
@@ -27,6 +27,11 @@ defineOptions({
   /* This is used by some elements. */
   --color-bg-curr-page: var(--color-bg-complementary);
 }
+@media (prefers-color-scheme: dark) {
+  .app {
+    --color-bg-curr-page: var(--color-bg);
+  }
+}
 .header-el {
   grid-area: header;
 }

frontend/src/pages/index.vue

@@ -85,7 +85,7 @@ const handleSearch = (searchTerm: string) => {
 
 <template>
   <main
-    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 xl:flex-row xl:items-center xl:gap-0"
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 px-6 sm:px-0 xl:flex-row xl:items-center xl:justify-between xl:gap-0"
   >
     <div
       class="flex flex-grow flex-col items-center justify-center gap-6 xl:h-[33rem] xl:flex-grow-0 xl:items-start"

frontend/src/styles/accent.css

@@ -4,6 +4,7 @@ body * {
 }
 
 :focus-visible {
+  outline-style: solid;
   outline-color: theme("borderColor.focus");
 }
 

frontend/src/styles/tailwind.css

@@ -173,13 +173,14 @@
       --color-border-secondary-hover: var(--color-gray-12);
       --color-border-tertiary: var(--color-gray-12);
       --color-border-transparent-hover: var(--color-gray-3);
+      --color-border-overlay: var(--color-gray-3);
       --color-border-focus: var(--color-pink-8);
       --color-border-bg-ring: var(--color-white);
       --color-border-disabled: var(--color-gray-5);
 
       /* Text */
       --color-text: var(--color-gray-12);
-      --color-text-secondary: var(--color-gray-8);
+      --color-text-secondary: var(--color-gray-9);
       --color-text-disabled: var(--color-gray-5);
       --color-text-link: var(--color-pink-8);
       --color-text-over-dark: var(--color-white);
@@ -237,7 +238,7 @@
 
       /* Text */
       --color-text: var(--color-gray-1);
-      --color-text-secondary: var(--color-gray-5);
+      --color-text-secondary: var(--color-gray-4);
       --color-text-disabled: var(--color-gray-8);
       --color-text-link: var(--color-yellow-4);
       --color-text-over-dark: var(--color-gray-13);
@@ -291,13 +292,14 @@
     --color-border-secondary-hover: var(--color-gray-12);
     --color-border-tertiary: var(--color-gray-12);
     --color-border-transparent-hover: var(--color-gray-3);
+    --color-border-overlay: var(--color-gray-3);
     --color-border-focus: var(--color-pink-8);
     --color-border-bg-ring: var(--color-white);
     --color-border-disabled: var(--color-gray-5);
 
     /* Text */
     --color-text: var(--color-gray-12);
-    --color-text-secondary: var(--color-gray-8);
+    --color-text-secondary: var(--color-gray-9);
     --color-text-disabled: var(--color-gray-5);
     --color-text-link: var(--color-pink-8);
     --color-text-over-dark: var(--color-white);
@@ -350,13 +352,14 @@
     --color-border-secondary-hover: var(--color-gray-1);
     --color-border-tertiary: var(--color-gray-1);
     --color-border-transparent-hover: var(--color-gray-11);
+    --color-border-overlay: var(--color-gray-10);
     --color-border-focus: var(--color-yellow-4);
     --color-border-bg-ring: var(--color-gray-13);
     --color-border-disabled: var(--color-gray-8);
 
     /* Text */
     --color-text: var(--color-gray-1);
-    --color-text-secondary: var(--color-gray-5);
+    --color-text-secondary: var(--color-gray-4);
     --color-text-disabled: var(--color-gray-8);
     --color-text-link: var(--color-yellow-4);
     --color-text-over-dark: var(--color-gray-13);

frontend/src/types/button.ts

@@ -9,6 +9,7 @@ export const baseButtonVariants = [
   "filled-white",
   "bordered-white",
   "bordered-gray",
+  "bordered-tx",
   "transparent-tx",
   "transparent-gray",
   "transparent-dark",