@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/OtpField.tsx

@@ -2,13 +2,14 @@ import * as BaseUi from '@base-ui/react/otp-field'
 import { type ComponentPropsWithRef, createContext, useContext } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { style, variants, vars } from '../zyzz.config.js'
+import { style, vars } from '../zyzz.config.js'
 
 const InvalidContext = createContext(false)
 
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
- * Setting `invalid` nudges the slots sideways and setting `success` pops them in sequence.
+ * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
+ * green and pops them in sequence.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -30,9 +31,11 @@ const InvalidContext = createContext(false)
  */
 export namespace OtpField {
   /**
-   * Owns the code and renders the slot group. `length` is required. `validationType` accepts
-   * `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. `size` sets slots to 32, 40 or 56px
-   * tall. Pass `children` to place `Input` slots yourself.
+   * Owns the code and renders the slot group, which fills its container. `length` is required.
+   * `validationType` accepts `'numeric'`, `'alpha'`, `'alphanumeric'` and `'none'`. Slots are 56px
+   * tall and at least 44px wide unless the container is narrower, and the focused slot is 3px wider
+   * than the others. Inside `Field.Root`, its message sits 8px below the slots. Pass `children` to
+   * place `Input` slots yourself.
    */
   export function Root(props: Root.Props) {
     const {
@@ -40,7 +43,6 @@ export namespace OtpField {
       className,
       invalid = false,
       length,
-      size,
       success = false,
       vars,
       ...attributes
@@ -50,8 +52,9 @@ export namespace OtpField {
       <InvalidContext.Provider value={invalid}>
         <BaseUi.OTPField.Root
           {...attributes}
-          {...styles.root({ className, size, style: props.style, vars })}
+          {...styles.root({ className, style: props.style, vars })}
           data-invalid={invalid || undefined}
+          data-otp-field=""
           data-success={success || undefined}
           length={length}
         >
@@ -133,50 +136,32 @@ namespace styles {
   export const input = style(
     {
       appearance: 'none !custom',
-      backgroundColor: 'grayAlpha.100',
+      backgroundColor: 'container.regular',
       border: 'none !custom',
       boxSizing: 'border-box',
-      caretColor: 'blue.700',
-      color: 'foreground',
-      // Every state keeps this stroke width. Invalid and success rings sit inside the slot, so
-      // adjacent rings keep the full gap between slots. Focus differs by color and its offset ring.
+      caretColor: 'content.primary',
+      color: 'content.primary',
+      // The 1.5px focus stroke sits inside the slot, so it keeps the full gap to the next slot.
       outlineColor: 'transparent !custom',
-      outlineOffset: '0',
+      outlineOffset: '-1.5px !custom',
       outlineStyle: 'solid !custom',
-      outlineWidth: '2',
+      outlineWidth: '1.5px !custom',
       padding: '0',
       textAlign: 'center',
-      transitionDuration: '200',
-      transitionProperty: 'background-color, color, opacity, outline-color, outline-offset, scale',
-      transitionTimingFunction: 'overshoot',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, opacity, outline-color',
+      transitionTimingFunction: 'snappy',
       selectors: {
         '&:disabled': { opacity: 'disabled' },
-        '&:focus': { scale: '1.06 !custom' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-        '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
-        '&[data-invalid], [data-invalid] &': {
-          caretColor: 'red.900',
-          color: 'red.900',
-          outlineColor: 'red.800',
-          outlineOffset: '-2px !custom',
-        },
+        // `:where` keeps the hover fill below the focus, invalid and success fills.
+        '&:where(:hover:not(:disabled))': { backgroundColor: 'container.strong' },
+        '&:focus-visible': { backgroundColor: 'background.elevated', outlineColor: 'border.focus' },
+        // Invalid and success fills follow focus, so a focused slot keeps its state fill.
+        '&[data-invalid], [data-invalid] &': { backgroundColor: 'container.negative' },
         '[data-success] &': {
           animation: `${pop} 320ms ${vars.ease.overshoot} both !custom`,
-          // A translucent tint of the green ring, so success blends with the surface behind it.
-          backgroundColor: 'light-dark(rgb(19 169 99 / 0.12), rgb(19 169 99 / 0.16)) !custom',
-          caretColor: 'green.900',
-          color: 'green.900',
-          outlineColor: 'green.700',
-          outlineOffset: '-2px !custom',
-        },
-        '[data-success] &:hover:not(:disabled)': {
-          backgroundColor: 'light-dark(rgb(19 169 99 / 0.18), rgb(19 169 99 / 0.24)) !custom',
+          backgroundColor: 'container.positive',
         },
-        // Keyboard focus keeps its offset ring on an invalid or successful slot.
-        '&[data-invalid]:focus-visible, [data-invalid] &:focus-visible, [data-success] &:focus-visible':
-          {
-            outlineOffset: '2px !custom',
-          },
         // Delays follow the `animation` shorthand above, which would otherwise reset them.
         '[data-success] &:nth-child(2)': { animationDelay: '40ms !custom' },
         '[data-success] &:nth-child(3)': { animationDelay: '80ms !custom' },
@@ -187,76 +172,40 @@ namespace styles {
         '[data-success] &:nth-child(8)': { animationDelay: '280ms !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, color, opacity, outline-color',
-        selectors: {
-          '&:focus': { scale: 'none !custom' },
-          '[data-success] &': { animation: 'none !custom' },
-        },
+        selectors: { '[data-success] &': { animation: 'none !custom' } },
       },
     },
     { id: 'tds/web/otp-field/input' },
   )
 
-  export const root = variants(
+  export const root = style(
     {
-      base: {
-        alignItems: 'center',
-        display: 'inline-flex',
-        // Slots shrink to the available width instead of wrapping, so a code stays on one row. A
-        // zero minimum width keeps the slots' intrinsic widths from widening a grid or flex parent.
-        flexWrap: 'nowrap',
-        maxWidth: '100% !custom',
-        minWidth: '0',
-        selectors: {
-          '&[data-invalid]': { animation: `${nudge} 360ms ${vars.ease.snappy} !custom` },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          selectors: { '&[data-invalid]': { animation: 'none !custom' } },
+      alignItems: 'center',
+      columnGap: '8',
+      display: 'flex',
+      // Slots shrink to the available width instead of wrapping, so a code stays on one row. A
+      // zero minimum width keeps the slots' intrinsic widths from widening a grid or flex parent.
+      flexWrap: 'nowrap',
+      maxWidth: '100% !custom',
+      minWidth: '0',
+      selectors: {
+        // Slots start 44px wide and grow to fill the field. The width also sets the size that a
+        // parent sizing the field to its content reads, instead of the input's intrinsic width.
+        '& > input': {
+          borderRadius: 'xs',
+          flex: '1 1 auto !custom',
+          height: '56',
+          minWidth: '0',
+          typography: 'body.b1Strong',
+          width: '44',
         },
+        // The design lays out the 1.5px focus stroke of a slot, so the focused slot takes 3px more
+        // of the row than the others.
+        '& > input:focus-visible': { width: 'calc(2.75rem + 3px) !custom' },
+        '&[data-invalid]': { animation: `${nudge} 360ms ${vars.ease.snappy} !custom` },
       },
-      defaultVariants: { size: 'medium' },
-      variants: {
-        // Cells follow the shared control scale: 32, 40 and 56px tall at full width, and keep their
-        // proportions as they shrink. The root sizes its own cells, so a `data-size` on an ancestor
-        // cannot change them.
-        size: {
-          large: {
-            columnGap: '8',
-            selectors: {
-              '& > input': {
-                aspectRatio: '6 / 7 !custom',
-                borderRadius: '16',
-                flex: '0 1 3rem !custom',
-                minWidth: '0',
-                typography: 'copy.24',
-              },
-            },
-          },
-          medium: {
-            columnGap: '8',
-            selectors: {
-              '& > input': {
-                aspectRatio: '9 / 10 !custom',
-                borderRadius: '12',
-                flex: '0 1 2.25rem !custom',
-                minWidth: '0',
-                typography: 'copy.18',
-              },
-            },
-          },
-          small: {
-            columnGap: '4',
-            selectors: {
-              '& > input': {
-                aspectRatio: '7 / 8 !custom',
-                borderRadius: '8',
-                flex: '0 1 1.75rem !custom',
-                minWidth: '0',
-                typography: 'copy.14',
-              },
-            },
-          },
-        },
+      '@media (prefers-reduced-motion: reduce)': {
+        selectors: { '&[data-invalid]': { animation: 'none !custom' } },
       },
     },
     { id: 'tds/web/otp-field' },

package/src/web/components/Pagination.tsx

@@ -195,7 +195,8 @@ namespace styles {
         alignItems: 'center',
         borderRadius: 'full',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         height: '40',
@@ -211,12 +212,12 @@ namespace styles {
         transitionProperty: 'background-color, color, outline-color, outline-offset, transform',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
-        typography: 'button.14',
+        typography: 'body.b2Strong',
         selectors: {
           '&:active:is(a)': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover:is(a)': { backgroundColor: 'grayAlpha.100' },
-          '&[data-ellipsis]': { color: 'gray.900', cursor: 'default' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover:is(a)': { backgroundColor: 'container.regular' },
+          '&[data-ellipsis]': { color: 'content.secondary', cursor: 'default' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, color, outline-color',
@@ -228,9 +229,9 @@ namespace styles {
         current: {
           false: {},
           true: {
-            backgroundColor: 'foreground',
+            backgroundColor: 'content.primary',
             color: 'background.primary',
-            selectors: { '&:hover:is(a)': { backgroundColor: 'foreground' } },
+            selectors: { '&:hover:is(a)': { backgroundColor: 'content.primary' } },
           },
         },
       },
@@ -251,7 +252,7 @@ namespace styles {
                 height: '56',
                 minWidth: '56',
                 paddingInline: '20',
-                typography: 'button.16',
+                typography: 'body.b1Strong',
               },
             },
           },
@@ -262,7 +263,7 @@ namespace styles {
                 height: '32',
                 minWidth: '32',
                 paddingInline: '12',
-                typography: 'button.12',
+                typography: 'body.b3Strong',
               },
             },
           },
@@ -276,11 +277,12 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'container.regular',
         borderRadius: 'full',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         columnGap: '4',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         height: '40',
@@ -294,11 +296,11 @@ namespace styles {
         transitionProperty: 'background-color, opacity, outline-color, outline-offset, scale',
         transitionTimingFunction: 'snappy',
         // Weight overrides the typography token, so it stays after it.
-        typography: 'button.14',
+        typography: 'body.b2Strong',
         selectors: {
           '&:active:not([aria-disabled])': { scale: 'press' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover:not([aria-disabled])': { backgroundColor: 'grayAlpha.200' },
+          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+          '&:hover:not([aria-disabled])': { backgroundColor: 'container.strong' },
           '&[aria-disabled]': { cursor: 'default', opacity: 'disabled' },
         },
         '@media (prefers-reduced-motion: reduce)': {

package/src/web/components/Popover.tsx

@@ -154,7 +154,7 @@ export namespace Popover {
 namespace styles {
   export const arrow = style(
     {
-      color: 'background.raised',
+      color: 'background.elevated',
       display: 'flex',
       selectors: {
         '&[data-side="bottom"]': { top: '-10px !custom' },
@@ -167,17 +167,17 @@ namespace styles {
   )
 
   export const description = style(
-    { color: 'gray.900', margin: '0', typography: 'copy.14' },
+    { color: 'content.secondary', margin: '0', typography: 'body.b2' },
     { id: 'tds/web/popover/description' },
   )
 
   export const popup = style(
     {
-      backgroundColor: 'background.raised',
-      borderRadius: '16',
-      boxShadow: 'popover',
+      backgroundColor: 'background.elevated',
+      borderRadius: 'sm',
+      boxShadow: 'regular',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       maxWidth: 'var(--available-width) !custom',
       outline: 'none !custom',
       padding: '24',
@@ -185,7 +185,7 @@ namespace styles {
       transitionDuration: '200',
       transitionProperty: 'opacity, scale',
       transitionTimingFunction: 'snappy',
-      typography: 'copy.14',
+      typography: 'body.b2',
       width: 'max-content !custom',
       selectors: {
         '&[data-ending-style]': {
@@ -212,7 +212,7 @@ namespace styles {
 
   export const title = style(
     {
-      typography: 'heading.20',
+      typography: 'heading.h3',
       margin: '0',
       marginBottom: '4',
     },

package/src/web/components/Progress.tsx

@@ -135,6 +135,7 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '100% !custom',
       // Base UI sets the width inline, and scaling it would distort the rounded ends.
       transitionDuration: '240',
@@ -163,7 +164,7 @@ namespace styles {
   )
 
   export const label = style(
-    { color: 'foreground', flex: '1 !custom', typography: 'label.13' },
+    { color: 'content.primary', flex: '1 !custom', typography: 'body.b3' },
     { id: 'tds/web/progress/label' },
   )
 
@@ -179,8 +180,8 @@ namespace styles {
       defaultVariants: { intent: 'neutral' },
       variants: {
         intent: {
-          neutral: { color: 'foreground' },
-          positive: { color: 'green.900' },
+          neutral: { color: 'content.primary' },
+          positive: { color: 'content.positive' },
         },
       },
     },
@@ -189,8 +190,9 @@ namespace styles {
 
   export const track = style(
     {
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       borderRadius: 'full',
+      cornerShape: 'round',
       flexBasis: '100% !custom',
       height: '4',
       overflow: 'hidden',
@@ -199,7 +201,7 @@ namespace styles {
   )
 
   export const value = style(
-    { color: 'gray.900', typography: 'label.13' },
+    { color: 'content.secondary', typography: 'body.b3' },
     { id: 'tds/web/progress/value' },
   )
 }

package/src/web/components/Qr.tsx

@@ -45,7 +45,7 @@ export namespace Qr {
 namespace styles {
   export const qr = variants(
     {
-      base: { color: 'foreground', display: 'block', flexShrink: '0 !custom' },
+      base: { color: 'content.primary', display: 'block', flexShrink: '0 !custom' },
       defaultVariants: { size: 'medium' },
       variants: {
         size: {

package/src/web/components/RadioGroup.tsx

@@ -122,8 +122,9 @@ namespace styles {
 
   export const indicator = style(
     {
-      backgroundColor: 'background.surface',
+      backgroundColor: 'background.elevated',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '8',
       transitionDuration: '200',
       transitionProperty: 'opacity, transform',
@@ -148,9 +149,10 @@ namespace styles {
   export const item = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.300',
+      backgroundColor: 'container.strong',
       borderRadius: 'full',
       boxSizing: 'border-box',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
@@ -169,16 +171,16 @@ 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]': { backgroundColor: 'foreground' },
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
+        '&:hover:not([data-disabled])': { backgroundColor: 'line.primary' },
+        '&[data-checked]': { backgroundColor: 'content.primary' },
         '&[data-checked]:hover:not([data-disabled])': {
-          backgroundColor: 'foreground',
+          backgroundColor: 'content.primary',
           opacity: 'hover',
         },
         '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
         '&[data-invalid]': {
-          outlineColor: 'red.800',
+          outlineColor: 'border.negative',
           outlineStyle: 'solid !custom',
           outlineWidth: '1',
         },

package/src/web/components/SecretValue.tsx

@@ -77,7 +77,7 @@ export function SecretValue(props: SecretValue.Props) {
         }}
         shape="icon"
         size="small"
-        variant="text"
+        variant="tertiary"
       >
         {revealed ? <EyeOff /> : <Eye />}
       </Button>
@@ -110,9 +110,9 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'container.regular',
         boxSizing: 'border-box',
-        color: 'gray.900',
+        color: 'content.secondary',
         columnGap: '4',
         cursor: 'pointer',
         display: 'flex',
@@ -123,9 +123,9 @@ namespace styles {
         transitionTimingFunction: 'snappy',
         selectors: {
           // Inner buttons keep their own hover, so the block only reacts beside them.
-          '&:hover:not(:has(button:hover))': { backgroundColor: 'grayAlpha.200' },
+          '&:hover:not(:has(button:hover))': { backgroundColor: 'container.strong' },
           '&:active:not(:has(button:active))': { scale: 'press' },
-          '&[data-copied]': { backgroundColor: 'green.200' },
+          '&[data-copied]': { backgroundColor: 'container.positive' },
         },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color',
@@ -134,22 +134,22 @@ namespace styles {
       },
       defaultVariants: { size: 'medium' },
       variants: {
-        // Heights and radii match Input: 32, 40 and 56px.
+        // Heights and radii match TextInput: 32, 40 and 56px.
         size: {
           large: {
-            borderRadius: '16',
+            borderRadius: 'sm',
             height: '56',
             paddingInlineEnd: '8',
             paddingInlineStart: '20',
           },
           medium: {
-            borderRadius: '12',
+            borderRadius: 'xs',
             height: '40',
             paddingInlineEnd: '4',
             paddingInlineStart: '16',
           },
           small: {
-            borderRadius: '8',
+            borderRadius: '2xs',
             height: '32',
             paddingInlineEnd: '4',
             paddingInlineStart: '12',
@@ -163,12 +163,12 @@ namespace styles {
 
   export const text = style(
     {
-      color: 'gray.900',
+      color: 'content.secondary',
       flexGrow: '1 !custom',
       fontFamily: 'mono',
       minWidth: '0',
       overflowX: 'auto',
-      typography: 'label.14.mono',
+      typography: 'mono.m1',
       userSelect: 'none',
       whiteSpace: 'nowrap',
       selectors: {