canonical / canonical/vanilla-framework

Disabled button is transparent on a floating background

Open
#4,903 5 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**

Currently, the color used to represent a disabled button in vanilla is a lighter (more transparent) hue of the original button color, this works well for the most part, but is problematic when the button is made to float over a dynamic background (e.g: a map)

**To Reproduce**

Steps to reproduce the behavior:

1. Create a button that floats on a dynamic (multi-colored) background
2. Make the button disabled

**Expected behavior**

The button should be opaque to improve readability

**Screenshots**

![map-shot](https://github.com/canonical/vanilla-framework/assets/47540149/7f171719-21f2-49ed-b24b-2f153d0b9116)

Contributor guide

Open the contributing guide

Research direction

The issue names no file, test, or entry point. Start by reproducing the disabled button over a dynamic background and locating the vanilla button styles; done means the disabled button is opaque and remains readable in that scenario, with relevant styling coverage if available.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
design, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.