@tempoxyz/ds 0.2.2 → 0.2.4

package/src/web/components/Callout.tsx

@@ -132,30 +132,30 @@ namespace styles {
       flexShrink: '0 !custom',
       // Inline padding keeps the focus ring off the label. The negative end margin holds the label at
       // the callout's edge.
-      marginInlineEnd: '-4px !custom',
+      marginInlineEnd: '-4',
       marginInlineStart: 'auto !custom',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       paddingBlock: '0',
       paddingInline: '4',
       textDecoration: 'underline !custom',
       textUnderlineOffset: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'outline-color, outline-offset, text-decoration-color, transform',
+      transitionDuration: '160',
+      transitionProperty: 'outline-color, outline-offset, text-decoration-color, scale',
       transitionTimingFunction: 'snappy',
       // The shorthand takes the callout's type, so actions match the message text.
       font: 'inherit !custom',
       whiteSpace: 'nowrap',
       selectors: {
-        '&:active': { transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { textDecorationColor: 'transparent !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'outline-color, text-decoration-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/callout/action' },
@@ -167,7 +167,7 @@ namespace styles {
       selectors: {
         // The action's start padding would narrow the message, so the message gives the 4px back
         // and wraps at the same point.
-        '&:not(:last-child)': { marginInlineEnd: '-4px !custom' },
+        '&:not(:last-child)': { marginInlineEnd: '-4' },
       },
     },
     { id: 'tds/web/callout/content' },
@@ -201,10 +201,10 @@ namespace styles {
         // Light mode takes step 300, since step 100 nearly matches the page background. Dark mode
         // keeps step 100, which already stands apart from the page while keeping the text legible.
         intent: {
-          info: { backgroundColor: 'light-dark(#e6eefe, #161b29) !custom', color: 'blue.900' },
-          negative: { backgroundColor: 'light-dark(#ffe6e0, #2a1410) !custom', color: 'red.900' },
-          positive: { backgroundColor: 'light-dark(#d3f8df, #052315) !custom', color: 'green.900' },
-          warning: { backgroundColor: 'light-dark(#ffede2, #2d1504) !custom', color: 'amber.900' },
+          info: { backgroundColor: 'background.info', color: 'blue.900' },
+          negative: { backgroundColor: 'background.negative', color: 'red.900' },
+          positive: { backgroundColor: 'background.positive', color: 'green.900' },
+          warning: { backgroundColor: 'background.warning', color: 'amber.900' },
         },
         shape: {
           default: {},
@@ -221,7 +221,7 @@ namespace styles {
           },
           medium: {
             columnGap: '12',
-            paddingBlock: '10px !custom',
+            paddingBlock: '10',
             paddingInline: '16',
             typography: 'copy.14',
             selectors: { '& [data-callout-icon]': { fontSize: '16', height: '20' } },
@@ -231,7 +231,7 @@ namespace styles {
             paddingBlock: '7px !custom',
             paddingInline: '12',
             typography: 'copy.13',
-            selectors: { '& [data-callout-icon]': { fontSize: '14', height: '18px !custom' } },
+            selectors: { '& [data-callout-icon]': { fontSize: '14', height: '18' } },
           },
         },
       },

package/src/web/components/Checkbox.tsx

@@ -87,27 +87,27 @@ namespace styles {
         flexShrink: '0 !custom',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         padding: '0',
         position: 'relative',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&::after': { content: '"" !custom', inset: '-10px !custom', position: 'absolute' },
+          '&::after': { content: '"" !custom', inset: '-10', position: 'absolute' },
           '&:active:not([data-disabled])': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([data-disabled])': { backgroundColor: 'grayAlpha.400' },
           '&[data-checked], &[data-indeterminate]': { backgroundColor: 'foreground' },
           '&[data-checked]:hover:not([data-disabled]), &[data-indeterminate]:hover:not([data-disabled])':
-            { backgroundColor: 'foreground', opacity: '0.86 !custom' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+            { backgroundColor: 'foreground', opacity: 'hover' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
             outlineColor: 'red.800',
             outlineStyle: 'solid !custom',
-            outlineWidth: '1px !custom',
+            outlineWidth: '1',
           },
         },
         '@media (prefers-reduced-motion: reduce)': {
@@ -146,7 +146,7 @@ namespace styles {
   export const indicator = style(
     {
       display: 'flex',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'overshoot',
       selectors: {

package/src/web/components/ChoiceGroup.tsx

@@ -3,7 +3,7 @@ import * as BaseUi from '@base-ui/react/radio'
 import * as BaseUiGroup from '@base-ui/react/radio-group'
 import { type ComponentPropsWithRef, useCallback, useLayoutEffect, useRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { style, variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
 
 /**
  * A single-select segmented control built on Base UI Radio Group. The root has
@@ -195,27 +195,26 @@ namespace styles {
       flexShrink: '0 !custom',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       position: 'relative',
-      transitionDuration: '160ms',
-      transitionProperty:
-        'background-color, color, opacity, outline-color, outline-offset, transform',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, color, opacity, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       userSelect: 'none',
       whiteSpace: 'nowrap',
       zIndex: '1 !custom',
       selectors: {
-        '&:active:not([data-disabled])': { transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active:not([data-disabled])': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover:not([data-disabled])': { color: 'foreground' },
         '&[data-checked]': { color: 'foreground' },
-        '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, color, opacity, outline-color',
-        selectors: { '&:active:not([data-disabled])': { transform: 'none !custom' } },
+        selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/choice-group/item' },
@@ -223,7 +222,7 @@ namespace styles {
 
   export const pill = style(
     {
-      backgroundColor: 'light-dark(white, rgb(255 255 255 / 0.16)) !custom',
+      backgroundColor: 'background.indicator',
       boxShadow: 'raised',
       boxSizing: 'border-box',
       insetBlock: '4',
@@ -232,7 +231,7 @@ namespace styles {
       selectors: {
         // The pill matches each item's width, so it transitions width with its position.
         '&[data-ready]': {
-          transitionDuration: '240ms',
+          transitionDuration: '240',
           transitionProperty: 'transform, width',
           transitionTimingFunction: 'spring',
         },
@@ -315,8 +314,8 @@ namespace styles {
           chips: {
             columnGap: '8',
             height: 'auto !custom',
-            margin: '-4px !custom',
-            maxWidth: 'calc(100% + 8px) !custom',
+            margin: '-4',
+            maxWidth: `calc(100% + ${vars.spacing['8']}) !custom`,
             overflowX: 'auto',
             padding: '4',
             scrollbarWidth: 'none !custom',

package/src/web/components/Choicebox.tsx

@@ -301,7 +301,7 @@ namespace styles {
     {
       display: 'inline-flex',
       fontSize: '14',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'overshoot',
       selectors: {
@@ -340,7 +340,7 @@ namespace styles {
       height: '20',
       justifyContent: 'center',
       padding: '0',
-      transitionDuration: '160ms',
+      transitionDuration: '160',
       transitionProperty: 'background-color, border-color',
       transitionTimingFunction: 'snappy',
       width: '20',
@@ -387,7 +387,7 @@ namespace styles {
       borderRadius: 'full',
       height: '8',
       width: '8',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'overshoot',
       selectors: {
@@ -437,7 +437,7 @@ namespace styles {
               '& [data-choicebox-description]': { typography: 'copy.15' },
               '& :is([role="checkbox"], [role="radio"])': { height: '24', width: '24' },
               '& [role="checkbox"]': { borderRadius: '8' },
-              '& [role="radio"] > span': { height: '10px !custom', width: '10px !custom' },
+              '& [role="radio"] > span': { height: '10', width: '10' },
             },
           },
           medium: {},
@@ -453,7 +453,7 @@ namespace styles {
               '& [data-choicebox-description]': { typography: 'copy.13' },
               '& :is([role="checkbox"], [role="radio"])': { height: '16', width: '16' },
               '& [role="checkbox"]': { borderRadius: '4' },
-              '& [role="radio"] > span': { height: '6px !custom', width: '6px !custom' },
+              '& [role="radio"] > span': { height: '6', width: '6' },
             },
           },
         },
@@ -476,7 +476,7 @@ namespace styles {
       height: '20',
       justifyContent: 'center',
       padding: '0',
-      transitionDuration: '160ms',
+      transitionDuration: '160',
       transitionProperty: 'background-color, border-color',
       transitionTimingFunction: 'snappy',
       width: '20',
@@ -502,33 +502,33 @@ namespace styles {
       outlineColor: 'grayAlpha.200',
       outlineOffset: '-1px !custom',
       outlineStyle: 'solid !custom',
-      outlineWidth: '1px !custom',
+      outlineWidth: '1',
       padding: '16',
-      transitionDuration: '160ms',
-      transitionProperty: 'opacity, outline-color, outline-offset, outline-width, transform',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, outline-color, outline-offset, outline-width, scale',
       transitionTimingFunction: 'snappy',
       userSelect: 'none',
       selectors: {
-        '&:active:not(:has([data-disabled]))': { transform: 'scale(0.98) !custom' },
+        '&:active:not(:has([data-disabled]))': { scale: 'press' },
         '&:hover:not(:disabled, :focus-visible, :has([data-checked], [data-disabled], :focus-visible))':
           {
             outlineColor: 'grayAlpha.400',
           },
         '&:has(:focus-visible)': {
           outlineColor: 'blue.700',
-          outlineOffset: '2px !custom',
-          outlineWidth: '2px !custom',
+          outlineOffset: '2',
+          outlineWidth: '2',
         },
         '&:has([data-checked])': {
           outlineColor: 'foreground',
-          outlineOffset: '-2px !custom',
-          outlineWidth: '2px !custom',
+          outlineOffset: '-2',
+          outlineWidth: '2',
         },
         '&:has([data-checked]):has(:focus-visible)': {
           outlineColor: 'blue.700',
-          outlineOffset: '2px !custom',
+          outlineOffset: '2',
         },
-        '&:has([data-disabled])': { cursor: 'default', opacity: '0.4 !custom' },
+        '&:has([data-disabled])': { cursor: 'default', opacity: 'disabled' },
         // Button tiles drop native button styles and take their own focus and disabled states.
         '&:is(button)': {
           border: 'none !custom',
@@ -538,15 +538,15 @@ namespace styles {
         },
         '&:is(button):focus-visible': {
           outlineColor: 'blue.700',
-          outlineOffset: '2px !custom',
-          outlineWidth: '2px !custom',
+          outlineOffset: '2',
+          outlineWidth: '2',
         },
-        '&:is(button):disabled': { cursor: 'default', opacity: '0.4 !custom' },
-        '&:is(button):disabled:active': { transform: 'none !custom' },
+        '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
+        '&:is(button):disabled:active': { scale: 'none !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity, outline-color, outline-width',
-        selectors: { '&:active:not(:has([data-disabled]))': { transform: 'none !custom' } },
+        selectors: { '&:active:not(:has([data-disabled]))': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/choicebox/tile' },

package/src/web/components/Combobox.tsx

@@ -463,7 +463,7 @@ namespace styles {
       outline: 'none !custom',
       paddingInlineEnd: '4',
       paddingInlineStart: '12',
-      transitionDuration: '120ms !custom',
+      transitionDuration: '120',
       transitionProperty: 'background-color, color, opacity !custom',
       transitionTimingFunction: 'snappy',
       typography: 'copy.14',
@@ -472,7 +472,7 @@ namespace styles {
           backgroundColor: 'foreground',
           color: 'background.primary',
         },
-        '&[data-disabled]': { opacity: '0.4 !custom' },
+        '&[data-disabled]': { opacity: 'disabled' },
       },
     },
     { id: 'tds/web/combobox/chip' },
@@ -492,7 +492,7 @@ namespace styles {
       justifyContent: 'center',
       opacity: '0.72 !custom',
       padding: '0',
-      transitionDuration: '120ms !custom',
+      transitionDuration: '120',
       transitionProperty: 'opacity, transform !custom',
       transitionTimingFunction: 'snappy',
       width: '24',

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,32 +300,32 @@ 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',
           },
@@ -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

@@ -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

@@ -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',