@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/SplitButton.tsx

@@ -52,6 +52,7 @@ export namespace SplitButton {
     return (
       <splitContext.Provider value={{ size, variant }}>
         <div
+          data-size={size ?? 'medium'}
           data-variant={variant ?? 'primary'}
           role="group"
           {...attributes}
@@ -63,10 +64,11 @@ export namespace SplitButton {
 
   export namespace Root {
     export type Props = ComponentPropsWithRef<'div'> &
-      zyzz.Props.Variants<typeof styles.root> &
-      Pick<Button.Props, 'variant'> & {
+      zyzz.Props.Variants<typeof styles.root> & {
         /** Size of both buttons. The 24px `xsmall` pill can't join a trigger, so it is left out. */
         size?: Exclude<Button.Props['size'], 'xsmall'> | undefined
+        /** Style of both buttons. The `text` style has no fill to join a trigger, so it is left out. */
+        variant?: Exclude<Button.Props['variant'], 'text'> | undefined
       }
   }
 
@@ -107,11 +109,16 @@ namespace styles {
         // and squircle rather than the circle of an icon button.
         '& > [aria-haspopup]': {
           borderBottomLeftRadius: 'none',
-          borderBottomRightRadius: 'xs',
+          borderBottomRightRadius: 'sm',
           borderTopLeftRadius: 'none',
-          borderTopRightRadius: 'xs',
+          borderTopRightRadius: 'sm',
           cornerShape: 'squircle',
         },
+        // A small action rounds at xs, so its trigger does too.
+        '&[data-size="small"] > [aria-haspopup]': {
+          borderBottomRightRadius: 'xs',
+          borderTopRightRadius: 'xs',
+        },
         '& > [aria-haspopup] > svg': {
           transitionDuration: '240',
           transitionProperty: 'transform',

package/src/web/components/StatusIndicator.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A label led by an 8px dot in the color of its `intent`, rendered as a `span` without a fill. It
+ * sets no live region, so a status that changes in place needs one around it.
+ *
+ * - Keep the label to one or two words that name the status, such as Online or Degraded.
+ * - Pick the `intent` from the outcome: `positive` for healthy or live, `warning` for degraded,
+ *   `negative` for down or failed, and `neutral` for idle or unknown.
+ * - Use `StatusChip` where the status needs a filled pill, such as in a table row.
+ *
+ * @example
+ * <StatusIndicator intent="positive">Operational</StatusIndicator>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusIndicator(props: StatusIndicator.Props) {
+  const { children, className, intent, vars, ...attributes } = props
+
+  return (
+    <span
+      {...attributes}
+      data-intent={intent ?? 'neutral'}
+      {...styles.indicator({ className, intent, style: props.style, vars })}
+    >
+      {/* The label names the status, so the dot is decorative. */}
+      <span aria-hidden="true" data-status-indicator-dot="" {...styles.dot()} />
+      {children}
+    </span>
+  )
+}
+
+export namespace StatusIndicator {
+  export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.indicator>
+}
+
+namespace styles {
+  export const dot = style(
+    {
+      borderRadius: 'full',
+      cornerShape: 'round',
+      flexShrink: '0 !custom',
+      height: '8',
+      width: '8',
+    },
+    { id: 'tds/web/status-indicator/dot' },
+  )
+
+  // The label stays secondary at every intent, and the dot takes the intent color.
+  export const indicator = variants(
+    {
+      base: {
+        alignItems: 'center',
+        color: 'content.secondary',
+        columnGap: '8',
+        display: 'inline-flex',
+        height: '24',
+        typography: 'body.b3',
+        verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        intent: {
+          negative: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.negative' },
+            },
+          },
+          neutral: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.secondary' },
+            },
+          },
+          positive: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.positive' },
+            },
+          },
+          warning: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.warning' },
+            },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/status-indicator' },
+  )
+}

package/src/web/components/SuccessHero.tsx

@@ -0,0 +1,249 @@
+/**
+ * The dark confirmation card that closes an agent or wallet setup flow, with animated streaks
+ * behind a title block and an action.
+ * @module
+ */
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+import type { Layer, Streak } from './internal/Streaks.js'
+import { Streaks } from './internal/Streaks.js'
+
+/**
+ * A dark 520px confirmation card for the end of a setup flow. Streaks slide in behind a bottom row
+ * of a `SuccessHero.Body` and an action, such as a `Button`. `flow` selects the artwork of the
+ * agent or wallet flow. The card keeps its dark colors in both color schemes and renders its
+ * content in the dark scheme, so a default `Button` fills light.
+ *
+ * - Show it once, after the flow funds the agent or wallet, in place of the steps.
+ * - Lead with a caption that names what finished, and keep the title to a short sentence.
+ * - Use `HeroVisual` beside the steps while the flow runs.
+ *
+ * @example
+ * <SuccessHero flow="agent">
+ *   <SuccessHero.Body>
+ *     <SuccessHero.Caption>CLAUDE · FUNDED</SuccessHero.Caption>
+ *     <SuccessHero.Title>You’re ready to go.</SuccessHero.Title>
+ *     <SuccessHero.Description>$10.00 for Claude to spend.</SuccessHero.Description>
+ *   </SuccessHero.Body>
+ *   <Button size="large">Done</Button>
+ * </SuccessHero>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function SuccessHero(props: SuccessHero.Props) {
+  const { children, className, flow = 'agent', vars, ...attributes } = props
+
+  return (
+    <div {...attributes} {...styles.hero({ className, style: props.style, vars })}>
+      <Streaks height={520} layers={flows[flow]} trails={trails} width={1056} />
+      <div {...styles.content()}>{children}</div>
+    </div>
+  )
+}
+
+export namespace SuccessHero {
+  export type Props = ComponentPropsWithRef<'div'> &
+    zyzz.Props.Variants<typeof styles.hero> & {
+      /**
+       * Setup flow that the card confirms. `agent` adds the orange trails of the agent.
+       * @default 'agent'
+       */
+      flow?: keyof typeof flows | undefined
+    }
+
+  /** Stacks the caption, title, and description at the start of the bottom row. */
+  export function Body(props: Body.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.body({ className, style: props.style, vars })} />
+  }
+
+  export namespace Body {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.body>
+  }
+
+  /** A short label above the title that names what finished, such as the funded agent. */
+  export function Caption(props: Caption.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <p {...attributes} {...styles.caption({ className, style: props.style, vars })} />
+  }
+
+  export namespace Caption {
+    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.caption>
+  }
+
+  /** One line of detail under the title, such as the amount and its expiry. */
+  export function Description(props: Description.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <p {...attributes} {...styles.description({ className, style: props.style, vars })} />
+  }
+
+  export namespace Description {
+    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>
+  }
+
+  /** The display title of the card, rendered as an `h2`. */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <h2 {...attributes} {...styles.title({ className, style: props.style, vars })} />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'h2'> & zyzz.Props.Variants<typeof styles.title>
+  }
+}
+
+// The streaks of the Figma Success Hero, measured from its 1056 by 520px frame.
+const trails = {
+  agent: [
+    [214.81, 252.26, 573.73, 2, 'orange', 0.65, 0],
+    [144.8, 229.65, 625.43, 3, 'orange', 0.57, 0],
+    [123.05, 211.83, 429.03, 3, 'orange', 0.79, 0],
+    [204.99, 275.55, 398, 1, 'orange', 0.45, 1],
+    [435.07, 237.42, 670.01, 3, 'orange', 0.83, 0],
+    [-39.01, 297.89, 531.81, 1, 'orange', 0.52, 1],
+    [203.75, 269.57, 467.14, 2, 'orange', 0.49, 0],
+    [-54.29, 243.1, 473.44, 1, 'orange', 0.79, 0],
+    [600.32, 222.7, 576.86, 1, 'orange', 0.55, 1],
+    [73.3, 296.42, 738.02, 3, 'orange', 0.79, 1],
+    [565.98, 290.92, 549.88, 1, 'orange', 0.63, 1],
+    [112.48, 290.95, 481.65, 2, 'orange', 0.75, 0],
+  ],
+  agentSpark: [
+    [-107.41, 288.32, 619.07, 2, 'orange', 0.95, 2],
+    [492.26, 250.81, 605.29, 2, 'orange', 0.7, 0],
+    [552.7, 272.69, 614.22, 1, 'orange', 0.88, 2],
+    [724.14, 261.81, 562.64, 2, 'orange', 0.9, 0],
+    [489.05, 252.08, 567.95, 1, 'orange', 0.88, 0],
+    [185.83, 244.76, 648.01, 2, 'orange', 0.94, 1],
+  ],
+  agentTrail: [
+    [-68.62, 305.64, 639.78, 1, 'white', 0.35, 0],
+    [539.45, 350.15, 684.28, 1, 'white', 0.24, 2],
+    [517.58, 175.25, 446.06, 1, 'white', 0.41, 0],
+    [232.22, 272.23, 679.31, 3, 'white', 0.38, 0],
+    [-91.22, 352.64, 663.42, 3, 'sky', 0.44, 2],
+    [580.08, 299.14, 426, 2, 'sky', 0.2, 1],
+    [245.71, 235.13, 441.76, 2, 'sky', 0.49, 1],
+    [652.04, 349.18, 525.21, 1, 'sky', 0.23, 0],
+    [165.13, 184.86, 419.33, 1, 'sky', 0.21, 2],
+    [256.36, 205.67, 497.14, 1, 'white', 0.21, 0],
+    [196.73, 298, 636.47, 1, 'sky', 0.24, 2],
+    [-84.62, 172.37, 684, 1, 'white', 0.2, 1],
+    [552.28, 180.56, 545.63, 1, 'blue', 0.35, 0],
+    [351.9, 191.33, 714.6, 3, 'sky', 0.21, 0],
+    [239.51, 200.63, 721.09, 2, 'white', 0.47, 2],
+    [238.33, 287.12, 387.71, 1, 'white', 0.34, 1],
+  ],
+  path: [
+    [51.57, 281.45, 459.64, 3, 'white', 0.16, 1],
+    [34.35, 337.45, 590.96, 1, 'white', 0.1, 0],
+    [257.61, 349, 466.81, 1, 'white', 0.16, 1],
+    [321.17, 189, 483.3, 1, 'white', 0.13, 1],
+    [38.51, 356.11, 647.79, 2, 'white', 0.17, 2],
+    [605.26, 221.35, 613.76, 2, 'white', 0.13, 0],
+    [131.29, 322.1, 611.77, 1, 'white', 0.11, 1],
+    [276.07, 204.68, 384.04, 2, 'white', 0.18, 0],
+    [617.62, 162.92, 580.16, 1, 'white', 0.15, 1],
+    [573.09, 336.04, 650.09, 1, 'white', 0.09, 2],
+    [550.96, 299, 669.11, 3, 'white', 0.13, 0],
+    [534.54, 256.65, 703.33, 1, 'white', 0.14, 2],
+    [642.76, 269.72, 622.62, 1, 'white', 0.12, 0],
+    [377.62, 158.2, 655.19, 2, 'white', 0.14, 2],
+    [520.13, 340.55, 737.02, 2, 'white', 0.11, 2],
+    [288.36, 297.08, 728.44, 3, 'white', 0.09, 1],
+    [285.11, 299.18, 530.54, 1, 'white', 0.17, 1],
+    [155.72, 268.74, 553.14, 1, 'white', 0.08, 2],
+  ],
+  wallet: [
+    [-12.78, 294.04, 645.79, 3, 'white', 0.45, 1],
+    [167.32, 176.11, 588.83, 2, 'white', 0.29, 2],
+    [227.04, 294.55, 716.4, 2, 'blue', 0.46, 0],
+    [-10.11, 168.69, 402.48, 2, 'blue', 0.35, 2],
+    [24.14, 296.69, 528.42, 1, 'sky', 0.49, 2],
+    [309.96, 245.44, 382.78, 2, 'sky', 0.5, 2],
+    [249.52, 282.36, 473.05, 3, 'white', 0.38, 0],
+    [634.65, 172.86, 529.91, 2, 'white', 0.48, 1],
+    [-119.23, 235.19, 438.61, 2, 'white', 0.21, 1],
+    [-53.39, 313.9, 676.84, 1, 'sky', 0.27, 0],
+    [244.77, 279.38, 610.74, 1, 'white', 0.48, 0],
+    [223.86, 244.43, 400, 2, 'sky', 0.43, 1],
+    [10.71, 246.26, 653.95, 1, 'white', 0.31, 1],
+    [111.68, 235.77, 593.39, 1, 'blue', 0.33, 0],
+    [80.56, 252.4, 560.4, 1, 'blue', 0.5, 1],
+    [685.46, 299.39, 585.79, 1, 'white', 0.41, 2],
+    [144.52, 251.39, 467.95, 2, 'sky', 0.24, 2],
+    [304.95, 182.11, 390.92, 1, 'sky', 0.4, 2],
+  ],
+} as const satisfies Record<string, readonly Streak[]>
+
+const flows = {
+  agent: [
+    ['path', 18],
+    ['agent', 12],
+    ['agentTrail', 16],
+    ['agentSpark', 6],
+  ],
+  wallet: [
+    ['path', 18],
+    ['wallet', 18],
+  ],
+} as const satisfies Record<string, readonly Layer<keyof typeof trails>[]>
+
+namespace styles {
+  export const body = style(
+    { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '12' },
+    { id: 'tds/web/success-hero/body' },
+  )
+
+  // Figma draws the caption at 50% white, which no variable holds.
+  export const caption = style(
+    { color: '#ffffff80 !custom', margin: '0', typography: 'body.b3Strong' },
+    { id: 'tds/web/success-hero/caption' },
+  )
+
+  export const content = style(
+    {
+      alignItems: 'flex-end',
+      columnGap: '32',
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginBlockStart: 'auto !custom',
+      position: 'relative',
+    },
+    { id: 'tds/web/success-hero/content' },
+  )
+
+  // Figma draws the description at 60% white, which no variable holds.
+  export const description = style(
+    { color: '#ffffff99 !custom', margin: '0', typography: 'body.b2' },
+    { id: 'tds/web/success-hero/description' },
+  )
+
+  // The card is dark in both schemes, so its content renders in the dark scheme.
+  export const hero = style(
+    {
+      borderRadius: 'sm',
+      boxSizing: 'border-box',
+      colorScheme: 'dark !custom',
+      display: 'flex',
+      flexDirection: 'column',
+      isolation: 'isolate !custom',
+      minHeight: '32.5rem !custom',
+      overflow: 'hidden',
+      padding: '48',
+      position: 'relative',
+    },
+    { id: 'tds/web/success-hero' },
+  )
+
+  export const title = style(
+    { color: 'overlay.content.primary', margin: '0', typography: 'display.d1' },
+    { id: 'tds/web/success-hero/title' },
+  )
+}

package/src/web/components/Surface.tsx

@@ -13,6 +13,9 @@ import { variants, vars } from '../zyzz.config.js'
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
  * - A direct child `table` bleeds 12px into the padding at the sides and the bottom, as rows pad
  *   their cells, so its text stays on the content edge. The surface draws no border around it.
+ * - A direct child `plain` `ListGroup` bleeds into the padding, so a hover fill reaches the edges.
+ *   Each row is 44px, pads its sides by the surface's padding, and shares the height of the
+ *   tallest row.
  *
  * @example
  * <Surface>
@@ -62,7 +65,13 @@ export namespace Surface {
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-surface-header=""
+        {...styles.header({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Header {
@@ -226,6 +235,40 @@ namespace styles {
           // table clips rather than hides its overflow, so a sticky header still sticks to the
           // scrolling ancestor. The surface draws no border around the rows.
           '&:has(> table)': { borderStyle: 'none', overflow: 'clip !custom' },
+          // Every row takes the height of the tallest, such as a row that holds a 48px field. The
+          // column can shrink below a row's content, so a long value truncates inside the surface.
+          '& > [data-list-group][data-variant="plain"]': {
+            display: 'grid',
+            gridAutoRows: '1fr !custom',
+            gridTemplateColumns: 'minmax(0, 1fr) !custom',
+          },
+          // Rows are 44px, with 4px above and below a 32px control. Their fills stay square, except
+          // at the surface's corners, where each size rounds them inside the border.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+            borderRadius: 'none',
+            minHeight: '44',
+            paddingBlock: '4',
+          },
+          // A row of a title over a description, or of a meter, keeps its own block padding.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([data-info])': {
+            paddingBlock: '12',
+          },
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([role="meter"])': {
+            paddingBlock: '10',
+          },
+          // The rows already reach the surface's edges, so their highlight fills the row without a
+          // bleed and follows its corners.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]::after': {
+            borderRadius: 'inherit !custom',
+            insetInline: '0',
+          },
+          // After a header, the list rises by the 14px above the text of a one-line row, so the
+          // text keeps the header's 20px gap. After other content, the list keeps its place, so its
+          // fills never cover that content.
+          '& > [data-surface-header] + [data-list-group][data-variant="plain"]:has(> [data-divider])':
+            {
+              marginBlockStart: 'calc((1rem - 2.75rem) / 2) !custom',
+            },
           // A table bleeds by the 12px that its rows pad their edge cells, so the rows sit 12px
           // inside the padding and their text on the content edge.
           '& > table': {
@@ -267,12 +310,35 @@ namespace styles {
       variants: {
         // Each size pads by its own radius, and they scale together. A direct child table with a
         // header bleeds into the top padding, and its header cells take back exactly the padding.
+        // A direct child list bleeds into the padding at the sides, and above and below it at the
+        // surface's edges once it holds a row, so an empty list keeps the padding. Its rows take
+        // back the padding at the sides.
         size: {
           large: {
             borderRadius: 'md',
             padding: '24',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-24' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-24',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-24',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '24',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '24',
               },
@@ -283,6 +349,26 @@ namespace styles {
             padding: '16',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-16' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-16',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-16',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '16',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '16',
               },
@@ -293,6 +379,26 @@ namespace styles {
             padding: '12',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-12' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-12',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-12',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '12',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '12',
               },

package/src/web/components/Switch.tsx

@@ -76,40 +76,33 @@ export namespace Switch {
 }
 
 namespace styles {
+  // The thumb is a pill, 16px wider than tall at medium, as the Platform switch draws it.
   export const thumb = style(
     {
-      backgroundColor: 'neutral.000',
+      backgroundColor: 'inverse.content.primary',
       borderRadius: 'full',
-      boxShadow: 'small',
       cornerShape: 'round',
       flexShrink: '0 !custom',
-      height: '24px !custom',
+      height: '20',
       // The thumb stretches its width while pressed, which a transform would distort.
       transitionDuration: '240',
-      transitionProperty: 'background-color, box-shadow, translate, width',
+      transitionProperty: 'background-color, translate, width',
       transitionTimingFunction: 'overshoot',
-      width: '24px !custom',
+      width: '36',
       selectors: {
-        '&[data-checked]': {
-          backgroundColor: 'background.elevated',
-          boxShadow: 'none !custom',
-          translate: '22px 0 !custom',
-        },
-        '[data-size="large"] > &': { height: '32', width: '32' },
+        '&[data-checked]': { translate: '20' },
+        '[data-size="large"] > &': { height: '32', width: '56' },
         '[data-size="large"] > &[data-checked]': { translate: '32' },
-        '[data-size="large"]:active:not([data-disabled]) > &': { width: '36' },
+        '[data-size="large"]:active:not([data-disabled]) > &': { width: '60px !custom' },
         '[data-size="large"]:active:not([data-disabled]) > &[data-checked]': { translate: '28' },
-        '[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: '20', width: '20' },
+        '[data-size="medium"]:active:not([data-disabled]) > &': { width: '40' },
+        '[data-size="medium"]:active:not([data-disabled]) > &[data-checked]': { translate: '16' },
         '[data-size="small"] > &[data-checked]': { translate: '16' },
-        '[data-size="small"]:active:not([data-disabled]) > &': { width: '24' },
+        '[data-size="small"]:active:not([data-disabled]) > &': { width: '40' },
         '[data-size="small"]:active:not([data-disabled]) > &[data-checked]': { translate: '12' },
       },
       '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, box-shadow',
+        transitionProperty: 'background-color',
       },
     },
     { id: 'tds/web/switch/thumb' },
@@ -138,7 +131,7 @@ namespace styles {
           '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
           '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'line.primary' },
-          '&[data-checked]': { backgroundColor: 'content.primary' },
+          '&[data-checked]': { backgroundColor: 'content.accent' },
           '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
@@ -153,12 +146,12 @@ namespace styles {
       },
       defaultVariants: { size: 'medium' },
       variants: {
+        // The padding, thumb width, checked translation and padding of each size add up to the
+        // track width. Medium is the 64 by 28px Platform switch.
         size: {
-          large: { height: '40', padding: '4', width: '72' },
-          // 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: '24', padding: '2', width: '40' },
+          large: { height: '40', padding: '4', width: '96px !custom' },
+          medium: { height: '28', padding: '4', width: '64' },
+          small: { height: '24', padding: '2', width: '56' },
         },
       },
     },