patternfly / patternfly/patternfly-react

Button - secondary color

Open Beginner friendly
#12,238 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Stale
Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Description

Is this a new component or an extension?

Enhancement to a current feature

Existing Component

Button

Describe the feature

Right now secondary color exists but is always mapped to the primary color for example button has a secondary type but the color is the same.

Also it seems that secondary is not the same as primary for dark theme.

There is a variable called --pf-v5-global--secondary-color why not use it for things that have a secondary type?

@patternfly-v5/patternfly/components/Button/button.css: --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);

User Story

As a user I would like to have secondary buttons to have a different color as primary a one... (which is only possible in dark theme, but not in light)

Visuals & Mockups

No response

Interaction States & Variations

idk

Accessibility (A11y)

No response

Product & Target Release

No response

Contribution
  • I am interested in contributing this feature.

  • I have searched for similar existing requests.


Jira Issue: PF-3513

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with @patternfly-v5/patternfly/components/Button/button.css and inspect the secondary button color variable alongside the primary and global secondary color definitions. Confirm the secondary button uses the intended secondary color and remains distinct from the primary button in both light and dark themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react
Domain
design, frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.