Use background instead of background-color

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -102,7 +102,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('autocomplete.option.color')};
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
     border-radius: ${dt('autocomplete.option.border.radius')};
 }
 
@@ -144,7 +144,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('autocomplete.border.color')};
     border-radius: ${dt('autocomplete.border.radius')};
     width: 100%;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('autocomplete.shadow')};
 }

components/lib/base/style/BaseStyle.js

@@ -88,7 +88,7 @@ const theme = ({ dt }) => `
 }
 
 .p-overlay-mask {
-    background-color: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, 0.4);
     transition-duration: ${dt('transition.duration')};
     position: fixed;
     top: 0;

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -130,7 +130,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('cascadeselect.option.color')};
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('cascadeselect.option.border.radius')};
 }
 

components/lib/colorpicker/style/ColorPickerStyle.js

@@ -16,7 +16,7 @@ const theme = ({ dt }) => `
     padding: 0;
     border: 0 none;
     border-radius: ${dt('colorpicker.preview.border.radius')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     cursor: pointer;
 }

components/lib/datepicker/style/DatePickerStyle.js

@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('datepicker.dropdown.border.color')};
     border-left: 0 none;
     color: ${dt('datepicker.dropdown.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 

components/lib/editor/style/EditorStyle.js

@@ -320,25 +320,25 @@ const theme = ({ dt }) => `
     margin: 0 0 0 auto;
 }
 .ql-editor .ql-bg-black {
-    background-color: #000;
+    background: #000;
 }
 .ql-editor .ql-bg-red {
-    background-color: #e60000;
+    background: #e60000;
 }
 .ql-editor .ql-bg-orange {
-    background-color: #f90;
+    background: #f90;
 }
 .ql-editor .ql-bg-yellow {
-    background-color: #ff0;
+    background: #ff0;
 }
 .ql-editor .ql-bg-green {
-    background-color: #008a00;
+    background: #008a00;
 }
 .ql-editor .ql-bg-blue {
-    background-color: #06c;
+    background: #06c;
 }
 .ql-editor .ql-bg-purple {
-    background-color: #93f;
+    background: #93f;
 }
 .ql-editor .ql-color-white {
     color: #fff;
@@ -623,7 +623,7 @@ const theme = ({ dt }) => `
 }
 .ql-snow .ql-editor code,
 .ql-snow .ql-editor pre {
-    background-color: #f0f0f0;
+    background: #f0f0f0;
     border-radius: 3px;
 }
 .ql-snow .ql-editor pre {
@@ -637,7 +637,7 @@ const theme = ({ dt }) => `
     padding: 2px 4px;
 }
 .ql-snow .ql-editor pre.ql-syntax {
-    background-color: #23241f;
+    background: #23241f;
     color: #f8f8f2;
     overflow: visible;
 }
@@ -668,7 +668,7 @@ const theme = ({ dt }) => `
     line-height: 22px;
 }
 .ql-snow .ql-picker-options {
-    background-color: #fff;
+    background: #fff;
     display: none;
     min-width: 100%;
     padding: 4px 8px;
@@ -843,10 +843,10 @@ const theme = ({ dt }) => `
     font-size: 32px;
 }
 .ql-snow .ql-color-picker.ql-background .ql-picker-item {
-    background-color: #fff;
+    background: #fff;
 }
 .ql-snow .ql-color-picker.ql-color .ql-picker-item {
-    background-color: #000;
+    background: #000;
 }
 .ql-toolbar.ql-snow {
     border: 1px solid #ccc;
@@ -878,7 +878,7 @@ const theme = ({ dt }) => `
     border-top: 0px;
 }
 .ql-snow .ql-tooltip {
-    background-color: #fff;
+    background: #fff;
     border: 1px solid #ccc;
     box-shadow: 0px 0px 5px #ddd;
     color: #444;

components/lib/galleria/style/GalleriaStyle.js

@@ -131,7 +131,7 @@ const theme = ({ dt }) => `
     color: ${dt('galleria.thumbnail.nav.button.color')};
     width: ${dt('galleria.thumbnail.nav.button.size')};
     height: ${dt('galleria.thumbnail.nav.button.size')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};
 }
@@ -261,7 +261,7 @@ const theme = ({ dt }) => `
 }
 
 .p-galleria-indicator-active .p-galleria-indicator-button {
-    background-color: ${dt('galleria.indicator.button.active.background')};
+    background: ${dt('galleria.indicator.button.active.background')};
 }
 
 .p-galleria-indicators-left .p-galleria-items-container,

components/lib/inputchips/style/InputChipsStyle.js

@@ -20,7 +20,7 @@ const theme = ({ dt }) => `
     border: 1px solid ${dt('inputchips.border.color')};
     border-radius: ${dt('inputchips.border.radius')};
     width: 100%;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('inputchips.shadow')};
 }

components/lib/listbox/style/ListboxStyle.js

@@ -64,7 +64,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     border-radius: ${dt('listbox.option.border.radius')};
     color: ${dt('listbox.option.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {

components/lib/menubar/style/MenubarStyle.js

@@ -156,7 +156,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     background: transparent;
     border-radius: ${dt('menubar.mobile.button.border.radius')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 

components/lib/multiselect/style/MultiSelectStyle.js

@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('multiselect.background')};
     border: 1px solid ${dt('multiselect.border.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     border-radius: ${dt('multiselect.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('multiselect.shadow')};
@@ -145,7 +145,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('multiselect.option.color')};
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('multiselect.option.border.radius')}
 }
 

components/lib/progressbar/style/ProgressBarStyle.js

@@ -39,7 +39,7 @@ const theme = ({ dt }) => `
 .p-progressbar-indeterminate .p-progressbar-value::before {
     content: "";
     position: absolute;
-    background-color: inherit;
+    background: inherit;
     top: 0;
     left: 0;
     bottom: 0;
@@ -50,7 +50,7 @@ const theme = ({ dt }) => `
 .p-progressbar-indeterminate .p-progressbar-value::after {
     content: "";
     position: absolute;
-    background-color: inherit;
+    background: inherit;
     top: 0;
     left: 0;
     bottom: 0;

components/lib/radiobutton/style/RadioButtonStyle.js

@@ -36,7 +36,7 @@ const theme = ({ dt }) => `
     background: ${dt('radiobutton.background')};
     width: ${dt('radiobutton.width')};
     height: ${dt('radiobutton.height')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
     box-shadow: ${dt('radiobutton.shadow')};
 }

components/lib/select/style/SelectStyle.js

@@ -8,7 +8,7 @@ const theme = ({ dt }) => `
     user-select: none;
     background: ${dt('select.background')};
     border: 1px solid ${dt('select.border.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     border-radius: ${dt('select.border.radius')};
     outline-color: transparent;
     box-shadow: ${dt('select.shadow')};
@@ -156,7 +156,7 @@ input.p-select-label {
     border: 0 none;
     color: ${dt('select.option.color')};
     background: transparent;
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: ${dt('select.option.border.radius')};
 }
 

components/lib/skeleton/style/SkeletonStyle.js

@@ -3,7 +3,7 @@ import BaseStyle from 'primevue/base/style';
 const theme = ({ dt }) => `
 .p-skeleton {
     overflow: hidden;
-    background-color: ${dt('skeleton.background')};
+    background: ${dt('skeleton.background')};
     border-radius: ${dt('skeleton.border.radius')};
 }
 

components/lib/speeddial/style/SpeedDialStyle.js

@@ -12,7 +12,7 @@ const theme = ({ dt }) => `
 }
 
 .p-speeddial-button.p-speeddial-rotate {
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')},
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')},
     box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     will-change: transform;
 }
@@ -51,7 +51,7 @@ const theme = ({ dt }) => `
     width: 100%;
     height: 100%;
     opacity: 0;
-    background-color: ${dt('mask.background')};
+    background: ${dt('mask.background')};
     border-radius: 6px;
     transition: opacity 150ms;
 }

components/lib/stepper/style/StepperStyle.js

@@ -57,7 +57,7 @@ const theme = ({ dt }) => `
     max-width: 100%;
     color: ${dt('stepper.item.title.color')};
     font-weight: ${dt('stepper.item.title.font.weight')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-stepper-item-number {
@@ -113,7 +113,7 @@ const theme = ({ dt }) => `
     background: ${dt('stepper.separator.background')};
     width: 100%;
     height: ${dt('stepper.separator.size')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
 .p-stepper-panels {

components/lib/tabview/style/TabViewStyle.js

@@ -126,7 +126,7 @@ const theme = ({ dt }) => `
     position: absolute;
     bottom: -1px;
     height: 1px;
-    background-color: ${dt('tabview.tab.active.border.color')};
+    background: ${dt('tabview.tab.active.border.color')};
     transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
 }
 `;

components/lib/terminal/style/TerminalStyle.js

@@ -19,7 +19,7 @@ const theme = ({ dt }) => `
 .p-terminal-prompt-value {
     flex: 1 1 auto;
     border: 0 none;
-    background-color: transparent;
+    background: transparent;
     color: inherit;
     padding: 0;
     outline: 0 none;

components/lib/textarea/style/TextareaStyle.js

@@ -9,7 +9,7 @@ const theme = ({ dt }) => `
     background: ${dt('textarea.background')};
     padding: ${dt('textarea.padding.y')} ${dt('textarea.padding.x')};
     border: 1px solid ${dt('textarea.border.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     appearance: none;
     border-radius: ${dt('textarea.border.radius')};
     outline-color: transparent;
@@ -32,11 +32,11 @@ const theme = ({ dt }) => `
 }
 
 .p-textarea.p-variant-filled {
-    background-color: ${dt('textarea.filled.background')};
+    background: ${dt('textarea.filled.background')};
 }
 
 .p-textarea.p-variant-filled:enabled:focus {
-    background-color: ${dt('textarea.filled.focus.background')};
+    background: ${dt('textarea.filled.focus.background')};
 }
 
 .p-textarea:disabled {

components/lib/timeline/style/TimelineStyle.js

@@ -115,7 +115,7 @@ const theme = ({ dt }) => `
 
 .p-timeline-event-connector {
     flex-grow: 1;
-    background-color: ${dt('timeline.event.connector.color')};
+    background: ${dt('timeline.event.connector.color')};
 }
 
 .p-timeline-horizontal {

components/lib/tree/style/TreeStyle.js

@@ -79,7 +79,7 @@ const theme = ({ dt }) => `
     border: 0 none;
     background: transparent;
     border-radius: ${dt('tree.node.toggle.button.border.radius')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     outline-color: transparent;
     padding: 0;
 }