@tempoxyz/ds 0.2.0 → 0.2.4

package/src/web/components/DatePicker.tsx

@@ -240,7 +240,7 @@ namespace styles {
       height: '16',
       width: '16',
       selectors: {
-        '[data-size="medium"] > &': { height: '14px !custom', width: '14px !custom' },
+        '[data-size="medium"] > &': { height: '14', width: '14' },
         '[data-size="small"] > &': { height: '12', width: '12' },
       },
     },
@@ -258,24 +258,27 @@ namespace styles {
         opacity: '1 !custom',
         padding: '8',
         transformOrigin: 'var(--transform-origin) !custom',
-        transitionDuration: '240ms !custom',
-        transitionProperty: 'opacity, transform !custom',
+        transitionDuration: '240',
+        transitionProperty: 'opacity, scale !custom',
         transitionTimingFunction: 'spring',
         selectors: {
           '&:focus-visible': { outline: 'none !custom' },
           '&[data-ending-style]': {
             opacity: '0 !custom',
-            transform: 'scale(0.96) !custom',
-            transitionDuration: '150ms !custom',
+            scale: 'enter',
+            transitionDuration: '150',
             transitionTimingFunction: 'snappy',
           },
-          '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
+          '&[data-starting-style]': {
+            opacity: '0 !custom',
+            scale: 'enter',
+          },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionDuration: '150ms !custom',
+          transitionDuration: '150',
           transitionProperty: 'opacity !custom',
           selectors: {
-            '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+            '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
           },
         },
       },
@@ -283,10 +286,7 @@ namespace styles {
     { id: 'tds/web/date-picker/popup' },
   )
 
-  export const positioner = style(
-    { zIndex: '50 !custom' },
-    { id: 'tds/web/date-picker/positioner' },
-  )
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/date-picker/positioner' })
 
   export const trigger = variants(
     {
@@ -300,39 +300,39 @@ namespace styles {
         minWidth: '224',
         position: 'relative',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         textAlign: 'start',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty:
-          'background-color, border-color, color, opacity, outline-color, transform !custom',
+          'background-color, border-color, color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
         selectors: {
           '&:active:not(:disabled)': {
-            transform: 'scale(0.98) !custom',
-            transitionDuration: '100ms !custom',
+            scale: 'press',
+            transitionDuration: '100',
           },
-          '&:disabled': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:disabled': { cursor: 'default', opacity: 'disabled' },
           '&:focus-visible': { outlineColor: 'blue.700' },
           '&::before': {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
           '&[aria-invalid="true"]::before': { borderColor: 'red.800' },
           '&[aria-invalid="true"]:focus-visible': { outlineColor: 'red.800' },
           '&:focus-visible::before': { borderColor: 'transparent !custom' },
-          '&[data-placeholder]': { color: 'gray.700' },
+          '&[data-placeholder]': { color: 'gray.900' },
         },
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',
@@ -341,7 +341,7 @@ namespace styles {
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty:
             'background-color, border-color, color, opacity, outline-color !custom',
-          selectors: { '&:active:not(:disabled)': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { size: 'medium', variant: 'filled' },
@@ -364,7 +364,7 @@ namespace styles {
           },
           small: {
             borderRadius: '8',
-            columnGap: '6px !custom',
+            columnGap: '6',
             height: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -380,7 +380,7 @@ namespace styles {
             backgroundColor: 'background.surface',
             borderColor: 'grayAlpha.200',
             borderStyle: 'solid !custom',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             selectors: { '&:hover:not(:disabled)': { borderColor: 'grayAlpha.400' } },
           },
         },

package/src/web/components/Dialog.tsx

@@ -1,7 +1,7 @@
 import * as BaseUi from '@base-ui/react/dialog'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import * as Icons from '../icons/index.js'
+import { Close as CloseIcon } from '../icons/Close.js'
 import { style } from '../zyzz.config.js'
 import { Button } from './Button.js'
 
@@ -90,7 +90,7 @@ export namespace Dialog {
                   <Button shape="icon" size="medium" variant="secondary" {...styles.close()} />
                 }
               >
-                <Icons.Close />
+                <CloseIcon />
               </BaseUi.Dialog.Close>
             )}
           </BaseUi.Dialog.Popup>
@@ -134,13 +134,13 @@ export namespace styles {
     {
       backgroundColor: 'black',
       inset: '0',
-      opacity: '0.4 !custom',
+      opacity: 'disabled',
       position: 'fixed',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
-        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '160ms' },
+        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '160' },
         '&[data-starting-style]': { opacity: '0 !custom' },
       },
     },
@@ -151,8 +151,8 @@ export namespace styles {
   export const close = style(
     {
       height: '36',
-      insetBlockStart: '22px !custom',
-      insetInlineEnd: '22px !custom',
+      insetBlockStart: '22',
+      insetInlineEnd: '22',
       position: 'absolute',
     },
     { id: 'tds/web/dialog/close' },
@@ -169,42 +169,51 @@ export namespace styles {
 
   export const popup = style(
     {
-      backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+      backgroundColor: 'background.raised',
       borderRadius: '16',
-      boxShadow: '0 32px 64px -16px rgb(0 0 0 / 0.28) !custom',
+      boxShadow: 'modal',
       boxSizing: 'border-box',
       color: 'foreground',
       maxWidth: '448',
       outline: 'none !custom',
       padding: '24',
       position: 'relative',
-      transitionDuration: '280ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '280',
+      transitionProperty: 'opacity, scale, transform',
       transitionTimingFunction: 'spring',
       typography: 'copy.14',
       width: '100% !custom',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '180ms',
+          scale: 'enter',
+          transitionDuration: '180',
+        },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
       },
       '@media (max-width: 40rem)': {
-        borderBottomLeftRadius: '0 !custom',
-        borderBottomRightRadius: '0 !custom',
+        borderBottomLeftRadius: '0',
+        borderBottomRightRadius: '0',
         maxWidth: 'none !custom',
         paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px)) !custom',
         selectors: {
-          '&[data-ending-style]': { transform: 'translateY(100%) !custom' },
-          '&[data-starting-style]': { transform: 'translateY(100%) !custom' },
+          '&[data-ending-style]': { scale: 'none !custom', transform: 'translateY(100%) !custom' },
+          '&[data-starting-style]': {
+            scale: 'none !custom',
+            transform: 'translateY(100%) !custom',
+          },
         },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity',
         selectors: {
-          '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+          '&[data-ending-style], &[data-starting-style]': {
+            scale: 'none !custom',
+            transform: 'none !custom',
+          },
         },
       },
     },

package/src/web/components/Drawer.tsx

@@ -1,7 +1,7 @@
 import * as BaseUi from '@base-ui/react/drawer'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import * as Icons from '../icons/index.js'
+import { Close as CloseIcon } from '../icons/Close.js'
 import { style } from '../zyzz.config.js'
 import { Button } from './Button.js'
 import { styles as dialog } from './Dialog.js'
@@ -107,7 +107,7 @@ export namespace Drawer {
                   <Button shape="icon" size="medium" variant="secondary" {...dialog.close()} />
                 }
               >
-                <Icons.Close />
+                <CloseIcon />
               </BaseUi.Drawer.Close>
             )}
           </BaseUi.Drawer.Popup>
@@ -153,7 +153,7 @@ namespace styles {
       inset: '0',
       opacity: 'calc(0.4 * (1 - var(--drawer-swipe-progress, 0))) !custom',
       position: 'fixed',
-      transitionDuration: '320ms',
+      transitionDuration: '320',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'spring',
       selectors: {
@@ -163,7 +163,7 @@ namespace styles {
           transitionDuration: 'calc(var(--drawer-swipe-strength, 1) * 240ms) !custom',
         },
         '&[data-starting-style]': { opacity: '0 !custom' },
-        '&[data-swiping]': { transitionDuration: '0ms' },
+        '&[data-swiping]': { transitionDuration: '0' },
       },
     },
     { id: 'tds/web/drawer/backdrop' },
@@ -176,8 +176,8 @@ namespace styles {
 
   export const popup = style(
     {
-      backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
-      boxShadow: '0 32px 64px -16px rgb(0 0 0 / 0.28) !custom',
+      backgroundColor: 'background.raised',
+      boxShadow: 'modal',
       boxSizing: 'border-box',
       color: 'foreground',
       maxHeight: '100% !custom',
@@ -186,7 +186,7 @@ namespace styles {
       overscrollBehavior: 'contain',
       padding: '24',
       position: 'relative',
-      transitionDuration: '320ms',
+      transitionDuration: '320',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'spring',
       typography: 'copy.14',
@@ -237,7 +237,7 @@ namespace styles {
         '&[data-swipe-direction="up"][data-ending-style], &[data-swipe-direction="up"][data-starting-style]':
           { transform: 'translateY(-100%) !custom' },
         // The popup follows the pointer without lag while swiping.
-        '&[data-swiping]': { transitionDuration: '0ms', userSelect: 'none' },
+        '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity',

package/src/web/components/Field.tsx

@@ -1,5 +1,5 @@
 import * as BaseUi from '@base-ui/react/field'
-import { type ComponentPropsWithRef, useContext } from 'react'
+import { type ComponentPropsWithRef, useContext, useRef, useState } from 'react'
 import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
 import * as FieldVariant from './internal/FieldVariant.js'
@@ -37,21 +37,56 @@ 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`.
+   *
+   * 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
+   * change, as inside Base UI's `Form`. The browser still moves focus to the first invalid control.
+   *
+   * `checkValidity()` and `reportValidity()` validate the field only after the user has interacted
+   * with the control, when the browser already matches it as `:user-invalid`.
    */
   export function Root(props: Root.Props) {
-    const { className, size, success = false, variant, vars, ...attributes } = props
+    const actions = useRef<BaseUi.Field.Root.Actions | null>(null)
+    const {
+      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)
+
+            // 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>
     )
@@ -171,7 +206,7 @@ namespace styles {
     {
       color: 'gray.900',
       margin: '0',
-      transitionDuration: '200ms !custom',
+      transitionDuration: '200',
       transitionProperty: 'color, filter, opacity, transform !custom',
       transitionTimingFunction: 'snappy',
       typography: 'label.14',
@@ -192,7 +227,7 @@ namespace styles {
           pointerEvents: 'none',
           position: 'absolute',
           transform: 'translateY(-4px) !custom',
-          transitionDuration: '150ms !custom',
+          transitionDuration: '150',
         },
         '[data-variant="setting"] > &': { gridColumn: '1 !custom', typography: 'copy.14' },
         '[data-variant="setting"][data-field-size="small"] > &': { typography: 'copy.13' },
@@ -214,7 +249,7 @@ namespace styles {
   export const error = style(
     {
       color: 'red.900',
-      transitionDuration: '200ms !custom',
+      transitionDuration: '200',
       transitionProperty: 'color, filter, opacity, transform !custom',
       transitionTimingFunction: 'snappy',
       typography: 'label.14',
@@ -233,7 +268,7 @@ namespace styles {
           opacity: '0 !custom',
           position: 'absolute',
           transform: 'translateY(4px) !custom',
-          transitionDuration: '150ms !custom',
+          transitionDuration: '150',
         },
         '&[data-starting-style]': {
           color: 'gray.900',
@@ -263,7 +298,7 @@ namespace styles {
   export const label = style(
     {
       color: 'foreground',
-      transitionDuration: '160ms !custom',
+      transitionDuration: '160',
       transitionProperty: 'color, opacity !custom',
       transitionTimingFunction: 'snappy',
       typography: 'label.14.strong',
@@ -275,7 +310,7 @@ namespace styles {
         ':has(> [data-size="small"], > * > [data-size="small"]) > &': {
           typography: 'label.12.strong',
         },
-        '[data-disabled] &': { opacity: '0.4 !custom' },
+        '[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',
@@ -289,7 +324,7 @@ namespace styles {
           pointerEvents: 'none',
           transform: 'translateY(10px) !custom',
           transformOrigin: 'left top !custom',
-          transitionDuration: '240ms !custom',
+          transitionDuration: '240',
           transitionProperty: 'color, opacity, transform !custom',
           transitionTimingFunction: 'spring',
           typography: 'label.14',
@@ -326,7 +361,7 @@ namespace styles {
       // Labels sit 8px above medium and large controls, and 6px above small ones.
       rowGap: '8',
       selectors: {
-        '&:has(> [data-size="small"], > * > [data-size="small"])': { rowGap: '6px !custom' },
+        '&: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"]': {
@@ -338,7 +373,7 @@ namespace styles {
         },
         '&[data-variant="setting"][data-field-size="small"]': {
           paddingBlock: '12',
-          rowGap: '2px !custom',
+          rowGap: '2',
         },
       },
     },

package/src/web/components/Frame.tsx

@@ -33,7 +33,11 @@ export function Frame(props: Frame.Props) {
 export namespace Frame {
   export type Props = Root.Props
 
-  /** A row of action buttons aligned to the end. */
+  /**
+   * A row of action buttons that share its width equally. Each action stays at least as wide as
+   * its label, and a `shape="icon"` button keeps its own size. If you stack the actions in a column,
+   * set `flex-basis: auto` on them so each keeps its height.
+   */
   export function Actions(props: Actions.Props) {
     const { className, vars, ...attributes } = props
 
@@ -44,7 +48,10 @@ export namespace Frame {
     export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.actions>
   }
 
-  /** The main content area. It grows to fill the frame and scrolls when its content overflows. */
+  /**
+   * The main content area. It grows to fill the frame and never scrolls, so the container that holds
+   * the frame handles overflow. A direct child `Rows` renders as a filled, rounded well.
+   */
   export function Body(props: Body.Props) {
     const { className, vars, ...attributes } = props
 
@@ -173,7 +180,15 @@ export namespace Frame {
 namespace styles {
   export const actions = variants(
     {
-      base: { columnGap: '8', display: 'flex', justifyContent: 'flex-end' },
+      base: {
+        columnGap: '12',
+        display: 'flex',
+        selectors: {
+          // Actions keep at least their content width, icon buttons stay circles, and `:where` keeps
+          // the rule at single-class specificity so a caller can restore content-sized actions.
+          '& > :where(:not([data-shape="icon"]))': { flexBasis: '0', flexGrow: '1 !custom' },
+        },
+      },
     },
     { id: 'tds/web/frame/actions' },
   )
@@ -183,9 +198,15 @@ namespace styles {
       base: {
         color: 'gray.900',
         flexGrow: '1 !custom',
-        minHeight: '0',
-        overflowY: 'auto',
         typography: 'copy.14',
+        selectors: {
+          // The well clips its rows so their hover fills follow its corners.
+          '& > [data-rows]': {
+            backgroundColor: 'grayAlpha.100',
+            borderRadius: '12',
+            overflow: 'hidden',
+          },
+        },
       },
     },
     { id: 'tds/web/frame/body' },
@@ -206,18 +227,18 @@ namespace styles {
         height: '32',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         padding: '0',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, outline-color, outline-offset, transform',
         transitionTimingFunction: 'snappy',
         width: '32',
         selectors: {
           '&:hover': { backgroundColor: 'grayAlpha.200' },
           '&:active': { backgroundColor: 'grayAlpha.300', transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, outline-color',

package/src/web/components/Gauge.tsx

@@ -112,7 +112,7 @@ namespace styles {
   export const arc = style(
     {
       stroke: 'currentColor !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'stroke-dasharray',
       transitionTimingFunction: 'spring',
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },

package/src/web/components/Hex.tsx

@@ -287,7 +287,7 @@ namespace styles {
           style: {
             borderRadius: '12',
             height: '40',
-            paddingInlineEnd: '10px !custom',
+            paddingInlineEnd: '10',
             paddingInlineStart: '16',
             selectors: {
               '& [data-hex-copy]': {
@@ -325,8 +325,8 @@ namespace styles {
             columnGap: '12',
             display: 'flex',
             justifyContent: 'space-between',
-            transitionDuration: '160ms !custom',
-            transitionProperty: 'background-color, transform !custom',
+            transitionDuration: '160',
+            transitionProperty: 'background-color, scale !custom',
             transitionTimingFunction: 'snappy',
             selectors: {
               '& [data-stretch]::after': {
@@ -339,12 +339,12 @@ namespace styles {
               '&:has([data-stretch]:hover)': { backgroundColor: 'gray.200' },
               '&:has([data-stretch]:active)': {
                 backgroundColor: 'gray.300',
-                transform: 'scale(0.98) !custom',
+                scale: 'press',
               },
             },
             '@media (prefers-reduced-motion: reduce)': {
               transitionProperty: 'background-color !custom',
-              selectors: { '&:has([data-stretch]:active)': { transform: 'none !custom' } },
+              selectors: { '&:has([data-stretch]:active)': { scale: 'none !custom' } },
             },
           },
           inline: {},

package/src/web/components/IconChip.tsx

@@ -33,7 +33,7 @@ namespace styles {
       base: {
         alignItems: 'center',
         // grayAlpha 100 in light mode and 300 in dark, where 100 reads as black.
-        backgroundColor: 'light-dark(#0000000d, #ffffff21) !custom',
+        backgroundColor: 'background.chip',
         borderRadius: '12',
         boxSizing: 'border-box',
         color: 'foreground',

package/src/web/components/Input.tsx

@@ -194,21 +194,21 @@ namespace styles {
       justifyContent: 'center',
       opacity: '0 !custom',
       outlineColor: 'transparent !custom',
-      outlineOffset: '2px !custom',
+      outlineOffset: '2',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
       pointerEvents: 'none',
       position: 'relative',
       transform: 'scale(0.6) !custom',
-      transitionDuration: '160ms !custom',
+      transitionDuration: '160',
       transitionProperty: 'background-color, opacity, outline-color, transform, visibility !custom',
       transitionTimingFunction: 'snappy',
       visibility: 'hidden',
       width: '24',
       selectors: {
-        '&::after': { content: '"" !custom', inset: '-8px !custom', position: 'absolute' },
-        '&:active': { transform: 'scale(0.9) !custom', transitionDuration: '100ms !custom' },
+        '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
+        '&:active': { transform: 'scale(0.9) !custom', transitionDuration: '100' },
         '&:focus-visible': { outlineColor: 'blue.700' },
         '&:hover': { backgroundColor: 'grayAlpha.300' },
         '[data-filled] &': {
@@ -218,11 +218,11 @@ namespace styles {
           visibility: 'visible',
         },
         '[data-filled] &:active': { transform: 'scale(0.9) !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-4px !custom' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-4' },
         '[data-size="medium"] > &': { fontSize: '12', height: '20', width: '20' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-6px !custom' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-6' },
         '[data-size="small"] > &': { fontSize: '12', height: '16', width: '16' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-4px !custom' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-4' },
         // A small stacked field takes the medium size, so Clear takes the medium size too.
         '[data-variant="stacked"] > [data-size="small"] > &': {
           fontSize: '12',
@@ -230,7 +230,7 @@ namespace styles {
           width: '20',
         },
         '[data-variant="stacked"] > [data-size="small"] > &:last-child': {
-          marginInlineEnd: '-6px !custom',
+          marginInlineEnd: '-6',
         },
       },
       '@media (forced-colors: active)': {
@@ -262,8 +262,8 @@ namespace styles {
       selectors: {
         '&::-webkit-search-cancel-button': { appearance: 'none !custom', display: 'none' },
         '&::placeholder': {
-          color: 'grayAlpha.700',
-          transitionDuration: '160ms !custom',
+          color: 'grayAlpha.900',
+          transitionDuration: '160',
           transitionProperty: 'opacity !custom',
           transitionTimingFunction: 'snappy',
         },