@tempoxyz/ds 0.3.6 → 0.3.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AmountInput.tsx

@@ -204,8 +204,13 @@ namespace styles {
           typography: 'body.b3',
         },
         '& > :is(p, [data-field-error])': { flexBasis: '100% !custom' },
-        // A `Field.Description`, such as the balance, takes the tertiary color.
+        // A `Field.Description`, such as the balance, takes the tertiary color, and the negative
+        // color while the amount is invalid.
         '& > p': { color: 'content.tertiary' },
+        '&[data-invalid] > p, [data-invalid] & > p': { color: 'content.negative' },
+        // Focus keeps the fill at rest beside the inset focus border of the field. `:where` keeps the
+        // invalid and disabled fills above it.
+        '&:where(:has(input:focus-visible))': { backgroundColor: 'container.regular' },
       },
     },
     { id: 'tds/web/amount-input' },

package/src/web/components/AppShell.tsx

@@ -710,6 +710,8 @@ namespace styles {
     { id: 'tds/web/app-shell' },
   )
 
+  // The Platform Wallet Sidebar pads its content by 20px, and by 32px above the header, which
+  // sits 32px above the menu.
   export const sidebar = variants(
     {
       base: {
@@ -719,9 +721,9 @@ namespace styles {
         flexDirection: 'column',
         flexShrink: '0 !custom',
         minHeight: '0',
-        paddingBottom: '16',
-        paddingInline: '12',
-        rowGap: '16',
+        paddingBottom: '20',
+        paddingInline: '20',
+        rowGap: '32',
       },
     },
     { id: 'tds/web/app-shell/sidebar' },
@@ -744,7 +746,7 @@ namespace styles {
   // server-rendered markup, which always emits the wide layout.
   export const inline = style(
     {
-      borderInlineEndColor: 'line.secondary',
+      borderInlineEndColor: 'line.tertiary',
       borderInlineEndStyle: 'solid',
       borderInlineEndWidth: '1px !custom',
       height: '100dvh !custom',
@@ -753,10 +755,15 @@ namespace styles {
       position: 'sticky',
       width: 'var(--sidebar-width, 16rem) !custom',
       '@media (max-width: 1023px)': { display: 'none !custom' },
-      // A collapsed sidebar stays inline as a column of icons, which `SidebarMenu` centers.
+      // A collapsed sidebar stays inline as a column of icons, which `SidebarMenu` centers in 12px
+      // of padding.
       '@media (min-width: 768px) and (max-width: 1023px)': {
         selectors: {
-          '&[data-app-shell-rail]': { display: 'flex !custom', width: '4rem !custom' },
+          '&[data-app-shell-rail]': {
+            display: 'flex !custom',
+            paddingInline: '12',
+            width: '4rem !custom',
+          },
         },
       },
     },
@@ -770,11 +777,11 @@ namespace styles {
         '--tds-sidebar-scrollbar-thumb': `${vars.color.line.primary}`,
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-12',
+        marginInline: '-20',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '12',
+        paddingInline: '20',
         // A transparent track leaves only the thin thumb over the sidebar fill.
         scrollbarColor: 'var(--tds-sidebar-scrollbar-thumb) transparent !custom',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
@@ -784,6 +791,8 @@ namespace styles {
         '@media (min-width: 768px) and (max-width: 1023px)': {
           selectors: {
             '[data-app-shell-rail] &': {
+              marginInline: '-12',
+              paddingInline: '12',
               scrollbarGutter: 'auto !custom',
               scrollbarWidth: 'none !custom',
             },
@@ -838,14 +847,14 @@ namespace styles {
         flexDirection: 'column',
         flexShrink: '0 !custom',
         marginTop: 'auto !custom',
-        rowGap: '8',
+        rowGap: '12',
       },
     },
     { id: 'tds/web/app-shell/sidebar-footer' },
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '16' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '32' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 

package/src/web/components/Badge.tsx

@@ -139,7 +139,7 @@ namespace styles {
         variant: {
           // The accent text follows the inverse content color, which turns black in dark mode.
           accent: { backgroundColor: 'accent.blue.background', color: 'inverse.content.primary' },
-          elevated: { backgroundColor: 'background.elevated', color: 'content.primary' },
+          elevated: { backgroundColor: 'background.secondary', color: 'content.primary' },
           inverse: {
             backgroundColor: 'inverse.background.secondary',
             color: 'inverse.content.primary',

package/src/web/components/BadgedLogo.tsx

@@ -0,0 +1,125 @@
+/** The Badged Logo: a token or app logo with a small badge at its lower trailing corner. @module */
+import type { ComponentPropsWithRef } from 'react'
+import { style, vars } from '../zyzz.config.js'
+
+/**
+ * A logo with a small round badge on its lower trailing corner, such as the arrow that marks a
+ * token or an app as the destination of a transfer. The root insets the logo 6px, so the badge and
+ * its ring stay inside its 56px box.
+ *
+ * - Put one logo first: a `TokenLogo`, or a `BadgedLogo.Tile` for an app without artwork. The root
+ *   sizes it to 44px.
+ * - Put one `BadgedLogo.Badge` with one 12px icon last.
+ * - Name what the logo and the badge mean in text beside it. The parts add no semantics.
+ *
+ * @example
+ * <BadgedLogo.Root>
+ *   <TokenLogo symbol="USDC" />
+ *   <BadgedLogo.Badge>
+ *     <ArrowRight />
+ *   </BadgedLogo.Badge>
+ * </BadgedLogo.Root>
+ *
+ * @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 namespace BadgedLogo {
+  /** Renders the 20px circle of the badge, which centers one 12px icon in the primary color. */
+  export function Badge(props: Badge.Props) {
+    const { className, ...attributes } = props
+
+    return (
+      <span
+        data-badged-logo-badge=""
+        {...attributes}
+        {...styles.badge({ className, style: props.style })}
+      />
+    )
+  }
+
+  export namespace Badge {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+
+  /** Renders the 56px `<span>` that holds the logo and its `BadgedLogo.Badge`. */
+  export function Root(props: Root.Props) {
+    const { className, ...attributes } = props
+
+    return <span {...attributes} {...styles.root({ className, style: props.style })} />
+  }
+
+  export namespace Root {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+
+  /**
+   * Renders a 44px rounded square that stands in for the logo of an app without artwork, such as
+   * the first letter of its name.
+   */
+  export function Tile(props: Tile.Props) {
+    const { className, ...attributes } = props
+
+    return <span {...attributes} {...styles.tile({ className, style: props.style })} />
+  }
+
+  export namespace Tile {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+}
+
+namespace styles {
+  // A 2px ring in the elevated background separates the badge from the logo below it.
+  export const badge = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'background.secondary',
+      borderRadius: 'full',
+      boxShadow: `0 0 0 2px ${vars.color.background.elevated} !custom`,
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      cornerShape: 'round',
+      display: 'inline-flex',
+      height: '20',
+      insetBlockEnd: '4',
+      insetInlineEnd: '4',
+      justifyContent: 'center',
+      position: 'absolute',
+      width: '20',
+      selectors: { '& > svg': { flexShrink: '0 !custom', height: '12', width: '12' } },
+    },
+    { id: 'tds/web/badged-logo/badge' },
+  )
+
+  // The logo takes 44px whatever size it sets itself, such as the 32px of a large `TokenLogo`.
+  export const root = style(
+    {
+      alignItems: 'center',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      justifyContent: 'center',
+      padding: '6',
+      position: 'relative',
+      verticalAlign: 'middle',
+      selectors: {
+        '& > :not([data-badged-logo-badge])': { height: '44', width: '44' },
+      },
+    },
+    { id: 'tds/web/badged-logo' },
+  )
+
+  export const tile = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'container.regular',
+      borderRadius: 'xs',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      display: 'inline-flex',
+      height: '44',
+      justifyContent: 'center',
+      typography: 'heading.h3',
+      width: '44',
+    },
+    { id: 'tds/web/badged-logo/tile' },
+  )
+}

package/src/web/components/BarChart.tsx

@@ -406,7 +406,7 @@ namespace styles {
   export const tooltip = variants(
     {
       base: {
-        backgroundColor: 'background.elevated',
+        backgroundColor: 'background.menu',
         borderRadius: 'sm',
         boxShadow: 'regular',
         boxSizing: 'border-box',

package/src/web/components/Button.tsx

@@ -42,6 +42,7 @@ export function Button(props: Button.Props) {
     loading = false,
     shape,
     size,
+    underline,
     variant,
     vars,
     ...attributes
@@ -50,13 +51,22 @@ export function Button(props: Button.Props) {
   return (
     <BaseUi.Button
       {...attributes}
-      {...styles.button({ appearance, className, shape, size, style: props.style, variant, vars })}
+      {...styles.button({
+        appearance,
+        className,
+        shape,
+        size,
+        style: props.style,
+        underline,
+        variant,
+        vars,
+      })}
       aria-busy={loading || undefined}
       data-loading={loading || undefined}
       disabled={disabled || loading}
     >
-      <span {...styles.content({ loading })}>{children}</span>
-      {loading && <Spinner aria-label="Loading" {...styles.spinner()} />}
+      {loading && <Spinner aria-label="Loading" />}
+      <span {...styles.content()}>{children}</span>
     </BaseUi.Button>
   )
 }
@@ -66,8 +76,8 @@ export namespace Button {
     zyzz.Props.Variants<typeof styles.button> & {
       disabled?: boolean | undefined
       /**
-       * Disables the button, sets `aria-busy`, and swaps the label for a `Spinner` labelled
-       * "Loading" while keeping the button's width.
+       * Disables the button, sets `aria-busy`, and renders a `Spinner` labelled "Loading" before
+       * the label, which stays visible.
        *
        * @default false
        */
@@ -87,6 +97,7 @@ export namespace Button {
       render,
       shape,
       size,
+      underline,
       variant,
       vars,
       ...attributes
@@ -96,8 +107,17 @@ export namespace Button {
       defaultTagName: 'a',
       props: {
         ...attributes,
-        ...styles.button({ appearance, className, shape, size, style: props.style, variant, vars }),
-        children: <span {...styles.content({ loading: false })}>{children}</span>,
+        ...styles.button({
+          appearance,
+          className,
+          shape,
+          size,
+          style: props.style,
+          underline,
+          variant,
+          vars,
+        }),
+        children: <span {...styles.content()}>{children}</span>,
       },
       ref,
       render,
@@ -163,9 +183,18 @@ namespace styles {
             flexShrink: '0 !custom',
             minWidth: '0',
             paddingInline: '0',
-            selectors: { '& > span:first-child': { minWidth: '0 !custom' } },
+            // A loading icon button shows the spinner alone in the center of the circle.
+            selectors: {
+              '& > span:last-child': { minWidth: '0 !custom' },
+              '&[data-loading] > span:last-child': { display: 'none' },
+            },
           },
         },
+        // The large Platform Icon Button draws a 20px icon.
+        {
+          when: { shape: 'icon', size: 'large' },
+          style: { selectors: { '& > span > svg': { fontSize: '20' } } },
+        },
         // The Platform Icon Button fills its primary circle a step lighter than the primary
         // Button in light mode.
         {
@@ -261,7 +290,13 @@ namespace styles {
           },
         },
       ],
-      defaultVariants: { appearance: 'base', shape: 'default', size: 'medium', variant: 'primary' },
+      defaultVariants: {
+        appearance: 'base',
+        shape: 'default',
+        size: 'medium',
+        underline: false,
+        variant: 'primary',
+      },
       variants: {
         /**
          * The surface under the button: the page for `base`, an inverse surface, such as
@@ -284,18 +319,18 @@ namespace styles {
             borderRadius: 'sm',
             height: '48',
             paddingInline: '32',
-            selectors: { '& > span:first-child': { minWidth: '1rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '1rem !custom' } },
           },
           medium: {
             borderRadius: 'sm',
             height: '40',
             paddingInline: '24',
-            selectors: { '& > span:first-child': { minWidth: '2rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '2rem !custom' } },
           },
           small: {
             height: '32',
             paddingInline: '16',
-            selectors: { '& > span:first-child': { minWidth: '3rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '3rem !custom' } },
           },
           xsmall: {
             borderRadius: 'full',
@@ -303,9 +338,21 @@ namespace styles {
             height: '24',
             paddingInline: '12',
             typography: 'body.b3Strong',
-            selectors: { '& > span > svg': { fontSize: '12' } },
+            selectors: {
+              '& > [role="progressbar"]': { height: '12', width: '12' },
+              '& > span > svg': { fontSize: '12' },
+            },
           },
         },
+        /**
+         * Underlines the label, such as a `text` button inside running content.
+         *
+         * @default false
+         */
+        underline: {
+          false: {},
+          true: { textDecoration: 'underline !custom', textUnderlineOffset: '0.2em !custom' },
+        },
         // Each pressed fill follows its hover fill, so it wins while the pointer stays over the
         // button.
         variant: {
@@ -354,7 +401,7 @@ namespace styles {
             padding: '0',
             typography: 'body.b2Strong',
             selectors: {
-              '& > span:first-child': { minWidth: '0 !custom' },
+              '& > span:last-child': { minWidth: '0 !custom' },
               '& > span > svg': { fontSize: '12' },
               '&:focus-visible': { outlineOffset: '2' },
               '&:hover:not(:disabled)': { color: 'content.primary' },
@@ -366,30 +413,13 @@ namespace styles {
     { id: 'tds/web/button' },
   )
 
-  export const content = variants(
+  export const content = style(
     {
-      base: {
-        alignItems: 'inherit !custom',
-        columnGap: 'inherit !custom',
-        display: 'inline-flex',
-        justifyContent: 'center',
-        transitionDuration: '160',
-        transitionProperty: 'opacity, visibility !custom',
-        transitionTimingFunction: 'snappy',
-      },
-      defaultVariants: { loading: false },
-      variants: { loading: { false: {}, true: { opacity: '0 !custom', visibility: 'hidden' } } },
+      alignItems: 'inherit !custom',
+      columnGap: 'inherit !custom',
+      display: 'inline-flex',
+      justifyContent: 'center',
     },
     { id: 'tds/web/button/content' },
   )
-
-  export const spinner = style(
-    {
-      insetBlockStart: '50% !custom',
-      insetInlineStart: '50% !custom',
-      position: 'absolute',
-      translate: '-50% -50% !custom',
-    },
-    { id: 'tds/web/button/spinner' },
-  )
 }

package/src/web/components/Dialog.tsx

@@ -114,6 +114,8 @@ export namespace Dialog {
    * - `stacked`: puts a `Dialog.Nav` above left-aligned text, for step 2 onward of a flow.
    * - `centered`: centers the hero and the text below a `Dialog.Nav`, for acknowledgments,
    *   onboarding, progress and success.
+   * - `hero`: centers the parts as `centered` does, without the 16px below the `Dialog.Nav`, for
+   *   a hero that brings its own space above it, such as a `Visual`.
    */
   export function Header(props: Header.Props) {
     const { className, layout, vars, ...attributes } = props
@@ -328,6 +330,15 @@ export namespace styles {
             textAlign: 'center',
             selectors: { '& > :is(div, h2, p)': { alignSelf: 'stretch' } },
           },
+          // A hero header centers its parts as a centered one does, directly below the nav row.
+          hero: {
+            alignItems: 'center',
+            textAlign: 'center',
+            selectors: {
+              '& > :is(div, h2, p)': { alignSelf: 'stretch' },
+              '& > [data-dialog-nav]': { marginBottom: '0' },
+            },
+          },
           // The text keeps 16px clear of the 40px close button, and starts 8px lower to meet it.
           inline: {
             selectors: { '[data-close-button] &': { paddingInlineEnd: '56', paddingTop: '8' } },

package/src/web/components/ListGroup.tsx

@@ -211,8 +211,10 @@ export namespace ListGroup {
 
   /**
    * Holds the selected `value` of the rows inside it, each a radio with its own `value`, in a
-   * `radiogroup` element. The rows stack 12px apart, each in its own bordered block. The group is
-   * one Tab stop, and arrow keys move focus and selection together. Pass the choices as a type
+   * `radiogroup` element. The rows stack 12px apart. The group is one Tab stop, and arrow keys move
+   * focus and selection together. `variant` sets how a row shows its selection: `radio` rows sit in
+   * bordered blocks with a ring at the end, and `option` rows, such as the accounts of a picker, pad
+   * 12px without a border or ring and fill when selected. Defaults to `variant="radio"`. Pass the choices as a type
    * argument, such as `ListGroup.RadioGroup<'maya' | 'acme'>`, to narrow `value`, `defaultValue`
    * and `onValueChange`.
    *
@@ -230,12 +232,13 @@ export namespace ListGroup {
    * </ListGroup.RadioGroup>
    */
   export function RadioGroup<const value extends string = string>(props: RadioGroup.Props<value>) {
-    const { className, vars, ...attributes } = props
+    const { className, variant, vars, ...attributes } = props
 
     return (
       <BaseUiRadioGroup.RadioGroup
         {...attributes}
-        {...styles.radioGroup({ className, style: props.style, vars })}
+        data-variant={variant ?? 'radio'}
+        {...styles.radioGroup({ className, style: props.style, variant, vars })}
       />
     )
   }
@@ -466,7 +469,7 @@ namespace styles {
           paddingInline: '8',
           width: 'auto !custom',
         },
-        '& [data-select-trigger]:not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
+        '& [data-select-trigger][role="combobox"]:is(*, :hover, [data-popup-open]):not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
           {
             backgroundColor: 'transparent !custom',
           },
@@ -612,6 +615,12 @@ namespace styles {
           boxShadow: 'inset 0 0 0 5px currentColor !custom',
           color: 'content.primary',
         },
+        // An option row shows its selection with its fill, so its radio stays focusable but unseen.
+        '[data-variant="option"] > [data-radio] > &': {
+          opacity: '0 !custom',
+          pointerEvents: 'none',
+          position: 'absolute',
+        },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'color' },
     },
@@ -627,6 +636,16 @@ namespace styles {
         rowGap: '12',
         typography: 'body.b2',
       },
+      defaultVariants: { variant: 'radio' },
+      variants: {
+        /**
+         * How a row shows its selection: `radio` with a bordered block and a ring, or `option` with
+         * a fill and no border.
+         *
+         * @default 'radio'
+         */
+        variant: { option: {}, radio: {} },
+      },
     },
     { id: 'tds/web/list-group/radio-group' },
   )
@@ -672,7 +691,7 @@ namespace styles {
         // The block keeps a 16px radius with 16px sides, below the usual one and a half times.
         variant: {
           boxed: {
-            backgroundColor: 'background.secondary',
+            backgroundColor: 'background.elevated',
             borderColor: 'line.secondary',
             borderRadius: 'sm',
             borderStyle: 'solid',
@@ -682,7 +701,7 @@ namespace styles {
           },
           plain: {},
           spaced: {
-            backgroundColor: 'background.secondary',
+            backgroundColor: 'background.elevated',
             borderColor: 'line.secondary',
             borderRadius: 'sm',
             borderStyle: 'solid',
@@ -804,10 +823,37 @@ namespace styles {
             cursor: 'default',
             opacity: '0.4 !custom',
           },
+          // An option row keeps a transparent 1px border inside its 12px padding. It fills on hover
+          // and when selected, and draws the focus ring as an outline.
+          '[data-variant="option"] > &[data-radio]': {
+            backgroundColor: 'transparent !custom',
+            borderColor: 'transparent !custom',
+            paddingBlock: 'calc(0.75rem - 1px) !custom',
+            paddingInline: 'calc(0.75rem - 1px) !custom',
+            transitionProperty: 'background-color, opacity, outline-color, scale !custom',
+          },
+          '[data-variant="option"] > &[data-radio]:hover:not(:has(> [data-disabled]))': {
+            backgroundColor: 'action.tertiary.fill.hover',
+            borderColor: 'transparent !custom',
+          },
+          '[data-variant="option"] > &[data-radio]:has(> [data-checked]):is(*, :hover)': {
+            backgroundColor: 'container.subtle',
+            borderColor: 'transparent !custom',
+            borderWidth: 'regular',
+          },
+          '[data-variant="option"] > &[data-radio]:has(> [role="radio"]:focus-visible)': {
+            borderColor: 'transparent !custom',
+            borderWidth: 'regular',
+            outlineColor: 'border.focus',
+            outlineOffset: '-2',
+          },
         },
         '@media (prefers-reduced-motion: reduce)': {
           selectors: {
             '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
+            '[data-variant="option"] > &[data-radio]': {
+              transitionProperty: 'background-color, opacity, outline-color',
+            },
             '&[data-radio]:active': { scale: 'none !custom' },
           },
         },

package/src/web/components/Select.tsx

@@ -255,9 +255,10 @@ export namespace Select {
   }
 
   /**
-   * Matches `TextInput.Group` in height, variant, fill, radius and invalid treatment, and spaces
-   * its parts 6px apart. Focus keeps the fill and draws a 2px ring, which adds 2px to the padding
-   * on each side. A disabled trigger dims to 40% opacity, and an open one takes the hover fill.
+   * Matches `TextInput.Group` in height, variant, radius and invalid treatment, and spaces its parts
+   * 6px apart. The `default` trigger takes the quiet control fill, which darkens on hover. Focus
+   * keeps the fill and draws a 2px ring, which adds 2px to the padding on each side. A disabled
+   * trigger dims to 40% opacity, and an open one takes the hover fill.
    */
   export function Trigger(props: Trigger.Props) {
     const { className, invalid, variant, vars, ...attributes } = props
@@ -338,13 +339,14 @@ namespace styles {
 
   // The trigger also takes the shared field surface, whose stylesheet can land anywhere in the
   // cascade, so each rule here outranks it with an attribute that Base UI sets. Unlike that
-  // surface, focus keeps the fill and a disabled trigger keeps its colors at 40% opacity.
+  // surface, the trigger fills with the quiet control fill, focus keeps the fill, and a disabled
+  // trigger keeps its colors at 40% opacity.
   export const trigger = variants(
     {
       base: {
         selectors: {
-          '&[data-popup-open]:not([data-invalid], :disabled, [data-disabled])': {
-            backgroundColor: 'container.strong',
+          '&[role="combobox"][data-popup-open]:not([data-invalid], :disabled, [data-disabled])': {
+            backgroundColor: 'action.secondary.fill.hover',
           },
           '&[role="combobox"]': { columnGap: '6' },
           // The 2px focus ring adds its width to the padding, so the content moves 2px inward and
@@ -363,11 +365,16 @@ namespace styles {
         variant: {
           default: {
             selectors: {
+              '&[role="combobox"]:not([data-invalid], [data-invalid] *)': {
+                backgroundColor: 'container.control',
+              },
+              '&[role="combobox"]:hover:not([data-invalid], [data-invalid] *, :disabled, [data-disabled])':
+                { backgroundColor: 'action.secondary.fill.hover' },
               '&[role="combobox"]:focus-visible:not([data-invalid], [data-invalid] *)': {
-                backgroundColor: 'container.regular',
+                backgroundColor: 'container.control',
               },
               '&[role="combobox"]:is(:disabled, [data-disabled])': {
-                backgroundColor: 'container.regular',
+                backgroundColor: 'container.control',
               },
             },
           },