@patternfly/patternfly 5.3.0-prerelease.2 → 5.3.0-prerelease.3

package/components/FormControl/form-control.css

@@ -211,6 +211,7 @@
 .pf-v5-c-form-control > select {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
+  background-color: var(--pf-v5-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v5-c-form-control > select {
@@ -222,7 +223,7 @@
   --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select * {
-  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;

package/components/FormControl/form-control.scss

@@ -93,7 +93,7 @@
   --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
   --#{$form-control}--textarea--Height: auto;
 
-  // Form control icon 
+  // Form control icon
   --#{$form-control}__icon--PaddingTop: var(--#{$pf-global}--spacer--form-element);
   --#{$form-control}__icon--Color: var(--#{$pf-global}--icon--Color--light);
   --#{$form-control}__icon--m-status--Color: var(--#{$pf-global}--icon--Color--light);
@@ -174,7 +174,7 @@
   > ::placeholder {
     color: var(--#{$form-control}--m-placeholder--Color); // TODO update to set --#{$form-control}--Color in breaking change - also look for any other place to do that in this component
   }
-  
+
   > :is(input, select) {
     text-overflow: ellipsis;
   }
@@ -273,13 +273,18 @@
       --#{$form-control}--PaddingRight: calc(var(--#{$form-control}__select--PaddingRight) - 1px);
       --#{$form-control}--PaddingLeft: calc(var(--#{$form-control}__select--PaddingLeft) - 4px);
     }
+
+    // We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
+    background-color: var(--#{$form-control}--BackgroundColor);
   }
 
   &.pf-m-placeholder > select {
     --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--Color);
 
     * {
-      --#{$form-control}--Color: var(--#{$form-control}--m-placeholder--child--Color);
+      // We need to use the color property instead of redefining a var
+      // for certain Linux distros/non-Mac OS
+      color: var(--#{$form-control}--m-placeholder--child--Color);
 
       // stylelint-disable max-nesting-depth
       &:disabled {
@@ -313,7 +318,6 @@
 
     overflow: auto;
   }
-
 }
 
 .#{$form-control}__icon {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.3.0-prerelease.2",
+  "version": "5.3.0-prerelease.3",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -15147,6 +15147,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .pf-v5-c-form-control > select {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
+  background-color: var(--pf-v5-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v5-c-form-control > select {
@@ -15158,7 +15159,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select * {
-  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;

package/patternfly-theme-dark-unversioned.css

@@ -15264,6 +15264,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .pf-v5-c-form-control > select {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
+  background-color: var(--pf-v5-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v5-c-form-control > select {
@@ -15275,7 +15276,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select * {
-  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;

package/patternfly.css

@@ -15264,6 +15264,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
 .pf-v5-c-form-control > select {
   --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
   --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
+  background-color: var(--pf-v5-c-form-control--BackgroundColor);
 }
 @-moz-document url-prefix() {
   .pf-v5-c-form-control > select {
@@ -15275,7 +15276,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select * {
-  --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
+  color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
 }
 .pf-v5-c-form-control.pf-m-placeholder > select *:disabled {
   color: revert;