fix(rating): overwritten properties (#1654)

Author: SisIvanova

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^17.1.0",
+    "igniteui-theming": "^17.2.0",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^15.5.1",
     "lit-analyzer": "^2.0.3",

package.json

@@ -17,8 +17,6 @@
 }
 
 [part~='symbols'] {
-    --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))};
-
     position: relative;
     display: flex;
     justify-content: center;

src/components/rating/themes/rating.base.scss

@@ -5,6 +5,7 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --symbol-size: #{var-get($theme, 'symbol-size')};
     --symbol-full-color: #{var-get($theme, 'symbol-full-color')};
     --symbol-empty-color: #{var-get($theme, 'symbol-empty-color')};
 }
@@ -28,16 +29,27 @@ $theme: $material;
 
 :host([disabled]),
 :host(:disabled) {
-    --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
-    --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
     --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')};
     --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')};
 
+    igc-rating-symbol::part(full) {
+        color: var-get($theme, 'disabled-full-symbol-color');
+    }
+
+    igc-rating-symbol::part(empty) {
+        color: var-get($theme, 'disabled-empty-symbol-color');
+    }
+
     [part~='label'] {
         color: var-get($theme, 'disabled-label-color');
     }
 
     [part~='value-label'] {
         color: var-get($theme, 'disabled-label-color');
     }
+
+    [part~='symbols'] {
+        --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
+        --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
+    }
 }

src/components/rating/themes/shared/rating.common.scss

@@ -23,7 +23,5 @@ $theme: $indigo;
 }
 
 [part~='symbols'] {
-    --symbol-size: #{sizable(rem(18px), rem(24px), rem(30px))};
-
     padding-inline-end: 0;
 }