Merge pull request #96 from Upstatement/feat/hocus

joshpensky · web-flow · commit 606bc16e88a6 · 2024-12-12T09:36:41.000-05:00
diff --git a/web/wp-content/themes/mozilla-builders/blocks/advanced-code/advanced-code.twig b/web/wp-content/themes/mozilla-builders/blocks/advanced-code/advanced-code.twig
@@ -9,9 +9,9 @@
 
     <button
       x-clipboard:trigger
-      :data-copied="copied"
+      :data-state="copied ? 'active' : 'inactive'"
       aria-live="polite"
-      class="p-1 transition-colors bg-action text-action-reverse data-[copied=true]:bg-action-focus data-[copied=true]:text-action-focus-reverse"
+      class="p-1 bg-action text-action-reverse data-active:bg-action-focus data-active:text-action-focus-reverse"
     >
       <span class="sr-only" x-text="copied ? 'Copied' : 'Copy'">Copy</span>
       <svg class="w-5 h-5" aria-hidden="true">
diff --git a/web/wp-content/themes/mozilla-builders/blocks/mozilla-newsletter-signup-form/mozilla-newsletter-signup-form.twig b/web/wp-content/themes/mozilla-builders/blocks/mozilla-newsletter-signup-form/mozilla-newsletter-signup-form.twig
@@ -65,29 +65,29 @@
                 <fieldset class="mzp-u-inline mt-6">
                     <legend>I want information about:</legend>
                     <p class="flex max-sm:flex-col gap-0.5 sm:gap-2 mt-2">
-                        <label for="id_newsletters_0" class="mzp-u-inline sm:w-1/2 font-bold relative flex items-center hover:cursor-pointer pl-[70px] min-h-[60px]">
+                        <label for="id_newsletters_0" class="mzp-u-inline sm:w-1/2 font-bold relative flex items-center hocus:cursor-pointer pl-[70px] min-h-[60px]">
                             <input type="checkbox" name="newsletters" value="mozilla-foundation" id="id_newsletters_0" class="appearance-none peer" checked> Mozilla Foundation
                             <span class="absolute left-0 top-0 size-[60px] transition-shadow shadow-inner shadow-content peer-focus:shadow-inner-thick peer-focus:shadow-content focus:outline-0 after:hidden after:w-[20px] after:h-[35px] after:absolute after:block after:top-[5px] after:left-[20px] after:border-content after:border-t-0 after:border-r-[3px] after:border-b-[3px] after:border-l-0 after:rotate-45 peer-checked:after:block"></span>
                         </label>
 
-                        <label for="id_newsletters_1" class="mzp-u-inline sm:w-1/2 font-bold relative flex items-center hover:cursor-pointer pl-[70px] min-h-[60px]">
+                        <label for="id_newsletters_1" class="mzp-u-inline sm:w-1/2 font-bold relative flex items-center hocus:cursor-pointer pl-[70px] min-h-[60px]">
                             <input type="checkbox" name="newsletters" value="mozilla-and-you" id="id_newsletters_1" class="appearance-none peer" checked> Firefox
                             <span class="absolute left-0 top-0 size-[60px] transition-shadow shadow-inner shadow-content peer-focus:shadow-inner-thick peer-focus:shadow-content focus:outline-0 after:hidden after:w-[20px] after:h-[35px] after:absolute after:block after:top-[5px] after:left-[20px] after:border-content after:border-t-0 after:border-r-[3px] after:border-b-[3px] after:border-l-0 after:rotate-45 peer-checked:after:block"></span>
                         </label>
                     </p>
                 </fieldset>
 
                 <p class="mt-6">
-                    <label for="privacy" class="mzp-u-inline relative flex items-center hover:cursor-pointer pl-[70px] min-h-[60px]">
+                    <label for="privacy" class="mzp-u-inline relative flex items-center hocus:cursor-pointer pl-[70px] min-h-[60px]">
                         <input type="checkbox" id="privacy" name="privacy" class="appearance-none peer" required aria-required="true">
-                        <span>I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/" class="underline hover:no-underline">this Privacy Notice</a></span>
+                        <span>I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/" class="underline hocus:no-underline">this Privacy Notice</a></span>
                         <span class="absolute left-0 top-0 size-[60px] transition-shadow shadow-inner shadow-content peer-focus:shadow-inner-thick peer-focus:shadow-content focus:outline-0 after:hidden after:w-[20px] after:h-[35px] after:absolute after:top-[5px] after:left-[20px] after:border-content after:border-t-0 after:border-r-[3px] after:border-b-[3px] after:border-l-0 after:rotate-45 peer-checked:after:block"></span>
                     </label>
                 </p>
             </div>
 
             <p class="mzp-c-form-submit mt-6">
-                <button type="submit" class="mzp-c-button w-full p-10 uppercase text-center text-action-reverse bg-action border border-action transition-colors hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus hover:border-action-focus focus:border-action-focus" id="newsletter-submit">Sign up now</button>
+                <button type="submit" class="mzp-c-button w-full p-10 uppercase text-center text-action-reverse bg-action border border-action transition-colors hocus:text-action-focus-reverse hocus:bg-action-focus hocus:border-action-focus" id="newsletter-submit">Sign up now</button>
                 <span class="mzp-c-fieldnote block mt-6">We will only send you Mozilla-related information.</span>
             </p>
         </fieldset>
diff --git a/web/wp-content/themes/mozilla-builders/blocks/related-articles/related-articles.twig b/web/wp-content/themes/mozilla-builders/blocks/related-articles/related-articles.twig
@@ -11,7 +11,7 @@
       {% for post in related_articles %}
         <li class="relative grid auto-rows-[min-content_1fr] max-md:grid-cols-6 md:grid md:grid-cols-10 gap-x-grid-site-gutter py-4 border-b border-content">
           <a class="max-md:col-span-4 md:col-span-5 mt-2 leading-tighter before:absolute before:inset-0 before:z-10 group" href="{{ post.link }}">
-            <span class="uppercase font-bold group-hover:bg-content group-hover:text-main">{{ post.title }}</span>
+            <span class="uppercase font-bold group-hocus:bg-content group-hocus:text-main">{{ post.title }}</span>
           </a>
 
           <div class="max-md:col-span-2 max-md:row-start-1 max-md:row-span-2 max-md:col-start-5 md:col-span-3">
diff --git a/web/wp-content/themes/mozilla-builders/plugins/hocus.js b/web/wp-content/themes/mozilla-builders/plugins/hocus.js
@@ -0,0 +1,6 @@
+import plugin from 'tailwindcss/plugin';
+
+export default plugin(({ addVariant }) => {
+  addVariant('hocus', ['&:hover', '&:focus-visible']);
+  addVariant('group-hocus', [':merge(.group):hover &', ':merge(.group):has(*:focus-visible) &']);
+});
diff --git a/web/wp-content/themes/mozilla-builders/static/scss/app.scss b/web/wp-content/themes/mozilla-builders/static/scss/app.scss
@@ -196,9 +196,7 @@ body {
   .hover-link {
     @apply md:before:content-['\['] md:after:content-['\]'];
     @apply max-md:underline;
-    @apply hover:bg-action-focus focus:bg-action-focus;
-    @apply hover:no-underline focus:no-underline;
-    @apply hover:text-action-focus-reverse focus:text-action-focus-reverse;
+    @apply hocus:bg-action-focus hocus:no-underline hocus:text-action-focus-reverse;
   }
 
   // Grid utilities
@@ -382,7 +380,7 @@ body {
 
       // Inline links
       a {
-        @apply underline hover:bg-action-focus focus:bg-action-focus hover:no-underline focus:no-underline hover:text-action-focus-reverse focus:text-action-focus-reverse;
+        @apply underline hocus:bg-action-focus hocus:no-underline hocus:text-action-focus-reverse;
       }
     }
 
@@ -621,11 +619,11 @@ body {
     }
     .wp-block-button__link {
       @apply w-full p-10 uppercase text-center text-action-reverse bg-action border border-action transition-colors;
-      @apply hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus hover:border-action-focus focus:border-action-focus;
+      @apply hocus:text-action-focus-reverse hocus:bg-action-focus hocus:border-action-focus;
     }
     .is-style-outline .wp-block-button__link {
       @apply bg-transparent border-none text-action transition-shadow shadow-inner shadow-action;
-      @apply hover:shadow-inner-thick hover:shadow-action focus:shadow-inner-thick focus:shadow-action;
+      @apply hocus:shadow-inner-thick hocus:shadow-action;
     }
 
     // Files
@@ -651,15 +649,15 @@ body {
         @apply flex items-center justify-between gap-10 w-full p-10;
         @apply uppercase font-semibold;
         @apply bg-action text-action-reverse transition duration-300;
-        @apply hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus;
+        @apply hocus:text-action-focus-reverse hocus:bg-action-focus;
 
         &:has(+ a.wp-block-file__button) {
           @apply md:py-8;
 
           &::after {
             content: '';
             @apply block shrink-0 bg-current mask-arrow-down size-8 md:size-10;
-            @apply transition-transform duration-300 hover:translate-y-1 focus:translate-y-1.5;
+            @apply transition-transform duration-300 hocus:translate-y-1.5;
           }
         }
       }
@@ -749,7 +747,7 @@ body {
       }
 
       summary {
-        @apply hover:cursor-pointer font-bold uppercase;
+        @apply hocus:cursor-pointer font-bold uppercase;
 
         &::marker,
         &::-webkit-details-marker {
diff --git a/web/wp-content/themes/mozilla-builders/tailwind.config.js b/web/wp-content/themes/mozilla-builders/tailwind.config.js
@@ -1,5 +1,6 @@
 import theme from 'tailwindcss/defaultTheme';
 import utilitiesScss from './plugins/utilities-scss';
+import hocus from './plugins/hocus';
 import path from 'path';
 
 function color(name) {
@@ -8,6 +9,9 @@ function color(name) {
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   content: ['./**/*.twig', './**/*.js'],
   theme: {
     colors: {
@@ -120,6 +124,10 @@ module.exports = {
         arrow: `url('data:image/svg+xml,<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M69.4914 37.7055L35.9853 71.2097L2.45057 37.675L6.99568 33.1299L32.834 58.9683L32.8349 3.65135L39.1375 3.65125L39.1366 58.9676L65.0628 33.2765L69.4914 37.7055Z" fill="currentColor"/></svg>')`,
       },
 
+      data: {
+        active: 'state=active',
+      },
+
       flex: {
         2: '2 2 0%',
       },
@@ -180,5 +188,5 @@ module.exports = {
       },
     },
   },
-  plugins: [utilitiesScss({ filename: path.resolve(__dirname, 'static/scss/app.scss') })],
+  plugins: [hocus, utilitiesScss({ filename: path.resolve(__dirname, 'static/scss/app.scss') })],
 };
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/accelerator/topper.twig b/web/wp-content/themes/mozilla-builders/templates/components/accelerator/topper.twig
@@ -33,7 +33,7 @@
           <path x-accelerator:path d="M1 204.735C138 217.235 172.5 -7.2644 314 1.23549" />
         </svg>
 
-        <div x-accelerator:targets class="opacity-0 data-[state=active]:opacity-100">
+        <div x-accelerator:targets class="opacity-0 data-active:opacity-100">
           {% for i in 1..20 %}
             <div class="absolute top-0 left-0 w-72 z-10 {% if loop.index > 8 %}hidden md:block{% endif %}" {% if not loop.first %}aria-hidden="true"{% endif %}>
               {% include "components/lazy-img.twig" with { img: img } %}
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/articles/overline.twig b/web/wp-content/themes/mozilla-builders/templates/components/articles/overline.twig
@@ -39,7 +39,7 @@
 {% endif %}
 
 <p class="text-xs uppercase">
-  <a class="py-1 px-1.5 transition-colors hover:bg-main hover:text-content {{ overline_class }}" href="{{ overline.link }}">{{ overline.name }}</a>
+  <a class="py-1 px-1.5 hocus:bg-main hocus:text-content {{ overline_class }}" href="{{ overline.link }}">{{ overline.name }}</a>
 </p>
 
 {% endif %}
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image-alt.twig b/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image-alt.twig
@@ -10,7 +10,7 @@
       {% include 'components/articles/overline.twig' with { overline: post.categories[0] } %}
     </div>
     <h3 class="flex-1 font-bold uppercase text-balance leading-tighter">
-      <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
+      <a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
     </h3>
   </div>
 </div>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image-feature.twig b/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image-feature.twig
@@ -17,7 +17,7 @@
   </div>
 
   <h3 class="mt-3 type-headline-xl text-center text-balance leading-tighter">
-    <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
+    <a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
   </h3>
   <p class="type-sans-sm text-center text-balance">{{ post.subtitle }}</p>
 </div>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image.twig b/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--small_image.twig
@@ -4,7 +4,7 @@
   </div>
 
   <h3 class="mt-3 type-headline-lg text-center text-balance leading-tighter">
-    <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
+    <a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
   </h3>
   <p class="type-sans-sm text-center text-balance">{{ post.subtitle }}</p>
 
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--text_only.twig b/web/wp-content/themes/mozilla-builders/templates/components/articles/previews/preview--text_only.twig
@@ -34,7 +34,7 @@
 
 <div class="relative {{ bg_class }} {{ class|default('min-h-96') }} p-4 flex-1 flex flex-col justify-between items-center">
   <h3 class="{{ size == 'md' ? 'type-headline-lg' : 'type-headline-2xl md:type-headline-xl' }} text-center text-balance leading-tighter">
-    <a class="before:absolute before:inset-0 before:z-10 hover:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
+    <a class="before:absolute before:inset-0 before:z-10 hocus:before:shadow-inner" href="{{ post.link }}">{{ post.title }}</a>
   </h3>
 
   <div class="relative z-20">
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/big-cta.twig b/web/wp-content/themes/mozilla-builders/templates/components/big-cta.twig
@@ -1,26 +1,28 @@
 {% if color == 'primary' %}
-  {% set theme = 'bg-cta border-cta text-cta-text hover:bg-main hover:text-content hover:border-content focus:bg-main focus:text-content focus:border-content' %}
+  {% set theme = 'bg-cta border-cta text-cta-text group-hocus:bg-main group-hocus:text-content group-hocus:border-content' %}
 {% else %}
-  {% set theme = 'bg-cta-secondary border-cta-secondary text-cta-secondary-text hover:bg-main hover:text-content hover:border-content focus:bg-main focus:text-content focus:border-content' %}
+  {% set theme = 'bg-cta-secondary border-cta-secondary text-cta-secondary-text group-hocus:bg-main group-hocus:text-content group-hocus:border-content' %}
 {% endif %}
 
-<div
-  class="relative aspect-square p-3 flex flex-col justify-between items-center transition-colors duration-200 border {{ theme }}">
-  <p class="text-center text-sm uppercase">
-    {{ top }}
-  </p>
+<div class="group">
+  <div
+    class="relative aspect-square p-3 flex flex-col justify-between items-center transition-colors duration-200 border {{ theme }}">
+    <p class="text-center text-sm uppercase">
+      {{ top }}
+    </p>
 
-  <a href="{{ href }}" class="group before:absolute before:inset-0 before:z-10">
-    <div class="type-sans-xl lg:type-sans-2xl flex items-center gap-5 md:gap-8">
-      <span>{{ label }}</span>
-      <svg
-        class="h-[0.7em] aspect-square transition-transform group-hover:translate-x-2 {{ href starts with site.link or href starts with '#' ? '' : '-rotate-45 group-hover:-translate-y-2' }}">
-        <use xlink:href="#arrow-right" />
-      </svg>
-    </div>
-  </a>
+    <a href="{{ href }}" class="before:absolute before:inset-0 before:z-10 outline-none">
+      <div class="type-sans-xl lg:type-sans-2xl flex items-center gap-5 md:gap-8">
+        <span>{{ label }}</span>
+        <svg
+          class="h-[0.7em] aspect-square transition-transform group-hocus:translate-x-2 {{ href starts with site.link or href starts with '#' ? '' : '-rotate-45 group-hocus:-translate-y-2' }}">
+          <use xlink:href="#arrow-right" />
+        </svg>
+      </div>
+    </a>
 
-  <p class="text-center text-sm uppercase">
-    {{ bottom }}
-  </p>
+    <p class="text-center text-sm uppercase">
+      {{ bottom }}
+    </p>
+  </div>
 </div>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/button-link.twig b/web/wp-content/themes/mozilla-builders/templates/components/button-link.twig
@@ -1,5 +1,5 @@
 <a href="{{ href }}"
   class="flex justify-center w-full p-10 uppercase text-center text-content border-none transition-shadow shadow-inner shadow-content
-         hover:shadow-inner-thick hover:shadow-content focus:shadow-inner-thick focus:shadow-content">
+         hocus:shadow-inner-thick hocus:shadow-content">
   {{ label }}
 </a>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/footer.twig b/web/wp-content/themes/mozilla-builders/templates/components/footer.twig
@@ -6,7 +6,7 @@
       <ul class="max-md:w-1/2 flex max-md:flex-col md:justify-around md:items-center w-full">
         {% for item in section.footer_links_items %}
           <li class="text-sm md:leading-3">
-            <a href="{{ item.footer_links_item_link.url }}" class="uppercase transition-colors hover:bg-spot hover:text-black">{{ item.footer_links_item_link.name ?: item.footer_links_item_link.title }}</a>
+            <a href="{{ item.footer_links_item_link.url }}" class="uppercase hocus:bg-spot hocus:text-black">{{ item.footer_links_item_link.name ?: item.footer_links_item_link.title }}</a>
           </li>
         {% endfor %}
       </ul>
@@ -24,7 +24,7 @@
 
     <ul class="max-md:w-1/2 flex flex-wrap max-md:flex-col md:items-center justify-end md:gap-x-6 gap-y-1.5 text-right">
       {% for item in primary_footer_menu.items %}
-        <li class="text-xs leading-none"><a href="{{ item.url }}" class=" transition-colors hover:bg-spot hover:text-black">{{ item.name }}</a></li>
+        <li class="text-xs leading-none"><a href="{{ item.url }}" class="hocus:bg-spot hocus:text-black">{{ item.name }}</a></li>
       {% endfor %}
     </ul>
   </div>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/front-page/builders.twig b/web/wp-content/themes/mozilla-builders/templates/components/front-page/builders.twig
@@ -16,7 +16,7 @@
         <div class="max-lg:hidden col-span-3 col-start-1 self-center">
           {% if project %}
             <p class="text-sm uppercase">
-              <a href="{{ project.link }}" class="transition-colors hover:bg-spot focus:bg-spot">
+              <a href="{{ project.link }}" class="hocus:bg-spot">
                 {{ project.title }}
               </a>
             </p>
@@ -35,30 +35,30 @@
           </div>
 
           <p class="w-full text-sm font-bold uppercase lg:hidden gap-3">
-            <a href="{{ person.link }}" class="w-full before:absolute before:inset-0 before:z-10 transition-colors hover:bg-spot focus:bg-spot">
+            <a href="{{ person.link }}" class="w-full before:absolute before:inset-0 before:z-10 hocus:bg-spot">
               <span>{{ person.first_name }} {{ person.last_name }}</span>
             </a>
           </p>
 
           <p class="w-full max-lg:hidden type-sans-xl uppercase gap-3">
             <a href="{{ person.link }}" class="w-full lg:flex lg:items-center lg:justify-between before:absolute before:inset-0 before:z-10">
               <span>{{ person.first_name }}</span>
-              <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"
+              <span class="max-lg:hidden flex-1 border-t border-content relative opacity-0 group-hocus:opacity-100"
                 aria-hidden="true"></span>
               <span>{{ person.last_name }}</span>
             </a>
           </p>
 
           {% if project %}
             <p class="lg:hidden relative z-10 text-sm uppercase">
-              <a href="{{ project.link }}" class="transition-colors hover:bg-spot focus:bg-spot">
+              <a href="{{ project.link }}" class="hocus:bg-spot">
                 {{ project.title }}
               </a>
             </p>
           {% endif %}
 
           {% if person.thumbnail %}
-            <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
+            <span class="max-lg:hidden absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 transition-opacity opacity-0 group-hocus:opacity-100">
               {% include 'components/lazy-img.twig' with { img: person.thumbnail, class: 'h-32' } %}
             </span>
           {% endif %}
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/nav.twig b/web/wp-content/themes/mozilla-builders/templates/components/nav.twig
@@ -37,8 +37,8 @@
           class="text-sm md:max-xl:text-xs relative block py-0.5 px-1.5
                 before:absolute before:inset-0 before:bg-action-focus before:z-0
                 motion-safe:before:transition-transform before:scale-x-0 before:origin-center
-                aria-current:text-action-focus-reverse hover:text-action-focus-reverse
-                aria-current:before:scale-x-100 hover:before:scale-x-100"
+                aria-current:text-action-focus-reverse hocus:text-action-focus-reverse
+                aria-current:before:scale-x-100 hocus:before:scale-x-100"
           {% if item.current %}aria-current="page"{% endif %}
         >
           <span class="relative z-10">{{ item.name }}</span>
@@ -51,8 +51,8 @@
 
       {% if options.join_us_link %}
       <a href="{{ options.join_us_link.url }}"
-        class="text-sm md:max-xl:text-xs py-0.5 px-1.5 transition-colors whitespace-nowrap max-md:hidden
-             bg-action text-action-reverse hover:bg-action-focus hover:text-action-focus-reverse"
+        class="text-sm md:max-xl:text-xs py-0.5 px-1.5 whitespace-nowrap max-md:hidden
+             bg-action text-action-reverse transition-colors hocus:bg-action-focus hocus:text-action-focus-reverse"
       >
         {{ options.join_us_link.title ?: 'Join us' }}
       </a>
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/pagination.twig b/web/wp-content/themes/mozilla-builders/templates/components/pagination.twig
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/previews/project.twig b/web/wp-content/themes/mozilla-builders/templates/components/previews/project.twig
diff --git a/web/wp-content/themes/mozilla-builders/templates/components/tease-list.twig b/web/wp-content/themes/mozilla-builders/templates/components/tease-list.twig
diff --git a/web/wp-content/themes/mozilla-builders/templates/pages/accelerator.twig b/web/wp-content/themes/mozilla-builders/templates/pages/accelerator.twig
diff --git a/web/wp-content/themes/mozilla-builders/templates/pages/profile.twig b/web/wp-content/themes/mozilla-builders/templates/pages/profile.twig
diff --git a/web/wp-content/themes/mozilla-builders/templates/pages/project.twig b/web/wp-content/themes/mozilla-builders/templates/pages/project.twig

Original file line number	Diff line number	Diff line change
`@@ -196,9 +196,7 @@ body {`
`196`	`196`	`.hover-link {`
`197`	`197`	`@apply md:before:content-['\['] md:after:content-['\]'];`
`198`	`198`	`@apply max-md:underline;`
`199`		`- @apply hover:bg-action-focus focus:bg-action-focus;`
`200`		`- @apply hover:no-underline focus:no-underline;`
`201`		`- @apply hover:text-action-focus-reverse focus:text-action-focus-reverse;`
	`199`	`+ @apply hocus:bg-action-focus hocus:no-underline hocus:text-action-focus-reverse;`
`202`	`200`	`}`
`203`	`201`
`204`	`202`	`// Grid utilities`
`@@ -382,7 +380,7 @@ body {`
`382`	`380`
`383`	`381`	`// Inline links`
`384`	`382`	`a {`
`385`		`- @apply underline hover:bg-action-focus focus:bg-action-focus hover:no-underline focus:no-underline hover:text-action-focus-reverse focus:text-action-focus-reverse;`
	`383`	`+ @apply underline hocus:bg-action-focus hocus:no-underline hocus:text-action-focus-reverse;`
`386`	`384`	`}`
`387`	`385`	`}`
`388`	`386`
`@@ -621,11 +619,11 @@ body {`
`621`	`619`	`}`
`622`	`620`	`.wp-block-button__link {`
`623`	`621`	`@apply w-full p-10 uppercase text-center text-action-reverse bg-action border border-action transition-colors;`
`624`		`- @apply hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus hover:border-action-focus focus:border-action-focus;`
	`622`	`+ @apply hocus:text-action-focus-reverse hocus:bg-action-focus hocus:border-action-focus;`
`625`	`623`	`}`
`626`	`624`	`.is-style-outline .wp-block-button__link {`
`627`	`625`	`@apply bg-transparent border-none text-action transition-shadow shadow-inner shadow-action;`
`628`		`- @apply hover:shadow-inner-thick hover:shadow-action focus:shadow-inner-thick focus:shadow-action;`
	`626`	`+ @apply hocus:shadow-inner-thick hocus:shadow-action;`
`629`	`627`	`}`
`630`	`628`
`631`	`629`	`// Files`
`@@ -651,15 +649,15 @@ body {`
`651`	`649`	`@apply flex items-center justify-between gap-10 w-full p-10;`
`652`	`650`	`@apply uppercase font-semibold;`
`653`	`651`	`@apply bg-action text-action-reverse transition duration-300;`
`654`		`- @apply hover:text-action-focus-reverse focus:text-action-focus-reverse hover:bg-action-focus focus:bg-action-focus;`
	`652`	`+ @apply hocus:text-action-focus-reverse hocus:bg-action-focus;`
`655`	`653`
`656`	`654`	`&:has(+ a.wp-block-file__button) {`
`657`	`655`	`@apply md:py-8;`
`658`	`656`
`659`	`657`	`&::after {`
`660`	`658`	`content: '';`
`661`	`659`	`@apply block shrink-0 bg-current mask-arrow-down size-8 md:size-10;`
`662`		`- @apply transition-transform duration-300 hover:translate-y-1 focus:translate-y-1.5;`
	`660`	`+ @apply transition-transform duration-300 hocus:translate-y-1.5;`
`663`	`661`	`}`
`664`	`662`	`}`
`665`	`663`	`}`
`@@ -749,7 +747,7 @@ body {`
`749`	`747`	`}`
`750`	`748`
`751`	`749`	`summary {`
`752`		`- @apply hover:cursor-pointer font-bold uppercase;`
	`750`	`+ @apply hocus:cursor-pointer font-bold uppercase;`
`753`	`751`
`754`	`752`	`&::marker,`
`755`	`753`	`&::-webkit-details-marker {`