#6593 Rating question should get colors from theme (#6634)

* Rating question should get colors from theme
Fixes #6593

* #6593 Rating question should get colors from theme
Fixes #6593

* #6593 - fixed initColors call

---------

Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>

src/question_rating.ts

@@ -10,6 +10,8 @@ import { Base } from "./base";
 import { HtmlConditionItem } from "./expressionItems";
 import { mergeValues } from "./utils/utils";
 import { DropdownListModel } from "./dropdownListModel";
+import { SurveyModel } from "./survey";
+import { ISurveyImpl } from "./base-interfaces";
 
 export class RenderedRatingItem extends Base {
   private onStringChangedCallback() {
@@ -41,8 +43,6 @@ export class QuestionRatingModel extends Question {
   constructor(name: string) {
     super(name);
 
-    this.initColors();
-
     this.createItemValues("rateValues");
     this.createRenderedRateItems();
     this.createLocalizableString("ratingOptionsCaption", this, false, true);
@@ -63,7 +63,7 @@ export class QuestionRatingModel extends Question {
       });
     this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"],
       () => {
-        this.initColors();
+        this.updateColors((this.survey as SurveyModel).themeVariables);
       });
     this.registerFunctionOnPropertiesValueChanged(["autoGenerate"],
       () => {
@@ -87,6 +87,7 @@ export class QuestionRatingModel extends Question {
       true
     );
     this.initPropertyDependencies();
+
   }
   private setIconsToRateValues() {
     if (this.rateType == "smileys") {
@@ -96,7 +97,6 @@ export class QuestionRatingModel extends Question {
 
   endLoadingFromJson() {
     super.endLoadingFromJson();
-    this.initColors();
     this.hasMinRateDescription = !!this.minRateDescription;
     this.hasMaxRateDescription = !!this.maxRateDescription;
     if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
@@ -265,6 +265,8 @@ export class QuestionRatingModel extends Question {
    */
   @property({ defaultValue: 5 }) rateCount: number;
 
+  private static colorsCalculated: boolean = false;
+
   private static badColor: Array<number>;
   private static normalColor: Array<number>;
   private static goodColor: Array<number>;
@@ -273,13 +275,16 @@ export class QuestionRatingModel extends Question {
   private static normalColorLight: Array<number>;
   private static goodColorLight: Array<number>;
 
-  private initColors() {
+  private updateColors(themeVariables: any) {
     if (this.colorMode === "monochrome") return;
     if (typeof document === "undefined" || !document) return;
-    if (QuestionRatingModel.badColor && QuestionRatingModel.normalColor && QuestionRatingModel.goodColor) return;
-    function getRGBColor(varName: string) {
-      const style = getComputedStyle(document.documentElement);
-      const str = style.getPropertyValue && style.getPropertyValue(varName);
+    if (QuestionRatingModel.colorsCalculated) return;
+    function getRGBColor(colorName: string, varName: string) {
+      let str: string = !!themeVariables && themeVariables[colorName] as any;
+      if(!str) {
+        const style = getComputedStyle(document.documentElement);
+        str = style.getPropertyValue && style.getPropertyValue(varName);
+      }
       if (!str) return null;
       var ctx = document.createElement("canvas").getContext("2d");
       ctx.fillStyle = str;
@@ -296,12 +301,15 @@ export class QuestionRatingModel extends Question {
         1
       ] : null;
     }
-    QuestionRatingModel.badColor = getRGBColor("--sd-rating-bad-color");
-    QuestionRatingModel.normalColor = getRGBColor("--sd-rating-normal-color");
-    QuestionRatingModel.goodColor = getRGBColor("--sd-rating-good-color");
-    QuestionRatingModel.badColorLight = getRGBColor("--sd-rating-bad-color-light");
-    QuestionRatingModel.normalColorLight = getRGBColor("--sd-rating-normal-color-light");
-    QuestionRatingModel.goodColorLight = getRGBColor("--sd-rating-good-color-light");
+
+    QuestionRatingModel.badColor = getRGBColor("--sjs-special-red", "--sd-rating-bad-color");
+    QuestionRatingModel.normalColor = getRGBColor("--sjs-special-yellow", "--sd-rating-normal-color");
+    QuestionRatingModel.goodColor = getRGBColor("--sjs-special-green", "--sd-rating-good-color");
+    QuestionRatingModel.badColorLight = getRGBColor("--sjs-special-red-light", "--sd-rating-bad-color-light");
+    QuestionRatingModel.normalColorLight = getRGBColor("--sjs-special-yellow-light", "--sd-rating-normal-color-light");
+    QuestionRatingModel.goodColorLight = getRGBColor("--sjs-special-green-light", "--sd-rating-good-color-light");
+
+    this.colorsCalculated = true;
   }
 
   protected getDisplayValueCore(keysAsText: boolean, value: any): any {
@@ -794,6 +802,17 @@ export class QuestionRatingModel extends Question {
     }
     return classes;
   }
+  public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
+    super.setSurveyImpl(value, isLight);
+    if (!this.survey) return;
+    this.updateColors((this.survey as SurveyModel).themeVariables);
+
+    (<SurveyModel>this.survey).onThemeApplied.add((survey, options) => {
+      this.colorsCalculated = false;
+      this.updateColors(options.theme.cssVariables);
+      this.createRenderedRateItems();
+    });
+  }
   public dispose(): void {
     super.dispose();
     if(!!this.dropdownListModelValue) {

src/survey.ts

@@ -120,6 +120,7 @@ export class SurveyModel extends SurveyElementCore
 
   private navigationBarValue: ActionContainer;
 
+  onThemeApplying: EventBase<SurveyModel> = new EventBase<SurveyModel>();
   onThemeApplied: EventBase<SurveyModel> = new EventBase<SurveyModel>();
 
   //#region Event declarations
@@ -7161,8 +7162,7 @@ export class SurveyModel extends SurveyElementCore
   }
 
   public applyTheme(theme: ITheme): void {
-    if(!theme) return;
-
+    if (!theme) return;
     Object.keys(theme).forEach((key: keyof ITheme) => {
       if(key === "isPanelless") {
         this.isCompact = theme[key];
@@ -7171,7 +7171,7 @@ export class SurveyModel extends SurveyElementCore
       }
     });
 
-    this.onThemeApplied.fire(this, {});
+    this.onThemeApplied.fire(this, { theme: theme });
   }
 
   /**

visualRegressionTests/tests/defaultV2/rating.ts

@@ -438,6 +438,47 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check rating smileys scale colored question themes", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      const focusBody = ClientFunction(() => { document.body.focus(); });
+
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        questions: [
+          {
+            type: "rating",
+            name: "satisfaction",
+            title: "Rating",
+            rateType: "smileys",
+            scaleColorMode: "colored",
+            defaultValue: "1",
+            rateMax: 5,
+            minRateDescription: "Not Satisfied",
+            maxRateDescription: "Completely satisfied",
+            width: "708px"
+          }
+        ]
+      });
+
+      await ClientFunction(() => {
+        const themeJson = {
+          "cssVariables": {
+            "--sjs-special-red": "orange",
+            "--sjs-special-yellow": "magenta",
+            "--sjs-special-green": "blue"
+          },
+          "isPanelless": false
+        };
+        window["survey"].applyTheme(themeJson);
+      })();
+
+      const questionRoot = Selector(".sd-question");
+      await focusBody();
+      await takeElementScreenshot("question-rating-smileys-scale-colored-theme", questionRoot, t, comparer);
+    });
+  });
+
   test("Check rating smileys disabled question", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);