From a14ddd9b28cce92adafcd408b0c894ec9e3beb01 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 7 May 2024 11:58:34 +0300
Subject: [PATCH] New tokens for Rating

---
 components/lib/rating/style/RatingStyle.js | 12 +++++++-----
 components/lib/themes/aura/rating/index.js |  2 ++
 components/lib/themes/lara/rating/index.js |  2 ++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/lib/rating/style/RatingStyle.js b/components/lib/rating/style/RatingStyle.js
index 9086d6095..8bea5669d 100644
--- a/components/lib/rating/style/RatingStyle.js
+++ b/components/lib/rating/style/RatingStyle.js
@@ -5,7 +5,7 @@ const theme = ({ dt }) => `
     position: relative;
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: ${dt('rating.gap')};
 }
 
 .p-rating-option {
@@ -15,19 +15,21 @@ const theme = ({ dt }) => `
     outline-color: transparent;
     border-radius: 50%;
     cursor: pointer;
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
 }
 
 .p-rating-option.p-focus-visible {
+    box-shadow: ${dt('focus.ring.shadow')};
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
 .p-rating-icon {
     color: ${dt('rating.icon.color')};
-    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
-    font-size: 1rem;
-    width: 1rem;
-    height: 1rem;
+    transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+    font-size: ${dt('rating.icon.size')};
+    width: ${dt('rating.icon.size')};
+    height: ${dt('rating.icon.size')};
 }
 
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
diff --git a/components/lib/themes/aura/rating/index.js b/components/lib/themes/aura/rating/index.js
index b5b8b25a3..d1dce4a4e 100644
--- a/components/lib/themes/aura/rating/index.js
+++ b/components/lib/themes/aura/rating/index.js
@@ -1,5 +1,7 @@
 export default {
+    gap: '0.25rem',
     icon: {
+        size: '1rem',
         color: '{text.muted.color}',
         hoverColor: '{primary.color}',
         activeColor: '{primary.color}'
diff --git a/components/lib/themes/lara/rating/index.js b/components/lib/themes/lara/rating/index.js
index b5b8b25a3..449f8b847 100644
--- a/components/lib/themes/lara/rating/index.js
+++ b/components/lib/themes/lara/rating/index.js
@@ -1,5 +1,7 @@
 export default {
+    gap: '0.25rem',
     icon: {
+        size: '1.25rem',
         color: '{text.muted.color}',
         hoverColor: '{primary.color}',
         activeColor: '{primary.color}'