@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/Table.tsx

@@ -19,6 +19,8 @@ import { style, variants, vars } from '../zyzz.config.js'
  * - For a sortable column, set `aria-sort` on its `Table.HeaderCell` and put a `Table.SortButton`
  *   in it.
  * - With `interactive`, make each clickable row reachable by keyboard through a link or button.
+ * - For copy rather than data, set `variant="dense"` for a row of labels over rows of details, or
+ *   `variant="simple"` for rows of a title beside a paragraph.
  *
  * @example
  * <Table>
@@ -166,9 +168,14 @@ export namespace Table {
    * dividers, and `interactive` to fill a hovered row and outline a focus-visible one. An
    * interactive table clips each body row to its 12px corners, so a popup in a cell renders in a
    * portal.
+   *
+   * `variant` sets the data table by default. `dense` sets equal columns of Pilat copy: header cells
+   * in the primary color over body rows that each draw a line above. `simple` sets rows that each
+   * draw a line above a row header in 40% of the width beside a paragraph. Both pad rows 16px above
+   * and below, keep 16px between columns, and take no `size` or `dividers`.
    */
   export function Root(props: Root.Props) {
-    const { className, dividers, interactive, size, vars, ...attributes } = props
+    const { className, dividers, interactive, size, variant, vars, ...attributes } = props
 
     // `Surface` reads the size to inset the last row's text by its own padding.
     return (
@@ -181,6 +188,7 @@ export namespace Table {
           interactive,
           size,
           style: props.style,
+          variant,
           vars,
         })}
       />
@@ -380,6 +388,7 @@ namespace styles {
         dividers: true,
         interactive: false,
         size: 'medium',
+        variant: 'data',
       },
       variants: {
         // A row draws its divider in the 1px that its cells leave below their padding, inset by
@@ -464,6 +473,65 @@ namespace styles {
             selectors: { '& :is(td, th)': { paddingBlock: '4' }, '& td': { height: '32' } },
           },
         },
+        // Dense and simple tables set copy rather than data. Their rows pad cells 16px above and
+        // below, and a cell draws the line above its row in its top padding. Columns sit 16px apart,
+        // without padding at the edges of a row. They override the heights, dividers and edge
+        // padding of the data table, and the Pilat family follows its typography set.
+        variant: {
+          data: {},
+          dense: {
+            tableLayout: 'fixed',
+            selectors: {
+              '& :is(td, th)': {
+                boxShadow: `inset 0 ${vars.borderWidth.regular} 0 ${vars.color.line.secondary} !custom`,
+                height: 'auto !custom',
+                paddingBlock: '16',
+                paddingInline: '8',
+                textAlign: 'start',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& thead :is(td, th)': {
+                boxShadow: 'none !custom',
+                color: 'content.primary',
+                paddingBlockStart: '0',
+                typography: 'body.b2Strong',
+                fontFamily: 'heading',
+              },
+              '& tbody tr:last-child > :is(td, th)': { paddingBlockEnd: '0' },
+              '& tbody tr:not(:last-child) > :is(td, th)': { borderBlockEnd: 'none !custom' },
+              '& tbody tr:not(:last-child)::after': { display: 'none' },
+              '& tr > :first-child': { paddingInlineStart: '0' },
+              '& tr > :last-child': { paddingInlineEnd: '0' },
+              '& tr > :last-child:not([data-justify])': { textAlign: 'start' },
+            },
+          },
+          simple: {
+            tableLayout: 'fixed',
+            selectors: {
+              '& :is(td, th)': {
+                boxShadow: `inset 0 ${vars.borderWidth.regular} 0 ${vars.color.line.primary} !custom`,
+                height: 'auto !custom',
+                paddingBlock: '16',
+                paddingInline: '8',
+                textAlign: 'start',
+                typography: 'body.b2',
+                verticalAlign: 'top',
+              },
+              '& th': {
+                boxSizing: 'border-box',
+                color: 'content.primary',
+                typography: 'body.b2Strong',
+                width: '40% !custom',
+              },
+              '& tbody tr:not(:last-child) > :is(td, th)': { borderBlockEnd: 'none !custom' },
+              '& tbody tr:not(:last-child)::after': { display: 'none' },
+              '& tr > :first-child': { paddingInlineStart: '0' },
+              '& tr > :last-child': { paddingInlineEnd: '0' },
+              '& tr > :last-child:not([data-justify])': { textAlign: 'start' },
+            },
+          },
+        },
       },
     },
     { id: 'tds/web/table/root' },

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',