scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-719): add body color

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-08 15:55:05 +01:00
parent effbc4c571
commit 8d06394b0f
11 changed files with 89 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/TempDesignSystem/Card/card.module.css
View File

@@ -92,10 +92,6 @@
margin: 0; margin: 0;
} }
.bodyText {
color: var(--font-color);
}
.buttonContainer { .buttonContainer {
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);

10
components/TempDesignSystem/Card/index.tsx
View File

@@ -5,9 +5,10 @@ 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 { getBodyFontColor } from "@/utils/cardBodyFontColor"
import { getScriptFontColor } from "@/utils/cardScriptFontColor" import { getScriptFontColor } from "@/utils/cardScriptFontColor"
import { getTheme } from "@/utils/cardTheme" import { getTheme } from "@/utils/cardTheme"
import { getFontColor } from "@/utils/cardTitleFontColor" import { getTitleFontColor } from "@/utils/cardTitleFontColor"
import { cardVariants } from "./variants" import { cardVariants } from "./variants"
@@ -31,8 +32,9 @@ export default function Card({
onSecondaryButtonClick, onSecondaryButtonClick,
}: CardProps) { }: CardProps) {
const buttonTheme = getTheme(theme) const buttonTheme = getTheme(theme)
const fontColor = getFontColor(theme) const titleFontColor = getTitleFontColor(theme)
const scriptFontColor = getScriptFontColor(theme) const scriptFontColor = getScriptFontColor(theme)
const bodyFontColor = getBodyFontColor(theme)
imageHeight = imageHeight || 320 imageHeight = imageHeight || 320
@@ -79,12 +81,12 @@ export default function Card({
level="h3" level="h3"
textAlign="center" textAlign="center"
textTransform="regular" textTransform="regular"
color={fontColor} color={titleFontColor}
> >
{heading} {heading}
</Title> </Title>
{bodyText ? ( {bodyText ? (
<Body className={styles.bodyText} textAlign="center"> <Body textAlign="center" color={bodyFontColor}>
{bodyText} {bodyText}
</Body> </Body>
) : null} ) : null}

10
components/TempDesignSystem/Text/BiroScript/biroScript.module.css
View File

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

10
components/TempDesignSystem/Text/BiroScript/variants.ts
View File

@@ -12,11 +12,11 @@ const config = {
primaryLightOnSurfaceAccent: styles.plosa, primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red, red: styles.red,
pink: styles.pink, pink: styles.pink,
secondaryLight: styles.secondaryLight, secondaryLightAccent: styles.secondaryLightAccent,
tertiaryLight: styles.tertiaryLight, tertiaryLightAccent: styles.tertiaryLightAccent,
primaryDim: styles.primaryDim, primaryDimAccent: styles.primaryDimAccent,
primaryStrong: styles.primaryStrong, primaryStrongAccent: styles.primaryStrongAccent,
image: styles.image, baseText: styles.baseText,
}, },
textAlign: { textAlign: {
center: styles.center, center: styles.center,

28
components/TempDesignSystem/Text/Body/body.module.css
View File

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

7
components/TempDesignSystem/Text/Body/variants.ts
View File

@@ -19,6 +19,13 @@ const config = {
uiTextHighContrast: styles.uiTextHighContrast, uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast, uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder, 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: { textAlign: {
center: styles.textAlignCenter, center: styles.textAlignCenter,

2
components/TempDesignSystem/Text/Title/title.module.css
View File

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

2
components/TempDesignSystem/Text/Title/variants.ts
View File

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

27
utils/cardBodyFontColor.ts Normal file
View File

@@ -0,0 +1,27 @@
import { CardProps } from "@/components/TempDesignSystem/Card/card"
import { bodyVariants } from "@/components/TempDesignSystem/Text/Body/variants"
import type { VariantProps } from "class-variance-authority"
export function getBodyFontColor(theme: CardProps["theme"]) {
let color: VariantProps<typeof bodyVariants>["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 = "baseText")
}
}

13
utils/cardScriptFontColor.ts
View File

@@ -1,6 +1,5 @@
import { CardProps } from "@/components/TempDesignSystem/Card/card" import { CardProps } from "@/components/TempDesignSystem/Card/card"
import { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
import { biroScriptVariants } from "../components/TempDesignSystem/Text/BiroScript/variants"
import type { VariantProps } from "class-variance-authority" import type { VariantProps } from "class-variance-authority"
@@ -11,18 +10,18 @@ export function getScriptFontColor(theme: CardProps["theme"]) {
case "one": case "one":
return (color = "primaryLightOnSurfaceAccent") return (color = "primaryLightOnSurfaceAccent")
case "two": case "two":
return (color = "secondaryLight") return (color = "secondaryLightAccent")
case "three": case "three":
return (color = "tertiaryLight") return (color = "tertiaryLightAccent")
case "primaryDark": case "primaryDark":
return (color = "pink") return (color = "pink")
case "primaryDim": case "primaryDim":
return (color = "primaryDim") return (color = "primaryDimAccent")
case "primaryInverted": case "primaryInverted":
return (color = "primaryLightOnSurfaceAccent") return (color = "primaryLightOnSurfaceAccent")
case "primaryStrong": case "primaryStrong":
return (color = "primaryStrong") return (color = "primaryStrongAccent")
case "image": case "image":
return (color = "image") return (color = "baseText")
} }
} }

7
utils/cardTitleFontColor.ts
View File

@@ -1,10 +1,9 @@
import { CardProps } from "@/components/TempDesignSystem/Card/card" import { CardProps } from "@/components/TempDesignSystem/Card/card"
import { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
import { headingVariants } from "../components/TempDesignSystem/Text/Title/variants"
import type { VariantProps } from "class-variance-authority" import type { VariantProps } from "class-variance-authority"
export function getFontColor(theme: CardProps["theme"]) { export function getTitleFontColor(theme: CardProps["theme"]) {
let color: VariantProps<typeof headingVariants>["color"] let color: VariantProps<typeof headingVariants>["color"]
switch (theme) { switch (theme) {
@@ -23,6 +22,6 @@ export function getFontColor(theme: CardProps["theme"]) {
case "primaryStrong": case "primaryStrong":
return (color = "primaryStrong") return (color = "primaryStrong")
case "image": case "image":
return (color = "image") return (color = "baseText")
} }
} }