Merge pull request #438 from DeterminateSystems/fix-css-issue

Fix CSS issue in language selector

Author: lucperkins

src/components/mdx/Languages.astro

@@ -5,7 +5,7 @@ const { languages } = site;
 ---
 
 <div
-  class="not-prose inline-flex items-center space-x-6 rounded-lg border-1.5 border-light-gray py-2.5 pl-6 pr-4 text-base dark:border-gray dark:bg-inherit"
+  class="not-prose inline-flex items-center space-x-6 rounded-lg border-1.5 border-soft-gray py-2.5 pl-6 pr-4 text-base dark:border-gray dark:bg-inherit"
 >
   <p class="text-base font-semibold tracking-tight md:text-lg lg:text-xl">
     Select your language
@@ -16,10 +16,10 @@ const { languages } = site;
       languages.map((lang) => (
         <button
           @click={`language = "${lang}"`}
-          class="rounded-lg border-1.5 px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg"
+          class="rounded-lg dark:border-1.5 px-1.5 py-1 text-sm font-semibold tracking-tight focus:outline-none md:px-2 md:py-0.5 md:text-base lg:px-3 lg:py-1.5 lg:text-lg"
           class:list={[]}
 
-          :class=`{ "border-primary bg-pale dark:bg-darker-gray": language == "${lang}", "border-pale hover:text-primary dark:border-dark": language !== "${lang}" }`
+          :class=`{ "border-primary bg-soft-gray dark:bg-darker-gray": language == "${lang}", "border-pale hover:text-primary dark:border-dark": language !== "${lang}" }`
         >
           {lang}
         </button>