Button - secondary color

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

Nobody has claimed this yet.

Assessment

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

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.

Description

Stale
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

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

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.

More from patternfly/patternfly-react

All issues in patternfly/patternfly-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.