Update font stack for better system compatibility

packages/app-elements/src/locales/en.ts

@@ -217,12 +217,11 @@ const resources = {
   }
 }
 
-type IsStringLiteral<T> =
-  "I am a literal type" extends NonNullable<T>
-    ? false // Handle `string` specifically
-    : NonNullable<T> extends Exclude<Primitive, string>
-      ? false // Handle `Primitive` specifically
-      : true // It's a string literal
+type IsStringLiteral<T> = "I am a literal type" extends NonNullable<T>
+  ? false // Handle `string` specifically
+  : NonNullable<T> extends Exclude<Primitive, string>
+    ? false // Handle `Primitive` specifically
+    : true // It's a string literal
 
 const en = {
   common: {

packages/app-elements/src/styles/global.css

@@ -130,13 +130,13 @@
   --color-pink: #fe84ba;
 
   --font-*: initial;
-  --font-sans: Manrope, ui-sans-serif, sans-serif;
-  --font-mono: Roboto Mono, ui-monospace, Menlo, monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --font-mono: "Roboto Mono", system-ui;
 
   --text-*: initial;
   --text-2xs: 0.688rem;
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
+  --text-xs: 0.813rem;
+  --text-sm: 0.938rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
   --text-xl: 1.25rem;
@@ -148,7 +148,7 @@
   --text-6xl: 4rem;
   --text-8xl: 6rem;
   --text-10xl: 8rem;
-  --text-title: 2rem;
+  --text-title: 1.75rem;
 
   --shadow-hover: 0 0 0 1px #101111;
   --shadow-focus: 0 0 0 2px #101111;
@@ -160,6 +160,7 @@
 
   --object-position-out-of-bounds: -99999px 99999px;
 
+  --font-weight-semibold: 550;
   --font-weight-inherit: inherit;
 
   --animate-slide-in-right: slide-in-right 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
@@ -219,7 +220,7 @@
   }
 
   body {
-    @apply text-gray-800 antialiased font-medium;
+    @apply text-gray-800 antialiased;
   }
 
   input,

packages/app-elements/src/ui/atoms/Badge/Badge.tsx

@@ -24,7 +24,7 @@ export const Badge: React.FC<BadgeProps> = ({
       {...rest}
       className={cn([
         className,
-        "text-xs font-bold py-[3px] px-2 rounded inline-block",
+        "text-xs font-semibold py-[3px] px-2 rounded inline-block",
         variantCss[variant],
       ])}
     >

packages/app-elements/src/ui/atoms/ButtonFilter.tsx

@@ -21,7 +21,7 @@ function ButtonFilter({
   return (
     <div
       className={cn(
-        "flex flex-nowrap text-sm text-gray-500 transition duration-300 ease-in-out",
+        "flex flex-nowrap text-xs text-gray-500 transition duration-300 ease-in-out",
         "hover:bg-gray-200 bg-gray-100 rounded",
         className,
       )}
@@ -32,8 +32,8 @@ function ButtonFilter({
         data-testid="ButtonFilter-main"
         onClick={onClick}
         className={cn(
-          "font-bold",
-          "flex items-center gap-2",
+          "font-semibold",
+          "flex items-center gap-1",
           "pl-4 py-[10px]",
           {
             "pr-4": onRemoveRequest == null,
@@ -44,7 +44,7 @@ function ButtonFilter({
         {icon != null ? (
           <StatusIcon
             name={icon}
-            className="px-0.5 text-base"
+            className="px-0.5 text-sm"
             data-testid="ButtonFilter-icon"
           />
         ) : null}

packages/app-elements/src/ui/atoms/Card.tsx

@@ -63,7 +63,7 @@ export const Card = withSkeletonTemplate<CardProps>(
           className,
           "border border-solid rounded-md",
           "text-left", // reset <button>
-          "text-inherit active:text-inherit hover:text-inherit font-inherit", // reset <a>
+          "text-inherit active:text-inherit hover:text-inherit text-[14px] font-inherit", // reset <a>
           {
             "overflow-hidden": overflow === "hidden",
             "border-gray-200 bg-white": backgroundColor == null,

packages/app-elements/src/ui/atoms/CodeBlock.tsx

@@ -45,7 +45,7 @@ export const CodeBlock = withSkeletonTemplate<CodeBlockProps>(
       <InputWrapper {...rest} label={label} hint={hint}>
         <div className="flex group w-full rounded bg-gray-50 in-[.overlay-container]:bg-gray-200">
           <div
-            className="flex flex-col w-full px-4 py-2.5 text-teal text-sm font-mono font-medium marker:font-bold border-none break-all"
+            className="flex flex-col w-full px-4 py-2.5 text-teal text-[14px] font-mono marker:font-bold border-none break-all"
             data-testid="codeblock-content"
           >
             {isLoading === true

packages/app-elements/src/ui/atoms/CopyToClipboard.tsx

@@ -77,7 +77,7 @@ export const CopyToClipboard: React.FC<CopyToClipboardProps> = ({
   return (
     <div
       className={cn(
-        "break-normal overflow-hidden font-semibold flex justify-between items-center gap-3 border-b border-gray-100 last:border-b-0",
+        "break-normal overflow-hidden font-medium text-sm flex justify-between items-center gap-3 border-b border-gray-100 last:border-b-0",
         className,
       )}
       {...rest}

packages/app-elements/src/ui/atoms/EmptyState.tsx

@@ -28,12 +28,10 @@ function EmptyState({
     >
       <div className="flex p-6 md:p-14! relative">
         <div className="flex-1 z-10">
-          <h4 className="text-black font-semibold text-2xl mb-4">{title}</h4>
+          <h4 className="text-black font-medium text-2xl mb-4">{title}</h4>
 
           {description != null ? (
-            <div className="font-medium text-gray-500 text-lg">
-              {description}
-            </div>
+            <div className="text-gray-500 text-lg">{description}</div>
           ) : null}
 
           {action != null ? <div className="mt-14">{action}</div> : null}

packages/app-elements/src/ui/atoms/Hint.tsx

@@ -15,9 +15,9 @@ export function Hint({
   ...rest
 }: HintProps): JSX.Element {
   return (
-    <div className={cn("flex gap-2 items-center", className)} {...rest}>
-      {icon != null && <Icon name={icon} size={24} />}
-      <div className="text-sm font-medium text-gray-500">{children}</div>
+    <div className={cn("flex gap-1 items-center", className)} {...rest}>
+      {icon != null && <Icon name={icon} size={20} />}
+      <div className="text-xs text-gray-500">{children}</div>
     </div>
   )
 }

packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx

@@ -84,7 +84,9 @@ const PageHeading = withSkeletonTemplate<PageHeadingProps>(
               }}
             >
               <Icon name={navigationButton.icon ?? "arrowLeft"} size={24} />{" "}
-              <Text weight="semibold">{navigationButton.label}</Text>
+              <Text weight="medium" size="small">
+                {navigationButton.label}
+              </Text>
             </button>
             {toolbar != null ? <PageHeadingToolbar {...toolbar} /> : null}
           </div>

packages/app-elements/src/ui/atoms/Pagination.tsx

@@ -141,9 +141,10 @@ function PaginationButton({
     <button
       {...props}
       className={cn([
-        "text-sm font-medium rounded w-[46px] h-[38px] flex items-center justify-center transition ease-in duration-200 hover:bg-gray-50",
+        "text-[14px] rounded w-[46px] h-[38px] flex items-center justify-center transition ease-in duration-200 hover:bg-gray-50",
         {
-          "border-2 border-black text-black hover:bg-white": isActive,
+          "border-2 border-black text-black hover:bg-white font-medium":
+            isActive,
           "border border-gray-100 text-gray-500": !isActive,
         },
       ])}

packages/app-elements/src/ui/atoms/Progress.tsx

@@ -51,7 +51,7 @@ export const Progress: React.FC<ProgressProps> = ({
       </progress>
 
       {value != null && (
-        <span className="flex-nowrap text-gray-400 text-xs font-extrabold relative">
+        <span className="flex-nowrap text-gray-400 text-[11px] font-bold relative">
           {displayMode === "fraction" ? (
             <>
               <span className="absolute right-0">

packages/app-elements/src/ui/atoms/Section.tsx

@@ -44,17 +44,20 @@ export const Section = withSkeletonTemplate<SectionProps>(
       >
         {(title != null || actionButton != null) && (
           <header
-            className={cn("border-b pb-4 flex justify-between items-center", {
-              "border-gray-100": border == null,
-              "border-transparent": border === "none",
-            })}
+            className={cn(
+              "font-semibold border-b pb-4 flex justify-between items-center",
+              {
+                "border-gray-100": border == null,
+                "border-transparent": border === "none",
+              },
+            )}
           >
             {title != null && (
               <h2
                 className={cn({
                   // titleSize
-                  "text-gray-600 font-medium": titleSize === "small",
-                  "text-lg font-semibold": titleSize === "normal",
+                  "text-gray-600": titleSize === "small",
+                  "text-lg": titleSize === "normal",
                 })}
               >
                 {title}

packages/app-elements/src/ui/atoms/Steps.tsx

@@ -58,9 +58,9 @@ export const Steps: React.FC<StepsProps> = ({ steps }) => {
           <li
             key={step.label}
             className={cn("relative", {
-              "text-gray-400 font-semibold": activePosition === "before",
-              "text-black font-bold": activePosition === "active",
-              "text-gray-300 font-semibold": activePosition === "after",
+              "text-gray-400 font-medium": activePosition === "before",
+              "text-black font-semibold": activePosition === "active",
+              "text-gray-300 font-medium": activePosition === "after",
             })}
           >
             <div

packages/app-elements/src/ui/atoms/Tabs.tsx

@@ -170,9 +170,9 @@ function TabNav({
     <div
       id={id}
       className={cn(
-        "text-center pb-4 leading-6 cursor-pointer font-medium transition-all duration-300 -mb-[2px]",
+        "text-center pb-4 leading-6 cursor-pointer transition-all duration-300 -mb-[2px]",
         {
-          "border-b-black border-b-2 text-black": isActive,
+          "border-b-black border-b-2 text-black font-semibold": isActive,
           "border-b-transparent border-b-2 text-gray-500": !isActive,
         },
       )}

packages/app-elements/src/ui/atoms/Tooltip.tsx

@@ -45,7 +45,16 @@ export interface TooltipProps {
  */
 export const Tooltip = forwardRef<TooltipRefProps, TooltipProps>(
   (
-    { label, content, direction = "top", minWidth = false, id, className },
+    {
+      label,
+      content,
+      direction = "top",
+      minWidth = false,
+      id = `${getSanitizedInnerText(label)}-${getSanitizedInnerText(
+        content,
+      )}-${direction}`,
+      className,
+    },
     ref,
   ): JSX.Element => {
     const generatedId = useId()
@@ -71,13 +80,10 @@ export const Tooltip = forwardRef<TooltipRefProps, TooltipProps>(
           // We are using our own styles, by applying tailwind classes
           // https://react-tooltip.com/docs/examples/styling#base-styles
           disableStyleInjection
-          className={cn(
-            "rounded bg-black text-white px-4 py-3 text-sm font-semibold w-max wrap-anywhere",
-            {
-              "max-w-[280px]": !minWidth,
-              "min-w-[280px]": minWidth,
-            },
-          )}
+          className={cn("rounded bg-black text-white px-4 py-3 text-sm w-max", {
+            "max-w-[280px]": !minWidth,
+            "min-w-[280px]": minWidth,
+          })}
           classNameArrow={cn("w-2 h-2", {
             "rotate-45": direction.includes("top"),
             "rotate-225": direction.includes("bottom"),
@@ -91,3 +97,7 @@ export const Tooltip = forwardRef<TooltipRefProps, TooltipProps>(
 )
 
 Tooltip.displayName = "Tooltip"
+
+function getSanitizedInnerText(node: ReactNode): string {
+  return getInnerText(node).replace(/\W+/g, "").toLowerCase()
+}

packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Steps > Should be rendered 1`] = `
     class="flex justify-between text-xs w-full items-center rounded h-2 mb-8 bg-linear-to-r from-gray-100 from-50% to-primary to-50% bg-size-[200%]"
   >
     <li
-      class="relative text-gray-300 font-semibold"
+      class="relative text-gray-300 font-medium"
     >
       <div
         class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"
@@ -18,7 +18,7 @@ exports[`Steps > Should be rendered 1`] = `
       </div>
     </li>
     <li
-      class="relative text-gray-300 font-semibold"
+      class="relative text-gray-300 font-medium"
     >
       <div
         class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"
@@ -30,7 +30,7 @@ exports[`Steps > Should be rendered 1`] = `
       </div>
     </li>
     <li
-      class="relative text-gray-300 font-semibold"
+      class="relative text-gray-300 font-medium"
     >
       <div
         class="w-6 h-6 rounded-full flex justify-center items-center bg-gray-100"

packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx

@@ -33,7 +33,7 @@ describe("Dropdown", () => {
           <button
             aria-expanded="false"
             aria-haspopup="true"
-            class="rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] text-sm button font-bold bg-black border border-black text-white hover:opacity-80"
+            class="font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] text-sm button bg-black border border-black text-white hover:opacity-80"
           >
             Open dropdown
           </button>

packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx

@@ -61,7 +61,7 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-full bg-black text-white! py-1.5 pl-4 text-[15px] font-semibold flex items-center focus:outline-hidden!",
+          "w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
             "min-w-[250px] pr-6": info != null,

packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! rounded whitespace-nowrap leading-5 inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium rounded whitespace-nowrap leading-5 inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -53,7 +53,7 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! rounded whitespace-nowrap leading-5 inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium rounded whitespace-nowrap leading-5 inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -98,7 +98,7 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! rounded whitespace-nowrap leading-5 inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium rounded whitespace-nowrap leading-5 inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -143,7 +143,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! rounded whitespace-nowrap leading-5 inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium rounded whitespace-nowrap leading-5 inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -174,7 +174,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         >
           <button
             aria-label="Payments"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-[15px] font-semibold flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
           >
             <div
               class="mr-2"
@@ -200,7 +200,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-[15px] font-semibold flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
           >
             <div
               class="mr-2"
@@ -225,7 +225,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </div>
           <button
             aria-label="Delete"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-[15px] font-semibold flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
           >
             <div
               class="mr-2"