feat: adjust rating styles (#2635)

## What's the purpose of this pull request?

This pull request introduces adjustments to the **Rating component** for
the new **Reviews & Ratings** section.

## How it works?

It updates the colors for both the default and actionable versions,
using `main-2` for active stars and `neutral-4` for empty stars.
Additionally, it includes the addition of a `disabled` style for the
actionable rating.

## How to test it?

<!--- Describe the steps with bullet points. Is there any external link
that can be used to better test it or an example? --->

### Starters Deploy Preview

<!--- Add a link to a deploy preview from `starter.store` with this
branch being used. --->

<!--- Tip: You can get an installable version of this branch from the
CodeSandbox generated when this PR is created. --->


[Preview](https://starter-git-feat-rating-field-vtex.vercel.app/review-and-ratings-playground)

## References

[JIRA TASK: SFS-2077](https://vtex-dev.atlassian.net/browse/SFS-2077)


[Figma](https://www.figma.com/design/YXU6IX2htN2yg7udpCumZv/Reviews-%26-Ratings?node-id=131-49445&t=97j1KIeA0brteiq8-4)

Default


![image](https://github.com/user-attachments/assets/53cff9ef-b54a-4ea6-9ea0-1d1d574ce04c)

Actionable


![image](https://github.com/user-attachments/assets/ae6395cb-2bc8-4dff-94a3-c99f0eb7c5ac)

packages/components/src/molecules/Rating/Rating.tsx

@@ -30,6 +30,10 @@ export interface RatingProps
    * Function to be triggered when Rating option change. This should only be used if you and an actionable rating list.
    */
   onChange?: (value: number) => void
+  /**
+   * Specifies that the actionable rating should be disabled.
+   */
+  disabled?: boolean
 }
 
 export interface RatingItemProps {
@@ -45,6 +49,7 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
     value = 0,
     icon,
     onChange,
+    disabled,
     ...otherProps
   },
   ref
@@ -94,6 +99,7 @@ const Rating = forwardRef<HTMLUListElement, RatingProps>(function Rating(
                 }}
                 onMouseEnter={() => setHover(tempIndex)}
                 onMouseLeave={() => setHover(value)}
+                disabled={disabled}
               />
             ) : (
               <>

packages/ui/src/components/molecules/Rating/styles.scss

@@ -4,35 +4,48 @@
   // --------------------------------------------------------
 
   // Default properties
-  --fs-rating-gap                     : var(--fs-spacing-0);
-  --fs-rating-color                   : var(--fs-color-text);
+  --fs-rating-gap                              : var(--fs-spacing-0);
+  --fs-rating-color                            : var(--fs-color-main-2);
+  --fs-rating-color-empty                      : var(--fs-color-neutral-4);
 
   // Icon
-  --fs-rating-icon-width              : var(--fs-spacing-3);
-  --fs-rating-icon-height             : var(--fs-rating-icon-width);
+  --fs-rating-icon-width                       : var(--fs-spacing-3);
+  --fs-rating-icon-height                      : var(--fs-rating-icon-width);
 
   // Actionable
-  --fs-rating-actionable-gap          : 0;
-  --fs-rating-actionable-icon-width   : var(--fs-rating-icon-width);
-  --fs-rating-actionable-icon-height  : var(--fs-rating-actionable-icon-width);
+  --fs-rating-actionable-gap                   : 0;
+  --fs-rating-actionable-icon-width            : var(--fs-rating-icon-width);
+  --fs-rating-actionable-icon-height           : var(--fs-rating-actionable-icon-width);
+  --fs-rating-actionable-icon-color            : var(--fs-rating-color-empty);
+  --fs-rating-actionable-icon-color-selected   : var(--fs-rating-color);
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
-
   display: flex;
 
   [data-fs-icon] {
-    color: var(--fs-rating-color);
     width: var(--fs-rating-icon-width);
     height: var(--fs-rating-icon-height);
+    color: var(--fs-rating-color);
   }
 
   [data-fs-rating-button] {
     color: unset;
-    &[data-fs-button-variant=tertiary]:hover,
-    &[data-fs-button-variant=tertiary]:focus,
-    &[data-fs-button-variant=tertiary]:active { color: unset; }
+
+    &[disabled] [data-fs-button-wrapper] {
+      background-color: transparent;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &[data-fs-button-variant="tertiary"]:hover,
+    &[data-fs-button-variant="tertiary"]:focus,
+    &[data-fs-button-variant="tertiary"]:active {
+      color: unset;
+    }
   }
 
   [data-fs-rating-icon-wrapper] {
@@ -42,17 +55,21 @@
     overflow: hidden;
   }
 
-  svg[data-fs-rating-icon-outline] { 
-    fill: none; 
+  svg[data-fs-rating-icon-outline] {
+    fill: none;
   }
 
-  [data-fs-rating-item] { position: relative; }
+  [data-fs-rating-item] {
+    position: relative;
+    fill: var(--fs-rating-color);
+  }
 
   //  --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------
 
   [data-fs-rating-item="empty"] svg[data-fs-icon] {
+    color: var(--fs-rating-color-empty);
     fill: none;
   }
 
@@ -66,10 +83,16 @@
 
   &[data-fs-rating-actionable="true"] {
     column-gap: var(--fs-rating-actionable-gap);
+
+    [data-fs-rating-item="full"] svg[data-fs-icon] {
+      color: var(--fs-rating-actionable-icon-color-selected);
+      fill: var(--fs-rating-actionable-icon-color-selected);
+    }
+
     [data-fs-icon] {
       width: var(--fs-rating-actionable-icon-width);
       height: var(--fs-rating-actionable-icon-height);
+      color: var(--fs-rating-actionable-icon-color);
     }
   }
-
 }