Skip to content

Commit a44b703

Browse files
Fix team owner pill contrast (warpdotdev#11689)
## Testing see before [here](https://warpdev.slack.com/archives/C097ZGA1AMB/p1779809144889669?thread_ts=1779733378.222149&cid=C097ZGA1AMB) and after: ### Cyber wave: <img width="1728" height="1117" alt="image" src="https://github.com/user-attachments/assets/abf10bd1-ff02-49fe-9920-be28a6f4b37c" /> ### Willow dream <img width="1728" height="1117" alt="image" src="https://github.com/user-attachments/assets/0d776adf-71d4-4041-8b91-6fc6279b1616" /> ### <img width="1728" height="1117" alt="image" src="https://github.com/user-attachments/assets/d997c0e7-d63b-4b63-8b87-67e98029c59c" /> ## Description Fixes the team settings owner pill contrast for themes where the accent color/gradient is too close to the accent-tinted chip background, including Cyber Wave, Willow Dream, and Solar Flare. The owner chip previously used `theme.accent()` for the foreground and `theme.accent().with_opacity(30)` for the background. This differed from other theme-safe UI patterns that choose text color using theme contrast helpers against the actual visible background. The fix keeps the accent-tinted chip background and derives the text color with `theme.main_text_color(...)` against the chip background composited over the theme background. ## Linked Issue Slack report in `#feedback-revenue`. - [ ] The linked issue is labeled `ready-to-spec` or `ready-to-implement`. - [ ] Where appropriate, screenshots or a short video of the implementation are included below (especially for user-visible or UI changes). ## Testing - `cargo fmt --manifest-path /workspace/warp/Cargo.toml --all -- --check` - `cargo test --manifest-path /workspace/warp/Cargo.toml -p warp test_owner_state_chip_text_contrasts_with_accent_overlay --lib` - `cargo clippy --manifest-path /workspace/warp/Cargo.toml --workspace --all-targets --all-features --tests -- -D warnings` (fails on pre-existing `warpui_core` clippy diagnostics in `crates/warpui_core/src/elements/{event_handler,hoverable,resizable,text}.rs`, unrelated to this change) - `cargo clippy --manifest-path /workspace/warp/Cargo.toml -p warp --lib --tests -- -D warnings` (same pre-existing `warpui_core` diagnostics) - [ ] I have manually tested my changes locally with `./script/run` ### Screenshots / Videos Not included; this change is covered by a targeted contrast regression test for Cyber Wave, Willow Dream, and Solar Flare. ## Agent Mode - [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode CHANGELOG-BUG-FIX: Fixed the team settings owner badge being unreadable on some themes. _Conversation: https://staging.warp.dev/conversation/052a8328-c4eb-480b-a98e-c16fe73498f1_ _Run: https://oz.staging.warp.dev/runs/019e64e4-5de3-798c-b8ad-cff12af7d02f_ _This PR was generated with [Oz](https://warp.dev/oz)._ Co-authored-by: Oz <oz-agent@warp.dev>
1 parent debe6d8 commit a44b703

1 file changed

Lines changed: 49 additions & 8 deletions

File tree

app/src/settings_view/teams_page.rs

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ const TEXT_FIELD_TOP_PADDING: f32 = 12.;
105105
const HORIZONTAL_BAR_TO_SUB_HEADER_PADDING: f32 = 9.;
106106
const SUBSECTION_HEADER_FONT_SIZE: f32 = 18.;
107107
const SUBSUBSECTION_HEADER_FONT_SIZE: f32 = 14.;
108+
const OWNER_STATE_CHIP_ACCENT_OPACITY: u8 = 30;
108109

109110
const INVITE_LINK_PREFIX: &str = "/team/";
110111
const INVALID_DOMAINS_INSTRUCTIONS: &str =
@@ -132,6 +133,13 @@ lazy_static! {
132133
static ref DELINQUENCY_BADGE_TEXT_COLOR: ColorU = ColorU::new(0, 0, 0, 190);
133134
}
134135

136+
fn owner_state_chip_text_color(theme: &themes::theme::WarpTheme) -> ColorU {
137+
let chip_background = theme
138+
.background()
139+
.blend(&theme.accent().with_opacity(OWNER_STATE_CHIP_ACCENT_OPACITY));
140+
theme.main_text_color(chip_background).into_solid()
141+
}
142+
135143
#[derive(Debug, Clone)]
136144
pub enum TeamsPageAction {
137145
LeaveTeam,
@@ -3502,14 +3510,20 @@ impl TeamsWidget {
35023510
);
35033511
}
35043512
ItemState::Owner => {
3505-
pending_and_close_row.add_child(self.render_state_chip(
3506-
appearance,
3507-
"OWNER".into(),
3508-
appearance.theme().accent().into(),
3509-
appearance.theme().accent().with_opacity(30).into(),
3510-
appearance.ui_font_size() - 1.,
3511-
Weight::Normal,
3512-
));
3513+
pending_and_close_row.add_child(
3514+
self.render_state_chip(
3515+
appearance,
3516+
"OWNER".into(),
3517+
owner_state_chip_text_color(appearance.theme()),
3518+
appearance
3519+
.theme()
3520+
.accent()
3521+
.with_opacity(OWNER_STATE_CHIP_ACCENT_OPACITY)
3522+
.into(),
3523+
appearance.ui_font_size() - 1.,
3524+
Weight::Normal,
3525+
),
3526+
);
35133527
}
35143528
ItemState::Admin => {
35153529
pending_and_close_row.add_child(
@@ -4424,3 +4438,30 @@ pub fn test_valid_domains() {
44244438
assert!(TeamsPageView::is_valid_domain("warp.dev"));
44254439
assert!(TeamsPageView::is_valid_domain("miniclip.com"));
44264440
}
4441+
4442+
#[cfg(test)]
4443+
#[test]
4444+
pub fn test_owner_state_chip_text_contrasts_with_accent_overlay() {
4445+
let theme_config = themes::theme::WarpThemeConfig::new();
4446+
4447+
for theme_kind in [
4448+
themes::theme::ThemeKind::CyberWave,
4449+
themes::theme::ThemeKind::WillowDream,
4450+
themes::theme::ThemeKind::SolarFlare,
4451+
] {
4452+
let theme = theme_config.theme(&theme_kind);
4453+
let chip_background = theme
4454+
.background()
4455+
.blend(&theme.accent().with_opacity(OWNER_STATE_CHIP_ACCENT_OPACITY));
4456+
let text_color = owner_state_chip_text_color(&theme);
4457+
4458+
assert!(
4459+
crate::util::color::high_enough_contrast(
4460+
text_color,
4461+
chip_background.into_solid(),
4462+
crate::util::color::MinimumAllowedContrast::Text,
4463+
),
4464+
"{theme_kind} owner chip text should contrast with its accent overlay"
4465+
);
4466+
}
4467+
}

0 commit comments

Comments
 (0)