@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.5

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/base/patternfly-variables.css +2 -0
  2. package/base/tokens/tokens-felt-glass.scss +2 -1
  3. package/base/tokens/tokens-glass.scss +2 -1
  4. package/components/Button/button.css +3 -0
  5. package/components/Button/button.scss +4 -0
  6. package/components/Masthead/masthead.css +1 -1
  7. package/components/Masthead/masthead.scss +1 -1
  8. package/components/MenuToggle/menu-toggle.css +3 -0
  9. package/components/MenuToggle/menu-toggle.scss +4 -1
  10. package/components/Page/page.css +18 -17
  11. package/components/Page/page.scss +20 -21
  12. package/components/_index.css +25 -18
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals.css +2 -0
  15. package/patternfly-base.css +2 -0
  16. package/patternfly-no-globals.css +27 -18
  17. package/patternfly.css +27 -18
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -8241,6 +8241,7 @@ button) {
8241
8241
  --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
8242
8242
  --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
8243
8243
  --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
8244
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8244
8245
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8245
8246
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
8246
8247
  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
@@ -8394,6 +8395,7 @@ button) {
8394
8395
  --pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--200);
8395
8396
  --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
8396
8397
  --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
8398
+ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--md);
8397
8399
  --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
8398
8400
  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
8399
8401
  }
@@ -11892,6 +11894,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11892
11894
  justify-content: flex-start;
11893
11895
  width: 100%;
11894
11896
  }
11897
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__icon {
11898
+ min-width: 1lh;
11899
+ }
11895
11900
  @media (min-width: 62rem) {
11896
11901
  .pf-v6-c-button.pf-m-docked {
11897
11902
  justify-content: center;
@@ -20081,7 +20086,7 @@ ul.pf-v6-c-list {
20081
20086
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
20082
20087
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
20083
20088
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
20084
- --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
20089
+ --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
20085
20090
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
20086
20091
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20087
20092
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
@@ -21712,6 +21717,9 @@ ul.pf-v6-c-list {
21712
21717
  justify-content: flex-start;
21713
21718
  width: 100%;
21714
21719
  }
21720
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
21721
+ min-width: 1lh;
21722
+ }
21715
21723
  @media (min-width: 62rem) {
21716
21724
  .pf-v6-c-menu-toggle.pf-m-docked {
21717
21725
  justify-content: center;
@@ -23107,11 +23115,6 @@ ul.pf-v6-c-list {
23107
23115
  .pf-v6-c-page {
23108
23116
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
23109
23117
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
23110
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
23111
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
23112
- --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
23113
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23114
- --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
23115
23118
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
23116
23119
  --pf-v6-c-page__dock--Width: 15.625rem;
23117
23120
  --pf-v6-c-page__dock--desktop--Width: auto;
@@ -23130,6 +23133,11 @@ ul.pf-v6-c-list {
23130
23133
  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23131
23134
  --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));
23132
23135
  --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));
23136
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23137
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23138
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23139
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23140
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
23133
23141
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
23134
23142
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
23135
23143
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -23300,20 +23308,17 @@ ul.pf-v6-c-list {
23300
23308
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
23301
23309
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
23302
23310
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
23303
- --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
23304
- --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
23305
- --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
23306
23311
  --pf-v6-c-page--BackgroundColor--glass: transparent;
23307
23312
  --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
23308
- --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23309
- --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
23310
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
23313
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23314
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
23315
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
23311
23316
  --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
23312
23317
  --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
23313
23318
  --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
23314
- --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
23315
- --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
23316
- --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
23319
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--xs) * -1);
23320
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23321
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: calc(var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--xs));
23317
23322
  --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
23318
23323
  --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
23319
23324
  --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
@@ -23324,9 +23329,11 @@ ul.pf-v6-c-list {
23324
23329
  --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
23325
23330
  --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23326
23331
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23327
- --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
23328
- --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
23329
- --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23332
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--gutter--default);
23333
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23334
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23335
+ --pf-v6-c-page--m-dock__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) - var(--pf-t--global--spacer--gutter--default));
23336
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--gutter--default);
23330
23337
  }
23331
23338
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
23332
23339
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -23349,6 +23356,8 @@ ul.pf-v6-c-list {
23349
23356
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
23350
23357
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
23351
23358
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
23359
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight--glass);
23360
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart--glass);
23352
23361
  }
23353
23362
  @media (min-width: 75rem) {
23354
23363
  .pf-v6-c-page {