@patternfly/react-styles 4.72.16 → 4.73.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.73.1 (2022-06-23)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+# 4.73.0 (2022-06-22)
+
+
+### Features
+
+* **Table:** add nested sticky header support ([#7595](https://github.com/patternfly/patternfly-react/issues/7595)) ([3888a0b](https://github.com/patternfly/patternfly-react/commit/3888a0bdf5e4e964d2d8d936c5d81f7813d8ec0c))
+
+
+
+
+
+## 4.72.17 (2022-06-22)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.72.16 (2022-06-22)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/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/css/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/css/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/css/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/css/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/css/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/css/components/Masthead/masthead.d.ts

@@ -14,7 +14,6 @@ declare const _default: {
     "light_200": "pf-m-light-200",
     "light": "pf-m-light",
     "resizeObserver": "pf-m-resize-observer",
-    "breakpointXl": "pf-m-breakpoint-xl",
     "fullHeight": "pf-m-full-height",
     "horizontal": "pf-m-horizontal",
     "displayStack": "pf-m-display-stack",

package/css/components/Masthead/masthead.js

@@ -16,7 +16,6 @@ exports.default = {
     "light_200": "pf-m-light-200",
     "light": "pf-m-light",
     "resizeObserver": "pf-m-resize-observer",
-    "breakpointXl": "pf-m-breakpoint-xl",
     "fullHeight": "pf-m-full-height",
     "horizontal": "pf-m-horizontal",
     "displayStack": "pf-m-display-stack",

package/css/components/Masthead/masthead.mjs

@@ -14,7 +14,6 @@ export default {
     "light_200": "pf-m-light-200",
     "light": "pf-m-light",
     "resizeObserver": "pf-m-resize-observer",
-    "breakpointXl": "pf-m-breakpoint-xl",
     "fullHeight": "pf-m-full-height",
     "horizontal": "pf-m-horizontal",
     "displayStack": "pf-m-display-stack",

package/css/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/css/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/css/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,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.72.16",
+  "version": "4.73.1",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.201.0",
+    "@patternfly/patternfly": "4.202.0",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "0804117dff5e8c51c02747b477ae0e0d532d6a36"
+  "gitHead": "3155699598a7362211658d7e88207c6c34a18c9c"
 }