chore: testing button component in packages-playground

apps/packages-playground/src/App.tsx

@@ -1,33 +1,42 @@
-import "./App.css";
-import { ThemeSwitcher, useTheme } from "@signozhq/theme";
-import { Button } from "@signozhq/button";
-import { Typography } from "@signozhq/design-tokens";
-import { Spacing } from "@signozhq/design-tokens";
+import './App.css';
 
-function App() {
-  const { theme, currentThemeColors } = useTheme();
+import { ThemeSwitcher, useTheme } from '@signozhq/theme';
+import Button from '@signozhq/button';
+import { Typography } from '@signozhq/design-tokens';
+import { Spacing } from '@signozhq/design-tokens';
+import { ColorTailwind } from '@signozhq/design-tokens';
+import { ArrowBigRightDash, Wrench } from 'lucide-react';
 
-  return (
-    <>
-      <h1>Theme Switcher and Button</h1>
-      <ThemeSwitcher />
+function App() {
+	const { currentThemeColors } = useTheme();
+	console.log(ColorTailwind);
 
-      <Button theme={theme} variant="secondary">
-        hey
-      </Button>
+	return (
+		<>
+			<h1>Theme Switcher and Button</h1>
+			<ThemeSwitcher />
 
-      <h1>Design tokens</h1>
-      <p
-        style={{
-          background: currentThemeColors.TEXT_COLOR,
-          letterSpacing: Spacing.MARGIN_10,
-          fontSize: Typography.FONTSIZE_3XL,
-        }}
-      >
-        hey
-      </p>
-    </>
-  );
+			<Button
+				backgroundColor="robin-500"
+				textColor="vanilla-100"
+				size="md"
+				prefixIcon={<Wrench />}
+				suffixIcon={<ArrowBigRightDash />}
+			>
+				Click Me
+			</Button>
+			<h1>Design tokens</h1>
+			<p
+				style={{
+					background: currentThemeColors.TEXT_COLOR,
+					letterSpacing: Spacing.MARGIN_10,
+					fontSize: Typography.FONTSIZE_3XL,
+				}}
+			>
+				hey
+			</p>
+		</>
+	);
 }
 
 export default App;

eslint.config.js

@@ -19,4 +19,9 @@ export default [
 	pluginJs.configs.recommended,
 	...tseslint.configs.recommended,
 	pluginReact.configs.flat.recommended,
+	{
+		rules: {
+			'react/react-in-jsx-scope': 'off',
+		},
+	},
 ];