Skip to content

fix(vertical tabs): update with unified tokens#99

Open
jcmill wants to merge 5 commits into
patternfly:mainfrom
jcmill:fix/96-tokens-update
Open

fix(vertical tabs): update with unified tokens#99
jcmill wants to merge 5 commits into
patternfly:mainfrom
jcmill:fix/96-tokens-update

Conversation

@jcmill

@jcmill jcmill commented Jun 9, 2026

Copy link
Copy Markdown

closes: #96

version bumps on PatterFly deps to v6.5.x
update to unified tokens for vertical tab styles

  • includes indicator interaction animation
    update to scss @import to @use

@patternfly-build

patternfly-build commented Jun 9, 2026

Copy link
Copy Markdown

@jcmill

jcmill commented Jun 9, 2026

Copy link
Copy Markdown
Author

(fixed) I'm looking into the jest failures.

@mcoker mcoker 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.

Just a couple of comments, otherwise looks great!


> a {
color: var( --pf-t--global--text--color--regular);
color: var( --pf-t--global--text--color--subtle);

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.

Just want to make sure this was confirmed in design? It matches figma, but wasn't called out as a change to make. Also figma uses the default text color for the active/selected tab state, so if we would want to confirm that if we make this change, too.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Got more info from Design on this and updated for default to be subtle and hover/active to be default.

text-decoration: none;
display: block;
margin-inline-start: var(--pf-t--global--spacer--md);
margin-inline-start: calc(var(--pf-t--global--spacer--md) - 3px);

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.

Want to reference the var here in case the value for that border width token ever changes.

Suggested change
margin-inline-start: calc(var(--pf-t--global--spacer--md) - 3px);
margin-inline-start: calc(var(--pf-t--global--spacer--md) - var(--pf-t--global--border--width--extra-strong));

@jcmill jcmill requested a review from mcoker June 11, 2026 16:59
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.

Unified theme: Catalog view token updates

3 participants