@tempoxyz/ds 0.2.2 → 0.2.4

package/src/web/components/Switch.tsx

@@ -84,7 +84,7 @@ namespace styles {
       flexShrink: '0 !custom',
       height: '24px !custom',
       // The thumb stretches its width while pressed, which a transform would distort.
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'background-color, box-shadow, translate, width',
       transitionTimingFunction: 'overshoot',
       width: '24px !custom',
@@ -94,22 +94,18 @@ namespace styles {
           boxShadow: 'none !custom',
           translate: '22px 0 !custom',
         },
-        '[data-size="large"] > &': { height: '30px !custom', width: '30px !custom' },
-        '[data-size="large"] > &[data-checked]': { translate: '30px 0 !custom' },
-        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36px !custom' },
-        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': {
-          translate: '24px 0 !custom',
-        },
+        '[data-size="large"] > &': { height: '30', width: '30' },
+        '[data-size="large"] > &[data-checked]': { translate: '30' },
+        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36' },
+        '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '24' },
         '[data-size="medium"]:active:not([data-disabled]) > &': { width: '30px !custom' },
         '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': {
           translate: '16px 0 !custom',
         },
-        '[data-size="small"] > &': { height: '20px !custom', width: '20px !custom' },
-        '[data-size="small"] > &[data-checked]': { translate: '16px 0 !custom' },
-        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24px !custom' },
-        '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': {
-          translate: '12px 0 !custom',
-        },
+        '[data-size="small"] > &': { height: '20', width: '20' },
+        '[data-size="small"] > &[data-checked]': { translate: '16' },
+        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24' },
+        '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': { translate: '12' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, box-shadow',
@@ -129,24 +125,24 @@ namespace styles {
         display: 'inline-flex',
         flexShrink: '0 !custom',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&::after': { content: '"" !custom', inset: '-8px !custom', position: 'absolute' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'grayAlpha.300' },
           '&[data-checked]': { backgroundColor: 'foreground' },
-          '&[data-checked]:hover:not([data-disabled])': { opacity: '0.86 !custom' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
             outlineColor: 'red.800',
             outlineStyle: 'solid !custom',
-            outlineWidth: '1px !custom',
+            outlineWidth: '1',
           },
           '[data-variant="setting"] > &': {
             alignSelf: 'center !custom',
@@ -162,9 +158,11 @@ namespace styles {
       defaultVariants: { size: 'medium' },
       variants: {
         size: {
-          large: { height: '38px !custom', padding: '4px !custom', width: '68px !custom' },
+          large: { height: '38', padding: '4', width: '68' },
+          // The track, thumb, and checked translation of each size add up exactly, so a size uses
+          // tokens or px throughout. Medium stays in px, since its 3px padding has no spacing step.
           medium: { height: '30px !custom', padding: '3px !custom', width: '52px !custom' },
-          small: { height: '24px !custom', padding: '2px !custom', width: '40px !custom' },
+          small: { height: '24', padding: '2', width: '40' },
         },
       },
     },

package/src/web/components/Table.tsx

@@ -282,17 +282,17 @@ namespace styles {
             selectors: {
               '& tbody tr': {
                 outlineColor: 'transparent !custom',
-                outlineOffset: '0px !custom',
+                outlineOffset: '0',
                 outlineStyle: 'solid !custom',
-                outlineWidth: '2px !custom',
-                transitionDuration: '160ms',
+                outlineWidth: '2',
+                transitionDuration: '160',
                 transitionProperty: 'background-color, outline-color, outline-offset',
                 transitionTimingFunction: 'snappy',
               },
               '& tbody tr:hover': { backgroundColor: 'grayAlpha.100' },
               '& tbody tr:focus-visible': {
                 outlineColor: 'blue.700',
-                outlineOffset: '-2px !custom',
+                outlineOffset: '-2',
               },
               '& tbody tr:is([tabindex], [role="button"], [data-href]):hover': {
                 cursor: 'pointer',

package/src/web/components/Tabs.tsx

@@ -131,7 +131,7 @@ namespace styles {
   export const indicator = variants(
     {
       base: {
-        backgroundColor: 'light-dark(white, rgb(255 255 255 / 0.16)) !custom',
+        backgroundColor: 'background.indicator',
         boxShadow: 'raised',
         height: 'var(--active-tab-height) !custom',
         insetBlockStart: '0',
@@ -140,7 +140,7 @@ namespace styles {
         position: 'absolute',
         translate: 'var(--active-tab-left) var(--active-tab-top) !custom',
         // The indicator matches each tab's size, so it transitions width and height with its position.
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'height, translate, width',
         transitionTimingFunction: 'spring',
         width: 'var(--active-tab-width) !custom',
@@ -205,14 +205,14 @@ namespace styles {
       base: {
         marginBlockStart: '12',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
-        transitionDuration: '160ms',
+        outlineWidth: '2',
+        transitionDuration: '160',
         transitionProperty: 'outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
       },
@@ -234,13 +234,13 @@ namespace styles {
         height: '100% !custom',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '16',
         position: 'relative',
-        transitionDuration: '160ms',
-        transitionProperty: 'color, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'color, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
@@ -248,15 +248,15 @@ namespace styles {
         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-active]': { color: 'foreground' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'color, outline-color',
-          selectors: { '&:active:not([data-disabled])': { transform: 'none !custom' } },
+          selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
         },
       },
     },

package/src/web/components/Tag.tsx

@@ -65,8 +65,8 @@ namespace styles {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
       flexShrink: '0 !custom',
-      height: '6px !custom',
-      width: '6px !custom',
+      height: '6',
+      width: '6',
     },
     { id: 'tds/web/tag/dot' },
   )
@@ -78,7 +78,7 @@ namespace styles {
         border: '1px solid !custom',
         borderColor: 'transparent !custom',
         boxSizing: 'border-box',
-        columnGap: '6px !custom',
+        columnGap: '6',
         display: 'inline-flex',
         height: '24',
         paddingInline: '8',
@@ -90,26 +90,26 @@ namespace styles {
           '&:is(button, a)': {
             cursor: 'pointer',
             outlineColor: 'transparent !custom',
-            outlineOffset: '0px !custom',
+            outlineOffset: '0',
             outlineStyle: 'solid !custom',
-            outlineWidth: '2px !custom',
+            outlineWidth: '2',
             textDecoration: 'none !custom',
-            transitionDuration: '160ms',
-            transitionProperty: 'opacity, outline-color, outline-offset, transform',
+            transitionDuration: '160',
+            transitionProperty: 'opacity, outline-color, outline-offset, scale',
             transitionTimingFunction: 'snappy',
           },
-          '&:is(button, a):active': { transform: 'scale(0.98) !custom' },
+          '&:is(button, a):active': { scale: 'press' },
           '&:is(button, a):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
           },
           '&:is(button, a):hover': { opacity: '0.8 !custom' },
-          '&:is(button):disabled': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           selectors: {
             '&:is(button, a)': { transitionProperty: 'opacity, outline-color' },
-            '&:is(button, a):active': { transform: 'none !custom' },
+            '&:is(button, a):active': { scale: 'none !custom' },
           },
         },
       },
@@ -139,7 +139,7 @@ namespace styles {
         size: {
           large: { height: '32', paddingInline: '12', typography: 'label.14' },
           medium: {},
-          small: { height: '20', paddingInline: '6px !custom' },
+          small: { height: '20', paddingInline: '6' },
         },
         variant: { outlined: {}, plain: {}, soft: {} },
       },

package/src/web/components/Textarea.tsx

@@ -60,25 +60,25 @@ namespace styles {
         backgroundColor: 'grayAlpha.100',
         borderColor: 'transparent !custom',
         borderStyle: 'solid',
-        borderWidth: '2px !custom',
+        borderWidth: '2',
         boxSizing: 'border-box',
         color: 'foreground',
         display: 'block',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
-        transitionDuration: '160ms !custom',
+        outlineWidth: '2',
+        transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
         selectors: {
-          '&:disabled': { opacity: '0.4 !custom' },
+          '&:disabled': { opacity: 'disabled' },
           '&:focus-visible': { outlineColor: 'blue.700' },
           '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
           '&::placeholder': {
             color: 'grayAlpha.900',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'opacity !custom',
             transitionTimingFunction: 'snappy',
           },
@@ -94,13 +94,13 @@ namespace styles {
           },
           '&[data-variant="card"][data-size="large"]': { borderRadius: '16', padding: '24' },
           // The first line sits below the floating label, as in a stacked Input of the same size.
-          '[data-variant="stacked"] > &': { gridArea: '1 / 1', paddingTop: '14px !custom' },
-          '[data-variant="stacked"] > &[data-size="large"]': { paddingTop: '22px !custom' },
+          '[data-variant="stacked"] > &': { gridArea: '1 / 1', paddingTop: '14' },
+          '[data-variant="stacked"] > &[data-size="large"]': { paddingTop: '22' },
           // A small stacked field takes the medium size, as Input does.
           '[data-variant="stacked"] > &[data-size="small"]': {
             borderRadius: '12',
             paddingBottom: '8',
-            paddingInline: '14px !custom',
+            paddingInline: '14',
             typography: 'copy.14',
           },
           '[data-variant="stacked"]:not([data-focused]) &::placeholder': { opacity: '0 !custom' },
@@ -125,20 +125,20 @@ namespace styles {
         size: {
           large: {
             borderRadius: '16',
-            paddingBlock: '14px !custom',
-            paddingInline: '18px !custom',
+            paddingBlock: '14',
+            paddingInline: '18',
             typography: 'copy.16',
           },
           medium: {
             borderRadius: '12',
             paddingBlock: '8',
-            paddingInline: '14px !custom',
+            paddingInline: '14',
             typography: 'copy.14',
           },
           small: {
             borderRadius: '8',
             paddingBlock: '5px !custom',
-            paddingInline: '10px !custom',
+            paddingInline: '10',
             typography: 'copy.13',
           },
         },
@@ -148,7 +148,7 @@ namespace styles {
             borderColor: 'grayAlpha.200',
             borderRadius: '12',
             borderStyle: 'solid',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             padding: '16',
             selectors: {
               '&:hover:not(:disabled)': {

package/src/web/components/Toast.tsx

@@ -162,20 +162,23 @@ namespace styles {
       // Weight overrides the typography token, so it stays after it.
       typography: 'button.12',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
-        '&:active': { backgroundColor: 'grayAlpha.300', transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': {
+          backgroundColor: 'grayAlpha.300',
+          scale: 'press',
+        },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { backgroundColor: 'grayAlpha.200' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/toast/action' },
@@ -208,20 +211,20 @@ namespace styles {
       padding: '0',
       width: '24',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       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': { backgroundColor: 'grayAlpha.100' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/toast/close' },
@@ -237,7 +240,7 @@ namespace styles {
       overflow: 'hidden',
       paddingBlock: '16',
       paddingInline: '20',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
@@ -284,7 +287,7 @@ namespace styles {
         'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px - (1 - max(0, calc(1 - var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height)))) scale(max(0, calc(1 - var(--toast-index) * 0.1))) !custom',
       transformOrigin: 'bottom center !custom',
       // Height follows the frontmost toast as the stack collapses, which a transform cannot express.
-      transitionDuration: '320ms, 320ms, 150ms',
+      transitionDuration: '320ms, 320ms, 150ms !custom',
       transitionProperty: 'transform, opacity, height',
       transitionTimingFunction: 'spring',
       userSelect: 'none',
@@ -292,7 +295,7 @@ namespace styles {
       selectors: {
         '&::after': {
           content: '"" !custom',
-          height: '13px !custom',
+          height: '14',
           insetBlockStart: '100% !custom',
           insetInline: '0',
           position: 'absolute',
@@ -307,7 +310,7 @@ namespace styles {
           opacity: '0 !custom',
           transform: 'translateY(150%) !custom',
         },
-        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms' },
+        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms !custom' },
         '&[data-ending-style][data-swipe-direction="down"]': {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) + 150%)) !custom',
         },
@@ -321,7 +324,7 @@ namespace styles {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) - 150%)) !custom',
         },
         // The toast follows the pointer without lag while swiping.
-        '&[data-swiping]': { transitionDuration: '0ms' },
+        '&[data-swiping]': { transitionDuration: '0' },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity' },
     },
@@ -340,7 +343,7 @@ namespace styles {
       margin: 'auto !custom',
       maxWidth: '384',
       position: 'fixed',
-      zIndex: '1000 !custom',
+      zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',

package/src/web/components/Tooltip.tsx

@@ -103,31 +103,34 @@ namespace styles {
       boxSizing: 'border-box',
       color: 'background.primary',
       maxWidth: '320',
-      paddingBlock: '6px !custom',
+      paddingBlock: '6',
       paddingInline: '12',
       transformOrigin: 'var(--transform-origin) !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
       typography: 'label.13',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '100ms',
+          scale: 'enter',
+          transitionDuration: '100',
+        },
+        '&[data-instant]': { transitionDuration: '0' },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-instant]': { transitionDuration: '0ms' },
-        '&[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/tooltip/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/tooltip/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/tooltip/positioner' })
 }

package/src/web/components/internal/Field.ts

@@ -14,12 +14,12 @@ export namespace styles {
         display: 'flex',
         justifyContent: 'space-between',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
         textAlign: 'start',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
@@ -29,19 +29,19 @@ export namespace styles {
             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',
           },
           '&:is(button)': { cursor: 'pointer' },
           '&:focus-visible, &:has(:focus-visible)': { outlineColor: 'blue.700' },
-          '&[data-disabled], &:disabled': { opacity: '0.4 !custom' },
+          '&[data-disabled], &:disabled': { opacity: 'disabled' },
           '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))::before': {
             borderColor: 'red.800',
           },
@@ -73,7 +73,7 @@ export namespace styles {
           large: { columnGap: '12', minHeight: '56', paddingInline: '20', typography: 'copy.16' },
           medium: { columnGap: '8', minHeight: '40', paddingInline: '16', typography: 'copy.14' },
           small: {
-            columnGap: '6px !custom',
+            columnGap: '6',
             minHeight: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -124,18 +124,18 @@ export 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',
+      transitionDuration: '160',
       transitionProperty: 'background-color, color, opacity, outline-color, transform !custom',
       transitionTimingFunction: 'snappy',
       width: '36',
       selectors: {
         '&:active:not(:disabled)': {
           transform: 'scale(0.92) !custom',
-          transitionDuration: '100ms !custom',
+          transitionDuration: '100',
         },
         '&:disabled': { cursor: 'default' },
         '&:focus-visible': { outlineColor: 'blue.700' },
@@ -145,23 +145,23 @@ export namespace styles {
           transform: 'scale(0.6) !custom',
         },
         '& > svg': {
-          transitionDuration: '200ms !custom',
+          transitionDuration: '200',
           transitionProperty: 'transform !custom',
           transitionTimingFunction: 'spring',
         },
         '&[data-popup-open] > svg': { transform: 'rotate(180deg) !custom' },
         // Adjacent buttons touch, so their icons sit close together.
-        '[data-size="large"] > & + &': { marginInlineStart: '-12px !custom' },
-        '[data-size="medium"] > & + &': { marginInlineStart: '-8px !custom' },
-        '[data-size="small"] > & + &': { marginInlineStart: '-6px !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="large"] > & + &': { marginInlineStart: '-12' },
+        '[data-size="medium"] > & + &': { marginInlineStart: '-8' },
+        '[data-size="small"] > & + &': { marginInlineStart: '-6' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
         '[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"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8px !custom' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
         '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
           borderRadius: '6',
         },