feat(BOOK-757): Replaced Biroscript component with Typography

Approved-by: Bianca Widstam

apps/scandic-web/components/TempDesignSystem/Card/card.module.css

@@ -62,6 +62,10 @@
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Primary-Light-On-Surface-Accent);
+  }
 }
 
 .themeTwo {
@@ -72,6 +76,10 @@
   .bodyText {
     color: var(--Secondary-Light-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Secondary-Light-On-Surface-Accent);
+  }
 }
 
 .themeThree {
@@ -82,6 +90,10 @@
   .bodyText {
     color: var(--Tertiary-Light-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Tertiary-Light-On-Surface-Accent);
+  }
 }
 
 .themePrimaryDark {
@@ -92,6 +104,10 @@
   .bodyText {
     color: var(--Primary-Dark-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Primary-Dark-On-Surface-Accent);
+  }
 }
 
 .themePrimaryDim {
@@ -102,6 +118,10 @@
   .bodyText {
     color: var(--Primary-Dim-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Primary-Dim-On-Surface-Accent);
+  }
 }
 
 .themePrimaryInverted {
@@ -112,6 +132,10 @@
   .bodyText {
     color: var(--Primary-Light-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Primary-Light-On-Surface-Accent);
+  }
 }
 
 .themePrimaryStrong {
@@ -122,6 +146,10 @@
   .bodyText {
     color: var(--Primary-Strong-On-Surface-Text);
   }
+
+  .scriptedTitle {
+    color: var(--Primary-Strong-On-Surface-Accent);
+  }
 }
 
 .themeImage {
@@ -134,6 +162,10 @@
   .content {
     position: absolute;
   }
+
+  .scriptedTitle {
+    color: var(--Base-Text-Inverted);
+  }
 }
 
 .scriptContainer {
@@ -144,6 +176,8 @@
 .scriptedTitle {
   padding: var(--Space-x1);
   margin: 0;
+  transform: rotate(-3deg);
+  transform-origin: left;
 }
 
 .buttonContainer {

apps/scandic-web/components/TempDesignSystem/Card/index.tsx

@@ -5,9 +5,7 @@ import Image from "@scandic-hotels/design-system/Image"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-
-import { getButtonTheme, getScriptFontColor } from "./utils"
+import { getButtonTheme } from "./utils"
 import { cardVariants } from "./variants"
 
 import styles from "./card.module.css"
@@ -29,7 +27,6 @@ export default function Card({
   height,
 }: CardProps) {
   const buttonTheme = getButtonTheme(theme)
-  const scriptFontColor = getScriptFontColor(theme)
 
   return (
     <article
@@ -59,14 +56,9 @@ export default function Card({
       <div className={styles.content}>
         {scriptedTopTitle && (
           <section className={styles.scriptContainer}>
-            <BiroScript
-              className={styles.scriptedTitle}
-              type="two"
-              tilted="small"
-              color={scriptFontColor}
-            >
-              {scriptedTopTitle}
-            </BiroScript>
+            <Typography variant="Title/Decorative/md">
+              <span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
+            </Typography>
           </section>
         )}
         <Typography variant="Title/smLowCase" className={styles.heading}>

apps/scandic-web/components/TempDesignSystem/Card/utils.ts

@@ -1,31 +1,6 @@
 import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
-import type { VariantProps } from "class-variance-authority"
 
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
-import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
-
-export function getScriptFontColor(
-  theme: CardProps["theme"]
-): VariantProps<typeof biroScriptVariants>["color"] {
-  switch (theme) {
-    case "one":
-      return "primaryLightOnSurfaceAccent"
-    case "two":
-      return "secondaryLightAccent"
-    case "three":
-      return "tertiaryLightAccent"
-    case "primaryDark":
-      return "pink"
-    case "primaryDim":
-      return "primaryDimAccent"
-    case "primaryInverted":
-      return "primaryLightOnSurfaceAccent"
-    case "primaryStrong":
-      return "primaryStrongAccent"
-    case "image":
-      return "baseText"
-  }
-}
 
 export function getButtonTheme(
   theme: CardProps["theme"]