Update after feedbacks

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.changeset/clean-bags-occur.md

@@ -66,4 +66,14 @@ Replace hook usage in custom components:
 + const { bg } = useBg({ mode: 'leaf' });
 ```
 
-**Affected components:** box, button, button-icon, button-link, toggle-button, card, alert, flex, grid
+Update CSS selectors targeting surface data attributes:
+
+```diff
+- [data-surface='1'] { ... }
++ [data-bg='neutral-1'] { ... }
+
+- [data-on-surface='2'] { ... }
++ [data-bg='neutral-2'] { ... }
+```
+
+**Affected components:** Box, Button, ButtonIcon, ButtonLink, ToggleButton, Card, Alert, Flex, Grid

packages/ui/src/components/ToggleButton/ToggleButton.tsx

@@ -43,7 +43,7 @@ export const ToggleButton = forwardRef(
         className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
         {...dataAttributes}
-        {...(typeof bg === 'string' ? { 'data-bg': bg } : {})}
+        {...(bg ? { 'data-bg': bg } : {})}
         {...rest}
       >
         {renderProps => {

packages/ui/src/hooks/useBg.tsx

@@ -20,15 +20,17 @@ import {
   createVersionedValueMap,
 } from '@backstage/version-bridge';
 import { Bg, Responsive } from '../types';
+import { useBreakpoint } from './useBreakpoint';
+import { resolveResponsiveValue } from './useDefinition/helpers';
 
 /** @public */
 export interface BgContextValue {
-  bg: Responsive<Bg> | undefined;
+  bg: Bg | undefined;
 }
 
 /** @public */
 export interface BgProviderProps {
-  bg: Responsive<Bg>;
+  bg: Bg;
   children: ReactNode;
 }
 
@@ -82,9 +84,9 @@ function incrementNeutralBg(bg: Bg | undefined): Bg | undefined {
  * @internal
  */
 function resolveBgForContainer(
-  contextBg: Responsive<Bg> | undefined,
-  propBg: Responsive<Bg> | undefined,
-): Responsive<Bg> | undefined {
+  contextBg: Bg | undefined,
+  propBg: Bg | undefined,
+): Bg | undefined {
   // Explicit bg prop takes priority
   if (propBg !== undefined) {
     return propBg;
@@ -95,11 +97,6 @@ function resolveBgForContainer(
     return undefined;
   }
 
-  // If context is a responsive object, we can't auto-increment
-  if (typeof contextBg === 'object') {
-    return undefined;
-  }
-
   return incrementNeutralBg(contextBg);
 }
 
@@ -110,18 +107,11 @@ function resolveBgForContainer(
  *
  * @internal
  */
-function resolveBgForLeaf(
-  contextBg: Responsive<Bg> | undefined,
-): Responsive<Bg> | undefined {
+function resolveBgForLeaf(contextBg: Bg | undefined): Bg | undefined {
   if (contextBg === undefined) {
     return undefined;
   }
 
-  // If context is a responsive object, we can't auto-increment
-  if (typeof contextBg === 'object') {
-    return undefined;
-  }
-
   return incrementNeutralBg(contextBg);
 }
 
@@ -153,6 +143,7 @@ export const BgProvider = ({ bg, children }: BgProviderProps) => {
  * @public
  */
 export const useBg = (options?: UseBgOptions): BgContextValue => {
+  const { breakpoint } = useBreakpoint();
   const value = useContext(BgContext)?.atVersion(1);
   const context = value ?? { bg: undefined };
 
@@ -160,9 +151,15 @@ export const useBg = (options?: UseBgOptions): BgContextValue => {
     return context;
   }
 
+  // Resolve responsive prop value to a scalar for the current breakpoint
+  const resolvedPropBg =
+    options.bg !== undefined
+      ? resolveResponsiveValue(options.bg, breakpoint)
+      : undefined;
+
   if (options.mode === 'leaf') {
     return { bg: resolveBgForLeaf(context.bg) };
   }
 
-  return { bg: resolveBgForContainer(context.bg, options.bg) };
+  return { bg: resolveBgForContainer(context.bg, resolvedPropBg) };
 };

packages/ui/src/hooks/useDefinition/index.ts

@@ -21,5 +21,4 @@ export type {
   PropDefConfig,
   UseDefinitionOptions,
   UseDefinitionResult,
-  BgPropsConstraint,
 } from './types';

packages/ui/src/hooks/useDefinition/types.ts

@@ -75,11 +75,10 @@ type ResolvedOwnProps<
   [K in keyof PropDefs & keyof P]: ResolvePropType<P[K], PropDefs[K]>;
 };
 
-type ChildrenProps<
-  BgMode extends 'container' | 'leaf' | undefined = undefined,
-> = BgMode extends 'container'
-  ? { bgChildren: ReactNode; children?: never }
-  : { children: ReactNode; bgChildren?: never };
+type ChildrenProps<BgMode extends 'container' | 'leaf' | undefined> =
+  BgMode extends 'container'
+    ? { bgChildren: ReactNode; children?: never }
+    : { children: ReactNode; bgChildren?: never };
 
 type DataAttributeKeys<PropDefs> = {
   [K in keyof PropDefs]: PropDefs[K] extends { dataAttribute: true }

packages/ui/src/hooks/useDefinition/useDefinition.tsx

@@ -74,13 +74,7 @@ export function useDefinition<
 
   // Set data-bg from the resolved bg value (works for both container and leaf)
   if (definition.bg && resolvedBg !== undefined) {
-    const bgValue =
-      typeof resolvedBg === 'object'
-        ? resolveResponsiveValue(resolvedBg as any, breakpoint)
-        : resolvedBg;
-    if (bgValue !== undefined) {
-      dataAttributes['data-bg'] = String(bgValue);
-    }
+    dataAttributes['data-bg'] = String(resolvedBg);
   }
 
   const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(