@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/Toast.tsx

@@ -150,17 +150,18 @@ namespace styles {
   export const action = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.100',
+      backgroundColor: 'container.regular',
       border: 'none !custom',
       borderRadius: 'full',
-      color: 'foreground',
+      color: 'content.primary',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '32',
       paddingInline: '12',
       // Weight overrides the typography token, so it stays after it.
-      typography: 'button.12',
+      typography: 'body.b3Strong',
       outlineColor: 'transparent !custom',
       outlineOffset: '0',
       outlineStyle: 'solid !custom',
@@ -170,11 +171,11 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       selectors: {
         '&:active': {
-          backgroundColor: 'grayAlpha.300',
+          backgroundColor: 'line.primary',
           scale: 'press',
         },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-        '&:hover': { backgroundColor: 'grayAlpha.200' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+        '&:hover': { backgroundColor: 'container.strong' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
@@ -201,7 +202,8 @@ namespace styles {
       backgroundColor: 'transparent !custom',
       border: 'none !custom',
       borderRadius: 'full',
-      color: 'gray.700',
+      color: 'content.tertiary',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
@@ -219,8 +221,8 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       selectors: {
         '&:active': { scale: 'press' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-        '&:hover': { backgroundColor: 'grayAlpha.100' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+        '&:hover': { backgroundColor: 'container.regular' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'background-color, outline-color',
@@ -252,7 +254,7 @@ namespace styles {
   )
 
   export const description = style(
-    { color: 'gray.900', margin: '0', typography: 'copy.14' },
+    { color: 'content.secondary', margin: '0', typography: 'body.b2' },
     { id: 'tds/web/toast/description' },
   )
 
@@ -261,11 +263,11 @@ namespace styles {
       base: { display: 'inline-flex', flexShrink: '0 !custom', fontSize: '20' },
       variants: {
         intent: {
-          info: { color: 'blue.700' },
-          negative: { color: 'red.800' },
+          info: { color: 'accent.blue.background' },
+          negative: { color: 'content.negative' },
           neutral: {},
-          positive: { color: 'green.700' },
-          warning: { color: 'amber.700' },
+          positive: { color: 'content.positive' },
+          warning: { color: 'content.warning' },
         },
       },
     },
@@ -274,11 +276,11 @@ namespace styles {
 
   export const root = style(
     {
-      backgroundColor: 'background.surface',
-      borderRadius: '16',
-      boxShadow: 'popover',
+      backgroundColor: 'background.elevated',
+      borderRadius: 'sm',
+      boxShadow: 'regular',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       height: 'var(--toast-frontmost-height, var(--toast-height)) !custom',
       insetInline: '0',
       insetBlockEnd: '0',
@@ -295,7 +297,7 @@ namespace styles {
       selectors: {
         '&::after': {
           content: '"" !custom',
-          height: '14',
+          height: '16',
           insetBlockStart: '100% !custom',
           insetInline: '0',
           position: 'absolute',
@@ -332,7 +334,7 @@ namespace styles {
   )
 
   export const title = style(
-    { color: 'foreground', margin: '0', typography: 'copy.14.strong' },
+    { color: 'content.primary', margin: '0', typography: 'body.b2Strong' },
     { id: 'tds/web/toast/title' },
   )
 
@@ -341,13 +343,13 @@ namespace styles {
       insetBlockEnd: '16',
       insetInline: '16',
       margin: 'auto !custom',
-      maxWidth: '384',
+      maxWidth: '360',
       position: 'fixed',
       zIndex: 'toast',
       '@media (min-width: 40rem)': {
         insetInlineStart: 'auto !custom',
         margin: '0',
-        width: '384',
+        width: '360',
       },
     },
     { id: 'tds/web/toast/viewport' },

package/src/web/components/Token.tsx

@@ -1,197 +1,131 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react'
-import { createContext, use, useEffect, useState } from 'react'
+import * as BaseUi from '@base-ui/react/button'
+import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { variants } from '../zyzz.config.js'
-
-const blank = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
-const defaultChainId = 4217
-const service = 'https://tokenlist.tempo.xyz'
-
-const TokenContext = createContext<{
-  /** In-flight symbol lookups, shared by the tokens under one `Token.Provider`. */
-  addresses?: Map<string, Promise<string | undefined>> | undefined
-  chainId: number
-  resolveAddress: Token.ResolveAddress
-  resolveSrc: Token.ResolveSrc
-}>({ chainId: defaultChainId, resolveAddress: asset, resolveSrc: url })
-
-async function asset(options: Token.ResolveAddress.Options) {
-  const response = await fetch(`${service}/asset/${options.chainId}/${options.symbol}`)
-  if (!response.ok) return undefined
-  return ((await response.json()) as { address?: string | undefined }).address
-}
-
-function url(options: Token.ResolveSrc.Options) {
-  return `${service}/icon/${options.chainId}/${options.address.toLowerCase()}`
-}
+import { ChevronDown } from '../icons/ChevronDown.js'
+import { style } from '../zyzz.config.js'
+import { TokenLogo } from './TokenLogo.js'
 
 /**
- * A token icon rendered as an `img`, found by contract `address` or by `symbol`. A symbol resolves
- * to its address first, through the Tempo token list service unless `Token.Provider` overrides
- * it. Pass `src` to skip resolution. A gray circle shows while loading and after a failure.
+ * A pill with a token's logo and symbol. By default it renders a native `<button>`, built on Base
+ * UI Button, with a chevron that marks it as the trigger of a token picker. Set `readOnly` to
+ * render a `<span>` without the chevron, for reviews and receipts.
  *
- * - `alt` is empty unless set, which suits an icon beside the token name. Pass the name as `alt`
- *   when the icon stands alone.
- * - Wrap lists in `Token.Provider` so tokens with the same symbol share one lookup.
- * - Prefer `address` when you have it, since a symbol lookup adds a request before the image.
+ * - The symbol is the visible label and the button's accessible name. The logo is decorative.
+ * - Pass the pill to a trigger's `render`, such as
+ *   `<Dialog.Trigger render={<Token symbol="pathUSD" />} />`.
+ * - Pass `address` when you have it, so the logo loads without a symbol lookup.
+ * - The logo resolves through the nearest `TokenLogo.Provider`.
  *
  * @example
- * <Token symbol="pathUSD" />
- * <Token address={address} alt="pathUSD" size="large" />
+ * <Token address={address} onClick={openPicker} symbol="pathUSD" />
+ * <Token readOnly symbol="USDC" />
  *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img | MDN img element}
- * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ * @see {@link https://base-ui.com/react/components/button | Base UI Button}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | WAI-ARIA APG Button pattern}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
  */
 export function Token(props: Token.Props) {
-  const { address, chainId, className, ref, size, src, symbol, vars, ...attributes } = props
-  const inherited = use(TokenContext)
-  const chain = chainId ?? inherited.chainId
-  const key = symbol && !src && !address ? `${chain}/${symbol.toLowerCase()}` : undefined
-  const [lookup, setLookup] = useState<{ address: string | undefined; key: string }>()
-  const resolved = address ?? (lookup?.key === key ? lookup?.address : undefined)
-  const source =
-    src ?? (resolved ? inherited.resolveSrc({ address: resolved, chainId: chain, symbol }) : '')
-  const [loaded, setLoaded] = useState<{ status: 'error' | 'loaded'; url: string } | undefined>()
-  const status = (() => {
-    if (source) return loaded?.url === source ? loaded.status : 'loading'
-    return key && lookup?.key !== key ? 'loading' : 'error'
-  })()
-
-  useEffect(() => {
-    if (!key || !symbol) return
-
-    let active = true
-    const pending =
-      inherited.addresses?.get(key) ??
-      inherited.resolveAddress({ chainId: chain, symbol }).catch(() => undefined)
-    inherited.addresses?.set(key, pending)
-
-    pending.then((next) => active && setLookup({ address: next, key }))
+  const { address, chainId, className, readOnly, src, symbol, vars, ...attributes } = props
+  const logo = address ? (
+    <TokenLogo address={address} chainId={chainId} size="medium" src={src} />
+  ) : (
+    <TokenLogo chainId={chainId} size="medium" src={src} symbol={symbol} />
+  )
 
-    return () => {
-      active = false
-    }
-  }, [chain, inherited, key, symbol])
+  if (readOnly)
+    return (
+      <span {...attributes} {...styles.token({ className, style: props.style, vars })}>
+        {logo}
+        {symbol}
+      </span>
+    )
 
   return (
-    <img
-      alt=""
-      draggable={false}
-      {...attributes}
-      {...styles.token({ className, size, style: props.style, vars })}
-      data-status={status}
-      onError={(event) => {
-        props.onError?.(event)
-        if (source) setLoaded({ status: 'error', url: source })
-      }}
-      onLoad={(event) => {
-        if (status === 'error' || !source) return
-
-        props.onLoad?.(event)
-        setLoaded({ status: 'loaded', url: source })
-      }}
-      ref={(node) => {
-        if (typeof ref === 'function') ref(node)
-        else if (ref) ref.current = node
-
-        // A cached image can finish before hydration attaches the load handlers.
-        if (source && node?.complete && loaded?.url !== source)
-          setLoaded({ status: node.naturalWidth > 0 ? 'loaded' : 'error', url: source })
-      }}
-      // A blank image hides the browser's broken-image glyph while loading a symbol or after a failure.
-      src={status === 'error' || !source ? blank : source}
-    />
+    <BaseUi.Button {...attributes} {...styles.token({ className, style: props.style, vars })}>
+      {logo}
+      {symbol}
+      <ChevronDown />
+    </BaseUi.Button>
   )
 }
 
 export namespace Token {
-  export type Props = Omit<ComponentPropsWithRef<'img'>, 'height' | 'width'> &
-    zyzz.Props.Variants<typeof styles.token> & {
-      /**
-       * Chain to resolve on. Falls back to the nearest `Token.Provider`, then Tempo mainnet.
-       * @default 4217
-       */
-      chainId?: number | undefined
-    } & (
-      | {
-          /** Token contract address. */
-          address: string
-          symbol?: undefined
-        }
-      | {
-          address?: undefined
-          /** Token symbol, such as `pathUSD`. Matched case-insensitively. */
-          symbol: string
-        }
-    )
-
-  /** Finds the contract address for a symbol. Defaults to the Tempo token list service. */
-  export type ResolveAddress = (options: ResolveAddress.Options) => Promise<string | undefined>
-
-  export namespace ResolveAddress {
-    export type Options = { chainId: number; symbol: string }
-  }
-
-  /** Builds the icon URL for a token. Defaults to the Tempo token list service. */
-  export type ResolveSrc = (options: ResolveSrc.Options) => string
-
-  export namespace ResolveSrc {
-    export type Options = { address: string; chainId: number; symbol?: string | undefined }
-  }
-
-  /**
-   * Sets the default `chainId` and icon sources for nested tokens. Tokens under one provider share
-   * a single lookup per symbol.
-   */
-  export function Provider(props: Provider.Props) {
-    const [addresses] = useState(() => new Map<string, Promise<string | undefined>>())
-
-    return (
-      <TokenContext
-        value={{
-          addresses,
-          chainId: props.chainId ?? defaultChainId,
-          resolveAddress: props.resolveAddress ?? asset,
-          resolveSrc: props.resolveSrc ?? url,
-        }}
-      >
-        {props.children}
-      </TokenContext>
+  export type Props = zyzz.Props.Variants<typeof styles.token> & {
+    /** Token contract address, which loads the logo directly. Without it, `symbol` resolves the logo. */
+    address?: string | undefined
+    /**
+     * Chain to resolve the logo on. Falls back to the nearest `TokenLogo.Provider`, then Tempo mainnet.
+     * @default 4217
+     */
+    chainId?: number | undefined
+    /** Logo URL, which skips resolution. */
+    src?: string | undefined
+    /** Token symbol, such as `pathUSD`, shown as the label. */
+    symbol: string
+  } & (
+      | (Omit<ComponentPropsWithRef<'button'>, 'children'> & {
+          /**
+           * Renders a read-only `span` without the chevron, for reviews and receipts.
+           * @default false
+           */
+          readOnly?: false | undefined
+        })
+      | (Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+          /** Renders a read-only `span` without the chevron, for reviews and receipts. */
+          readOnly: true
+        })
     )
-  }
-
-  export namespace Provider {
-    export type Props = {
-      /**
-       * Chain for nested tokens without their own `chainId`.
-       * @default 4217
-       */
-      chainId?: number | undefined
-      children?: ReactNode | undefined
-      resolveAddress?: ResolveAddress | undefined
-      resolveSrc?: ResolveSrc | undefined
-    }
-  }
 }
 
 namespace styles {
-  export const token = variants(
+  // Figma's Token pill: 36px tall, 8px leading and 12px trailing padding around a 20px logo.
+  export const token = style(
     {
-      base: {
-        backgroundColor: 'grayAlpha.200',
-        borderRadius: 'full',
-        display: 'inline-block',
-        flexShrink: '0 !custom',
-        objectFit: 'cover',
-        verticalAlign: 'middle',
-        selectors: { '&[data-status="loaded"]': { backgroundColor: 'transparent !custom' } },
+      alignItems: 'center',
+      backgroundColor: 'background.elevated',
+      borderColor: 'line.primary',
+      borderRadius: 'full',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      columnGap: '8',
+      cornerShape: 'round',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      height: '36',
+      paddingBlock: '0',
+      paddingInlineEnd: '12',
+      paddingInlineStart: '8',
+      typography: 'body.b2Strong',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      selectors: {
+        '& > svg': { color: 'content.tertiary', flexShrink: '0 !custom', fontSize: '16' },
+        '&:is(button)': {
+          cursor: 'pointer',
+          outlineColor: 'transparent !custom',
+          outlineOffset: '2',
+          outlineStyle: 'solid !custom',
+          outlineWidth: '2',
+          transitionDuration: '160',
+          transitionProperty: 'opacity, outline-color, scale',
+          transitionTimingFunction: 'snappy',
+          userSelect: 'none',
+        },
+        '&:is(button):active:not(:disabled)': { scale: 'press', transitionDuration: '100' },
+        '&:is(button):disabled': { cursor: 'default', opacity: 'disabled' },
+        '&:is(button):focus-visible': { outlineColor: 'border.focus' },
+        '&:is(button):hover:not(:disabled)': { opacity: 'hover' },
+      },
+      '@media (forced-colors: active)': {
+        outlineStyle: 'none !custom',
+        selectors: { '&:is(button):focus-visible': { outlineStyle: 'solid !custom' } },
       },
-      defaultVariants: { size: 'medium' },
-      variants: {
-        size: {
-          large: { height: '32', width: '32' },
-          medium: { height: '24', width: '24' },
-          small: { height: '16', width: '16' },
+      '@media (prefers-reduced-motion: reduce)': {
+        selectors: {
+          '&:is(button)': { transitionProperty: 'opacity, outline-color' },
+          '&:is(button):active:not(:disabled)': { scale: 'none !custom' },
         },
       },
     },

package/src/web/components/TokenLogo.tsx

@@ -0,0 +1,217 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react'
+import { createContext, use, useEffect, useState } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+const blank = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+const defaultChainId = 4217
+const service = 'https://tokenlist.tempo.xyz'
+
+const TokenContext = createContext<{
+  /** In-flight symbol lookups, shared by the tokens under one `TokenLogo.Provider`. */
+  addresses?: Map<string, Promise<string | undefined>> | undefined
+  chainId: number
+  resolveAddress: TokenLogo.ResolveAddress
+  resolveSrc: TokenLogo.ResolveSrc
+}>({ chainId: defaultChainId, resolveAddress: asset, resolveSrc: url })
+
+async function asset(options: TokenLogo.ResolveAddress.Options) {
+  const response = await fetch(`${service}/asset/${options.chainId}/${options.symbol}`)
+  if (!response.ok) return undefined
+  return ((await response.json()) as { address?: string | undefined }).address
+}
+
+function url(options: TokenLogo.ResolveSrc.Options) {
+  return `${service}/icon/${options.chainId}/${options.address.toLowerCase()}`
+}
+
+/**
+ * A token icon rendered as an `img`, found by contract `address` or by `symbol`. A symbol resolves
+ * to its address first, through the Tempo token list service unless `TokenLogo.Provider` overrides
+ * it. Pass `src` to skip resolution. A gray circle shows while loading and after a failure.
+ *
+ * - `alt` is empty unless set, which suits an icon beside the token name. Pass the name as `alt`
+ *   when the icon stands alone.
+ * - Wrap lists in `TokenLogo.Provider` so tokens with the same symbol share one lookup.
+ * - Prefer `address` when you have it, since a symbol lookup adds a request before the image.
+ * - Use `small` (16px) inline beside an amount, `medium` (20px) in a `Token` pill, and `large`
+ *   (32px) in list rows. Use `Token` for a token label or picker trigger.
+ *
+ * @example
+ * <TokenLogo symbol="pathUSD" />
+ * <TokenLogo address={address} alt="pathUSD" size="large" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img | MDN img element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function TokenLogo(props: TokenLogo.Props) {
+  const { address, chainId, className, ref, size, src, symbol, vars, ...attributes } = props
+  const inherited = use(TokenContext)
+  const chain = chainId ?? inherited.chainId
+  const key = symbol && !src && !address ? `${chain}/${symbol.toLowerCase()}` : undefined
+  const [lookup, setLookup] = useState<{ address: string | undefined; key: string }>()
+  const resolved = address ?? (lookup?.key === key ? lookup?.address : undefined)
+  const source =
+    src ?? (resolved ? inherited.resolveSrc({ address: resolved, chainId: chain, symbol }) : '')
+  const [loaded, setLoaded] = useState<{ status: 'error' | 'loaded'; url: string } | undefined>()
+  const status = (() => {
+    if (source) return loaded?.url === source ? loaded.status : 'loading'
+    return key && lookup?.key !== key ? 'loading' : 'error'
+  })()
+
+  useEffect(() => {
+    if (!key || !symbol) return
+
+    let active = true
+    const pending =
+      inherited.addresses?.get(key) ??
+      inherited.resolveAddress({ chainId: chain, symbol }).catch(() => undefined)
+    inherited.addresses?.set(key, pending)
+
+    pending.then((next) => {
+      // A failed or unknown lookup leaves the cache, so a token that mounts later requests it again.
+      if (next === undefined && inherited.addresses?.get(key) === pending)
+        inherited.addresses.delete(key)
+
+      if (active) setLookup({ address: next, key })
+    })
+
+    return () => {
+      active = false
+    }
+    // The lookup follows the chain and symbol, not the context object or the resolver, which a
+    // provider can recreate on every render. Otherwise each render requests a failed lookup again.
+  }, [chain, inherited.addresses, key, symbol])
+
+  return (
+    <img
+      alt=""
+      draggable={false}
+      {...attributes}
+      {...styles.token({ className, size, style: props.style, vars })}
+      data-status={status}
+      onError={(event) => {
+        props.onError?.(event)
+        if (source) setLoaded({ status: 'error', url: source })
+      }}
+      onLoad={(event) => {
+        if (status === 'error' || !source) return
+
+        props.onLoad?.(event)
+        setLoaded({ status: 'loaded', url: source })
+      }}
+      ref={(node) => {
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+
+        // A cached image can finish before hydration attaches the load handlers.
+        if (source && node?.complete && loaded?.url !== source)
+          setLoaded({ status: node.naturalWidth > 0 ? 'loaded' : 'error', url: source })
+      }}
+      // A blank image hides the browser's broken-image glyph while loading a symbol or after a failure.
+      src={status === 'error' || !source ? blank : source}
+    />
+  )
+}
+
+export namespace TokenLogo {
+  export type Props = Omit<ComponentPropsWithRef<'img'>, 'height' | 'width'> &
+    zyzz.Props.Variants<typeof styles.token> & {
+      /**
+       * Chain to resolve on. Falls back to the nearest `TokenLogo.Provider`, then Tempo mainnet.
+       * @default 4217
+       */
+      chainId?: number | undefined
+    } & (
+      | {
+          /** Token contract address. */
+          address: string
+          symbol?: undefined
+        }
+      | {
+          address?: undefined
+          /** Token symbol, such as `pathUSD`. Matched case-insensitively. */
+          symbol: string
+        }
+      | {
+          address?: undefined
+          /** Icon URL, which skips the address and symbol lookups. */
+          src: string
+          symbol?: undefined
+        }
+    )
+
+  /** Finds the contract address for a symbol. Defaults to the Tempo token list service. */
+  export type ResolveAddress = (options: ResolveAddress.Options) => Promise<string | undefined>
+
+  export namespace ResolveAddress {
+    export type Options = { chainId: number; symbol: string }
+  }
+
+  /** Builds the icon URL for a token. Defaults to the Tempo token list service. */
+  export type ResolveSrc = (options: ResolveSrc.Options) => string
+
+  export namespace ResolveSrc {
+    export type Options = { address: string; chainId: number; symbol?: string | undefined }
+  }
+
+  /**
+   * Sets the default `chainId` and icon sources for nested tokens. Tokens under one provider share
+   * a single lookup per symbol.
+   */
+  export function Provider(props: Provider.Props) {
+    const [addresses] = useState(() => new Map<string, Promise<string | undefined>>())
+
+    return (
+      <TokenContext
+        value={{
+          addresses,
+          chainId: props.chainId ?? defaultChainId,
+          resolveAddress: props.resolveAddress ?? asset,
+          resolveSrc: props.resolveSrc ?? url,
+        }}
+      >
+        {props.children}
+      </TokenContext>
+    )
+  }
+
+  export namespace Provider {
+    export type Props = {
+      /**
+       * Chain for nested tokens without their own `chainId`.
+       * @default 4217
+       */
+      chainId?: number | undefined
+      children?: ReactNode | undefined
+      resolveAddress?: ResolveAddress | undefined
+      resolveSrc?: ResolveSrc | undefined
+    }
+  }
+}
+
+namespace styles {
+  export const token = variants(
+    {
+      base: {
+        backgroundColor: 'container.strong',
+        borderRadius: 'full',
+        cornerShape: 'round',
+        display: 'inline-block',
+        flexShrink: '0 !custom',
+        objectFit: 'cover',
+        verticalAlign: 'middle',
+        selectors: { '&[data-status="loaded"]': { backgroundColor: 'transparent !custom' } },
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          large: { height: '32', width: '32' },
+          medium: { height: '20', width: '20' },
+          small: { height: '16', width: '16' },
+        },
+      },
+    },
+    { id: 'tds/web/token-logo' },
+  )
+}