@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/components/Label/label.scss

@@ -4,6 +4,7 @@
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--MaxWidth: 100%;
   --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-label--Color: var(--pf-global--Color--100);
@@ -92,11 +93,11 @@
 
   // Cyan
   --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--palette--cyan-50);
-  --pf-c-label--m-cyan__icon--Color: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--300);
+  --pf-c-label--m-cyan__icon--Color: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--300);
   --pf-c-label--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
-  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--default-color--200);
-  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--default-color--200);
+  --pf-c-label--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--custom-color--200);
+  --pf-c-label--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--custom-color--200);
   --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--palette--cyan-400);
   --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
@@ -134,27 +135,30 @@
 
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
+  --pf-c-label__content--BackgroundColor: transparent;
   --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-editable__content--MaxWidth: 16ch;
 
-  // text
-  --pf-c-label__text--MaxWidth: 16ch;
+  // Text
+  --pf-c-label__text--MaxWidth: 100%;
 
   // Icon
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
 
-  // Close button
-  --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  // Actions
+  --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
+
+  // Actions button (close)
+  --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
+  --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
+  --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
   // Editable
   --pf-c-label--m-editable--Cursor: pointer;
@@ -180,6 +184,7 @@
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
 
   position: relative;
+  max-width: var(--pf-c-label--MaxWidth);
   padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
   font-size: var(--pf-c-label--FontSize);
   color: var(--pf-c-label--Color);
@@ -340,13 +345,6 @@
   }
 
   &.pf-m-editable {
-    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
-    cursor: var(--pf-c-label--m-editable--Cursor);
-    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
-    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
-    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
-    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
-
     --pf-c-label__content--MaxWidth: var(--pf-c-label--m-editable__content--MaxWidth);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
     --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable__content--before--BorderColor);
@@ -359,6 +357,13 @@
     --pf-c-label--m-outline__content--link--hover--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
     --pf-c-label--m-outline__content--link--focus--before--BorderWidth: var(--pf-c-label--m-editable__content--before--BorderWidth);
 
+    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+    cursor: var(--pf-c-label--m-editable--Cursor);
+
     &:hover {
       --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
     }
@@ -374,19 +379,6 @@
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   }
 
-  .pf-c-button {
-    --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
-    --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
-    --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
-    --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
-    --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
-
-    margin-top: var(--pf-c-label__c-button--MarginTop);
-    margin-right: var(--pf-c-label__c-button--MarginRight);
-    margin-bottom: var(--pf-c-label__c-button--MarginBottom);
-    margin-left: var(--pf-c-label__c-button--MarginLeft);
-  }
-
   &.pf-m-overflow,
   &.pf-m-add {
     --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
@@ -413,10 +405,10 @@
 }
 
 .pf-c-label__content {
-  @include pf-text-overflow;
-
   max-width: var(--pf-c-label__content--MaxWidth);
+  overflow: hidden;
   color: var(--pf-c-label__content--Color);
+  background-color: var(--pf-c-label__content--BackgroundColor);
   border-width: 0;
 
   &::before {
@@ -431,11 +423,18 @@
     border-radius: var(--pf-c-label--BorderRadius);
   }
 
+  // truncate input fields
+  @at-root input#{&} {
+    @include pf-text-overflow;
+  }
+
   // the content element can be used as a link
   @at-root {
     a#{&},
     button#{&} {
+      padding: 0;
       cursor: pointer;
+      background-color: transparent;
       border: none;
 
       &,
@@ -462,6 +461,22 @@
   color: var(--pf-c-label__icon--Color);
 }
 
+.pf-c-label__actions {
+  margin-right: var(--pf-c-label__actions--MarginRight);
+  font-size: var(--pf-c-label__actions--FontSize);
+
+  .pf-c-button {
+    --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
+    --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
+    --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
+    --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
+    --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
+
+    margin-top: var(--pf-c-label__actions--c-button--MarginTop);
+    margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
+  }
+}
+
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/label";
 

package/components/Label/themes/dark/label.scss

@@ -38,8 +38,8 @@
     --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
     --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
-    --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
-    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
+    --pf-c-label--m-cyan__content--Color: var(--pf-global--custom-color--200);
+    --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--custom-color--200);
     --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
     --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);

package/components/LabelGroup/label-group.css

@@ -1,6 +1,16 @@
 .pf-c-label-group {
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group--ColumnGap: 0;
+  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -10,26 +20,22 @@
   --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-label-group__label--MaxWidth: 18ch;
   --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
   --pf-c-label-group__textarea--MinWidth: 12.5rem;
   --pf-c-label-group__textarea--PaddingTop: 0.125rem;
   --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-label-group__textarea--PaddingBottom: 0;
   --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
   display: inline-flex;
+  row-gap: var(--pf-c-label-group--RowGap);
+  column-gap: var(--pf-c-label-group--ColumnGap);
   align-items: center;
 }
 .pf-c-label-group.pf-m-category {
@@ -42,11 +48,12 @@
   border-radius: var(--pf-c-label-group--m-category--BorderRadius);
 }
 .pf-c-label-group.pf-m-vertical {
-  --pf-c-label-group__list--MarginRight: 0;
-  --pf-c-label-group__list--MarginBottom: 0;
-  --pf-c-label-group__list-item--MarginRight: 0;
-  --pf-c-label-group__label--MarginRight: 0;
-  --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+  --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
+  --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
+  --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
+  --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
+  --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
+  --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
   --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
   --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
   --pf-c-label-group__close--MarginBottom: 0;
@@ -63,9 +70,6 @@
 .pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
   flex-direction: column;
 }
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
-  --pf-c-label-group__list-item--MarginBottom: 0;
-}
 .pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
   --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
   --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -86,20 +90,20 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
+  row-gap: var(--pf-c-label-group__main--RowGap);
+  column-gap: var(--pf-c-label-group__main--ColumnGap);
   align-items: baseline;
 }
 
 .pf-c-label-group__list {
   display: inline-flex;
   flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+  row-gap: var(--pf-c-label-group__list--RowGap);
+  column-gap: var(--pf-c-label-group__list--ColumnGap);
 }
 
 .pf-c-label-group__list-item {
   display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
 }
 
 .pf-c-label-group__label {
@@ -107,12 +111,12 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
   font-size: var(--pf-c-label-group__label--FontSize);
 }
 
 .pf-c-label-group__close {
+  display: flex;
+  align-self: start;
   margin-top: var(--pf-c-label-group__close--MarginTop);
   margin-right: var(--pf-c-label-group__close--MarginRight);
   margin-bottom: var(--pf-c-label-group__close--MarginBottom);

package/components/LabelGroup/label-group.scss

@@ -1,7 +1,21 @@
 .pf-c-label-group {
-  // List
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  // Label group - spaces main with the close button
+  --pf-c-label-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group--ColumnGap: 0;
+  --pf-c-label-group-m-vertical--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Main - spaces the category label with the list
+  --pf-c-label-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-label-group-m-vertical__main--ColumnGap: var(--pf-global--spacer--xs);
+
+  // List - spaces the items
+  --pf-c-label-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list--ColumnGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-label-group-m-vertical__list--ColumnGap: var(--pf-global--spacer--xs);
 
   // Category
   --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
@@ -15,9 +29,6 @@
   --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Label
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
   --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-label-group__label--MaxWidth: 18ch;
 
@@ -26,14 +37,9 @@
   --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
-  // List item
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
-
   // Textarea
   --pf-c-label-group__textarea--MinWidth: #{pf-size-prem(200px)};
   --pf-c-label-group__textarea--PaddingTop: #{pf-size-prem(2px)};
@@ -42,6 +48,8 @@
   --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
 
   display: inline-flex;
+  row-gap: var(--pf-c-label-group--RowGap);
+  column-gap: var(--pf-c-label-group--ColumnGap);
   align-items: center;
 
   &.pf-m-category {
@@ -55,11 +63,12 @@
   }
 
   &.pf-m-vertical {
-    --pf-c-label-group__list--MarginRight: 0;
-    --pf-c-label-group__list--MarginBottom: 0;
-    --pf-c-label-group__list-item--MarginRight: 0;
-    --pf-c-label-group__label--MarginRight: 0;
-    --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+    --pf-c-label-group--RowGap: var(--pf-c-label-group-m-vertical--RowGap);
+    --pf-c-label-group--ColumnGap: var(--pf-c-label-group-m-vertical--ColumnGap);
+    --pf-c-label-group__main--RowGap: var(--pf-c-label-group-m-vertical__main--RowGap);
+    --pf-c-label-group__main--ColumnGap: var(--pf-c-label-group-m-vertical__main--ColumnGap);
+    --pf-c-label-group__list--RowGap: var(--pf-c-label-group-m-vertical__list--RowGap);
+    --pf-c-label-group__list--ColumnGap: var(--pf-c-label-group-m-vertical__list--ColumnGap);
     --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
     --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
     --pf-c-label-group__close--MarginBottom: 0;
@@ -79,10 +88,6 @@
       flex-direction: column;
     }
 
-    .pf-c-label-group__list-item:last-child {
-      --pf-c-label-group__list-item--MarginBottom: 0;
-    }
-
     .pf-c-label-group__close .pf-c-button {
       --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
       --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
@@ -109,32 +114,32 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
+  row-gap: var(--pf-c-label-group__main--RowGap);
+  column-gap: var(--pf-c-label-group__main--ColumnGap);
   align-items: baseline;
 }
 
 .pf-c-label-group__list {
   display: inline-flex;
   flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+  row-gap: var(--pf-c-label-group__list--RowGap);
+  column-gap: var(--pf-c-label-group__list--ColumnGap);
 }
 
 .pf-c-label-group__list-item {
   display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
 }
 
 .pf-c-label-group__label {
   @include pf-text-overflow;
 
   max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
   font-size: var(--pf-c-label-group__label--FontSize);
 }
 
 .pf-c-label-group__close {
+  display: flex;
+  align-self: start;
   margin-top: var(--pf-c-label-group__close--MarginTop);
   margin-right: var(--pf-c-label-group__close--MarginRight);
   margin-bottom: var(--pf-c-label-group__close--MarginBottom);

package/components/LogViewer/log-viewer.css

@@ -7,27 +7,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 .pf-c-log-viewer {
   --pf-c-log-viewer--Height: 100%;
@@ -216,23 +195,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
 :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
   color: var(--pf-global--Color--100);

package/components/Login/login.css

@@ -7,32 +7,10 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-login__footer .pf-c-card, .pf-c-login__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-login__footer .pf-c-button, .pf-c-login__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 .pf-c-login {
   --pf-c-login--PaddingTop: var(--pf-global--spacer--lg);
   --pf-c-login--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-login--xl--BackgroundImage: none;
   --pf-c-login__container--xl--GridColumnGap: var(--pf-global--spacer--3xl);
   --pf-c-login__container--MaxWidth: 31.25rem;
   --pf-c-login__container--xl--MaxWidth: none;
@@ -46,8 +24,9 @@
   --pf-c-login__header--xl--MarginTop: var(--pf-global--spacer--3xl);
   --pf-c-login__header--c-brand--MarginBottom: var(--pf-global--spacer--lg);
   --pf-c-login__header--c-brand--xl--MarginBottom: var(--pf-global--spacer--2xl);
-  --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-login__main--MarginBottom: var(--pf-global--spacer--lg);
+  --pf-c-login__main--BoxShadow: var(--pf-global--BoxShadow--xl);
   --pf-c-login__main-header--PaddingTop: var(--pf-global--spacer--2xl);
   --pf-c-login__main-header--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-login__main-header--PaddingBottom: var(--pf-global--spacer--md);
@@ -81,7 +60,8 @@
   --pf-c-login__main-footer-band--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-login__main-footer-band--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-login__main-footer-band--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-login__main-footer-band--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-login__main-footer-band--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-login__main-footer-band--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-login__main-footer-band-item--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--md);
@@ -139,11 +119,6 @@
     --pf-c-login__footer--c-list--PaddingTop: var(--pf-c-login__footer--c-list--xl--PaddingTop);
   }
 }
-@media (min-width: 1200px) {
-  .pf-c-login {
-    background-image: var(--pf-c-login--xl--BackgroundImage);
-  }
-}
 @media (min-width: 576px) {
   .pf-c-login {
     align-items: center;
@@ -157,10 +132,10 @@
 @media (min-width: 1200px) {
   .pf-c-login__container {
     display: grid;
-    justify-content: center;
-    grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
-    grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
     grid-template-areas: "main header" "main footer" "main .";
+    grid-template-columns: var(--pf-c-login__container--xl--GridTemplateColumns);
+    grid-column-gap: var(--pf-c-login__container--xl--GridColumnGap);
+    justify-content: center;
     padding-right: var(--pf-c-login__container--PaddingRight);
     padding-left: var(--pf-c-login__container--PaddingLeft);
   }
@@ -182,10 +157,11 @@
 }
 
 .pf-c-login__main {
+  grid-area: main;
   align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
-  grid-area: main;
+  box-shadow: var(--pf-c-login__main--BoxShadow);
 }
 .pf-c-login__main > :first-child:not(.pf-c-login__main-header) {
   padding-top: var(--pf-c-login__main-header--PaddingTop);
@@ -197,8 +173,8 @@
 .pf-c-login__main-header {
   display: grid;
   grid-template-columns: 100%;
-  column-gap: var(--pf-c-login__main-header--ColumnGap);
   row-gap: var(--pf-c-login__main-header--RowGap);
+  column-gap: var(--pf-c-login__main-header--ColumnGap);
   align-items: center;
   padding: var(--pf-c-login__main-header--PaddingTop) var(--pf-c-login__main-header--PaddingRight) var(--pf-c-login__main-header--PaddingBottom) var(--pf-c-login__main-header--PaddingLeft);
 }
@@ -210,26 +186,26 @@
 
 .pf-c-login__main-header-utilities,
 .pf-c-login__main-header .pf-c-dropdown {
-  grid-column: auto;
   grid-row: auto;
+  grid-column: auto;
 }
 @media (min-width: 768px) {
   .pf-c-login__main-header-utilities,
-.pf-c-login__main-header .pf-c-dropdown {
-    grid-column: 2/3;
+  .pf-c-login__main-header .pf-c-dropdown {
     grid-row: 1;
+    grid-column: 2/3;
   }
 }
 
 .pf-c-login__main-header-utilities .pf-c-dropdown {
-  grid-column: auto;
   grid-row: auto;
+  grid-column: auto;
 }
 
 .pf-c-login__main-header-desc {
+  grid-column: 1/-1;
   margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
   font-size: var(--pf-c-login__main-header-desc--FontSize);
-  grid-column: 1/-1;
 }
 
 .pf-c-login__main-body {
@@ -264,11 +240,11 @@
 }
 
 .pf-c-login__main-footer-links-item-link svg {
-  fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
   width: 100%;
   max-width: var(--pf-c-login__main-footer-links-item-link-svg--Width);
   height: 100%;
   max-height: var(--pf-c-login__main-footer-links-item-link-svg--Height);
+  fill: var(--pf-c-login__main-footer-links-item-link-svg--Fill);
 }
 .pf-c-login__main-footer-links-item-link:hover svg {
   fill: var(--pf-c-login__main-footer-links-item-link-svg--hover--Fill);
@@ -277,7 +253,7 @@
 .pf-c-login__main-footer-band {
   padding: var(--pf-c-login__main-footer-band--PaddingTop) var(--pf-c-login__main-footer-band--PaddingRight) var(--pf-c-login__main-footer-band--PaddingBottom) var(--pf-c-login__main-footer-band--PaddingLeft);
   text-align: center;
-  background-color: var(--pf-c-login__main-footer-band--BackgroundColor);
+  border-top: var(--pf-c-login__main-footer-band--BorderTopWidth) solid var(--pf-c-login__main-footer-band--BorderTopColor);
 }
 .pf-c-login__main-footer-band > * + * {
   padding-top: var(--pf-c-login__main-footer-band-item--PaddingTop);
@@ -306,26 +282,10 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
-:where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
-:where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
+:where(.pf-theme-dark) .pf-c-login {
+  --pf-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--300);
+}
 :where(.pf-theme-dark) .pf-c-login__header,
 :where(.pf-theme-dark) .pf-c-login__footer {
   color: var(--pf-global--Color--100);