@patternfly/patternfly 6.0.0-alpha.107 → 6.0.0-alpha.109

package/docs/components/Badge/examples/Badge.md

@@ -36,26 +36,6 @@ cssPrefix: pf-v6-c-badge
 
 ```
 
-### Badge as toggle
-
-```html
-<span class="pf-v6-c-badge pf-m-read">
-  7
-  <span class="pf-v6-c-badge__toggle-icon">
-    <i class="fas fa-caret-down"></i>
-  </span>
-</span>
-<span class="pf-v6-c-badge pf-m-unread">
-  7
-  <span class="pf-v6-screen-reader">unread messages</span>
-
-  <span class="pf-v6-c-badge__toggle-icon">
-    <i class="fas fa-caret-down"></i>
-  </span>
-</span>
-
-```
-
 ## Documentation
 
 ### Overview
@@ -67,6 +47,5 @@ Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
-| `.pf-v6-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
 | `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
 | `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -2,9 +2,7 @@
 id: Breadcrumb
 section: components
 cssPrefix: pf-v6-c-breadcrumb
----import './Breadcrumb.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
@@ -162,62 +160,23 @@ cssPrefix: pf-v6-c-breadcrumb
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </span>
       <span class="pf-v6-c-breadcrumb__dropdown">
-        <div class="pf-v6-c-dropdown pf-m-expanded">
-          <button
-            class="pf-v6-c-dropdown__toggle pf-m-plain"
-            id="dropdown-badge-toggle-button"
-            aria-expanded="true"
-            type="button"
-          >
-            <span class="pf-v6-c-badge pf-m-read">
-              5
-              <span class="pf-v6-c-dropdown__toggle-icon">
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
-              </span>
+        <button
+          class="pf-v6-c-menu-toggle pf-m-plain"
+          type="button"
+          aria-expanded="false"
+        >
+          <span class="pf-v6-c-menu-toggle__count">
+            <span class="pf-v6-c-badge pf-m-unread">
+              4
+              <span class="pf-v6-screen-reader">additional items</span>
+            </span>
+          </span>
+          <span class="pf-v6-c-menu-toggle__controls">
+            <span class="pf-v6-c-menu-toggle__toggle-icon">
+              <i class="fas fa-caret-down" aria-hidden="true"></i>
             </span>
-          </button>
-          <ul
-            class="pf-v6-c-dropdown__menu"
-            aria-labelledby="dropdown-badge-toggle-button"
-            role="menu"
-          >
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-            <li role="none">
-              <button
-                class="pf-v6-c-dropdown__menu-item"
-                role="menuitem"
-                type="button"
-              >Section title</button>
-            </li>
-          </ul>
-        </div>
+          </span>
+        </button>
       </span>
     </li>
     <li class="pf-v6-c-breadcrumb__item">

package/docs/components/Menu/examples/Menu.md

@@ -4592,9 +4592,13 @@ cssPrefix: pf-v6-c-menu
               type="button"
               aria-expanded="true"
             >
-              <span class="pf-v6-c-badge pf-m-read">
-                1
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              <span class="pf-v6-c-menu-toggle__count">
+                <span class="pf-v6-c-badge pf-m-read">1</span>
+              </span>
+              <span class="pf-v6-c-menu-toggle__controls">
+                <span class="pf-v6-c-menu-toggle__toggle-icon">
+                  <i class="fas fa-caret-down" aria-hidden="true"></i>
+                </span>
               </span>
             </button>
             <div class="pf-v6-c-menu">
@@ -4845,9 +4849,13 @@ cssPrefix: pf-v6-c-menu
               type="button"
               aria-expanded="true"
             >
-              <span class="pf-v6-c-badge pf-m-read">
-                2
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              <span class="pf-v6-c-menu-toggle__count">
+                <span class="pf-v6-c-badge pf-m-read">2</span>
+              </span>
+              <span class="pf-v6-c-menu-toggle__controls">
+                <span class="pf-v6-c-menu-toggle__toggle-icon">
+                  <i class="fas fa-caret-down" aria-hidden="true"></i>
+                </span>
               </span>
             </button>
             <div class="pf-v6-c-menu">

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -73,6 +73,25 @@ cssPrefix: pf-v6-c-menu-toggle
   </span>
 </button>
 
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__count">
+    <span class="pf-v6-c-badge pf-m-unread">
+      4
+      <span class="pf-v6-screen-reader">additional items</span>
+    </span>
+  </span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
 ```
 
 ### Primary

package/layouts/Flex/flex.scss

@@ -24,7 +24,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
 .#{$flex} {
   // Emit spacer css variables that map to requested spacer values
-  @include pf-v5-emit-properties($pf-v6-l-flex--variable-map);
+  @include pf-v6-emit-properties($pf-v6-l-flex--variable-map);
 
   display: var(--#{$flex}--Display);
   flex-wrap: var(--#{$flex}--FlexWrap);
@@ -46,23 +46,23 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   margin-inline-end: var(--#{$flex}--spacer--column);
 
   // don't set base value for --#{$flex}--item--Order as it defaults to 0
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     order: var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     order: var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order)));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     order: var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order))));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     order: var(--#{$flex}--item--Order-on-xl, var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order)))));
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--2xl) {
     order: var(--#{$flex}--item--Order-on-2xl, var(--#{$flex}--item--Order-on-xl, var(--#{$flex}--item--Order-on-lg, var(--#{$flex}--item--Order-on-md, var(--#{$flex}--item--Order-on-sm, var(--#{$flex}--item--Order))))));
   }
 
@@ -75,7 +75,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       // display
       &.pf-m-flex#{$breakpoint-name} {
         display: var(--#{$flex}--Display);
@@ -302,7 +302,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         &.pf-m-space-items-#{$spacer}#{$breakpoint-name} {
           > * {
@@ -321,7 +321,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
           --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
@@ -338,7 +338,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
     @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
       $pf-v6-l-flex--gap--selectors: ();
 
-      @include pf-v5-apply-breakpoint($breakpoint) {
+      @include pf-v6-apply-breakpoint($breakpoint) {
         @each $spacer, $value in $pf-v6-l-flex--gap-map {
           $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
           $spacer-name: if($spacer == "base", "", -#{$spacer});
@@ -364,7 +364,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-row-gap{-[size]}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       $pf-v6-l-flex--row-gap--selectors: ();
 
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
@@ -391,7 +391,7 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
     $pf-v6-l-flex--column-gap--selectors: ();
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
         $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
         $spacer-name: if($spacer == "base", "", -#{$spacer});

package/layouts/Gallery/gallery.scss

@@ -20,6 +20,6 @@ $pf-v6-l-gallery--breakpoint-map: build-breakpoint-map();
     grid-gap: var(--#{$gallery}--m-gutter--GridGap);
   }
 
-  @include pf-v5-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--min", "--#{$gallery}--GridTemplateColumns--min", $pf-v6-l-gallery--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--max", "--#{$gallery}--GridTemplateColumns--max", $pf-v6-l-gallery--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--min", "--#{$gallery}--GridTemplateColumns--min", $pf-v6-l-gallery--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$gallery}--GridTemplateColumns--minmax--max", "--#{$gallery}--GridTemplateColumns--max", $pf-v6-l-gallery--breakpoint-map);
 }

package/layouts/Grid/grid.scss

@@ -58,19 +58,19 @@ $pf-v6-l-grid--breakpoint-map: build-breakpoint-map(); // currently only used fo
     min-width: 0;
     min-height: 0;
 
-    @include pf-v5-build-css-variable-stack("order", "--#{$grid}--item--Order", $pf-v6-l-grid--breakpoint-map);
+    @include pf-v6-build-css-variable-stack("order", "--#{$grid}--item--Order", $pf-v6-l-grid--breakpoint-map);
   }
 
   // Loop through $breakpoints map to generate responsive classes
-  @each $breakpoint, $value in $pf-v5-global--breakpoint-map {
-    @include pf-v5-media-query($breakpoint) {
+  @each $breakpoint, $value in $pf-v6-global--breakpoint-map {
+    @include pf-v6-media-query($breakpoint) {
       @include pf-smart-grid($value);
     }
   }
 
   // Loop through $breakpoints map to generate responsive classes
-  @each $breakpoint, $value in $pf-v5-global--breakpoint-map {
-    @include pf-v5-media-query($breakpoint) {
+  @each $breakpoint, $value in $pf-v6-global--breakpoint-map {
+    @include pf-v6-media-query($breakpoint) {
       @include pf-grid-item-modifier($value);
     }
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.107",
+  "version": "6.0.0-alpha.109",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-base-no-globals-theme-dark-unversioned.css

@@ -579,8 +579,8 @@ html .ws-preview {
   --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
   --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
   --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
-  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--50);
-  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
   --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
   --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
   --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
@@ -668,10 +668,10 @@ html .ws-preview {
   --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
   --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -681,12 +681,18 @@ html .ws-preview {
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
   --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
   --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
-  --pf-t--global--spacer--control--horizontal: var(--pf-t--global--spacer--300);
-  --pf-t--global--spacer--control--vertical: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--button--horizontal--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--horizontal--compact: var(--pf-t--global--spacer--300);
   --pf-t--global--spacer--button--horizontal--default: var(--pf-t--global--spacer--400);
+  --pf-t--global--spacer--button--vertical--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--vertical--compact: var(--pf-t--global--spacer--100);
   --pf-t--global--spacer--button--vertical--default: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--300);
+  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--100);
+  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
   --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
   --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
@@ -700,7 +706,7 @@ html .ws-preview {
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
   --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
   --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
@@ -814,7 +820,7 @@ html .ws-preview {
   --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
   --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
   --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
@@ -990,19 +996,19 @@ html .ws-preview {
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }
 
-:root:where(.pf-v5-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -1066,7 +1072,7 @@ html .ws-preview {
   --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
   --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
   --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
-  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
   --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);

package/patternfly-base-no-globals-theme-dark-unversioned.scss

@@ -1,5 +1,5 @@
 // This config will generate dark them updates based on 'pf-theme-dark'
-// which can be changed by updating  $pf-global--theme--namespace, $pf-global--theme--version, $pf-v5--theme-dark--class
+// which can be changed by updating  $pf-global--theme--namespace, $pf-global--theme--version, $pf-v6--theme-dark--class
 // $pf-global--theme-dark--placeholder--class in _init.scss
 $pf-v5-global--enable-reset: false;
 $pf-v5-global--enable-normalize: false;

package/patternfly-base-no-globals.css

@@ -579,8 +579,8 @@ html .ws-preview {
   --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
   --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
   --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
-  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--50);
-  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
   --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
   --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
   --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
@@ -668,10 +668,10 @@ html .ws-preview {
   --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
   --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -681,12 +681,18 @@ html .ws-preview {
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
   --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
   --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
-  --pf-t--global--spacer--control--horizontal: var(--pf-t--global--spacer--300);
-  --pf-t--global--spacer--control--vertical: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--button--horizontal--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--horizontal--compact: var(--pf-t--global--spacer--300);
   --pf-t--global--spacer--button--horizontal--default: var(--pf-t--global--spacer--400);
+  --pf-t--global--spacer--button--vertical--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--vertical--compact: var(--pf-t--global--spacer--100);
   --pf-t--global--spacer--button--vertical--default: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--300);
+  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--100);
+  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
   --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
   --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
@@ -700,7 +706,7 @@ html .ws-preview {
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
   --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
   --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
@@ -814,7 +820,7 @@ html .ws-preview {
   --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
   --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
   --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
@@ -990,19 +996,19 @@ html .ws-preview {
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }
 
-:root:where(.pf-v5-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -1066,7 +1072,7 @@ html .ws-preview {
   --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
   --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
   --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
-  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
   --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);

package/patternfly-base-theme-dark-unversioned.css

@@ -579,8 +579,8 @@ html .ws-preview {
   --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
   --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
   --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
-  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--50);
-  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
+  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
   --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
   --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
   --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
@@ -668,10 +668,10 @@ html .ws-preview {
   --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
   --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
+  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
@@ -681,12 +681,18 @@ html .ws-preview {
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
   --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
   --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
-  --pf-t--global--spacer--control--horizontal: var(--pf-t--global--spacer--300);
-  --pf-t--global--spacer--control--vertical: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--button--horizontal--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--horizontal--compact: var(--pf-t--global--spacer--300);
   --pf-t--global--spacer--button--horizontal--default: var(--pf-t--global--spacer--400);
+  --pf-t--global--spacer--button--vertical--plain: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--button--vertical--compact: var(--pf-t--global--spacer--100);
   --pf-t--global--spacer--button--vertical--default: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--300);
+  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--200);
+  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--100);
+  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--200);
   --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
   --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
   --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
@@ -700,7 +706,7 @@ html .ws-preview {
   --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
   --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
   --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
   --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
@@ -814,7 +820,7 @@ html .ws-preview {
   --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
   --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
   --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
-  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--100);
+  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
   --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
   --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
   --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
@@ -990,19 +996,19 @@ html .ws-preview {
   --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
-  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
-  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
   --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
   --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
   --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
   --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
   --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
+  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
+  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
+  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
 }
 
-:root:where(.pf-v5-theme-dark) {
+:root:where(.pf-v6-theme-dark) {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
   --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
   --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -1066,7 +1072,7 @@ html .ws-preview {
   --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
   --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
   --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
-  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--60);
+  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
   --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
   --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);