@patternfly/quickstarts 5.4.0-prerelease.4 → 6.0.0-alpha.2

package/src/styles/_dark-custom-override.scss

@@ -1,4 +1,4 @@
-.pf-v5-theme-dark {
+.pf-v6-theme-dark {
   .pfext-catalog-item-icon__img--large {
     // Not perfect, but gives a better result for colors than just inverting
     // by inverts to switch b/w, then rotates to get colors approximately back
@@ -7,56 +7,41 @@
 
   // duration color was gray on white but on the blue header, only white text works
   .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
-    color: var(--pf-v5-global--Color--light-100);
+    color: var(--pf-t--global--text--color--on-brand--default);
   }
 
   .pfext-quick-start-task-header__subtitle {
-    color: var(--pf-v5-global--palette--black-200) !important;
+    color: var(--pf-t--global--text--color--on-brand--default) !important;
   }
 
   .pfext-quick-start-task-header__task-icon-init {
-    background-color: var(--pf-v5-global--primary-color--300);
+    background-color: var(--pf-t--global--color--brand--default);
   }
 
   .pfext-quick-start-task-header__tryagain {
-    color: var(--pf-v5-global--palette--black-200) !important;
+    color: var(--pf-t--global--text--color--subtle) !important;
   }
 
   .pfext-markdown-view pre:not(.pfext-code-block__pre) {
-    background-color: var(--pf-v5-global--BackgroundColor--100);
-    border-color: var(--pf-v5-global--BorderColor--100);
+    background-color: var(--pf-t--global--background--color--primary--default);
+    border-color: var(--pf-t--global--border--color--default);
   }
 
-  .pfext-markdown-view .pf-v5-c-code-block__code {
-    color: var(--pf-v5-global--Color--100);
-    background-color: var(--pf-v5-global--palette--black-600);
+  .pfext-markdown-view .pf-v6-c-code-block__code {
+    color: var(--pf-t--global--text--color--regular);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 
-  .pfext-markdown-view .pf-v5-c-code-block,
-  .pfext-markdown-view .pf-v5-c-code-block code {
-    background-color: var(--pf-v5-global--BackgroundColor--400);
+  :where(.pfext-markdown-view) .pf-v6-c-clipboard-copy.pf-m-inline {
+    --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   }
 
-  :where(.pfext-markdown-view) .pf-v5-c-clipboard-copy.pf-m-inline {
-    --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  }
-
-  // Make the cards light on dark background. It would be better to use pf-v5-c-page__main-section variable but we aren't using a page section here.
+  // Make the cards light on dark background. It would be better to use pf-v6-c-page__main-section variable but we aren't using a page section here.
   .pfext-page-layout__content {
-    background-color: var(--pf-v5-global--BackgroundColor--200);
-  }
-
-  .pfext-quick-start-catalog__gallery-item .pf-v5-c-card {
-    --pf-v5-c-card--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+    background-color: var(--pf-t--global--background--color--secondary--default);
   }
 
-  // Alerts currently has the wrong background in the PF dark stylesheet. This can be removed once that is fixed.
-  .pf-v5-c-alert {
-    --pf-v5-c-alert--BackgroundColor: var(--pf-v5-global--palette--black-700);
-    --pf-v5-c-alert--m-inline--BackgroundColor: var(--pf-v5-global--palette--black-700);
-    --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--pf-v5-global--palette--black-700);
-    --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-v5-global--palette--black-700);
-    --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-v5-global--palette--black-700);
-    --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  .pfext-quick-start-catalog__gallery-item .pf-v6-c-card {
+    --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   }
 }

package/src/styles/legacy-bootstrap/_variables.scss

@@ -1,14 +1,14 @@
 // PF4 overrides
 $font-size-base: 14px;
-$font-size-h1: var(--pf-v5-global--FontSize--2xl);
-$font-size-h2: 20px; // must be literal value because of calculation in patternfly/dist/sass/patternfly/_list-view.scss
-$font-size-h3: var(--pf-v5-global--FontSize--lg);
-$font-size-h4: var(--pf-v5-global--FontSize--md);
-$font-size-h5: var(--pf-v5-global--FontSize--md);
-$font-size-h6: var(--pf-v5-global--FontSize--md);
+$font-size-h1: var(--pf-t--global--font--size--heading--h1);
+$font-size-h2: var(--pf-t--global--font--size--heading--h2);
+$font-size-h3: var(--pf-t--global--font--size--heading--h3);
+$font-size-h4: var(--pf-t--global--font--size--heading--h4);
+$font-size-h5: var(--pf-t--global--font--size--heading--h5);
+$font-size-h6: var(--pf-t--global--font--size--heading--h6);
 $grid-gutter-width: 30px;
-$headings-font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
-$headings-font-weight: var(--pf-v5-global--FontWeight--normal);
+$headings-font-family: var(--pf-t--global--font--family--heading);
+$headings-font-weight: var(--pf-t--global--font--weight--heading);
 
 // PF3 variables
 $color-pf-black:                 #030303 !default;

package/src/styles/patternfly-global.scss

@@ -5,16 +5,16 @@
 // TODO: Investigate if we can remove and/or nest these within patternfly-nested.css
 // what do we really need to expose globally?
 // here are the classes that exist outside the scope of .pfext-quick-start__base:
-// class="pf-v5-c-popover pfext-quick-start__base pf-m-right"
-// class="pf-v5-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
-// class="pf-v5-c-backdrop__open"
-// class="pf-v5-c-backdrop"
-// class="pf-v5-l-bullseye"
-// class="pf-v5-c-tooltip pf-m-top pfext-quick-start__base"
+// class="pf-v6-c-popover pfext-quick-start__base pf-m-right"
+// class="pf-v6-c-modal-box pfext-modal pfext-quick-start-drawer__modal pfext-quick-start__base pf-m-sm"
+// class="pf-v6-c-backdrop__open"
+// class="pf-v6-c-backdrop"
+// class="pf-v6-l-bullseye"
+// class="pf-v6-c-tooltip pf-m-top pfext-quick-start__base"
 
-@import '@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities';
 // gets added globally to :root
-@import '@patternfly/patternfly/base/variables';
+@import '@patternfly/patternfly/base/patternfly-variables';
 
 @import '@patternfly/patternfly/components/Drawer/drawer.scss';
 @import '@patternfly/patternfly/components/Popover/popover.scss';

package/src/styles/patternfly-nested.scss

@@ -2,16 +2,16 @@
 // which can happen when they're not using PatternFly, or a different (older) version
 // that could be incompatible with the version of PatternFly that we're using
 
-@import '@patternfly/patternfly/sass-utilities/all';
+@use '@patternfly/patternfly/sass-utilities';
 
 .pfext-quick-start__base {
-  $pf-v5-global--enable-reset: false;
-  @import '@patternfly/patternfly/base/common';
+  $pf-v6-global--enable-reset: false;
+  @import '@patternfly/patternfly/base/patternfly-common';
   @import '@patternfly/patternfly/utilities/Accessibility/accessibility';
 
   // it's okay that we include everything since we'll purge the unused styles
-  @import '@patternfly/patternfly/components/all';
-  @import '@patternfly/patternfly/layouts/all';
+  @import '@patternfly/patternfly/components';
+  @import '@patternfly/patternfly/layouts';
 
   // some apps globally set text-align: center
   text-align: left;

package/src/styles/style.scss

@@ -1,12 +1,12 @@
-@import '@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities';
 @import './legacy-bootstrap/variables';
 
-@import './base';
-@import './dark-custom-override';
+// @import './base';
+// @import './dark-custom-override';
 
-// React Components
-@import '../ConsoleInternal/**/*.scss';
-@import '../ConsoleShared/**/*.scss';
+// // React Components
+// @import '../ConsoleInternal/**/*.scss';
+// @import '../ConsoleShared/**/*.scss';
 
 // legacy bootstrap typography styles for markdown content
 @import './legacy-bootstrap.scss';

package/src/styles/vendor.scss

@@ -1,7 +1,7 @@
 // be careful about adding additional stylesheets here, they are bundled into the quickstarts.css
 
-@import '@patternfly/patternfly/sass-utilities/all';
+@import '@patternfly/patternfly/sass-utilities';
 
-@import '@patternfly/react-catalog-view-extension/dist/sass/react-catalog-view-extension.scss';
+// @import '@patternfly/react-catalog-view-extension/dist/sass/react-catalog-view-extension.scss';
 @import '@patternfly/patternfly/components/ClipboardCopy/clipboard-copy.scss';
 @import '@patternfly/patternfly/components/CodeBlock/code-block.scss';