@patternfly/patternfly 5.0.0-prerelease.3 → 5.0.0-prerelease.5

package/base/patternfly-themes.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-t-light {
   --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
@@ -37,6 +40,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-t-dark.pf-m-transparent {
   background-color: transparent;

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

@@ -7,6 +7,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-about-modal-box .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-about-modal-box {
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
@@ -213,6 +216,9 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   color: var(--pf-v5-global--Color--100);

package/components/Banner/banner.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-banner .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-banner {
   --pf-v5-c-banner--PaddingTop: var(--pf-v5-global--spacer--xs);
@@ -112,6 +115,9 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-banner .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-banner {
   color: var(false);

package/components/LogViewer/log-viewer.css

@@ -7,6 +7,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-log-viewer {
   --pf-v5-c-log-viewer--Height: 100%;
@@ -192,6 +195,9 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main {
   color: var(--pf-v5-global--Color--100);

package/components/Login/login.css

@@ -7,6 +7,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-login__footer .pf-v5-c-button, .pf-v5-c-login__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-login {
   --pf-v5-c-login--PaddingTop: var(--pf-v5-global--spacer--lg);
@@ -282,6 +285,10 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-login__header .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-login__footer .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-login {
   --pf-v5-c-login__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);

package/components/Masthead/masthead.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-masthead {
   --pf-v5-c-masthead--PaddingLeft: var(--pf-v5-c-masthead--inset);
@@ -656,6 +659,9 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-masthead .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-masthead {
   --pf-v5-c-masthead--BackgroundColor: var(--pf-v5-global--palette--black-1000);

package/components/Page/page.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button, .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button, .pf-v5-c-page__sidebar .pf-v5-c-button, .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-page__header-tools-item, .pf-v5-c-page__header-tools-group {
   --pf-v5-hidden-visible--hidden--Display: none;
@@ -963,6 +966,11 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__main-section[class*=pf-m-dark-] .pf-v5-c-button,
+:where(.pf-v5-theme-dark) .pf-v5-c-page__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark):root {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);

package/components/Switch/switch.css

@@ -6,6 +6,7 @@
   --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
   --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--palette--black-150);
   --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
   --pf-v5-c-switch--Height: auto;
   --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
@@ -88,6 +89,7 @@
   cursor: not-allowed;
 }
 .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
+  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-c-switch__input--disabled__toggle-icon--Color);
   cursor: not-allowed;
   background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
 }
@@ -140,4 +142,5 @@
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-switch__toggle--before--BoxShadow: none;
+  --pf-v5-c-switch__input--disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
 }

package/components/Switch/switch.scss

@@ -11,6 +11,7 @@
   --#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
   --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
   --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
+  --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
 
   // Switch
   --#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
@@ -121,6 +122,8 @@
     }
 
     ~ .#{$switch}__toggle {
+      --#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
+
       cursor: not-allowed;
       background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
 

package/components/Switch/themes/dark/switch.scss

@@ -6,5 +6,6 @@
     --#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--Color--100);
     --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--disabled-color--100);
     --#{$switch}__toggle--before--BoxShadow: none;
+    --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--disabled-color--100);
   }
 }

package/components/Wizard/wizard.css

@@ -7,6 +7,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 .pf-v5-c-wizard {
   --pf-v5-c-wizard--Height: 100%;
@@ -506,6 +509,9 @@
   --pf-v5-global--link--Color--hover: #73bcf7;
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
+}
 
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);

package/docs/components/Switch/examples/Switch.md

@@ -261,6 +261,42 @@ cssPrefix: pf-v5-c-switch
   >Message when off</span>
 </label>
 
+<br />
+<br />
+<label class="pf-v5-c-switch" for="switch-with-icon-disabled-1">
+  <input
+    class="pf-v5-c-switch__input"
+    type="checkbox"
+    id="switch-with-icon-disabled-1"
+    aria-label="switch is off"
+    disabled
+    checked
+  />
+
+  <span class="pf-v5-c-switch__toggle">
+    <span class="pf-v5-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+</label>
+
+<br />
+<br />
+<label class="pf-v5-c-switch" for="switch-with-icon-disabled-2">
+  <input
+    class="pf-v5-c-switch__input"
+    type="checkbox"
+    id="switch-with-icon-disabled-2"
+    aria-label="switch is off"
+    disabled
+  />
+  <span class="pf-v5-c-switch__toggle">
+    <span class="pf-v5-c-switch__toggle-icon">
+      <i class="fas fa-check" aria-hidden="true"></i>
+    </span>
+  </span>
+</label>
+
 ```
 
 ## Documentation

package/package.json

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

package/patternfly-base-no-globals-theme-dark-unversioned.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 :where(:root) {
   --pf-v5-global--palette--black-100: #fafafa;

package/patternfly-base-no-globals.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 :where(:root) {
   --pf-v5-global--palette--black-100: #fafafa;

package/patternfly-base-theme-dark-unversioned.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 :where(:root) {
   --pf-v5-global--palette--black-100: #fafafa;

package/patternfly-base.css

@@ -17,6 +17,9 @@
   --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--light);
   --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--dark-100);
 }
+.pf-v5-t-dark .pf-v5-c-button {
+  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--dark-100);
+}
 
 :where(:root) {
   --pf-v5-global--palette--black-100: #fafafa;