Squirclesssss 🟦🔵 (#22535)

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

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

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

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

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

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

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

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

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

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

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);

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] {

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] {

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),

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),

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;

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;

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;

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;

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%;

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;

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;

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;

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);
   }

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);

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;
 }