From d64400d66b1c662b577d0ab50270ff91bbad2c4d Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Tue, 22 Nov 2022 18:07:55 +0100
Subject: [PATCH] Added proper dark mode support for buttons (#5603)

* Added proper dark mode support for buttons, and converted buttons to use CVA for better maintainable variant styling.

* Added animations to buttons.

* Added cva types to buttonbase type since thats imported in different places

* Fixed issue with styled buttons when false was pas for disabled instead of undefined. Added a small util function that now accepts arrays of variants, and creates all the possible combinations. This way we have less duplicate compoundvariants defined. This fixes the styles in the eventsinglelayout component.

* Undo disabling of api jest tests.

* Fixed remaining buttons using combined prop, which is replace by button group.

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
---
 .vscode/settings.json                         |   5 +-
 apps/console                                  |   2 +-
 apps/storybook/components/VariantsTable.tsx   |   2 +-
 .../components/booking/pages/BookingPage.tsx  |   3 +-
 .../eventtype/EventTypeSingleLayout.tsx       |   1 -
 .../integrations/DisconnectIntegration.tsx    |   4 +-
 apps/web/pages/event-types/index.tsx          |   3 -
 .../web/pages/getting-started/[[...step]].tsx |   2 +-
 .../routing-forms/components/FormActions.tsx  |   1 -
 .../pages/forms/[...appPages].tsx             |   2 -
 .../ee/teams/components/MemberListItem.tsx    |   3 -
 .../ee/teams/components/TeamListItem.tsx      |   1 -
 .../components/v2/WorkflowListPage.tsx        |   3 -
 .../schedules/components/Schedule.tsx         |   2 +-
 packages/lib/cva/cva.test.ts                  |  52 ++++++
 packages/lib/cva/cva.ts                       |  61 +++++++
 packages/lib/cva/index.ts                     |   1 +
 packages/ui/components/button/Button.tsx      | 163 ++++++++++++------
 .../ui/components/button/button.stories.mdx   |   7 +-
 packages/ui/package.json                      |   5 +-
 .../ui/v2/core/layouts/SettingsLayout.tsx     |   7 +-
 yarn.lock                                     |  12 +-
 22 files changed, 258 insertions(+), 84 deletions(-)
 create mode 100644 packages/lib/cva/cva.test.ts
 create mode 100644 packages/lib/cva/cva.ts
 create mode 100644 packages/lib/cva/index.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c2124f8fc6..804ec75057 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,5 +6,8 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown", "typescript"]
+  "spellright.documentTypes": ["markdown", "typescript"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
 }
diff --git a/apps/console b/apps/console
index 2219900e06..7d53a77c07 160000
--- a/apps/console
+++ b/apps/console
@@ -1 +1 @@
-Subproject commit 2219900e06c3a683c85ce066e6ea3eb2d6ae14e9
+Subproject commit 7d53a77c07ab2b2f0fd0567b4d8ee4905d448442
diff --git a/apps/storybook/components/VariantsTable.tsx b/apps/storybook/components/VariantsTable.tsx
index 8f4e80f0db..781b74f92a 100644
--- a/apps/storybook/components/VariantsTable.tsx
+++ b/apps/storybook/components/VariantsTable.tsx
@@ -19,7 +19,7 @@ export function VariantsTable({
     <div
       className={classNames(
         isDark &&
-          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
       )}>
       <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
         <table>
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index bb27d4b03c..9520b50c0c 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -860,7 +860,7 @@ const BookingPage = ({
                   {!eventType.disableGuests && !guestToggle && (
                     <Button
                       type="button"
-                      color="minimalSecondary"
+                      color="minimal"
                       size="icon"
                       tooltip={t("additional_guests")}
                       StartIcon={Icon.FiUserPlus}
@@ -878,7 +878,6 @@ const BookingPage = ({
                   </Button>
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 1ff8bbb54f..321df9a22c 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -202,7 +202,6 @@ function EventTypeSingleLayout({
               color="secondary"
               size="icon"
               StartIcon={Icon.FiLink}
-              combined
               tooltip={t("copy_link")}
               onClick={() => {
                 navigator.clipboard.writeText(permalink);
diff --git a/apps/web/components/integrations/DisconnectIntegration.tsx b/apps/web/components/integrations/DisconnectIntegration.tsx
index ccbfabeff8..bffa40e32c 100644
--- a/apps/web/components/integrations/DisconnectIntegration.tsx
+++ b/apps/web/components/integrations/DisconnectIntegration.tsx
@@ -4,14 +4,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
 import { Dialog } from "@calcom/ui/Dialog";
-import { ButtonBaseProps } from "@calcom/ui/components/button";
+import { ButtonProps } from "@calcom/ui/components/button";
 import showToast from "@calcom/ui/v2/core/notifications";
 
 export default function DisconnectIntegration(props: {
   /** Integration credential id */
   id: number;
   externalId?: string;
-  render: (renderProps: ButtonBaseProps) => JSX.Element;
+  render: (renderProps: ButtonProps) => JSX.Element;
   onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
 }) {
   const { id, externalId = "" } = props;
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 96325ad7f8..0cbcd730f6 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -311,7 +311,6 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               size="icon"
                               href={calLink}
                               StartIcon={Icon.FiExternalLink}
-                              combined
                             />
                           </Tooltip>
 
@@ -324,7 +323,6 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 showToast(t("link_copied"), "success");
                                 navigator.clipboard.writeText(calLink);
                               }}
-                              combined
                             />
                           </Tooltip>
                           <Dropdown modal={false}>
@@ -336,7 +334,6 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 type="button"
                                 size="icon"
                                 color="secondary"
-                                combined
                                 StartIcon={Icon.FiMoreHorizontal}
                               />
                             </DropdownMenuTrigger>
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index e088354175..624a50917e 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -123,7 +123,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
             {headers[currentStepIndex]?.skipText && (
               <div className="flex w-full flex-row justify-center">
                 <Button
-                  color="minimalSecondary"
+                  color="minimal"
                   data-testid="skip-step"
                   onClick={(event) => {
                     event.preventDefault();
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index 6bf7a99e09..a18ab89b3d 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -136,7 +136,6 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
           <Button
             type="button"
             size="icon"
-            combined
             color="secondary"
             className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
             StartIcon={Icon.FiMoreHorizontal}
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index 8e1e1ecb35..7418cc2578 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -78,7 +78,6 @@ export default function RoutingForms({
                                   target="_blank"
                                   StartIcon={Icon.FiExternalLink}
                                   color="secondary"
-                                  combined
                                   size="icon"
                                   disabled={disabled}
                                 />
@@ -87,7 +86,6 @@ export default function RoutingForms({
                                 routingForm={form}
                                 action="copyLink"
                                 color="secondary"
-                                combined
                                 size="icon"
                                 StartIcon={Icon.FiLink}
                                 disabled={disabled}
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 8484b5c1e3..a6c1d263b2 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -125,7 +125,6 @@ export default function MemberListItem(props: Props) {
                   color="secondary"
                   size="icon"
                   StartIcon={Icon.FiClock}
-                  combined
                 />
               </Tooltip>
               <Tooltip content={t("view_public_page")}>
@@ -136,7 +135,6 @@ export default function MemberListItem(props: Props) {
                   className={classNames(!editMode ? "rounded-r-md" : "")}
                   size="icon"
                   StartIcon={Icon.FiExternalLink}
-                  combined
                 />
               </Tooltip>
               {editMode && (
@@ -147,7 +145,6 @@ export default function MemberListItem(props: Props) {
                       size="icon"
                       className="rounded-r-md"
                       StartIcon={Icon.FiMoreHorizontal}
-                      combined
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index f026ced0f9..7fad5bdc33 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -149,7 +149,6 @@ export default function TeamListItem(props: Props) {
                       }}
                       size="icon"
                       StartIcon={Icon.FiLink}
-                      combined
                     />
                   </Tooltip>
                 )}
diff --git a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
index 173b1ad6d9..621d744db0 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowListPage.tsx
@@ -144,7 +144,6 @@ export default function WorkflowListPage({ workflows }: Props) {
                             type="button"
                             color="secondary"
                             size="icon"
-                            combined
                             StartIcon={Icon.FiEdit2}
                             onClick={async () => await router.replace("/workflows/" + workflow.id)}
                           />
@@ -156,7 +155,6 @@ export default function WorkflowListPage({ workflows }: Props) {
                               setwWorkflowToDeleteId(workflow.id);
                             }}
                             color="secondary"
-                            combined
                             size="icon"
                             StartIcon={Icon.FiTrash2}
                           />
@@ -178,7 +176,6 @@ export default function WorkflowListPage({ workflows }: Props) {
                             <Button
                               type="button"
                               color="minimal"
-                              combined
                               StartIcon={Icon.FiEdit2}
                               onClick={async () => await router.replace("/workflows/" + workflow.id)}>
                               {t("edit")}
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index e9ef5c9774..7aa1b9cc59 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -384,7 +384,7 @@ const CopyTimes = ({
       </div>
       <hr />
       <div className="space-x-2 px-2">
-        <Button color="minimalSecondary" onClick={() => onCancel()}>
+        <Button color="minimal" onClick={() => onCancel()}>
           {t("cancel")}
         </Button>
         <Button color="primary" onClick={() => onClick(selected)}>
diff --git a/packages/lib/cva/cva.test.ts b/packages/lib/cva/cva.test.ts
new file mode 100644
index 0000000000..d73a113b4e
--- /dev/null
+++ b/packages/lib/cva/cva.test.ts
@@ -0,0 +1,52 @@
+import { applyStyleToMultipleVariants } from "./cva";
+
+describe("CVA Utils", () => {
+  it("Should return an array of all possible variants", () => {
+    const variants = {
+      color: ["blue", "red"],
+      size: ["small", "medium", "large"],
+      className: "text-blue w-10",
+    };
+
+    const result = applyStyleToMultipleVariants(variants);
+    expect(result).toEqual([
+      { color: "blue", size: "small", className: "text-blue w-10" },
+      { color: "blue", size: "medium", className: "text-blue w-10" },
+      { color: "blue", size: "large", className: "text-blue w-10" },
+      { color: "red", size: "small", className: "text-blue w-10" },
+      { color: "red", size: "medium", className: "text-blue w-10" },
+      { color: "red", size: "large", className: "text-blue w-10" },
+    ]);
+  });
+
+  it("Should no erorr when no arrays are passed in", () => {
+    const variants = {
+      color: "blue",
+      size: "large",
+      className: "text-blue w-10",
+    };
+
+    const result = applyStyleToMultipleVariants(variants);
+    expect(result).toEqual([{ color: "blue", size: "large", className: "text-blue w-10" }]);
+  });
+
+  it("Should accept numbers, null values, booleans and undefined in arrays as well", () => {
+    const variants = {
+      color: ["blue", null],
+      size: ["small", 30, false, undefined],
+      className: "text-blue w-10",
+    };
+
+    const result = applyStyleToMultipleVariants(variants);
+    expect(result).toEqual([
+      { color: "blue", size: "small", className: "text-blue w-10" },
+      { color: "blue", size: 30, className: "text-blue w-10" },
+      { color: "blue", size: false, className: "text-blue w-10" },
+      { color: "blue", size: undefined, className: "text-blue w-10" },
+      { color: null, size: "small", className: "text-blue w-10" },
+      { color: null, size: 30, className: "text-blue w-10" },
+      { color: null, size: false, className: "text-blue w-10" },
+      { color: null, size: undefined, className: "text-blue w-10" },
+    ]);
+  });
+});
diff --git a/packages/lib/cva/cva.ts b/packages/lib/cva/cva.ts
new file mode 100644
index 0000000000..14799bb7a1
--- /dev/null
+++ b/packages/lib/cva/cva.ts
@@ -0,0 +1,61 @@
+type ValidVariantTypes = string | number | null | boolean | undefined;
+type Variants = Record<string, ValidVariantTypes | ValidVariantTypes[]> & { className: string };
+
+/**
+ * Lets you use arrays for variants as well. This util combines all possible
+ * variants and returns an array with all possible options. Simply
+ * spread this in the compoundVariants.
+ */
+export const applyStyleToMultipleVariants = (variants: Variants) => {
+  const allKeysThatAreArrays = Object.keys(variants).filter((key) => Array.isArray(variants[key]));
+  const allKeysThatAreNotArrays = Object.keys(variants).filter((key) => !Array.isArray(variants[key]));
+  // Creates an object of all static options, ready to be merged in later with the array values.
+  const nonArrayOptions = allKeysThatAreNotArrays.reduce((acc, key) => {
+    return { ...acc, [key]: variants[key] };
+  }, {});
+
+  // Creates an array of all possible combinations of the array values.
+  // Eg if the variants object is { color: ["blue", "red"], size: ["small", "medium"] }
+  // then the result will be:
+  // [
+  //   { color: "blue", size: "small" },
+  //   { color: "blue", size: "medium" },
+  //   { color: "red", size: "small" },
+  //   { color: "red", size: "medium" },
+  // ]
+  const cartesianProductOfAllArrays = cartesianProduct(
+    allKeysThatAreArrays.map((key) => variants[key]) as ValidVariantTypes[][]
+  );
+
+  return cartesianProductOfAllArrays.map((variant) => {
+    const variantObject = variant.reduce((acc, value, index) => {
+      return { ...acc, [allKeysThatAreArrays[index]]: value };
+    }, {});
+
+    return {
+      ...nonArrayOptions,
+      ...variantObject,
+    };
+  });
+};
+
+/**
+ * A cartesian product is a final array that combines multiple arrays in ALL
+ * variations possible. For example:
+ *
+ * You have 3 arrays: [a, b], [1, 2], [y, z]
+ * The final result will be an array with all the different combinations:
+ * ["a", 1, "y"], ["a", 1, "z"], ["a", 2, "y"], ["a", 2, "z"], ["b", 1, "y"], etc
+ *
+ * We use this to create a params object for the static pages that combine multiple
+ * dynamic properties like 'stage' and 'meansOfTransport'. Resulting in an array
+ * with all different path combinations possible.
+ *
+ * @source: https://stackoverflow.com/questions/12303989/cartesian-product-of-multiple-arrays-in-javascript
+ * TS Inspiration: https://gist.github.com/ssippe/1f92625532eef28be6974f898efb23ef
+ */
+export const cartesianProduct = <T extends ValidVariantTypes>(sets: T[][]) =>
+  sets.reduce<T[][]>(
+    (accSets, set) => accSets.flatMap((accSet) => set.map((value) => [...accSet, value])),
+    [[]]
+  );
diff --git a/packages/lib/cva/index.ts b/packages/lib/cva/index.ts
new file mode 100644
index 0000000000..d9b53fd53c
--- /dev/null
+++ b/packages/lib/cva/index.ts
@@ -0,0 +1 @@
+export * from "./cva";
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 8ca9edcb9c..6901a4454c 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -1,24 +1,14 @@
+import { cva, VariantProps } from "class-variance-authority";
 import Link, { LinkProps } from "next/link";
 import React, { forwardRef } from "react";
 import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
+import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
 
 import Tooltip from "../../v2/core/Tooltip";
 
 export type ButtonBaseProps = {
-  /* Primary: Signals most important actions at any given point in the application.
-       Secondary: Gives visual weight to actions that are important
-       Minimal: Used for actions that we want to give very little significane to */
-  color?: keyof typeof variantClassName;
-  /**Default: H = 36px (default)
-       Large: H = 38px (Onboarding, modals)
-       Icon: Makes the button be an icon button */
-  size?: "base" | "lg" | "icon";
-  /**Signals the button is loading */
-  loading?: boolean;
-  /** Disables the button from being clicked */
-  disabled?: boolean;
   /** Action that happens when the button is clicked */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /**Left aligned icon*/
@@ -28,34 +18,119 @@ export type ButtonBaseProps = {
   shallow?: boolean;
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
-  /** @deprecated This has now been replaced by button group. */
-  combined?: boolean;
   flex?: boolean;
-};
+} & VariantProps<typeof buttonClasses>;
+
 export type ButtonProps = ButtonBaseProps &
   (
     | (Omit<JSX.IntrinsicElements["a"], "href" | "onClick" | "ref"> & LinkProps)
     | (Omit<JSX.IntrinsicElements["button"], "onClick" | "ref"> & { href?: never })
   );
 
-const variantClassName = {
-  primary:
-    "border border-transparent text-white bg-brand-500 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500",
-  secondary: "border border-gray-200 text-brand-900 bg-white hover:bg-gray-100",
-  minimal:
-    "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50",
-  minimalSecondary:
-    "text-gray-700 bg-transparent hover:bg-gray-100 dark:hover:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50 border border-transparent hover:border-gray-300 dark:hover:border-darkgray-300",
-  destructive:
-    "text-gray-900 focus:text-red-700 bg-transparent hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-100 focus:ring-red-700",
-};
-const variantDisabledClassName = {
-  primary: "border border-transparent bg-brand-500 bg-opacity-20 text-white",
-  secondary: "border border-gray-200 text-brand-900 bg-white opacity-30",
-  minimal: "text-gray-400 bg-transparent",
-  minimalSecondary: "text-gray-400 bg-transparent",
-  destructive: "text-red-700 bg-transparent opacity-30",
-};
+const buttonClasses = cva(
+  "inline-flex items-center text-sm font-medium relative rounded-md transition-colors",
+  {
+    variants: {
+      color: {
+        primary: "text-white dark:text-black",
+        secondary: "text-gray-900 dark:text-darkgray-900",
+        minimal: "text-gray-900 dark:text-darkgray-900",
+        destructive: "",
+      },
+      size: {
+        base: "h-9 px-4 py-2.5  ",
+        lg: "h-[36px] px-4 py-2.5 ",
+        icon: "flex justify-center min-h-[36px] min-w-[36px] ",
+      },
+      loading: {
+        true: "cursor-wait",
+      },
+      disabled: {
+        true: "cursor-not-allowed",
+      },
+    },
+    compoundVariants: [
+      // Primary variants
+      {
+        disabled: true,
+        color: "primary",
+        className: "bg-gray-800 bg-opacity-30 dark:bg-opacity-30 dark:bg-darkgray-800",
+      },
+      {
+        loading: true,
+        color: "primary",
+        className: "bg-gray-800/30 text-white/30 dark:bg-opacity-30 dark:bg-darkgray-700 dark:text-black/30",
+      },
+      ...applyStyleToMultipleVariants({
+        disabled: [undefined, false],
+        color: "primary",
+        className:
+          "bg-brand-500 hover:bg-brand-400 focus:border focus:border-white focus:outline-none focus:ring-2 focus:ring-offset focus:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
+      }),
+      // Secondary variants
+      {
+        disabled: true,
+        color: "secondary",
+        className:
+          "border border-gray-200 bg-opacity-30 text-gray-900/30 bg-white dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+      },
+      {
+        loading: true,
+        color: "secondary",
+        className:
+          "bg-gray-100 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+      },
+      ...applyStyleToMultipleVariants({
+        disabled: [undefined, false],
+        color: "secondary",
+        className:
+          "border border-gray-300 dark:border-darkgray-300 hover:bg-gray-50 hover:border-gray-400 focus:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-gray-900 dark:focus:ring-white",
+      }),
+      // Minimal variants
+      {
+        disabled: true,
+        color: "minimal",
+        className:
+          "border:gray-200 bg-opacity-30 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+      },
+      {
+        loading: true,
+        color: "minimal",
+        className:
+          "bg-gray-100 text-gray-900/30 dark:bg-darkgray-100 dark:text-darkgray-900/30 dark:border-darkgray-200",
+      },
+      applyStyleToMultipleVariants({
+        disabled: [undefined, false],
+        color: "minimal",
+        className:
+          "hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-gray-900 dark:focus:ring-white",
+      }),
+      // Destructive variants
+      {
+        disabled: true,
+        color: "destructive",
+        className:
+          "text-red-700/30 dark:text-red-700/30 bg-red-100/40 dark:bg-red-100/80 border border-red-200",
+      },
+      {
+        loading: true,
+        color: "destructive",
+        className:
+          "text-red-700/30 dark:text-red-700/30 hover:text-red-700/30 bg-red-100 border border-red-200",
+      },
+      ...applyStyleToMultipleVariants({
+        disabled: [false, undefined],
+        color: "destructive",
+        className:
+          "border dark:text-white text-gray-900 hover:text-red-700 focus:text-red-700 dark:hover:text-red-700 dark:focus:text-red-700 hover:border-red-100 focus:border-red-100 hover:bg-red-100  focus:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-red-700",
+      }),
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "base",
+    },
+  }
+);
 
 export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
   props: ButtonProps,
@@ -63,13 +138,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
 ) {
   const {
     loading = false,
-    color = "primary",
-    size = "base",
+    color,
+    size,
     type = "button",
     StartIcon,
     EndIcon,
     shallow,
-    combined = false,
     // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
     ...passThroughProps
   } = props;
@@ -86,17 +160,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       type: !isLink ? type : undefined,
       ref: forwardedRef,
       className: classNames(
-        // base styles independent what type of button it is
-        "inline-flex items-center text-sm font-medium relative",
-        // different styles depending on size
-        size === "base" && "h-9 px-4 py-2.5  ",
-        size === "lg" && "h-[36px] px-4 py-2.5 ",
-        size === "icon" && "flex justify-center min-h-[36px] min-w-[36px] ",
-        combined ? "" : "rounded-md",
-        // different styles depending on color
-        // set not-allowed cursor if disabled
-        disabled ? variantDisabledClassName[color] : variantClassName[color],
-        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
+        buttonClasses({ color, size, loading, disabled: props.disabled }),
         props.className
       ),
       // if we click a disabled button, we prevent going through the click handler
@@ -116,10 +180,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       {loading && (
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <svg
-            className={classNames(
-              "mx-4 h-5 w-5 animate-spin",
-              color === "primary" ? "text-white dark:text-black" : "text-black"
-            )}
+            className="mx-4 h-5 w-5 animate-spin text-black dark:text-white"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24">
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index 3b5cdfae7f..49e63f70a3 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -80,31 +80,36 @@ Button are clickable elements that initiates user actions. Labels in the button
 
 <Canvas>
   <Story name="All variants">
-    <VariantsTable titles={['Primary', 'Secondary', 'Minimal']} columnMinWidth={150}>
+    <VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive']} columnMinWidth={150}>
       <VariantRow variant="Default">
         <Button>Button text</Button>
         <Button color="secondary">Button text</Button>
         <Button color="minimal">Button text</Button>
+        <Button color="destructive">Button text</Button>
       </VariantRow>
       <VariantRow variant="Hover">
         <Button className="sb-pseudo--hover">Button text</Button>
         <Button className="sb-pseudo--hover" color="secondary">Button text</Button>
         <Button className="sb-pseudo--hover" color="minimal">Button text</Button>
+        <Button className="sb-pseudo--hover" color="destructive">Button text</Button>
       </VariantRow>
       <VariantRow variant="Focus">
         <Button className="sb-pseudo--focus">Button text</Button>
         <Button className="sb-pseudo--focus" color="secondary">Button text</Button>
         <Button className="sb-pseudo--focus" color="minimal">Button text</Button>
+        <Button className="sb-pseudo--focus" color="destructive">Button text</Button>
       </VariantRow>
       <VariantRow variant="Loading">
         <Button loading>Button text</Button>
         <Button loading color="secondary">Button text</Button>
         <Button loading color="minimal">Button text</Button>
+        <Button loading color="destructive">Button text</Button>
       </VariantRow>
       <VariantRow variant="Disabled">
         <Button disabled>Button text</Button>
         <Button disabled color="secondary">Button text</Button>
         <Button disabled color="minimal">Button text</Button>
+        <Button disabled color="destructive">Button text</Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 82434529d4..912aeb5e78 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -12,18 +12,19 @@
     "lint:report": "eslint . --format json --output-file ../../lint-results/ui.json"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.3.9",
     "@calcom/lib": "*",
     "@calcom/trpc": "*",
+    "@formkit/auto-animate": "^1.0.0-beta.1",
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-portal": "^1.0.0",
     "@radix-ui/react-select": "^0.1.1",
+    "@tanstack/react-query": "^4.3.9",
+    "class-variance-authority": "^0.3.0",
     "downshift": "^6.1.9",
     "next": "^12.3.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.0",
     "react-feather": "^2.0.10",
-    "@formkit/auto-animate": "^1.0.0-beta.1",
     "react-hook-form": "^7.34.2",
     "react-icons": "^4.4.0",
     "react-select": "^5.4.0"
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index 7012d05135..a798713b4c 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -291,12 +291,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
     <>
       <nav className="fixed z-20 flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button
-            StartIcon={Icon.FiMenu}
-            color="minimalSecondary"
-            size="icon"
-            onClick={props.onSideContainerOpen}
-          />
+          <Button StartIcon={Icon.FiMenu} color="minimal" size="icon" onClick={props.onSideContainerOpen} />
           <a href="/" className="flex items-center space-x-2 rounded-md px-3 py-1 hover:bg-gray-200">
             <Icon.FiArrowLeft className="text-gray-700" />
             <p className="font-semibold text-black">{t("settings")}</p>
diff --git a/yarn.lock b/yarn.lock
index cdd75bf231..a6fd911086 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7222,11 +7222,16 @@
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@16.9.1", "@types/node@>=8.1.0", "@types/node@^12.12.54", "@types/node@^12.12.6", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
+"@types/node@*", "@types/node@16.9.1", "@types/node@>=8.1.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
   version "16.9.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
   integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==
 
+"@types/node@^12.12.54", "@types/node@^12.12.6":
+  version "12.20.55"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
+  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+
 "@types/nodemailer@^6.4.5":
   version "6.4.5"
   resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.5.tgz#09011ac73259245475d1688e4ba101860567dc39"
@@ -10272,6 +10277,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+class-variance-authority@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.3.0.tgz#40c824bfbe5c604ecb3e337a2353b4b86278888e"
+  integrity sha512-TFO+pzY9Gedqv8crPhprd647wxhvfpKevPPjiMcteEWsnkHX9yZrD1xMY3ZhRZnLwHUHCCP0LYO6KZIVag/5wQ==
+
 classnames@^2.2.6, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"