feat(theme): 🎨 add useTailwind hook to create short hand for tailwind functions

Author: Karthik-B-06

src/theme/context.tsx

@@ -48,7 +48,7 @@ function useTheme<T extends ThemeKeys>(
   return context;
 }
 
-type TWType = typeof tw;
+export type TWType = typeof tw;
 
 const AdaptUIProvider: React.FC<
   Partial<ThemeContextType & { children: React.ReactNode }>

src/theme/index.ts

@@ -1 +1,2 @@
 export * from "./context";
+export * from "./useTailwind";

src/theme/useTailwind.ts

@@ -0,0 +1,24 @@
+import { TWType, useTheme } from "./context";
+
+type TailwindFunctions = {
+  /**
+   * ts is a function that takes any number of string/CSS classnames
+   * as arguments and returns a Style object.
+   */
+  ts: TWType["style"];
+  /**
+   * `gc` is a function that takes a Tailwind Color Classname
+   * and returns the Hexcode.
+   */
+  gc: TWType["color"];
+  sc: TWType["setColorScheme"];
+};
+
+export const useTailwind = (): TailwindFunctions => {
+  const tailwind = useTheme();
+  return {
+    ts: tailwind.style,
+    gc: tailwind.getColor,
+    sc: tailwind.setColorScheme,
+  };
+};