Merge pull request #2915 from kev1n77/fmy/ui-main

fix(ui): align menu spacing and restore intended text contrast

Author: kev1n77

design-system/apps/design-lab/src/pages/ReferencePatterns.tsx

@@ -171,9 +171,13 @@ export function NestedMenuPattern() {
   const [position, setPosition] = useState<{ x: number; y: number } | undefined>();
   const [lastAction, setLastAction] = useState("");
   const [pinned, setPinned] = useState(false);
+  const [scrolling, setScrolling] = useState(false);
   return <Card appearance="subtle" padding="md" gap="md" data-openbitfun-pattern="nested-menu" onContextMenu={event => { event.preventDefault(); setPosition({ x: event.clientX, y: event.clientY }); setOpen(true); }}>
     <PageHeader level={3} size="sm" title={t("patterns.menu.title")} description={t("patterns.menu.hint")} />
     <Button ref={anchorRef} aria-haspopup="menu" aria-expanded={open} leadingIcon={<Icon name="more" />} onClick={() => { setPosition(undefined); setOpen(!open); }}>{t("patterns.menu.open")}</Button>
+    <Field label={t("detail.option.scrolling")} orientation="horizontal">
+      <Switch checked={scrolling} onCheckedChange={setScrolling} />
+    </Field>
     <MenuPopover aria-label={t("patterns.menu.title")} open={open} onClose={() => setOpen(false)} anchorRef={position ? undefined : anchorRef} position={position} items={[
       { id: "open", label: t("patterns.actions.openFiles"), icon: <Icon name="files" />, shortcut: <KeyHint>Ctrl O</KeyHint>, onSelect: () => setLastAction(t("patterns.actions.openFiles")) },
       { id: "tools", label: t("patterns.navigation.tools"), icon: <Icon name="extension" />, submenu: [
@@ -185,6 +189,7 @@ export function NestedMenuPattern() {
       ] },
       { id: "separator", label: "", separator: true },
       { id: "pin", label: t("patterns.menu.pin"), role: "menuitemcheckbox", checked: pinned, icon: <Icon name={pinned ? "check-line" : "pin"} />, onSelect: () => { setPinned(!pinned); setLastAction(t("patterns.menu.pin")); } },
+      ...(scrolling ? Array.from({ length: 18 }, (_, index) => ({ id: `file-${index}`, label: `${t("patterns.actions.openFiles")} — workspace-${index + 1}`, icon: <Icon name="files" />, onSelect: () => setLastAction(`workspace-${index + 1}`) })) : []),
     ]} />
     <p className="pattern-feedback" role="status">{lastAction ? t("patterns.menu.lastAction", { action: lastAction }) : t("patterns.menu.keyboard")}</p>
   </Card>;

design-system/packages/design-tokens/src/system.tokens.json

@@ -169,6 +169,10 @@
         "letterSpacing": { "$value": "{letterSpacing.normal}" }
       }
     },
+    "actionRow": {
+      "$description": "Single-line action leading: 16px at the default 13px type size, scaling with user typography.",
+      "lineHeight": { "$type": "number", "$value": 1.2307692307692308 }
+    },
     "fieldHelper": {
       "$description": "Field helper leading: 16px at the default 11px type size, scaling with user typography.",
       "lineHeight": { "$type": "number", "$value": 1.4545454545454546 }
@@ -724,7 +728,7 @@
       "surfacePadding": { "$value": "{space.2}" },
       "contentGap": { "$value": "{space.4}" },
       "sectionGap": { "$value": "{space.1}" },
-      "headingHeight": { "$value": "22px" },
+      "headingHeight": { "$value": "24px" },
       "headingPaddingInline": { "$value": "{space.2}" },
       "headingGap": { "$value": "{space.5}" },
       "headingActionSize": { "$value": "22px" },

design-system/packages/design-tokens/tests/contract.test.mjs

@@ -227,7 +227,7 @@ test("NavigationPanel tokens preserve the grouped sidebar composition contract",
   const systemDocument = await readSource("system.tokens.json");
 
   assert.equal(tokens["layout.navigationPanel.inlineSize"], "216px");
-  assert.equal(tokens["layout.navigationPanel.headingHeight"], "22px");
+  assert.equal(tokens["layout.navigationPanel.headingHeight"], "24px");
   assert.equal(tokens["layout.navigationPanel.itemHeight"], "30px");
   assert.equal(tokens["layout.navigationPanel.itemIconSize"], "14px");
   assert.equal(tokens["layout.navigationPanel.footerHeight"], "40px");

design-system/packages/theme-openbitfun/README.md

@@ -69,3 +69,11 @@ component token is absent, and keeps explicit component overrides intact.
 - `color.codeChange.added` (`#1aa73e`) and `color.codeChange.removed` (`#ec221f`) also anchor success and danger emphasis. Warning emphasis uses `#ff8c00`; information uses the existing creative-action blue (`#2e7eff`). These clear hues share light tints instead of separate per-component palettes.
 - `color.status.*.emphasis` colors icons and short emphasis. `content` derives a readable shade from that anchor for text; `surface` and `border` derive 10% and 30% tints. High-contrast themes may strengthen text contrast without changing the emphasis anchors.
 - Status source tokens retain their `color-mix()` references. The theme build resolves these mixes to concrete hex/RGBA values so CSS, plugins, and renderer payloads consume the same palette without relying on renderer-specific CSS color support.
+
+`color.content.caption` distinguishes low-emphasis menu/navigation group headings
+from body descriptions and input placeholders. Light mode supplies final black
+40%; dark and high-contrast modes reuse readable muted content. An imported
+appearance's explicit old muted color is retained when the caption token is absent.
+The built-in light Appearance preserves the public neutral action content (80%)
+in both root and chrome; generic palette projection previously reduced product
+menu labels to secondary text (60%). Explicit imported action colors still win.

design-system/packages/theme-openbitfun/src/dark.tokens.json

@@ -64,6 +64,7 @@
       "thumbHover": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" }
     },
     "content": {
+      "caption": { "$description": "Menu and navigation group captions; carries final opacity without attenuating primary text again.", "$type": "color", "$value": "{color.content.muted}" },
       "primary": { "$type": "color", "$value": "{ref.color.neutral.200}" },
       "secondary": { "$type": "color", "$value": "{ref.color.neutral.350}" },
       "muted": { "$type": "color", "$value": "{ref.color.neutral.550}" },

design-system/packages/theme-openbitfun/src/high-contrast-dark.tokens.json

@@ -24,6 +24,7 @@
       "panel": { "$type": "color", "$value": "{ref.color.gray.900}" }
     },
     "content": {
+      "caption": { "$description": "Menu and navigation group captions; carries final opacity without attenuating primary text again.", "$type": "color", "$value": "{color.content.muted}" },
       "primary": { "$type": "color", "$value": "{ref.color.gray.0}" },
       "secondary": { "$type": "color", "$value": "{ref.color.gray.50}" },
       "muted": { "$type": "color", "$value": "{ref.color.gray.150}" }

design-system/packages/theme-openbitfun/src/high-contrast-light.tokens.json

@@ -24,6 +24,7 @@
       "panel": { "$type": "color", "$value": "{ref.color.gray.0}" }
     },
     "content": {
+      "caption": { "$description": "Menu and navigation group captions; carries final opacity without attenuating primary text again.", "$type": "color", "$value": "{color.content.muted}" },
       "primary": { "$type": "color", "$value": "{ref.color.gray.1000}" },
       "secondary": { "$type": "color", "$value": "{ref.color.gray.800}" },
       "muted": { "$type": "color", "$value": "{ref.color.gray.700}" }

design-system/packages/theme-openbitfun/src/light.tokens.json

@@ -64,6 +64,7 @@
       "thumbHover": { "$type": "color", "$value": "{color.action.neutral.surfacePressed}" }
     },
     "content": {
+      "caption": { "$description": "Menu and navigation group captions; carries final opacity without attenuating primary text again.", "$type": "color", "$value": "rgba(0, 0, 0, 0.40)" },
       "primary": { "$type": "color", "$value": "rgba(0, 0, 0, 0.80)" },
       "secondary": { "$type": "color", "$value": "rgba(0, 0, 0, 0.60)" },
       "muted": { "$type": "color", "$value": "{ref.color.neutral.650}" },
@@ -254,7 +255,7 @@
     "xl": { "$value": "0 12px 24px rgba(16, 26, 39, 0.11)" },
     "raised": { "$value": "{shadow.sm}" },
     "composer": { "$value": "0 2px 6px rgba(0, 0, 0, 0.08)" },
-    "menu": { "$value": "0 4px 10px rgba(0, 0, 0, 0.12)" },
+    "menu": { "$value": "0 4px 20px rgba(0, 0, 0, 0.12)" },
     "overlay": { "$value": "0 4px 20px rgba(0, 0, 0, 0.12)" },
     "accentGlow": {
       "$description": "Layered emphasis glow derived from the active accent.",

design-system/packages/theme-openbitfun/tests/theme-contract.test.mjs

@@ -329,7 +329,7 @@ test("default modes preserve the built-in Appearance anchor values", () => {
   assert.equal(themes.light["color.status.warning.surface"], "rgba(255, 140, 0, 0.1)");
   assert.equal(themes.light["shadow.base"], "0 4px 8px rgba(16, 26, 39, 0.07)");
   assert.equal(themes.light["shadow.composer"], "0 2px 6px rgba(0, 0, 0, 0.08)");
-  assert.equal(themes.light["shadow.menu"], "0 4px 10px rgba(0, 0, 0, 0.12)");
+  assert.equal(themes.light["shadow.menu"], "0 4px 20px rgba(0, 0, 0, 0.12)");
   assert.equal(themes.light["shadow.overlay"], "0 4px 20px rgba(0, 0, 0, 0.12)");
   assert.equal(themes.light["opacity.disabled"], 0.55);
   assert.equal(themes.dark["color.surface.canvas"], "#0e0e10");

design-system/packages/ui/README.md

@@ -405,3 +405,11 @@ FormSection descriptions use primary content with 16px leading at 13px. Both
 leading roles scale with user typography. FieldGroup uses the form group tint,
 retaining its existing row padding, dividers, and radius. The Patterns form
 specimen shows both orientations and long values over a tinted container.
+
+Menus keep contiguous 30px rows with no additional list or heading-to-item gap;
+separators own their 8px vertical margins. Their keyboard focus indicator is
+inset so scrolling does not clip it or require extra permanent padding.
+ActionItem hover and pressed surfaces use the semantic neutral hover fill;
+pressed text remains semibold. Menu and navigation captions consume the final
+caption color directly, avoiding a second opacity multiplier. The nested-menu
+Pattern includes a scrolling toggle for keyboard and submenu verification.