@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/StatusChip.tsx

@@ -0,0 +1,138 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+import { Spinner } from './Spinner.js'
+
+/**
+ * A pill that names the status of a payment, an authorization, or a network, rendered as a
+ * `span`. A dot in the color of its `intent` leads the label, and `loading` replaces the dot with
+ * a spinner. 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 Pending or Needs approval.
+ * - Pick the `intent` from the outcome: `positive` for done or live, `warning` for waiting on
+ *   someone, `negative` for failed, and `neutral` for ended without an outcome.
+ * - Set `network` for the chip that names a network, such as Mainnet or Testnet. It keeps an 80px
+ *   minimum width, with 4px between the dot and the label.
+ * - Use `Badge` for a category or an attribute that is not a status.
+ *
+ * @example
+ * <StatusChip intent="warning">Pending</StatusChip>
+ * <StatusChip loading size="small">Processing</StatusChip>
+ * <StatusChip intent="positive" network>Mainnet</StatusChip>
+ *
+ * @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 StatusChip(props: StatusChip.Props) {
+  const { children, className, intent, loading = false, network, size, vars, ...attributes } = props
+
+  return (
+    <span
+      {...attributes}
+      data-intent={intent ?? 'neutral'}
+      {...styles.chip({ className, intent, network, size, style: props.style, vars })}
+    >
+      {/* The label names the status, so the mark is decorative. */}
+      {loading ? (
+        <span aria-hidden="true" {...styles.spinner({ size })}>
+          <Spinner />
+        </span>
+      ) : (
+        <span aria-hidden="true" {...styles.dot({ intent, size })} />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export namespace StatusChip {
+  export type Props = ComponentPropsWithRef<'span'> &
+    zyzz.Props.Variants<typeof styles.chip> & {
+      /**
+       * Replaces the dot with a spinner, for a status that is in progress, such as Processing.
+       *
+       * @default false
+       */
+      loading?: boolean | undefined
+    }
+}
+
+namespace styles {
+  export const chip = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'full',
+        boxSizing: 'border-box',
+        color: 'content.secondary',
+        cornerShape: 'round',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        paddingInline: '8',
+        typography: 'body.b3Strong',
+        verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
+      },
+      // A network chip sets the dot 4px from its label at every size, so it outranks the size gap.
+      compoundVariants: [{ when: { network: true }, style: { columnGap: '4' } }],
+      defaultVariants: { intent: 'neutral', network: false, size: 'medium' },
+      variants: {
+        intent: {
+          negative: { backgroundColor: 'container.negative' },
+          neutral: { backgroundColor: 'container.regular' },
+          positive: { backgroundColor: 'container.positive' },
+          warning: { backgroundColor: 'container.warning' },
+        },
+        // A network chip keeps its label at the start of an 80px minimum width.
+        network: { false: {}, true: { minWidth: '80' } },
+        size: {
+          medium: { columnGap: '6', height: '28' },
+          small: { columnGap: '4', height: '24' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip' },
+  )
+
+  export const dot = variants(
+    {
+      base: { borderRadius: 'full', cornerShape: 'round', flexShrink: '0 !custom' },
+      defaultVariants: { intent: 'neutral', size: 'medium' },
+      variants: {
+        intent: {
+          negative: { backgroundColor: 'content.negative' },
+          neutral: { backgroundColor: 'content.subtle' },
+          positive: { backgroundColor: 'content.positive' },
+          warning: { backgroundColor: 'content.warning' },
+        },
+        size: {
+          medium: { height: '8', width: '8' },
+          small: { height: '6', width: '6' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip/dot' },
+  )
+
+  // The spinner shrinks to the 12 or 10px mark, which the attribute selector holds over its own size.
+  export const spinner = variants(
+    {
+      base: {
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        selectors: {
+          '& > [role="progressbar"]': { height: '100% !custom', width: '100% !custom' },
+        },
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          medium: { height: '12', width: '12' },
+          small: { height: '10', width: '10' },
+        },
+      },
+    },
+    { id: 'tds/web/status-chip/spinner' },
+  )
+}

package/src/web/components/StatusRow.tsx

@@ -0,0 +1,162 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A row that follows the status of one payment or task, such as a deposit on its way. It renders
+ * a `div` with `role="status"`, so screen readers announce a change of its text politely. Compose
+ * a leading `StatusRow.Icon`, a `StatusRow.Content` with a title and a description, and an
+ * optional trailing `StatusChip`.
+ *
+ * - Lead with a `Spinner` while the task runs, and with a check once `intent` is `positive`.
+ * - State the amount or the task in the title, and the expected wait in the description.
+ * - Keep one status row per task. Use `ListGroup` for a list of finished payments.
+ *
+ * @example
+ * <StatusRow>
+ *   <StatusRow.Icon>
+ *     <Spinner />
+ *   </StatusRow.Icon>
+ *   <StatusRow.Content>
+ *     <StatusRow.Title>Waiting for $10.00</StatusRow.Title>
+ *     <StatusRow.Description>Usually under a minute on Tempo.</StatusRow.Description>
+ *   </StatusRow.Content>
+ *   <StatusChip intent="warning" size="small">
+ *     Pending
+ *   </StatusChip>
+ * </StatusRow>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusRow(props: StatusRow.Props) {
+  const { className, intent, vars, ...attributes } = props
+
+  return (
+    <div
+      role="status"
+      {...attributes}
+      {...styles.row({ className, intent, style: props.style, vars })}
+    />
+  )
+}
+
+export namespace StatusRow {
+  /** Stacks a `StatusRow.Title` above a `StatusRow.Description`, and takes the free width. */
+  export function Content(props: Content.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.content({ className, style: props.style, vars })} />
+  }
+
+  export namespace Content {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.content>
+  }
+
+  /** Secondary text under the title, such as the expected wait. It wraps onto more lines. */
+  export function Description(props: Description.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.description({ className, style: props.style, vars })} />
+  }
+
+  export namespace Description {
+    export type Props = ComponentPropsWithRef<'span'> &
+      zyzz.Props.Variants<typeof styles.description>
+  }
+
+  /**
+   * The leading mark, hidden from assistive technology. An icon renders at 24px in the color of
+   * the row's `intent`, and a `Spinner` keeps its 16px.
+   */
+  export function Icon(props: Icon.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        aria-hidden="true"
+        {...attributes}
+        data-status-row-icon=""
+        {...styles.icon({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Icon {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.icon>
+  }
+
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.row>
+
+  /** The task, such as the amount that the row waits for. */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.title({ className, style: props.style, vars })} />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>
+  }
+}
+
+namespace styles {
+  export const content = variants(
+    {
+      base: { display: 'flex', flexDirection: 'column', flexGrow: '1 !custom', minWidth: '0' },
+    },
+    { id: 'tds/web/status-row/content' },
+  )
+
+  export const description = variants(
+    { base: { color: 'content.secondary', typography: 'body.b3' } },
+    { id: 'tds/web/status-row/description' },
+  )
+
+  export const icon = variants(
+    {
+      base: {
+        alignItems: 'center',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        selectors: { '& > svg': { height: '24', width: '24' } },
+      },
+    },
+    { id: 'tds/web/status-row/icon' },
+  )
+
+  // Fields and alerts pad a 12px corner by 16px, and the row keeps 12px above and below its text.
+  export const row = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        columnGap: '12',
+        display: 'flex',
+        paddingBlock: '12',
+        paddingInline: '16',
+        transitionDuration: '200',
+        transitionProperty: 'background-color',
+        transitionTimingFunction: 'snappy',
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        intent: {
+          neutral: { backgroundColor: 'container.subtle' },
+          positive: {
+            backgroundColor: 'container.positive',
+            selectors: { '& > [data-status-row-icon]': { color: 'content.positive' } },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/status-row' },
+  )
+
+  export const title = style(
+    { color: 'content.primary', typography: 'body.b2Strong' },
+    { id: 'tds/web/status-row/title' },
+  )
+}

package/src/web/components/Stepper.tsx

@@ -3,12 +3,13 @@ import type * as zyzz from 'zyzz'
 import { style, variants } from '../zyzz.config.js'
 
 /**
- * Shows progress through a fixed sequence of steps as a row of segments. Renders a `div` with
- * `role="progressbar"`, the name `Progress`, and the value text `Step <value> of <count>`.
+ * Shows progress through a fixed sequence of steps as a row of 24px by 4px segments, 4px apart.
+ * Renders a `div` with `role="progressbar"`, the name `Progress`, and the value text
+ * `Step <value> of <count>`. The row is as wide as its segments.
  *
  * - Pass `aria-label` to name the flow, such as `Account setup`.
+ * - Center it in the header of a dialog, beside the Back button.
  * - Label each step in visible text near the stepper, since the segments carry no text.
- * - Pair the filled segments with that text, so completion does not rely on color alone.
  *
  * @example
  * <Stepper.Root aria-label="Account setup" count={4} value={2} />
@@ -61,7 +62,7 @@ export namespace Stepper {
 
 namespace styles {
   export const root = style(
-    { columnGap: '8', display: 'flex', width: '100% !custom' },
+    { columnGap: '4', display: 'flex', width: 'fit-content !custom' },
     { id: 'tds/web/stepper' },
   )
 
@@ -69,17 +70,19 @@ namespace styles {
     {
       base: {
         borderRadius: 'full',
-        flex: '1 !custom',
-        height: '8',
+        cornerShape: 'round',
+        flexShrink: '0 !custom',
+        height: '4',
         transitionDuration: '240',
         transitionProperty: 'background-color',
         transitionTimingFunction: 'snappy',
+        width: '24',
       },
       defaultVariants: { state: 'pending' },
       variants: {
         state: {
-          complete: { backgroundColor: 'foreground' },
-          pending: { backgroundColor: 'grayAlpha.200' },
+          complete: { backgroundColor: 'content.primary' },
+          pending: { backgroundColor: 'container.strong' },
         },
       },
     },

package/src/web/components/Surface.tsx

@@ -4,14 +4,15 @@ import type * as zyzz from 'zyzz'
 import { variants, vars } from '../zyzz.config.js'
 
 /**
- * A card container that renders a `div` by default. Pass `render` to swap the element, such as a
- * `section`, `button` or link. A `button`, `a[href]` or `role="button"` surface gains hover, press
- * and focus-visible styles and spans the full width.
+ * A card container that renders a `div` with a 1px border inside its edge by default. Pass
+ * `render` to swap the element, such as a `section`, `button` or link. A `button`, `a[href]` or
+ * `role="button"` surface gains hover, press and focus-visible styles and spans the full width.
  *
- * - `size` sets the corner radius and padding together.
+ * - `size` sets the corner radius and padding together, at the same value.
  * - Name the card with `Surface.Title`, which renders an `h2`, so headings keep the card navigable.
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
- * - A direct child `table` or `Rows` bleeds into the padding, so row fills reach the edges.
+ * - 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.
  *
  * @example
  * <Surface>
@@ -54,7 +55,10 @@ export namespace Surface {
     export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.description>
   }
 
-  /** A row above the content holding a `Surface.Title` and, at the end, any actions. */
+  /**
+   * A row above the content holding a `Surface.Title` and, at the end, any actions, with 20px of
+   * space below it.
+   */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
@@ -85,7 +89,10 @@ export namespace Surface {
       disabled?: boolean | undefined
     }
 
-  /** The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. */
+  /**
+   * The card heading, rendered as an `h2`. A leading `svg` icon renders at 24px. In a surface that
+   * holds a direct child `table`, the title renders at the size of a section heading.
+   */
   export function Title(props: Title.Props) {
     const { className, vars, ...attributes } = props
 
@@ -101,10 +108,10 @@ namespace styles {
   export const description = variants(
     {
       base: {
-        color: 'gray.900',
+        color: 'content.secondary',
         margin: '0',
         selectors: { '& + *': { marginBlockStart: '24' } },
-        typography: 'copy.15',
+        typography: 'body.b1',
       },
     },
     { id: 'tds/web/surface/description' },
@@ -117,23 +124,23 @@ namespace styles {
         columnGap: '16',
         display: 'flex',
         justifyContent: 'space-between',
-        marginBlockEnd: '16',
+        marginBlockEnd: '20',
         minWidth: '0',
         selectors: {
-          // A trailing text button bleeds by its inline padding, so its label aligns with the content
-          // edge, but never past the surface padding.
-          '& > [data-variant="text"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-20',
+          // A trailing tertiary button bleeds by its inline padding, so its label aligns with the
+          // content edge, but never past the surface padding.
+          '& > [data-variant="tertiary"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-24',
           },
-          '& > [data-variant="text"][data-size="small"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-12',
+          '& > [data-variant="tertiary"][data-size="small"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-16',
           },
-          '& > [data-variant="text"][data-size="large"]:not([data-shape="icon"]):last-child': {
-            marginInlineEnd: '-24',
+          '& > [data-variant="tertiary"][data-size="xsmall"]:not([data-shape="icon"]):last-child': {
+            marginInlineEnd: '-12',
           },
-          '[data-surface-size="medium"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
+          '[data-surface-size="medium"] > & > [data-variant="tertiary"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
             { marginInlineEnd: '-16' },
-          '[data-surface-size="small"] > & > [data-variant="text"]:is([data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
+          '[data-surface-size="small"] > & > [data-variant="tertiary"]:is([data-size="small"], [data-size="medium"], [data-size="large"]):not([data-shape="icon"]):last-child':
             { marginInlineEnd: '-12' },
         },
       },
@@ -153,8 +160,8 @@ namespace styles {
             appearance: 'none !custom',
             backgroundColor: 'transparent !custom',
             border: 'none !custom',
-            borderRadius: '2',
-            color: 'foreground',
+            borderRadius: '3xs',
+            color: 'content.primary',
             cursor: 'pointer',
             font: 'inherit !custom',
             outlineColor: 'transparent !custom',
@@ -171,9 +178,9 @@ namespace styles {
             transitionTimingFunction: 'snappy',
           },
           '& > :is(a, button):hover': { textDecorationColor: 'currentColor !custom' },
-          '& > :is(a, button):focus-visible': { outlineColor: 'blue.700' },
+          '& > :is(a, button):focus-visible': { outlineColor: 'border.focus' },
         },
-        typography: 'label.16.strong',
+        typography: 'body.b1Strong',
       },
     },
     { id: 'tds/web/surface/links' },
@@ -182,9 +189,12 @@ namespace styles {
   export const surface = variants(
     {
       base: {
-        backgroundColor: 'background.surface',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
+        borderStyle: 'solid',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'block',
         outlineColor: 'transparent !custom',
         outlineOffset: '0',
@@ -194,40 +204,47 @@ namespace styles {
         transitionDuration: '160',
         transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
           '&:is(button, a[href], [role="button"])': {
-            border: 'none !custom',
             cursor: 'pointer',
             textDecoration: 'none !custom',
             width: '100% !custom',
           },
           '&:is(button, a[href], [role="button"]):hover:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'gray.100',
+            backgroundColor: 'container.regular',
           },
           '&:is(button, a[href], [role="button"]):active:not(:disabled, [aria-disabled="true"])': {
-            backgroundColor: 'gray.200',
+            backgroundColor: 'container.strong',
             scale: 'press',
           },
           '&:is(button, a[href], [role="button"]):focus-visible': {
-            outlineColor: 'blue.700',
+            outlineColor: 'border.focus',
             outlineOffset: '2',
           },
-          // Edge-to-edge row fills would otherwise cross the rounded corners. A table clips rather
-          // than hides its overflow, so a sticky header still sticks to the scrolling ancestor.
-          '&:has(> [data-rows])': { overflow: 'hidden' },
-          '&:has(> table)': { overflow: 'clip !custom' },
+          // Row fills reach the edges of a small surface and would otherwise cross its corners. A
+          // 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' },
+          // 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': {
+            marginInline: '-12',
+            width: `calc(100% + ${vars.spacing['24']}) !custom`,
+          },
           // A table at the top or bottom edge insets its text by the padding alone, as at the sides.
           // The header row bleeds to the top edge, so a sticky header keeps the padding above its
-          // text. The caption drops its outer padding. Without a caption, the last row bleeds to the
-          // bottom edge and keeps the half gap above its text from its 32, 40 or 56px height with
-          // 20px type.
+          // text. The caption drops its outer padding. Without a caption, the last row bleeds 12px
+          // into the bottom padding and keeps the half gap above its text from its 32, 40 or 56px
+          // height with 20px type.
           '& > table:last-child > caption': { paddingBlockEnd: '0px !custom' },
+          '& > table:last-child:not(:has(> caption))': { marginBlockEnd: '-12' },
           '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
             height: 'auto !custom',
+            paddingBlockEnd: '12',
           },
           '& > table[data-size="large"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
-            { paddingBlockStart: '18' },
+            { paddingBlockStart: '20' },
           '& > table[data-size="medium"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
             { paddingBlockStart: '10' },
           '& > table[data-size="small"]:last-child:not(:has(> caption)) > tbody > tr:last-child > td':
@@ -248,85 +265,37 @@ namespace styles {
       },
       defaultVariants: { size: 'large' },
       variants: {
-        // Padding is one and a half times the radius, and they scale together. A direct child
-        // table or Rows bleeds into the inline padding so fills reach the edges. Table cells at the
-        // edges take back exactly the padding, so their text aligns with the content edge, while rows
-        // keep their own side padding. Rows at the top or bottom edge take the full block padding,
-        // since each row brings its own, and take half beside other content.
+        // 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.
         size: {
           large: {
-            borderRadius: '16',
+            borderRadius: 'md',
             padding: '24',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-24' },
-              '& > [data-rows]': { marginBlock: '-12' },
-              '& > [data-rows]:first-child': { marginBlockStart: '-24' },
-              '& > [data-rows]:last-child': { marginBlockEnd: '-24' },
-              '& > table': { width: `calc(100% + ${vars.spacing['48']}) !custom` },
-              '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '24',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '24' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '24',
               },
-              '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-24',
-              },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '24',
-              },
             },
           },
           medium: {
-            borderRadius: '12',
+            borderRadius: 'sm',
             padding: '16',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-16' },
-              '& > [data-rows]': { marginBlock: '-8' },
-              '& > [data-rows]:first-child': { marginBlockStart: '-16' },
-              '& > [data-rows]:last-child': { marginBlockEnd: '-16' },
-              '& > table': { width: `calc(100% + ${vars.spacing['32']}) !custom` },
-              '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '16',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '16' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '16',
               },
-              '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-16',
-              },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '16',
-              },
             },
           },
           small: {
-            borderRadius: '8',
+            borderRadius: 'xs',
             padding: '12',
             selectors: {
-              '& > table, & > [data-rows]': { marginInline: '-12' },
-              '& > [data-rows]': { marginBlock: '-6' },
-              '& > [data-rows]:first-child': { marginBlockStart: '-12' },
-              '& > [data-rows]:last-child': { marginBlockEnd: '-12' },
-              '& > table': { width: `calc(100% + ${vars.spacing['24']}) !custom` },
-              '& > table > caption, & > table tr > :first-child': {
-                paddingInlineStart: '12',
-              },
-              '& > table tr > :last-child': { paddingInlineEnd: '12' },
               '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '12',
               },
-              '& > table:last-child:not(:has(> caption))': {
-                marginBlockEnd: '-12',
-              },
-              '& > table:last-child:not(:has(> caption)) > tbody > tr:last-child > td': {
-                paddingBlockEnd: '12',
-              },
             },
           },
         },
@@ -339,13 +308,19 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '12',
         display: 'flex',
         margin: '0',
         minWidth: '0',
-        selectors: { '& > svg': { flexShrink: '0 !custom', fontSize: '24' } },
-        typography: 'heading.20',
+        selectors: {
+          '& > svg': { flexShrink: '0 !custom', fontSize: '24' },
+          // A card that holds a table titles it as a section of the page.
+          '[data-surface-size]:has(> table) > &, [data-surface-size]:has(> table) > * > &': {
+            typography: 'heading.h3',
+          },
+        },
+        typography: 'body.b2Strong',
       },
     },
     { id: 'tds/web/surface/title' },