Squirclesssss 🟦🔵 (#22535)

packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx

@@ -10,7 +10,7 @@ const StyledContainer = styled.div<{ isCompact?: boolean }>`
   align-items: center;
   background: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.light};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   color: ${themeCssVariables.font.color.tertiary};
   display: flex;
   flex: 1;

packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx

@@ -51,7 +51,8 @@ const StyledMonthSeperator = styled.div`
 `;
 const StyledMonthSeperatorLine = styled.div`
   background: ${themeCssVariables.border.color.light};
-  border-radius: 50px;
+  border-radius: ${themeCssVariables.border.radius.pill};
+  corner-shape: round;
   flex: 1 0 0;
   height: 1px;
 `;

packages/twenty-front/src/modules/ai/components/AiChatScrollToBottomButton.tsx

@@ -13,6 +13,7 @@ const StyledScrollToBottomButton = styled.button<{ isVisible: boolean }>`
   bottom: ${themeCssVariables.spacing[3]};
   box-shadow: ${themeCssVariables.boxShadow.light};
   color: ${themeCssVariables.font.color.secondary};
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   height: 32px;

packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx

@@ -66,6 +66,7 @@ const StyledStatusBadge = styled.div<{
       : status === 'error'
         ? themeCssVariables.color.red
         : themeCssVariables.font.color.secondary};
+  corner-shape: round;
   display: flex;
   font-size: ${themeCssVariables.font.size.xs};
   font-weight: ${themeCssVariables.font.weight.medium};

packages/twenty-front/src/modules/applications/components/AppConnectionHeader.tsx

@@ -45,6 +45,7 @@ const StyledLinkIconContainer = styled.div`
   border-radius: ${themeCssVariables.border.radius.rounded};
   box-shadow: ${themeCssVariables.boxShadow.strong};
   color: ${themeCssVariables.font.color.primary};
+  corner-shape: round;
   display: flex;
   flex-shrink: 0;
   height: ${themeCssVariables.spacing[6]};

packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx

@@ -74,6 +74,7 @@ const StyledLinkButton = styled.button`
 const StyledDot = styled.div`
   background: ${themeCssVariables.font.color.light};
   border-radius: 50%;
+  corner-shape: round;
   height: 2px;
   width: 2px;
 `;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx

@@ -11,8 +11,9 @@ const StyledPillContainer = styled.span`
   > span {
     background: ${themeCssVariables.accent.accent3};
     border: 1px solid ${themeCssVariables.accent.accent5};
-    border-radius: ${themeCssVariables.border.radius.md};
+    border-radius: ${themeCssVariables.border.radius.pill};
     color: ${themeCssVariables.accent.accent9};
+    corner-shape: round;
     font-weight: ${themeCssVariables.font.weight.semiBold};
     height: ${themeCssVariables.spacing[5]};
   }

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx

@@ -135,7 +135,8 @@ const StyledDashContainer = styled.div`
 
 const StyledDash = styled.div`
   background-color: ${themeCssVariables.font.color.primary};
-  border-radius: 9999px;
+  border-radius: ${themeCssVariables.border.radius.pill};
+  corner-shape: round;
   height: 0.25rem;
   width: 0.75rem;
 `;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWorkspaceCreationForm.tsx

@@ -129,6 +129,7 @@ const StyledAvailabilityDot = styled.div`
   background-color: ${themeCssVariables.color.green};
   border-radius: 50%;
   box-shadow: 0 0 0 3px ${themeCssVariables.color.green5};
+  corner-shape: round;
   flex-shrink: 0;
   height: 6px;
   width: 6px;

packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx

@@ -64,7 +64,7 @@ const StyledEditor = styled.div`
     backdrop-filter: ${themeCssVariables.blur.medium};
     background: ${themeCssVariables.background.transparent.secondary};
     border: 1px solid ${themeCssVariables.border.color.medium};
-    border-radius: 8px;
+    border-radius: ${themeCssVariables.border.radius.md};
     box-shadow:
       0px 2px 4px rgba(0, 0, 0, 0.04),
       2px 4px 16px rgba(0, 0, 0, 0.12);
@@ -100,7 +100,7 @@ const StyledEditor = styled.div`
     backdrop-filter: ${themeCssVariables.blur.medium};
     background: ${themeCssVariables.background.transparent.secondary};
     border: 1px solid ${themeCssVariables.border.color.medium};
-    border-radius: 8px;
+    border-radius: ${themeCssVariables.border.radius.md};
     padding: 4px;
   }
 
@@ -141,7 +141,7 @@ const StyledEditor = styled.div`
   & .bn-inline-content code {
     background-color: ${themeCssVariables.background.transparent.light};
     border: 1px solid ${themeCssVariables.font.color.extraLight};
-    border-radius: 4px;
+    border-radius: ${themeCssVariables.border.radius.sm};
     color: ${themeCssVariables.font.color.danger};
     font-family: monospace;
     font-size: 0.9rem;

packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx

@@ -19,7 +19,7 @@ const StyledContainer = styled.div`
 const StyledPanel = styled.div`
   background: ${themeCssVariables.grayScale.gray1};
   border: 1px solid ${themeCssVariables.grayScale.gray5};
-  border-radius: 8px;
+  border-radius: ${themeCssVariables.border.radius.md};
   height: 100%;
   overflow-x: auto;
   overflow-y: hidden;
@@ -85,7 +85,7 @@ const StyledButton = styled.button`
   align-items: center;
   background: ${themeCssVariables.grayScale.gray1};
   border: 1px solid ${themeCssVariables.grayScale.gray5};
-  border-radius: 8px;
+  border-radius: ${themeCssVariables.border.radius.md};
   color: ${themeCssVariables.grayScale.gray12};
   cursor: pointer;
   display: flex;

packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx

@@ -12,7 +12,7 @@ const failedFaviconUrls = new Set<string>();
 
 const StyledCompositeContainer = styled.div`
   align-items: center;
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -34,7 +34,7 @@ const StyledMainIconWrapper = styled.div<{
     $noBackgroundOrBorder || !$borderColor
       ? 'none'
       : `1px solid ${$borderColor}`};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   inset: 0;

packages/twenty-front/src/modules/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay.tsx

@@ -6,7 +6,7 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledCompositeContainer = styled.div`
   align-items: center;
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -24,7 +24,7 @@ const StyledObjectIconWrapper = styled.div<{
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) =>
     $borderColor ? `1px solid ${$borderColor}` : 'none'};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   inset: 0;
@@ -35,7 +35,7 @@ const StyledObjectIconWrapper = styled.div<{
 const StyledViewOverlay = styled.div<{ $backgroundColor: string }>`
   align-items: center;
   background-color: ${({ $backgroundColor }) => $backgroundColor};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   bottom: -5px;
   display: flex;
   height: 14px;

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx

@@ -42,6 +42,7 @@ const StyledTabsPill = styled.div`
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
+  corner-shape: round;
   display: flex;
   flex-shrink: 0;
   gap: ${themeCssVariables.spacing[0.5]};
@@ -59,6 +60,7 @@ const StyledTabWrapper = styled.div<{ isActive: boolean }>`
     isActive
       ? themeCssVariables.font.color.primary
       : themeCssVariables.font.color.tertiary};
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   flex: 1;
@@ -95,6 +97,7 @@ const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
   border: 1px solid ${themeCssVariables.border.color.medium};
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
+  corner-shape: round;
   display: flex;
   height: ${({ isExpanded }) =>
     isExpanded ? themeCssVariables.spacing[7] : themeCssVariables.spacing[6]};

packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx

@@ -5,7 +5,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledContainer = styled.div`
   border: 1px solid ${themeCssVariables.border.color.light};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   display: flex;
   flex: 1;
   flex-direction: column;

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx

@@ -9,11 +9,12 @@ const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
     danger ? themeCssVariables.color.red3 : themeCssVariables.color.blue3};
   border-color: ${({ danger }) =>
     danger ? themeCssVariables.color.red5 : themeCssVariables.color.blue5};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.smRound};
   border-style: solid;
   border-width: 1px;
   box-sizing: border-box;
   column-gap: ${themeCssVariables.spacing[1]};
+  corner-shape: round;
   cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')};
   display: inline-flex;
   flex-direction: row;
@@ -37,11 +38,12 @@ const StyledDelete = styled.button<{ danger: boolean }>`
   align-items: center;
   background: none;
   border: none;
-  border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
-  border-top-right-radius: ${themeCssVariables.border.radius.sm};
+  border-bottom-right-radius: ${themeCssVariables.border.radius.smRound};
+  border-top-right-radius: ${themeCssVariables.border.radius.smRound};
   box-sizing: border-box;
   color: ${({ danger }) =>
     danger ? themeCssVariables.color.red : themeCssVariables.color.blue};
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   font-size: ${themeCssVariables.font.size.sm};

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx

@@ -36,7 +36,7 @@ const StyledAdvancedTextFieldFieldContainer = styled.div`
 const StyledAdvancedTextFieldInnerContainer = styled.div`
   background-color: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
 
   display: flex;
@@ -61,7 +61,7 @@ const StyledEditorActionButtonContainer = styled.div<{
 const StyledFullScreenEditorContainer = styled.div`
   background-color: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   flex: 1;
   min-height: 0;
   overflow-y: auto;

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx

@@ -31,10 +31,10 @@ const StyledDescription = styled.span`
 const StyledToggleContainer = styled.div`
   background-color: ${themeCssVariables.background.transparent.lighter};
   border-bottom: 1px solid ${themeCssVariables.border.color.medium};
-  border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
+  border-bottom-right-radius: ${themeCssVariables.border.radius.md};
   border-right: 1px solid ${themeCssVariables.border.color.medium};
   border-top: 1px solid ${themeCssVariables.border.color.medium};
-  border-top-right-radius: ${themeCssVariables.border.radius.sm};
+  border-top-right-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   padding-bottom: ${themeCssVariables.spacing[2]};
   padding-right: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx

@@ -20,16 +20,16 @@ const StyledFormFieldInputInnerContainer = styled.div<
   align-items: ${({ multiline }) => (multiline ? 'flex-start' : 'center')};
   background-color: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
+  border-bottom-left-radius: ${themeCssVariables.border.radius.md};
   border-bottom-right-radius: ${({ multiline, hasRightElement }) =>
-    multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
+    multiline || !hasRightElement ? themeCssVariables.border.radius.md : '0'};
   border-right: ${({ multiline, hasRightElement }) =>
     multiline || !hasRightElement
       ? `1px solid ${themeCssVariables.border.color.medium}`
       : 'none'};
-  border-top-left-radius: ${themeCssVariables.border.radius.sm};
+  border-top-left-radius: ${themeCssVariables.border.radius.md};
   border-top-right-radius: ${({ multiline, hasRightElement }) =>
-    multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
+    multiline || !hasRightElement ? themeCssVariables.border.radius.md : '0'};
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx

@@ -4,7 +4,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledFormNestedFieldInputContainer = styled.div`
   background: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx

@@ -52,14 +52,14 @@ const StyledEditor = styled.div<{
 
     .variable-tag {
       background-color: ${themeCssVariables.color.blue3};
-      border-radius: ${themeCssVariables.border.radius.sm};
+      border-radius: ${themeCssVariables.border.radius.md};
       color: ${themeCssVariables.color.blue};
       padding: ${themeCssVariables.spacing[1]};
     }
 
     .text-tag {
       background-color: ${themeCssVariables.color.blue3};
-      border-radius: ${themeCssVariables.border.radius.sm};
+      border-radius: ${themeCssVariables.border.radius.md};
       color: ${themeCssVariables.color.blue};
       padding: ${themeCssVariables.spacing[1]};
     }

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx

@@ -8,7 +8,7 @@ const StyledContainer = styled.div`
   align-items: center;
   background: ${themeCssVariables.background.transparent.light};
 
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   color: ${themeCssVariables.font.color.tertiary};
   display: inline-flex;
   font-size: ${themeCssVariables.font.size.md};

packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx

@@ -64,7 +64,7 @@ const LoadingSkeleton = () => {
     <SkeletonTheme
       baseColor={theme.background.tertiary}
       highlightColor={theme.background.transparent.lighter}
-      borderRadius={theme.border.radius.sm}
+      borderRadius={themeCssVariables.border.radius.md}
     >
       <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
     </SkeletonTheme>

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -23,7 +23,7 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
     isHovered && !readonly && !disableHoverEffect
       ? themeCssVariables.background.transparent.light
       : 'transparent'};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   cursor: ${({ isHovered, readonly }) =>
     isHovered && !readonly ? 'pointer' : 'default'};
   display: flex;

packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx

@@ -13,7 +13,7 @@ const StyledPropertyBoxContainer = styled.div<{
   noHorizontalPadding?: boolean;
 }>`
   align-self: stretch;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-direction: column;
   gap: ${themeCssVariables.spacing[2]};

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx

@@ -5,6 +5,13 @@ import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
 import { AnimatedContainer } from 'twenty-ui/layout';
 
 const StyledButtonContainer = styled.div`
+  /* Buttons stay concentric with the frame: its radius minus the 1px border.
+     The frame uses sm (not md): on this ~26px control md would exceed 50% of
+     the box and clamp to a full squircle, and a scaled full squircle is not a
+     uniform offset — the child corners would pull away from the frame. sm
+     stays well below the clamp point so radius - inset holds in both modes. */
+  --light-icon-button-radius: calc(${themeCssVariables.border.radius.sm} - 1px);
+
   border: 1px solid ${themeCssVariables.border.color.strong};
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     position: relative;

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx

@@ -15,7 +15,7 @@ const StyledDiv = styled.div`
   align-items: center;
   background: inherit;
   border: none;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   cursor: pointer;

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellUuidFieldDisplay.tsx

@@ -11,7 +11,7 @@ const StyledDiv = styled.div`
   align-items: center;
   background: inherit;
   border: none;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   display: flex;

packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx

@@ -15,7 +15,7 @@ const StyledDiv = styled.div`
   align-items: center;
   background: inherit;
   border: none;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   cursor: pointer;

packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx

@@ -9,6 +9,7 @@ const StyledCheckContainer = styled.div<{ color: string }>`
   border-radius: ${themeCssVariables.border.radius.rounded};
   box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${color}`};
   box-sizing: content-box;
+  corner-shape: round;
   display: flex;
   height: 36px;
   justify-content: center;

packages/twenty-front/src/modules/onboarding/components/OnboardingProfilePictureUploader.tsx

@@ -22,6 +22,7 @@ const StyledUploader = styled.button`
   border-radius: ${themeCssVariables.border.radius.rounded};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.light};
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;

packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingCreditsRewardTag.tsx

@@ -10,6 +10,7 @@ const StyledTag = styled.div`
   border-radius: ${themeCssVariables.border.radius.xxl};
   box-sizing: border-box;
   color: ${themeCssVariables.color.green9};
+  corner-shape: round;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};
   height: ${themeCssVariables.spacing[6]};

packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingTrustBadges.tsx

@@ -29,6 +29,7 @@ const StyledBadge = styled.div<{ hasClusterLeading: boolean }>`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.light};
+  corner-shape: round;
   display: flex;
   font-size: ${themeCssVariables.font.size.xs};
   font-weight: ${themeCssVariables.font.weight.semiBold};

packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingPlanCard.tsx

@@ -92,6 +92,7 @@ const StyledBadge = styled.span`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.tertiary};
+  corner-shape: round;
   display: flex;
   font-size: ${themeCssVariables.font.size.sm};
   font-weight: ${themeCssVariables.font.weight.medium};

packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingTrialExtensionTag.tsx

@@ -10,6 +10,7 @@ const StyledTag = styled.div`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   color: ${themeCssVariables.color.green9};
+  corner-shape: round;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};
   height: ${themeCssVariables.spacing[6]};

packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx

@@ -7,7 +7,7 @@ type GraphWidgetLegendDotProps = {
 
 const StyledDot = styled.div<{ color: string }>`
   background: ${({ color }) => color};
-  border-radius: 2px;
+  border-radius: var(--t-border-radius-xs);
   flex-shrink: 0;
   height: 8px;
   width: 8px;

packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx

@@ -63,7 +63,7 @@ const StyledEditor = styled.div`
     backdrop-filter: ${themeCssVariables.blur.medium};
     background: ${themeCssVariables.background.transparent.secondary};
     border: 1px solid ${themeCssVariables.border.color.medium};
-    border-radius: 8px;
+    border-radius: ${themeCssVariables.border.radius.md};
     box-shadow:
       0px 2px 4px rgba(0, 0, 0, 0.04),
       2px 4px 16px rgba(0, 0, 0, 0.12);
@@ -98,7 +98,7 @@ const StyledEditor = styled.div`
     backdrop-filter: ${themeCssVariables.blur.medium};
     background: ${themeCssVariables.background.transparent.secondary};
     border: 1px solid ${themeCssVariables.border.color.medium};
-    border-radius: 8px;
+    border-radius: ${themeCssVariables.border.radius.md};
     padding: 4px;
   }
 
@@ -139,7 +139,7 @@ const StyledEditor = styled.div`
   & .bn-inline-content code {
     background-color: ${themeCssVariables.background.transparent.light};
     border: 1px solid ${themeCssVariables.font.color.extraLight};
-    border-radius: 4px;
+    border-radius: ${themeCssVariables.border.radius.sm};
     color: ${themeCssVariables.font.color.danger};
     font-family: monospace;
     font-size: 0.9rem;

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx

@@ -23,7 +23,7 @@ const StyledCardMedia = styled.div`
 const StyledCardMediaContent = styled.div`
   align-items: stretch;
   background-color: ${themeCssVariables.background.secondary};
-  border-radius: 2px;
+  border-radius: ${themeCssVariables.border.radius.xs};
   box-sizing: border-box;
   display: flex;
   flex: 1;

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx

@@ -25,6 +25,7 @@ const StyledTooltipItem = styled.div`
 const StyledTooltipColorCircle = styled.div<{ color: string }>`
   background-color: ${({ color }) => color};
   border-radius: 50%;
+  corner-shape: round;
   height: 8px;
   margin-right: ${themeCssVariables.spacing[2]};
   width: 8px;

packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx

@@ -42,6 +42,7 @@ const StyledDeprecatedSuffix = styled.span`
 
 const hoverCardTooltipClass = css`
   border-radius: ${themeCssVariables.border.radius.rounded} !important;
+  corner-shape: round;
 
   padding: 0 !important;
 `;

packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx

@@ -14,6 +14,7 @@ const StyledCheckContainer = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.tertiary};
   border-radius: 50%;
+  corner-shape: round;
   display: flex;
   height: 16px;
   justify-content: center;

packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoCard.tsx

@@ -81,6 +81,7 @@ const StyledStatusPill = styled.span<{ tone: BillingStatusTone }>`
   background-color: ${({ tone }) => STATUS_PILL_COLORS[tone].background};
   border-radius: ${themeCssVariables.border.radius.pill};
   color: ${({ tone }) => STATUS_PILL_COLORS[tone].color};
+  corner-shape: round;
   display: inline-flex;
   font-size: ${themeCssVariables.font.size.sm};
   font-weight: ${themeCssVariables.font.weight.medium};
@@ -93,6 +94,7 @@ const StyledStatusPill = styled.span<{ tone: BillingStatusTone }>`
 const StyledStatusDot = styled.span<{ tone: BillingStatusTone }>`
   background-color: currentColor;
   border-radius: 50%;
+  corner-shape: round;
   height: 4px;
   width: 4px;
 `;

packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx

@@ -46,7 +46,8 @@ const StyledHeader = styled.div`
 
 const StyledObjectName = styled.div`
   border: 0;
-  border-radius: 4px 4px 0 0;
+  border-radius: ${themeCssVariables.border.radius.sm}
+    ${themeCssVariables.border.radius.sm} 0 0;
   display: flex;
   font-weight: ${themeCssVariables.font.weight.medium};
   gap: ${themeCssVariables.spacing[1]};

packages/twenty-front/src/modules/side-panel/components/SidePanelToggleButton.tsx

@@ -75,7 +75,7 @@ export const SidePanelToggleButton = () => {
           Icon={IconDotsVertical}
           dataTestId="page-header-side-panel-button"
           size={isMobile ? 'medium' : 'small'}
-          variant="secondary"
+          variant="primary"
           accent="default"
           ariaLabel={ariaLabel}
           onClick={openSidePanelMenu}

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -29,7 +29,7 @@ const StyledDialogOverlay = motion.create(StyledDialogOverlayBase);
 
 const StyledDialogContainerBase = styled.div`
   background: ${themeCssVariables.background.primary};
-  border-radius: 8px;
+  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-direction: column;
   max-width: 320px;

packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx

@@ -7,7 +7,8 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledContainer = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.light};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.smRound};
+  corner-shape: round;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};
   height: ${themeCssVariables.spacing[5]};
@@ -18,8 +19,9 @@ const StyledContainer = styled.div`
 const StyledIconBox = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.font.color.tertiary};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.smRound};
   color: ${themeCssVariables.background.primary};
+  corner-shape: round;
   display: flex;
   height: 14px;
   justify-content: center;
@@ -29,8 +31,9 @@ const StyledIconBox = styled.div`
 const StyledStaticLoader = styled.div`
   align-items: center;
   border: 1px solid ${themeCssVariables.font.color.tertiary};
-  border-radius: 12px;
+  border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
+  corner-shape: round;
   display: flex;
   height: 12px;
   justify-content: center;

packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx

@@ -20,7 +20,7 @@ const StyledPicture = styled.button<{ withPicture: boolean }>`
       ? themeCssVariables.background.secondary
       : themeCssVariables.background.transparent.light};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: content-box;
   color: ${themeCssVariables.font.color.light};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};

packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx

@@ -21,16 +21,16 @@ export const StyledControlContainer = styled.div<{
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
+  border-bottom-left-radius: ${themeCssVariables.border.radius.md};
   border-bottom-right-radius: ${({ hasRightElement }) =>
-    hasRightElement ? '0' : themeCssVariables.border.radius.sm};
+    hasRightElement ? '0' : themeCssVariables.border.radius.md};
   border-right: ${({ hasRightElement }) =>
     hasRightElement
       ? 'none'
       : `1px solid ${themeCssVariables.border.color.medium}`};
-  border-top-left-radius: ${themeCssVariables.border.radius.sm};
+  border-top-left-radius: ${themeCssVariables.border.radius.md};
   border-top-right-radius: ${({ hasRightElement }) =>
-    hasRightElement ? '0' : themeCssVariables.border.radius.sm};
+    hasRightElement ? '0' : themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${({ disabled, textAccent }) =>
     disabled

packages/twenty-front/src/modules/ui/input/components/TextArea.tsx

@@ -53,7 +53,7 @@ const StyledTextAreaContainer = styled.div<{ variant: TextAreaVariant }>`
         ? 'none'
         : `1px solid ${themeCssVariables.border.color.medium}`};
     border-radius: ${({ variant }) =>
-      variant === 'transparent' ? '0' : themeCssVariables.border.radius.sm};
+      variant === 'transparent' ? '0' : themeCssVariables.border.radius.md};
     box-sizing: border-box;
     color: ${themeCssVariables.font.color.primary};
     display: block;

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx

@@ -48,8 +48,8 @@ const StyledAdornmentContainer = styled.div<StyledAdornmentContainerProps>`
     position === 'right' ? 'none' : 'solid'};
   border-radius: ${({ position }) =>
     position === 'left'
-      ? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
-      : `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`};
+      ? `${themeCssVariables.border.radius.md} 0 0 ${themeCssVariables.border.radius.md}`
+      : `0 ${themeCssVariables.border.radius.md} ${themeCssVariables.border.radius.md} 0`};
   border-right-style: ${({ position }) =>
     position === 'left' ? 'none' : 'solid'};
   box-sizing: border-box;
@@ -103,10 +103,10 @@ const StyledInput = styled.input<
 
   border-radius: ${({ leftAdornment, rightAdornment }) =>
     leftAdornment
-      ? `0 ${themeCssVariables.border.radius.sm} ${themeCssVariables.border.radius.sm} 0`
+      ? `0 ${themeCssVariables.border.radius.md} ${themeCssVariables.border.radius.md} 0`
       : rightAdornment
-        ? `${themeCssVariables.border.radius.sm} 0 0 ${themeCssVariables.border.radius.sm}`
-        : themeCssVariables.border.radius.sm};
+        ? `${themeCssVariables.border.radius.md} 0 0 ${themeCssVariables.border.radius.md}`
+        : themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   display: flex;

packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx

@@ -62,7 +62,7 @@ const StyledDiv = styled.div<{
   align-items: center;
   background: inherit;
   border: none;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${({ textColor }) =>
     textColor ?? themeCssVariables.font.color.primary};

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx

@@ -39,7 +39,9 @@ export const MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID =
 
 const StyledButtonContainer = styled.div`
   align-items: center;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
   box-sizing: border-box;
   cursor: pointer;
   display: flex;

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx

@@ -54,7 +54,9 @@ const StyledSeparator = styled.div`
 
 const StyledButtonContainer = styled.div`
   align-items: center;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
   box-sizing: border-box;
   cursor: pointer;
   display: flex;

packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx

@@ -59,7 +59,9 @@ const StyledTimeInputContainer = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.medium};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
   box-sizing: border-box;
   display: flex;
   gap: ${themeCssVariables.spacing[1]};

packages/twenty-front/src/modules/ui/input/components/internal/date/components/StyledDatePickerContainer.tsx

@@ -67,7 +67,9 @@ export const StyledDatePickerContainer = styled.div<{
   & .react-datepicker__month-dropdown-container,
   & .react-datepicker__year-dropdown-container {
     text-align: left;
-    border-radius: ${themeCssVariables.border.radius.sm};
+    border-radius: calc(
+      ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+    );
     margin-left: ${themeCssVariables.spacing[1]};
     margin-right: 0;
     padding: ${themeCssVariables.spacing[2]};
@@ -193,7 +195,9 @@ export const StyledDatePickerContainer = styled.div<{
   & .react-datepicker__navigation--previous,
   & .react-datepicker__navigation--next {
     height: 34px;
-    border-radius: ${themeCssVariables.border.radius.sm};
+    border-radius: calc(
+      ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+    );
     padding-top: 6px;
     &:hover {
       background: ${themeCssVariables.background.transparent.light};

packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx

@@ -8,7 +8,9 @@ const StyledDropdownMenuSkeletonContainer = styled.div`
   --horizontal-padding: ${themeCssVariables.spacing[1]};
   --vertical-padding: ${themeCssVariables.spacing[2]};
 
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
   box-sizing: border-box;
   flex-shrink: 0;
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx

@@ -6,8 +6,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledHeader = styled.li`
   align-items: center;
   border-bottom: 1px solid ${themeCssVariables.border.color.light};
-  border-top-left-radius: ${themeCssVariables.border.radius.sm};
-  border-top-right-radius: ${themeCssVariables.border.radius.sm};
+  border-top-left-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
+  border-top-right-radius: calc(
+    ${themeCssVariables.border.radius.md} - ${themeCssVariables.spacing[1]}
+  );
   box-sizing: content-box;
   color: ${themeCssVariables.font.color.primary};
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -34,7 +34,7 @@ const StyledScrollableContainer = styled.div<{ maxHeight?: number }>`
   width: 100%;
 
   *::-webkit-scrollbar-thumb {
-    border-radius: ${themeCssVariables.border.radius.sm};
+    border-radius: ${themeCssVariables.border.radius.pill};
   }
 `;
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx

@@ -15,7 +15,7 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
       : isUnfolded
         ? themeCssVariables.background.transparent.light
         : themeCssVariables.background.primary};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   color: ${({ isActive }) =>
     isActive
       ? themeCssVariables.color.blue

packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx

@@ -13,7 +13,7 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
       ? themeCssVariables.background.transparent.light
       : themeCssVariables.background.primary};
   border: none;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   color: ${({ isActive }) =>
     isActive
       ? themeCssVariables.color.blue

packages/twenty-front/src/modules/ui/layout/hero/components/HeroPlayButton.tsx

@@ -16,6 +16,7 @@ const StyledButton = styled.button`
   border-radius: 50%;
   box-shadow: ${themeCssVariables.boxShadow.strong};
   color: ${themeCssVariables.font.color.tertiary};
+  corner-shape: round;
   cursor: pointer;
   display: inline-flex;
   height: 44px;

packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx

@@ -25,7 +25,7 @@ const StyledLayout = styled.div`
   width: 100%;
 
   *::-webkit-scrollbar-thumb {
-    border-radius: ${themeCssVariables.border.radius.sm};
+    border-radius: ${themeCssVariables.border.radius.md};
   }
 
   @media print {

packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx

@@ -45,7 +45,7 @@ const StyledMainCardWrapper = styled.div`
 // oxlint-disable-next-line twenty/no-hardcoded-colors
 const StyledCard = styled.div`
   background: ${themeCssVariables.background.primary};
-  border-radius: 16px 0 0 0;
+  border-radius: ${themeCssVariables.border.radius.lg} 0 0 0;
   box-shadow:
     -4px 0 4px 0 rgba(0, 0, 0, 0.006),
     0 0 0 1px ${themeCssVariables.border.color.medium};

packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx

@@ -36,6 +36,7 @@ const StyledHandle = styled.div<{ isActive: boolean; isHovered: boolean }>`
         ? themeCssVariables.font.color.tertiary
         : themeCssVariables.background.quaternary};
   border-radius: ${themeCssVariables.border.radius.pill};
+  corner-shape: round;
   height: 48px;
   transform: ${({ isHovered, isActive }) =>
     isHovered || isActive ? 'scaleY(1.2)' : 'scaleY(1)'};

packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx

@@ -38,7 +38,7 @@ const LoadingSkeleton = () => {
       <SkeletonTheme
         baseColor={theme.background.tertiary}
         highlightColor={theme.background.transparent.lighter}
-        borderRadius={theme.border.radius.sm}
+        borderRadius={themeCssVariables.border.radius.md}
       >
         <Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
       </SkeletonTheme>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -80,7 +80,7 @@ const StyledAvatarWrapper = styled.div<{
 }>`
   background-color: ${({ hasIcon }) =>
     hasIcon ? themeCssVariables.background.transparent.light : 'unset'};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   cursor: ${({ isAvatarEditable }) =>
     isAvatarEditable ? 'pointer' : 'default'};
 `;

packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx

@@ -20,7 +20,7 @@ const StyledTableRow = styled.div<{
       : isExpanded === true
         ? themeCssVariables.background.transparent.light
         : 'transparent'};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   cursor: ${({ cursor }) => cursor ?? 'default'};
   display: grid;
   grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx

@@ -8,7 +8,7 @@ export const StyledContainer = styled.div<{
 }>`
   align-items: center;
   border: 1px solid transparent;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx

@@ -21,7 +21,7 @@ const StyledIconAndButtonContainer = styled.button`
   align-items: center;
   background: inherit;
   border: 1px solid transparent;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${themeCssVariables.font.color.primary};
   cursor: pointer;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -88,7 +88,7 @@ const StyledItem = styled.button<StyledItemProps>`
     isSelectedInEditMode
       ? `1px solid ${themeCssVariables.color.blue}`
       : '1px solid transparent'};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   color: ${({ active, isSoon, variant }) => {
     if (variant === 'tertiary') {
@@ -172,7 +172,7 @@ const StyledKeyBoardShortcut = styled.span`
   align-items: center;
   background: ${themeCssVariables.background.transparent.lighter};
   border: 1px solid ${themeCssVariables.border.color.strong};
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -214,7 +214,7 @@ const StyledIconBackgroundTile = styled.div`
 
 const StyledRightOptionsContainer = styled.div`
   align-items: center;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   flex-grow: 0;
   flex-shrink: 0;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx

@@ -8,7 +8,7 @@ import {
   motion,
   type TargetAndTransition,
 } from 'framer-motion';
-import { ThemeContext } from 'twenty-ui/theme-constants';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 const StyledAnimationGroupContainerBase = styled.div``;
 
 const StyledAnimationGroupContainer = motion.create(
@@ -42,7 +42,7 @@ export const NavigationDrawerItemsCollapsableContainer = ({
         width: 24,
         backgroundColor: theme.background.transparent.lighter,
         border: `1px solid ${theme.background.transparent.lighter}`,
-        borderRadius: theme.border.radius.sm,
+        borderRadius: themeCssVariables.border.radius.md,
       };
     }
   }

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx

@@ -12,7 +12,7 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledTitle = styled.div`
   align-items: center;
-  border-radius: ${themeCssVariables.border.radius.sm};
+  border-radius: ${themeCssVariables.border.radius.md};
   display: flex;
   height: ${themeCssVariables.spacing[7]};
   justify-content: space-between;

packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx

@@ -28,6 +28,7 @@ const StyledStepCircleBase = styled.div<{ isInNextSteps: boolean }>`
   border-radius: 50%;
   border-style: solid;
   border-width: 1px;
+  corner-shape: round;
   display: flex;
   flex-basis: auto;
   flex-shrink: 0;

packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx

@@ -25,7 +25,7 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
           return themeCssVariables.accent.tertiary;
       }
     }};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.smRound};
   box-sizing: border-box;
   color: ${({ variant }) => {
     switch (variant) {
@@ -37,6 +37,7 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
     }
   }};
   column-gap: ${themeCssVariables.spacing[1]};
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   flex-direction: row;

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeIconContainer.tsx

@@ -4,7 +4,7 @@ import { styled } from '@linaria/react';
 const StyledNodeIconContainer = styled.div`
   align-items: center;
   background: ${themeCssVariables.background.transparent.light};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   height: 32px;

packages/twenty-front/src/modules/workspace-member/components/WorkspaceMemberAvatarStack.tsx

@@ -33,6 +33,7 @@ const StyledAvatarStackContainer = styled.div`
 const StyledAvatarContainer = styled.div`
   border: 1px solid ${themeCssVariables.background.secondary};
   border-radius: 50%;
+  corner-shape: round;
   display: flex;
 `;
 

packages/twenty-front/src/pages/onboarding/InstallAppsContent.tsx

@@ -31,6 +31,7 @@ const StyledBetaTag = styled.span`
   border-radius: ${themeCssVariables.border.radius.pill};
   box-sizing: border-box;
   color: ${themeCssVariables.grayScale.gray10};
+  corner-shape: round;
   display: flex;
   font-size: ${themeCssVariables.font.size.md};
   font-weight: ${themeCssVariables.font.weight.medium};

packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx

@@ -73,6 +73,7 @@ const StyledLinkGroup = styled.div`
   > span {
     background-color: ${themeCssVariables.font.color.extraLight};
     border-radius: 50%;
+    corner-shape: round;
     height: 2px;
     width: 2px;
   }

packages/twenty-front/src/pages/settings/ai/components/SettingsToolIcon.tsx

@@ -45,7 +45,7 @@ const getOperationIcon = (toolName: string): IconComponent | null => {
 
 const StyledCompositeContainer = styled.div`
   align-items: center;
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   flex-shrink: 0;
@@ -63,7 +63,7 @@ const StyledMainIconWrapper = styled.div<{
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   border: ${({ $borderColor }) =>
     $borderColor ? `1px solid ${$borderColor}` : 'none'};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   box-sizing: border-box;
   display: flex;
   inset: 0;
@@ -74,7 +74,7 @@ const StyledMainIconWrapper = styled.div<{
 const StyledOperationOverlay = styled.div`
   align-items: center;
   background-color: ${themeCssVariables.grayScale.gray4};
-  border-radius: 4px;
+  border-radius: ${themeCssVariables.border.radius.sm};
   bottom: -5px;
   display: flex;
   height: 14px;

packages/twenty-front/src/pages/settings/enterprise/SettingsEnterprise.tsx

@@ -54,6 +54,7 @@ const StyledStatusDot = styled.div<{ isActive: boolean }>`
   background-color: ${({ isActive }) =>
     isActive ? themeCssVariables.color.green : themeCssVariables.color.red};
   border-radius: 50%;
+  corner-shape: round;
   height: 8px;
   width: 8px;
 `;

packages/twenty-front/src/pages/settings/enterprise/components/OrganizationAdornment.tsx

@@ -13,8 +13,9 @@ const pillClassName = css`
   align-items: center;
   background: ${themeCssVariables.background.secondary};
   border: 1px solid ${themeCssVariables.border.color.light};
-  border-radius: 40px;
+  border-radius: ${themeCssVariables.border.radius.pill};
   color: ${themeCssVariables.font.color.tertiary};
+  corner-shape: round;
   display: inline-flex;
   font-weight: ${themeCssVariables.font.weight.medium};
   gap: ${themeCssVariables.spacing[1]};

packages/twenty-ui/dist/theme-dark.css

@@ -136,10 +136,13 @@
   --t-border-radius-xs: 2px;
   --t-border-radius-sm: 4px;
   --t-border-radius-md: 8px;
+  --t-border-radius-lg: 16px;
   --t-border-radius-xl: 20px;
   --t-border-radius-xxl: 40px;
   --t-border-radius-pill: 999px;
   --t-border-radius-rounded: 100%;
+  --t-border-radius-sm-round: 4px;
+  --t-border-radius-md-round: 8px;
   --t-box-shadow-color: rgba(0, 0, 0, 0.6);
   --t-box-shadow-light:
     0px 2px 4px 0px rgba(0, 0, 0, 0.04), 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
@@ -1005,3 +1008,37 @@
   --t-color-transparent-amber11: #ffca16;
   --t-color-transparent-amber12: #ffe7b3;
 }
+
+/* Squircle corners: progressive enhancement for browsers supporting
+   corner-shape (Chromium 139+). A squircle needs ~2x the radius of a round
+   corner to read as the same visual size, so the radius tokens are doubled
+   here; other browsers keep the base tokens as plain rounded corners.
+
+   Shape rules:
+   - pill, rounded and the *-round tokens are never doubled: they belong to
+     elements that keep corner-shape: round (circles, capsules, checkboxes,
+     chips, tags) and must look identical in both modes.
+   - Opt a subtree out of squircles with --t-corner-shape: round, or a
+     single element with corner-shape: round.
+   - Nested radii must stay concentric in both modes: derive them from the
+     parent radius token minus the inset, e.g.
+     calc(var(--t-border-radius-md) - var(--t-spacing-1)).
+     The token doubles under squircle while the inset does not, which is
+     exactly what concentricity requires. */
+@supports (corner-shape: squircle) {
+  .dark {
+    --t-border-radius-xs: 4px;
+    --t-border-radius-sm: 8px;
+    --t-border-radius-md: 16px;
+    --t-border-radius-lg: 32px;
+    --t-border-radius-xl: 40px;
+    --t-border-radius-xxl: 80px;
+  }
+
+  /* Zero specificity on purpose: any component rule can override it. */
+  *,
+  *::before,
+  *::after {
+    corner-shape: var(--t-corner-shape, squircle);
+  }
+}

packages/twenty-ui/dist/theme-light.css

@@ -136,10 +136,13 @@
   --t-border-radius-xs: 2px;
   --t-border-radius-sm: 4px;
   --t-border-radius-md: 8px;
+  --t-border-radius-lg: 16px;
   --t-border-radius-xl: 20px;
   --t-border-radius-xxl: 40px;
   --t-border-radius-pill: 999px;
   --t-border-radius-rounded: 100%;
+  --t-border-radius-sm-round: 4px;
+  --t-border-radius-md-round: 8px;
   --t-box-shadow-color: color(display-p3 0 0 0 / 0.039);
   --t-box-shadow-light:
     0px 2px 4px 0px color(display-p3 0 0 0 / 0.039),
@@ -1009,3 +1012,37 @@
   --t-color-transparent-amber11: #ab6400;
   --t-color-transparent-amber12: #341500dd;
 }
+
+/* Squircle corners: progressive enhancement for browsers supporting
+   corner-shape (Chromium 139+). A squircle needs ~2x the radius of a round
+   corner to read as the same visual size, so the radius tokens are doubled
+   here; other browsers keep the base tokens as plain rounded corners.
+
+   Shape rules:
+   - pill, rounded and the *-round tokens are never doubled: they belong to
+     elements that keep corner-shape: round (circles, capsules, checkboxes,
+     chips, tags) and must look identical in both modes.
+   - Opt a subtree out of squircles with --t-corner-shape: round, or a
+     single element with corner-shape: round.
+   - Nested radii must stay concentric in both modes: derive them from the
+     parent radius token minus the inset, e.g.
+     calc(var(--t-border-radius-md) - var(--t-spacing-1)).
+     The token doubles under squircle while the inset does not, which is
+     exactly what concentricity requires. */
+@supports (corner-shape: squircle) {
+  .light {
+    --t-border-radius-xs: 4px;
+    --t-border-radius-sm: 8px;
+    --t-border-radius-md: 16px;
+    --t-border-radius-lg: 32px;
+    --t-border-radius-xl: 40px;
+    --t-border-radius-xxl: 80px;
+  }
+
+  /* Zero specificity on purpose: any component rule can override it. */
+  *,
+  *::before,
+  *::after {
+    corner-shape: var(--t-corner-shape, squircle);
+  }
+}

packages/twenty-ui/src/data-display/Avatar/Avatar.module.scss

@@ -4,7 +4,7 @@
   flex-shrink: 0;
   overflow: hidden;
   user-select: none;
-  border-radius: 2px;
+  border-radius: var(--t-border-radius-xs);
   border: var(--avatar-border, none);
   box-sizing: border-box;
   display: flex;
@@ -13,11 +13,12 @@
   background: var(--avatar-background);
 
   &[data-type='icon'] {
-    border-radius: 4px;
+    border-radius: var(--t-border-radius-sm);
   }
 
   &[data-type='rounded'] {
     border-radius: 50%;
+    corner-shape: round;
   }
 
   &[data-clickable] {

packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.module.scss

@@ -4,7 +4,7 @@
   justify-content: center;
   width: 14px;
   height: 14px;
-  border-radius: 4px;
+  border-radius: var(--t-border-radius-sm);
   background-color: var(
     --avatar-or-icon-background,
     var(--t-background-inverted-secondary)

packages/twenty-ui/src/data-display/Checkmark/Checkmark.module.scss

@@ -5,5 +5,6 @@
   width: var(--t-spacing-5);
   height: var(--t-spacing-5);
   border-radius: var(--t-border-radius-rounded);
+  corner-shape: round;
   background-color: var(--t-color-blue);
 }

packages/twenty-ui/src/data-display/Chip/Chip.module.scss

@@ -17,7 +17,8 @@
   font-weight: inherit;
   background-color: inherit;
   border: none;
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-sm-round);
+  corner-shape: round;
 
   & > svg {
     flex-shrink: 0;

packages/twenty-ui/src/data-display/ColorSample/ColorSample.module.scss

@@ -5,13 +5,15 @@
   width: var(--t-spacing-3);
   height: var(--t-spacing-4);
   border: 1px solid var(--color-sample-border-color);
-  border-radius: 60px;
+  border-radius: var(--t-border-radius-pill);
+  corner-shape: round;
   background-color: var(--color-sample-color);
 }
 
 .circle {
   width: var(--t-spacing-4);
   border-radius: 50%;
+  corner-shape: round;
 }
 
 .pipeline {
@@ -25,6 +27,7 @@
     width: var(--t-spacing-1);
     height: var(--t-spacing-1);
     border-radius: var(--t-border-radius-rounded);
+    corner-shape: round;
     background-color: var(--color-sample-color);
     content: '';
   }

packages/twenty-ui/src/data-display/NotificationCounter/NotificationCounter.module.scss

@@ -2,6 +2,7 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
+  corner-shape: round;
   display: flex;
   align-items: center;
   justify-content: center;

packages/twenty-ui/src/data-display/Pill/Pill.module.scss

@@ -2,6 +2,7 @@
   align-items: center;
   background: var(--t-background-transparent-light);
   border-radius: var(--t-border-radius-pill);
+  corner-shape: round;
   color: var(--t-font-color-light);
   display: inline-flex;
   font-size: var(--t-font-size-xs);

packages/twenty-ui/src/data-display/Status/Status.module.scss

@@ -2,6 +2,7 @@
   align-items: center;
   background: var(--status-background);
   border-radius: var(--t-border-radius-pill);
+  corner-shape: round;
   color: var(--status-text-color);
   display: inline-flex;
   font-size: var(--t-font-size-md);
@@ -19,6 +20,7 @@
   &:before {
     background-color: var(--status-text-color);
     border-radius: var(--t-border-radius-rounded);
+    corner-shape: round;
     content: '';
     display: block;
     flex-shrink: 0;

packages/twenty-ui/src/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer.module.scss

@@ -7,6 +7,6 @@
   width: var(--tinted-icon-tile-dimension, var(--t-spacing-4));
   height: var(--tinted-icon-tile-dimension, var(--t-spacing-4));
   border: var(--tinted-icon-tile-border, none);
-  border-radius: 4px;
+  border-radius: var(--t-border-radius-sm);
   background-color: var(--tinted-icon-tile-background-color, transparent);
 }

packages/twenty-ui/src/data-display/Tag/Tag.module.scss

@@ -2,7 +2,8 @@
   box-sizing: content-box;
   align-items: center;
   background: var(--tag-background);
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-sm-round);
+  corner-shape: round;
   color: var(--tag-text);
   display: inline-flex;
   font-size: var(--t-font-size-md);

packages/twenty-ui/src/feedback/Loader/Loader.module.scss

@@ -7,6 +7,7 @@
   width: var(--t-spacing-6);
   height: var(--t-spacing-3);
   border-radius: var(--t-border-radius-pill);
+  corner-shape: round;
   border: 1px solid
     var(--loader-color, var(--tw-button-color, var(--t-font-color-tertiary)));
   overflow: hidden;
@@ -18,6 +19,7 @@
     var(--tw-button-color, var(--t-font-color-tertiary))
   );
   border-radius: var(--t-border-radius-pill);
+  corner-shape: round;
   height: 8px;
   width: 8px;
   animation: loaderDot 0.8s ease-in-out infinite;

packages/twenty-ui/src/icon/components/IllustrationIconWrapper.module.scss

@@ -1,7 +1,7 @@
 .root {
   background-color: var(--t-background-primary);
   border: 0.75px solid var(--t-border-color-medium);
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-md);
   display: flex;
   justify-content: center;
 }

packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.module.scss

@@ -6,7 +6,7 @@
   align-items: center;
   background: var(--abtn-bg);
   border-color: var(--abtn-border-color);
-  border-radius: var(--abtn-radius, var(--t-border-radius-sm));
+  border-radius: var(--abtn-radius, var(--t-border-radius-md));
   border-style: solid;
   border-width: var(--abtn-border-width);
   box-shadow: var(--abtn-box-shadow);
@@ -48,7 +48,7 @@
 // These rules only assign the custom property so the border-radius
 // declaration stays on the flat .button class for overridability.
 .button[data-position='left'] {
-  --abtn-radius: var(--t-border-radius-sm) 0px 0px var(--t-border-radius-sm);
+  --abtn-radius: var(--t-border-radius-md) 0px 0px var(--t-border-radius-md);
 }
 
 .button[data-position='middle'] {
@@ -56,7 +56,7 @@
 }
 
 .button[data-position='right'] {
-  --abtn-radius: 0px var(--t-border-radius-sm) var(--t-border-radius-sm) 0px;
+  --abtn-radius: 0px var(--t-border-radius-md) var(--t-border-radius-md) 0px;
 }
 
 // --abtn-square-size keeps the square width declaration flat on .square.

packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.module.scss

@@ -5,7 +5,7 @@
   align-items: center;
   background: transparent;
   border: none;
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-md);
   box-shadow: none;
   color: var(--t-font-color-secondary);
   cursor: pointer;

packages/twenty-ui/src/input/Button/Button.module.scss

@@ -30,7 +30,7 @@ $gray-scale-light-gray1: color(display-p3 1 1 1);
   align-items: center;
   background: var(--btn-bg, transparent);
   border-color: var(--btn-border-color, transparent);
-  border-radius: var(--btn-radius, var(--t-border-radius-sm));
+  border-radius: var(--btn-radius, var(--t-border-radius-md));
   border-style: solid;
   border-width: var(--btn-border-width, 1px 1px 1px 1px);
   box-shadow: var(--btn-box-shadow, none);
@@ -87,7 +87,7 @@ $gray-scale-light-gray1: color(display-p3 1 1 1);
 // '1px 1px' override for primary/danger is omitted: it computes to the same
 // 1px on every side as the default.
 .button[data-position='left'] {
-  --btn-radius: var(--t-border-radius-sm) 0px 0px var(--t-border-radius-sm);
+  --btn-radius: var(--t-border-radius-md) 0px 0px var(--t-border-radius-md);
   --btn-border-width: 1px 0px 1px 1px;
 }
 
@@ -97,7 +97,7 @@ $gray-scale-light-gray1: color(display-p3 1 1 1);
 }
 
 .button[data-position='right'] {
-  --btn-radius: 0px var(--t-border-radius-sm) var(--t-border-radius-sm) 0px;
+  --btn-radius: 0px var(--t-border-radius-md) var(--t-border-radius-md) 0px;
   --btn-border-width: 1px 1px 1px 0px;
 }
 
@@ -107,8 +107,8 @@ $gray-scale-light-gray1: color(display-p3 1 1 1);
 // danger keep the focus border even when disabled.
 $primary-accents: (
   'default': (
-    bg: var(--t-background-secondary),
-    bg-disabled: var(--t-background-secondary),
+    bg: var(--t-background-transparent-lighter),
+    bg-disabled: var(--t-background-transparent-lighter),
     border: var(--t-background-transparent-light),
     border-focus: var(--t-color-blue),
     focus-needs-enabled: true,

packages/twenty-ui/src/input/Checkbox/Checkbox.module.scss

@@ -4,10 +4,11 @@
   --checkbox-border-width: 1px;
   --checkbox-bg: transparent;
   --checkbox-border-color: var(--t-border-color-secondary-inverted);
-  --checkbox-box-radius: var(--t-border-radius-sm);
+  --checkbox-box-radius: var(--t-border-radius-sm-round);
 
   align-items: center;
-  border-radius: var(--t-border-radius-md);
+  border-radius: var(--t-border-radius-md-round);
+  corner-shape: round;
   cursor: pointer;
   display: flex;
   padding: 0;
@@ -39,15 +40,17 @@
 }
 
 .squared {
-  --checkbox-box-radius: var(--t-border-radius-sm);
+  --checkbox-box-radius: var(--t-border-radius-sm-round);
 
-  border-radius: var(--t-border-radius-md);
+  border-radius: var(--t-border-radius-md-round);
 }
 
 .rounded {
   --checkbox-box-radius: var(--t-border-radius-rounded);
 
   border-radius: var(--t-border-radius-rounded);
+
+  corner-shape: round;
 }
 
 .blue {
@@ -114,6 +117,7 @@
   background: var(--checkbox-bg);
   border-color: var(--checkbox-border-color);
   border-radius: var(--checkbox-box-radius);
+  corner-shape: round;
   border-style: solid;
   border-width: var(--checkbox-border-width);
   // The border sits outside the declared box size, so size against the content box.

packages/twenty-ui/src/input/CodeEditor/CodeEditor.module.scss

@@ -9,13 +9,13 @@
 
   &[data-variant='default'] {
     border: 1px solid var(--t-border-color-medium);
-    border-radius: var(--t-border-radius-sm);
+    border-radius: var(--t-border-radius-md);
   }
 
   &[data-variant='with-header'] {
     border: 1px solid var(--t-border-color-medium);
     border-top: none;
-    border-radius: 0 0 var(--t-border-radius-sm) var(--t-border-radius-sm);
+    border-radius: 0 0 var(--t-border-radius-md) var(--t-border-radius-md);
   }
 }
 
@@ -29,7 +29,7 @@
 
 .editorWrapper :global(.monaco-editor) {
   outline-width: 0;
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-md);
   background-color: var(--t-background-secondary);
 }
 
@@ -49,11 +49,11 @@
 
 .editorWrapper[data-variant='default'] :global(.overflow-guard) {
   border: 1px solid var(--t-border-color-medium);
-  border-radius: var(--t-border-radius-sm);
+  border-radius: var(--t-border-radius-md);
 }
 
 .editorWrapper[data-variant='with-header'] :global(.overflow-guard) {
   border: 1px solid var(--t-border-color-medium);
   border-top: none;
-  border-radius: 0 0 var(--t-border-radius-sm) var(--t-border-radius-sm);
+  border-radius: 0 0 var(--t-border-radius-md) var(--t-border-radius-md);
 }