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,