@12-apps/ui 6.30.0 → 6.32.0

package/dist/types-native/tokens/field-radius.core.d.ts

@@ -0,0 +1,26 @@
+/**
+ * THE ONE RADIUS EVERY FIELD IS DRAWN WITH, WITH NO RENDERER BEHIND IT.
+ *
+ * A row of controls — a search box, three filter triggers, a "Mais" button —
+ * used to carry three radii: the text field took MUI's `shape.borderRadius`
+ * (4px), the button `theme.spacing(1)` (8px), and the filter triggers a 999px
+ * pill. Each was reasonable on its own; side by side they read as three kits
+ * glued together. A field's corner is one decision, so it is one token.
+ *
+ * "Field" is anything that sits at control height and takes input or opens a
+ * choice: text inputs, selects, textareas, OTP slots, date and filter triggers,
+ * toggles, and the buttons that share their rows. It is NOT a card, a menu, a
+ * badge or a chip counter — those keep the theme's general `radius` scale.
+ *
+ * This file is the number alone, so the native renderer and `./theme.ts` read
+ * it without importing MUI. The web reader and the theme channel it is set
+ * through are in `./field-radius.ts`.
+ */
+/**
+ * The default field radius, in px (dp on native).
+ *
+ * 8, because that is what `Button` has always drawn — so the control people
+ * see most keeps its corner and the rest of the row comes to meet it.
+ */
+export declare const DEFAULT_FIELD_RADIUS = 8;
+//# sourceMappingURL=field-radius.core.d.ts.map

package/dist/types-native/tokens/field-radius.core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-radius.core.d.ts","sourceRoot":"","sources":["../../../src/tokens/field-radius.core.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,IAAI,CAAC"}

package/dist/types-native/tokens/index.native.d.ts

@@ -7,4 +7,6 @@
 export * from './vocabulary';
 export * from './theme';
 export * from './color';
+export { DEFAULT_FIELD_RADIUS } from './field-radius.core';
+export { DEFAULT_FIELD_HEIGHT, FIELD_BORDER_WIDTH, FIELD_HEIGHT_SCALE, fieldHeightPx, fieldHeightRem, } from './field-height.core';
 //# sourceMappingURL=index.native.d.ts.map

package/dist/types-native/tokens/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.native.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.native.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,aAAa,EACb,cAAc,GACf,MAAM,qBAAqB,CAAC"}

package/dist/types-native/tokens/theme.d.ts

@@ -94,14 +94,25 @@ export interface UiTheme {
     /** MUI's `theme.spacing(n)`: `n` units of {@link UiTheme.spacingUnit}, in px. */
     spacing: (units: number) => number;
     spacingUnit: number;
-    /** `md` is MUI's `shape.borderRadius`; the others are its halves and doubles. */
+    /**
+     * `md` is MUI's `shape.borderRadius`; `sm`–`xl` are its halves and doubles.
+     * `field` is not on that scale: it is the one corner every field is drawn
+     * with (see `./field-radius.core`), MUI's `theme.fieldRadius` on the web.
+     */
     radius: {
         sm: number;
         md: number;
         lg: number;
         xl: number;
         full: number;
+        field: number;
     };
+    /**
+     * The standard field height, in multiples of the default font size — MUI's
+     * `theme.fieldHeight` on the web. `fieldHeightPx(theme.fieldHeight, size)`
+     * (`./field-height.core`) is the dp a field of `size` lays out at.
+     */
+    fieldHeight: number;
     typography: UiTypography;
     zIndex: {
         appBar: number;
@@ -126,6 +137,10 @@ export interface UiThemeOptions {
     }>;
     typography?: Partial<Pick<UiTypography, 'fontFamily' | 'monospaceFontFamily'>>;
     spacingUnit?: number;
+    /** The radius every field is drawn with, in dp. Defaults to {@link DEFAULT_FIELD_RADIUS}. */
+    fieldRadius?: number;
+    /** The standard field height, in multiples of the default font size. Defaults to 2.5. */
+    fieldHeight?: number;
 }
 /** The px value as the rem string the web components write. */
 export declare const px: (value: number) => string;

package/dist/types-native/tokens/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tokens/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tokens/theme.ts"],"names":[],"mappings":"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"}

package/dist/typography/Heading.js

@@ -1,16 +1,18 @@
 import "../chunk-6GP2DOOO.js";
 import {
   Heading
-} from "../chunk-SLMA4UQS.js";
-import "../chunk-XYDW5RQB.js";
-import "../chunk-EUKYQXYU.js";
+} from "../chunk-7A3G4W52.js";
+import "../chunk-RAWQMBX6.js";
+import "../chunk-GXEB6MJA.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-PT6TCWIW.js";
-import "../chunk-SONWG2RT.js";
-import "../chunk-AG66JBNH.js";
+import "../chunk-PE4ZW3IA.js";
 import "../chunk-2BYKTBDL.js";
-import "../chunk-6JAIFIPW.js";
+import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
+import "../chunk-PZBK3F52.js";
+import "../chunk-26X4CZVR.js";
+import "../chunk-6JAIFIPW.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Heading

package/dist/typography/Paragraph.js

@@ -1,13 +1,15 @@
 import {
   Paragraph
-} from "../chunk-NWQWUYOV.js";
+} from "../chunk-Y7ZS724A.js";
 import "../chunk-QKLGH3RZ.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-SONWG2RT.js";
-import "../chunk-AG66JBNH.js";
+import "../chunk-PE4ZW3IA.js";
 import "../chunk-2BYKTBDL.js";
-import "../chunk-6JAIFIPW.js";
+import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
+import "../chunk-PZBK3F52.js";
+import "../chunk-26X4CZVR.js";
+import "../chunk-6JAIFIPW.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Paragraph

package/dist/typography/Text.js

@@ -1,14 +1,16 @@
 import "../chunk-VUHLNYAE.js";
 import {
   Text
-} from "../chunk-YTYROOLY.js";
-import "../chunk-EPRA5QLB.js";
+} from "../chunk-H57ZS6W2.js";
+import "../chunk-U3PPLAFB.js";
 import "../chunk-TYJR4GOF.js";
-import "../chunk-SONWG2RT.js";
-import "../chunk-AG66JBNH.js";
+import "../chunk-PE4ZW3IA.js";
 import "../chunk-2BYKTBDL.js";
-import "../chunk-6JAIFIPW.js";
+import "../chunk-AG66JBNH.js";
 import "../chunk-FZXKH2ZT.js";
+import "../chunk-PZBK3F52.js";
+import "../chunk-26X4CZVR.js";
+import "../chunk-6JAIFIPW.js";
 import "../chunk-PZ5AY32C.js";
 export {
   Text

package/dist/user-avatar.js

@@ -1,33 +1,39 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-554SVTCN.js";
+} from "./chunk-5BW7NCM5.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-HGJHZ5PE.js";
-import "./chunk-35UG2QDB.js";
-import "./chunk-XRMZMBE3.js";
-import "./chunk-FAITHWIO.js";
+import "./chunk-ZB6BX4GO.js";
 import "./chunk-3ZVUNSFF.js";
+import "./chunk-LB2G6SD6.js";
+import "./chunk-FAITHWIO.js";
+import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-AVI3XHRQ.js";
-import "./chunk-FKUYRQSP.js";
+import "./chunk-AIRWM7KK.js";
 import "./chunk-BEBLRL5D.js";
 import "./chunk-6Q6T3FW5.js";
+import "./chunk-FKUYRQSP.js";
 import "./chunk-BA4RHQ3B.js";
 import "./chunk-73BEVJCS.js";
-import "./chunk-BKAB4KZK.js";
+import "./chunk-6MDBMCFK.js";
+import "./chunk-QRUCR4YZ.js";
+import "./chunk-K6FCXPTS.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-TSEWUY4V.js";
-import "./chunk-5LQ7PKMW.js";
-import "./chunk-YTYROOLY.js";
-import "./chunk-EPRA5QLB.js";
+import "./chunk-H57ZS6W2.js";
+import "./chunk-U3PPLAFB.js";
 import "./chunk-TYJR4GOF.js";
-import "./chunk-SONWG2RT.js";
-import "./chunk-AG66JBNH.js";
+import "./chunk-CGO452DC.js";
+import "./chunk-GDN2LUTZ.js";
+import "./chunk-7FDU3FIN.js";
+import "./chunk-EPEJMTCQ.js";
+import "./chunk-PE4ZW3IA.js";
 import "./chunk-2BYKTBDL.js";
-import "./chunk-6JAIFIPW.js";
+import "./chunk-AG66JBNH.js";
 import "./chunk-FZXKH2ZT.js";
+import "./chunk-PZBK3F52.js";
+import "./chunk-26X4CZVR.js";
+import "./chunk-6JAIFIPW.js";
 import "./chunk-PZ5AY32C.js";
 export {
   UserAvatar,

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-GSFNH4C5.js";
-import "../chunk-ATSHKSSD.js";
+} from "../chunk-WROCSDVL.js";
 import "../chunk-QF6LTUCE.js";
+import "../chunk-ATSHKSSD.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InfiniteScroll

package/dist/utility/InstallPrompt.js

@@ -1,10 +1,12 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-IABE56TG.js";
+} from "../chunk-5ZOJLYD2.js";
+import "../chunk-GY62N32G.js";
 import {
   usePwaInstall
-} from "../chunk-S2GDYA6R.js";
+} from "../chunk-5GMHJ7Y5.js";
+import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,
   PWA_INSTALL_STASH_KEY,
@@ -12,8 +14,6 @@ import {
   readPwaInstallStash,
   resetPwaInstallStash
 } from "../chunk-UUL44SUX.js";
-import "../chunk-GY62N32G.js";
-import "../chunk-WXYLH3QZ.js";
 import "../chunk-PZ5AY32C.js";
 export {
   InstallPrompt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.30.0",
+  "version": "6.32.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DataViews/data-views-bar-controls.tsx

@@ -15,7 +15,9 @@ import FilterAltOffRoundedIcon from "@mui/icons-material/FilterAltOffRounded";
 import Tooltip from "@mui/material/Tooltip/index.js";
 
 import { Box } from "../../../mui/Box";
+import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { fieldHeight } from "../../../tokens/field-height";
 
 /**
  * "Limpar" — one gesture back to the unfiltered list.
@@ -40,7 +42,7 @@ export function ClearAllControl({
   testIdPrefix: string;
 }): React.JSX.Element {
   const copy = useDataViewsCopy();
-  // No border, no fill. Every other control on this row is an outlined pill
+  // No border, no fill. Every other control on this row is an outlined field
   // because it OPENS something; this one is an escape hatch, and giving it the
   // same weight made it read as a sixth filter. Quiet until hovered.
   const button = (
@@ -54,10 +56,10 @@ export function ClearAllControl({
         display: "inline-flex",
         alignItems: "center",
         gap: 0.5,
-        height: 34,
+        height: fieldHeight,
         px: compact ? 0.75 : 1,
         border: 0,
-        borderRadius: 1,
+        borderRadius: fieldRadiusPx,
         bgcolor: "transparent",
         cursor: "pointer",
         font: "inherit",
@@ -105,10 +107,10 @@ export function CloseSearchControl({
         sx={{
           display: "inline-flex",
           alignItems: "center",
-          height: 34,
+          height: fieldHeight,
           px: 0.75,
           border: 0,
-          borderRadius: 1,
+          borderRadius: fieldRadiusPx,
           bgcolor: "transparent",
           cursor: "pointer",
           color: "text.secondary",

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -29,6 +29,7 @@
  */
 import TextField from '@mui/material/TextField/index.js';
 import React, { useEffect, useState } from 'react';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 
 /**
@@ -253,7 +254,7 @@ export function DayBoundInput({
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
       inputProps={dayInputProps(testId, describedBy)}
-      sx={{ width: 165 }}
+      sx={[{ width: 165 }, fieldTextFieldStyles]}
     />
   );
 }

package/src/components/data-display/DataViews/data-views-more-fields.tsx

@@ -23,6 +23,9 @@ import { RangeBounds } from "./data-views-range-pill";
 import { isRangeSet } from "./data-views-range-values";
 import type { RangeValue } from "./data-views-types";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { fieldRadiusPx } from "../../../tokens/field-radius";
+import { fieldHeight } from "../../../tokens/field-height";
+import { fieldEdge } from "../../../tokens/field-edge";
 
 /** What each field's control needs, minus the panel's own chrome. */
 export interface MoreFieldProps {
@@ -93,9 +96,10 @@ function OverflowPill<T extends Record<string, unknown>>({
               pr: 1,
               border: 1,
               borderStyle: "solid",
-              borderColor: checked ? "primary.main" : "divider",
+              minHeight: fieldHeight,
+              borderColor: (theme) => (checked ? theme.palette.primary.main : fieldEdge(theme)),
               bgcolor: checked ? "action.selected" : "transparent",
-              borderRadius: 5,
+              borderRadius: fieldRadiusPx,
               cursor: "pointer",
               fontSize: "0.8125rem",
               color: checked ? "primary.main" : "text.secondary",

package/src/components/data-display/DataViews/data-views-number-input.tsx

@@ -38,6 +38,7 @@
 import Box from '@mui/material/Box/index.js';
 import TextField from '@mui/material/TextField/index.js';
 import React, { useEffect, useState } from 'react';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 /** Everything this field lets through: digits and the two separators. */
 const ALLOWED = /[^\d.,]/g;
@@ -162,7 +163,7 @@ export function NumberBoundInput({
             }
           : undefined
       }
-      sx={{ width: 140 }}
+      sx={[{ width: 140 }, fieldTextFieldStyles]}
     />
   );
 }

package/src/components/data-display/DataViews/data-views-range-pill.tsx

@@ -32,6 +32,9 @@ import {
   rangeChipLabel,
 } from './data-views-range-values';
 import type { RangeFieldConfig, RangeValue } from './data-views-types';
+import { fieldRadiusPx } from '../../../tokens/field-radius';
+import { fieldHeight } from '../../../tokens/field-height';
+import { fieldEdge } from '../../../tokens/field-edge';
 
 
 
@@ -205,7 +208,8 @@ function RangeTrigger<T extends Record<string, unknown>>({
   const inverted = isRangeInverted(value);
   // An INVERTED window gets its own tone rather than the ordinary "applied"
   // one: it is applied, and it matches nothing, and those are different states.
-  const tone = inverted ? 'error.main' : active ? 'primary.main' : 'divider';
+  // At rest the pill draws the one field border (`fieldEdge`).
+  const tone = inverted ? 'error.main' : active ? 'primary.main' : null;
   return (
     <Button
       variant="outlined"
@@ -226,8 +230,8 @@ function RangeTrigger<T extends Record<string, unknown>>({
       }
       endIcon={<ChevronDownIcon sx={{ fontSize: 16 }} />}
       sx={{
-        borderRadius: 999,
-        height: 34,
+        borderRadius: fieldRadiusPx,
+        height: fieldHeight,
         px: 1.5,
         maxWidth: 280,
         color: inverted ? 'error.main' : 'text.primary',
@@ -235,7 +239,7 @@ function RangeTrigger<T extends Record<string, unknown>>({
         fontSize: '0.8125rem',
         textTransform: 'none',
         whiteSpace: 'nowrap',
-        borderColor: tone,
+        borderColor: (theme) => tone ?? fieldEdge(theme),
         bgcolor: active ? 'action.selected' : 'background.paper',
         '&:hover': {
           borderColor: active ? tone : 'text.primary',

package/src/components/data-display/DataViews/data-views-search.tsx

@@ -13,7 +13,10 @@ import TextField from "@mui/material/TextField/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 import { Box } from "../../../mui/Box";
+import { fieldRadiusPx } from "../../../tokens/field-radius";
 import { useDataViewsCopy } from "./data-views-copy-context";
+import { fieldHeight, fieldTextFieldStyles } from "../../../tokens/field-height";
+import { fieldEdge } from "../../../tokens/field-edge";
 
 /** How long the box waits after the last keystroke before it queries. */
 const SEARCH_DEBOUNCE_MS = 350;
@@ -167,8 +170,9 @@ export function InlineKeyword({
         ) : undefined,
       }}
       // Takes the free space and gives it up first — step 3 of the ladder,
-      // which needs no flag because flex does it (see `computeSplit`).
-      sx={boxWidth(fill)}
+      // which needs no flag because flex does it (see `computeSplit`). The
+      // corner is the theme's field radius, so the box matches the pills beside it.
+      sx={(theme) => ({ ...boxWidth(fill), ...fieldTextFieldStyles(theme) })}
     />
   );
 }
@@ -199,9 +203,11 @@ export function CollapsedSearch({
       data-testid={testId ? `${testId}-collapsed` : undefined}
       sx={{
         position: "relative",
+        width: fieldHeight,
+        height: fieldHeight,
         border: 1,
-        borderRadius: 1,
-        borderColor: active ? "primary.main" : "divider",
+        borderRadius: fieldRadiusPx,
+        borderColor: (theme) => (active ? theme.palette.primary.main : fieldEdge(theme)),
         color: active ? "primary.main" : "text.secondary",
         bgcolor: active ? "action.selected" : "background.paper",
       }}

package/src/components/data-display/MapPreview/MapSearchBar.tsx

@@ -6,6 +6,9 @@ import { alpha, styled } from '@mui/material/styles/index.js';
 import type { FC } from 'react';
 import React from 'react';
 
+import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles } from '../../../tokens/field-height';
+
 // Kept module-local: styled() components cannot be exported across a module
 // boundary here without tripping TS2742.
 const SearchBar = styled(Box)(({ theme }) => ({
@@ -19,11 +22,12 @@ const SearchBar = styled(Box)(({ theme }) => ({
 }));
 
 const SearchField = styled(TextField)(({ theme }) => ({
+  ...fieldControlStyles(theme),
   '& .MuiOutlinedInput-root': {
     background: alpha(theme.palette.background.paper, 0.95),
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
-    borderRadius: theme.shape.borderRadius * 2,
+    borderRadius: fieldRadius(theme),
     '& fieldset': {
       borderColor: alpha(theme.palette.divider, 0.2),
     },

package/src/components/form/AddressAutocomplete/AddressTextField.tsx

@@ -7,12 +7,16 @@ import React from 'react';
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
+import { fieldRadius } from '../../../tokens/field-radius';
+import { fieldControlStyles, fieldTextFieldStyles } from '../../../tokens/field-height';
 
 // Kept module-local on purpose: the inferred type of a styled() component cannot
 // be named across a module boundary here (TS2742), so the plain component below
 // is what the rest of the folder imports.
 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%)`,
     backdropFilter: 'blur(10px)',
     WebkitBackdropFilter: 'blur(10px)',
@@ -32,6 +36,9 @@ const GlassTextField = styled(TextField)(({ theme }) => ({
   },
 }));
 
+/** The plain variants: MUI's own field, on the theme's field radius. */
+const FieldTextField = styled(TextField)(({ theme }) => fieldTextFieldStyles(theme));
+
 export type AddressTextFieldProps = Omit<TextFieldProps, 'variant'> & {
   addressVariant: AddressAutocompleteProps['variant'];
 };
@@ -42,5 +49,5 @@ export const AddressTextField: FC<AddressTextFieldProps> = ({ addressVariant, ..
   addressVariant === 'glass' ? (
     <GlassTextField variant="outlined" {...props} />
   ) : (
-    <TextField variant={addressVariant} {...props} />
+    <FieldTextField variant={addressVariant} {...props} />
   );

package/src/components/form/Autocomplete/Autocomplete.parts.tsx

@@ -16,6 +16,7 @@ import React from 'react';
 import { highlightLabel, type MatchMode } from './Autocomplete.helpers';
 import type { SuggestionItemState, SuggestionType } from './Autocomplete.types';
 import type { AutocompleteCopy } from '../../../copy';
+import { fieldTextFieldStyles } from '../../../tokens/field-height';
 
 const StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
@@ -113,6 +114,7 @@ export function AutocompleteInput(props: AutocompleteInputProps): React.JSX.Elem
       <TextField
         ref={props.inputRef}
         fullWidth
+        sx={fieldTextFieldStyles}
         value={props.inputValue}
         onChange={props.onChange}
         onKeyDown={props.onKeyDown}

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

@@ -61,8 +61,6 @@ export const ICON_ONLY_PADDING: Record<SizeValue, number> = {
 export const BUTTON_ICON_GLYPH_SIZE = 20;
 
 export const BUTTON_FONT_WEIGHT = 500;
-/** `theme.spacing(1)`. */
-export const BUTTON_RADIUS_UNITS = 1;
 /** Between the icon and the label: `theme.spacing(0.5)`. */
 export const BUTTON_ICON_GAP_UNITS = 0.5;
 export const BUTTON_SPINNER_SIZE = 16;

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,
@@ -28,7 +27,6 @@ import {
   GLASS_BORDER_ALPHA,
   GLOW_INNER_ALPHA,
   GLOW_RADIUS,
-  ICON_ONLY_PADDING,
   PULSE_ALPHA,
   PULSE_DURATION_MS,
   PULSE_SPREAD,
@@ -40,6 +38,8 @@ import type { ButtonProps, ButtonVariant } from './Button.types.native';
 import { renderTextChildren } from '../../../platform/text-children';
 import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
 import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { resolveFieldEdge } from '../../../tokens/field-edge.core';
+import { FIELD_BORDER_WIDTH, fieldHeightPx } from '../../../tokens/field-height.core';
 import { alpha } from '../../../tokens/color';
 import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
 import type { UiPaletteColor, UiTheme } from '../../../tokens/theme';
@@ -73,7 +73,15 @@ function paintFor(
   switch (variant) {
     case 'outline':
       return {
-        container: { backgroundColor: 'transparent', borderWidth: 1, borderColor: palette.main },
+        // A neutral outline rests on the one field border, as on the web.
+        container: {
+          backgroundColor: 'transparent',
+          borderWidth: FIELD_BORDER_WIDTH,
+          borderColor:
+            color === 'neutral'
+              ? resolveFieldEdge(theme.palette.divider, theme.palette.background.paper)
+              : palette.main,
+        },
         pressed: { backgroundColor: wash, borderColor: palette.dark },
         label: { color: palette.main },
       };
@@ -132,11 +140,15 @@ function disabledPaint(theme: UiTheme, variant: ButtonVariant): Paint {
 
 function sizeStyle(theme: UiTheme, size: SizeValue, iconOnly: boolean, hasIcon: boolean): ViewStyle {
   const metrics = BUTTON_SIZES[size];
+  // The theme's field height for the size, as on the web: a button stands
+  // level with the field beside it, and an icon-only one is that square.
+  const height = fieldHeightPx(theme.fieldHeight, size);
   if (iconOnly) {
-    return { padding: ICON_ONLY_PADDING[size], minWidth: 0 };
+    return { padding: 0, minWidth: height, minHeight: height };
   }
   return {
-    paddingVertical: metrics.paddingVertical,
+    minHeight: height,
+    paddingVertical: 0,
     paddingHorizontal: metrics.paddingHorizontal,
     minWidth: MIN_WIDTH,
     gap: hasIcon ? theme.spacing(BUTTON_ICON_GAP_UNITS) : undefined,
@@ -214,7 +226,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,