feat(SW-185): Added correct tokens

components/Footer/Details/details.module.css

@@ -1,6 +1,6 @@
 .details {
-  background: var(--Main-Red-100);
+  background: var(--Base-Text-High-contrast);
-  color: var(--Main-Brand-PalePeach);
+  color: var(--Primary-Dark-On-Surface-Text);
   padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6);
 }
 
@@ -27,7 +27,7 @@
   justify-content: space-between;
   margin-bottom: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Scandic-Peach-80);
+  border-bottom: 1px solid var(--Base-Text-Medium-contrast);
 }
 
 .navigation {
@@ -54,11 +54,10 @@
 
 @media screen and (min-width: 1367px) {
   .details {
-    color: var(--Main-Grey-White);
     padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
   }
   .bottomContainer {
-    border-top: 1px solid var(--Scandic-Peach-80);
+    border-top: 1px solid var(--Base-Text-Medium-contrast);
     padding-top: var(--Spacing-x2);
     flex-direction: row;
   }

components/Footer/Details/index.tsx

@@ -2,7 +2,6 @@ import LanguageSwitcher from "@/components/Current/Header/LanguageSwitcher"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getLang } from "@/i18n/serverContext"
 
@@ -10,7 +9,7 @@ import { footer } from "../mockedData"
 
 import styles from "./details.module.css"
 
-import { IconName } from "@/types/components/icon"
+import type { IconName } from "@/types/components/icon"
 
 function socialIcon(iconName: string): JSX.Element | null {
   const SocialIcon = getIconByIconName(iconName as IconName)

components/Footer/Navigation/MainNav/mainnav.module.css

@@ -8,7 +8,7 @@
 
 .mainNavigationItem {
   padding: var(--Spacing-x3) 0;
-  border-bottom: 1px solid var(--Scandic-Peach-20);
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider);
   &:first-child {
     padding-top: 0;
   }

components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -19,8 +19,8 @@
 }
 
 .secondaryNavigationGroupTitle {
-  color: var(--Scandic-Peach-80);
+  color: var(--Base-Text-Medium-contrast);
-  font-weight: 500;
+  font-weight: var(--typography-Body-Bold-fontWeight);
   font-family: var(--typography-Body-Bold-fontFamily);
   margin: 0;
 }

components/Footer/Navigation/navigation.module.css

@@ -1,7 +1,6 @@
 .section {
-  background: var(--Scandic-Brand-Pale-Peach);
+  background: var(--Primary-Light-Surface-Normal);
   padding: var(--Spacing-x7) var(--Spacing-x2);
-  color: var(--Scandic-Brand-Burgundy);
 }
 
 .maxWidth {

components/TempDesignSystem/Text/Body/body.module.css

@@ -37,7 +37,7 @@
 .uppercase {
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: 450;
+  font-weight: var(--typography-Body-Bold-fontWeight);
   letter-spacing: var(--typography-Body-Regular-letterSpacing);
   line-height: var(--typography-Body-Regular-lineHeight);
   text-decoration: var(--typography-Body-Regular-textDecoration);
@@ -85,5 +85,5 @@
 }
 
 .peach80 {
-  color: var(--Scandic-Peach-80);
+  color: var(--Base-Text-Medium-contrast);
 }

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -28,7 +28,7 @@
 .uppercase {
   font-family: var(--typography-Footnote-Regular-fontFamily);
   font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: 450;
+  font-weight: var(--typography-Footnote-Bold-fontWeight);
   letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
   line-height: var(--typography-Footnote-Regular-lineHeight);
   text-decoration: var(--typography-Footnote-Regular-textDecoration);