fix(SW-719): title font colors

This commit is contained in:
Fredrik Thorsson
2024-11-07 16:26:18 +01:00
parent 7d9b541616
commit 9ef2705f67
3 changed files with 21 additions and 5 deletions

View File

@@ -116,10 +116,6 @@
margin: 0; margin: 0;
} }
.heading {
color: var(--font-color);
}
.bodyText { .bodyText {
color: var(--font-color); color: var(--font-color);
} }

View File

@@ -5,6 +5,7 @@ import Button from "@/components/TempDesignSystem/Button"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getFontColor } from "@/utils/cardFontColor"
import { getTheme } from "@/utils/cardTheme" import { getTheme } from "@/utils/cardTheme"
import { cardVariants } from "./variants" import { cardVariants } from "./variants"
@@ -29,6 +30,9 @@ export default function Card({
onSecondaryButtonClick, onSecondaryButtonClick,
}: CardProps) { }: CardProps) {
const buttonTheme = getTheme(theme) const buttonTheme = getTheme(theme)
const titleFontColor = getFontColor(theme)
console.log("woop woop", titleFontColor)
imageHeight = imageHeight || 320 imageHeight = imageHeight || 320
@@ -71,10 +75,10 @@ export default function Card({
) : null} ) : null}
<Title <Title
as="h4" as="h4"
className={styles.heading}
level="h3" level="h3"
textAlign="center" textAlign="center"
textTransform="regular" textTransform="regular"
color={titleFontColor}
> >
{heading} {heading}
</Title> </Title>

16
utils/cardFontColor.ts Normal file
View File

@@ -0,0 +1,16 @@
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")
}
}