feat(glass): backgrounds for glass and compass by jcmill · Pull Request #8356 · patternfly/patternfly

jcmill · 2026-04-30T20:58:11Z

Closes: #8287

Implements a global background image strategy for glass themes.

Background image handling:

Moved background images from component-level to the root (HTML element)
Created theme-specific background image tokens located in token-local theme specific files
Each glass theme token file overrides --pf-t--global--background--image--default with fallbacks for its theme-specific variant

Compass component updates:

Removed component-specific background image handling
Added --pf-v6-c-compass--BackgroundColor with default secondary background color
In glass themes, Compass background becomes transparent so the HTML element's background image shows through
Restructured to use compass-container wrapper for improved layout control

Summary by CodeRabbit

New Features
- Added a compass-container component as the required layout wrapper and simplified Compass wrapper markup.
- Added local glass/felt theme token sets and a new glass-theme box-shadow CSS variable.
Style
- Compass now uses a background-color approach with adjusted height/structure for consistent layout.
- Normalized global background-image behavior and removed legacy theme image overrides.
Documentation
- Updated Compass examples and usage guidance to reflect the new container pattern.

coderabbitai · 2026-04-30T20:58:54Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: a173218c-98a4-4225-a833-98fcaff149e5

📥 Commits

Reviewing files that changed from the base of the PR and between a40eeee and 0c6d117.

📒 Files selected for processing (2)

src/patternfly/demos/Compass/compass--docked.hbs
src/patternfly/demos/Compass/examples/Compass.md

Walkthrough

Moves glass/felt background-image handling into theme-scoped token mixins, removes global background-image rules from patternfly.scss, adds local glass/felt token modules, and restructures Compass by introducing a .pf-v6-c-compass__container wrapper and switching Compass from image backgrounds to a background-color token. (33 words)

Changes

Cohort / File(s)	Summary
Normalizations & variables `src/patternfly/base/normalize.scss`, `src/patternfly/base/patternfly-variables.scss`	Adds `:where(html)` selector in normalize; imports local felt/glass token modules and includes those token mixins into glass-themed `:root` blocks; introduces `--pf-t--global--box-shadow--glass--default` mapping for glass scope.
Base local tokens `src/patternfly/base/tokens/tokens-local.scss`	Removes glass-themed box-shadow override and sets `--pf-t--global--background--image--default: none;` in the base `pf-v6-tokens` mixin (to be overridden by theme-specific mixins).
Local theme token mixins `src/patternfly/base/tokens/tokens-local-glass.scss`, `src/patternfly/base/tokens/tokens-local-glass-dark.scss`, `src/patternfly/base/tokens/tokens-local-felt-glass.scss`, `src/patternfly/base/tokens/tokens-local-felt-glass-dark.scss`	Adds four `@mixin pf-v6-tokens` files that set `--pf-t--global--background--image--default` to theme-specific image token values with SVG fallbacks.
Normalize small cleanup `src/patternfly/base/normalize.scss`	Removes stray whitespace-only scrollbar line and adds `:where(html)` selector for PatternFly default background-image behavior.
Compass templates & demos `src/patternfly/components/Compass/compass.hbs`, `src/patternfly/components/Compass/compass-container.hbs`, `src/patternfly/demos/Compass/compass--card-view.hbs`, `src/patternfly/demos/Compass/compass--docked.hbs`, `src/patternfly/demos/Compass/examples/Compass.md`	Introduces `compass-container` template, simplifies `compass.hbs` wrapper, updates demos/examples to wrap regions inside the new container and retarget `.pf-m-docked` to the container.
Compass styles `src/patternfly/components/Compass/compass.scss`	Replaces image-based theming with a `--BackgroundColor` token; removes background-image variables/overrides; sets `.pf-compass` to `height: 100dvh` and makes container inherit; moves animation variable scope to container when `pf-m-animate-smoothly` is present.
Global stylesheet cleanup `src/patternfly/patternfly.scss`	Removes previous theme-conditional background-image and related `background-*` rules previously applied to `body` and `.pf-v6-c-compass` for glass variants.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix(glass): remove background from page, updage dark glass bgimage #8264 — Modifies glass-theme background handling and dark glass image rules; overlaps with background-image/token changes.
feat(themes): adds tokens for glass and redhat themes #8062 — Adds/imports glass-related token modules and pf-v6-tokens mixins similar to the new token files.
chore: update glass/felt workspace background images #8319 — Overlapping changes to glass/felt background-image delivery and removal of compass background-image rules.

Suggested labels

Needs design review

Suggested reviewers

mcoker
kmcfaul
lboehling

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(glass): backgrounds for glass and compass' follows conventional commit guidelines with a type prefix (feat) and scope (glass), accurately describing the main change of implementing global background images for glass themes and Compass component.
Linked Issues check	✅ Passed	The PR comprehensively addresses all coding objectives from issue `#8287`: centralized background-image responsibility to root HTML scope, created theme-specific tokens with fallbacks, restructured Compass with container wrapper, and enabled flexible CSS variable overrides for theme application.
Out of Scope Changes check	✅ Passed	All changes are within scope of issue `#8287`'s objectives: background token implementations, normalize.scss updates for HTML root styling, Compass restructuring with container wrapper, and documentation updates directly support the global background strategy and flexible application options.

_{✏️ 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

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

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

patternfly-build · 2026-04-30T21:01:01Z

Preview: https://pf-pr-8356.surge.sh

A11y report: https://pf-pr-8356-a11y.surge.sh

patternfly-build · 2026-04-30T21:01:01Z

A11y report: https://pf-pr-8356-a11y.surge.sh

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/patternfly/components/Compass/examples/Compass.md (1)

60-84: ⚠️ Potential issue | 🟠 Major

Move the masthead inside the docked container.

The docked example renders masthead as a sibling outside compass-container, but compass--HasDock=true applies the pf-m-docked class to compass-container itself. The docked styles defined in compass.scss at lines 116–120 target .pf-v6-c-compass__container.pf-m-docked > .pf-v6-c-masthead—a direct child relationship that the current example does not satisfy. Move masthead inside compass-container so the docked masthead styles apply as intended.

Proposed fix

 {{#> compass compass--HasDock=true}}
-  {{#> masthead masthead--IsDisplayInline=true}}
-    {{#> masthead-main}}
-      masthead main
-    {{/masthead-main}}
-    {{#> masthead-content}}
-      masthead content
-    {{/masthead-content}}
-  {{/masthead}}
   {{#> compass-container}}
+    {{#> masthead masthead--IsDisplayInline=true}}
+      {{#> masthead-main}}
+        masthead main
+      {{/masthead-main}}
+      {{#> masthead-content}}
+        masthead content
+      {{/masthead-content}}
+    {{/masthead}}
     {{#> compass-dock}}
       dock
     {{/compass-dock}}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/patternfly/components/Compass/examples/Compass.md` around lines 60 - 84,
The example places the masthead outside compass-container so the docked styles
on compass (compass--HasDock=true) don’t apply; move the entire masthead block
(the {{#> masthead ...}} ... {{/masthead}} section) so it is a direct child
inside the {{#> compass-container}} block (i.e., place masthead before or after
{{#> compass-dock}} but nested within {{#> compass-container}}) so the selector
targeting .pf-v6-c-compass__container.pf-m-docked > .pf-v6-c-masthead matches.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/patternfly/components/Compass/examples/Compass.md`:
- Around line 60-84: The example places the masthead outside compass-container
so the docked styles on compass (compass--HasDock=true) don’t apply; move the
entire masthead block (the {{#> masthead ...}} ... {{/masthead}} section) so it
is a direct child inside the {{#> compass-container}} block (i.e., place
masthead before or after {{#> compass-dock}} but nested within {{#>
compass-container}}) so the selector targeting
.pf-v6-c-compass__container.pf-m-docked > .pf-v6-c-masthead matches.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: fa484469-2f36-42c4-8224-e22eae92bd55

📥 Commits

Reviewing files that changed from the base of the PR and between 75e0114 and 4c6da69.

📒 Files selected for processing (13)

src/patternfly/base/normalize.scss
src/patternfly/base/patternfly-variables.scss
src/patternfly/base/tokens/tokens-local-felt-glass-dark.scss
src/patternfly/base/tokens/tokens-local-felt-glass.scss
src/patternfly/base/tokens/tokens-local-glass-dark.scss
src/patternfly/base/tokens/tokens-local-glass.scss
src/patternfly/base/tokens/tokens-local.scss
src/patternfly/components/Compass/compass-container.hbs
src/patternfly/components/Compass/compass.hbs
src/patternfly/components/Compass/compass.scss
src/patternfly/components/Compass/examples/Compass.md
src/patternfly/demos/Compass/compass--card-view.hbs
src/patternfly/patternfly.scss

💤 Files with no reviewable changes (1)

src/patternfly/patternfly.scss

…ackground semantic tokens with fallbacks, update compass structure to include compass-container partial, update documentation

… styles stemming from compass and appropriate modifier classes, move token from pf-variables file to correct local file, remove specific language from docs, cleanup unintended ai interference

…c dock-main line

… removed with the removal of the backgrounds

mcoker

🤖👍

patternfly-build · 2026-05-12T16:34:36Z

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

The release is available on:

Your semantic-release bot 📦🚀

jcmill requested review from kmcfaul, lboehling and mcoker April 30, 2026 20:58

coderabbitai Bot reviewed Apr 30, 2026

View reviewed changes

kmcfaul mentioned this pull request May 4, 2026

feat(Compass): remove background props, update structure patternfly/patternfly-react#12408

Merged

jcmill added 6 commits May 5, 2026 13:16

initial shift to bg image on html element

1e41c59

utilize token process, remove compass

da6f732

create token-local files for each glass theme variant, update theme b…

c187d27

…ackground semantic tokens with fallbacks, update compass structure to include compass-container partial, update documentation

fix linting error

d2d39e5

update masthead from outside diff

6fa7282

update demo and partial for remaining demos

5645dde

jcmill force-pushed the feat/8287-glass-theme-background branch from 0c6d117 to 5645dde Compare May 5, 2026 17:23

jcmill added 6 commits May 5, 2026 16:55

revert compass.hbs and put __container inside compass always, reapply…

97126b1

… styles stemming from compass and appropriate modifier classes, move token from pf-variables file to correct local file, remove specific language from docs, cleanup unintended ai interference

add line at end of doc

cac244a

clear spaces, pull nested docked modifier and container out, readd do…

da89f63

…c dock-main line

fix documentation of docked modifier as its applied, remove dead code…

0cf0bca

… removed with the removal of the backgrounds

manage merge conflicts

72c6190

Merge branch 'main' into feat/8287-glass-theme-background

3f7a030

mcoker reviewed May 11, 2026

View reviewed changes

Comment thread src/patternfly/components/Compass/compass.scss Outdated

pull container out and bring docked back into component

b6d4c7d

patternfly-jira-sync mentioned this pull request May 11, 2026

PatternFly 6.5 Release Testing and checklist patternfly/patternfly-org#4895

Closed

33 tasks

add glass theme tokens to set background transparent

4b11ebc

mcoker approved these changes May 12, 2026

View reviewed changes

mcoker merged commit 51e0dcc into patternfly:main May 12, 2026
5 checks passed

patternfly-build added the released on @prerelease label May 12, 2026

coderabbitai Bot mentioned this pull request May 12, 2026

default glass theme background image update #8287

Closed

This was referenced May 13, 2026

Bug - [Tokens] - Glass theme SCSS token files have incorrect relative url() paths to SVG assets #8398

Closed

fix(global): add scss var for global image path #8400

Merged

fix: update tokens from figma, address hc issues #8407

Merged

jcmill deleted the feat/8287-glass-theme-background branch June 12, 2026 14:15

This was referenced Jul 22, 2026

The automated release is failing 🚨 #8519

Closed

The automated release is failing 🚨 #8533

Closed

Navigation Menu

feat(glass): backgrounds for glass and compass - #8356

feat(glass): backgrounds for glass and compass#8356
mcoker merged 14 commits into
patternfly:mainfrom
jcmill:feat/8287-glass-theme-background

jcmill commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Apr 30, 2026 •

edited

Loading

Uh oh!

patternfly-build commented Apr 30, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

mcoker left a comment

Uh oh!

Uh oh!

patternfly-build commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jcmill commented Apr 30, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background image handling:

Compass component updates:

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

patternfly-build commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Apr 30, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jcmill commented Apr 30, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 30, 2026 •

edited

Loading

patternfly-build commented Apr 30, 2026 •

edited

Loading