chore: update theme.

makeplane · Feb 29, 2024 · 2a6ab21 · 2a6ab21
1 parent 602ebbc
commit 2a6ab21
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 27 deletions.
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
@@ -198,6 +198,31 @@ module.exports = {
             300: convertToRGB("--color-onboarding-border-300"),
           },
         },
+        toast: {
+          text: {
+            success: convertToRGB("--color-toast-success-text"),
+            error: convertToRGB("--color-toast-error-text"),
+            warning: convertToRGB("--color-toast-warning-text"),
+            info: convertToRGB("--color-toast-info-text"),
+            loading: convertToRGB("--color-toast-loading-text"),
+            secondary: convertToRGB("--color-toast-secondary-text"),
+            tertiary: convertToRGB("--color-toast-tertiary-text"),
+          },
+          background: {
+            success: convertToRGB("--color-toast-success-background"),
+            error: convertToRGB("--color-toast-error-background"),
+            warning: convertToRGB("--color-toast-warning-background"),
+            info: convertToRGB("--color-toast-info-background"),
+            loading: convertToRGB("--color-toast-loading-background"),
+          },
+          border: {
+            success: convertToRGB("--color-toast-success-border"),
+            error: convertToRGB("--color-toast-error-border"),
+            warning: convertToRGB("--color-toast-warning-border"),
+            info: convertToRGB("--color-toast-info-border"),
+            loading: convertToRGB("--color-toast-loading-border"),
+          },
+        },
       },
       keyframes: {
         leftToaster: {

diff --git a/packages/ui/src/toast/index.tsx b/packages/ui/src/toast/index.tsx
@@ -44,29 +44,35 @@ type ToastContentProps = {
   toastId: string | number;
   icon?: React.ReactNode;
   textColorClassName: string;
+  backgroundColorClassName: string;
   borderColorClassName: string;
 };
 
-export const Toast = () => <Toaster visibleToasts={5} gap={28} />;
+export const Toast = () => <Toaster visibleToasts={5} gap={28} position="top-right" />;
 
-// TODO: Update colors as per theme.
 export const setToast = (props: ToastProps) => {
-  const renderToastContent = ({ toastId, icon, textColorClassName, borderColorClassName }: ToastContentProps) =>
+  const renderToastContent = ({
+    toastId,
+    icon,
+    textColorClassName,
+    backgroundColorClassName,
+    borderColorClassName,
+  }: ToastContentProps) =>
     props.type === TOAST_TYPE.LOADING ? (
       <div
         onMouseDown={(e) => {
           e.stopPropagation();
           e.preventDefault();
         }}
-        className={cn("w-[350px] bg-white rounded-lg border shadow-sm p-2", borderColorClassName)}
+        className={cn("w-[350px] rounded-lg border shadow-sm p-2", backgroundColorClassName, borderColorClassName)}
       >
         <div className="w-full flex items-center px-4 py-2">
           {icon && <div className="flex items-center justify-center">{icon}</div>}
-          <div className={`w-full flex items-center gap-0.5 pr-1 ${icon ? "pl-4" : "pl-1"}`}>
-            <div className={`grow ${textColorClassName} text-sm font-semibold`}>{props.title ?? "Loading..."}</div>
+          <div className={cn("w-full flex items-center gap-0.5 pr-1", icon ? "pl-4" : "pl-1")}>
+            <div className={cn("grow text-sm font-semibold", textColorClassName)}>{props.title ?? "Loading..."}</div>
             <div className="flex-shrink-0">
               <X
-                className="text-gray-500 cursor-pointer"
+                className="text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
                 strokeWidth={1.5}
                 width={14}
                 height={14}
@@ -82,20 +88,24 @@ export const setToast = (props: ToastProps) => {
           e.stopPropagation();
           e.preventDefault();
         }}
-        className={`relative flex flex-col w-[350px] bg-white rounded-lg border ${borderColorClassName} shadow-sm p-2`}
+        className={cn(
+          "relative flex flex-col w-[350px] rounded-lg border shadow-sm p-2",
+          backgroundColorClassName,
+          borderColorClassName
+        )}
       >
         <X
-          className="fixed top-2 right-2.5 text-gray-500 cursor-pointer"
+          className="fixed top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
           strokeWidth={1.5}
           width={14}
           height={14}
           onClick={() => toast.dismiss(toastId)}
         />
         <div className="w-full flex items-center px-4 py-2">
           {icon && <div className="flex items-center justify-center">{icon}</div>}
-          <div className={`flex flex-col gap-0.5 pr-1 ${icon ? "pl-6" : "pl-1"}`}>
-            <div className={`${textColorClassName} text-sm font-semibold`}>{props.title}</div>
-            {props.message && <div className="text-gray-500 text-xs font-medium">{props.message}</div>}
+          <div className={cn("flex flex-col gap-0.5 pr-1", icon ? "pl-6" : "pl-1")}>
+            <div className={cn("text-sm font-semibold", textColorClassName)}>{props.title}</div>
+            {props.message && <div className="text-toast-text-secondary text-xs font-medium">{props.message}</div>}
           </div>
         </div>
       </div>
@@ -107,9 +117,10 @@ export const setToast = (props: ToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-green-600" />,
-            textColorClassName: "text-green-600",
-            borderColorClassName: "border-green-100",
+            icon: <CheckCircle2 width={28} height={28} strokeWidth={1.5} className="text-toast-text-success" />,
+            textColorClassName: "text-toast-text-success",
+            backgroundColorClassName: "bg-toast-background-success",
+            borderColorClassName: "border-toast-border-success",
           }),
         props.id ? { id: props.id } : {}
       );
@@ -118,9 +129,10 @@ export const setToast = (props: ToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-red-500" />,
-            textColorClassName: "text-red-500",
-            borderColorClassName: "border-red-100",
+            icon: <XCircle width={28} height={28} strokeWidth={1.5} className="text-toast-text-error" />,
+            textColorClassName: "text-toast-text-error",
+            backgroundColorClassName: "bg-toast-background-error",
+            borderColorClassName: "border-toast-border-error",
           }),
         props.id ? { id: props.id } : {}
       );
@@ -129,9 +141,10 @@ export const setToast = (props: ToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-yellow-400" />,
-            textColorClassName: "text-yellow-400",
-            borderColorClassName: "border-yellow-100",
+            icon: <AlertTriangle width={28} height={28} strokeWidth={1.5} className="text-toast-text-warning" />,
+            textColorClassName: "text-toast-text-warning",
+            backgroundColorClassName: "bg-toast-background-warning",
+            borderColorClassName: "border-toast-border-warning",
           }),
         props.id ? { id: props.id } : {}
       );
@@ -140,20 +153,21 @@ export const setToast = (props: ToastProps) => {
         (toastId) =>
           renderToastContent({
             toastId,
-            textColorClassName: "text-indigo-600",
-            borderColorClassName: "border-indigo-100",
+            textColorClassName: "text-toast-text-info",
+            backgroundColorClassName: "bg-toast-background-info",
+            borderColorClassName: "border-toast-border-info",
           }),
         props.id ? { id: props.id } : {}
       );
 
     case TOAST_TYPE.LOADING:
       return toast.custom((toastId) =>
-        // TODO: Add loader
         renderToastContent({
           toastId,
-          icon: <CircularBarSpinner className="text-gray-500" />,
-          textColorClassName: "text-black",
-          borderColorClassName: "border-gray-200 ",
+          icon: <CircularBarSpinner className="text-toast-text-tertiary" />,
+          textColorClassName: "text-toast-text-loading",
+          backgroundColorClassName: "bg-toast-background-loading",
+          borderColorClassName: "border-toast-border-loading",
         })
       );
   }

diff --git a/web/styles/globals.css b/web/styles/globals.css
@@ -149,6 +149,27 @@
     --color-onboarding-border-300: 229, 229, 229, 0.5;
 
     --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 62, 155, 79;
+    --color-toast-error-text: 220, 62, 66;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 51, 88, 212;
+    --color-toast-loading-text: 28, 32, 36;
+    --color-toast-secondary-text: 128, 131, 141;
+    --color-toast-tertiary-text: 96, 100, 108;
+
+    --color-toast-success-background: 253, 253, 254;
+    --color-toast-error-background: 255, 252, 252;
+    --color-toast-warning-background: 254, 253, 251;
+    --color-toast-info-background: 253, 253, 254;
+    --color-toast-loading-background: 253, 253, 254;
+
+    --color-toast-success-border: 218, 241, 219;
+    --color-toast-error-border: 255, 219, 220;
+    --color-toast-warning-border: 255, 247, 194;
+    --color-toast-info-border: 210, 222, 255;
+    --color-toast-loading-border: 224, 225, 230;
   }
 
   [data-theme="light-contrast"] {
@@ -217,6 +238,27 @@
     --color-onboarding-border-300: 34, 35, 38, 0.5;
 
     --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
+
+    /* toast theme */
+    --color-toast-success-text: 178, 221, 181;
+    --color-toast-error-text: 206, 44, 49;
+    --color-toast-warning-text: 255, 186, 24;
+    --color-toast-info-text: 141, 164, 239;
+    --color-toast-loading-text: 255, 255, 255;
+    --color-toast-secondary-text: 185, 187, 198;
+    --color-toast-tertiary-text: 139, 141, 152;
+
+    --color-toast-success-background: 46, 46, 46;
+    --color-toast-error-background: 46, 46, 46;
+    --color-toast-warning-background: 46, 46, 46;
+    --color-toast-info-background: 46, 46, 46;
+    --color-toast-loading-background: 46, 46, 46;
+
+    --color-toast-success-border: 42, 126, 59;
+    --color-toast-error-border: 100, 23, 35;
+    --color-toast-warning-border: 79, 52, 34;
+    --color-toast-info-border: 58, 91, 199;
+    --color-toast-loading-border: 96, 100, 108;
   }
 
   [data-theme="dark-contrast"] {