- Using bg="neutral-auto" on Flex auto-increments from the parent context.
- The first Flex defaults to neutral-1 (no parent), then each nested Flex
+ Using bg="neutral" on Flex auto-increments from the parent context. The
+ first Flex defaults to neutral-1 (no parent), then each nested Flex
increments by one, capping at neutral-3.
-
- Neutral 1 (auto, no parent)
-
+
+ Neutral 1 (no parent)
+
Neutral 2 (auto-incremented)
-
+
Neutral 3 (auto-incremented, capped)
diff --git a/packages/ui/src/components/Flex/definition.ts b/packages/ui/src/components/Flex/definition.ts
index d0452d6b2c..2701ce5e10 100644
--- a/packages/ui/src/components/Flex/definition.ts
+++ b/packages/ui/src/components/Flex/definition.ts
@@ -45,13 +45,6 @@ export const FlexDefinition = {
'direction',
],
dataAttributes: {
- bg: [
- 'neutral-1',
- 'neutral-2',
- 'neutral-3',
- 'danger',
- 'warning',
- 'success',
- ] as const,
+ bg: ['neutral', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Grid/Grid.stories.tsx b/packages/ui/src/components/Grid/Grid.stories.tsx
index b3b6957359..f60517bc31 100644
--- a/packages/ui/src/components/Grid/Grid.stories.tsx
+++ b/packages/ui/src/components/Grid/Grid.stories.tsx
@@ -113,18 +113,21 @@ export const Backgrounds = meta.story({
render: args => (
-
- Neutral 1
-
-
- Neutral 2
-
-
- Neutral 3
-
-
- Responsive Bg
+
+ Neutral (level 1)
+
+
+ Neutral (level 2)
+
+
+
+
+
+ Neutral (level 3)
+
+
+
Danger
@@ -137,28 +140,26 @@ export const Backgrounds = meta.story({
-
- Neutral 1
-
-
-
-
- Neutral 2
-
-
-
-
- Neutral 3
-
-
-
-
- Responsive Bg
+
+ Neutral (level 1)
+
+
+
+ Neutral (level 2)
+
+
+
+
+
+
+
+ Neutral (level 3)
+
+
+
+
Danger
@@ -179,7 +180,7 @@ export const Backgrounds = meta.story({
),
});
-export const BgNeutralAuto = meta.story({
+export const BgNeutral = meta.story({
args: { px: '6', py: '4', columns: '2', gap: '4' },
render: args => (
@@ -188,12 +189,12 @@ export const BgNeutralAuto = meta.story({
default. Only an explicit bg prop establishes a new bg level. Nested
grids without a bg prop inherit the parent context unchanged.
-
+
Neutral 1 (Grid.Root)
-
- Nested: neutral-2 (explicit)
- Nested: neutral-2 (explicit)
+
+ Nested: neutral-2 (auto-incremented)
+ Nested: neutral-2 (auto-incremented)
diff --git a/packages/ui/src/components/Grid/definition.ts b/packages/ui/src/components/Grid/definition.ts
index c3acb59274..2f417ab34b 100644
--- a/packages/ui/src/components/Grid/definition.ts
+++ b/packages/ui/src/components/Grid/definition.ts
@@ -43,14 +43,7 @@ export const GridDefinition = {
'py',
],
dataAttributes: {
- bg: [
- 'neutral-1',
- 'neutral-2',
- 'neutral-3',
- 'danger',
- 'warning',
- 'success',
- ] as const,
+ bg: ['neutral', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
@@ -64,13 +57,6 @@ export const GridItemDefinition = {
},
utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],
dataAttributes: {
- bg: [
- 'neutral-1',
- 'neutral-2',
- 'neutral-3',
- 'danger',
- 'warning',
- 'success',
- ] as const,
+ bg: ['neutral', 'danger', 'warning', 'success'] as const,
},
} as const satisfies ComponentDefinition;
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 6dca183395..0717a9468d 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -18,12 +18,13 @@
@layer components {
.bui-MenuPopover {
+ --menu-border-radius: var(--bui-radius-2);
display: flex;
flex-direction: column;
box-shadow: var(--bui-shadow);
border: 1px solid var(--bui-border-1);
- border-radius: var(--bui-radius-2);
- background: var(--bui-bg-popover);
+ border-radius: var(--menu-border-radius);
+ background: var(--bui-bg-app);
color: var(--bui-fg-primary);
outline: none;
transition: transform 200ms, opacity 200ms;
@@ -55,6 +56,10 @@
}
}
+ .bui-MenuInner {
+ border-radius: var(--menu-border-radius);
+ }
+
.bui-MenuContent {
max-height: inherit;
box-sizing: border-box;
diff --git a/packages/ui/src/components/Menu/Menu.stories.tsx b/packages/ui/src/components/Menu/Menu.stories.tsx
index ffe184d4ae..982055ade1 100644
--- a/packages/ui/src/components/Menu/Menu.stories.tsx
+++ b/packages/ui/src/components/Menu/Menu.stories.tsx
@@ -198,6 +198,24 @@ export const PreviewLinks = meta.story({
});
export const Opened = meta.story({
+ parameters: { layout: 'fullscreen' },
+ decorators: [
+ Story => (
+
+
+
+ ),
+ ],
args: {
...Preview.input.args,
},
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index e02292ba44..a9835b2f68 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -58,6 +58,8 @@ import {
} from '../InternalLinkProvider';
import styles from './Menu.module.css';
import clsx from 'clsx';
+import { Box } from '../Box';
+import { BgReset } from '../../hooks/useBg';
const { RoutingProvider, useRoutingRegistrationEffect } =
createRoutingRegistration();
@@ -119,18 +121,25 @@ export const Menu = (props: MenuProps) => {
)}
placement={placement}
>
- {virtualized ? (
-
+
- {menuContent}
-
- ) : (
- menuContent
- )}
+ {virtualized ? (
+
+ {menuContent}
+
+ ) : (
+ menuContent
+ )}
+