fix: update loyalty cards and join loyalty sidebar design

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -26,6 +26,14 @@
   line-height: var(--typography-Script-2-lineHeight);
 }
 
+.tiltedSmall {
+  transform: rotate(-2deg);
+}
+
+.tiltedLarge {
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .center {
   text-align: center;
 }

components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -10,6 +10,7 @@ export default function BiroScript({
   color,
   textAlign,
   type,
+  tilted,
   ...props
 }: BiroScriptProps) {
   const Comp = asChild ? Slot : "span"
@@ -18,6 +19,7 @@ export default function BiroScript({
     color,
     textAlign,
     type,
+    tilted,
   })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -19,6 +19,10 @@ const config = {
       one: styles.one,
       two: styles.two,
     },
+    tilted: {
+      small: styles.tiltedSmall,
+      large: styles.tiltedLarge,
+    },
   },
   defaultVariants: {
     type: "one",

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

@@ -43,4 +43,8 @@
 
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
-}
+}
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
     },
     textAlign: {
       center: styles.center,