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

package/components/Title/title.scss

@@ -1,38 +1,72 @@
 // @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$title} {
-  --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading);
+:root {
+  --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
 
+  // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
   // 4xl
-  --#{$title}--m-4xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$title}--m-4xl--FontSize: var(--#{$pf-global}--FontSize--4xl);
-  --#{$title}--m-4xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --#{$title}--m-4xl--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // 3xl
-  --#{$title}--m-3xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$title}--m-3xl--FontSize: var(--#{$pf-global}--FontSize--3xl);
-  --#{$title}--m-3xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-3xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-3xl--FontSize: var(--pf-t--global--font--size--heading--xl);
+  --#{$title}--m-3xl--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // 2xl
-  --#{$title}--m-2xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$title}--m-2xl--FontSize: var(--#{$pf-global}--FontSize--2xl);
-  --#{$title}--m-2xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-2xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-2xl--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --#{$title}--m-2xl--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // xl
-  --#{$title}--m-xl--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$title}--m-xl--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$title}--m-xl--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-xl--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-xl--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$title}--m-xl--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // lg
-  --#{$title}--m-lg--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$title}--m-lg--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$title}--m-lg--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-lg--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-lg--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$title}--m-lg--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // md
-  --#{$title}--m-md--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$title}--m-md--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$title}--m-md--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$title}--m-md--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
+
+  // HEADING modifiers 
+  // h1
+  --#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);
+  --#{$title}--m-h1--FontWeight: var(--pf-t--global--font--weight--heading);
+
+  // h2
+  --#{$title}--m-h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h2--FontSize: var(--pf-t--global--font--size--heading--h2);
+  --#{$title}--m-h2--FontWeight: var(--pf-t--global--font--weight--heading);
+
+  // h3
+  --#{$title}--m-h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h3--FontSize: var(--pf-t--global--font--size--heading--h3);
+  --#{$title}--m-h3--FontWeight: var(--pf-t--global--font--weight--heading);
+
+  // h4
+  --#{$title}--m-h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h4--FontSize: var(--pf-t--global--font--size--heading--h4);
+  --#{$title}--m-h4--FontWeight: var(--pf-t--global--font--weight--heading);
+
+  // h5
+  --#{$title}--m-h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h5--FontSize: var(--pf-t--global--font--size--heading--h5);
+  --#{$title}--m-h5--FontWeight: var(--pf-t--global--font--weight--heading);
 
+  // h6
+  --#{$title}--m-h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$title}--m-h6--FontSize: var(--pf-t--global--font--size--heading--h6);
+  --#{$title}--m-h6--FontWeight: var(--pf-t--global--font--weight--heading);
+}
+
+.#{$title} {
   font-family: var(--#{$title}--FontFamily);
   word-break: break-word;
 
@@ -71,4 +105,40 @@
     font-weight: var(--#{$title}--m-md--FontWeight);
     line-height: var(--#{$title}--m-md--LineHeight);
   }
+
+  &.pf-m-h1 {
+    font-size: var(--#{$title}--m-h1--FontSize);
+    font-weight: var(--#{$title}--m-h1--FontWeight);
+    line-height: var(--#{$title}--m-h1--LineHeight);
+  }
+
+  &.pf-m-h2 {
+    font-size: var(--#{$title}--m-h2--FontSize);
+    font-weight: var(--#{$title}--m-h2--FontWeight);
+    line-height: var(--#{$title}--m-h2--LineHeight);
+  }
+
+  &.pf-m-h3 {
+    font-size: var(--#{$title}--m-h3--FontSize);
+    font-weight: var(--#{$title}--m-h3--FontWeight);
+    line-height: var(--#{$title}--m-h3--LineHeight);
+  }
+
+  &.pf-m-h4 {
+    font-size: var(--#{$title}--m-h4--FontSize);
+    font-weight: var(--#{$title}--m-h4--FontWeight);
+    line-height: var(--#{$title}--m-h4--LineHeight);
+  }
+
+  &.pf-m-h5 {
+    font-size: var(--#{$title}--m-h5--FontSize);
+    font-weight: var(--#{$title}--m-h5--FontWeight);
+    line-height: var(--#{$title}--m-h5--LineHeight);
+  }
+
+  &.pf-m-h6 {
+    font-size: var(--#{$title}--m-h6--FontSize);
+    font-weight: var(--#{$title}--m-h6--FontWeight);
+    line-height: var(--#{$title}--m-h6--LineHeight);
+  }
 }

package/components/ToggleGroup/toggle-group.css

@@ -1,38 +1,43 @@
-.pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+:where(:root),
+:where(.pf-v5-c-toggle-group) {
+  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v5-c-toggle-group__button--ZIndex: auto;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
-  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
+  --pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v5-c-toggle-group {
   display: flex;
 }
 .pf-v5-c-toggle-group.pf-m-compact {
@@ -77,19 +82,19 @@
   inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
+  border-style: solid;
+  border-width: var(--pf-v5-c-toggle-group__button--before--BorderWidth);
+  border-block-start-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-block-end-color: var(--pf-v5-c-toggle-group__button--before--BorderBlockEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-inline-start-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineStartColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
+  border-inline-end-color: var(--pf-v5-c-toggle-group__button--before--BorderInlineEndColor, var(--pf-v5-c-toggle-group__button--before--BorderColor));
 }
-.pf-v5-c-toggle-group__button:hover {
+.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
   text-decoration: none;
 }
-.pf-v5-c-toggle-group__button:focus {
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
-  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
-}
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -99,19 +104,20 @@
 .pf-v5-c-toggle-group__button:disabled, .pf-v5-c-toggle-group__button.pf-m-disabled {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--disabled--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--disabled--Color);
+  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--disabled--ZIndex);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--disabled--before--BorderColor);
   pointer-events: none;
 }
 
+.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+  --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
+}
+
+.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+  --pf-v5-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v5-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
+}
+
 .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
 .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
   margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -1,50 +1,56 @@
 // @debug $toggle-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$toggle-group} {
+:where(:root),
+:where(.#{$toggle-group}) {
   // button
-  --#{$toggle-group}__button--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$toggle-group}__button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$toggle-group}__button--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$toggle-group}__button--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$toggle-group}__button--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$toggle-group}__button--LineHeight: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
-  --#{$toggle-group}__button--Color: var(--#{$pf-global}--Color--100);
-  --#{$toggle-group}__button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
+  --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$toggle-group}__button--ZIndex: auto;
-  --#{$toggle-group}__button--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$toggle-group}__button--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$toggle-group}__button--hover--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$toggle-group}__button--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$toggle-group}__button--focus--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$toggle-group}__button--focus--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-  --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$toggle-group}__button--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$toggle-group}__button--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
 
   // item
-  --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
-  --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--#{$pf-global}--BorderRadius--sm);
+  --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
 
   // icon
-  --#{$toggle-group}__icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$toggle-group}__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // Selected
-  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
-  --#{$toggle-group}__button--m-selected--Color: initial;
-  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
+
+  // disabled
+  --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$toggle-group}__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
+  --#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--Zindex--xs);
 
   // Compact
   --#{$toggle-group}--m-compact__button--PaddingTop: 0;
-  --#{$toggle-group}--m-compact__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}--m-compact__button--PaddingBottom: 0;
-  --#{$toggle-group}--m-compact__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$toggle-group}--m-compact__button--FontSize: var(--#{$pf-global}--FontSize--xs);
+  --#{$toggle-group}--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
 
+.#{$toggle-group} {
   display: flex;
 
   &.pf-m-compact {
@@ -98,16 +104,22 @@
 
   &::before {
     position: absolute;
-   inset-block-start: 0;
-   inset-block-end: 0;
-   inset-inline-start: 0;
-   inset-inline-end: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
     pointer-events: none;
     content: "";
-    border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
+    border-style: solid;
+    border-width: var(--#{$toggle-group}__button--before--BorderWidth);
+    border-block-start-color: var(--#{$toggle-group}__button--before--BorderBlockStartColor, var(--#{$toggle-group}__button--before--BorderColor));
+    border-block-end-color: var(--#{$toggle-group}__button--before--BorderBlockEndColor, var(--#{$toggle-group}__button--before--BorderColor));
+    border-inline-start-color: var(--#{$toggle-group}__button--before--BorderInlineStartColor, var(--#{$toggle-group}__button--before--BorderColor));
+    border-inline-end-color: var(--#{$toggle-group}__button--before--BorderInlineEndColor, var(--#{$toggle-group}__button--before--BorderColor));
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
@@ -115,12 +127,6 @@
     text-decoration: none;
   }
 
-  &:focus {
-    --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--focus--BackgroundColor);
-    --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--focus--ZIndex);
-    --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--focus--before--BorderColor);
-  }
-
   &.pf-m-selected {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
     --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
@@ -132,19 +138,25 @@
   &.pf-m-disabled {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--disabled--BackgroundColor);
     --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--disabled--Color);
+    --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--disabled--ZIndex);
+    --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--disabled--before--BorderColor);
 
     pointer-events: none;
   }
 }
 
+// For consecutive selected items, turn the left border back to what it was
+.pf-v5-c-toggle-group__item:has(.pf-m-selected) + .pf-v5-c-toggle-group__item:has(.pf-m-selected) {
+  --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
+}
+    
+// For consecutive disabled items, turn the left border back to what it was
+.pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v5-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
+  --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);
+}
+
 .#{$toggle-group}__icon + .#{$toggle-group}__text,
 .#{$toggle-group}__text + .#{$toggle-group}__icon {
   margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/toggle-group";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-toggle-group;
-}