@patternfly/patternfly 5.2.0-prerelease.3 → 6.0.0-alpha.10

package/components/Page/page.scss

@@ -5,19 +5,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 // stylelint-enable
 
 :root {
-  --#{$page}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$page}--inset: var(--#{$pf-global}--spacer--md);
-  --#{$page}--xl--inset: var(--#{$pf-global}--spacer--lg);
+  --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$page}--inset: var(--pf-t--global--spacer--md);
+  --#{$page}--xl--inset: var(--pf-t--global--spacer--xl);
 
   // Header
-  --#{$page}__header--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-100);
+  --#{$page}__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__header--ZIndex: var(--#{$pf-global}--ZIndex--md);
   --#{$page}__header--MinHeight: #{pf-size-prem(76px)}; // fixed height for header to ensure consistency across screen sizes.
 
   // Header brand
-  --#{$page}__header-brand--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-brand--xl--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$page}__header-brand--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$page}__header-brand--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$page}__header-brand--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$page}__header-brand--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$page}__header-brand--PaddingLeft: var(--#{$page}__header-brand--xl--PaddingLeft);
@@ -25,22 +25,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Toggle
-  --#{$page}__header-sidebar-toggle__c-button--PaddingTop: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$page}__header-sidebar-toggle__c-button--MarginRight: var(--#{$pf-global}--spacer--md);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$page}__header-sidebar-toggle__c-button--MarginRight: var(--pf-t--global--spacer--md);
   --#{$page}__header-sidebar-toggle__c-button--MarginLeft: calc(var(--#{$page}__header-sidebar-toggle__c-button--PaddingLeft) * -1);
-  --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--#{$pf-global}--FontSize--2xl);
+  --#{$page}__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
 
   // Header brand link
   --#{$page}__header-brand-link--c-brand--MaxHeight: #{pf-size-prem(60px)};
 
   // Header nav
-  --#{$page}__header-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
+  --#{$page}__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__header-nav--xl--BackgroundColor: transparent;
-  --#{$page}__header-nav--xl--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$page}__header-nav--xl--PaddingLeft: var(--#{$pf-global}--spacer--xl);
+  --#{$page}__header-nav--xl--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$page}__header-nav--xl--PaddingLeft: var(--pf-t--global--spacer--xl);
 
   @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
     --#{$page}__header-nav--BackgroundColor: var(--#{$page}__header-nav--xl--BackgroundColor);
@@ -49,10 +49,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   // Header tools
-  --#{$page}__header-tools--MarginRight: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-tools--xl--MarginRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__header-tools--c-avatar--MarginLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__header-tools-group--MarginLeft: var(--#{$pf-global}--spacer--xl);
+  --#{$page}__header-tools--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$page}__header-tools--xl--MarginRight: var(--pf-t--global--spacer--lg);
+  --#{$page}__header-tools--c-avatar--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$page}__header-tools-group--MarginLeft: var(--pf-t--global--spacer--xl);
   --#{$page}__header-tools-group--Display: flex;
   --#{$page}__header-tools-item--Display: block;
 
@@ -77,17 +77,27 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--#{$pf-global}--ZIndex--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
-  --#{$page}__sidebar--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
+  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__sidebar--m-light--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$page}__sidebar--m-light--BorderRightColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$page}__sidebar--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-right);
+  --#{$page}__sidebar--BoxShadow: none;
   --#{$page}__sidebar--Transition: var(--#{$pf-global}--Transition);
   --#{$page}__sidebar--TranslateX: -100%;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
   --#{$page}__sidebar--xl--TranslateX: 0;
 
+  // Sidebar header
+  --#{$page}__sidebar-header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$page}__sidebar-header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$page}__sidebar-header--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$page}__sidebar-header--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$page}__sidebar-title--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$page}__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$page}__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$page}__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+
   // Sidebar body
   --#{$page}__sidebar-body--PaddingRight: 0;
   --#{$page}__sidebar-body--PaddingLeft: 0;
@@ -105,22 +115,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
   // Main section
-  --#{$page}__main-section--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--xl--PaddingTop: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-section--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-section--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-300);
-  --#{$page}__main-section--m-light--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$page}__main-section--m-light-100--BackgroundColor: var(--#{$pf-global}--BackgroundColor--150);
-  --#{$page}__main-section--m-dark-100--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
-  --#{$page}__main-section--m-dark-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-200);
-  --#{$page}__main-breadcrumb--page__main-tabs--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-nav--page__main-tabs--PaddingTop: var(--#{$pf-global}--spacer--md);
+  --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-section--PaddingRight: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-section--PaddingBottom: 0;
+  --#{$page}__main-section--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--BackgroundColor: transparent;
+  --#{$page}__main-section--m-light--BackgroundColor: transparent;
+  --#{$page}__main-section--m-light-100--BackgroundColor: transparent;
+  --#{$page}__main-section--m-dark-100--BackgroundColor: transparent;
+  --#{$page}__main-section--m-dark-200--BackgroundColor: transparent;
+  --#{$page}__main-breadcrumb--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-nav--page__main-tabs--PaddingTop: var(--pf-t--global--spacer--md);
 
   // Limit width
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
@@ -137,13 +144,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--section--m-shadow-top--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
   --#{$page}--section--m-shadow-top--ZIndex: var(--#{$pf-global}--ZIndex--xs);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-section--PaddingTop: var(--#{$page}__main-section--xl--PaddingTop);
-    --#{$page}__main-section--PaddingRight: var(--#{$page}__main-section--xl--PaddingRight);
-    --#{$page}__main-section--PaddingBottom: var(--#{$page}__main-section--xl--PaddingBottom);
-    --#{$page}__main-section--PaddingLeft: var(--#{$page}__main-section--xl--PaddingLeft);
-  }
-
   // Main section horizontal nav
   --#{$page}__main-nav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__main-nav--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -153,11 +153,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-nav--xl--PaddingRight: var(--#{$pf-global}--spacer--sm);
   --#{$page}__main-nav--xl--PaddingLeft: var(--#{$pf-global}--spacer--sm);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-nav--PaddingRight: var(--#{$page}__main-nav--xl--PaddingRight);
-    --#{$page}__main-nav--PaddingLeft: var(--#{$page}__main-nav--xl--PaddingLeft);
-  }
-
   // Main section horizontal subnav
   --#{$page}__main-subnav--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-300);
   --#{$page}__main-subnav--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
@@ -169,34 +164,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 
   // Main section breadcrumb
-  --#{$page}__main-breadcrumb--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$page}__main-breadcrumb--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--PaddingRight: var(--#{$pf-global}--spacer--md);
+  --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$page}__main-breadcrumb--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$page}__main-breadcrumb--PaddingBottom: 0;
-  --#{$page}__main-breadcrumb--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--m-sticky-top--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$page}__main-breadcrumb--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
-  --#{$page}__main-breadcrumb--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
+  --#{$page}__main-breadcrumb--PaddingLeft: var(--pf-t--global--spacer--lg);
 
   // Main section tabs
   --#{$page}__main-tabs--PaddingTop: 0;
   --#{$page}__main-tabs--PaddingRight: 0;
   --#{$page}__main-tabs--PaddingBottom: 0;
   --#{$page}__main-tabs--PaddingLeft: 0;
-  --#{$page}__main-tabs--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-    --#{$page}__main-breadcrumb--PaddingRight: var(--#{$page}__main-breadcrumb--xl--PaddingRight);
-    --#{$page}__main-breadcrumb--PaddingLeft: var(--#{$page}__main-breadcrumb--xl--PaddingLeft);
-  }
 
   // Wizard main section
   --#{$page}__main-wizard--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
   --#{$page}__main-wizard--BorderTopColor: var(--#{$pf-global}--BorderColor--100);
   --#{$page}__main-wizard--BorderTopWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$page}__main-wizard--m-light-200--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-
-  // URL.com/guidelines#layout
 }
 
 .#{$page} {
@@ -390,8 +373,6 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 // Sidebar
 .#{$page}__sidebar {
-  @include pf-v5-t-dark;
-
   z-index: var(--#{$page}__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
@@ -399,6 +380,10 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--#{$page}__sidebar--Width);
+  padding-block-start: 0;
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  padding-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--#{$page}__sidebar--MarginRight); // TODO need variable
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -439,6 +424,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 }
 
+.#{$page}__sidebar-header {
+  padding-block-start: var(--#{$page}__sidebar-header--PaddingTop);
+  padding-block-end: var(--#{$page}__sidebar-header--PaddingBottom);
+  border-block-end: var(--#{$page}__sidebar-header--BorderBottomWidth) solid var(--#{$page}__sidebar-header--BorderBottomColor);
+}
+
+.#{$page}__sidebar-title {
+  font-family: var(--#{$page}__sidebar-title--FontFamily);
+  font-size: var(--#{$page}__sidebar-title--FontSize);
+  font-weight: var(--#{$page}__sidebar-title--FontWeight);
+  line-height: var(--#{$page}__sidebar-title--LineHeight);
+}
+
 .#{$page}__sidebar-body {
   padding-inline-start: var(--#{$page}__sidebar-body--PaddingLeft);
   padding-inline-end: var(--#{$page}__sidebar-body--PaddingRight);
@@ -561,6 +559,19 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
+.#{$page}__main {
+  margin-block-start: 0;
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+  margin-inline-end: var(--pf-t--global--spacer--lg);
+}
+
+.#{$page}__main-list {
+  padding-block-end: var(--pf-t--global--spacer--lg);
+  margin-block-end: var(--pf-t--global--spacer--lg);
+  background-color: var(--pf-t--global--background--color--primary--default);
+  border-radius: var(--pf-t--global--border--radius--large);
+}
+
 .#{$page}__main,
 .#{$page}__drawer {
   z-index: var(--#{$page}__main--ZIndex);
@@ -576,7 +587,8 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main,
 .#{$page}__main-drawer,
-.#{$page}__main-group {
+.#{$page}__main-group,
+.#{$page}__main-list {
   display: flex;
   flex-direction: column;
 }

package/components/Radio/radio.css

@@ -5,8 +5,7 @@
   --pf-v5-c-radio__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-radio__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-radio__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-radio__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%);
-  --pf-v5-c-radio__input--TranslateY--moz: var(--pf-v5-c-radio__input--TranslateY);
+  --pf-v5-c-radio__input--TranslateY--moz: 5px;
   --pf-v5-c-radio__input--first-child--MarginLeft: 0.0625rem;
   --pf-v5-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v5-c-radio__description--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -19,14 +18,19 @@
 }
 .pf-v5-c-radio.pf-m-standalone {
   --pf-v5-c-radio--GridGap: 0;
-  --pf-v5-c-radio__input--TranslateY: none;
-  display: inline-grid;
+  --pf-v5-c-radio__input--TranslateY--moz: 0;
+  width: auto;
+}
+
+.pf-v5-c-radio__label {
+  font-size: var(--pf-v5-c-radio__label--FontSize);
+  font-weight: var(--pf-v5-c-radio__label--FontWeight);
+  line-height: var(--pf-v5-c-radio__label--LineHeight);
+  color: var(--pf-v5-c-radio__label--Color);
 }
 
 .pf-v5-c-radio__input {
-  align-self: start;
   -moz-transform: translateY(var(--pf-v5-c-radio__input--TranslateY--moz));
-  transform: translateY(var(--pf-v5-c-radio__input--TranslateY));
 }
 .pf-v5-c-radio__input:first-child {
   margin-inline-start: var(--pf-v5-c-radio__input--first-child--MarginLeft);
@@ -35,13 +39,6 @@
   margin-inline-end: var(--pf-v5-c-radio__input--last-child--MarginRight);
 }
 
-.pf-v5-c-radio__label {
-  font-size: var(--pf-v5-c-radio__label--FontSize);
-  font-weight: var(--pf-v5-c-radio__label--FontWeight);
-  line-height: var(--pf-v5-c-radio__label--LineHeight);
-  color: var(--pf-v5-c-radio__label--Color);
-}
-
 .pf-v5-c-radio__description {
   grid-column: 2;
   font-size: var(--pf-v5-c-radio__description--FontSize);

package/components/Radio/radio.scss

@@ -7,8 +7,7 @@
   --#{$radio}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
   --#{$radio}__label--FontSize: var(--#{$pf-global}--FontSize--md);
   --#{$radio}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$radio}__input--TranslateY: calc((var(--pf-v5-c-radio__label--LineHeight) * var(--pf-v5-c-radio__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
-  --#{$radio}__input--TranslateY--moz: var(--#{$radio}__input--TranslateY); // remove at breaking change
+  --#{$radio}__input--TranslateY--moz: 5px;
   --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
   --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
@@ -22,22 +21,24 @@
 
   &.pf-m-standalone {
     --#{$radio}--GridGap: 0;
-    --#{$radio}__input--TranslateY: none;
+    --#{$radio}__input--TranslateY--moz: 0;
 
-    display: inline-grid;
+    width: auto;
   }
 }
 
-.#{$radio}__input {
-  align-self: start;
+.#{$radio}__label {
+  font-size: var(--#{$radio}__label--FontSize);
+  font-weight: var(--#{$radio}__label--FontWeight);
+  line-height: var(--#{$radio}__label--LineHeight);
+  color: var(--#{$radio}__label--Color);
+}
 
+.#{$radio}__input {
   // stylelint-disable property-no-vendor-prefix
-  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz)); // remove at breaking change - no longer needed
+  -moz-transform: translateY(var(--#{$radio}__input--TranslateY--moz));
   // stylelint-enable
 
-  // find height of single label, divide by two, offset by 50% of own height
-  transform: translateY(var(--#{$radio}__input--TranslateY));
-
   // fixes a chrome issue where the left edge is cut off in a container with overflow hidden
   &:first-child {
     margin-inline-start: var(--#{$radio}__input--first-child--MarginLeft);
@@ -49,13 +50,6 @@
   }
 }
 
-.#{$radio}__label {
-  font-size: var(--#{$radio}__label--FontSize);
-  font-weight: var(--#{$radio}__label--FontWeight);
-  line-height: var(--#{$radio}__label--LineHeight);
-  color: var(--#{$radio}__label--Color);
-}
-
 .#{$radio}__description {
   grid-column: 2;
   font-size: var(--#{$radio}__description--FontSize);

package/components/Switch/switch.css

@@ -56,7 +56,7 @@
   cursor: pointer;
   opacity: 0;
 }
-.pf-v5-c-switch__input:focus-visible ~ .pf-v5-c-switch__toggle {
+.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
   outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
   outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
 }

package/components/Switch/switch.scss

@@ -74,7 +74,7 @@
   cursor: pointer;
   opacity: 0;
 
-  &:focus-visible ~ .#{$switch}__toggle {
+  &:focus ~ .#{$switch}__toggle {
     outline: var(--#{$switch}__input--focus__toggle--OutlineWidth) solid var(--#{$switch}__input--focus__toggle--OutlineColor);
     outline-offset: var(--#{$switch}__input--focus__toggle--OutlineOffset);
   }

package/components/Table/table-grid.css

@@ -1,13 +1,13 @@
 .pf-v5-c-table[class*=pf-m-grid] {
-  --pf-v5-c-table--responsive--BorderColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-table__tbody--after--border-width--base: var(--pf-v5-global--BorderWidth--lg);
   --pf-v5-c-table__tbody--after--BorderLeftWidth: 0;
-  --pf-v5-c-table__tbody--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-table__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
+  --pf-v5-c-table__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-table__tr--responsive--last-child--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-table__tr--responsive--GridColumnGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-table__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-table__tr--responsive--PaddingTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-table__tr--responsive--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-table__tr--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
@@ -23,7 +23,7 @@
   --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
   --pf-v5-c-table__tbody--m-expanded--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--400);
   --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftWidth: var(--pf-v5-c-table__expandable-row--after--border-width--base);
-  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-table__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-table--m-grid--cell--hidden-visible--Display: grid;
   --pf-v5-c-table--m-grid--cell--PaddingTop: 0;
   --pf-v5-c-table--m-grid--cell--PaddingRight: 0;
@@ -47,8 +47,8 @@
   --pf-v5-c-table__expandable-row-content--responsive--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-table__expandable-row-content--responsive--xl--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-table__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
   --pf-v5-c-table__check--responsive--MarginTop: 0.875rem;
   --pf-v5-c-table--m-grid__favorite--MarginTop: 0.5rem;
   --pf-v5-c-table--m-grid__check--favorite--MarginLeft: var(--pf-v5-global--spacer--xl);

package/components/Table/table-grid.scss

@@ -38,19 +38,19 @@
   // ============================================================ //
 
   // Table
-  --#{$table}--responsive--BorderColor: var(--#{$pf-global}--BorderColor--300);
+  --#{$table}--responsive--BorderColor: var(--pf-t--global--border--color--default);
 
   // Body
-  --#{$table}__tbody--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
   --#{$table}__tbody--after--BorderLeftWidth: 0;
-  --#{$table}__tbody--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__tbody--after--BorderColor: var(--pf-t--global--border--color--active);
 
   // Row
-  --#{$table}__tr--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tr--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
   --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
-  --#{$table}__tr--responsive--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__tr--responsive--MarginTop: var(--pf-t--global--border--width--divider--default);
   --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
   --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
@@ -76,7 +76,7 @@
 
   // selected
   --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
-  --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--100);
+  --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--pf-t--global--border--color--active);
 
   // Cell display
   --#{$table}--m-grid--cell--hidden-visible--Display: grid;
@@ -110,7 +110,7 @@
   --#{$table}__expandable-row-content--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
   --#{$table}__expandable-row-content--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
   --#{$table}__expandable-row-content--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$table}__expandable-row-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$table}__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
     --#{$table}__expandable-row-content--responsive--PaddingRight: var(--#{$table}__expandable-row-content--responsive--xl--PaddingRight);
@@ -118,7 +118,7 @@
   }
 
   // Check
-  --#{$table}__check--responsive--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$table}__check--responsive--MarginLeft: var(--pf-t--global--border--width--divider--default);
   --#{$table}__check--responsive--MarginTop: #{pf-size-prem(14px)};
 
   // Favorite