@patternfly/patternfly 6.0.0-alpha.2 → 6.0.0-alpha.21

package/utilities/Spacing/spacing.scss

@@ -19,26 +19,22 @@
 
             // If margin x property, set left and right margins
             @if $property == "mx" {
-              margin-right: #{$spacer-value};
-              margin-left: #{$spacer-value};
+              margin-inline: #{$spacer-value};
             }
 
             // If padding x property, set left and right padding
             @else if $property == "my" {
-              margin-top: #{$spacer-value};
-              margin-bottom: #{$spacer-value};
+              margin-block: #{$spacer-value};
             }
 
             // If margin y property, set top and bottom margins
             @else if $property == "px" {
-              padding-right: #{$spacer-value};
-              padding-left: #{$spacer-value};
+              padding-inline: #{$spacer-value};
             }
 
             // If padding y property, set top and bottom padding
             @else if $property == "py" {
-              padding-top: #{$spacer-value};
-              padding-bottom: #{$spacer-value};
+              padding-block: #{$spacer-value};
             }
 
             @else {

package/components/AboutModalBox/themes/dark/about-modal-box.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-about-modal-box() {
-  .#{$about-modal-box} {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/Alert/themes/dark/alert.scss

@@ -1,17 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-alert() {
-  .#{$alert} {
-    --#{$alert}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-custom__title--Color: var(--#{$pf-global}--custom-color--200);
-    --#{$alert}--m-success__title--Color: var(--#{$pf-global}--success-color--100);
-    --#{$alert}--m-danger__title--Color: var(--#{$pf-global}--danger-color--100);
-    --#{$alert}--m-warning__title--Color: var(--#{$pf-global}--warning-color--100);
-    --#{$alert}--m-info__title--Color: var(--#{$pf-global}--info-color--100);
-    --#{$alert}--m-inline--m-custom--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-success--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-danger--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-warning--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$alert}--m-inline--m-info--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/Badge/themes/dark/badge.scss

@@ -1,9 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-badge() {
-  .#{$badge} {
-    --#{$badge}--m-read--BackgroundColor: var(--#{$pf-global}--palette--black-500);
-    --#{$badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$badge}--m-unread--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-  }
-}

package/components/Hint/themes/dark/hint.scss

@@ -1,8 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-hint() {
-  .#{$hint} {
-    --#{$hint}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$hint}--BorderColor: var(--#{$pf-global}--BorderColor--300);
-  }
-}

package/components/Login/themes/dark/login.scss

@@ -1,12 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-login() {
-  .#{$login} {
-    --#{$login}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-
-  .#{$login}__header,
-  .#{$login}__footer {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/Masthead/themes/dark/masthead.scss

@@ -1,14 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-masthead() {
-  .#{$masthead} {
-    --#{$masthead}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-    --#{$masthead}--item-border-color--base: var(--#{$pf-global}--BorderColor--100);
-
-    .#{$toolbar} {
-      --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-    }
-
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/components/ModalBox/themes/dark/modal-box.scss

@@ -1,7 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-modal-box() {
-  .#{$modal-box} {
-    --#{$modal-box}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-  }
-}

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -1,10 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-notification-badge() {
-  .#{$notification-badge} {
-    --#{$notification-badge}--m-read--m-expanded--after--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
-    --#{$notification-badge}--m-unread--Color: var(--#{$pf-global}--primary-color--400);
-    --#{$notification-badge}--m-unread--after--BackgroundColor: var(--#{$pf-global}--primary-color--300);
-    --#{$notification-badge}--m-attention--Color: var(--#{$pf-global}--palette--black-900);
-  }
-}

package/components/Page/themes/dark/page.scss

@@ -1,69 +0,0 @@
-@import "../../../../sass-utilities/themes/dark/all";
-
-@mixin pf-v5-theme-dark-page() {
-  &:root {
-    --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-    --#{$page}__header-tools--c-button--m-selected--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-    --#{$page}__header--BackgroundColor: var(--#{$pf-global}--palette--black-1000);
-  }
-
-  .#{$page}__header-tools-item {
-    &.pf-m-selected {
-      .#{$button} {
-        color: var(--#{$pf-global}--Color--100);
-
-        // stylelint-disable
-        .#{$notification-badge} {
-          &:hover {
-            &::before {
-              background-color: var(--#{$page}__header-tools--c-button--m-selected--before--BackgroundColor);
-            }
-          }
-        }
-        // stylelint-enable
-      }
-    }
-  }
-
-  .#{$page}__sidebar {
-    border-right: var(--#{$pf-global}--BorderWidth--sm) solid var(--#{$pf-global}--BorderColor--100);
-  }
-
-  .#{$page}__main-nav {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-breadcrumb {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-group {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-section--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-      --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__main-section {
-    &.pf-m-sticky-top,
-    &.pf-m-sticky-bottom {
-      --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--300);
-    }
-  }
-
-  .#{$page}__sidebar-body.pf-m-menu .#{$context-selector},
-  .#{$page}__main-section[class*="pf-m-dark-"],
-  .#{$page}__header {
-    @include pf-v5-theme-dark--t-dark;
-  }
-}

package/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -1,3 +0,0 @@
-.ws-core-c-notification-badge {
-  background: var(--pf-v5-global--BackgroundColor--dark-100);
-}