@tempoxyz/ds 0.2.2 → 0.2.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/mobile/components/Button.tsx

@@ -139,7 +139,7 @@ export namespace styles {
         {
           // React Native has no backdrop blur, so the overlay keeps only its translucent fill.
           when: { appearance: 'overlay', variant: 'secondary' },
-          style: { backgroundColor: 'rgba(112, 112, 112, 0.32) !custom' },
+          style: { backgroundColor: 'component.button.overlay.fill' },
         },
       ],
     },

package/src/mobile/components/IconButton.tsx

@@ -108,7 +108,7 @@ export namespace styles {
         {
           // React Native has no backdrop blur, so the overlay keeps only its translucent fill.
           when: { appearance: 'overlay', variant: 'secondary' },
-          style: { backgroundColor: 'rgba(112, 112, 112, 0.32) !custom' },
+          style: { backgroundColor: 'component.button.overlay.fill' },
         },
       ],
     },

package/src/mobile/components/Spinner.tsx

@@ -90,11 +90,10 @@ export namespace styles {
           true: {
             backgroundColor: 'background.elevated',
             borderRadius: 'xs',
-            boxShadow:
-              'rgba(0, 0, 0, 0.04) 0px 4px 12px, rgba(0, 0, 0, 0.04) 0px 8px 32px, rgba(0, 0, 0, 0.04) 0px 12px 36px !custom',
-            height: '44px !custom',
+            boxShadow: 'elevated',
+            height: '44',
             padding: '2',
-            width: '44px !custom',
+            width: '44',
           },
         },
       },

package/src/mobile/components/Toast.tsx

@@ -74,8 +74,7 @@ export namespace styles {
         alignSelf: 'flex-start',
         backgroundColor: 'background.elevated',
         borderRadius: 'full',
-        boxShadow:
-          'rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.08) 0px 8px 48px, rgba(0, 0, 0, 0.08) 0px 24px 64px !custom',
+        boxShadow: 'floating',
         flexDirection: 'row',
         gap: '12',
         minHeight: '48',

package/src/mobile/components/Toggle.tsx

@@ -71,9 +71,9 @@ export namespace styles {
     {
       base: {
         borderRadius: 'full',
-        height: '28px !custom',
+        height: '28',
         justifyContent: 'center',
-        width: '44px !custom',
+        width: '44',
       },
       defaultVariants: { disabled: false, value: false },
       variants: {

package/src/mobile/vars.ts

@@ -47,6 +47,10 @@ export const variables = Vars.define(
       },
       component: {
         button: {
+          // Neutral 056 at 32% alpha. `primitives.ts` has no step for it, so the value stays literal.
+          overlay: {
+            fill: { light: 'rgba(112, 112, 112, 0.32)', dark: 'rgba(112, 112, 112, 0.32)' },
+          },
           primary: {
             border: {
               light: core.color.neutral.shade['000'],
@@ -145,15 +149,25 @@ export const variables = Vars.define(
       xs: core.spacing['12'],
     },
     responsive: { '2Tier': 'Mobile', '3Tier': 'Mobile', '4Tier': 'Mobile' },
+    // Box shadows, since `color.shadow` holds only shadow colors. `elevated` lifts a control off its
+    // background, and `floating` lifts an overlay such as a toast.
+    shadow: {
+      elevated:
+        '0px 4px 12px rgba(0, 0, 0, 0.04), 0px 8px 32px rgba(0, 0, 0, 0.04), 0px 12px 36px rgba(0, 0, 0, 0.04)',
+      floating:
+        '0px 2px 8px rgba(0, 0, 0, 0.04), 0px 8px 48px rgba(0, 0, 0, 0.08), 0px 24px 64px rgba(0, 0, 0, 0.08)',
+    },
     spacing: {
       '12': core.spacing['12'],
       '16': core.spacing['16'],
       '2': core.spacing['2'],
       '20': core.spacing['20'],
       '24': core.spacing['24'],
+      '28': core.spacing['28'],
       '32': core.spacing['32'],
       '4': core.spacing['4'],
       '40': core.spacing['40'],
+      '44': core.spacing['44'],
       '48': core.spacing['48'],
       '64': core.spacing['64'],
       '8': core.spacing['8'],

package/src/web/components/Accordion.tsx

@@ -143,7 +143,7 @@ namespace styles {
     {
       flexShrink: '0 !custom',
       height: '16',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       width: '16',
@@ -169,11 +169,11 @@ namespace styles {
         height: 'var(--accordion-panel-height) !custom',
         overflow: 'hidden',
         // Revealing content needs its measured height, which a transform cannot provide.
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'height, opacity',
         transitionTimingFunction: 'spring',
         selectors: {
-          '&[data-ending-style]': { transitionDuration: '180ms' },
+          '&[data-ending-style]': { transitionDuration: '180' },
           '&[data-ending-style], &[data-starting-style]': {
             height: '0',
             opacity: '0 !custom',
@@ -232,21 +232,21 @@ namespace styles {
         justifyContent: 'space-between',
         minHeight: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         paddingInline: '0',
         textAlign: 'start',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         width: '100% !custom',
         selectors: {
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
-          '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity, outline-color' },
       },

package/src/web/components/AlertDialog.tsx

@@ -107,31 +107,34 @@ export namespace AlertDialog {
 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: '384',
       outline: 'none !custom',
       padding: '24',
-      transitionDuration: '280ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '280',
+      transitionProperty: 'opacity, scale',
       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 (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' },
         },
       },
     },

package/src/web/components/AmountInput.tsx

@@ -199,33 +199,33 @@ namespace styles {
       cursor: 'pointer',
       flexShrink: '0 !custom',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       position: 'relative',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
         // Each field size insets Max equally from the end and the top, with a concentric radius.
         '[data-size="large"] > &': {
           borderRadius: '8',
           height: '40',
-          marginInlineEnd: '-12px !custom',
+          marginInlineEnd: '-12',
           paddingInline: '16',
           typography: 'button.14',
         },
         '[data-size="medium"] > &': {
           borderRadius: '6',
           height: '28',
-          marginInlineEnd: '-10px !custom',
+          marginInlineEnd: '-10',
           paddingInline: '12',
           typography: 'button.12',
         },
         '[data-size="small"] > &': {
           borderRadius: '4',
           height: '24',
-          marginInlineEnd: '-8px !custom',
+          marginInlineEnd: '-8',
           paddingInline: '8',
           typography: 'button.12',
         },
@@ -233,7 +233,7 @@ namespace styles {
         '[data-variant="stacked"] > [data-size="small"] > &': {
           borderRadius: '6',
           height: '28',
-          marginInlineEnd: '-10px !custom',
+          marginInlineEnd: '-10',
           paddingInline: '12',
           typography: 'button.12',
         },
@@ -245,15 +245,15 @@ namespace styles {
           paddingInline: '12',
           typography: 'button.12',
         },
-        '&::after': { content: '"" !custom', inset: '-4px !custom', position: 'absolute' },
-        '&:active': { transform: 'scale(0.98) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&::after': { content: '"" !custom', inset: '-4', position: 'absolute' },
+        '&:active': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover': { backgroundColor: 'grayAlpha.300' },
         '[data-invalid] &': { display: 'none' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/amount-input/max' },

package/src/web/components/AppShell.tsx

@@ -294,12 +294,12 @@ namespace styles {
       inset: '0',
       opacity: '0.6 !custom',
       position: 'fixed',
-      transitionDuration: '280ms !custom',
+      transitionDuration: '280',
       transitionProperty: 'opacity !custom',
       transitionTimingFunction: 'spring',
-      zIndex: '40 !custom',
+      zIndex: 'overlay',
       selectors: {
-        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '200ms !custom' },
+        '&[data-ending-style]': { opacity: '0 !custom', transitionDuration: '200' },
         '&[data-starting-style]': { opacity: '0 !custom' },
       },
     },
@@ -310,23 +310,23 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
-      height: '1.5px !custom',
+      height: '2',
       insetInlineStart: '0',
       position: 'absolute',
       top: '50% !custom',
-      transitionDuration: '240ms !custom',
+      transitionDuration: '240',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       width: '100% !custom',
       selectors: {
         // Two bars 6px apart meet at the centre and cross into a close mark while the drawer is open.
-        '&:first-child': { transform: 'translateY(-3.75px) !custom' },
-        '&:last-child': { transform: 'translateY(2.25px) !custom' },
+        '&:first-child': { transform: 'translateY(-4px) !custom' },
+        '&:last-child': { transform: 'translateY(2px) !custom' },
         '[data-popup-open] &:first-child': {
-          transform: 'translateY(-0.75px) rotate(45deg) !custom',
+          transform: 'translateY(-1px) rotate(45deg) !custom',
         },
         '[data-popup-open] &:last-child': {
-          transform: 'translateY(-0.75px) rotate(-45deg) !custom',
+          transform: 'translateY(-1px) rotate(-45deg) !custom',
         },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none !custom' },
@@ -348,17 +348,17 @@ namespace styles {
       outline: 'none !custom',
       overflowY: 'auto',
       transform: 'translateX(var(--drawer-swipe-movement-x, 0px)) !custom',
-      transitionDuration: '280ms !custom',
+      transitionDuration: '280',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       width: 'min(18rem, 85vw) !custom',
       selectors: {
         '&[data-ending-style]': {
           transform: 'translateX(100%) !custom',
-          transitionDuration: '200ms !custom',
+          transitionDuration: '200',
         },
         '&[data-starting-style]': { transform: 'translateX(100%) !custom' },
-        '&[data-swiping]': { transitionDuration: '0ms !custom', userSelect: 'none' },
+        '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity !custom',
@@ -452,7 +452,7 @@ namespace styles {
         flexShrink: '0 !custom',
         minHeight: '0',
         paddingBottom: '20',
-        paddingInline: '10px !custom',
+        paddingInline: '10',
         rowGap: '24',
       },
     },
@@ -481,11 +481,11 @@ namespace styles {
       base: {
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-10px !custom',
+        marginInline: '-10',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '10px !custom',
+        paddingInline: '10',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin',
@@ -560,7 +560,7 @@ namespace styles {
         borderColor: 'grayAlpha.200',
         borderRadius: 'full',
         borderStyle: 'solid',
-        borderWidth: '1px !custom',
+        borderWidth: '1',
         boxShadow: 'raised',
         boxSizing: 'border-box',
         color: 'foreground',
@@ -571,26 +571,26 @@ namespace styles {
         insetInlineEnd: '16',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         padding: '0',
         // Fixed above the drawer and its backdrop, so the same button closes what it opened.
         position: 'fixed',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'background-color, outline-color, outline-offset, transform !custom',
         transitionTimingFunction: 'snappy',
         width: '40',
-        zIndex: '60 !custom',
+        zIndex: 'modal',
         selectors: {
           '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover': { backgroundColor: 'gray.100' },
           // While open, the button rides out with the drawer and rests 8px outside its left edge,
           // so the close mark never covers the sidebar. The width matches the drawer's.
           '&[data-popup-open]': {
             transform: 'translateX(calc(8px - min(18rem, 85vw))) !custom',
-            transitionDuration: '280ms !custom',
+            transitionDuration: '280',
             transitionTimingFunction: 'spring',
           },
         },
@@ -610,7 +610,7 @@ namespace styles {
       inset: '0',
       justifyContent: 'flex-end',
       position: 'fixed',
-      zIndex: '50 !custom',
+      zIndex: 'popover',
     },
     { id: 'tds/web/app-shell/viewport' },
   )

package/src/web/components/Avatar.tsx

@@ -141,7 +141,7 @@ namespace styles {
               // Margin changes the group's width, which a transform cannot. Transitions retarget from
               // the current margin, so a brief hover reverses smoothly.
               '& > * + *': {
-                transitionDuration: '220ms',
+                transitionDuration: '220',
                 transitionProperty: 'margin-inline-start',
                 transitionTimingFunction: 'snappy',
               },
@@ -160,11 +160,11 @@ namespace styles {
           false: { columnGap: '8' },
           true: {
             selectors: {
-              '& > * + *': { marginInlineStart: '-0.5rem !custom' },
+              '& > * + *': { marginInlineStart: '-8' },
               '& > *': {
                 outlineColor: 'background.primary',
                 outlineStyle: 'solid !custom',
-                outlineWidth: '2px !custom',
+                outlineWidth: '2',
               },
             },
           },

package/src/web/components/Banner.tsx

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

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