@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/Button.tsx

@@ -7,11 +7,16 @@ import { Spinner } from './Spinner.js'
 
 /**
  * A native `<button>` for actions, built on Base UI Button. It scales slightly while pressed and
- * shows a blue outline on keyboard focus.
+ * shows an outline on keyboard focus.
  *
  * - Use `Button` for actions and `Button.Link` for navigation.
  * - Label with a specific verb, such as Send payment. Give `shape="icon"` buttons, which render as circles, an `aria-label`.
- * - Keep one `primary` button per view or section. Reserve `negative` for destructive actions.
+ * - Keep one `primary` button per view or section, and give the others `secondary` or `tertiary`.
+ * - Use `danger` for the action that confirms a destructive outcome, such as Revoke key.
+ * - Set `appearance="inverse"` on an inverse surface, such as a dark banner on a light page, and
+ *   `appearance="overlay"` over an image or video.
+ * - Use `large` for the actions in a dialog footer. Keep `xsmall` pills for actions inside a row
+ *   or field, never for the main action.
  * - Set `focusableWhenDisabled` when a disabled button needs to stay reachable while nearby text
  *   explains why it is unavailable.
  *
@@ -28,6 +33,7 @@ import { Spinner } from './Spinner.js'
  */
 export function Button(props: Button.Props) {
   const {
+    appearance,
     children,
     className,
     disabled,
@@ -42,7 +48,7 @@ export function Button(props: Button.Props) {
   return (
     <BaseUi.Button
       {...attributes}
-      {...styles.button({ className, shape, size, style: props.style, variant, vars })}
+      {...styles.button({ appearance, className, shape, size, style: props.style, variant, vars })}
       aria-busy={loading || undefined}
       data-loading={loading || undefined}
       disabled={disabled || loading}
@@ -71,13 +77,24 @@ export namespace Button {
    * `render` takes a router's link, such as `<Link to="/" />`.
    */
   export function Link(props: Link.Props) {
-    const { children, className, ref, render, shape, size, variant, vars, ...attributes } = props
+    const {
+      appearance,
+      children,
+      className,
+      ref,
+      render,
+      shape,
+      size,
+      variant,
+      vars,
+      ...attributes
+    } = props
 
     return useRender({
       defaultTagName: 'a',
       props: {
         ...attributes,
-        ...styles.button({ className, shape, size, style: props.style, variant, vars }),
+        ...styles.button({ appearance, className, shape, size, style: props.style, variant, vars }),
         children: <span {...styles.content({ loading: false })}>{children}</span>,
       },
       ref,
@@ -96,30 +113,32 @@ namespace styles {
       base: {
         alignItems: 'center',
         border: 'none !custom',
+        borderRadius: 'xs',
         boxSizing: 'border-box',
-        columnGap: '8',
+        columnGap: '4',
         cursor: 'pointer',
         display: 'inline-flex',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
-        outlineOffset: '2',
+        outlineOffset: '0',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
         position: 'relative',
         textDecoration: 'none !custom',
         transitionDuration: '160',
-        transitionProperty:
-          'background-color, box-shadow, color, opacity, outline-color, scale !custom',
+        transitionProperty: 'background-color, color, opacity, outline-color, scale !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2Strong',
         userSelect: 'none',
         whiteSpace: 'nowrap',
         selectors: {
+          '& > span > svg': { flexShrink: '0 !custom', fontSize: '16' },
           '&:active:not(:disabled)': {
             scale: 'press',
             transitionDuration: '100',
           },
           '&:disabled': { cursor: 'default', opacity: 'disabled' },
-          '&:focus-visible': { outlineColor: 'blue.700' },
+          '&:focus-visible': { outlineColor: 'action.focusRing' },
           '&[data-loading]': { opacity: '1 !custom' },
         },
         '@media (forced-colors: active)': {
@@ -131,64 +150,162 @@ namespace styles {
           selectors: { '&:active:not(:disabled)': { scale: 'none !custom' } },
         },
       },
-      // Icon buttons are circles at every size, so the shape outranks the size radius and padding.
+      // Icon buttons are circles at every size, so the shape outranks the size padding and width.
       compoundVariants: [
-        { when: { shape: 'icon' }, style: { borderRadius: 'full', paddingInline: '0' } },
+        {
+          when: { shape: 'icon' },
+          style: {
+            borderRadius: 'full',
+            cornerShape: 'round',
+            flexShrink: '0 !custom',
+            minWidth: '0',
+            paddingInline: '0',
+            selectors: { '& > span:first-child': { minWidth: '0 !custom' } },
+          },
+        },
+        // The Platform Icon Button fills its primary circle a step lighter than the primary
+        // Button in light mode.
+        {
+          when: { appearance: 'base', shape: 'icon', variant: 'primary' },
+          style: { backgroundColor: 'inverse.background.secondary' },
+        },
+        // The focus ring of the page blends into an inverse surface, so an inverse button draws
+        // its ring in the inverse text color, 2px out, where the surface separates it from a fill
+        // of the same color.
+        {
+          when: { appearance: 'inverse' },
+          style: {
+            selectors: {
+              '&:focus-visible': { outlineColor: 'inverse.content.primary', outlineOffset: '2' },
+            },
+          },
+        },
+        // The inverse and overlay appearances have no pressed design, so a press keeps the hover
+        // fill. Their primary fill also stays the same on hover.
+        {
+          when: { appearance: ['inverse', 'overlay'], variant: 'primary' },
+          style: {
+            backgroundColor: 'background.secondary',
+            color: 'content.primary',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': { backgroundColor: 'background.secondary' },
+            },
+          },
+        },
+        {
+          when: { appearance: 'inverse', variant: 'secondary' },
+          style: {
+            backgroundColor: 'inverse.container.regular',
+            color: 'inverse.content.primary',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'inverse.container.regular',
+              },
+            },
+          },
+        },
+        // Figma paints the overlay fills as gray literals that no variable holds. Hover lightens
+        // the fill.
+        {
+          when: { appearance: 'overlay', variant: 'secondary' },
+          style: {
+            backgroundColor: '#70707052 !custom',
+            color: 'inverse.content.primary',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': { backgroundColor: '#70707048 !custom' },
+            },
+          },
+        },
+        {
+          when: { appearance: ['inverse', 'overlay'], variant: 'tertiary' },
+          style: {
+            color: 'inverse.content.primary',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': { backgroundColor: 'neutral.tint.012' },
+            },
+          },
+        },
       ],
-      defaultVariants: { shape: 'default', size: 'medium', variant: 'primary' },
+      defaultVariants: { appearance: 'base', shape: 'default', size: 'medium', variant: 'primary' },
       variants: {
+        /**
+         * The surface under the button: the page for `base`, an inverse surface, such as
+         * `inverse.background.primary`, for `inverse`, and an image or video for `overlay`. On
+         * both of the last two, `primary` takes the page's background and text colors, and
+         * `secondary` and `tertiary` take the inverse text color.
+         *
+         * @default 'base'
+         */
+        appearance: { base: {}, inverse: {}, overlay: {} },
         shape: {
           default: {},
           icon: { aspectRatio: '1 !custom' },
         },
-        // Heights and radii match the `size` scale of the text fields.
+        // `xsmall` is a pill for actions inside a row or field. The others keep radius `xs` and an 80px
+        // minimum width, set on the label net of the padding, so a flex row never shrinks a button
+        // below its label.
         size: {
           large: {
-            borderRadius: '16',
-            height: '56',
+            height: '48',
             paddingInline: '32',
-            typography: 'button.16',
+            selectors: { '& > span:first-child': { minWidth: '1rem !custom' } },
           },
           medium: {
-            borderRadius: '12',
             height: '40',
-            paddingInline: '20',
-            typography: 'button.14',
+            paddingInline: '24',
+            selectors: { '& > span:first-child': { minWidth: '2rem !custom' } },
           },
           small: {
-            borderRadius: '8',
             height: '32',
+            paddingInline: '16',
+            selectors: { '& > span:first-child': { minWidth: '3rem !custom' } },
+          },
+          xsmall: {
+            borderRadius: 'full',
+            cornerShape: 'round',
+            height: '24',
             paddingInline: '12',
-            typography: 'button.12',
+            typography: 'body.b3Strong',
+            selectors: { '& > span > svg': { fontSize: '12' } },
           },
         },
+        // Each pressed fill follows its hover fill, so it wins while the pointer stays over the
+        // button.
         variant: {
-          negative: {
-            backgroundColor: 'red.800',
-            color: 'white',
-            selectors: { '&:hover:not(:disabled)': { backgroundColor: 'red.900' } },
+          // The Platform Button has no pressed design for `danger`, so a press keeps the hover fill.
+          danger: {
+            backgroundColor: 'action.danger.fill.rest',
+            color: 'action.danger.label.rest',
+            selectors: {
+              '&:is(:hover, :active):not(:disabled)': {
+                backgroundColor: 'action.danger.fill.hover',
+              },
+            },
           },
+          // The Platform Button paints its primary fill and label with the inverse colors.
           primary: {
-            backgroundColor: 'foreground',
-            backgroundImage:
-              'linear-gradient(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0)) !custom',
-            boxShadow: 'raised',
-            color: 'background.primary',
-            selectors: { '&:hover:not(:disabled)': { opacity: 'hover' } },
+            backgroundColor: 'inverse.background.primary',
+            color: 'inverse.content.primary',
+            selectors: {
+              '&:hover:not(:disabled)': { backgroundColor: 'action.primary.fill.hover' },
+              '&:active:not(:disabled)': { backgroundColor: 'action.primary.fill.pressed' },
+            },
           },
-          // Matches the Input field fill.
           secondary: {
-            backgroundColor: 'grayAlpha.100',
-            color: 'foreground',
+            backgroundColor: 'component.button.secondary.fill',
+            color: 'content.primary',
             selectors: {
-              '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
-              '&:active:not(:disabled)': { backgroundColor: 'grayAlpha.300' },
+              '&:hover:not(:disabled)': { backgroundColor: 'action.secondary.fill.hover' },
+              '&:active:not(:disabled)': { backgroundColor: 'action.secondary.fill.pressed' },
             },
           },
-          text: {
-            backgroundColor: 'transparent !custom',
-            color: 'foreground',
-            selectors: { '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.100' } },
+          tertiary: {
+            backgroundColor: 'component.button.tertiary.fill',
+            color: 'content.primary',
+            selectors: {
+              '&:hover:not(:disabled)': { backgroundColor: 'action.tertiary.fill.hover' },
+              '&:active:not(:disabled)': { backgroundColor: 'action.tertiary.fill.pressed' },
+            },
           },
         },
       },
@@ -202,6 +319,7 @@ namespace styles {
         alignItems: 'inherit !custom',
         columnGap: 'inherit !custom',
         display: 'inline-flex',
+        justifyContent: 'center',
         transitionDuration: '160',
         transitionProperty: 'opacity, visibility !custom',
         transitionTimingFunction: 'snappy',

package/src/web/components/ButtonGroup.tsx

@@ -0,0 +1,59 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+/**
+ * Lays out the actions at the foot of a dialog or flow. Renders a `div` with `role="group"` and an
+ * 8px gap. `horizontal` gives each button an equal share of the row, and `vertical` stretches
+ * each button to the full width.
+ *
+ * - In a pair, put the `secondary` action first, so the `primary` action sits on the right.
+ * - In a stack, put the `primary` action first and a `tertiary` action, such as Not now, below it.
+ * - Give every button in a dialog footer the `large` size.
+ *
+ * @example
+ * <ButtonGroup>
+ *   <Button size="large" variant="secondary">
+ *     Cancel
+ *   </Button>
+ *   <Button size="large">Confirm</Button>
+ * </ButtonGroup>
+ *
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ | WAI-ARIA APG Button pattern}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html | WCAG 2.2 Meaningful Sequence}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html | WCAG 2.2 Focus Order}
+ */
+export function ButtonGroup(props: ButtonGroup.Props) {
+  const { className, orientation, vars, ...attributes } = props
+
+  return (
+    <div
+      role="group"
+      {...attributes}
+      {...styles.group({ className, orientation, style: props.style, vars })}
+    />
+  )
+}
+
+export namespace ButtonGroup {
+  export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.group>
+}
+
+namespace styles {
+  export const group = variants(
+    {
+      base: { display: 'flex', gap: '8' },
+      defaultVariants: { orientation: 'horizontal' },
+      variants: {
+        orientation: {
+          horizontal: {
+            flexDirection: 'row',
+            selectors: { '& > *': { flex: '1 !custom' } },
+          },
+          vertical: { alignItems: 'stretch', flexDirection: 'column' },
+        },
+      },
+    },
+    { id: 'tds/web/button-group' },
+  )
+}

package/src/web/components/Calendar.tsx

@@ -183,7 +183,7 @@ export function Calendar(props: Calendar.Props) {
           disabled={min !== undefined && key(addDays(month, -1)) < key(min)}
           onClick={() => showMonth(addMonths(month, -1))}
           shape="icon"
-          variant="text"
+          variant="tertiary"
         >
           <ChevronLeft />
         </Button>
@@ -195,7 +195,7 @@ export function Calendar(props: Calendar.Props) {
           disabled={max !== undefined && key(addMonths(month, 1)) > key(max)}
           onClick={() => showMonth(addMonths(month, 1))}
           shape="icon"
-          variant="text"
+          variant="tertiary"
         >
           <ChevronRight />
         </Button>
@@ -436,7 +436,7 @@ namespace styles {
       textAlign: 'center',
       width: '40',
       selectors: {
-        '&[data-in-range]': { backgroundColor: 'grayAlpha.100' },
+        '&[data-in-range]': { backgroundColor: 'container.regular' },
         '&[data-range-end]': { borderEndEndRadius: 'full', borderStartEndRadius: 'full' },
         '&[data-range-start]': { borderEndStartRadius: 'full', borderStartStartRadius: 'full' },
       },
@@ -451,7 +451,8 @@ namespace styles {
       border: 'none !custom',
       borderRadius: 'full',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       height: '40',
@@ -466,20 +467,21 @@ namespace styles {
       transitionProperty:
         'background-color, color, opacity, outline-color, outline-offset, transform',
       transitionTimingFunction: 'snappy',
-      typography: 'label.14.strong',
+      typography: 'body.b2Strong',
       width: '40',
       selectors: {
         '&:active:not([aria-disabled="true"])': { transform: 'scale(0.96) !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
         '&:hover:not([aria-disabled="true"]):not([data-selected])': {
-          backgroundColor: 'grayAlpha.200',
+          backgroundColor: 'container.strong',
         },
         '&[aria-disabled="true"]': { cursor: 'default', opacity: 'disabled' },
-        '&[data-selected]': { backgroundColor: 'foreground', color: 'background.primary' },
+        '&[data-selected]': { backgroundColor: 'content.primary', color: 'background.primary' },
         '&[data-today]::after': {
-          backgroundColor: 'blue.700',
+          backgroundColor: 'accent.blue.background',
           borderRadius: 'full',
           content: '"" !custom',
+          cornerShape: 'round',
           height: '4',
           insetBlockEnd: '4',
           insetInlineStart: '50% !custom',
@@ -510,7 +512,7 @@ namespace styles {
   export const root = style(
     {
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       display: 'inline-flex',
       flexDirection: 'column',
       gap: '8',
@@ -520,17 +522,17 @@ namespace styles {
   )
 
   export const title = style(
-    { textAlign: 'center', typography: 'label.14.strong' },
+    { textAlign: 'center', typography: 'body.b2Strong' },
     { id: 'tds/web/calendar/title' },
   )
 
   export const weekday = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       height: '32',
       padding: '0',
       textAlign: 'center',
-      typography: 'label.12',
+      typography: 'body.b3',
       width: '40',
     },
     { id: 'tds/web/calendar/weekday' },

package/src/web/components/Checkbox.tsx

@@ -1,9 +1,10 @@
 import * as BaseUi from '@base-ui/react/checkbox'
-import type { ComponentPropsWithRef } from 'react'
+import { type ComponentPropsWithRef, useContext } from 'react'
 import type * as zyzz from 'zyzz'
 import { Check } from '../icons/Check.js'
 import { Minus } from '../icons/Minus.js'
 import { style, variants } from '../zyzz.config.js'
+import * as RowDisabled from './internal/RowDisabled.js'
 
 /**
  * A checkbox for an independent on or off choice. Base UI renders a `span` with the `checkbox` role
@@ -32,10 +33,12 @@ import { style, variants } from '../zyzz.config.js'
  */
 export function Checkbox(props: Checkbox.Props) {
   const { className, size, vars, ...attributes } = props
+  const rowDisabled = useContext(RowDisabled.Context)
 
   return (
     <BaseUi.Checkbox.Root
       {...attributes}
+      disabled={attributes.disabled || rowDisabled}
       {...styles.checkbox({ className, size, style: props.style, vars })}
     >
       <BaseUi.Checkbox.Indicator {...styles.indicator()}>
@@ -79,9 +82,9 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.300',
+        backgroundColor: 'container.strong',
         boxSizing: 'border-box',
-        color: 'background.surface',
+        color: 'background.elevated',
         cursor: 'pointer',
         display: 'inline-flex',
         flexShrink: '0 !custom',
@@ -98,14 +101,14 @@ namespace styles {
         selectors: {
           '&::after': { content: '"" !custom', inset: '-10', position: 'absolute' },
           '&:active:not([data-disabled])': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover:not([data-disabled])': { backgroundColor: 'grayAlpha.400' },
-          '&[data-checked], &[data-indeterminate]': { backgroundColor: 'foreground' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover:not([data-disabled])': { backgroundColor: 'line.primary' },
+          '&[data-checked], &[data-indeterminate]': { backgroundColor: 'content.primary' },
           '&[data-checked]:hover:not([data-disabled]), &[data-indeterminate]:hover:not([data-disabled])':
-            { backgroundColor: 'foreground', opacity: 'hover' },
+            { backgroundColor: 'content.primary', opacity: 'hover' },
           '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
           '&[data-invalid]': {
-            outlineColor: 'red.800',
+            outlineColor: 'border.negative',
             outlineStyle: 'solid !custom',
             outlineWidth: '1',
           },
@@ -120,19 +123,19 @@ namespace styles {
         // Indicator sizes: 16, 20 and 24px. The hit area stays at least 36px.
         size: {
           large: {
-            borderRadius: '8',
+            borderRadius: '2xs',
             height: '24',
             width: '24',
             selectors: { '& > span': { fontSize: '18' } },
           },
           medium: {
-            borderRadius: '6',
+            borderRadius: '2xs',
             height: '20',
             width: '20',
             selectors: { '& > span': { fontSize: '14' } },
           },
           small: {
-            borderRadius: '4',
+            borderRadius: '3xs',
             height: '16',
             width: '16',
             selectors: { '& > span': { fontSize: '12' } },