@tempoxyz/ds 0.2.0 → 0.2.4

package/src/web/components/SecretValue.tsx

@@ -118,18 +118,18 @@ namespace styles {
         display: 'flex',
         minWidth: '0',
         position: 'relative',
-        transitionDuration: '200ms, 160ms',
-        transitionProperty: 'background-color, transform',
+        transitionDuration: '200ms, 160ms !custom',
+        transitionProperty: 'background-color, scale',
         transitionTimingFunction: 'snappy',
         selectors: {
           // Inner buttons keep their own hover, so the block only reacts beside them.
           '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
-          '&:active:not(:has(button:active))': { transform: 'scale(0.985) !custom' },
+          '&:active:not(:has(button:active))': { scale: 'press' },
           '&[data-copied]': { backgroundColor: 'green.200' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color',
-          selectors: { '&:active:not(:has(button:active))': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:has(button:active))': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { size: 'medium' },

package/src/web/components/Select.tsx

@@ -298,7 +298,7 @@ namespace styles {
       display: 'inline-flex',
       flexShrink: '0 !custom',
       fontSize: '16',
-      transitionDuration: '200ms !custom',
+      transitionDuration: '200',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
       selectors: {
@@ -321,7 +321,7 @@ namespace styles {
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
       selectors: {
-        '&[data-placeholder]': { color: 'gray.700' },
+        '&[data-placeholder]': { color: 'gray.900' },
         '[data-variant="card"] > &': {
           typography: 'heading.24',
         },

package/src/web/components/SidebarMenu.tsx

@@ -204,7 +204,7 @@ namespace styles {
     {
       color: 'gray.900',
       marginInlineStart: 'auto !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       selectors: { '[data-panel-open] > &': { transform: 'rotate(90deg) !custom' } },
@@ -222,7 +222,7 @@ namespace styles {
         selectors: {
           // Groups sit 24px below preceding content, and a divider separates adjacent groups.
           '* + &': { marginTop: '20' },
-          '[data-sidebar-menu-size="small"] &': { rowGap: '2px !custom' },
+          '[data-sidebar-menu-size="small"] &': { rowGap: '2' },
           '[data-sidebar-menu-size="small"] * + &': { marginTop: '12' },
           '& + &': {
             borderTopColor: 'grayAlpha.200',
@@ -266,16 +266,15 @@ namespace styles {
         minHeight: '40',
         minWidth: '0',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         paddingInline: '12',
         textAlign: 'start',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms !custom',
-        transitionProperty:
-          'background-color, color, outline-color, outline-offset, transform !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, color, outline-color, outline-offset, scale !custom',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.strong',
         width: '100% !custom',
@@ -293,13 +292,13 @@ namespace styles {
             typography: 'label.14.strong',
           },
           '[data-sidebar-menu-size="small"] & > svg': { fontSize: '16' },
-          '&:active': { transform: 'scale(0.98) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '-2px !custom' },
+          '&:active': { scale: 'press' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '-2' },
           '&:hover': { backgroundColor: 'grayAlpha.100', color: 'foreground' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color !custom',
-          selectors: { '&:active': { transform: 'none !custom' } },
+          selectors: { '&:active': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { active: false },
@@ -317,7 +316,7 @@ namespace styles {
     {
       base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '4' },
       defaultVariants: { size: 'medium' },
-      variants: { size: { large: {}, medium: {}, small: { rowGap: '2px !custom' } } },
+      variants: { size: { large: {}, medium: {}, small: { rowGap: '2' } } },
     },
     { id: 'tds/web/sidebar-menu' },
   )
@@ -333,8 +332,8 @@ namespace styles {
       selectors: {
         '[data-sidebar-menu-size="small"] &': {
           paddingInlineStart: '24',
-          paddingTop: '2px !custom',
-          rowGap: '2px !custom',
+          paddingTop: '2',
+          rowGap: '2',
         },
       },
     },
@@ -347,11 +346,11 @@ namespace styles {
         height: 'var(--collapsible-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',

package/src/web/components/Slider.tsx

@@ -193,7 +193,7 @@ namespace styles {
     {
       boxSizing: 'border-box',
       width: '100% !custom',
-      selectors: { '&[data-disabled]': { opacity: '0.4 !custom' } },
+      selectors: { '&[data-disabled]': { opacity: 'disabled' } },
     },
     { id: 'tds/web/slider' },
   )
@@ -202,20 +202,19 @@ namespace styles {
     {
       backgroundColor: 'white',
       borderRadius: 'full',
-      boxShadow:
-        '0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.16), 0 1px 2px rgb(0 0 0 / 0.12) !custom',
+      boxShadow: 'thumb',
       boxSizing: 'border-box',
       height: '24',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '200ms',
+      outlineWidth: '2',
+      transitionDuration: '200',
       transitionProperty: 'outline-color, outline-offset, transform',
       transitionTimingFunction: 'snappy',
       width: '24',
       selectors: {
-        '&:has(:focus-visible)': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:has(:focus-visible)': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&[data-dragging]': { transform: 'scale(1.08) !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/Snippet.tsx

@@ -70,7 +70,7 @@ export namespace Snippet {
 
 namespace styles {
   export const prompt = style(
-    { color: 'gray.700', flexShrink: '0 !custom', userSelect: 'none' },
+    { color: 'gray.900', flexShrink: '0 !custom', userSelect: 'none' },
     { id: 'tds/web/snippet/prompt' },
   )
 
@@ -86,19 +86,19 @@ namespace styles {
         display: 'flex',
         minWidth: '0',
         position: 'relative',
-        transitionDuration: '200ms, 160ms',
-        transitionProperty: 'background-color, transform',
+        transitionDuration: '200ms, 160ms !custom',
+        transitionProperty: 'background-color, scale',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.mono',
         selectors: {
           // Inner buttons keep their own hover, so the block only reacts beside them.
           '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
-          '&:active:not(:has(button:active))': { transform: 'scale(0.985) !custom' },
+          '&:active:not(:has(button:active))': { scale: 'press' },
           '&[data-copied]': { backgroundColor: 'green.200' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color',
-          selectors: { '&:active:not(:has(button:active))': { transform: 'none !custom' } },
+          selectors: { '&:active:not(:has(button:active))': { scale: 'none !custom' } },
         },
       },
       defaultVariants: { size: 'medium' },
@@ -136,16 +136,16 @@ namespace styles {
       fontFamily: 'mono',
       minWidth: '0',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       overflowX: 'auto',
-      transitionDuration: '160ms',
+      transitionDuration: '160',
       transitionProperty: 'outline-color, outline-offset',
       transitionTimingFunction: 'snappy',
       whiteSpace: 'nowrap',
       selectors: {
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'outline-color' },
     },

package/src/web/components/SplitButton.tsx

@@ -96,15 +96,27 @@ namespace styles {
       display: 'inline-flex',
       selectors: {
         '& > :first-child': {
-          borderBottomRightRadius: '0 !custom',
-          borderTopRightRadius: '0 !custom',
+          borderBottomRightRadius: '0',
+          borderTopRightRadius: '0',
         },
+        // The trigger is a segment of the group, so its outer corners follow the action's size
+        // radius rather than the circle of an icon button.
         '& > [aria-haspopup]': {
-          borderBottomLeftRadius: '0 !custom',
-          borderTopLeftRadius: '0 !custom',
+          borderBottomLeftRadius: '0',
+          borderBottomRightRadius: '12',
+          borderTopLeftRadius: '0',
+          borderTopRightRadius: '12',
+        },
+        '& > [aria-haspopup][data-size="large"]': {
+          borderBottomRightRadius: '16',
+          borderTopRightRadius: '16',
+        },
+        '& > [aria-haspopup][data-size="small"]': {
+          borderBottomRightRadius: '8',
+          borderTopRightRadius: '8',
         },
         '& > [aria-haspopup] > svg': {
-          transitionDuration: '240ms',
+          transitionDuration: '240',
           transitionProperty: 'transform',
           transitionTimingFunction: 'spring',
         },

package/src/web/components/Stepper.tsx

@@ -71,7 +71,7 @@ namespace styles {
         borderRadius: 'full',
         flex: '1 !custom',
         height: '8',
-        transitionDuration: '240ms',
+        transitionDuration: '240',
         transitionProperty: 'background-color',
         transitionTimingFunction: 'snappy',
       },

package/src/web/components/Surface.tsx

@@ -1,7 +1,7 @@
 import { useRender } from '@base-ui/react/use-render'
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { variants } from '../zyzz.config.js'
+import { variants, vars } from '../zyzz.config.js'
 
 /**
  * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
@@ -123,18 +123,18 @@ namespace styles {
           // A trailing text button bleeds by its inline padding, so its label aligns with the content
           // edge, but never past the surface padding.
           '& > [data-variant="text"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-20px !custom',
+            marginInlineEnd: '-20',
           },
           '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-12px !custom',
+            marginInlineEnd: '-12',
           },
           '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-24px !custom',
+            marginInlineEnd: '-24',
           },
           '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-16px !custom' },
+            { marginInlineEnd: '-16' },
           '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
-            { marginInlineEnd: '-12px !custom' },
+            { marginInlineEnd: '-12' },
         },
       },
     },
@@ -158,15 +158,15 @@ namespace styles {
             cursor: 'pointer',
             font: 'inherit !custom',
             outlineColor: 'transparent !custom',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
             outlineStyle: 'solid !custom',
-            outlineWidth: '2px !custom',
+            outlineWidth: '2',
             padding: '0',
             textDecorationColor: 'transparent !custom',
             textDecorationLine: 'underline !custom',
             textDecorationThickness: '1px !custom',
             textUnderlineOffset: '4px !custom',
-            transitionDuration: '160ms',
+            transitionDuration: '160',
             transitionProperty: 'color, outline-color, text-decoration-color',
             transitionTimingFunction: 'snappy',
           },
@@ -187,12 +187,12 @@ namespace styles {
         color: 'foreground',
         display: 'block',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         textAlign: 'start',
-        transitionDuration: '160ms',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
         selectors: {
@@ -207,11 +207,11 @@ namespace styles {
           },
           '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
             backgroundColor: 'gray.200',
-            transform: 'scale(0.99) !custom',
+            scale: 'press',
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '2px !custom',
+            outlineOffset: '2',
           },
           // Edge-to-edge row fills would otherwise cross the rounded corners. A table clips rather
           // than hides its overflow, so a sticky header still sticks to the scrolling ancestor.
@@ -227,14 +227,14 @@ namespace styles {
             height: 'auto !custom',
           },
           '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '18px !custom' },
+            { paddingBlockStart: '18' },
           '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '10px !custom' },
+            { paddingBlockStart: '10' },
           '& > table[data-size="small"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '6px !custom' },
+            { paddingBlockStart: '6' },
           '&:disabled, &[aria-disabled="true"]': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
             pointerEvents: 'none',
           },
         },
@@ -242,7 +242,7 @@ namespace styles {
           transitionProperty: 'background-color, opacity, outline-color',
           selectors: {
             '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])':
-              { transform: 'none !custom' },
+              { scale: 'none !custom' },
           },
         },
       },
@@ -258,22 +258,22 @@ namespace styles {
             borderRadius: '16',
             padding: '24',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-24px !custom' },
-              '& > [data-rows]': { marginBlock: '-12px !custom' },
-              '& > table': { width: 'calc(100% + 48px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-24' },
+              '& > [data-rows]': { marginBlock: '-12' },
+              '& > table': { width: `calc(100% + ${vars.spacing['48']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '24px !custom',
+                paddingInlineStart: '24',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '24px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-24px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '24' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '24px !custom',
+                paddingBlockStart: '24',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-24px !custom',
+                marginBlockEnd: '-24',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '24px !custom',
+                paddingBlockEnd: '24',
               },
             },
           },
@@ -281,22 +281,22 @@ namespace styles {
             borderRadius: '12',
             padding: '16',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-16px !custom' },
-              '& > [data-rows]': { marginBlock: '-8px !custom' },
-              '& > table': { width: 'calc(100% + 32px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-16' },
+              '& > [data-rows]': { marginBlock: '-8' },
+              '& > table': { width: `calc(100% + ${vars.spacing['32']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '16px !custom',
+                paddingInlineStart: '16',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '16px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-16px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '16' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '16px !custom',
+                paddingBlockStart: '16',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-16px !custom',
+                marginBlockEnd: '-16',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '16px !custom',
+                paddingBlockEnd: '16',
               },
             },
           },
@@ -304,22 +304,22 @@ namespace styles {
             borderRadius: '8',
             padding: '12',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-12px !custom' },
-              '& > [data-rows]': { marginBlock: '-6px !custom' },
-              '& > table': { width: 'calc(100% + 24px) !custom' },
+              '& > table, & > [data-rows]': { marginInline: '-12' },
+              '& > [data-rows]': { marginBlock: '-6' },
+              '& > table': { width: `calc(100% + ${vars.spacing['24']}) !custom` },
               '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '12px !custom',
+                paddingInlineStart: '12',
               },
-              '& > table tr > :last-child': { paddingInlineEnd: '12px !custom' },
-              '& > table:first-child:has(> thead)': { marginBlockStart: '-12px !custom' },
+              '& > table tr > :last-child': { paddingInlineEnd: '12' },
+              '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
               '& > table:first-child > thead > tr:first-child > th': {
-                paddingBlockStart: '12px !custom',
+                paddingBlockStart: '12',
               },
               '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-12px !custom',
+                marginBlockEnd: '-12',
               },
               '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '12px !custom',
+                paddingBlockEnd: '12',
               },
             },
           },

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

@@ -95,7 +95,10 @@ export namespace Table {
     export type Props = ComponentPropsWithRef<'thead'> & zyzz.Props.Variants<typeof styles.head>
   }
 
-  /** A column header with `scope="col"` by default. Pass `scope="row"` for a row header. */
+  /**
+   * A column header with `scope="col"` by default. Pass `scope="row"` for a row header. Its text
+   * renders in the `label.14.strong` set, heavier than the `copy.14` body cells.
+   */
   export function HeaderCell(props: HeaderCell.Props) {
     const { className, justify, vars, ...attributes } = props
 
@@ -224,10 +227,11 @@ namespace styles {
   export const headerCell = variants(
     {
       base: {
-        color: 'gray.700',
+        // Body cells share gray.900, the lightest gray step at 4.5:1, so weight separates the header.
+        color: 'gray.900',
         paddingBlock: '12',
         paddingInline: '16',
-        typography: 'copy.14',
+        typography: 'label.14.strong',
       },
       defaultVariants: { justify: 'start' },
       variants: {
@@ -278,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',