@12-apps/ui 6.29.1 → 6.31.0

package/src/components/form/Button/Button.native.tsx

@@ -19,7 +19,6 @@ import {
   BUTTON_FONT_WEIGHT,
   BUTTON_ICON_GAP_UNITS,
   BUTTON_LINE_HEIGHT,
-  BUTTON_RADIUS_UNITS,
   BUTTON_SIZES,
   BUTTON_SPINNER_SIZE,
   BUTTON_WASH_ALPHA,
@@ -214,7 +213,8 @@ function buttonLook(theme: UiTheme, props: ResolvedProps): ButtonLook {
   const iconOnly = !loading && icon != null && children == null;
   const inactive = Boolean(disabled) || loading;
   const paint = inactive ? disabledPaint(theme, variant) : paintFor(theme, variant, color, palette, active);
-  const radius = theme.spacing(BUTTON_RADIUS_UNITS);
+  // The theme's one field radius, so a button and the input beside it agree.
+  const radius = theme.radius.field;
   const metrics = BUTTON_SIZES[size];
   // The web button is `overflow: hidden` (its ripple needs it) unless the pulse
   // ring turns it visible; on native the glow's shadow needs it visible too,

package/src/components/form/Button/Button.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { resolveButtonProps } from './Button.helpers';
 import { BUTTON_ICON_GLYPH_SIZE } from './Button.metrics';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { fieldRadius } from '../../../tokens/field-radius';
 import {
   buttonEmphasisStyles,
   buttonVariantStyles,
@@ -32,7 +33,7 @@ const StyledButton = styled(MuiButton, {
   return {
     textTransform: 'none',
     fontWeight: 500,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s ease',
     position: 'relative',
     overflow: 'hidden',

package/src/components/form/CategorySelect/CategoryPanelFoot.tsx

@@ -5,12 +5,13 @@ import Button from '@mui/material/Button/index.js';
 
 import type { CategorySelectCopy } from '../../../copy';
 import { footerSx, METRICS } from './CategorySelect.styles';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const buttonSx = (sheet: boolean) =>
   ({
     height: sheet ? METRICS.sheetFooterButton : METRICS.footerButton,
     padding: '0 13px',
-    borderRadius: '8px',
+    borderRadius: fieldRadiusPx,
     fontSize: 12.5,
     fontWeight: 600,
     textTransform: 'none',

package/src/components/form/CategorySelect/CategoryPanelHead.tsx

@@ -13,6 +13,7 @@ import {
   pinnedSx,
 } from './CategorySelect.styles';
 import type { CategorySelectionChip } from './CategorySelect.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 interface PanelHeadProps {
   query: string;
@@ -37,7 +38,7 @@ const searchFieldSx = {
     fontSize: 13,
     border: '1px solid',
     borderColor: 'divider',
-    borderRadius: '9px',
+    borderRadius: fieldRadiusPx,
     background: 'background.paper',
     color: 'text.primary',
     '&:focus': {

package/src/components/form/CategorySelect/CategorySelect.styles.ts

@@ -1,6 +1,7 @@
 import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /**
  * The prototype's METRICS, verbatim.
@@ -10,6 +11,10 @@ import { fieldEdge } from '../../../tokens/field-edge';
  * a half-pixel type scale (13.5px rows, 1.5px checkbox borders) that an 8px
  * spacing grid cannot express without rounding the look away.
  *
+ * The trigger's CORNER is the other exception: it is a field, so it takes the
+ * theme's one field radius (`tokens/field-radius`) and lines up with the inputs
+ * and filter pills it sits beside.
+ *
  * COLOURS are the deliberate exception — they come from the theme, because a
  * tenant can white-label the palette (a hard-coded indigo would survive the
  * rebrand and the rest of the screen would not) and because the library ships a
@@ -18,7 +23,6 @@ import { fieldEdge } from '../../../tokens/field-edge';
  */
 export const METRICS = {
   triggerHeight: 38,
-  triggerRadius: 10,
   panelWidth: 340,
   panelRadius: 14,
   listMaxHeight: 290,
@@ -54,7 +58,7 @@ export const triggerSx = (theme: Theme, selected: boolean, open: boolean): CSSOb
     gap: '8px',
     height: METRICS.triggerHeight,
     padding: '0 10px 0 12px',
-    borderRadius: `${METRICS.triggerRadius}px`,
+    borderRadius: fieldRadiusPx(theme),
     border: `1px solid ${open || selected ? brand.edge : fieldEdge(theme)}`,
     background: selected ? brand.soft : theme.palette.background.paper,
     color: selected ? brand.ink : theme.palette.text.primary,

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -13,6 +13,7 @@ import type { CodeEditorProps } from './CodeEditor.types';
 import { EditorToolbar } from './CodeEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Styled components
 const EditorContainer = styled(Paper)(({ theme }) => ({
@@ -22,7 +23,7 @@ const EditorContainer = styled(Paper)(({ theme }) => ({
   backdropFilter: 'blur(10px)',
   WebkitBackdropFilter: 'blur(10px)',
   border: `1px solid ${fieldEdge(theme)}`,
-  borderRadius: theme.shape.borderRadius * 2,
+  borderRadius: fieldRadius(theme),
   overflow: 'hidden' }));
 
 const EditorWrapper = styled(Box, {

package/src/components/form/CreatableSelect/CreatableSelect.tsx

@@ -13,6 +13,7 @@ import type { CreatableSelectOption, CreatableSelectProps } from './CreatableSel
 import type { SizeValue } from '../../../tokens/scales';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /** Internal option shape: a real option, or the synthetic "create new" row. */
 interface InternalOption extends CreatableSelectOption {
@@ -36,6 +37,7 @@ const MUI_SIZE = { xs: 'small', sm: 'small', md: 'medium', lg: 'medium', xl: 'me
 /** Match the outlined border treatment of `Input` so siblings look identical. */
 const fieldSx = {
   '& .MuiOutlinedInput-root': {
+    borderRadius: fieldRadiusPx,
     '& fieldset': {
       borderColor: (theme: Theme) => fieldEdge(theme),
     },

package/src/components/form/Input/Input.look.native.ts

@@ -119,13 +119,16 @@ function backgroundFor(theme: UiTheme, variant: InputVariant, state: FieldState)
   }
 }
 
-/** `filled` rounds its top two corners, `underline` none, the rest all four. */
+/**
+ * The theme's one field radius: `filled` rounds its top two corners with it,
+ * `underline` none, the rest all four.
+ */
 function radiusFor(theme: UiTheme, variant: InputVariant): ViewStyle {
   if (variant === 'underline') return {};
   if (variant === 'filled') {
-    return { borderTopLeftRadius: theme.radius.md, borderTopRightRadius: theme.radius.md };
+    return { borderTopLeftRadius: theme.radius.field, borderTopRightRadius: theme.radius.field };
   }
-  return { borderRadius: theme.radius.md };
+  return { borderRadius: theme.radius.field };
 }
 
 /** The border as React Native writes it: a width per side, one colour, one style. */

package/src/components/form/Input/Input.metrics.ts

@@ -170,10 +170,12 @@ export const INPUT_GLOW = {
   focused: { blur: 20, alpha: 0.5 },
 } as const;
 
-/** `pulse`: a 56px bar behind the field, fading outward every two seconds. */
+/**
+ * `pulse`: a 56px bar behind the field, fading outward every two seconds. Its
+ * corner is the field's own — `fieldRadius` on the web, `radius.field` native.
+ */
 export const INPUT_PULSE = {
   height: 56,
-  radiusUnits: 0.5,
   opacity: 0.3,
   ms: 2000,
   spread: 10,

package/src/components/form/Input/Input.native.tsx

@@ -17,7 +17,7 @@ import {
 import { resolveInputProps } from './Input.helpers';
 import { FieldPulse } from '../field-pulse.native';
 import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.look.native';
-import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING, INPUT_PULSE } from './Input.metrics';
+import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING } from './Input.metrics';
 import type { InputProps } from './Input.types.native';
 import { webAria, webClick, webDisabled } from '../../../platform/aria';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
@@ -180,7 +180,7 @@ export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) =
       {pulse ? (
         <FieldPulse
           color={theme.palette.primary.main}
-          radius={theme.spacing(INPUT_PULSE.radiusUnits)}
+          radius={theme.radius.field}
           testID={idFor('pulse')}
         />
       ) : null}

package/src/components/form/Input/Input.styles.ts

@@ -13,6 +13,7 @@ import {
 import type { InputProps } from './Input.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 type InputVariant = NonNullable<InputProps['variant']>;
 
@@ -56,7 +57,7 @@ export const pulseStyles = (theme: Theme): CSSObject => ({
     right: '0',
     height: `${INPUT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(INPUT_PULSE.radiusUnits),
+    borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: INPUT_PULSE.opacity,
     animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1000}s infinite`,
@@ -76,6 +77,18 @@ export const floatingLabelStyles = (theme: Theme): CSSObject => ({
   },
 });
 
+/**
+ * The field's corner: the theme's one field radius (see `tokens/field-radius`).
+ * `filled` rounds its top two only — its bottom edge is the underline — and
+ * `underline` none, which is how MUI draws those two variants.
+ */
+export const inputRadiusStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
+  if (variant === 'underline') return {};
+  const radius = fieldRadius(theme);
+  if (variant === 'filled') return { borderTopLeftRadius: radius, borderTopRightRadius: radius };
+  return { borderRadius: radius };
+};
+
 export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject => {
   switch (variant) {
     case 'glass':

package/src/components/form/Input/Input.tsx

@@ -11,6 +11,7 @@ import {
   floatingLabelStyles,
   glowStyles,
   inputBaseStyles,
+  inputRadiusStyles,
   muiVariantFor,
   outlinedStyles,
   pulseStyles,
@@ -45,6 +46,7 @@ const StyledTextField = styled(TextFieldSlim, {
 
   '& .MuiInputBase-root': {
     transition: 'all 0.3s ease',
+    ...inputRadiusStyles(theme, customVariant),
     ...inputBaseStyles(theme, customVariant),
   },
 

package/src/components/form/InputOTP/InputOTP.styles.ts

@@ -2,6 +2,7 @@ import { alpha } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 interface ColorPalette {
   main: string;
@@ -80,7 +81,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
       fontSize,
       fontWeight: 600,
       textAlign: 'center',
-      borderRadius: theme.spacing(1),
+      borderRadius: fieldRadius(theme),
       ...(glass && {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
         backdropFilter: 'blur(20px)',

package/src/components/form/PhoneInput/PhoneInput.tsx

@@ -18,12 +18,17 @@ import type { CountryData,PhoneInputProps } from './PhoneInput.types';
 import type { PhoneInputCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius, fieldRootStyles } from '../../../tokens/field-radius';
 
 // Country data with expanded support
 
 // Styled components
+/** The plain variant: MUI's own field, on the theme's field radius. */
+const FieldTextField = styled(TextField)(({ theme }) => fieldRootStyles(theme));
+
 const GlassTextField = styled(TextField)(({ theme }) => ({
   '& .MuiOutlinedInput-root': {
+    borderRadius: fieldRadius(theme),
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.8)} 0%, ${alpha(theme.palette.background.paper, 0.6)} 100%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
@@ -332,7 +337,7 @@ export const PhoneInput: FC<PhoneInputProps> = (props) => {
     countryName: selectedCountry?.name,
     copy });
 
-  const TextFieldComponent = variant === 'glass' ? GlassTextField : TextField;
+  const TextFieldComponent = variant === 'glass' ? GlassTextField : FieldTextField;
 
   return (
     <Box data-testid="phone-input-container">

package/src/components/form/RadioGroup/RadioGroup.styles.ts

@@ -4,6 +4,11 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from './RadioGroup.animations';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
+
+/** The segment track's padding and border: its corner is the segments' plus these. */
+const SEGMENT_TRACK_PADDING = 4;
+const SEGMENT_TRACK_BORDER = 1;
 
 interface ColorPalette {
   main: string;
@@ -182,7 +187,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
   const { selected, animated, customSize = 'md' } = flags;
 
   return {
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
     border: `2px solid ${selected ? palette.main : fieldEdge(theme)}`,
@@ -249,13 +254,14 @@ export const segmentContainerSx = (
   const palette = getColorFromTheme(theme, customColor);
 
   return {
-    padding: '4px',
-    borderRadius: theme.spacing(1.5),
+    padding: `${SEGMENT_TRACK_PADDING}px`,
+    // Concentric with the segments inside it, which take the field radius.
+    borderRadius: fieldRadius(theme) + SEGMENT_TRACK_PADDING + SEGMENT_TRACK_BORDER,
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
       : alpha(palette.main, 0.05),
     backdropFilter: glass ? 'blur(20px)' : 'none',
-    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    border: `${SEGMENT_TRACK_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}`,
     display: 'flex',
     gap: '2px',
   };
@@ -283,7 +289,7 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
 
   return {
     flex: 1,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
     fontWeight: 500,
     backgroundColor: selected ? theme.palette.background.paper : 'transparent',

package/src/components/form/RichTextEditor/RichTextEditor.tsx

@@ -9,6 +9,7 @@ import type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types'
 import { RichTextEditorToolbar } from './RichTextEditorToolbar';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {
   bold: true,
@@ -71,7 +72,7 @@ const editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string,
 
 const shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({
   border: `1px solid ${fieldEdge(theme)}`,
-  borderRadius: 1,
+  borderRadius: fieldRadiusPx(theme),
   overflow: 'hidden',
   transition: 'border-color 0.2s ease-in-out',
   ...(isFocused && {

package/src/components/form/Select/Select.native.tsx

@@ -22,7 +22,6 @@ import {
   SELECT_GLOW,
   SELECT_ICON,
   SELECT_MENU,
-  SELECT_PULSE,
   inputVariantFor,
   selectInputSize,
 } from './Select.metrics';
@@ -209,7 +208,7 @@ export const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {
       {pulse ? (
         <FieldPulse
           color={theme.palette.primary.main}
-          radius={theme.spacing(SELECT_PULSE.radiusUnits)}
+          radius={theme.radius.field}
           testID={`${ids.trigger}-pulse`}
         />
       ) : null}

package/src/components/form/Select/Select.tsx

@@ -18,6 +18,7 @@ import type { SelectProps } from './Select.types';
 
 import { splitTestId } from '../../../platform/test-id';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -55,7 +56,7 @@ const pulseStyles = (theme: Theme): CSSObject => ({
     right: '0',
     height: `${SELECT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(SELECT_PULSE.radiusUnits),
+    borderRadius: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
     opacity: SELECT_PULSE.opacity,
     animation: `${pulseAnimation} ${SELECT_PULSE.ms / 1000}s infinite`,
@@ -144,6 +145,7 @@ const StyledFormControl = styled(FormControl, {
   ...(pulse ? pulseStyles(theme) : {}),
   '& .MuiOutlinedInput-root': {
     transition: 'all 0.3s ease',
+    borderRadius: fieldRadius(theme),
     ...variantStyles(theme, customVariant),
   },
 }));

package/src/components/form/Textarea/Textarea.tsx

@@ -31,6 +31,7 @@ const TextareaRichEditor = lazy(async () => ({
 import type { TextareaProps } from './Textarea.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -72,7 +73,7 @@ const StyledTextarea = styled(TextareaAutosize, {
   const baseStyles = {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
-    borderRadius: theme.spacing(1),
+    borderRadius: fieldRadius(theme),
     border: `2px solid ${error ? errorColor.main : fieldEdge(theme)}`,
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,

package/src/components/form/Textarea/TextareaRichEditor.tsx

@@ -20,13 +20,14 @@ import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 const RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(0.5),
   padding: theme.spacing(1),
-  borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
+  borderRadius: `${fieldRadius(theme)}px ${fieldRadius(theme)}px 0 0`,
   borderBottom: `1px solid ${theme.palette.divider}`,
   background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
   ...(glass && {
@@ -105,7 +106,7 @@ const ContentEditableDiv = styled('div')<{
   return {
     minHeight: '120px',
     padding: theme.spacing(1.5),
-    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+    borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
     border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass

package/src/components/form/Toggle/Toggle.styles.ts

@@ -2,6 +2,7 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
@@ -74,7 +75,7 @@ export const baseStyles = (
 ): CSSObject => ({
   textTransform: 'none',
   fontWeight: 500,
-  borderRadius: theme.spacing(1),
+  borderRadius: fieldRadius(theme),
   transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
   border: `2px solid ${fieldEdge(theme)}`,
   color: theme.palette.text.primary,

package/src/components/form/ToggleGroup/ToggleGroup.tsx

@@ -6,6 +6,11 @@ import type { Theme } from '@mui/material/styles/index.js';
 import React, { forwardRef } from 'react';
 
 import type { ToggleGroupProps } from './ToggleGroup.types';
+import { cssLengthToPx } from '../../../tokens/css-units';
+import { fieldRadius } from '../../../tokens/field-radius';
+
+const GLASS_PADDING = 4;
+const GLASS_BORDER = 1;
 
 const getColorFromTheme = (theme: Theme, color: string) => {
   if (color === 'neutral') {
@@ -43,19 +48,26 @@ const StyledToggleGroup = styled(ToggleButtonGroup, {
   customColor?: string;
   customSize?: string;
   glass?: boolean;
-}>(({ theme, glass }) => ({
-  backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
-  backdropFilter: glass ? 'blur(20px)' : 'none',
-  borderRadius: theme.spacing(1),
-  padding: glass ? 4 : 0,
-  border: glass ? `1px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
+}>(({ theme, glass }) => {
+  // Each button is the field, so it takes the field radius. The glass frame
+  // around them is inset by its padding, the buttons' margin and its border,
+  // and rounds by that much more so the two corners stay concentric.
+  const radius = fieldRadius(theme);
+  const inset = GLASS_PADDING + cssLengthToPx(theme.spacing(0.5), 4) + GLASS_BORDER;
+  return {
+    backgroundColor: glass ? alpha(theme.palette.background.paper, 0.1) : 'transparent',
+    backdropFilter: glass ? 'blur(20px)' : 'none',
+    borderRadius: glass ? radius + inset : radius,
+    padding: glass ? GLASS_PADDING : 0,
+    border: glass ? `${GLASS_BORDER}px solid ${alpha(theme.palette.divider, 0.2)}` : 'none',
 
-  '& .MuiToggleButtonGroup-grouped': {
-    margin: theme.spacing(0.5),
-    border: 0,
-    borderRadius: `${theme.shape.borderRadius}px !important`,
-  },
-}));
+    '& .MuiToggleButtonGroup-grouped': {
+      margin: theme.spacing(0.5),
+      border: 0,
+      borderRadius: `${radius}px !important`,
+    },
+  };
+});
 
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -10,6 +10,7 @@ import MenuItem from '@mui/material/MenuItem/index.js';
 import React, { useState } from 'react';
 
 import type { ColumnVisibilityOption, ColumnsMenuProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /** One column checkbox row; toggling never closes the menu. */
 function ColumnRow({
@@ -72,7 +73,7 @@ export function ColumnsMenu({
         sx={{
           width: 32,
           height: 32,
-          borderRadius: 1,
+          borderRadius: fieldRadiusPx,
           color: 'text.secondary',
           bgcolor: open ? 'action.selected' : 'transparent',
         }}

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -8,11 +8,12 @@ import Typography from '@mui/material/Typography/index.js';
 import React from 'react';
 
 import type { ContentToolbarProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const selectionButtonSx = {
   minWidth: 0,
   height: 'auto',
-  borderRadius: 0.5,
+  borderRadius: fieldRadiusPx,
   fontWeight: 600,
   py: 0.5,
   px: 1.5,

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button/index.js';
 import React from 'react';
 
 import type { FilterTriggerProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
@@ -37,6 +38,7 @@ export function FilterTrigger({
         height: 32,
         px: 1,
         gap: 0.25,
+        borderRadius: fieldRadiusPx,
         textTransform: 'none',
         fontWeight: 600,
         color: active ? 'primary.main' : 'text.primary',

package/src/components/layout/ContentToolbar/MultiSelectTriggers.tsx

@@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography/index.js';
 import React, { useId } from 'react';
 
 import type { MultiSelectOption } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /**
  * Trigger label from the current selection: `allLabel` when none/all are
@@ -51,7 +52,7 @@ export function InlineTrigger({ label, triggerLabel, open, onOpen, testId }: Tri
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={onOpen}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {triggerLabel}
         <ChevronDownIcon sx={{ fontSize: 14 }} />
@@ -82,6 +83,7 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
         sx={{
           justifyContent: 'space-between',
           height: 40,
+          borderRadius: fieldRadiusPx,
           px: 1.5,
           color: 'text.primary',
           textTransform: 'none',
@@ -173,7 +175,7 @@ export function PillTrigger({
       }
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
-        borderRadius: 999,
+        borderRadius: fieldRadiusPx,
         height: 34,
         px: 1.5,
         color: 'text.primary',

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -16,6 +16,7 @@ import type {
   SortFieldDefinition,
   SortOrderOption,
 } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 function findActiveField<TField extends string>(
   fields: SortFieldDefinition<TField>[] | undefined,
@@ -218,7 +219,7 @@ export function SortByDropdown<TField extends string = string>({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {/* Full "Nome (crescente)" on md+; just the field name on mobile — the
             arrow already conveys the direction, so the parenthetical is dropped. */}

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -18,6 +18,7 @@ import type SvgIcon from '@mui/material/SvgIcon/index.js';
 import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
   { value: 'grid', label: 'Grid View', icon: GridIcon },
@@ -66,7 +67,7 @@ export function ViewSelector({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, color: 'text.secondary' }}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}
       >
         <ActiveIcon sx={{ fontSize: 16 }} />
         <ChevronDownIcon sx={{ fontSize: 14 }} />

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -24,6 +24,7 @@ import type {
   TableFilterRangeFieldProps,
   TableFilterSectionProps,
 } from './TableFilter.types';
+import { fieldRootStyles } from '../../../tokens/field-radius';
 
 const PANEL_WIDTH = 280;
 
@@ -182,6 +183,7 @@ const TableFilterKeyword = ({
       </Typography>
       <TextField
         size="small"
+        sx={fieldRootStyles}
         name="keyword"
         placeholder={placeholder}
         value={draft}