@tempoxyz/ds 0.2.0 → 0.2.4

package/src/web/components/Kbd.tsx

@@ -1,24 +1,60 @@
-import type { ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useSyncExternalStore } from 'react'
 import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
 
-const modifiers = [
-  ['ctrl', '⌃', 'Control'],
-  ['alt', '⌥', 'Option'],
-  ['shift', '⇧', 'Shift'],
-  ['meta', '⌘', 'Command'],
-] as const
+// Each platform lists its modifiers in its own conventional order, as label and spoken name.
+const modifiers = {
+  apple: [
+    ['ctrl', '⌃', 'Control'],
+    ['alt', '⌥', 'Option'],
+    ['shift', '⇧', 'Shift'],
+    ['meta', '⌘', 'Command'],
+  ],
+  linux: [
+    ['meta', 'Super', 'Super'],
+    ['ctrl', 'Ctrl', 'Control'],
+    ['alt', 'Alt', 'Alt'],
+    ['shift', 'Shift', 'Shift'],
+  ],
+  windows: [
+    ['meta', 'Win', 'Windows'],
+    ['ctrl', 'Ctrl', 'Control'],
+    ['alt', 'Alt', 'Alt'],
+    ['shift', 'Shift', 'Shift'],
+  ],
+} as const
+
+// The server snapshot keeps server and hydration markup identical. React then re-renders with the
+// browser's platform.
+function usePlatform(): keyof typeof modifiers {
+  return useSyncExternalStore(
+    () => () => {},
+    () => {
+      if (/Macintosh|iPad|iPhone|iPod/.test(navigator.userAgent)) return 'apple'
+      return navigator.userAgent.includes('Windows') ? 'windows' : 'linux'
+    },
+    () => 'apple',
+  )
+}
 
 /**
- * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds its glyph before the
- * children, always in the order Control, Option, Shift, Command. Glyphs are hidden from assistive
- * tech, which reads the visually hidden name instead, so `<Kbd meta>K</Kbd>` reads as `Command K`.
+ * Shows a key or shortcut in a native `kbd` element. Each modifier prop adds a label before the
+ * children in the platform's conventional order: glyphs ordered Control, Option, Shift, Command on
+ * Apple platforms, and names ordered Win (Super on Linux), Ctrl, Alt, Shift elsewhere. Labels are
+ * hidden from assistive tech, which reads the visually hidden name instead, so `<Kbd mod>K</Kbd>`
+ * reads as `Command K` on a Mac and `Control K` on Windows.
+ *
+ * Without `platform`, the server and hydration render Apple glyphs, then the client switches to the
+ * browser's platform. If the request identifies the platform, such as in the `Sec-CH-UA-Platform`
+ * header, map it to `apple`, `linux`, or `windows` and pass it as `platform`, so the markup never
+ * changes. Any other value falls back to the browser's platform.
  *
  * - Pass the main key as children and modifiers as props, rather than typing glyphs into children.
+ * - Use `mod` for shortcuts that take Command on Apple platforms and Ctrl elsewhere.
  * - Single-character shortcuts need a way to turn them off or remap them.
  *
  * @example
- * <Kbd meta shift>
+ * <Kbd mod shift>
  *   P
  * </Kbd>
  *
@@ -27,16 +63,27 @@ const modifiers = [
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
  */
 export function Kbd(props: Kbd.Props) {
-  const { alt, children, className, ctrl, meta, shift, size, vars, ...attributes } = props
-  const active = { alt, ctrl, meta, shift }
+  const detected = usePlatform()
+  const { alt, children, className, ctrl, meta, mod, platform, shift, size, vars, ...attributes } =
+    props
+  // Untyped data, such as a raw `Sec-CH-UA-Platform` header, can hold any value, including inherited
+  // keys such as `toString`. Every value outside `modifiers` falls back to detection.
+  const resolved =
+    platform !== undefined && Object.hasOwn(modifiers, platform) ? platform : detected
+  const active = {
+    alt,
+    ctrl: ctrl || (mod && resolved !== 'apple'),
+    meta: meta || (mod && resolved === 'apple'),
+    shift,
+  }
 
   return (
     <kbd {...attributes} {...styles.kbd({ className, size, style: props.style, vars })}>
-      {modifiers.map(
-        ([key, glyph, name]) =>
+      {modifiers[resolved].map(
+        ([key, label, name]) =>
           active[key] && (
             <span key={key}>
-              <span aria-hidden="true">{glyph}</span>
+              <span aria-hidden="true">{label}</span>
               <span {...styles.hidden()}>{name} </span>
             </span>
           ),
@@ -49,13 +96,22 @@ export function Kbd(props: Kbd.Props) {
 export namespace Kbd {
   export type Props = ComponentPropsWithRef<'kbd'> &
     zyzz.Props.Variants<typeof styles.kbd> & {
-      /** Adds `⌥`, read as `Option`. */
+      /** Adds `⌥` (Option) on Apple platforms and Alt elsewhere. */
       alt?: boolean | undefined
-      /** Adds `⌃`, read as `Control`. */
+      /** Adds `⌃` (Control) on Apple platforms and Ctrl elsewhere. */
       ctrl?: boolean | undefined
-      /** Adds `⌘`, read as `Command`. */
+      /** Adds `⌘` (Command) on Apple platforms, Win on Windows, and Super on Linux. */
       meta?: boolean | undefined
-      /** Adds `⇧`, read as `Shift`. */
+      /** Adds the primary shortcut modifier: `⌘` (Command) on Apple platforms and Ctrl elsewhere. */
+      mod?: boolean | undefined
+      /**
+       * Selects the modifier labels, names and order. Defaults to the browser's platform, read after
+       * hydration, and to `apple` on the server. Browsers on other platforms, such as Android or
+       * ChromeOS, use the `linux` names. Any other value, such as a raw `Sec-CH-UA-Platform` header,
+       * falls back to the default.
+       */
+      platform?: keyof typeof modifiers | undefined
+      /** Adds `⇧` (Shift) on Apple platforms and Shift elsewhere. */
       shift?: boolean | undefined
     }
 }
@@ -95,7 +151,7 @@ namespace styles {
           medium: {
             height: '24',
             minWidth: '24',
-            paddingInline: '6px !custom',
+            paddingInline: '6',
             typography: 'label.12',
           },
           small: { height: '20', minWidth: '20', paddingInline: '4', typography: 'label.12' },

package/src/web/components/LoadingDots.tsx

@@ -60,8 +60,8 @@ namespace styles {
       selectors: {
         '&:nth-child(2)': { animationDelay: '160ms !custom' },
         '&:nth-child(3)': { animationDelay: '320ms !custom' },
-        '[data-size="large"] &': { height: '6px !custom', width: '6px !custom' },
-        '[data-size="small"] &': { height: '3px !custom', width: '3px !custom' },
+        '[data-size="large"] &': { height: '6', width: '6' },
+        '[data-size="small"] &': { height: '2', width: '2' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         animation: 'none !custom',
@@ -77,9 +77,9 @@ namespace styles {
       defaultVariants: { size: 'medium' },
       variants: {
         size: {
-          large: { columnGap: '6px !custom' },
+          large: { columnGap: '6' },
           medium: { columnGap: '4' },
-          small: { columnGap: '3px !custom' },
+          small: { columnGap: '2' },
         },
       },
     },

package/src/web/components/Menu.tsx

@@ -306,7 +306,7 @@ export namespace styles {
 
   export const groupLabel = style(
     {
-      color: 'gray.700',
+      color: 'gray.900',
       paddingBlock: '8',
       paddingInline: '12',
       typography: 'label.12',
@@ -319,7 +319,7 @@ export namespace styles {
       base: {
         alignItems: 'center',
         // Concentric with the popup: its 16px radius minus its 6px padding.
-        borderRadius: '10px !custom',
+        borderRadius: '10',
         boxSizing: 'border-box',
         color: 'foreground',
         columnGap: '8',
@@ -329,13 +329,13 @@ export namespace styles {
         outline: 'none !custom',
         paddingInline: '12',
         textDecoration: 'none !custom',
-        transitionDuration: '120ms',
+        transitionDuration: '120',
         transitionProperty: 'background-color, color, opacity',
         transitionTimingFunction: 'snappy',
         typography: 'label.14.strong',
         userSelect: 'none',
         selectors: {
-          '&[data-disabled]': { opacity: '0.4 !custom', pointerEvents: 'none' },
+          '&[data-disabled]': { opacity: 'disabled', pointerEvents: 'none' },
           '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
           '&[data-popup-open]': { backgroundColor: 'grayAlpha.100' },
         },
@@ -355,7 +355,7 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+        backgroundColor: 'background.raised',
         borderRadius: '16',
         boxShadow: 'popover',
         boxSizing: 'border-box',
@@ -364,24 +364,27 @@ export namespace styles {
         minWidth: '224',
         outline: 'none !custom',
         overflowY: 'auto',
-        padding: '6px !custom',
+        padding: '6',
         transformOrigin: 'var(--transform-origin) !custom',
-        transitionDuration: '200ms',
-        transitionProperty: 'opacity, transform',
+        transitionDuration: '200',
+        transitionProperty: 'opacity, scale',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
-            transform: 'scale(0.96) !custom',
-            transitionDuration: '140ms',
+            scale: 'enter',
+            transitionDuration: '140',
+          },
+          '&[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' },
           },
         },
       },
@@ -410,7 +413,7 @@ export namespace styles {
     { id: 'tds/web/menu/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/menu/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/menu/positioner' })
 
   export const separator = style(
     {
@@ -424,7 +427,7 @@ export namespace styles {
 
   export const shortcut = style(
     {
-      color: 'gray.700',
+      color: 'gray.900',
       marginInlineStart: 'auto !custom',
       paddingInlineStart: '16',
       typography: 'label.13',

package/src/web/components/NumberField.tsx

@@ -206,7 +206,7 @@ namespace styles {
       padding: '0',
       textAlign: 'center',
       selectors: {
-        '&::placeholder': { color: 'gray.700' },
+        '&::placeholder': { color: 'gray.900' },
         '[data-typing] > &': { color: 'inherit !custom' },
       },
     },
@@ -248,37 +248,37 @@ 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',
-      transitionProperty: 'background-color, opacity, outline-color, transform !custom',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, opacity, outline-color, scale !custom',
       transitionTimingFunction: 'snappy',
       width: '36',
       selectors: {
         '&:active:not(:disabled)': {
           backgroundColor: 'grayAlpha.400',
-          transform: 'scale(0.94) !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' },
         '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.300' },
-        '[data-size="large"] > &:first-child': { marginInlineStart: '-10px !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="large"] > &:first-child': { marginInlineStart: '-10' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="large"][data-variant="outlined"] > &:first-child': {
-          marginInlineStart: '-14px !custom',
+          marginInlineStart: '-14',
         },
         '[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"] > &:first-child': { marginInlineStart: '-10px !custom' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="medium"] > &:first-child': { marginInlineStart: '-10' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:first-child': { marginInlineStart: '-8px !custom' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8px !custom' },
+        '[data-size="small"] > &:first-child': { marginInlineStart: '-8' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
         '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
           borderRadius: '6',
         },
@@ -290,7 +290,7 @@ namespace styles {
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, opacity, outline-color !custom',
-        selectors: { '&:active:not(:disabled)': { transform: 'none !custom' } },
+        selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/number-field/stepper' },

package/src/web/components/OtpField.tsx

@@ -138,25 +138,27 @@ namespace styles {
       boxSizing: 'border-box',
       caretColor: 'blue.700',
       color: 'foreground',
-      // Every state keeps this stroke width. Focus differs by color and its offset ring.
+      // Every state keeps this stroke width. Invalid and success rings sit inside the slot, so
+      // adjacent rings keep the full gap between slots. Focus differs by color and its offset ring.
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
+      outlineWidth: '2',
       padding: '0',
       textAlign: 'center',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'background-color, color, opacity, outline-color, outline-offset, scale',
       transitionTimingFunction: 'overshoot',
       selectors: {
-        '&:disabled': { opacity: '0.4 !custom' },
+        '&:disabled': { opacity: 'disabled' },
         '&:focus': { scale: '1.06 !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
         '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
         '&[data-invalid], [data-invalid] &': {
           caretColor: 'red.900',
           color: 'red.900',
           outlineColor: 'red.800',
+          outlineOffset: '-2px !custom',
         },
         '[data-success] &': {
           animation: `${pop} 320ms ${vars.ease.overshoot} both !custom`,
@@ -165,10 +167,16 @@ namespace styles {
           caretColor: 'green.900',
           color: 'green.900',
           outlineColor: 'green.700',
+          outlineOffset: '-2px !custom',
         },
         '[data-success] &:hover:not(:disabled)': {
           backgroundColor: 'light-dark(rgb(19 169 99 / 0.18), rgb(19 169 99 / 0.24)) !custom',
         },
+        // Keyboard focus keeps its offset ring on an invalid or successful slot.
+        '&[data-invalid]:focus-visible, [data-invalid] &:focus-visible, [data-success] &:focus-visible':
+          {
+            outlineOffset: '2px !custom',
+          },
         // Delays follow the `animation` shorthand above, which would otherwise reset them.
         '[data-success] &:nth-child(2)': { animationDelay: '40ms !custom' },
         '[data-success] &:nth-child(3)': { animationDelay: '80ms !custom' },

package/src/web/components/Pagination.tsx

@@ -202,21 +202,21 @@ namespace styles {
         justifyContent: 'center',
         minWidth: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '12',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, color, outline-color, outline-offset, transform',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         selectors: {
           '&:active:is(a)': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:is(a)': { backgroundColor: 'grayAlpha.100' },
-          '&[data-ellipsis]': { color: 'gray.700', cursor: 'default' },
+          '&[data-ellipsis]': { color: 'gray.900', cursor: 'default' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color',
@@ -285,25 +285,25 @@ namespace styles {
         display: 'inline-flex',
         height: '40',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingInline: '16',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset, transform',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
         typography: 'button.14',
         selectors: {
-          '&:active:not([aria-disabled])': { transform: 'scale(0.98) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+          '&:active:not([aria-disabled])': { scale: 'press' },
+          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
           '&:hover:not([aria-disabled])': { backgroundColor: 'grayAlpha.200' },
-          '&[aria-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&[aria-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, opacity, outline-color',
-          selectors: { '&:active:not([aria-disabled])': { transform: 'none !custom' } },
+          selectors: { '&:active:not([aria-disabled])': { scale: 'none !custom' } },
         },
       },
     },

package/src/web/components/Popover.tsx

@@ -154,12 +154,12 @@ export namespace Popover {
 namespace styles {
   export const arrow = style(
     {
-      color: 'light-dark(#fff, #1f1e1e) !custom',
+      color: 'background.raised',
       display: 'flex',
       selectors: {
         '&[data-side="bottom"]': { top: '-10px !custom' },
-        '&[data-side="left"]': { right: '-15px !custom', rotate: '90deg !custom' },
-        '&[data-side="right"]': { left: '-15px !custom', rotate: '-90deg !custom' },
+        '&[data-side="left"]': { right: '-14px !custom', rotate: '90deg !custom' },
+        '&[data-side="right"]': { left: '-14px !custom', rotate: '-90deg !custom' },
         '&[data-side="top"]': { bottom: '-10px !custom', rotate: '180deg !custom' },
       },
     },
@@ -173,7 +173,7 @@ namespace styles {
 
   export const popup = style(
     {
-      backgroundColor: 'light-dark(#fff, #1f1e1e) !custom',
+      backgroundColor: 'background.raised',
       borderRadius: '16',
       boxShadow: 'popover',
       boxSizing: 'border-box',
@@ -182,30 +182,33 @@ namespace styles {
       outline: 'none !custom',
       padding: '24',
       transformOrigin: 'var(--transform-origin) !custom',
-      transitionDuration: '200ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '200',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
       typography: 'copy.14',
       width: 'max-content !custom',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '140ms',
+          scale: 'enter',
+          transitionDuration: '140',
+        },
+        '&[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' },
         },
       },
     },
     { id: 'tds/web/popover/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/popover/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/popover/positioner' })
 
   export const title = style(
     {

package/src/web/components/Progress.tsx

@@ -137,7 +137,7 @@ namespace styles {
       borderRadius: 'full',
       height: '100% !custom',
       // Base UI sets the width inline, and scaling it would distort the rounded ends.
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'width',
       transitionTimingFunction: 'spring',
 
@@ -153,7 +153,7 @@ namespace styles {
         selectors: {
           '&[data-indeterminate]': {
             animation: 'none !custom',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
             width: '100% !custom',
           },
         },

package/src/web/components/RadioGroup.tsx

@@ -105,13 +105,13 @@ namespace styles {
           medium: {
             selectors: {
               '& [role="radio"]': { height: '20', width: '20' },
-              '& [role="radio"] > span': { height: '7px !custom', width: '7px !custom' },
+              '& [role="radio"] > span': { height: '8', width: '8' },
             },
           },
           small: {
             selectors: {
               '& [role="radio"]': { height: '16', width: '16' },
-              '& [role="radio"] > span': { height: '6px !custom', width: '6px !custom' },
+              '& [role="radio"] > span': { height: '6', width: '6' },
             },
           },
         },
@@ -125,7 +125,7 @@ namespace styles {
       backgroundColor: 'background.surface',
       borderRadius: 'full',
       height: '8',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity, transform',
       transitionTimingFunction: 'overshoot',
       width: '8',
@@ -157,30 +157,30 @@ namespace styles {
       height: '24',
       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',
       width: '24',
       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]': { backgroundColor: 'foreground' },
         '&[data-checked]:hover:not([data-disabled])': {
           backgroundColor: 'foreground',
-          opacity: '0.86 !custom',
+          opacity: 'hover',
         },
-        '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         '&[data-invalid]': {
           outlineColor: 'red.800',
           outlineStyle: 'solid !custom',
-          outlineWidth: '1px !custom',
+          outlineWidth: '1',
         },
       },
       '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/Rows.tsx

@@ -328,7 +328,7 @@ namespace styles {
     {
       color: 'gray.700',
       flexShrink: '0 !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
@@ -344,8 +344,7 @@ namespace styles {
   export const label = variants(
     {
       base: {
-        // gray.800 in light mode, where gray.900 reads close to the value text, and gray.900 in dark.
-        color: 'light-dark(#7d7d7d, #bcbbbb) !custom',
+        color: 'gray.900',
         flexShrink: '0 !custom',
         marginInlineEnd: 'auto !custom',
       },
@@ -359,7 +358,7 @@ namespace styles {
         boxSizing: 'border-box',
         color: 'gray.900',
         padding: '16',
-        transitionDuration: '200ms',
+        transitionDuration: '200',
         transitionProperty: 'opacity, transform',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
@@ -452,13 +451,13 @@ namespace styles {
         display: 'flex',
         font: 'inherit !custom',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0px !custom',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         paddingBlock: '8',
         textAlign: 'start',
         textDecoration: 'none !custom',
-        transitionDuration: '160ms',
+        transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
@@ -472,9 +471,9 @@ namespace styles {
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
             outlineColor: 'blue.700',
-            outlineOffset: '-2px !custom',
+            outlineOffset: '-2',
           },
-          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: '0.4 !custom' },
+          '&:disabled, &[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
           '&[aria-expanded="true"] [data-indicator]': { transform: 'rotate(180deg) !custom' },
         },
         '@media (prefers-reduced-motion: reduce)': {