Implement creator V2 Surface background calculations

packages/survey-creator-core/src/components/tabs/designer-plugin.ts

@@ -14,7 +14,7 @@ import { editorLocalization } from "../../editorLocalization";
 import { creatorThemeModelPropertyGridDefinition } from "../../creator-theme/creator-theme-model-definition";
 import { CreatorThemeModel } from "../../creator-theme/creator-theme-model";
 import { ICreatorTheme } from "../../creator-theme/creator-themes";
-import { getPredefinedColorsItemValues } from "./themes";
+import { getPredefinedBackgoundColorsChoices, getPredefinedColorsItemValues } from "./themes";
 
 export class TabDesignerPlugin implements ICreatorPlugin {
   public model: TabDesignerViewModel;
@@ -116,6 +116,9 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   }
   private updatePredefinedColorChoices() {
     this.themePropertyGrid.survey.getAllQuestions().forEach(question => {
+      if (question.name === "--sjs-special-background") {
+        (question as any).choices = this.themeModel && this.themeModel.isLight ? getPredefinedBackgoundColorsChoices() : [];
+      }
       if (question.name === "--sjs-primary-background-500" || question.name === "--sjs-secondary-background-500") {
         (question as any).choices = getPredefinedColorsItemValues(this.themeModel.isLight === false ? "dark" : "light");
       }
@@ -236,7 +239,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
         keyCode: 46,
       },
       execute: () => {
-        if(!this.creator.readOnly) {
+        if (!this.creator.readOnly) {
           this.creator.deleteCurrentElement();
         }
       }
@@ -247,7 +250,7 @@ export class TabDesignerPlugin implements ICreatorPlugin {
     if (this.showOneCategoryInPropertyGrid) {
       const pgTabs = [];
       this.propertyGrid.survey.pages.forEach(p => {
-        if(p.elements.length === 0) return;
+        if (p.elements.length === 0) return;
 
         const action = new MenuButton({
           id: p.name,

packages/survey-creator-core/src/components/tabs/themes.ts

@@ -25,8 +25,29 @@ export const PredefinedColors = {
   }
 };
 
+export const PredefinedBackgroundColors = {
+  light: {
+    teal: "rgba(239, 249, 249, 1)",
+    blue: "rgba(243, 247, 253, 1)",
+    purple: "rgba(248, 244, 254, 1)",
+    orchid: "rgba(252, 242, 250, 1)",
+    tulip: "rgba(253, 243, 245, 1)",
+    brown: "rgba(251, 245, 241, 1)",
+    green: "rgba(240, 250, 243, 1)",
+    gray: "rgba(246, 246, 246, 1)"
+  },
+  dark: {
+  }
+};
+
 export function getPredefinedColorsItemValues(colorPalette: string = "light") {
   return Object.keys(PredefinedColors[colorPalette]).map(colorName =>
     new ItemValue(PredefinedColors[colorPalette][colorName], getLocString("theme.colors." + colorName))
   );
+}
+
+export function getPredefinedBackgoundColorsChoices(colorPalette: string = "light") {
+  return Object.keys(PredefinedBackgroundColors[colorPalette]).map(colorName =>
+    ({ value: PredefinedBackgroundColors[colorPalette][colorName], text: getLocString("theme.colors." + colorName) })
+  );
 }

packages/survey-creator-core/src/creator-theme/creator-theme-model.ts

@@ -1,8 +1,9 @@
 import { Serializer, Base, property, ArrayChanges, EventBase, ILoadFromJSONOptions, ISaveToJSONOptions } from "survey-core";
 import { getLocString } from "../editorLocalization";
-import { assign, roundTo2Decimals, ColorCalculator } from "../utils/utils";
+import { assign, roundTo2Decimals, ColorCalculator, colorsAreEqual } from "../utils/utils";
 import { CreatorThemes, ICreatorTheme, PredefinedCreatorThemes } from "./creator-themes";
 import * as Themes from "survey-creator-core/themes";
+import { PredefinedBackgroundColors, PredefinedColors } from "../components/tabs/themes";
 
 Object.keys(Themes || {}).forEach(themeName => {
   const theme: ICreatorTheme = Themes[themeName];
@@ -74,6 +75,30 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
     this.setThemeCssVariablesChanges(lightColorName, calculator.colorSettings.newColorLight);
     this.setThemeCssVariablesChanges(darkColorName, calculator.colorSettings.newColorDark);
   }
+  private isSpecialBackgroundFromCurrentTheme() {
+    const currentTheme = CreatorThemes[this.themeName];
+    return colorsAreEqual(currentTheme && currentTheme.cssVariables && currentTheme.cssVariables["--sjs-special-background"], this["--sjs-special-background"]);
+  }
+  private findAppropriateSpecialBackground(primaryColorValue: string) {
+    let primaryColorName: string;
+    const colorsDict = PredefinedColors["light"];
+    Object.keys(colorsDict).forEach(colorName => {
+      if (colorsAreEqual(colorsDict[colorName], primaryColorValue)) {
+        primaryColorName = colorName;
+      }
+    });
+    return PredefinedBackgroundColors["light"][primaryColorName];
+  }
+  private updateBackgroundColor(primaryColorNewValue: any, primaryColorOldValue: any) {
+    if (!this.isLight) {
+      return;
+    }
+    const canCalculateSpecialBackgroundColor = this.isSpecialBackgroundFromCurrentTheme() || colorsAreEqual(this.findAppropriateSpecialBackground(primaryColorOldValue), this["--sjs-special-background"]);
+    if (canCalculateSpecialBackgroundColor) {
+      const newSpecialBackgroundColor = this.findAppropriateSpecialBackground(primaryColorNewValue);
+      this["--sjs-special-background"] = newSpecialBackgroundColor || PredefinedBackgroundColors["light"]["gray"];
+    }
+  }
 
   constructor() {
     super();
@@ -116,7 +141,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
   }
   private resetColorThemeCssVariablesChanges(): void {
     Object.keys(this.themeCssVariablesChanges).forEach(key => {
-      if(key.indexOf("--sjs-") === 0) {
+      if (key.indexOf("--sjs-") === 0) {
         delete this.themeCssVariablesChanges[key];
       }
     });
@@ -130,6 +155,7 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
       this.onThemeSelected.fire(this, { theme: this.toJSON() });
     } else if (name === "--sjs-primary-background-500") {
       this.updateColorPropertiesDependentOnBaseColor(this.primaryColorCalculator, newValue, "--sjs-primary-background-500", "--sjs-primary-background-10", "--sjs-primary-background-400");
+      this.updateBackgroundColor(newValue, oldValue);
     } else if (name === "--sjs-secondary-background-500") {
       this.updateColorPropertiesDependentOnBaseColor(this.secondaryColorCalculator, newValue, "--sjs-secondary-background-500", "--sjs-secondary-background-10", "--sjs-secondary-background-25");
     } else if (name === "--sjs-special-background") {

packages/survey-creator-core/src/localization/english.ts

@@ -1770,7 +1770,8 @@ export var enStrings = {
       orchid: "Orchid",
       tulip: "Tulip",
       brown: "Brown",
-      green: "Green"
+      green: "Green",
+      gray: "Gray"
     },
   },
   creatortheme: {

packages/survey-creator-core/src/utils/utils.ts

@@ -480,3 +480,11 @@ export function saveToFileHandler(fileName: string, blob: Blob) {
     document.body.removeChild(elem);
   }
 }
+
+export function colorsAreEqual(color1: string, color2: string) {
+  const color1Value = parseColor(color1);
+  color1Value.color = color1Value.color.substring(0, 7).toUpperCase();
+  const color2Value = parseColor(color2);
+  color2Value.color = color2Value.color.substring(0, 7).toUpperCase();
+  return color1Value.color === color2Value.color && color1Value.opacity === color2Value.opacity;
+}

packages/survey-creator-core/tests/creator-theme/creator-theme-model.tests.ts

@@ -1,9 +1,11 @@
 import { CreatorTester } from "../creator-tester";
 import { CreatorThemeModel } from "../../src/creator-theme/creator-theme-model";
 import { TabDesignerPlugin } from "../../src/components/tabs/designer-plugin";
-import { CreatorThemes, ICreatorTheme } from "../../src/creator-theme/creator-themes";
+import { CreatorThemes, ICreatorTheme, PredefinedCreatorThemes } from "../../src/creator-theme/creator-themes";
 
 import "survey-core/survey.i18n";
+import { PredefinedBackgroundColors, PredefinedColors } from "../../src/components/tabs/themes";
+import { colorsAreEqual } from "../../src/utils/utils";
 export { QuestionSpinEditorModel } from "../../src/custom-questions/question-spin-editor";
 export { QuestionColorModel } from "../../src/custom-questions/question-color";
 
@@ -100,9 +102,9 @@ test("Creator theme: reset color variables after change theme", (): any => {
     expect(primaryBackgroundColor.value).toEqual("#19B394FF");
     expect(secondaryBackgroundColor.value).toEqual("#FF9814FF");
 
-    surfaceBackgroundColor.value = "rgba(10, 10, 10, 1)";
     primaryBackgroundColor.value = "rgba(20, 20, 20, 1)";
     secondaryBackgroundColor.value = "rgba(30, 30, 30, 0.1)";
+    surfaceBackgroundColor.value = "rgba(10, 10, 10, 1)";
     expect(themeModel.themeCssVariablesChanges).toStrictEqual({
       "--sjs-primary-background-10": "rgba(20, 20, 20, 0.1)",
       "--sjs-primary-background-400": "rgba(5, 5, 5, 1)",
@@ -303,4 +305,28 @@ test("Creator theme: apply custom theme", (): any => {
 
   expect(secondaryBackgroundColor.value).toEqual("#0b864b");
   expect(themeModel["--sjs-secondary-background-500"]).toBe("#0b864b");
-});
+});
+
+test("sjs-special-background calculations on primary background changed", (): any => {
+  const themeModel = new CreatorThemeModel();
+
+  expect(themeModel["--sjs-primary-background-500"]).toEqual("#19B394FF");
+  expect(themeModel["--sjs-special-background"]).toEqual("#F3F3F3FF");
+
+  themeModel.loadTheme(PredefinedCreatorThemes["sc2020"]);
+  expect(themeModel["--sjs-primary-background-500"]).toEqual("#19B394FF");
+  expect(themeModel["--sjs-special-background"]).toEqual("#F3F3F3FF");
+
+  themeModel["--sjs-primary-background-500"] = PredefinedColors["light"]["teal"];
+  themeModel["--sjs-primary-background-500"] = PredefinedColors["light"]["teal"];
+  expect(colorsAreEqual(themeModel["--sjs-primary-background-500"], PredefinedColors["light"]["teal"])).toBeTruthy();
+  expect(colorsAreEqual(themeModel["--sjs-special-background"], PredefinedBackgroundColors["light"]["teal"])).toBeTruthy();
+
+  themeModel["--sjs-primary-background-500"] = PredefinedColors["light"]["orchid"];
+  expect(colorsAreEqual(themeModel["--sjs-primary-background-500"], PredefinedColors["light"]["orchid"])).toBeTruthy();
+  expect(colorsAreEqual(themeModel["--sjs-special-background"], PredefinedBackgroundColors["light"]["orchid"])).toBeTruthy();
+
+  themeModel["--sjs-primary-background-500"] = "#fefefe";
+  expect(colorsAreEqual(themeModel["--sjs-primary-background-500"], "#fefefe")).toBeTruthy();
+  expect(colorsAreEqual(themeModel["--sjs-special-background"], PredefinedBackgroundColors["light"]["gray"])).toBeTruthy();
+});