@patternfly/patternfly 4.197.0 → 4.198.1

package/package.json

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

package/patternfly-no-reset.css

@@ -8173,6 +8173,8 @@ button.pf-c-breadcrumb__link {
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
@@ -8399,10 +8401,58 @@ button.pf-c-breadcrumb__link {
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+.pf-c-card__sr-input:focus + .pf-c-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
+}
+
 .pf-m-overpass-font .pf-c-card .pf-c-card__title {
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
+:where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner {
+  --pf-global--Color--100: #e0e0e0;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button, :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, :where(.pf-theme-dark) .pf-c-masthead .pf-c-button, :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-button, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button, :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);
+  --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-card {
+  --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);
+  --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
+}
+
 .pf-c-check {
   --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
   --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -27034,12 +27084,14 @@ svg.pf-c-spinner.pf-m-xl {
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
+  z-index: var(--pf-global--ZIndex--xs);
+}
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
   top: 0;
-  z-index: var(--pf-global--ZIndex--xs);
   background: var(--pf-c-table--BackgroundColor);
 }
-.pf-c-table.pf-m-sticky-header > thead > tr > *::after {
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -27047,6 +27099,27 @@ svg.pf-c-spinner.pf-m-xl {
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-global--ZIndex--xs);
+  background: var(--pf-c-table--BackgroundColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
+  height: var(--pf-c-table--border-width--base);
+  background-color: var(--pf-c-table--BorderColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
+  border-bottom: 0;
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
 .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
 .pf-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -27144,13 +27217,6 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
 }
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
-  --pf-c-table--border-width--base: 0;
-}
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
-  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-}
 .pf-c-table thead .pf-c-table__subhead {
   --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
   color: var(--pf-c-table__subhead--Color);

package/patternfly.css

@@ -8300,6 +8300,8 @@ button.pf-c-breadcrumb__link {
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
@@ -8526,10 +8528,58 @@ button.pf-c-breadcrumb__link {
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+.pf-c-card__sr-input:focus + .pf-c-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
+}
+
 .pf-m-overpass-font .pf-c-card .pf-c-card__title {
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
+:where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
+:where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner {
+  --pf-global--Color--100: #e0e0e0;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button, :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, :where(.pf-theme-dark) .pf-c-masthead .pf-c-button, :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-button, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button, :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button, :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);
+  --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-card {
+  --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);
+  --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
+}
+
 .pf-c-check {
   --pf-c-check--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
   --pf-c-check__label--disabled--Color: var(--pf-global--disabled-color--100);
@@ -27161,12 +27211,14 @@ svg.pf-c-spinner.pf-m-xl {
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
+  z-index: var(--pf-global--ZIndex--xs);
+}
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
   top: 0;
-  z-index: var(--pf-global--ZIndex--xs);
   background: var(--pf-c-table--BackgroundColor);
 }
-.pf-c-table.pf-m-sticky-header > thead > tr > *::after {
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -27174,6 +27226,27 @@ svg.pf-c-spinner.pf-m-xl {
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-global--ZIndex--xs);
+  background: var(--pf-c-table--BackgroundColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
+  height: var(--pf-c-table--border-width--base);
+  background-color: var(--pf-c-table--BorderColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
+  border-bottom: 0;
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
 .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
 .pf-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -27271,13 +27344,6 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
 }
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
-  --pf-c-table--border-width--base: 0;
-}
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
-  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-}
 .pf-c-table thead .pf-c-table__subhead {
   --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
   color: var(--pf-c-table__subhead--Color);