@patternfly/react-styles 6.0.0-alpha.1 → 6.0.0-alpha.11

package/css/components/Card/card.mjs

@@ -10,9 +10,9 @@ export default {
   "cardHeaderToggle": "pf-v5-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v5-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v5-c-card__selectable-actions",
-  "cardSrInput": "pf-v5-c-card__sr-input",
   "cardTitle": "pf-v5-c-card__title",
   "cardTitleText": "pf-v5-c-card__title-text",
+  "check": "pf-v5-c-check",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
   "dirRtl": "pf-v5-m-dir-rtl",
@@ -23,22 +23,18 @@ export default {
     "selected": "pf-m-selected",
     "current": "pf-m-current",
     "disabled": "pf-m-disabled",
-    "hoverableRaised": "pf-m-hoverable-raised",
-    "selectableRaised": "pf-m-selectable-raised",
-    "nonSelectableRaised": "pf-m-non-selectable-raised",
-    "selectedRaised": "pf-m-selected-raised",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",
-    "flat": "pf-m-flat",
+    "secondary": "pf-m-secondary",
     "plain": "pf-m-plain",
-    "rounded": "pf-m-rounded",
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height",
     "toggleRight": "pf-m-toggle-right",
     "noOffset": "pf-m-no-offset",
+    "inline": "pf-m-inline",
     "noFill": "pf-m-no-fill"
   },
+  "radio": "pf-v5-c-radio",
   "radioInput": "pf-v5-c-radio__input",
-  "radioLabel": "pf-v5-c-radio__label",
-  "themeDark": "pf-v5-theme-dark"
+  "radioLabel": "pf-v5-c-radio__label"
 };

package/css/components/Check/check.css

@@ -1,29 +1,38 @@
+:root,
+.pf-v5-c-check {
+  --pf-v5-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --pf-v5-c-check--AccentColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v5-c-check__label--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-check__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v5-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-check__description--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-check__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
+}
+
 .pf-v5-c-check {
-  --pf-v5-c-check--GridGap: var(--pf-v5-global--spacer--xs) var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-check__label--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-check__label--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-check__input--TranslateY--moz: 5px;
-  --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-check__label-required--MarginLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-check__label-required--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-check__label-required--Color: var(--pf-v5-global--danger-color--100);
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-check--GridGap);
+  accent-color: var(--pf-v5-c-check--AccentColor);
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--TranslateY--moz: 0;
+  --pf-v5-c-check__input--TranslateY: none;
   display: inline-grid;
 }
 
+.pf-v5-c-check__input {
+  align-self: start;
+  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
+}
+
 .pf-v5-c-check__label {
-  align-self: baseline;
   font-size: var(--pf-v5-c-check__label--FontSize);
   font-weight: var(--pf-v5-c-check__label--FontWeight);
   line-height: var(--pf-v5-c-check__label--LineHeight);
@@ -38,12 +47,6 @@
 
 .pf-v5-c-check__body {
   grid-column: 2;
-  margin-block-start: var(--pf-v5-c-check__body--MarginTop);
-}
-
-.pf-v5-c-check__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
 }
 
 .pf-v5-c-check__label,

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

@@ -1,30 +1,35 @@
-.pf-v5-c-clipboard-copy {
+:where(:root),
+:where(.pf-v5-c-clipboard-copy) {
   --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
-  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
   --pf-v5-c-clipboard-copy--m-inline--PaddingTop: 0;
   --pf-v5-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
 }
+
 .pf-v5-c-clipboard-copy.pf-m-expanded .pf-v5-c-clipboard-copy__toggle-icon {
   transform: rotate(var(--pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
 }
@@ -42,6 +47,7 @@
 
 .pf-v5-c-clipboard-copy__group {
   display: flex;
+  gap: var(--pf-v5-c-clipboard-copy__group--Gap);
 }
 .pf-v5-c-clipboard-copy__group > * + * {
   margin-inline-start: -1px;
@@ -59,6 +65,7 @@
   padding-block-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight);
+  margin-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--MarginTop);
   word-wrap: break-word;
   background-color: var(--pf-v5-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
@@ -67,6 +74,7 @@
   border-block-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth);
   border-inline-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
   border-inline-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth);
+  border-radius: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRadius);
   box-shadow: var(--pf-v5-c-clipboard-copy__expandable-content--BoxShadow);
 }
 .pf-v5-c-clipboard-copy__expandable-content pre {
@@ -95,15 +103,4 @@
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingRight);
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
-  margin-inline-start: 0;
-  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700) !important;
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
-  border: 0;
 }

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

@@ -14,7 +14,6 @@ declare const _default: {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

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

@@ -16,6 +16,5 @@ exports.default = {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

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

@@ -14,6 +14,5 @@ export default {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/CodeBlock/code-block.css

@@ -1,18 +1,27 @@
+:root, :where(.pf-v5-c-code-block) {
+  --pf-v5-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
+
 .pf-v5-c-code-block {
-  --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
   background-color: var(--pf-v5-c-code-block--BackgroundColor);
+  border-radius: var(--pf-v5-c-code-block--BorderRadius);
 }
 
 .pf-v5-c-code-block__header {
   display: flex;
+  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
   border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 

package/css/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--default);
+  --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--h1);
+  --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--h2);
+  --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--h3);
+  --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--h4);
+  --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--h5);
+  --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--h6);
+  --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);