@tempoxyz/ds 0.2.0 → 0.2.4

package/src/web/components/Banner.tsx

@@ -1,7 +1,7 @@
 import * as BaseUi from '@base-ui/react/button'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { Close } from '../icons/index.js'
+import { Close } from '../icons/Close.js'
 import { style, variants } from '../zyzz.config.js'
 
 /**
@@ -102,28 +102,28 @@ namespace styles {
       flexShrink: '0 !custom',
       // Inline padding keeps the focus ring off the label. The matching negative margin holds the label
       // where it sits without padding.
-      marginInline: '-4px !custom',
+      marginInline: '-4',
       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',
       typography: 'copy.14.strong',
       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/banner/action' },
@@ -179,24 +179,24 @@ namespace styles {
       insetInlineEnd: '8',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
       position: 'absolute',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       translate: '0 -50% !custom',
       width: '32',
       selectors: {
-        '&:active': { transform: 'scale(0.94) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': { 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/banner/dismiss' },

package/src/web/components/Breadcrumbs.tsx

@@ -101,17 +101,17 @@ namespace styles {
         borderRadius: '6',
         color: 'gray.900',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'color, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'copy.14',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:is(a)': { color: 'foreground' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'color, outline-color' },

package/src/web/components/Button.tsx

@@ -10,7 +10,7 @@ import { Spinner } from './Spinner.js'
  * shows a blue outline on keyboard focus.
  *
  * - Use `Button` for actions and `Button.Link` for navigation.
- * - Label with a specific verb, such as Send payment. Give `shape="icon"` buttons an `aria-label`.
+ * - Label with a specific verb, such as Send payment. Give `shape="icon"` buttons, which render as circles, an `aria-label`.
  * - Keep one `primary` button per view or section. Reserve `negative` for destructive actions.
  * - Set `focusableWhenDisabled` when a disabled button needs to stay reachable while nearby text
  *   explains why it is unavailable.
@@ -102,23 +102,23 @@ namespace styles {
         display: 'inline-flex',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty:
-          'background-color, box-shadow, color, opacity, outline-color, transform !custom',
+          'background-color, box-shadow, color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
         userSelect: 'none',
         whiteSpace: 'nowrap',
         selectors: {
           '&:active:not(:disabled)': {
-            transform: 'scale(0.97) !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' },
           '&[data-loading]': { opacity: '1 !custom' },
         },
@@ -128,10 +128,13 @@ namespace styles {
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, opacity, outline-color !custom',
-          selectors: { '&:active:not(:disabled)': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
         },
       },
-      compoundVariants: [{ when: { shape: 'icon' }, style: { paddingInline: '0' } }],
+      // Icon buttons are circles at every size, so the shape outranks the size radius and padding.
+      compoundVariants: [
+        { when: { shape: 'icon' }, style: { borderRadius: 'full', paddingInline: '0' } },
+      ],
       defaultVariants: { shape: 'default', size: 'medium', variant: 'primary' },
       variants: {
         shape: {
@@ -171,7 +174,7 @@ namespace styles {
               'linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0)) !custom',
             boxShadow: 'raised',
             color: 'background.primary',
-            selectors: { '&:hover:not(:disabled)': { opacity: '0.86 !custom' } },
+            selectors: { '&:hover:not(:disabled)': { opacity: 'hover' } },
           },
           // Matches the Input field fill.
           secondary: {
@@ -199,7 +202,7 @@ namespace styles {
         alignItems: 'inherit !custom',
         columnGap: 'inherit !custom',
         display: 'inline-flex',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'opacity, visibility !custom',
         transitionTimingFunction: 'snappy',
       },

package/src/web/components/Calendar.tsx

@@ -165,12 +165,11 @@ export function Calendar(props: Calendar.Props) {
     if (!target) return
 
     event.preventDefault()
-    const clamped =
-      min !== undefined && key(target) < key(min)
-        ? min
-        : max !== undefined && key(target) > key(max)
-          ? max
-          : target
+    const clamped = (() => {
+      if (min !== undefined && key(target) < key(min)) return min
+      if (max !== undefined && key(target) > key(max)) return max
+      return target
+    })()
     pendingFocus.current = true
     setFocused(clamped)
     if (!sameMonth(clamped, month)) showMonth(clamped)
@@ -458,12 +457,12 @@ namespace styles {
       height: '40',
       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, color, opacity, outline-color, outline-offset, transform',
       transitionTimingFunction: 'snappy',
@@ -471,11 +470,11 @@ namespace styles {
       width: '40',
       selectors: {
         '&:active:not([aria-disabled="true"])': { transform: 'scale(0.96) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover:not([aria-disabled="true"]):not([data-selected])': {
           backgroundColor: 'grayAlpha.200',
         },
-        '&[aria-disabled="true"]': { cursor: 'default', opacity: '0.4 !custom' },
+        '&[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
         '&[data-selected]': { backgroundColor: 'foreground', color: 'background.primary' },
         '&[data-today]::after': {
           backgroundColor: 'blue.700',

package/src/web/components/Callout.tsx

@@ -2,7 +2,10 @@ import * as BaseUi from '@base-ui/react/button'
 import { createContext, useContext } from 'react'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { AlertCircle, AlertTriangle, CheckCircle, InfoCircle } from '../icons/index.js'
+import { AlertCircle } from '../icons/AlertCircle.js'
+import { AlertTriangle } from '../icons/AlertTriangle.js'
+import { CheckCircle } from '../icons/CheckCircle.js'
+import { InfoCircle } from '../icons/InfoCircle.js'
 import { style, variants } from '../zyzz.config.js'
 
 type Intent = NonNullable<zyzz.Props.Variants<typeof styles.note>['intent']>
@@ -129,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' },
@@ -164,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' },
@@ -198,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: {},
@@ -218,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' } },
@@ -228,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',