From 6417a11185f3151450891cfb0039a1a3946b336f Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 4 Oct 2024 14:14:16 +0100
Subject: [PATCH] Refactor #6452

---
 packages/themes/src/presets/material/accordion/index.js   | 2 +-
 .../themes/src/presets/material/autocomplete/index.js     | 2 +-
 packages/themes/src/presets/material/button/index.js      | 4 ++--
 packages/themes/src/presets/material/carousel/index.js    | 2 +-
 .../themes/src/presets/material/cascadeselect/index.js    | 2 +-
 packages/themes/src/presets/material/checkbox/index.js    | 6 +++---
 packages/themes/src/presets/material/datatable/index.js   | 2 +-
 packages/themes/src/presets/material/datepicker/index.js  | 6 +++---
 packages/themes/src/presets/material/editor/index.js      | 2 +-
 packages/themes/src/presets/material/fieldset/index.js    | 2 +-
 packages/themes/src/presets/material/index.js             | 2 +-
 packages/themes/src/presets/material/inputnumber/index.js | 2 +-
 packages/themes/src/presets/material/inputtext/index.js   | 2 +-
 packages/themes/src/presets/material/listbox/index.js     | 2 +-
 packages/themes/src/presets/material/megamenu/index.js    | 2 +-
 packages/themes/src/presets/material/menubar/index.js     | 2 +-
 packages/themes/src/presets/material/multiselect/index.js | 2 +-
 packages/themes/src/presets/material/panelmenu/index.js   | 2 +-
 packages/themes/src/presets/material/radiobutton/index.js | 2 +-
 packages/themes/src/presets/material/rating/index.js      | 8 ++++----
 packages/themes/src/presets/material/select/index.js      | 2 +-
 packages/themes/src/presets/material/slider/index.js      | 2 +-
 packages/themes/src/presets/material/stepper/index.js     | 3 +--
 packages/themes/src/presets/material/tabs/index.js        | 2 +-
 .../themes/src/presets/material/togglebutton/index.js     | 2 +-
 .../themes/src/presets/material/toggleswitch/index.js     | 2 +-
 packages/themes/src/presets/material/tree/index.js        | 2 +-
 packages/themes/src/presets/material/treeselect/index.js  | 2 +-
 packages/themes/src/presets/material/treetable/index.js   | 2 +-
 29 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/packages/themes/src/presets/material/accordion/index.js b/packages/themes/src/presets/material/accordion/index.js
index ccd3c50db..6299bfec5 100644
--- a/packages/themes/src/presets/material/accordion/index.js
+++ b/packages/themes/src/presets/material/accordion/index.js
@@ -48,7 +48,7 @@ export default {
         color: '{text.color}',
         padding: '0 1.25rem 1.25rem 1.25rem'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-accordionpanel {
     box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
     transition: margin ${dt('accordion.transition.duration')};
diff --git a/packages/themes/src/presets/material/autocomplete/index.js b/packages/themes/src/presets/material/autocomplete/index.js
index a5a5ce82e..9d8e7f5f4 100644
--- a/packages/themes/src/presets/material/autocomplete/index.js
+++ b/packages/themes/src/presets/material/autocomplete/index.js
@@ -95,7 +95,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-autocomplete-dropdown:focus-visible {
     background: ${dt('autocomplete.dropdown.hover.background')};
     border-color: ${dt('autocomplete.dropdown.hover.border.color')};
diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js
index 39e3aaf75..eb043585f 100644
--- a/packages/themes/src/presets/material/button/index.js
+++ b/packages/themes/src/presets/material/button/index.js
@@ -484,7 +484,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-button:focus-visible {
     background: ${dt('button.primary.active.background')};
     border-color: ${dt('button.primary.active.background')};
@@ -587,7 +587,7 @@ export default {
 .p-button-success.p-button-outlined:focus-visible {
     background: ${dt('button.outlined.success.active.background')};
 }
-    
+
 .p-button-info.p-button-outlined:focus-visible {
     background: ${dt('button.outlined.info.active.background')};
 }
diff --git a/packages/themes/src/presets/material/carousel/index.js b/packages/themes/src/presets/material/carousel/index.js
index 7c8b1838e..c910fee5f 100644
--- a/packages/themes/src/presets/material/carousel/index.js
+++ b/packages/themes/src/presets/material/carousel/index.js
@@ -37,7 +37,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-carousel-indicator-button:hover {
     box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
 }
diff --git a/packages/themes/src/presets/material/cascadeselect/index.js b/packages/themes/src/presets/material/cascadeselect/index.js
index 38e873ab1..e17764179 100644
--- a/packages/themes/src/presets/material/cascadeselect/index.js
+++ b/packages/themes/src/presets/material/cascadeselect/index.js
@@ -56,7 +56,7 @@ export default {
             size: '0.875rem'
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-cascadeselect.p-variant-filled {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/themes/src/presets/material/checkbox/index.js b/packages/themes/src/presets/material/checkbox/index.js
index 932686b10..0fa1afbae 100644
--- a/packages/themes/src/presets/material/checkbox/index.js
+++ b/packages/themes/src/presets/material/checkbox/index.js
@@ -33,7 +33,7 @@ export default {
         checkedHoverColor: '{primary.contrast.color}',
         disabledColor: '{form.field.disabled.color}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-checkbox {
     border-radius: 50%;
     transition: box-shadow ${dt('checkbox.transition.duration')};
@@ -87,9 +87,9 @@ export default {
       height: 0;
       transform: translate3d(0,0,0) rotate(45deg);
     }
-    100%{    
+    100%{
       width: 4px;
-      height: 10px;    
+      height: 10px;
       border-color: ${dt('checkbox.icon.checked.color')};
       transform: translate3d(0,-10px,0) rotate(45deg);
     }
diff --git a/packages/themes/src/presets/material/datatable/index.js b/packages/themes/src/presets/material/datatable/index.js
index 933a4154b..89ed96eb8 100644
--- a/packages/themes/src/presets/material/datatable/index.js
+++ b/packages/themes/src/presets/material/datatable/index.js
@@ -166,7 +166,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-datatable-header-cell,
 .p-datatable-tbody > tr {
     transition: none;
diff --git a/packages/themes/src/presets/material/datepicker/index.js b/packages/themes/src/presets/material/datepicker/index.js
index ca70f094f..928cdfee7 100644
--- a/packages/themes/src/presets/material/datepicker/index.js
+++ b/packages/themes/src/presets/material/datepicker/index.js
@@ -137,7 +137,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-datepicker-header {
     justify-content: start;
 }
@@ -148,12 +148,12 @@ export default {
 
 .p-datepicker-prev-button {
     order: 2;
-    margin-inline-start: auto; 
+    margin-inline-start: auto;
 }
 
 .p-datepicker-next-button {
     order: 2;
-    margin-inline-start: 0.5rem; 
+    margin-inline-start: 0.5rem;
 }
 
 .p-datepicker-select-month:focus-visible {
diff --git a/packages/themes/src/presets/material/editor/index.js b/packages/themes/src/presets/material/editor/index.js
index 1f0732257..61c1ce28b 100644
--- a/packages/themes/src/presets/material/editor/index.js
+++ b/packages/themes/src/presets/material/editor/index.js
@@ -30,7 +30,7 @@ export default {
         color: '{content.color}',
         borderRadius: '{content.border.radius}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-editor .p-editor-toolbar {
     padding: 0.75rem
 }
diff --git a/packages/themes/src/presets/material/fieldset/index.js b/packages/themes/src/presets/material/fieldset/index.js
index c2962d9a0..8231ddbeb 100644
--- a/packages/themes/src/presets/material/fieldset/index.js
+++ b/packages/themes/src/presets/material/fieldset/index.js
@@ -33,7 +33,7 @@ export default {
     content: {
         padding: '0'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-fieldset-toggle-button:focus-visible {
     background: ${dt('navigation.item.active.background')};
 
diff --git a/packages/themes/src/presets/material/index.js b/packages/themes/src/presets/material/index.js
index febd42705..d85be0bef 100644
--- a/packages/themes/src/presets/material/index.js
+++ b/packages/themes/src/presets/material/index.js
@@ -180,7 +180,7 @@ export default {
         tooltip,
         ripple
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 
     `
 };
diff --git a/packages/themes/src/presets/material/inputnumber/index.js b/packages/themes/src/presets/material/inputnumber/index.js
index dea2876c0..ed3d043c2 100644
--- a/packages/themes/src/presets/material/inputnumber/index.js
+++ b/packages/themes/src/presets/material/inputnumber/index.js
@@ -35,7 +35,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-inputnumber-stacked .p-inputnumber-button-group {
     top: 2px;
     right: 2px;
diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js
index 8f130ac14..00b1ff0e1 100644
--- a/packages/themes/src/presets/material/inputtext/index.js
+++ b/packages/themes/src/presets/material/inputtext/index.js
@@ -35,7 +35,7 @@ export default {
             paddingY: '1rem'
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-inputtext.p-variant-filled {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/themes/src/presets/material/listbox/index.js b/packages/themes/src/presets/material/listbox/index.js
index 2064db70f..f0eacb2f2 100644
--- a/packages/themes/src/presets/material/listbox/index.js
+++ b/packages/themes/src/presets/material/listbox/index.js
@@ -63,7 +63,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-listbox-option {
     transition: none;
 }
diff --git a/packages/themes/src/presets/material/megamenu/index.js b/packages/themes/src/presets/material/megamenu/index.js
index 2f94086a8..7155eef51 100644
--- a/packages/themes/src/presets/material/megamenu/index.js
+++ b/packages/themes/src/presets/material/megamenu/index.js
@@ -75,7 +75,7 @@ export default {
             shadow: 'none'
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-megamenu-button:focus-visible {
     background: ${dt('navigation.item.active.background')};
 }
diff --git a/packages/themes/src/presets/material/menubar/index.js b/packages/themes/src/presets/material/menubar/index.js
index 25caa46fd..8cd87a397 100644
--- a/packages/themes/src/presets/material/menubar/index.js
+++ b/packages/themes/src/presets/material/menubar/index.js
@@ -59,7 +59,7 @@ export default {
             shadow: 'none'
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-menubar-button:focus-visible {
     background: ${dt('navigation.item.active.background')};
 }
diff --git a/packages/themes/src/presets/material/multiselect/index.js b/packages/themes/src/presets/material/multiselect/index.js
index 9661d75b4..992aee8ce 100644
--- a/packages/themes/src/presets/material/multiselect/index.js
+++ b/packages/themes/src/presets/material/multiselect/index.js
@@ -67,7 +67,7 @@ export default {
     emptyMessage: {
         padding: '{list.option.padding}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-multiselect.p-variant-filled {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/themes/src/presets/material/panelmenu/index.js b/packages/themes/src/presets/material/panelmenu/index.js
index 4206daef0..71f7c413f 100644
--- a/packages/themes/src/presets/material/panelmenu/index.js
+++ b/packages/themes/src/presets/material/panelmenu/index.js
@@ -38,7 +38,7 @@ export default {
         color: '{navigation.submenu.icon.color}',
         focusColor: '{navigation.submenu.icon.focus.color}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-panelmenu-panel {
     box-shadow: 0 0 0 1px ${dt('panelmenu.panel.border.color')};
     transition: margin ${dt('panelmenu.transition.duration')};
diff --git a/packages/themes/src/presets/material/radiobutton/index.js b/packages/themes/src/presets/material/radiobutton/index.js
index b8e6a6e65..985694105 100644
--- a/packages/themes/src/presets/material/radiobutton/index.js
+++ b/packages/themes/src/presets/material/radiobutton/index.js
@@ -31,7 +31,7 @@ export default {
         checkedHoverColor: '{primary.color}',
         disabledColor: '{form.field.disabled.color}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-radiobutton {
     border-radius: 50%;
     transition: box-shadow ${dt('radiobutton.transition.duration')};
diff --git a/packages/themes/src/presets/material/rating/index.js b/packages/themes/src/presets/material/rating/index.js
index 9a9edc429..f741d3e41 100644
--- a/packages/themes/src/presets/material/rating/index.js
+++ b/packages/themes/src/presets/material/rating/index.js
@@ -16,20 +16,20 @@ export default {
         hoverColor: '{primary.color}',
         activeColor: '{primary.color}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover {
     background: color-mix(in srgb, ${dt('rating.icon.color')}, transparent 96%);
-    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.color')}, transparent 96%); 
+    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.color')}, transparent 96%);
 }
 
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option-active:hover {
     background: color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 92%);
-    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 92%); 
+    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 92%);
 }
 
 .p-rating-option.p-focus-visible {
     background: color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 84%);
-    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 84%); 
+    box-shadow: 0 0 1px 8px color-mix(in srgb, ${dt('rating.icon.active.color')}, transparent 84%);
 }
 `
 };
diff --git a/packages/themes/src/presets/material/select/index.js b/packages/themes/src/presets/material/select/index.js
index 4339cd740..31d6dac38 100644
--- a/packages/themes/src/presets/material/select/index.js
+++ b/packages/themes/src/presets/material/select/index.js
@@ -71,7 +71,7 @@ export default {
     emptyMessage: {
         padding: '{list.option.padding}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-select.p-variant-filled {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/themes/src/presets/material/slider/index.js b/packages/themes/src/presets/material/slider/index.js
index 5e6a794bd..de879f6ba 100644
--- a/packages/themes/src/presets/material/slider/index.js
+++ b/packages/themes/src/presets/material/slider/index.js
@@ -32,7 +32,7 @@ export default {
             shadow: 'none'
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-slider-handle {
     transition: box-shadow ${dt('slider.transition.duration')};
 }
diff --git a/packages/themes/src/presets/material/stepper/index.js b/packages/themes/src/presets/material/stepper/index.js
index 42794946e..f9a1f9eb8 100644
--- a/packages/themes/src/presets/material/stepper/index.js
+++ b/packages/themes/src/presets/material/stepper/index.js
@@ -63,10 +63,9 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-step-header:focus-visible {
     background: ${dt('navigation.item.active.background')};
 }
-}
 `
 };
diff --git a/packages/themes/src/presets/material/tabs/index.js b/packages/themes/src/presets/material/tabs/index.js
index c2e27aa89..acca02a11 100644
--- a/packages/themes/src/presets/material/tabs/index.js
+++ b/packages/themes/src/presets/material/tabs/index.js
@@ -61,7 +61,7 @@ export default {
         bottom: '-1px',
         background: '{primary.color}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 
 
 .p-tabs-scrollable .p-tab {
diff --git a/packages/themes/src/presets/material/togglebutton/index.js b/packages/themes/src/presets/material/togglebutton/index.js
index 8fcf78bcc..49754066f 100644
--- a/packages/themes/src/presets/material/togglebutton/index.js
+++ b/packages/themes/src/presets/material/togglebutton/index.js
@@ -49,7 +49,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-togglebutton:focus-visible {
     background: ${dt('togglebutton.hover.background')};
 }
diff --git a/packages/themes/src/presets/material/toggleswitch/index.js b/packages/themes/src/presets/material/toggleswitch/index.js
index c99d980c3..3a60048e2 100644
--- a/packages/themes/src/presets/material/toggleswitch/index.js
+++ b/packages/themes/src/presets/material/toggleswitch/index.js
@@ -65,7 +65,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-toggleswitch-handle {
     box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
diff --git a/packages/themes/src/presets/material/tree/index.js b/packages/themes/src/presets/material/tree/index.js
index 838aac33b..b0c323c99 100644
--- a/packages/themes/src/presets/material/tree/index.js
+++ b/packages/themes/src/presets/material/tree/index.js
@@ -48,7 +48,7 @@ export default {
     loadingIcon: {
         size: '2rem'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-tree-node-content {
     transition: none;
 }
diff --git a/packages/themes/src/presets/material/treeselect/index.js b/packages/themes/src/presets/material/treeselect/index.js
index 817ef88d9..79b78a46f 100644
--- a/packages/themes/src/presets/material/treeselect/index.js
+++ b/packages/themes/src/presets/material/treeselect/index.js
@@ -45,7 +45,7 @@ export default {
     chip: {
         borderRadius: '{border.radius.sm}'
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-treeselect.p-variant-filled {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/themes/src/presets/material/treetable/index.js b/packages/themes/src/presets/material/treetable/index.js
index c671976e4..adea4b82d 100644
--- a/packages/themes/src/presets/material/treetable/index.js
+++ b/packages/themes/src/presets/material/treetable/index.js
@@ -120,7 +120,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-treetable-header-cell,
 .p-treetable-tbody > tr {
     transition: none;