Improved on feedbacks

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

.changeset/modern-drinks-battle.md

@@ -9,6 +9,6 @@
 There's no direct replacement for the old tint tokens but you can use the new neutral set of color tokens on surface 0 or 1 as a replacement.
 
 - `--bui-bg-tint` can be replaced by `--bui-bg-neutral-on-surface-0`
-- --bui-bg-tint-hover can be replaced by `--bui-bg-neutral-on-surface-0-hover`
-- --bui-bg-tint-pressed can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
-- --bui-bg-tint-disabled can be replaced by `--bui-bg-neutral-on-surface-0-disabled`
+- `--bui-bg-tint-hover` can be replaced by `--bui-bg-neutral-on-surface-0-hover`
+- `--bui-bg-tint-pressed` can be replaced by `--bui-bg-neutral-on-surface-0-pressed`
+- `--bui-bg-tint-disabled` can be replaced by `--bui-bg-neutral-on-surface-0-disabled`

packages/ui/report.api.md

@@ -1293,26 +1293,6 @@ export type Surface =
   | 'success'
   | 'auto';
 
-// @public (undocumented)
-export interface SurfaceContextValue {
-  // (undocumented)
-  surface: Responsive<Surface> | undefined;
-}
-
-// @public
-export const SurfaceProvider: ({
-  surface,
-  children,
-}: SurfaceProviderProps) => JSX_2.Element;
-
-// @public (undocumented)
-export interface SurfaceProviderProps {
-  // (undocumented)
-  children: ReactNode;
-  // (undocumented)
-  surface: Responsive<Surface>;
-}
-
 // @public (undocumented)
 export const Switch: ForwardRefExoticComponent<
   SwitchProps & RefAttributes<HTMLLabelElement>
@@ -1619,15 +1599,6 @@ export const useBreakpoint: () => {
   down: (key: Breakpoint) => boolean;
 };
 
-// @public
-export const useSurface: (options?: UseSurfaceOptions) => SurfaceContextValue;
-
-// @public (undocumented)
-export interface UseSurfaceOptions {
-  onSurface?: Responsive<Surface>;
-  surface?: Responsive<Surface>;
-}
-
 // @public
 export function useTable<T = any>(
   config?: UseTableConfig<T>,

packages/ui/src/components/Button/Button.module.css

@@ -133,14 +133,13 @@
     background-color: transparent;
     color: var(--bui-fg-primary);
 
-    &[data-on-surface='0'] {
-      &:hover {
-        background-color: var(--bui-bg-neutral-on-surface-0-hover);
-      }
+    &:hover {
+      background-color: var(--bui-bg-neutral-on-surface-0-hover);
+      transition: background-color 200ms ease;
+    }
 
-      &:active {
-        background-color: var(--bui-bg-neutral-on-surface-0-pressed);
-      }
+    &:active {
+      background-color: var(--bui-bg-neutral-on-surface-0-pressed);
     }
 
     &[data-on-surface='1'] {
@@ -173,10 +172,6 @@
       }
     }
 
-    &:hover {
-      transition: background-color 200ms ease;
-    }
-
     &:focus-visible {
       outline: none;
       transition: none;

packages/ui/src/components/Button/Button.tsx

@@ -54,7 +54,7 @@ export const Button = forwardRef(
         ref={ref}
         isPending={loading}
         {...dataAttributes}
-        {...(surface ? { 'data-on-surface': surface } : {})}
+        {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}
         {...rest}
       >
         {({ isPending }) => (

packages/ui/src/hooks/useSurface.tsx

@@ -82,7 +82,7 @@ function incrementSurface(surface: Surface | undefined): Surface {
  * @param contextSurface - The surface from context
  * @param requestedSurface - The requested surface value (may be 'auto')
  * @returns The resolved surface value
- * @public
+ * @internal
  */
 export function resolveSurfaceForProvider(
   contextSurface: Responsive<Surface> | undefined,
@@ -156,7 +156,7 @@ function resolveSurfaceForConsumer(
  * Note: The surface value should already be resolved before passing to this provider.
  * Container components should use useSurface with the surface parameter.
  *
- * @public
+ * @internal
  */
 export const SurfaceProvider = ({
   surface,
@@ -180,7 +180,7 @@ export const SurfaceProvider = ({
  * - `onSurface`: Leaf behavior - 'auto' inherits from parent
  *
  * @param options - Optional configuration for surface resolution
- * @public
+ * @internal
  */
 export const useSurface = (
   options?: UseSurfaceOptions,

packages/ui/src/index.ts

@@ -59,9 +59,3 @@ export * from './types';
 
 // Hooks
 export { useBreakpoint } from './hooks/useBreakpoint';
-export { useSurface, SurfaceProvider } from './hooks/useSurface';
-export type {
-  SurfaceContextValue,
-  SurfaceProviderProps,
-  UseSurfaceOptions,
-} from './hooks/useSurface';