fix(SW-719): add title colors

components/TempDesignSystem/Card/card.module.css

@@ -48,56 +48,48 @@
 }
 
 .themeOne {
-  --font-color: var(--Primary-Light-On-Surface-Text);
   --script-color: var(--Primary-Light-On-Surface-Accent);
 
   background: var(--Primary-Light-Surface-Normal);
 }
 
 .themeTwo {
-  --font-color: var(--Secondary-Light-On-Surface-Text);
   --script-color: var(--Secondary-Light-On-Surface-Accent);
 
   background: var(--Secondary-Light-Surface-Normal);
 }
 
 .themeThree {
-  --font-color: var(--Tertiary-Light-On-Surface-Text);
   --script-color: var(--Tertiary-Light-On-Surface-Accent);
 
   background: var(--Tertiary-Light-Surface-Normal);
 }
 
 .themePrimaryDark {
-  --font-color: var(--Primary-Dark-On-Surface-Text);
   --script-color: var(--Primary-Dark-On-Surface-Accent);
 
   background: var(--Primary-Dark-Surface-Normal);
 }
 
 .themePrimaryDim {
-  --font-color: var(--Primary-Dim-On-Surface-Text);
   --script-color: var(--Primary-Dim-On-Surface-Accent);
 
   background: var(--Primary-Dim-Surface-Normal);
 }
 
 .themePrimaryInverted {
-  --font-color: var(--Primary-Light-On-Surface-Text);
   --script-color: var(--Primary-Light-On-Surface-Accent);
 
   background: var(--Base-Surface-Primary-light-Normal);
 }
 
 .themePrimaryStrong {
-  --font-color: var(--Primary-Strong-On-Surface-Text);
   --script-color: var(--Primary-Strong-On-Surface-Accent);
 
   background: var(--Primary-Strong-Surface-Normal);
 }
 
 .themeImage {
-  --font-color: var(--Base-Text-Inverted);
   --script-color: var(--Base-Text-Inverted);
 }
 

components/TempDesignSystem/Card/index.tsx

@@ -5,8 +5,8 @@ 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 { getFontColor } from "@/utils/cardFontColor"
 import { getTheme } from "@/utils/cardTheme"
+import { getFontColor } from "@/utils/cardTitleFontColor"
 
 import { cardVariants } from "./variants"
 

components/TempDesignSystem/Text/Title/title.module.css

@@ -113,3 +113,31 @@
 .white {
   color: var(--UI-Opacity-White-100);
 }
+
+.primaryLight {
+  color: var(--Primary-Light-On-Surface-Text);
+}
+
+.secondaryLight {
+  color: var(--Secondary-Light-On-Surface-Text);
+}
+
+.tertiaryLight {
+  color: var(--Tertiary-Light-On-Surface-Text);
+}
+
+.primaryDark {
+  color: var(--Primary-Dark-On-Surface-Text);
+}
+
+.primaryDim {
+  color: var(--Primary-Dim-On-Surface-Text);
+}
+
+.primaryStrong {
+  color: var(--Primary-Strong-On-Surface-Text);
+}
+
+.image {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/Title/variants.ts

@@ -11,6 +11,13 @@ const config = {
       peach80: styles.peach80,
       red: styles.red,
       white: styles.white,
+      primaryLight: styles.primaryLight,
+      secondaryLight: styles.secondaryLight,
+      tertiaryLight: styles.tertiaryLight,
+      primaryDark: styles.primaryDark,
+      primaryDim: styles.primaryDim,
+      primaryStrong: styles.primaryStrong,
+      image: styles.image,
     },
     textAlign: {
       center: styles.center,

utils/cardFontColor.ts

@@ -1,16 +0,0 @@
-import { CardProps } from "@/components/TempDesignSystem/Card/card"
-
-import { headingVariants } from "../components/TempDesignSystem/Text/Title/variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-export function getFontColor(theme: CardProps["theme"]) {
-  let color: VariantProps<typeof headingVariants>["color"]
-
-  switch (theme) {
-    case "primaryDark":
-      return (color = "pale")
-    default:
-      return (color = "burgundy")
-  }
-}

utils/cardTitleFontColor.ts

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