@patternfly/patternfly 4.194.4 → 4.196.1

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

@@ -5,6 +5,22 @@ section: utilities
 
 ## Examples
 
+### Font family
+
+```html
+<div class="pf-u-font-family-sans-serif">Sans serif</div>
+<div class="pf-u-font-family-heading-sans-serif">Heading sans serif</div>
+<div class="pf-u-font-family-monospace">Monospace</div>
+<div
+  class="pf-u-font-family-redhatVF-sans-serif"
+>Red Hat variable font sans serif</div>
+<div
+  class="pf-u-font-family-redhatVF-heading-sans-serif"
+>Red Hat variable font heading sans serif</div>
+<div class="pf-u-font-family-redhatVF-monospace">Red Hat variable font monospace</div>
+
+```
+
 ### Font size
 
 ```html
@@ -153,29 +169,30 @@ Care should be taken especially when applying text colors, as this can have a ne
 
 ### Usage
 
-| Class                                                                   | Applied to | Outcome                                                |
-| ----------------------------------------------------------------------- | ---------- | ------------------------------------------------------ |
-| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}` | `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
-| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`             | `*`        | Sets font-size to light, normal, or bold               |
-| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                    | `*`        | Sets font-color to color 100, 200, 300, or 400         |
-| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                       | `*`        | Sets font-color to active color 100 or 400             |
-| `.pf-u-primary-color-100{-on-[breakpoint]}`                             | `*`        | Sets font-color to primary color 100                   |
-| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                        | `*`        | Sets font-color to light color 100 or 200              |
-| `.pf-u-link-color{-on-[breakpoint]}`                                    | `*`        | Sets font-color to link color                          |
-| `.pf-u-link-color-hover{-on-[breakpoint]}`                              | `*`        | Sets font-color to hover link color                    |
-| `.pf-u-link-color-light{-on-[breakpoint]}`                              | `*`        | Sets font-color to light link color                    |
-| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                        | `*`        | Sets font-color to light hover link color              |
-| `.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-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            |
-| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                  | `*`        | Sets font-color to danger color 100, 200, or 300       |
-| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                     | `*`        | Sets font-color to disabled color 100 or 200           |
-| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                      | `*`        | Sets font-color to light or dark icon color            |
-| `.pf-u-text-break-word{-on-[breakpoint]}`                               | `*`        | Sets word-break to break-word                          |
-| `.pf-u-text-nowrap{-on-[breakpoint]}`                                   | `*`        | Sets white-space to nowrap                             |
-| `.pf-u-text-wrap{-on-[breakpoint]}`                                     | `*`        | Sets white-space to normal                             |
-| `.pf-u-text-truncate`                                                   | `*`        | Truncates text field                                   |
+| Class                                                                                                                                 | Applied to | Outcome                                                                                                                                |
+| ------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`                                                               | `*`        | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl                                                                                 |
+| `.pf-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*`        | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
+| `.pf-u-font-weight-{light, normal, bold}{-on-[breakpoint]}`                                                                           | `*`        | Sets font-size to light, normal, or bold                                                                                               |
+| `.pf-u-color-{100, 200, 300, 400}{-on-[breakpoint]}`                                                                                  | `*`        | Sets font-color to color 100, 200, 300, or 400                                                                                         |
+| `.pf-u-active-color-{100, 400}{-on-[breakpoint]}`                                                                                     | `*`        | Sets font-color to active color 100 or 400                                                                                             |
+| `.pf-u-primary-color-100{-on-[breakpoint]}`                                                                                           | `*`        | Sets font-color to primary color 100                                                                                                   |
+| `.pf-u-color-light-{100, 200}{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light color 100 or 200                                                                                              |
+| `.pf-u-link-color{-on-[breakpoint]}`                                                                                                  | `*`        | Sets font-color to link color                                                                                                          |
+| `.pf-u-link-color-hover{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to hover link color                                                                                                    |
+| `.pf-u-link-color-light{-on-[breakpoint]}`                                                                                            | `*`        | Sets font-color to light link color                                                                                                    |
+| `.pf-u-link-color-light-hover{-on-[breakpoint]}`                                                                                      | `*`        | Sets font-color to light hover link color                                                                                              |
+| `.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-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                                                                                            |
+| `.pf-u-danger-color-{100, 200, 300}{-on-[breakpoint]}`                                                                                | `*`        | Sets font-color to danger color 100, 200, or 300                                                                                       |
+| `.pf-u-disabled-color-{100, 200}{-on-[breakpoint]}`                                                                                   | `*`        | Sets font-color to disabled color 100 or 200                                                                                           |
+| `.pf-u-icon-color-{light, dark}{-on-[breakpoint]}`                                                                                    | `*`        | Sets font-color to light or dark icon color                                                                                            |
+| `.pf-u-text-break-word{-on-[breakpoint]}`                                                                                             | `*`        | Sets word-break to break-word                                                                                                          |
+| `.pf-u-text-nowrap{-on-[breakpoint]}`                                                                                                 | `*`        | Sets white-space to nowrap                                                                                                             |
+| `.pf-u-text-wrap{-on-[breakpoint]}`                                                                                                   | `*`        | Sets white-space to normal                                                                                                             |
+| `.pf-u-text-truncate`                                                                                                                 | `*`        | Truncates text field                                                                                                                   |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.194.4",
+  "version": "4.196.1",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-addons.css

@@ -7873,6 +7873,30 @@
   }
 }
 
+.pf-u-font-family-sans-serif {
+  font-family: var(--pf-global--FontFamily--sans-serif) !important;
+}
+
+.pf-u-font-family-heading-sans-serif {
+  font-family: var(--pf-global--FontFamily--heading--sans-serif) !important;
+}
+
+.pf-u-font-family-monospace {
+  font-family: var(--pf-global--FontFamily--monospace) !important;
+}
+
+.pf-u-font-family-redhatVF-sans-serif {
+  font-family: var(--pf-global--FontFamily--redhatVF--sans-serif) !important;
+}
+
+.pf-u-font-family-redhatVF-heading-sans-serif {
+  font-family: var(--pf-global--FontFamily--redhatVF--heading--sans-serif) !important;
+}
+
+.pf-u-font-family-redhatVF-monospace {
+  font-family: var(--pf-global--FontFamily--redhatVF--monospace) !important;
+}
+
 .pf-u-font-size-xs {
   font-size: var(--pf-global--FontSize--xs) !important;
 }

package/patternfly-base-no-reset.css

@@ -98,6 +98,7 @@
   --pf-global--palette--light-green-500: #6ca100;
   --pf-global--palette--light-green-600: #486b00;
   --pf-global--palette--light-green-700: #253600;
+  --pf-global--palette--orange-50: #fff6ec;
   --pf-global--palette--orange-100: #f4b678;
   --pf-global--palette--orange-200: #ef9234;
   --pf-global--palette--orange-300: #ec7a08;
@@ -121,6 +122,7 @@
   --pf-global--palette--red-500: #2c0000;
   --pf-global--palette--white: #fff;
   --pf-global--BackgroundColor--100: #fff;
+  --pf-global--BackgroundColor--150: #fafafa;
   --pf-global--BackgroundColor--200: #f0f0f0;
   --pf-global--BackgroundColor--light-100: #fff;
   --pf-global--BackgroundColor--light-200: #fafafa;
@@ -296,6 +298,89 @@
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
 }
 
+:root:where(.pf-theme-dark) {
+  --pf-global--palette--black-50: #e0e0e0;
+  --pf-global--palette--black-100: #c6c7c8;
+  --pf-global--palette--black-200: #aaabac;
+  --pf-global--palette--black-300: #868789;
+  --pf-global--palette--black-400: #57585a;
+  --pf-global--palette--black-500: #444548;
+  --pf-global--palette--black-600: #36373a;
+  --pf-global--palette--black-700: #26292d;
+  --pf-global--palette--black-800: #1b1d21;
+  --pf-global--palette--black-900: #0f1214;
+  --pf-global--palette--red-9999: #fe5142;
+  --pf-global--palette--red-8888: #fe6a5d;
+  --pf-global--palette--blue-300: #1fa7f8;
+  --pf-global--BackgroundColor--100: #1b1d21;
+  --pf-global--BackgroundColor--150: #212427;
+  --pf-global--BackgroundColor--200: #0f1214;
+  --pf-global--BackgroundColor--300: #26292d;
+  --pf-global--BackgroundColor--400: #36373a;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--BorderColor--200: #444548;
+  --pf-global--BorderColor--300: #57585a;
+  --pf-global--BorderColor--400: #aaabac;
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--active-color--100: #1fa7f8;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--primary-color--300: #06c;
+  --pf-global--success-color--100: #5ba352;
+  --pf-global--warning-color--100: #f0ab00;
+  --pf-global--warning-color--200: #f4c145;
+  --pf-global--danger-color--100: #fe5142;
+  --pf-global--danger-color--200: #fe6a5d;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--disabled-color--100: #57585a;
+  --pf-global--disabled-color--200: #444548;
+  --pf-global--disabled-color--300: #aaabac;
+  --pf-global--icon--Color--light: #aaabac;
+  --pf-global--icon--Color--dark: #aaabac;
+  --pf-global--Color--dark-100: #fff;
+  --pf-global--Color--dark-200: #aaabac;
+  --pf-global--Color--light-100: #fff;
+  --pf-global--Color--light-200: #aaabac;
+  --pf-global--Color--light-300: #3c3f42;
+  --pf-global--BorderColor--dark-100: #444548;
+  --pf-global--BorderColor--light-100: #444548;
+  --pf-global--primary-color--light-100: #1fa7f8;
+  --pf-global--primary-color--dark-100: #1fa7f8;
+  --pf-global--link--Color--light: #1fa7f8;
+  --pf-global--link--Color--light--hover: #73bcf7;
+  --pf-global--link--Color--dark: #1fa7f8;
+  --pf-global--link--Color--dark--hover: #73bcf7;
+  --pf-global--BackgroundColor--light-100: #1b1d21;
+  --pf-global--BackgroundColor--light-200: #0f1214;
+  --pf-global--BackgroundColor--light-300: #26292d;
+  --pf-global--BackgroundColor--dark-100: #1b1d21;
+  --pf-global--BackgroundColor--dark-200: #0f1214;
+  --pf-global--BackgroundColor--dark-300: #26292d;
+  --pf-global--BackgroundColor--dark-400: #36373a;
+  --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
+  --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
+  --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
+}
+
 @font-face {
   font-family: "RedHatDisplay";
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
@@ -559,6 +644,10 @@ html {
   font-variant-numeric: tabular-nums;
 }
 
+:root:where(.pf-theme-dark) {
+  color-scheme: dark;
+}
+
 .pf-t-dark.pf-m-transparent {
   background-color: transparent;
 }
@@ -569,10 +658,10 @@ html {
   background-color: rgba(3, 3, 3, 0.6);
 }
 .pf-t-dark.pf-m-opaque-100 {
-  background-color: #3c3f42;
+  background-color: #1b1d21;
 }
 .pf-t-dark.pf-m-opaque-200 {
-  background-color: #151515;
+  background-color: #0f1214;
 }
 
 .pf-t-light.pf-m-transparent {
@@ -582,10 +671,10 @@ html {
   background-color: #fff;
 }
 .pf-t-light.pf-m-opaque-200 {
-  background-color: #fafafa;
+  background-color: #c6c7c8;
 }
 .pf-t-light.pf-m-opaque-300 {
-  background-color: #f0f0f0;
+  background-color: #aaabac;
 }
 
 * .fa,

package/patternfly-base.css

@@ -98,6 +98,7 @@
   --pf-global--palette--light-green-500: #6ca100;
   --pf-global--palette--light-green-600: #486b00;
   --pf-global--palette--light-green-700: #253600;
+  --pf-global--palette--orange-50: #fff6ec;
   --pf-global--palette--orange-100: #f4b678;
   --pf-global--palette--orange-200: #ef9234;
   --pf-global--palette--orange-300: #ec7a08;
@@ -121,6 +122,7 @@
   --pf-global--palette--red-500: #2c0000;
   --pf-global--palette--white: #fff;
   --pf-global--BackgroundColor--100: #fff;
+  --pf-global--BackgroundColor--150: #fafafa;
   --pf-global--BackgroundColor--200: #f0f0f0;
   --pf-global--BackgroundColor--light-100: #fff;
   --pf-global--BackgroundColor--light-200: #fafafa;
@@ -296,6 +298,89 @@
   --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--redhatVF--monospace);
 }
 
+:root:where(.pf-theme-dark) {
+  --pf-global--palette--black-50: #e0e0e0;
+  --pf-global--palette--black-100: #c6c7c8;
+  --pf-global--palette--black-200: #aaabac;
+  --pf-global--palette--black-300: #868789;
+  --pf-global--palette--black-400: #57585a;
+  --pf-global--palette--black-500: #444548;
+  --pf-global--palette--black-600: #36373a;
+  --pf-global--palette--black-700: #26292d;
+  --pf-global--palette--black-800: #1b1d21;
+  --pf-global--palette--black-900: #0f1214;
+  --pf-global--palette--red-9999: #fe5142;
+  --pf-global--palette--red-8888: #fe6a5d;
+  --pf-global--palette--blue-300: #1fa7f8;
+  --pf-global--BackgroundColor--100: #1b1d21;
+  --pf-global--BackgroundColor--150: #212427;
+  --pf-global--BackgroundColor--200: #0f1214;
+  --pf-global--BackgroundColor--300: #26292d;
+  --pf-global--BackgroundColor--400: #36373a;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--BorderColor--200: #444548;
+  --pf-global--BorderColor--300: #57585a;
+  --pf-global--BorderColor--400: #aaabac;
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--active-color--100: #1fa7f8;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--primary-color--300: #06c;
+  --pf-global--success-color--100: #5ba352;
+  --pf-global--warning-color--100: #f0ab00;
+  --pf-global--warning-color--200: #f4c145;
+  --pf-global--danger-color--100: #fe5142;
+  --pf-global--danger-color--200: #fe6a5d;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--disabled-color--100: #57585a;
+  --pf-global--disabled-color--200: #444548;
+  --pf-global--disabled-color--300: #aaabac;
+  --pf-global--icon--Color--light: #aaabac;
+  --pf-global--icon--Color--dark: #aaabac;
+  --pf-global--Color--dark-100: #fff;
+  --pf-global--Color--dark-200: #aaabac;
+  --pf-global--Color--light-100: #fff;
+  --pf-global--Color--light-200: #aaabac;
+  --pf-global--Color--light-300: #3c3f42;
+  --pf-global--BorderColor--dark-100: #444548;
+  --pf-global--BorderColor--light-100: #444548;
+  --pf-global--primary-color--light-100: #1fa7f8;
+  --pf-global--primary-color--dark-100: #1fa7f8;
+  --pf-global--link--Color--light: #1fa7f8;
+  --pf-global--link--Color--light--hover: #73bcf7;
+  --pf-global--link--Color--dark: #1fa7f8;
+  --pf-global--link--Color--dark--hover: #73bcf7;
+  --pf-global--BackgroundColor--light-100: #1b1d21;
+  --pf-global--BackgroundColor--light-200: #0f1214;
+  --pf-global--BackgroundColor--light-300: #26292d;
+  --pf-global--BackgroundColor--dark-100: #1b1d21;
+  --pf-global--BackgroundColor--dark-200: #0f1214;
+  --pf-global--BackgroundColor--dark-300: #26292d;
+  --pf-global--BackgroundColor--dark-400: #36373a;
+  --pf-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.48), 0 0 0.125rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.64);
+  --pf-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.48), 0 0 0.25rem 0 rgba(3, 3, 3, 0.24);
+  --pf-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
+  --pf-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+  --pf-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.64), 0 0 0.5rem 0 rgba(3, 3, 3, 0.4);
+  --pf-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.8);
+  --pf-global--BoxShadow--inset: inset 0 0 0.625rem 0 #030303;
+}
+
 @font-face {
   font-family: "RedHatDisplay";
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
@@ -686,6 +771,10 @@ a {
   font-weight: var(--pf-global--FontWeight--semi-bold);
 }
 
+:root:where(.pf-theme-dark) {
+  color-scheme: dark;
+}
+
 .pf-t-dark.pf-m-transparent {
   background-color: transparent;
 }
@@ -696,10 +785,10 @@ a {
   background-color: rgba(3, 3, 3, 0.6);
 }
 .pf-t-dark.pf-m-opaque-100 {
-  background-color: #3c3f42;
+  background-color: #1b1d21;
 }
 .pf-t-dark.pf-m-opaque-200 {
-  background-color: #151515;
+  background-color: #0f1214;
 }
 
 .pf-t-light.pf-m-transparent {
@@ -709,10 +798,10 @@ a {
   background-color: #fff;
 }
 .pf-t-light.pf-m-opaque-200 {
-  background-color: #fafafa;
+  background-color: #c6c7c8;
 }
 .pf-t-light.pf-m-opaque-300 {
-  background-color: #f0f0f0;
+  background-color: #aaabac;
 }
 
 * .fa,