From c0183daf874ec29573869ad16ee27a764c223b0f Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Feb 2026 18:36:42 +0000 Subject: [PATCH] Update clean-bags-occur.md Signed-off-by: Charles de Dreuille --- .changeset/clean-bags-occur.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/.changeset/clean-bags-occur.md b/.changeset/clean-bags-occur.md index b6e1a1c329..37325426e1 100644 --- a/.changeset/clean-bags-occur.md +++ b/.changeset/clean-bags-occur.md @@ -2,9 +2,9 @@ '@backstage/ui': minor --- -**BREAKING**: Replaced `Surface` / `onSurface` system with new `Bg` background system +**BREAKING**: Replaced `Surface` / `onSurface` system with new `ContainerBg` background system -The old `Surface` type (`'0'`–`'3'`, `'auto'`) and its associated props (`surface`, `onSurface`) have been replaced by a new `Bg` type with semantic neutral levels (`'neutral-1'` through `'neutral-4'`) and intents (`'danger'`, `'warning'`, `'success'`). Leaf components like Button no longer need an explicit prop — backgrounds auto-increment from parent context. +The old `Surface` type (`'0'`–`'3'`, `'auto'`) and its associated props (`surface`, `onSurface`) have been replaced by a new `ContainerBg` type with semantic neutral levels (`'neutral-1'` through `'neutral-3'`) and intents (`'danger'`, `'warning'`, `'success'`). Containers are capped at `neutral-3`; the `neutral-4` level is reserved for leaf component CSS only. Leaf components like Button no longer need an explicit prop — they receive a `data-on-bg` attribute matching the parent container's bg, and CSS handles the visual step-up. New `useBg` hook and `BgProvider` replace the deleted `useSurface` hook and `SurfaceProvider`. @@ -50,7 +50,7 @@ Update type imports: ```diff - import type { Surface, LeafSurfaceProps, ContainerSurfaceProps } from '@backstage/ui'; -+ import type { Bg } from '@backstage/ui'; ++ import type { ContainerBg } from '@backstage/ui'; ``` Replace hook usage in custom components: @@ -73,7 +73,9 @@ Update CSS selectors targeting surface data attributes: + [data-bg='neutral-1'] { ... } - [data-on-surface='2'] { ... } -+ [data-bg='neutral-2'] { ... } ++ [data-on-bg='neutral-1'] { ... } ``` +Note: Container components use `data-bg` for their own background level. Leaf components now use `data-on-bg` which reflects the parent container's bg (not an auto-incremented value). + **Affected components:** Box, Button, ButtonIcon, ButtonLink, ToggleButton, Card, Alert, Flex, Grid