From d27c88c1f2f59d931180dae5707ff9e8323eedc1 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 24 May 2024 08:50:38 +0300
Subject: [PATCH] Use background instead of background-color

---
 .../autocomplete/style/AutoCompleteStyle.js   |  4 +--
 components/lib/base/style/BaseStyle.js        |  2 +-
 .../cascadeselect/style/CascadeSelectStyle.js |  2 +-
 .../lib/colorpicker/style/ColorPickerStyle.js |  2 +-
 .../lib/datepicker/style/DatePickerStyle.js   |  2 +-
 components/lib/editor/style/EditorStyle.js    | 26 +++++++++----------
 .../lib/galleria/style/GalleriaStyle.js       |  4 +--
 .../lib/inputchips/style/InputChipsStyle.js   |  2 +-
 components/lib/listbox/style/ListboxStyle.js  |  2 +-
 components/lib/menubar/style/MenubarStyle.js  |  2 +-
 .../lib/multiselect/style/MultiSelectStyle.js |  4 +--
 .../lib/progressbar/style/ProgressBarStyle.js |  4 +--
 .../lib/radiobutton/style/RadioButtonStyle.js |  2 +-
 components/lib/select/style/SelectStyle.js    |  4 +--
 .../lib/skeleton/style/SkeletonStyle.js       |  2 +-
 .../lib/speeddial/style/SpeedDialStyle.js     |  4 +--
 components/lib/stepper/style/StepperStyle.js  |  4 +--
 components/lib/tabview/style/TabViewStyle.js  |  2 +-
 .../lib/terminal/style/TerminalStyle.js       |  2 +-
 .../lib/textarea/style/TextareaStyle.js       |  6 ++---
 .../lib/timeline/style/TimelineStyle.js       |  2 +-
 components/lib/tree/style/TreeStyle.js        |  2 +-
 22 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index a9d4c80b8..fa51cb8be 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/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')};
 }
diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index 1bc77df75..2ce05f8cd 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/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;
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index 7929bc457..4a09eb345 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/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')};
 }
 
diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index 54e6d24f0..a77780501 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/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;
 }
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index 06f5cd96e..d8ab8c5e9 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/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;
 }
 
diff --git a/components/lib/editor/style/EditorStyle.js b/components/lib/editor/style/EditorStyle.js
index 8393dffdb..ad9649739 100644
--- a/components/lib/editor/style/EditorStyle.js
+++ b/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;
diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js
index 74f53cdb4..4392d1ca7 100644
--- a/components/lib/galleria/style/GalleriaStyle.js
+++ b/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,
diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js
index 98353973b..bbe598388 100644
--- a/components/lib/inputchips/style/InputChipsStyle.js
+++ b/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')};
 }
diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js
index dca6683f2..22fbadd98 100644
--- a/components/lib/listbox/style/ListboxStyle.js
+++ b/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 {
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
index 937d6aaff..59e9f4d2d 100644
--- a/components/lib/menubar/style/MenubarStyle.js
+++ b/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;
 }
 
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 5850e4ae5..ff548d190 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/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')}
 }
 
diff --git a/components/lib/progressbar/style/ProgressBarStyle.js b/components/lib/progressbar/style/ProgressBarStyle.js
index 11d798dfc..3ff288e92 100644
--- a/components/lib/progressbar/style/ProgressBarStyle.js
+++ b/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;
diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js
index 7493a4fe4..128ac5124 100644
--- a/components/lib/radiobutton/style/RadioButtonStyle.js
+++ b/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')};
 }
diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js
index 6d5e896cb..e6110818a 100644
--- a/components/lib/select/style/SelectStyle.js
+++ b/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')};
 }
 
diff --git a/components/lib/skeleton/style/SkeletonStyle.js b/components/lib/skeleton/style/SkeletonStyle.js
index ff108d1c0..f023f2fd8 100644
--- a/components/lib/skeleton/style/SkeletonStyle.js
+++ b/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')};
 }
 
diff --git a/components/lib/speeddial/style/SpeedDialStyle.js b/components/lib/speeddial/style/SpeedDialStyle.js
index ca7bc9f9e..d338799c9 100644
--- a/components/lib/speeddial/style/SpeedDialStyle.js
+++ b/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;
 }
diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js
index 0608a7f1e..b387aee17 100644
--- a/components/lib/stepper/style/StepperStyle.js
+++ b/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 {
diff --git a/components/lib/tabview/style/TabViewStyle.js b/components/lib/tabview/style/TabViewStyle.js
index d9247381c..243e8c523 100644
--- a/components/lib/tabview/style/TabViewStyle.js
+++ b/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);
 }
 `;
diff --git a/components/lib/terminal/style/TerminalStyle.js b/components/lib/terminal/style/TerminalStyle.js
index 52c36856f..206cd2c02 100644
--- a/components/lib/terminal/style/TerminalStyle.js
+++ b/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;
diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
index 851d6c0c5..3869625a7 100644
--- a/components/lib/textarea/style/TextareaStyle.js
+++ b/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 {
diff --git a/components/lib/timeline/style/TimelineStyle.js b/components/lib/timeline/style/TimelineStyle.js
index 6e800216d..d63fe96fb 100644
--- a/components/lib/timeline/style/TimelineStyle.js
+++ b/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 {
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index 826b159a4..b4a9993de 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/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;
 }