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/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>
   )
 }