@patternfly/patternfly 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/components/Hero/hero.css

@@ -0,0 +1,74 @@
+.pf-v6-c-hero {
+  --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --pf-v6-c-hero--gradient--angle: 109deg;
+  --pf-v6-c-hero--gradient--stop-1--light: transparent;
+  --pf-v6-c-hero--gradient--stop-2--light: transparent;
+  --pf-v6-c-hero--gradient--stop-3--light: transparent;
+  --pf-v6-c-hero--gradient--stop-1--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-2--dark: transparent;
+  --pf-v6-c-hero--gradient--stop-3--dark: transparent;
+  --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --pf-v6-c-hero--BackgroundImage--light: none;
+  --pf-v6-c-hero--BackgroundImage--dark: none;
+  --pf-v6-c-hero--BackgroundRepeat: no-repeat;
+  --pf-v6-c-hero--BackgroundPosition: right center;
+  --pf-v6-c-hero--BackgroundSize: contain;
+  --pf-v6-c-hero--BorderStyle: solid;
+  --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v6-c-hero--BorderStartStartRadius: 24px;
+  --pf-v6-c-hero--BorderStartEndRadius: 72px;
+  --pf-v6-c-hero--BorderEndEndRadius: 24px;
+  --pf-v6-c-hero--BorderEndStartRadius: 72px;
+  --pf-v6-c-hero__body--Width: 800px;
+  --pf-v6-c-hero__body--MaxWidth: 80%;
+}
+
+.pf-v6-c-hero {
+  display: flex;
+  padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
+  background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
+  background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
+  background-position: var(--pf-v6-c-hero--BackgroundPosition);
+  background-size: var(--pf-v6-c-hero--BackgroundSize);
+  border-color: var(--pf-v6-c-hero--BorderColor);
+  border-style: var(--pf-v6-c-hero--BorderStyle);
+  border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
+  border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
+  border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
+  border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
+}
+:root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
+  --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
+  --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
+  --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
+  --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
+}
+:root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
+  --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
+  box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
+}
+.pf-v6-c-hero:not(.pf-m-no-glass) {
+  background-color: var(--pf-v6-c-hero--BackgroundColor);
+  backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
+}
+
+.pf-v6-c-hero__body {
+  width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
+}

package/components/Hero/hero.scss

@@ -0,0 +1,86 @@
+@use '../../sass-utilities' as *;
+
+@include pf-root($hero) {
+  --#{$hero}--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
+  --#{$hero}--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$hero}--gradient--angle: 109deg;
+  --#{$hero}--gradient--stop-1--light: transparent;
+  --#{$hero}--gradient--stop-2--light: transparent;
+  --#{$hero}--gradient--stop-3--light: transparent;
+  --#{$hero}--gradient--stop-1--dark: transparent;
+  --#{$hero}--gradient--stop-2--dark: transparent;
+  --#{$hero}--gradient--stop-3--dark: transparent;
+  --#{$hero}--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --#{$hero}--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --#{$hero}--BackgroundImage--light: none;
+  --#{$hero}--BackgroundImage--dark: none;
+  --#{$hero}--BackgroundRepeat: no-repeat;
+  --#{$hero}--BackgroundPosition: right center;
+  --#{$hero}--BackgroundSize: contain;
+  --#{$hero}--BorderStyle: solid;
+  --#{$hero}--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$hero}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$hero}--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
+  --#{$hero}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$hero}--BorderStartStartRadius: 24px;
+  --#{$hero}--BorderStartEndRadius: 72px;
+  --#{$hero}--BorderEndEndRadius: 24px;
+  --#{$hero}--BorderEndStartRadius: 72px;
+  --#{$hero}__body--Width: 800px;
+  --#{$hero}__body--MaxWidth: 80%;
+}
+
+.#{$hero} {
+  display: flex;
+  padding-block-start: var(--#{$hero}--PaddingBlockStart);
+  padding-block-end: var(--#{$hero}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$hero}--PaddingInlineStart);
+  padding-inline-end: var(--#{$hero}--PaddingInlineEnd);
+  background-image: var(--#{$hero}--BackgroundImage, var(--#{$hero}--BackgroundImage--light)),
+    linear-gradient(
+      var(--#{$hero}--gradient--angle),
+      var(--#{$hero}--gradient--stop-1, var(--#{$hero}--gradient--stop-1--light)) 0%,
+      var(--#{$hero}--gradient--stop-2, var(--#{$hero}--gradient--stop-2--light)) 50%,
+      var(--#{$hero}--gradient--stop-3, var(--#{$hero}--gradient--stop-3--light)) 100%
+    );
+  background-repeat: var(--#{$hero}--BackgroundRepeat);
+  background-position: var(--#{$hero}--BackgroundPosition);
+  background-size: var(--#{$hero}--BackgroundSize);
+  border-color: var(--#{$hero}--BorderColor);
+  border-style: var(--#{$hero}--BorderStyle);
+  border-block-start-width: var(--#{$hero}--BorderBlockStartWidth);
+  border-block-end-width: var(--#{$hero}--BorderBlockEndWidth);
+  border-inline-start-width: var(--#{$hero}--BorderInlineStartWidth);
+  border-inline-end-width: var(--#{$hero}--BorderInlineEndWidth);
+  border-start-start-radius: var(--#{$hero}--BorderStartStartRadius);
+  border-start-end-radius: var(--#{$hero}--BorderStartEndRadius);
+  border-end-start-radius: var(--#{$hero}--BorderEndStartRadius);
+  border-end-end-radius: var(--#{$hero}--BorderEndEndRadius);
+
+  :root:where(.#{$pf-prefix}theme-dark) & {
+    --#{$hero}--BackgroundImage: var(--#{$hero}--BackgroundImage--dark);
+    --#{$hero}--gradient--stop-1: var(--#{$hero}--gradient--stop-1--dark);
+    --#{$hero}--gradient--stop-2: var(--#{$hero}--gradient--stop-2--dark);
+    --#{$hero}--gradient--stop-3: var(--#{$hero}--gradient--stop-3--dark);
+  }
+
+  :root:where(.#{$pf-prefix}theme-glass) & {
+    --#{$hero}--BorderColor: var(--#{$hero}--m-glass--BorderColor);
+  
+    box-shadow: var(--#{$hero}--m-glass--BoxShadow);
+  }
+
+  &:not(.pf-m-no-glass) {
+    background-color: var(--#{$hero}--BackgroundColor);
+    backdrop-filter: var(--#{$hero}--BackdropFilter);
+  }
+}
+
+.#{$hero}__body {
+  width: min(var(--#{$hero}__body--Width), var(--#{$hero}__body--MaxWidth));
+}

package/components/MenuToggle/menu-toggle.css

@@ -123,6 +123,7 @@
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -251,6 +252,9 @@
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
 }
+.pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
+  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
+}
 .pf-v6-c-menu-toggle.pf-m-plain::before {
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);

package/components/MenuToggle/menu-toggle.scss

@@ -151,6 +151,7 @@
   --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent;
   --#{$menu-toggle}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$menu-toggle}--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
 
   // Typeahead
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
@@ -307,6 +308,10 @@
     --#{$menu-toggle}--m-small--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineStart);
     --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--m-small--PaddingInlineEnd);
 
+    &.pf-m-circle {
+      --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-plain--m-circle--BorderRadius);
+    }
+
     &::before {
       --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--m-plain--BorderWidth);
       --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor);

package/components/Table/table.css

@@ -207,6 +207,9 @@
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
 }
+.pf-v6-c-table.pf-m-plain {
+  --pf-v6-c-table--BackgroundColor: transparent;
+}
 .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
 .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),

package/components/Table/table.scss

@@ -324,6 +324,11 @@
     }
   }
 
+  // - Table plain
+  &.pf-m-plain {
+    --#{$table}--BackgroundColor: transparent;
+  }
+
   // - Table striped
   // stylelint-disable
   &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table

package/components/Tabs/tabs.css

@@ -166,6 +166,9 @@
   --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
   --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -443,6 +446,18 @@
 .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
   overflow: visible;
 }
+.pf-v6-c-tabs.pf-m-nav {
+  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
+  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
+  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
+}
+.pf-v6-c-tabs.pf-m-nav::before,
+.pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
+  border: 0;
+}
+.pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
+  --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
+}
 
 .pf-v6-c-tabs__toggle {
   display: var(--pf-v6-c-tabs__toggle--Display);
@@ -492,7 +507,7 @@
 }
 .pf-v6-c-tabs__item.pf-m-current {
   --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
-  --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
+  --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
   --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
   --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
 }

package/components/Tabs/tabs.scss

@@ -205,6 +205,11 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   --#{$tabs}__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$tabs}__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
+  // Nav variant
+  --#{$tabs}--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$tabs}--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$tabs}--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
+
   // Overflow menu toggle icon
   --#{$tabs}__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$tabs}__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -511,6 +516,21 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
       overflow: visible;
     }
   }
+
+  &.pf-m-nav {
+    --#{$tabs}__link--disabled--BackgroundColor: transparent;
+    --#{$tabs}__link--disabled--Color: var(--#{$tabs}--m-nav__link--disabled--Color);
+    --#{$tabs}__link--BorderRadius: var(--#{$tabs}--m-nav__link--BorderRadius);
+  
+    &::before,
+    .#{$tabs}__link::before {
+      border: 0;
+    }
+
+    &.pf-m-subtab .#{$tabs}__scroll-button .#{$button} {
+      --#{$button}--FontSize: var(--#{$tabs}--m-nav--m-subtab__scroll-button--button--FontSize);
+    }
+  }
 }
 
 // Expandable toggle
@@ -563,7 +583,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   // Current
   &.pf-m-current {
     --#{$tabs}__link--Color: var(--#{$tabs}__item--m-current__link--Color);
-    --#{$tabs}__link--after--BorderColor: var(--#{$tabs}__item--m-current__link--after--BorderColor);
+    --#{$tabs}__link--after--BorderColor: var(--#{$tabs}--link-accent--color);
     --#{$tabs}__link--after--BorderWidth: var(--#{$tabs}__item--m-current__link--after--BorderWidth);
     --#{$tabs}__item--BackgroundColor: var(--#{$tabs}__item--m-current--BackgroundColor);
   }