@patternfly/patternfly 6.0.0-alpha.117 → 6.0.0-alpha.118

package/base/patternfly-variables.css

@@ -1,244 +1,3 @@
-:where(:root) {
-  --pf-v6-global--palette--black-100: #fafafa;
-  --pf-v6-global--palette--black-150: #f5f5f5;
-  --pf-v6-global--palette--black-200: #f0f0f0;
-  --pf-v6-global--palette--black-300: #d2d2d2;
-  --pf-v6-global--palette--black-400: #b8bbbe;
-  --pf-v6-global--palette--black-500: #8a8d90;
-  --pf-v6-global--palette--black-600: #6a6e73;
-  --pf-v6-global--palette--black-700: #4f5255;
-  --pf-v6-global--palette--black-800: #3c3f42;
-  --pf-v6-global--palette--black-850: #212427;
-  --pf-v6-global--palette--black-900: #151515;
-  --pf-v6-global--palette--black-1000: #030303;
-  --pf-v6-global--palette--blue-50: #e7f1fa;
-  --pf-v6-global--palette--blue-100: #bee1f4;
-  --pf-v6-global--palette--blue-200: #73bcf7;
-  --pf-v6-global--palette--blue-300: #2b9af3;
-  --pf-v6-global--palette--blue-400: #06c;
-  --pf-v6-global--palette--blue-500: #004080;
-  --pf-v6-global--palette--blue-600: #002952;
-  --pf-v6-global--palette--blue-700: #001223;
-  --pf-v6-global--palette--cyan-50: #f2f9f9;
-  --pf-v6-global--palette--cyan-100: #a2d9d9;
-  --pf-v6-global--palette--cyan-200: #73c5c5;
-  --pf-v6-global--palette--cyan-300: #009596;
-  --pf-v6-global--palette--cyan-400: #005f60;
-  --pf-v6-global--palette--cyan-500: #003737;
-  --pf-v6-global--palette--cyan-600: #002323;
-  --pf-v6-global--palette--cyan-700: #000f0f;
-  --pf-v6-global--palette--gold-50: #fdf7e7;
-  --pf-v6-global--palette--gold-100: #f9e0a2;
-  --pf-v6-global--palette--gold-200: #f6d173;
-  --pf-v6-global--palette--gold-300: #f4c145;
-  --pf-v6-global--palette--gold-400: #f0ab00;
-  --pf-v6-global--palette--gold-500: #c58c00;
-  --pf-v6-global--palette--gold-600: #795600;
-  --pf-v6-global--palette--gold-700: #3d2c00;
-  --pf-v6-global--palette--green-50: #f3faf2;
-  --pf-v6-global--palette--green-100: #bde5b8;
-  --pf-v6-global--palette--green-200: #95d58e;
-  --pf-v6-global--palette--green-300: #6ec664;
-  --pf-v6-global--palette--green-400: #5ba352;
-  --pf-v6-global--palette--green-500: #3e8635;
-  --pf-v6-global--palette--green-600: #1e4f18;
-  --pf-v6-global--palette--green-700: #0f280d;
-  --pf-v6-global--palette--light-blue-100: #beedf9;
-  --pf-v6-global--palette--light-blue-200: #7cdbf3;
-  --pf-v6-global--palette--light-blue-300: #35caed;
-  --pf-v6-global--palette--light-blue-400: #00b9e4;
-  --pf-v6-global--palette--light-blue-500: #008bad;
-  --pf-v6-global--palette--light-blue-600: #005c73;
-  --pf-v6-global--palette--light-blue-700: #002d39;
-  --pf-v6-global--palette--light-green-100: #e4f5bc;
-  --pf-v6-global--palette--light-green-200: #c8eb79;
-  --pf-v6-global--palette--light-green-300: #ace12e;
-  --pf-v6-global--palette--light-green-400: #92d400;
-  --pf-v6-global--palette--light-green-500: #6ca100;
-  --pf-v6-global--palette--light-green-600: #486b00;
-  --pf-v6-global--palette--light-green-700: #253600;
-  --pf-v6-global--palette--orange-50: #fff6ec;
-  --pf-v6-global--palette--orange-100: #f4b678;
-  --pf-v6-global--palette--orange-200: #ef9234;
-  --pf-v6-global--palette--orange-300: #ec7a08;
-  --pf-v6-global--palette--orange-400: #c46100;
-  --pf-v6-global--palette--orange-500: #8f4700;
-  --pf-v6-global--palette--orange-600: #773d00;
-  --pf-v6-global--palette--orange-700: #3b1f00;
-  --pf-v6-global--palette--purple-50: #f2f0fc;
-  --pf-v6-global--palette--purple-100: #cbc1ff;
-  --pf-v6-global--palette--purple-200: #b2a3ff;
-  --pf-v6-global--palette--purple-300: #a18fff;
-  --pf-v6-global--palette--purple-400: #8476d1;
-  --pf-v6-global--palette--purple-500: #6753ac;
-  --pf-v6-global--palette--purple-600: #40199a;
-  --pf-v6-global--palette--purple-700: #1f0066;
-  --pf-v6-global--palette--red-50: #faeae8;
-  --pf-v6-global--palette--red-100: #c9190b;
-  --pf-v6-global--palette--red-200: #a30000;
-  --pf-v6-global--palette--red-300: #7d1007;
-  --pf-v6-global--palette--red-400: #470000;
-  --pf-v6-global--palette--red-500: #2c0000;
-  --pf-v6-global--palette--white: #fff;
-  --pf-v6-global--BackgroundColor--100: #fff;
-  --pf-v6-global--BackgroundColor--150: #fafafa;
-  --pf-v6-global--BackgroundColor--200: #f0f0f0;
-  --pf-v6-global--BackgroundColor--light-100: #fff;
-  --pf-v6-global--BackgroundColor--light-200: #fafafa;
-  --pf-v6-global--BackgroundColor--light-300: #f0f0f0;
-  --pf-v6-global--BackgroundColor--dark-100: #151515;
-  --pf-v6-global--BackgroundColor--dark-200: #3c3f42;
-  --pf-v6-global--BackgroundColor--dark-300: #212427;
-  --pf-v6-global--BackgroundColor--dark-400: #4f5255;
-  --pf-v6-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
-  --pf-v6-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);
-  --pf-v6-global--Color--100: #151515;
-  --pf-v6-global--Color--200: #6a6e73;
-  --pf-v6-global--Color--300: #3c3f42;
-  --pf-v6-global--Color--400: #8a8d90;
-  --pf-v6-global--Color--light-100: #fff;
-  --pf-v6-global--Color--light-200: #f0f0f0;
-  --pf-v6-global--Color--light-300: #d2d2d2;
-  --pf-v6-global--Color--dark-100: #151515;
-  --pf-v6-global--Color--dark-200: #6a6e73;
-  --pf-v6-global--active-color--100: #06c;
-  --pf-v6-global--active-color--200: #bee1f4;
-  --pf-v6-global--active-color--300: #2b9af3;
-  --pf-v6-global--active-color--400: #73bcf7;
-  --pf-v6-global--disabled-color--100: #6a6e73;
-  --pf-v6-global--disabled-color--200: #d2d2d2;
-  --pf-v6-global--disabled-color--300: #f0f0f0;
-  --pf-v6-global--primary-color--100: #06c;
-  --pf-v6-global--primary-color--200: #004080;
-  --pf-v6-global--primary-color--light-100: #73bcf7;
-  --pf-v6-global--primary-color--dark-100: #06c;
-  --pf-v6-global--secondary-color--100: #6a6e73;
-  --pf-v6-global--custom-color--100: #73c5c5;
-  --pf-v6-global--custom-color--200: #009596;
-  --pf-v6-global--custom-color--300: #003737;
-  --pf-v6-global--success-color--100: #3e8635;
-  --pf-v6-global--success-color--200: #1e4f18;
-  --pf-v6-global--info-color--100: #2b9af3;
-  --pf-v6-global--info-color--200: #002952;
-  --pf-v6-global--warning-color--100: #f0ab00;
-  --pf-v6-global--warning-color--200: #795600;
-  --pf-v6-global--danger-color--100: #c9190b;
-  --pf-v6-global--danger-color--200: #a30000;
-  --pf-v6-global--danger-color--300: #470000;
-  --pf-v6-global--BoxShadow--sm: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06);
-  --pf-v6-global--BoxShadow--sm-top: 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
-  --pf-v6-global--BoxShadow--sm-right: 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
-  --pf-v6-global--BoxShadow--sm-bottom: 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
-  --pf-v6-global--BoxShadow--sm-left: -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16);
-  --pf-v6-global--BoxShadow--md: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
-  --pf-v6-global--BoxShadow--md-top: 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--md-right: 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--md-bottom: 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--md-left: -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--lg: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
-  --pf-v6-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
-  --pf-v6-global--BoxShadow--xl: 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1);
-  --pf-v6-global--BoxShadow--xl-top: 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
-  --pf-v6-global--BoxShadow--xl-right: 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
-  --pf-v6-global--BoxShadow--xl-bottom: 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2);
-  --pf-v6-global--BoxShadow--xl-left: -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2);
-  --pf-v6-global--BoxShadow--inset: inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25);
-  --pf-v6-global--font-path: "./assets/fonts";
-  --pf-v6-global--fonticon-path: "./assets/pficon";
-  --pf-v6-global--spacer--xs: 0.25rem;
-  --pf-v6-global--spacer--sm: 0.5rem;
-  --pf-v6-global--spacer--md: 1rem;
-  --pf-v6-global--spacer--lg: 1.5rem;
-  --pf-v6-global--spacer--xl: 2rem;
-  --pf-v6-global--spacer--2xl: 3rem;
-  --pf-v6-global--spacer--3xl: 4rem;
-  --pf-v6-global--spacer--4xl: 5rem;
-  --pf-v6-global--spacer--form-element: 0.375rem;
-  --pf-v6-global--gutter: 1rem;
-  --pf-v6-global--gutter--md: 1.5rem;
-  --pf-t--global--z-index--xs: 100;
-  --pf-t--global--z-index--sm: 200;
-  --pf-t--global--z-index--md: 300;
-  --pf-t--global--z-index--lg: 400;
-  --pf-t--global--z-index--xl: 500;
-  --pf-t--global--z-index--2xl: 600;
-  --pf-v6-global--breakpoint--xs: 0;
-  --pf-v6-global--breakpoint--sm: 576px;
-  --pf-v6-global--breakpoint--md: 768px;
-  --pf-v6-global--breakpoint--lg: 992px;
-  --pf-v6-global--breakpoint--xl: 1200px;
-  --pf-v6-global--breakpoint--2xl: 1450px;
-  --pf-v6-global--height-breakpoint--sm: 0;
-  --pf-v6-global--height-breakpoint--md: 40rem;
-  --pf-v6-global--height-breakpoint--lg: 48rem;
-  --pf-v6-global--height-breakpoint--xl: 60rem;
-  --pf-v6-global--height-breakpoint--2xl: 80rem;
-  --pf-v6-global--link--Color: #06c;
-  --pf-v6-global--link--Color--hover: #004080;
-  --pf-v6-global--link--Color--light: #2b9af3;
-  --pf-v6-global--link--Color--light--hover: #73bcf7;
-  --pf-v6-global--link--Color--dark: #06c;
-  --pf-v6-global--link--Color--dark--hover: #004080;
-  --pf-v6-global--link--Color--visited: #40199a;
-  --pf-v6-global--link--TextDecoration: none;
-  --pf-v6-global--link--TextDecoration--hover: underline;
-  --pf-v6-global--BorderWidth--sm: 1px;
-  --pf-v6-global--BorderWidth--md: 2px;
-  --pf-v6-global--BorderWidth--lg: 3px;
-  --pf-v6-global--BorderWidth--xl: 4px;
-  --pf-v6-global--BorderColor--100: #d2d2d2;
-  --pf-v6-global--BorderColor--200: #8a8d90;
-  --pf-v6-global--BorderColor--300: #f0f0f0;
-  --pf-v6-global--BorderColor--dark-100: #d2d2d2;
-  --pf-v6-global--BorderColor--light-100: #b8bbbe;
-  --pf-v6-global--BorderRadius--sm: 3px;
-  --pf-v6-global--BorderRadius--lg: 30em;
-  --pf-v6-global--icon--Color--light: #6a6e73;
-  --pf-v6-global--icon--Color--dark: #151515;
-  --pf-v6-global--icon--Color--light--light: #f0f0f0;
-  --pf-v6-global--icon--Color--dark--light: #fff;
-  --pf-v6-global--icon--Color--light--dark: #6a6e73;
-  --pf-v6-global--icon--Color--dark--dark: #151515;
-  --pf-v6-global--icon--FontSize--sm: 0.75rem;
-  --pf-v6-global--icon--FontSize--md: 1rem;
-  --pf-v6-global--icon--FontSize--lg: 1.5rem;
-  --pf-v6-global--icon--FontSize--xl: 3.375rem;
-  --pf-v6-global--FontFamily--text: "RedHatText", helvetica, arial, sans-serif;
-  --pf-v6-global--FontFamily--heading: "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v6-global--FontFamily--monospace: "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v6-global--FontFamily--text--vf: "RedHatTextVF", "RedHatText", helvetica, arial, sans-serif;
-  --pf-v6-global--FontFamily--heading--vf: "RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif;
-  --pf-v6-global--FontFamily--monospace--vf: "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
-  --pf-v6-global--FontSize--4xl: 2.25rem;
-  --pf-v6-global--FontSize--3xl: 1.75rem;
-  --pf-v6-global--FontSize--2xl: 1.5rem;
-  --pf-v6-global--FontSize--xl: 1.25rem;
-  --pf-v6-global--FontSize--lg: 1.125rem;
-  --pf-v6-global--FontSize--md: 1rem;
-  --pf-v6-global--FontSize--sm: 0.875rem;
-  --pf-v6-global--FontSize--xs: 0.75rem;
-  --pf-v6-global--FontWeight--normal: 400;
-  --pf-v6-global--FontWeight--bold: 700;
-  --pf-v6-global--LineHeight--sm: 1.3;
-  --pf-v6-global--LineHeight--md: 1.5;
-  --pf-v6-global--ListStyle: disc outside;
-  --pf-t--global--transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
-  --pf-t--global--transition--timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --pf-t--global--transition--duration: 250ms;
-  --pf-v6-global--arrow--width: 0.9375rem;
-  --pf-v6-global--arrow--width-lg: 1.5625rem;
-  --pf-v6-global--target-size--MinWidth: 44px;
-  --pf-v6-global--target-size--MinHeight: 44px;
-  --pf-v6-global--inverse--multiplier: 1;
-}
-
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) {
-  --pf-v6-global--inverse--multiplier: -1;
-}
-
 html .ws-preview {
   background-color: var(--pf-t--global--background--color--primary--default);
 }
@@ -1340,4 +1099,12 @@ html .ws-preview {
   --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
+}
+
+:where(:root) {
+  --pf-v6-global--inverse--multiplier: 1;
+}
+
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) {
+  --pf-v6-global--inverse--multiplier: -1;
 }

package/components/AppLauncher/app-launcher.css

@@ -231,14 +231,4 @@
   font-size: var(--pf-v6-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-v6-c-app-launcher__group-title--FontWeight);
   color: var(--pf-v6-c-app-launcher__group-title--Color);
-}
-
-:where(.pf-v6-theme-dark) .pf-v6-c-app-launcher {
-  --pf-v6-c-app-launcher__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--300);
-  --pf-v6-c-app-launcher__menu--Top: 100%;
-  --pf-v6-c-app-launcher__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--400);
-  --pf-v6-c-app-launcher__menu-item--disabled--Color: var(--pf-v6-global--palette--black-300);
-  --pf-v6-c-app-launcher__menu-item--m-action--Color: var(--pf-v6-global--Color--200);
-  --pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color: var(--pf-v6-global--palette--gold-300);
-  --pf-v6-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color: var(--pf-v6-global--palette--gold-100);
 }

package/components/AppLauncher/app-launcher.scss

@@ -299,10 +299,3 @@
   font-weight: var(--#{$app-launcher}__group-title--FontWeight);
   color: var(--#{$app-launcher}__group-title--Color);
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/app-launcher";
-
-@include pf-v6-theme-dark {
-  @include pf-v6-theme-dark-app-launcher;
-}

package/components/Chip/chip-group.css

@@ -1,17 +1,4 @@
 .pf-v6-c-chip-group {
-  --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
-  --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
-  --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
-  --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
-  --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
-  --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
-  --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
-}
-
-.pf-v6-c-chip-group {
-  color: var(--pf-v6-global--Color--100);
   --pf-v6-c-chip-group--PaddingTop: 0;
   --pf-v6-c-chip-group--PaddingRight: 0;
   --pf-v6-c-chip-group--PaddingBottom: 0;

package/components/Chip/chip-group.scss

@@ -1,8 +1,6 @@
 // @debug $chip-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$chip}-group {
-  @include pf-v6-t-light; // force the container follow the light theme
-
   // Chip group - spaces main and close
   // column-gap spacer supports legacy chip group
   --#{$chip}-group--PaddingTop: 0;

package/components/Chip/chip.css

@@ -1,15 +1,3 @@
-.pf-v6-c-chip {
-  --pf-v6-global--Color--100: var(--pf-v6-global--Color--dark-100);
-  --pf-v6-global--Color--200: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-global--BorderColor--100: var(--pf-v6-global--BorderColor--dark-100);
-  --pf-v6-global--primary-color--100: var(--pf-v6-global--primary-color--dark-100);
-  --pf-v6-global--link--Color: var(--pf-v6-global--link--Color--dark);
-  --pf-v6-global--link--Color--hover: var(--pf-v6-global--link--Color--dark--hover);
-  --pf-v6-global--BackgroundColor--100: var(--pf-v6-global--BackgroundColor--light-100);
-  --pf-v6-global--icon--Color--light: var(--pf-v6-global--icon--Color--light--dark);
-  --pf-v6-global--icon--Color--dark: var(--pf-v6-global--icon--Color--dark--dark);
-}
-
 .pf-v6-c-chip {
   --pf-v6-c-chip--PaddingTop: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-chip--PaddingRight: var(--pf-v6-global--spacer--sm);
@@ -39,7 +27,6 @@
   --pf-v6-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v6-c-chip--PaddingBottom) * -1);
   --pf-v6-c-chip__actions--c-button--FontSize: var(--pf-v6-global--FontSize--xs);
   --pf-v6-c-chip__icon--MarginLeft: var(--pf-v6-global--spacer--sm);
-  color: var(--pf-v6-global--Color--100);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -113,10 +100,4 @@
   margin-block-end: var(--pf-v6-c-chip__actions--c-button--MarginBottom);
   margin-inline-end: var(--pf-v6-c-chip__actions--c-button--MarginRight);
   line-height: 1;
-}
-
-:where(.pf-v6-theme-dark) .pf-v6-c-chip {
-  --pf-v6-c-chip--BackgroundColor: var(--pf-v6-global--BackgroundColor--100);
-  --pf-v6-c-chip--before--BorderColor: var(--pf-v6-global--BorderColor--100);
-  --pf-v6-c-chip--m-draggable--BackgroundColor: var(--pf-v6-global--palette--black-600);
 }

package/components/Chip/chip.scss

@@ -44,8 +44,6 @@
   // icon
   --#{$chip}__icon--MarginLeft: var(--#{$pf-global}--spacer--sm);
 
-  @include pf-v6-t-light;  // This component always needs to be light
-
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -131,10 +129,3 @@
     line-height: 1;
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/chip";
-
-@include pf-v6-theme-dark {
-  @include pf-v6-theme-dark-chip;
-}

package/components/Content/content.css

@@ -1,4 +1,5 @@
-.pf-v6-c-content {
+:where(:root),
+:where(.pf-v6-c-content) {
   --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
@@ -68,123 +69,138 @@
   --pf-v6-c-content--dt--sm--MarginTop: 0;
   --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
+}
+
+.pf-v6-c-content {
   font-size: var(--pf-v6-c-content--FontSize);
   line-height: var(--pf-v6-c-content--LineHeight);
   color: var(--pf-v6-c-content--Color);
 }
-.pf-v6-c-content a {
+:is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
   text-decoration: var(--pf-v6-c-content--a--TextDecoration);
 }
-.pf-v6-c-content a:hover {
+:is(.pf-v6-c-content--a, .pf-v6-c-content a):hover {
   --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
   --pf-v6-c-content--a--TextDecoration: var(--pf-v6-c-content--a--hover--TextDecoration);
 }
-.pf-v6-c-content.pf-m-visited a:visited,
-.pf-v6-c-content a.pf-m-visited:visited {
+
+:is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
   color: var(--pf-v6-c-content--a--visited--Color);
 }
-.pf-v6-c-content li + li {
+
+:is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
   margin-block-start: var(--pf-v6-c-content--li--MarginTop);
 }
-.pf-v6-c-content p:not(:last-child),
-.pf-v6-c-content dl:not(:last-child),
-.pf-v6-c-content ol:not(:last-child),
-.pf-v6-c-content ul:not(:last-child),
-.pf-v6-c-content blockquote:not(:last-child),
-.pf-v6-c-content small:not(:last-child),
-.pf-v6-c-content pre:not(:last-child),
-.pf-v6-c-content table:not(:last-child),
-.pf-v6-c-content hr:not(:last-child) {
+
+:is(.pf-v6-c-content--p,
+.pf-v6-c-content--dl,
+.pf-v6-c-content--ol,
+.pf-v6-c-content--ul,
+.pf-v6-c-content--blockquote,
+.pf-v6-c-content--small,
+.pf-v6-c-content--pre,
+.pf-v6-c-content--table,
+.pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
   margin-block-end: var(--pf-v6-c-content--MarginBottom);
 }
-.pf-v6-c-content h1,
-.pf-v6-c-content h2,
-.pf-v6-c-content h3,
-.pf-v6-c-content h4,
-.pf-v6-c-content h5,
-.pf-v6-c-content h6 {
+
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
   margin: 0;
   font-family: var(--pf-v6-c-content--heading--FontFamily);
 }
-.pf-v6-c-content h1:first-child,
-.pf-v6-c-content h2:first-child,
-.pf-v6-c-content h3:first-child,
-.pf-v6-c-content h4:first-child,
-.pf-v6-c-content h5:first-child,
-.pf-v6-c-content h6:first-child {
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
   margin-block-start: 0;
 }
-.pf-v6-c-content h1:last-child,
-.pf-v6-c-content h2:last-child,
-.pf-v6-c-content h3:last-child,
-.pf-v6-c-content h4:last-child,
-.pf-v6-c-content h5:last-child,
-.pf-v6-c-content h6:last-child {
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
-.pf-v6-c-content ol,
-.pf-v6-c-content ul {
+
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
   margin: 0;
 }
-.pf-v6-c-content ol.pf-m-plain,
-.pf-v6-c-content ul.pf-m-plain {
+:is(.pf-v6-c-content--ol,
+.pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
   padding-inline-start: 0;
   margin-inline-start: 0;
   list-style: none;
 }
-.pf-v6-c-content h1 {
+
+:is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h1--MarginBottom);
   font-size: var(--pf-v6-c-content--h1--FontSize);
   font-weight: var(--pf-v6-c-content--h1--FontWeight);
   line-height: var(--pf-v6-c-content--h1--LineHeight);
 }
-.pf-v6-c-content h2 {
+
+:is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
   margin-block-start: var(--pf-v6-c-content--h2--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h2--MarginBottom);
   font-size: var(--pf-v6-c-content--h2--FontSize);
   font-weight: var(--pf-v6-c-content--h2--FontWeight);
   line-height: var(--pf-v6-c-content--h2--LineHeight);
 }
-.pf-v6-c-content h3 {
+
+:is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
   margin-block-start: var(--pf-v6-c-content--h3--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h3--MarginBottom);
   font-size: var(--pf-v6-c-content--h3--FontSize);
   font-weight: var(--pf-v6-c-content--h3--FontWeight);
   line-height: var(--pf-v6-c-content--h3--LineHeight);
 }
-.pf-v6-c-content h4 {
+
+:is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
   margin-block-start: var(--pf-v6-c-content--h4--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h4--MarginBottom);
   font-size: var(--pf-v6-c-content--h4--FontSize);
   font-weight: var(--pf-v6-c-content--h4--FontWeight);
   line-height: var(--pf-v6-c-content--h4--LineHeight);
 }
-.pf-v6-c-content h5 {
+
+:is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
   margin-block-start: var(--pf-v6-c-content--h5--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h5--MarginBottom);
   font-size: var(--pf-v6-c-content--h5--FontSize);
   font-weight: var(--pf-v6-c-content--h5--FontWeight);
   line-height: var(--pf-v6-c-content--h5--LineHeight);
 }
-.pf-v6-c-content h6 {
+
+:is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
   margin-block-start: var(--pf-v6-c-content--h6--MarginTop);
   margin-block-end: var(--pf-v6-c-content--h6--MarginBottom);
   font-size: var(--pf-v6-c-content--h6--FontSize);
   font-weight: var(--pf-v6-c-content--h6--FontWeight);
   line-height: var(--pf-v6-c-content--h6--LineHeight);
 }
-.pf-v6-c-content small {
+
+:is(.pf-v6-c-content--small, .pf-v6-c-content small) {
   display: block;
   font-size: var(--pf-v6-c-content--small--FontSize);
   line-height: var(--pf-v6-c-content--small--LineHeight);
   color: var(--pf-v6-c-content--small--Color);
 }
-.pf-v6-c-content small:not(:last-child) {
+:is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
   margin-block-end: var(--pf-v6-c-content--small--MarginBottom);
 }
-.pf-v6-c-content blockquote {
+
+:is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
   padding-block-start: var(--pf-v6-c-content--blockquote--PaddingTop);
   padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBottom);
   padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingLeft);
@@ -192,65 +208,75 @@
   color: var(--pf-v6-c-content--blockquote--Color);
   border-inline-start: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor);
 }
-.pf-v6-c-content hr {
+
+:is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
   height: var(--pf-v6-c-content--hr--Height);
   background-color: var(--pf-v6-c-content--hr--BackgroundColor);
   border: none;
 }
-.pf-v6-c-content ol {
+
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) {
   padding-inline-start: var(--pf-v6-c-content--ol--PaddingLeft);
   margin-inline-start: var(--pf-v6-c-content--ol--MarginLeft);
 }
-.pf-v6-c-content ol ul {
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ul,
+ul) {
   --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
   margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
 }
-.pf-v6-c-content ol ol {
+:is(.pf-v6-c-content--ol, .pf-v6-c-content ol) :is(.pf-v6-c-content--ol,
+ol) {
   --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
   margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
 }
-.pf-v6-c-content ul {
+
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
   padding-inline-start: var(--pf-v6-c-content--ul--PaddingLeft);
   margin-inline-start: var(--pf-v6-c-content--ul--MarginLeft);
   list-style: var(--pf-v6-c-content--ul--ListStyle);
 }
-.pf-v6-c-content ul ul {
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ul,
+ul) {
   --pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft);
   margin-block-start: var(--pf-v6-c-content--ul--nested--MarginTop);
 }
-.pf-v6-c-content ul ol {
+:is(.pf-v6-c-content--ul, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
+ol) {
   --pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft);
   margin-block-start: var(--pf-v6-c-content--ol--nested--MarginTop);
 }
-.pf-v6-c-content dl {
+
+:is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
   display: grid;
   grid-template-columns: 1fr;
 }
 @media screen and (min-width: 576px) {
-  .pf-v6-c-content dl {
+  :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
     grid-template: auto/auto 1fr;
     grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
     grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
   }
 }
-.pf-v6-c-content dt {
+
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
   font-weight: var(--pf-v6-c-content--dt--FontWeight);
 }
-.pf-v6-c-content dt:not(:first-child) {
+:is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
   margin-block-start: var(--pf-v6-c-content--dt--MarginTop);
 }
 @media screen and (min-width: 576px) {
-  .pf-v6-c-content dt:not(:first-child) {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
     --pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop);
   }
 }
 @media screen and (min-width: 576px) {
-  .pf-v6-c-content dt {
+  :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
     grid-column: 1;
   }
 }
+
 @media screen and (min-width: 576px) {
-  .pf-v6-c-content dd {
+  :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
     grid-column: 2;
   }
 }