@tempoxyz/ds 0.2.2 → 0.2.4

package/src/web/components/Field.tsx

@@ -206,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',
@@ -227,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' },
@@ -249,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',
@@ -268,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',
@@ -298,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',
@@ -310,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',
@@ -324,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',
@@ -361,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"]': {
@@ -373,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)': {
@@ -263,7 +263,7 @@ namespace styles {
         '&::-webkit-search-cancel-button': { appearance: 'none !custom', display: 'none' },
         '&::placeholder': {
           color: 'grayAlpha.900',
-          transitionDuration: '160ms !custom',
+          transitionDuration: '160',
           transitionProperty: 'opacity !custom',
           transitionTimingFunction: 'snappy',
         },

package/src/web/components/Kbd.tsx

@@ -151,7 +151,7 @@ namespace styles {
           medium: {
             height: '24',
             minWidth: '24',
-            paddingInline: '6px !custom',
+            paddingInline: '6',
             typography: 'label.12',
           },
           small: { height: '20', minWidth: '20', paddingInline: '4', typography: 'label.12' },

package/src/web/components/LoadingDots.tsx

@@ -60,8 +60,8 @@ namespace styles {
       selectors: {
         '&:nth-child(2)': { animationDelay: '160ms !custom' },
         '&:nth-child(3)': { animationDelay: '320ms !custom' },
-        '[data-size="large"] &': { height: '6px !custom', width: '6px !custom' },
-        '[data-size="small"] &': { height: '3px !custom', width: '3px !custom' },
+        '[data-size="large"] &': { height: '6', width: '6' },
+        '[data-size="small"] &': { height: '2', width: '2' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         animation: 'none !custom',
@@ -77,9 +77,9 @@ namespace styles {
       defaultVariants: { size: 'medium' },
       variants: {
         size: {
-          large: { columnGap: '6px !custom' },
+          large: { columnGap: '6' },
           medium: { columnGap: '4' },
-          small: { columnGap: '3px !custom' },
+          small: { columnGap: '2' },
         },
       },
     },

package/src/web/components/Menu.tsx

@@ -319,7 +319,7 @@ export namespace styles {
       base: {
         alignItems: 'center',
         // Concentric with the popup: its 16px radius minus its 6px padding.
-        borderRadius: '10px !custom',
+        borderRadius: '10',
         boxSizing: 'border-box',
         color: 'foreground',
         columnGap: '8',
@@ -329,13 +329,13 @@ export namespace styles {
         outline: 'none !custom',
         paddingInline: '12',
         textDecoration: 'none !custom',
-        transitionDuration: '120ms',
+        transitionDuration: '120',
         transitionProperty: 'background-color, color, opacity',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.strong',
         userSelect: 'none',
         selectors: {
-          '&[data-disabled]': { opacity: '0.4 !custom', pointerEvents: 'none' },
+          '&[data-disabled]': { opacity: 'disabled', pointerEvents: 'none' },
           '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
           '&[data-popup-open]': { backgroundColor: 'grayAlpha.100' },
         },
@@ -355,7 +355,7 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+        backgroundColor: 'background.raised',
         borderRadius: '16',
         boxShadow: 'popover',
         boxSizing: 'border-box',
@@ -364,24 +364,27 @@ export namespace styles {
         minWidth: '224',
         outline: 'none !custom',
         overflowY: 'auto',
-        padding: '6px !custom',
+        padding: '6',
         transformOrigin: 'var(--transform-origin) !custom',
-        transitionDuration: '200ms',
-        transitionProperty: 'opacity, transform',
+        transitionDuration: '200',
+        transitionProperty: 'opacity, scale',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
-            transform: 'scale(0.96) !custom',
-            transitionDuration: '140ms',
+            scale: 'enter',
+            transitionDuration: '140',
+          },
+          '&[data-starting-style]': {
+            opacity: '0 !custom',
+            scale: 'enter',
           },
-          '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !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' },
           },
         },
       },
@@ -410,7 +413,7 @@ export namespace styles {
     { id: 'tds/web/menu/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/menu/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/menu/positioner' })
 
   export const separator = style(
     {

package/src/web/components/NumberField.tsx

@@ -248,37 +248,37 @@ namespace styles {
       height: '36',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '2px !custom',
+      outlineOffset: '2',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
-      transitionDuration: '160ms !custom',
-      transitionProperty: 'background-color, opacity, outline-color, transform !custom',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, opacity, outline-color, scale !custom',
       transitionTimingFunction: 'snappy',
       width: '36',
       selectors: {
         '&:active:not(:disabled)': {
           backgroundColor: 'grayAlpha.400',
-          transform: 'scale(0.94) !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' },
         '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.300' },
-        '[data-size="large"] > &:first-child': { marginInlineStart: '-10px !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="large"] > &:first-child': { marginInlineStart: '-10' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="large"][data-variant="outlined"] > &:first-child': {
-          marginInlineStart: '-14px !custom',
+          marginInlineStart: '-14',
         },
         '[data-size="large"][data-variant="outlined"] > &:last-child': {
-          marginInlineEnd: '-14px !custom',
+          marginInlineEnd: '-14',
         },
         '[data-size="medium"] > &': { fontSize: '14', height: '28', width: '28' },
-        '[data-size="medium"] > &:first-child': { marginInlineStart: '-10px !custom' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="medium"] > &:first-child': { marginInlineStart: '-10' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:first-child': { marginInlineStart: '-8px !custom' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8px !custom' },
+        '[data-size="small"] > &:first-child': { marginInlineStart: '-8' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
         '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
           borderRadius: '6',
         },
@@ -290,7 +290,7 @@ namespace styles {
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, opacity, outline-color !custom',
-        selectors: { '&:active:not(:disabled)': { transform: 'none !custom' } },
+        selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/number-field/stepper' },

package/src/web/components/OtpField.tsx

@@ -138,25 +138,27 @@ namespace styles {
       boxSizing: 'border-box',
       caretColor: 'blue.700',
       color: 'foreground',
-      // Every state keeps this stroke width. Focus differs by color and its offset ring.
+      // Every state keeps this stroke width. Invalid and success rings sit inside the slot, so
+      // adjacent rings keep the full gap between slots. Focus differs by color and its offset ring.
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
       textAlign: 'center',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'background-color, color, opacity, outline-color, outline-offset, scale',
       transitionTimingFunction: 'overshoot',
       selectors: {
-        '&:disabled': { opacity: '0.4 !custom' },
+        '&:disabled': { opacity: 'disabled' },
         '&:focus': { scale: '1.06 !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
         '&[data-invalid], [data-invalid] &': {
           caretColor: 'red.900',
           color: 'red.900',
           outlineColor: 'red.800',
+          outlineOffset: '-2px !custom',
         },
         '[data-success] &': {
           animation: `${pop} 320ms ${vars.ease.overshoot} both !custom`,
@@ -165,10 +167,16 @@ namespace styles {
           caretColor: 'green.900',
           color: 'green.900',
           outlineColor: 'green.700',
+          outlineOffset: '-2px !custom',
         },
         '[data-success] &:hover:not(:disabled)': {
           backgroundColor: 'light-dark(rgb(19 169 99 / 0.18), rgb(19 169 99 / 0.24)) !custom',
         },
+        // Keyboard focus keeps its offset ring on an invalid or successful slot.
+        '&[data-invalid]:focus-visible, [data-invalid] &:focus-visible, [data-success] &:focus-visible':
+          {
+            outlineOffset: '2px !custom',
+          },
         // Delays follow the `animation` shorthand above, which would otherwise reset them.
         '[data-success] &:nth-child(2)': { animationDelay: '40ms !custom' },
         '[data-success] &:nth-child(3)': { animationDelay: '80ms !custom' },

package/src/web/components/Pagination.tsx

@@ -202,19 +202,19 @@ namespace styles {
         justifyContent: 'center',
         minWidth: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '12',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, color, outline-color, outline-offset, transform',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         selectors: {
           '&:active:is(a)': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:is(a)': { backgroundColor: 'grayAlpha.100' },
           '&[data-ellipsis]': { color: 'gray.900', cursor: 'default' },
         },
@@ -285,25 +285,25 @@ namespace styles {
         display: 'inline-flex',
         height: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '16',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         selectors: {
-          '&:active:not([aria-disabled])': { transform: 'scale(0.98) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:active:not([aria-disabled])': { scale: 'press' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([aria-disabled])': { backgroundColor: 'grayAlpha.200' },
-          '&[aria-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[aria-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, opacity, outline-color',
-          selectors: { '&:active:not([aria-disabled])': { transform: 'none !custom' } },
+          selectors: { '&:active:not([aria-disabled])': { scale: 'none !custom' } },
         },
       },
     },

package/src/web/components/Popover.tsx

@@ -154,12 +154,12 @@ export namespace Popover {
 namespace styles {
   export const arrow = style(
     {
-      color: 'light-dark(#fff, #1f1e1e) !custom',
+      color: 'background.raised',
       display: 'flex',
       selectors: {
         '&[data-side="bottom"]': { top: '-10px !custom' },
-        '&[data-side="left"]': { right: '-15px !custom', rotate: '90deg !custom' },
-        '&[data-side="right"]': { left: '-15px !custom', rotate: '-90deg !custom' },
+        '&[data-side="left"]': { right: '-14px !custom', rotate: '90deg !custom' },
+        '&[data-side="right"]': { left: '-14px !custom', rotate: '-90deg !custom' },
         '&[data-side="top"]': { bottom: '-10px !custom', rotate: '180deg !custom' },
       },
     },
@@ -173,7 +173,7 @@ namespace styles {
 
   export const popup = style(
     {
-      backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+      backgroundColor: 'background.raised',
       borderRadius: '16',
       boxShadow: 'popover',
       boxSizing: 'border-box',
@@ -182,30 +182,33 @@ namespace styles {
       outline: 'none !custom',
       padding: '24',
       transformOrigin: 'var(--transform-origin) !custom',
-      transitionDuration: '200ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '200',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
       typography: 'copy.14',
       width: 'max-content !custom',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '140ms',
+          scale: 'enter',
+          transitionDuration: '140',
+        },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !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' },
         },
       },
     },
     { id: 'tds/web/popover/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/popover/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/popover/positioner' })
 
   export const title = style(
     {

package/src/web/components/Progress.tsx

@@ -137,7 +137,7 @@ namespace styles {
       borderRadius: 'full',
       height: '100% !custom',
       // Base UI sets the width inline, and scaling it would distort the rounded ends.
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'width',
       transitionTimingFunction: 'spring',
 
@@ -153,7 +153,7 @@ namespace styles {
         selectors: {
           '&[data-indeterminate]': {
             animation: 'none !custom',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
             width: '100% !custom',
           },
         },