From 30e31413fed37711711886782dc4ae2592183537 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Fri, 8 Nov 2024 10:43:13 +0100 Subject: [PATCH] fix(SW-719): add title colors --- .../TempDesignSystem/Card/card.module.css | 8 ----- components/TempDesignSystem/Card/index.tsx | 2 +- .../Text/Title/title.module.css | 28 +++++++++++++++++ .../TempDesignSystem/Text/Title/variants.ts | 7 +++++ utils/cardFontColor.ts | 16 ---------- utils/cardTitleFontColor.ts | 30 +++++++++++++++++++ 6 files changed, 66 insertions(+), 25 deletions(-) delete mode 100644 utils/cardFontColor.ts create mode 100644 utils/cardTitleFontColor.ts diff --git a/components/TempDesignSystem/Card/card.module.css b/components/TempDesignSystem/Card/card.module.css index 0235206fd..ca83b292c 100644 --- a/components/TempDesignSystem/Card/card.module.css +++ b/components/TempDesignSystem/Card/card.module.css @@ -48,56 +48,48 @@ } .themeOne { - --font-color: var(--Primary-Light-On-Surface-Text); --script-color: var(--Primary-Light-On-Surface-Accent); background: var(--Primary-Light-Surface-Normal); } .themeTwo { - --font-color: var(--Secondary-Light-On-Surface-Text); --script-color: var(--Secondary-Light-On-Surface-Accent); background: var(--Secondary-Light-Surface-Normal); } .themeThree { - --font-color: var(--Tertiary-Light-On-Surface-Text); --script-color: var(--Tertiary-Light-On-Surface-Accent); background: var(--Tertiary-Light-Surface-Normal); } .themePrimaryDark { - --font-color: var(--Primary-Dark-On-Surface-Text); --script-color: var(--Primary-Dark-On-Surface-Accent); background: var(--Primary-Dark-Surface-Normal); } .themePrimaryDim { - --font-color: var(--Primary-Dim-On-Surface-Text); --script-color: var(--Primary-Dim-On-Surface-Accent); background: var(--Primary-Dim-Surface-Normal); } .themePrimaryInverted { - --font-color: var(--Primary-Light-On-Surface-Text); --script-color: var(--Primary-Light-On-Surface-Accent); background: var(--Base-Surface-Primary-light-Normal); } .themePrimaryStrong { - --font-color: var(--Primary-Strong-On-Surface-Text); --script-color: var(--Primary-Strong-On-Surface-Accent); background: var(--Primary-Strong-Surface-Normal); } .themeImage { - --font-color: var(--Base-Text-Inverted); --script-color: var(--Base-Text-Inverted); } diff --git a/components/TempDesignSystem/Card/index.tsx b/components/TempDesignSystem/Card/index.tsx index fb86ec715..bef28ee62 100644 --- a/components/TempDesignSystem/Card/index.tsx +++ b/components/TempDesignSystem/Card/index.tsx @@ -5,8 +5,8 @@ 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 { getFontColor } from "@/utils/cardFontColor" import { getTheme } from "@/utils/cardTheme" +import { getFontColor } from "@/utils/cardTitleFontColor" import { cardVariants } from "./variants" diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css index b970de2bb..8bea16789 100644 --- a/components/TempDesignSystem/Text/Title/title.module.css +++ b/components/TempDesignSystem/Text/Title/title.module.css @@ -113,3 +113,31 @@ .white { color: var(--UI-Opacity-White-100); } + +.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); +} + +.image { + color: var(--Base-Text-Inverted); +} diff --git a/components/TempDesignSystem/Text/Title/variants.ts b/components/TempDesignSystem/Text/Title/variants.ts index f374daaf9..95047b462 100644 --- a/components/TempDesignSystem/Text/Title/variants.ts +++ b/components/TempDesignSystem/Text/Title/variants.ts @@ -11,6 +11,13 @@ const config = { peach80: styles.peach80, red: styles.red, white: styles.white, + primaryLight: styles.primaryLight, + secondaryLight: styles.secondaryLight, + tertiaryLight: styles.tertiaryLight, + primaryDark: styles.primaryDark, + primaryDim: styles.primaryDim, + primaryStrong: styles.primaryStrong, + image: styles.image, }, textAlign: { center: styles.center, diff --git a/utils/cardFontColor.ts b/utils/cardFontColor.ts deleted file mode 100644 index 76371891d..000000000 --- a/utils/cardFontColor.ts +++ /dev/null @@ -1,16 +0,0 @@ -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["color"] - - switch (theme) { - case "primaryDark": - return (color = "pale") - default: - return (color = "burgundy") - } -} diff --git a/utils/cardTitleFontColor.ts b/utils/cardTitleFontColor.ts new file mode 100644 index 000000000..7232f41eb --- /dev/null +++ b/utils/cardTitleFontColor.ts @@ -0,0 +1,30 @@ +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["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 = "image") + default: + return (color = "burgundy") + } +}