feat: update links default color to match design documents

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -4,6 +4,7 @@ import { usePathname } from "next/navigation"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { type Lang, languages } from "@/constants/languages"
 import { env } from "@/env/client"
@@ -44,21 +45,30 @@ export default function LanguageSwitcherContent({
           if (url) {
             return (
               <li key={key}>
-                <Link
-                  className={`${styles.link} ${isActive ? styles.active : ""}`}
-                  href={replaceUrlPart(pathname, url)}
-                  rel={env.isLangLive(key) ? undefined : "nofollow"}
-                  onClick={onLanguageSwitch}
-                  keepSearchParams
+                <Typography
+                  variant={
+                    isActive
+                      ? "Body/Paragraph/mdBold"
+                      : "Body/Paragraph/mdRegular"
+                  }
                 >
-                  {languages[key]}
-                  {isActive ? (
-                    <MaterialIcon
-                      icon="check"
-                      color="Icon/Interactive/Default"
-                    />
-                  ) : null}
-                </Link>
+                  <Link
+                    className={styles.link}
+                    href={replaceUrlPart(pathname, url)}
+                    rel={env.isLangLive(key) ? undefined : "nofollow"}
+                    onClick={onLanguageSwitch}
+                    variant="languageSwitcher"
+                    keepSearchParams
+                  >
+                    {languages[key]}
+                    {isActive ? (
+                      <MaterialIcon
+                        icon="check"
+                        color="Icon/Interactive/Default"
+                      />
+                    ) : null}
+                  </Link>
+                </Typography>
               </li>
             )
           }

apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css

@@ -16,11 +16,6 @@
 }
 
 .link {
-  color: var(--Scandic-Brand-Burgundy);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
   padding: var(--Spacing-x1);
   border-radius: var(--Corner-radius-md);
   display: flex;
@@ -31,12 +26,6 @@
   border-radius: var(--Corner-radius-md);
 }
 
-.link.active,
-.link:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
-}
-
 @media screen and (min-width: 768px) {
   .backWrapper,
   .backButton {
@@ -50,8 +39,4 @@
   .subtitle {
     display: none;
   }
-
-  .link.active:not(:hover) {
-    background-color: transparent;
-  }
 }