Make a Tailwind utility for inset shadow and replace manually defined…

… styles

src/components/AudioTrack/Waveform.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="el"
-    class="waveform relative bg-dark-charcoal-06 border-1.5 border-tx focus:border-pink focus:outline-none overflow-hidden"
+    class="waveform relative bg-dark-charcoal-06 border-1.5 border-tx focus:border-pink focus:outline-none focus:shadow-ring overflow-hidden"
     :style="{ '--unusable-height': `${Math.floor((1 - usableFrac) * 100)}%` }"
     tabIndex="0"
     role="slider"
@@ -453,10 +453,6 @@ export default {
   left: var(--seek-time-left);
 }
 
-.waveform:focus {
-  box-shadow: 0 0 0 1px inset white;
-}
-
 .waveform:focus-visible .focus-indicator {
   display: flex;
 }

src/components/Header/SearchBar/SearchButton.vue

@@ -2,7 +2,7 @@
   <VIconButton
     v-bind="$attrs"
     size="search"
-    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm"
+    class="search-button hover:text-white group-hover:text-white hover:bg-pink group-hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink group-hover:border-pink rounded-e-sm active:shadow-ring"
     :icon-props="{ iconPath: searchIcon }"
     :aria-label="$t('search.search')"
     v-on="$listeners"
@@ -23,9 +23,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.search-button:active {
-  box-shadow: 0 0 0 1px inset white;
-}
-</style>

src/components/VIconButton/VIconButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="icon-button flex items-center justify-center border-1.5 focus:border-pink focus:outline-none"
+    class="icon-button flex items-center justify-center border-1.5 focus:border-pink focus:outline-none focus:shadow-ring active:shadow-ring"
     :class="[...buttonSizeClasses]"
     :type="type"
     v-on="$listeners"
@@ -67,10 +67,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.icon-button:focus,
-.icon-button:active {
-  box-shadow: 0 0 0 1px inset white;
-}
-</style>

tailwind.config.js

@@ -178,6 +178,9 @@ module.exports = {
       scale: {
         '-100': '-1',
       },
+      boxShadow: {
+        ring: 'inset 0 0 0 1px white',
+      },
     },
   },
   variants: {
@@ -191,6 +194,7 @@ module.exports = {
       ringWidth: ['focus-visible'],
       borderWidth: ['focus', 'focus-within'],
       padding: ['focus', 'focus-within'],
+      boxShadow: ['focus', 'active'],
     },
   },
   plugins: [require('tailwindcss-rtl')],