@patternfly/quickstarts 2.1.0 → 2.2.2

package/dist/patternfly-nested.css

@@ -4589,6 +4589,205 @@
       @media screen and (min-width: 576px) {
         .pfext-quick-start__base .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
           --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight); } }
+  .pfext-quick-start__base .pf-c-options-menu {
+    --pf-c-options-menu__toggle--BackgroundColor: transparent;
+    --pf-c-options-menu__toggle--PaddingTop: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle--MinWidth: 0;
+    --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
+    --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
+    --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--200);
+    --pf-c-options-menu__toggle--BorderLeftColor: var(--pf-global--BorderColor--300);
+    --pf-c-options-menu__toggle--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+    --pf-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+    --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+    --pf-c-options-menu__toggle--m-plain--Color: var(--pf-global--Color--200);
+    --pf-c-options-menu__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
+    --pf-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
+    --pf-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
+    --pf-c-options-menu__toggle-button--BackgroundColor: transparent;
+    --pf-c-options-menu__toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle-button--PaddingRight: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
+    --pf-c-options-menu__toggle-button--PaddingLeft: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+    --pf-c-options-menu__menu--BoxShadow: var(--pf-global--BoxShadow--md);
+    --pf-c-options-menu__menu--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu--Top: calc(100% + var(--pf-global--spacer--xs));
+    --pf-c-options-menu__menu--ZIndex: var(--pf-global--ZIndex--sm);
+    --pf-c-options-menu--m-top__menu--Top: 0;
+    --pf-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+    --pf-c-options-menu__menu-item--BackgroundColor: transparent;
+    --pf-c-options-menu__menu-item--Color: var(--pf-global--Color--100);
+    --pf-c-options-menu__menu-item--FontSize: var(--pf-global--FontSize--md);
+    --pf-c-options-menu__menu-item--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu-item--PaddingRight: var(--pf-global--spacer--md);
+    --pf-c-options-menu__menu-item--PaddingBottom: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__menu-item--PaddingLeft: var(--pf-global--spacer--md);
+    --pf-c-options-menu__menu-item--disabled--Color: var(--pf-global--Color--dark-200);
+    --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
+    --pf-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
+    --pf-c-options-menu__menu-item-icon--Color: var(--pf-global--active-color--100);
+    --pf-c-options-menu__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm);
+    --pf-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-global--spacer--lg);
+    --pf-c-options-menu__group--group--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__group-title--PaddingTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu__group-title--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight);
+    --pf-c-options-menu__group-title--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom);
+    --pf-c-options-menu__group-title--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft);
+    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--sm);
+    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+    --pf-c-options-menu__group-title--Color: var(--pf-global--Color--dark-200);
+    --pf-c-options-menu--c-divider--MarginTop: var(--pf-global--spacer--sm);
+    --pf-c-options-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm);
+    position: relative;
+    display: inline-block;
+    max-width: 100%; }
+    .pfext-quick-start__base .pf-c-options-menu .pf-c-divider {
+      margin-top: var(--pf-c-options-menu--c-divider--MarginTop);
+      margin-bottom: var(--pf-c-options-menu--c-divider--MarginBottom); }
+      .pfext-quick-start__base .pf-c-options-menu .pf-c-divider:last-child {
+        --pf-c-options-menu--c-divider--MarginBottom: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain)::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: "";
+    border: var(--pf-c-options-menu__toggle--BorderWidth) solid;
+    border-color: var(--pf-c-options-menu__toggle--BorderTopColor) var(--pf-c-options-menu__toggle--BorderRightColor) var(--pf-c-options-menu__toggle--BorderBottomColor) var(--pf-c-options-menu__toggle--BorderLeftColor); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):hover::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:hover::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--hover--BorderBottomColor); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):active::before, .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:active::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button.pf-m-active::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--active--BorderBottomColor);
+    border-bottom-width: var(--pf-c-options-menu__toggle--active--BorderBottomWidth); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-plain):focus::before,
+  .pfext-quick-start__base .pf-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-c-options-menu__toggle-button:focus::before {
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--focus--BorderBottomColor);
+    border-bottom-width: var(--pf-c-options-menu__toggle--focus--BorderBottomWidth); }
+  .pfext-quick-start__base .pf-c-options-menu__toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: var(--pf-c-options-menu__toggle--MinWidth);
+    max-width: 100%;
+    padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+    line-height: var(--pf-c-options-menu__toggle--LineHeight);
+    color: var(--pf-c-options-menu__toggle--Color);
+    background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
+    border: none; }
+    .pfext-quick-start__base .pf-c-options-menu__toggle:not(.pf-m-text) {
+      padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
+      padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
+      padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom); }
+    .pf-c-options-menu.pf-m-expanded > .pfext-quick-start__base .pf-c-options-menu__toggle::before {
+      --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
+      border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth); }
+    .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain {
+      --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
+      --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
+      display: inline-block; }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
+        justify-content: center;
+        color: var(--pf-c-options-menu__toggle--m-plain--Color); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+        line-height: var(--pf-c-options-menu__toggle--LineHeight); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:hover, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:active, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:focus,
+      .pf-c-options-menu.pf-m-expanded > .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain {
+        --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-plain:disabled {
+        --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color); }
+    .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled {
+      pointer-events: none; }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled:not(.pf-m-plain), .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled.pf-m-text, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled:not(.pf-m-plain), .pfext-quick-start__base .pf-c-options-menu__toggle:disabled.pf-m-text {
+        --pf-c-options-menu__toggle--BackgroundColor: var(--pf-c-options-menu__toggle--disabled--BackgroundColor); }
+      .pfext-quick-start__base .pf-c-options-menu__toggle.pf-m-disabled::before, .pfext-quick-start__base .pf-c-options-menu__toggle:disabled::before {
+        border: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-button-icon {
+    position: relative; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-button {
+    padding: var(--pf-c-options-menu__toggle-button--PaddingTop) var(--pf-c-options-menu__toggle-button--PaddingRight) var(--pf-c-options-menu__toggle-button--PaddingBottom) var(--pf-c-options-menu__toggle-button--PaddingLeft);
+    background-color: var(--pf-c-options-menu__toggle-button--BackgroundColor);
+    border: 0; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+  .pfext-quick-start__base .pf-c-options-menu__toggle-icon {
+    margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight);
+    margin-left: var(--pf-c-options-menu__toggle-icon--MarginLeft); }
+    .pf-c-options-menu.pf-m-top.pf-m-expanded .pfext-quick-start__base .pf-c-options-menu__toggle-icon {
+      transform: rotate(var(--pf-c-options-menu--m-top--m-expanded__toggle-icon--Rotate)); }
+  .pfext-quick-start__base .pf-c-options-menu__menu {
+    position: absolute;
+    top: var(--pf-c-options-menu__menu--Top);
+    z-index: var(--pf-c-options-menu__menu--ZIndex);
+    min-width: 100%;
+    padding-top: var(--pf-c-options-menu__menu--PaddingTop);
+    padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom);
+    background-color: var(--pf-c-options-menu__menu--BackgroundColor);
+    background-clip: padding-box;
+    box-shadow: var(--pf-c-options-menu__menu--BoxShadow); }
+    .pfext-quick-start__base .pf-c-options-menu__menu.pf-m-align-right {
+      right: 0; }
+    .pf-c-options-menu.pf-m-top .pfext-quick-start__base .pf-c-options-menu__menu {
+      --pf-c-options-menu__menu--Top: var(--pf-c-options-menu--m-top__menu--Top);
+      transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY)); }
+  .pfext-quick-start__base .pf-c-options-menu__menu-item {
+    display: flex;
+    align-items: baseline;
+    width: 100%;
+    padding: var(--pf-c-options-menu__menu-item--PaddingTop) var(--pf-c-options-menu__menu-item--PaddingRight) var(--pf-c-options-menu__menu-item--PaddingBottom) var(--pf-c-options-menu__menu-item--PaddingLeft);
+    font-size: var(--pf-c-options-menu__menu-item--FontSize);
+    color: var(--pf-c-options-menu__menu-item--Color);
+    white-space: nowrap;
+    background-color: var(--pf-c-options-menu__menu-item--BackgroundColor);
+    border: none; }
+    .pfext-quick-start__base .pf-c-options-menu__menu-item:hover, .pfext-quick-start__base .pf-c-options-menu__menu-item:focus {
+      text-decoration: none;
+      background-color: var(--pf-c-options-menu__menu-item--hover--BackgroundColor); }
+    .pfext-quick-start__base .pf-c-options-menu__menu-item:disabled, .pfext-quick-start__base .pf-c-options-menu__menu-item.pf-m-disabled {
+      color: var(--pf-c-options-menu__menu-item--disabled--Color);
+      pointer-events: none;
+      background-color: var(--pf-c-options-menu__menu-item--disabled--BackgroundColor); }
+  .pfext-quick-start__base .pf-c-options-menu__menu-item-icon {
+    align-self: center;
+    width: auto;
+    padding-left: var(--pf-c-options-menu__menu-item-icon--PaddingLeft);
+    margin-left: auto;
+    font-size: var(--pf-c-options-menu__menu-item-icon--FontSize);
+    color: var(--pf-c-options-menu__menu-item-icon--Color); }
+  .pfext-quick-start__base .pf-c-options-menu__group + .pfext-quick-start__base .pf-c-options-menu__group {
+    padding-top: var(--pf-c-options-menu__group--group--PaddingTop); }
+  .pfext-quick-start__base .pf-c-options-menu__group-title {
+    padding-top: var(--pf-c-options-menu__group-title--PaddingTop);
+    padding-right: var(--pf-c-options-menu__group-title--PaddingRight);
+    padding-bottom: var(--pf-c-options-menu__group-title--PaddingBottom);
+    padding-left: var(--pf-c-options-menu__group-title--PaddingLeft);
+    font-size: var(--pf-c-options-menu__group-title--FontSize);
+    font-weight: var(--pf-c-options-menu__group-title--FontWeight);
+    color: var(--pf-c-options-menu__group-title--Color); }
   
   .pfext-quick-start__base .pf-c-page__main-wizard.pf-m-limit-width {
     display: flex;
@@ -4616,7 +4815,8 @@
     flex-direction: column; }
   
   .pfext-quick-start__base .pf-c-page__main-wizard:last-child,
-  .pfext-quick-start__base .pf-c-page__main-wizard:only-child {
+  .pfext-quick-start__base .pf-c-page__main-wizard:only-child,
+  .pfext-quick-start__base .pf-c-page__main-wizard.pf-m-fill {
     flex-grow: 1; }
   
   .pfext-quick-start__base .pf-c-page__main-wizard.pf-m-no-fill {
@@ -4715,6 +4915,9 @@
         --pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft); } }
     .pfext-quick-start__base .pf-c-pagination > *:not(:last-child):not(.pf-c-pagination__total-items) {
       margin-right: var(--pf-c-pagination--child--MarginRight); }
+    .pfext-quick-start__base .pf-c-pagination .pf-c-options-menu {
+      display: var(--pf-c-pagination--c-options-menu--Display);
+      visibility: var(--pf-c-pagination--c-options-menu--Visibility); }
     .pfext-quick-start__base .pf-c-pagination.pf-m-bottom {
       --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight);
       --pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight);
@@ -4731,6 +4934,10 @@
         --pf-c-pagination--m-bottom--BorderTopWidth: 0;
         position: relative;
         box-shadow: none; }
+      .pfext-quick-start__base .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+        position: absolute;
+        display: block;
+        visibility: visible; }
       @media screen and (min-width: 768px) {
         .pfext-quick-start__base .pf-c-pagination.pf-m-bottom {
           --pf-c-pagination--m-bottom--BorderTopWidth: 0;
@@ -4738,7 +4945,11 @@
           --pf-c-pagination--m-bottom--Bottom: auto;
           position: relative;
           justify-content: flex-end;
-          padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft); } }
+          padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft); }
+          .pfext-quick-start__base .pf-c-pagination.pf-m-bottom .pf-c-options-menu {
+            position: relative; } }
+    .pfext-quick-start__base .pf-c-pagination .pf-c-options-menu__toggle {
+      font-size: var(--pf-c-pagination--c-options-menu__toggle--FontSize); }
     .pfext-quick-start__base .pf-c-pagination.pf-m-compact {
       --pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-compact--child--MarginRight); }
   .pfext-quick-start__base .pf-c-popover {
@@ -7231,3 +7442,12 @@
     @media (min-width: 1450px) {
       .pfext-quick-start__base .pf-l-gallery {
         --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))))); } }
+  .pfext-quick-start__base .pf-l-stack {
+    --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
+    display: flex;
+    flex-direction: column;
+    height: 100%; }
+  .pfext-quick-start__base .pf-l-stack__item.pf-m-fill {
+    flex-grow: 1; }
+  .pfext-quick-start__base .pf-l-stack.pf-m-gutter > *:not(:last-child) {
+    margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom); }

package/dist/quickstarts-base.css

@@ -44,6 +44,50 @@
   .pfext-popover__base input[type='checkbox'] {
     margin-top: 1px !important; }
 
+.pf-theme-dark .pfext-catalog-item-icon__img--large {
+  filter: brightness(1.5) invert(1) hue-rotate(180deg) saturate(4); }
+
+.pf-theme-dark .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
+  color: var(--pf-global--Color--light-100); }
+
+.pf-theme-dark .pfext-quick-start-task-header__subtitle {
+  color: var(--pf-global--palette--black-200) !important; }
+
+.pf-theme-dark .pfext-quick-start-task-header__task-icon-init {
+  background-color: var(--pf-global--primary-color--300); }
+
+.pf-theme-dark .pfext-quick-start-task-header__tryagain {
+  color: var(--pf-global--palette--black-200) !important; }
+
+.pf-theme-dark .pfext-markdown-view pre {
+  background-color: var(--pf-global--BackgroundColor--100);
+  border-color: var(--pf-global--BorderColor--100); }
+
+.pf-theme-dark .pfext-markdown-view code {
+  color: var(--pf-global--Color--100);
+  background-color: var(--pf-global--palette--black-600); }
+
+.pf-theme-dark .pfext-markdown-view .pf-c-code-block,
+.pf-theme-dark .pfext-markdown-view .pf-c-code-block code {
+  background-color: var(--pf-global--BackgroundColor--400); }
+
+.pf-theme-dark :where(.pfext-markdown-view) .pf-c-clipboard-copy.pf-m-inline {
+  --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--400); }
+
+.pf-theme-dark .pfext-page-layout__content {
+  background-color: var(--pf-global--BackgroundColor--200); }
+
+.pf-theme-dark .pfext-quick-start-catalog__gallery-item .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100); }
+
+.pf-theme-dark .pf-c-alert {
+  --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-700); }
+
 .pfext-icon-and-text {
   align-items: baseline;
   display: flex; }
@@ -368,8 +412,6 @@
 .pfext-page-layout__content {
   padding: var(--pf-global--spacer--lg);
   flex: 1; }
-  .pfext-page-layout__content.pfext-is-dark {
-    background: var(--pf-global--palette--black-150); }
 
 .pfext-page-layout__header {
   padding-top: 1px;
@@ -678,10 +720,6 @@
     font-family: var(--pf-global--FontFamily--heading--sans-serif);
     font-weight: var(--pf-global--FontWeight--normal);
     line-height: 1.1; }
-  .pfext-quick-start-tile-prerequisites__icon {
-    color: var(--pf-global--info-color--100) !important; }
-    .pfext-quick-start-tile-prerequisites__icon:hover {
-      color: var(--pf-global--info-color--200) !important; }
   .pfext-quick-start-tile-prerequisites-list {
     padding-left: 20px; }
 
@@ -721,7 +759,7 @@
     font-size: 13px; }
 
 .pfext-quick-start-footer {
-  background-color: var(--pf-global--Color--light-100);
+  background-color: var(--pf-global--BackgroundColor--100);
   flex: 0 0 auto;
   padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg); }
   .pfext-quick-start-footer__actionbtn {
@@ -854,11 +892,11 @@
     font-size: var(--pf-global--FontSize--md);
     color: var(--pf-global--Color--300) !important; }
   .pfext-quick-start-task-header__title-success {
-    color: var(--pf-global--palette--green-500) !important; }
+    color: var(--pf-global--success-color--100) !important; }
   .pfext-quick-start-task-header__title-failed {
     color: var(--pf-global--danger-color--100) !important; }
   .pfext-quick-start-task-header__task-icon-init {
-    background-color: var(--pf-global--palette--blue-400);
+    background-color: var(--pf-global--primary-color--100);
     border-radius: var(--pf-global--BorderRadius--lg);
     color: var(--pf-global--Color--light-100);
     display: inline-flex;
@@ -868,7 +906,7 @@
   .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
     vertical-align: middle !important; }
   .pfext-quick-start-task-header__task-icon-success {
-    color: var(--pf-global--palette--green-500) !important; }
+    color: var(--pf-global--success-color--100) !important; }
   .pfext-quick-start-task-header__task-icon-failed {
     color: var(--pf-global--danger-color--100) !important; }
 
@@ -889,7 +927,7 @@
   .pfext-quick-start-task-review__radio {
     margin-right: var(--pf-global--spacer--xl) !important; }
   .pfext-quick-start-task-review--success {
-    color: var(--pf-global--palette--green-500); }
+    color: var(--pf-global--success-color--100) !important; }
   .pfext-quick-start-task-review--failed {
     color: var(--pf-chart-global--danger--Color--100); }