[V3][RL] Update theme helper types, add missing brand primitives

LifeSG · Dec 4, 2024 · 1cd3b66 · 1cd3b66
1 parent 6727a5a
commit 1cd3b66
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"),