@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/Drawer.tsx

@@ -84,7 +84,10 @@ export namespace Drawer {
 
   /**
    * Renders the portal, scrim, viewport and popup. `Drawer.Root` `swipeDirection` picks the edge.
-   * The popup scrolls when its content overflows. `ref`, `className` and `style` reach the popup.
+   * A `down` or `up` drawer spans the viewport width with 24px padding, and rounds the two corners
+   * away from its edge at radius `sm`. A `left` or `right` drawer is 440px wide and fills the
+   * viewport height, with 32px padding, and rounds the two corners away from its edge at radius
+   * `lg`. Corners on the viewport edge stay square. The popup scrolls when its content overflows. `ref`, `className` and `style` reach the popup.
    */
   export function Popup(props: Popup.Props) {
     const { children, className, closeButton = false, vars, ...attributes } = props
@@ -104,7 +107,7 @@ export namespace Drawer {
               <BaseUi.Drawer.Close
                 aria-label="Close"
                 render={
-                  <Button shape="icon" size="medium" variant="secondary" {...dialog.close()} />
+                  <Button shape="icon" size="medium" variant="secondary" {...styles.close()} />
                 }
               >
                 <CloseIcon />
@@ -121,7 +124,8 @@ export namespace Drawer {
       zyzz.Props.Variants<typeof styles.popup> &
       Pick<BaseUi.Drawer.Popup.Props, 'finalFocus' | 'initialFocus' | 'render'> & {
         /**
-         * Renders a top-right X button, labelled "Close", that closes the drawer.
+         * Renders a top-right X button, labelled "Close", that closes the drawer. The
+         * `Drawer.Title` then starts 8px lower, so it centers on the button.
          *
          * @default false
          */
@@ -136,6 +140,7 @@ export namespace Drawer {
     return (
       <BaseUi.Drawer.Title
         {...attributes}
+        data-drawer-title=""
         {...dialog.title({ className, style: props.style, vars })}
       />
     )
@@ -149,7 +154,7 @@ export namespace Drawer {
 namespace styles {
   export const backdrop = style(
     {
-      backgroundColor: 'black',
+      backgroundColor: 'neutral.100',
       inset: '0',
       opacity: 'calc(0.4 * (1 - var(--drawer-swipe-progress, 0))) !custom',
       position: 'fixed',
@@ -169,17 +174,34 @@ namespace styles {
     { id: 'tds/web/drawer/backdrop' },
   )
 
+  // The button sits in the padding corner of the popup, which the title keeps clear.
+  export const close = style(
+    {
+      insetBlockStart: '24',
+      insetInlineEnd: '24',
+      position: 'absolute',
+      selectors: {
+        '[data-swipe-direction="left"] > &, [data-swipe-direction="right"] > &': {
+          insetBlockStart: '32',
+          insetInlineEnd: '32',
+        },
+      },
+    },
+    { id: 'tds/web/drawer/close' },
+  )
+
   export const content = style(
     { boxSizing: 'border-box', marginInline: 'auto !custom', maxWidth: '512' },
     { id: 'tds/web/drawer/content' },
   )
 
+  // The Wallet Modal shadow has no Platform equivalent, so it stays a literal, as in `Dialog`.
   export const popup = style(
     {
-      backgroundColor: 'background.raised',
-      boxShadow: 'modal',
+      backgroundColor: 'background.elevated',
+      boxShadow: '0 1px 2px #0000000a, 0 16px 48px -12px #00000024 !custom',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       maxHeight: '100% !custom',
       outline: 'none !custom',
       overflowY: 'auto',
@@ -189,7 +211,7 @@ namespace styles {
       transitionDuration: '320',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'spring',
-      typography: 'copy.14',
+      typography: 'body.b2',
       willChange: 'transform',
       selectors: {
         '&[data-ending-style]': {
@@ -197,8 +219,8 @@ namespace styles {
         },
         '&[data-swipe-direction="down"]': {
           alignSelf: 'end',
-          borderTopLeftRadius: '16',
-          borderTopRightRadius: '16',
+          borderTopLeftRadius: 'sm',
+          borderTopRightRadius: 'sm',
           paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px)) !custom',
           transform: 'translateY(var(--drawer-swipe-movement-y, 0px)) !custom',
           width: '100% !custom',
@@ -206,31 +228,33 @@ namespace styles {
         '&[data-swipe-direction="down"][data-ending-style], &[data-swipe-direction="down"][data-starting-style]':
           { transform: 'translateY(100%) !custom' },
         '&[data-swipe-direction="left"]': {
-          borderBottomRightRadius: '16',
-          borderTopRightRadius: '16',
+          borderBottomRightRadius: 'lg',
+          borderTopRightRadius: 'lg',
           height: '100% !custom',
           justifySelf: 'start',
           maxWidth: 'calc(100vw - 3rem) !custom',
+          padding: '32',
           transform: 'translateX(var(--drawer-swipe-movement-x, 0px)) !custom',
-          width: '22rem !custom',
+          width: '27.5rem !custom',
         },
         '&[data-swipe-direction="left"][data-ending-style], &[data-swipe-direction="left"][data-starting-style]':
           { transform: 'translateX(-100%) !custom' },
         '&[data-swipe-direction="right"]': {
-          borderBottomLeftRadius: '16',
-          borderTopLeftRadius: '16',
+          borderBottomLeftRadius: 'lg',
+          borderTopLeftRadius: 'lg',
           height: '100% !custom',
           justifySelf: 'end',
           maxWidth: 'calc(100vw - 3rem) !custom',
+          padding: '32',
           transform: 'translateX(var(--drawer-swipe-movement-x, 0px)) !custom',
-          width: '22rem !custom',
+          width: '27.5rem !custom',
         },
         '&[data-swipe-direction="right"][data-ending-style], &[data-swipe-direction="right"][data-starting-style]':
           { transform: 'translateX(100%) !custom' },
         '&[data-swipe-direction="up"]': {
           alignSelf: 'start',
-          borderBottomLeftRadius: '16',
-          borderBottomRightRadius: '16',
+          borderBottomLeftRadius: 'sm',
+          borderBottomRightRadius: 'sm',
           transform: 'translateY(var(--drawer-swipe-movement-y, 0px)) !custom',
           width: '100% !custom',
         },
@@ -238,6 +262,9 @@ namespace styles {
           { transform: 'translateY(-100%) !custom' },
         // The popup follows the pointer without lag while swiping.
         '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
+        // The title keeps 16px clear of the 40px close button and centers on it, as in a dialog
+        // header.
+        '&[data-close-button] [data-drawer-title]': { paddingInlineEnd: '56', paddingTop: '8' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity',

package/src/web/components/Empty.tsx

@@ -9,6 +9,8 @@ import { style } from '../zyzz.config.js'
  * - Explain why the area is empty and what to do next.
  * - Offer one primary action that resolves the empty state.
  * - `Empty.Title` renders an `h3`, so place the state under an `h2` section heading.
+ * - Use a `Spinner` instead of `Empty.Icon` while the region waits on another task, such as a
+ *   checkout in another window. The icon or spinner sits 16px above the title.
  *
  * @example
  * <Empty.Root>
@@ -102,10 +104,10 @@ namespace styles {
 
   export const description = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       margin: '0',
-      maxWidth: '384',
-      typography: 'copy.14',
+      maxWidth: '360',
+      typography: 'body.b2',
     },
     { id: 'tds/web/empty/description' },
   )
@@ -113,14 +115,15 @@ namespace styles {
   export const icon = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.100',
+      backgroundColor: 'container.regular',
       borderRadius: 'full',
-      color: 'gray.900',
+      color: 'content.secondary',
+      cornerShape: 'round',
       display: 'flex',
       fontSize: '24',
       height: '48',
       justifyContent: 'center',
-      marginBlockEnd: '8',
+      marginBlockEnd: '12',
       width: '48',
     },
     { id: 'tds/web/empty/icon' },
@@ -132,16 +135,18 @@ namespace styles {
       boxSizing: 'border-box',
       display: 'flex',
       flexDirection: 'column',
-      paddingBlock: '32',
+      paddingBlock: '24',
       paddingInline: '16',
       rowGap: '4',
+      // A spinner in place of the icon leaves the same 16px above the title.
+      selectors: { '& > [role="progressbar"]': { marginBlockEnd: '12' } },
       textAlign: 'center',
     },
     { id: 'tds/web/empty' },
   )
 
   export const title = style(
-    { color: 'foreground', margin: '0', typography: 'heading.16' },
+    { color: 'content.primary', margin: '0', typography: 'heading.h3' },
     { id: 'tds/web/empty/title' },
   )
 }

package/src/web/components/Field.tsx

@@ -1,16 +1,11 @@
 import * as BaseUi from '@base-ui/react/field'
-import { type ComponentPropsWithRef, useContext, useRef, useState } from 'react'
+import { type ComponentPropsWithRef, useRef, useState } from 'react'
 import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
-import * as FieldVariant from './internal/FieldVariant.js'
 
 /**
- * Labeled form field. `stacked` places the label inside the field and floats it above the value
- * when the control is focused or filled, and a small control takes the medium size for room.
- * `default` places the label above the field. The label and
- * row gap follow the `size` of the control inside, and an error replaces the description.
- * `setting` puts the label and description beside a trailing control, and `size="small"` makes
- * that row compact.
+ * Labeled form field. The label sits 12px above the control and the message 12px below it, and a
+ * shown error replaces the description.
  *
  * - Give every control a visible `Field.Label`. Base UI links it to the control.
  * - Base UI adds `Field.Description` and a shown `Field.Error` to the control's `aria-describedby`.
@@ -19,9 +14,9 @@ import * as FieldVariant from './internal/FieldVariant.js'
  * @example
  * <Field.Root invalid={invalid}>
  *   <Field.Label>Email</Field.Label>
- *   <Input.Group>
- *     <Input.Control type="email" />
- *   </Input.Group>
+ *   <TextInput.Group>
+ *     <TextInput.Control type="email" />
+ *   </TextInput.Group>
  *   <Field.Description>Used for receipts.</Field.Description>
  *   <Field.Error match={invalid}>Enter a valid email.</Field.Error>
  * </Field.Root>
@@ -34,9 +29,7 @@ import * as FieldVariant from './internal/FieldVariant.js'
  */
 export namespace Field {
   /**
-   * Owns validity, dirty, touched and filled state for one control and shares the variant with the
-   * controls inside. Without `variant`, it inherits the variant of an enclosing `Fieldset` or
-   * `Field`, falling back to `default`.
+   * Owns validity, dirty, touched and filled state for one control.
    *
    * When a native `form` submit finds the control invalid, such as an empty `required` input, the
    * field validates and shows `Field.Error`. Outside `onBlur` mode, it then revalidates on each
@@ -51,44 +44,36 @@ export namespace Field {
       actionsRef = actions,
       className,
       onInvalidCapture,
-      size,
       success = false,
       validationMode,
-      variant,
       vars,
       ...attributes
     } = props
-    const inherited = useContext(FieldVariant.Context)
-    const resolved = variant ?? inherited ?? 'default'
     const [submitted, setSubmitted] = useState(false)
 
     return (
-      <FieldVariant.Context.Provider value={resolved}>
-        <BaseUi.Field.Root
-          {...attributes}
-          {...styles.root({ className, style: props.style, vars })}
-          actionsRef={actionsRef}
-          data-field=""
-          data-field-size={size}
-          data-success={success || undefined}
-          data-variant={resolved}
-          onInvalidCapture={(event) => {
-            onInvalidCapture?.(event)
+      <BaseUi.Field.Root
+        {...attributes}
+        {...styles.root({ className, style: props.style, vars })}
+        actionsRef={actionsRef}
+        data-field=""
+        data-success={success || undefined}
+        onInvalidCapture={(event) => {
+          onInvalidCapture?.(event)
 
-            // Base UI runs submit validation only inside its own Form. A native form fires `invalid`
-            // on each failing control instead, and the event does not bubble. `checkValidity()` and
-            // `reportValidity()` fire it too, but only a submit attempt marks the form's controls
-            // `:user-invalid` first. `invalid` targets only form controls.
-            if (!(event.target as Element).matches(':user-invalid')) return
+          // Base UI runs submit validation only inside its own Form. A native form fires `invalid`
+          // on each failing control instead, and the event does not bubble. `checkValidity()` and
+          // `reportValidity()` fire it too, but only a submit attempt marks the form's controls
+          // `:user-invalid` first. `invalid` targets only form controls.
+          if (!(event.target as Element).matches(':user-invalid')) return
 
-            actionsRef.current?.validate()
-            setSubmitted(true)
-          }}
-          // Base UI's Form counts submits to revalidate `onSubmit` fields on change. A native
-          // form has no count, so a failed submit switches the field to `onChange`.
-          validationMode={submitted && validationMode !== 'onBlur' ? 'onChange' : validationMode}
-        />
-      </FieldVariant.Context.Provider>
+          actionsRef.current?.validate()
+          setSubmitted(true)
+        }}
+        // Base UI's Form counts submits to revalidate `onSubmit` fields on change. A native
+        // form has no count, so a failed submit switches the field to `onChange`.
+        validationMode={submitted && validationMode !== 'onBlur' ? 'onChange' : validationMode}
+      />
     )
   }
 
@@ -108,15 +93,8 @@ export namespace Field {
         | 'validationDebounceTime'
         | 'validationMode'
       > & {
-        /**
-         * The density of a `setting` row: `medium` (default) or `small`, which sets smaller text and
-         * less padding. Other variants follow the size of the control inside instead.
-         */
-        size?: 'medium' | 'small' | undefined
-        /** Marks the value as accepted. Controls inside take the success tint and ring. */
+        /** Marks the value as accepted. Text fields inside end with a check. */
         success?: boolean | undefined
-        /** The label layout: `default`, `stacked` or `setting`. */
-        variant?: FieldVariant.Variant | undefined
       }
   }
 
@@ -138,6 +116,27 @@ export namespace Field {
       Pick<BaseUi.Field.Label.Props, 'nativeLabel' | 'render'>
   }
 
+  /**
+   * Regular-weight text at the end of the label row, such as "Optional". Place it inside
+   * `Field.Label`, so it joins the control's accessible name.
+   */
+  export function SecondaryLabel(props: SecondaryLabel.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        {...attributes}
+        {...styles.secondaryLabel({ className, style: props.style, vars })}
+        data-field-secondary=""
+      />
+    )
+  }
+
+  export namespace SecondaryLabel {
+    export type Props = ComponentPropsWithRef<'span'> &
+      zyzz.Props.Variants<typeof styles.secondaryLabel>
+  }
+
   /** Hint text rendered as a `p`. It fades out while a `Field.Error` is shown. */
   export function Description(props: Description.Props) {
     const { className, vars, ...attributes } = props
@@ -204,22 +203,15 @@ namespace styles {
    */
   export const description = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       margin: '0',
       transitionDuration: '200',
       transitionProperty: 'color, filter, opacity, transform !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14',
+      typography: 'body.b3',
       selectors: {
-        // Matches the label's size so the label, control and description read as one rhythm.
-        ':has(> [data-size="medium"], > * > [data-size="medium"]) > &': {
-          typography: 'label.13',
-        },
-        ':has(> [data-size="small"], > * > [data-size="small"]) > &': {
-          typography: 'label.12',
-        },
         ':has(> [data-field-error]:not([data-ending-style])) > &': {
-          color: 'red.900',
+          color: 'content.negative',
           filter: 'blur(2px) !custom',
           insetBlockEnd: '0',
           insetInline: '0',
@@ -229,8 +221,9 @@ namespace styles {
           transform: 'translateY(-4px) !custom',
           transitionDuration: '150',
         },
-        '[data-variant="setting"] > &': { gridColumn: '1 !custom', typography: 'copy.14' },
-        '[data-variant="setting"][data-field-size="small"] > &': { typography: 'copy.13' },
+        // An accepted value reads its message in the positive color, as an error does in negative.
+        '[data-success] > &': { color: 'content.positive' },
+        '[data-disabled] &': { color: 'content.subtle' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity !custom',
@@ -248,20 +241,14 @@ namespace styles {
   /** Takes the description's slot, rising in from below and back out as it clears. */
   export const error = style(
     {
-      color: 'red.900',
+      color: 'content.negative',
       transitionDuration: '200',
       transitionProperty: 'color, filter, opacity, transform !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14',
+      typography: 'body.b3',
       selectors: {
-        ':has(> [data-size="medium"], > * > [data-size="medium"]) > &': {
-          typography: 'label.13',
-        },
-        ':has(> [data-size="small"], > * > [data-size="small"]) > &': {
-          typography: 'label.12',
-        },
         '&[data-ending-style]': {
-          color: 'gray.900',
+          color: 'content.secondary',
           filter: 'blur(2px) !custom',
           insetBlockEnd: '0',
           insetInline: '0',
@@ -271,7 +258,7 @@ namespace styles {
           transitionDuration: '150',
         },
         '&[data-starting-style]': {
-          color: 'gray.900',
+          color: 'content.secondary',
           filter: 'blur(2px) !custom',
           opacity: '0 !custom',
           transform: 'translateY(4px) !custom',
@@ -297,55 +284,14 @@ namespace styles {
 
   export const label = style(
     {
-      color: 'foreground',
+      color: 'content.primary',
       transitionDuration: '160',
       transitionProperty: 'color, opacity !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14.strong',
+      typography: 'body.b2Strong',
       selectors: {
-        // Size rules come before the variant rules so setting and stacked keep their type.
-        ':has(> [data-size="medium"], > * > [data-size="medium"]) > &': {
-          typography: 'label.13.strong',
-        },
-        ':has(> [data-size="small"], > * > [data-size="small"]) > &': {
-          typography: 'label.12.strong',
-        },
-        '[data-disabled] &': { opacity: 'disabled' },
-        '[data-variant="setting"] > &': { gridColumn: '1 !custom', typography: 'copy.15.strong' },
-        '[data-variant="setting"][data-field-size="small"] > &': {
-          typography: 'copy.14.strong',
-        },
-        '[data-variant="stacked"] > &': {
-          alignSelf: 'start !custom',
-          color: 'gray.900',
-          gridArea: '1 / 1',
-          insetInlineStart: '0',
-          marginInline: '16',
-          pointerEvents: 'none',
-          transform: 'translateY(10px) !custom',
-          transformOrigin: 'left top !custom',
-          transitionDuration: '240',
-          transitionProperty: 'color, opacity, transform !custom',
-          transitionTimingFunction: 'spring',
-          typography: 'label.14',
-          zIndex: '1 !custom',
-        },
-        '[data-variant="stacked"][data-filled] > &, [data-variant="stacked"][data-focused] > &': {
-          transform: 'translateY(3px) scale(0.75) !custom',
-        },
-        // The resting label centers in the field, then floats into its top padding.
-        '[data-variant="stacked"]:has(> [data-size="large"], > * > [data-size="large"]) > &': {
-          marginInline: '20',
-          transform: 'translateY(18px) !custom',
-          typography: 'label.16',
-        },
-        ':is([data-variant="stacked"][data-filled], [data-variant="stacked"][data-focused]):has(> [data-size="large"], > * > [data-size="large"]) > &':
-          { transform: 'translateY(8px) scale(0.75) !custom' },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        selectors: {
-          '[data-variant="stacked"] > &': { transitionProperty: 'color, opacity !custom' },
-        },
+        '&:has(> [data-field-secondary])': { columnGap: '8', display: 'flex' },
+        '[data-disabled] &': { color: 'content.tertiary' },
       },
     },
     { id: 'tds/web/field/label' },
@@ -358,25 +304,25 @@ namespace styles {
       display: 'grid',
       gridTemplateColumns: 'minmax(0, 1fr) !custom',
       position: 'relative',
-      // Labels sit 8px above medium and large controls, and 6px above small ones.
-      rowGap: '8',
+      rowGap: '12',
       selectors: {
-        '&:has(> [data-size="small"], > * > [data-size="small"])': { rowGap: '6' },
         // A list of options reads as one block under its label, so it sits further away than one control.
-        '&:has(> [role="radiogroup"], > [role="group"] [role="checkbox"])': { rowGap: '12' },
-        '&[data-variant="setting"]': {
-          alignContent: 'center !custom',
-          columnGap: '16',
-          gridTemplateColumns: 'minmax(0, 1fr) auto !custom',
-          paddingBlock: '16',
-          rowGap: '4',
-        },
-        '&[data-variant="setting"][data-field-size="small"]': {
-          paddingBlock: '12',
-          rowGap: '2',
-        },
+        '&:has(> [role="radiogroup"], > [role="group"] [role="checkbox"])': { rowGap: '16' },
+        // The message of a code sits 8px below its slots, as the Code Input design places it.
+        '&:has(> [data-otp-field])': { rowGap: '8' },
       },
     },
     { id: 'tds/web/field' },
   )
+
+  // Text keeps 4.5:1 contrast, so it takes the secondary color rather than tertiary.
+  export const secondaryLabel = style(
+    {
+      color: 'content.secondary',
+      marginInlineStart: 'auto !custom',
+      typography: 'body.b2',
+      selectors: { '[data-disabled] &': { color: 'content.tertiary' } },
+    },
+    { id: 'tds/web/field/secondary-label' },
+  )
 }

package/src/web/components/Fieldset.tsx

@@ -2,24 +2,23 @@ import * as BaseUi from '@base-ui/react/fieldset'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
-import * as FieldVariant from './internal/FieldVariant.js'
 
 /**
- * Groups fields under a legend and sets the `variant` that nested `Field.Root` parts inherit.
- * Renders a native `fieldset` named by its `Fieldset.Legend` through `aria-labelledby`.
+ * Groups fields under a legend. Renders a native `fieldset` named by its `Fieldset.Legend` through
+ * `aria-labelledby`.
  *
  * - Group related controls, such as radios, checkboxes or the parts of an address.
  * - Write the legend as the question the group answers.
  * - Avoid nesting fieldsets.
  *
  * @example
- * <Fieldset.Root variant="stacked">
+ * <Fieldset.Root>
  *   <Fieldset.Legend>Recipient</Fieldset.Legend>
  *   <Field.Root>
  *     <Field.Label>Name</Field.Label>
- *     <Input.Group>
- *       <Input.Control />
- *     </Input.Group>
+ *     <TextInput.Group>
+ *       <TextInput.Control />
+ *     </TextInput.Group>
  *   </Field.Root>
  * </Fieldset.Root>
  *
@@ -30,34 +29,24 @@ import * as FieldVariant from './internal/FieldVariant.js'
  */
 export namespace Fieldset {
   /**
-   * Renders the `fieldset` and stacks its fields 12, 16 or 24px apart, following the `size` of
-   * their controls, with 12px under the legend. Adjacent
-   * `setting` rows touch, since their own padding spaces them. `disabled` disables the
-   * native controls inside and every nested `Field.Root`.
+   * Renders the `fieldset` and stacks its fields 16px apart, with 12px under the legend.
+   * `disabled` disables the native controls inside and every nested `Field.Root`.
    */
   export function Root(props: Root.Props) {
-    const { className, variant, vars, ...attributes } = props
+    const { className, vars, ...attributes } = props
 
     return (
-      <FieldVariant.Context.Provider value={variant}>
-        <BaseUi.Fieldset.Root
-          {...attributes}
-          {...styles.root({ className, style: props.style, vars })}
-        />
-      </FieldVariant.Context.Provider>
+      <BaseUi.Fieldset.Root
+        {...attributes}
+        {...styles.root({ className, style: props.style, vars })}
+      />
     )
   }
 
   export namespace Root {
     export type Props = ComponentPropsWithRef<'fieldset'> &
       zyzz.Props.Variants<typeof styles.root> &
-      Pick<BaseUi.Fieldset.Root.Props, 'render'> & {
-        /**
-         * Layout that nested `Field.Root` parts inherit unless they set their own `variant`. Fields
-         * fall back to `default` when neither sets one.
-         */
-        variant?: FieldVariant.Variant | undefined
-      }
+      Pick<BaseUi.Fieldset.Root.Props, 'render'>
   }
 
   /**
@@ -85,7 +74,7 @@ export namespace Fieldset {
 
 namespace styles {
   export const legend = style(
-    { color: 'foreground', typography: 'heading.16' },
+    { color: 'content.primary', typography: 'body.b1Strong' },
     { id: 'tds/web/fieldset/legend' },
   )
 
@@ -97,20 +86,10 @@ namespace styles {
       margin: '0',
       minWidth: '0',
       padding: '0',
-      // Margins instead of `row-gap`, so the space can depend on which children meet.
+      // Margins instead of `row-gap`, so the legend can sit closer than the fields.
       selectors: {
-        // Fields sit as far apart as their controls' size suggests: 12, 16 or 24px.
         '& > * + *': { marginBlockStart: '16' },
-        // The size sits on a direct control, or on the control of a field. Setting rows keep 16px, and
-        // a small stacked field renders medium. `:where` keeps the legend rule below in charge.
-        '& > * + :where(:not([data-variant="setting"], [data-variant="stacked"])):where([data-size="small"], :has(> [data-size="small"], > * > [data-size="small"]))':
-          { marginBlockStart: '12' },
-        '& > * + :where(:not([data-variant="setting"])):where([data-size="large"], :has(> [data-size="large"], > * > [data-size="large"]))':
-          { marginBlockStart: '24' },
         '& > [data-fieldset-legend] + *': { marginBlockStart: '12' },
-        '& > :is([data-fieldset-legend], [data-variant="setting"]) + [data-variant="setting"]': {
-          marginBlockStart: '0',
-        },
       },
     },
     { id: 'tds/web/fieldset' },