Skip to content

fix(ui): align page headers and action cards with the design system #2924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kev1n77 merged 1 commit into from
Sep 9, 2026
Merged

fix(ui): align page headers and action cards with the design system #2924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions design-system/apps/design-lab/src/i18n/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ export const enUSMessages = {
"patterns.menu.keyboard": "Use arrows, Home/End, Enter and Escape; Tab closes the menu.",
"components.preview.primary": "Primary",
"components.preview.actionCardTitle": "New session",
"components.preview.actionCardDescription": "Start a conversation using the selected assistant",
"components.preview.actionCardDescription": "Start a conversation using the selected assistant and keep your project context, files, and tools together",
"components.preview.assistant": "AI Assistant",
"components.preview.activityAction": "Run command",
"components.preview.activityDescription": "curl -s -o /dev/null -w HTTP status from localhost",
Expand Down Expand Up @@ -1025,7 +1025,7 @@ export const zhCNMessages = {
"patterns.menu.keyboard": "支持方向键、Home/End、Enter 和 Escape，Tab 可关闭菜单。",
"components.preview.primary": "主要操作",
"components.preview.actionCardTitle": "新建会话",
"components.preview.actionCardDescription": "使用所选助手开始对话",
"components.preview.actionCardDescription": "使用所选助手开始对话，让项目上下文、文件与工具在同一工作区中保持连贯",
"components.preview.assistant": "AI 助手",
"components.preview.activityAction": "运行命令",
"components.preview.activityDescription": "从本地服务读取 HTTP 状态",
Expand Down Expand Up @@ -1721,7 +1721,7 @@ export const zhTWMessages = {
"resources.boundaryDescription": "Design Lab 是創作與檢查介面，公共套件繼續與它的路由、狀態和語言目錄保持獨立。",
"components.preview.primary": "主要操作",
"components.preview.actionCardTitle": "新增工作階段",
"components.preview.actionCardDescription": "使用所選助理開始對話",
"components.preview.actionCardDescription": "使用所選助理開始對話，讓專案上下文、檔案與工具在同一工作區中保持連貫",
"components.preview.assistant": "AI 助手",
"components.preview.activityAction": "執行命令",
"components.preview.activityDescription": "從本機服務讀取 HTTP 狀態",
Expand Down
4 changes: 2 additions & 2 deletions design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,13 +349,13 @@ export function ComponentDetailPage({
const [fieldShowControlTrailing, setFieldShowControlTrailing] = useState(false);
const [pageHeaderAlign, setPageHeaderAlign] = useState<PageHeaderAlign>("start");
const [cardContentAlign, setCardContentAlign] = useState<CardContentAlignment>("start");
const [pageHeaderSize, setPageHeaderSize] = useState<PageHeaderSize>("lg");
const [pageHeaderSize, setPageHeaderSize] = useState<PageHeaderSize>("md");
const [scrollAreaOrientation, setScrollAreaOrientation] = useState<ScrollAreaOrientation>("vertical");
const [activityItemAppearance, setActivityItemAppearance] = useState<ActivityItemAppearance>("surface");
const [activityShowDetail, setActivityShowDetail] = useState(false);
const [pageHeaderRequired, setPageHeaderRequired] = useState(false);
const [actionItemShowMetadata, setActionItemShowMetadata] = useState(false);
const [actionCardSize, setActionCardSize] = useState<ActionCardSize>("sm");
const [actionCardSize, setActionCardSize] = useState<ActionCardSize>("md");
const [tabGroupSize, setTabGroupSize] = useState<TabGroupSize>("sm");
const [toolbarSize, setToolbarSize] = useState<ToolbarSize>("sm");
const [previewState, setPreviewState] = useState(
Expand Down
4 changes: 2 additions & 2 deletions design-system/apps/design-lab/src/pages/PatternsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:

<PatternSection description={t("patterns.settings.description")} index="01" title={t("patterns.settings.title")}>
<Card appearance="raised" className="pattern-settings" data-openbitfun-pattern="settings-form" padding="md" radius="md">
<PageHeader description={t("components.preview.appearanceDescription")} level={3} size="lg" title={t("components.preview.appearance")} />
<PageHeader description={t("components.preview.appearanceDescription")} level={3} size="md" title={t("components.preview.appearance")} />
<CardBody>
<FormSection description={t("patterns.settings.description")} headingAs="h4" title={t("components.preview.appearance")}>
<FieldGroup appearance="subtle" dividers>
Expand Down Expand Up @@ -147,7 +147,7 @@ export function PatternsPage({ colorScheme, contrast, density, tokenOverrides }:
</NavigationPanelFooter>
</NavigationPanel>
<div className="pattern-navigation-copy">
<PageHeader description={t("patterns.navigation.description")} level={3} size="lg" title={t("patterns.navigation.workspace")} />
<PageHeader description={t("patterns.navigation.description")} level={3} size="display" title={t("patterns.navigation.workspace")} />
<p>{t("patterns.navigation.status")}</p>
</div>
</div>
Expand Down
18 changes: 16 additions & 2 deletions design-system/packages/design-tokens/src/system.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,13 @@
"$description": "Single-line action leading: 16px at the default 13px type size, scaling with user typography.",
"lineHeight": { "$type": "number", "$value": 1.2307692307692308 }
},
"pageIntro": {
"fontFamily": { "$value": "{font.family.control}" },
"fontSize": { "$value": "{font.size.xl-plus}" },
"fontWeight": { "$value": "{font.weight.medium}" },
"lineHeight": { "$value": "{lineHeight.tight}" },
"letterSpacing": { "$value": "{letterSpacing.normal}" }
},
"fieldHelper": {
"$description": "Field helper leading: 16px at the default 11px type size, scaling with user typography.",
"lineHeight": { "$type": "number", "$value": 1.4545454545454546 }
Expand Down Expand Up @@ -226,6 +233,13 @@
}
},
"heading": {
"welcome": {
"fontFamily": { "$value": "{font.family.control}" },
"fontSize": { "$value": "{font.size.5xl}" },
"fontWeight": { "$value": "{font.weight.semibold}" },
"lineHeight": { "$value": "{lineHeight.tight}" },
"letterSpacing": { "$value": "{letterSpacing.normal}" }
},
"navigation": {
"fontFamily": { "$value": "{font.family.control}" },
"fontSize": { "$value": "{font.size.xl-plus}" },
Expand Down Expand Up @@ -591,14 +605,14 @@
"$type": "dimension",
"smMinBlockSize": { "$value": "54px" },
"mdMinBlockSize": { "$value": "62px" },
"paddingBlock": { "$value": "{space.2}" },
"paddingBlock": { "$value": "{space.3}" },
"paddingInline": { "$value": "{space.3}" },
"gap": { "$value": "{space.2}" },
"leadingSize": { "$value": "30px" },
"iconSize": { "$value": "16px" },
"contentGap": { "$value": "{space.1}" },
"actionsGap": { "$value": "0px" },
"actionsPaddingInlineEnd": { "$value": "{space.2}" },
"actionsPaddingInlineEnd": { "$value": "{space.3}" },
"radius": { "$value": "{radius.base}" }
},
"launcherButton": {
Expand Down
2 changes: 2 additions & 0 deletions design-system/packages/theme-openbitfun/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,3 +77,5 @@ appearance's explicit old muted color is retained when the caption token is abse
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.

Action cards own `color.actionCard.background`: the light entry surface is black at 3% opacity. `surface.subtle` is a transient navy tint and `field.groupBackground` belongs to form groups, so neither represents this persistent action surface. Other modes retain their neutral action surface. Product Appearance preserves explicit legacy neutral-surface overrides in root and chrome.
3 changes: 3 additions & 0 deletions design-system/packages/theme-openbitfun/src/dark.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
}
},
"color": {
"actionCard": {
"background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
},
"surface": {
"canvas": { "$type": "color", "$value": "{ref.color.neutral.950}" },
"panel": { "$type": "color", "$value": "{ref.color.neutral.900}" },
Expand Down
3 changes: 3 additions & 0 deletions design-system/packages/theme-openbitfun/src/high-contrast-dark.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
}
},
"color": {
"actionCard": {
"background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
},
"surface": {
"canvas": { "$type": "color", "$value": "{ref.color.gray.1000}" },
"panel": { "$type": "color", "$value": "{ref.color.gray.900}" }
Expand Down
3 changes: 3 additions & 0 deletions design-system/packages/theme-openbitfun/src/high-contrast-light.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
}
},
"color": {
"actionCard": {
"background": { "$type": "color", "$value": "{color.action.neutral.surface}" }
},
"surface": {
"canvas": { "$type": "color", "$value": "{ref.color.gray.0}" },
"panel": { "$type": "color", "$value": "{ref.color.gray.0}" }
Expand Down
3 changes: 3 additions & 0 deletions design-system/packages/theme-openbitfun/src/light.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
}
},
"color": {
"actionCard": {
"background": { "$type": "color", "$value": "rgba(0, 0, 0, 0.03)" }
},
"surface": {
"canvas": { "$type": "color", "$value": "{ref.color.neutral.50}" },
"panel": { "$type": "color", "$value": "{ref.color.neutral.0}" },
Expand Down
2 changes: 2 additions & 0 deletions design-system/packages/ui/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,3 +419,5 @@ Compact tabs use `size="sm"` (30px, 14px icons, 4px icon gap); standard tabs ret
Dialog titles use 24px bold type with their own 29px line box and normal tracking. `DialogHeader` and `DialogFooter` omit separators by default; pass `separator` for a deliberate divider. A direct `DialogBody` sibling of `DialogFooter appearance="floating"` owns the trailing scroll inset automatically. The floating footer provides the 68px centered action area and a masked blur/gradient using the current theme surface; reduced transparency and forced colors use an opaque fallback. Keep scrollable form content inside `DialogBody` instead of adding a second viewport with independent footer spacing.

Extra-large (`xl`) dialogs have an 800px maximum width and continue shrinking within the viewport gutter. Provider editing uses the floating footer; small workspace creation retains its attached footer and existing button/input sizes. The Lab workspace pattern uses local sample paths and callbacks only.

PageHeader `md` uses the settings title with a primary 15px description; `display` uses the welcome heading and medium 17px introduction with a 12px gap. ActionCard uses 12px padding, section-heading typography (15px semibold), and a primary 13px single-line action description. Its inset outline does not inflate the 62px medium minimum height; longer content keeps the independent sibling actions and OverflowText behavior.
6 changes: 3 additions & 3 deletions design-system/packages/ui/src/components/ActionCard/ActionCard.meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,13 @@ export const actionCardMeta = {
],
states: ["default", "hover", "active", "focus-visible", "selected", "disabled"],
tokens: [
"color.action.neutral.surface",
"color.actionCard.background",
"color.action.neutral.surfaceHover",
"color.action.neutral.surfacePressed",
"color.action.neutral.content",
"color.action.neutral.contentDisabled",
"color.content.primary",
"color.content.secondary",
"color.content.muted",
"color.border.default",
"color.focus.ring",
"control.actionCard.smMinBlockSize",
Expand All @@ -37,7 +36,8 @@ export const actionCardMeta = {
"control.actionCard.actionsGap",
"control.actionCard.actionsPaddingInlineEnd",
"control.actionCard.radius",
"type.heading.card.fontSize",
"type.heading.section.fontSize",
"type.body.sm.fontSize",
"type.actionRow.lineHeight",
],
} as const satisfies ComponentMeta;
28 changes: 15 additions & 13 deletions design-system/packages/ui/src/components/ActionCard/ActionCard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,16 @@
align-items: center;
inline-size: 100%;
min-inline-size: 0;
border: var(--openbitfun-border-width-default) solid transparent;
border: 0;
outline: var(--openbitfun-border-width-default) solid transparent;
outline-offset: calc(-1 * var(--openbitfun-border-width-default));
border-radius: var(--openbitfun-control-action-card-radius);
color: var(--openbitfun-color-action-neutral-content);
background: var(--openbitfun-color-action-neutral-surface);
background: var(--openbitfun-color-action-card-background);
transition:
color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
background-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard),
border-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
outline-color var(--openbitfun-motion-duration-fast) var(--openbitfun-motion-easing-standard);
}

.root[data-size="sm"] {
Expand All @@ -33,7 +35,7 @@
}

.root:not([data-disabled="true"]):is(:hover, :has(.trigger[data-openbitfun-preview-state="hover"])) {
border-color: var(--openbitfun-color-border-default);
outline-color: var(--openbitfun-color-border-default);
background: var(--openbitfun-color-action-neutral-surface-hover);
}

Expand All @@ -42,7 +44,7 @@
}

.root[data-selected="true"] {
border-color: var(--openbitfun-color-border-default);
outline-color: var(--openbitfun-color-border-default);
background: var(--openbitfun-color-selection-surface);
}

Expand Down Expand Up @@ -115,19 +117,19 @@

.title {
color: var(--openbitfun-color-content-primary);
font-family: var(--openbitfun-type-heading-card-font-family);
font-size: var(--openbitfun-type-heading-card-font-size);
font-weight: var(--openbitfun-type-heading-card-font-weight);
line-height: var(--openbitfun-type-body-sm-line-height);
letter-spacing: var(--openbitfun-type-heading-card-letter-spacing);
font-family: var(--openbitfun-type-heading-section-font-family);
font-size: var(--openbitfun-type-heading-section-font-size);
font-weight: var(--openbitfun-type-heading-section-font-weight);
line-height: var(--openbitfun-type-heading-section-line-height);
letter-spacing: var(--openbitfun-type-heading-section-letter-spacing);
}

.description {
color: var(--openbitfun-color-content-muted);
color: var(--openbitfun-color-content-primary);
font-family: var(--openbitfun-type-body-sm-font-family);
font-size: var(--openbitfun-type-body-sm-font-size);
font-weight: var(--openbitfun-type-body-sm-font-weight);
line-height: var(--openbitfun-type-body-sm-line-height);
line-height: var(--openbitfun-type-action-row-line-height);
letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
}

Expand All @@ -148,7 +150,7 @@

@media (forced-colors: active) {
.root {
border-color: ButtonText;
outline-color: ButtonText;
}

.root:not([data-disabled="true"]):is(:hover, :active),
Expand Down
3 changes: 2 additions & 1 deletion design-system/packages/ui/src/components/PageHeader/PageHeader.meta.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export const pageHeaderMeta = {
"type.heading.page.fontSize",
"type.heading.section.fontSize",
"type.heading.display.fontSize",
"type.display.sm.fontSize",
"type.heading.welcome.fontSize",
"type.pageIntro.fontSize",
"type.body.lg.fontSize",
"type.body.sm.fontSize",
],
Expand Down
25 changes: 19 additions & 6 deletions design-system/packages/ui/src/components/PageHeader/PageHeader.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@
}

.root[data-size="display"] .heading {
font-family: var(--openbitfun-type-display-sm-font-family);
font-size: var(--openbitfun-type-display-sm-font-size);
font-weight: var(--openbitfun-type-display-sm-font-weight);
line-height: var(--openbitfun-type-display-sm-line-height);
letter-spacing: var(--openbitfun-type-display-sm-letter-spacing);
font-family: var(--openbitfun-type-heading-welcome-font-family);
font-size: var(--openbitfun-type-heading-welcome-font-size);
font-weight: var(--openbitfun-type-heading-welcome-font-weight);
line-height: var(--openbitfun-type-heading-welcome-line-height);
letter-spacing: var(--openbitfun-type-heading-welcome-letter-spacing);
}

.required {
Expand All @@ -73,7 +73,7 @@
}

.description {
color: var(--openbitfun-color-content-muted);
color: var(--openbitfun-color-content-primary);
font-family: var(--openbitfun-type-body-lg-font-family);
font-size: var(--openbitfun-type-body-lg-font-size);
font-weight: var(--openbitfun-type-body-lg-font-weight);
Expand All @@ -82,13 +82,26 @@
}

.root[data-size="sm"] .description {
color: var(--openbitfun-color-content-muted);
font-family: var(--openbitfun-type-body-sm-font-family);
font-size: var(--openbitfun-type-body-sm-font-size);
font-weight: var(--openbitfun-type-body-sm-font-weight);
line-height: var(--openbitfun-type-body-sm-line-height);
letter-spacing: var(--openbitfun-type-body-sm-letter-spacing);
}

.root[data-size="display"] .content {
gap: var(--openbitfun-space-3);
}

.root[data-size="display"] .description {
font-family: var(--openbitfun-type-page-intro-font-family);
font-size: var(--openbitfun-type-page-intro-font-size);
font-weight: var(--openbitfun-type-page-intro-font-weight);
line-height: var(--openbitfun-type-page-intro-line-height);
letter-spacing: var(--openbitfun-type-page-intro-letter-spacing);
}

.action {
display: inline-flex;
flex: 0 0 auto;
Expand Down
2 changes: 1 addition & 1 deletion design-system/packages/ui/tests/page-header.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ test("PageHeader styles use shared typography and content tokens", async () => {
assert.match(styles, /--openbitfun-type-heading-page-font-size/);
assert.match(styles, /--openbitfun-type-heading-section-font-size/);
assert.match(styles, /--openbitfun-type-heading-display-font-size/);
assert.match(styles, /--openbitfun-type-display-sm-font-size/);
assert.match(styles, /--openbitfun-type-heading-welcome-font-size/);
assert.match(styles, /--openbitfun-type-body-lg-font-size/);
assert.match(styles, /--openbitfun-color-content-primary/);
assert.match(styles, /--openbitfun-color-content-muted/);
Expand Down
4 changes: 4 additions & 0 deletions design-system/packages/ui/tests/text-clipping.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ for (const [component, selector] of [
declarations["line-height"],
component === "ActionItem"
? /^var\(--openbitfun-type-action-row-line-height\)$/
: component === "ActionCard"
? selector === ".title"
? /^var\(--openbitfun-type-heading-section-line-height\)$/
: /^var\(--openbitfun-type-action-row-line-height\)$/
: component === "Dialog"
? /^var\(--openbitfun-type-heading-dialog-line-height\)$/
: /^var\(--openbitfun-(?:line-height-base|type-body-sm-line-height|type-label-(?:xs|md)-line-height)\)$/,
Expand Down
Loading
Loading