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

package/RELEASE-NOTES.md

@@ -1,6 +1,6 @@
 ---
 id: Release notes
-section: developer-resources
+section: get-started
 releaseNoteTOC: true
 ---
 ## 2023.01 release notes (2023-01-25)

package/assets/pficon/pficon.scss

@@ -1,7 +1,6 @@
 @font-face {
 	font-family: 'pficon';
-	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2'),
-		url('#{$pf-global--fonticon-path}/pficon.woff') format('woff');
+	src: url('#{$pf-global--fonticon-path}/pficon.woff2') format('woff2');
 }
 
 @mixin pf-icon-styles {

package/base/_fa-icons.scss

@@ -15,8 +15,7 @@
       font-style: normal;
       font-weight: 900;
       src:
-        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2"),
-        url("#{$fa-font-path}/fa-solid-900.woff") format("woff");
+        url("#{$fa-font-path}/fa-solid-900.woff2") format("woff2");
     }
 
     // stylelint-disable

package/base/_fonts.scss

@@ -9,8 +9,7 @@
   font-style: normal;
   font-weight: 300;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -19,8 +18,7 @@
   font-style: normal;
   font-weight: 400;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -29,8 +27,7 @@
   font-style: normal;
   font-weight: 700;
   src:
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -39,8 +36,7 @@
   font-style: normal;
   font-weight: 400;
   src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 
@@ -49,8 +45,7 @@
   font-style: normal;
   font-weight: 700;
   src:
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2"),
-    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff") format("woff");
+    url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff2") format("woff2");
   text-rendering: optimizelegibility;
 }
 

package/base/_globals.scss

@@ -1,60 +1,82 @@
-// Reset
-// Based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
-
+// Reset - based on minireset.css v0.0.3 | MIT License github.com/jgthms/minireset.css
 @if $pf-global--enable-reset {
-  // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
-
-  html,
-  body,
-  p,
-  ol,
-  ul,
-  li,
-  dl,
-  dt,
-  dd,
-  blockquote,
-  figure,
-  fieldset,
-  legend,
-  textarea,
-  pre,
-  iframe,
-  hr,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :where(
+    html,
+    body,
+    p,
+    ol,
+    ul,
+    li,
+    dl,
+    dt,
+    dd,
+    blockquote,
+    figure,
+    fieldset,
+    legend,
+    textarea,
+    pre,
+    iframe,
+    hr,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+   ) {
     padding: 0;
     margin: 0;
   }
+}
 
-  html,
-  body {
+// Normalize
+@if $pf-global--enable-normalize {
+  *,
+  :where(
+    *::before,
+    *::after
+  ) {
+    box-sizing: border-box;
+  }
+
+  :where(
+    html,
+    body
+   ) {
     height: 100%;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  :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
+   ) {
     font-size: 100%;
     font-weight: var(--pf-global--FontWeight--normal);
   }
 
-  ul {
+  :where(ul) {
     list-style: none;
   }
 
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
+  :where(
+    button,
+    input,
+    optgroup,
+    select,
+    textarea
+   ) {
     margin: 0;
     font-family: inherit;
     font-size: 100%;
@@ -62,73 +84,57 @@
     color: var(--pf-global--Color--100);
   }
 
-  img,
-  embed,
-  iframe,
-  object,
-  audio,
-  video {
+  :where(
+    img,
+    embed,
+    iframe,
+    object,
+    audio,
+    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);
   }
 
-  // Patternfly base styles
-
-  *,
-  *::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);
-  }
-
-  // Links styles
-
-  a {
+  :where(a) {
     font-weight: var(--pf-global--link--FontWeight);
     color: var(--pf-global--link--Color);
     text-decoration: var(--pf-global--link--TextDecoration);
+  }
 
-    &:hover {
-      --pf-global--link--Color: var(--pf-global--link--Color--hover);
-      --pf-global--link--TextDecoration: var(--pf-global--link--TextDecoration--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;
   }
 }

package/base/_variables.scss

@@ -123,9 +123,9 @@
   --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
   --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
   --pf-global--secondary-color--100: #{$pf-global--secondary-color--100};
-  --pf-global--default-color--100: #{$pf-global--default-color--100};
-  --pf-global--default-color--200: #{$pf-global--default-color--200};
-  --pf-global--default-color--300: #{$pf-global--default-color--300};
+  --pf-global--custom-color--100: #{$pf-global--custom-color--100};
+  --pf-global--custom-color--200: #{$pf-global--custom-color--200};
+  --pf-global--custom-color--300: #{$pf-global--custom-color--300};
   --pf-global--success-color--100: #{$pf-global--success-color--100};
   --pf-global--success-color--200: #{$pf-global--success-color--200};
   --pf-global--info-color--100: #{$pf-global--info-color--100};

package/base/patternfly-fa-icons.css

@@ -4178,7 +4178,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 {

package/base/patternfly-fonts.css

@@ -2,35 +2,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 {

package/base/patternfly-globals.css

@@ -1,4 +1,4 @@
-html,
+:where(html,
 body,
 p,
 ol,
@@ -20,35 +20,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%;
@@ -56,68 +69,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;
 }
 

package/base/patternfly-icons.css

@@ -4178,7 +4178,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 {
@@ -4188,7 +4188,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/base/patternfly-pf-icons.css

@@ -1,6 +1,6 @@
 @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/base/patternfly-themes.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);
-}
 
 .pf-t-light {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
@@ -58,27 +37,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);
-}
 
 .pf-t-dark.pf-m-transparent {
   background-color: transparent;

package/base/patternfly-variables.css

@@ -113,9 +113,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;

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

@@ -7,27 +7,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-about-modal-box .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-about-modal-box .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);
-}
 
 .pf-c-about-modal-box {
   --pf-c-about-modal-box--BackgroundColor: var(--pf-global--palette--black-1000);
@@ -244,23 +223,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
 :where(.pf-theme-dark) .pf-c-about-modal-box {
   color: var(--pf-global--Color--100);