@patternfly/patternfly 5.0.0-alpha.72 → 5.0.0-alpha.74

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 (13) hide show
  1. package/components/Page/page.css +20 -17
  2. package/components/Page/page.scss +5 -2
  3. package/components/Page/themes/dark/page.scss +1 -1
  4. package/docs/demos/Card/examples/Card.md +24 -18
  5. package/docs/layouts/Flex/examples/Flex.md +3 -0
  6. package/layouts/Flex/flex.css +1 -0
  7. package/layouts/Flex/flex.scss +1 -0
  8. package/package.json +1 -1
  9. package/patternfly-no-globals.css +21 -17
  10. package/patternfly-theme-dark-unversioned.css +21 -17
  11. package/patternfly.css +21 -17
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -67,7 +67,7 @@
67
67
  }
68
68
  }
69
69
 
70
- .pf-v5-c-page {
70
+ :root {
71
71
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
72
72
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
73
73
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -181,40 +181,32 @@
181
181
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
182
182
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
183
183
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
184
- display: grid;
185
- grid-template-areas: "header" "main";
186
- grid-template-rows: max-content 1fr;
187
- grid-template-columns: 1fr;
188
- height: 100vh;
189
- height: 100dvh;
190
- max-height: 100%;
191
- background-color: var(--pf-v5-c-page--BackgroundColor);
192
184
  }
193
185
  @media (min-width: 1200px) {
194
- .pf-v5-c-page {
186
+ :root {
195
187
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
196
188
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
197
189
  }
198
190
  }
199
191
  @media screen and (min-width: 1200px) {
200
- .pf-v5-c-page {
192
+ :root {
201
193
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
202
194
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
203
195
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
204
196
  }
205
197
  }
206
198
  @media screen and (min-width: 1200px) {
207
- .pf-v5-c-page {
199
+ :root {
208
200
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
209
201
  }
210
202
  }
211
203
  @media screen and (min-width: 1200px) {
212
- .pf-v5-c-page {
204
+ :root {
213
205
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
214
206
  }
215
207
  }
216
208
  @media screen and (min-width: 1200px) {
217
- .pf-v5-c-page {
209
+ :root {
218
210
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
219
211
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
220
212
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -222,17 +214,28 @@
222
214
  }
223
215
  }
224
216
  @media screen and (min-width: 1200px) {
225
- .pf-v5-c-page {
217
+ :root {
226
218
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
227
219
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
228
220
  }
229
221
  }
230
222
  @media screen and (min-width: 1200px) {
231
- .pf-v5-c-page {
223
+ :root {
232
224
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
233
225
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
234
226
  }
235
227
  }
228
+
229
+ .pf-v5-c-page {
230
+ display: grid;
231
+ grid-template-areas: "header" "main";
232
+ grid-template-rows: max-content 1fr;
233
+ grid-template-columns: 1fr;
234
+ height: 100vh;
235
+ height: 100dvh;
236
+ max-height: 100%;
237
+ background-color: var(--pf-v5-c-page--BackgroundColor);
238
+ }
236
239
  @media (min-width: 1200px) {
237
240
  .pf-v5-c-page {
238
241
  grid-template-areas: "header header" "nav main";
@@ -961,7 +964,7 @@
961
964
  --pf-v5-global--BackgroundColor--100: #1b1d21;
962
965
  }
963
966
 
964
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
967
+ :where(.pf-v5-theme-dark):root {
965
968
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
966
969
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
967
970
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
package/components/Page/page.scss CHANGED
@@ -4,8 +4,7 @@ $pf-page-v5--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl"
4
4
  $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
5
5
  // stylelint-enable
6
6
 
7
- // URL.com/guidelines#layout
8
- .#{$page} {
7
+ :root {
9
8
  --#{$page}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
10
9
  --#{$page}--inset: var(--#{$pf-global}--spacer--md);
11
10
  --#{$page}--xl--inset: var(--#{$pf-global}--spacer--lg);
@@ -197,6 +196,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
197
196
  --#{$page}__main-wizard--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
198
197
  --#{$page}__main-wizard--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
199
198
 
199
+ // URL.com/guidelines#layout
200
+ }
201
+
202
+ .#{$page} {
200
203
  // Base
201
204
  display: grid;
202
205
  grid-template-areas:
package/components/Page/themes/dark/page.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
3
  @mixin pf-v5-theme-dark-page() {
4
- .#{$page} {
4
+ &:root {
5
5
  --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
6
6
  --#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
7
7
  --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
package/docs/demos/Card/examples/Card.md CHANGED
@@ -496,7 +496,7 @@ wrapperTag: div
496
496
 
497
497
  ```
498
498
 
499
- ### Aggregiate status card
499
+ ### Aggregate status card
500
500
 
501
501
  ```html
502
502
  <div class="pf-v5-l-grid pf-m-gutter">
@@ -544,7 +544,7 @@ wrapperTag: div
544
544
  <h2 class="pf-v5-c-card__title-text">10 Hosts</h2>
545
545
  </div>
546
546
  <div class="pf-v5-c-card__body">
547
- <div class="pf-v5-l-flex pf-m-inline-flex">
547
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
548
548
  <div class="pf-v5-l-flex pf-m-space-items-sm">
549
549
  <div class="pf-v5-l-flex__item">
550
550
  <i
@@ -576,7 +576,7 @@ wrapperTag: div
576
576
  <h2 class="pf-v5-c-card__title-text">50 Hosts</h2>
577
577
  </div>
578
578
  <div class="pf-v5-c-card__body">
579
- <div class="pf-v5-l-flex pf-m-inline-flex">
579
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
580
580
  <div class="pf-v5-l-flex pf-m-space-items-sm">
581
581
  <div class="pf-v5-l-flex__item">
582
582
  <i
@@ -608,7 +608,7 @@ wrapperTag: div
608
608
  <h2 class="pf-v5-c-card__title-text">12 Hosts</h2>
609
609
  </div>
610
610
  <div class="pf-v5-c-card__body">
611
- <div class="pf-v5-l-flex pf-m-inline-flex">
611
+ <div class="pf-v5-l-flex pf-m-inline-flex pf-m-space-items-md">
612
612
  <div class="pf-v5-l-flex pf-m-space-items-sm">
613
613
  <div class="pf-v5-l-flex__item">
614
614
  <i
@@ -649,8 +649,10 @@ wrapperTag: div
649
649
  >13 Hosts</h2>
650
650
  </div>
651
651
  <div class="pf-v5-c-card__body">
652
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
653
- <div class="pf-v5-l-flex">
652
+ <div
653
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
654
+ >
655
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
654
656
  <div class="pf-v5-l-flex__item">
655
657
  <i
656
658
  class="fas fa-times-circle pf-v5-u-danger-color-100"
@@ -662,7 +664,7 @@ wrapperTag: div
662
664
  <span>subtitle</span>
663
665
  </div>
664
666
  </div>
665
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
667
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
666
668
  <div class="pf-v5-l-flex__item">
667
669
  <i
668
670
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -682,8 +684,10 @@ wrapperTag: div
682
684
  <h2 class="pf-v5-c-card__title-text">3 Hosts</h2>
683
685
  </div>
684
686
  <div class="pf-v5-c-card__body">
685
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
686
- <div class="pf-v5-l-flex">
687
+ <div
688
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
689
+ >
690
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
687
691
  <div class="pf-v5-l-flex__item">
688
692
  <i
689
693
  class="fas fa-check-circle pf-v5-u-success-color-100"
@@ -695,7 +699,7 @@ wrapperTag: div
695
699
  <span>subtitle</span>
696
700
  </div>
697
701
  </div>
698
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
702
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
699
703
  <div class="pf-v5-l-flex__item">
700
704
  <i
701
705
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -715,8 +719,10 @@ wrapperTag: div
715
719
  <h2 class="pf-v5-c-card__title-text">50 Hosts</h2>
716
720
  </div>
717
721
  <div class="pf-v5-c-card__body">
718
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
719
- <div class="pf-v5-l-flex">
722
+ <div
723
+ class="pf-v5-l-flex pf-m-justify-content-center pf-m-space-items-md"
724
+ >
725
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
720
726
  <div class="pf-v5-l-flex__item">
721
727
  <i
722
728
  class="fas fa-exclamation-triangle pf-v5-u-warning-color-100"
@@ -728,7 +734,7 @@ wrapperTag: div
728
734
  <span>subtitle</span>
729
735
  </div>
730
736
  </div>
731
- <div class="pf-v5-l-flex pf-m-justify-content-space-around">
737
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
732
738
  <div class="pf-v5-l-flex__item">
733
739
  <i
734
740
  class="fas fa-times-circle pf-v5-u-danger-color-100"
@@ -1991,7 +1997,7 @@ wrapperTag: div
1991
1997
  <div class="pf-v5-c-card__body">
1992
1998
  <div class="pf-v5-l-flex pf-m-column">
1993
1999
  <span>System</span>
1994
- <div class="pf-v5-l-flex">
2000
+ <div class="pf-v5-l-flex pf-m-space-items-sm">
1995
2001
  <i
1996
2002
  class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
1997
2003
  aria-hidden="true"
@@ -3075,7 +3081,7 @@ wrapperTag: div
3075
3081
  <dl class="pf-v5-c-description-list">
3076
3082
  <div class="pf-v5-c-description-list__group">
3077
3083
  <dt class="pf-v5-c-description-list__term">
3078
- <div class="pf-v5-l-flex pf-m-nowrap">
3084
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3079
3085
  <div class="pf-v5-l-flex__item">
3080
3086
  <i
3081
3087
  class="fas fa-exclamation-circle pf-v5-u-danger-color-100"
@@ -3100,7 +3106,7 @@ wrapperTag: div
3100
3106
  </div>
3101
3107
  <div class="pf-v5-c-description-list__group">
3102
3108
  <dt class="pf-v5-c-description-list__term">
3103
- <div class="pf-v5-l-flex pf-m-nowrap">
3109
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3104
3110
  <div class="pf-v5-l-flex__item">
3105
3111
  <i
3106
3112
  class="fas fa-check-circle pf-v5-u-success-color-100"
@@ -3125,7 +3131,7 @@ wrapperTag: div
3125
3131
  </div>
3126
3132
  <div class="pf-v5-c-description-list__group">
3127
3133
  <dt class="pf-v5-c-description-list__term">
3128
- <div class="pf-v5-l-flex pf-m-nowrap">
3134
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3129
3135
  <div class="pf-v5-l-flex__item">
3130
3136
  <svg
3131
3137
  class="pf-v5-c-spinner pf-m-md"
@@ -3160,7 +3166,7 @@ wrapperTag: div
3160
3166
  </div>
3161
3167
  <div class="pf-v5-c-description-list__group">
3162
3168
  <dt class="pf-v5-c-description-list__term">
3163
- <div class="pf-v5-l-flex pf-m-nowrap">
3169
+ <div class="pf-v5-l-flex pf-m-nowrap pf-m-space-items-sm">
3164
3170
  <div class="pf-v5-l-flex__item">
3165
3171
  <i
3166
3172
  class="fas fa-check-circle pf-v5-u-success-color-100"
package/docs/layouts/Flex/examples/Flex.md CHANGED
@@ -402,6 +402,9 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
402
402
  </div>
403
403
  <div class="pf-v5-l-flex">
404
404
  <div class="pf-v5-l-flex__item">Flex item</div>
405
+ <div class="pf-v5-l-flex__item">Flex item</div>
406
+ <div class="pf-v5-l-flex__item">Flex item</div>
407
+ <div class="pf-v5-l-flex__item">Flex item</div>
405
408
  </div>
406
409
  </div>
407
410
  <br />
package/layouts/Flex/flex.css CHANGED
@@ -29,6 +29,7 @@
29
29
  }
30
30
 
31
31
  .pf-v5-l-flex > * {
32
+ --pf-v5-l-flex--spacer: initial;
32
33
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
33
34
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
34
35
  order: var(--pf-v5-l-flex--item--Order);
package/layouts/Flex/flex.scss CHANGED
@@ -34,6 +34,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
34
34
  // Item
35
35
  .#{$flex} > * {
36
36
  // set/reset layout spacers on children, since the parent flex layout can be a child of another flex layout and needs these values from its parent
37
+ --#{$flex}--spacer: initial;
37
38
  --#{$flex}--spacer--column: var(--#{$flex}--spacer, var(--#{$flex}--spacer--column--base));
38
39
  --#{$flex}--spacer--row: var(--#{$flex}--spacer, var(--#{$flex}--spacer--row--base));
39
40
 
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.72",
4
+ "version": "5.0.0-alpha.74",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -20751,7 +20751,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20751
20751
  --pf-v5-c-overflow-menu--spacer: 0;
20752
20752
  }
20753
20753
 
20754
- .pf-v5-c-page {
20754
+ :root {
20755
20755
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20756
20756
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20757
20757
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20865,40 +20865,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20865
20865
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20866
20866
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20867
20867
  --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
20868
  }
20877
20869
  @media (min-width: 1200px) {
20878
- .pf-v5-c-page {
20870
+ :root {
20879
20871
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20880
20872
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20881
20873
  }
20882
20874
  }
20883
20875
  @media screen and (min-width: 1200px) {
20884
- .pf-v5-c-page {
20876
+ :root {
20885
20877
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
20886
20878
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
20887
20879
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
20888
20880
  }
20889
20881
  }
20890
20882
  @media screen and (min-width: 1200px) {
20891
- .pf-v5-c-page {
20883
+ :root {
20892
20884
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
20893
20885
  }
20894
20886
  }
20895
20887
  @media screen and (min-width: 1200px) {
20896
- .pf-v5-c-page {
20888
+ :root {
20897
20889
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
20898
20890
  }
20899
20891
  }
20900
20892
  @media screen and (min-width: 1200px) {
20901
- .pf-v5-c-page {
20893
+ :root {
20902
20894
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
20903
20895
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
20904
20896
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -20906,17 +20898,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20906
20898
  }
20907
20899
  }
20908
20900
  @media screen and (min-width: 1200px) {
20909
- .pf-v5-c-page {
20901
+ :root {
20910
20902
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
20911
20903
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
20912
20904
  }
20913
20905
  }
20914
20906
  @media screen and (min-width: 1200px) {
20915
- .pf-v5-c-page {
20907
+ :root {
20916
20908
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
20917
20909
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
20918
20910
  }
20919
20911
  }
20912
+
20913
+ .pf-v5-c-page {
20914
+ display: grid;
20915
+ grid-template-areas: "header" "main";
20916
+ grid-template-rows: max-content 1fr;
20917
+ grid-template-columns: 1fr;
20918
+ height: 100vh;
20919
+ height: 100dvh;
20920
+ max-height: 100%;
20921
+ background-color: var(--pf-v5-c-page--BackgroundColor);
20922
+ }
20920
20923
  @media (min-width: 1200px) {
20921
20924
  .pf-v5-c-page {
20922
20925
  grid-template-areas: "header header" "nav main";
@@ -21646,7 +21649,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21646
21649
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21647
21650
  }
21648
21651
 
21649
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
21652
+ :where(.pf-v5-theme-dark):root {
21650
21653
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21651
21654
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21652
21655
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
@@ -31048,6 +31051,7 @@ label.pf-v5-c-tree-view__node-text {
31048
31051
  }
31049
31052
 
31050
31053
  .pf-v5-l-flex > * {
31054
+ --pf-v5-l-flex--spacer: initial;
31051
31055
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31052
31056
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31053
31057
  order: var(--pf-v5-l-flex--item--Order);
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -20868,7 +20868,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20868
20868
  --pf-v5-c-overflow-menu--spacer: 0;
20869
20869
  }
20870
20870
 
20871
- .pf-v5-c-page {
20871
+ :root {
20872
20872
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20873
20873
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20874
20874
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20982,40 +20982,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20982
20982
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20983
20983
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20984
20984
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20985
- display: grid;
20986
- grid-template-areas: "header" "main";
20987
- grid-template-rows: max-content 1fr;
20988
- grid-template-columns: 1fr;
20989
- height: 100vh;
20990
- height: 100dvh;
20991
- max-height: 100%;
20992
- background-color: var(--pf-v5-c-page--BackgroundColor);
20993
20985
  }
20994
20986
  @media (min-width: 1200px) {
20995
- .pf-v5-c-page {
20987
+ :root {
20996
20988
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20997
20989
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20998
20990
  }
20999
20991
  }
21000
20992
  @media screen and (min-width: 1200px) {
21001
- .pf-v5-c-page {
20993
+ :root {
21002
20994
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
21003
20995
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
21004
20996
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
21005
20997
  }
21006
20998
  }
21007
20999
  @media screen and (min-width: 1200px) {
21008
- .pf-v5-c-page {
21000
+ :root {
21009
21001
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
21010
21002
  }
21011
21003
  }
21012
21004
  @media screen and (min-width: 1200px) {
21013
- .pf-v5-c-page {
21005
+ :root {
21014
21006
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
21015
21007
  }
21016
21008
  }
21017
21009
  @media screen and (min-width: 1200px) {
21018
- .pf-v5-c-page {
21010
+ :root {
21019
21011
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
21020
21012
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
21021
21013
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -21023,17 +21015,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21023
21015
  }
21024
21016
  }
21025
21017
  @media screen and (min-width: 1200px) {
21026
- .pf-v5-c-page {
21018
+ :root {
21027
21019
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
21028
21020
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
21029
21021
  }
21030
21022
  }
21031
21023
  @media screen and (min-width: 1200px) {
21032
- .pf-v5-c-page {
21024
+ :root {
21033
21025
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
21034
21026
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
21035
21027
  }
21036
21028
  }
21029
+
21030
+ .pf-v5-c-page {
21031
+ display: grid;
21032
+ grid-template-areas: "header" "main";
21033
+ grid-template-rows: max-content 1fr;
21034
+ grid-template-columns: 1fr;
21035
+ height: 100vh;
21036
+ height: 100dvh;
21037
+ max-height: 100%;
21038
+ background-color: var(--pf-v5-c-page--BackgroundColor);
21039
+ }
21037
21040
  @media (min-width: 1200px) {
21038
21041
  .pf-v5-c-page {
21039
21042
  grid-template-areas: "header header" "nav main";
@@ -21763,7 +21766,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21763
21766
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21764
21767
  }
21765
21768
 
21766
- :where(.pf-theme-dark) .pf-v5-c-page {
21769
+ :where(.pf-theme-dark):root {
21767
21770
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21768
21771
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21769
21772
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
@@ -31165,6 +31168,7 @@ label.pf-v5-c-tree-view__node-text {
31165
31168
  }
31166
31169
 
31167
31170
  .pf-v5-l-flex > * {
31171
+ --pf-v5-l-flex--spacer: initial;
31168
31172
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31169
31173
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31170
31174
  order: var(--pf-v5-l-flex--item--Order);
package/patternfly.css CHANGED
@@ -20868,7 +20868,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20868
20868
  --pf-v5-c-overflow-menu--spacer: 0;
20869
20869
  }
20870
20870
 
20871
- .pf-v5-c-page {
20871
+ :root {
20872
20872
  --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
20873
20873
  --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
20874
20874
  --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -20982,40 +20982,32 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
20982
20982
  --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
20983
20983
  --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
20984
20984
  --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20985
- display: grid;
20986
- grid-template-areas: "header" "main";
20987
- grid-template-rows: max-content 1fr;
20988
- grid-template-columns: 1fr;
20989
- height: 100vh;
20990
- height: 100dvh;
20991
- max-height: 100%;
20992
- background-color: var(--pf-v5-c-page--BackgroundColor);
20993
20985
  }
20994
20986
  @media (min-width: 1200px) {
20995
- .pf-v5-c-page {
20987
+ :root {
20996
20988
  --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
20997
20989
  --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
20998
20990
  }
20999
20991
  }
21000
20992
  @media screen and (min-width: 1200px) {
21001
- .pf-v5-c-page {
20993
+ :root {
21002
20994
  --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
21003
20995
  --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
21004
20996
  --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
21005
20997
  }
21006
20998
  }
21007
20999
  @media screen and (min-width: 1200px) {
21008
- .pf-v5-c-page {
21000
+ :root {
21009
21001
  --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
21010
21002
  }
21011
21003
  }
21012
21004
  @media screen and (min-width: 1200px) {
21013
- .pf-v5-c-page {
21005
+ :root {
21014
21006
  --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
21015
21007
  }
21016
21008
  }
21017
21009
  @media screen and (min-width: 1200px) {
21018
- .pf-v5-c-page {
21010
+ :root {
21019
21011
  --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
21020
21012
  --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
21021
21013
  --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -21023,17 +21015,28 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21023
21015
  }
21024
21016
  }
21025
21017
  @media screen and (min-width: 1200px) {
21026
- .pf-v5-c-page {
21018
+ :root {
21027
21019
  --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
21028
21020
  --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
21029
21021
  }
21030
21022
  }
21031
21023
  @media screen and (min-width: 1200px) {
21032
- .pf-v5-c-page {
21024
+ :root {
21033
21025
  --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
21034
21026
  --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
21035
21027
  }
21036
21028
  }
21029
+
21030
+ .pf-v5-c-page {
21031
+ display: grid;
21032
+ grid-template-areas: "header" "main";
21033
+ grid-template-rows: max-content 1fr;
21034
+ grid-template-columns: 1fr;
21035
+ height: 100vh;
21036
+ height: 100dvh;
21037
+ max-height: 100%;
21038
+ background-color: var(--pf-v5-c-page--BackgroundColor);
21039
+ }
21037
21040
  @media (min-width: 1200px) {
21038
21041
  .pf-v5-c-page {
21039
21042
  grid-template-areas: "header header" "nav main";
@@ -21763,7 +21766,7 @@ label.pf-v5-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21763
21766
  --pf-v5-global--BackgroundColor--100: #1b1d21;
21764
21767
  }
21765
21768
 
21766
- :where(.pf-v5-theme-dark) .pf-v5-c-page {
21769
+ :where(.pf-v5-theme-dark):root {
21767
21770
  --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
21768
21771
  --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
21769
21772
  --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
@@ -31165,6 +31168,7 @@ label.pf-v5-c-tree-view__node-text {
31165
31168
  }
31166
31169
 
31167
31170
  .pf-v5-l-flex > * {
31171
+ --pf-v5-l-flex--spacer: initial;
31168
31172
  --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
31169
31173
  --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
31170
31174
  order: var(--pf-v5-l-flex--item--Order);