@12-apps/ui 6.31.0 → 6.33.0

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

@@ -3,6 +3,7 @@ import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 import { fieldRadius } from '../../../tokens/field-radius';
+import { asFieldSize, fieldHeight } from '../../../tokens/field-height';
 
 interface ColorPalette {
   main: string;
@@ -51,13 +52,13 @@ const getColorFromTheme = (theme: Theme, color: string): ColorPalette => {
 
 type SizeKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
-/** Each slot is a square, so width and height always match. */
-const SIZES: Record<SizeKey, { side: string; fontSize: string }> = {
-  xs: { side: '32px', fontSize: '0.75rem' },
-  sm: { side: '40px', fontSize: '0.875rem' },
-  md: { side: '48px', fontSize: '1rem' },
-  lg: { side: '56px', fontSize: '1.125rem' },
-  xl: { side: '64px', fontSize: '1.25rem' },
+/** Each slot's type. Its side is the theme's field height for the size (a square). */
+const SIZES: Record<SizeKey, { fontSize: string }> = {
+  xs: { fontSize: '0.75rem' },
+  sm: { fontSize: '0.875rem' },
+  md: { fontSize: '1rem' },
+  lg: { fontSize: '1.125rem' },
+  xl: { fontSize: '1.25rem' },
 };
 
 export interface OtpSlotFlags {
@@ -70,7 +71,9 @@ export interface OtpSlotFlags {
 export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
   const { customColor = 'primary', customSize = 'md', glass, gradient } = flags;
   const palette = getColorFromTheme(theme, customColor);
-  const { side, fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  const { fontSize } = SIZES[customSize as SizeKey] ?? SIZES.md;
+  // A slot is a field: a square of the theme's field height for its size.
+  const side = fieldHeight(theme, asFieldSize(customSize));
 
   return {
     width: side,
@@ -94,6 +97,7 @@ export const otpSlotSx = (theme: Theme, flags: OtpSlotFlags): CSSObject => {
         },
       }),
       '& input': { textAlign: 'center', padding: 0, fontWeight: 'inherit' },
+      ...(!glass && { '& fieldset': { borderColor: fieldEdge(theme) } }),
       '&:hover fieldset': { borderColor: palette.main },
       '&.Mui-focused fieldset': { borderColor: palette.main, borderWidth: '2px' },
     },

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

@@ -18,15 +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';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
 
 // 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 FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
 
 const GlassTextField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(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%)`,

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

@@ -5,6 +5,7 @@ import { glowAnimation, rippleAnimation, scaleAnimation, slideAnimation } from '
 
 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;
@@ -190,7 +191,7 @@ const buttonBase = (theme: Theme, flags: SurfaceFlags, palette: ColorPalette): C
     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,
@@ -222,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,
   };
 };
 
@@ -310,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/Select/Select.native.tsx

@@ -7,6 +7,7 @@ import {
   Text as RNText,
   View,
   useWindowDimensions,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 
@@ -29,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';
 
@@ -154,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`.
  *
@@ -202,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.radius.field}
-          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,8 @@ 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
@@ -47,14 +49,14 @@ 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: fieldRadius(theme),
     backgroundColor: theme.palette.primary.main,
@@ -134,15 +136,19 @@ 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),
@@ -227,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

@@ -32,6 +32,7 @@ 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 {
@@ -74,7 +75,7 @@ const StyledTextarea = styled(TextareaAutosize, {
     width: '100%',
     fontFamily: theme.typography.fontFamily,
     borderRadius: fieldRadius(theme),
-    border: `2px solid ${error ? errorColor.main : fieldEdge(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',
@@ -90,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

@@ -21,6 +21,7 @@ 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',
@@ -102,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 ${fieldRadius(theme)}px ${fieldRadius(theme)}px`,
-    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : fieldEdge(theme)}`,
+    border: `${FIELD_BORDER_WIDTH}px solid ${error || focused ? engaged : fieldEdge(theme)}`,
     borderTop: 'none',
     backgroundColor: glass
       ? alpha(theme.palette.background.paper, 0.1)
@@ -128,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,8 +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; }
@@ -77,7 +77,7 @@ export const baseStyles = (
   fontWeight: 500,
   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',
@@ -138,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

@@ -7,6 +7,7 @@ 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;
@@ -119,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

@@ -11,6 +11,7 @@ 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({
@@ -71,8 +72,8 @@ export function ColumnsMenu({
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
         sx={{
-          width: 32,
-          height: 32,
+          width: fieldHeight,
+          height: fieldHeight,
           borderRadius: fieldRadiusPx,
           color: 'text.secondary',
           bgcolor: open ? 'action.selected' : 'transparent',

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

@@ -7,6 +7,7 @@ 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
@@ -35,7 +36,7 @@ export function FilterTrigger({
       startIcon={<FilterIcon sx={{ fontSize: 16 }} />}
       sx={{
         minWidth: 0,
-        height: 32,
+        height: fieldHeight,
         px: 1,
         gap: 0.25,
         borderRadius: fieldRadiusPx,

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

@@ -9,6 +9,8 @@ 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
@@ -52,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, borderRadius: fieldRadiusPx, 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 }} />
@@ -82,14 +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' },
         }}
@@ -176,13 +178,13 @@ export function PillTrigger({
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
         borderRadius: fieldRadiusPx,
-        height: 34,
+        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' } }} />

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

@@ -17,6 +17,7 @@ import type {
   SortOrderOption,
 } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 function findActiveField<TField extends string>(
   fields: SortFieldDefinition<TField>[] | undefined,
@@ -219,7 +220,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, borderRadius: fieldRadiusPx, 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 }}
       >
         {/* 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

@@ -19,6 +19,7 @@ import React, { useState } from 'react';
 
 import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
 
 const VIEW_OPTIONS: { value: ViewMode; label: string; icon: typeof SvgIcon }[] = [
   { value: 'grid', label: 'Grid View', icon: GridIcon },
@@ -67,7 +68,7 @@ export function ViewSelector({
         aria-haspopup="menu"
         aria-expanded={open}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, borderRadius: fieldRadiusPx, color: 'text.secondary' }}
+        sx={{ minWidth: 0, height: fieldHeight, 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,7 +24,7 @@ import type {
   TableFilterRangeFieldProps,
   TableFilterSectionProps,
 } from './TableFilter.types';
-import { fieldRootStyles } from '../../../tokens/field-radius';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 const PANEL_WIDTH = 280;
 
@@ -183,7 +183,7 @@ const TableFilterKeyword = ({
       </Typography>
       <TextField
         size="small"
-        sx={fieldRootStyles}
+        sx={fieldTextFieldStyles}
         name="keyword"
         placeholder={placeholder}
         value={draft}
@@ -308,6 +308,7 @@ function RangeBound({
   return (
     <TextField
       size="small"
+      sx={fieldTextFieldStyles}
       type="number"
       error={error}
       placeholder={placeholder}