@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/AppShell.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { style, variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
 
 type Context = {
   container: HTMLDivElement | null
@@ -42,7 +42,8 @@ function useShell() {
 
 /**
  * Application frame with a sticky sidebar beside a content column. `align="center"` centers both
- * on wide viewports, and `align="start"` pins the sidebar left with content filling the rest.
+ * on wide viewports, with the sidebar fill to the start edge and the header bar to the end edge.
+ * `align="start"` pins the sidebar left with content filling the rest.
  * Below 1024px the sidebar moves into a drawer that `AppShell.Trigger` opens from the right edge.
  *
  * - Name the `Sidebar` with `aria-label`. It labels the `aside` on wide viewports and the drawer
@@ -69,11 +70,23 @@ function useShell() {
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html | WCAG 2.2 Focus Order}
  */
 export namespace AppShell {
-  /** Page header row holding the title, actions and the compact-viewport `Trigger`. */
+  /**
+   * Renders the 56px page header bar at the top of `Main`, in the fill of the sidebar with a bottom
+   * border, holding the title, actions and the compact-viewport `Trigger`. It spans the full width
+   * of `Main`. With `align="center"` on wide viewports, its fill and border continue to the end
+   * edge. A `Main` that scrolls itself clips them at its own edge, so scroll the root instead when
+   * the shell fills a fixed-height region.
+   */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <header {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <header
+        {...attributes}
+        {...styles.header({ className, style: props.style, vars })}
+        data-app-shell-header=""
+      />
+    )
   }
 
   export namespace Header {
@@ -156,7 +169,7 @@ export namespace AppShell {
   }
 
   /**
-   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16.25rem)` wide. Below that it
+   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16rem)` wide. Below that it
    * renders a modal Base UI drawer popup as an `aside` with the dialog role, which takes focus on
    * open, returns it to the trigger on close, and dismisses with Escape, the backdrop or a swipe
    * right. Server rendering always emits the wide layout.
@@ -206,6 +219,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarBody>
   }
 
+  /** The bottom of the sidebar, such as the account menu. It stays at the bottom edge. */
   export function SidebarFooter(props: SidebarFooter.Props) {
     const { className, vars, ...attributes } = props
 
@@ -219,6 +233,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarFooter>
   }
 
+  /** The top of the sidebar, such as the product or project switcher. */
   export function SidebarHeader(props: SidebarHeader.Props) {
     const { className, vars, ...attributes } = props
 
@@ -290,7 +305,7 @@ const fadeOut = keyframes(
 namespace styles {
   export const backdrop = style(
     {
-      backgroundColor: 'black',
+      backgroundColor: 'neutral.100',
       inset: '0',
       opacity: '0.6 !custom',
       position: 'fixed',
@@ -310,6 +325,7 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '2',
       insetInlineStart: '0',
       position: 'absolute',
@@ -341,7 +357,7 @@ namespace styles {
 
   export const drawer = style(
     {
-      borderInlineStartColor: 'grayAlpha.200',
+      borderInlineStartColor: 'line.secondary',
       borderInlineStartStyle: 'solid',
       borderInlineStartWidth: '1px !custom',
       height: '100% !custom',
@@ -373,19 +389,30 @@ namespace styles {
     { id: 'tds/web/app-shell/drawer' },
   )
 
+  // The bar bleeds into the padding of `Main`, so it spans the column and starts at its top edge.
+  // The header takes the fill of the sidebar, so the two frame the page.
   export const header = variants(
     {
       base: {
         alignItems: 'center',
+        backgroundColor: 'background.sidebar',
+        borderBottomColor: 'line.secondary',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px !custom',
+        boxSizing: 'border-box',
         columnGap: '8',
         display: 'flex',
         justifyContent: 'space-between',
         marginBottom: '24',
+        marginInline: '-16',
+        marginTop: '-20',
+        minHeight: '56',
         minWidth: '0',
-        // Below 1024px the fixed trigger covers the top-right corner, so header actions end 8px
-        // before it: its 40px plus 16px inset, less the main column's own side padding.
-        '@media (max-width: 1023px)': { paddingInlineEnd: '48' },
-        '@media (min-width: 640px) and (max-width: 1023px)': { paddingInlineEnd: '32' },
+        paddingInline: '16',
+        '@media (min-width: 640px)': { marginInline: '-2rem !custom', paddingInline: '24' },
+        // Below 1024px the fixed trigger covers the end of the bar, so header actions end 8px
+        // before it: its 40px plus its 16px inset.
+        '@media (max-width: 1023px)': { paddingInlineEnd: '64' },
       },
     },
     { id: 'tds/web/app-shell/header' },
@@ -413,14 +440,16 @@ namespace styles {
     {
       base: {
         backgroundColor: 'background.primary',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'flex',
         minHeight: '100dvh !custom',
         position: 'relative',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
-          // Equal gutters center the sidebar and content column on wide viewports.
+          // Equal gutters center the sidebar and content column on wide viewports. The start
+          // gutter takes the fill of the sidebar, so the sidebar reaches the start edge.
           '&::after, &::before': { content: '"" !custom', flex: '1 !custom' },
+          '&::before': { backgroundColor: 'background.sidebar' },
         },
         '@media (max-width: 1023px)': {
           selectors: { '&::after, &::before': { display: 'none !custom' } },
@@ -429,7 +458,23 @@ namespace styles {
       defaultVariants: { align: 'center' },
       variants: {
         align: {
-          center: {},
+          // The header bar continues across the end gutter as the outset of a border image, which
+          // is ink overflow. It adds no scroll and changes no layout, and a scrolling `Main` clips
+          // it at its own edge. The image draws the fill and the 1px bottom border of the header.
+          // The outset takes the gutter from the viewport width, since the root of an application
+          // frame spans the viewport.
+          center: {
+            '@media (min-width: 1024px)': {
+              selectors: {
+                '& > main > [data-app-shell-header]': {
+                  borderImageOutset: `0 max(0px, calc((100vw - var(--sidebar-width, 16rem) - ${vars.container['1024']}) / 2)) 0 0 !custom`,
+                  borderImageSlice: '0 fill !custom',
+                  borderImageSource: `linear-gradient(${vars.color.background.sidebar} calc(100% - 1px), ${vars.color.line.secondary} 0) !custom`,
+                  borderImageWidth: '0 !custom',
+                },
+              },
+            },
+          },
           start: {
             selectors: {
               '&::after, &::before': { display: 'none !custom' },
@@ -445,15 +490,15 @@ namespace styles {
   export const sidebar = variants(
     {
       base: {
-        backgroundColor: 'background.primary',
+        backgroundColor: 'background.sidebar',
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         flexShrink: '0 !custom',
         minHeight: '0',
-        paddingBottom: '20',
-        paddingInline: '10',
-        rowGap: '24',
+        paddingBottom: '16',
+        paddingInline: '12',
+        rowGap: '16',
       },
     },
     { id: 'tds/web/app-shell/sidebar' },
@@ -463,14 +508,14 @@ namespace styles {
   // server-rendered markup, which always emits the wide layout.
   export const inline = style(
     {
-      borderInlineEndColor: 'grayAlpha.200',
+      borderInlineEndColor: 'line.secondary',
       borderInlineEndStyle: 'solid',
       borderInlineEndWidth: '1px !custom',
       height: '100dvh !custom',
       insetBlockStart: '0',
       overflowY: 'auto',
       position: 'sticky',
-      width: 'var(--sidebar-width, 16.25rem) !custom',
+      width: 'var(--sidebar-width, 16rem) !custom',
       '@media (max-width: 1023px)': { display: 'none !custom' },
     },
     { id: 'tds/web/app-shell/inline' },
@@ -479,20 +524,24 @@ namespace styles {
   export const sidebarBody = variants(
     {
       base: {
+        // Custom string values only take literal CSS, so the thumb color reaches `scrollbarColor` through a property.
+        '--tds-sidebar-scrollbar-thumb': `${vars.color.line.primary}`,
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-10',
+        marginInline: '-12',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '10',
+        paddingInline: '12',
+        // A transparent track leaves only the thin thumb over the sidebar fill.
+        scrollbarColor: 'var(--tds-sidebar-scrollbar-thumb) transparent !custom',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin',
         selectors: {
           // Curtains fade content into the sidebar at whichever end has more to scroll.
           '&::after, &::before': {
-            backgroundColor: 'background.primary',
+            backgroundColor: 'background.sidebar',
             content: '"" !custom',
             display: 'block',
             height: '24',
@@ -530,23 +579,32 @@ namespace styles {
     { id: 'tds/web/app-shell/sidebar-body' },
   )
 
+  // The automatic top margin keeps the footer at the bottom edge when no `SidebarBody` grows.
   export const sidebarFooter = variants(
-    { base: { display: 'flex', flexDirection: 'column', flexShrink: '0 !custom', rowGap: '12' } },
+    {
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexShrink: '0 !custom',
+        marginTop: 'auto !custom',
+        rowGap: '8',
+      },
+    },
     { id: 'tds/web/app-shell/sidebar-footer' },
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '20' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '16' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 
   export const title = variants(
     {
       base: {
-        color: 'foreground',
+        color: 'content.primary',
         margin: '0',
         minWidth: '0',
-        typography: 'heading.24',
+        typography: 'heading.h2',
       },
     },
     { id: 'tds/web/app-shell/title' },
@@ -556,18 +614,19 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'background.surface',
-        borderColor: 'grayAlpha.200',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
         borderRadius: 'full',
         borderStyle: 'solid',
-        borderWidth: '1',
-        boxShadow: 'raised',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         height: '40',
-        insetBlockStart: '16',
+        // Centers the button on the 56px header bar.
+        insetBlockStart: '8',
         insetInlineEnd: '16',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
@@ -584,8 +643,8 @@ namespace styles {
         zIndex: 'modal',
         selectors: {
           '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover': { backgroundColor: 'gray.100' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover': { backgroundColor: 'container.regular' },
           // While open, the button rides out with the drawer and rests 8px outside its left edge,
           // so the close mark never covers the sidebar. The width matches the drawer's.
           '&[data-popup-open]': {

package/src/web/components/AssetChip.tsx

@@ -0,0 +1,110 @@
+import { useRender } from '@base-ui/react/use-render'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+
+/**
+ * A small, gray label for a supported asset or network. It renders a `span`, or a `button` when
+ * it has an `onClick`, which then fills on hover, scales slightly while pressed, shows an outline
+ * on keyboard focus, and fills dark while `selected`. Place a `TokenLogo` before the text to add a 12px token logo.
+ *
+ * - List what a row or value supports, such as the assets a network accepts, under a row title.
+ * - Give it an `onClick` to pick one asset from a short set, and set `selected` on the picked one.
+ * - Use `Badge` for a status and `Token` for a token the person can change.
+ *
+ * @example
+ * <AssetChip>USDT</AssetChip>
+ * <AssetChip onClick={() => setAsset('USDC')} selected={asset === 'USDC'}>
+ *   <TokenLogo symbol="USDC" />
+ *   USDC
+ * </AssetChip>
+ *
+ * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | WAI-ARIA APG Button pattern}
+ */
+export function AssetChip(props: AssetChip.Props) {
+  const { className, ref, render, selected, vars, ...attributes } = props
+  const pressable = attributes.onClick !== undefined
+  const button = pressable && render === undefined
+
+  return useRender({
+    defaultTagName: button ? 'button' : 'span',
+    props: {
+      ...attributes,
+      ...(pressable && { 'aria-pressed': selected }),
+      ...(button && { type: 'button' }),
+      'data-selected': selected || undefined,
+      ...styles.chip({ className, style: props.style, vars }),
+    },
+    ref,
+    render,
+  })
+}
+
+export namespace AssetChip {
+  export type Props = useRender.ComponentProps<'span'> &
+    zyzz.Props.Variants<typeof styles.chip> & {
+      /**
+       * Fills the chip with `content.primary`. A chip with an `onClick` sets `aria-pressed` from
+       * it, so pass it on every chip of a set. Absent, the chip renders no pressed state. A chip
+       * rendered through `render` takes its `type` from that element, such as
+       * `<button type="button" />`.
+       */
+      selected?: boolean | undefined
+    }
+}
+
+namespace styles {
+  // Figma's Asset Chip pads 2px and 4px inside radius `2xs`, below the 1.5x padding ratio.
+  export const chip = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'background.primary',
+      border: 'none !custom',
+      borderRadius: '2xs',
+      boxSizing: 'border-box',
+      color: 'content.secondary',
+      columnGap: '4',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '20',
+      margin: '0',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '0',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      paddingBlock: '2',
+      paddingInline: '4',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, color, outline-color, scale !custom',
+      transitionTimingFunction: 'snappy',
+      typography: 'body.b3Strong',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      selectors: {
+        // A nested `TokenLogo` shrinks to the 12px logo slot.
+        '& > img': { flexShrink: '0 !custom', height: '12', width: '12' },
+        '&:is(button)': { cursor: 'pointer' },
+        // A chip rendered as a disabled `button` dims and takes no hover or press feedback.
+        '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
+        '&:is(button):not(:disabled):active': { scale: 'press', transitionDuration: '100' },
+        // Figma's focused chip widens by 2px on each side and draws its ring inside the edge.
+        '&:is(button):focus-visible': {
+          outlineColor: 'border.focus',
+          outlineOffset: '-2',
+          paddingInline: '6',
+        },
+        '&:is(button):not([data-selected], :disabled):hover': {
+          backgroundColor: 'container.strong',
+        },
+        '&[data-selected]': { backgroundColor: 'content.primary', color: 'background.elevated' },
+        // An inside ring would vanish into the selected fill, so a selected chip draws it outside.
+        '&[data-selected]:focus-visible': { outlineOffset: '2' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'background-color, color, outline-color !custom',
+        selectors: { '&:is(button):not(:disabled):active': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/asset-chip' },
+  )
+}

package/src/web/components/Autocomplete.tsx

@@ -103,16 +103,16 @@ export namespace Autocomplete {
   }
 
   /**
-   * Draws the field surface around `Input` and its actions. `size` sets a 32, 40 or 56px height,
-   * and `invalid` shows the error ring without setting `aria-invalid` on the input.
+   * Draws the 48px field surface around `Input` and its actions. `invalid` fills it red without
+   * setting `aria-invalid` on the input.
    */
   export function InputGroup(props: InputGroup.Props) {
-    const { className, invalid, size, variant, vars, ...attributes } = props
+    const { className, invalid, variant, vars, ...attributes } = props
 
     return (
       <BaseUi.Autocomplete.InputGroup
         {...attributes}
-        {...Field.styles.field({ className, size, style: props.style, variant, vars })}
+        {...Field.styles.field({ className, style: props.style, variant, vars })}
         data-invalid={invalid || undefined}
       />
     )

package/src/web/components/Avatar.tsx

@@ -4,21 +4,26 @@ import type * as zyzz from 'zyzz'
 import { variants } from '../zyzz.config.js'
 
 /**
- * A circular `<span>` that shows a person's or entity's image, with a `Fallback` such as initials
- * while the image loads or after it fails. `Avatar` is the same component as `Avatar.Root`.
+ * A circular `<span>` that represents a person, contact, or wallet with initials or an icon in its
+ * `Fallback`. `Avatar` is the same component as `Avatar.Root`.
  *
- * - Give `Avatar.Image` an `alt` with the name, or `alt=""` when the name is already adjacent.
- * - Always include a `Fallback`, since the image does not render until it has loaded.
- * - Pair the avatar with a visible name. Do not rely on the picture alone to identify someone.
+ * - Use initials for people and contacts, and an icon for wallets and apps.
+ * - Pair the avatar with a visible name. Do not rely on initials or an icon alone to identify
+ *   someone.
  *
  * @example
- * <Avatar size="40">
- *   <Avatar.Image alt="Ada Lovelace" src={url} />
+ * <Avatar size="32">
  *   <Avatar.Fallback>AL</Avatar.Fallback>
  * </Avatar>
  *
+ * @example
+ * <Avatar size="40">
+ *   <Avatar.Fallback>
+ *     <Wallet />
+ *   </Avatar.Fallback>
+ * </Avatar>
+ *
  * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img | MDN img element}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role | MDN img role}
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
  */
@@ -30,8 +35,8 @@ export namespace Avatar {
   export type Props = Root.Props
 
   /**
-   * Renders a `<span>` while the image is not loaded, filling the avatar and uppercasing its text.
-   * `delay` postpones it by that many milliseconds, so fast loads skip the fallback flash.
+   * Renders the `<span>` that fills the avatar with initials or an icon, and uppercases its text.
+   * An icon renders at 16px in a `24` or `32` avatar, and at 20px in a `40` avatar.
    */
   export function Fallback(props: Fallback.Props) {
     const { className, vars, ...attributes } = props
@@ -45,57 +50,13 @@ export namespace Avatar {
   }
 
   export namespace Fallback {
-    export type Props = ComponentPropsWithRef<'span'> &
-      zyzz.Props.Variants<typeof styles.fallback> &
-      Pick<BaseUi.Avatar.Fallback.Props, 'delay'>
-  }
-
-  /**
-   * Stacks avatars. Set `overlap` to pull each one over the previous, and `expandOnHover` to spread
-   * an overlapped stack apart on hover and keyboard focus.
-   */
-  export function Group(props: Group.Props) {
-    const { className, expandOnHover, overlap, vars, ...attributes } = props
-
-    return (
-      <div
-        role="group"
-        {...attributes}
-        {...styles.group({ className, expand: expandOnHover, overlap, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Group {
-    export type Props = ComponentPropsWithRef<'div'> &
-      Omit<zyzz.Props.Variants<typeof styles.group>, 'expand'> & {
-        expandOnHover?: boolean | undefined
-      }
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.fallback>
   }
 
   /**
-   * Renders the `<img>`, cropped to cover the circle. Base UI mounts it only after `src` has
-   * loaded, unless `keepMounted` is set, in which case it stays in the DOM and is `aria-hidden`
-   * until loaded. `onLoadingStatusChange` reports `loading`, `loaded` and `error`.
+   * Renders the circular `<span>`, filled with `container.strong`. `size` sets its diameter in
+   * pixels.
    */
-  export function Image(props: Image.Props) {
-    const { className, vars, ...attributes } = props
-
-    return (
-      <BaseUi.Avatar.Image
-        {...attributes}
-        {...styles.image({ className, style: props.style, vars })}
-      />
-    )
-  }
-
-  export namespace Image {
-    export type Props = ComponentPropsWithRef<'img'> &
-      zyzz.Props.Variants<typeof styles.image> &
-      Pick<BaseUi.Avatar.Image.Props, 'keepMounted' | 'onLoadingStatusChange'>
-  }
-
-  /** Renders the circular `<span>` that clips the image. `size` sets its diameter in pixels. */
   export function Root(props: Root.Props) {
     const { className, size, vars, ...attributes } = props
 
@@ -117,8 +78,7 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
-        color: 'gray.900',
+        color: 'content.secondary',
         display: 'inline-flex',
         font: 'inherit !custom',
         height: '100% !custom',
@@ -130,66 +90,14 @@ namespace styles {
     { id: 'tds/web/avatar/fallback' },
   )
 
-  export const group = variants(
-    {
-      base: { alignItems: 'center', display: 'inline-flex' },
-      compoundVariants: [
-        {
-          when: { expand: true, overlap: true },
-          style: {
-            selectors: {
-              // Margin changes the group's width, which a transform cannot. Transitions retarget from
-              // the current margin, so a brief hover reverses smoothly.
-              '& > * + *': {
-                transitionDuration: '220',
-                transitionProperty: 'margin-inline-start',
-                transitionTimingFunction: 'snappy',
-              },
-              '&:hover > * + *, &:focus-within > * + *': { marginInlineStart: '4' },
-            },
-            '@media (prefers-reduced-motion: reduce)': {
-              selectors: { '& > * + *': { transitionProperty: 'none' } },
-            },
-          },
-        },
-      ],
-      defaultVariants: { expand: false, overlap: false },
-      variants: {
-        expand: { false: {}, true: {} },
-        overlap: {
-          false: { columnGap: '8' },
-          true: {
-            selectors: {
-              '& > * + *': { marginInlineStart: '-8' },
-              '& > *': {
-                outlineColor: 'background.primary',
-                outlineStyle: 'solid !custom',
-                outlineWidth: '2',
-              },
-            },
-          },
-        },
-      },
-    },
-    { id: 'tds/web/avatar/group' },
-  )
-
-  export const image = variants(
-    {
-      base: { display: 'block', height: '100% !custom', objectFit: 'cover', width: '100% !custom' },
-    },
-    { id: 'tds/web/avatar/image' },
-  )
-
   export const root = variants(
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'background.surface',
-        border: '1px solid !custom',
-        borderColor: 'grayAlpha.200',
+        backgroundColor: 'container.strong',
         borderRadius: 'full',
         boxSizing: 'border-box',
+        cornerShape: 'round',
         display: 'inline-flex',
         flexShrink: '0 !custom',
         overflow: 'hidden',
@@ -197,14 +105,29 @@ namespace styles {
         userSelect: 'none',
         verticalAlign: 'middle',
       },
-      defaultVariants: { size: '48' },
+      defaultVariants: { size: '40' },
       variants: {
+        // Icons size by font size, so an `Identicon`, which sets its own width, keeps filling the
+        // circle.
         size: {
-          '24': { height: '24', typography: 'label.12', width: '24' },
-          '32': { height: '32', typography: 'label.12', width: '32' },
-          '40': { height: '40', typography: 'label.14', width: '40' },
-          '48': { height: '48', typography: 'label.16', width: '48' },
-          '64': { height: '64', typography: 'label.20', width: '64' },
+          '24': {
+            height: '24',
+            typography: 'body.b3Strong',
+            width: '24',
+            selectors: { '& svg': { fontSize: '16' } },
+          },
+          '32': {
+            height: '32',
+            typography: 'body.b3Strong',
+            width: '32',
+            selectors: { '& svg': { fontSize: '16' } },
+          },
+          '40': {
+            height: '40',
+            typography: 'body.b2Strong',
+            width: '40',
+            selectors: { '& svg': { fontSize: '20' } },
+          },
         },
       },
     },