@patternfly/react-styles 6.0.0-alpha.27 → 6.0.0-alpha.28

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-alpha.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.27...@patternfly/react-styles@6.0.0-alpha.28) (2024-07-03)
+
+### Features
+
+- **page:** support for context selector in sidebar ([#10686](https://github.com/patternfly/patternfly-react/issues/10686)) ([b85fb19](https://github.com/patternfly/patternfly-react/commit/b85fb19e8e40f3003da644f12609f50b59584f92))
+
 # [6.0.0-alpha.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.26...@patternfly/react-styles@6.0.0-alpha.27) (2024-07-02)
 
 ### Features

package/css/assets/images/img_avatar-dark.svg

@@ -1,16 +1,22 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#212427;}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#6A6E73;}
-	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#4F5255;}
-</style>
-<rect class="st0" width="36" height="36"/>
-<path class="st1" d="M30.5,36c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7
-	c-1.2,0.4-2.4,1.2-3.4,2.6C6.7,27,5.8,32.2,5.4,36H30.5z"/>
-<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
-<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
-<path class="st2" d="M22.7,36l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2H22.7z"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"  version="1.1" viewBox="0 0 36 36">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #212427;
+      }
+
+      .cls-1, .cls-2 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill: #6a6e73;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <rect class="cls-1" width="36" height="36"/>
+  <path class="cls-2" d="M30.5,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.6,1.9-2.5,7.1-2.9,10.9h25.1Z"/>
+  <path class="cls-2" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"/>
+</svg>

package/css/assets/images/img_avatar-light.svg

@@ -1,18 +1,25 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F0F0F0;}
-	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#D2D2D2;}
-	.st2{fill:#B8BBBE;}
-	.st3{fill:#D2D2D2;}
-</style>
-<rect class="st0" width="36" height="36"/>
-<path class="st1" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4S21.3,20.1,17.7,20.1z"/>
-<path class="st2" d="M13.3,36l0-6.7c-2,0.4-2.9,1.4-3.1,3.5L10.1,36H13.3z"/>
-<path class="st3" d="M10.1,36l0.1-3.2c0.2-2.1,1.1-3.1,3.1-3.5l0,6.7h9.4l0-6.7c2,0.4,2.9,1.4,3.1,3.5l0.1,3.2h4.7
-	c-0.4-3.9-1.3-9-2.9-11c-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-0.6-6.3-0.6s-6.1,0.7-6.1,0.7c-1.2,0.4-2.4,1.2-3.4,2.6
-	C6.7,27,5.8,32.2,5.4,36H10.1z"/>
-<path class="st2" d="M25.9,36l-0.1-3.2c-0.2-2.1-1.1-3.1-3.1-3.5l0,6.7H25.9z"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #d2d2d2;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <rect class="cls-3" width="36" height="36"/>
+  <path class="cls-2" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"/>
+  <path class="cls-1" d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"/>
+</svg>

package/css/components/Alert/alert-group.css

@@ -1,5 +1,5 @@
 :where(:root, .pf-v6-c-alert-group) {
-  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
@@ -47,16 +47,67 @@
   border-radius: var(--pf-v6-c-alert-group__overflow-button--BorderRadius);
   box-shadow: var(--pf-v6-c-alert-group__overflow-button--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:hover {
+
+.pf-v6-c-alert-group__item {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  transform: translateX(0) translateY(0);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-alert-group__item {
+    transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
+  }
+  .pf-v6-c-alert-group__item .pf-v6-c-alert {
+    transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
+  }
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top {
+  grid-template-rows: 0fr;
+  margin-block: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-100%);
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
+  min-height: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  border-width: 0;
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right {
+  grid-template-rows: 0fr;
+  margin-block: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
+  transform: translateX(100%);
+}
+.pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
+  min-height: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  border-width: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-alert-group__item.pf-m-offstage-right {
+    transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+  }
+  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
+    transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
+  }
+}
+.pf-v6-c-alert-group__item:hover {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--hover--Color);
   --pf-v6-c-alert-group__overflow-button--BackgroundColor: var(--pf-v6-c-alert-group__overflow-button--hover--BackgroundColor);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--hover--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:focus {
+.pf-v6-c-alert-group__item:focus {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--focus--Color);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--focus--BoxShadow);
 }
-.pf-v6-c-alert-group__overflow-button:active {
+.pf-v6-c-alert-group__item:active {
   --pf-v6-c-alert-group__overflow-button--Color: var(--pf-v6-c-alert-group__overflow-button--active--Color);
   --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
 }

package/css/components/Alert/alert-group.d.ts

@@ -1,9 +1,13 @@
 import './alert-group.css';
 declare const _default: {
+  "alert": "pf-v6-c-alert",
   "alertGroup": "pf-v6-c-alert-group",
+  "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
   "modifiers": {
-    "toast": "pf-m-toast"
+    "toast": "pf-m-toast",
+    "offstageTop": "pf-m-offstage-top",
+    "offstageRight": "pf-m-offstage-right"
   }
 };
 export default _default;

package/css/components/Alert/alert-group.js

@@ -2,9 +2,13 @@
 exports.__esModule = true;
 require('./alert-group.css');
 exports.default = {
+  "alert": "pf-v6-c-alert",
   "alertGroup": "pf-v6-c-alert-group",
+  "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
   "modifiers": {
-    "toast": "pf-m-toast"
+    "toast": "pf-m-toast",
+    "offstageTop": "pf-m-offstage-top",
+    "offstageRight": "pf-m-offstage-right"
   }
 };

package/css/components/Alert/alert-group.mjs

@@ -1,8 +1,12 @@
 import './alert-group.css';
 export default {
+  "alert": "pf-v6-c-alert",
   "alertGroup": "pf-v6-c-alert-group",
+  "alertGroupItem": "pf-v6-c-alert-group__item",
   "alertGroupOverflowButton": "pf-v6-c-alert-group__overflow-button",
   "modifiers": {
-    "toast": "pf-m-toast"
+    "toast": "pf-m-toast",
+    "offstageTop": "pf-m-offstage-top",
+    "offstageRight": "pf-m-offstage-right"
   }
 };

package/css/components/Alert/alert.css

@@ -14,8 +14,8 @@
   --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--button--vertical--default) - 0.0625rem);
-  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--button--vertical--default));
+  --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
   --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
@@ -23,10 +23,7 @@
   --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
-  --pf-v6-c-alert__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-alert__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-alert__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-alert__title--max-lines: 1;
   --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -34,11 +31,11 @@
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
   --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
   --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
-  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
   --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
@@ -160,10 +157,7 @@
 
 .pf-v6-c-alert__title {
   grid-area: title;
-  font-family: var(--pf-v6-c-alert__title--FontFamily);
-  font-size: var(--pf-v6-c-alert__title--FontSize);
   font-weight: var(--pf-v6-c-alert__title--FontWeight);
-  line-height: var(--pf-v6-c-alert__title--LineHeight);
   color: var(--pf-v6-c-alert__title--Color);
   word-break: break-word;
 }
@@ -198,9 +192,6 @@
   grid-area: actiongroup;
   padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart);
 }
-.pf-v6-c-alert__action-group > .pf-v6-c-button {
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecoration: none;
-}
 .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) {
   margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
 }

package/css/components/Button/button.css

@@ -13,7 +13,7 @@
   --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--BackgroundColor: transparent;
   --pf-v6-c-button--BorderColor: transparent;
-  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
+  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-button--TextDecoration: none;
   --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -21,11 +21,11 @@
   --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--hover--BorderColor: transparent;
-  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
+  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-button--hover--TextDecoration: none;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BorderColor: transparent;
-  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--button--clicked);
+  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
@@ -84,6 +84,7 @@
   --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
   --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
+  --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
   --pf-v6-c-button--m-link--m-inline--FontSize: initial;
   --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
   --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -104,7 +105,8 @@
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-plain--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--m-plain--PaddingBlockStart) + var(--pf-v6-c-button--m-plain--PaddingBlockEnd));
   --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
@@ -155,13 +157,13 @@
   --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-button--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-button--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
-  --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default--default);
+  --pf-v6-c-button--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
   --pf-v6-c-button--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
   --pf-v6-c-button--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
-  --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--default--hover);
+  --pf-v6-c-button--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
   --pf-v6-c-button--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
   --pf-v6-c-button--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
-  --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--default--clicked);
+  --pf-v6-c-button--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
   --pf-v6-c-button--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
   --pf-v6-c-button--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
   --pf-v6-c-button--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
@@ -335,6 +337,7 @@
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
+  --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
   --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
   --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -454,6 +457,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button.pf-m-plain {
   --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
+  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--PaddingBlockStart);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);

package/css/components/Card/card.css

@@ -12,7 +12,7 @@
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__title-text--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-card__title-text--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -23,10 +23,10 @@
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
-  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
+  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain) * -1);
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
@@ -67,7 +67,7 @@
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
-  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
+  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--compact) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
@@ -302,8 +302,8 @@
 .pf-v6-c-card__title:not(:last-child) {
   padding-block-end: var(--pf-v6-c-card__title--not--last-child--PaddingBlockEnd);
 }
-.pf-v6-c-card__header button.pf-m-inline.pf-m-disabled,
-.pf-v6-c-card__title button.pf-m-inline.pf-m-disabled {
+.pf-v6-c-card__header .pf-v6-c-button.pf-m-inline:disabled,
+.pf-v6-c-card__title .pf-v6-c-button.pf-m-inline:disabled {
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-card--c-button--disabled--Color);
 }
 

package/css/components/Card/card.d.ts

@@ -1,5 +1,6 @@
 import './card.css';
 declare const _default: {
+  "button": "pf-v6-c-button",
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",

package/css/components/Card/card.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./card.css');
 exports.default = {
+  "button": "pf-v6-c-button",
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",

package/css/components/Card/card.mjs

@@ -1,5 +1,6 @@
 import './card.css';
 export default {
+  "button": "pf-v6-c-button",
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -92,6 +92,6 @@
 }
 
 .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain {
-  --pf-v6-c-button--m-plain--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
-  --pf-v6-c-button--m-plain--hover--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--Color);
+  --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
 }

package/css/components/Content/content.css

@@ -51,16 +51,10 @@
   --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
-  --pf-v6-c-content--ol--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ol--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ol--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--PaddingInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-content--ul--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-content--ul--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
   --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
-  --pf-v6-c-content--li--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -130,17 +124,6 @@
   margin-block-end: 0;
 }
 
-:is(.pf-v6-c-content--ol,
-.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
-  margin: 0;
-}
-:is(.pf-v6-c-content--ol,
-.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
-  padding-inline-start: 0;
-  margin-inline-start: 0;
-  list-style: none;
-}
-
 :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
@@ -214,36 +197,29 @@
   border: none;
 }
 
-:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
-  padding-inline-start: var(--pf-v6-c-content--ol--PaddingInlineStart);
-  margin-inline-start: var(--pf-v6-c-content--ol--MarginInlineStart);
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-v6-c-content--list--Gap);
+  padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
 }
-:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
-ul) {
-  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
+  padding-inline-start: 0;
+  list-style: none;
 }
-:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
-ol) {
-  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul,
+ol,
+ul) {
+  margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
 }
 
 :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
-  padding-inline-start: var(--pf-v6-c-content--ul--PaddingInlineStart);
-  margin-inline-start: var(--pf-v6-c-content--ul--MarginInlineStart);
   list-style: var(--pf-v6-c-content--ul--ListStyle);
 }
-:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
-ul) {
-  --pf-v6-c-content--ul--MarginInlineStart: var(--pf-v6-c-content--ul--nested--MarginInlineStart);
-  margin-block-start: var(--pf-v6-c-content--ul--nested--MarginBlockStart);
-}
-:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
-ol) {
-  --pf-v6-c-content--ol--MarginInlineStart: var(--pf-v6-c-content--ol--nested--MarginInlineStart);
-  margin-block-start: var(--pf-v6-c-content--ol--nested--MarginBlockStart);
-}
 
 :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
   display: grid;

package/css/components/DataList/data-list.css

@@ -440,8 +440,8 @@
   --pf-v6-c-data-list--cell--WordBreak: normal;
   --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
   --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
-  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
+  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
   --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-data-list__toggle-icon--Rotate: 0;

package/css/components/Drawer/drawer.css

@@ -9,7 +9,7 @@
   --pf-v6-c-drawer__panel--MinWidth: 50%;
   --pf-v6-c-drawer__panel--MaxHeight: auto;
   --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -96,7 +96,7 @@
   --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
-  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
+  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
@@ -116,19 +116,19 @@
 }
 
 .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-x: hidden;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
 }
 
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
 }
 
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {

package/css/components/EmptyState/empty-state.css

@@ -36,11 +36,11 @@
   --pf-v6-c-empty-state--m-xs__body--MarginBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-empty-state--m-xl__body--MarginBlockStart: var(--pf-t--global--spacer--xl);
-  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
   --pf-v6-c-empty-state__footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-empty-state--m-xs__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
 }
 
 .pf-v6-c-empty-state {

package/css/components/Hint/hint.css

@@ -9,10 +9,7 @@
   --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
-  --pf-v6-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -60,10 +57,7 @@
 
 .pf-v6-c-hint__title {
   align-self: center;
-  font-family: var(--pf-v6-c-hint__title--FontFamily);
-  font-size: var(--pf-v6-c-hint__title--FontSize);
   font-weight: var(--pf-v6-c-hint__title--FontWeight);
-  line-height: var(--pf-v6-c-hint__title--LineHeight);
 }
 
 .pf-v6-c-hint__body {

package/css/components/InlineEdit/inline-edit.css

@@ -1,8 +1,8 @@
 :where(:root, .pf-v6-c-inline-edit) {
-  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-inline-edit__action--m-icon-group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-inline-edit__group--m-footer--MarginBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-inline-edit__label--m-bold--FontWeight: var(--pf-t--global--font--weight--body--bold);
 }