@12-apps/ui 6.30.0 → 6.32.0

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

@@ -4,6 +4,12 @@ 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';
+import { asFieldSize, FIELD_BORDER_WIDTH, fieldHeight } from '../../../tokens/field-height';
+
+/** 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,10 +188,10 @@ 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)}`,
+    border: `${FIELD_BORDER_WIDTH}px solid ${selected ? palette.main : fieldEdge(theme)}`,
     backgroundColor: selected ? palette.main : 'transparent',
     color: selected ? palette.contrastText || '#fff' : theme.palette.text.primary,
     position: 'relative' as const,
@@ -217,6 +223,10 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     },
     '&:active': { transform: 'scale(0.98)' },
     ...pickSize(BUTTON_SIZES, customSize),
+    // The theme's field height for the size, in place of the table's own.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0,
   };
 };
 
@@ -249,13 +259,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 +294,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',
@@ -304,5 +315,9 @@ export const segmentButtonSx = (theme: Theme, flags: SurfaceFlags): CSSObject =>
     },
     '&:active': { transform: 'scale(0.98)' },
     ...pickSize(SEGMENT_SIZES, customSize),
+    // Each segment is a field; the track around it adds its own inset.
+    minHeight: fieldHeight(theme, asFieldSize(customSize)),
+    paddingTop: 0,
+    paddingBottom: 0,
   };
 };

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

@@ -7,6 +7,7 @@ import {
   Text as RNText,
   View,
   useWindowDimensions,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 
@@ -22,7 +23,6 @@ import {
   SELECT_GLOW,
   SELECT_ICON,
   SELECT_MENU,
-  SELECT_PULSE,
   inputVariantFor,
   selectInputSize,
 } from './Select.metrics';
@@ -30,7 +30,9 @@ import type { SelectProps, SelectValue } from './Select.types.native';
 import { Icon } from '../../../icons/Icon.native';
 import { webAria, webKeyDown, webRole, type WebKeyEvent } from '../../../platform/aria';
 import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { fieldHeightPx } from '../../../tokens/field-height.core';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import type { UiTheme } from '../../../tokens/theme';
 import { FieldPulse } from '../field-pulse.native';
 import { helperStyle, labelStyle, type FieldState } from '../Input/Input.look.native';
 
@@ -155,6 +157,35 @@ function useSelectValue(
   return [value ?? own, setOwn];
 }
 
+/** The pulse bar, at the field's own height and corner. */
+function SelectPulse({
+  theme,
+  size,
+  testID,
+}: {
+  theme: UiTheme;
+  size: SelectProps['size'];
+  testID: string;
+}): React.JSX.Element {
+  return (
+    <FieldPulse
+      color={theme.palette.primary.main}
+      radius={theme.radius.field}
+      height={fieldHeightPx(theme.fieldHeight, size ?? 'md')}
+      testID={testID}
+    />
+  );
+}
+
+/**
+ * The field's own box. Raised while open: react-native-web gives every View
+ * `z-index: 0`, so the anchor's z-index stays inside this root, and the next
+ * field down would paint over the list and take its taps.
+ */
+function rootStyle(theme: UiTheme, fullWidth: boolean | undefined, open: boolean): StyleProp<ViewStyle> {
+  return [styles.root, fullWidth ? styles.fullWidth : styles.auto, open ? { zIndex: theme.zIndex.modal } : null];
+}
+
 /**
  * The native `Select`.
  *
@@ -203,16 +234,10 @@ export const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {
     <View
       ref={ref}
       testID={ids.root}
-      style={[styles.root, fullWidth ? styles.fullWidth : styles.auto, style]}
+      style={[rootStyle(theme, fullWidth, open), style]}
       {...withoutTestIdProps(others)}
     >
-      {pulse ? (
-        <FieldPulse
-          color={theme.palette.primary.main}
-          radius={theme.spacing(SELECT_PULSE.radiusUnits)}
-          testID={`${ids.trigger}-pulse`}
-        />
-      ) : null}
+      {pulse ? <SelectPulse theme={theme} size={size} testID={`${ids.trigger}-pulse`} /> : null}
       {label === undefined ? null : (
         <RNText id={labelId} style={labelStyle(theme, inputVariantFor(variant), size, state)}>
           {label}

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

@@ -18,6 +18,9 @@ import type { SelectProps } from './Select.types';
 
 import { splitTestId } from '../../../platform/test-id';
 import { fieldEdge } from '../../../tokens/field-edge';
+import { asFieldSize, fieldControlStyles, fieldHeight } from '../../../tokens/field-height';
+import type { SizeValue } from '../../../tokens/vocabulary';
+import { fieldRadius } from '../../../tokens/field-radius';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -46,16 +49,16 @@ const glowStyles = (theme: Theme): CSSObject => ({
 });
 
 /** Pulsing halo behind the control, keyed off the `pulse` prop. */
-const pulseStyles = (theme: Theme): CSSObject => ({
+const pulseStyles = (theme: Theme, size: SizeValue): CSSObject => ({
   '&::after': {
     content: '""',
     position: 'absolute',
     top: '50%',
     left: '0',
     right: '0',
-    height: `${SELECT_PULSE.height}px`,
+    height: fieldHeight(theme, size),
     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`,
@@ -133,17 +136,22 @@ const variantStyles = (theme: Theme, variant: SelectProps['variant']): CSSObject
 };
 
 const StyledFormControl = styled(FormControl, {
-  shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'glow' && prop !== 'pulse',
+  shouldForwardProp: (prop) =>
+    prop !== 'customVariant' && prop !== 'fieldSize' && prop !== 'glow' && prop !== 'pulse',
 })<{
   customVariant?: SelectProps['variant'];
+  fieldSize: SizeValue;
   glow?: boolean;
   pulse?: boolean;
-}>(({ theme, customVariant, glow, pulse }) => ({
+}>(({ theme, customVariant, fieldSize, glow, pulse }) => ({
   position: 'relative',
+  // The theme's field height for this size — the height `Input` draws for it.
+  ...fieldControlStyles(theme, fieldSize),
   ...(glow ? glowStyles(theme) : {}),
-  ...(pulse ? pulseStyles(theme) : {}),
+  ...(pulse ? pulseStyles(theme, fieldSize) : {}),
   '& .MuiOutlinedInput-root': {
     transition: 'all 0.3s ease',
+    borderRadius: fieldRadius(theme),
     ...variantStyles(theme, customVariant),
   },
 }));
@@ -225,8 +233,8 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
         size={formControlSize(size)}
         error={error}
         customVariant={variant}
-        glow={glow}
-        pulse={pulse}
+        fieldSize={asFieldSize(size)}
+        glow={glow} pulse={pulse}
         ref={ref}
         data-testid={dataTestId}
       >

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

@@ -31,6 +31,8 @@ const TextareaRichEditor = lazy(async () => ({
 import type { TextareaProps } from './Textarea.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { FIELD_BORDER_WIDTH, fieldBorder } from '../../../tokens/field-height';
 
 // Interface for styled component props
 interface StyledTextareaProps {
@@ -72,8 +74,8 @@ const StyledTextarea = styled(TextareaAutosize, {
   const baseStyles = {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
-    borderRadius: theme.spacing(1),
-    border: `2px solid ${error ? errorColor.main : fieldEdge(theme)}`,
+    borderRadius: fieldRadius(theme),
+    border: error ? `${FIELD_BORDER_WIDTH}px solid ${errorColor.main}` : fieldBorder(theme),
     backgroundColor: theme.palette.background.paper,
     color: theme.palette.text.primary,
     transition: 'all 0.3s ease',
@@ -89,10 +91,12 @@ const StyledTextarea = styled(TextareaAutosize, {
       borderColor: error ? errorColor.dark : colorPalette.main,
       backgroundColor: alpha(theme.palette.background.paper, 0.8) },
 
+    // Focus is two pixels, like every other field's: the second is an inset
+    // shadow, so the 1px resting border can thicken without the box moving.
     '&:focus': {
       borderColor: error ? errorColor.main : colorPalette.main,
       backgroundColor: theme.palette.background.paper,
-      boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
+      boxShadow: `inset 0 0 0 1px ${error ? errorColor.main : colorPalette.main}, 0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };
 
   // Glass morphism effect
   return {

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

@@ -20,13 +20,15 @@ import { floatAnimation, getColorFromTheme } from './Textarea.styles';
 import type { RichEditorToolbarCopy } from '../../../copy';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { FIELD_BORDER_WIDTH } from '../../../tokens/field-height';
 
 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 && {
@@ -101,12 +103,14 @@ const ContentEditableDiv = styled('div')<{
   if (!theme) return {};
   const colorPalette = getColorFromTheme(theme, customColor);
   const errorColor = theme.palette.error;
+  // The edge's colour once the field is engaged: the error's, else the accent.
+  const engaged = error ? errorColor.main : colorPalette.main;
 
   return {
     minHeight: '120px',
     padding: theme.spacing(1.5),
-    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
+    borderRadius: `0 0 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
+    border: `${FIELD_BORDER_WIDTH}px solid ${error || focused ? engaged : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
@@ -127,9 +131,11 @@ const ContentEditableDiv = styled('div')<{
         ? alpha(theme.palette.background.paper, 0.15)
         : alpha(theme.palette.background.paper, 0.9) },
 
+    // Focused, the 1px edge doubles inside the box (an inset shadow, so nothing
+    // moves), as every other field's does, under the halo.
     '&:focus': {
-      borderColor: error ? errorColor.main : colorPalette.main,
-      boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` },
+      borderColor: engaged,
+      boxShadow: `inset 0 0 0 1px ${engaged}, 0 0 0 3px ${alpha(engaged, 0.1)}` },
 
     '& > *': {
       margin: '0.5em 0' },

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

@@ -1,7 +1,8 @@
 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';
+import { asFieldSize, fieldBorder, fieldHeight } from '../../../tokens/field-height';
 
 const glowAnimation = keyframes`
   0% { box-shadow: 0 0 5px currentColor; }
@@ -74,9 +75,9 @@ 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)}`,
+  border: fieldBorder(theme),
   color: theme.palette.text.primary,
   backgroundColor: 'transparent',
   position: 'relative',
@@ -137,8 +138,12 @@ export const baseStyles = (
     },
   },
 
-  // Size wins over everything above it.
+  // Size wins over everything above it — its font and horizontal padding; the
+  // height is the theme's field height for the size.
   ...(SIZE_MAP[customSize] ?? {}),
+  minHeight: fieldHeight(theme, asFieldSize(customSize)),
+  paddingTop: 0,
+  paddingBottom: 0,
 });
 
 export const variantStyles = (

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

@@ -6,6 +6,12 @@ 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 { asFieldSize, fieldHeight } from '../../../tokens/field-height';
+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 +49,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>(
   (
@@ -107,6 +120,10 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               fontWeight: 500,
               transition: 'all 0.3s ease',
               ...sizeMap[size as keyof typeof sizeMap],
+              // The theme's field height for the size; the label centres in it.
+              minHeight: (theme) => fieldHeight(theme, asFieldSize(size)),
+              paddingTop: 0,
+              paddingBottom: 0,
 
               '&.Mui-selected': {
                 backgroundColor: colorPalette.main,

package/src/components/form/field-pulse.native.tsx

@@ -17,10 +17,13 @@ import { INPUT_PULSE } from './Input/Input.metrics';
 export function FieldPulse({
   color,
   radius,
+  height,
   testID,
 }: {
   color: string;
   radius: number;
+  /** The field's own height, so the bar sits exactly behind it. */
+  height: number;
   testID: string;
 }): React.JSX.Element {
   const progress = React.useRef(new Animated.Value(0)).current;
@@ -45,6 +48,7 @@ export function FieldPulse({
       style={[
         styles.pulse,
         {
+          height,
           borderRadius: radius,
           backgroundColor: color,
           opacity: progress.interpolate({
@@ -52,11 +56,11 @@ export function FieldPulse({
             outputRange: [INPUT_PULSE.opacity, 0, 0],
           }),
           transform: [
-            { translateY: -INPUT_PULSE.height / 2 },
+            { translateY: -height / 2 },
             {
               scale: progress.interpolate({
                 inputRange: [0, 0.7, 1],
-                outputRange: [1, 1 + INPUT_PULSE.spread / INPUT_PULSE.height, 1],
+                outputRange: [1, 1 + INPUT_PULSE.spread / height, 1],
               }),
             },
           ],
@@ -72,7 +76,6 @@ const styles = StyleSheet.create({
     top: '50%',
     left: 0,
     right: 0,
-    height: INPUT_PULSE.height,
     pointerEvents: 'none',
   },
 });

package/src/components/form/total-form/Fields/ToggleField.tsx

@@ -45,8 +45,6 @@ export function ToggleField({ name, options, label }: ToggleFieldProps): React.R
         value={values[name] ?? ''}
         fullWidth
         dataTestId={testId}
-        // Match the input field height so the toggle lines up in a form row.
-        sx={{ '& .MuiToggleButtonGroup-grouped': { height: 56 } }}
         onChange={(_event, next) => {
           if (typeof next === 'string') setFieldValue(name, next);
         }}

package/src/components/form/total-form/SubmitButton.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 
+import { fieldHeight } from '../../../tokens/field-height';
 import { Button } from '../Button';
 import { useFormContext } from './FormContext';
 
@@ -13,13 +14,6 @@ export interface SubmitButtonProps {
   dataTestId?: string;
 }
 
-/**
- * The height of a form input control (see `Input` — `.MuiInputBase-root`), so a
- * submit button placed inline with fields lines up with them instead of sitting
- * shorter. Kept in sync with that value by hand.
- */
-const FIELD_HEIGHT = 56;
-
 /**
  * Submit control wired to {@link useFormContext}. Wraps the existing `@12-apps/ui`
  * `Button` as a `type="submit"` button (testid `total-form-submit`) and
@@ -41,8 +35,9 @@ export function SubmitButton({
       loading={submitting}
       disabled={submitting}
       // `Button` replaces (not merges) its size styles with this `sx`, so restate
-      // the md padding/font here alongside the field-height + no-wrap alignment.
-      sx={{ height: FIELD_HEIGHT, px: 2, fontSize: '1rem', flexShrink: 0, whiteSpace: 'nowrap' }}
+      // the md padding/font here alongside the theme's field height — the height
+      // every input on the form stands at — and no-wrap alignment.
+      sx={{ height: fieldHeight, px: 2, fontSize: '1rem', flexShrink: 0, whiteSpace: 'nowrap' }}
     >
       {children}
     </Button>

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

@@ -10,6 +10,8 @@ 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';
+import { fieldHeight } from '../../../tokens/field-height';
 
 /** One column checkbox row; toggling never closes the menu. */
 function ColumnRow({
@@ -70,9 +72,9 @@ export function ColumnsMenu({
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
         sx={{
-          width: 32,
-          height: 32,
-          borderRadius: 1,
+          width: fieldHeight,
+          height: fieldHeight,
+          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,8 @@ import Button from '@mui/material/Button/index.js';
 import React from 'react';
 
 import type { FilterTriggerProps } from './ContentToolbar.types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 /**
  * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
@@ -34,9 +36,10 @@ export function FilterTrigger({
       startIcon={<FilterIcon sx={{ fontSize: 16 }} />}
       sx={{
         minWidth: 0,
-        height: 32,
+        height: fieldHeight,
         px: 1,
         gap: 0.25,
+        borderRadius: fieldRadiusPx,
         textTransform: 'none',
         fontWeight: 600,
         color: active ? 'primary.main' : 'text.primary',

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

@@ -18,6 +18,7 @@ import type {
   MultiSelectOption,
 } from './ContentToolbar.types';
 import { buildTriggerLabel, InlineTrigger, PillTrigger, StackedTrigger } from './MultiSelectTriggers';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 /** One checkbox menu row with an optional trailing count. */
 function CheckboxRow({
@@ -152,6 +153,7 @@ function MenuSearchField({
       <TextField
         autoFocus
         size="small"
+        sx={fieldTextFieldStyles}
         fullWidth
         value={query}
         onChange={(event) => onQueryChange(event.target.value)}

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

@@ -8,6 +8,9 @@ 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';
+import { fieldHeight } from '../../../tokens/field-height';
+import { fieldEdge } from '../../../tokens/field-edge';
 
 /**
  * Trigger label from the current selection: `allLabel` when none/all are
@@ -51,7 +54,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: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {triggerLabel}
         <ChevronDownIcon sx={{ fontSize: 14 }} />
@@ -81,13 +84,14 @@ export function StackedTrigger({ label, triggerLabel, open, onOpen, testId }: Tr
         endIcon={<ChevronDownIcon sx={{ fontSize: 18, color: 'text.secondary' }} />}
         sx={{
           justifyContent: 'space-between',
-          height: 40,
+          height: fieldHeight,
+          borderRadius: fieldRadiusPx,
           px: 1.5,
           color: 'text.primary',
           textTransform: 'none',
           fontWeight: 400,
           fontSize: '0.875rem',
-          borderColor: 'divider',
+          borderColor: fieldEdge,
           bgcolor: 'background.paper',
           '&:hover': { borderColor: 'text.primary', bgcolor: 'background.paper' },
         }}
@@ -173,14 +177,14 @@ export function PillTrigger({
       }
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
-        borderRadius: 999,
-        height: 34,
+        borderRadius: fieldRadiusPx,
+        height: fieldHeight,
         px: 1.5,
         color: 'text.primary',
         fontWeight: 600,
         fontSize: '0.8125rem',
         textTransform: 'none',
-        borderColor: active ? 'primary.main' : 'divider',
+        borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),
         bgcolor: active ? 'action.selected' : 'background.paper',
         '&:hover': { borderColor: active ? 'primary.main' : 'text.primary', bgcolor: active ? 'action.selected' : 'action.hover' },
       }}

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

@@ -19,6 +19,8 @@ import type {
   SavedViewsLabels,
   SavedViewsMenuProps,
 } from './ContentToolbar.types';
+import { fieldHeight } from '../../../tokens/field-height';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
 
 /** How many non-pinned views show under "Recentes". */
 const RECENT_LIMIT = 5;
@@ -294,7 +296,7 @@ export function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({
         aria-haspopup="menu"
         aria-expanded={Boolean(anchorEl)}
         aria-label={activeViewName ?? labels.mainView}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+        sx={{ minWidth: 0, height: fieldHeight, px: 1, gap: 0.5, borderRadius: fieldRadiusPx, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
       >
         {/* Mobile: an eye icon stands in for the view name to keep the toolbar one line. */}
         <ViewIcon sx={{ fontSize: 18, display: { xs: 'inline-flex', md: 'none' } }} />