Button: add XL size (#277)

* Button: add XL size

* Bump version to v3.1.2

Author: quietbits

@stellar/design-system-website/package.json

@@ -26,7 +26,7 @@
     "@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
     "@docusaurus/theme-live-codeblock": "^3.7.0",
     "@mdx-js/react": "^3.1.0",
-    "@stellar/design-system": "^3.1.1",
+    "@stellar/design-system": "^3.1.2",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.3.1",

@stellar/design-system-website/src/componentPreview/buttonPreview.tsx

@@ -50,6 +50,10 @@ export const buttonPreview: ComponentPreview = {
           value: "lg",
           label: "LG",
         },
+        {
+          value: "xl",
+          label: "XL",
+        },
       ],
     },
     {

@stellar/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar/design-system",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "author": "Stellar Development Foundation <hello@stellar.org>",
   "description": "Components for Stellar Development Foundation’s design system",
   "license": "Apache-2.0",

@stellar/design-system/src/components/Button/index.tsx

@@ -17,7 +17,7 @@ export interface ButtonProps {
     | "error"
     | "success";
   /** Size of the button */
-  size: "sm" | "md" | "lg";
+  size: "sm" | "md" | "lg" | "xl";
   /** Label of the button */
   children?: string | React.ReactNode;
   /** Icon element */

@stellar/design-system/src/components/Button/styles.scss

@@ -313,6 +313,15 @@
     --Button-border-radius: #{pxToRem(8px)};
   }
 
+  &--xl {
+    --Button-height: #{pxToRem(48px)};
+    --Button-font-size: #{pxToRem(16px)};
+    --Button-line-height: #{pxToRem(24px)};
+    --Button-padding-vertical: #{pxToRem(12px)};
+    --Button-padding-horizontal: #{pxToRem(16px)};
+    --Button-border-radius: #{pxToRem(8px)};
+  }
+
   // Custom
   &--full-width {
     width: 100%;