diff --git a/.changeset/modern-drinks-battle.md b/.changeset/modern-drinks-battle.md index 6fd0ecc07c..a72e74cedb 100644 --- a/.changeset/modern-drinks-battle.md +++ b/.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` diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index f11f9f88df..6bf27e88c9 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1293,26 +1293,6 @@ export type Surface = | 'success' | 'auto'; -// @public (undocumented) -export interface SurfaceContextValue { - // (undocumented) - surface: Responsive | undefined; -} - -// @public -export const SurfaceProvider: ({ - surface, - children, -}: SurfaceProviderProps) => JSX_2.Element; - -// @public (undocumented) -export interface SurfaceProviderProps { - // (undocumented) - children: ReactNode; - // (undocumented) - surface: Responsive; -} - // @public (undocumented) export const Switch: ForwardRefExoticComponent< SwitchProps & RefAttributes @@ -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?: Responsive; -} - // @public export function useTable( config?: UseTableConfig, diff --git a/packages/ui/src/components/Button/Button.module.css b/packages/ui/src/components/Button/Button.module.css index 7c154b869e..16d4b8be6c 100644 --- a/packages/ui/src/components/Button/Button.module.css +++ b/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; diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 2922d409bb..6c68838bec 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/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 }) => ( diff --git a/packages/ui/src/hooks/useSurface.tsx b/packages/ui/src/hooks/useSurface.tsx index e16633220d..a088fb3b63 100644 --- a/packages/ui/src/hooks/useSurface.tsx +++ b/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 | 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, diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index d8a1c55f12..03ae3245e3 100644 --- a/packages/ui/src/index.ts +++ b/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';