fix(SW-719): add body color

2024-11-08 15:55:05 +01:00
parent effbc4c571
commit 8d06394b0f
11 changed files with 89 additions and 31 deletions
@@ -92,10 +92,6 @@
  margin: 0;
 }

-.bodyText {
-  color: var(--font-color);
-}
-
 .buttonContainer {
  display: flex;
  gap: var(--Spacing-x1);
@@ -5,9 +5,10 @@ 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 { getBodyFontColor } from "@/utils/cardBodyFontColor"
 import { getScriptFontColor } from "@/utils/cardScriptFontColor"
 import { getTheme } from "@/utils/cardTheme"
-import { getFontColor } from "@/utils/cardTitleFontColor"
+import { getTitleFontColor } from "@/utils/cardTitleFontColor"

 import { cardVariants } from "./variants"

@@ -31,8 +32,9 @@ export default function Card({
  onSecondaryButtonClick,
 }: CardProps) {
  const buttonTheme = getTheme(theme)
-  const fontColor = getFontColor(theme)
+  const titleFontColor = getTitleFontColor(theme)
  const scriptFontColor = getScriptFontColor(theme)
+  const bodyFontColor = getBodyFontColor(theme)

  imageHeight = imageHeight || 320

@@ -79,12 +81,12 @@ export default function Card({
          level="h3"
          textAlign="center"
          textTransform="regular"
-          color={fontColor}
+          color={titleFontColor}
        >
          {heading}
        </Title>
        {bodyText ? (
-          <Body className={styles.bodyText} textAlign="center">
+          <Body textAlign="center" color={bodyFontColor}>
            {bodyText}
          </Body>
        ) : null}
@@ -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);
 }
@@ -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,
@@ -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);
+}
@@ -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,
@@ -138,6 +138,6 @@
  color: var(--Primary-Strong-On-Surface-Text);
 }

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