paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

feat(ui): add --bui-bg-inherit CSS variable (#34124)

Browse Source 
* feat(ui): add --bui-bg-inherit CSS variable in core.css

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): remove duplicated data-bg painting from Box.module.css

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): remove duplicated data-bg painting from Flex.module.css

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): remove duplicated data-bg painting from Grid.module.css

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): centralize Accordion data-bg painting, preserve no-intent behavior

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* refactor(ui): use --bui-bg-inherit for Card scroll-shadow gradients

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* docs(ui): document --bui-bg-inherit token

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* chore: changeset for --bui-bg-inherit

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* docs(ui): add Storybook story for --bui-bg-inherit

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* docs(ui): fold --bui-bg-inherit story into colors stories

Signed-off-by: Johan Persson <johanopersson@gmail.com>

* changeset: Reword for clarity.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: Johan Persson <johanopersson@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Johan Persson
2026-05-05 16:00:47 +02:00
committed by GitHub
parent c8813abee0
commit 37535b2a60
9 changed files with 155 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/Accordion/Accordion.module.css
+5 -11
View File
@@ -21,18 +21,12 @@
width: 100%;
border-radius: var(--bui-radius-3);
padding: var(--bui-space-3);
}
&[data-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-1);
}
&[data-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-2);
}
&[data-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-3);
}
.bui-Accordion[data-bg='danger'],
.bui-Accordion[data-bg='warning'],
.bui-Accordion[data-bg='success'] {
background-color: transparent;
}
.bui-AccordionTrigger {
packages/ui/src/components/Box/Box.module.css
-24
View File
@@ -22,28 +22,4 @@
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
}
.bui-Box[data-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-1);
}
.bui-Box[data-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-2);
}
.bui-Box[data-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-3);
}
.bui-Box[data-bg='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Box[data-bg='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Box[data-bg='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/components/Card/Card.module.css
+4 -16
View File
@@ -29,18 +29,6 @@
padding: var(--bui-space-3);
}
.bui-Card[data-bg='neutral-1'] {
--bui-card-bg: var(--bui-bg-neutral-1);
}
.bui-Card[data-bg='neutral-2'] {
--bui-card-bg: var(--bui-bg-neutral-2);
}
.bui-Card[data-bg='neutral-3'] {
--bui-card-bg: var(--bui-bg-neutral-3);
}
.bui-Card:has(.bui-CardHeader, .bui-CardBody, .bui-CardFooter) {
padding: 0;
}
@@ -127,8 +115,8 @@
margin-bottom: -1.5rem;
background: linear-gradient(
to bottom,
var(--bui-card-bg),
rgb(from var(--bui-card-bg) r g b / 0)
var(--bui-bg-inherit),
rgb(from var(--bui-bg-inherit) r g b / 0)
);
pointer-events: none;
opacity: 0;
@@ -146,8 +134,8 @@
margin-top: -1.5rem;
background: linear-gradient(
to top,
var(--bui-card-bg),
rgb(from var(--bui-card-bg) r g b / 0)
var(--bui-bg-inherit),
rgb(from var(--bui-bg-inherit) r g b / 0)
);
pointer-events: none;
opacity: 0;
packages/ui/src/components/Flex/Flex.module.css
-24
View File
@@ -23,28 +23,4 @@
/* This helps when using `truncate` on text inside a flex container */
min-width: 0;
}
.bui-Flex[data-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-1);
}
.bui-Flex[data-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-2);
}
.bui-Flex[data-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-3);
}
.bui-Flex[data-bg='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Flex[data-bg='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Flex[data-bg='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/components/Grid/Grid.module.css
-30
View File
@@ -20,34 +20,4 @@
.bui-Grid {
display: grid;
}
.bui-Grid[data-bg='neutral-1'],
.bui-GridItem[data-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-1);
}
.bui-Grid[data-bg='neutral-2'],
.bui-GridItem[data-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-2);
}
.bui-Grid[data-bg='neutral-3'],
.bui-GridItem[data-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-3);
}
.bui-Grid[data-bg='danger'],
.bui-GridItem[data-bg='danger'] {
background-color: var(--bui-bg-danger);
}
.bui-Grid[data-bg='warning'],
.bui-GridItem[data-bg='warning'] {
background-color: var(--bui-bg-warning);
}
.bui-Grid[data-bg='success'],
.bui-GridItem[data-bg='success'] {
background-color: var(--bui-bg-success);
}
}
packages/ui/src/css/colors.stories.tsx
+52
View File
@@ -23,6 +23,24 @@ const meta = preview.meta({
tags: ['!manifest'],
});
/**
* A `<div>` styled with `background: var(--bui-bg-inherit)` should always
* resolve to the same color as the surrounding bg provider — at every level
* of the neutral chain and inside intent surfaces.
*/
const Probe = ({ label }: { label: string }) => (
<div
style={{
backgroundColor: 'var(--bui-bg-inherit)',
padding: '0.5rem 0.75rem',
borderRadius: '0.25rem',
outline: '1px dashed var(--bui-fg-secondary)',
}}
>
<Text>{label}</Text>
</div>
);
export const Default = meta.story({
render: () => (
<div style={{ backgroundColor: 'var(--bui-bg-app)' }}>
@@ -151,3 +169,37 @@ export const Default = meta.story({
</div>
),
});
export const BgInherit = meta.story({
render: () => (
<Flex direction="column" gap="4">
<Probe label="App level (no provider) — resolves to --bui-bg-app" />
<Box bg="neutral" p="4">
<Flex direction="column" gap="3">
<Probe label="Inside neutral-1 — resolves to --bui-bg-neutral-1" />
<Box bg="neutral" p="4">
<Flex direction="column" gap="3">
<Probe label="Inside neutral-2 — resolves to --bui-bg-neutral-2" />
<Box bg="neutral" p="4">
<Probe label="Inside neutral-3 — resolves to --bui-bg-neutral-3" />
</Box>
</Flex>
</Box>
</Flex>
</Box>
<Box bg="danger" p="4">
<Probe label="Inside danger — resolves to --bui-bg-danger" />
</Box>
<Box bg="warning" p="4">
<Probe label="Inside warning — resolves to --bui-bg-warning" />
</Box>
<Box bg="success" p="4">
<Probe label="Inside success — resolves to --bui-bg-success" />
</Box>
</Flex>
),
});
packages/ui/src/css/core.css
+34
View File
@@ -47,4 +47,38 @@
[data-theme-mode='light'] {
color-scheme: light;
}
:root {
--bui-bg-inherit: var(--bui-bg-app);
}
[data-bg='neutral-1'] {
background-color: var(--bui-bg-neutral-1);
--bui-bg-inherit: var(--bui-bg-neutral-1);
}
[data-bg='neutral-2'] {
background-color: var(--bui-bg-neutral-2);
--bui-bg-inherit: var(--bui-bg-neutral-2);
}
[data-bg='neutral-3'] {
background-color: var(--bui-bg-neutral-3);
--bui-bg-inherit: var(--bui-bg-neutral-3);
}
[data-bg='danger'] {
background-color: var(--bui-bg-danger);
--bui-bg-inherit: var(--bui-bg-danger);
}
[data-bg='warning'] {
background-color: var(--bui-bg-warning);
--bui-bg-inherit: var(--bui-bg-warning);
}
[data-bg='success'] {
background-color: var(--bui-bg-success);
--bui-bg-inherit: var(--bui-bg-success);
}
}