@patternfly/patternfly 6.5.0-prerelease.73 → 6.5.0-prerelease.74

package/docs/demos/Compass/examples/Compass.md

@@ -13,13 +13,7 @@ This demo populates the main Compass section with a card view, which is one of t
 * A `.pf-v6-c-compass__content`, which contains a glass panel component to create a rounded-rectangle container that serves as the main content background.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<div class="pf-v6-c-compass pf-m-animate-smoothly">
   <div class="pf-v6-c-compass__header pf-m-expanded">
     <div class="pf-v6-c-compass__logo">
       <svg
@@ -1657,13 +1651,7 @@ This demo populates the main Compass section with a dashboard, which is often us
 * A `.pf-v6-c-compass__content` without a glass panel component wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card has a glass modifier.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<div class="pf-v6-c-compass pf-m-animate-smoothly">
   <div class="pf-v6-c-compass__header pf-m-expanded">
     <div class="pf-v6-c-compass__logo">
       <svg
@@ -3582,13 +3570,7 @@ This demo places multiple sections within the main Compass section, with each se
 Without a glass panel component wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable glass panel components.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<div class="pf-v6-c-compass pf-m-animate-smoothly">
   <div class="pf-v6-c-compass__header pf-m-expanded">
     <div class="pf-v6-c-compass__logo">
       <svg
@@ -6123,13 +6105,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
   <div class="pf-v6-c-drawer__main">
     <div class="pf-v6-c-drawer__content">
       <div class="pf-v6-c-drawer__body">
-        <div
-          class="pf-v6-c-compass pf-m-animate-smoothly"
-          style="
-                          --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-                          --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-                        "
-        >
+        <div class="pf-v6-c-compass pf-m-animate-smoothly">
           <div class="pf-v6-c-compass__header pf-m-expanded">
             <div class="pf-v6-c-compass__logo">
               <svg
@@ -7839,13 +7815,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
 ### Docked
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked">
   <div class="pf-v6-c-compass__dock">
     <div class="pf-v6-c-skip-to-content">
       <a class="pf-v6-c-button pf-m-primary" href="#main-content-">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.73",
+  "version": "6.5.0-prerelease.74",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -15365,7 +15365,7 @@ ul) {
   --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15398,9 +15398,10 @@ ul) {
   --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
   --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
@@ -15647,6 +15648,7 @@ ul) {
     border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
     border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
     border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+    box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
   }
 }
 @media screen and (min-width: 48rem) {
@@ -19854,7 +19856,6 @@ ul.pf-v6-c-list {
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
-  margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
   background-color: var(--pf-t--global--background--color--glass--primary--default);
   backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
@@ -22837,6 +22838,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
@@ -22856,10 +22858,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
   --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
+  --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
@@ -22875,6 +22879,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
   --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
+  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -38342,13 +38347,36 @@ label.pf-v6-c-tree-view__node-text {
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
 }
 
-:where(.pf-v6-theme-glass) .pf-v6-c-login, :where(.pf-v6-theme-glass) body {
-  background-image: url("./assets/images/glass-brand-light.jpg");
+:root:where(.pf-v6-theme-glass) body {
+  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
 }
-:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) .pf-v6-c-login, :where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/glass-brand-dark.jpg");
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
+  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
+}
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat) body {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat.pf-v6-theme-dark) body {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
+}
+
+.pf-v6-c-compass {
+  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
+  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
+}
+:root:where(.pf-v6-theme-redhat) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-redhat.pf-v6-theme-dark) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
 }

package/patternfly.css

@@ -15512,7 +15512,7 @@ ul) {
   --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15545,9 +15545,10 @@ ul) {
   --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
   --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
@@ -15794,6 +15795,7 @@ ul) {
     border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
     border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
     border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+    box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
   }
 }
 @media screen and (min-width: 48rem) {
@@ -20001,7 +20003,6 @@ ul.pf-v6-c-list {
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
-  margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
   background-color: var(--pf-t--global--background--color--glass--primary--default);
   backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
@@ -22984,6 +22985,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
@@ -23003,10 +23005,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
   --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
+  --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
@@ -23022,6 +23026,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
   --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
+  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -38489,13 +38494,36 @@ label.pf-v6-c-tree-view__node-text {
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
 }
 
-:where(.pf-v6-theme-glass) .pf-v6-c-login, :where(.pf-v6-theme-glass) body {
-  background-image: url("./assets/images/glass-brand-light.jpg");
+:root:where(.pf-v6-theme-glass) body {
+  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
 }
-:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) .pf-v6-c-login, :where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/glass-brand-dark.jpg");
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
+  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
+}
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat) body {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat.pf-v6-theme-dark) body {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
+}
+
+.pf-v6-c-compass {
+  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+  background-size: cover;
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
+  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
+}
+:root:where(.pf-v6-theme-redhat) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-redhat.pf-v6-theme-dark) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
 }