Skip to content

fix: replace auxWhite-on-primaryBase with VButton across the app #23802

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
ashleeradka merged 2 commits into from
Apr 6, 2026
Merged

fix: replace auxWhite-on-primaryBase with VButton across the app #23802

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca89bf2
fix: use VButton for inline surface action buttons
devin-ai-integration[bot] Apr 6, 2026
94068f1
fix: replace auxWhite-on-primaryBase with VButton in additional locat…
devin-ai-integration[bot] Apr 6, 2026
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
22 changes: 6 additions & 16 deletions clients/macos/vellum-assistant/Features/Onboarding/FirstMeeting/JITPermissionView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,22 +185,12 @@ struct JITPermissionView: View {

@ViewBuilder
private func permissionButton(_ title: String, isPrimary: Bool, action: @escaping () -> Void) -> some View {
Button(action: action) {
Text(title)
.font(VFont.labelDefault)
.foregroundStyle(isPrimary ? VColor.auxWhite : VColor.contentDefault.opacity(0.85))
.frame(maxWidth: .infinity)
.padding(.horizontal, VSpacing.sm)
.padding(.vertical, VSpacing.sm + VSpacing.xxs)
.background(isPrimary ? AnyShapeStyle(VColor.primaryBase) : AnyShapeStyle(Color.clear))
.clipShape(RoundedRectangle(cornerRadius: VRadius.md))
.overlay(
RoundedRectangle(cornerRadius: VRadius.md)
.stroke(isPrimary ? Color.clear : VColor.contentDefault.opacity(0.2), lineWidth: 1)
)
}
.buttonStyle(.plain)
.frame(maxWidth: .infinity)
VButton(
label: title,
style: isPrimary ? .primary : .outlined,
isFullWidth: true,
action: action
)
}

private func dismiss() {
Expand Down
2 changes: 1 addition & 1 deletion clients/macos/vellum-assistant/Features/Onboarding/ImproveExperienceStepView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ struct ImproveExperienceStepView: View {

if tosAccepted {
VIconView(.check, size: 12)
.foregroundStyle(VColor.auxWhite)
.foregroundStyle(VColor.contentInset)
}
}
.frame(width: 20, height: 20)
Expand Down
26 changes: 5 additions & 21 deletions clients/shared/DesignSystem/Gallery/Sections/ChatGallerySection.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,30 +525,14 @@ struct ChatGallerySection: View {
}

private func surfaceActionPill(label: String, style: SurfaceActionStyle) -> some View {
Text(label)
.font(VFont.bodyMediumDefault)
.foregroundStyle(surfaceActionForeground(style))
.padding(.horizontal, VSpacing.lg)
.padding(.vertical, VSpacing.sm)
.background(
RoundedRectangle(cornerRadius: VRadius.md)
.fill(surfaceActionBackground(style))
)
VButton(label: label, style: surfaceActionButtonStyle(style)) {}
}

private func surfaceActionForeground(_ style: SurfaceActionStyle) -> Color {
private func surfaceActionButtonStyle(_ style: SurfaceActionStyle) -> VButton.Style {
switch style {
case .primary: return VColor.auxWhite
case .destructive: return VColor.auxWhite
case .secondary: return VColor.contentDefault
}
}

private func surfaceActionBackground(_ style: SurfaceActionStyle) -> Color {
switch style {
case .primary: return VColor.primaryBase
case .destructive: return VColor.systemNegativeStrong
case .secondary: return VColor.borderBase.opacity(0.5)
case .primary: return .primary
case .secondary: return .outlined
case .destructive: return .danger
}
}
}
Expand Down
33 changes: 8 additions & 25 deletions clients/shared/Features/Chat/InlineWidgets/InlineSurfaceRouter.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,46 +358,29 @@ public struct InlineSurfaceRouter: View {
} else {
VStack(alignment: .leading, spacing: VSpacing.sm) {
ForEach(surface.actions, id: \.uniqueId) { action in
Button {
VButton(
label: action.label,
style: buttonStyle(for: action.style)
Comment on lines +361 to +363
Copy link
Copy Markdown
Contributor Author

@devin-ai-integration devin-ai-integration Bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Font weight change for inline surface action buttons

The old inline action buttons used VFont.bodyMediumDefault (lighter weight). VButton with default .regular size uses VFont.bodyMediumEmphasised (bolder weight) at VButton.swift:68. This applies to both InlineSurfaceRouter.swift action buttons and the ChatGallerySection.swift gallery pills. The font change is subtle but affects the visual density of action buttons in chat bubbles. If the lighter weight was intentional for these inline contexts, a .compact size (which uses VFont.labelDefault) or a tintColor override might be more appropriate.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

) {
clickedActionLabel = action.label
// Merge action.data (button payload) with selectionPayload (list selection)
var merged = selectionPayload ?? [:]
if let actionData = action.data {
for (key, value) in actionData {
merged[key] = value
}
}
onAction(surface.id, action.id, merged.isEmpty ? nil : merged)
} label: {
Text(action.label)
.font(VFont.bodyMediumDefault)
.foregroundStyle(buttonForeground(action.style))
.padding(.horizontal, VSpacing.lg)
.padding(.vertical, VSpacing.sm)
.background(
RoundedRectangle(cornerRadius: VRadius.md)
.fill(buttonBackground(action.style))
)
}
.buttonStyle(.plain)
}
}
}
}

private func buttonForeground(_ style: SurfaceActionStyle) -> Color {
switch style {
case .primary: return VColor.auxWhite
case .destructive: return VColor.auxWhite
case .secondary: return VColor.contentDefault
}
}

private func buttonBackground(_ style: SurfaceActionStyle) -> Color {
private func buttonStyle(for style: SurfaceActionStyle) -> VButton.Style {
switch style {
case .primary: return VColor.primaryBase
case .destructive: return VColor.systemNegativeStrong
case .secondary: return VColor.borderBase.opacity(0.5)
case .primary: return .primary
case .secondary: return .outlined
Copy link
Copy Markdown
Contributor Author

@devin-ai-integration devin-ai-integration Bot Apr 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Visual behavior change: secondary button background differs between old and new code

The old .secondary style used VColor.borderBase.opacity(0.5) as a filled background, while the new .outlined VButton style uses a transparent background with a VColor.borderElement border stroke (VButton.swift:259-266). This is an intentional design system alignment, but reviewers should verify the visual result is acceptable — the secondary action buttons will look noticeably different (outlined vs filled) in inline surface contexts like tables and lists.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

case .destructive: return .danger
}
}

Expand Down
27 changes: 4 additions & 23 deletions clients/shared/Features/Surfaces/FileUploadSurfaceView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,32 +93,13 @@ public struct FileUploadSurfaceView: View {
HStack(spacing: VSpacing.lg) {
Spacer()

Button(action: { onCancel() }) {
Text("Cancel")
.font(VFont.labelDefault)
.foregroundStyle(VColor.contentSecondary)
.padding(.horizontal, VSpacing.lg)
.padding(.vertical, VSpacing.sm)
.overlay(
RoundedRectangle(cornerRadius: VRadius.sm)
.stroke(VColor.borderBase, lineWidth: 1)
)
VButton(label: "Cancel", style: .outlined, size: .compact) {
onCancel()
}
.buttonStyle(.plain)

Button(action: { submitFiles() }) {
Text("Upload")
.font(VFont.labelDefault)
.foregroundStyle(selectedFiles.isEmpty ? VColor.contentTertiary : VColor.auxWhite)
.padding(.horizontal, VSpacing.lg)
.padding(.vertical, VSpacing.sm)
.background(
RoundedRectangle(cornerRadius: VRadius.sm)
.fill(selectedFiles.isEmpty ? VColor.surfaceOverlay : VColor.primaryBase)
)
VButton(label: "Upload", style: .primary, size: .compact, isDisabled: selectedFiles.isEmpty) {
submitFiles()
}
.buttonStyle(.plain)
.disabled(selectedFiles.isEmpty)
}
}
}
Expand Down