@patternfly/patternfly 4.196.0 → 4.196.1

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

@@ -393,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

@@ -465,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);

package/components/LogViewer/log-viewer.css

@@ -198,4 +198,32 @@
 
 .pf-c-log-viewer__timestamp {
   font-weight: var(--pf-c-log-viewer__timestamp--FontWeight);
+}
+
+:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+  color: var(--pf-global--Color--100);
 }

package/components/LogViewer/log-viewer.scss

@@ -211,3 +211,10 @@
 .pf-c-log-viewer__timestamp {
   font-weight: var(--pf-c-log-viewer__timestamp--FontWeight);
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/log-viewer";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-log-viewer;
+}

package/components/LogViewer/themes/dark/log-viewer.scss

@@ -1,5 +1,7 @@
-@mixin log-viewer() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-log-viewer() {
   .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Login/login.css

@@ -294,4 +294,35 @@
 }
 .pf-c-login__footer .pf-c-list:not(:only-child) {
   padding-top: var(--pf-c-login__footer--c-list--PaddingTop);
+}
+
+:where(.pf-theme-dark) .pf-c-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-login__header,
+:where(.pf-theme-dark) .pf-c-login__footer {
+  color: var(--pf-global--Color--100);
 }

package/components/Login/login.scss

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

package/components/Login/themes/dark/login.scss

@@ -1,6 +1,8 @@
-@mixin login() {
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-login() {
   .pf-c-login__header,
   .pf-c-login__footer {
-    @include pf-t-dark;
+    @include pf-theme-dark--t-dark;
   }
 }

package/components/Masthead/masthead.css

@@ -657,4 +657,36 @@
   .pf-c-masthead.pf-m-inset-2xl-on-2xl {
     --pf-c-masthead--inset: var(--pf-global--spacer--2xl);
   }
+}
+
+:where(.pf-theme-dark) .pf-c-masthead {
+  --pf-global--Color--100: #fff;
+  --pf-global--Color--200: #aaabac;
+  --pf-global--BorderColor--100: #444548;
+  --pf-global--primary-color--100: #1fa7f8;
+  --pf-global--link--Color: #1fa7f8;
+  --pf-global--link--Color--hover: #73bcf7;
+  --pf-global--BackgroundColor--100: #1b1d21;
+}
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
+  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
+  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
+  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-masthead {
+  --pf-c-masthead--BackgroundColor: var(--pf-global--palette--black-1000);
+  color: var(--pf-global--Color--100);
+}
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-toolbar {
+  --pf-c-toolbar--BackgroundColor: var(--pf-global--palette--black-1000);
 }

package/components/Masthead/masthead.scss

@@ -355,3 +355,10 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   }
 }
 // stylelint-enable
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/masthead";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-masthead;
+}