@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/components/Card/card.scss

@@ -2,7 +2,7 @@
 
 @include pf-root($card) {
   --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$card}--BorderColor: var(--pf-t--global--border--color--subtle);
   --#{$card}--BorderStyle: solid;
   --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -36,10 +36,11 @@
   --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
-  --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
+  --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
 
   // Selectable/Clickable
-  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
+  --#{$card}--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$card}--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
 
   // Clickable clicked
   --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -97,8 +98,6 @@
 
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
@@ -110,6 +109,17 @@
   // Toggle right
   --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+
+  // As tile
+  --#{$card}--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$card}--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
+
+  // Glass
+  --#{$card}--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+  --#{$card}--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
+  --#{$card}--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
+  --#{$card}--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$card}--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
 }
 
 .#{$card} {
@@ -130,6 +140,17 @@
     border-radius: inherit;
   }
 
+  :where(.pf-v6-theme-glass) & {
+    &.pf-m-glass {
+      --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
+      --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
+      
+      backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
+      box-shadow: var(--#{$card}--m-glass--BoxShadow);
+    }
+  }
+
   // SELECTABLE CARDS
   &.pf-m-selectable {
     // disables the gap since these have an empty label
@@ -141,6 +162,8 @@
   // SELECTABLE or CLICKABLE CARDS
   &.pf-m-selectable,
   &.pf-m-clickable {
+    --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+
     isolation: isolate;
 
     &::before {
@@ -196,8 +219,14 @@
   }
   // stylelint-enable selector-max-class
 
-  // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
+  
   @at-root .#{$card}__actions:has(> .#{$card}__selectable-actions input.#{$pf-prefix}screen-reader), // targets "card as tile", which are selectable cards with inputs
+  &:has(.#{$card}__selectable-actions input.#{$pf-prefix}screen-reader) {
+    --#{$card}--BackgroundColor: var(--#{$card}--m-as-tile--BackgroundColor);
+    --#{$card}--BorderColor: var(--#{$card}--m-as-tile--BorderColor);
+  }
+  
+  // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
   &.pf-m-clickable:not(.pf-m-selectable) {
     --#{$card}__actions--PaddingInlineStart: 0;
     --#{$card}__actions--MarginBlockStart: 0;
@@ -229,14 +258,35 @@
   }
 
   &.pf-m-secondary {
-    --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
-    --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
+    // TODO - let selectable secondary cards have a border
+    // --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
+    // --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
     --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
+
+    &.pf-m-selectable:not(.pf-m-current, .pf-m-selected),
+    &.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+      --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
+    }
   }
 
   &.pf-m-plain {
     --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
     --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
+
+    backdrop-filter: none;
+    
+    // A clickable/selectable plain card should behave like a non-plain card in every way except the background color
+    &.pf-m-selectable,
+    &.pf-m-clickable {
+      --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
+      
+      &.pf-m-current {
+        --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
+        --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
+      }
+    }
   }
 
   &.pf-m-expanded {
@@ -296,7 +346,7 @@
         margin-inline-end: auto;
       }
 
-      margin-inline-start: 0
+      margin-inline-start: 0;
     }
   }
 }
@@ -331,6 +381,12 @@
   overflow-wrap: var(--#{$card}__title-text--OverflowWrap);
 }
 
+.#{$card}__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .#{$card}__actions {
   display: flex;
   gap: var(--#{$card}__actions--Gap);

package/components/ClipboardCopy/clipboard-copy.css

@@ -2,20 +2,22 @@
   --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
-  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: -180deg;
   --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -44,19 +46,24 @@
 .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
   display: inline-flex;
 }
+.pf-v6-c-clipboard-copy.pf-m-readonly {
+  --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BackgroundColor);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v6-c-clipboard-copy--m-readonly__expandable-content--BorderColor);
+}
 
 .pf-v6-c-clipboard-copy__group {
   display: flex;
   gap: var(--pf-v6-c-clipboard-copy__group--Gap);
 }
 
-.pf-v6-c-clipboard-copy__toggle-icon {
-  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-clipboard-copy__toggle-icon {
+  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
+}
+
 .pf-v6-c-clipboard-copy__expandable-content {
   padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -5,7 +5,7 @@
   --#{$clipboard-copy}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$clipboard-copy}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$clipboard-copy}__toggle-icon--Transition: transform var(--#{$clipboard-copy}__toggle-icon--TransitionDuration) var(--#{$clipboard-copy}__toggle-icon--TransitionTimingFunction); // TODO Remove in breaking change along with shorthand property
-  --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
+  --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: -180deg;
 
   // Clipboard copy expanded content
   --#{$clipboard-copy}__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
@@ -13,15 +13,19 @@
   --#{$clipboard-copy}__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$clipboard-copy}__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$clipboard-copy}__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$clipboard-copy}__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
   --#{$clipboard-copy}__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
   --#{$clipboard-copy}__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
   --#{$clipboard-copy}__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
-  --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
 
+  // Readonly
+  --#{$clipboard-copy}--m-readonly__expandable-content--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --#{$clipboard-copy}--m-readonly__expandable-content--BorderColor: var(--pf-t--global--border--color--control--read-only);
+
   // Group
   --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
 
@@ -62,6 +66,11 @@
       display: inline-flex;
     }
   }
+
+  &.pf-m-readonly {
+    --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--#{$clipboard-copy}--m-readonly__expandable-content--BackgroundColor);
+    --#{$clipboard-copy}__expandable-content--BorderColor: var(--#{$clipboard-copy}--m-readonly__expandable-content--BorderColor);
+  }
 }
 
 

package/components/CodeEditor/code-editor.css

@@ -8,7 +8,7 @@
   --pf-v6-c-code-editor__header--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-editor__header--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor: transparent;
   --pf-v6-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -70,8 +70,8 @@
 
 .pf-v6-c-code-editor__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-code-editor__header {

package/components/CodeEditor/code-editor.scss

@@ -15,7 +15,7 @@
 
   // 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--m-plain--BackgroundColor: transparent;
   --#{$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);
@@ -91,8 +91,8 @@
 
 .#{$code-editor}__container {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$code-editor}__header {