Refactor #6452

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')};

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')};

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')};
 }

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%);
 }

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;

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);
     }

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;

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 {

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
 }

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')};
 

packages/themes/src/presets/material/index.js

@@ -180,7 +180,7 @@ export default {
         tooltip,
         ripple
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 
     `
 };

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;

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;

packages/themes/src/presets/material/listbox/index.js

@@ -63,7 +63,7 @@ export default {
             }
         }
     },
-    style: ({ dt }) => `
+    css: ({ dt }) => `
 .p-listbox-option {
     transition: none;
 }

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')};
 }

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')};
 }

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;

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')};

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')};

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%);
 }
 `
 };

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;

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')};
 }

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')};
 }
-}
 `
 };

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 {

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')};
 }

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);
 }

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;
 }

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;

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;