@tempoxyz/ds 0.2.2 → 0.2.5

package/src/web/components/Toast.tsx

@@ -162,20 +162,23 @@ namespace styles {
       // Weight overrides the typography token, so it stays after it.
       typography: 'button.12',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       selectors: {
-        '&:active': { backgroundColor: 'grayAlpha.300', transform: 'scale(0.97) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2px !custom' },
+        '&:active': {
+          backgroundColor: 'grayAlpha.300',
+          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/toast/action' },
@@ -208,20 +211,20 @@ namespace styles {
       padding: '0',
       width: '24',
       outlineColor: 'transparent !custom',
-      outlineOffset: '0px !custom',
+      outlineOffset: '0',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2px !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'background-color, outline-color, outline-offset, transform',
+      outlineWidth: '2',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, outline-offset, scale',
       transitionTimingFunction: 'snappy',
       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': { backgroundColor: 'grayAlpha.100' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
-        selectors: { '&:active': { transform: 'none !custom' } },
+        selectors: { '&:active': { scale: 'none !custom' } },
       },
     },
     { id: 'tds/web/toast/close' },
@@ -237,7 +240,7 @@ namespace styles {
       overflow: 'hidden',
       paddingBlock: '16',
       paddingInline: '20',
-      transitionDuration: '200ms',
+      transitionDuration: '200',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
@@ -284,7 +287,7 @@ namespace styles {
         'translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - var(--toast-index) * 12px - (1 - max(0, calc(1 - var(--toast-index) * 0.1))) * var(--toast-frontmost-height, var(--toast-height)))) scale(max(0, calc(1 - var(--toast-index) * 0.1))) !custom',
       transformOrigin: 'bottom center !custom',
       // Height follows the frontmost toast as the stack collapses, which a transform cannot express.
-      transitionDuration: '320ms, 320ms, 150ms',
+      transitionDuration: '320ms, 320ms, 150ms !custom',
       transitionProperty: 'transform, opacity, height',
       transitionTimingFunction: 'spring',
       userSelect: 'none',
@@ -292,7 +295,7 @@ namespace styles {
       selectors: {
         '&::after': {
           content: '"" !custom',
-          height: '13px !custom',
+          height: '14',
           insetBlockStart: '100% !custom',
           insetInline: '0',
           position: 'absolute',
@@ -307,7 +310,7 @@ namespace styles {
           opacity: '0 !custom',
           transform: 'translateY(150%) !custom',
         },
-        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms' },
+        '&[data-ending-style]': { transitionDuration: '200ms, 200ms, 150ms !custom' },
         '&[data-ending-style][data-swipe-direction="down"]': {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) + 150%)) !custom',
         },
@@ -321,7 +324,7 @@ namespace styles {
           transform: 'translateY(calc(var(--toast-swipe-movement-y) - 150%)) !custom',
         },
         // The toast follows the pointer without lag while swiping.
-        '&[data-swiping]': { transitionDuration: '0ms' },
+        '&[data-swiping]': { transitionDuration: '0' },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'opacity' },
     },
@@ -340,7 +343,7 @@ namespace styles {
       margin: 'auto !custom',
       maxWidth: '384',
       position: 'fixed',
-      zIndex: '1000 !custom',
+      zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',

package/src/web/components/Tooltip.tsx

@@ -103,31 +103,34 @@ namespace styles {
       boxSizing: 'border-box',
       color: 'background.primary',
       maxWidth: '320',
-      paddingBlock: '6px !custom',
+      paddingBlock: '6',
       paddingInline: '12',
       transformOrigin: 'var(--transform-origin) !custom',
-      transitionDuration: '160ms',
-      transitionProperty: 'opacity, transform',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
       typography: 'label.13',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',
-          transform: 'scale(0.96) !custom',
-          transitionDuration: '100ms',
+          scale: 'enter',
+          transitionDuration: '100',
+        },
+        '&[data-instant]': { transitionDuration: '0' },
+        '&[data-starting-style]': {
+          opacity: '0 !custom',
+          scale: 'enter',
         },
-        '&[data-instant]': { transitionDuration: '0ms' },
-        '&[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/tooltip/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/tooltip/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/tooltip/positioner' })
 }

package/src/web/components/internal/Field.ts

@@ -14,12 +14,12 @@ export namespace styles {
         display: 'flex',
         justifyContent: 'space-between',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
         textAlign: 'start',
-        transitionDuration: '160ms !custom',
+        transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
@@ -29,19 +29,19 @@ export namespace styles {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
           '&:is(button)': { cursor: 'pointer' },
           '&:focus-visible, &:has(:focus-visible)': { outlineColor: 'blue.700' },
-          '&[data-disabled], &:disabled': { opacity: '0.4 !custom' },
+          '&[data-disabled], &:disabled': { opacity: 'disabled' },
           '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))::before': {
             borderColor: 'red.800',
           },
@@ -73,7 +73,7 @@ export namespace styles {
           large: { columnGap: '12', minHeight: '56', paddingInline: '20', typography: 'copy.16' },
           medium: { columnGap: '8', minHeight: '40', paddingInline: '16', typography: 'copy.14' },
           small: {
-            columnGap: '6px !custom',
+            columnGap: '6',
             minHeight: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -124,18 +124,18 @@ export 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',
+      transitionDuration: '160',
       transitionProperty: 'background-color, color, opacity, outline-color, transform !custom',
       transitionTimingFunction: 'snappy',
       width: '36',
       selectors: {
         '&:active:not(:disabled)': {
           transform: 'scale(0.92) !custom',
-          transitionDuration: '100ms !custom',
+          transitionDuration: '100',
         },
         '&:disabled': { cursor: 'default' },
         '&:focus-visible': { outlineColor: 'blue.700' },
@@ -145,23 +145,23 @@ export namespace styles {
           transform: 'scale(0.6) !custom',
         },
         '& > svg': {
-          transitionDuration: '200ms !custom',
+          transitionDuration: '200',
           transitionProperty: 'transform !custom',
           transitionTimingFunction: 'spring',
         },
         '&[data-popup-open] > svg': { transform: 'rotate(180deg) !custom' },
         // Adjacent buttons touch, so their icons sit close together.
-        '[data-size="large"] > & + &': { marginInlineStart: '-12px !custom' },
-        '[data-size="medium"] > & + &': { marginInlineStart: '-8px !custom' },
-        '[data-size="small"] > & + &': { marginInlineStart: '-6px !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="large"] > & + &': { marginInlineStart: '-12' },
+        '[data-size="medium"] > & + &': { marginInlineStart: '-8' },
+        '[data-size="small"] > & + &': { marginInlineStart: '-6' },
+        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
         '[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"] > &:last-child': { marginInlineEnd: '-10px !custom' },
+        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
         '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8px !custom' },
+        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
         '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
           borderRadius: '6',
         },

package/src/web/components/internal/InputGroup.ts

@@ -93,13 +93,12 @@ export namespace styles {
         color: 'foreground',
         display: 'flex',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2px !custom',
+        outlineOffset: '2',
         outlineStyle: 'solid !custom',
-        outlineWidth: '2px !custom',
+        outlineWidth: '2',
         position: 'relative',
-        transitionDuration: '160ms !custom',
-        transitionProperty:
-          'background-color, border-color, opacity, outline-color, transform !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, border-color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
         selectors: {
           // The invalid ring fades in on an inset border, so focus changes only the outline color.
@@ -107,13 +106,13 @@ export namespace styles {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2px !custom',
+            borderWidth: '2',
             boxSizing: 'border-box',
             content: '"" !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
-            transitionDuration: '160ms !custom',
+            transitionDuration: '160',
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
@@ -124,15 +123,15 @@ export namespace styles {
             width: '100% !custom',
           },
           '&:is(button):active:not(:disabled, [data-disabled])': {
-            transform: 'scale(0.98) !custom',
-            transitionDuration: '100ms !custom',
+            scale: 'press',
+            transitionDuration: '100',
           },
           '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
             backgroundColor: 'grayAlpha.200',
           },
           '&:disabled, &[data-disabled], &:has(input:disabled)': {
             cursor: 'default',
-            opacity: '0.4 !custom',
+            opacity: 'disabled',
           },
           '&:focus-visible, &:has(input:focus-visible)': { outlineColor: 'blue.700' },
           // Success and invalid draw one ring: inset at rest, and the outline instead while focused.
@@ -185,7 +184,7 @@ export namespace styles {
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
           selectors: {
-            '&:active': { transform: 'none !custom' },
+            '&:active': { scale: 'none !custom' },
             '&[data-entered]': { animation: 'none !custom' },
           },
         },
@@ -209,7 +208,7 @@ export namespace styles {
           },
           small: {
             borderRadius: '8',
-            columnGap: '6px !custom',
+            columnGap: '6',
             height: '32',
             paddingInline: '12',
             typography: 'copy.13',
@@ -222,7 +221,7 @@ export namespace styles {
             borderColor: 'grayAlpha.200',
             borderRadius: '12',
             borderStyle: 'solid',
-            borderWidth: '1px !custom',
+            borderWidth: '1',
             height: 'auto !custom',
             minHeight: '56',
             paddingBlock: '16',
@@ -235,6 +234,16 @@ export namespace styles {
             },
           },
           default: {},
+          // Fills only on hover, for a picker inside a row. As a button, it sizes to its content.
+          text: {
+            backgroundColor: 'transparent !custom',
+            selectors: {
+              '&:is(button)': { width: 'auto !custom' },
+              '&:hover:not(:disabled, [data-disabled], :has(input:disabled))': {
+                backgroundColor: 'grayAlpha.100',
+              },
+            },
+          },
         },
       },
     },

package/src/web/components/internal/Listbox.ts

@@ -34,7 +34,7 @@ export namespace styles {
       flexShrink: '0 !custom',
       fontSize: '16',
       justifyContent: 'center',
-      transitionDuration: '160ms !custom',
+      transitionDuration: '160',
       transitionProperty: 'opacity, transform, visibility !custom',
       transitionTimingFunction: 'snappy',
       selectors: {
@@ -55,7 +55,7 @@ export namespace styles {
     {
       alignItems: 'center',
       // Concentric with the popup: its 16px radius minus its 6px padding.
-      borderRadius: '10px !custom',
+      borderRadius: '10',
       boxSizing: 'border-box',
       color: 'foreground',
       columnGap: '12',
@@ -65,13 +65,13 @@ export namespace styles {
       outline: 'none !custom',
       paddingBlock: '8',
       paddingInline: '16',
-      transitionDuration: '120ms !custom',
+      transitionDuration: '120',
       transitionProperty: 'background-color, opacity !custom',
       transitionTimingFunction: 'snappy',
       typography: 'label.14.strong',
       userSelect: 'none',
       selectors: {
-        '&[data-disabled]': { cursor: 'default', opacity: '0.4 !custom', pointerEvents: 'none' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled', pointerEvents: 'none' },
         '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
       },
     },
@@ -86,7 +86,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',
@@ -97,26 +97,29 @@ export namespace styles {
         outline: 'none !custom',
         overflowY: 'auto',
         overscrollBehavior: 'contain !custom',
-        padding: '6px !custom',
+        padding: '6',
         transformOrigin: 'var(--transform-origin) !custom',
-        transitionDuration: '240ms !custom',
-        transitionProperty: 'opacity, transform !custom',
+        transitionDuration: '240',
+        transitionProperty: 'opacity, scale !custom',
         transitionTimingFunction: 'spring',
         typography: 'copy.14',
         selectors: {
           '&[data-ending-style]': {
             opacity: '0 !custom',
-            transform: 'scale(0.96) !custom',
-            transitionDuration: '150ms !custom',
+            scale: 'enter',
+            transitionDuration: '150',
             transitionTimingFunction: 'snappy',
           },
-          '&[data-starting-style]': { opacity: '0 !custom', transform: 'scale(0.96) !custom' },
+          '&[data-starting-style]': {
+            opacity: '0 !custom',
+            scale: 'enter',
+          },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionDuration: '150ms !custom',
+          transitionDuration: '150',
           transitionProperty: 'opacity !custom',
           selectors: {
-            '&[data-ending-style], &[data-starting-style]': { transform: 'none !custom' },
+            '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
           },
         },
       },
@@ -143,7 +146,7 @@ export namespace styles {
     { id: 'tds/web/listbox/popup' },
   )
 
-  export const positioner = style({ zIndex: '50 !custom' }, { id: 'tds/web/listbox/positioner' })
+  export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/listbox/positioner' })
 
   export const prefix = style(
     { alignItems: 'center', display: 'inline-flex', flexShrink: '0 !custom' },

package/src/web/vars.ts

@@ -29,6 +29,10 @@ export const variables = Vars.define(
       '40': '40px',
       '64': '64px',
     },
+    borderWidth: {
+      '1': '1px',
+      '2': '2px',
+    },
     breakpoint: {
       '640': '40rem',
       '768': '48rem',
@@ -53,9 +57,19 @@ export const variables = Vars.define(
         '1000': { dark: '#fff1e8', light: '#4d2101' },
       },
       // Lifts surfaces off the near-black page in dark mode, so cards and popups stay distinct.
+      // `raised` fills popups and dialogs above surfaces. `indicator` fills the selected segment of a
+      // segmented control. `chip` matches grayAlpha 100, so it stays dim on gray fills. The status
+      // fills tint callouts with step 300 in light mode and step 100 in dark mode.
       background: {
+        chip: { dark: '#ffffff12', light: '#0000000d' },
+        indicator: { dark: 'rgb(255 255 255 / 0.16)', light: '#fff' },
+        info: { dark: '#161b29', light: '#e6eefe' },
+        negative: { dark: '#2a1410', light: '#ffe6e0' },
+        positive: { dark: '#052315', light: '#d3f8df' },
         primary: { dark: '#100f0f', light: '#f5f5f5' },
+        raised: { dark: '#1f1e1e', light: '#fff' },
         surface: { dark: '#1a1919', light: '#fff' },
+        warning: { dark: '#2d1504', light: '#ffede2' },
       },
       black: '#000',
       blue: {
@@ -218,6 +232,20 @@ export const variables = Vars.define(
       '1': 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
       '4': 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
     },
+    // `disabled` dims an unavailable control, and `hover` dims a filled control under the pointer.
+    opacity: {
+      disabled: 0.4,
+      hover: 0.86,
+    },
+    outlineOffset: {
+      '-2': '-2px',
+      '0': '0px',
+      '2': '2px',
+    },
+    outlineWidth: {
+      '1': '1px',
+      '2': '2px',
+    },
     perspective: {
       '100': '100px',
       '300': '300px',
@@ -227,16 +255,23 @@ export const variables = Vars.define(
     },
     // Corners top out at 16px. `full` rounds pills and circles.
     radius: {
+      '0': '0rem',
       '2': '0.125rem',
       '4': '0.25rem',
       '6': '0.375rem',
       '8': '0.5rem',
+      '10': '0.625rem',
       '12': '0.75rem',
       '16': '1rem',
       full: '9999px',
     },
-    // Shadow keys name the largest blur radius in px. `inner`, `popover`, and `raised` keep their role
-    // names.
+    // Shadow keys name the largest blur radius in px. `inner`, `modal`, `popover`, `raised`, and
+    // `thumb` keep their role names.
+    // `enter` is the start scale of a popup transition, and `press` shrinks a pressed control.
+    scale: {
+      enter: 0.96,
+      press: 0.98,
+    },
     shadow: {
       '0': '0 1px rgb(0 0 0 / 0.05)',
       '2': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
@@ -246,28 +281,50 @@ export const variables = Vars.define(
       '25': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
       '50': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
       inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      modal: '0 32px 64px -16px rgb(0 0 0 / 0.28)',
       popover:
         '0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)), 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 24px 48px -12px rgb(0 0 0 / 0.16)',
       raised: '0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04)',
+      thumb:
+        '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)',
     },
     // Keys are px at the default 16px root. Values stay in rem, so the scale follows the root size.
+    // Negative keys pull an element into its container's padding.
     spacing: {
+      '-24': '-1.5rem',
+      '-20': '-1.25rem',
+      '-16': '-1rem',
+      '-14': '-0.875rem',
+      '-12': '-0.75rem',
+      '-10': '-0.625rem',
+      '-8': '-0.5rem',
+      '-6': '-0.375rem',
+      '-4': '-0.25rem',
       '0': '0rem',
       '1': '1px',
+      '2': '0.125rem',
       '4': '0.25rem',
+      '6': '0.375rem',
       '8': '0.5rem',
+      '10': '0.625rem',
       '12': '0.75rem',
+      '14': '0.875rem',
       '16': '1rem',
+      '18': '1.125rem',
       '20': '1.25rem',
+      '22': '1.375rem',
       '24': '1.5rem',
       '28': '1.75rem',
+      '30': '1.875rem',
       '32': '2rem',
       '36': '2.25rem',
+      '38': '2.375rem',
       '40': '2.5rem',
       '44': '2.75rem',
       '48': '3rem',
       '56': '3.5rem',
       '64': '4rem',
+      '68': '4.25rem',
       '80': '5rem',
       '96': '6rem',
       '112': '7rem',
@@ -291,6 +348,21 @@ export const variables = Vars.define(
       '4': '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
       '8': '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
     },
+    // Keys are durations in ms.
+    transitionDuration: {
+      '0': '0ms',
+      '100': '100ms',
+      '120': '120ms',
+      '140': '140ms',
+      '150': '150ms',
+      '160': '160ms',
+      '180': '180ms',
+      '200': '200ms',
+      '220': '220ms',
+      '240': '240ms',
+      '280': '280ms',
+      '320': '320ms',
+    },
     typography: {
       button: {
         '12': {
@@ -653,6 +725,13 @@ export const variables = Vars.define(
         },
       },
     },
+    // Layers from the app shell overlay up to toasts.
+    zIndex: {
+      modal: 60,
+      overlay: 40,
+      popover: 50,
+      toast: 1000,
+    },
   },
   { id: 'tds/web/variables' },
 )