@patternfly/patternfly 6.0.0-alpha.114 → 6.0.0-alpha.116

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 (128) hide show
  1. package/assets/images/pf_logo.svg +11 -11
  2. package/assets/images/pf_logo_white.svg +2 -2
  3. package/base/_chart-globals.scss +320 -320
  4. package/base/_fa-icons.scss +2 -2
  5. package/base/_fonts.scss +16 -16
  6. package/base/_globals.scss +4 -11
  7. package/base/_variables.scss +221 -221
  8. package/base/patternfly-globals.css +2 -6
  9. package/base/patternfly-variables.css +25 -21
  10. package/base/themes/dark/_chart-globals.scss +25 -25
  11. package/base/tokens/_tokens-charts.scss +1 -1
  12. package/base/tokens/_tokens-dark.scss +1 -1
  13. package/base/tokens/_tokens-default.scss +13 -13
  14. package/base/tokens/_tokens-font.scss +8 -0
  15. package/base/tokens/_tokens-palette.scss +1 -1
  16. package/components/AboutModalBox/about-modal-box.css +1 -1
  17. package/components/AboutModalBox/about-modal-box.scss +1 -1
  18. package/components/Alert/alert-group.css +1 -1
  19. package/components/Alert/alert-group.scss +1 -1
  20. package/components/Alert/alert.css +1 -1
  21. package/components/Alert/alert.scss +1 -1
  22. package/components/AppLauncher/app-launcher.css +1 -1
  23. package/components/AppLauncher/app-launcher.scss +1 -1
  24. package/components/Backdrop/backdrop.css +1 -1
  25. package/components/Backdrop/backdrop.scss +1 -1
  26. package/components/Banner/banner.css +1 -1
  27. package/components/Banner/banner.scss +1 -1
  28. package/components/Button/button.css +3 -3
  29. package/components/Button/button.scss +3 -3
  30. package/components/Card/card.css +1 -1
  31. package/components/Card/card.scss +1 -1
  32. package/components/Content/content.css +1 -1
  33. package/components/Content/content.scss +1 -1
  34. package/components/ContextSelector/context-selector.css +1 -1
  35. package/components/ContextSelector/context-selector.scss +1 -1
  36. package/components/DatePicker/date-picker.css +1 -1
  37. package/components/DatePicker/date-picker.scss +1 -1
  38. package/components/Drawer/drawer.css +4 -4
  39. package/components/Drawer/drawer.scss +4 -4
  40. package/components/Dropdown/dropdown.css +2 -2
  41. package/components/Dropdown/dropdown.scss +2 -2
  42. package/components/DualListSelector/dual-list-selector.css +1 -1
  43. package/components/DualListSelector/dual-list-selector.scss +3 -3
  44. package/components/Form/form.css +1 -1
  45. package/components/Form/form.scss +1 -1
  46. package/components/JumpLinks/jump-links.css +1 -1
  47. package/components/JumpLinks/jump-links.scss +1 -1
  48. package/components/List/list.css +1 -1
  49. package/components/List/list.scss +1 -1
  50. package/components/Menu/menu.css +7 -7
  51. package/components/Menu/menu.scss +7 -7
  52. package/components/MenuToggle/menu-toggle.css +1 -1
  53. package/components/MenuToggle/menu-toggle.scss +1 -1
  54. package/components/ModalBox/modal-box.css +1 -1
  55. package/components/ModalBox/modal-box.scss +1 -1
  56. package/components/Nav/nav.css +1 -1
  57. package/components/Nav/nav.scss +1 -1
  58. package/components/NotificationDrawer/notification-drawer.css +2 -2
  59. package/components/NotificationDrawer/notification-drawer.scss +2 -2
  60. package/components/OptionsMenu/options-menu.css +1 -1
  61. package/components/OptionsMenu/options-menu.scss +1 -1
  62. package/components/Page/page.css +8 -8
  63. package/components/Page/page.scss +14 -14
  64. package/components/Panel/panel.css +1 -1
  65. package/components/Panel/panel.scss +1 -1
  66. package/components/ProgressStepper/progress-stepper.css +2 -2
  67. package/components/ProgressStepper/progress-stepper.scss +2 -2
  68. package/components/Select/select.css +1 -1
  69. package/components/Select/select.scss +1 -1
  70. package/components/Sidebar/sidebar.css +2 -2
  71. package/components/Sidebar/sidebar.scss +2 -2
  72. package/components/SkipToContent/skip-to-content.css +1 -1
  73. package/components/SkipToContent/skip-to-content.scss +1 -1
  74. package/components/Slider/slider.css +1 -1
  75. package/components/Slider/slider.scss +1 -1
  76. package/components/Table/table-scrollable.css +1 -1
  77. package/components/Table/table-scrollable.scss +1 -1
  78. package/components/Table/table.css +4 -4
  79. package/components/Table/table.scss +4 -4
  80. package/components/Tabs/tabs.css +1 -1
  81. package/components/Tabs/tabs.scss +1 -1
  82. package/components/ToggleGroup/toggle-group.css +3 -3
  83. package/components/ToggleGroup/toggle-group.scss +3 -3
  84. package/components/Toolbar/toolbar.css +3 -3
  85. package/components/Toolbar/toolbar.scss +3 -3
  86. package/components/TreeView/tree-view.css +1 -1
  87. package/components/TreeView/tree-view.scss +3 -3
  88. package/components/Wizard/wizard.css +4 -4
  89. package/components/Wizard/wizard.scss +4 -4
  90. package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
  91. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  92. package/docs/components/Table/examples/Table.md +2 -2
  93. package/docs/components/Tabs/examples/Tabs.md +102 -102
  94. package/docs/components/TextInputGroup/examples/TextInputGroup.css +1 -1
  95. package/docs/demos/Card/examples/Card.md +152 -115
  96. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  97. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  98. package/docs/demos/Table/examples/Table.md +2 -2
  99. package/docs/demos/Toolbar/examples/Toolbar.css +3 -3
  100. package/docs/utilities/Text/examples/Text.md +0 -1
  101. package/package.json +1 -1
  102. package/patternfly-base-no-globals-theme-dark-unversioned.css +25 -81
  103. package/patternfly-base-no-globals-theme-dark-unversioned.scss +2 -2
  104. package/patternfly-base-no-globals.css +25 -81
  105. package/patternfly-base-no-globals.scss +2 -2
  106. package/patternfly-base-theme-dark-unversioned.css +27 -83
  107. package/patternfly-base.css +27 -83
  108. package/patternfly-base.scss +0 -1
  109. package/patternfly-charts.scss +319 -319
  110. package/patternfly-no-globals.css +100 -129
  111. package/patternfly-no-globals.scss +2 -2
  112. package/patternfly-theme-dark-unversioned.css +124 -153
  113. package/patternfly-theme-dark-unversioned.scss +1 -1
  114. package/patternfly.css +102 -131
  115. package/patternfly.min.css +1 -1
  116. package/patternfly.min.css.map +1 -1
  117. package/sass-utilities/_init.scss +3 -3
  118. package/sass-utilities/colors.scss +81 -81
  119. package/sass-utilities/functions.scss +2 -2
  120. package/sass-utilities/mixins.scss +1 -1
  121. package/sass-utilities/scss-variables.scss +149 -149
  122. package/sass-utilities/themes/dark/colors.scss +15 -15
  123. package/sass-utilities/themes/dark/scss-variables.scss +74 -74
  124. package/themes/dark/_patternfly-charts-theme-dark.scss +25 -25
  125. package/base/_themes.scss +0 -43
  126. package/base/patternfly-themes.css +0 -82
  127. package/base/patternfly-themes.scss +0 -2
  128. package/base/themes/dark/_globals.scss +0 -5
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
11
11
  --pf-v6-c-toggle-group__button--ZIndex: auto;
12
12
  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
13
- --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
13
+ --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
14
14
  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
15
15
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
16
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -24,12 +24,12 @@
24
24
  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
25
25
  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
26
  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
27
- --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
27
+ --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
28
28
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
29
29
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
30
30
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
31
31
  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
32
- --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
32
+ --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
33
33
  --pf-v6-c-toggle-group--m-compact__button--PaddingTop: 0;
34
34
  --pf-v6-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
35
35
  --pf-v6-c-toggle-group--m-compact__button--PaddingBottom: 0;
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
14
14
  --#{$toggle-group}__button--ZIndex: auto;
15
15
  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
16
- --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
16
+ --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
17
17
  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
18
18
  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
19
19
  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -33,14 +33,14 @@
33
33
  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
34
34
  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
35
35
  --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
36
- --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
36
+ --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
37
37
 
38
38
  // disabled
39
39
  --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
40
40
  --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
41
41
  --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
42
42
  --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
43
- --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
43
+ --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
44
44
 
45
45
  // Compact
46
46
  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
package/components/Toolbar/toolbar.css CHANGED
@@ -93,15 +93,15 @@
93
93
  --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
94
94
  --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
95
95
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
96
- --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--Zindex--xs);
96
+ --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--xs);
97
97
  --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
98
98
  --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
- --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
99
+ --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
100
100
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
101
101
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
102
102
  --pf-v6-c-toolbar--m-page-insets--inset: var(--pf-v6-c-page--inset);
103
103
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
104
- --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-v6-global--Transition);
104
+ --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
105
105
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
106
106
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--xs);
107
107
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
package/components/Toolbar/toolbar.scss CHANGED
@@ -38,12 +38,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
38
38
  --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
39
39
 
40
40
  // * Toolbar expandable content
41
- --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--Zindex--xs);
41
+ --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--xs);
42
42
  --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
43
43
  --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
44
44
 
45
45
  // * Toolbar sticky
46
- --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
46
+ --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
47
47
  --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
48
48
  --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
49
49
 
@@ -52,7 +52,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
52
52
 
53
53
  // * Toolbar expand all
54
54
  --#{$toolbar}__expand-all-icon--Rotate: 0;
55
- --#{$toolbar}__expand-all-icon--Transition: var(--#{$pf-global}--Transition); // TODO: update when transition is tokenized
55
+ --#{$toolbar}__expand-all-icon--Transition: var(--pf-t--global--transition);
56
56
  --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
57
57
 
58
58
  // * Toolbar filter group
package/components/TreeView/tree-view.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --pf-v6-c-tree-view--m-guides__list-item--before--BackgroundColor: var(--pf-v6-c-tree-view--m-guides--guide-color--base);
57
57
  --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Top: var(--pf-v6-c-tree-view--m-guides__node--before--Top);
58
58
  --pf-v6-c-tree-view--m-guides__list-item--last-child--before--Height: var(--pf-v6-c-tree-view--m-guides__list-item--last-child--before--Top);
59
- --pf-v6-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
59
+ --pf-v6-c-tree-view--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
60
60
  --pf-v6-c-tree-view--m-guides__node--before--Width: 1rem;
61
61
  --pf-v6-c-tree-view--m-guides__node--before--Height: var(--pf-v6-c-tree-view--m-guides--guide-width--base);
62
62
  --pf-v6-c-tree-view--m-guides__node--before--Top: 1.125rem;
package/components/TreeView/tree-view.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // @debug $tree-view; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
- $pf-v5-c-tree-view--MaxNesting: 10 !default;
2
+ $pf-v6-c-tree-view--MaxNesting: 10 !default;
3
3
 
4
4
  :where(:root),
5
5
  :where(.#{$tree-view}) {
@@ -95,7 +95,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
95
95
  --#{$tree-view}--m-guides__list-item--before--BackgroundColor: var(--#{$tree-view}--m-guides--guide-color--base);
96
96
  --#{$tree-view}--m-guides__list-item--last-child--before--Top: var(--#{$tree-view}--m-guides__node--before--Top);
97
97
  --#{$tree-view}--m-guides__list-item--last-child--before--Height: var(--#{$tree-view}--m-guides__list-item--last-child--before--Top);
98
- --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
98
+ --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
99
99
 
100
100
  // Node
101
101
  --#{$tree-view}--m-guides__node--before--Width: #{pf-size-prem(16px)};
@@ -491,7 +491,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
491
491
  $root: &;
492
492
  $nested-item: &;
493
493
 
494
- @for $i from 1 through $pf-v5-c-tree-view--MaxNesting {
494
+ @for $i from 1 through $pf-v6-c-tree-view--MaxNesting {
495
495
  #{$nested-item} {
496
496
  --#{$tree-view}__list-item__list-item__node-toggle--Left: var(--#{$tree-view}__node--PaddingLeft);
497
497
  --#{$tree-view}__node--PaddingLeft: calc(var(--#{$tree-view}__node--nested-indent--base) * #{$i} + var(--#{$tree-view}__node--indent--base));
package/components/Wizard/wizard.css CHANGED
@@ -36,7 +36,7 @@
36
36
  --pf-v6-c-wizard__nav-link-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
37
37
  --pf-v6-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
38
38
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
39
- --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-v6-global--Transition);
39
+ --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
40
40
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
41
41
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
42
42
  --pf-v6-c-wizard__nav-link--before--Width: 1.5rem;
@@ -53,7 +53,7 @@
53
53
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
54
54
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
55
55
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
56
- --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--Zindex--xs);
56
+ --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
57
57
  --pf-v6-c-wizard__toggle--PaddingTop: var(--pf-t--global--spacer--lg);
58
58
  --pf-v6-c-wizard__toggle--PaddingRight: var(--pf-t--global--spacer--md);
59
59
  --pf-v6-c-wizard__toggle--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -70,7 +70,7 @@
70
70
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
71
71
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
72
72
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
73
- --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--Zindex--xs);
73
+ --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--xs);
74
74
  --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
75
75
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
76
76
  --pf-v6-c-wizard__nav--Width: 100%;
@@ -93,7 +93,7 @@
93
93
  --pf-v6-c-wizard__main-body--PaddingBottom: var(--pf-t--global--spacer--lg);
94
94
  --pf-v6-c-wizard__main-body--PaddingLeft: var(--pf-t--global--spacer--lg);
95
95
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
96
- --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--Zindex--xs);
96
+ --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
97
97
  --pf-v6-c-wizard__footer--PaddingTop: var(--pf-t--global--spacer--lg);
98
98
  --pf-v6-c-wizard__footer--PaddingRight: var(--pf-t--global--spacer--lg);
99
99
  --pf-v6-c-wizard__footer--PaddingBottom: var(--pf-t--global--spacer--md);
package/components/Wizard/wizard.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  --#{$wizard}__nav-link-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
53
53
  --#{$wizard}__nav-link-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
54
54
  --#{$wizard}__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
55
- --#{$wizard}__nav-link-toggle-icon--Transition: var(--#{$pf-global}--Transition);
55
+ --#{$wizard}__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
56
56
  --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
57
57
  --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
58
58
 
@@ -73,7 +73,7 @@
73
73
 
74
74
  // Toggle
75
75
  --#{$wizard}__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
76
- --#{$wizard}__toggle--ZIndex: var(--pf-t--global--Zindex--xs);
76
+ --#{$wizard}__toggle--ZIndex: var(--pf-t--global--z-index--xs);
77
77
  --#{$wizard}__toggle--PaddingTop: var(--pf-t--global--spacer--lg);
78
78
  --#{$wizard}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
79
79
  --#{$wizard}__toggle--PaddingBottom: var(--pf-t--global--spacer--lg);
@@ -102,7 +102,7 @@
102
102
  --#{$wizard}__toggle--m-expanded__toggle-icon--Rotate: 180deg;
103
103
 
104
104
  // Nav
105
- --#{$wizard}__nav--ZIndex: var(--pf-t--global--Zindex--xs);
105
+ --#{$wizard}__nav--ZIndex: var(--pf-t--global--z-index--xs);
106
106
  --#{$wizard}__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
107
107
  --#{$wizard}__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
108
108
  --#{$wizard}__nav--Width: 100%;
@@ -142,7 +142,7 @@
142
142
 
143
143
  // Footer
144
144
  --#{$wizard}__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
145
- --#{$wizard}__footer--ZIndex: var(--pf-t--global--Zindex--xs);
145
+ --#{$wizard}__footer--ZIndex: var(--pf-t--global--z-index--xs);
146
146
  --#{$wizard}__footer--PaddingTop: var(--pf-t--global--spacer--lg);
147
147
  --#{$wizard}__footer--PaddingRight: var(--pf-t--global--spacer--lg);
148
148
  --#{$wizard}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
package/docs/components/NotificationBadge/examples/NotificationBadge.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-notification-badge
14
14
  aria-label="Notifications"
15
15
  >
16
16
  <span class="pf-v6-c-notification-badge pf-m-read">
17
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
17
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
18
18
  </span>
19
19
  </button>
20
20
  <button
@@ -23,7 +23,7 @@ cssPrefix: pf-v6-c-notification-badge
23
23
  aria-label="Unread notifications"
24
24
  >
25
25
  <span class="pf-v6-c-notification-badge pf-m-unread">
26
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
26
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
27
27
  </span>
28
28
  </button>
29
29
  <button
@@ -32,14 +32,14 @@ cssPrefix: pf-v6-c-notification-badge
32
32
  aria-label="Attention notifications"
33
33
  >
34
34
  <span class="pf-v6-c-notification-badge pf-m-attention">
35
- <i class="pf-v5-pficon-attention-bell" aria-hidden="true"></i>
35
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
36
36
  </span>
37
37
  </button>
38
38
  <br />
39
39
  <br />
40
40
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Tasks">
41
41
  <span class="pf-v6-c-notification-badge pf-m-read">
42
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
42
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
43
43
  </span>
44
44
  </button>
45
45
  <button
@@ -48,7 +48,7 @@ cssPrefix: pf-v6-c-notification-badge
48
48
  aria-label="Unread tasks"
49
49
  >
50
50
  <span class="pf-v6-c-notification-badge pf-m-unread">
51
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
51
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
52
52
  </span>
53
53
  </button>
54
54
  <button
@@ -57,7 +57,7 @@ cssPrefix: pf-v6-c-notification-badge
57
57
  aria-label="Attention tasks"
58
58
  >
59
59
  <span class="pf-v6-c-notification-badge pf-m-attention">
60
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
60
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
61
61
  </span>
62
62
  </button>
63
63
  </div>
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-notification-badge
74
74
  aria-label="24 notifications"
75
75
  >
76
76
  <span class="pf-v6-c-notification-badge pf-m-read">
77
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
77
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
78
78
  <span class="pf-v6-c-notification-badge__count">24</span>
79
79
  </span>
80
80
  </button>
@@ -84,7 +84,7 @@ cssPrefix: pf-v6-c-notification-badge
84
84
  aria-label="24 unread notifications"
85
85
  >
86
86
  <span class="pf-v6-c-notification-badge pf-m-unread">
87
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
87
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
88
88
  <span class="pf-v6-c-notification-badge__count">24</span>
89
89
  </span>
90
90
  </button>
@@ -94,7 +94,7 @@ cssPrefix: pf-v6-c-notification-badge
94
94
  aria-label="24 attention notifications"
95
95
  >
96
96
  <span class="pf-v6-c-notification-badge pf-m-attention">
97
- <i class="pf-v5-pficon-attention-bell" aria-hidden="true"></i>
97
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
98
98
  <span class="pf-v6-c-notification-badge__count">24</span>
99
99
  </span>
100
100
  </button>
@@ -102,7 +102,7 @@ cssPrefix: pf-v6-c-notification-badge
102
102
  <br />
103
103
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="24 tasks">
104
104
  <span class="pf-v6-c-notification-badge pf-m-read">
105
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
105
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
106
106
  <span class="pf-v6-c-notification-badge__count">24</span>
107
107
  </span>
108
108
  </button>
@@ -112,7 +112,7 @@ cssPrefix: pf-v6-c-notification-badge
112
112
  aria-label="24 unread tasks"
113
113
  >
114
114
  <span class="pf-v6-c-notification-badge pf-m-unread">
115
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
115
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
116
116
  <span class="pf-v6-c-notification-badge__count">24</span>
117
117
  </span>
118
118
  </button>
@@ -122,7 +122,7 @@ cssPrefix: pf-v6-c-notification-badge
122
122
  aria-label="24 attention tasks"
123
123
  >
124
124
  <span class="pf-v6-c-notification-badge pf-m-attention">
125
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
125
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
126
126
  <span class="pf-v6-c-notification-badge__count">24</span>
127
127
  </span>
128
128
  </button>
@@ -141,7 +141,7 @@ cssPrefix: pf-v6-c-notification-badge
141
141
  aria-label="Notifications"
142
142
  >
143
143
  <span class="pf-v6-c-notification-badge pf-m-read pf-m-expanded">
144
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
144
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
145
145
  </span>
146
146
  </button>
147
147
  <button
@@ -151,7 +151,7 @@ cssPrefix: pf-v6-c-notification-badge
151
151
  aria-label="Unread notifications"
152
152
  >
153
153
  <span class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded">
154
- <i class="pf-v5-pficon-bell" aria-hidden="true"></i>
154
+ <i class="pf-v6-pficon-bell" aria-hidden="true"></i>
155
155
  </span>
156
156
  </button>
157
157
  <button
@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-notification-badge
161
161
  aria-label="Attention notifications"
162
162
  >
163
163
  <span class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded">
164
- <i class="pf-v5-pficon-attention-bell" aria-hidden="true"></i>
164
+ <i class="pf-v6-pficon-attention-bell" aria-hidden="true"></i>
165
165
  </span>
166
166
  </button>
167
167
  <br />
@@ -173,7 +173,7 @@ cssPrefix: pf-v6-c-notification-badge
173
173
  aria-label="Tasks"
174
174
  >
175
175
  <span class="pf-v6-c-notification-badge pf-m-read pf-m-expanded">
176
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
176
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
177
177
  </span>
178
178
  </button>
179
179
  <button
@@ -183,7 +183,7 @@ cssPrefix: pf-v6-c-notification-badge
183
183
  aria-label="Unread tasks"
184
184
  >
185
185
  <span class="pf-v6-c-notification-badge pf-m-unread pf-m-expanded">
186
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
186
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
187
187
  </span>
188
188
  </button>
189
189
  <button
@@ -193,7 +193,7 @@ cssPrefix: pf-v6-c-notification-badge
193
193
  aria-label="Attention tasks"
194
194
  >
195
195
  <span class="pf-v6-c-notification-badge pf-m-attention pf-m-expanded">
196
- <i class="pf-v5-pficon-task" aria-hidden="true"></i>
196
+ <i class="pf-v6-pficon-task" aria-hidden="true"></i>
197
197
  </span>
198
198
  </button>
199
199
  </div>
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -29,7 +29,7 @@ cssPrefix: pf-v6-c-progress-stepper
29
29
  >
30
30
  <div class="pf-v6-c-progress-stepper__step-connector">
31
31
  <span class="pf-v6-c-progress-stepper__step-icon">
32
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
32
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
33
33
  </span>
34
34
  </div>
35
35
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -80,7 +80,7 @@ cssPrefix: pf-v6-c-progress-stepper
80
80
  >
81
81
  <div class="pf-v6-c-progress-stepper__step-connector">
82
82
  <span class="pf-v6-c-progress-stepper__step-icon">
83
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
83
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
84
84
  </span>
85
85
  </div>
86
86
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -140,7 +140,7 @@ cssPrefix: pf-v6-c-progress-stepper
140
140
  >
141
141
  <div class="pf-v6-c-progress-stepper__step-connector">
142
142
  <span class="pf-v6-c-progress-stepper__step-icon">
143
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
143
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
144
144
  </span>
145
145
  </div>
146
146
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -197,7 +197,7 @@ cssPrefix: pf-v6-c-progress-stepper
197
197
  >
198
198
  <div class="pf-v6-c-progress-stepper__step-connector">
199
199
  <span class="pf-v6-c-progress-stepper__step-icon">
200
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
200
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
201
201
  </span>
202
202
  </div>
203
203
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -254,7 +254,7 @@ cssPrefix: pf-v6-c-progress-stepper
254
254
  >
255
255
  <div class="pf-v6-c-progress-stepper__step-connector">
256
256
  <span class="pf-v6-c-progress-stepper__step-icon">
257
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
257
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
258
258
  </span>
259
259
  </div>
260
260
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -311,7 +311,7 @@ cssPrefix: pf-v6-c-progress-stepper
311
311
  >
312
312
  <div class="pf-v6-c-progress-stepper__step-connector">
313
313
  <span class="pf-v6-c-progress-stepper__step-icon">
314
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
314
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
315
315
  </span>
316
316
  </div>
317
317
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -368,7 +368,7 @@ cssPrefix: pf-v6-c-progress-stepper
368
368
  >
369
369
  <div class="pf-v6-c-progress-stepper__step-connector">
370
370
  <span class="pf-v6-c-progress-stepper__step-icon">
371
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
371
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
372
372
  </span>
373
373
  </div>
374
374
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -425,7 +425,7 @@ cssPrefix: pf-v6-c-progress-stepper
425
425
  >
426
426
  <div class="pf-v6-c-progress-stepper__step-connector">
427
427
  <span class="pf-v6-c-progress-stepper__step-icon">
428
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
428
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
429
429
  </span>
430
430
  </div>
431
431
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -485,7 +485,7 @@ cssPrefix: pf-v6-c-progress-stepper
485
485
  >
486
486
  <div class="pf-v6-c-progress-stepper__step-connector">
487
487
  <span class="pf-v6-c-progress-stepper__step-icon">
488
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
488
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
489
489
  </span>
490
490
  </div>
491
491
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -545,7 +545,7 @@ cssPrefix: pf-v6-c-progress-stepper
545
545
  >
546
546
  <div class="pf-v6-c-progress-stepper__step-connector">
547
547
  <span class="pf-v6-c-progress-stepper__step-icon">
548
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
548
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
549
549
  </span>
550
550
  </div>
551
551
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -602,7 +602,7 @@ cssPrefix: pf-v6-c-progress-stepper
602
602
  >
603
603
  <div class="pf-v6-c-progress-stepper__step-connector">
604
604
  <span class="pf-v6-c-progress-stepper__step-icon">
605
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
605
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
606
606
  </span>
607
607
  </div>
608
608
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -684,7 +684,7 @@ cssPrefix: pf-v6-c-progress-stepper
684
684
  >
685
685
  <div class="pf-v6-c-progress-stepper__step-connector">
686
686
  <span class="pf-v6-c-progress-stepper__step-icon">
687
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
687
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
688
688
  </span>
689
689
  </div>
690
690
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -808,7 +808,7 @@ cssPrefix: pf-v6-c-progress-stepper
808
808
  >
809
809
  <div class="pf-v6-c-progress-stepper__step-connector">
810
810
  <span class="pf-v6-c-progress-stepper__step-icon">
811
- <i class="pf-v5-pficon pf-v5-pficon-in-progress" aria-hidden="true"></i>
811
+ <i class="pf-v6-pficon pf-v6-pficon-in-progress" aria-hidden="true"></i>
812
812
  </span>
813
813
  </div>
814
814
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -822,7 +822,7 @@ cssPrefix: pf-v6-c-progress-stepper
822
822
  >
823
823
  <div class="pf-v6-c-progress-stepper__step-connector">
824
824
  <span class="pf-v6-c-progress-stepper__step-icon">
825
- <i class="pf-v5-pficon pf-v5-pficon-pending" aria-hidden="true"></i>
825
+ <i class="pf-v6-pficon pf-v6-pficon-pending" aria-hidden="true"></i>
826
826
  </span>
827
827
  </div>
828
828
  <div class="pf-v6-c-progress-stepper__step-main">
@@ -878,7 +878,7 @@ cssPrefix: pf-v6-c-progress-stepper
878
878
  >
879
879
  <div class="pf-v6-c-progress-stepper__step-connector">
880
880
  <span class="pf-v6-c-progress-stepper__step-icon">
881
- <i class="pf-v5-pficon pf-v5-pficon-resources-full" aria-hidden="true"></i>
881
+ <i class="pf-v6-pficon pf-v6-pficon-resources-full" aria-hidden="true"></i>
882
882
  </span>
883
883
  </div>
884
884
  <div class="pf-v6-c-progress-stepper__step-main">
package/docs/components/Table/examples/Table.md CHANGED
@@ -189,7 +189,7 @@ These classes can be used to ensure that the table changes between the tabular a
189
189
  type="button"
190
190
  aria-label="aria-label&#x3D;&quot;More info&quot;"
191
191
  >
192
- <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
192
+ <i class="pf-v6-pficon pf-v6-pficon-help" aria-hidden="true"></i>
193
193
  </button>
194
194
  </span>
195
195
  </div>
@@ -222,7 +222,7 @@ These classes can be used to ensure that the table changes between the tabular a
222
222
  type="button"
223
223
  aria-label="aria-label&#x3D;&quot;More info&quot;"
224
224
  >
225
- <i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i>
225
+ <i class="pf-v6-pficon pf-v6-pficon-help" aria-hidden="true"></i>
226
226
  </button>
227
227
  </span>
228
228
  </div>