@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/LoadingDots.tsx

@@ -55,6 +55,7 @@ namespace styles {
       animation: `${pulse} 1.2s ease-in-out infinite !custom`,
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '4',
       width: '4',
       selectors: {

package/src/web/components/Menu.tsx

@@ -152,7 +152,7 @@ export namespace Menu {
   /**
    * Renders the portal, positioner and popup. Inside `Menu.SubmenuRoot` it opens beside the
    * trigger. `sideOffset` defaults to `4`, or `0` in a submenu, where `alignOffset` defaults to
-   * `-8`. `size` sets 32, 40 or 56px items.
+   * `-8`. `size` sets 32, 36 or 56px items.
    */
   export function Popup(props: Popup.Props) {
     const {
@@ -300,52 +300,60 @@ export namespace Menu {
 
 export namespace styles {
   export const chevron = style(
-    { color: 'gray.700', flexShrink: '0 !custom', marginInlineStart: 'auto !custom' },
+    { color: 'content.tertiary', flexShrink: '0 !custom', marginInlineStart: 'auto !custom' },
     { id: 'tds/web/menu/chevron' },
   )
 
+  // The label lines up with the icons of the items.
   export const groupLabel = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       paddingBlock: '8',
-      paddingInline: '12',
-      typography: 'label.12',
+      paddingInline: '8',
+      typography: 'body.b3',
     },
     { id: 'tds/web/menu/group-label' },
   )
 
+  // The medium item is the 36px navigation row: 8px padding, a leading 20px icon and 12px before
+  // the label.
   export const item = variants(
     {
       base: {
         alignItems: 'center',
-        // Concentric with the popup: its 16px radius minus its 6px padding.
-        borderRadius: '10',
+        // One radius step below the popup, as the design rounds items: its `xs` less its 4px padding.
+        borderRadius: '2xs',
         boxSizing: 'border-box',
-        color: 'foreground',
-        columnGap: '8',
+        color: 'content.secondary',
+        columnGap: '12',
         cursor: 'default',
         display: 'flex',
-        minHeight: '40',
+        minHeight: '36',
         outline: 'none !custom',
-        paddingInline: '12',
+        paddingInline: '8',
         textDecoration: 'none !custom',
         transitionDuration: '120',
         transitionProperty: 'background-color, color, opacity',
         transitionTimingFunction: 'snappy',
-        typography: 'label.14.strong',
+        typography: 'body.b2',
         userSelect: 'none',
         selectors: {
+          '& > svg:first-child': { flexShrink: '0 !custom', fontSize: '20' },
           '&[data-disabled]': { opacity: 'disabled', pointerEvents: 'none' },
-          '&[data-highlighted]': { backgroundColor: 'grayAlpha.100' },
-          '&[data-popup-open]': { backgroundColor: 'grayAlpha.100' },
+          '&[data-highlighted]': { backgroundColor: 'container.regular' },
+          '&[data-popup-open]': { backgroundColor: 'container.regular' },
         },
         '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
       },
       defaultVariants: { intent: 'default' },
       variants: {
         intent: {
-          default: {},
-          negative: { color: 'red.800' },
+          default: {
+            selectors: {
+              '&:is([data-highlighted], [data-popup-open])': { color: 'content.primary' },
+            },
+          },
+          negative: { color: 'content.negative' },
         },
       },
     },
@@ -355,22 +363,29 @@ export namespace styles {
   export const popup = variants(
     {
       base: {
-        backgroundColor: 'background.raised',
-        borderRadius: '16',
-        boxShadow: 'popover',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
+        borderRadius: 'xs',
+        borderStyle: 'solid',
+        borderWidth: 'regular',
+        boxShadow: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        display: 'grid',
         maxHeight: 'var(--available-height) !custom',
-        minWidth: '224',
+        // Figma sets the menu 232px wide, which no spacing token holds.
+        minWidth: '14.5rem !custom',
         outline: 'none !custom',
         overflowY: 'auto',
-        padding: '6',
+        padding: '4',
+        rowGap: '2',
         transformOrigin: 'var(--transform-origin) !custom',
         transitionDuration: '200',
         transitionProperty: 'opacity, scale',
         transitionTimingFunction: 'snappy',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
+          '& [role="group"]': { display: 'grid', rowGap: '2' },
           '&[data-ending-style]': {
             opacity: '0 !custom',
             scale: 'enter',
@@ -390,12 +405,10 @@ export namespace styles {
       },
       defaultVariants: { size: 'medium' },
       variants: {
-        // Items follow the shared control scale: 32, 40 and 56px.
+        // Items follow the navigation row scale: 32, 36 and 56px.
         size: {
           large: {
-            selectors: {
-              '& [role^="menuitem"]': { minHeight: '56', typography: 'label.16.strong' },
-            },
+            selectors: { '& [role^="menuitem"]': { minHeight: '56', typography: 'body.b1' } },
           },
           medium: {},
           small: {
@@ -403,7 +416,7 @@ export namespace styles {
               '& [role^="menuitem"]': {
                 minHeight: '32',
                 paddingBlock: '4',
-                typography: 'label.13.strong',
+                typography: 'body.b3',
               },
             },
           },
@@ -415,34 +428,36 @@ export namespace styles {
 
   export const positioner = style({ zIndex: 'popover' }, { id: 'tds/web/menu/positioner' })
 
+  // The popup spaces its children 2px apart, so the margins add 4px for 6px around the line.
   export const separator = style(
     {
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'line.secondary',
       height: '1',
-      marginBlock: '8',
-      marginInline: '12',
+      marginBlock: '4',
     },
     { id: 'tds/web/menu/separator' },
   )
 
   export const shortcut = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       marginInlineStart: 'auto !custom',
       paddingInlineStart: '16',
-      typography: 'label.13',
+      typography: 'body.b3',
     },
     { id: 'tds/web/menu/shortcut' },
   )
 
+  // The check of a checkbox or radio item takes the place of an icon.
   export const slot = style(
     {
       alignItems: 'center',
       display: 'inline-flex',
       flexShrink: '0 !custom',
-      height: '16',
+      fontSize: '20',
+      height: '20',
       justifyContent: 'center',
-      width: '16',
+      width: '20',
     },
     { id: 'tds/web/menu/slot' },
   )

package/src/web/components/NetworkLogo.tsx

@@ -0,0 +1,208 @@
+import { type ComponentPropsWithRef, type ReactNode, useId } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+const circle =
+  'M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16C32 24.8366 24.8366 32 16 32C7.16344 32 0 24.8366 0 16Z'
+
+// The `logos/*.svg` exports, with each clip, mask, and gradient ID suffixed per instance.
+const artwork = {
+  base: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1280-${id})`}>
+        <path
+          d="M4 6.27467C4 5.49467 4 5.10533 4.14667 4.80667C4.288 4.52 4.52 4.28667 4.808 4.14667C5.10667 4 5.496 4 6.27467 4H25.7253C26.5053 4 26.8933 4 27.1933 4.14667C27.48 4.28667 27.712 4.52 27.852 4.80667C28 5.10667 28 5.496 28 6.27467V25.7253C28 26.5053 28 26.8933 27.8533 27.1933C27.712 27.48 27.48 27.712 27.1933 27.852C26.8933 28 26.504 28 25.7253 28H6.27467C5.49467 28 5.10667 28 4.80667 27.8533C4.51999 27.7125 4.28828 27.4803 4.148 27.1933C4 26.8933 4 26.504 4 25.7253V6.27467Z"
+          fill="#0000FF"
+        />
+      </g>
+      <defs>
+        <clipPath id={`clip0_201_1280-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+  ethereum: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1292-${id})`}>
+        <rect width="32" height="32" fill="#627EEA" />
+        <path d="M16.498 4V12.87L23.995 16.22L16.498 4Z" fill="white" fillOpacity="0.602" />
+        <path d="M16.498 4L9 16.22L16.498 12.87V4Z" fill="white" />
+        <path d="M16.498 21.968V27.995L24 17.616L16.498 21.968Z" fill="white" fillOpacity="0.602" />
+        <path d="M16.498 27.995V21.967L9 17.616L16.498 27.995Z" fill="white" />
+        <path
+          d="M16.498 20.5731L23.995 16.2201L16.498 12.8721V20.5731Z"
+          fill="white"
+          fillOpacity="0.2"
+        />
+        <path d="M9 16.2201L16.498 20.5731V12.8721L9 16.2201Z" fill="white" fillOpacity="0.602" />
+      </g>
+      <defs>
+        <clipPath id={`clip0_201_1292-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+  hyperevm: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1310-${id})`}>
+        <g clipPath={`url(#clip1_201_1310-${id})`}>
+          <rect width="32" height="32" fill="#072723" />
+          <g clipPath={`url(#clip2_201_1310-${id})`}>
+            <mask
+              id={`mask0_201_1310-${id}`}
+              style={{ maskType: 'luminance' }}
+              maskUnits="userSpaceOnUse"
+              x="0"
+              y="0"
+              width="32"
+              height="32"
+            >
+              <path d="M0 0H32V32H0V0Z" fill="white" />
+            </mask>
+            <g mask={`url(#mask0_201_1310-${id})`}>
+              <path d="M32 0H0V32H32V0Z" fill="#072723" />
+              <path
+                d="M26.6667 15.9227C26.6831 17.6668 26.3191 19.3936 25.6 20.9827C24.5707 23.276 22.1067 25.152 19.8547 23.156C18.0187 21.5293 17.6787 18.2253 14.928 17.7427C11.2894 17.2987 11.2014 21.548 8.82404 22.028C6.17471 22.5707 5.29604 18.0813 5.33471 16.044C5.37471 14.0053 5.91204 11.14 8.21471 11.14C10.864 11.14 11.0427 15.1813 14.4067 14.9627C17.7374 14.7333 17.796 10.5293 19.972 8.72934C21.8494 7.17468 24.0587 8.31468 25.164 10.1867C26.1894 11.9173 26.64 13.9493 26.6627 15.9227H26.6667Z"
+                fill="#50D2C1"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+      <defs>
+        <clipPath id={`clip0_201_1310-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+        <clipPath id={`clip1_201_1310-${id}`}>
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+        <clipPath id={`clip2_201_1310-${id}`}>
+          <rect width="32" height="32" fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+  polygon: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1322-${id})`}>
+        <rect width="32" height="32" fill={`url(#paint0_linear_201_1322-${id})`} />
+        <path
+          d="M10.9062 12.4996C11.0974 12.3866 11.3146 12.327 11.5356 12.327C11.7566 12.327 11.9737 12.3866 12.165 12.4996L15.0415 14.252L16.9947 15.3912L19.8767 17.1436C20.2411 17.3714 20.7233 17.3714 21.1288 17.1436L23.4176 15.7754C23.7875 15.5487 24.2353 15.1271 24.2353 14.6714V11.9714C24.2353 11.5157 23.8231 11.0952 23.412 10.8674L21.1644 9.53437C20.9739 9.42258 20.758 9.36375 20.5383 9.36375C20.3186 9.36375 20.1027 9.42258 19.9122 9.53437L17.6591 10.8674C17.2946 11.0941 17.1769 11.5157 17.1769 11.9714V13.717L15.4114 12.5427V10.7835C15.4114 10.3267 15.2937 9.90729 15.7048 9.67946L19.8778 7.16989C20.0683 7.0581 20.2841 6.99927 20.5039 6.99927C20.7236 6.99927 20.9395 7.0581 21.1299 7.16989L25.3708 9.67832C25.5652 9.78677 25.7268 9.94759 25.8379 10.1433C25.949 10.3389 26.0053 10.5619 26.0007 10.788V15.8525C26.0031 16.0774 25.9458 16.2987 25.8349 16.4931C25.724 16.6874 25.5636 16.8476 25.3708 16.9565L21.1299 19.465C20.9395 19.5767 20.7236 19.6356 20.5039 19.6356C20.2841 19.6356 20.0683 19.5767 19.8778 19.465L16.9958 17.7545L15.0426 16.5734L12.1606 14.8618C11.97 14.7498 11.7539 14.6909 11.5339 14.6909C11.314 14.6909 11.0979 14.7498 10.9073 14.8618L8.66079 16.1948C8.28971 16.4226 7.76641 16.8432 7.76641 17.2988V19.9988C7.76641 20.4556 8.25527 20.875 8.66079 21.1029L10.9073 22.471C11.2784 22.7 11.7606 22.7 12.1661 22.471L14.4126 21.1391C14.7837 20.9113 15.4126 20.4908 15.4126 20.0351V18.2895L17.178 19.465V21.2173C17.178 21.673 16.778 22.0935 16.3725 22.3214L12.1194 24.8241C11.755 25.0576 11.2717 25.0576 10.8662 24.8241L6.62538 22.3157C6.43972 22.2006 6.2853 22.0399 6.17622 21.8482C6.06715 21.6565 6.0069 21.44 6.00098 21.2185V16.154C6.00098 15.6972 6.22429 15.2778 6.62982 15.05L10.9062 12.4996Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id={`paint0_linear_201_1322-${id}`}
+          x1="3.27976e-08"
+          y1="0.00106153"
+          x2="32.0014"
+          y2="31.9975"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#8F34C2" />
+          <stop offset="1" stopColor="#7442DB" />
+        </linearGradient>
+        <clipPath id={`clip0_201_1322-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+  solana: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1328-${id})`}>
+        <rect width="32" height="32" fill="black" />
+        <path
+          d="M23.482 11.2376C23.3512 11.3577 23.1804 11.4255 23.0025 11.4282H6.17619C5.57883 11.4282 5.27782 10.7485 5.69083 10.35L8.45361 7.69635C8.58203 7.57247 8.75318 7.50222 8.93196 7.5H25.8248C26.428 7.5 26.7231 8.18548 26.3031 8.58515L23.482 11.2376ZM23.482 24.3164C23.3513 24.4359 23.1799 24.5015 23.0025 24.5H6.17619C5.57883 24.5 5.27782 23.8261 5.69083 23.4276L8.45361 20.7682C8.58312 20.6468 8.75414 20.5791 8.93196 20.5788H25.8248C26.428 20.5788 26.7231 21.2585 26.3031 21.657L23.482 24.3164ZM23.482 14.2259C23.3511 14.1068 23.1798 14.0416 23.0025 14.0435H6.17619C5.57883 14.0435 5.27782 14.7173 5.69083 15.1147L8.45361 17.7753C8.58435 17.8947 8.75458 17.9621 8.93196 17.9647H25.8248C26.428 17.9647 26.7231 17.285 26.3031 16.8865L23.482 14.2259Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id={`clip0_201_1328-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+  tempo: (id) => (
+    <>
+      <g clipPath={`url(#clip0_201_1334-${id})`}>
+        <rect width="32" height="32" fill="black" />
+        <path
+          d="M14.8242 23.5H11.1342L14.5542 13.06H10.1802L11.1342 10H23.3202L22.3662 13.06H18.2262L14.8242 23.5Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id={`clip0_201_1334-${id}`}>
+          <path d={circle} fill="white" />
+        </clipPath>
+      </defs>
+    </>
+  ),
+} as const satisfies Record<string, (id: string) => ReactNode>
+
+/**
+ * A network's logo, rendered as an inline `svg` cropped to a circle. The artwork keeps each
+ * network's brand colors, so it ignores the inherited text color.
+ *
+ * - The logo is hidden from assistive technology unless it has an `aria-label`. Name it only when
+ *   no visible text names the network.
+ * - Use `large` in network rows and pickers, and `medium` beside a network name in a value or chip.
+ *
+ * @example
+ * <NetworkLogo network="tempo" />
+ * <NetworkLogo aria-label="Base" network="base" size="large" />
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/svg | MDN svg element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function NetworkLogo(props: NetworkLogo.Props) {
+  const { className, network, size, vars, ...attributes } = props
+  const id = useId()
+  const labelled = props['aria-label'] || props['aria-labelledby']
+
+  return (
+    <svg
+      aria-hidden={labelled ? undefined : true}
+      fill="none"
+      role={labelled ? 'img' : undefined}
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+      {...styles.logo({ className, size, style: props.style, vars })}
+    >
+      {artwork[network](id)}
+    </svg>
+  )
+}
+
+export namespace NetworkLogo {
+  export type Props = Omit<
+    ComponentPropsWithRef<'svg'>,
+    'children' | 'dangerouslySetInnerHTML' | 'height' | 'width'
+  > &
+    zyzz.Props.Variants<typeof styles.logo> & {
+      /** Network whose logo renders. */
+      network: keyof typeof artwork
+    }
+}
+
+namespace styles {
+  export const logo = variants(
+    {
+      base: { display: 'inline-block', flexShrink: '0 !custom', verticalAlign: 'middle' },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          large: { height: '32', width: '32' },
+          medium: { height: '20', width: '20' },
+        },
+      },
+    },
+    { id: 'tds/web/network-logo' },
+  )
+}

package/src/web/components/NumberField.tsx

@@ -12,7 +12,7 @@ import * as Field from './internal/Field.js'
  * `aria-roledescription="Number field"`, steps it with the Up and Down arrows (Shift for
  * `largeStep`, Alt for `smallStep`) and jumps to `min` or `max` with Home and End when defined.
  *
- * - Use it for quantities adjusted in small steps. Use `Input` for codes and identifiers.
+ * - Use it for quantities adjusted in small steps. Use `TextInput` for codes and identifiers.
  * - Name the input with a visible label, or `aria-label` when none fits.
  * - State `min`, `max` and units in the label or description.
  *
@@ -58,12 +58,12 @@ export namespace NumberField {
 
   /** The field surface around the input and steppers, rendered with `role="group"`. */
   export function Group(props: Group.Props) {
-    const { className, invalid, size, variant, vars, ...attributes } = props
+    const { className, invalid, variant, vars, ...attributes } = props
 
     return (
       <BaseUi.NumberField.Group
         {...attributes}
-        {...Field.styles.field({ className, size, style: props.style, variant, vars })}
+        {...Field.styles.field({ className, style: props.style, variant, vars })}
         data-invalid={invalid || undefined}
       />
     )
@@ -74,8 +74,8 @@ export namespace NumberField {
       zyzz.Props.Variants<typeof Field.styles.field> &
       Pick<BaseUi.NumberField.Group.Props, 'render'> & {
         /**
-         * Shows the invalid ring by setting `data-invalid` on the group. It sets no ARIA state.
-         * An input with `aria-invalid="true"` shows the same ring without this prop.
+         * Fills the group red by setting `data-invalid` on it. It sets no ARIA state. An input
+         * with `aria-invalid="true"` fills it the same way without this prop.
          */
         invalid?: boolean | undefined
       }
@@ -196,7 +196,7 @@ namespace styles {
     {
       backgroundColor: 'transparent !custom',
       border: 'none !custom',
-      caretColor: 'foreground',
+      caretColor: 'content.primary',
       color: 'transparent !custom',
       font: 'inherit !custom',
       fontVariantNumeric: 'inherit !custom',
@@ -206,7 +206,7 @@ namespace styles {
       padding: '0',
       textAlign: 'center',
       selectors: {
-        '&::placeholder': { color: 'gray.900' },
+        '&::placeholder': { color: 'content.tertiary' },
         '[data-typing] > &': { color: 'inherit !custom' },
       },
     },
@@ -236,16 +236,16 @@ namespace styles {
   export const stepper = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       border: 'none !custom',
-      borderRadius: 'full',
+      borderRadius: '2xs',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       fontSize: '16',
-      height: '36',
+      height: '40',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
       outlineOffset: '2',
@@ -255,34 +255,19 @@ namespace styles {
       transitionDuration: '160',
       transitionProperty: 'background-color, opacity, outline-color, scale !custom',
       transitionTimingFunction: 'snappy',
-      width: '36',
+      width: '40',
       selectors: {
         '&:active:not(:disabled)': {
-          backgroundColor: 'grayAlpha.400',
+          backgroundColor: 'container.strong',
           scale: 'press',
           transitionDuration: '100',
         },
         '&:disabled': { cursor: 'default', opacity: 'disabled' },
-        '&:focus-visible': { outlineColor: 'blue.700' },
-        '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.300' },
-        '[data-size="large"] > &:first-child': { marginInlineStart: '-10' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
-        '[data-size="large"][data-variant="outlined"] > &:first-child': {
-          marginInlineStart: '-14',
-        },
-        '[data-size="large"][data-variant="outlined"] > &:last-child': {
-          marginInlineEnd: '-14',
-        },
-        '[data-size="medium"] > &': { fontSize: '14', height: '28', width: '28' },
-        '[data-size="medium"] > &:first-child': { marginInlineStart: '-10' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
-        '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[data-size="small"] > &:first-child': { marginInlineStart: '-8' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-8' },
-        '[data-variant="filled"]:is([data-size="large"], [data-size="medium"]) > &': {
-          borderRadius: '6',
-        },
-        '[data-variant="filled"][data-size="small"] > &': { borderRadius: '4' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover:not(:disabled)': { backgroundColor: 'line.primary' },
+        // Each stepper sits 4px from the field's edge and top, rounding by its radius minus that inset.
+        '&:first-child': { marginInlineStart: '-12' },
+        '&:last-child': { marginInlineEnd: '-12' },
       },
       '@media (forced-colors: active)': {
         outlineStyle: 'none !custom',