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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  2. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  3. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  4. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  5. package/components/Drawer/drawer.css +4 -2
  6. package/components/Drawer/drawer.scss +4 -2
  7. package/components/Masthead/masthead.css +0 -1
  8. package/components/Masthead/masthead.scss +0 -1
  9. package/components/Page/page.css +47 -2
  10. package/components/Page/page.scss +34 -2
  11. package/components/_index.css +51 -5
  12. package/docs/components/Drawer/examples/Drawer.md +60 -0
  13. package/docs/demos/Compass/examples/Compass.md +5 -35
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +78 -9
  16. package/patternfly.css +78 -9
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
  19. package/patternfly.scss +37 -8
package/patternfly.css CHANGED
@@ -15512,7 +15512,7 @@ ul) {
15512
15512
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
15513
15513
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
15514
15514
  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15515
- --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15515
+ --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
15516
15516
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
15517
15517
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15518
15518
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15545,9 +15545,10 @@ ul) {
15545
15545
  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
15546
15546
  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
15547
15547
  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
15548
- --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
15548
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
15549
15549
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
15550
15550
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
15551
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
15551
15552
  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
15552
15553
  --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
15553
15554
  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
@@ -15794,6 +15795,7 @@ ul) {
15794
15795
  border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
15795
15796
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
15796
15797
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
15798
+ box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
15797
15799
  }
15798
15800
  }
15799
15801
  @media screen and (min-width: 48rem) {
@@ -20001,7 +20003,6 @@ ul.pf-v6-c-list {
20001
20003
  padding-inline-end: var(--pf-t--global--spacer--2xl);
20002
20004
  }
20003
20005
  :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
20004
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
20005
20006
  background-color: var(--pf-t--global--background--color--glass--primary--default);
20006
20007
  backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
20007
20008
  border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
@@ -22806,13 +22807,13 @@ ul.pf-v6-c-list {
22806
22807
  --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
22807
22808
  --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22808
22809
  --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
22809
- --pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
22810
+ --pf-v6-c-page__dock-main--BoxShadow: none;
22811
+ --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
22810
22812
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
22811
22813
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
22812
22814
  --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
22813
22815
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
22814
22816
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
22815
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
22816
22817
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
22817
22818
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22818
22819
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -22984,6 +22985,7 @@ ul.pf-v6-c-list {
22984
22985
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22985
22986
  --pf-v6-c-page--BackgroundColor--glass: transparent;
22986
22987
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
22988
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
22987
22989
  --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
22988
22990
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
22989
22991
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
@@ -23003,10 +23005,12 @@ ul.pf-v6-c-list {
23003
23005
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23004
23006
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23005
23007
  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23008
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23006
23009
  }
23007
23010
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
23008
23011
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
23009
23012
  --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
23013
+ --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
23010
23014
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
23011
23015
  --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
23012
23016
  --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 {
23022
23026
  --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
23023
23027
  --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
23024
23028
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
23029
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
23025
23030
  }
23026
23031
  @media (min-width: 75rem) {
23027
23032
  .pf-v6-c-page {
@@ -23115,6 +23120,43 @@ ul.pf-v6-c-list {
23115
23120
  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
23116
23121
  }
23117
23122
  }
23123
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
23124
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
23125
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23126
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23127
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
23128
+ --pf-v6-c-button__icon--ScaleX: 1;
23129
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23130
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
23131
+ }
23132
+ @media (min-width: 62rem) {
23133
+ .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
23134
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
23135
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
23136
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
23137
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
23138
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
23139
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
23140
+ }
23141
+ .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
23142
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
23143
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23144
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23145
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
23146
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
23147
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23148
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
23149
+ }
23150
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
23151
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
23152
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23153
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23154
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
23155
+ --pf-v6-c-button__icon--ScaleX: 1;
23156
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23157
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
23158
+ }
23159
+ }
23118
23160
 
23119
23161
  @media (min-width: 75rem) {
23120
23162
  .pf-v6-c-page > .pf-v6-c-masthead {
@@ -23172,10 +23214,14 @@ ul.pf-v6-c-list {
23172
23214
  }
23173
23215
  .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
23174
23216
  border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
23217
+ box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow);
23175
23218
  }
23176
23219
  @media (min-width: 62rem) {
23177
23220
  .pf-v6-c-page__dock-main {
23178
23221
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23222
+ --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23223
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
23224
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23179
23225
  }
23180
23226
  }
23181
23227
 
@@ -38448,13 +38494,36 @@ label.pf-v6-c-tree-view__node-text {
38448
38494
  gap: var(--pf-v6-l-stack--m-gutter--Gap);
38449
38495
  }
38450
38496
 
38451
- :where(.pf-v6-theme-glass) .pf-v6-c-login, :where(.pf-v6-theme-glass) body {
38452
- background-image: url("./assets/images/glass-brand-light.jpg");
38497
+ :root:where(.pf-v6-theme-glass) body {
38498
+ background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
38453
38499
  background-repeat: no-repeat;
38454
38500
  background-attachment: fixed;
38455
38501
  background-position: center;
38456
38502
  background-size: cover;
38457
38503
  }
38458
- :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 {
38459
- background-image: url("./assets/images/glass-brand-dark.jpg");
38504
+ :root:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
38505
+ background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
38506
+ }
38507
+ :root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat) body {
38508
+ background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
38509
+ }
38510
+ :root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat.pf-v6-theme-dark) body {
38511
+ background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
38512
+ }
38513
+
38514
+ .pf-v6-c-compass {
38515
+ background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
38516
+ background-repeat: no-repeat;
38517
+ background-attachment: fixed;
38518
+ background-position: center;
38519
+ background-size: cover;
38520
+ }
38521
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
38522
+ background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
38523
+ }
38524
+ :root:where(.pf-v6-theme-redhat) .pf-v6-c-compass {
38525
+ background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
38526
+ }
38527
+ :root:where(.pf-v6-theme-redhat.pf-v6-theme-dark) .pf-v6-c-compass {
38528
+ background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
38460
38529
  }