feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Button/button.module.css

@@ -2,50 +2,60 @@
   background: none;
   border: none;
   cursor: pointer;
-  margin: 0;
-  padding: 0;
-  text-align: center;
   font-family: var(--typography-Body-Regular-fontFamily);
   font-weight: 600;
   line-height: 150%;
   letter-spacing: 1%;
+  margin: 0;
+  padding: 0;
+  text-align: center;
 }
 
-.primary {
+.primary,
+a.primary {
   color: var(--font-color);
   background-color: var(--background-color);
 }
 
 .primary:hover,
+a.primary:hover,
 .primary:active,
-.primary:focus {
+a.primary:active,
+.primary:focus,
+a.primary:focus {
   background-color: var(--hover-background);
   color: var(--hover-color);
 }
 
-.secondary {
+.secondary,
+a.secondary {
   background-color: transparent;
-  border: 0.1rem solid var(--background-color);
+  border: 1px solid var(--background-color);
   color: var(--background-color);
 }
 
 .secondary:hover,
+a.secondary:hover,
 .secondary:active,
-.secondary:focus {
-  border: 0.1rem solid var(--hover-color);
+a.secondary:active,
+.secondary:focus,
+a.secondary:focus {
+  border: 1px solid var(--hover-color);
   color: var(--hover-color);
 }
 
-.default {
+.default,
+a.default {
   align-items: center;
-  border-radius: 4rem;
+  border-radius: 50px;
+  /* No variable yet */
   display: flex;
-  gap: 1rem;
+  gap: var(--Spacing-x1);
 }
 
 .icon {
-  font-size: 1.8rem;
   align-items: baseline;
+  font-size: 18px;
 }
 
 /* Disabled styles */
@@ -57,25 +67,22 @@
 
 /* Sizes */
 .small {
+  font-size: 14px;
+  gap: var(--Spacing-x2);
+  height: 40px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
-  gap: 0.2rem;
-
-  font-size: 1.4rem;
-  height: 4rem;
 }
 
 .medium {
-  height: 3rem;
-  padding: 1.2rem var(--Spacing-x2);
-
-  font-size: 1.6rem;
+  font-size: 16px;
+  height: 30px;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
 }
 
 .large {
-  padding: var(--Spacing-x2) 2.4rem;
-  gap: 0.4rem;
-
-  font-size: 1.6rem;
+  font-size: 16px;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
 }
 
 .primaryLight {

components/TempDesignSystem/Button/index.tsx

@@ -18,10 +18,10 @@ export default function Button({
 }: ButtonProps) {
   const Comp = asChild ? Slot : "button"
   const classNames = buttonVariants({
-    theme,
     className,
     intent,
     size,
+    theme,
     variant,
   })
   return <Comp className={classNames} disabled={disabled} {...props} />

components/TempDesignSystem/Button/variants.ts

@@ -4,14 +4,6 @@ import styles from "./button.module.css"
 
 export const buttonVariants = cva(styles.btn, {
   variants: {
-    theme: {
-      primaryLight: styles.primaryLight,
-      primaryDark: styles.primaryDark,
-      secondaryLight: styles.secondaryLight,
-      secondaryDark: styles.secondaryDark,
-      tertiaryLight: styles.tertiaryLight,
-      tertiaryDark: styles.tertiaryDark,
-    },
     intent: {
       primary: styles.primary,
       secondary: styles.secondary,
@@ -21,15 +13,23 @@ export const buttonVariants = cva(styles.btn, {
       medium: styles.medium,
       large: styles.large,
     },
+    theme: {
+      primaryLight: styles.primaryLight,
+      primaryDark: styles.primaryDark,
+      secondaryLight: styles.secondaryLight,
+      secondaryDark: styles.secondaryDark,
+      tertiaryLight: styles.tertiaryLight,
+      tertiaryDark: styles.tertiaryDark,
+    },
     variant: {
       default: styles.default,
       icon: styles.icon,
     },
   },
   defaultVariants: {
-    variant: "default",
+    intent: "primary",
     size: "medium",
     theme: "primaryLight",
-    intent: "primary",
+    variant: "default",
   },
 })