feat(WEB-154): my profile view

components/TempDesignSystem/Button/button.module.css

@@ -72,3 +72,79 @@
   color: var(--some-grey-color, #444343);
   cursor: not-allowed;
 }
+
+.small {
+  border-radius: 3rem;
+  font-size: 1.4rem;
+  height: 2.6rem;
+  line-height: 1.7rem;
+  padding: 0.8rem 2.2rem;
+}
+
+.average {
+  border-radius: 4.7rem;
+  font-size: 1.4rem;
+  height: 3.2rem;
+  letter-spacing: 1%;
+  line-height: 1.6rem;
+  padding: 0.65rem 1.3rem;
+}
+
+.light {
+  font-weight: 300;
+}
+
+.regular {
+  font-weight: 400;
+}
+
+.medium {
+  font-weight: 500;
+}
+
+.semiBold {
+  font-weight: 600;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.black {
+  font-weight: 900;
+}
+
+.primary {
+  background-color: var(--scandic-blue, #02838E);
+  border: 0.1rem solid var(--scandic-blue, #02838E);
+  color: var(--some-white-color, #FFF);
+}
+
+.secondary {
+  background-color: var(--some-black-color, #000);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-white-color, #FFF);
+}
+
+.tertiary {
+  background-color: var(--some-red-color, #D60728);
+  border: 0.1rem solid var(--some-red-color, #D60728);
+  color: var(--some-white-color, #FFF);
+}
+
+.quarternary {
+  background-color: var(--some-grey-color, #727272);
+  border: 0.1rem solid var(--some-black-color, #727272);
+  color: var(--some-white-color, #FFF);
+}
+
+.white {
+  background-color: var(--some-white-color, #FFF);
+  border: 0.1rem solid var(--some-black-color, #000);
+  color: var(--some-black-color, #000);
+}
+
+.disabled {
+  background-color: var(--some-grey-color, #D9D9D9);
+  color: var(--some-grey-color, #757575);
+}

components/TempDesignSystem/Button/index.tsx

@@ -8,16 +8,22 @@ import type { ButtonProps } from "./button"
 
 export default function Button({
   asChild = false,
+  bgcolor,
   className,
+  disabled,
+  size,
   variant,
-  intent,
+  weight,
   ...props
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
-  return (
-    <Comp
-      className={buttonVariants({ className, variant, intent })}
-      {...props}
-    />
-  )
+  const classNames = buttonVariants({
+    bgcolor,
+    className,
+    disabled,
+    size,
+    variant,
+    weight,
+  })
+  return <Comp className={classNames} disabled={disabled} {...props} />
 }

components/TempDesignSystem/Button/variants.ts

@@ -4,16 +4,32 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
+    bgcolor: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+      tertiary: styles.tertiary,
+      quarternary: styles.quarternary,
+      white: styles.white,
+    },
+    size: {
+      small: styles.small,
+      regular: styles.average,
+    },
     variant: {
       default: styles.default,
       icon: styles.icon,
     },
-    intent: {
-      primary: styles.primary,
-      secondary: styles.secondary,
+    weight: {
+      light: styles.light,
+      regular: styles.regular,
+      medium: styles.medium,
+      semiBold: styles.semiBold,
+      bold: styles.bold,
+      black: styles.black,
     },
   },
   defaultVariants: {
     variant: "default",
+    weight: "regular",
   },
 })