@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.71

package/components/Banner/banner.scss

@@ -1,15 +1,15 @@
 // @debug $banner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$banner} {
-  --#{$banner}--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$banner}--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$banner}--md--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$banner}--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$banner}--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$banner}--md--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$banner}--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$banner}--Color: var(--#{$pf-global}--Color--100);
-  --#{$banner}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-400);
+:root {
+  --#{$banner}--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$banner}--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$banner}--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$banner}--md--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
+  --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
 
   @media (min-width: $pf-v5-global--breakpoint--md) {
     --#{$banner}--PaddingRight: var(--#{$banner}--md--PaddingRight);
@@ -20,51 +20,124 @@
   --#{$banner}--link--Color: var(--#{$banner}--Color);
   --#{$banner}--link--TextDecoration: underline;
   --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
-  --#{$banner}--link--hover--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+  --#{$banner}--link--hover--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$banner}--link--disabled--Color: var(--#{$banner}--Color);
   --#{$banner}--link--disabled--TextDecoration: none;
 
   // modifier variables
-  --#{$banner}--m-blue--BackgroundColor: var(--#{$pf-global}--palette--blue-200);
-  --#{$banner}--m-red--BackgroundColor: var(--#{$pf-global}--danger-color--100);
-  --#{$banner}--m-green--BackgroundColor: var(--#{$pf-global}--success-color--100);
-  --#{$banner}--m-gold--BackgroundColor: var(--#{$pf-global}--warning-color--100);
   --#{$banner}--m-sticky--ZIndex: var(--#{$pf-global}--ZIndex--md);
-  --#{$banner}--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--md-bottom);
-
-  @include pf-v5-t-dark;
-  @include pf-v5-text-overflow;
+  --#{$banner}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
+
+  // status modifier variables
+  --#{$banner}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
+  --#{$banner}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
+  --#{$banner}--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
+  --#{$banner}--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
+  --#{$banner}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
+  --#{$banner}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
+  --#{$banner}--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
+  --#{$banner}--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
+  --#{$banner}--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
+  --#{$banner}--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
+
+  // nonstatus modifier variables
+  --#{$banner}--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
+  --#{$banner}--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
+  --#{$banner}--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
+  --#{$banner}--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
+  --#{$banner}--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
+  --#{$banner}--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
+  --#{$banner}--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
+  --#{$banner}--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
+  --#{$banner}--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
+  --#{$banner}--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
+  --#{$banner}--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
+  --#{$banner}--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
+  --#{$banner}--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
+  --#{$banner}--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
+  --#{$banner}--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
+  --#{$banner}--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
+}
 
+.#{$banner} {
   flex-shrink: 0;
-  padding: var(--#{$banner}--PaddingTop) var(--#{$banner}--PaddingRight) var(--#{$banner}--PaddingBottom) var(--#{$banner}--PaddingLeft);
+  padding-block-start: var(--#{$banner}--PaddingTop);
+  padding-block-end: var(--#{$banner}--PaddingBottom);
+  padding-inline-start: var(--#{$banner}--PaddingLeft);
+  padding-inline-end: var(--#{$banner}--PaddingRight);
   font-size: var(--#{$banner}--FontSize);
   color: var(--#{$banner}--Color);
   white-space: nowrap;
   background-color: var(--#{$banner}--BackgroundColor);
 
-  &.pf-m-blue {
-    @include pf-v5-t-light(false);
+  &.pf-m-danger {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-danger--Color);
+  }
 
-    --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
+  &.pf-m-success {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-success--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-success--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-warning--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-warning--Color);
+  }
+
+  &.pf-m-info {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-info--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-info--Color);
+  }
+
+  &.pf-m-custom {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-custom--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-custom--Color);
   }
 
   &.pf-m-red {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-red--Color);
+  }
+  
+  &.pf-m-orangered {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-orangered--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-orangered--Color);
+  }
+
+  &.pf-m-orange {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-orange--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-orange--Color);
+  }
+
+  &.pf-m-gold {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-gold--Color);
   }
 
   &.pf-m-green {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-green--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-green--Color);
   }
 
-  &.pf-m-gold {
-    @include pf-v5-t-light(false);
+  &.pf-m-cyan {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-cyan--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-cyan--Color);
+  }
 
-    --#{$banner}--BackgroundColor: var(--#{$banner}--m-gold--BackgroundColor);
+  &.pf-m-blue {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-blue--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-blue--Color);
+  }
+
+  &.pf-m-purple {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-purple--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-purple--Color);
   }
 
   &.pf-m-sticky {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--#{$banner}--m-sticky--ZIndex);
     box-shadow: var(--#{$banner}--m-sticky--BoxShadow);
   }
@@ -110,10 +183,3 @@
     }
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/banner";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-banner;
-}

package/components/Breadcrumb/breadcrumb.css

@@ -1,22 +1,25 @@
-.pf-v5-c-breadcrumb {
-  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
-  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
+:root, .pf-v5-c-breadcrumb {
+  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
-  --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
-  --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
+  --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+}
+
+.pf-v5-c-breadcrumb {
   display: inline-flex;
 }
 
@@ -36,15 +39,18 @@
   list-style: none;
 }
 .pf-v5-c-breadcrumb__item:not(:last-child) {
-  margin-right: var(--pf-v5-c-breadcrumb__item--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item--MarginRight);
 }
 
 .pf-v5-c-breadcrumb__item-divider {
-  margin-right: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__item-divider--MarginRight);
   font-size: var(--pf-v5-c-breadcrumb__item-divider--FontSize);
   line-height: 1;
   color: var(--pf-v5-c-breadcrumb__item-divider--Color);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-breadcrumb__item-divider {
+  scale: -1 1;
+}
 
 .pf-v5-c-breadcrumb__link {
   font-size: inherit;
@@ -71,7 +77,10 @@ button.pf-v5-c-breadcrumb__link {
 }
 
 .pf-v5-c-breadcrumb__dropdown {
-  margin: var(--pf-v5-c-breadcrumb__dropdown--MarginTop) var(--pf-v5-c-breadcrumb__dropdown--MarginRight) var(--pf-v5-c-breadcrumb__dropdown--MarginBottom) var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-block-start: var(--pf-v5-c-breadcrumb__dropdown--MarginTop);
+  margin-block-end: var(--pf-v5-c-breadcrumb__dropdown--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-breadcrumb__dropdown--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-breadcrumb__dropdown--MarginRight);
 }
 .pf-v5-c-breadcrumb__dropdown .pf-v5-c-dropdown__toggle {
   line-height: var(--pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight);

package/components/Breadcrumb/breadcrumb.scss

@@ -1,36 +1,38 @@
 // @debug $breadcrumb; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$breadcrumb} {
+:root, .#{$breadcrumb} {
   // Breadcrumb item
-  --#{$breadcrumb}__item--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$breadcrumb}__item--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$breadcrumb}__item--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$breadcrumb}__item--MarginRight: var(--pf-t--global--spacer--sm);
 
   // Breadcrumb divider
-  --#{$breadcrumb}__item-divider--Color: var(--#{$pf-global}--icon--Color--dark);
-  --#{$breadcrumb}__item-divider--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$breadcrumb}__item-divider--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$breadcrumb}__item-divider--Color: var(--pf-t--global--icon--color--regular);
+  --#{$breadcrumb}__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$breadcrumb}__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // Breadcrumb link
-  --#{$breadcrumb}__link--Color: var(--#{$pf-global}--link--Color);
-  --#{$breadcrumb}__link--TextDecoration: var(--#{$pf-global}--link--TextDecoration);
-  --#{$breadcrumb}__link--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$breadcrumb}__link--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
-  --#{$breadcrumb}__link--m-current--Color: var(--#{$pf-global}--Color--100);
+  --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
+  --#{$breadcrumb}__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$breadcrumb}__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --#{$breadcrumb}__link--BackgroundColor: transparent;
 
   // Heading
-  --#{$breadcrumb}__heading--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // breadcrumb dropdown
-  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: check with design as this replaces --#{$pf-global}--spacer--form-element (6px) with spacer--sm (8px)
   --#{$breadcrumb}__dropdown--MarginRight: calc(var(--#{$breadcrumb}__item--MarginRight) * -1);
-  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: same as above
   --#{$breadcrumb}__dropdown--MarginLeft: calc(var(--#{$breadcrumb}__item-divider--MarginRight) * -1);
 
   // breadcrumb toggle
-  --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+}
 
+.#{$breadcrumb} {
   display: inline-flex;
 }
 
@@ -52,13 +54,15 @@
   list-style: none;
 
   &:not(:last-child) {
-    margin-right: var(--#{$breadcrumb}__item--MarginRight);
+    margin-inline-end: var(--#{$breadcrumb}__item--MarginRight);
   }
 }
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
-  margin-right: var(--#{$breadcrumb}__item-divider--MarginRight);
+  @include pf-v5-mirror-inline-on-rtl;
+
+  margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);
   line-height: 1;
   color: var(--#{$breadcrumb}__item-divider--Color);
@@ -98,7 +102,10 @@
 }
 
 .#{$breadcrumb}__dropdown {
-  margin: var(--#{$breadcrumb}__dropdown--MarginTop) var(--#{$breadcrumb}__dropdown--MarginRight) var(--#{$breadcrumb}__dropdown--MarginBottom) var(--#{$breadcrumb}__dropdown--MarginLeft);
+  margin-block-start: var(--#{$breadcrumb}__dropdown--MarginTop);
+  margin-block-end: var(--#{$breadcrumb}__dropdown--MarginBottom);
+  margin-inline-start: var(--#{$breadcrumb}__dropdown--MarginLeft);
+  margin-inline-end: var(--#{$breadcrumb}__dropdown--MarginRight);
 
   .#{$dropdown}__toggle {
     line-height: var(--#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight);