@patternfly/patternfly 4.222.3 → 5.0.0-alpha.1

package/README.md

@@ -1,4 +1,4 @@
-# PatternFly 4
+# PatternFly 5
 
 ## Install
 
@@ -16,7 +16,7 @@ Any of the files above are meant for use in consuming the library. The recommend
 
 ## Development
 
-**PatternFly 4 Development requires Node v12.0.0 or greater**
+**PatternFly 5 Development requires Node v12.0.0 or greater**
 
 To setup the PatternFly 4 development environment:
 

package/RELEASE-NOTES.md

@@ -3,17 +3,6 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
-## 2022.15 release notes (2022-11-18)
-Packages released:
-- [@patternfly/patternfly@v4.221.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.221.2)
-
-### Components
-- **Pagination:** Added support for insets ([#5207](https://github.com/patternfly/patternfly/pull/5207))
-- **Tabs:** Added help popover, refactored tab action ([#5213](https://github.com/patternfly/patternfly/pull/5213))
-
-### Other
-- **Icons:** Added data-sink and data-source ([#5228](https://github.com/patternfly/patternfly/pull/5228))
-
 ## 2022.14 release notes (2022-10-28)
 Packages released:
 - [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)

package/base/_fonts.scss

@@ -153,192 +153,4 @@
   font-display: fallback;
 }
 
-// remove in breaking change
-@if $pf-global--enable-font-overpass-cdn {
-  // stylelint-disable no-invalid-position-at-import-rule
-  @import "https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono";
-  // stylelint-enable no-invalid-position-at-import-rule
-} @else {
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 200;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-thin.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-thin.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 200;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-thin-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-thin-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 300;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extralight.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extralight.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 300;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extralight-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extralight-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 400;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-light.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-light.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 400;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-light-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-light-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 500;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-regular.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-regular.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 500;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 600;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-semibold.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-semibold.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 600;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-semibold-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-semibold-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 700;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-bold.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-bold.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 700;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-bold-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-bold-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 800;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extrabold.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extrabold.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 800;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extrabold-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-extrabold-italic.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: normal;
-    font-weight: 900;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-heavy.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-heavy.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass";
-    font-style: italic;
-    font-weight: 900;
-    src:
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-heavy-italic.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-webfont/overpass-heavy-italic.woff") format("woff");
-  }
-
-
-  // Overpass Mono
-  @font-face {
-    font-family: "overpass-mono";
-    font-style: normal;
-    font-weight: 300;
-    src:
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-light.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-light.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass-mono";
-    font-style: normal;
-    font-weight: 400;
-    src:
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-regular.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-regular.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass-mono";
-    font-style: normal;
-    font-weight: 500;
-    src:
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-semibold.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-semibold.woff") format("woff");
-  }
-
-  @font-face {
-    font-family: "overpass-mono";
-    font-style: normal;
-    font-weight: 600;
-    src:
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-bold.woff2") format("woff2"),
-      url("#{$pf-global--font-path}/overpass-mono-webfont/overpass-mono-bold.woff") format("woff");
-  }
-}
 // stylelint-enable

package/base/_globals.scss

@@ -131,12 +131,6 @@
   a {
     cursor: pointer;
   }
-
-  @include pf-m-overpass-font {
-    a {
-      font-weight: var(--pf-global--FontWeight--semi-bold);
-    }
-  }
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/base/_icons.scss

@@ -1,2 +1,30 @@
 @import "fa-icons";
 @import "pf-icons";
+
+.pf-svg-size-sm {
+  // Small icon size
+  width: 1em;
+  height: 1em;
+  vertical-align: -.125em;
+}
+
+.pf-svg-size-md {
+  // Medium icon size
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: -.1875em;
+}
+
+.pf-svg-size-lg {
+  // Large icon size
+  width: 2em;
+  height: 2em;
+  vertical-align: -.25em;
+}
+
+.pf-svg-size-xl {
+  // Extra large icon size
+  width: 3em;
+  height: 3em;
+  vertical-align: -.375em;
+}

package/base/_variables.scss

@@ -249,8 +249,6 @@
   --pf-global--FontFamily--redhatVF--sans-serif: #{$pf-global--FontFamily--redhatVF--sans-serif};
   --pf-global--FontFamily--redhatVF--heading--sans-serif: #{$pf-global--FontFamily--redhatVF--heading--sans-serif};
   --pf-global--FontFamily--redhatVF--monospace: #{$pf-global--FontFamily--redhatVF--monospace};
-  --pf-global--FontFamily--overpass--sans-serif: #{$pf-global--FontFamily--overpass--sans-serif};
-  --pf-global--FontFamily--overpass--monospace: #{$pf-global--FontFamily--overpass--monospace};
 
   // Font size
   --pf-global--FontSize--4xl: #{$pf-global--FontSize--4xl};
@@ -265,10 +263,7 @@
   // Font weight
   --pf-global--FontWeight--light: #{$pf-global--FontWeight--light};
   --pf-global--FontWeight--normal: #{$pf-global--FontWeight--normal};
-  --pf-global--FontWeight--semi-bold: #{$pf-global--FontWeight--semi-bold};
-  --pf-global--FontWeight--overpass--semi-bold: #{$pf-global--FontWeight--overpass--semi-bold};
   --pf-global--FontWeight--bold: #{$pf-global--FontWeight--bold};
-  --pf-global--FontWeight--overpass--bold: #{$pf-global--FontWeight--overpass--bold};
 
   // Line height
   --pf-global--LineHeight--sm: #{$pf-global--LineHeight--sm};
@@ -289,15 +284,6 @@
   --pf-global--target-size--MinHeight: #{$pf-global--target-size--MinHeight};
 }
 
-// Overpass font overrides
-@include pf-m-overpass-font {
-  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
-  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
-  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
-  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
-  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
-}
-
 // RedHatFont updated font overrides
 .pf-m-redhat-updated-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);

package/base/patternfly-fonts.css

@@ -116,124 +116,4 @@
   font-style: italic;
   font-weight: 300 700;
   font-display: fallback;
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 200;
-  src: url("./assets/fonts/overpass-webfont/overpass-thin.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-thin.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 200;
-  src: url("./assets/fonts/overpass-webfont/overpass-thin-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-thin-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-webfont/overpass-extralight.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extralight.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-webfont/overpass-extralight-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extralight-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-webfont/overpass-light.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-light.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-webfont/overpass-light-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-light-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-webfont/overpass-regular.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-regular.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-webfont/overpass-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-webfont/overpass-semibold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-webfont/overpass-semibold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-semibold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 700;
-  src: url("./assets/fonts/overpass-webfont/overpass-bold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-bold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 700;
-  src: url("./assets/fonts/overpass-webfont/overpass-bold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-bold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 800;
-  src: url("./assets/fonts/overpass-webfont/overpass-extrabold.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extrabold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 800;
-  src: url("./assets/fonts/overpass-webfont/overpass-extrabold-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-extrabold-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: normal;
-  font-weight: 900;
-  src: url("./assets/fonts/overpass-webfont/overpass-heavy.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-heavy.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass";
-  font-style: italic;
-  font-weight: 900;
-  src: url("./assets/fonts/overpass-webfont/overpass-heavy-italic.woff2") format("woff2"), url("./assets/fonts/overpass-webfont/overpass-heavy-italic.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 300;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-light.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-light.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 400;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-regular.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 500;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-semibold.woff") format("woff");
-}
-@font-face {
-  font-family: "overpass-mono";
-  font-style: normal;
-  font-weight: 600;
-  src: url("./assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff2") format("woff2"), url("./assets/fonts/overpass-mono-webfont/overpass-mono-bold.woff") format("woff");
 }

package/base/patternfly-globals.css

@@ -121,10 +121,6 @@ a {
   cursor: pointer;
 }
 
-.pf-m-overpass-font a {
-  font-weight: var(--pf-global--FontWeight--semi-bold);
-}
-
 :root:where(.pf-theme-dark) {
   color-scheme: dark;
 }

package/base/patternfly-icons.scss

@@ -1,30 +1,2 @@
 @import "../sass-utilities/all";
 @import "icons";
-
-.pf-svg-size-sm {
-  // Small icon size
-  width: 1em;
-  height: 1em;
-  vertical-align: -.125em;
-}
-
-.pf-svg-size-md {
-  // Medium icon size
-  width: 1.5em;
-  height: 1.5em;
-  vertical-align: -.1875em;
-}
-
-.pf-svg-size-lg {
-  // Large icon size
-  width: 2em;
-  height: 2em;
-  vertical-align: -.25em;
-}
-
-.pf-svg-size-xl {
-  // Extra large icon size
-  width: 3em;
-  height: 3em;
-  vertical-align: -.375em;
-}

package/base/patternfly-variables.css

@@ -202,17 +202,15 @@
   --pf-global--icon--FontSize--md: 1.125rem;
   --pf-global--icon--FontSize--lg: 1.5rem;
   --pf-global--icon--FontSize--xl: 3.375rem;
-  --pf-global--FontFamily--sans-serif: "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--sans-serif: "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--heading--sans-serif: "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--sans-serif: "RedHatTextUpdated", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhat-updated--heading--sans-serif: "RedHatDisplayUpdated", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhat--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif;
-  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--sans-serif: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
+  --pf-global--FontFamily--redhatVF--heading--sans-serif: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
   --pf-global--FontFamily--redhatVF--monospace: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --pf-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
   --pf-global--FontSize--4xl: 2.25rem;
   --pf-global--FontSize--3xl: 1.75rem;
   --pf-global--FontSize--2xl: 1.5rem;
@@ -223,10 +221,7 @@
   --pf-global--FontSize--xs: 0.75rem;
   --pf-global--FontWeight--light: 300;
   --pf-global--FontWeight--normal: 400;
-  --pf-global--FontWeight--semi-bold: 700;
-  --pf-global--FontWeight--overpass--semi-bold: 500;
   --pf-global--FontWeight--bold: 700;
-  --pf-global--FontWeight--overpass--bold: 600;
   --pf-global--LineHeight--sm: 1.3;
   --pf-global--LineHeight--md: 1.5;
   --pf-global--ListStyle: disc outside;
@@ -239,14 +234,6 @@
   --pf-global--target-size--MinHeight: 44px;
 }
 
-.pf-m-overpass-font {
-  --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
-  --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
-  --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
-  --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
-  --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
-}
-
 .pf-m-redhat-updated-font {
   --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--redhat-updated--sans-serif);
   --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif);

package/components/AboutModalBox/about-modal-box.css

@@ -31,22 +31,9 @@
 
 .pf-c-about-modal-box {
   --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
-  --pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05);
-  --pf-c-about-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
   --pf-c-about-modal-box--Height: 100%;
   --pf-c-about-modal-box--lg--Height: 47.625rem;
-  --pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl));
-  --pf-c-about-modal-box--Width: 100vw;
-  --pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2));
-  --pf-c-about-modal-box--lg--MaxWidth: 77rem;
-  --pf-c-about-modal-box--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--sm--PaddingTop: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingBottom: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-about-modal-box--Width: 100%;
   --pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
   --pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
   --pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
@@ -92,7 +79,6 @@
   --pf-c-about-modal-box__content--sm--MarginLeft: var(--pf-global--spacer--3xl);
   color: var(--pf-global--Color--100);
   position: relative;
-  z-index: var(--pf-c-about-modal-box--ZIndex);
   display: grid;
   grid-template-rows: max-content max-content auto;
   grid-template-areas: "brand close" "header header" "content content";
@@ -101,15 +87,6 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-c-about-modal-box--BackgroundColor);
-  box-shadow: var(--pf-c-about-modal-box--BoxShadow);
-}
-@media screen and (min-width: 576px) {
-  .pf-c-about-modal-box {
-    --pf-c-about-modal-box--PaddingTop: var(--pf-c-about-modal-box--sm--PaddingTop);
-    --pf-c-about-modal-box--PaddingRight: var(--pf-c-about-modal-box--sm--PaddingRight);
-    --pf-c-about-modal-box--PaddingBottom: var(--pf-c-about-modal-box--sm--PaddingBottom);
-    --pf-c-about-modal-box--PaddingLeft: var(--pf-c-about-modal-box--sm--PaddingLeft);
-  }
 }
 @media screen and (min-width: 576px) {
   .pf-c-about-modal-box {
@@ -160,8 +137,6 @@
     --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
     grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
     grid-template-rows: max-content max-content auto;
-    max-width: var(--pf-c-about-modal-box--lg--MaxWidth);
-    max-height: var(--pf-c-about-modal-box--lg--MaxHeight);
   }
 }
 
@@ -247,12 +222,10 @@
 
 .pf-c-about-modal-box__hero {
   display: none;
-  visibility: hidden;
 }
 @media only screen and (min-width: 576px) {
   .pf-c-about-modal-box__hero {
     display: block;
-    visibility: visible;
     background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
     background-repeat: no-repeat;
     background-attachment: fixed;

package/components/AboutModalBox/about-modal-box.scss

@@ -1,32 +1,12 @@
 .pf-c-about-modal-box {
   // Component variables
   --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000); // Modal uses a non-standard background color
-  --pf-c-about-modal-box--BoxShadow: 0 0 100px 0 rgba(255, 255, 255, .05);  // This is a special one-off glow for the about modal
-  --pf-c-about-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
   --pf-c-about-modal-box--Height: 100%;
   --pf-c-about-modal-box--lg--Height: #{pf-size-prem(762px)}; // Height is optimized for the exact height desired
-  --pf-c-about-modal-box--lg--MaxHeight: calc(100% - var(--pf-global--spacer--xl)); // MaxHeight ensures that the modal will not go off the screen and instead the content will scroll
-  --pf-c-about-modal-box--Width: 100vw;
-  --pf-c-about-modal-box--lg--Width: calc(100% - (var(--pf-global--spacer--3xl) * 2)); // Modal should be full width with a gutter on either side until it hits a max-width
-  --pf-c-about-modal-box--lg--MaxWidth: #{pf-size-prem(1232px)};
-  --pf-c-about-modal-box--PaddingTop: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingRight: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
-  --pf-c-about-modal-box--sm--PaddingTop: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingBottom: var(--pf-global--spacer--3xl);
-  --pf-c-about-modal-box--sm--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-about-modal-box--Width: 100%;
   --pf-c-about-modal-box--sm--grid-template-columns: 5fr 1fr;
   --pf-c-about-modal-box--lg--grid-template-columns: 1fr .6fr;
 
-  @media screen and (min-width: $pf-global--breakpoint--sm) {
-    --pf-c-about-modal-box--PaddingTop: var(--pf-c-about-modal-box--sm--PaddingTop);
-    --pf-c-about-modal-box--PaddingRight: var(--pf-c-about-modal-box--sm--PaddingRight);
-    --pf-c-about-modal-box--PaddingBottom: var(--pf-c-about-modal-box--sm--PaddingBottom);
-    --pf-c-about-modal-box--PaddingLeft: var(--pf-c-about-modal-box--sm--PaddingLeft);
-  }
-
   // Brand
   --pf-c-about-modal-box__brand--PaddingTop: var(--pf-global--spacer--2xl);
   --pf-c-about-modal-box__brand--PaddingRight: var(--pf-global--spacer--xl);
@@ -119,7 +99,6 @@
   @include pf-t-dark;
 
   position: relative;
-  z-index: var(--pf-c-about-modal-box--ZIndex);
   display: grid;
   grid-template-rows: max-content max-content auto;
   grid-template-areas:
@@ -131,7 +110,6 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-c-about-modal-box--BackgroundColor); // Because this component is always dark, set the background color
-  box-shadow: var(--pf-c-about-modal-box--BoxShadow);
 
   @media only screen and (min-width: $pf-global--breakpoint--sm) {
     grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
@@ -147,8 +125,6 @@
 
     grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
     grid-template-rows: max-content max-content auto;
-    max-width: var(--pf-c-about-modal-box--lg--MaxWidth);
-    max-height: var(--pf-c-about-modal-box--lg--MaxHeight);
   }
 }
 
@@ -241,11 +217,9 @@
 // Hero
 .pf-c-about-modal-box__hero {
   display: none; // Don't display the hero at the narrowest breakpoint
-  visibility: hidden;
 
   @media only screen and (min-width: $pf-global--breakpoint--sm) {
     display: block;
-    visibility: visible;
     background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
     background-repeat: no-repeat;
     background-attachment: fixed;