@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/Alert.tsx

@@ -0,0 +1,301 @@
+import * as BaseUi from '@base-ui/react/button'
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * An inline message on a tinted container, marked by an indicator in the color of its `intent`.
+ * The `negative` and `warning` intents render `role="alert"` and interrupt screen readers. The
+ * rest render `role="status"` and announce politely. Pass `role` to override either.
+ *
+ * - Use for guidance tied to nearby content. Use `Banner` for system or page-wide messages.
+ * - Keep the message short, with one `Alert.Action` at most, placed inside `Alert.Content`.
+ * - State the outcome in the text, so the meaning never depends on color alone.
+ *
+ * @example
+ * <Alert intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>New address</Alert.Title>
+ *     Check the first and last 4 characters.
+ *     <Alert.Action onClick={review}>Review</Alert.Action>
+ *   </Alert.Content>
+ *   <Alert.Dismiss onClick={() => setOpen(false)} />
+ * </Alert>
+ *
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role | MDN status role}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role | MDN alert role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ * @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/contrast-minimum.html | WCAG 2.2 Contrast (Minimum)}
+ */
+export function Alert(props: Alert.Props) {
+  const { className, intent, vars, ...attributes } = props
+
+  return (
+    <div
+      // Urgent intents interrupt assistive technology, the rest announce politely.
+      role={intent === 'negative' || intent === 'warning' ? 'alert' : 'status'}
+      {...attributes}
+      {...styles.note({ className, intent, style: props.style, vars })}
+    />
+  )
+}
+
+export namespace Alert {
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.note>
+
+  /**
+   * A text `<button>` with a 44px tall target, in the alert's strong type. Place it inside
+   * `Alert.Content`, after the message. Name the action it performs, such as Review fees.
+   */
+  export function Action(props: Action.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <BaseUi.Button
+        {...attributes}
+        data-alert-action=""
+        {...styles.action({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Action {
+    export type Props = ComponentPropsWithRef<'button'> &
+      zyzz.Props.Variants<typeof styles.action> &
+      Pick<BaseUi.Button.Props, 'nativeButton' | 'render'>
+  }
+
+  /**
+   * Stacks the title, message, and action in a `<div>` that fills the row and can shrink, so long
+   * text wraps beside the indicator.
+   */
+  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>
+  }
+
+  /**
+   * A 44px icon button at the end of the row. Without children it shows a `×` glyph labelled
+   * `Dismiss`. It only renders the button, so remove the alert in its `onClick`.
+   */
+  export function Dismiss(props: Dismiss.Props) {
+    const { children, className, vars, ...attributes } = props
+
+    return (
+      <BaseUi.Button
+        aria-label="Dismiss"
+        {...attributes}
+        {...styles.dismiss({ className, style: props.style, vars })}
+      >
+        {children ?? <span aria-hidden="true">×</span>}
+      </BaseUi.Button>
+    )
+  }
+
+  export namespace Dismiss {
+    export type Props = ComponentPropsWithRef<'button'> &
+      zyzz.Props.Variants<typeof styles.dismiss> &
+      Pick<BaseUi.Button.Props, 'nativeButton' | 'render'>
+  }
+
+  /**
+   * Renders an 8px square in the color of the alert's `intent`, inside an `aria-hidden` `<span>`
+   * as tall as the first line. The indicator stays decorative, so the text must carry the meaning.
+   */
+  export function Icon(props: Icon.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        aria-hidden="true"
+        {...attributes}
+        data-alert-icon=""
+        {...styles.icon({ className, style: props.style, vars })}
+      >
+        <span {...styles.indicator()} />
+      </span>
+    )
+  }
+
+  export namespace Icon {
+    export type Props = Omit<ComponentPropsWithRef<'span'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.icon>
+  }
+
+  /** Renders the heading of the message in a `<div>`, in the strong weight of the alert's type. */
+  export function Title(props: Title.Props) {
+    return <div {...props} data-alert-title="" />
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'div'>
+  }
+}
+
+namespace styles {
+  export const action = style(
+    {
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: 'transparent !custom',
+      border: 'none !custom',
+      borderRadius: '3xs',
+      color: 'content.primary',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '44',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '0',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      padding: '0',
+      transitionDuration: '160',
+      transitionProperty: 'opacity, outline-color, outline-offset, scale',
+      transitionTimingFunction: 'snappy',
+      whiteSpace: 'nowrap',
+      selectors: {
+        '&:active:not([data-disabled])': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+        '&:hover:not([data-disabled])': { opacity: 'hover' },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'opacity, outline-color',
+        selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/alert/action' },
+  )
+
+  export const content = style(
+    {
+      display: 'flex',
+      flex: '1 !custom',
+      flexDirection: 'column',
+      minWidth: '0',
+      rowGap: '4',
+    },
+    { id: 'tds/web/alert/content' },
+  )
+
+  export const dismiss = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'transparent !custom',
+      border: 'none !custom',
+      borderRadius: 'full',
+      color: 'content.secondary',
+      cornerShape: 'round',
+      cursor: 'pointer',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '44',
+      justifyContent: 'center',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '-2',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      padding: '0',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, color, outline-color, scale',
+      transitionTimingFunction: 'snappy',
+      typography: 'body.b2Strong',
+      width: '44',
+      selectors: {
+        '&:active:not([data-disabled])': { scale: 'press' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover:not([data-disabled])': {
+          backgroundColor: 'container.regular',
+          color: 'content.primary',
+        },
+        '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'background-color, color, outline-color',
+        selectors: { '&:active:not([data-disabled])': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/alert/dismiss' },
+  )
+
+  export const icon = style(
+    {
+      alignItems: 'center',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      justifyContent: 'center',
+    },
+    { id: 'tds/web/alert/icon' },
+  )
+
+  export const indicator = style(
+    {
+      backgroundColor: 'currentColor !custom',
+      // Platform has no 2px radius step, so the literal takes the squircle scale of the steps.
+      borderRadius: 'calc(0.125rem * var(--tds-corner-scale, 1)) !custom',
+      height: '8',
+      width: '8',
+    },
+    { id: 'tds/web/alert/indicator' },
+  )
+
+  export const note = variants(
+    {
+      base: {
+        alignItems: 'flex-start',
+        borderRadius: 'xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        columnGap: '12',
+        display: 'flex',
+        padding: '16',
+        typography: 'body.b3',
+        selectors: {
+          '& [data-alert-action], & [data-alert-title]': { typography: 'body.b3Strong' },
+          '& [data-alert-icon]': { height: '16', width: '16' },
+        },
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        // Text stays primary on every tint, and the indicator takes the intent color. Platform has no
+        // blue or violet container, so `tip` and `special` take the 8% and 16% accent alphas.
+        intent: {
+          negative: {
+            backgroundColor: 'container.negative',
+            selectors: { '& [data-alert-icon]': { color: 'content.negative' } },
+          },
+          neutral: {
+            backgroundColor: 'container.regular',
+            selectors: { '& [data-alert-icon]': { color: 'content.subtle' } },
+          },
+          positive: {
+            backgroundColor: 'container.positive',
+            selectors: { '& [data-alert-icon]': { color: 'content.positive' } },
+          },
+          special: {
+            backgroundColor: 'light-dark(rgb(126 89 228 / 0.08), rgb(152 119 241 / 0.16)) !custom',
+            selectors: { '& [data-alert-icon]': { color: 'accent.violet.background' } },
+          },
+          tip: {
+            backgroundColor: 'light-dark(rgb(68 113 237 / 0.08), rgb(116 152 251 / 0.16)) !custom',
+            selectors: { '& [data-alert-icon]': { color: 'accent.blue.background' } },
+          },
+          warning: {
+            backgroundColor: 'container.warning',
+            selectors: { '& [data-alert-icon]': { color: 'content.warning' } },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/alert' },
+  )
+}

package/src/web/components/AlertDialog.tsx

@@ -1,26 +1,32 @@
 import * as BaseUi from '@base-ui/react/alert-dialog'
-import type { ComponentPropsWithRef } from 'react'
-import type * as zyzz from 'zyzz'
-import { style } from '../zyzz.config.js'
-import { styles as dialog } from './Dialog.js'
+import { Dialog } from './Dialog.js'
 
 /**
  * A modal confirmation that interrupts the page until the user decides. The popup has
  * `role="alertdialog"`, traps focus, locks page scroll and closes on Escape or a `Close` part, but
- * never on an outside press. Focus returns to the trigger on close.
+ * never on an outside press. Focus returns to the trigger on close. It shares the parts and look of
+ * `Dialog`, at the `small` size by default.
  *
  * - Reserve it for decisions that need an explicit answer, such as destructive confirmations.
- * - Always include `Title` and `Description`, which name and describe the popup.
+ * - Always include `Title` and `Description` in a `Header`, which name and describe the popup.
  * - Label actions with specific verbs, such as `Delete key`, not `OK`.
  *
  * @example
  * <AlertDialog.Root>
- *   <AlertDialog.Trigger render={<Button variant="negative" />}>Delete key</AlertDialog.Trigger>
+ *   <AlertDialog.Trigger render={<Button />}>Delete key</AlertDialog.Trigger>
  *   <AlertDialog.Popup>
- *     <AlertDialog.Title>Delete this key?</AlertDialog.Title>
- *     <AlertDialog.Description>Apps that use this key stop working.</AlertDialog.Description>
- *     <AlertDialog.Close render={<Button variant="secondary" />}>Cancel</AlertDialog.Close>
- *     <AlertDialog.Close render={<Button variant="negative" />}>Delete key</AlertDialog.Close>
+ *     <AlertDialog.Header>
+ *       <AlertDialog.Title>Delete this key?</AlertDialog.Title>
+ *       <AlertDialog.Description>Apps that use this key stop working.</AlertDialog.Description>
+ *     </AlertDialog.Header>
+ *     <ButtonGroup>
+ *       <AlertDialog.Close render={<Button size="large" variant="secondary" />}>
+ *         Cancel
+ *       </AlertDialog.Close>
+ *       <AlertDialog.Close render={<Button size="large" />}>
+ *         Delete key
+ *       </AlertDialog.Close>
+ *     </ButtonGroup>
  *   </AlertDialog.Popup>
  * </AlertDialog.Root>
  *
@@ -31,127 +37,57 @@ import { styles as dialog } from './Dialog.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html | WCAG 2.2 Keyboard}
  */
 export namespace AlertDialog {
+  /** Renders the content `<div>` between the header and the footer, as `Dialog.Body` does. */
+  export const Body = Dialog.Body
+
   /** Closes the dialog on click. Pass `render` to style it as a `Button`. */
   export const Close = BaseUi.AlertDialog.Close
 
+  /** Renders a `p` that describes the popup through `aria-describedby`. State the consequence here. */
+  export const Description = Dialog.Description
+
+  /** Holds the `Title` and `Description`, and lays them out as `Dialog.Header` does. */
+  export const Header = Dialog.Header
+
   /** Owns the open state. Pass `open` and `onOpenChange` to control it. The dialog is always modal. */
   export const Root = BaseUi.AlertDialog.Root
 
+  /** Renders an `h2` that names the popup through `aria-labelledby`. */
+  export const Title = Dialog.Title
+
   /** Opens the dialog on click. Pass `render` to style it as a `Button`. */
   export const Trigger = BaseUi.AlertDialog.Trigger
 
-  export namespace Root {
-    export type Props = BaseUi.AlertDialog.Root.Props
+  export namespace Body {
+    export type Props = Dialog.Body.Props
   }
 
-  /** Renders a `p` that describes the popup through `aria-describedby`. State the consequence here. */
-  export function Description(props: Description.Props) {
-    const { className, vars, ...attributes } = props
+  export namespace Description {
+    export type Props = Dialog.Description.Props
+  }
 
-    return (
-      <BaseUi.AlertDialog.Description
-        {...attributes}
-        {...dialog.description({ className, style: props.style, vars })}
-      />
-    )
+  export namespace Header {
+    export type Props = Dialog.Header.Props
   }
 
-  export namespace Description {
-    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof dialog.description>
+  export namespace Root {
+    export type Props = BaseUi.AlertDialog.Root.Props
+  }
+
+  export namespace Title {
+    export type Props = Dialog.Title.Props
   }
 
   /**
-   * Renders the portal, scrim, viewport and popup. The popup stays centered at every width.
-   * Opening focuses the first tabbable element. When that is a destructive action, pass the
-   * cancel button's ref to `initialFocus`.
+   * Renders the portal, scrim, viewport and popup as `Dialog.Popup` does, with `size` defaulting
+   * to `small`. Opening focuses the first tabbable element. When that is a destructive action, pass
+   * the cancel button's ref to `initialFocus`.
    */
   export function Popup(props: Popup.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <BaseUi.AlertDialog.Portal>
-        <BaseUi.AlertDialog.Backdrop {...dialog.backdrop()} />
-        <BaseUi.AlertDialog.Viewport {...styles.viewport()}>
-          <BaseUi.AlertDialog.Popup
-            {...attributes}
-            {...styles.popup({ className, style: props.style, vars })}
-          />
-        </BaseUi.AlertDialog.Viewport>
-      </BaseUi.AlertDialog.Portal>
-    )
+    return <Dialog.Popup {...props} size={props.size ?? 'small'} />
   }
 
   export namespace Popup {
-    export type Props = ComponentPropsWithRef<'div'> &
-      zyzz.Props.Variants<typeof styles.popup> &
-      Pick<BaseUi.AlertDialog.Popup.Props, 'finalFocus' | 'initialFocus' | 'render'>
-  }
-
-  /** Renders an `h2` that names the popup through `aria-labelledby`. */
-  export function Title(props: Title.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <BaseUi.AlertDialog.Title
-        {...attributes}
-        {...dialog.title({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Title {
-    export type Props = ComponentPropsWithRef<'h2'> & zyzz.Props.Variants<typeof dialog.title>
+    export type Props = Dialog.Popup.Props
   }
 }
-
-namespace styles {
-  export const popup = style(
-    {
-      backgroundColor: 'background.raised',
-      borderRadius: '16',
-      boxShadow: 'modal',
-      boxSizing: 'border-box',
-      color: 'foreground',
-      maxWidth: '384',
-      outline: 'none !custom',
-      padding: '24',
-      transitionDuration: '280',
-      transitionProperty: 'opacity, scale',
-      transitionTimingFunction: 'spring',
-      typography: 'copy.14',
-      width: '100% !custom',
-      selectors: {
-        '&[data-ending-style]': {
-          opacity: '0 !custom',
-          scale: 'enter',
-          transitionDuration: '180',
-        },
-        '&[data-starting-style]': {
-          opacity: '0 !custom',
-          scale: 'enter',
-        },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'opacity',
-        selectors: {
-          '&[data-ending-style], &[data-starting-style]': { scale: 'none !custom' },
-        },
-      },
-    },
-    { id: 'tds/web/alert-dialog/popup' },
-  )
-
-  export const viewport = style(
-    {
-      alignItems: 'center',
-      boxSizing: 'border-box',
-      display: 'grid',
-      inset: '0',
-      justifyItems: 'center',
-      overflowY: 'auto',
-      padding: '16',
-      position: 'fixed',
-    },
-    { id: 'tds/web/alert-dialog/viewport' },
-  )
-}

package/src/web/components/Amount.tsx

@@ -167,19 +167,19 @@ namespace styles {
           right: { textAlign: 'right' },
         },
         size: {
-          lg: { typography: 'heading.32' },
-          md: { typography: 'heading.20' },
-          sm: { typography: 'copy.14.strong' },
-          xl: { typography: 'heading.40' },
+          lg: { typography: 'heading.h1' },
+          md: { typography: 'heading.h3' },
+          sm: { typography: 'body.b2Strong' },
+          xl: { typography: 'display.d2' },
         },
         strikethrough: {
           false: {},
-          true: { color: 'gray.900', textDecoration: 'line-through !custom' },
+          true: { color: 'content.secondary', textDecoration: 'line-through !custom' },
         },
       },
     },
     { id: 'tds/web/amount' },
   )
 
-  export const symbol = style({ color: 'gray.900' }, { id: 'tds/web/amount/symbol' })
+  export const symbol = style({ color: 'content.secondary' }, { id: 'tds/web/amount/symbol' })
 }