feat: add button size "s" & "m" variations

Author: abelflopes

packages/components/button/src/index.tsx

@@ -9,6 +9,8 @@ import { getDisplayName } from "@react-ck/react-utils";
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Defines the color scheme of the button */
   skin?: "primary" | "secondary" | "ghost";
+  /** Defines the scale of the button */
+  size?: "s" | "m";
   /**
    * Content slot to receive an icon.
    * This can be any valid React node, allowing integration of icons or custom SVG components.
@@ -26,6 +28,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
 
 export const Button = ({
   skin = "primary",
+  size = "m",
   icon,
   children,
   className,
@@ -51,6 +54,7 @@ export const Button = ({
       className={classNames(
         styles.root,
         styles[skin],
+        styles[`size-${size}`],
         {
           [`${styles["icon-only"]}`]: isIconOnly,
         },

packages/components/button/src/styles/index.module.scss

@@ -5,8 +5,6 @@
   @include text-base;
 
   @include define-css-var(button, border-radius, get-spacing(1));
-  @include define-css-var(button, padding-y, get-spacing(1));
-  @include define-css-var(button, padding-x, get-spacing(2));
 
   background-color: get-css-var(button, background-color);
   color: get-css-var(button, color);
@@ -25,13 +23,33 @@
   }
 
   &.icon-only {
-    @include define-css-var(button, padding-x, get-spacing(1));
     @include define-css-var(button, border-radius, 50%);
-
     aspect-ratio: 1/1;
   }
 }
 
+.size-m {
+  @include define-css-var(button, padding-y, get-spacing(1));
+  @include define-css-var(button, padding-x, get-spacing(2));
+
+  &.icon-only {
+    @include define-css-var(button, padding-x, get-spacing(1));
+    @include define-css-var(button, padding-t, get-spacing(1));
+  }
+}
+
+.size-s {
+  @include define-css-var(button, padding-y, get-spacing(0.25));
+  @include define-css-var(button, padding-x, get-spacing(1.25));
+
+  &.icon-only {
+    @include define-css-var(button, padding-x, get-spacing(0.66));
+    @include define-css-var(button, padding-t, get-spacing(0.66));
+
+    @include text-variation(smallest);
+  }
+}
+
 .primary {
   @include define-css-var(button, background-color, get-color(highlight-primary));
   @include define-css-var(button, color, get-color(neutral-light-1));