Skip to content

fix(ui-badge,ui-scripts): use primaryTextColor for primary badge text#2646

Merged
matyasf merged 1 commit into
masterfrom
update_badge
Jul 22, 2026
Merged

fix(ui-badge,ui-scripts): use primaryTextColor for primary badge text#2646
matyasf merged 1 commit into
masterfrom
update_badge

Conversation

@matyasf

@matyasf matyasf commented Jul 20, 2026

Copy link
Copy Markdown
Collaborator

Summary

Note: the design token bump also changes Badge size. This is OK for now because 11.7 is still a beta

Test Plan

  • Verify the primary Badge renders readable text against its background across canvas, rebrand, light, dark, and high-contrast themes.

Fixes INSTUI-5115

🤖 Generated with Claude Code

@matyasf matyasf self-assigned this Jul 20, 2026
@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-22 13:56 UTC

@github-actions

Copy link
Copy Markdown

Visual regression report

⚠️ Changes detected.

Status Count
Unchanged 31
Changed 1
New 0
Removed 0

📊 View full report

Diff images (1)

badge.png — 8155 pixels differ

Baselines come from the visual-baselines branch. They refresh on every merge to master.

github-actions Bot pushed a commit that referenced this pull request Jul 20, 2026
@matyasf
matyasf requested review from adamlobler and joyenjoyer July 20, 2026 11:59

@joyenjoyer joyenjoyer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

looks good to me in every theme

@matyasf
matyasf requested a review from balzss July 20, 2026 13:44

@balzss balzss left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

looks good, sidenote: we should improve the visual comparison/diff because in the current form it's a bit hard to parse

Use componentTheme.primaryTextColor instead of componentTheme.color for the
primary badge text color, and tidy the generateStyle JSDoc.

Bump @instructure/instructure-design-tokens from v1.4.0 to v1.5.0.

instructure-design-tokens v1.5.0 release notes:
- Badge: reduced the fontSize token from textSm to textXs for a compact appearance.
- Badge: reduced the size token from 1.25rem to 1rem.
- Badge: added a new primaryTextColor token that references the inverse text color
  (consumed by this change).
- Badge: applied to canvas and rebrand themes.
- BaseButton: updated all ghost background tokens to use the "color" token type
  instead of "text" for consistency, and adjusted alpha values in new themes.
- BaseButton: institutional theming now works for secondary buttons.
- TruncateText: removed the lineHeight token.
- Sidenavbar: updated the globalNavLinkHover semantic color to use a navy shade
  instead of grey, fixing menu item hover color in light theme.

Fixes INSTUI-5115

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
github-actions Bot pushed a commit that referenced this pull request Jul 22, 2026
@matyasf
matyasf merged commit a1adc22 into master Jul 22, 2026
11 of 12 checks passed
@matyasf
matyasf deleted the update_badge branch July 22, 2026 13:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants