@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/Tooltip.tsx

@@ -98,8 +98,8 @@ export namespace Tooltip {
 namespace styles {
   export const popup = style(
     {
-      backgroundColor: 'foreground',
-      borderRadius: '12',
+      backgroundColor: 'content.primary',
+      borderRadius: 'xs',
       boxSizing: 'border-box',
       color: 'background.primary',
       maxWidth: '320',
@@ -109,7 +109,7 @@ namespace styles {
       transitionDuration: '160',
       transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
-      typography: 'label.13',
+      typography: 'body.b3',
       selectors: {
         '&[data-ending-style]': {
           opacity: '0 !custom',

package/src/web/components/VerificationCode.tsx

@@ -0,0 +1,97 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style } from '../zyzz.config.js'
+
+/**
+ * A code that a person compares with the one another device or app shows, such as the code of a
+ * device sign-in. `VerificationCode.Root` renders a centered box that holds a
+ * `VerificationCode.Label` above a `VerificationCode.Value`.
+ *
+ * - Name what the code must match in the label, such as the app that shows it.
+ * - Show the code exactly as the other device shows it, with the same grouping.
+ * - Use `OtpField` when the person types the code instead.
+ *
+ * @example
+ * <VerificationCode.Root>
+ *   <VerificationCode.Label>Confirm this code matches Claude</VerificationCode.Label>
+ *   <VerificationCode.Value>WXYZ-4821</VerificationCode.Value>
+ * </VerificationCode.Root>
+ *
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html | WCAG 2.2 Accessible Authentication (Minimum)}
+ */
+export namespace VerificationCode {
+  /** What the code must match, rendered as a `p` above the value. */
+  export function Label(props: Label.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <p {...attributes} {...styles.label({ className, style: props.style, vars })} />
+  }
+
+  export namespace Label {
+    export type Props = ComponentPropsWithRef<'p'> & zyzz.Props.Variants<typeof styles.label>
+  }
+
+  /** The centered box, rendered as a `div`, that fills the width of its container. */
+  export function Root(props: Root.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.root({ className, style: props.style, vars })} />
+  }
+
+  export namespace Root {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root>
+  }
+
+  /**
+   * The code, rendered as a `span` in the largest heading type. A click selects the whole code, so
+   * it copies in one step.
+   */
+  export function Value(props: Value.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        translate="no"
+        {...attributes}
+        {...styles.value({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Value {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.value>
+  }
+}
+
+namespace styles {
+  export const label = style(
+    { color: 'content.secondary', margin: '0', typography: 'body.b3' },
+    { id: 'tds/web/verification-code/label' },
+  )
+
+  // A box at radius `sm` pads by 20px, which keeps the code's heading clear of the corners.
+  export const root = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'container.regular',
+      borderRadius: 'sm',
+      boxSizing: 'border-box',
+      display: 'flex',
+      flexDirection: 'column',
+      padding: '20',
+      rowGap: '4',
+      textAlign: 'center',
+    },
+    { id: 'tds/web/verification-code' },
+  )
+
+  export const value = style(
+    {
+      color: 'content.primary',
+      typography: 'heading.h1',
+      userSelect: 'all',
+    },
+    { id: 'tds/web/verification-code/value' },
+  )
+}

package/src/web/components/Visual.tsx

@@ -0,0 +1,166 @@
+import type { ComponentPropsWithRef, ReactElement } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A 208px illustration panel for the top of an onboarding or feature modal, in place of an
+ * `IconTile`. `kind` selects the artwork, and `passkey` is the only kind today. The artwork is
+ * decorative and hidden from assistive technology. It stays at its native size, centered and
+ * clipped by the panel.
+ *
+ * - Use one visual per modal, above a centered title. Never pair it with an `IconTile`.
+ * - Leave it out of form and review modals.
+ * - Add `Visual.Chip` for a short instruction, such as "Touch to sign in".
+ *
+ * @example
+ * <Visual kind="passkey">
+ *   <Visual.Chip>Touch to sign in</Visual.Chip>
+ * </Visual>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/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 Visual(props: Visual.Props) {
+  const { children, className, kind, vars, ...attributes } = props
+
+  return (
+    <div {...attributes} {...styles.visual({ className, kind, style: props.style, vars })}>
+      {artwork[kind ?? 'passkey']}
+      {children}
+    </div>
+  )
+}
+
+export namespace Visual {
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.visual>
+
+  /**
+   * A pill in the top-right corner of the visual, with a dot before its text. Screen readers read
+   * the text.
+   */
+  export function Chip(props: Chip.Props) {
+    const { children, className, vars, ...attributes } = props
+
+    return (
+      <span {...attributes} {...styles.chip({ className, style: props.style, vars })}>
+        <span aria-hidden="true" {...styles.dot()} />
+        {children}
+      </span>
+    )
+  }
+
+  export namespace Chip {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.chip>
+  }
+}
+
+// The Figma exports in `visuals/`, cropped to the 374px frame they were drawn in, with black as
+// `currentColor` so the artwork follows the color scheme.
+const artwork: Record<NonNullable<Visual.Props['kind']>, ReactElement> = {
+  passkey: (
+    <svg aria-hidden="true" fill="none" height="208" viewBox="0 0 374 208" width="374">
+      <g stroke="currentColor" strokeLinecap="round" strokeOpacity="0.14" strokeWidth="1.5">
+        <path
+          d="M171 208V164C171 159.757 172.686 155.687 175.686 152.686C178.687 149.686 182.757 148 187 148C191.243 148 195.313 149.686 198.314 152.686C201.314 155.687 203 159.757 203 164V208"
+          strokeDasharray="30 6"
+        />
+        <path
+          d="M155 208V164C155 155.513 158.371 147.374 164.373 141.373C170.374 135.371 178.513 132 187 132C195.487 132 203.626 135.371 209.627 141.373C215.629 147.374 219 155.513 219 164V208"
+          strokeDasharray="52 8 14 8"
+        />
+        <path
+          d="M123 208V164C123 147.026 129.743 130.747 141.745 118.745C153.747 106.743 170.026 100 187 100C203.974 100 220.252 106.743 232.255 118.745C244.257 130.747 251 147.026 251 164V208"
+          strokeDasharray="90 10 40 10"
+        />
+        <path
+          d="M107 208V164C107 142.783 115.429 122.434 130.431 107.431C145.434 92.4285 165.783 84 187 84C208.217 84 228.566 92.4285 243.569 107.431C258.571 122.434 267 142.783 267 164V208"
+          strokeDasharray="60 12 120 8"
+        />
+        <path
+          d="M91 208V164C91 138.539 101.114 114.121 119.118 96.1178C137.121 78.1143 161.539 68 187 68C212.461 68 236.879 78.1143 254.882 96.1178C272.886 114.121 283 138.539 283 164V208"
+          strokeDasharray="140 10 50 10"
+        />
+        <path
+          d="M75 208V164C75 134.296 86.8 105.808 107.804 84.804C128.808 63.8 157.296 52 187 52C216.704 52 245.192 63.8 266.196 84.804C287.2 105.808 299 134.296 299 164V208"
+          strokeDasharray="80 14 160 10"
+        />
+        <path
+          d="M59 208V164C59 130.052 72.4857 97.495 96.4903 73.4903C120.495 49.4857 153.052 36 187 36C220.948 36 253.505 49.4857 277.51 73.4903C301.514 97.495 315 130.052 315 164V208"
+          strokeDasharray="200 12 60 12"
+        />
+        <path
+          d="M43 208V164C43 125.809 58.1714 89.1819 85.1766 62.1766C112.182 35.1714 148.809 20 187 20C225.191 20 261.818 35.1714 288.823 62.1766C315.829 89.1819 331 125.809 331 164V208"
+          strokeDasharray="120 16 220 12"
+        />
+      </g>
+      <path
+        d="M139 208V164C139 151.27 144.057 139.061 153.059 130.059C162.061 121.057 174.27 116 187 116C199.73 116 211.939 121.057 220.941 130.059C229.943 139.061 235 151.27 235 164V208"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="2.5"
+      />
+      <path
+        d="M187 169C189.761 169 192 166.761 192 164C192 161.239 189.761 159 187 159C184.239 159 182 161.239 182 164C182 166.761 184.239 169 187 169Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+namespace styles {
+  export const chip = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'background.primary',
+      borderColor: 'line.secondary',
+      borderRadius: 'full',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      color: 'content.primary',
+      columnGap: '8',
+      cornerShape: 'round',
+      display: 'inline-flex',
+      insetBlockStart: '24',
+      insetInlineEnd: '12',
+      paddingBlock: '8',
+      paddingInline: '0.875rem !custom',
+      position: 'absolute',
+      typography: 'body.b3',
+      whiteSpace: 'nowrap',
+    },
+    { id: 'tds/web/visual/chip' },
+  )
+
+  export const dot = style(
+    {
+      backgroundColor: 'currentColor !custom',
+      borderRadius: 'full',
+      cornerShape: 'round',
+      flexShrink: '0 !custom',
+      height: '8',
+      width: '8',
+    },
+    { id: 'tds/web/visual/dot' },
+  )
+
+  // Flex centering overflows both edges equally, so a narrow panel clips the artwork symmetrically.
+  export const visual = variants(
+    {
+      base: {
+        alignItems: 'flex-end',
+        backgroundColor: 'background.primary',
+        borderRadius: 'sm',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        display: 'flex',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        position: 'relative',
+        selectors: { '& > svg': { display: 'block', flexShrink: '0 !custom' } },
+      },
+      defaultVariants: { kind: 'passkey' },
+      variants: { kind: { passkey: {} } },
+    },
+    { id: 'tds/web/visual' },
+  )
+}

package/src/web/components/internal/Field.ts

@@ -1,37 +1,47 @@
 import { style, variants } from '../../zyzz.config.js'
 
 /**
- * The field surface shared by Combobox, Autocomplete, NumberField and DatePicker. Its `size` scale
- * matches `InputGroup.styles.group` and the `Button` heights: 32, 40 and 56px.
+ * The 48px field surface shared by Combobox, Autocomplete and NumberField. Its variants and states
+ * match `InputGroup.styles.group`: an elevated fill with a 1px border on focus, a red fill while
+ * invalid, and a check at the end on success.
  */
 export namespace styles {
   export const field = variants(
     {
       base: {
         alignItems: 'center',
+        backgroundColor: 'container.regular',
+        border: 'none !custom',
+        borderRadius: 'xs',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        columnGap: '8',
         display: 'flex',
         justifyContent: 'space-between',
+        minHeight: '48',
+        // Forced colors paint transparent outlines, so this outline is the focus ring only there.
         outlineColor: 'transparent !custom',
         outlineOffset: '2',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
+        paddingInline: '16',
         position: 'relative',
         textAlign: 'start',
         transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2',
         width: '100% !custom',
         selectors: {
-          // The invalid ring fades in on an inset border, so focus changes only the outline color.
+          // The focus border is inset, so focus never moves the content.
           '&::before': {
             borderColor: 'transparent !custom',
             borderRadius: 'inherit !custom',
             borderStyle: 'solid !custom',
-            borderWidth: '2',
+            borderWidth: 'regular',
             boxSizing: 'border-box',
             content: '"" !custom',
+            cornerShape: 'inherit !custom',
             inset: '0',
             pointerEvents: 'none',
             position: 'absolute',
@@ -39,17 +49,29 @@ export namespace styles {
             transitionProperty: 'border-color !custom',
             transitionTimingFunction: 'snappy',
           },
+          // The success state ends the field with a check, drawn from the `CheckCircle` icon.
+          '[data-success] &::after': {
+            backgroundColor: 'content.primary',
+            content: '"" !custom',
+            flexShrink: '0 !custom',
+            height: '16',
+            mask: 'url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27M9.61328 6.0166C9.78817 5.80309 10.1037 5.77154 10.3174 5.94629C10.5306 6.12107 10.562 6.43583 10.3877 6.64941L7.3877 10.3164C7.2983 10.4257 7.16637 10.4919 7.02539 10.499C6.8843 10.5061 6.74637 10.4534 6.64648 10.3535L5.31348 9.01953C5.11845 8.82425 5.11829 8.50768 5.31348 8.3125C5.50869 8.11767 5.82534 8.11759 6.02051 8.3125L6.96191 9.25488L9.61328 6.0166Z%27/%3E%3Cpath fill-rule=%27evenodd%27 d=%27M8 1.33301C11.6817 1.33318 14.666 4.31919 14.666 8.00098C14.6656 11.6824 11.6815 14.6668 8 14.667C4.31837 14.667 1.33345 11.6825 1.33301 8.00098C1.33301 4.31908 4.3181 1.33301 8 1.33301ZM8 2.33398C4.87039 2.33398 2.33301 4.87137 2.33301 8.00098C2.33345 11.1302 4.87066 13.667 8 13.667C11.1292 13.6668 13.6656 11.1301 13.666 8.00098C13.666 4.87147 11.1294 2.33416 8 2.33398Z%27/%3E%3C/svg%3E") center / contain no-repeat !custom',
+            width: '16',
+          },
           '&:is(button)': { cursor: 'pointer' },
-          '&:focus-visible, &:has(:focus-visible)': { outlineColor: 'blue.700' },
-          '&[data-disabled], &:disabled': { opacity: 'disabled' },
-          '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))::before': {
-            borderColor: 'red.800',
+          // `:where` keeps the hover and focus fills below the invalid and disabled fills.
+          '&:where(:hover:not([data-disabled]))': { backgroundColor: 'container.strong' },
+          '&:where(:focus-visible, :has(:focus-visible))': {
+            backgroundColor: 'background.elevated',
           },
-          '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"])):is(:focus-visible, :has(:focus-visible))':
-            { outlineColor: 'red.800' },
-          // While focused, the outline replaces the inset ring.
-          '&:is(:focus-visible, :has(:focus-visible))::before': {
-            borderColor: 'transparent !custom',
+          '&:is(:focus-visible, :has(:focus-visible))::before': { borderColor: 'border.focus' },
+          '&:is([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))': {
+            backgroundColor: 'container.negative',
+          },
+          '&[data-disabled], &:disabled': {
+            backgroundColor: 'container.subtle',
+            color: 'content.subtle',
+            cursor: 'default',
           },
         },
         '@media (forced-colors: active)': {
@@ -62,42 +84,20 @@ export namespace styles {
           transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         },
       },
-      compoundVariants: [
-        { when: { size: 'large', variant: 'outlined' }, style: { paddingInline: '24' } },
-        { when: { size: 'medium', variant: 'filled' }, style: { borderRadius: '12' } },
-        { when: { size: 'small', variant: 'filled' }, style: { borderRadius: '8' } },
-      ],
-      defaultVariants: { size: 'medium', variant: 'filled' },
+      defaultVariants: { variant: 'filled' },
       variants: {
-        size: {
-          large: { columnGap: '12', minHeight: '56', paddingInline: '20', typography: 'copy.16' },
-          medium: { columnGap: '8', minHeight: '40', paddingInline: '16', typography: 'copy.14' },
-          small: {
-            columnGap: '6',
-            minHeight: '32',
-            paddingInline: '12',
-            typography: 'copy.13',
-          },
-        },
         variant: {
-          filled: {
-            backgroundColor: 'grayAlpha.100',
-            border: 'none !custom',
-            borderRadius: '16',
-            selectors: { '&:hover:not([data-disabled])': { backgroundColor: 'grayAlpha.200' } },
-          },
-          ghost: {
-            backgroundColor: 'transparent !custom',
-            border: 'none !custom',
-            borderRadius: 'full',
-            selectors: { '&:hover:not([data-disabled])': { backgroundColor: 'grayAlpha.100' } },
-          },
+          filled: {},
+          // A 1px line and no fill. Focus darkens the line, and an invalid value fills it red.
           outlined: {
-            backgroundColor: 'background.surface',
-            border: '1px solid !custom',
-            borderColor: 'grayAlpha.300',
-            borderRadius: 'full',
-            selectors: { '&:hover:not([data-disabled])': { borderColor: 'grayAlpha.500' } },
+            backgroundColor: 'transparent !custom',
+            selectors: {
+              '&::before': { borderColor: 'line.primary' },
+              '&:where([aria-invalid="true"], [data-invalid], :has([aria-invalid="true"]))::before':
+                {
+                  borderColor: 'border.negative',
+                },
+            },
           },
         },
       },
@@ -106,22 +106,22 @@ export namespace styles {
   )
 
   /**
-   * Clear and trigger buttons at the end of a field. Each size insets the last button from the edge
-   * by the same amount as from the top, and a filled field rounds it by its radius minus that inset.
+   * Clear and trigger buttons at the end of a field. The last button sits 4px from the end and the
+   * top, and rounds by the field's radius minus that inset.
    */
   export const action = style(
     {
       alignItems: 'center',
       backgroundColor: 'transparent !custom',
       border: 'none !custom',
-      borderRadius: 'full',
+      borderRadius: '2xs',
       boxSizing: 'border-box',
-      color: 'gray.700',
+      color: 'content.tertiary',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       fontSize: '16',
-      height: '36',
+      height: '40',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
       outlineOffset: '2',
@@ -131,15 +131,16 @@ export namespace styles {
       transitionDuration: '160',
       transitionProperty: 'background-color, color, opacity, outline-color, transform !custom',
       transitionTimingFunction: 'snappy',
-      width: '36',
+      width: '40',
       selectors: {
         '&:active:not(:disabled)': {
           transform: 'scale(0.92) !custom',
           transitionDuration: '100',
         },
         '&:disabled': { cursor: 'default' },
-        '&:focus-visible': { outlineColor: 'blue.700' },
-        '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200', color: 'foreground' },
+        '[data-disabled] > &': { color: 'content.subtle' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover:not(:disabled)': { backgroundColor: 'container.strong', color: 'content.primary' },
         '&[data-ending-style], &[data-starting-style]': {
           opacity: '0 !custom',
           transform: 'scale(0.6) !custom',
@@ -150,22 +151,9 @@ export namespace styles {
           transitionTimingFunction: 'spring',
         },
         '&[data-popup-open] > svg': { transform: 'rotate(180deg) !custom' },
-        // Adjacent buttons touch, so their icons sit close together.
-        '[data-size="large"] > & + &': { marginInlineStart: '-12' },
-        '[data-size="medium"] > & + &': { marginInlineStart: '-8' },
-        '[data-size="small"] > & + &': { marginInlineStart: '-6' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-10' },
-        '[data-size="large"][data-variant="outlined"] > &:last-child': {
-          marginInlineEnd: '-14',
-        },
-        '[data-size="medium"] > &': { fontSize: '14', height: '28', width: '28' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-10' },
-        '[data-size="small"] > &': { fontSize: '12', height: '24', width: '24' },
-        '[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' },
+        // Adjacent buttons cancel the 8px gap, so their icons sit close together.
+        '& + &': { marginInlineStart: '-8' },
+        '&:last-child': { marginInlineEnd: '-12' },
       },
       '@media (forced-colors: active)': {
         outlineStyle: 'none !custom',
@@ -198,7 +186,10 @@ export namespace styles {
       padding: '0',
       // A zero width drops the input's intrinsic size from the field's min-content width.
       width: '0',
-      selectors: { '&::placeholder': { color: 'gray.900' } },
+      selectors: {
+        '&::placeholder': { color: 'content.tertiary' },
+        '&:disabled::placeholder': { color: 'content.subtle' },
+      },
     },
     { id: 'tds/web/select-field/input' },
   )