@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/Frame.tsx

@@ -50,7 +50,7 @@ export namespace Frame {
 
   /**
    * The main content area. It grows to fill the frame and never scrolls, so the container that holds
-   * the frame handles overflow. A direct child `Rows` renders as a filled, rounded well.
+   * the frame handles overflow.
    */
   export function Body(props: Body.Props) {
     const { className, vars, ...attributes } = props
@@ -196,17 +196,9 @@ namespace styles {
   export const body = variants(
     {
       base: {
-        color: 'gray.900',
+        color: 'content.secondary',
         flexGrow: '1 !custom',
-        typography: 'copy.14',
-        selectors: {
-          // The well clips its rows so their hover fills follow its corners.
-          '& > [data-rows]': {
-            backgroundColor: 'grayAlpha.100',
-            borderRadius: '12',
-            overflow: 'hidden',
-          },
-        },
+        typography: 'body.b2',
       },
     },
     { id: 'tds/web/frame/body' },
@@ -216,10 +208,11 @@ namespace styles {
     {
       base: {
         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',
         gridColumn: '2 !custom',
@@ -236,9 +229,9 @@ namespace styles {
         transitionTimingFunction: 'snappy',
         width: '32',
         selectors: {
-          '&:hover': { backgroundColor: 'grayAlpha.200' },
-          '&:active': { backgroundColor: 'grayAlpha.300', transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+          '&:hover': { backgroundColor: 'container.strong' },
+          '&:active': { backgroundColor: 'container.strong', transform: 'scale(0.96) !custom' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, outline-color',
@@ -252,10 +245,10 @@ namespace styles {
   export const description = variants(
     {
       base: {
-        color: 'gray.900',
+        color: 'content.secondary',
         gridColumn: '1 !custom',
         margin: '0',
-        typography: 'copy.14',
+        typography: 'body.b2',
       },
     },
     { id: 'tds/web/frame/description' },
@@ -285,7 +278,7 @@ namespace styles {
     {
       base: {
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'flex',
         flexDirection: 'column',
         rowGap: '24',
@@ -300,7 +293,7 @@ namespace styles {
         gridColumn: '1 !custom',
         gridRow: '1 !custom',
         margin: '0',
-        typography: 'heading.24',
+        typography: 'heading.h2',
       },
     },
     { id: 'tds/web/frame/title' },

package/src/web/components/Gauge.tsx

@@ -132,8 +132,8 @@ namespace styles {
       defaultVariants: { intent: 'neutral', size: 'medium' },
       variants: {
         intent: {
-          neutral: { color: 'foreground' },
-          positive: { color: 'green.900' },
+          neutral: { color: 'content.primary' },
+          positive: { color: 'content.positive' },
         },
         size: {
           large: { height: '80', width: '80' },
@@ -155,10 +155,10 @@ namespace styles {
     { id: 'tds/web/gauge/svg' },
   )
 
-  export const track = style({ stroke: 'grayAlpha.200' }, { id: 'tds/web/gauge/track' })
+  export const track = style({ stroke: 'content.subtle' }, { id: 'tds/web/gauge/track' })
 
   export const value = style(
-    { color: 'foreground', position: 'relative', typography: 'label.12' },
+    { color: 'content.primary', position: 'relative', typography: 'body.b3' },
     { id: 'tds/web/gauge/value' },
   )
 }

package/src/web/components/Hex.tsx

@@ -55,8 +55,6 @@ export declare namespace formatHex {
  * - Add `copy` wherever readers need the full value, since the visible text omits its middle.
  * - The copy button is named `Copy <value>` by default. Pass `aria-label` to `Hex.Copy` to name
  *   what it copies, such as `Copy address`.
- * - After a `Rows.Label`, the text matches the row's 500 weight, and the text and copy icon end at
- *   the row's text edge, as the other row values do.
  *
  * @example
  * <Hex copy value="0x3c44cdddb6a900fa2b585dd299e03d12fa4293bc" />
@@ -121,7 +119,6 @@ export namespace Hex {
       <HexContext value={{ evm, setSlack, slack, value, variant }}>
         <span
           {...attributes}
-          data-hex=""
           {...styles.root({ className, size, style: props.style, variant, vars })}
         >
           {children}
@@ -202,7 +199,7 @@ export namespace Hex {
         }}
         {...styles.text({ className: props.className, style: props.style })}
       >
-        <span aria-hidden="true" data-hex-cut="" {...styles.cut()}>
+        <span aria-hidden="true" {...styles.cut()}>
           <Midcut prefix={prefix} value={value} />
         </span>
         {/* Sizes the text to the value plus one character, since Midcut truncates at that width.
@@ -242,7 +239,7 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '4',
         display: 'inline-flex',
         fontSize: '14',
@@ -250,29 +247,29 @@ namespace styles {
         maxWidth: '100% !custom',
         // Lets grid and flex parents shrink Hex below the text's explicit width, so Midcut truncates.
         position: 'relative',
-        typography: 'copy.13.mono',
+        typography: 'mono.m1',
         whiteSpace: 'nowrap',
         selectors: {
           // Button already transitions `color`, so the icon fades between these. Inline, a 24px
           // button keeps 4px around its 16px icon without taking a 32px icon button's height.
           '& [data-hex-copy]': {
-            color: 'gray.900',
+            color: 'content.secondary',
             height: '24',
             minWidth: '24',
             padding: '0',
             width: '24',
           },
           '& [data-hex-copy]:hover, & [data-hex-copy]:focus-visible, & [data-hex-copy][data-copied]':
-            { color: 'foreground' },
+            { color: 'content.primary' },
         },
       },
-      // A filled Hex matches Input heights and radii: 32, 40 and 56px. The copy icon ends as far from
+      // A filled Hex matches TextInput heights and radii: 32, 40 and 56px. The copy icon ends as far from
       // the edge as the text starts: start padding minus the space around the icon in its button.
       compoundVariants: [
         {
           when: { size: 'large', variant: 'filled' },
           style: {
-            borderRadius: '16',
+            borderRadius: 'sm',
             height: '56',
             paddingInlineEnd: '8',
             paddingInlineStart: '20',
@@ -288,7 +285,7 @@ namespace styles {
         {
           when: { size: 'medium', variant: 'filled' },
           style: {
-            borderRadius: '12',
+            borderRadius: 'xs',
             height: '40',
             paddingInlineEnd: '10',
             paddingInlineStart: '16',
@@ -304,7 +301,7 @@ namespace styles {
         {
           when: { size: 'small', variant: 'filled' },
           style: {
-            borderRadius: '8',
+            borderRadius: '2xs',
             height: '32',
             paddingInlineEnd: '8',
             paddingInlineStart: '12',
@@ -323,7 +320,7 @@ namespace styles {
         size: { large: {}, medium: {}, small: {} },
         variant: {
           filled: {
-            backgroundColor: 'gray.100',
+            backgroundColor: 'container.regular',
             boxSizing: 'border-box',
             columnGap: '12',
             display: 'flex',
@@ -339,9 +336,9 @@ namespace styles {
                 borderRadius: 'inherit !custom',
               },
               // Pressed follows hover so it wins the cascade.
-              '&:has([data-stretch]:hover)': { backgroundColor: 'gray.200' },
+              '&:has([data-stretch]:hover)': { backgroundColor: 'container.strong' },
               '&:has([data-stretch]:active)': {
-                backgroundColor: 'gray.300',
+                backgroundColor: 'container.strong',
                 scale: 'press',
               },
             },
@@ -350,47 +347,7 @@ namespace styles {
               selectors: { '&:has([data-stretch]:active)': { scale: 'none !custom' } },
             },
           },
-          // After a `Rows.Label`, an inline Hex ends the row's value column and matches the 500
-          // weight of the row text beside it. Midcut's leftover space moves before the text, which
-          // leaves the button no slack to cover, and the button bleeds over the 4px around its icon.
-          // The text and icon then end at the row's text edge.
-          inline: {
-            selectors: {
-              // The other half of the row, less the 12px gap after the label, the 24px of the copy
-              // button and its gap, and Midcut's last character, rounded down to whole character
-              // pairs. The text box then fits the visible text, and half a pixel keeps Midcut's own
-              // rounding from dropping a pair to floating-point error.
-              '[data-label] ~ &': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 24.5px) !custom',
-                typography: 'copy.13.mono.strong',
-              },
-              // A leading identicon and its 8px gap add to that width, and `Rows.Label` yields the
-              // same width, so the address keeps the width of one without an identicon.
-              '[data-label] ~ &:has(> [data-identicon="16"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 48.5px) !custom',
-              },
-              '[data-label] ~ &:has(> [data-identicon="24"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 56.5px) !custom',
-              },
-              '[data-label] ~ &:has(> [data-identicon="32"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 64.5px) !custom',
-              },
-              '[data-label] ~ &:has(> [data-identicon="40"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 72.5px) !custom',
-              },
-              '[data-label] ~ &:has(> [data-identicon="48"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 80.5px) !custom',
-              },
-              '[data-label] ~ &:has(> [data-identicon="64"]:first-child)': {
-                maxWidth: 'calc(round(down, 50% - 36px - 1ch, 2ch) + 1ch + 96.5px) !custom',
-              },
-              '[data-label] ~ & [data-hex-cut] > [title]': { justifyContent: 'flex-end' },
-              '[data-label] ~ & [data-hex-copy]': { marginInlineEnd: '-4' },
-              '[data-label] ~ * &': { typography: 'copy.13.mono.strong' },
-              '[data-label] ~ * & [data-hex-cut] > [title]': { justifyContent: 'flex-end' },
-              '[data-label] ~ * & [data-hex-copy]': { marginInlineEnd: '-4' },
-            },
-          },
+          inline: {},
         },
       },
     },

package/src/web/components/IconTile.tsx

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+/**
+ * A 56px rounded-square `span` that centers an icon above the title of a centered modal. The icon
+ * inherits the intent's content color and a 24px font size.
+ *
+ * - Use one chip per modal, and leave it out of form and review modals.
+ * - The chip adds no semantics. Treat it as decorative when the title names the outcome.
+ * - `intent` tints the fill and the icon for the modal's outcome.
+ *
+ * @example
+ * <IconTile intent="positive">
+ *   <Check />
+ * </IconTile>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export function IconTile(props: IconTile.Props) {
+  const { className, intent, vars, ...attributes } = props
+
+  return <span {...attributes} {...styles.chip({ className, intent, style: props.style, vars })} />
+}
+
+export namespace IconTile {
+  export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.chip>
+}
+
+namespace styles {
+  export const chip = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'sm',
+        boxSizing: 'border-box',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        fontSize: '24',
+        height: '56',
+        justifyContent: 'center',
+        width: '56',
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        intent: {
+          negative: { backgroundColor: 'container.negative', color: 'content.negative' },
+          neutral: { backgroundColor: 'container.regular', color: 'content.primary' },
+          positive: { backgroundColor: 'container.positive', color: 'content.positive' },
+          warning: { backgroundColor: 'container.warning', color: 'content.warning' },
+        },
+      },
+    },
+    { id: 'tds/web/icon-tile' },
+  )
+}

package/src/web/components/Identicon.tsx

@@ -22,9 +22,6 @@ const palette = [
  * - Never use it as the only identifier. Show the address or account name beside it.
  * - When that text is adjacent, pass `aria-hidden` so the address is not announced twice.
  * - Otherwise pass an `aria-label` that names the account, since raw addresses read poorly.
- * - In a `Rows` value, render it as the first child of `Hex.Root`. It sits 8px before the
- *   address, and the label yields its width, so the address keeps the width of one without an
- *   identicon.
  *
  * @example
  * <Identicon aria-hidden address={address} size="32" />
@@ -44,7 +41,6 @@ export function Identicon(props: Identicon.Props) {
       role="img"
       viewBox="0 0 1 1"
       {...attributes}
-      data-identicon={size ?? '40'}
       {...styles.identicon({ className, size, style: props.style, vars })}
     >
       <defs>
@@ -110,14 +106,9 @@ namespace styles {
     {
       base: {
         borderRadius: 'full',
+        cornerShape: 'round',
         display: 'block',
         flexShrink: '0 !custom',
-        selectors: {
-          // Leading a `Hex` after a `Rows.Label`, the identicon stays in flow 8px before the
-          // address, so a tall identicon grows the row and a long label never sits under it.
-          // `Hex.Root` adds 4px of gap.
-          '[data-label] ~ [data-hex] > &:first-child': { marginInlineEnd: '4' },
-        },
       },
       defaultVariants: { size: '40' },
       variants: {

package/src/web/components/Kbd.tsx

@@ -133,11 +133,11 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
-        borderRadius: '6',
-        boxShadow: 'raised',
+        backgroundColor: 'container.regular',
+        borderRadius: '2xs',
+        boxShadow: 'small',
         boxSizing: 'border-box',
-        color: 'gray.900',
+        color: 'content.secondary',
         columnGap: '4',
         display: 'inline-flex',
         justifyContent: 'center',
@@ -145,16 +145,16 @@ namespace styles {
       },
       defaultVariants: { size: 'medium' },
       variants: {
-        // Matches static Tag badges: 20, 24 and 32px.
+        // Matches static Badge badges: 20, 24 and 32px.
         size: {
-          large: { height: '32', minWidth: '32', paddingInline: '8', typography: 'label.14' },
+          large: { height: '32', minWidth: '32', paddingInline: '8', typography: 'body.b2' },
           medium: {
             height: '24',
             minWidth: '24',
             paddingInline: '6',
-            typography: 'label.12',
+            typography: 'body.b3',
           },
-          small: { height: '20', minWidth: '20', paddingInline: '4', typography: 'label.12' },
+          small: { height: '20', minWidth: '20', paddingInline: '4', typography: 'body.b3' },
         },
       },
     },