@patternfly/patternfly 6.0.0-alpha.4 → 6.0.0-alpha.5

package/base/_globals.scss

@@ -122,8 +122,6 @@
   }
 
   :where(a) {
-    // TODO token for link font weight?
-    font-weight: var(--#{$pf-global}--link--FontWeight);
     color: var(--pf-t--global--text--color--link--default);
     text-decoration: var(--pf-t--global--link--text-decoration);
   }

package/base/patternfly-globals.css

@@ -100,7 +100,6 @@ pre) {
 }
 
 :where(a) {
-  font-weight: var(--pf-v5-global--link--FontWeight);
   color: var(--pf-t--global--text--color--link--default);
   text-decoration: var(--pf-t--global--link--text-decoration);
 }

package/components/Content/content.css

@@ -1,73 +1,73 @@
 .pf-v5-c-content {
-  --pf-v5-c-content--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-content--h1--FontSize: var(--pf-v5-global--FontSize--2xl);
-  --pf-v5-c-content--h1--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h2--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h2--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h2--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h2--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-content--h2--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h3--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h3--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h3--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h3--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-content--h3--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h4--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h4--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h4--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h4--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h4--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h5--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h5--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h5--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h5--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h5--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--h6--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--h6--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--h6--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--h6--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-content--h6--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-content--small--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--small--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-content--small--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-content--small--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--a--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-content--a--TextDecoration: var(--pf-v5-global--link--TextDecoration);
-  --pf-v5-c-content--a--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-content--a--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-content--a--visited--Color: var(--pf-v5-global--link--Color--visited);
-  --pf-v5-c-content--blockquote--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--blockquote--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-content--ol--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ol--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--MarginLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-content--ul--nested--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-content--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-content--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-content--small--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-content--a--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v5-c-content--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v5-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-content--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v5-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
+  --pf-v5-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-content--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-content--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300);
+  --pf-v5-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--ul--ListStyle: var(--pf-v5-global--ListStyle);
-  --pf-v5-c-content--li--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-content--dl--ColumnGap: var(--pf-v5-global--spacer--2xl);
-  --pf-v5-c-content--dl--RowGap: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-content--dt--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-content--dt--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --pf-v5-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--dt--sm--MarginTop: 0;
-  --pf-v5-c-content--hr--Height: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-content--hr--BackgroundColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
   font-size: var(--pf-v5-c-content--FontSize);
   line-height: var(--pf-v5-c-content--LineHeight);
   color: var(--pf-v5-c-content--Color);

package/components/Content/content.scss

@@ -2,101 +2,101 @@
 
 .#{$content} {
   // Body
-  --#{$content}--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$content}--FontSize: var(--pf-t--global--font--size--body);
+  --#{$content}--FontWeight: var(--pf-t--global--font--weight--body);
 
   // this ensures color is not overridden
-  --#{$content}--Color: var(--#{$pf-global}--Color--100);
+  --#{$content}--Color: var(--pf-t--global--text--color--regular);
 
   // Headings
-  --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading);
+  --#{$content}--heading--FontFamily: var(--pf-t--global--font--family--heading);
 
   // h1
-  --#{$content}--h1--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h1--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h1--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$content}--h1--FontSize: var(--#{$pf-global}--FontSize--2xl);
-  --#{$content}--h1--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h1--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h1--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --#{$content}--h1--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h2
-  --#{$content}--h2--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h2--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h2--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h2--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$content}--h2--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h2--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h2--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$content}--h2--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h3
-  --#{$content}--h3--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h3--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h3--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h3--FontSize: var(--#{$pf-global}--FontSize--lg);
-  --#{$content}--h3--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h3--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h3--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --#{$content}--h3--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h4
-  --#{$content}--h4--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h4--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h4--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h4--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h4--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h4--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h4--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h4--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h5
-  --#{$content}--h5--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h5--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h5--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h5--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h5--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h5--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h5--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h5--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h6
-  --#{$content}--h6--MarginTop: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--h6--MarginBottom: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--h6--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--h6--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$content}--h6--FontWeight: var(--#{$pf-global}--FontWeight--normal);
+  --#{$content}--h6--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$content}--h6--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$content}--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // Small text
-  --#{$content}--small--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--small--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$content}--small--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$content}--small--Color: var(--#{$pf-global}--Color--200);
+  --#{$content}--small--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--small--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$content}--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$content}--small--Color: var(--pf-t--global--text--color--subtle);
 
   // Links
-  --#{$content}--a--Color: var(--#{$pf-global}--link--Color);
-  --#{$content}--a--TextDecoration: var(--#{$pf-global}--link--TextDecoration);
-  --#{$content}--a--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$content}--a--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
-  --#{$content}--a--visited--Color: var(--#{$pf-global}--link--Color--visited);
+  --#{$content}--a--Color: var(--pf-t--global--text--color--link--default);
+  --#{$content}--a--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$content}--a--hover--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$content}--a--visited--Color: var(--pf-t--global--text--color--link--visited);
 
   // Blockquote
-  --#{$content}--blockquote--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$content}--blockquote--Color: var(--#{$pf-global}--Color--200);
-  --#{$content}--blockquote--BorderLeftColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$content}--blockquote--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--lg);
+  --#{$content}--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$content}--blockquote--Color: var(--pf-t--global--text--color--subtle);
+  --#{$content}--blockquote--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$content}--blockquote--BorderLeftWidth: var(--pf-t--global--border--width--300); // TODO semantic value?
 
   // Lists
-  --#{$content}--ol--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ol--MarginLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ol--nested--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ol--nested--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--PaddingLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ul--MarginLeft: var(--#{$pf-global}--spacer--lg);
-  --#{$content}--ul--nested--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--nested--MarginLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--ul--ListStyle: var(--#{$pf-global}--ListStyle);
-  --#{$content}--li--MarginTop: var(--#{$pf-global}--spacer--sm);
-  --#{$content}--dl--ColumnGap: var(--#{$pf-global}--spacer--2xl);
-  --#{$content}--dl--RowGap: var(--#{$pf-global}--spacer--md);
-  --#{$content}--dt--FontWeight: var(--#{$pf-global}--FontWeight--bold);
-  --#{$content}--dt--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$content}--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ol--MarginLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ul--MarginLeft: var(--pf-t--global--spacer--lg);
+  --#{$content}--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$content}--ul--ListStyle: var(--#{$pf-global}--ListStyle); // TODO
+  --#{$content}--li--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$content}--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
+  --#{$content}--dl--RowGap: var(--pf-t--global--spacer--md);
+  --#{$content}--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$content}--dt--MarginTop: var(--pf-t--global--spacer--md);
   --#{$content}--dt--sm--MarginTop: 0;
 
   // hr
-  --#{$content}--hr--Height: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$content}--hr--BackgroundColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$content}--hr--Height: var(--pf-t--global--border--width--divider--default);
+  --#{$content}--hr--BackgroundColor: var(--pf-t--global--border--color--default);
 
   font-size: var(--#{$content}--FontSize);
   line-height: var(--#{$content}--LineHeight);

package/components/MenuToggle/menu-toggle.css

@@ -1,36 +1,40 @@
 .pf-v5-c-menu-toggle {
-  --pf-v5-c-menu-toggle--BorderRadius: 0;
-  --pf-v5-c-menu-toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-menu-toggle--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-menu-toggle--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
-  --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-menu-toggle--before--BorderBottomWidth: 0;
-  --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-menu-toggle--before--BorderBottomColor: transparent;
-  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
-  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v5-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
+  --pf-v5-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-menu-toggle--active--BorderWidth: var(--pf-t--global--border--width--control--active);
+  --pf-v5-c-menu-toggle--active--BorderColor: var(--pf-t--global--border--color--active);
+  --pf-v5-c-menu-toggle--before--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-menu-toggle--before--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-menu-toggle--before--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-menu-toggle--before--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--pf-t--global--border--color--default);
   --pf-v5-c-menu-toggle--hover--BackgroundColor: transparent;
-  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-menu-toggle--hover--after--BorderBottomWidth: var(--pf-t--global--border--width--control--hover);
+  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: var(--pf-t--global--border--color--hover);
   --pf-v5-c-menu-toggle--focus--BackgroundColor: transparent;
-  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-menu-toggle--focus--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --pf-v5-c-menu-toggle--focus--after--BorderBottomColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-menu-toggle--active--BackgroundColor: transparent;
-  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-menu-toggle--active--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --pf-v5-c-menu-toggle--active--after--BorderBottomColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-menu-toggle--m-expanded--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: transparent;
-  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
-  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomWidth: var(--pf-t--global--border--width--control--active);
+  --pf-v5-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-t--global--border--color--active);
   --pf-v5-c-menu-toggle--disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-menu-toggle--m-primary--Color: var(--pf-v5-global--Color--light-100);
@@ -63,20 +67,19 @@
   --pf-v5-c-menu-toggle--m-plain--active--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
   --pf-v5-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-menu-toggle__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle__count--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle__controls--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle__controls--MarginLeft: auto;
   --pf-v5-c-menu-toggle__controls--MarginRight: 0;
-  --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-global--Color--200);
+  --pf-v5-c-menu-toggle__toggle-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-menu-toggle--m-full-height--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-menu-toggle--m-full-height__toggle--before--BorderTopWidth: 0;
   --pf-v5-c-menu-toggle--m-full-height__toggle--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-menu-toggle--m-full-height--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
   --pf-v5-c-menu-toggle--m-full-height--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--xl);
@@ -86,7 +89,7 @@
   --pf-v5-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
@@ -109,13 +112,13 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
   --pf-v5-c-menu-toggle__button--AlignSelf: baseline;
-  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__button--AlignSelf: center;
   position: relative;
   display: inline-flex;
@@ -128,9 +131,11 @@
   cursor: pointer;
   background-color: var(--pf-v5-c-menu-toggle--BackgroundColor);
   border: 0;
+}
+.pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle::before {
   border-radius: var(--pf-v5-c-menu-toggle--BorderRadius);
 }
-.pf-v5-c-menu-toggle::before, .pf-v5-c-menu-toggle::after {
+.pf-v5-c-menu-toggle::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -138,14 +143,10 @@
   left: 0;
   pointer-events: none;
   content: "";
-}
-.pf-v5-c-menu-toggle::before {
-  border-color: var(--pf-v5-c-menu-toggle--before--BorderTopColor) var(--pf-v5-c-menu-toggle--before--BorderRightColor) var(--pf-v5-c-menu-toggle--before--BorderBottomColor) var(--pf-v5-c-menu-toggle--before--BorderLeftColor);
-  border-style: solid;
-  border-width: var(--pf-v5-c-menu-toggle--before--BorderTopWidth) var(--pf-v5-c-menu-toggle--before--BorderRightWidth) var(--pf-v5-c-menu-toggle--before--BorderBottomWidth) var(--pf-v5-c-menu-toggle--before--BorderLeftWidth);
+  border: var(--pf-v5-c-menu-toggle--BorderWidth) solid var(--pf-v5-c-menu-toggle--BorderColor);
 }
 .pf-v5-c-menu-toggle::after {
-  border-bottom: var(--pf-v5-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-v5-c-menu-toggle--after--BorderBottomColor);
+  border-bottom: var(--pf-v5-c-menu-toggle--after--BorderWidth) solid var(--pf-v5-c-menu-toggle--after--BorderColor);
 }
 .pf-v5-c-menu-toggle.pf-m-primary {
   --pf-v5-c-menu-toggle--BorderRadius: var(--pf-v5-c-menu-toggle--m-primary--BorderRadius);
@@ -190,15 +191,11 @@
   --pf-v5-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
   --pf-v5-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-v5-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
 }
-.pf-v5-c-menu-toggle.pf-m-plain {
-  --pf-v5-c-menu-toggle__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain__toggle-icon--Color);
-}
 .pf-v5-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-plain--PaddingRight);
   --pf-v5-c-menu-toggle--PaddingLeft: var(--pf-v5-c-menu-toggle--m-plain--PaddingLeft);
   --pf-v5-c-menu-toggle--disabled--BackgroundColor: transparent;
   display: inline-block;
-  color: var(--pf-v5-c-menu-toggle--m-plain--Color);
 }
 .pf-v5-c-menu-toggle.pf-m-full-height {
   --pf-v5-c-menu-toggle--PaddingRight: var(--pf-v5-c-menu-toggle--m-full-height--PaddingRight);
@@ -213,25 +210,12 @@
   height: 100%;
 }
 .pf-v5-c-menu-toggle:hover {
-  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--hover--BackgroundColor);
-  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--hover--after--BorderBottomColor);
-  --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--hover__toggle-icon--Color);
-  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--hover--Color);
-}
-.pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:focus-within {
-  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--focus--BackgroundColor);
-  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--focus--after--BorderBottomColor);
-  --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--focus__toggle-icon--Color);
-  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--focus--Color);
-}
-.pf-v5-c-menu-toggle:active {
-  --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-c-menu-toggle--active--BackgroundColor);
-  --pf-v5-c-menu-toggle--after--BorderBottomWidth: var(--pf-v5-c-menu-toggle--active--after--BorderBottomWidth);
-  --pf-v5-c-menu-toggle--after--BorderBottomColor: var(--pf-v5-c-menu-toggle--active--after--BorderBottomColor);
-  --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-v5-c-menu-toggle--m-plain--active__toggle-icon--Color);
-  --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--active--Color);
+  --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--hover--BorderColor);
+  --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--hover--BorderWidth);
+}
+.pf-v5-c-menu-toggle:focus, .pf-v5-c-menu-toggle:active {
+  --pf-v5-c-menu-toggle--BorderColor: var(--pf-v5-c-menu-toggle--active--BorderColor);
+  --pf-v5-c-menu-toggle--BorderWidth: var(--pf-v5-c-menu-toggle--active--BorderWidth);
 }
 .pf-v5-c-menu-toggle.pf-m-expanded {
   --pf-v5-c-menu-toggle--Color: var(--pf-v5-c-menu-toggle--m-expanded--Color);
@@ -247,7 +231,7 @@
   --pf-v5-c-menu-toggle--m-plain--Color: var(--pf-v5-c-menu-toggle--m-plain--disabled--Color);
   pointer-events: none;
 }
-.pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle.pf-m-plain::before, .pf-v5-c-menu-toggle.pf-m-plain::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
+.pf-v5-c-menu-toggle.pf-m-primary::before, .pf-v5-c-menu-toggle.pf-m-primary::after, .pf-v5-c-menu-toggle:disabled::before, .pf-v5-c-menu-toggle:disabled::after {
   border: 0;
 }
 .pf-v5-c-menu-toggle.pf-m-typeahead {
@@ -407,7 +391,7 @@
 
 .pf-v5-c-menu-toggle__toggle-icon {
   margin-right: var(--pf-v5-c-menu-toggle__toggle-icon--MarginRight);
-  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color, inherit);
+  color: var(--pf-v5-c-menu-toggle__toggle-icon--Color);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-menu-toggle {