@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/CodeEditor/code-editor.scss

@@ -1,54 +1,76 @@
 // @debug $code-editor; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$code-editor} {
+:where(:root), :where(.#{$code-editor}) {
   // controls
-  --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$pf-global}--Color--200);
-  --#{$code-editor}__controls--c-button--m-control--hover--Color: var(--#{$pf-global}--Color--100);
-  --#{$code-editor}__controls--c-button--m-control--focus--Color: var(--#{$pf-global}--Color--100);
-  --#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-
-  // Header
-  --#{$code-editor}__header--before--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-editor}__header--before--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$code-editor}__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--xs);
+
+  // header
+  --#{$code-editor}__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
+  --#{$code-editor}__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+
+  // header content
+  --#{$code-editor}__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$code-editor}__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$code-editor}__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$code-editor}__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$code-editor}__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-editor}__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+
+  // upload
+  --#{$code-editor}__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$code-editor}__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$code-editor}__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$code-editor}__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$code-editor}__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // main
-  --#{$code-editor}__main--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$code-editor}__main--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-editor}__main--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$code-editor}--m-read-only__main--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
-  --#{$code-editor}__main--m-drag-hover--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-editor}__main--m-drag-hover--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$code-editor}__main--m-drag-hover--after--BackgroundColor: var(--#{$pf-global}--primary-color--100);
+  --#{$code-editor}__main--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$code-editor}__main--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$code-editor}__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-editor}__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-editor}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$code-editor}--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$code-editor}__upload--before--BorderWidth: 0;
+  --#{$code-editor}__upload--before--BorderColor: transparent;
+  --#{$code-editor}__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
+  --#{$code-editor}__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
+  --#{$code-editor}__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$code-editor}__main--m-drag-hover--after--Opacity: .1;
 
   // code
-  --#{$code-editor}__code--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__code--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__code--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__code--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__code-pre--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$code-editor}__code-pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
+  --#{$code-editor}__code--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__code--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__code--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__code--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__code-pre--FontSize: var(--pf-t--global--font--size--sm);
+  --#{$code-editor}__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
 
   // content
-  --#{$code-editor}__header-main--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__header-main--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$code-editor}__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
 
   // tab
-  --#{$code-editor}__tab--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$code-editor}__tab--Color: var(--#{$pf-global}--Color--200);
-  --#{$code-editor}__tab--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$code-editor}__tab--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__tab--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$code-editor}__tab--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$code-editor}__tab--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-editor}__tab--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
+  --#{$code-editor}__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$code-editor}__tab--Color: var(--pf-t--global--text--color--subtle);
+  --#{$code-editor}__tab--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__tab--PaddingRight: var( --pf-t--global--spacer--sm);
+  --#{$code-editor}__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$code-editor}__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
+  --#{$code-editor}__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
+  --#{$code-editor}__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
   --#{$code-editor}__tab--BorderBottomWidth: 0;
-  --#{$code-editor}__tab--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-editor}__tab--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$code-editor}__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
+  --#{$code-editor}__tab--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$code-editor}__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
 
   // tab text
-  --#{$code-editor}__tab-icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$code-editor}__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+}
 
+.#{$code-editor} {
   &.pf-m-read-only {
     --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
   }
@@ -57,7 +79,6 @@
 .#{$code-editor}__header {
   position: relative;
   display: flex;
-  align-items: flex-end;
 
   &::before {
     position: absolute;
@@ -68,64 +89,72 @@
     content: "";
     border-block-end: var(--#{$code-editor}__header--before--BorderBottomWidth) solid var(--#{$code-editor}__header--before--BorderBottomColor);
   }
+
+  &.pf-m-plain {
+    --#{$code-editor}__header-content--BackgroundColor: var(--#{$code-editor}__header-content--m-plain--BackgroundColor);
+  }
 }
 
-.#{$code-editor}__controls {
+.#{$code-editor}__header-content {
   display: flex;
-
-  .#{$button}.pf-m-control {
-    --#{$button}--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--Color);
-
-    &:hover {
-      --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--hover--Color);
-    }
-
-    &:focus {
-      --#{$code-editor}__controls--c-button--m-control--Color: var(--#{$code-editor}__controls--c-button--m-control--focus--Color);
-    }
-
-    &:disabled {
-      &::after {
-        border-block-end-color: var(--#{$code-editor}__controls--c-button--m-control--disabled--after--BorderBottomColor);
-      }
-    }
+  flex: 1;
+  align-items: flex-end;
+  padding-block-start: var(--#{$code-editor}__header-content--PaddingBlockStart);
+  padding-block-end: var(--#{$code-editor}__header-content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$code-editor}__header-content--PaddingInlineStart);
+  padding-inline-end: var(--#{$code-editor}__header-content--PaddingInlineEnd);
+  background-color: var(--#{$code-editor}__header-content--BackgroundColor);
+  border-start-start-radius: var(--#{$code-editor}__header-content--BorderStartStartRadius);
+
+  &:last-child {
+    border-start-end-radius: var(--#{$code-editor}__header-content--BorderStartEndRadius);
   }
 }
 
+.#{$code-editor}__controls {
+  display: flex;
+  gap: var(--#{$code-editor}__controls--Gap);
+  align-items: flex-start;
+}
+
 .#{$code-editor}__header-main {
   flex-grow: 1;
+  align-self: center;
   padding-inline-start: var(--#{$code-editor}__header-main--PaddingLeft);
   padding-inline-end: var(--#{$code-editor}__header-main--PaddingRight);
 }
 
+.#{$code-editor}__upload {
+  position: relative;
+  padding-block-start: var(--#{$code-editor}__upload--PaddingBlockStart);
+  padding-block-end: var(--#{$code-editor}__upload--PaddingBlockEnd);
+  padding-inline-start: var(--#{$code-editor}__upload--PaddingInlineStart);
+  padding-inline-end: var(--#{$code-editor}__upload--PaddingInlineEnd);
+
+  &::before {
+    position: absolute;
+    inset-block-start: var(--#{$code-editor}__upload--PaddingBlockStart);
+    inset-block-end: var(--#{$code-editor}__upload--PaddingBlockEnd);
+    inset-inline-start: var(--#{$code-editor}__upload--PaddingInlineStart);
+    inset-inline-end: var(--#{$code-editor}__upload--PaddingInlineEnd);
+    content: "";
+    border: var(--#{$code-editor}__upload--before--BorderWidth) dashed var(--#{$code-editor}__upload--before--BorderColor);
+    border-radius: var(--#{$code-editor}__upload--BorderRadius);
+  }
+}
+
 .#{$code-editor}__main {
   position: relative;
   color: var(--#{$code-editor}__main--Color, inherit);
   background-color: var(--#{$code-editor}__main--BackgroundColor);
   border: var(--#{$code-editor}__main--BorderWidth) solid;
   border-color: var(--#{$code-editor}__main--BorderColor);
+  border-end-start-radius: var(--#{$code-editor}__main--BorderEndStartRadius);
+  border-end-end-radius: var(--#{$code-editor}__main--BorderEndEndRadius);
 
   &.pf-m-drag-hover {
-    &::after {
-      position: absolute;
-      inset-block-start: 0;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      content: "";
-      background-color: var(--#{$code-editor}__main--m-drag-hover--after--BackgroundColor);
-      opacity: var(--#{$code-editor}__main--m-drag-hover--after--Opacity);
-    }
-
-    &::before {
-      position: absolute;
-      inset-block-start: 0;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      content: "";
-      border: var(--#{$code-editor}__main--m-drag-hover--before--BorderWidth) solid var(--#{$code-editor}__main--m-drag-hover--before--BorderColor);
-    }
+    --#{$code-editor}__upload--before--BorderWidth: var(--#{$code-editor}__main--m-drag-hover--before--BorderWidth);
+    --#{$code-editor}__upload--before--BorderColor: var(--#{$code-editor}__main--m-drag-hover--before--BorderColor);
   }
 
   // stylelint-disable selector-class-pattern
@@ -161,7 +190,6 @@
   padding-block-end: var(--#{$code-editor}__tab--PaddingBottom);
   padding-inline-start: var(--#{$code-editor}__tab--PaddingLeft);
   padding-inline-end: var(--#{$code-editor}__tab--PaddingRight);
-  margin-inline-start: auto; // remove at breaking change
   color: var(--#{$code-editor}__tab--Color);
   background-color: var(--#{$code-editor}__tab--BackgroundColor);
   border-color: var(--#{$code-editor}__tab--BorderColor);
@@ -170,15 +198,9 @@
   border-block-end-width: var(--#{$code-editor}__tab--BorderBottomWidth);
   border-inline-start-width: var(--#{$code-editor}__tab--BorderLeftWidth);
   border-inline-end-width: var(--#{$code-editor}__tab--BorderRightWidth);
+  border-start-end-radius: var(--#{$code-editor}__tab--BorderStartEndRadius);
 }
 
 .#{$code-editor}__tab-icon + .#{$code-editor}__tab-text {
   margin-inline-start: var(--#{$code-editor}__tab-icon--text--MarginLeft);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/code-editor";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-code-editor;
-}

package/components/Content/content.css

@@ -1,39 +1,39 @@
 .pf-v5-c-content {
   --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-content--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v5-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v5-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
   --pf-v5-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
   --pf-v5-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
   --pf-v5-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
   --pf-v5-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
   --pf-v5-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v5-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);

package/components/Content/content.scss

@@ -4,7 +4,7 @@
   // Body
   --#{$content}--MarginBottom: var(--pf-t--global--spacer--md);
   --#{$content}--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$content}--FontSize: var(--pf-t--global--font--size--body);
+  --#{$content}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$content}--FontWeight: var(--pf-t--global--font--weight--body);
 
   // this ensures color is not overridden
@@ -17,42 +17,42 @@
   --#{$content}--h1--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h1--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --#{$content}--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
   --#{$content}--h1--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h2
   --#{$content}--h2--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h2--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$content}--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
   --#{$content}--h2--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h3
   --#{$content}--h3--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h3--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$content}--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
   --#{$content}--h3--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h4
   --#{$content}--h4--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h4--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
   --#{$content}--h4--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h5
   --#{$content}--h5--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h5--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
   --#{$content}--h5--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h6
   --#{$content}--h6--MarginTop: var(--pf-t--global--spacer--lg);
   --#{$content}--h6--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$content}--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // Small text