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;
}
.bodyText {
color: var(--font-color);
}
.buttonContainer {
display: flex;
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 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}

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

@@ -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);
}

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

@@ -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,

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

@@ -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);
}

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

@@ -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,

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

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

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

@@ -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,

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 { biroScriptVariants } from "../components/TempDesignSystem/Text/BiroScript/variants"
import { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
import type { VariantProps } from "class-variance-authority"
@@ -11,18 +10,18 @@ export function getScriptFontColor(theme: CardProps["theme"]) {
case "one":
return (color = "primaryLightOnSurfaceAccent")
case "two":
return (color = "secondaryLight")
return (color = "secondaryLightAccent")
case "three":
return (color = "tertiaryLight")
return (color = "tertiaryLightAccent")
case "primaryDark":
return (color = "pink")
case "primaryDim":
return (color = "primaryDim")
return (color = "primaryDimAccent")
case "primaryInverted":
return (color = "primaryLightOnSurfaceAccent")
case "primaryStrong":
return (color = "primaryStrong")
return (color = "primaryStrongAccent")
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 { headingVariants } from "../components/TempDesignSystem/Text/Title/variants"
import { headingVariants } from "@/components/TempDesignSystem/Text/Title/variants"
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"]
switch (theme) {
@@ -23,6 +22,6 @@ export function getFontColor(theme: CardProps["theme"]) {
case "primaryStrong":
return (color = "primaryStrong")
case "image":
return (color = "image")
return (color = "baseText")
}
}