fix(SW-719): add body color

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

@@ -78,22 +78,22 @@
   color: var(--Primary-Dark-On-Surface-Accent);
 }
 
-.secondaryLight {
+.secondaryLightAccent {
   color: var(--Secondary-Light-On-Surface-Accent);
 }
 
-.tertiaryLight {
+.tertiaryLightAccent {
   color: var(--Tertiary-Light-On-Surface-Accent);
 }
 
-.primaryDim {
+.primaryDimAccent {
   color: var(--Primary-Dim-On-Surface-Accent);
 }
 
-.primaryStrong {
+.primaryStrongAccent {
   color: var(--Primary-Strong-On-Surface-Accent);
 }
 
-.image {
+.baseText {
   color: var(--Base-Text-Inverted);
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -12,11 +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,
+      secondaryLightAccent: styles.secondaryLightAccent,
+      tertiaryLightAccent: styles.tertiaryLightAccent,
+      primaryDimAccent: styles.primaryDimAccent,
+      primaryStrongAccent: styles.primaryStrongAccent,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.center,

components/TempDesignSystem/Text/Body/body.module.css

@@ -111,3 +111,31 @@
 .disabled {
   color: var(--Base-Text-Disabled);
 }
+
+.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);
+}
+
+.baseText {
+  color: var(--Base-Text-Inverted);
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -19,6 +19,13 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
+      primaryLight: styles.primaryLight,
+      secondaryLight: styles.secondaryLight,
+      tertiaryLight: styles.tertiaryLight,
+      primaryDark: styles.primaryDark,
+      primaryDim: styles.primaryDim,
+      primaryStrong: styles.primaryStrong,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.textAlignCenter,

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

@@ -138,6 +138,6 @@
   color: var(--Primary-Strong-On-Surface-Text);
 }
 
-.image {
+.baseText {
   color: var(--Base-Text-Inverted);
 }

components/TempDesignSystem/Text/Title/variants.ts

@@ -17,7 +17,7 @@ const config = {
       primaryDark: styles.primaryDark,
       primaryDim: styles.primaryDim,
       primaryStrong: styles.primaryStrong,
-      image: styles.image,
+      baseText: styles.baseText,
     },
     textAlign: {
       center: styles.center,