@patternfly/patternfly 5.0.0-alpha.73 → 5.0.0-alpha.75

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/FormControl/form-control.css +83 -90
  2. package/components/FormControl/form-control.scss +89 -103
  3. package/components/FormControl/themes/dark/form-control.scss +6 -6
  4. package/components/Nav/nav.css +12 -8
  5. package/components/Nav/nav.scss +14 -9
  6. package/components/Page/page.css +20 -17
  7. package/components/Page/page.scss +5 -2
  8. package/components/Page/themes/dark/page.scss +1 -1
  9. package/docs/components/Nav/examples/Navigation.md +2 -41
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +115 -115
  12. package/patternfly-theme-dark-unversioned.css +115 -115
  13. package/patternfly.css +115 -115
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -76,7 +76,7 @@ cssPrefix: pf-v5-c-nav
76
76
 
77
77
  ```html
78
78
  <nav class="pf-v5-c-nav" aria-label="Global">
79
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section one">
79
+ <section class="pf-v5-c-nav__section" aria-label="Section one">
80
80
  <ul class="pf-v5-c-nav__list" role="list">
81
81
  <li class="pf-v5-c-nav__item">
82
82
  <a href="#" class="pf-v5-c-nav__link">Link 1</a>
@@ -90,45 +90,7 @@ cssPrefix: pf-v5-c-nav
90
90
  </ul>
91
91
  </section>
92
92
  <hr class="pf-v5-c-divider" />
93
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section two">
94
- <ul class="pf-v5-c-nav__list" role="list">
95
- <li class="pf-v5-c-nav__item">
96
- <a href="#" class="pf-v5-c-nav__link">Section 2, link 1</a>
97
- </li>
98
- <li class="pf-v5-c-nav__item">
99
- <a
100
- href="#"
101
- class="pf-v5-c-nav__link pf-m-current"
102
- aria-current="page"
103
- >Current link</a>
104
- </li>
105
- <li class="pf-v5-c-nav__item">
106
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
107
- </li>
108
- </ul>
109
- </section>
110
- </nav>
111
-
112
- ```
113
-
114
- ### Grouped nav, no titles, no margin top
115
-
116
- ```html
117
- <nav class="pf-v5-c-nav" aria-label="Global">
118
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section one">
119
- <ul class="pf-v5-c-nav__list" role="list">
120
- <li class="pf-v5-c-nav__item">
121
- <a href="#" class="pf-v5-c-nav__link">Link 1</a>
122
- </li>
123
- <li class="pf-v5-c-nav__item">
124
- <a href="#" class="pf-v5-c-nav__link">Link 2</a>
125
- </li>
126
- <li class="pf-v5-c-nav__item">
127
- <a href="#" class="pf-v5-c-nav__link">Link 3</a>
128
- </li>
129
- </ul>
130
- </section>
131
- <section class="pf-v5-c-nav__section pf-m-no-title" aria-label="Section two">
93
+ <section class="pf-v5-c-nav__section" aria-label="Section two">
132
94
  <ul class="pf-v5-c-nav__list" role="list">
133
95
  <li class="pf-v5-c-nav__item">
134
96
  <a href="#" class="pf-v5-c-nav__link">Section 2, link 1</a>
@@ -2558,7 +2520,6 @@ The navigation system relies on several different sub-components:
2558
2520
  | `.pf-v5-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
2559
2521
  | `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2560
2522
  | `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
2561
- | `.pf-m-no-title` | `.pf-v5-c-nav__section` | Modifies nav section margin top to 0. |
2562
2523
  | `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
2563
2524
  | `.pf-m-tertiary` | `.pf-v5-c-nav` | Modifies nav for the tertiary variation. |
2564
2525
  | `.pf-m-light` | `.pf-v5-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-v5-c-page__sidebar`)**. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.73",
4
+ "version": "5.0.0-alpha.75",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -14783,75 +14783,74 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14783
14783
  --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
14784
14784
  --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
14785
14785
  --pf-v5-c-form-control--Resize: none;
14786
- --pf-v5-c-form-control--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
14787
- --pf-v5-c-form-control--BorderTopColor: var(--pf-v5-global--BorderColor--300);
14788
- --pf-v5-c-form-control--BorderRightColor: var(--pf-v5-global--BorderColor--300);
14789
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14790
- --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
14791
- --pf-v5-c-form-control--BorderRadius: 0;
14786
+ --pf-v5-c-form-control--OutlineOffset: -2px;
14787
+ --pf-v5-c-form-control--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
14788
+ --pf-v5-c-form-control--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
14789
+ --pf-v5-c-form-control--before--BorderBottomWidth: 0;
14790
+ --pf-v5-c-form-control--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
14791
+ --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
14792
+ --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
14793
+ --pf-v5-c-form-control--before--BorderBottomColor: transparent;
14794
+ --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
14795
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
14796
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14792
14797
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
14793
14798
  --pf-v5-c-form-control--Width: 100%;
14794
- --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
14795
14799
  --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
14796
- --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
14797
- --pf-v5-c-form-control--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
14800
+ --pf-v5-c-form-control--PaddingTop: var(--pf-v5-global--spacer--form-element);
14801
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-global--spacer--form-element);
14798
14802
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base);
14799
14803
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
14800
- --pf-v5-c-form-control--hover--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14801
- --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14802
- --pf-v5-c-form-control--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14803
- --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14804
- --pf-v5-c-form-control--m-expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14805
- --pf-v5-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14806
- --pf-v5-c-form-control--m-expanded--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14804
+ --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14805
+ --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14806
+ --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14807
+ --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14808
+ --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14807
14809
  --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
14808
14810
  --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
14809
14811
  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
14810
14812
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14811
- --pf-v5-c-form-control--m-disabled--BorderColor: transparent;
14813
+ --pf-v5-c-form-control--m-disabled--after--BorderColor: transparent;
14812
14814
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14813
- --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14814
- --pf-v5-c-form-control--m-readonly--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
14815
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
14816
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14815
+ --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14816
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
14817
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14817
14818
  --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14818
14819
  --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
14819
- --pf-v5-c-form-control--m-success--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14820
- --pf-v5-c-form-control--m-success--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14821
- --pf-v5-c-form-control--m-success--BorderBottomColor: var(--pf-v5-global--success-color--100);
14820
+ --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14821
+ --pf-v5-c-form-control--m-success--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14822
+ --pf-v5-c-form-control--m-success--after--BorderBottomColor: var(--pf-v5-global--success-color--100);
14822
14823
  --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
14823
- --pf-v5-c-form-control--m-warning--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14824
- --pf-v5-c-form-control--m-warning--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14825
- --pf-v5-c-form-control--m-warning--BorderBottomColor: var(--pf-v5-global--warning-color--100);
14824
+ --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14825
+ --pf-v5-c-form-control--m-warning--after--BorderBottomColor: var(--pf-v5-global--warning-color--100);
14826
14826
  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
14827
- --pf-v5-c-form-control--m-error--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14828
- --pf-v5-c-form-control--m-error--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14829
- --pf-v5-c-form-control--m-error--BorderBottomColor: var(--pf-v5-global--danger-color--100);
14827
+ --pf-v5-c-form-control--m-error--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14828
+ --pf-v5-c-form-control--m-error--after--BorderBottomColor: var(--pf-v5-global--danger-color--100);
14830
14829
  --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
14831
- --pf-v5-c-form-control--m-error--IconWidth: var(--pf-v5-c-form-control--FontSize);
14832
- --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14833
- --pf-v5-c-form-control--m-icon--IconWidth: var(--pf-v5-c-form-control--FontSize);
14830
+ --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
14831
+ --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14832
+ --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
14834
14833
  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
14835
- --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14836
- --pf-v5-c-form-control__select--PaddingRight: calc(var(--pf-v5-global--spacer--lg) + var(--pf-v5-c-form-control--BorderWidth) + var(--pf-v5-c-form-control--BorderWidth));
14837
- --pf-v5-c-form-control__select--PaddingLeft: calc(var(--pf-v5-global--spacer--sm) - var(--pf-v5-c-form-control--BorderWidth));
14834
+ --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14835
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-global--spacer--lg);
14836
+ --pf-v5-c-form-control__select--PaddingLeft: var(--pf-v5-global--spacer--sm);
14838
14837
  --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14839
14838
  --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14840
14839
  --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14841
14840
  --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
14842
14841
  --pf-v5-c-form-control--textarea--Height: auto;
14842
+ --pf-v5-c-form-control__icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
14843
14843
  --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
14844
14844
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
14845
14845
  --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
14846
14846
  --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
14847
14847
  --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
14848
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
14849
14848
  --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
14850
14849
  --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
14851
14850
  --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
14851
+ --pf-v5-c-form-control__toggle-icon--PaddingTop: var(--pf-v5-global--spacer--form-element);
14852
14852
  --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
14853
14853
  --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
14854
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
14855
14854
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
14856
14855
  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
14857
14856
  color: var(--pf-v5-c-form-control--Color);
@@ -14865,9 +14864,20 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14865
14864
  line-height: var(--pf-v5-c-form-control--LineHeight);
14866
14865
  resize: var(--pf-v5-c-form-control--Resize);
14867
14866
  background-color: var(--pf-v5-c-form-control--BackgroundColor);
14868
- border: var(--pf-v5-c-form-control--BorderWidth) solid;
14869
- border-color: var(--pf-v5-c-form-control--BorderTopColor) var(--pf-v5-c-form-control--BorderRightColor) var(--pf-v5-c-form-control--BorderBottomColor) var(--pf-v5-c-form-control--BorderLeftColor);
14870
- border-radius: var(--pf-v5-c-form-control--BorderRadius);
14867
+ }
14868
+ .pf-v5-c-form-control::before, .pf-v5-c-form-control::after {
14869
+ position: absolute;
14870
+ inset: 0;
14871
+ pointer-events: none;
14872
+ content: "";
14873
+ }
14874
+ .pf-v5-c-form-control::before {
14875
+ border-color: var(--pf-v5-c-form-control--before--BorderTopColor) var(--pf-v5-c-form-control--before--BorderRightColor) var(--pf-v5-c-form-control--before--BorderBottomColor) var(--pf-v5-c-form-control--before--BorderLeftColor);
14876
+ border-style: var(--pf-v5-c-form-control--before--BorderStyle, solid);
14877
+ border-width: var(--pf-v5-c-form-control--before--BorderTopWidth) var(--pf-v5-c-form-control--before--BorderRightWidth) var(--pf-v5-c-form-control--before--BorderBottomWidth) var(--pf-v5-c-form-control--before--BorderLeftWidth);
14878
+ }
14879
+ .pf-v5-c-form-control::after {
14880
+ border-bottom: var(--pf-v5-c-form-control--after--BorderBottomWidth) var(--pf-v5-c-form-control--after--BorderStyle, solid) var(--pf-v5-c-form-control--after--BorderBottomColor);
14871
14881
  }
14872
14882
  .pf-v5-c-form-control > :is(input, select, textarea) {
14873
14883
  grid-row: 1/2;
@@ -14879,6 +14889,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14879
14889
  -moz-appearance: none;
14880
14890
  -webkit-appearance: none;
14881
14891
  }
14892
+ .pf-v5-c-form-control > :is(input, select, textarea):focus {
14893
+ outline-offset: var(--pf-v5-c-form-control--OutlineOffset);
14894
+ }
14882
14895
  .pf-v5-c-form-control > ::placeholder {
14883
14896
  color: var(--pf-v5-c-form-control--m-placeholder--Color);
14884
14897
  }
@@ -14888,78 +14901,63 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14888
14901
  .pf-v5-c-form-control.pf-m-readonly {
14889
14902
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
14890
14903
  }
14891
- .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):hover {
14892
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--BorderBottomColor);
14893
- }
14894
- .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):focus {
14895
- --pf-v5-c-form-control--focus--PaddingBottom: var(--pf-v5-c-form-control--m-readonly--focus--PaddingBottom);
14896
- --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth);
14897
- --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomColor);
14904
+ .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
14905
+ --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor);
14906
+ --pf-v5-c-form-control--focus--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomWidth);
14907
+ --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor);
14898
14908
  }
14899
14909
  .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
14900
14910
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
14901
14911
  --pf-v5-c-form-control--inset--base: var(--pf-v5-c-form-control--m-readonly--m-plain--inset--base);
14902
- border-color: transparent;
14912
+ --pf-v5-c-form-control--before--BorderStyle: none;
14913
+ --pf-v5-c-form-control--after--BorderStyle: none;
14914
+ --pf-v5-c-form-control--OutlineOffset: var(--pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset);
14903
14915
  }
14904
14916
  .pf-v5-c-form-control:hover {
14905
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--hover--BorderBottomColor);
14917
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--hover--after--BorderBottomColor);
14906
14918
  }
14907
- .pf-v5-c-form-control:focus {
14908
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--focus--BorderBottomColor);
14909
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14910
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14911
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--focus--PaddingBottom);
14912
- border-bottom-width: var(--pf-v5-c-form-control--focus--BorderBottomWidth);
14919
+ .pf-v5-c-form-control:focus-within {
14920
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--focus--after--BorderBottomColor);
14921
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--focus--after--BorderBottomWidth);
14913
14922
  }
14914
14923
  .pf-v5-c-form-control.pf-m-expanded {
14915
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--BorderBottomColor);
14916
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
14917
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
14918
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-expanded--PaddingBottom);
14919
- border-bottom-width: var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth);
14924
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomColor);
14925
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-expanded--after--BorderBottomWidth);
14920
14926
  }
14921
14927
  .pf-v5-c-form-control.pf-m-disabled {
14922
14928
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
14923
14929
  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-disabled--Color);
14924
14930
  --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-c-form-control--m-disabled__toggle-icon--Color);
14931
+ --pf-v5-c-form-control--before--BorderStyle: none;
14932
+ --pf-v5-c-form-control--after--BorderStyle: none;
14925
14933
  cursor: not-allowed;
14926
- border-color: var(--pf-v5-c-form-control--m-disabled--BorderColor);
14927
14934
  }
14928
14935
  .pf-v5-c-form-control.pf-m-error {
14929
14936
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
14930
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-error--BorderBottomColor);
14937
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-error--after--BorderBottomColor);
14931
14938
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
14932
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14933
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14934
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-error--PaddingBottom);
14935
14939
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
14936
- border-bottom-width: var(--pf-v5-c-form-control--m-error--BorderBottomWidth);
14940
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-error--after--BorderBottomWidth);
14937
14941
  }
14938
14942
  .pf-v5-c-form-control.pf-m-error.pf-m-icon {
14939
14943
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
14940
14944
  }
14941
14945
  .pf-v5-c-form-control.pf-m-success {
14942
14946
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
14943
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-success--PaddingBottom);
14944
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-success--BorderBottomColor);
14947
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-success--after--BorderBottomColor);
14945
14948
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
14946
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14947
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14948
14949
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
14949
- border-bottom-width: var(--pf-v5-c-form-control--m-success--BorderBottomWidth);
14950
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-success--after--BorderBottomWidth);
14950
14951
  }
14951
14952
  .pf-v5-c-form-control.pf-m-success.pf-m-icon {
14952
14953
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
14953
14954
  }
14954
14955
  .pf-v5-c-form-control.pf-m-warning {
14955
14956
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
14956
- --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-warning--PaddingBottom);
14957
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--BorderBottomColor);
14957
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--after--BorderBottomColor);
14958
14958
  --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
14959
- --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14960
- --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14961
14959
  --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
14962
- border-bottom-width: var(--pf-v5-c-form-control--m-warning--BorderBottomWidth);
14960
+ --pf-v5-c-form-control--after--BorderBottomWidth: var(--pf-v5-c-form-control--m-warning--after--BorderBottomWidth);
14963
14961
  }
14964
14962
  .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
14965
14963
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
@@ -15006,9 +15004,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15006
15004
  }
15007
15005
 
15008
15006
  .pf-v5-c-form-control__icon {
15009
- display: flex;
15010
- align-items: center;
15011
- height: var(--pf-v5-c-form-control__icon--Height);
15007
+ padding-top: var(--pf-v5-c-form-control__icon--PaddingTop);
15012
15008
  color: var(--pf-v5-c-form-control__icon--Color);
15013
15009
  }
15014
15010
  .pf-v5-c-form-control__icon.pf-m-status {
@@ -15016,11 +15012,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15016
15012
  }
15017
15013
 
15018
15014
  .pf-v5-c-form-control__toggle-icon {
15019
- display: flex;
15020
15015
  grid-row: 1/2;
15021
15016
  grid-column: 3;
15022
- align-items: center;
15023
- height: var(--pf-v5-c-form-control__toggle-icon--Height);
15017
+ padding-top: var(--pf-v5-c-form-control__toggle-icon--PaddingTop);
15024
15018
  padding-right: var(--pf-v5-c-form-control__toggle-icon--PaddingRight);
15025
15019
  padding-left: var(--pf-v5-c-form-control__toggle-icon--PaddingLeft);
15026
15020
  color: var(--pf-v5-c-form-control__toggle-icon--Color);
@@ -15033,7 +15027,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15033
15027
  grid-row: 1/2;
15034
15028
  grid-column: 2;
15035
15029
  gap: var(--pf-v5-c-form-control__utilities--Gap);
15036
- align-items: flex-start;
15037
15030
  padding-right: var(--pf-v5-c-form-control__utilities--PaddingRight);
15038
15031
  pointer-events: none;
15039
15032
  }
@@ -15052,16 +15045,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15052
15045
  }
15053
15046
 
15054
15047
  :where(.pf-v5-theme-dark) .pf-v5-c-form-control {
15055
- --pf-v5-c-form-control--BorderTopColor: transparent;
15056
- --pf-v5-c-form-control--BorderRightColor: transparent;
15057
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
15058
- --pf-v5-c-form-control--BorderLeftColor: transparent;
15048
+ --pf-v5-c-form-control--before--BorderTopColor: transparent;
15049
+ --pf-v5-c-form-control--before--BorderRightColor: transparent;
15050
+ --pf-v5-c-form-control--before--BorderLeftColor: transparent;
15051
+ --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
15059
15052
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
15060
15053
  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
15061
15054
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
15062
15055
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
15063
- --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
15064
- --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
15056
+ --pf-v5-c-form-control--m-readonly--hover--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
15057
+ --pf-v5-c-form-control--m-readonly--focus--after--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
15065
15058
  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
15066
15059
  color: var(--pf-v5-global--Color--100);
15067
15060
  }
@@ -19179,7 +19172,8 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19179
19172
  --pf-v5-c-nav__item--m-expanded__subnav--MaxHeight: 100%;
19180
19173
  --pf-v5-c-nav__subnav--c-divider--PaddingRight: var(--pf-v5-global--spacer--lg);
19181
19174
  --pf-v5-c-nav__subnav--c-divider--PaddingLeft: var(--pf-v5-global--spacer--lg);
19182
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-global--spacer--sm);
19175
+ --pf-v5-c-nav__section--first-child--PaddingTop: var(--pf-v5-global--spacer--sm);
19176
+ --pf-v5-c-nav__section--last-child--PaddingBottom: var(--pf-v5-global--spacer--sm);
19183
19177
  --pf-v5-c-nav__section__item--MarginTop: var(--pf-v5-global--spacer--sm);
19184
19178
  --pf-v5-c-nav__section__link--PaddingTop: var(--pf-v5-global--spacer--sm);
19185
19179
  --pf-v5-c-nav__section__link--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -19202,6 +19196,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19202
19196
  --pf-v5-c-nav__section-title--PaddingRight: var(--pf-v5-global--spacer--md);
19203
19197
  --pf-v5-c-nav__section-title--PaddingBottom: var(--pf-v5-global--spacer--sm);
19204
19198
  --pf-v5-c-nav__section-title--PaddingLeft: var(--pf-v5-global--spacer--md);
19199
+ --pf-v5-c-nav__section-title--MarginBottom: var(--pf-v5-global--spacer--sm);
19205
19200
  --pf-v5-c-nav__section-title--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
19206
19201
  --pf-v5-c-nav__section-title--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
19207
19202
  --pf-v5-c-nav__section-title--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -19880,21 +19875,23 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
19880
19875
  --pf-v5-c-nav__link--focus--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--focus--after--BorderWidth);
19881
19876
  --pf-v5-c-nav__link--active--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--active--after--BorderWidth);
19882
19877
  --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-v5-c-nav__section__link--m-current--after--BorderWidth);
19878
+ --pf-v5-c-nav__list--PaddingTop: 0;
19879
+ --pf-v5-c-nav__list--PaddingBottom: 0;
19883
19880
  --pf-v5-c-nav--c-divider--MarginBottom: 0;
19884
- margin-top: var(--pf-v5-c-nav__section--MarginTop);
19881
+ }
19882
+ .pf-v5-c-nav__section:first-child {
19883
+ padding-top: var(--pf-v5-c-nav__section--first-child--PaddingTop);
19885
19884
  }
19886
19885
  .pf-v5-c-nav__section + .pf-v5-c-nav__section {
19887
- --pf-v5-c-nav__section--MarginTop: var(--pf-v5-c-nav__section--section--MarginTop);
19886
+ margin-top: var(--pf-v5-c-nav__section--section--MarginTop);
19888
19887
  }
19889
- .pf-v5-c-nav__section.pf-m-no-title {
19890
- --pf-v5-c-nav__section--MarginTop: 0;
19891
- }
19892
- .pf-v5-c-nav__section:not(:last-child) {
19893
- --pf-v5-c-nav__list--PaddingBottom: 0;
19888
+ .pf-v5-c-nav__section:last-child {
19889
+ padding-bottom: var(--pf-v5-c-nav__section--last-child--PaddingBottom);
19894
19890
  }
19895
19891
 
19896
19892
  .pf-v5-c-nav__section-title {
19897
19893
  padding: var(--pf-v5-c-nav__section-title--PaddingTop) var(--pf-v5-c-nav__section-title--PaddingRight) var(--pf-v5-c-nav__section-title--PaddingBottom) var(--pf-v5-c-nav__section-title--PaddingLeft);
19894
+ margin-bottom: var(--pf-v5-c-nav__section-title--MarginBottom);
19898
19895
  font-size: var(--pf-v5-c-nav__section-title--FontSize);
19899
19896
  color: var(--pf-v5-c-nav__section-title--Color);
19900
19897
  border-bottom: var(--pf-v5-c-nav__section-title--BorderBottomWidth) solid var(--pf-v5-c-nav__section-title--BorderBottomColor);
@@ -20751,7 +20748,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20751
20748
  --pf-v5-c-overflow-menu--spacer: 0;
20752
20749
  }
20753
20750
 
20754
- .pf-v5-c-page {
20751
+ :root {
20755
20752
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20756
20753
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20757
20754
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20865,40 +20862,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20865
20862
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20866
20863
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20867
20864
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20868
- display: grid;
20869
- grid-template-areas: "header" "main";
20870
- grid-template-rows: max-content 1fr;
20871
- grid-template-columns: 1fr;
20872
- height: 100vh;
20873
- height: 100dvh;
20874
- max-height: 100%;
20875
- background-color: var(--pf-v5-c-page--BackgroundColor);
20876
20865
  }
20877
20866
  @media (min-width: 1200px) {
20878
- .pf-v5-c-page {
20867
+ :root {
20879
20868
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20880
20869
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20881
20870
  }
20882
20871
  }
20883
20872
  @media screen and (min-width: 1200px) {
20884
- .pf-v5-c-page {
20873
+ :root {
20885
20874
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
20886
20875
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
20887
20876
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
20888
20877
  }
20889
20878
  }
20890
20879
  @media screen and (min-width: 1200px) {
20891
- .pf-v5-c-page {
20880
+ :root {
20892
20881
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
20893
20882
  }
20894
20883
  }
20895
20884
  @media screen and (min-width: 1200px) {
20896
- .pf-v5-c-page {
20885
+ :root {
20897
20886
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
20898
20887
  }
20899
20888
  }
20900
20889
  @media screen and (min-width: 1200px) {
20901
- .pf-v5-c-page {
20890
+ :root {
20902
20891
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
20903
20892
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
20904
20893
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -20906,17 +20895,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20906
20895
  }
20907
20896
  }
20908
20897
  @media screen and (min-width: 1200px) {
20909
- .pf-v5-c-page {
20898
+ :root {
20910
20899
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
20911
20900
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
20912
20901
  }
20913
20902
  }
20914
20903
  @media screen and (min-width: 1200px) {
20915
- .pf-v5-c-page {
20904
+ :root {
20916
20905
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
20917
20906
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
20918
20907
  }
20919
20908
  }
20909
+
20910
+ .pf-v5-c-page {
20911
+ display: grid;
20912
+ grid-template-areas: "header" "main";
20913
+ grid-template-rows: max-content 1fr;
20914
+ grid-template-columns: 1fr;
20915
+ height: 100vh;
20916
+ height: 100dvh;
20917
+ max-height: 100%;
20918
+ background-color: var(--pf-v5-c-page--BackgroundColor);
20919
+ }
20920
20920
  @media (min-width: 1200px) {
20921
20921
  .pf-v5-c-page {
20922
20922
  grid-template-areas: "header header" "nav main";
@@ -21646,7 +21646,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21646
21646
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21647
21647
  }
21648
21648
 
21649
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
21649
+ :where(.pf-v5-theme-dark):root {
21650
21650
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21651
21651
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21652
21652
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);