@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.34

package/docs/utilities/Text/examples/Text.md

@@ -1,6 +1,6 @@
 ---
 id: Text
-section: utilities
+section: utility-classes
 ---import './Text.css'
 
 ## Examples
@@ -87,9 +87,9 @@ These colors are best used with the ["inverse" background colors](/utilities/bac
 ### Status and state text colors
 
 ```html
-<div class="pf-u-default-color-100">Font color default 100</div>
-<div class="pf-u-default-color-200">Font color default 200</div>
-<div class="pf-u-default-color-300">Font color default 300</div>
+<div class="pf-u-custom-color-100">Font color custom 100</div>
+<div class="pf-u-custom-color-200">Font color custom 200</div>
+<div class="pf-u-custom-color-300">Font color custom 300</div>
 <div class="pf-u-success-color-100">Font color success 100</div>
 <div class="pf-u-success-color-200">Font color success 200</div>
 <div class="pf-u-info-color-100">Font color info 100</div>
@@ -185,7 +185,7 @@ Care should be taken especially when applying text colors, as this can have a ne
 | `.pf-u-link-color-dark{-on-[breakpoint]}`                              | `*`        | Sets font-color to dark link color                  |
 | `.pf-u-link-color-dark-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to dark hover link color            |
 | `.pf-u-link-color-visited{-on-[breakpoint]}`                           | `*`        | Sets font-color to visited link color               |
-| `.pf-u-default-color-{100, 200, 300}{-on-[breakpoint]}`                | `*`        | Sets font-color to default color 100, 200, or 300   |
+| `.pf-u-custom-color-{100, 200, 300}{-on-[breakpoint]}`                 | `*`        | Sets font-color to custom color 100, 200, or 300   |
 | `.pf-u-success-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to success color 100 or 200         |
 | `.pf-u-info-color-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to info color 100 or 200            |
 | `.pf-u-warning-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to warning color 100 or 200         |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.32",
+  "version": "5.0.0-alpha.34",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -42,7 +42,7 @@
     "@commitlint/config-conventional": "^17.4.2",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^19.0.7",
-    "@patternfly/documentation-framework": "1.10.2",
+    "@patternfly/documentation-framework": "1.10.3",
     "@patternfly/patternfly-a11y": "4.3.1",
     "@patternfly/react-code-editor": "4.82.113",
     "@patternfly/react-core": "4.276.6",

package/patternfly-addons.css

@@ -7866,16 +7866,16 @@
   color: var(--pf-global--link--Color--visited) !important;
 }
 
-.pf-u-default-color-100 {
-  color: var(--pf-global--default-color--100) !important;
+.pf-u-custom-color-100 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 
-.pf-u-default-color-200 {
-  color: var(--pf-global--default-color--200) !important;
+.pf-u-custom-color-200 {
+  color: var(--pf-global--custom-color--200) !important;
 }
 
-.pf-u-default-color-300 {
-  color: var(--pf-global--default-color--300) !important;
+.pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--300) !important;
 }
 
 .pf-u-success-color-100 {
@@ -7979,14 +7979,14 @@
   .pf-u-link-color-visited-on-sm {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-sm {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-sm {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -8077,14 +8077,14 @@
   .pf-u-link-color-visited-on-md {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-md {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-md {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -8175,14 +8175,14 @@
   .pf-u-link-color-visited-on-lg {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-lg {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-lg {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -8273,14 +8273,14 @@
   .pf-u-link-color-visited-on-xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8371,14 +8371,14 @@
   .pf-u-link-color-visited-on-2xl {
     color: var(--pf-global--link--Color--visited) !important;
   }
-  .pf-u-default-color-100-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  .pf-u-custom-color-100-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
-  .pf-u-default-color-200-on-2xl {
-    color: var(--pf-global--default-color--200) !important;
+  .pf-u-custom-color-200-on-2xl {
+    color: var(--pf-global--custom-color--200) !important;
   }
-  .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--300) !important;
+  .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--300) !important;
   }
   .pf-u-success-color-100-on-2xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8504,8 +8504,8 @@
 :where(.pf-theme-dark) .pf-u-color-light-200 {
   color: var(--pf-global--Color-200) !important;
 }
-:where(.pf-theme-dark) .pf-u-default-color-300 {
-  color: var(--pf-global--default-color--100) !important;
+:where(.pf-theme-dark) .pf-u-custom-color-300 {
+  color: var(--pf-global--custom-color--100) !important;
 }
 :where(.pf-theme-dark) .pf-u-success-color-200 {
   color: var(--pf-global--success-color--100) !important;
@@ -8529,8 +8529,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-sm {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
     color: var(--pf-global--success-color--100) !important;
@@ -8555,8 +8555,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-md {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
     color: var(--pf-global--success-color--100) !important;
@@ -8581,8 +8581,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-lg {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
     color: var(--pf-global--success-color--100) !important;
@@ -8607,8 +8607,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
     color: var(--pf-global--success-color--100) !important;
@@ -8633,8 +8633,8 @@
   :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
     color: var(--pf-global--Color-200) !important;
   }
-  :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
-    color: var(--pf-global--default-color--100) !important;
+  :where(.pf-theme-dark) .pf-u-custom-color-300-on-2xl {
+    color: var(--pf-global--custom-color--100) !important;
   }
   :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
     color: var(--pf-global--success-color--100) !important;

package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css}

@@ -17,27 +17,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-t-dark .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-t-dark .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 :root {
   --pf-global--palette--black-100: #fafafa;
@@ -154,9 +133,9 @@
   --pf-global--primary-color--light-100: #73bcf7;
   --pf-global--primary-color--dark-100: #06c;
   --pf-global--secondary-color--100: #6a6e73;
-  --pf-global--default-color--100: #73c5c5;
-  --pf-global--default-color--200: #009596;
-  --pf-global--default-color--300: #003737;
+  --pf-global--custom-color--100: #73c5c5;
+  --pf-global--custom-color--200: #009596;
+  --pf-global--custom-color--300: #003737;
   --pf-global--success-color--100: #3e8635;
   --pf-global--success-color--200: #1e4f18;
   --pf-global--info-color--100: #2b9af3;
@@ -378,35 +357,35 @@
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 300;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
+  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
+  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
@@ -4727,7 +4706,7 @@
   font-family: "Font Awesome 5 Free";
   font-style: normal;
   font-weight: 900;
-  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2"), url("./assets/fonts/webfonts/fa-solid-900.woff") format("woff");
+  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2");
 }
 .fa,
 .fas {
@@ -4737,7 +4716,7 @@
 
 @font-face {
   font-family: "pficon";
-  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
+  src: url("./assets/pficon/pficon.woff2") format("woff2");
 }
 .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-data-processor:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
   font-family: "pficon";

package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss}

@@ -1,3 +1,4 @@
 $pf-global--enable-reset: false;
+$pf-global--enable-normalize: false;
 
 @import "./patternfly-base";

package/patternfly-base.css

@@ -17,27 +17,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-t-dark .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-t-dark .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 :root {
   --pf-global--palette--black-100: #fafafa;
@@ -154,9 +133,9 @@
   --pf-global--primary-color--light-100: #73bcf7;
   --pf-global--primary-color--dark-100: #06c;
   --pf-global--secondary-color--100: #6a6e73;
-  --pf-global--default-color--100: #73c5c5;
-  --pf-global--default-color--200: #009596;
-  --pf-global--default-color--300: #003737;
+  --pf-global--custom-color--100: #73c5c5;
+  --pf-global--custom-color--200: #009596;
+  --pf-global--custom-color--300: #003737;
   --pf-global--success-color--100: #3e8635;
   --pf-global--success-color--200: #1e4f18;
   --pf-global--info-color--100: #2b9af3;
@@ -378,35 +357,35 @@
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 300;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
+  src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   font-style: normal;
   font-weight: 400;
-  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
+  src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   font-style: normal;
   font-weight: 700;
-  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
+  src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 @font-face {
@@ -514,7 +493,7 @@
   font-variant-numeric: tabular-nums;
 }
 
-html,
+:where(html,
 body,
 p,
 ol,
@@ -536,35 +515,48 @@ h2,
 h3,
 h4,
 h5,
-h6 {
+h6) {
   padding: 0;
   margin: 0;
 }
 
-html,
-body {
+*,
+:where(*::before,
+*::after) {
+  box-sizing: border-box;
+}
+
+:where(html,
+body) {
   height: 100%;
 }
 
-h1,
+:where(body) {
+  font-family: var(--pf-global--FontFamily--sans-serif);
+  font-size: var(--pf-global--FontSize--md);
+  font-weight: var(--pf-global--FontWeight--normal);
+  line-height: var(--pf-global--LineHeight--md);
+}
+
+:where(h1,
 h2,
 h3,
 h4,
 h5,
-h6 {
+h6) {
   font-size: 100%;
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
-ul {
+:where(ul) {
   list-style: none;
 }
 
-button,
+:where(button,
 input,
 optgroup,
 select,
-textarea {
+textarea) {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
@@ -572,68 +564,49 @@ textarea {
   color: var(--pf-global--Color--100);
 }
 
-img,
+:where(img,
 embed,
 iframe,
 object,
 audio,
-video {
+video) {
   max-width: 100%;
   height: auto;
 }
 
-iframe {
+:where(iframe) {
   border: 0;
 }
 
-table {
+:where(table) {
   border-spacing: 0;
   border-collapse: collapse;
 }
 
-td,
-th {
+:where(td,
+th) {
   padding: 0;
   text-align: left;
 }
 
-code,
-pre {
+:where(code,
+pre) {
   font-family: var(--pf-global--FontFamily--monospace);
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-}
-
-body {
-  font-family: var(--pf-global--FontFamily--sans-serif);
-  font-size: var(--pf-global--FontSize--md);
-  font-weight: var(--pf-global--FontWeight--normal);
-  line-height: var(--pf-global--LineHeight--md);
-  text-align: left;
-  background-color: var(--pf-global--BackgroundColor--100);
-}
-
-a {
+:where(a) {
   font-weight: var(--pf-global--link--FontWeight);
   color: var(--pf-global--link--Color);
   text-decoration: var(--pf-global--link--TextDecoration);
 }
-a:hover {
+
+:where(a:hover) {
   --pf-global--link--Color: var(--pf-global--link--Color--hover);
   --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--hover);
 }
 
-button,
-a {
+:where(a,
+button) {
   cursor: pointer;
 }
 
@@ -4850,7 +4823,7 @@ a {
   font-family: "Font Awesome 5 Free";
   font-style: normal;
   font-weight: 900;
-  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2"), url("./assets/fonts/webfonts/fa-solid-900.woff") format("woff");
+  src: url("./assets/fonts/webfonts/fa-solid-900.woff2") format("woff2");
 }
 .fa,
 .fas {
@@ -4860,7 +4833,7 @@ a {
 
 @font-face {
   font-family: "pficon";
-  src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
+  src: url("./assets/pficon/pficon.woff2") format("woff2");
 }
 .pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-data-processor:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
   font-family: "pficon";