@patternfly/patternfly 4.203.1 → 4.203.4

package/sass-utilities/themes/dark/scss-variables.scss

@@ -22,6 +22,7 @@ $pf-global--danger-color--100: $pf-color-red-9999;
 $pf-global--danger-color--200: $pf-color-red-8888;
 $pf-global--link--Color: $pf-color-blue-300;
 $pf-global--link--Color--hover: $pf-color-blue-200;
+$pf-global--link--Color--visited: $pf-color-purple-300;
 $pf-global--disabled-color--100: $pf-color-black-400; // disabled text on regular background color
 $pf-global--disabled-color--200: $pf-color-black-500; // disabled background color
 $pf-global--disabled-color--300: $pf-color-black-200; // disabled text on disabled background color

package/utilities/BackgroundColor/BackgroundColor.css

@@ -311,4 +311,104 @@
   .pf-u-background-color-danger-on-2xl {
     background-color: var(--pf-global--palette--red-50) !important;
   }
+}
+:where(.pf-theme-dark) .pf-u-background-color-default {
+  background-color: var(--pf-global--BackgroundColor--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-background-color-success {
+  background-color: var(--pf-global--BackgroundColor--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-background-color-info {
+  background-color: var(--pf-global--BackgroundColor--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-background-color-warning {
+  background-color: var(--pf-global--BackgroundColor--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-background-color-danger {
+  background-color: var(--pf-global--BackgroundColor--100) !important;
+}
+@media screen and (min-width: 576px) {
+  :where(.pf-theme-dark) .pf-u-background-color-default-on-sm {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-success-on-sm {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-info-on-sm {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-warning-on-sm {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-danger-on-sm {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  :where(.pf-theme-dark) .pf-u-background-color-default-on-md {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-success-on-md {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-info-on-md {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-warning-on-md {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-danger-on-md {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+}
+@media screen and (min-width: 992px) {
+  :where(.pf-theme-dark) .pf-u-background-color-default-on-lg {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-success-on-lg {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-info-on-lg {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-warning-on-lg {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-danger-on-lg {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+}
+@media screen and (min-width: 1200px) {
+  :where(.pf-theme-dark) .pf-u-background-color-default-on-xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-success-on-xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-info-on-xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-warning-on-xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-danger-on-xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+}
+@media screen and (min-width: 1450px) {
+  :where(.pf-theme-dark) .pf-u-background-color-default-on-2xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-success-on-2xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-info-on-2xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-warning-on-2xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-background-color-danger-on-2xl {
+    background-color: var(--pf-global--BackgroundColor--100) !important;
+  }
 }

package/utilities/BackgroundColor/BackgroundColor.scss

@@ -54,5 +54,11 @@ $pf-u-background-color-options: (
 
 @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
 
+@import "themes/dark/BackgroundColor";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-background-color;
+}
+
 // stylelint-enable
 

package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss

@@ -0,0 +1,25 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-background-color() {
+  // Background color options to be redefined in theme
+  $pf-u-background-color-options: (
+    // Note that the status backgrounds are not intended to be used in dark theme; instead, a border or other indication would be used.
+    background-color-default: (
+      background-color var(--pf-global--BackgroundColor--100)
+    ),
+    background-color-success: (
+      background-color var(--pf-global--BackgroundColor--100)
+    ),
+    background-color-info: (
+      background-color var(--pf-global--BackgroundColor--100)
+    ),
+    background-color-warning: (
+      background-color var(--pf-global--BackgroundColor--100)
+    ),
+    background-color-danger: (
+      background-color var(--pf-global--BackgroundColor--100)
+    )
+  );
+
+  @include pf-utility-builder($pf-u-background-color-options, $pf-global--breakpoint-list);
+}

package/utilities/Text/text.css

@@ -942,4 +942,159 @@
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
+}
+
+:where(.pf-theme-dark) .pf-u-color-300 {
+  color: var(--pf-global--Color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-color-light-100 {
+  color: var(--pf-global--Color-100) !important;
+}
+:where(.pf-theme-dark) .pf-u-color-light-200 {
+  color: var(--pf-global--Color-200) !important;
+}
+:where(.pf-theme-dark) .pf-u-default-color-300 {
+  color: var(--pf-global--default-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-success-color-200 {
+  color: var(--pf-global--success-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-info-color-200 {
+  color: var(--pf-global--info-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-danger-color-300 {
+  color: var(--pf-global--danger-color--100) !important;
+}
+:where(.pf-theme-dark) .pf-u-icon-color-dark {
+  color: var(--pf-global--icon--Color--dark) !important;
+}
+@media screen and (min-width: 576px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-sm {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-sm {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-sm {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-sm {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-sm {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-sm {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-sm {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-sm {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 768px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-md {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-md {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-md {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-md {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-md {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-md {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-md {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-md {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 992px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-lg {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-lg {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-lg {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-lg {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-lg {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-lg {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-lg {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-lg {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 1200px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-xl {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-xl {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-xl {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-xl {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-xl {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-xl {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-xl {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-xl {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
+}
+@media screen and (min-width: 1450px) {
+  :where(.pf-theme-dark) .pf-u-color-300-on-2xl {
+    color: var(--pf-global--Color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-100-on-2xl {
+    color: var(--pf-global--Color-100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-color-light-200-on-2xl {
+    color: var(--pf-global--Color-200) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-default-color-300-on-2xl {
+    color: var(--pf-global--default-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-success-color-200-on-2xl {
+    color: var(--pf-global--success-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-info-color-200-on-2xl {
+    color: var(--pf-global--info-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-danger-color-300-on-2xl {
+    color: var(--pf-global--danger-color--100) !important;
+  }
+  :where(.pf-theme-dark) .pf-u-icon-color-dark-on-2xl {
+    color: var(--pf-global--icon--Color--dark) !important;
+  }
 }

package/utilities/Text/text.scss

@@ -194,4 +194,10 @@ $pf-u-font-alignment-options: (
   white-space: nowrap !important;
 }
 
+@import "themes/dark/text";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-text;
+}
+
 // stylelint-enable

package/utilities/Text/themes/dark/text.scss

@@ -0,0 +1,33 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-text() {
+  // Font color options to be redefined in theme
+  $pf-u-font-color-options: (
+    color-300: (
+      color var(--pf-global--Color--100)
+    ),
+    color-light-100: (
+      color var(--pf-global--Color-100)
+    ),
+    color-light-200: (
+      color var(--pf-global--Color-200)
+    ),
+    default-color-300: (
+      color var(--pf-global--default-color--100)
+    ),
+    success-color-200: (
+      color var(--pf-global--success-color--100)
+    ),
+    info-color-200: (
+      color var(--pf-global--info-color--100)
+    ),
+    danger-color-300: (
+      color var(--pf-global--danger-color--100)
+    ),
+    icon-color-dark: (
+      color var(--pf-global--icon--Color--dark)
+    )
+  );
+
+  @include pf-utility-builder($pf-u-font-color-options, $pf-global--breakpoint-list);
+}