From aaab63d4e128cc311f3b3b7bd8418ebf442da4cb Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Thu, 30 Oct 2025 17:52:15 +0100
Subject: [PATCH 1/5] feat(styles): update font stack for better system
 compatibility

---
 packages/app-elements/src/styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index a904d2e37..39fa7ca28 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -130,8 +130,8 @@
   --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;

From 0c45e6e4acd647b79f2ff8df46428bd08d96dab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berardo=20Mate=CC=80?= <berardo@commercelayer.io>
Date: Tue, 18 Nov 2025 10:14:12 +0100
Subject: [PATCH 2/5] fix: new font tweaks

---
 packages/app-elements/src/locales/en.ts       | 11 ++++----
 packages/app-elements/src/styles/global.css   |  8 +++---
 .../app-elements/src/ui/atoms/Badge/Badge.tsx |  2 +-
 .../src/ui/atoms/ButtonFilter.tsx             |  8 +++---
 packages/app-elements/src/ui/atoms/Card.tsx   |  2 +-
 .../app-elements/src/ui/atoms/CodeBlock.tsx   |  2 +-
 .../src/ui/atoms/CopyToClipboard.tsx          |  2 +-
 .../app-elements/src/ui/atoms/EmptyState.tsx  |  6 ++---
 packages/app-elements/src/ui/atoms/Hint.tsx   |  6 ++---
 .../src/ui/atoms/PageHeading/PageHeading.tsx  |  4 ++-
 .../app-elements/src/ui/atoms/Pagination.tsx  |  5 ++--
 .../app-elements/src/ui/atoms/Progress.tsx    |  2 +-
 .../app-elements/src/ui/atoms/Section.tsx     | 15 ++++++-----
 packages/app-elements/src/ui/atoms/Steps.tsx  |  6 ++---
 packages/app-elements/src/ui/atoms/Tabs.tsx   |  4 +--
 .../app-elements/src/ui/atoms/Tooltip.tsx     | 26 +++++++++++++------
 .../ui/composite/Dropdown/DropdownItem.tsx    |  2 +-
 .../src/ui/composite/ListDetailsItem.tsx      |  4 +--
 .../app-elements/src/ui/forms/Input/Input.tsx |  4 +--
 .../ui/forms/InputCheckbox/InputCheckbox.tsx  |  2 +-
 .../ui/forms/InputCurrency/InputCurrency.tsx  |  4 +--
 .../ui/forms/InputDate/InputDateComponent.tsx |  2 +-
 .../src/ui/forms/InputFeedback.tsx            |  2 +-
 .../app-elements/src/ui/forms/InputFile.tsx   |  2 +-
 .../ui/forms/InputResourceGroup/FullList.tsx  |  2 +-
 .../ui/forms/InputTextArea/InputTextArea.tsx  |  2 +-
 .../InputToggleButton/InputToggleButton.tsx   |  2 +-
 packages/app-elements/src/ui/forms/Label.tsx  |  2 +-
 packages/app-elements/src/ui/forms/Legend.tsx |  2 +-
 .../internals/InteractiveElement.className.ts | 17 ++++++------
 .../docs/src/stories/atoms/Stack.stories.tsx  |  2 +-
 .../stories/composite/ListItem.stories.tsx    |  4 +--
 .../forms/ui/InputCheckboxGroup.stories.tsx   | 22 ++++++++--------
 33 files changed, 99 insertions(+), 87 deletions(-)

diff --git a/packages/app-elements/src/locales/en.ts b/packages/app-elements/src/locales/en.ts
index 9ab23c5c5..0a0995051 100644
--- a/packages/app-elements/src/locales/en.ts
+++ b/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: {
diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index 39fa7ca28..f626fbdcd 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -135,8 +135,8 @@
 
   --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;
@@ -219,7 +219,7 @@
   }
   
   body {
-    @apply text-gray-800 antialiased font-medium;
+    @apply text-gray-800 antialiased;
   }
   
   input,
diff --git a/packages/app-elements/src/ui/atoms/Badge/Badge.tsx b/packages/app-elements/src/ui/atoms/Badge/Badge.tsx
index 2dbe4c229..bff7cda8c 100644
--- a/packages/app-elements/src/ui/atoms/Badge/Badge.tsx
+++ b/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],
       ])}
     >
diff --git a/packages/app-elements/src/ui/atoms/ButtonFilter.tsx b/packages/app-elements/src/ui/atoms/ButtonFilter.tsx
index fa64ab032..fcf6f825f 100644
--- a/packages/app-elements/src/ui/atoms/ButtonFilter.tsx
+++ b/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}
diff --git a/packages/app-elements/src/ui/atoms/Card.tsx b/packages/app-elements/src/ui/atoms/Card.tsx
index f222ccb5a..0935b212e 100644
--- a/packages/app-elements/src/ui/atoms/Card.tsx
+++ b/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,
diff --git a/packages/app-elements/src/ui/atoms/CodeBlock.tsx b/packages/app-elements/src/ui/atoms/CodeBlock.tsx
index 596b85d7e..2c3476dc2 100644
--- a/packages/app-elements/src/ui/atoms/CodeBlock.tsx
+++ b/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
diff --git a/packages/app-elements/src/ui/atoms/CopyToClipboard.tsx b/packages/app-elements/src/ui/atoms/CopyToClipboard.tsx
index e91e010ee..b3fd1f223 100644
--- a/packages/app-elements/src/ui/atoms/CopyToClipboard.tsx
+++ b/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}
diff --git a/packages/app-elements/src/ui/atoms/EmptyState.tsx b/packages/app-elements/src/ui/atoms/EmptyState.tsx
index 3a2e3b986..a5f878491 100644
--- a/packages/app-elements/src/ui/atoms/EmptyState.tsx
+++ b/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}
diff --git a/packages/app-elements/src/ui/atoms/Hint.tsx b/packages/app-elements/src/ui/atoms/Hint.tsx
index 1d4ec7166..c135275ba 100644
--- a/packages/app-elements/src/ui/atoms/Hint.tsx
+++ b/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>
   )
 }
diff --git a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx b/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
index a021c2fb8..56af0ac97 100644
--- a/packages/app-elements/src/ui/atoms/PageHeading/PageHeading.tsx
+++ b/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>
diff --git a/packages/app-elements/src/ui/atoms/Pagination.tsx b/packages/app-elements/src/ui/atoms/Pagination.tsx
index 851cbc803..38416ae6a 100644
--- a/packages/app-elements/src/ui/atoms/Pagination.tsx
+++ b/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,
         },
       ])}
diff --git a/packages/app-elements/src/ui/atoms/Progress.tsx b/packages/app-elements/src/ui/atoms/Progress.tsx
index 0d36fcd54..fb3c7cfbb 100644
--- a/packages/app-elements/src/ui/atoms/Progress.tsx
+++ b/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">
diff --git a/packages/app-elements/src/ui/atoms/Section.tsx b/packages/app-elements/src/ui/atoms/Section.tsx
index b6cff97de..170547b87 100644
--- a/packages/app-elements/src/ui/atoms/Section.tsx
+++ b/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}
diff --git a/packages/app-elements/src/ui/atoms/Steps.tsx b/packages/app-elements/src/ui/atoms/Steps.tsx
index cb87d828c..fa2db7394 100644
--- a/packages/app-elements/src/ui/atoms/Steps.tsx
+++ b/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
diff --git a/packages/app-elements/src/ui/atoms/Tabs.tsx b/packages/app-elements/src/ui/atoms/Tabs.tsx
index 58c4a3623..ad55250ee 100644
--- a/packages/app-elements/src/ui/atoms/Tabs.tsx
+++ b/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,
         },
       )}
diff --git a/packages/app-elements/src/ui/atoms/Tooltip.tsx b/packages/app-elements/src/ui/atoms/Tooltip.tsx
index 4a4fca65e..d0a3a082c 100644
--- a/packages/app-elements/src/ui/atoms/Tooltip.tsx
+++ b/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()
+}
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
index 4215a5db3..fe6eb6d13 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
+++ b/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,
diff --git a/packages/app-elements/src/ui/composite/ListDetailsItem.tsx b/packages/app-elements/src/ui/composite/ListDetailsItem.tsx
index 27c8ecad5..c3ec02752 100644
--- a/packages/app-elements/src/ui/composite/ListDetailsItem.tsx
+++ b/packages/app-elements/src/ui/composite/ListDetailsItem.tsx
@@ -60,13 +60,13 @@ export function ListDetailsItem({
       )}
       {...rest}
     >
-      <div className="text-gray-500 font-medium flex-none w-full md:py-2! min-w-0">
+      <div className="text-gray-500 text-sm font-medium flex-none w-full md:py-2! min-w-0">
         {label}
       </div>
       <div
         data-testid={`list-details-item-${label}-value`}
         // keep `min-w-0` to avoid grid overflow when grid-item content is too long
-        className={classNames("font-semibold min-w-0", {
+        className={classNames("font-medium min-w-0", {
           "py-2": !childrenHaveInternalPadding,
           "md:text-right": childrenAlign === "right",
           truncate: typeof children === "string",
diff --git a/packages/app-elements/src/ui/forms/Input/Input.tsx b/packages/app-elements/src/ui/forms/Input/Input.tsx
index b1aa4e61a..a2f97fb6b 100644
--- a/packages/app-elements/src/ui/forms/Input/Input.tsx
+++ b/packages/app-elements/src/ui/forms/Input/Input.tsx
@@ -47,7 +47,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         id={rest.id ?? rest.name}
         className={cn(
           className,
-          "block w-full px-4 py-3 text-sm leading-5 font-medium",
+          "block w-full px-4 py-2.5 font-normal",
           "rounded outline-0",
           {
             "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none pr-1!":
@@ -78,7 +78,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {suffix != null && (
             <Text
               size="small"
-              weight="semibold"
+              weight="medium"
               className="suffix shrink-0 border-l-0! border-y border-r h-[44px] border-gray-200 -left-[4px] pl-2 pr-3 flex items-center bg-white relative rounded-e"
             >
               {suffix}
diff --git a/packages/app-elements/src/ui/forms/InputCheckbox/InputCheckbox.tsx b/packages/app-elements/src/ui/forms/InputCheckbox/InputCheckbox.tsx
index b95b662f9..c0a1fcac4 100644
--- a/packages/app-elements/src/ui/forms/InputCheckbox/InputCheckbox.tsx
+++ b/packages/app-elements/src/ui/forms/InputCheckbox/InputCheckbox.tsx
@@ -89,7 +89,7 @@ export const InputCheckbox = forwardRef<HTMLInputElement, InputCheckboxProps>(
                     {icon}
                   </div>
                 ) : null}
-                <div className="flex-1">{children}</div>
+                <div className="flex-1 text-sm">{children}</div>
               </div>
             ) : null}
           </label>
diff --git a/packages/app-elements/src/ui/forms/InputCurrency/InputCurrency.tsx b/packages/app-elements/src/ui/forms/InputCurrency/InputCurrency.tsx
index b24a42129..8ed3ce709 100644
--- a/packages/app-elements/src/ui/forms/InputCurrency/InputCurrency.tsx
+++ b/packages/app-elements/src/ui/forms/InputCurrency/InputCurrency.tsx
@@ -127,7 +127,7 @@ export const InputCurrency = forwardRef<HTMLInputElement, InputCurrencyProps>(
           {hideCurrencySymbol === true ? null : (
             <div
               data-testid="inputCurrency-symbol"
-              className="absolute left-4 top-1/2 transform -translate-y-1/2 text-sm"
+              className="absolute left-4 top-1/2 transform -translate-y-1/2 font-semibold"
             >
               {currency.symbol}
             </div>
@@ -138,7 +138,7 @@ export const InputCurrency = forwardRef<HTMLInputElement, InputCurrencyProps>(
             id={rest.id ?? rest.name}
             className={cn(
               className,
-              "block w-full pr-4 py-3 text-sm leading-5 font-medium",
+              "block w-full pr-4 py-2.5",
               {
                 "pl-4": hideCurrencySymbol === true,
                 "pl-8": hideCurrencySymbol !== true,
diff --git a/packages/app-elements/src/ui/forms/InputDate/InputDateComponent.tsx b/packages/app-elements/src/ui/forms/InputDate/InputDateComponent.tsx
index 757eea8f6..38b6031da 100644
--- a/packages/app-elements/src/ui/forms/InputDate/InputDateComponent.tsx
+++ b/packages/app-elements/src/ui/forms/InputDate/InputDateComponent.tsx
@@ -118,7 +118,7 @@ export const InputDateComponent = forwardRef<DatePicker, InputDateProps>(
             minDate={minDate}
             openToDate={selectedDateInTimezone ?? minDate}
             className={cn(
-              "block w-full px-4 py-3 placeholder:text-gray-400 text-sm leading-5 font-medium",
+              "block w-full px-4 py-2.5 placeholder:text-gray-400 font-normal",
               "rounded outline-0",
               "transition duration-500 ease-in-out focus:outline-0 focus:border-primary-light",
               getFeedbackStyle(feedback),
diff --git a/packages/app-elements/src/ui/forms/InputFeedback.tsx b/packages/app-elements/src/ui/forms/InputFeedback.tsx
index beeb33d07..db1baba5b 100644
--- a/packages/app-elements/src/ui/forms/InputFeedback.tsx
+++ b/packages/app-elements/src/ui/forms/InputFeedback.tsx
@@ -42,7 +42,7 @@ export function InputFeedback({
       {...rest}
     >
       {icons[variant]}
-      <div className="text-sm font-bold">{message}</div>
+      <div className="text-[14px] font-semibold">{message}</div>
     </div>
   )
 }
diff --git a/packages/app-elements/src/ui/forms/InputFile.tsx b/packages/app-elements/src/ui/forms/InputFile.tsx
index 5a16664b5..fa7012539 100644
--- a/packages/app-elements/src/ui/forms/InputFile.tsx
+++ b/packages/app-elements/src/ui/forms/InputFile.tsx
@@ -54,7 +54,7 @@ export const InputFile = forwardRef<HTMLInputElement, InputFileProps>(
           />
           <UploadSimpleIcon className="mb-2" size={32} />
           <div className="font-semibold text-sm text-gray-800">{title}</div>
-          <div className="text-sm">
+          <div className="text-sm font-normal">
             {t("common.forms.drag_here_or")}{" "}
             <Button variant="link">{t("common.forms.browse_files")}</Button>
           </div>
diff --git a/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx b/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx
index bae3bc5a1..bb3d0b722 100644
--- a/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx
+++ b/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx
@@ -145,7 +145,7 @@ export function FullList({
                   history.back()
                 }
               }}
-              className="text-primary font-bold rounded px-1 shadow-none outline-0! border-0! ring-0! focus:shadow-focus"
+              className="text-primary font-semibold rounded px-1 shadow-none outline-0! border-0! ring-0! focus:shadow-focus"
             >
               {t("common.cancel")}
             </button>
diff --git a/packages/app-elements/src/ui/forms/InputTextArea/InputTextArea.tsx b/packages/app-elements/src/ui/forms/InputTextArea/InputTextArea.tsx
index 197b95a7b..ec7bf1326 100644
--- a/packages/app-elements/src/ui/forms/InputTextArea/InputTextArea.tsx
+++ b/packages/app-elements/src/ui/forms/InputTextArea/InputTextArea.tsx
@@ -27,7 +27,7 @@ export const InputTextArea = forwardRef<
         id={rest.id ?? rest.name}
         className={cn(
           className,
-          "px-4 py-3 w-full bg-white rounded outline-0 text-sm leading-5",
+          "px-4 py-2.5 w-full bg-white rounded outline-0 font-normal",
           {
             "h-52": rest.rows == null,
           },
diff --git a/packages/app-elements/src/ui/forms/InputToggleButton/InputToggleButton.tsx b/packages/app-elements/src/ui/forms/InputToggleButton/InputToggleButton.tsx
index 4f0fa0459..984e59c3d 100644
--- a/packages/app-elements/src/ui/forms/InputToggleButton/InputToggleButton.tsx
+++ b/packages/app-elements/src/ui/forms/InputToggleButton/InputToggleButton.tsx
@@ -22,7 +22,7 @@ function ToggleItem({
   return (
     <label
       className={cn(
-        "border-none rounded px-4 py-2 leading-5 cursor-pointer font-bold text-sm select-none hover:opacity-80",
+        "border-none rounded px-4 py-2 leading-6 cursor-pointer font-semibold text-xs select-none hover:opacity-80",
         {
           "opacity-50 pointer-events-none touch-none": isDisabled,
           "focus-within:ring-0 focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary":
diff --git a/packages/app-elements/src/ui/forms/Label.tsx b/packages/app-elements/src/ui/forms/Label.tsx
index 1130a2b13..9f92fd9d7 100644
--- a/packages/app-elements/src/ui/forms/Label.tsx
+++ b/packages/app-elements/src/ui/forms/Label.tsx
@@ -19,7 +19,7 @@ export function Label({
     // biome-ignore lint/a11y/noLabelWithoutControl: I need to use a label without an associated control
     <label
       {...rest}
-      className={cn("block text-sm font-semibold leading-5", className, {
+      className={cn("block text-sm font-semibold leading-6", className, {
         "mb-2": gap,
       })}
     >
diff --git a/packages/app-elements/src/ui/forms/Legend.tsx b/packages/app-elements/src/ui/forms/Legend.tsx
index 0f02cf92d..5b6134f8f 100644
--- a/packages/app-elements/src/ui/forms/Legend.tsx
+++ b/packages/app-elements/src/ui/forms/Legend.tsx
@@ -19,7 +19,7 @@ export function Legend({
   return (
     <legend
       {...rest}
-      className={cn("block text-sm font-semibold leading-5", className, {
+      className={cn("block text-sm font-semibold leading-6", className, {
         "mb-2": gap,
       })}
     >
diff --git a/packages/app-elements/src/ui/internals/InteractiveElement.className.ts b/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
index 0cadc1f21..590b30af9 100644
--- a/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
+++ b/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
@@ -55,7 +55,7 @@ export function getInteractiveElementClassName({
     isSpecificReactComponent(childrenAsArray[0], [/^Icon$/])
 
   return cn([
-    `rounded whitespace-nowrap leading-5`,
+    `font-medium rounded whitespace-nowrap leading-5`,
     {
       "opacity-50 pointer-events-none touch-none": disabled,
       "w-full": fullWidth === true && variant !== "link",
@@ -114,17 +114,16 @@ function getVariantCss(
   }
 
   const mapping = {
-    primary:
-      "font-bold bg-black border border-black text-white hover:opacity-80",
+    primary: "bg-black border border-black text-white hover:opacity-80",
     secondary:
-      "font-semibold bg-white border border-black text-black hover:opacity-80 hover:bg-gray-50",
+      "bg-white border border-black text-black hover:opacity-80 hover:bg-gray-50",
     circle:
-      "font-semibold bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full",
-    danger: "font-bold bg-white border border-red text-red hover:bg-red/10",
-    link: "text-primary hover:text-primary-light border-primary-light cursor-pointer",
-    relationship: "font-bold text-primary border border-gray-300 border-dashed",
+      "bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full",
+    danger: "font-medium bg-white border border-red text-red hover:bg-red/10",
+    link: "font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer",
+    relationship: "text-primary border border-gray-300 border-dashed",
     input:
-      "form-input block w-full px-4! py-2.5! font-medium rounded outline-0 text-left! leading-6! text-gray-500",
+      "font-normal form-input block w-full px-4! py-2.5! rounded outline-0 text-left! leading-6! text-gray-500",
   } satisfies Record<NonNullable<InteractiveElementProps["variant"]>, string>
 
   return mapping[variant]
diff --git a/packages/docs/src/stories/atoms/Stack.stories.tsx b/packages/docs/src/stories/atoms/Stack.stories.tsx
index 6fabe1ea0..e10c67816 100644
--- a/packages/docs/src/stories/atoms/Stack.stories.tsx
+++ b/packages/docs/src/stories/atoms/Stack.stories.tsx
@@ -75,7 +75,7 @@ export const Addresses: StoryFn<typeof Stack> = (args) => (
   <Stack {...args}>
     <div>
       <Spacer bottom="2">
-        <Text tag="div" weight="bold">
+        <Text tag="div" weight="semibold">
           Shipping address
         </Text>
       </Spacer>
diff --git a/packages/docs/src/stories/composite/ListItem.stories.tsx b/packages/docs/src/stories/composite/ListItem.stories.tsx
index ee87b4e5f..6318846cd 100644
--- a/packages/docs/src/stories/composite/ListItem.stories.tsx
+++ b/packages/docs/src/stories/composite/ListItem.stories.tsx
@@ -34,10 +34,10 @@ const WithIconTemplate: StoryFn<typeof ListItem> = (args) => (
       <Text tag="div" weight="semibold">
         NY Store #19346524
       </Text>
-      <Text tag="div" weight="medium" size="small" variant="info">
+      <Text tag="div" weight="regular" size="small" variant="info">
         Placed · mjordan@nba.com · May 17
       </Text>
-      <Text tag="div" weight="bold" size="small" variant="warning">
+      <Text tag="div" weight="medium" size="small" variant="warning">
         Awaiting approval
       </Text>
     </div>
diff --git a/packages/docs/src/stories/forms/ui/InputCheckboxGroup.stories.tsx b/packages/docs/src/stories/forms/ui/InputCheckboxGroup.stories.tsx
index 931e1f044..5815fca93 100644
--- a/packages/docs/src/stories/forms/ui/InputCheckboxGroup.stories.tsx
+++ b/packages/docs/src/stories/forms/ui/InputCheckboxGroup.stories.tsx
@@ -44,7 +44,7 @@ Default.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Gray Baby Bib with Black Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -64,7 +64,7 @@ Default.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Black Baseball Hat with White Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -84,7 +84,7 @@ Default.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Black Unisex Lightweight Hoodie
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -129,7 +129,7 @@ WithQuantity.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Gray Baby Bib with Black Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -153,7 +153,7 @@ WithQuantity.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Black Baseball Hat with White Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -177,7 +177,7 @@ WithQuantity.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Black Unisex Lightweight Hoodie
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -194,7 +194,7 @@ WithQuantity.args = {
       value: "TOTEBAGLE7DDC7000000XXXX",
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Large Eco Tote Bag with Black Logo
           </Text>
         </div>
@@ -218,14 +218,14 @@ WithQuantity.args = {
       content: (
         <>
           <div>
-            <Text size="small" weight="bold">
+            <Text size="regular" weight="semibold">
               Express Easy
             </Text>
             <Text size="x-small" tag="div" variant="info" weight="medium">
               DHL Express
             </Text>
           </div>
-          <Text size="small" weight="bold" wrap="nowrap">
+          <Text size="regular" weight="semibold" wrap="nowrap">
             €37,61
           </Text>
         </>
@@ -262,7 +262,7 @@ WithCheckedElement.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Gray Baby Bib with Black Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">
@@ -287,7 +287,7 @@ WithCheckedElement.args = {
       ),
       content: (
         <div>
-          <Text size="small" tag="div" weight="bold">
+          <Text size="regular" tag="div" weight="semibold">
             Black Baseball Hat with White Logo
           </Text>
           <Text size="x-small" tag="div" variant="info">

From 1648e55f3fd5b3383156d96f41e93c39cc946b28 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Tue, 18 Nov 2025 10:25:25 +0100
Subject: [PATCH 3/5] style: run lint

---
 .../atoms/__snapshots__/Steps.test.tsx.snap   |  6 ++--
 .../ui/composite/Dropdown/Dropdown.test.tsx   |  8 ++---
 .../__snapshots__/Dropdown.test.tsx.snap      | 14 ++++-----
 .../__snapshots__/PageSkeleton.test.tsx.snap  |  6 ++--
 .../__snapshots__/index.test.tsx.snap         |  4 +--
 .../ResourceLineItems.test.tsx.snap           | 30 +++++++++----------
 6 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap b/packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap
index 04937fc33..38c12fbc8 100644
--- a/packages/app-elements/src/ui/atoms/__snapshots__/Steps.test.tsx.snap
+++ b/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"
diff --git a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
index 3f38a449f..d22104ed0 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
@@ -4,15 +4,15 @@ import { Dropdown, DropdownDivider, DropdownItem } from "#ui/composite/Dropdown"
 
 const items = (
   <>
-    <DropdownItem onClick={() => {}} icon="creditCard" label="Payments" />
+    <DropdownItem onClick={() => { }} icon="creditCard" label="Payments" />
     <DropdownItem
-      onClick={() => {}}
+      onClick={() => { }}
       icon="keep-space" // no icon, keep same gap
       label="Items"
     />
 
     <DropdownDivider />
-    <DropdownItem onClick={() => {}} icon="xCircle" label="Delete" />
+    <DropdownItem onClick={() => { }} icon="xCircle" label="Delete" />
   </>
 )
 
@@ -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-6 py-3 text-base button bg-black border border-black text-white hover:opacity-80"
           >
             Open dropdown
           </button>
diff --git a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 00befb8cb..28a0c33cf 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/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"
diff --git a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
index 7b02b055d..1c11a8c2f 100644
--- a/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/__snapshots__/PageSkeleton.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`PageSkeleton > Should be rendered 1`] = `
                   </svg>
                    
                   <span
-                    class="font-semibold wrap-anywhere"
+                    class="font-medium text-sm wrap-anywhere"
                   >
                     <span
                       class="select-none border-gray-50! pointer-events-none animate-pulse bg-gray-50! rounded text-transparent *:invisible object-out-of-bounds"
@@ -109,10 +109,10 @@ exports[`PageSkeleton > Should be rendered 1`] = `
               aria-label="Loading"
             >
               <header
-                class="border-b pb-4 flex justify-between items-center border-transparent"
+                class="font-semibold border-b pb-4 flex justify-between items-center border-transparent"
               >
                 <h2
-                  class="text-lg font-semibold"
+                  class="text-lg"
                 >
                   <span
                     class="select-none border-gray-50! pointer-events-none animate-pulse bg-gray-50! rounded text-transparent *:invisible object-out-of-bounds"
diff --git a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
index b2f802d1f..247c09fac 100644
--- a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
+++ b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
                 class="min-h-[49px] flex items-center"
               >
                 <button
-                  class="mx-4 rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] p-1! text-sm button font-semibold bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                  class="mx-4 font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-6 py-3 p-1! text-base button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
                 >
                   <svg
                     class="shrink-0"
@@ -45,7 +45,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
               class="grow flex justify-end"
             >
               <button
-                class="rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] p-1! text-sm button font-semibold bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                class="font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-6 py-3 p-1! text-base button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
               >
                 <svg
                   fill="currentColor"
diff --git a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
index 0ac586183..e68ba4525 100644
--- a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
+++ b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -156,7 +156,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
               >
                 <button
                   aria-label="common.swap"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -182,7 +182,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
                 >
                   <button
                     aria-label="common.remove"
-                    class="rounded whitespace-nowrap leading-5 opacity-50 pointer-events-none touch-none inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                    class="font-medium rounded whitespace-nowrap leading-5 opacity-50 pointer-events-none touch-none inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                     disabled=""
                   >
                     <svg
@@ -267,7 +267,7 @@ exports[`ResourceLineItems > should render 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -365,7 +365,7 @@ exports[`ResourceLineItems > should render the Footer prop when defined 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -484,7 +484,7 @@ exports[`ResourceLineItems > should render the InputSpinner and the trash icon w
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -594,7 +594,7 @@ exports[`ResourceLineItems > should render the InputSpinner and the trash icon w
               >
                 <button
                   aria-label="common.remove"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -677,7 +677,7 @@ exports[`ResourceLineItems > should render the bundle 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -830,7 +830,7 @@ exports[`ResourceLineItems > should render the list item options 1`] = `
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -1158,7 +1158,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -1268,7 +1268,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
               >
                 <button
                   aria-label="common.swap"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1289,7 +1289,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
                 </button>
                 <button
                   aria-label="common.remove"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1361,7 +1361,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
             class="mt-2"
           >
             <div
-              class="text-xs font-bold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
+              class="text-xs font-semibold py-[3px] px-2 rounded inline-block text-gray-500 bg-gray-50"
             >
               <div
                 class="flex items-center gap-1"
@@ -1527,7 +1527,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
               >
                 <button
                   aria-label="common.swap"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1548,7 +1548,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
                 </button>
                 <button
                   aria-label="common.remove"
-                  class="rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium rounded whitespace-nowrap leading-5 inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"

From 4d1ede93c611881d99673ef65e9b15b9c06fd1d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berardo=20Mate=CC=80?= <berardo@commercelayer.io>
Date: Fri, 28 Nov 2025 15:47:19 +0100
Subject: [PATCH 4/5] fix: font semibold weight fix

---
 packages/app-elements/src/styles/global.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index f626fbdcd..ca0f123d7 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -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;

From b4f953b8e320130ea60340532d927bedfa5ab100 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Thu, 18 Dec 2025 11:42:05 +0100
Subject: [PATCH 5/5] chore: run tests after rebase

---
 .../src/ui/composite/Dropdown/Dropdown.test.tsx           | 8 ++++----
 .../ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap | 4 ++--
 .../__snapshots__/ResourceLineItems.test.tsx.snap         | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
index d22104ed0..788a444b2 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
@@ -4,15 +4,15 @@ import { Dropdown, DropdownDivider, DropdownItem } from "#ui/composite/Dropdown"
 
 const items = (
   <>
-    <DropdownItem onClick={() => { }} icon="creditCard" label="Payments" />
+    <DropdownItem onClick={() => {}} icon="creditCard" label="Payments" />
     <DropdownItem
-      onClick={() => { }}
+      onClick={() => {}}
       icon="keep-space" // no icon, keep same gap
       label="Items"
     />
 
     <DropdownDivider />
-    <DropdownItem onClick={() => { }} icon="xCircle" label="Delete" />
+    <DropdownItem onClick={() => {}} icon="xCircle" label="Delete" />
   </>
 )
 
@@ -33,7 +33,7 @@ describe("Dropdown", () => {
           <button
             aria-expanded="false"
             aria-haspopup="true"
-            class="font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-6 py-3 text-base button 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>
diff --git a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
index 247c09fac..67f4c7b6d 100644
--- a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
+++ b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
                 class="min-h-[49px] flex items-center"
               >
                 <button
-                  class="mx-4 font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-6 py-3 p-1! text-base button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                  class="mx-4 font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] p-1! text-sm button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
                 >
                   <svg
                     class="shrink-0"
@@ -45,7 +45,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
               class="grow flex justify-end"
             >
               <button
-                class="font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-6 py-3 p-1! text-base button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                class="font-medium rounded whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-5 py-[11px] p-1! text-sm button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
               >
                 <svg
                   fill="currentColor"
diff --git a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
index e68ba4525..82ffc1bbf 100644
--- a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
+++ b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
@@ -178,7 +178,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
                 <span
                   aria-description="Can't remove the last item"
                   class="cursor-pointer flex items-center"
-                  data-tooltip-id="«r2»"
+                  data-tooltip-id="commonremove-cantremovethelastitem-top-end"
                 >
                   <button
                     aria-label="common.remove"