@tempoxyz/ds 0.3.1 → 0.3.2

package/src/web/components/Tabs.tsx

@@ -4,13 +4,15 @@ import type * as zyzz from 'zyzz'
 import { style, variants, vars } from '../zyzz.config.js'
 
 /**
- * An underlined `role="tablist"` that switches between `role="tabpanel"` views, built on Base UI
- * Tabs. Arrow keys move focus between tabs and wrap at the ends. Enter or Space activates the
+ * An underlined or pill `role="tablist"` that switches between `role="tabpanel"` views, built on
+ * Base UI Tabs. Arrow keys move focus between tabs and wrap at the ends. Enter or Space activates the
  * focused tab unless `activateOnFocus` is set on `List`.
  *
  * - Use for switching views of related content. Use links for page navigation.
  * - Name the list with `aria-label` or `aria-labelledby`.
  * - Keep tab labels short and parallel, such as Overview, Activity and Settings.
+ * - Set `variant="pill"` on `List` for filled pill tabs, such as a row of filters. Pill tabs mark
+ *   the active tab with its fill and take no `Indicator`.
  *
  * @example
  * <Tabs.Root defaultValue="overview">
@@ -32,7 +34,8 @@ import { style, variants, vars } from '../zyzz.config.js'
 export namespace Tabs {
   /**
    * The 2px bar along the bottom of the active tab, which slides to each tab and matches its
-   * width. Place it inside `List` after the tabs. It ignores pointer events.
+   * width. Place it inside an underline `List` after the tabs. A pill `List` hides it. It ignores
+   * pointer events.
    */
   export function Indicator(props: Indicator.Props) {
     const { className, vars, ...attributes } = props
@@ -50,17 +53,19 @@ export namespace Tabs {
   }
 
   /**
-   * The `role="tablist"` row, with 4px between tabs. `size` sets the height of the tabs to 32, 40
-   * or 56px, and `expand` stretches the tabs to equal widths across the row. The row scrolls
-   * horizontally when tabs overflow.
+   * The `role="tablist"` row. `variant` sets underline tabs, 4px apart, or filled pill tabs, 8px
+   * apart. `size` sets the height of underline tabs to 32, 40 or 56px, and of pill tabs to 32, 40
+   * or 48px. `appearance` sets the fills of pill tabs for the surface under them. `expand`
+   * stretches the tabs to equal widths across the row. The row scrolls horizontally when tabs
+   * overflow.
    */
   export function List(props: List.Props) {
-    const { className, expand, size, vars, ...attributes } = props
+    const { appearance, className, expand, size, variant, vars, ...attributes } = props
 
     return (
       <BaseUi.Tabs.List
         {...attributes}
-        {...styles.list({ className, expand, size, style: props.style, vars })}
+        {...styles.list({ appearance, className, expand, size, style: props.style, variant, vars })}
       />
     )
   }
@@ -206,8 +211,128 @@ namespace styles {
         padding: '4',
         position: 'relative',
       },
-      defaultVariants: { expand: false, size: 'medium' },
+      // The pill sizes follow the Platform Tab: 48, 40 and 32px, padded by 32, 24 and 16px, with
+      // a label in Pilat at the size and weight of B2 Strong, or of B3 Strong for small. Each
+      // family follows its typography set, which sets the family of the body.
+      compoundVariants: [
+        {
+          when: { size: 'large', variant: 'pill' },
+          style: {
+            selectors: {
+              '& > [role="tab"]': {
+                height: '48',
+                paddingInline: '32',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"] [data-reserve]': {
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+            },
+          },
+        },
+        {
+          when: { size: 'medium', variant: 'pill' },
+          style: { selectors: { '& > [role="tab"]': { paddingInline: '24' } } },
+        },
+        {
+          when: { size: 'small', variant: 'pill' },
+          style: {
+            selectors: {
+              '& > [role="tab"]': {
+                paddingInline: '16',
+                typography: 'body.b3Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                typography: 'body.b3Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"] [data-reserve]': {
+                typography: 'body.b3Strong',
+                fontFamily: 'heading',
+              },
+            },
+          },
+        },
+        // Each appearance fills the resting tab with the container of its surface, and the active
+        // tab with the opposite background and text. The active selector also matches the hovered
+        // active tab, so it outranks the hover color of a tab.
+        {
+          when: { appearance: 'base', variant: 'pill' },
+          style: {
+            selectors: {
+              '& > [role="tab"]': {
+                backgroundColor: 'container.regular',
+                color: 'content.primary',
+              },
+              '& > [role="tab"]:hover:not([data-disabled], [data-active])': {
+                backgroundColor: 'container.strong',
+                color: 'content.primary',
+              },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                backgroundColor: 'inverse.background.primary',
+                color: 'inverse.content.primary',
+              },
+            },
+          },
+        },
+        // The focus ring of the page blends into an inverse surface, so an inverse tab draws its
+        // ring in the inverse text color.
+        {
+          when: { appearance: 'inverse', variant: 'pill' },
+          style: {
+            selectors: {
+              '& > [role="tab"]': {
+                backgroundColor: 'inverse.container.regular',
+                color: 'inverse.content.primary',
+              },
+              '& > [role="tab"]:hover:not([data-disabled], [data-active])': {
+                color: 'inverse.content.primary',
+              },
+              '& > [role="tab"]:focus-visible': { outlineColor: 'inverse.content.primary' },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                backgroundColor: 'background.primary',
+                color: 'content.primary',
+              },
+            },
+          },
+        },
+        // The overlay fills and text keep the same colors in both schemes. Hover lightens the fill.
+        {
+          when: { appearance: 'overlay', variant: 'pill' },
+          style: {
+            selectors: {
+              '& > [role="tab"]': {
+                backgroundColor: 'overlay.container.regular',
+                color: 'overlay.content.primary',
+              },
+              '& > [role="tab"]:hover:not([data-disabled], [data-active])': {
+                backgroundColor: 'overlay.action.secondary.fill.hover',
+                color: 'overlay.content.primary',
+              },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                backgroundColor: 'background.primary',
+                color: 'content.primary',
+              },
+            },
+          },
+        },
+      ],
+      defaultVariants: { appearance: 'base', expand: false, size: 'medium', variant: 'underline' },
       variants: {
+        /**
+         * The surface under pill tabs: the page for `base`, an inverse surface for `inverse`, and
+         * an image or video for `overlay`. Underline tabs ignore it.
+         *
+         * @default 'base'
+         */
+        appearance: { base: {}, inverse: {}, overlay: {} },
         expand: {
           false: {},
           true: {
@@ -215,7 +340,7 @@ namespace styles {
             selectors: { '& > [role="tab"]': { flex: '1 !custom' } },
           },
         },
-        // The shared control scale: 32, 40 and 56px. The 40px tab matches the TDPS Tab, which
+        // The shared control scale: 32, 40 and 56px. The 40px tab matches the Platform Tab, which
         // has no other size. Small keeps its padding and label, and large pads a B1 label by 12px.
         size: {
           large: {
@@ -228,6 +353,43 @@ namespace styles {
           medium: { selectors: { '& > [role="tab"]': { height: '40' } } },
           small: { selectors: { '& > [role="tab"]': { height: '32' } } },
         },
+        // Pill tabs keep one weight, so the active tab changes only its fill and text color. They
+        // keep an 80px minimum width and center their label.
+        variant: {
+          pill: {
+            columnGap: '8',
+            selectors: {
+              '& > [role="tab"]': {
+                alignItems: 'center',
+                borderRadius: 'full',
+                cornerShape: 'round',
+                minWidth: '5rem !custom',
+                outlineOffset: '2',
+                transitionProperty: 'background-color, color, outline-color, scale',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"]:is([data-active], [data-active]:hover)': {
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& > [role="tab"] [data-reserve]': {
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              // The fill marks the active tab, so the list hides the underline indicator.
+              '& > span:not([role="tab"])': { display: 'none' },
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+              selectors: {
+                '& > [role="tab"]': {
+                  transitionProperty: 'background-color, color, outline-color',
+                },
+              },
+            },
+          },
+          underline: {},
+        },
       },
     },
     { id: 'tds/web/tabs/list' },

package/src/web/components/TempoLogo.tsx

@@ -2,7 +2,7 @@ import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { variants } from '../zyzz.config.js'
 
-// The Tempo Logo exports from the TDPS page of Web-Wallet, drawn in `currentColor`.
+// The Tempo Logo exports from TPDS 1.0 Platform, drawn in `currentColor`.
 const artwork = {
   mark: {
     paths: ['M6.88 20H1.413L6.48 4.533H0L1.413 0H19.466L18.053 4.533H11.92L6.88 20Z'],

package/src/web/components/TextInput.tsx

@@ -1,7 +1,7 @@
 import * as BaseUi from '@base-ui/react/input'
 import { type ComponentPropsWithRef, useContext, useMemo, useRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 import * as InputGroup from './internal/InputGroup.js'
 
 /**
@@ -9,7 +9,8 @@ import * as InputGroup from './internal/InputGroup.js'
  * place it inside `Field.Root` to get a label, description and error. Focus turns the field
  * elevated with a 1px border. `invalid` fills it red and `success` ends it with a check, each also
  * inherited from `Field.Root`. Entering either state after mount plays a one-shot nudge or pop.
- * For search, put a `Search` icon in `Prefix` and add `Clear`.
+ * For search, put a `Search` icon in `Prefix` and add `Clear`. `size="large"` draws the 52px
+ * search bar, and `appearance="overlay"` draws the field over an image or video.
  *
  * - Give every control a visible `Field.Label`. A placeholder is not a label.
  * - Set `autoComplete`, `inputMode` and `type` so browsers and keyboards can help fill the field.
@@ -34,9 +35,20 @@ import * as InputGroup from './internal/InputGroup.js'
 export namespace TextInput {
   /** The field surface, rendered as a `div` that holds the other parts. */
   export function Group(props: Group.Props) {
-    const { className, invalid = false, ref, success = false, variant, vars, ...attributes } = props
+    const {
+      appearance,
+      className,
+      invalid = false,
+      ref,
+      size,
+      success = false,
+      variant,
+      vars,
+      ...attributes
+    } = props
     const control = useRef<HTMLInputElement | null>(null)
     const element = useRef<HTMLDivElement | null>(null)
+    const surface = styles.group({ appearance, className, size })
     const context = useMemo(() => ({ control, invalid }), [invalid])
 
     InputGroup.useEntrance(element)
@@ -45,7 +57,13 @@ export namespace TextInput {
       <InputGroup.Context.Provider value={context}>
         <div
           {...attributes}
-          {...InputGroup.styles.group({ className, style: props.style, variant, vars })}
+          {...surface}
+          {...InputGroup.styles.group({
+            className: surface.className,
+            style: props.style,
+            variant,
+            vars,
+          })}
           data-invalid={invalid || undefined}
           data-success={success || undefined}
           ref={(node) => {
@@ -60,7 +78,8 @@ export namespace TextInput {
 
   export namespace Group {
     export type Props = ComponentPropsWithRef<'div'> &
-      zyzz.Props.Variants<typeof InputGroup.styles.group> & {
+      zyzz.Props.Variants<typeof InputGroup.styles.group> &
+      zyzz.Props.Variants<typeof styles.group> & {
         /**
          * Fills the field red and sets `aria-invalid` on `TextInput.Control`.
          *
@@ -254,6 +273,69 @@ namespace styles {
     { id: 'tds/web/text-input/clear' },
   )
 
+  /**
+   * The surface and size of `TextInput.Group`, applied over the shared field. The rules repeat the
+   * element type, so they outrank the shared rules of the same state.
+   */
+  export const group = variants(
+    {
+      base: {
+        // A field in a large `Field.Root` insets its content 20px, as the Platform text input does.
+        selectors: { '[data-field-size="large"] > &:is(div)': { paddingInline: '20' } },
+      },
+      // The search bar on the page draws its icons in the primary color.
+      compoundVariants: [
+        {
+          when: { appearance: 'base', size: 'large' },
+          style: { selectors: { '& > span > svg': { color: 'content.primary' } } },
+        },
+      ],
+      defaultVariants: { appearance: 'base', size: 'medium' },
+      variants: {
+        /**
+         * The surface under the field: the page for `base`, and an image or video for `overlay`.
+         * The overlay fill and text keep the same colors in both schemes, and hover lightens the
+         * fill.
+         *
+         * @default 'base'
+         */
+        appearance: {
+          base: {},
+          overlay: {
+            selectors: {
+              '&:is(div)': {
+                backgroundColor: 'overlay.container.regular',
+                color: 'overlay.content.primary',
+              },
+              '&:is(div):hover:not(:has(input:disabled))': {
+                backgroundColor: 'overlay.action.secondary.fill.hover',
+              },
+              '& > input, & > input::placeholder, & > span, & > span > svg, & > button': {
+                color: 'overlay.content.primary',
+              },
+            },
+          },
+        },
+        /**
+         * The height of the field. `medium` is the 48px text field. `large` is the 52px search
+         * bar, which insets its content 20px, rounds at `sm` and draws 20px icons.
+         *
+         * @default 'medium'
+         */
+        size: {
+          large: {
+            selectors: {
+              '&:is(div)': { borderRadius: 'sm', height: '52', paddingInline: '20' },
+              '& > span > svg': { fontSize: '20' },
+            },
+          },
+          medium: {},
+        },
+      },
+    },
+    { id: 'tds/web/text-input/surface' },
+  )
+
   // The group carries the type, so the control inherits it. Browsers reset the tracking of a form
   // control, so it inherits that too.
   export const control = style(

package/src/web/components/Textarea.tsx

@@ -6,7 +6,8 @@ import { variants } from '../zyzz.config.js'
 /**
  * A native `textarea` registered as the control of the enclosing `Field.Root`, which supplies its
  * label, description, error and disabled state. It defaults to three rows with vertical resizing,
- * and `variant="outlined"` draws a 1px line instead of the fill.
+ * and `variant="outlined"` draws a 1px line instead of the fill. In a large `Field.Root`, it
+ * insets its text 20px from the sides and 16px from the top, and is at least 80px tall.
  *
  * - Use it for multi-line answers. Set `rows` to the expected length of the answer.
  * - `resize="auto"` grows the box with its content through `field-sizing`. Browsers without that
@@ -85,6 +86,13 @@ namespace styles {
             cursor: 'default',
           },
           '&:disabled::placeholder': { color: 'content.subtle' },
+          // The Platform text input draws its multi-line field 80px tall, with the text 16px from
+          // the top inside the 1px border.
+          '[data-field-size="large"] > &': {
+            minHeight: '80',
+            paddingBlock: '15px !custom',
+            paddingInline: '20',
+          },
         },
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',

package/src/web/components/Toast.tsx

@@ -42,6 +42,51 @@ export namespace Toast {
   /** Sets the leading icon and its color. `neutral` shows no icon. */
   export type Intent = 'info' | 'negative' | 'neutral' | 'positive' | 'warning'
 
+  /**
+   * One toast: an elevated card with the icon of its intent, its title and description in Pilat,
+   * an optional action, and a Dismiss button. `Toast.Viewport` renders one for each queued toast.
+   * Render it yourself only under `Toast.Provider`, such as in a custom viewport, with a `toast`
+   * object from the queue. Its `type` sets the intent. The item is absolutely positioned at the
+   * bottom of its containing block, as the viewport stacks it.
+   */
+  export function Item(props: Item.Props) {
+    const { className, toast, vars, ...attributes } = props
+    const intent = (toast.type ?? 'neutral') as Intent
+    const Glyph = intent === 'neutral' ? undefined : icons[intent]
+
+    return (
+      <BaseUi.Toast.Root
+        {...attributes}
+        toast={toast}
+        {...styles.root({ className, style: props.style, vars })}
+      >
+        <BaseUi.Toast.Content {...styles.content()}>
+          {Glyph && (
+            <span aria-hidden="true" data-icon="" {...styles.icon({ intent })}>
+              <Glyph />
+            </span>
+          )}
+          <div {...styles.body()}>
+            <BaseUi.Toast.Title {...styles.title()} />
+            <BaseUi.Toast.Description {...styles.description()} />
+          </div>
+          {toast.actionProps && <BaseUi.Toast.Action {...styles.action()} />}
+          <BaseUi.Toast.Close aria-label="Dismiss" {...styles.close()}>
+            <Close />
+          </BaseUi.Toast.Close>
+        </BaseUi.Toast.Content>
+      </BaseUi.Toast.Root>
+    )
+  }
+
+  export namespace Item {
+    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.root> & {
+        /** The queued toast, whose `title`, `description`, `type` and `actionProps` it renders. */
+        toast: BaseUi.Toast.Root.ToastObject
+      }
+  }
+
   /**
    * Holds the toast queue for `Toast.useToast` and `Toast.Viewport` beneath it. The oldest toasts
    * past `limit` stay mounted but hidden.
@@ -97,9 +142,8 @@ export namespace Toast {
   }
 
   /**
-   * Renders the queued toasts in a portal, each with its title, description, optional action and
-   * a Dismiss button. It spans the bottom edge on narrow screens and sits 24rem wide at the bottom
-   * end from 40rem up.
+   * Renders a `Toast.Item` for each queued toast in a portal. It spans the bottom edge on narrow
+   * screens and sits 20rem wide at the bottom end from 40rem up.
    */
   export function Viewport(props: Viewport.Props) {
     const { className, vars, ...attributes } = props
@@ -111,30 +155,9 @@ export namespace Toast {
           {...attributes}
           {...styles.viewport({ className, style: props.style, vars })}
         >
-          {toasts.map((toast) => {
-            const intent = (toast.type ?? 'neutral') as Intent
-            const Glyph = intent === 'neutral' ? undefined : icons[intent]
-
-            return (
-              <BaseUi.Toast.Root key={toast.id} toast={toast} {...styles.root()}>
-                <BaseUi.Toast.Content {...styles.content()}>
-                  {Glyph && (
-                    <span aria-hidden="true" {...styles.icon({ intent })}>
-                      <Glyph />
-                    </span>
-                  )}
-                  <div {...styles.body()}>
-                    <BaseUi.Toast.Title {...styles.title()} />
-                    <BaseUi.Toast.Description {...styles.description()} />
-                  </div>
-                  {toast.actionProps && <BaseUi.Toast.Action {...styles.action()} />}
-                  <BaseUi.Toast.Close aria-label="Dismiss" {...styles.close()}>
-                    <Close />
-                  </BaseUi.Toast.Close>
-                </BaseUi.Toast.Content>
-              </BaseUi.Toast.Root>
-            )
-          })}
+          {toasts.map((toast) => (
+            <Item key={toast.id} toast={toast} />
+          ))}
         </BaseUi.Toast.Viewport>
       </BaseUi.Toast.Portal>
     )
@@ -159,6 +182,8 @@ namespace styles {
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '32',
+      // The 32px button centers on the 20px first line of the title.
+      marginBlock: '-6',
       paddingInline: '12',
       // Weight overrides the typography token, so it stays after it.
       typography: 'body.b3Strong',
@@ -210,6 +235,8 @@ namespace styles {
       fontSize: '16',
       height: '24',
       justifyContent: 'center',
+      // The 24px button centers on the 20px first line of the title.
+      marginBlock: '-0.125rem !custom',
       padding: '0',
       width: '24',
       outlineColor: 'transparent !custom',
@@ -232,20 +259,24 @@ namespace styles {
     { id: 'tds/web/toast/close' },
   )
 
+  // The icon, the action and the Dismiss button center on the first line of the title.
   export const content = style(
     {
-      alignItems: 'center',
+      alignItems: 'flex-start',
       boxSizing: 'border-box',
       columnGap: '12',
       display: 'flex',
       height: '100% !custom',
       overflow: 'hidden',
       paddingBlock: '16',
-      paddingInline: '20',
+      paddingInlineEnd: '16',
+      paddingInlineStart: '20',
       transitionDuration: '200',
       transitionProperty: 'opacity',
       transitionTimingFunction: 'snappy',
       selectors: {
+        // A leading icon starts 16px from the edge, and the text 12px after it.
+        '&:has(> [data-icon])': { paddingInlineStart: '16' },
         '&[data-behind]': { opacity: '0 !custom', pointerEvents: 'none' },
         '&[data-expanded]': { opacity: '1 !custom' },
       },
@@ -253,8 +284,10 @@ namespace styles {
     { id: 'tds/web/toast/content' },
   )
 
+  // The title and description set Pilat at the size of their typography set, so the family
+  // follows the set, which sets the family of the body.
   export const description = style(
-    { color: 'content.secondary', margin: '0', typography: 'body.b2' },
+    { color: 'content.secondary', margin: '0', typography: 'body.b3Strong', fontFamily: 'heading' },
     { id: 'tds/web/toast/description' },
   )
 
@@ -278,7 +311,7 @@ namespace styles {
     {
       backgroundColor: 'background.elevated',
       borderRadius: 'sm',
-      boxShadow: 'regular',
+      boxShadow: 'large',
       boxSizing: 'border-box',
       color: 'content.primary',
       height: 'var(--toast-frontmost-height, var(--toast-height)) !custom',
@@ -334,7 +367,7 @@ namespace styles {
   )
 
   export const title = style(
-    { color: 'content.primary', margin: '0', typography: 'body.b2Strong' },
+    { color: 'content.primary', margin: '0', typography: 'body.b2Strong', fontFamily: 'heading' },
     { id: 'tds/web/toast/title' },
   )
 
@@ -343,13 +376,13 @@ namespace styles {
       insetBlockEnd: '16',
       insetInline: '16',
       margin: 'auto !custom',
-      maxWidth: '360',
+      maxWidth: '320',
       position: 'fixed',
       zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',
-        width: '360',
+        width: '320',
       },
     },
     { id: 'tds/web/toast/viewport' },

package/src/web/components/Tooltip.tsx

@@ -96,14 +96,16 @@ export namespace Tooltip {
 }
 
 namespace styles {
+  // An elevated label with an 8px corner, padded 8px above and below and 12px at the sides.
   export const popup = style(
     {
-      backgroundColor: 'content.primary',
-      borderRadius: 'xs',
+      backgroundColor: 'background.elevated',
+      borderRadius: '2xs',
+      boxShadow: 'small',
       boxSizing: 'border-box',
-      color: 'background.primary',
+      color: 'content.primary',
       maxWidth: '320',
-      paddingBlock: '6',
+      paddingBlock: '8',
       paddingInline: '12',
       transformOrigin: 'var(--transform-origin) !custom',
       transitionDuration: '160',