From 1cd3b668d13d6d84311b6f474b830837ff9f1704 Mon Sep 17 00:00:00 2001
From: Quek Ruo Ling <ruoling.quek@ufinity.com>
Date: Wed, 4 Dec 2024 09:27:42 +0800
Subject: [PATCH] [V3][RL] Update theme helper types, add missing brand
 primitives

---
 src/theme/colour-primitive/theme-helper.ts | 17 +++++++++++++++--
 src/theme/colour-semantic/theme-helper.ts  |  4 +++-
 src/theme/motion/theme-helper.ts           |  4 +++-
 src/theme/radius/theme-helper.ts           |  4 +++-
 src/theme/spacing/theme-helper.ts          |  4 +++-
 5 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/theme/colour-primitive/theme-helper.ts b/src/theme/colour-primitive/theme-helper.ts
index 337f87443..8aa87ca95 100644
--- a/src/theme/colour-primitive/theme-helper.ts
+++ b/src/theme/colour-primitive/theme-helper.ts
@@ -1,3 +1,4 @@
+import { StyledComponentProps, getCollection, getValue } from "../helpers";
 import {
     ColourScheme,
     PrimitiveColourSet,
@@ -8,7 +9,6 @@ import { CCubeColourSet } from "./specs/ccube-colour-set";
 import { LifeSgColourSet } from "./specs/lifesg-colour-set";
 import { MyLegacyColourSet } from "./specs/mylegacy-colour-set";
 import { RBSColourSet } from "./specs/rbs-colour-set";
-import { StyledComponentProps, getCollection, getValue } from "../helpers";
 import { ColourCollectionsMap } from "./types";
 
 export const ColourSpec: ThemeCollectionSpec<
@@ -41,7 +41,20 @@ export const getPrimitiveColour = (key: keyof PrimitiveColourSet) => {
     };
 };
 
-export const PrimitiveColour = {
+export const PrimitiveColour: {
+    [key in keyof PrimitiveColourSet]: (props: StyledComponentProps) => string;
+} = {
+    "brand-10": getPrimitiveColour("brand-10"),
+    "brand-20": getPrimitiveColour("brand-20"),
+    "brand-30": getPrimitiveColour("brand-30"),
+    "brand-40": getPrimitiveColour("brand-40"),
+    "brand-50": getPrimitiveColour("brand-50"),
+    "brand-60": getPrimitiveColour("brand-60"),
+    "brand-70": getPrimitiveColour("brand-70"),
+    "brand-80": getPrimitiveColour("brand-80"),
+    "brand-90": getPrimitiveColour("brand-90"),
+    "brand-95": getPrimitiveColour("brand-95"),
+    "brand-100": getPrimitiveColour("brand-100"),
     "primary-10": getPrimitiveColour("primary-10"),
     "primary-20": getPrimitiveColour("primary-20"),
     "primary-30": getPrimitiveColour("primary-30"),
diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts
index c12e553a2..9f86677dd 100644
--- a/src/theme/colour-semantic/theme-helper.ts
+++ b/src/theme/colour-semantic/theme-helper.ts
@@ -40,7 +40,9 @@ export const getSemanticColour = (key: keyof SemanticColourSet) => {
     };
 };
 
-export const ColourSemantic = {
+export const ColourSemantic: {
+    [key in keyof SemanticColourSet]: (props: StyledComponentProps) => string;
+} = {
     // text
     text: getSemanticColour("text"),
     "text-subtle": getSemanticColour("text-subtle"),
diff --git a/src/theme/motion/theme-helper.ts b/src/theme/motion/theme-helper.ts
index 3da45c327..13900f701 100644
--- a/src/theme/motion/theme-helper.ts
+++ b/src/theme/motion/theme-helper.ts
@@ -26,7 +26,9 @@ export const getMotion = (key: keyof MotionSet) => {
     };
 };
 
-export const MotionValues = {
+export const MotionValues: {
+    [key in keyof MotionSet]: (props: StyledComponentProps) => string;
+} = {
     "duration-150": getMotion("duration-150"),
     "duration-250": getMotion("duration-250"),
     "duration-350": getMotion("duration-350"),
diff --git a/src/theme/radius/theme-helper.ts b/src/theme/radius/theme-helper.ts
index e67822249..e47192f12 100644
--- a/src/theme/radius/theme-helper.ts
+++ b/src/theme/radius/theme-helper.ts
@@ -26,7 +26,9 @@ export const getRadius = (key: keyof RadiusSet) => {
     };
 };
 
-export const RadiusValues = {
+export const RadiusValues: {
+    [key in keyof RadiusSet]: (props: StyledComponentProps) => string;
+} = {
     none: getRadius("none"),
     xs: getRadius("xs"),
     sm: getRadius("sm"),
diff --git a/src/theme/spacing/theme-helper.ts b/src/theme/spacing/theme-helper.ts
index 27c9140de..68edd9200 100644
--- a/src/theme/spacing/theme-helper.ts
+++ b/src/theme/spacing/theme-helper.ts
@@ -26,7 +26,9 @@ export const getSpace = (key: keyof SpacingSet) => {
     };
 };
 
-export const SpacingValues = {
+export const SpacingValues: {
+    [key in keyof SpacingSet]: (props: StyledComponentProps) => string;
+} = {
     "spacing-0": getSpace("spacing-0"),
     "spacing-4": getSpace("spacing-4"),
     "spacing-8": getSpace("spacing-8"),