@patternfly/patternfly 6.0.0-alpha.111 → 6.0.0-alpha.113

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 (30) hide show
  1. package/base/tokens/_tokens-font.scss +0 -1
  2. package/components/Toolbar/toolbar.css +16 -0
  3. package/components/Toolbar/toolbar.scss +23 -1
  4. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -4
  5. package/docs/components/Page/deprecated/PageHeader.css +4 -4
  6. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  7. package/docs/components/Tabs/examples/Tabs.md +1 -3
  8. package/docs/components/Tile/examples/Tile.css +5 -5
  9. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  10. package/docs/components/Toolbar/examples/Toolbar.css +40 -35
  11. package/docs/components/Toolbar/examples/Toolbar.md +124 -0
  12. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  13. package/docs/components/Truncate/examples/Truncate.css +1 -1
  14. package/docs/demos/Card/examples/Card.css +6 -6
  15. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  16. package/docs/utilities/Text/examples/Text.md +63 -61
  17. package/package.json +1 -1
  18. package/patternfly-addons.css +429 -764
  19. package/patternfly-no-globals.css +16 -0
  20. package/patternfly-theme-dark-unversioned.css +16 -0
  21. package/patternfly.css +16 -0
  22. package/patternfly.min.css +1 -1
  23. package/patternfly.min.css.map +1 -1
  24. package/utilities/BackgroundColor/BackgroundColor.css +36 -283
  25. package/utilities/BackgroundColor/BackgroundColor.scss +6 -45
  26. package/utilities/Text/text.css +393 -481
  27. package/utilities/Text/text.scss +69 -90
  28. package/docs/components/Tabs/examples/Tabs.css +0 -10
  29. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  30. package/docs/utilities/Text/examples/Text.css +0 -0
package/patternfly-no-globals.css CHANGED
@@ -11783,6 +11783,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11783
11783
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11784
11784
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11785
11785
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11786
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11787
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11788
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11789
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11786
11790
  --pf-v6-c-toolbar__item--Width: auto;
11787
11791
  --pf-v6-c-toolbar__item--MinWidth: auto;
11788
11792
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11796,6 +11800,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11796
11800
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11797
11801
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11798
11802
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11803
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11799
11804
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11800
11805
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11801
11806
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11823,8 +11828,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11823
11828
  width: var(--pf-v6-c-toolbar--Width, auto);
11824
11829
  font-size: var(--pf-v6-c-toolbar--FontSize);
11825
11830
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11831
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11826
11832
  }
11827
11833
  .pf-v6-c-toolbar.pf-m-sticky {
11834
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11828
11835
  position: sticky;
11829
11836
  inset-block-start: 0;
11830
11837
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11849,6 +11856,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11849
11856
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11850
11857
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11851
11858
  }
11859
+ .pf-v6-c-toolbar.pf-m-primary {
11860
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11861
+ }
11862
+ .pf-v6-c-toolbar.pf-m-secondary {
11863
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11864
+ }
11865
+ .pf-v6-c-toolbar.pf-m-no-background {
11866
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11867
+ }
11852
11868
 
11853
11869
  .pf-v6-c-toolbar__content,
11854
11870
  .pf-v6-c-toolbar__content-section,
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -11900,6 +11900,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11900
11900
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11901
11901
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11902
11902
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11903
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11904
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11905
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11906
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11903
11907
  --pf-v6-c-toolbar__item--Width: auto;
11904
11908
  --pf-v6-c-toolbar__item--MinWidth: auto;
11905
11909
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11913,6 +11917,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11913
11917
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11914
11918
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11915
11919
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11920
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11916
11921
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11917
11922
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11918
11923
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11940,8 +11945,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11940
11945
  width: var(--pf-v6-c-toolbar--Width, auto);
11941
11946
  font-size: var(--pf-v6-c-toolbar--FontSize);
11942
11947
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11948
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11943
11949
  }
11944
11950
  .pf-v6-c-toolbar.pf-m-sticky {
11951
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11945
11952
  position: sticky;
11946
11953
  inset-block-start: 0;
11947
11954
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11966,6 +11973,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11966
11973
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11967
11974
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11968
11975
  }
11976
+ .pf-v6-c-toolbar.pf-m-primary {
11977
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11978
+ }
11979
+ .pf-v6-c-toolbar.pf-m-secondary {
11980
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11981
+ }
11982
+ .pf-v6-c-toolbar.pf-m-no-background {
11983
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11984
+ }
11969
11985
 
11970
11986
  .pf-v6-c-toolbar__content,
11971
11987
  .pf-v6-c-toolbar__content-section,
package/patternfly.css CHANGED
@@ -11900,6 +11900,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11900
11900
  --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
11901
11901
  --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
11902
11902
  --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
11903
+ --pf-v6-c-toolbar--BackgroundColor: transparent;
11904
+ --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11905
+ --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11906
+ --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent;
11903
11907
  --pf-v6-c-toolbar__item--Width: auto;
11904
11908
  --pf-v6-c-toolbar__item--MinWidth: auto;
11905
11909
  --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11913,6 +11917,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11913
11917
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11914
11918
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
11915
11919
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
11920
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11916
11921
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
11917
11922
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
11918
11923
  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
@@ -11940,8 +11945,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11940
11945
  width: var(--pf-v6-c-toolbar--Width, auto);
11941
11946
  font-size: var(--pf-v6-c-toolbar--FontSize);
11942
11947
  line-height: var(--pf-v6-c-toolbar--LineHeight);
11948
+ background-color: var(--pf-v6-c-toolbar--BackgroundColor);
11943
11949
  }
11944
11950
  .pf-v6-c-toolbar.pf-m-sticky {
11951
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
11945
11952
  position: sticky;
11946
11953
  inset-block-start: 0;
11947
11954
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
@@ -11966,6 +11973,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
11966
11973
  --pf-v6-c-toolbar--PaddingInlineStart: var(--pf-v6-c-toolbar--m-page-insets--inset);
11967
11974
  --pf-v6-c-toolbar--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-page-insets--inset);
11968
11975
  }
11976
+ .pf-v6-c-toolbar.pf-m-primary {
11977
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
11978
+ }
11979
+ .pf-v6-c-toolbar.pf-m-secondary {
11980
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-secondary--BackgroundColor);
11981
+ }
11982
+ .pf-v6-c-toolbar.pf-m-no-background {
11983
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
11984
+ }
11969
11985
 
11970
11986
  .pf-v6-c-toolbar__content,
11971
11987
  .pf-v6-c-toolbar__content-section,