feat: bump button sizes a notch, introduce new sm

+ new icons
+ fix font weight for safari

Author: fran-ink

scripts/import-svgs.mjs

@@ -25,12 +25,8 @@ await Promise.all(
     })
 );
 
-const iconNameMapping = {
-  home: "Home",
-  "link-discord": "LinkDiscord",
-  "link-github": "LinkGithub",
-  "link-x-social": "LinkXSocial",
-};
+/** Use this to map an invalid name temporarily (until it is fixed in the Figma)  */
+const iconNameMapping = {};
 
 function getIconName(svg) {
   const result = svg.replace(".svg", "").replace("Type=", "");

src/components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<ButtonProps<"button" | "a">> = {
   title: "Components/Button",
   decorators: [
     MatrixDecorator<ButtonProps>({
-      first: { key: "size", values: ["sm", "md"] },
+      first: { key: "size", values: ["sm", "md", "lg"] },
       second: { key: "variant", values: ["primary", "secondary"] },
     }),
   ],

src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ export type ButtonProps<T extends ElementType = typeof DEFAULT_BUTTON_TAG> =
 export interface OwnButtonProps extends PropsWithChildren {
   className?: string;
   variant?: "primary" | "secondary";
-  size?: "sm" | "md";
+  size?: "sm" | "md" | "lg";
   rounded?: "full" | "default";
   iconLeft?: React.ReactNode;
   iconRight?: React.ReactNode;
@@ -36,13 +36,15 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
         "ink:rounded-full ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:duration-100",
         "ink:flex ink:items-center ink:justify-center ink:gap-1 ink:select-none ink:no-underline",
         variantClassNames(size, {
-          sm: "ink:px-3 ink:py-2 ink:text-body-2-bold",
-          md: "ink:px-4 ink:py-3 ink:text-h4",
+          sm: "ink:px-2 ink:py-1.5 ink:text-body-2-bold",
+          md: "ink:px-3 ink:py-2 ink:text-body-2-bold",
+          lg: "ink:px-4 ink:py-3 ink:text-h4",
         }),
         variantClassNames(rounded, {
           full: variantClassNames(size, {
-            sm: "ink:rounded-full ink:p-1.5",
-            md: "ink:rounded-full ink:p-2",
+            sm: "ink:rounded-full ink:p-1",
+            md: "ink:rounded-full ink:p-1.5",
+            lg: "ink:rounded-full ink:p-2",
           }),
           default: "",
         }),
@@ -62,7 +64,8 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
         <div
           className={variantClassNames(size, {
             sm: "ink:size-3",
-            md: "ink:size-3 ink:m-0.5",
+            md: "ink:size-3",
+            lg: "ink:size-3 ink:m-0.5",
           })}
         >
           {children}

src/components/Button/InternalButton.tsx

@@ -36,7 +36,7 @@ export const InternalButton = <
         }),
         className
       )}
-      size="sm"
+      size="md"
       variant={
         variant === "primary" || variant === "secondary" ? variant : undefined
       }

src/components/Modal/Modal.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<ModalProps> = {
         const { isModalOpen, openModal } = useModalContext(args.id);
         return (
           <div className="ink:p-4">
-            <Button variant="primary" size="sm" onClick={openModal}>
+            <Button variant="primary" size="md" onClick={openModal}>
               {isModalOpen ? "Close Modal" : "Open Modal"}
             </Button>
             <Story />
@@ -57,7 +57,7 @@ const ModalContent = ({
         <Button
           className="ink:w-full"
           variant="primary"
-          size="md"
+          size="lg"
           onClick={() => closeModal(true)}
         >
           Let's go
@@ -79,15 +79,15 @@ export const Nested: Story = {
       return (
         <>
           <Story />
-          <Modal id="nested" title="Nested modal" size="md" hasBackdrop>
+          <Modal id="nested" title="Nested modal" size="lg" hasBackdrop>
             {({ closeModal }) => (
               <ModalLayout.CallToAction
                 title="A nested modal example"
                 content="This one uses the backdrop and size='md'"
                 button={
                   <Button
                     variant="primary"
-                    size="md"
+                    size="lg"
                     onClick={() => closeModal()}
                   >
                     Close Nested
@@ -108,7 +108,7 @@ export const Nested: Story = {
           <Button
             className="ink:w-full"
             variant="primary"
-            size="md"
+            size="lg"
             onClick={openModal}
           >
             Open Nested

src/icons/Icons.stories.ts

@@ -21,7 +21,7 @@ export const AllIconsRow: Story = {
 
 export const AllIconsWithColor: Story = {
   args: {
-    containerClassName: "ink:text-primary",
+    containerClassName: "ink:text-button-primary",
   },
 };
 

src/icons/Type=Check.svg

@@ -3,21 +3,25 @@
  */
 
 export { default as Arrow } from "./Type=Arrow.svg?react";
+export { default as Check } from "./Type=Check.svg?react";
+export { default as CheckFill } from "./Type=CheckFill.svg?react";
 export { default as Chevron } from "./Type=Chevron.svg?react";
 export { default as Close } from "./Type=Close.svg?react";
 export { default as Copy } from "./Type=Copy.svg?react";
 export { default as DefaultAppIcon } from "./Type=DefaultAppIcon.svg?react";
 export { default as Deposit } from "./Type=Deposit.svg?react";
 export { default as Disconnect } from "./Type=Disconnect.svg?react";
 export { default as Error } from "./Type=Error.svg?react";
+export { default as Home } from "./Type=Home.svg?react";
 export { default as Loading } from "./Type=Loading.svg?react";
 export { default as Menu } from "./Type=Menu.svg?react";
+export { default as Moon } from "./Type=Moon.svg?react";
 export { default as Profile } from "./Type=Profile.svg?react";
 export { default as Search } from "./Type=Search.svg?react";
 export { default as Settings } from "./Type=Settings.svg?react";
+export { default as SocialDiscord } from "./Type=SocialDiscord.svg?react";
+export { default as SocialGithub } from "./Type=SocialGithub.svg?react";
+export { default as SocialX } from "./Type=SocialX.svg?react";
 export { default as Success } from "./Type=Success.svg?react";
+export { default as Sun } from "./Type=Sun.svg?react";
 export { default as Swap } from "./Type=Swap.svg?react";
-export { default as Home } from "./Type=home.svg?react";
-export { default as LinkDiscord } from "./Type=link-discord.svg?react";
-export { default as LinkGithub } from "./Type=link-github.svg?react";
-export { default as LinkXSocial } from "./Type=link-x-social.svg?react";

src/icons/Type=CheckFill.svg

@@ -46,6 +46,11 @@
     margin: 0;
     padding: 0;
   }
+
+  .ink\:font-default * {
+    /** Required for Safari to have proper font weights */
+    font-synthesis: none;
+  }
 }
 
 @theme {