8000 feat: update to latest tokens w/ glass by mcoker · Pull Request #8096 · patternfly/patternfly · GitHub
[go: up one dir, main page]

Skip to content

feat: update to latest tokens w/ glass#8096

Merged
mcoker merged 3 commits intopatternfly:mainfrom
mcoker:update-tokens-2.6.26
Feb 9, 2026
Merged

feat: update to latest tokens w/ glass#8096
mcoker merged 3 commits intopatternfly:mainfrom
mcoker:update-tokens-2.6.26

Conversation

@mcoker
Copy link
Contributor
@mcoker mcoker commented Feb 6, 2026
  • Updates use of all glass tokens to match what's from figma.
  • Pulls in a change from the design-tokens export that updates the blur tokens to include the blur() function
  • Runs backstop to ensure nothing else broke
  • Validated the compass demos and pill drawer all respond to .pf-v6-theme-glass like they used to

Summary by CodeRabbit

  • Refactor
    • Refined glass effect tokens with separate blur and opacity settings for different element variants, enabling more granular styling control.
    • Updated glass color values to dynamically reference theme colors instead of hardcoded values.
    • Standardized token value formats with proper units for consistency.

@coderabbitai
Copy link
Contributor
coderabbitai bot commented Feb 6, 2026

Walkthrough

Replace generic glass background tokens with granular blur and opacity variants (separate primary and floating tokens) across multiple PatternFly theme files; update a few generated header timestamps to Feb 7, 2026.

Changes

Cohort / File(s) Summary
Base glass token refactor
src/patternfly/base/tokens/tokens-glass.scss, src/patternfly/base/tokens/tokens-glass-dark.scss, src/patternfly/base/tokens/tokens-default.scss, src/patternfly/base/tokens/tokens-dark.scss
Removed flat glass tokens (--pf-t--global--background--filter--glass, --pf-t--global--background--opacity--glass) and added granular tokens: --pf-t--global--background--filter--glass--blur--floating/primary and --pf-t--global--background--opacity--glass--floating/primary. Floating glass color now aliases primary default. Timestamps updated.
Red Hat theme glass refactor
src/patternfly/base/tokens/tokens-redhat-glass.scss, src/patternfly/base/tokens/tokens-redhat-glass-dark.scss
Same granularization applied (blur + opacity primary/floating) and floating color aliased to primary default. Token counts adjusted; timestamps updated.
Local tokens reduced / replaced
src/patternfly/base/tokens/tokens-local.scss
Large Glass-theme token block removed and replaced with two new primary/floating glass default color tokens (--pf-t--global--background--color--glass--primary--default, --pf-t--global--background--color--glass--floating--default).
Component usages updated
src/patternfly/components/Compass/compass.scss, src/patternfly/components/Drawer/drawer.scss, src/patternfly/components/Hero/hero.scss, src/patternfly/components/Masthead/masthead.scss
Switched component CSS custom properties from glass default tokens to the new primary glass tokens and blur variants (background color and backdrop-filter changes).
Generated-only header updates
src/patternfly/base/tokens/tokens-redhat.scss, src/patternfly/base/tokens/tokens-redhat-dark.scss, src/patternfly/base/tokens/tokens-redhat-highcontrast.scss, src/patternfly/base/tokens/tokens-redhat-highcontrast-dark.scss
Only updated generated-on timestamps; no functional token changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • srambach
  • andrew-ronaldson
  • lboehling
🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: update to latest tokens w/ glass' follows conventional commit guidelines with a 'feat' type prefix and clearly describes the main change of updating design tokens with glass-related updates.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Collaborator
patternfly-build commented Feb 6, 2026

Copy link
Contributor
@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@src/patternfly/base/tokens/tokens-redhat-glass-dark.scss`:
- Line 17: The alias token --pf-t--global--background--color--glass--floating is
emitted out of alphabetical order (it should come before the
--pf-t--global--background--filter--glass--* entries); fix by updating the token
generator to sort tokens/aliases alphabetically before writing them out (or
insert this alias into the sorted position), and regenerate the SCSS so
--pf-t--global--background--color--glass--floating appears in the proper
alphabetical location in all affected token files.

--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
--pf-t--global--background--color--glass--floating: var(--pf-t--global--background--color--primary--default);
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Token is out of alphabetical order.

--pf-t--global--background--color--glass--floating should appear before --pf-t--global--background--filter--glass--* (line 7) to maintain alphabetical sorting. Since these files are auto-generated, this likely indicates a bug in the token generator that appends this alias at the end instead of inserting it in sorted position. The same issue exists in tokens-glass-dark.scss (line 11) and tokens-redhat-glass.scss (line 17).

🤖 Prompt for AI Agents
In `@src/patternfly/base/tokens/tokens-redhat-glass-dark.scss` at line 17, The
alias token --pf-t--global--background--color--glass--floating is emitted out of
alphabetical order (it should come before the
--pf-t--global--background--filter--glass--* entries); fix by updating the token
generator to sort tokens/aliases alphabetically before writing them out (or
insert this alias into the sorted position), and regenerate the SCSS so
--pf-t--global--background--color--glass--floating appears in the proper
alphabetical location in all affected token files.

@mcoker mcoker merged commit ccf082d into patternfly:main Feb 9, 2026
5 checks passed
@mcoker mcoker deleted the update-tokens-2.6.26 branch February 9, 2026 04:29
@patternfly-build
Copy link
Collaborator

🎉 This PR is included in version 6.5.0-prerelease.37 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Glass - adjust token use

2 participants

0