feat: review typography to embed weights

src/components/Button/Button.tsx

@@ -33,10 +33,10 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
   return (
     <Component
       className={classNames(
-        "ink:rounded-full ink:font-bold ink:font-default ink:transition-colors ink:hover:cursor-pointer ink:disabled:cursor-not-allowed ink:duration-100",
+        "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",
+          sm: "ink:px-3 ink:py-2 ink:text-body-2-bold",
           md: "ink:px-4 ink:py-3 ink:text-h4",
         }),
         variantClassNames(rounded, {
@@ -62,7 +62,7 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
         <div
           className={variantClassNames(size, {
             sm: "ink:size-3",
-            md: "ink:size-4",
+            md: "ink:size-3 ink:m-0.5",
           })}
         >
           {children}

src/components/Button/InternalButton.tsx

@@ -30,9 +30,9 @@ export const InternalButton = <
       className={classNames(
         variantClassNames(variant as InternalButtonVariant, {
           wallet:
-            "ink:bg-background-light-transparent ink:pl-1 ink:pr-1.5 ink:py-2 ink:text-body-2 ink:font-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
+            "ink:bg-background-light-transparent ink:pl-1 ink:pr-1.5 ink:py-2 ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-light ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
           "wallet-inside":
-            "ink:bg-background-light-invisible ink:px-1.5 ink:rounded-xs ink:text-body-2 ink:font-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
+            "ink:bg-background-light-invisible ink:px-1.5 ink:rounded-xs ink:text-body-2-bold ink:text-text-default ink:hover:bg-background-container ink:disabled:bg-background-light-transparent-disabled ink:disabled:text-muted ink:active:bg-background-light",
         }),
         className
       )}

src/components/Input/Input.tsx

@@ -12,7 +12,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <input
         ref={ref}
         className={classNames(
-          "ink:w-full ink:font-default ink:rounded-xs ink:bg-background-container ink:p-2 ink:h-2 ink:text-body-2 ink:text-text-default",
+          "ink:w-full ink:font-default ink:rounded-xs ink:bg-background-container ink:p-2 ink:h-2 ink:text-body-2-regular ink:text-text-default",
           "focus:ink:outline focus:ink:outline-1 ink:outline-text-on-secondary",
           className
         )}

src/components/Modal/Layouts/CallToActionModalContent.tsx

@@ -12,8 +12,8 @@ export const CallToActionModalContent = ({
   return (
     <div className="ink:flex ink:flex-col ink:justify-center ink:items-center ink:gap-5 ink:max-w-sm">
       <div className="ink:flex ink:flex-col ink:items-center ink:gap-2">
-        <div className="ink:text-h4 ink:font-bold">{title}</div>
-        <div className="ink:text-body-2 ink:text-center">{content}</div>
+        <div className="ink:text-h4">{title}</div>
+        <div className="ink:text-body-2-regular ink:text-center">{content}</div>
       </div>
       {button}
     </div>

src/components/Modal/Modal.tsx

@@ -86,7 +86,7 @@ export const Modal = <TOnCloseProps,>({
                 "ink:w-full ink:flex ink:items-center ink:justify-between"
               )}
             >
-              <div className="ink:font-bold ink:text-h4">{title}</div>
+              <div className="ink:text-h4">{title}</div>
               <InkIcon.Close
                 className="ink:cursor-pointer ink:size-3"
                 onClick={() => handleClose()}

src/components/SegmentedControl/SegmentedControl.tsx

@@ -88,7 +88,7 @@ export const SegmentedControl = <
       )}
       <div
         className={classNames(
-          "ink:grid ink:h-6 ink:grid-flow-col ink:text-body-2 ink:font-bold ink:rounded-full",
+          "ink:grid ink:h-6 ink:grid-flow-col ink:text-body-2-bold ink:rounded-full",
           variantClassNames(displayOn, {
             light: "ink:bg-background-container",
             dark: "ink:bg-background-light",

src/components/Typography/Typography.stories.tsx

@@ -7,9 +7,12 @@ const variants = [
   "h3",
   "h4",
   "body-1",
-  "body-2",
-  "body-3",
-  "caption",
+  "body-2-regular",
+  "body-2-bold",
+  "body-3-regular",
+  "body-3-bold",
+  "caption-1-regular",
+  "caption-1-bold",
   "caption-2",
 ] as const;
 

src/components/Typography/Typography.tsx

@@ -10,9 +10,12 @@ export type TypographyProps<T extends React.ElementType = "div"> =
       | "h3"
       | "h4"
       | "body-1"
-      | "body-2"
-      | "body-3"
-      | "caption"
+      | "body-2-regular"
+      | "body-2-bold"
+      | "body-3-regular"
+      | "body-3-bold"
+      | "caption-1-regular"
+      | "caption-1-bold"
       | "caption-2";
     className?: string;
   }> &
@@ -30,15 +33,22 @@ export const Typography = <T extends React.ElementType = "div">({
     <Component
       className={classNames(
         "ink:font-default",
+        /**
+         * It would be tempting to put those in a string template, but then Tailwind won't be able to detect the classes here
+         * and won't include them in the production build until we actually use them somewhere.
+         **/
         variantClassNames(variant, {
           h1: "ink:text-h1",
           h2: "ink:text-h2",
           h3: "ink:text-h3",
           h4: "ink:text-h4",
           "body-1": "ink:text-body-1",
-          "body-2": "ink:text-body-2",
-          "body-3": "ink:text-body-3",
-          caption: "ink:text-caption",
+          "body-2-regular": "ink:text-body-2-regular",
+          "body-2-bold": "ink:text-body-2-bold",
+          "body-3-regular": "ink:text-body-3-regular",
+          "body-3-bold": "ink:text-body-3-bold",
+          "caption-1-regular": "ink:text-caption-1-regular",
+          "caption-1-bold": "ink:text-caption-1-bold",
           "caption-2": "ink:text-caption-2",
         }),
         className

src/components/Wallet/ConnectWallet.tsx

@@ -77,12 +77,12 @@ const ConnectedWalletSection = ({ address }: { address: Address }) => {
   return (
     <>
       {(isLoading || isSuccess) && (
-        <div className="ink:text-body-2 ink:font-medium ink:p-1.5 ink:bg-background-container ink:rounded-md ink:flex ink:gap-1.5 ink:font-default">
+        <div className="ink:text-body-2-bold ink:p-1.5 ink:bg-background-container ink:rounded-md ink:flex ink:gap-1.5 ink:font-default">
           <div className="ink:flex ink:flex-col ink:flex-1">
-            <div className="ink:text-text-muted ink:text-caption ink:font-bold">
+            <div className="ink:text-text-muted ink:text-caption-1-bold">
               Balance
             </div>
-            <div className="ink:text-h4 ink:font-bold ink:text-text-default">
+            <div className="ink:text-h4 ink:text-text-default">
               {isSuccess ? `${balance.value} ${balance.symbol}` : "..."}
             </div>
           </div>

src/tailwind.css

@@ -89,30 +89,51 @@
   --text-*: initial;
   --text-h1: 72px;
   --text-h1--line-height: 72px;
+  --text-h1--font-weight: 400;
 
   --text-h2: 32px;
   --text-h2--line-height: 36px;
+  --text-h2--font-weight: 700;
 
   --text-h3: 24px;
   --text-h3--line-height: 28px;
+  --text-h3--font-weight: 700;
 
   --text-h4: 20px;
   --text-h4--line-height: 24px;
+  --text-h4--font-weight: 700;
 
   --text-body-1: 18px;
   --text-body-1--line-height: 24px;
+  --text-body-1--font-weight: 400;
 
-  --text-body-2: 16px;
-  --text-body-2--line-height: 20px;
+  --text-body-2-regular: 16px;
+  --text-body-2-regular--line-height: 20px;
+  --text-body-2-regular--font-weight: 400;
 
-  --text-body-3: 14px;
-  --text-body-3--line-height: 18px;
+  --text-body-2-bold: 16px;
+  --text-body-2-bold--line-height: 20px;
+  --text-body-2-bold--font-weight: 700;
 
-  --text-caption: 12px;
-  --text-caption--line-height: 16px;
+  --text-body-3-regular: 14px;
+  --text-body-3-regular--line-height: 18px;
+  --text-body-3-regular--font-weight: 400;
+
+  --text-body-3-bold: 14px;
+  --text-body-3-bold--line-height: 18px;
+  --text-body-3-bold--font-weight: 700;
+
+  --text-caption-1-regular: 12px;
+  --text-caption-1-regular--line-height: 16px;
+  --text-caption-1-regular--font-weight: 400;
+
+  --text-caption-1-bold: 12px;
+  --text-caption-1-bold--line-height: 16px;
+  --text-caption-1-bold--font-weight: 700;
 
   --text-caption-2: 11px;
   --text-caption-2--line-height: 16px;
+  --text-caption-2--font-weight: 400;
 
   /* Spacing */
   --spacing-*: initial;

src/util/classes.ts

@@ -44,9 +44,12 @@ const customTwMerge = extendTailwindMerge({
         "text-h3",
         "text-h4",
         "text-body-1",
-        "text-body-2",
-        "text-body-3",
-        "text-caption",
+        "text-body-2-regular",
+        "text-body-2-bold",
+        "text-body-3-regular",
+        "text-body-3-bold",
+        "text-caption-1-regular",
+        "text-caption-1-bold",
         "text-caption-2",
       ],
       "text-color": colors.map((color) => `text-${color}`),