fix(SW-719): add colors for biroscript

components/TempDesignSystem/Card/card.module.css

@@ -48,49 +48,34 @@
 }
 
 .themeOne {
-  --script-color: var(--Primary-Light-On-Surface-Accent);
-
   background: var(--Primary-Light-Surface-Normal);
 }
 
 .themeTwo {
-  --script-color: var(--Secondary-Light-On-Surface-Accent);
-
   background: var(--Secondary-Light-Surface-Normal);
 }
 
 .themeThree {
-  --script-color: var(--Tertiary-Light-On-Surface-Accent);
-
   background: var(--Tertiary-Light-Surface-Normal);
 }
 
 .themePrimaryDark {
-  --script-color: var(--Primary-Dark-On-Surface-Accent);
-
   background: var(--Primary-Dark-Surface-Normal);
 }
 
 .themePrimaryDim {
-  --script-color: var(--Primary-Dim-On-Surface-Accent);
-
   background: var(--Primary-Dim-Surface-Normal);
 }
 
 .themePrimaryInverted {
-  --script-color: var(--Primary-Light-On-Surface-Accent);
-
   background: var(--Base-Surface-Primary-light-Normal);
 }
 
 .themePrimaryStrong {
-  --script-color: var(--Primary-Strong-On-Surface-Accent);
-
   background: var(--Primary-Strong-Surface-Normal);
 }
 
 .themeImage {
-  --script-color: var(--Base-Text-Inverted);
 }
 
 .themeImage .content {
@@ -103,7 +88,6 @@
 }
 
 .scriptedTitle {
-  color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
 }

components/TempDesignSystem/Card/index.tsx

@@ -5,6 +5,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getScriptFontColor } from "@/utils/cardScriptFontColor"
 import { getTheme } from "@/utils/cardTheme"
 import { getFontColor } from "@/utils/cardTitleFontColor"
 
@@ -30,9 +31,8 @@ export default function Card({
   onSecondaryButtonClick,
 }: CardProps) {
   const buttonTheme = getTheme(theme)
-  const titleFontColor = getFontColor(theme)
-
-  console.log("woop woop", titleFontColor)
+  const fontColor = getFontColor(theme)
+  const scriptFontColor = getScriptFontColor(theme)
 
   imageHeight = imageHeight || 320
 
@@ -68,6 +68,7 @@ export default function Card({
               className={styles.scriptedTitle}
               type="two"
               tilted="small"
+              color={scriptFontColor}
             >
               {scriptedTopTitle}
             </BiroScript>
@@ -78,7 +79,7 @@ export default function Card({
           level="h3"
           textAlign="center"
           textTransform="regular"
-          color={titleFontColor}
+          color={fontColor}
         >
           {heading}
         </Title>

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

@@ -77,3 +77,23 @@
 .pink {
   color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.secondaryLight {
+  color: var(--Secondary-Light-On-Surface-Accent);
+}
+
+.tertiaryLight {
+  color: var(--Tertiary-Light-On-Surface-Accent);
+}
+
+.primaryDim {
+  color: var(--Primary-Dim-On-Surface-Accent);
+}
+
+.primaryStrong {
+  color: var(--Primary-Strong-On-Surface-Accent);
+}
+
+.image {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -12,6 +12,11 @@ const config = {
       primaryLightOnSurfaceAccent: styles.plosa,
       red: styles.red,
       pink: styles.pink,
+      secondaryLight: styles.secondaryLight,
+      tertiaryLight: styles.tertiaryLight,
+      primaryDim: styles.primaryDim,
+      primaryStrong: styles.primaryStrong,
+      image: styles.image,
     },
     textAlign: {
       center: styles.center,

utils/cardScriptFontColor.ts

@@ -0,0 +1,30 @@
+import { CardProps } from "@/components/TempDesignSystem/Card/card"
+
+import { biroScriptVariants } from "../components/TempDesignSystem/Text/BiroScript/variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export function getScriptFontColor(theme: CardProps["theme"]) {
+  let color: VariantProps<typeof biroScriptVariants>["color"]
+
+  switch (theme) {
+    case "one":
+      return (color = "primaryLightOnSurfaceAccent")
+    case "two":
+      return (color = "secondaryLight")
+    case "three":
+      return (color = "tertiaryLight")
+    case "primaryDark":
+      return (color = "pink")
+    case "primaryDim":
+      return (color = "primaryDim")
+    case "primaryInverted":
+      return (color = "primaryLightOnSurfaceAccent")
+    case "primaryStrong":
+      return (color = "primaryStrong")
+    case "image":
+      return (color = "image")
+    default:
+      return "primaryLightOnSurfaceAccent"
+  }
+}