@patternfly/patternfly 4.195.0 → 4.196.2

package/components/ClipboardCopy/clipboard-copy.scss

@@ -106,3 +106,10 @@
     --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/clipboard-copy";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-clipboard-copy;
+}

package/components/ClipboardCopy/themes/dark/clipboard-copy.scss

@@ -1,4 +1,6 @@
-@mixin clipboard-copy() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-clipboard-copy() {
   .pf-c-clipboard-copy {
     --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--400);
   }

package/components/CodeEditor/code-editor.css

@@ -133,4 +133,8 @@
 
 .pf-c-code-editor__tab-icon + .pf-c-code-editor__tab-text {
   margin-left: var(--pf-c-code-editor__tab-icon--text--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-code-editor__controls > * + * {
+  border-left: 1px solid var(--pf-global--palette--black-700);
 }

package/components/CodeEditor/code-editor.scss

@@ -163,3 +163,10 @@
 .pf-c-code-editor__tab-icon + .pf-c-code-editor__tab-text {
   margin-left: var(--pf-c-code-editor__tab-icon--text--MarginLeft);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/code-editor";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-code-editor;
+}

package/components/CodeEditor/themes/dark/code-editor.scss

@@ -1,4 +1,6 @@
-@mixin code-editor() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-code-editor() {
   .pf-c-code-editor__controls {
     > * + * {
       border-left: 1px solid var(--pf-global--palette--black-700);

package/components/ContextSelector/context-selector.css

@@ -283,4 +283,21 @@
 .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
   --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);
   pointer-events: none;
+}
+
+:where(.pf-theme-dark) .pf-c-context-selector {
+  --pf-c-context-selector__menu--Top: 100%;
+  --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-context-selector__toggle {
+  background: var(--pf-global--BackgroundColor--400);
+}
+:where(.pf-theme-dark) .pf-c-context-selector__toggle.pf-m-plain {
+  background: transparent;
+}
+:where(.pf-theme-dark) .pf-c-context-selector__menu {
+  background: var(--pf-global--BackgroundColor--300);
+}
+:where(.pf-theme-dark) .pf-c-context-selector__menu-footer {
+  border-top: 1px solid var(--pf-global--BorderColor--300);
 }

package/components/ContextSelector/context-selector.scss

@@ -342,3 +342,10 @@
     pointer-events: none;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/context-selector";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-context-selector;
+}

package/components/ContextSelector/themes/dark/context-selector.scss

@@ -1,4 +1,6 @@
-@mixin context-selector() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-context-selector() {
   .pf-c-context-selector {
     --pf-c-context-selector__menu--Top: 100%;
     --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);

package/components/DataList/data-list.css

@@ -906,4 +906,11 @@
 }
 .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
   padding: 0;
+}
+
+:where(.pf-theme-dark) .pf-c-data-list {
+  --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
 }

package/components/DataList/data-list.scss

@@ -472,3 +472,10 @@
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/data-list";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-data-list;
+}

package/components/DataList/themes/dark/data-list.scss

@@ -1,4 +1,6 @@
-@mixin data-list() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-data-list() {
   .pf-c-data-list {
     --pf-c-data-list--BorderTopColor: var(--pf-global--BorderColor--100);
     --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);

package/components/DatePicker/date-picker.css

@@ -49,4 +49,9 @@
 .pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
   --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
   transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
+}
+
+:where(.pf-theme-dark) .pf-c-date-picker {
+  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-date-picker__calendar--Top: 100%;
 }

package/components/DatePicker/date-picker.scss

@@ -57,3 +57,10 @@
     transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/date-picker";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-date-picker;
+}

package/components/DatePicker/themes/dark/date-picker.scss

@@ -1,4 +1,6 @@
-@mixin date-picker() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-date-picker() {
   .pf-c-date-picker {
     --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-date-picker__calendar--Top: 100%;

package/components/Drawer/drawer.css

@@ -820,4 +820,11 @@
     display: none;
     visibility: hidden;
   }
+}
+:where(.pf-theme-dark) .pf-c-drawer {
+  --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-drawer__splitter--BackgroundColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-drawer.pf-m-inline, :where(.pf-theme-dark) .pf-c-drawer.pf-m-static {
+  --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 }

package/components/Drawer/drawer.scss

@@ -708,3 +708,10 @@ $pf-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/drawer";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-drawer;
+}

package/components/Drawer/themes/dark/drawer.scss

@@ -1,4 +1,6 @@
-@mixin drawer() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-drawer() {
   .pf-c-drawer {
     --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-drawer__splitter--BackgroundColor: transparent;

package/components/Dropdown/dropdown.css

@@ -564,4 +564,26 @@
   font-size: var(--pf-c-dropdown__group-title--FontSize);
   font-weight: var(--pf-c-dropdown__group-title--FontWeight);
   color: var(--pf-c-dropdown__group-title--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-dropdown {
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-dropdown__toggle--before--BorderTopColor: transparent;
+  --pf-c-dropdown__toggle--before--BorderRightColor: transparent;
+  --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-dropdown__toggle--before--BorderLeftColor: transparent;
+  --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-dropdown__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-dropdown__menu--Top: 100%;
+  --pf-c-dropdown--m-top__menu--TranslateY: -100%;
+  --pf-c-dropdown__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-dropdown__group-title--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-dropdown__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+}
+:where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain):disabled, :where(.pf-theme-dark) .pf-c-dropdown__toggle:not(.pf-m-plain).pf-m-disabled {
+  color: var(--pf-global--palette--black-100);
+}
+:where(.pf-theme-dark) .pf-c-dropdown__toggle.pf-m-plain {
+  background: transparent;
 }

package/components/Dropdown/dropdown.scss

@@ -687,3 +687,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   font-weight: var(--pf-c-dropdown__group-title--FontWeight);
   color: var(--pf-c-dropdown__group-title--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/dropdown";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-dropdown;
+}

package/components/Dropdown/themes/dark/dropdown.scss

@@ -1,4 +1,6 @@
-@mixin dropdown() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-dropdown() {
   .pf-c-dropdown {
     --pf-c-dropdown__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-dropdown__toggle--before--BorderTopColor: transparent;

package/components/Form/form.css

@@ -500,4 +500,8 @@
 }
 .pf-c-form__field-group-body > .pf-c-form__field-group:last-child {
   margin-bottom: var(--pf-c-form__field-group-body__field-group--last-child--MarginBottom);
+}
+
+:where(.pf-theme-dark) .pf-c-form {
+  --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
 }

package/components/Form/form.scss

@@ -517,3 +517,10 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
     }
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/form";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-form;
+}

package/components/Form/themes/dark/form.scss

@@ -1,4 +1,6 @@
-@mixin form() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-form() {
   .pf-c-form {
     --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
   }

package/components/FormControl/form-control.css

@@ -315,4 +315,26 @@ textarea.pf-c-form-control {
 }
 .pf-c-form-control.pf-m-resize-horizontal {
   resize: horizontal;
+}
+
+:where(.pf-theme-dark) .pf-c-form-control {
+  --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
+  --pf-c-form-control--BorderTopColor: transparent;
+  --pf-c-form-control--BorderRightColor: transparent;
+  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-form-control--BorderLeftColor: transparent;
+  --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--300);
+  --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-form-control::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+:where(.pf-theme-dark) .pf-c-form-control[readonly] {
+  border-bottom-color: var(--pf-global--palette--black-700);
+}
+:where(.pf-theme-dark) .pf-c-form-control:disabled {
+  color: var(--pf-global--palette--black-100);
 }

package/components/FormControl/form-control.scss

@@ -439,3 +439,10 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
     resize: horizontal;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/form-control";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-form-control;
+}

package/components/FormControl/themes/dark/form-control.scss

@@ -1,4 +1,6 @@
-@mixin form-control() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-form-control() {
   .pf-c-form-control {
     --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
     --pf-c-form-control--BorderTopColor: transparent;

package/components/HelperText/helper-text.css

@@ -66,4 +66,8 @@
 
 .pf-c-helper-text__item-text {
   color: var(--pf-c-helper-text__item-text--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-helper-text {
+  --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
 }

package/components/HelperText/helper-text.scss

@@ -81,3 +81,10 @@
 .pf-c-helper-text__item-text {
   color: var(--pf-c-helper-text__item-text--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/helper-text";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-helper-text;
+}

package/components/HelperText/themes/dark/helper-text.scss

@@ -1,4 +1,6 @@
-@mixin helper-text() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-helper-text() {
   .pf-c-helper-text {
     --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
   }

package/components/Hint/hint.css

@@ -57,4 +57,9 @@
 }
 .pf-c-hint__footer > :not(:last-child) {
   margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+:where(.pf-theme-dark) .pf-c-hint {
+  --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
 }

package/components/Hint/hint.scss

@@ -73,3 +73,10 @@
     margin-right: var(--pf-c-hint__footer--child--MarginRight);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/hint";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-hint;
+}

package/components/Hint/themes/dark/hint.scss

@@ -1,4 +1,6 @@
-@mixin hint() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-hint() {
   .pf-c-hint {
     --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);

package/components/InputGroup/input-group.css

@@ -67,4 +67,26 @@ label.pf-c-input-group__text {
 .pf-c-input-group__text.pf-m-plain {
   --pf-c-input-group__text--BorderWidth: 0;
   margin-left: 0;
+}
+
+:where(.pf-theme-dark) .pf-c-input-group {
+  --pf-c-input-group--BackgroundColor: transparent;
+  --pf-c-input-group__text--BorderTopColor: transparent;
+  --pf-c-input-group__text--BorderRightColor: transparent;
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-input-group__text--BorderLeftColor: transparent;
+  --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
+}
+:where(.pf-theme-dark) .pf-c-input-group > * + * {
+  margin-left: 0;
+  border-left: 1px solid var(--pf-global--palette--black-700);
+}
+:where(.pf-theme-dark) .pf-c-input-group__text {
+  --pf-c-input-group__text--BorderTopColor: transparent;
+  --pf-c-input-group__text--BorderRightColor: transparent;
+  --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
+  --pf-c-input-group__text--BorderLeftColor: transparent;
+}
+:where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
+  --pf-c-input-group__text--BackgroundColor: transparent;
 }

package/components/InputGroup/input-group.scss

@@ -79,3 +79,10 @@
     margin-left: 0;
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/input-group";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-input-group;
+}

package/components/InputGroup/themes/dark/input-group.scss

@@ -1,4 +1,6 @@
-@mixin input-group() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-input-group() {
   .pf-c-input-group {
     --pf-c-input-group--BackgroundColor: transparent;
     --pf-c-input-group__text--BorderTopColor: transparent;

package/components/Label/label.css

@@ -40,9 +40,9 @@
   --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
   --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
-  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
   --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
   --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
   --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -80,6 +80,16 @@
   --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
+  --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
+  --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
   --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-label--m-overflow__content--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -236,6 +246,21 @@
   --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
   --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
 }
+.pf-c-label.pf-m-gold {
+  --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
+  --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
+  --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
+  --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
+  --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
+  --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
+  --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
+  --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
+  --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
+  --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+}
 .pf-c-label.pf-m-outline {
   --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
@@ -368,4 +393,48 @@ button.pf-c-label__content:focus {
 .pf-c-label__icon {
   margin-right: var(--pf-c-label__icon--MarginRight);
   color: var(--pf-c-label__icon--Color);
+}
+
+:where(.pf-theme-dark) .pf-c-label {
+  --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-green--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-red--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-purple--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label--m-cyan--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-label__content--before--BorderWidth: 0;
+  --pf-c-label__content--before--BorderColor: transparent;
+  --pf-c-label__content--link--hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label__content--link--focus--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-blue__content--Color: var(--pf-global--primary-color--100);
+  --pf-c-label--m-outline--m-blue__content--before--BorderColor: var(--pf-global--active-color--200);
+  --pf-c-label--m-outline--m-blue__content--link--hover--before--BorderColor: var(--pf-global--active-color--200);
+  --pf-c-label--m-outline--m-blue__content--link--focus--before--BorderColor: var(--pf-global--active-color--200);
+  --pf-c-label--m-green__content--Color: var(--pf-global--success-color--100);
+  --pf-c-label--m-outline--m-green__content--before--BorderColor: var(--pf-global--palette--green-100);
+  --pf-c-label--m-outline--m-green__content--link--hover--before--BorderColor: var(--pf-global--palette--green-100);
+  --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--palette--green-100);
+  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-300);
+  --pf-c-label--m-outline--m-orange__content--Color: var(--pf-global--palette--orange-300);
+  --pf-c-label--m-outline--m-orange__content--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-outline--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-outline--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-red__content--Color: var(--pf-global--danger-color--100);
+  --pf-c-label--m-outline--m-red__content--before--BorderColor: var(--pf-global--danger-color--100);
+  --pf-c-label--m-outline--m-red__content--link--hover--before--BorderColor: var(--pf-global--danger-color--100);
+  --pf-c-label--m-outline--m-red__content--link--focus--before--BorderColor: var(--pf-global--danger-color--100);
+  --pf-c-label--m-purple__content--Color: var(--pf-global--palette--purple-300);
+  --pf-c-label--m-purple__icon--Color: var(--pf-global--palette--purple-300);
+  --pf-c-label--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-300);
+  --pf-c-label--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-300);
+  --pf-c-label--m-outline--m-purple__content--before--BorderColor: var(--pf-global--palette--purple-100);
+  --pf-c-label--m-outline--m-purple__content--link--hover--before--BorderColor: var(--pf-global--palette--purple-100);
+  --pf-c-label--m-outline--m-purple__content--link--focus--before--BorderColor: var(--pf-global--palette--purple-100);
+  --pf-c-label--m-outline--m-purple__content--Color: var(--pf-global--palette--purple-300);
+  --pf-c-label--m-cyan__content--Color: var(--pf-global--default-color--200);
+  --pf-c-label--m-outline--m-cyan__content--Color: var(--pf-global--default-color--200);
+  --pf-c-label--m-outline--m-cyan__content--before--BorderColor: var(--pf-global--palette--cyan-100);
+  --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--palette--cyan-100);
+  --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
 }

package/components/Label/label.scss

@@ -55,9 +55,9 @@
   --pf-c-label--m-outline--m-green__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
 
   // Orange
-  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-orange--BackgroundColor: var(--pf-global--palette--orange-50);
   --pf-c-label--m-orange__icon--Color: var(--pf-global--palette--orange-300);
-  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-orange__content--Color: var(--pf-global--palette--orange-700);
   --pf-c-label--m-orange__content--before--BorderColor: var(--pf-global--palette--orange-100);
   --pf-c-label--m-orange__content--link--hover--before--BorderColor: var(--pf-global--palette--orange-300);
   --pf-c-label--m-orange__content--link--focus--before--BorderColor: var(--pf-global--palette--orange-300);
@@ -102,6 +102,18 @@
   --pf-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
   --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
 
+  // Gold
+  --pf-c-label--m-gold--BackgroundColor: var(--pf-global--palette--gold-50);
+  --pf-c-label--m-gold__icon--Color: var(--pf-global--palette--gold-400);
+  --pf-c-label--m-gold__content--Color: var(--pf-global--palette--gold-700);
+  --pf-c-label--m-gold__content--before--BorderColor: var(--pf-global--palette--gold-100);
+  --pf-c-label--m-gold__content--link--hover--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-gold__content--link--focus--before--BorderColor: var(--pf-global--palette--gold-300);
+  --pf-c-label--m-outline--m-gold__content--Color: var(--pf-global--palette--gold-600);
+  --pf-c-label--m-outline--m-gold__content--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+  --pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+  --pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor: var(--pf-global--BorderColor--100); // remove at breaking change
+
   // Overflow
   --pf-c-label--m-overflow__content--Color: var(--pf-global--link--Color);
   --pf-c-label--m-overflow__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -281,6 +293,22 @@
     --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-cyan__content--before--BorderColor);
   }
 
+  &.pf-m-gold {
+    --pf-c-label--BackgroundColor: var(--pf-c-label--m-gold--BackgroundColor);
+    --pf-c-label__icon--Color: var(--pf-c-label--m-gold__icon--Color);
+    --pf-c-label__content--Color: var(--pf-c-label--m-gold__content--Color);
+    --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label__content--link--hover--before--BorderColor: var(--pf-c-label--m-gold__content--link--hover--before--BorderColor);
+    --pf-c-label__content--link--focus--before--BorderColor: var(--pf-c-label--m-gold__content--link--focus--before--BorderColor);
+    --pf-c-label--m-outline__content--Color: var(--pf-c-label--m-outline--m-gold__content--Color);
+    --pf-c-label--m-outline__content--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--before--BorderColor);
+    --pf-c-label--m-outline__content--link--hover--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--hover--before--BorderColor);
+    --pf-c-label--m-outline__content--link--focus--before--BorderColor: var(--pf-c-label--m-outline--m-gold__content--link--focus--before--BorderColor);
+    --pf-c-label--m-editable__content--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label--m-editable__content--hover--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+    --pf-c-label--m-editable__content--focus--before--BorderColor: var(--pf-c-label--m-gold__content--before--BorderColor);
+  }
+
   &.pf-m-outline {
     --pf-c-label__content--Color: var(--pf-c-label--m-outline__content--Color);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-outline__content--before--BorderWidth);
@@ -437,3 +465,10 @@
   margin-right: var(--pf-c-label__icon--MarginRight);
   color: var(--pf-c-label__icon--Color);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/label";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-label;
+}

package/components/Label/themes/dark/label.scss

@@ -1,4 +1,6 @@
-@mixin label() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-label() {
   .pf-c-label {
     --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);