update example button component

dream-aim-deliver · Apr 20, 2024 · 7c43bbc · 7c43bbc
1 parent b921f53
commit 7c43bbc
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 59 deletions.
diff --git a/lib/components/button/Button.styles.ts b/lib/components/button/Button.styles.ts
@@ -1,8 +1,14 @@
 import { twMerge } from "tailwind-merge";
 
+const commonStyles = twMerge(`py-2 px-4 rounded-md`);
 export const primary = twMerge(
-  `text-3xl bg-primary text-white`,
+  commonStyles,
+  `bg-brand-500 text-text-primary font-bold`,
   `hover:bg-blue-700`,
 );
 
-export const secondary = twMerge(`bg-gray-500 text-white`, `hover:bg-gray-700`);
+export const secondary = twMerge(
+  commonStyles,
+  `bg-gray-500 text-white`,
+  `hover:bg-gray-700`,
+);
diff --git a/lib/components/button/Button.tsx b/lib/components/button/Button.tsx
@@ -35,20 +35,25 @@ export interface ButtonProps {
 export const Button = ({
   primary = false,
   size = "medium",
-  backgroundColor,
   label,
   ...props
 }: ButtonProps) => {
+  const classes = [];
   const mode = primary ? primaryStyles : secondaryStyles;
-  const classes = twMerge(mode);
+  classes.push(mode);
+  if (size === "small") {
+    classes.push("text-sm");
+  }
+  if (size === "medium") {
+    classes.push("text-base");
+  }
+  if (size === "large") {
+    classes.push("text-xl");
+  }
+
   return (
-    <button
-      type="button"
-      className={classes}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}: {size}
+    <button type="button" className={twMerge(classes)} {...props}>
+      {primary ? "Primary" : "Secondary"} {label}: {size}
     </button>
   );
 };
diff --git a/lib/components/button/README.md b/lib/components/button/README.md
diff --git a/lib/tailwind/config.ts b/lib/tailwind/config.ts
@@ -5,52 +5,54 @@ const content = [
 ];
 
 const theme = {
-  colors: {
-    brand: {
-      100: "#FFEBEE",
-      200: "#FFCDD2",
-      300: "#EF9A9A",
-      400: "#E57373",
-      500: "#FF5722",
-      600: "#E64A19",
-      700: "#D84315",
-      800: "#BF360C",
-      900: "#3E2723",
-    },
-    accent: {
-      100: "#E1F5FE",
-      200: "#B3E5FC",
-      300: "#81D4FA",
-      400: "#4FC3F7",
-      500: "#29B6F6",
-      600: "#03A9F4",
-      700: "#039BE5",
-      800: "#0288D1",
-      900: "#01579B",
-    },
-    text: {
-      primary: "#212121",
-      secondary: "#757575",
-      disabled: "#BDBDBD",
-      hint: "#9E9E9E",
-      inverted: "#FFFFFF",
-    },
-    supporting: {
-      success: "#4CAF50", // Green
-      error: "#F44336", // Red
-      warning: "#FFC107", // Yellow
-      info: "#2196F3", // Blue
-    },
-    neutral: {
-      100: "#F5F5F5",
-      200: "#EEEEEE",
-      300: "#E0E0E0",
-      400: "#BDBDBD",
-      500: "#9E9E9E",
-      600: "#757575",
-      700: "#616161",
-      800: "#424242",
-      900: "#212121",
+  extend: {
+    colors: {
+      brand: {
+        100: "#E1F5FE",
+        200: "#B3E5FC",
+        300: "#81D4FA",
+        400: "#4FC3F7",
+        500: "#29B6F6",
+        600: "#03A9F4",
+        700: "#039BE5",
+        800: "#0288D1",
+        900: "#01579B",
+      },
+      accent: {
+        100: "#FF80AB",
+        200: "#FF4081",
+        300: "#F50057",
+        400: "#C51162",
+        500: "#880E4F",
+        600: "#AD1457",
+        700: "#C2185B",
+        800: "#D81B60",
+        900: "#E91E63",
+      },
+      text: {
+        primary: "#FFF",
+        secondary: "#757575",
+        disabled: "#BDBDBD",
+        hint: "#9E9E9E",
+        inverted: "#000000", // Changed from white to black
+      },
+      supporting: {
+        success: "#4CAF50", // Green
+        error: "#F44336", // Red
+        warning: "#FFC107", // Yellow
+        info: "#2196F3", // Blue
+      },
+      neutral: {
+        100: "#F5F5F5",
+        200: "#EEEEEE",
+        300: "#E0E0E0",
+        400: "#BDBDBD",
+        500: "#9E9E9E",
+        600: "#757575",
+        700: "#616161",
+        800: "#424242",
+        900: "#212121",
+      },
     },
   },
 };

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+import tailwindDefaults from "tailwindcss/defaultConfig";
 import {
   defaultContent,
   defaultTheme,
@@ -7,6 +8,7 @@ import {
 export default {
   content: [...defaultContent],
   theme: {
+    ...tailwindDefaults.theme,
     ...defaultTheme,
   },
   plugins: [...defaultPlugins],