@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/SidebarMenu.tsx

@@ -3,16 +3,19 @@ import { useRender } from '@base-ui/react/use-render'
 import {
   type ComponentPropsWithRef,
   createContext,
+  type ReactNode,
   use,
   useId,
   useLayoutEffect,
   useState,
 } from 'react'
 import type * as zyzz from 'zyzz'
+import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
 import { style, variants } from '../zyzz.config.js'
 
-type GroupContext = { id: string; setLabelled: (labelled: boolean) => void }
+// A group names itself after the ID of the label inside it, which a caller can set.
+type GroupContext = { id: string; setLabel: (id: string | undefined) => void }
 
 const groupContext = createContext<GroupContext | undefined>(undefined)
 
@@ -43,6 +46,86 @@ const groupContext = createContext<GroupContext | undefined>(undefined)
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
  */
 export namespace SidebarMenu {
+  /**
+   * Holds the `AccountRow` at the bottom of a sidebar, under a 1px divider across its full width.
+   * Put it last in `AppShell.SidebarFooter`, after the menu of support links, such as Help.
+   *
+   * @example
+   * <SidebarMenu.Account>
+   *   <Menu.Root>
+   *     <Menu.Trigger render={<SidebarMenu.AccountRow description="ada@tempo.xyz" label="Ada" />}>
+   *       <Avatar size="32">
+   *         <Avatar.Fallback>AL</Avatar.Fallback>
+   *       </Avatar>
+   *     </Menu.Trigger>
+   *   </Menu.Root>
+   * </SidebarMenu.Account>
+   */
+  export function Account(props: Account.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.account({ className, style: props.style, vars })} />
+  }
+
+  export namespace Account {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.account>
+  }
+
+  /**
+   * Renders the 44px account `<button>` at the bottom of a sidebar: `children`, such as a 32px
+   * `Avatar`, then `label` over `description`. A row that opens a popup, through `aria-haspopup`,
+   * ends in a chevron. The children are hidden from assistive technology, so `label` names the
+   * account. Pass the row to `Menu.Trigger` through `render` to open the account menu, which sets
+   * `aria-haspopup` and fills the row while it is open. Keyboard focus draws a 2px ring inside the
+   * row and moves its content 2px inward.
+   *
+   * @example
+   * <Menu.Root>
+   *   <Menu.Trigger render={<SidebarMenu.AccountRow description="ada@tempo.xyz" label="Ada" />}>
+   *     <Avatar size="32">
+   *       <Avatar.Fallback>AL</Avatar.Fallback>
+   *     </Avatar>
+   *   </Menu.Trigger>
+   * </Menu.Root>
+   */
+  export function AccountRow(props: AccountRow.Props) {
+    const { children, className, description, label, vars, ...attributes } = props
+    const popup = Boolean(attributes['aria-haspopup']) && attributes['aria-haspopup'] !== 'false'
+
+    return (
+      <button
+        type="button"
+        {...attributes}
+        {...styles.accountRow({ className, style: props.style, vars })}
+      >
+        {children !== undefined && children !== null && (
+          <span aria-hidden="true" {...styles.accountMedia()}>
+            {children}
+          </span>
+        )}
+        <span {...styles.accountText()}>
+          <span {...styles.accountLabel()}>{label}</span>
+          {description !== undefined && description !== null && (
+            <span {...styles.accountDescription()}>{description}</span>
+          )}
+        </span>
+        {popup && <ChevronDown {...styles.accountChevron()} />}
+      </button>
+    )
+  }
+
+  export namespace AccountRow {
+    export type Props = Omit<ComponentPropsWithRef<'button'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.accountRow> & {
+        /** Leading media, such as a 32px `Avatar`. Absent, the text starts at the row's edge. */
+        children?: ReactNode | undefined
+        /** Second line in the secondary color, such as the email or address of the account. */
+        description?: ReactNode | undefined
+        /** First line, which names the account, such as the person's name. */
+        label: ReactNode
+      }
+  }
+
   /**
    * Renders a `group` that names itself after its `GroupLabel` when one renders inside it.
    * Without a label, pass `aria-label`.
@@ -50,12 +133,12 @@ export namespace SidebarMenu {
   export function Group(props: Group.Props) {
     const { className, vars, ...attributes } = props
     const id = useId()
-    const [labelled, setLabelled] = useState(false)
+    const [label, setLabel] = useState<string | undefined>(undefined)
 
     return (
-      <groupContext.Provider value={{ id, setLabelled }}>
+      <groupContext.Provider value={{ id, setLabel }}>
         <div
-          aria-labelledby={labelled ? id : undefined}
+          aria-labelledby={label}
           role="group"
           {...attributes}
           {...styles.group({ className, style: props.style, vars })}
@@ -70,20 +153,20 @@ export namespace SidebarMenu {
 
   /** Visible heading text for the surrounding `Group`, which it names through `aria-labelledby`. */
   export function GroupLabel(props: GroupLabel.Props) {
-    const { className, vars, ...attributes } = props
     const group = use(groupContext)
-    const setLabelled = group?.setLabelled
+    const { className, id = group?.id, vars, ...attributes } = props
+    const setLabel = group?.setLabel
 
     useLayoutEffect(() => {
-      if (!setLabelled) return
-      setLabelled(true)
-      return () => setLabelled(false)
-    }, [setLabelled])
+      if (!setLabel) return
+      setLabel(id)
+      return () => setLabel(undefined)
+    }, [id, setLabel])
 
     return (
       <div
-        id={group?.id}
         {...attributes}
+        id={id}
         {...styles.groupLabel({ className, style: props.style, vars })}
       />
     )
@@ -95,7 +178,8 @@ export namespace SidebarMenu {
 
   /**
    * Renders a link by default. Pass `render` to use a router link. `active` marks the current page
-   * with `aria-current="page"`.
+   * with `aria-current="page"`, and sets its label in the strong weight. Keyboard focus draws a
+   * 2px ring inside the row and moves its content 2px inward.
    */
   export function Item(props: Item.Props) {
     const { active = false, className, ref, render, vars, ...attributes } = props
@@ -119,9 +203,31 @@ export namespace SidebarMenu {
       }
   }
 
+  /**
+   * Renders a 36px tile in the primary content color, which centers a logo in the inverse content
+   * color, such as `TempoLogo` with `type="mark"`. Pass it to an `AccountRow` that names a
+   * product or a wallet, in place of an `Avatar`.
+   *
+   * @example
+   * <SidebarMenu.AccountRow description="0xc721…s9dk" label="Tempo Wallet">
+   *   <SidebarMenu.Logo>
+   *     <TempoLogo type="mark" />
+   *   </SidebarMenu.Logo>
+   * </SidebarMenu.AccountRow>
+   */
+  export function Logo(props: Logo.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.logo({ className, style: props.style, vars })} />
+  }
+
+  export namespace Logo {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.logo>
+  }
+
   /**
    * Renders the `<nav>` landmark, labelled `Main` unless you pass `aria-label`. Give each
-   * landmark on a page a distinct label. `size` sets 32, 40 or 56px rows, and `small` also uses
+   * landmark on a page a distinct label. `size` sets 32, 36 or 56px rows, and `small` also uses
    * 16px icons for long menus.
    */
   export function Root(props: Root.Props) {
@@ -200,9 +306,120 @@ export namespace SidebarMenu {
 }
 
 namespace styles {
+  // The 1px divider takes 1px of the 8px above the row, as the design's inside stroke does.
+  export const account = variants(
+    {
+      base: {
+        borderTopColor: 'line.secondary',
+        borderTopStyle: 'solid',
+        borderTopWidth: '1px !custom',
+        paddingTop: 'calc(0.5rem - 1px) !custom',
+      },
+    },
+    { id: 'tds/web/sidebar-menu/account' },
+  )
+
+  export const accountChevron = style(
+    {
+      color: 'content.secondary',
+      flexShrink: '0 !custom',
+      fontSize: '16',
+      transitionDuration: '160',
+      transitionProperty: 'color',
+      transitionTimingFunction: 'snappy',
+      selectors: {
+        ':hover > &, [data-popup-open] > &': { color: 'content.primary' },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/account-chevron' },
+  )
+
+  export const accountDescription = style(
+    {
+      color: 'content.secondary',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      typography: 'body.b3',
+      whiteSpace: 'nowrap',
+    },
+    { id: 'tds/web/sidebar-menu/account-description' },
+  )
+
+  export const accountLabel = style(
+    {
+      color: 'content.primary',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      typography: 'body.b2Strong',
+      whiteSpace: 'nowrap',
+    },
+    { id: 'tds/web/sidebar-menu/account-label' },
+  )
+
+  export const accountMedia = style(
+    { display: 'flex', flexShrink: '0 !custom' },
+    { id: 'tds/web/sidebar-menu/account-media' },
+  )
+
+  // A 32px avatar and the two lines of text center in the 44px row with 8px at either end.
+  export const accountRow = variants(
+    {
+      base: {
+        alignItems: 'center',
+        appearance: 'none !custom',
+        backgroundColor: 'transparent !custom',
+        border: 'none !custom',
+        borderRadius: '2xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        columnGap: '12',
+        cursor: 'pointer',
+        display: 'flex',
+        font: 'inherit !custom',
+        minHeight: '44',
+        minWidth: '0',
+        outlineColor: 'transparent !custom',
+        outlineOffset: '0',
+        outlineStyle: 'solid !custom',
+        outlineWidth: '2',
+        paddingBlock: '4',
+        paddingInline: '8',
+        textAlign: 'start',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, outline-color, outline-offset, scale !custom',
+        transitionTimingFunction: 'snappy',
+        width: '100% !custom',
+        selectors: {
+          '&:active:not(:disabled, [data-disabled])': { scale: 'press' },
+          // The design lays out the 2px focus stroke inside the row, so the content moves 2px in.
+          '&:focus-visible': {
+            outlineColor: 'border.focus',
+            outlineOffset: '-2',
+            paddingInline: '10',
+          },
+          // Base UI triggers mark the row `data-popup-open` while their menu or popover is open.
+          '&:hover:not(:disabled, [data-disabled]), &[data-popup-open]': {
+            backgroundColor: 'container.regular',
+          },
+          '&:is(:disabled, [data-disabled])': { cursor: 'default', opacity: 'disabled' },
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+          transitionProperty: 'background-color, outline-color !custom',
+          selectors: { '&:active:not(:disabled, [data-disabled])': { scale: 'none !custom' } },
+        },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/account-row' },
+  )
+
+  export const accountText = style(
+    { display: 'flex', flex: '1 !custom', flexDirection: 'column', minWidth: '0' },
+    { id: 'tds/web/sidebar-menu/account-text' },
+  )
+
   export const chevron = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       marginInlineStart: 'auto !custom',
       transitionDuration: '240',
       transitionProperty: 'transform',
@@ -218,18 +435,13 @@ namespace styles {
       base: {
         display: 'flex',
         flexDirection: 'column',
-        rowGap: '4',
+        rowGap: '2',
         selectors: {
-          // Groups sit 24px below preceding content, and a divider separates adjacent groups.
-          '* + &': { marginTop: '20' },
-          '[data-sidebar-menu-size="small"] &': { rowGap: '2' },
-          '[data-sidebar-menu-size="small"] * + &': { marginTop: '12' },
-          '& + &': {
-            borderTopColor: 'grayAlpha.200',
-            borderTopStyle: 'solid',
-            borderTopWidth: '1px !custom',
-            paddingTop: '16',
-          },
+          // With the row gap of the menu, groups sit 24px below preceding content, or 16px in a
+          // small menu.
+          '* + &': { marginTop: '1.375rem !custom' },
+          '[data-sidebar-menu-size="large"] * + &': { marginTop: '20' },
+          '[data-sidebar-menu-size="small"] * + &': { marginTop: '0.875rem !custom' },
         },
       },
     },
@@ -238,12 +450,13 @@ namespace styles {
 
   export const groupLabel = variants(
     {
+      // The label lines up with the icons of the items below it.
       base: {
-        color: 'foreground',
-        paddingBlock: '4',
-        paddingInline: '12',
-        selectors: { '[data-sidebar-menu-size="small"] &': { paddingInline: '8' } },
-        typography: 'label.12',
+        color: 'content.tertiary',
+        paddingBottom: '4',
+        paddingInline: '8',
+        selectors: { '[data-sidebar-menu-size="large"] &': { paddingInline: '12' } },
+        typography: 'body.b3',
       },
     },
     { id: 'tds/web/sidebar-menu/group-label' },
@@ -256,45 +469,55 @@ namespace styles {
         appearance: 'none !custom',
         backgroundColor: 'transparent !custom',
         border: 'none !custom',
-        borderRadius: '12',
+        borderRadius: '2xs',
         boxSizing: 'border-box',
-        color: 'gray.900',
+        color: 'content.secondary',
         columnGap: '12',
         cursor: 'pointer',
         display: 'flex',
         font: 'inherit !custom',
-        minHeight: '40',
+        minHeight: '36',
         minWidth: '0',
         outlineColor: 'transparent !custom',
         outlineOffset: '0',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
         paddingBlock: '8',
-        paddingInline: '12',
+        paddingInline: '8',
         textAlign: 'start',
         textDecoration: 'none !custom',
         transitionDuration: '160',
         transitionProperty: 'background-color, color, outline-color, outline-offset, scale !custom',
         transitionTimingFunction: 'snappy',
-        typography: 'label.14.strong',
+        typography: 'body.b2',
         width: '100% !custom',
         whiteSpace: 'nowrap',
         selectors: {
           '& > svg': { flexShrink: '0 !custom', fontSize: '20' },
-          '[data-sidebar-menu-size="large"] &': { minHeight: '56', typography: 'label.16.strong' },
+          '[data-sidebar-menu-size="large"] &': {
+            borderRadius: 'xs',
+            minHeight: '56',
+            paddingInline: '12',
+            typography: 'body.b1',
+          },
           // Small rows fit long menus: 32px tall with 16px icons.
           '[data-sidebar-menu-size="small"] &': {
-            borderRadius: '8',
             columnGap: '8',
             minHeight: '32',
             paddingBlock: '4',
-            paddingInline: '8',
-            typography: 'label.14.strong',
           },
           '[data-sidebar-menu-size="small"] & > svg': { fontSize: '16' },
           '&:active': { scale: 'press' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '-2' },
-          '&:hover': { backgroundColor: 'grayAlpha.100', color: 'foreground' },
+          // The design lays out the 2px focus stroke inside the row, so the content moves 2px in.
+          '&:focus-visible': {
+            outlineColor: 'border.focus',
+            outlineOffset: '-2',
+            paddingInline: '10',
+          },
+          '[data-sidebar-menu-size="large"] &:focus-visible': {
+            paddingInline: '0.875rem !custom',
+          },
+          '&:hover': { backgroundColor: 'container.regular', color: 'content.primary' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color !custom',
@@ -305,18 +528,41 @@ namespace styles {
       variants: {
         active: {
           false: {},
-          true: { backgroundColor: 'grayAlpha.100', color: 'foreground' },
+          true: {
+            backgroundColor: 'container.regular',
+            color: 'content.primary',
+            typography: 'body.b2Strong',
+            selectors: { '[data-sidebar-menu-size="large"] &': { typography: 'body.b1Strong' } },
+          },
         },
       },
     },
     { id: 'tds/web/sidebar-menu/item' },
   )
 
+  export const logo = variants(
+    {
+      base: {
+        alignItems: 'center',
+        backgroundColor: 'content.primary',
+        borderRadius: '2xs',
+        color: 'inverse.content.primary',
+        display: 'flex',
+        flexShrink: '0 !custom',
+        fontSize: '20',
+        height: '36',
+        justifyContent: 'center',
+        width: '36',
+      },
+    },
+    { id: 'tds/web/sidebar-menu/logo' },
+  )
+
   export const root = variants(
     {
-      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '4' },
+      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '2' },
       defaultVariants: { size: 'medium' },
-      variants: { size: { large: {}, medium: {}, small: { rowGap: '2' } } },
+      variants: { size: { large: { rowGap: '4' }, medium: {}, small: {} } },
     },
     { id: 'tds/web/sidebar-menu' },
   )
@@ -327,14 +573,11 @@ namespace styles {
       flexDirection: 'column',
       // Nested labels line up with the trigger's label: icon width plus the icon gap.
       paddingInlineStart: '32',
-      paddingTop: '4',
-      rowGap: '4',
+      paddingTop: '2',
+      rowGap: '2',
       selectors: {
-        '[data-sidebar-menu-size="small"] &': {
-          paddingInlineStart: '24',
-          paddingTop: '2',
-          rowGap: '2',
-        },
+        '[data-sidebar-menu-size="large"] &': { paddingTop: '4', rowGap: '4' },
+        '[data-sidebar-menu-size="small"] &': { paddingInlineStart: '24' },
       },
     },
     { id: 'tds/web/sidebar-menu/submenu-content' },

package/src/web/components/Skeleton.tsx

@@ -51,15 +51,15 @@ namespace styles {
       defaultVariants: { shape: 'default', show: true },
       variants: {
         shape: {
-          circle: { borderRadius: 'full' },
-          default: { borderRadius: '8' },
-          pill: { borderRadius: 'full' },
+          circle: { borderRadius: 'full', cornerShape: 'round' },
+          default: { borderRadius: '2xs' },
+          pill: { borderRadius: 'full', cornerShape: 'round' },
         },
         show: {
           false: {},
           true: {
-            backgroundColor: 'grayAlpha.100',
-            color: 'foreground',
+            backgroundColor: 'container.regular',
+            color: 'content.primary',
             overflow: 'hidden',
             pointerEvents: 'none',
             userSelect: 'none',

package/src/web/components/Slider.tsx

@@ -185,7 +185,7 @@ namespace styles {
   )
 
   export const indicator = style(
-    { backgroundColor: 'foreground', borderRadius: 'full' },
+    { backgroundColor: 'content.primary', borderRadius: 'full', cornerShape: 'round' },
     { id: 'tds/web/slider/indicator' },
   )
 
@@ -200,10 +200,11 @@ namespace styles {
 
   export const thumb = style(
     {
-      backgroundColor: 'white',
+      backgroundColor: 'neutral.000',
       borderRadius: 'full',
-      boxShadow: 'thumb',
+      boxShadow: 'small',
       boxSizing: 'border-box',
+      cornerShape: 'round',
       height: '24',
       outlineColor: 'transparent !custom',
       outlineOffset: '0',
@@ -214,7 +215,7 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       width: '24',
       selectors: {
-        '&:has(:focus-visible)': { outlineColor: 'blue.700', outlineOffset: '2' },
+        '&:has(:focus-visible)': { outlineColor: 'border.focus', outlineOffset: '2' },
         '&[data-dragging]': { transform: 'scale(1.08) !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
@@ -227,9 +228,10 @@ namespace styles {
 
   export const track = style(
     {
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       borderRadius: 'full',
       boxSizing: 'border-box',
+      cornerShape: 'round',
       height: '4',
       position: 'relative',
       userSelect: 'none',
@@ -239,7 +241,11 @@ namespace styles {
   )
 
   export const value = style(
-    { color: 'gray.900', fontVariantNumeric: 'tabular-nums !custom', typography: 'copy.14' },
+    {
+      color: 'content.secondary',
+      fontVariantNumeric: 'tabular-nums !custom',
+      typography: 'body.b2',
+    },
     { id: 'tds/web/slider/value' },
   )
 }