From 08f265d013a5846684003a96ea52e0aeb75da90a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Sep 2024 00:17:29 +0300
Subject: [PATCH] Material rating

---
 .../src/presets/material/rating/index.js      | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/themes/src/presets/material/rating/index.js b/packages/themes/src/presets/material/rating/index.js
index b92d3221f..90292c773 100644
--- a/packages/themes/src/presets/material/rating/index.js
+++ b/packages/themes/src/presets/material/rating/index.js
@@ -1,12 +1,28 @@
 export default {
     root: {
-        gap: '0.25rem',
+        gap: '0.5rem',
         transitionDuration: '{transition.duration}'
     },
     icon: {
-        size: '1rem',
+        size: '1.125rem',
         color: '{text.muted.color}',
         hoverColor: '{primary.color}',
         activeColor: '{primary.color}'
-    }
+    },
+    style: ({ 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%); 
+}
+
+.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%); 
+}
+
+.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%); 
+}
+`
 };