diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx index 100c38babe..fa4490fdc0 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadNotShared.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx index 8acc07e92b..e0d032e135 100644 --- a/packages/twenty-front/src/modules/activities/timeline-activities/components/EventsGroup.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/ai/components/AiChatScrollToBottomButton.tsx b/packages/twenty-front/src/modules/ai/components/AiChatScrollToBottomButton.tsx index 6345373c7b..d485a258c3 100644 --- a/packages/twenty-front/src/modules/ai/components/AiChatScrollToBottomButton.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx b/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx index 4936cb4e62..a774ca10e7 100644 --- a/packages/twenty-front/src/modules/ai/components/CodeExecutionDisplay.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/applications/components/AppConnectionHeader.tsx b/packages/twenty-front/src/modules/applications/components/AppConnectionHeader.tsx index 8a10a5458e..366d8f0bc9 100644 --- a/packages/twenty-front/src/modules/applications/components/AppConnectionHeader.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx index 73e0455cae..cd6abee19e 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx index efb02e7747..b92a0ccabc 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx +++ b/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]}; } diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx index 4ab2e519e4..9a43669fcf 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationVerification.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWorkspaceCreationForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWorkspaceCreationForm.tsx index ab149988d6..4fff1b5014 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWorkspaceCreationForm.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx b/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx index a4e21c6dba..e2e12ece9a 100644 --- a/packages/twenty-front/src/modules/blocknote-editor/components/BlockEditor.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx index 7adf709460..4ee39610f4 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx index 7d546d9093..39dcbb1793 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx +++ b/packages/twenty-front/src/modules/navigation-menu-item/display/link/components/LinkIconWithLinkOverlay.tsx @@ -12,7 +12,7 @@ const failedFaviconUrls = new Set(); 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; diff --git a/packages/twenty-front/src/modules/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay.tsx b/packages/twenty-front/src/modules/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay.tsx index 66da656577..52dd50cfd2 100644 --- a/packages/twenty-front/src/modules/navigation-menu-item/display/view/components/ObjectIconWithViewOverlay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 7ccb82aefe..f5985ce393 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx index 7095b9d96e..ab16c5f880 100644 --- a/packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx index 1adb14a359..0bb77b79db 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx index e2afaf6f18..a695bf6fd4 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx index 8056f0fc7a..59ad6576fa 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx index 4c1febabdc..799b64d44c 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx index c2313d8af1..09ad2092d3 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx index 06ce31d65f..de2d05ee06 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx +++ b/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]}; } diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx index 142ddf7fef..789de6882f 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx index b344597cbb..1516495f30 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx @@ -64,7 +64,7 @@ const LoadingSkeleton = () => { diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx index e64daaefa5..28fef1762b 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx index 1983be89ac..1e3eaa58ac 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx index b84934bbbb..f0cf96234b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx index 1a02818238..e476beabb4 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellUuidFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellUuidFieldDisplay.tsx index fa2cda7e3e..3224b1d7df 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellUuidFieldDisplay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx index e21d54920c..ca0806b1f0 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx index d61fd87b15..a0d474febb 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingProfilePictureUploader.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingProfilePictureUploader.tsx index 601f8991db..1eb571e774 100644 --- a/packages/twenty-front/src/modules/onboarding/components/OnboardingProfilePictureUploader.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingCreditsRewardTag.tsx b/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingCreditsRewardTag.tsx index b13462e38d..65d5c37524 100644 --- a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingCreditsRewardTag.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingTrustBadges.tsx b/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingTrustBadges.tsx index cd229345d1..b0a30ab55b 100644 --- a/packages/twenty-front/src/modules/onboarding/components/import-contacts/OnboardingTrustBadges.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingPlanCard.tsx b/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingPlanCard.tsx index ba2c943f93..b6e61e0612 100644 --- a/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingPlanCard.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingTrialExtensionTag.tsx b/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingTrialExtensionTag.tsx index aeb80cf5f2..dd1a5160e9 100644 --- a/packages/twenty-front/src/modules/onboarding/components/upgrade-free-trial/OnboardingTrialExtensionTag.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx index f26af1facc..cb39f2b9a1 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/graph/components/GraphWidgetLegendDot.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx b/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx index a1f7d21679..f895f81cba 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/DashboardsBlockEditor.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx index 25279d8a77..2251cabab7 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageFolderIcon.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx b/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx index d0bc69aae4..3b7baa1b1f 100644 --- a/packages/twenty-front/src/modules/settings/admin-panel/health-status/components/SettingsAdminWorkerMetricsTooltip.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx b/packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx index 4bfb3bf13d..10eb143e80 100644 --- a/packages/twenty-front/src/modules/settings/ai/components/SettingsAiModelsTable.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx b/packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx index e7b5ec08ee..ee98e8a402 100644 --- a/packages/twenty-front/src/modules/settings/billing/components/SubscriptionBenefit.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoCard.tsx b/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoCard.tsx index 46f906ae5b..a66aa1fa18 100644 --- a/packages/twenty-front/src/modules/settings/billing/components/internal/SettingsBillingSubscriptionInfoCard.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx b/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx index 82542221d3..1df355d601 100644 --- a/packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewObject.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelToggleButton.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelToggleButton.tsx index d1f157562b..4f0c4d7f71 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelToggleButton.tsx +++ b/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} diff --git a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx b/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx index 38193535e1..410b5b2515 100644 --- a/packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx b/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx index acf4560d1b..6788320156 100644 --- a/packages/twenty-front/src/modules/ui/field/display/components/UploadFileChip.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx b/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx index 6961155da5..9cfde9b76e 100644 --- a/packages/twenty-front/src/modules/ui/input/components/ImageInput.tsx +++ b/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')}; diff --git a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx b/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx index c8cb8ae039..0730d86564 100644 --- a/packages/twenty-front/src/modules/ui/input/components/SelectControl.tsx +++ b/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 diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx index 80ac88dfa9..45ac4795ab 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx index 6c5a432420..4c32aa2c6c 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -48,8 +48,8 @@ const StyledAdornmentContainer = styled.div` 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; diff --git a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx index 3b517a204b..75f8cc14cd 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx index ae07239d32..29fbae4d18 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DatePicker.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx index 061fd1cd40..b0e04ba672 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx index 574ed2c247..699456207f 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePickerHeader.tsx +++ b/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]}; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/StyledDatePickerContainer.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/StyledDatePickerContainer.tsx index 3a95730f8d..f4b6ed4501 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/StyledDatePickerContainer.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx b/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx index 884f8efb69..cf47082cbe 100644 --- a/packages/twenty-front/src/modules/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx index 121eff7527..86dda2f8b0 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx +++ b/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')}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx index ce5ffd1c77..5780dc4d94 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx +++ b/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}; } `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx index 5962578ce6..adb9bd6498 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx @@ -15,7 +15,7 @@ export const StyledDropdownButtonContainer = styled.div isActive ? themeCssVariables.color.blue diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx index 1c03d3aae4..c84783c2cd 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx @@ -13,7 +13,7 @@ export const StyledHeaderDropdownButton = styled.button isActive ? themeCssVariables.color.blue diff --git a/packages/twenty-front/src/modules/ui/layout/hero/components/HeroPlayButton.tsx b/packages/twenty-front/src/modules/ui/layout/hero/components/HeroPlayButton.tsx index b4f4668ecc..66cd3675aa 100644 --- a/packages/twenty-front/src/modules/ui/layout/hero/components/HeroPlayButton.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx index 9b7b214e6c..e1ce9c49ce 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx +++ b/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 { diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx index 756d625e8a..3a0387b85d 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/components/PageCardLayout.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx b/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx index 0cc33abcb4..cfb8542de0 100644 --- a/packages/twenty-front/src/modules/ui/layout/resizable-panel/components/ResizablePanelEdge.tsx +++ b/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)'}; diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx index 22f2b4d24c..41ba8c4167 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/FieldRichTextCard.tsx @@ -38,7 +38,7 @@ const LoadingSkeleton = () => { diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx index d4b4702c77..814996d02e 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx +++ b/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'}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx b/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx index 444a5877cf..5c7b3243c1 100644 --- a/packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx +++ b/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'}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx index 91f2251e58..4a7ab8b090 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx +++ b/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')}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx index 99adc9925b..a79e3fe312 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index 705edf3004..c28c959035 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -88,7 +88,7 @@ const StyledItem = styled.button` 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; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx index 0ee407068a..31366a5728 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItemsCollapsableContainer.tsx +++ b/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, }; } } diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx index 2caac0574c..dc93a8fc1e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx index a977ff0c3b..e5d82d1d6b 100644 --- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx index a2d44e7697..895a52287c 100644 --- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeIconContainer.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeIconContainer.tsx index f34b3babef..b17890ccc4 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowNodeIconContainer.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/workspace-member/components/WorkspaceMemberAvatarStack.tsx b/packages/twenty-front/src/modules/workspace-member/components/WorkspaceMemberAvatarStack.tsx index d073ebabe2..7bdac8b447 100644 --- a/packages/twenty-front/src/modules/workspace-member/components/WorkspaceMemberAvatarStack.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/pages/onboarding/InstallAppsContent.tsx b/packages/twenty-front/src/pages/onboarding/InstallAppsContent.tsx index 1324a2ef2a..a02291e332 100644 --- a/packages/twenty-front/src/pages/onboarding/InstallAppsContent.tsx +++ b/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}; diff --git a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx b/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx index 68c280a3af..09293c7036 100644 --- a/packages/twenty-front/src/pages/onboarding/UpgradeFreeTrial.tsx +++ b/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; } diff --git a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolIcon.tsx b/packages/twenty-front/src/pages/settings/ai/components/SettingsToolIcon.tsx index 6597587d99..3cfb995dd8 100644 --- a/packages/twenty-front/src/pages/settings/ai/components/SettingsToolIcon.tsx +++ b/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; diff --git a/packages/twenty-front/src/pages/settings/enterprise/SettingsEnterprise.tsx b/packages/twenty-front/src/pages/settings/enterprise/SettingsEnterprise.tsx index 5bfb56c795..8b2f8f75b5 100644 --- a/packages/twenty-front/src/pages/settings/enterprise/SettingsEnterprise.tsx +++ b/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; `; diff --git a/packages/twenty-front/src/pages/settings/enterprise/components/OrganizationAdornment.tsx b/packages/twenty-front/src/pages/settings/enterprise/components/OrganizationAdornment.tsx index 55f7509a7c..8535195fcb 100644 --- a/packages/twenty-front/src/pages/settings/enterprise/components/OrganizationAdornment.tsx +++ b/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]}; diff --git a/packages/twenty-ui/dist/theme-dark.css b/packages/twenty-ui/dist/theme-dark.css index 13f94f5845..695e733767 100644 --- a/packages/twenty-ui/dist/theme-dark.css +++ b/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); + } +} diff --git a/packages/twenty-ui/dist/theme-light.css b/packages/twenty-ui/dist/theme-light.css index a298848664..c90c33882c 100644 --- a/packages/twenty-ui/dist/theme-light.css +++ b/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); + } +} diff --git a/packages/twenty-ui/src/data-display/Avatar/Avatar.module.scss b/packages/twenty-ui/src/data-display/Avatar/Avatar.module.scss index 2d689bd6ae..627763020f 100644 --- a/packages/twenty-ui/src/data-display/Avatar/Avatar.module.scss +++ b/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] { diff --git a/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.module.scss b/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.module.scss index 1843b2a50e..1d3501f3b8 100644 --- a/packages/twenty-ui/src/data-display/AvatarOrIcon/AvatarOrIcon.module.scss +++ b/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) diff --git a/packages/twenty-ui/src/data-display/Checkmark/Checkmark.module.scss b/packages/twenty-ui/src/data-display/Checkmark/Checkmark.module.scss index d254d14cd4..311054e5e9 100644 --- a/packages/twenty-ui/src/data-display/Checkmark/Checkmark.module.scss +++ b/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); } diff --git a/packages/twenty-ui/src/data-display/Chip/Chip.module.scss b/packages/twenty-ui/src/data-display/Chip/Chip.module.scss index b1cb285c22..81404a0b17 100644 --- a/packages/twenty-ui/src/data-display/Chip/Chip.module.scss +++ b/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; diff --git a/packages/twenty-ui/src/data-display/ColorSample/ColorSample.module.scss b/packages/twenty-ui/src/data-display/ColorSample/ColorSample.module.scss index 70b3b1725a..9fa0744ae1 100644 --- a/packages/twenty-ui/src/data-display/ColorSample/ColorSample.module.scss +++ b/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: ''; } diff --git a/packages/twenty-ui/src/data-display/NotificationCounter/NotificationCounter.module.scss b/packages/twenty-ui/src/data-display/NotificationCounter/NotificationCounter.module.scss index 9c27da0b8f..b7a95a14c0 100644 --- a/packages/twenty-ui/src/data-display/NotificationCounter/NotificationCounter.module.scss +++ b/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; diff --git a/packages/twenty-ui/src/data-display/Pill/Pill.module.scss b/packages/twenty-ui/src/data-display/Pill/Pill.module.scss index b3638527c0..35217bc01c 100644 --- a/packages/twenty-ui/src/data-display/Pill/Pill.module.scss +++ b/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); diff --git a/packages/twenty-ui/src/data-display/Status/Status.module.scss b/packages/twenty-ui/src/data-display/Status/Status.module.scss index b7c65ea5c6..d661ad105d 100644 --- a/packages/twenty-ui/src/data-display/Status/Status.module.scss +++ b/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; diff --git a/packages/twenty-ui/src/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer.module.scss b/packages/twenty-ui/src/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer.module.scss index 2925496a7b..22d77de8fc 100644 --- a/packages/twenty-ui/src/data-display/StyledTintedIconTileContainer/StyledTintedIconTileContainer.module.scss +++ b/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); } diff --git a/packages/twenty-ui/src/data-display/Tag/Tag.module.scss b/packages/twenty-ui/src/data-display/Tag/Tag.module.scss index 209c8a6891..91449ac977 100644 --- a/packages/twenty-ui/src/data-display/Tag/Tag.module.scss +++ b/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); diff --git a/packages/twenty-ui/src/feedback/Loader/Loader.module.scss b/packages/twenty-ui/src/feedback/Loader/Loader.module.scss index 81888e2b40..844fdc9b59 100644 --- a/packages/twenty-ui/src/feedback/Loader/Loader.module.scss +++ b/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; diff --git a/packages/twenty-ui/src/icon/components/IllustrationIconWrapper.module.scss b/packages/twenty-ui/src/icon/components/IllustrationIconWrapper.module.scss index 82edacd403..0f1fd4dce2 100644 --- a/packages/twenty-ui/src/icon/components/IllustrationIconWrapper.module.scss +++ b/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; } diff --git a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.module.scss b/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.module.scss index 2769c8d47e..87f015860d 100644 --- a/packages/twenty-ui/src/input/AnimatedButton/AnimatedButton.module.scss +++ b/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. diff --git a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.module.scss b/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.module.scss index 70c39e4398..d2a9e140f4 100644 --- a/packages/twenty-ui/src/input/AnimatedLightIconButton/AnimatedLightIconButton.module.scss +++ b/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; diff --git a/packages/twenty-ui/src/input/Button/Button.module.scss b/packages/twenty-ui/src/input/Button/Button.module.scss index 216052a709..2b63dedeb7 100644 --- a/packages/twenty-ui/src/input/Button/Button.module.scss +++ b/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, diff --git a/packages/twenty-ui/src/input/Checkbox/Checkbox.module.scss b/packages/twenty-ui/src/input/Checkbox/Checkbox.module.scss index e2d79849ba..0ed80b9188 100644 --- a/packages/twenty-ui/src/input/Checkbox/Checkbox.module.scss +++ b/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. diff --git a/packages/twenty-ui/src/input/CodeEditor/CodeEditor.module.scss b/packages/twenty-ui/src/input/CodeEditor/CodeEditor.module.scss index 9f84bdf473..53bcd50df9 100644 --- a/packages/twenty-ui/src/input/CodeEditor/CodeEditor.module.scss +++ b/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); } diff --git a/packages/twenty-ui/src/input/CodeEditorHeader/CodeEditorHeader.module.scss b/packages/twenty-ui/src/input/CodeEditorHeader/CodeEditorHeader.module.scss index de7bd20404..a57d86219c 100644 --- a/packages/twenty-ui/src/input/CodeEditorHeader/CodeEditorHeader.module.scss +++ b/packages/twenty-ui/src/input/CodeEditorHeader/CodeEditorHeader.module.scss @@ -5,8 +5,8 @@ height: var(--t-spacing-10); padding: 0 var(--t-spacing-2); border: 1px solid var(--t-border-color-medium); - border-top-left-radius: var(--t-border-radius-sm); - border-top-right-radius: var(--t-border-radius-sm); + border-top-left-radius: var(--t-border-radius-md); + border-top-right-radius: var(--t-border-radius-md); background-color: var(--t-background-transparent-lighter); color: var(--t-font-color-tertiary); font-weight: var(--t-font-weight-medium); diff --git a/packages/twenty-ui/src/input/FloatingButton/FloatingButton.module.scss b/packages/twenty-ui/src/input/FloatingButton/FloatingButton.module.scss index ba2c85b629..5d5f4dfb6d 100644 --- a/packages/twenty-ui/src/input/FloatingButton/FloatingButton.module.scss +++ b/packages/twenty-ui/src/input/FloatingButton/FloatingButton.module.scss @@ -8,7 +8,7 @@ backdrop-filter: var(--floating-button-backdrop-filter, none); background: var(--t-background-primary); border: var(--floating-button-border, none); - border-radius: var(--floating-button-radius, var(--t-border-radius-sm)); + border-radius: var(--floating-button-radius, var(--t-border-radius-md)); box-shadow: var(--floating-button-box-shadow, none); color: var(--floating-button-color, var(--t-font-color-secondary)); cursor: pointer; @@ -57,8 +57,8 @@ // position only reshapes the radius; standalone keeps the .button default. .button[data-position='left'] { - --floating-button-radius: var(--t-border-radius-sm) 0px 0px - var(--t-border-radius-sm); + --floating-button-radius: var(--t-border-radius-md) 0px 0px + var(--t-border-radius-md); } .button[data-position='middle'] { @@ -66,8 +66,8 @@ } .button[data-position='right'] { - --floating-button-radius: 0px var(--t-border-radius-sm) - var(--t-border-radius-sm) 0px; + --floating-button-radius: 0px var(--t-border-radius-md) + var(--t-border-radius-md) 0px; } .button[data-apply-blur] { diff --git a/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.module.scss b/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.module.scss index 46968ff258..a6c32083ca 100644 --- a/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.module.scss +++ b/packages/twenty-ui/src/input/FloatingIconButton/FloatingIconButton.module.scss @@ -9,7 +9,7 @@ backdrop-filter: none; background: var(--t-background-primary); border: 1px solid var(--t-border-color-strong); - border-radius: var(--floating-icon-button-radius, var(--t-border-radius-sm)); + border-radius: var(--floating-icon-button-radius, var(--t-border-radius-md)); box-shadow: none; box-sizing: border-box; color: var(--t-font-color-tertiary); @@ -47,9 +47,13 @@ width: 28px; } +// Grouped edges stay concentric with the FloatingIconButtonGroup container: +// its sm radius minus the 2px padding. The group container uses sm (not md) +// because at these sizes (24-32px) md would exceed 50% of the box, clamp to a +// full squircle, and break concentricity — see the group stylesheet. .button[data-position='left'] { - --floating-icon-button-radius: var(--t-border-radius-sm) 0px 0px - var(--t-border-radius-sm); + --floating-icon-button-radius: calc(var(--t-border-radius-sm) - 2px) 0px 0px + calc(var(--t-border-radius-sm) - 2px); } .button[data-position='middle'] { @@ -57,8 +61,8 @@ } .button[data-position='right'] { - --floating-icon-button-radius: 0px var(--t-border-radius-sm) - var(--t-border-radius-sm) 0px; + --floating-icon-button-radius: 0px calc(var(--t-border-radius-sm) - 2px) + calc(var(--t-border-radius-sm) - 2px) 0px; } .button[data-apply-blur] { diff --git a/packages/twenty-ui/src/input/FloatingIconButtonGroup/FloatingIconButtonGroup.module.scss b/packages/twenty-ui/src/input/FloatingIconButtonGroup/FloatingIconButtonGroup.module.scss index b19103a8c6..511c2f111b 100644 --- a/packages/twenty-ui/src/input/FloatingIconButtonGroup/FloatingIconButtonGroup.module.scss +++ b/packages/twenty-ui/src/input/FloatingIconButtonGroup/FloatingIconButtonGroup.module.scss @@ -1,6 +1,10 @@ .container { backdrop-filter: blur(20px); background-color: var(--t-background-primary); + // sm, not md: the container is only 24-32px tall, where md would exceed 50% + // of the box and clamp to a full squircle. A scaled full squircle is not a + // uniform offset, so the child buttons' corners would pull away from the + // frame. sm stays below the clamp point, keeping the group concentric. border-radius: var(--t-border-radius-sm); box-shadow: 0px 2px 4px 0px var(--t-background-transparent-light), diff --git a/packages/twenty-ui/src/input/IconButton/IconButton.module.scss b/packages/twenty-ui/src/input/IconButton/IconButton.module.scss index bfd60e2194..e6231c38d7 100644 --- a/packages/twenty-ui/src/input/IconButton/IconButton.module.scss +++ b/packages/twenty-ui/src/input/IconButton/IconButton.module.scss @@ -14,7 +14,7 @@ align-items: center; background: var(--icon-button-bg, transparent); border-color: var(--icon-button-border-color, transparent); - border-radius: var(--icon-button-radius, var(--t-border-radius-sm)); + border-radius: var(--icon-button-radius, var(--t-border-radius-md)); border-style: solid; border-width: var(--icon-button-border-width, 1px); box-shadow: var(--icon-button-box-shadow, none); @@ -62,10 +62,11 @@ } // position only reshapes the border radius; standalone keeps the .button -// fallback radius. +// fallback radius. Grouped IconButtons abut flush (no framing container), so +// their outer corners share the standalone md radius. .button[data-position='left'] { - --icon-button-radius: var(--t-border-radius-sm) 0px 0px - var(--t-border-radius-sm); + --icon-button-radius: var(--t-border-radius-md) 0px 0px + var(--t-border-radius-md); } .button[data-position='middle'] { @@ -73,7 +74,7 @@ } .button[data-position='right'] { - --icon-button-radius: 0px var(--t-border-radius-sm) var(--t-border-radius-sm) + --icon-button-radius: 0px var(--t-border-radius-md) var(--t-border-radius-md) 0px; } @@ -102,7 +103,7 @@ // keeps the base/focus value, mirroring the legacy switch. $primary-accents: ( 'default': ( - bg: var(--t-background-secondary), + bg: var(--t-background-transparent-lighter), border: var(--t-background-transparent-light), border-focus: var(--t-color-blue), border-disabled: null, @@ -112,8 +113,8 @@ $primary-accents: ( opacity-disabled: null, hover: var(--t-background-tertiary), active: var(--t-background-quaternary), - hover-disabled: var(--t-background-secondary), - active-disabled: var(--t-background-secondary), + hover-disabled: var(--t-background-transparent-lighter), + active-disabled: var(--t-background-transparent-lighter), ), 'blue': ( bg: var(--t-color-blue), diff --git a/packages/twenty-ui/src/input/IconButtonGroup/IconButtonGroup.module.scss b/packages/twenty-ui/src/input/IconButtonGroup/IconButtonGroup.module.scss index 6351090f93..c0297c07cd 100644 --- a/packages/twenty-ui/src/input/IconButtonGroup/IconButtonGroup.module.scss +++ b/packages/twenty-ui/src/input/IconButtonGroup/IconButtonGroup.module.scss @@ -3,6 +3,9 @@ backdrop-filter: blur(20px); background-color: var(--t-background-transparent-lighter); border: 1px solid var(--t-border-color-strong); + // sm, not md: the container is ~26px tall, where md would exceed 50% of the + // box and clamp to a full squircle, breaking concentricity with the inner + // buttons (see FloatingIconButtonGroup for the full rationale). border-radius: var(--t-border-radius-sm); display: inline-flex; gap: 2px; diff --git a/packages/twenty-ui/src/input/InsideButton/InsideButton.module.scss b/packages/twenty-ui/src/input/InsideButton/InsideButton.module.scss index af2ebbb5fc..a33464e4db 100644 --- a/packages/twenty-ui/src/input/InsideButton/InsideButton.module.scss +++ b/packages/twenty-ui/src/input/InsideButton/InsideButton.module.scss @@ -2,7 +2,9 @@ align-items: center; border: none; background-color: transparent; - border-radius: var(--t-border-radius-xs); + // Concentric with the IconButtonGroup sm container: its radius minus the + // 2px padding and 1px border. + border-radius: calc(var(--t-border-radius-sm) - 3px); color: var(--t-font-color-tertiary); cursor: pointer; display: flex; diff --git a/packages/twenty-ui/src/input/LightButton/LightButton.module.scss b/packages/twenty-ui/src/input/LightButton/LightButton.module.scss index a7d347acdd..f2119c05dc 100644 --- a/packages/twenty-ui/src/input/LightButton/LightButton.module.scss +++ b/packages/twenty-ui/src/input/LightButton/LightButton.module.scss @@ -9,7 +9,7 @@ align-items: center; background: transparent; border: var(--light-button-border, none); - border-radius: var(--t-border-radius-sm); + border-radius: var(--t-border-radius-md); box-shadow: var(--light-button-box-shadow, none); color: var(--light-button-color); cursor: pointer; diff --git a/packages/twenty-ui/src/input/LightIconButton/LightIconButton.module.scss b/packages/twenty-ui/src/input/LightIconButton/LightIconButton.module.scss index ceac7dc44f..f784993e23 100644 --- a/packages/twenty-ui/src/input/LightIconButton/LightIconButton.module.scss +++ b/packages/twenty-ui/src/input/LightIconButton/LightIconButton.module.scss @@ -9,7 +9,9 @@ align-items: center; background: transparent; border: var(--light-icon-button-border, none); - border-radius: var(--t-border-radius-sm); + // Containers that frame the button (e.g. RecordTableCellButtons) publish + // this variable to keep the hover shape concentric with their own radius. + border-radius: var(--light-icon-button-radius, var(--t-border-radius-md)); box-shadow: var(--light-icon-button-box-shadow, none); color: var(--light-icon-button-color); cursor: pointer; diff --git a/packages/twenty-ui/src/input/Radio/Radio.module.scss b/packages/twenty-ui/src/input/Radio/Radio.module.scss index e137561262..8cbde886e3 100644 --- a/packages/twenty-ui/src/input/Radio/Radio.module.scss +++ b/packages/twenty-ui/src/input/Radio/Radio.module.scss @@ -12,6 +12,7 @@ background-color: transparent; border: 1px solid var(--t-font-color-secondary); border-radius: var(--t-border-radius-rounded); + corner-shape: round; // The border sits outside the declared size, matching the legacy input rendering. box-sizing: content-box; display: block; @@ -50,6 +51,7 @@ .radio[data-checked]::after { background-color: var(--t-gray-scale-gray1); border-radius: 50%; + corner-shape: round; content: ''; height: 6px; left: 50%; diff --git a/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.module.scss b/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.module.scss index 84fe8297d8..1b1b897f1e 100644 --- a/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.module.scss +++ b/packages/twenty-ui/src/input/RoundedIconButton/RoundedIconButton.module.scss @@ -3,6 +3,7 @@ background: var(--t-color-blue); border: none; border-radius: 50%; + corner-shape: round; color: var(--t-font-color-inverted); cursor: pointer; display: flex; diff --git a/packages/twenty-ui/src/input/SearchInput/SearchInput.module.scss b/packages/twenty-ui/src/input/SearchInput/SearchInput.module.scss index cf35289313..2456f9289f 100644 --- a/packages/twenty-ui/src/input/SearchInput/SearchInput.module.scss +++ b/packages/twenty-ui/src/input/SearchInput/SearchInput.module.scss @@ -9,7 +9,7 @@ align-items: center; background-color: var(--t-background-transparent-lighter); border: 1px solid var(--t-border-color-medium); - border-radius: var(--t-border-radius-sm); + border-radius: var(--t-border-radius-md); box-sizing: border-box; display: flex; flex: 1; diff --git a/packages/twenty-ui/src/input/SegmentedControl/SegmentedControl.module.scss b/packages/twenty-ui/src/input/SegmentedControl/SegmentedControl.module.scss index 1589160b6a..6c902759bc 100644 --- a/packages/twenty-ui/src/input/SegmentedControl/SegmentedControl.module.scss +++ b/packages/twenty-ui/src/input/SegmentedControl/SegmentedControl.module.scss @@ -3,6 +3,7 @@ background: var(--t-background-secondary); border: 1px solid var(--t-border-color-medium); border-radius: var(--t-border-radius-pill); + corner-shape: round; box-sizing: border-box; display: inline-flex; flex-shrink: 0; @@ -17,6 +18,7 @@ background: transparent; border: 0; border-radius: var(--t-border-radius-pill); + corner-shape: round; color: var(--t-font-color-secondary); cursor: pointer; display: flex; diff --git a/packages/twenty-ui/src/input/Slider/Slider.module.scss b/packages/twenty-ui/src/input/Slider/Slider.module.scss index 6a8eef422c..f3fc328c60 100644 --- a/packages/twenty-ui/src/input/Slider/Slider.module.scss +++ b/packages/twenty-ui/src/input/Slider/Slider.module.scss @@ -20,6 +20,7 @@ .track { background: var(--t-background-tertiary); border-radius: var(--t-border-radius-pill); + corner-shape: round; height: var(--slider-track-size); inset: 0; overflow: hidden; @@ -29,6 +30,7 @@ .fill { background: var(--slider-main-color); border-radius: var(--t-border-radius-pill); + corner-shape: round; height: 100%; left: 0; min-width: var(--slider-track-size); @@ -39,6 +41,7 @@ &::after { background: var(--t-background-primary); border-radius: var(--t-border-radius-rounded); + corner-shape: round; content: ''; height: var(--slider-thumb-size); position: absolute; @@ -70,6 +73,7 @@ background: transparent; border: 0; border-radius: var(--t-border-radius-rounded); + corner-shape: round; height: var(--slider-thumb-size); margin-top: 2px; width: var(--slider-thumb-size); @@ -85,6 +89,7 @@ background: transparent; border: 0; border-radius: var(--t-border-radius-rounded); + corner-shape: round; height: var(--slider-thumb-size); width: var(--slider-thumb-size); } diff --git a/packages/twenty-ui/src/input/TabButton/parts/StyledTabBase.module.scss b/packages/twenty-ui/src/input/TabButton/parts/StyledTabBase.module.scss index 26e78ff720..7d483c09aa 100644 --- a/packages/twenty-ui/src/input/TabButton/parts/StyledTabBase.module.scss +++ b/packages/twenty-ui/src/input/TabButton/parts/StyledTabBase.module.scss @@ -84,7 +84,7 @@ font-weight: var(--t-font-weight-medium); width: 100%; white-space: nowrap; - border-radius: var(--t-border-radius-sm); + border-radius: var(--t-border-radius-md); &[data-content-size='sm'] { padding: var(--t-spacing-1) var(--t-spacing-2); diff --git a/packages/twenty-ui/src/input/Toggle/Toggle.module.scss b/packages/twenty-ui/src/input/Toggle/Toggle.module.scss index 953059a389..643572e3af 100644 --- a/packages/twenty-ui/src/input/Toggle/Toggle.module.scss +++ b/packages/twenty-ui/src/input/Toggle/Toggle.module.scss @@ -4,7 +4,8 @@ flex-shrink: 0; align-items: center; align-self: flex-start; - border-radius: 10px; + border-radius: var(--t-border-radius-pill); + corner-shape: round; background-color: var(--t-background-transparent-medium); cursor: pointer; transition: background-color duration(normal) ease; @@ -39,6 +40,7 @@ left: 0; display: block; border-radius: 50%; + corner-shape: round; background-color: var(--t-background-primary); transition: transform duration(normal) ease; } diff --git a/packages/twenty-ui/src/layout/ResizeHandle/ResizeHandle.module.scss b/packages/twenty-ui/src/layout/ResizeHandle/ResizeHandle.module.scss index 42fc2e287d..92118d7703 100644 --- a/packages/twenty-ui/src/layout/ResizeHandle/ResizeHandle.module.scss +++ b/packages/twenty-ui/src/layout/ResizeHandle/ResizeHandle.module.scss @@ -10,6 +10,7 @@ .bar { background-color: var(--t-background-quaternary); border-radius: var(--t-border-radius-pill); + corner-shape: round; height: 3px; transition: background-color duration(fast); width: 32px; diff --git a/packages/twenty-ui/src/navigation/MenuItem/parts/StyledMenuItemBase.module.scss b/packages/twenty-ui/src/navigation/MenuItem/parts/StyledMenuItemBase.module.scss index 82dddb2a1a..8183b575ee 100644 --- a/packages/twenty-ui/src/navigation/MenuItem/parts/StyledMenuItemBase.module.scss +++ b/packages/twenty-ui/src/navigation/MenuItem/parts/StyledMenuItemBase.module.scss @@ -7,7 +7,8 @@ // Height and width below are sized against the content box. box-sizing: content-box; align-items: center; - border-radius: var(--t-border-radius-sm); + // Concentric with the md dropdown container: parent radius minus its inset. + border-radius: calc(var(--t-border-radius-md) - var(--t-spacing-1)); display: flex; flex-direction: row; font-size: var(--t-font-size-sm); diff --git a/packages/twenty-ui/src/navigation/MenuItemHotKeys/MenuItemHotKeys.module.scss b/packages/twenty-ui/src/navigation/MenuItemHotKeys/MenuItemHotKeys.module.scss index bd2383bd27..52fc75463f 100644 --- a/packages/twenty-ui/src/navigation/MenuItemHotKeys/MenuItemHotKeys.module.scss +++ b/packages/twenty-ui/src/navigation/MenuItemHotKeys/MenuItemHotKeys.module.scss @@ -17,7 +17,8 @@ align-items: center; background-color: var(--t-background-secondary); border: 1px solid var(--t-border-color-strong); - border-radius: var(--t-border-radius-sm); + // Concentric with the md dropdown container: parent radius minus its inset. + border-radius: calc(var(--t-border-radius-md) - var(--t-spacing-1)); box-shadow: var(--t-box-shadow-underline); display: flex; flex-direction: column; diff --git a/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.module.scss b/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.module.scss index 02951ef48c..d51cb64730 100644 --- a/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.module.scss +++ b/packages/twenty-ui/src/navigation/MenuItemSelect/MenuItemSelect.module.scss @@ -5,7 +5,8 @@ // Height and width below are sized against the content box. box-sizing: content-box; align-items: center; - border-radius: var(--t-border-radius-sm); + // Concentric with the md dropdown container: parent radius minus its inset. + border-radius: calc(var(--t-border-radius-md) - var(--t-spacing-1)); display: flex; flex-direction: row; font-size: var(--t-font-size-sm); diff --git a/packages/twenty-ui/src/navigation/MenuItemSuggestion/MenuItemSuggestion.module.scss b/packages/twenty-ui/src/navigation/MenuItemSuggestion/MenuItemSuggestion.module.scss index e2cde3dba7..32dc0c98df 100644 --- a/packages/twenty-ui/src/navigation/MenuItemSuggestion/MenuItemSuggestion.module.scss +++ b/packages/twenty-ui/src/navigation/MenuItemSuggestion/MenuItemSuggestion.module.scss @@ -5,7 +5,8 @@ // Height below is sized against the content box. box-sizing: content-box; align-items: center; - border-radius: var(--t-border-radius-sm); + // Concentric with the md dropdown container: parent radius minus its inset. + border-radius: calc(var(--t-border-radius-md) - var(--t-spacing-1)); cursor: pointer; display: flex; flex-direction: row; diff --git a/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.module.scss b/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.module.scss index 29ce802164..10932c35ad 100644 --- a/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.module.scss +++ b/packages/twenty-ui/src/navigation/MenuPicker/MenuPicker.module.scss @@ -5,7 +5,8 @@ outline: inherit; align-items: center; border: 1px solid var(--t-border-color-medium); - border-radius: var(--t-border-radius-sm); + // Concentric with the md dropdown container: parent radius minus its inset. + border-radius: calc(var(--t-border-radius-md) - var(--t-spacing-1)); color: var(--t-font-color-tertiary); cursor: pointer; display: flex; diff --git a/packages/twenty-ui/src/navigation/RoundedLink/RoundedLink.module.scss b/packages/twenty-ui/src/navigation/RoundedLink/RoundedLink.module.scss index 61a13d6746..1fa04af395 100644 --- a/packages/twenty-ui/src/navigation/RoundedLink/RoundedLink.module.scss +++ b/packages/twenty-ui/src/navigation/RoundedLink/RoundedLink.module.scss @@ -2,7 +2,8 @@ align-items: center; background-color: var(--t-background-transparent-lighter); border: 1px solid var(--t-border-color-strong); - border-radius: 50px; + border-radius: var(--t-border-radius-pill); + corner-shape: round; // Height and max-width are sized against the content box. box-sizing: content-box; color: var(--t-font-color-primary); diff --git a/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.module.scss b/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.module.scss index 03079cd6ca..0b5ff12fa3 100644 --- a/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.module.scss +++ b/packages/twenty-ui/src/surfaces/AppTooltip/AppTooltip.module.scss @@ -8,7 +8,7 @@ .tooltip { backdrop-filter: var(--t-blur-strong); background-color: var(--t-color-transparent-gray11); - border-radius: var(--t-border-radius-sm); + border-radius: var(--t-border-radius-md); box-shadow: var(--t-box-shadow-light); color: var(--t-gray-scale-gray1); font-size: var(--t-font-size-sm); diff --git a/packages/twenty-ui/src/surfaces/Card/Card.module.scss b/packages/twenty-ui/src/surfaces/Card/Card.module.scss index 804772e08a..610bf78605 100644 --- a/packages/twenty-ui/src/surfaces/Card/Card.module.scss +++ b/packages/twenty-ui/src/surfaces/Card/Card.module.scss @@ -1,7 +1,7 @@ .card { background-color: var(--card-background-color, transparent); border: 1px solid var(--t-border-color-medium); - border-radius: var(--t-border-radius-sm); + border-radius: var(--t-border-radius-md); color: var(--t-font-color-secondary); overflow: hidden; width: auto; diff --git a/packages/twenty-ui/src/theme-constants/__tests__/cornerShapeThemeParity.test.ts b/packages/twenty-ui/src/theme-constants/__tests__/cornerShapeThemeParity.test.ts new file mode 100644 index 0000000000..c46f81268b --- /dev/null +++ b/packages/twenty-ui/src/theme-constants/__tests__/cornerShapeThemeParity.test.ts @@ -0,0 +1,102 @@ +import * as fs from 'fs'; +import * as path from 'path'; + +import { BORDER_COMMON } from '@ui/theme/constants/BorderCommon'; + +// The squircle block in the theme CSS doubles every corner radius token, +// because a squircle needs ~2x the radius of a round corner to read as the +// same visual size. These tests pin that invariant so the base scale and the +// squircle overrides cannot drift apart, and keep the committed dist copies +// in sync with the source files. + +const THEME_CONSTANTS_DIR = path.resolve(__dirname, '..'); +const DIST_DIR = path.resolve(__dirname, '../../../dist'); + +const CORNER_RADIUS_TOKENS = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; +const MAXED_RADIUS_TOKENS = ['pill', 'rounded'] as const; +// Shape-independent radii for elements that keep corner-shape: round +// (checkboxes, chips, tags): same visual size in both modes. +const ROUND_RADIUS_TOKENS = [ + { token: 'sm-round', matchesBaseToken: 'sm' }, + { token: 'md-round', matchesBaseToken: 'md' }, +] as const; + +const readThemeCss = (fileName: string) => + fs.readFileSync(path.join(THEME_CONSTANTS_DIR, fileName), 'utf-8'); + +const extractSquircleBlock = (css: string) => { + const match = css.match( + /@supports \(corner-shape: squircle\) \{([\s\S]*?)\n\}/, + ); + + if (match === null) { + throw new Error('Missing @supports (corner-shape: squircle) block'); + } + + return match[1]; +}; + +const extractRadiusPx = (css: string, token: string) => { + const match = css.match(new RegExp(`--t-border-radius-${token}: (\\d+)px;`)); + + if (match === null) { + throw new Error(`Missing --t-border-radius-${token} declaration`); + } + + return Number(match[1]); +}; + +describe.each(['theme-light.css', 'theme-dark.css'])( + 'squircle corner overrides in %s', + (fileName) => { + const css = readThemeCss(fileName); + const squircleBlock = extractSquircleBlock(css); + const baseCss = css.replace(squircleBlock, ''); + + it.each(CORNER_RADIUS_TOKENS)( + 'doubles the %s radius token for squircle corners', + (token) => { + const baseValue = extractRadiusPx(baseCss, token); + const squircleValue = extractRadiusPx(squircleBlock, token); + + expect(squircleValue).toBe(baseValue * 2); + }, + ); + + it.each(CORNER_RADIUS_TOKENS)( + 'keeps the base %s radius token aligned with BORDER_COMMON', + (token) => { + expect(`${extractRadiusPx(baseCss, token)}px`).toBe( + BORDER_COMMON.radius[token], + ); + }, + ); + + it.each(MAXED_RADIUS_TOKENS)( + 'does not redefine the %s token, which is already at its geometric maximum', + (token) => { + expect(squircleBlock).not.toContain(`--t-border-radius-${token}`); + }, + ); + + it.each(ROUND_RADIUS_TOKENS)( + 'keeps the shape-independent $token token undoubled and equal to the base $matchesBaseToken value', + ({ token, matchesBaseToken }) => { + expect(squircleBlock).not.toContain(`--t-border-radius-${token}`); + expect(extractRadiusPx(baseCss, token)).toBe( + extractRadiusPx(baseCss, matchesBaseToken), + ); + }, + ); + + it('applies corner-shape universally with the --t-corner-shape opt-out', () => { + expect(squircleBlock).toContain( + 'corner-shape: var(--t-corner-shape, squircle);', + ); + }); + + it('is mirrored byte-for-byte into the committed dist copy', () => { + expect(fs.readFileSync(path.join(DIST_DIR, fileName), 'utf-8')).toBe(css); + }); + }, +); diff --git a/packages/twenty-ui/src/theme-constants/theme-dark.css b/packages/twenty-ui/src/theme-constants/theme-dark.css index 13f94f5845..695e733767 100644 --- a/packages/twenty-ui/src/theme-constants/theme-dark.css +++ b/packages/twenty-ui/src/theme-constants/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); + } +} diff --git a/packages/twenty-ui/src/theme-constants/theme-light.css b/packages/twenty-ui/src/theme-constants/theme-light.css index a298848664..c90c33882c 100644 --- a/packages/twenty-ui/src/theme-constants/theme-light.css +++ b/packages/twenty-ui/src/theme-constants/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); + } +} diff --git a/packages/twenty-ui/src/theme-constants/themeCssVariables.ts b/packages/twenty-ui/src/theme-constants/themeCssVariables.ts index fac62cc1da..393a929a73 100644 --- a/packages/twenty-ui/src/theme-constants/themeCssVariables.ts +++ b/packages/twenty-ui/src/theme-constants/themeCssVariables.ts @@ -174,6 +174,9 @@ export const themeCssVariables = { xs: 'var(--t-border-radius-xs)', sm: 'var(--t-border-radius-sm)', md: 'var(--t-border-radius-md)', + smRound: 'var(--t-border-radius-sm-round)', + mdRound: 'var(--t-border-radius-md-round)', + lg: 'var(--t-border-radius-lg)', xl: 'var(--t-border-radius-xl)', xxl: 'var(--t-border-radius-xxl)', pill: 'var(--t-border-radius-pill)', diff --git a/packages/twenty-ui/src/theme/constants/BorderCommon.ts b/packages/twenty-ui/src/theme/constants/BorderCommon.ts index b941244508..490574603b 100644 --- a/packages/twenty-ui/src/theme/constants/BorderCommon.ts +++ b/packages/twenty-ui/src/theme/constants/BorderCommon.ts @@ -3,6 +3,9 @@ export const BORDER_COMMON = { xs: '2px', sm: '4px', md: '8px', + smRound: '4px', + mdRound: '8px', + lg: '16px', xl: '20px', xxl: '40px', pill: '999px',