Merged in fix/icon-color (pull request #1672)

fix: change to correct icon color

* fix: change to correct icon color


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/experienceList.module.css

@@ -1,6 +1,6 @@
 .experienceList {
   list-style: none;
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
   flex-wrap: wrap;
 }

apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/index.tsx

@@ -21,7 +21,7 @@ export default function ExperienceList({ experiences }: ExperienceListProps) {
       {experienceList.map(({ Icon, name }) => (
         <li key={name}>
           <Chip variant="tag">
-            <Icon size={20} />
+            <Icon size={20} color="Icon/Interactive/Default" />
             {name}
           </Chip>
         </li>

apps/scandic-web/components/Header/HeaderLink/headerLink.module.css

@@ -1,17 +1,18 @@
 .headerLink {
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
+  color: var(--Text-Interactive-Secondary);
 }
 
 .headerLink:hover {
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
 }
 
 .headerLink .icon * {
-  fill: var(--Base-Text-Medium-contrast);
+  fill: var(--Icon-Interactive-Default);
 }
 
 .headerLink:hover .icon * {
-  fill: var(--Base-Text-High-contrast);
+  fill: var(--Icon-Interactive-Secondary);
 }

apps/scandic-web/components/Header/HeaderLink/index.tsx

@@ -2,8 +2,9 @@
 
 import Link from "next/link"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { IconByIconName } from "@/components/Icons/IconByIconName"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./headerLink.module.css"
 
@@ -17,17 +18,18 @@ export default function HeaderLink({
   onClick = () => undefined,
 }: HeaderLinkProps) {
   return (
-    <Caption type="regular" color="textMediumContrast" asChild>
+    <Typography variant="Body/Supporting text (caption)/smRegular">
       <Link href={href} className={styles.headerLink} onClick={onClick}>
         {iconName ? (
           <IconByIconName
             iconName={iconName}
             className={styles.icon}
             size={iconSize}
+            color="CurrentColor"
           />
         ) : null}
         {children}
       </Link>
-    </Caption>
+    </Typography>
   )
 }

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

@@ -6,6 +6,7 @@ import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { languages } from "@/constants/languages"
 import { trpc } from "@/lib/trpc/client"
@@ -16,7 +17,6 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
 import SkeletonShimmer from "../SkeletonShimmer"
-import Caption from "../TempDesignSystem/Text/Caption"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"
@@ -106,14 +106,18 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
         aria-label={isLanguageSwitcherOpen ? closeMsg : openMsg}
         onClick={handleClick}
       >
-        <MaterialIcon icon="globe" size={globeIconSize} />
-        <Caption className={styles.buttonText} type="regular" asChild>
+        <MaterialIcon icon="globe" size={globeIconSize} color="CurrentColor" />
+        <Typography
+          variant="Body/Supporting text (caption)/smRegular"
+          className={styles.buttonText}
+        >
           <span>{languages[currentLanguage]}</span>
-        </Caption>
+        </Typography>
         <MaterialIcon
           icon="keyboard_arrow_down"
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           size={20}
+          color="CurrentColor"
         />
       </button>