@patternfly/patternfly 6.5.0-prerelease.75 → 6.5.0-prerelease.77

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 (15) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/Table/table-scrollable.css +1 -1
  4. package/components/Table/table-scrollable.scss +1 -1
  5. package/components/Toolbar/toolbar.css +48 -1
  6. package/components/Toolbar/toolbar.scss +53 -1
  7. package/components/_index.css +91 -39
  8. package/docs/components/Button/examples/Button.md +298 -1
  9. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  10. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  11. package/package.json +2 -2
  12. package/patternfly-no-globals.css +91 -39
  13. package/patternfly.css +91 -39
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -11493,43 +11493,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11493
11493
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
11494
11494
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
11495
11495
  }
11496
- .pf-v6-c-button.pf-m-stateful {
11497
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11498
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11499
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11500
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11501
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11502
- }
11503
- .pf-v6-c-button.pf-m-read {
11504
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11505
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11506
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11507
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11508
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11509
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11510
- }
11511
- .pf-v6-c-button.pf-m-unread {
11512
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11513
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11514
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11515
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11516
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11517
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11518
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11519
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11520
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11521
- }
11522
- .pf-v6-c-button.pf-m-attention {
11523
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11524
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11525
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11526
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11527
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11528
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11529
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11530
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11531
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11532
- }
11533
11496
  .pf-v6-c-button.pf-m-plain {
11534
11497
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
11535
11498
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -11553,6 +11516,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11553
11516
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
11554
11517
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
11555
11518
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
11519
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
11520
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
11521
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
11522
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
11523
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
11556
11524
  }
11557
11525
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
11558
11526
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -11569,6 +11537,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11569
11537
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
11570
11538
  background: var(--pf-v6-c-button--BackgroundColor);
11571
11539
  }
11540
+ .pf-v6-c-button.pf-m-stateful {
11541
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11542
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11543
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11544
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11545
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11546
+ }
11547
+ .pf-v6-c-button.pf-m-read {
11548
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11549
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11550
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11551
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11552
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11553
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11554
+ }
11555
+ .pf-v6-c-button.pf-m-unread {
11556
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11557
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11558
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11559
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11560
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11561
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11562
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11563
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11564
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11565
+ }
11566
+ .pf-v6-c-button.pf-m-attention {
11567
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11568
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11569
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11570
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11571
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11572
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11573
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11574
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11575
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11576
+ }
11572
11577
  .pf-v6-c-button.pf-m-block {
11573
11578
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11574
11579
  width: var(--pf-v6-c-button--m-block--Width);
@@ -29274,7 +29279,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29274
29279
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29275
29280
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29276
29281
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29277
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29282
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29278
29283
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29279
29284
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29280
29285
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31740,10 +31745,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31740
31745
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31741
31746
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31742
31747
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31748
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31749
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31743
31750
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31744
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31751
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31745
31752
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31746
31753
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31754
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31755
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31756
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31757
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31758
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31759
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31760
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31761
+ }
31762
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31763
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31764
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31765
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31766
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31767
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31768
+ }
31769
+ .pf-v6-c-toolbar {
31747
31770
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31748
31771
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31749
31772
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -32020,6 +32043,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32020
32043
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32021
32044
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32022
32045
  }
32046
+ .pf-v6-c-toolbar.pf-m-sticky-base {
32047
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
32048
+ position: sticky;
32049
+ inset-block-start: 0;
32050
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
32051
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
32052
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
32053
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
32054
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
32055
+ background: transparent;
32056
+ border-radius: inherit;
32057
+ }
32058
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
32059
+ position: absolute;
32060
+ inset: 0;
32061
+ z-index: -1;
32062
+ content: "";
32063
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
32064
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32065
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
32066
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32067
+ opacity: 0;
32068
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
32069
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
32070
+ transition-property: opacity;
32071
+ }
32072
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
32073
+ opacity: 1;
32074
+ }
32023
32075
  .pf-v6-c-toolbar.pf-m-static,
32024
32076
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
32025
32077
  position: static;