feat(WEB-162): final design edit profile page

components/TempDesignSystem/Button/variants.ts

@@ -5,8 +5,10 @@ import styles from "./button.module.css"
 export const buttonVariants = cva(styles.btn, {
   variants: {
     intent: {
+      inverted: styles.inverted,
       primary: styles.primary,
       secondary: styles.secondary,
+      tertiary: styles.tertiary,
     },
     size: {
       small: styles.small,
@@ -14,13 +16,14 @@ export const buttonVariants = cva(styles.btn, {
       large: styles.large,
     },
     theme: {
-      primaryDark: styles.primaryDark,
-      primaryLight: styles.primaryLight,
-      primaryStrong: styles.primaryStrong,
-      secondaryLight: styles.secondaryLight,
-      secondaryDark: styles.secondaryDark,
-      tertiaryLight: styles.tertiaryLight,
-      tertiaryDark: styles.tertiaryDark,
+      base: "",
+      primaryDark: "",
+      primaryStrong: "",
+      primaryLight: "",
+      secondaryLight: "",
+      secondaryDark: "",
+      tertiaryLight: "",
+      tertiaryDark: "",
     },
     variant: {
       default: styles.default,
@@ -33,4 +36,97 @@ export const buttonVariants = cva(styles.btn, {
     theme: "primaryLight",
     variant: "default",
   },
+
+  compoundVariants: [
+    {
+      className: styles.basePrimary,
+      intent: "primary",
+      theme: "base",
+    },
+    {
+      className: styles.baseSecondary,
+      intent: "secondary",
+      theme: "base",
+    },
+    {
+      className: styles.baseTertiary,
+      intent: "tertiary",
+      theme: "base",
+    },
+    {
+      className: styles.baseInverted,
+      intent: "inverted",
+      theme: "base",
+    },
+    {
+      className: styles.primaryDarkPrimary,
+      intent: "primary",
+      theme: "primaryDark",
+    },
+    {
+      className: styles.primaryDarkSecondary,
+      intent: "secondary",
+      theme: "primaryDark",
+    },
+    {
+      className: styles.primaryLightPrimary,
+      intent: "primary",
+      theme: "primaryLight",
+    },
+    {
+      className: styles.primaryLightSecondary,
+      intent: "secondary",
+      theme: "primaryLight",
+    },
+    {
+      className: styles.primaryStrongPrimary,
+      intent: "primary",
+      theme: "primaryStrong",
+    },
+    {
+      className: styles.primaryStrongSecondary,
+      intent: "secondary",
+      theme: "primaryStrong",
+    },
+    {
+      className: styles.secondaryDarkPrimary,
+      intent: "primary",
+      theme: "secondaryDark",
+    },
+    {
+      className: styles.secondaryDarkSecondary,
+      intent: "secondary",
+      theme: "secondaryDark",
+    },
+    {
+      className: styles.secondaryLightPrimary,
+      intent: "primary",
+      theme: "secondaryLight",
+    },
+    {
+      className: styles.secondaryLightSecondary,
+      intent: "secondary",
+      theme: "secondaryLight",
+    },
+    {
+      className: styles.tertiaryDarkPrimary,
+      intent: "primary",
+      theme: "tertiaryDark",
+    },
+    {
+      className: styles.tertiaryDarkSecondary,
+      intent: "secondary",
+      theme: "tertiaryDark",
+    },
+    {
+      className: styles.tertiaryLightPrimary,
+      intent: "primary",
+      theme: "tertiaryLight",
+    },
+    {
+      className: styles.tertiaryLightSecondary,
+      intent: "secondary",
+      theme: "tertiaryLight",
+    },
+  ],
 })