fix: refactor use of tokens

components/JsonToHtml/renderOptions.tsx

@@ -253,7 +253,7 @@ export const renderOptions: RenderOptions = {
       const type = node.attrs.type
       if (type === RTEItemTypeEnum.asset) {
         const image = embeds?.[node?.attrs?.["asset-uid"]]
-        if (image.node.__typename === EmbedEnum.SysAsset) {
+        if (image?.node.__typename === EmbedEnum.SysAsset) {
           const alt = image?.node?.title ?? node.attrs.alt
           const alignment = node.attrs?.style?.["text-align"]
             ? {

components/JsonToHtml/utils.tsx

@@ -14,7 +14,7 @@ import type { RenderOptions } from "@/types/rte/option"
 
 export function groupEmbedsByUid(embedsArray: Node<Embeds>[]) {
   const embedsByUid = embedsArray.reduce<EmbedByUid>((acc, embed) => {
-    if (embed.node.system.uid) {
+    if (embed.node.system?.uid) {
       acc[embed.node.system.uid] = embed
     }
     return acc

components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css

@@ -8,7 +8,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-top: 0.5px solid var(--Base-Border-Disabled);
+    border-top: 0.5px solid var(--UI-Grey-30);
     padding: 3.4rem;
     text-align: center;
     gap: 6.2rem;

components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css

@@ -46,7 +46,7 @@
 
   .contactContainer {
     display: block;
-    border-top: 0.5px solid var(--Base-Border-Disabled);
+    border-top: 0.5px solid var(--UI-Grey-30);
     display: flex;
     justify-content: center;
     padding: 3.4rem;

components/TempDesignSystem/Card/card.module.css

@@ -7,7 +7,7 @@
   width: 100%;
   margin-right: 1.6rem;
   border-radius: 1.6rem;
-  gap: var(--x2, 16px);
+  gap: var(--Spacing-x2);
   padding: 0px 3.2rem;
 
   text-align: center;
@@ -46,11 +46,10 @@
   color: var(--script-color);
 
   font-family: var(--ff-biro-script-plus);
-  font-size: var(--Script-1, 2.4rem);
-  font-style: normal;
-  font-weight: 400;
-  line-height: 110%; /* 1.65rem */
-  letter-spacing: 0.03rem;
+  font-size: var(--typography-Script-2-fontSize);
+  font-weight: var(--typography-Script-2-fontWeight);
+  line-height: var(--typography-Script-2-lineHeight);
+  letter-spacing: 0.48px;
   padding: 1rem;
 
   transform: rotate(-3deg);
@@ -68,10 +67,9 @@
   color: var(--font-color);
   text-align: center;
 
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
+  font-size: var(--typography-Body-Regular-fontSize);
+  font-weight: var(--typography-Body-Regular-fontWeight);
+  line-height: var(--typography-Body-Regular-lineHeight);
   letter-spacing: 0.096px;
 }
 

components/Title/title.module.css

@@ -2,7 +2,7 @@
   /* font-family: var(--ff-brandon-text); */
   margin: 0;
   padding: 0;
-  color: var(--Brand-Main-Strong);
+  color: var(--Scandic-Brand-Burgundy);
 }
 
 .uppercase {