@tempoxyz/ds 0.2.2 → 0.2.5

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

@@ -66,7 +66,13 @@ export namespace Rows {
   export function Info(props: Info.Props) {
     const { className, vars, ...attributes } = props
 
-    return <span {...attributes} {...styles.info({ className, style: props.style, vars })} />
+    return (
+      <span
+        {...attributes}
+        data-info=""
+        {...styles.info({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Info {
@@ -141,7 +147,9 @@ export namespace Rows {
   }
 
   /**
-   * `size` sets one row height for every row. `inset` dividers start where the row text does.
+   * `size` sets one row height for every row. A 32px control fits `small` and `medium` rows, and a
+   * 40px control fits `large` rows, without changing that height. `inset` dividers start where the
+   * row text does.
    * Inside a `Surface`, rows reach its edges. Variants default to `dividers="inset"`,
    * `size="medium"`.
    */
@@ -328,7 +336,7 @@ namespace styles {
     {
       color: 'gray.700',
       flexShrink: '0 !custom',
-      transitionDuration: '240ms',
+      transitionDuration: '240',
       transitionProperty: 'transform',
       transitionTimingFunction: 'spring',
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
@@ -358,7 +366,7 @@ namespace styles {
         boxSizing: 'border-box',
         color: 'gray.900',
         padding: '16',
-        transitionDuration: '200ms',
+        transitionDuration: '200',
         transitionProperty: 'opacity, transform',
         transitionTimingFunction: 'snappy',
         typography: 'copy.14',
@@ -392,8 +400,9 @@ namespace styles {
         typography: 'label.14.strong',
         selectors: {
           '& [data-divider]': { position: 'relative' },
+          // The faintest gray keeps dividers quiet on filled surfaces as well as on the page.
           '& [data-divider]::before': {
-            backgroundColor: 'grayAlpha.200',
+            backgroundColor: 'grayAlpha.100',
             content: '"" !custom',
             height: '1',
             insetBlockStart: '0',
@@ -428,11 +437,20 @@ namespace styles {
           inset: { selectors: { '& [data-divider]::before': { insetInline: '16' } } },
           none: { selectors: { '& [data-divider]::before': { display: 'none' } } },
         },
-        // Panels share the rows' side padding so their text lines up.
+        // Panels share the rows' side padding so their text lines up. Info takes back the block
+        // padding that small and medium rows trim for controls, so two-line text keeps its room.
         size: {
           large: { selectors: { '& [data-panel]': { paddingInline: '24' } } },
-          medium: { selectors: { '& [data-panel]': { paddingInline: '20' } } },
-          small: { typography: 'label.13.strong' },
+          medium: {
+            selectors: {
+              '& [data-info]': { paddingBlock: '4' },
+              '& [data-panel]': { paddingInline: '20' },
+            },
+          },
+          small: {
+            typography: 'label.13.strong',
+            selectors: { '& [data-info]': { paddingBlock: '2' } },
+          },
         },
       },
     },
@@ -451,13 +469,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',
@@ -471,9 +489,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)': {
@@ -491,11 +509,12 @@ namespace styles {
       ],
       defaultVariants: { size: 'medium', spacing: 'both' },
       variants: {
-        // 36, 40 and 56px. Small rows sit a step taller than 32px controls so list text can breathe.
+        // 36, 40 and 56px. Block padding leaves room for a 32px control in small and medium rows and a
+        // 40px control in large rows, so a row with a control matches the text rows beside it.
         size: {
           large: { minHeight: '56' },
-          medium: { minHeight: '40' },
-          small: { minHeight: '36', paddingBlock: '4' },
+          medium: { minHeight: '40', paddingBlock: '4' },
+          small: { minHeight: '36', paddingBlock: '2' },
         },
         spacing: {
           both: { paddingInline: '16' },

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: {

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

@@ -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',
       },