@tempoxyz/ds 0.3.6 → 0.3.7

package/src/web/components/SidebarMenu.tsx

@@ -12,7 +12,9 @@ import {
 import type * as zyzz from 'zyzz'
 import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
+import { Close } from '../icons/Close.js'
 import { style, variants } from '../zyzz.config.js'
+import { Button } from './Button.js'
 import * as TabBar from './internal/TabBar.js'
 import * as Text from './internal/Text.js'
 
@@ -262,6 +264,101 @@ export namespace SidebarMenu {
     export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.logo>
   }
 
+  /**
+   * Renders the brand at the top of a sidebar, such as a 20px `TempoLogo`, in the primary content
+   * color and 12px from the start edge of the items. Put it in `AppShell.SidebarHeader`. In an
+   * `AppShell` with `collapse`, it centers its content from 768px to 1023px, which fits
+   * `TempoLogo` with `type="mark"`.
+   *
+   * @example
+   * <AppShell.SidebarHeader>
+   *   <SidebarMenu.Mark>
+   *     <TempoLogo aria-label="Tempo" />
+   *   </SidebarMenu.Mark>
+   * </AppShell.SidebarHeader>
+   */
+  export function Mark(props: Mark.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.mark({ className, style: props.style, vars })} />
+  }
+
+  export namespace Mark {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.mark>
+  }
+
+  /**
+   * Renders a card at the bottom of a sidebar that promotes one task, such as setting up a
+   * passkey: `title`, an optional dismiss button, `children` as the description, then `action`,
+   * which spans the card. The card is a `group` named by its title. Put it in
+   * `AppShell.SidebarFooter`, above the account row. The collapsed sidebar of an `AppShell` with
+   * `collapse` hides it from 768px to 1023px.
+   *
+   * @example
+   * <SidebarMenu.Promo
+   *   action={
+   *     <Button size="small" variant="secondary">
+   *       Set up
+   *     </Button>
+   *   }
+   *   onDismiss={dismiss}
+   *   title="Set up a passkey"
+   * >
+   *   Sign in with Face ID or Touch ID instead of a code.
+   * </SidebarMenu.Promo>
+   */
+  export function Promo(props: Promo.Props) {
+    const { action, children, className, onDismiss, title, vars, ...attributes } = props
+    const id = useId()
+
+    return (
+      <div
+        aria-labelledby={id}
+        role="group"
+        {...attributes}
+        {...styles.promo({ className, style: props.style, vars })}
+      >
+        <div {...styles.promoHeader()}>
+          <span id={id} {...styles.promoTitle()}>
+            {title}
+          </span>
+          {onDismiss && (
+            <Button
+              aria-label="Dismiss"
+              onClick={onDismiss}
+              shape="icon"
+              size="small"
+              variant="tertiary"
+            >
+              <Close />
+            </Button>
+          )}
+        </div>
+        {children !== undefined && children !== null && (
+          <p {...styles.promoDescription()}>{children}</p>
+        )}
+        {action}
+      </div>
+    )
+  }
+
+  export namespace Promo {
+    export type Props = Omit<ComponentPropsWithRef<'div'>, 'title'> &
+      zyzz.Props.Variants<typeof styles.promo> & {
+        /** The call to action under the description, such as a small `secondary` `Button`. */
+        action?: ReactNode | undefined
+        /** The description in the secondary color. Absent, the action follows the title. */
+        children?: ReactNode | undefined
+        /**
+         * Called when the dismiss button is pressed. Remove the card in it. Absent, the card
+         * renders no dismiss button.
+         */
+        onDismiss?: (() => void) | undefined
+        /** The heading of the card, which names its group. */
+        title: ReactNode
+      }
+  }
+
   /**
    * Renders the `<nav>` landmark, labelled `Main` unless you pass `aria-label`. Give each
    * landmark on a page a distinct label. `size` sets 32, 36 or 56px rows, and `small` also uses
@@ -504,12 +601,12 @@ namespace styles {
       base: {
         display: 'flex',
         flexDirection: 'column',
-        rowGap: '2',
+        rowGap: '4',
         selectors: {
           // With the row gap of the menu, groups sit 24px below preceding content, or 16px in a
           // small menu.
-          '* + &': { marginTop: '1.375rem !custom' },
-          '[data-sidebar-menu-size="large"] * + &': { marginTop: '20' },
+          '* + &': { marginTop: '20' },
+          '[data-sidebar-menu-size="small"] &': { rowGap: '2' },
           '[data-sidebar-menu-size="small"] * + &': { marginTop: '0.875rem !custom' },
         },
       },
@@ -654,11 +751,64 @@ namespace styles {
     { id: 'tds/web/sidebar-menu/logo' },
   )
 
+  export const mark = variants(
+    {
+      base: {
+        alignItems: 'center',
+        color: 'content.primary',
+        display: 'flex',
+        paddingInlineStart: '12',
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '[data-app-shell-rail] &': { justifyContent: 'center', paddingInlineStart: '0' },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/mark' },
+  )
+
+  // A box at the `sm` radius pads by 16px.
+  export const promo = variants(
+    {
+      base: {
+        backgroundColor: 'container.regular',
+        borderRadius: 'sm',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '16',
+        rowGap: '12',
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: { '[data-app-shell-rail] &': { display: 'none !custom' } },
+        },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/promo' },
+  )
+
+  export const promoDescription = style(
+    { color: 'content.secondary', margin: '0', typography: 'body.b3' },
+    { id: 'tds/web/sidebar-menu/promo-description' },
+  )
+
+  // The dismiss button aligns its top edge with the first line of the title.
+  export const promoHeader = style(
+    { alignItems: 'flex-start', columnGap: '8', display: 'flex' },
+    { id: 'tds/web/sidebar-menu/promo-header' },
+  )
+
+  export const promoTitle = style(
+    { color: 'content.primary', flex: '1 !custom', minWidth: '0', typography: 'body.b2Strong' },
+    { id: 'tds/web/sidebar-menu/promo-title' },
+  )
+
   export const root = variants(
     {
-      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '2' },
+      // The Platform Wallet Sidebar spaces its items by 4px. Small rows keep 2px.
+      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '4' },
       defaultVariants: { size: 'medium' },
-      variants: { size: { large: { rowGap: '4' }, medium: {}, small: {} } },
+      variants: { size: { large: {}, medium: {}, small: { rowGap: '2' } } },
     },
     { id: 'tds/web/sidebar-menu' },
   )
@@ -669,11 +819,14 @@ namespace styles {
       flexDirection: 'column',
       // Nested labels line up with the trigger's label: icon width plus the icon gap.
       paddingInlineStart: '32',
-      paddingTop: '2',
-      rowGap: '2',
+      paddingTop: '4',
+      rowGap: '4',
       selectors: {
-        '[data-sidebar-menu-size="large"] &': { paddingTop: '4', rowGap: '4' },
-        '[data-sidebar-menu-size="small"] &': { paddingInlineStart: '24' },
+        '[data-sidebar-menu-size="small"] &': {
+          paddingInlineStart: '24',
+          paddingTop: '2',
+          rowGap: '2',
+        },
       },
       '@media (min-width: 768px) and (max-width: 1023px)': {
         selectors: { '[data-app-shell-rail] &': { paddingInlineStart: '0' } },

package/src/web/components/Spinner.tsx

@@ -8,8 +8,9 @@ import { style, variants } from '../zyzz.config.js'
  * An indeterminate loading indicator. Renders a Base UI `Progress.Root` with
  * `role="progressbar"`, no `aria-valuenow`, and the name `Loading`. The arc draws in
  * `currentColor` on a faint track, black in light mode and the text color in dark mode, and stops
- * rotating under `prefers-reduced-motion: reduce`. `elevated` places it on a 44px elevated tile
- * with a shadow.
+ * rotating under `prefers-reduced-motion: reduce`. `size` sets the ring to 16px or 40px, and the
+ * ring and its stroke scale together. `elevated` places a 16px ring on a 44px elevated tile with a
+ * shadow, whatever the `size`.
  *
  * - Pass `aria-label` to say what is loading, such as `Loading transactions`.
  * - Show it only after a short delay, so fast responses do not flash an indicator.
@@ -24,13 +25,13 @@ import { style, variants } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html | WCAG 2.2 Pause, Stop, Hide}
  */
 export function Spinner(props: Spinner.Props) {
-  const { className, elevated, vars, ...attributes } = props
+  const { className, elevated, size, vars, ...attributes } = props
 
   return (
     <BaseUi.Progress.Root
       aria-label="Loading"
       {...attributes}
-      {...styles.spinner({ className, elevated, style: props.style, vars })}
+      {...styles.spinner({ className, elevated, size, style: props.style, vars })}
       value={null}
     >
       <svg aria-hidden="true" {...styles.glyph()} fill="none" viewBox="0 0 16 16">
@@ -61,6 +62,8 @@ namespace styles {
       animation: `${rotation} 0.8s linear infinite !custom`,
       height: '100% !custom',
       width: '100% !custom',
+      // The stroke keeps its CSS width at every size, instead of scaling with the view box.
+      selectors: { '& > *': { vectorEffect: 'non-scaling-stroke !custom' } },
       '@media (prefers-reduced-motion: reduce)': { animation: 'none !custom' },
     },
     { id: 'tds/web/spinner/glyph' },
@@ -77,12 +80,12 @@ namespace styles {
         justifyContent: 'center',
         width: '16',
       },
-      defaultVariants: { elevated: false },
-      variants: {
-        // The tile is a 44px square around the 16px ring.
-        elevated: {
-          false: {},
-          true: {
+      // The designs draw the elevated tile only around the 16px ring, so the tile outranks `size`.
+      // The tile is a 44px square around the 16px ring.
+      compoundVariants: [
+        {
+          when: { elevated: true },
+          style: {
             backgroundColor: 'background.elevated',
             borderRadius: 'xs',
             // Web has no elevated shadow step, so this repeats the Mobile `shadow.elevated` layers, in
@@ -90,7 +93,27 @@ namespace styles {
             boxShadow: '0 12px 36px #0000000a, 0 8px 32px #0000000a, 0 4px 12px #0000000a !custom',
             height: '44',
             width: '44',
-            selectors: { '& > svg': { height: '16', width: '16' } },
+            selectors: {
+              '& > svg': { height: '16', width: '16' },
+              '& > svg > *': { strokeWidth: '1px !custom' },
+            },
+          },
+        },
+      ],
+      defaultVariants: { elevated: false, size: '16' },
+      variants: {
+        elevated: { false: {}, true: {} },
+        /**
+         * The width and height of the ring, in pixels. The 40px ring draws a 2.5px stroke.
+         *
+         * @default '16'
+         */
+        size: {
+          '16': {},
+          '40': {
+            height: '40',
+            width: '40',
+            selectors: { '& > svg > *': { strokeWidth: '2.5px !custom' } },
           },
         },
       },

package/src/web/components/SuccessHero.tsx

@@ -201,9 +201,8 @@ namespace styles {
     { id: 'tds/web/success-hero/body' },
   )
 
-  // Figma draws the caption at 50% white, which no variable holds.
   export const caption = style(
-    { color: '#ffffff80 !custom', margin: '0', typography: 'body.b3Strong' },
+    { color: 'overlay.content.tertiary', margin: '0', typography: 'body.b3Strong' },
     { id: 'tds/web/success-hero/caption' },
   )
 
@@ -219,9 +218,8 @@ namespace styles {
     { id: 'tds/web/success-hero/content' },
   )
 
-  // Figma draws the description at 60% white, which no variable holds.
   export const description = style(
-    { color: '#ffffff99 !custom', margin: '0', typography: 'body.b2' },
+    { color: 'overlay.content.secondary', margin: '0', typography: 'body.b2' },
     { id: 'tds/web/success-hero/description' },
   )
 

package/src/web/components/Surface.tsx

@@ -199,7 +199,7 @@ namespace styles {
     {
       base: {
         backgroundColor: 'background.elevated',
-        borderColor: 'line.secondary',
+        borderColor: 'line.card',
         borderStyle: 'solid',
         borderWidth: 'regular',
         boxSizing: 'border-box',

package/src/web/components/Switch.tsx

@@ -131,7 +131,7 @@ namespace styles {
           '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
           '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
           '&:hover:not([data-disabled]):not([data-checked])': { backgroundColor: 'line.primary' },
-          '&[data-checked]': { backgroundColor: 'content.accent' },
+          '&[data-checked]': { backgroundColor: 'inverse.background.primary' },
           '&[data-checked]:hover:not([data-disabled])': { opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {

package/src/web/components/Toast.tsx

@@ -309,7 +309,7 @@ namespace styles {
 
   export const root = style(
     {
-      backgroundColor: 'background.elevated',
+      backgroundColor: 'background.menu',
       borderRadius: 'sm',
       boxShadow: 'large',
       boxSizing: 'border-box',
@@ -328,6 +328,19 @@ namespace styles {
       userSelect: 'none',
       zIndex: 'calc(1000 - var(--toast-index)) !custom',
       selectors: {
+        // The 1px card line is inset, so it adds nothing to the height that Base UI measures.
+        '&::before': {
+          borderColor: 'line.card',
+          borderRadius: 'inherit !custom',
+          borderStyle: 'solid !custom',
+          borderWidth: 'regular',
+          boxSizing: 'border-box',
+          content: '"" !custom',
+          cornerShape: 'inherit !custom',
+          inset: '0',
+          pointerEvents: 'none',
+          position: 'absolute',
+        },
         '&::after': {
           content: '"" !custom',
           height: '16',

package/src/web/components/Token.tsx

@@ -82,11 +82,9 @@ namespace styles {
   export const token = style(
     {
       alignItems: 'center',
-      backgroundColor: 'background.elevated',
-      borderColor: 'line.primary',
+      backgroundColor: 'container.selected',
+      border: 'none !custom',
       borderRadius: 'full',
-      borderStyle: 'solid',
-      borderWidth: 'regular',
       boxSizing: 'border-box',
       color: 'content.primary',
       columnGap: '8',

package/src/web/index.ts

@@ -10,6 +10,7 @@ export { AssetChip } from './components/AssetChip.js'
 export { Autocomplete } from './components/Autocomplete.js'
 export { Avatar } from './components/Avatar.js'
 export { Badge } from './components/Badge.js'
+export { BadgedLogo } from './components/BadgedLogo.js'
 export { Banner } from './components/Banner.js'
 export { BarChart } from './components/BarChart.js'
 export { Breadcrumbs } from './components/Breadcrumbs.js'

package/src/web/vars.ts

@@ -384,12 +384,16 @@ export const variables = Vars.define(
           },
         },
       },
+      // Dark mode lifts the page to 92% black, and the elevated and menu fills step lighter from
+      // it, at the Platform primitive solid steps 090 and 087, which TDS 1.0 Core has no step for.
       background: {
-        elevated: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
-        primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['004'] },
+        elevated: { dark: '#1a1a1a', light: vars.color.neutral['000'] },
+        menu: { dark: '#222', light: vars.color.neutral['000'] },
+        primary: { dark: vars.color.neutral['092'], light: vars.color.neutral['004'] },
         secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
-        // The layouts fill the sidebar and the page header a step lighter than the page.
-        sidebar: { dark: vars.color.neutral['096'], light: '#fafafa' },
+        // The layouts fill the sidebar a step lighter than the page in light mode, and with the page
+        // in dark mode.
+        sidebar: { dark: vars.color.neutral['092'], light: '#fafafa' },
       },
       border: {
         focus: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
@@ -457,6 +461,8 @@ export const variables = Vars.define(
       },
       container: {
         accent: vars.color.accent.alpha.regular.blue['100'],
+        // The quiet fill of inputs and other controls.
+        control: { dark: vars.color.neutral.tint['004'], light: vars.color.neutral.shade['004'] },
         negative: {
           dark: vars.color.accent.alpha.regular.red['200'],
           light: vars.color.accent.alpha.regular.red['100'],
@@ -468,6 +474,10 @@ export const variables = Vars.define(
         // Dark mode fills the regular container at 8% white, dimmer than Figma's 12%, so badges and
         // other soft fills recede on the dark page.
         regular: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+        // The fill of a selected option, such as a picker row.
+        selected: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral['000'] },
+        // An opaque fill at the Platform primitive solid steps 079 and 010.
+        solid: { dark: '#353535', light: '#e6e6e6' },
         strong: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
         special: 'rgb(126 89 228 / 0.08)',
         subtle: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['003'] },
@@ -500,6 +510,8 @@ export const variables = Vars.define(
         },
       },
       line: {
+        // The border of a card, at 5% white in dark mode.
+        card: { dark: '#ffffff0d', light: vars.color.neutral.shade['008'] },
         primary: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['016'] },
         // Dark mode draws the secondary line at 8% white, dimmer than Figma's 16%, so the borders
         // and dividers recede on the dark fills.
@@ -508,6 +520,8 @@ export const variables = Vars.define(
       },
       material: {
         regular: { dark: vars.color.neutral.tint['048'], light: vars.color.neutral.shade['040'] },
+        // The grain over a material, at 7%.
+        texture: { dark: '#ffffff12', light: '#00000012' },
         thick: { dark: vars.color.neutral.tint['064'], light: vars.color.neutral.shade['060'] },
         thin: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
         ultrathick: {
@@ -523,13 +537,19 @@ export const variables = Vars.define(
           tertiary: { fill: { hover: vars.color.neutral.tint['012'] } },
         },
         container: { regular: '#70707052' },
-        content: { primary: vars.color.neutral['000'] },
+        content: {
+          primary: vars.color.neutral['000'],
+          secondary: vars.color.neutral.tint['064'],
+          tertiary: vars.color.neutral.tint['052'],
+        },
       },
       scrim: {
         regular: vars.color.neutral.shade['016'],
         strong: vars.color.neutral.shade['032'],
       },
       shadow: {
+        // The shadow under elevated fills, such as menus and modals.
+        elevated: { dark: '#0000003d', light: vars.color.neutral.shade['012'] },
         primary: { dark: vars.color.neutral.shade['032'], light: vars.color.neutral.shade['008'] },
         secondary: {
           dark: vars.color.neutral.shade['016'],