@patternfly/patternfly 6.0.0-alpha.29 → 6.0.0-alpha.30

package/base/tokens/_tokens-font.scss

@@ -14,15 +14,6 @@
   --pf-t--global--font--weight--body--200: 500;
   --pf-t--global--font--weight--heading--100: 700;
   --pf-t--global--font--weight--heading--200: 700;
-  --pf-t--global--font--size--body--100: 12px;
-  --pf-t--global--font--size--body--200: 14px;
-  --pf-t--global--font--size--body--300: 16px;
-  --pf-t--global--font--size--heading--100: 16px;
-  --pf-t--global--font--size--heading--200: 18px;
-  --pf-t--global--font--size--heading--300: 20px;
-  --pf-t--global--font--size--heading--400: 22px;
-  --pf-t--global--font--size--heading--500: 28px;
-  --pf-t--global--font--size--heading--600: 36px;
 
   // Semantic tokens for fonts
   --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
@@ -34,16 +25,14 @@
   --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
   --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
   --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
-  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--body--100);
-  --pf-t--global--font--size--body--md: var(--pf-t--global--font--size--body--200);
-  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--body--300);
-  --pf-t--global--font--size--body: var(--pf-t--global--font--size--body--md);
-  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--heading--100);
-  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--heading--200);
-  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--heading--300);
-  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--heading--400);
-  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--heading--500);
-  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--heading--600);
+
+  // TODO Maintaining these in addition to the h1-h6 sizes
+  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
+  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
+  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
+  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl);
+  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
+  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl);
 
   // Legacy/non-variable font opt-in
   --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
@@ -58,7 +47,7 @@
   // text-decoration
   --pf-t--global--text-decoration--100: none;
   --pf-t--global--text-decoration--200: underline;
-  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
+  --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--100);
   --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
 
   // blend modes 
@@ -66,11 +55,6 @@
   --pf-t--global--mix-blend-mode--200: screen;
   --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
 
-  // semantic border width
-  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
-  --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
-
   // box-shadow
   --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 16%);
   --pf-t--global--box-shadow--sm--top: 0px -1px 2px 0px rgb(0 0 0 / 16%);

package/base/tokens/_tokens-palette.scss

@@ -1,75 +1,75 @@
 /**
  * Do not edit directly
- * Generated on Wed, 04 Oct 2023 12:59:21 GMT
+ * Generated on Tue, 05 Dec 2023 16:11:05 GMT
  */
 
 :root {
-  --pf-t--color--white: #fff;
+  --pf-t--color--red--70: #5f0000;
+  --pf-t--color--red--60: #a60000;
+  --pf-t--color--red--50: #e00;
+  --pf-t--color--red--40: #f56e6e;
+  --pf-t--color--red--30: #f9a8a8;
+  --pf-t--color--red--20: #fbc5c5;
+  --pf-t--color--red--10: #fce3e3;
+  --pf-t--color--purple--70: #21134d;
+  --pf-t--color--purple--60: #3d2785;
+  --pf-t--color--purple--50: #5e40be;
+  --pf-t--color--purple--40: #876fd4;
+  --pf-t--color--purple--30: #b6a6e9;
+  --pf-t--color--purple--20: #d0c5f4;
+  --pf-t--color--purple--10: #ece6ff;
+  --pf-t--color--red-orange--70: #731f00;
+  --pf-t--color--red-orange--60: #b1380b;
+  --pf-t--color--red-orange--50: #f0561d;
+  --pf-t--color--red-orange--40: #f4784a;
+  --pf-t--color--red-orange--30: #f89b78;
+  --pf-t--color--red-orange--20: #fbbea8;
+  --pf-t--color--red-orange--10: #ffe3d9;
+  --pf-t--color--orange--70: #732e00;
+  --pf-t--color--orange--60: #9e4a06;
+  --pf-t--color--orange--50: #ca6c0f;
+  --pf-t--color--orange--40: #f5921b;
+  --pf-t--color--orange--30: #f8ae54;
+  --pf-t--color--orange--20: #fccb8f;
+  --pf-t--color--orange--10: #ffe8cc;
+  --pf-t--color--green--70: #204d00;
+  --pf-t--color--green--60: #3d7317;
+  --pf-t--color--green--50: #63993d;
+  --pf-t--color--green--40: #87bb62;
+  --pf-t--color--green--30: #afdc8f;
+  --pf-t--color--green--20: #d1f1bb;
+  --pf-t--color--green--10: #e9f7df;
+  --pf-t--color--yellow--70: #73480b;
+  --pf-t--color--yellow--60: #96640f;
+  --pf-t--color--yellow--50: #b98412;
+  --pf-t--color--yellow--40: #dca614;
+  --pf-t--color--yellow--30: #ffcc17;
+  --pf-t--color--yellow--20: #ffe072;
+  --pf-t--color--yellow--10: #fff4cc;
+  --pf-t--color--teal--70: #004d4d;
+  --pf-t--color--teal--60: #147878;
+  --pf-t--color--teal--50: #37a3a3;
+  --pf-t--color--teal--40: #63bdbd;
+  --pf-t--color--teal--30: #9ad8d8;
+  --pf-t--color--teal--20: #b9e5e5;
+  --pf-t--color--teal--10: #daf2f2;
+  --pf-t--color--blue--70: #036;
+  --pf-t--color--blue--60: #004d99;
+  --pf-t--color--blue--50: #06c;
+  --pf-t--color--blue--40: #4394e5;
+  --pf-t--color--blue--30: #92c5f9;
+  --pf-t--color--blue--20: #b9dafc;
+  --pf-t--color--blue--10: #e0f0ff;
   --pf-t--color--black: #000;
-  --pf-t--color--gray--1000: #151515;
-  --pf-t--color--gray--900: #1f1f1f;
-  --pf-t--color--gray--800: #292929;
-  --pf-t--color--gray--700: #383838;
-  --pf-t--color--gray--600: #4d4d4d;
-  --pf-t--color--gray--500: #6e6e6e;
-  --pf-t--color--gray--400: #a3a3a3;
-  --pf-t--color--gray--300: #c7c7c7;
-  --pf-t--color--gray--200: #e0e0e0;
-  --pf-t--color--gray--100: #f2f2f2;
-  --pf-t--color--cyan--700: #023233;
-  --pf-t--color--cyan--600: #074c4d;
-  --pf-t--color--cyan--500: #187577;
-  --pf-t--color--cyan--400: #42adaf;
-  --pf-t--color--cyan--300: #88dadb;
-  --pf-t--color--cyan--200: #b3ebec;
-  --pf-t--color--cyan--100: #e3fcfc;
-  --pf-t--color--blue--700: #001c43;
-  --pf-t--color--blue--600: #002b68;
-  --pf-t--color--blue--500: #0043a0;
-  --pf-t--color--blue--400: #0c61d9;
-  --pf-t--color--blue--300: #60a2ff;
-  --pf-t--color--blue--200: #9cc5ff;
-  --pf-t--color--blue--100: #d9e9ff;
-  --pf-t--color--gold--700: #4e3500;
-  --pf-t--color--gold--600: #755200;
-  --pf-t--color--gold--500: #ac7a00;
-  --pf-t--color--gold--400: #f0ab00;
-  --pf-t--color--gold--300: #ffcd5b;
-  --pf-t--color--gold--200: #ffdc9b;
-  --pf-t--color--gold--100: #ffefd9;
-  --pf-t--color--green--700: #062901;
-  --pf-t--color--green--600: #0b3906;
-  --pf-t--color--green--500: #1b5813;
-  --pf-t--color--green--400: #3e8635;
-  --pf-t--color--green--300: #83c079;
-  --pf-t--color--green--200: #b2deaa;
-  --pf-t--color--green--100: #e7fce3;
-  --pf-t--color--orange--700: #501d00;
-  --pf-t--color--orange--600: #792f04;
-  --pf-t--color--orange--500: #b14e14;
-  --pf-t--color--orange--400: #f7823d;
-  --pf-t--color--orange--300: #ffb989;
-  --pf-t--color--orange--200: #ffd1b2;
-  --pf-t--color--orange--100: #ffe7d9;
-  --pf-t--color--orangered--700: #331500;
-  --pf-t--color--orangered--600: #552000;
-  --pf-t--color--orangered--500: #882d00;
-  --pf-t--color--orangered--400: #cc3a00;
-  --pf-t--color--orangered--300: #ff542e;
-  --pf-t--color--orangered--200: #ff947c;
-  --pf-t--color--orangered--100: #ffd3c9;
-  --pf-t--color--purple--700: #1c1337;
-  --pf-t--color--purple--600: #291b55;
-  --pf-t--color--purple--500: #3e2882;
-  --pf-t--color--purple--400: #5f40be;
-  --pf-t--color--purple--300: #9a81e5;
-  --pf-t--color--purple--200: #c0b0f1;
-  --pf-t--color--purple--100: #eae3fc;
-  --pf-t--color--red--700: #3a0400;
-  --pf-t--color--red--600: #5a0600;
-  --pf-t--color--red--500: #8a0a00;
-  --pf-t--color--red--400: #c9190b;
-  --pf-t--color--red--300: #ee665b;
-  --pf-t--color--red--200: #f69f98;
-  --pf-t--color--red--100: #ffdbd9;
+  --pf-t--color--gray--95: #151515;
+  --pf-t--color--gray--90: #1f1f1f;
+  --pf-t--color--gray--80: #292929;
+  --pf-t--color--gray--70: #383838;
+  --pf-t--color--gray--60: #4d4d4d;
+  --pf-t--color--gray--50: #707070;
+  --pf-t--color--gray--40: #a3a3a3;
+  --pf-t--color--gray--30: #c7c7c7;
+  --pf-t--color--gray--20: #e0e0e0;
+  --pf-t--color--gray--10: #f2f2f2;
+  --pf-t--color--white: #fff;
 }

package/base/tokens/_workspace-overrides.scss

@@ -0,0 +1,7 @@
+// stylelint-disable
+html {
+  .ws-preview {
+    background-color: var(--pf-t--global--background--color--primary--default);
+  }
+}
+// stylelint-enable

package/components/Accordion/accordion.css

@@ -24,7 +24,7 @@
   --pf-v5-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
   --pf-v5-c-accordion__expandable-content-body--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-accordion__expandable-content-body--PaddingRight: var(--pf-t--global--spacer--sm);

package/components/Accordion/accordion.scss

@@ -39,7 +39,7 @@
   --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
-  --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
 
   // accordion expandable content body

package/components/Alert/alert.css

@@ -6,14 +6,14 @@
     "icon title action"
     ". description description"
     ". actiongroup actiongroup";
-  --pf-v5-c-alert--BorderWidth: var(--pf-t--global--border--width--200);
+  --pf-v5-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v5-c-alert--BorderColor: transparent;
   --pf-v5-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v5-c-alert--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v5-c-alert--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-alert--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-alert--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v5-c-alert--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-alert__toggle--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element) - 0.0625rem);
   --pf-v5-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
   --pf-v5-c-alert__toggle--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Alert/alert.scss

@@ -11,14 +11,14 @@
     "icon title action"
     ". description description"
     ". actiongroup actiongroup";
-  --#{$alert}--BorderWidth: var(--pf-t--global--border--width--200);
+  --#{$alert}--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$alert}--BorderColor: transparent;
   --#{$alert}--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$alert}--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$alert}--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$alert}--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$alert}--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$alert}--FontSize: var(--pf-t--global--font--size--body);
+  --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Toggle
   --#{$alert}__toggle--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element) - #{pf-size-prem(1px)});

package/components/Banner/banner.css

@@ -5,7 +5,7 @@
   --pf-v5-c-banner--PaddingBottom: var(--pf-t--global--spacer--xs);
   --pf-v5-c-banner--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-banner--md--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-banner--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --pf-v5-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v5-c-banner--link--Color: var(--pf-v5-c-banner--Color);

package/components/Banner/banner.scss

@@ -7,7 +7,7 @@
   --#{$banner}--PaddingBottom: var(--pf-t--global--spacer--xs);
   --#{$banner}--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$banner}--md--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$banner}--FontSize: var(--pf-t--global--font--size--body);
+  --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
   --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
 

package/components/Breadcrumb/breadcrumb.css

@@ -1,22 +1,25 @@
-.pf-v5-c-breadcrumb {
-  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
-  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-v5-global--link--TextDecoration);
-  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
-  --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-v5-global--Color--100);
+:root, .pf-v5-c-breadcrumb {
+  --pf-v5-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
+  --pf-v5-c-breadcrumb__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --pf-v5-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --pf-v5-c-breadcrumb__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --pf-v5-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-breadcrumb__link--BackgroundColor: transparent;
-  --pf-v5-c-breadcrumb__heading--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
+  --pf-v5-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v5-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-v5-c-breadcrumb__item--MarginRight) * -1);
-  --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-v5-global--spacer--form-element) * -1);
+  --pf-v5-c-breadcrumb__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v5-c-breadcrumb__dropdown--MarginLeft: calc(var(--pf-v5-c-breadcrumb__item-divider--MarginRight) * -1);
-  --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-v5-global--LineHeight--sm);
+  --pf-v5-c-breadcrumb__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+}
+
+.pf-v5-c-breadcrumb {
   display: inline-flex;
 }
 

package/components/Breadcrumb/breadcrumb.scss

@@ -1,36 +1,38 @@
 // @debug $breadcrumb; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$breadcrumb} {
+:root, .#{$breadcrumb} {
   // Breadcrumb item
-  --#{$breadcrumb}__item--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$breadcrumb}__item--LineHeight: var(--#{$pf-global}--LineHeight--sm);
-  --#{$breadcrumb}__item--MarginRight: var(--#{$pf-global}--spacer--sm);
+  --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$breadcrumb}__item--MarginRight: var(--pf-t--global--spacer--sm);
 
   // Breadcrumb divider
-  --#{$breadcrumb}__item-divider--Color: var(--#{$pf-global}--icon--Color--dark);
-  --#{$breadcrumb}__item-divider--MarginRight: var(--#{$pf-global}--spacer--sm);
-  --#{$breadcrumb}__item-divider--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$breadcrumb}__item-divider--Color: var(--pf-t--global--icon--color--regular);
+  --#{$breadcrumb}__item-divider--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$breadcrumb}__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // Breadcrumb link
-  --#{$breadcrumb}__link--Color: var(--#{$pf-global}--link--Color);
-  --#{$breadcrumb}__link--TextDecoration: var(--#{$pf-global}--link--TextDecoration);
-  --#{$breadcrumb}__link--hover--Color: var(--#{$pf-global}--link--Color--hover);
-  --#{$breadcrumb}__link--hover--TextDecoration: var(--#{$pf-global}--link--TextDecoration--hover);
-  --#{$breadcrumb}__link--m-current--Color: var(--#{$pf-global}--Color--100);
+  --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
+  --#{$breadcrumb}__link--TextDecoration: var(--pf-t--global--link--text-decoration);
+  --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
+  --#{$breadcrumb}__link--hover--TextDecoration: var(--pf-t--global--link--text-decoration--hover);
+  --#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --#{$breadcrumb}__link--BackgroundColor: transparent;
 
   // Heading
-  --#{$breadcrumb}__heading--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // breadcrumb dropdown
-  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: check with design as this replaces --#{$pf-global}--spacer--form-element (6px) with spacer--sm (8px)
   --#{$breadcrumb}__dropdown--MarginRight: calc(var(--#{$breadcrumb}__item--MarginRight) * -1);
-  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: same as above
   --#{$breadcrumb}__dropdown--MarginLeft: calc(var(--#{$breadcrumb}__item-divider--MarginRight) * -1);
 
   // breadcrumb toggle
-  --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$breadcrumb}__dropdown--c-dropdown__toggle--LineHeight: var(--pf-t--global--font--line-height--body);
+}
 
+.#{$breadcrumb} {
   display: inline-flex;
 }
 

package/components/Button/button.css

@@ -5,7 +5,7 @@
   --pf-v5-c-button--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v5-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v5-c-button--FontWeight: var(--pf-t--global--font--weight--body);
-  --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-button--BackgroundColor: transparent;
   --pf-v5-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v5-c-button--after--BorderColor: transparent;

package/components/Button/button.scss

@@ -8,7 +8,7 @@
   --#{$button}--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$button}--FontWeight: var(--pf-t--global--font--weight--body);
-  --#{$button}--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$button}--BackgroundColor: transparent;
   --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$button}--after--BorderColor: transparent;

package/components/Content/content.css

@@ -1,39 +1,39 @@
 .pf-v5-c-content {
   --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--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--lg);
+  --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--md);
+  --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--sm);
+  --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--xs);
+  --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--xs);
+  --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--xs);
+  --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);

package/components/Content/content.scss

@@ -4,7 +4,7 @@
   // Body
   --#{$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}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$content}--FontWeight: var(--pf-t--global--font--weight--body);
 
   // this ensures color is not overridden
@@ -17,42 +17,42 @@
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h1);
   --#{$content}--h1--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h2
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h2);
   --#{$content}--h2--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h3
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h3);
   --#{$content}--h3--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h4
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h4);
   --#{$content}--h4--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h5
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h5);
   --#{$content}--h5--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // h6
   --#{$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--FontSize: var(--pf-t--global--font--size--heading--h6);
   --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading);
 
   // Small text

package/components/Hint/hint.css

@@ -6,14 +6,14 @@
   --pf-v5-c-hint--PaddingLeft: var(--pf-t--global--spacer--lg);
   --pf-v5-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
-  --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--200);
+  --pf-v5-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v5-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v5-c-hint--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-hint__title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v5-c-hint__title--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v5-c-hint__title--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-hint__title--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-hint__footer--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-hint__footer--child--MarginRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-hint__actions--MarginLeft: var(--pf-t--global--spacer--2xl);

package/components/Hint/hint.scss

@@ -8,7 +8,7 @@
   --#{$hint}--PaddingLeft: var(--pf-t--global--spacer--lg);
   --#{$hint}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$hint}--BorderColor: var(--pf-t--global--border--color--status--info--default);
-  --#{$hint}--BorderWidth: var(--pf-t--global--border--width--200); // TODO - need semantic variable
+  --#{$hint}--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$hint}--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$hint}--Color: var(--pf-t--global--text--color--regular);
 
@@ -19,7 +19,7 @@
   --#{$hint}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
 
   // Hint Body
-  --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$hint}__body--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Hint Footer
   --#{$hint}__footer--MarginTop: var(--pf-t--global--spacer--sm);

package/components/Login/login.css

@@ -27,7 +27,7 @@
   --pf-v5-c-login__main-header--RowGap: var(--pf-t--global--spacer--md);
   --pf-v5-c-login__main-header-desc--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-login__main-header-desc--md--MarginBottom: 0;
-  --pf-v5-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-login__main-body--PaddingRight: var(--pf-t--global--spacer--xl);
   --pf-v5-c-login__main-body--PaddingBottom: var(--pf-t--global--spacer--xl);
   --pf-v5-c-login__main-body--PaddingLeft: var(--pf-t--global--spacer--xl);

package/components/Login/login.scss

@@ -58,7 +58,7 @@
   // main header desc
   --#{$login}__main-header-desc--MarginBottom: var(--pf-t--global--spacer--sm);
   --#{$login}__main-header-desc--md--MarginBottom: 0;
-  --#{$login}__main-header-desc--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$login}__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
 
 
   @media (min-width: $pf-v5-global--breakpoint--md) {

package/components/MenuToggle/menu-toggle.css

@@ -4,7 +4,7 @@
   --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--FontSize: var(--pf-t--global--font--size--body--default);
   --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);

package/components/MenuToggle/menu-toggle.scss

@@ -6,7 +6,7 @@
   --#{$menu-toggle}--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--PaddingBottom: var(--pf-t--global--spacer--sm); // TODO semantic spacer?
   --#{$menu-toggle}--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--md);
+  --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);

package/components/ModalBox/modal-box.css

@@ -31,7 +31,7 @@
   --pf-v5-c-modal-box__title-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-modal-box__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v5-c-modal-box__description--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body) * var(--pf-t--global--font--line-height--body));
+  --pf-v5-c-modal-box__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body));
   --pf-v5-c-modal-box__body--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-modal-box__body--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v5-c-modal-box__body--PaddingLeft: var(--pf-t--global--spacer--lg);

package/components/ModalBox/modal-box.scss

@@ -51,7 +51,7 @@
   --#{$modal-box}__description--Color: var(--pf-t--global--text--color--subtle);
   
   // Body
-  --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
+  --#{$modal-box}__body--MinHeight: calc(var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)); // Allow for at least 1 line of content in the body
   --#{$modal-box}__body--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$modal-box}__body--PaddingRight: var(--pf-t--global--spacer--lg);
   --#{$modal-box}__body--PaddingLeft: var(--pf-t--global--spacer--lg);