refactor(rating): update rating theme to consume schema colors (#13541)

* refactor(rating): update taring theme to consume schema colors

* build(igniteui-theming): update the package to the latest version

---------

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

package-lock.json

@@ -67,7 +67,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.1.1",
+    "igniteui-theming": "^3.2.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.1.1",
+        "igniteui-theming": "^3.2.2",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -52,7 +52,7 @@
     }
 
     igc-rating::part(value-label) {
-        color: color(null, 'gray', 900);
+        color: var-get($theme, 'value-label');
     }
 
     igc-rating[disabled]::part(label),
@@ -61,9 +61,9 @@
     }
 
     igc-rating[disabled] {
-        --symbol-empty-color: var(--disabled-empty-symbol-color);
-        --symbol-full-color: var(--disabled-full-symbol-color);
-        --symbol-empty-filter: grayscale(100%) opacity(50%);
-        --symbol-full-filter: grayscale(50%);
+        --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')};
+        --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')};
+        --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')};
+        --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')};
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

@@ -2,22 +2,21 @@
     <igx-card *ngFor="let model of models">
         <igx-card-header>
             <span igxCardHeaderTitle>{{model.Name}}</span>
+            <span igxCardHeaderSubtitle>{{ model.Name }}'s rating is: {{ model.Rating }}</span>
         </igx-card-header>
         <igx-card-content>
             <form #form1="ngForm">
-                <igx-input-group>
+                <igx-input-group type="border">
                     <input igxInput name="modelName" type="text" [(ngModel)]="model.Name" required />
                     <label igxLabel for="modelName">Model Name</label>
                 </igx-input-group>
 
-                <igx-input-group>
+                <igx-input-group type="box">
                     <input igxInput name="modelRating" type="text" [(ngModel)]="model.Rating" required />
                     <label igxLabel for="modelRating">Model Rating</label>
                 </igx-input-group>
 
                 <igc-rating name="modelRating" [(ngModel)]="model.Rating" max="10" label="Model Rating"></igc-rating>
-
-                <p>{{ model.Name }}'s rating is: {{ model.Rating }}</p>
             </form>
         </igx-card-content>
     </igx-card>

src/app/rating/rating.sample.html

@@ -4,4 +4,10 @@
         row-gap: 16px;
         column-gap: 16px;
     }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+    }
 }