@patternfly/patternfly 4.201.0 → 4.202.0

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

@@ -271,6 +271,9 @@
   --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);

package/components/Banner/banner.css

@@ -135,6 +135,9 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-banner .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-banner .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);

package/components/Card/card.css

@@ -326,7 +326,8 @@
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
-:where(.pf-theme-dark) .pf-c-card {
+:where(.pf-theme-dark) .pf-c-card,
+:where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
   --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);

package/components/Card/themes/dark/card.scss

@@ -1,7 +1,8 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
 @mixin pf-theme-dark-card() {
-  .pf-c-card {
+  .pf-c-card,
+  .pf-c-card.pf-m-non-selectable-raised {
     --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
 
     // Hoverable/selectable raised

package/components/LogViewer/log-viewer.css

@@ -209,6 +209,9 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .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);

package/components/Login/login.css

@@ -306,6 +306,10 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
 :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);

package/components/Masthead/masthead.css

@@ -167,13 +167,10 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+  .pf-c-masthead {
     --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 }
-.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
-  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-}
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -668,6 +665,9 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-masthead .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);

package/components/Masthead/masthead.scss

@@ -156,13 +156,9 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     @media screen and (min-width: $pf-global--breakpoint--md) {
       @include pf-c-masthead--m-display-inline;
     }
-
-    @media screen and (min-width: $pf-global--breakpoint--xl) {
-      --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-    }
   }
 
-  .pf-c-page:where(.pf-m-breakpoint-xl) & {
+  @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 

package/components/MenuToggle/menu-toggle.css

@@ -66,6 +66,8 @@
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle__controls--MarginLeft: auto;
+  --pf-c-menu-toggle__controls--MarginRight: 0;
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -106,10 +108,8 @@
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
   position: relative;
   display: inline-flex;
@@ -242,13 +242,18 @@
   --pf-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth);
   height: 100%;
 }
+.pf-c-menu-toggle.pf-m-typeahead {
+  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
+  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
+  align-items: stretch;
+  padding: 0;
+}
 .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
+  --pf-c-text-input-group__utilities--MarginRight: 0;
   flex: 1;
-  margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
 }
 .pf-c-menu-toggle.pf-m-split-button {
-  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
   padding: 0;
 }
 .pf-c-menu-toggle.pf-m-split-button > * {
@@ -352,14 +357,12 @@
 }
 
 .pf-c-menu-toggle__button {
+  --pf-c-menu-toggle__controls--PaddingLeft: 0;
+  --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
+  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
   color: inherit;
   border: 0;
 }
-.pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
-  padding-left: 0;
-  margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
-  margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
-}
 
 .pf-c-menu-toggle__icon {
   display: inline-flex;
@@ -384,7 +387,8 @@
 
 .pf-c-menu-toggle__controls {
   padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
-  margin-left: auto;
+  margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
+  margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
 }
 
 .pf-c-menu-toggle__toggle-icon {

package/components/MenuToggle/menu-toggle.scss

@@ -91,8 +91,10 @@
   // Count
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
 
-  // Controls
+  // Controls -- update element/vars to "control" in breaking change
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle__controls--MarginLeft: auto;
+  --pf-c-menu-toggle__controls--MarginRight: 0;
 
   // Toggle icon
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -151,10 +153,8 @@
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
 
   // Typeahead
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
 
   position: relative;
@@ -324,17 +324,21 @@
   }
 
   &.pf-m-typeahead {
+    --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
+    --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
+
+    align-items: stretch;
+    padding: 0;
+
     .pf-c-text-input-group {
       --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
+      --pf-c-text-input-group__utilities--MarginRight: 0;
 
       flex: 1;
-      margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
     }
   }
 
   &.pf-m-split-button {
-    --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
-
     padding: 0; // pass padding to children
 
     > * {
@@ -492,14 +496,12 @@
 }
 
 .pf-c-menu-toggle__button {
+  --pf-c-menu-toggle__controls--PaddingLeft: 0;
+  --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
+  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
+
   color: inherit;
   border: 0;
-
-  .pf-c-menu-toggle__controls {
-    padding-left: 0;
-    margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
-    margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
-  }
 }
 
 .pf-c-menu-toggle__icon {
@@ -524,7 +526,8 @@
 
 .pf-c-menu-toggle__controls {
   padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
-  margin-left: auto;
+  margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
+  margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
 }
 
 .pf-c-menu-toggle__toggle-icon {

package/components/Page/page.css

@@ -920,6 +920,11 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__header .pf-c-button {

package/components/Wizard/wizard.css

@@ -521,6 +521,9 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
 :where(.pf-theme-dark) .pf-c-wizard__header .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);

package/package.json

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