@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/Check/check.scss

@@ -1,36 +1,46 @@
 // @debug $check; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$check} {
-  --#{$check}--GridGap: var(--#{$pf-global}--spacer--xs) var(--#{$pf-global}--spacer--sm);
-  --#{$check}__label--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$check}__label--Color: var(--#{$pf-global}--Color--100);
-  --#{$check}__label--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$check}__label--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$check}__label--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$check}__input--TranslateY--moz: 5px;
-  --#{$check}__description--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$check}__description--Color: var(--#{$pf-global}--Color--200);
-  --#{$check}__body--MarginTop: var(--#{$pf-global}--spacer--sm);
+  --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
+  --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$check}__label--Color: var(--pf-t--global--text--color--regular);
+  --#{$check}__label--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$check}__label--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$check}__label--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$check}__input--TranslateY: calc((var(--#{$check}__label--LineHeight) * var(--#{$check}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height  
+  --#{$check}__description--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$check}__description--Color: var(--pf-t--global--text--color--subtle);
 
   // Required checkbox
-  --#{$check}__label-required--MarginLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$check}__label-required--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$check}__label-required--Color: var(--#{$pf-global}--danger-color--100);
+  --#{$check}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$check}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$check}__label-required--Color: var(--pf-t--global--color--status--danger--default);
+}
 
+.#{$check} {
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--#{$check}--GridGap);
+  accent-color: var(--#{$check}--AccentColor);
 
   &.pf-m-standalone {
     --#{$check}--GridGap: 0;
-    --#{$check}__input--TranslateY--moz: 0;
+    --#{$check}__input--TranslateY: none;
 
     display: inline-grid;
   }
 }
 
+.#{$check}__input {
+  align-self: start;
+
+  // find height of single label, divide by two, offset by 50% of own height
+  transform: translateY(var(--#{$check}__input--TranslateY));
+}
+
 .#{$check}__label {
-  align-self: baseline;
   font-size: var(--#{$check}__label--FontSize);
   font-weight: var(--#{$check}__label--FontWeight);
   line-height: var(--#{$check}__label--LineHeight);
@@ -45,15 +55,7 @@
 
 .#{$check}__body {
   grid-column: 2;
-  margin-block-start: var(--#{$check}__body--MarginTop);
-}
-
-// stylelint-disable property-no-vendor-prefix
-.#{$check}__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--#{$check}__input--TranslateY--moz));
 }
-// stylelint-enable
 
 .#{$check}__label,
 .#{$check}__input {

package/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/components/ClipboardCopy/clipboard-copy.scss

@@ -1,41 +1,49 @@
 // @debug $clipboard-copy; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$clipboard-copy} {
+:where(:root),
+:where(.#{$clipboard-copy}) {
   // Toggle icon
   --#{$clipboard-copy}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Clipboard copy expanded content
-  --#{$clipboard-copy}__expandable-content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--#{$pf-global}--BackgroundColor--light-100);
-  --#{$clipboard-copy}__expandable-content--BorderTopWidth: 0;
-  --#{$clipboard-copy}__expandable-content--BorderRightWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderLeftWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$clipboard-copy}__expandable-content--BorderColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$clipboard-copy}__expandable-content--OutlineOffset: calc(-1 * var(--#{$pf-global}--spacer--xs));
+  --#{$clipboard-copy}__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$clipboard-copy}__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+
+  // Group
+  --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
 
   // Inline
   --#{$clipboard-copy}--m-inline--PaddingTop: 0; // remove at breaking change
   --#{$clipboard-copy}--m-inline--PaddingBottom: 0; // remove at breaking change
-  --#{$clipboard-copy}--m-inline--PaddingLeft: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
+  --#{$clipboard-copy}--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Text
-  --#{$clipboard-copy}__text--m-code--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
-  --#{$clipboard-copy}__text--m-code--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$clipboard-copy}__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+  --#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Actions
-  --#{$clipboard-copy}__actions-item--MarginTop: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$clipboard-copy}__actions-item--MarginBottom: calc(-1 * var(--#{$pf-global}--spacer--form-element));
-  --#{$clipboard-copy}__actions-item--button--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$clipboard-copy}__actions-item--button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$clipboard-copy}__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
+}
 
+.#{$clipboard-copy} {
   // Toggle button expanded
   &.pf-m-expanded {
     .#{$clipboard-copy}__toggle-icon {
@@ -57,8 +65,10 @@
   }
 }
 
+
 .#{$clipboard-copy}__group {
   display: flex;
+  gap: var(--#{$clipboard-copy}__group--Gap);
 
   > * + * {
     margin-inline-start: -1px;
@@ -76,6 +86,7 @@
   padding-block-end: var(--#{$clipboard-copy}__expandable-content--PaddingBottom);
   padding-inline-start: var(--#{$clipboard-copy}__expandable-content--PaddingLeft);
   padding-inline-end: var(--#{$clipboard-copy}__expandable-content--PaddingRight);
+  margin-block-start: var(--#{$clipboard-copy}__expandable-content--MarginTop);
   word-wrap: break-word;
   background-color: var(--#{$clipboard-copy}__expandable-content--BackgroundColor);
   background-clip: padding-box;
@@ -84,6 +95,7 @@
   border-block-end-width: var(--#{$clipboard-copy}__expandable-content--BorderBottomWidth);
   border-inline-start-width: var(--#{$clipboard-copy}__expandable-content--BorderLeftWidth);
   border-inline-end-width: var(--#{$clipboard-copy}__expandable-content--BorderRightWidth);
+  border-radius: var(--#{$clipboard-copy}__expandable-content--BorderRadius);
   box-shadow: var(--#{$clipboard-copy}__expandable-content--BoxShadow);
 
   pre {
@@ -118,8 +130,4 @@
 }
 
 // stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/clipboard-copy";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-clipboard-copy;
-}

package/components/CodeBlock/code-block.css

@@ -1,18 +1,31 @@
+: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--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-block__header--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --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-block-start: var(--pf-v5-c-code-block__header--PaddingTop);
+  padding-block-end: var(--pf-v5-c-code-block__header--PaddingBottom);
+  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/components/CodeBlock/code-block.scss

@@ -1,21 +1,33 @@
 // @debug $code-block; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$code-block} {
-  --#{$code-block}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$code-block}__header--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$code-block}__header--BorderBottomColor: var(--#{$pf-global}--BorderColor--100);
-  --#{$code-block}__content--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__content--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$code-block}__pre--FontFamily: var(--#{$pf-global}--FontFamily--monospace);
-  --#{$code-block}__pre--FontSize: var(--#{$pf-global}--FontSize--sm);
+:root, :where(.#{$code-block}) {
+  --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$code-block}__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$code-block}__header--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$code-block}__header--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$code-block}__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$code-block}__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$code-block}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$code-block}__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --#{$code-block}__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
 
+.#{$code-block} {
   background-color: var(--#{$code-block}--BackgroundColor);
+  border-radius: var(--#{$code-block}--BorderRadius);
 }
 
 .#{$code-block}__header {
   display: flex;
+  padding-block-start: var(--#{$code-block}__header--PaddingTop);
+  padding-block-end: var(--#{$code-block}__header--PaddingBottom);
+  padding-inline-start: var(--#{$code-block}__header--PaddingLeft);
+  padding-inline-end: var(--#{$code-block}__header--PaddingRight);
   border-block-end: var(--#{$code-block}__header--BorderBottomWidth) solid var(--#{$code-block}__header--BorderBottomColor);
 }
 

package/components/CodeEditor/code-editor.css

@@ -1,39 +1,56 @@
-.pf-v5-c-code-editor {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
+:where(:root), :where(.pf-v5-c-code-editor) {
+  --pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-editor__upload--before--BorderWidth: 0;
+  --pf-v5-c-code-editor__upload--before--BorderColor: transparent;
+  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
+  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
+  --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
-  --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
   --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
-  --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
 }
+
 .pf-v5-c-code-editor.pf-m-read-only {
   --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
 }
@@ -41,7 +58,6 @@
 .pf-v5-c-code-editor__header {
   position: relative;
   display: flex;
-  align-items: flex-end;
 }
 .pf-v5-c-code-editor__header::before {
   position: absolute;
@@ -52,54 +68,68 @@
   content: "";
   border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
 }
+.pf-v5-c-code-editor__header.pf-m-plain {
+  --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
+}
 
-.pf-v5-c-code-editor__controls {
+.pf-v5-c-code-editor__header-content {
   display: flex;
+  flex: 1;
+  align-items: flex-end;
+  padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
+  background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
+  border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
 }
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
-}
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
-}
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
+.pf-v5-c-code-editor__header-content:last-child {
+  border-start-end-radius: var(--pf-v5-c-code-editor__header-content--BorderStartEndRadius);
 }
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
-  border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
+
+.pf-v5-c-code-editor__controls {
+  display: flex;
+  gap: var(--pf-v5-c-code-editor__controls--Gap);
+  align-items: flex-start;
 }
 
 .pf-v5-c-code-editor__header-main {
   flex-grow: 1;
+  align-self: center;
   padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
 }
 
+.pf-v5-c-code-editor__upload {
+  position: relative;
+  padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
+}
+.pf-v5-c-code-editor__upload::before {
+  position: absolute;
+  inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
+  inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
+  inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
+  inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
+  content: "";
+  border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
+  border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
+}
+
 .pf-v5-c-code-editor__main {
   position: relative;
   color: var(--pf-v5-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
   border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
   border-color: var(--pf-v5-c-code-editor__main--BorderColor);
+  border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
 }
-.pf-v5-c-code-editor__main.pf-m-drag-hover::after {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
-  opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
-}
-.pf-v5-c-code-editor__main.pf-m-drag-hover::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
+.pf-v5-c-code-editor__main.pf-m-drag-hover {
+  --pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
+  --pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
 }
 .pf-v5-c-code-editor__main .monaco-editor {
   background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -130,7 +160,6 @@
   padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
-  margin-inline-start: auto;
   color: var(--pf-v5-c-code-editor__tab--Color);
   background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -139,16 +168,9 @@
   border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
   border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
   border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
+  border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
 }
 
 .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
   margin-inline-start: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
-  --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
-  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
 }