houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Squirclesssss 🟦🔵 (#22535)

Browse Source
This commit is contained in:
Thomas des Francs
2026-07-04 07:07:29 +02:00
committed by GitHub
parent badaae17cd
commit e609320666
130 changed files with 517 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: 4px;
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
flex: 1;
flex-direction: column;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx
+5 -3
View File
@@ -9,11 +9,12 @@ const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
danger ? themeCssVariables.color.red3 : themeCssVariables.color.blue3};
border-color: ${({ danger }) =>
danger ? themeCssVariables.color.red5 : themeCssVariables.color.blue5};
border-radius: 4px;
border-radius: ${themeCssVariables.border.radius.smRound};
border-style: solid;
border-width: 1px;
box-sizing: border-box;
column-gap: ${themeCssVariables.spacing[1]};
corner-shape: round;
cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')};
display: inline-flex;
flex-direction: row;
@@ -37,11 +38,12 @@ const StyledDelete = styled.button<{ danger: boolean }>`
align-items: center;
background: none;
border: none;
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${themeCssVariables.border.radius.smRound};
border-top-right-radius: ${themeCssVariables.border.radius.smRound};
box-sizing: border-box;
color: ${({ danger }) =>
danger ? themeCssVariables.color.red : themeCssVariables.color.blue};
corner-shape: round;
cursor: pointer;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx
+2 -2
View File
@@ -36,7 +36,7 @@ const StyledAdvancedTextFieldFieldContainer = styled.div`
const StyledAdvancedTextFieldInnerContainer = styled.div`
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
box-sizing: border-box;
display: flex;
@@ -61,7 +61,7 @@ const StyledEditorActionButtonContainer = styled.div<{
const StyledFullScreenEditorContainer = styled.div`
background-color: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
flex: 1;
min-height: 0;
overflow-y: auto;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx
+2 -2
View File
@@ -31,10 +31,10 @@ const StyledDescription = styled.span`
const StyledToggleContainer = styled.div`
background-color: ${themeCssVariables.background.transparent.lighter};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${themeCssVariables.border.radius.md};
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-top: 1px solid ${themeCssVariables.border.color.medium};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.md};
display: flex;
padding-bottom: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx
+4 -4
View File
@@ -20,16 +20,16 @@ const StyledFormFieldInputInnerContainer = styled.div<
align-items: ${({ multiline }) => (multiline ? 'flex-start' : 'center')};
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-left-radius: ${themeCssVariables.border.radius.md};
border-bottom-right-radius: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
multiline || !hasRightElement ? themeCssVariables.border.radius.md : '0'};
border-right: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement
? `1px solid ${themeCssVariables.border.color.medium}`
: 'none'};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
multiline || !hasRightElement ? themeCssVariables.border.radius.md : '0'};
box-sizing: border-box;
display: flex;
justify-content: space-between;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledFormNestedFieldInputContainer = styled.div`
background: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx
+2 -2
View File
@@ -52,14 +52,14 @@ const StyledEditor = styled.div<{
.variable-tag {
background-color: ${themeCssVariables.color.blue3};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.color.blue};
padding: ${themeCssVariables.spacing[1]};
}
.text-tag {
background-color: ${themeCssVariables.color.blue3};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.color.blue};
padding: ${themeCssVariables.spacing[1]};
}
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const StyledContainer = styled.div`
align-items: center;
background: ${themeCssVariables.background.transparent.light};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.tertiary};
display: inline-flex;
font-size: ${themeCssVariables.font.size.md};
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ const LoadingSkeleton = () => {
<SkeletonTheme
baseColor={theme.background.tertiary}
highlightColor={theme.background.transparent.lighter}
borderRadius={theme.border.radius.sm}
borderRadius={themeCssVariables.border.radius.md}
>
<Skeleton height={SKELETON_LOADER_HEIGHT_SIZES.standard.s} />
</SkeletonTheme>
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
isHovered && !readonly && !disableHoverEffect
? themeCssVariables.background.transparent.light
: 'transparent'};
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
cursor: ${({ isHovered, readonly }) =>
isHovered && !readonly ? 'pointer' : 'default'};
display: flex;
packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ const StyledPropertyBoxContainer = styled.div<{
noHorizontalPadding?: boolean;
}>`
align-self: stretch;
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx
+7
View File
@@ -5,6 +5,13 @@ import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
import { AnimatedContainer } from 'twenty-ui/layout';
const StyledButtonContainer = styled.div`
/* Buttons stay concentric with the frame: its radius minus the 1px border.
The frame uses sm (not md): on this ~26px control md would exceed 50% of
the box and clamp to a full squircle, and a scaled full squircle is not a
uniform offset — the child corners would pull away from the frame. sm
stays well below the clamp point so radius - inset holds in both modes. */
--light-icon-button-radius: calc(${themeCssVariables.border.radius.sm} - 1px);
border: 1px solid ${themeCssVariables.border.color.strong};
@media (max-width: ${MOBILE_VIEWPORT}px) {
position: relative;
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ const StyledDiv = styled.div`
align-items: center;
background: inherit;
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellUuidFieldDisplay.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const StyledDiv = styled.div`
align-items: center;
background: inherit;
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.md};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
display: flex;
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
+1 -1
View File
@@ -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;