@tempoxyz/ds 0.2.5 → 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

@@ -239,7 +239,7 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '4',
         display: 'inline-flex',
         fontSize: '14',
@@ -247,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',
@@ -285,7 +285,7 @@ namespace styles {
         {
           when: { size: 'medium', variant: 'filled' },
           style: {
-            borderRadius: '12',
+            borderRadius: 'xs',
             height: '40',
             paddingInlineEnd: '10',
             paddingInlineStart: '16',
@@ -301,7 +301,7 @@ namespace styles {
         {
           when: { size: 'small', variant: 'filled' },
           style: {
-            borderRadius: '8',
+            borderRadius: '2xs',
             height: '32',
             paddingInlineEnd: '8',
             paddingInlineStart: '12',
@@ -320,7 +320,7 @@ namespace styles {
         size: { large: {}, medium: {}, small: {} },
         variant: {
           filled: {
-            backgroundColor: 'gray.100',
+            backgroundColor: 'container.regular',
             boxSizing: 'border-box',
             columnGap: '12',
             display: 'flex',
@@ -336,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',
               },
             },

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

@@ -104,7 +104,12 @@ function derive(address: string) {
 namespace styles {
   export const identicon = variants(
     {
-      base: { borderRadius: 'full', display: 'block', flexShrink: '0 !custom' },
+      base: {
+        borderRadius: 'full',
+        cornerShape: 'round',
+        display: 'block',
+        flexShrink: '0 !custom',
+      },
       defaultVariants: { size: '40' },
       variants: {
         size: {

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' },
         },
       },
     },