Remove 8-digit colors from predefined themes (#6643)

* Remove 8-digit colors from predefined themes

* Update etalons

Author: dk981234

packages/survey-creator-core/creator-themes-import.js

@@ -164,6 +164,12 @@ function getUsedCssVariables(path) {
   });
 }
 
+function correctColorVariables(curPaletteCssVariables) {
+  for (let key in curPaletteCssVariables) {
+    curPaletteCssVariables[key] = curPaletteCssVariables[key].replace(/^(#\w{6,6})[fF]{2,2}$/, "$1");
+  }
+}
+
 function getCssVariablesFormFile(fileName) {
   try {
     const data = fs.readFileSync(sourcePath + fileName, "utf8");
@@ -205,6 +211,7 @@ let exportedNames = [];
 
 function writeTheme2020(themeName, cssVars, variableName) {
   const curPaletteCssVariables = getCssVariablesFormFile(themeName + "/v2.css");
+  correctColorVariables(curPaletteCssVariables);
   const cssVariables = { ...cssVars, ...curPaletteCssVariables };
   const theme = { themeName, iconSet: "v1", isLight: true, cssVariables };
   const themeJson = JSON.stringify(theme, null, 2);
@@ -281,9 +288,9 @@ Object.keys(themeNameMap).forEach(themeName => {
   (palettes || []).forEach(paletteName => {
     console.log("Palette - " + paletteName);
     const curPaletteCssVariables = getCssVariablesFormFile(currentTheme + "/" + paletteName + ".css");
+    correctColorVariables(curPaletteCssVariables);
     const resultColorVariables = generateColorVariables(curPaletteCssVariables);
     const cssVariables = { ...curPaletteCssVariables, ...resultColorVariables };
-
     if (baseThemeName === themeName && paletteName === "light") {
       const cssVariablesJson = JSON.stringify(resultColorVariables, null, 2);
       const result = `export const DefaultLightColorCssVariables = ${cssVariablesJson};`;

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

@@ -108,12 +108,12 @@ export class CreatorThemeModel extends Base implements ICreatorTheme {
       this.loadTheme({ themeName: newValue });
       this.onThemeSelected.fire(this, { theme: this.toJSON() });
     } else if (name === "--sjs-primary-background-500") {
-      this.setPropertyValue(name, newValue);
       this.setThemeCssVariablesChanges(name, newValue);
+      this.setPropertyValue(name, newValue);
       this.updateBackgroundColor(newValue, oldValue);
     } else if (name === "--sjs-secondary-background-500" || name === "--sjs-special-background") {
-      this.setPropertyValue(name, newValue);
       this.setThemeCssVariablesChanges(name, newValue);
+      this.setPropertyValue(name, newValue);
     } else if (name.indexOf("--") === 0) {
       this.setThemeCssVariablesChanges(name, newValue);
     } else if (name == "fontScale" || name == "scale") {
@@ -260,7 +260,7 @@ Serializer.addProperties("creatortheme", [
   {
     type: "color",
     name: "--sjs-special-background",
-    default: "#EDF9F7FF",
+    default: "#EDF9F7",
     enableIf: (obj: CreatorThemeModel): boolean => {
       return !obj || obj.themeName !== CreatorThemeModel.legacyThemeName;
     },
@@ -273,7 +273,7 @@ Serializer.addProperties("creatortheme", [
   }, {
     type: "color",
     name: "--sjs-primary-background-500",
-    default: "#19B394FF",
+    default: "#19B394",
     onPropertyEditorUpdate: function (obj: any, editor: any) {
       if (!!editor) {
         editor.titleLocation = "left";
@@ -283,7 +283,7 @@ Serializer.addProperties("creatortheme", [
   }, {
     type: "color",
     name: "--sjs-secondary-background-500",
-    default: "#19B394FF",
+    default: "#19B394",
     displayName: "",
     onPropertyEditorUpdate: function (obj: any, editor: any) {
       if (!!editor) {

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

@@ -22,9 +22,9 @@ export function registerCreatorTheme(...themes: Array<ThemesHash<ICreatorTheme>
 }
 
 const defaultVariables = {
-  "--sjs-special-background": "#EDF9F7FF",
-  "--sjs-primary-background-500": "#19B394FF",
-  "--sjs-secondary-background-500": "#19B394FF",
+  "--sjs-special-background": "#EDF9F7",
+  "--sjs-primary-background-500": "#19B394",
+  "--sjs-secondary-background-500": "#19B394",
 };
 
 export const CreatorThemes: { [index: string]: ICreatorTheme } = {

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

@@ -2,41 +2,41 @@ const designTabSurveyThemeJSON = {
   "cssVariables": {
     "--sjs-base-unit": "var(--ctr-surface-base-unit)",
     "--sjs-font-size": "calc(2 * var(--ctr-surface-base-unit))",
-    "--sjs-primary-backcolor": "var(--sjs-primary-background-500, #19B394FF)",
+    "--sjs-primary-backcolor": "var(--sjs-primary-background-500, #19B394)",
     "--sjs-primary-backcolor-light": "var(--sjs-primary-background-10, #19B3941A)",
-    "--sjs-primary-backcolor-dark": "var(--sjs-primary-background-400, #14A48BFF)",
-    "--sjs-primary-forecolor": "var(--sjs-primary-foreground-100, #FFFFFFFF)",
+    "--sjs-primary-backcolor-dark": "var(--sjs-primary-background-400, #14A48B)",
+    "--sjs-primary-forecolor": "var(--sjs-primary-foreground-100, #FFFFFF)",
     "--sjs-primary-forecolor-light": "var(--sjs-primary-foreground-25, #FFFFFF40)",
-    "--sjs-secondary-backcolor": "var(--sjs-secondary-background-500, #19B394FF)",
+    "--sjs-secondary-backcolor": "var(--sjs-secondary-background-500, #19B394)",
     "--sjs-secondary-backcolor-light": "var(--sjs-secondary-background-10, #19B3941A)",
     "--sjs-secondary-backcolor-semi-light": "var(--sjs-secondary-background-25, #19B39440)",
-    "--sjs-secondary-forecolor": "var(--sjs-secondary-foreground-100, #FFFFFFFF)",
+    "--sjs-secondary-forecolor": "var(--sjs-secondary-foreground-100, #FFFFFF)",
     "--sjs-secondary-forecolor-light": "var(--sjs-secondary-forecolor-25, #FFFFFF40)",
-    "--sjs-general-backcolor": "var(--sjs-layer-1-background-500, #FFFFFFFF)",
-    "--sjs-general-backcolor-dark": "var(--sjs-layer-1-background-400, #F5F5F5FF)",
+    "--sjs-general-backcolor": "var(--sjs-layer-1-background-500, #FFFFFF)",
+    "--sjs-general-backcolor-dark": "var(--sjs-layer-1-background-400, #F5F5F5)",
     "--sjs-general-forecolor": "var(--sjs-layer-1-foreground-100, #000000E6)",
     "--sjs-general-forecolor-light": "var(--sjs-layer-1-foreground-50, #00000080)",
-    "--sjs-general-backcolor-dim": "var(--sjs-layer-3-background-500, #F4F4F4FF)",
+    "--sjs-general-backcolor-dim": "var(--sjs-layer-3-background-500, #F4F4F4)",
     "--sjs-general-dim-forecolor": "var(--sjs-layer-3-foreground-100, #000000E6)",
     "--sjs-general-dim-forecolor-light": "var(--sjs-layer-3-foreground-50, #00000080)",
-    "--sjs-general-backcolor-dim-light": "var(--sjs-layer-2-background-500, #F8F8F8FF)",
-    "--sjs-general-backcolor-dim-dark": "var(--sjs-layer-2-background-400, #EEEEEEFF)",
-    "--sjs-border-default": "var(--sjs-border-25, #D4D4D4FF)",
-    "--sjs-border-light": "var(--sjs-border-10, #DCDCDCFF)",
-    "--sjs-border-inside": "var(--sjs-border-25, #D4D4D4FF)",
-    "--sjs-special-red": "var(--sjs-semantic-red-background-500, #E50A3EFF)",
+    "--sjs-general-backcolor-dim-light": "var(--sjs-layer-2-background-500, #F8F8F8)",
+    "--sjs-general-backcolor-dim-dark": "var(--sjs-layer-2-background-400, #EEEEEE)",
+    "--sjs-border-default": "var(--sjs-border-25, #D4D4D4)",
+    "--sjs-border-light": "var(--sjs-border-10, #DCDCDC)",
+    "--sjs-border-inside": "var(--sjs-border-25, #D4D4D4)",
+    "--sjs-special-red": "var(--sjs-semantic-red-background-500, #E50A3E)",
     "--sjs-special-red-light": "var(--sjs-semantic-red-background-10, #E50A3E1A)",
-    "--sjs-special-red-forecolor": "var(--sjs-semantic-red-foreground-100, #FFFFFFFF)",
-    "--sjs-special-green": "var(--sjs-semantic-green-background-500, #19B394FF)",
+    "--sjs-special-red-forecolor": "var(--sjs-semantic-red-foreground-100, #FFFFFF)",
+    "--sjs-special-green": "var(--sjs-semantic-green-background-500, #19B394)",
     "--sjs-special-green-light": "var(--sjs-semantic-green-background-10, #19B3941A)",
-    "--sjs-special-green-forecolor": "var(--sjs-semantic-green-foreground-100, #FFFFFFFF)",
-    "--sjs-special-blue": "var(--sjs-semantic-blue-background-500, #437FD9FF)",
+    "--sjs-special-green-forecolor": "var(--sjs-semantic-green-foreground-100, #FFFFFF)",
+    "--sjs-special-blue": "var(--sjs-semantic-blue-background-500, #437FD9)",
     "--sjs-special-blue-light": "var(--sjs-semantic-blue-background-10, #437FD91A)",
-    "--sjs-special-blue-forecolor": "var(--sjs-semantic-blue-foreground-100, #FFFFFFFF)",
-    "--sjs-special-yellow": "var(--sjs-semantic-yellow-background-500, #FF9814FF)",
+    "--sjs-special-blue-forecolor": "var(--sjs-semantic-blue-foreground-100, #FFFFFF)",
+    "--sjs-special-yellow": "var(--sjs-semantic-yellow-background-500, #FF9814)",
     "--sjs-special-yellow-light": "var(--sjs-semantic-yellow-background-10, #FF98141A)",
-    "--sjs-special-yellow-forecolor": "var(--sjs-semantic-yellow-foreground-100, #FFFFFFFF)",
-    "--sjs-special-white": "var(--sjs-semantic-white-background-500, #FFFFFFFF)",
+    "--sjs-special-yellow-forecolor": "var(--sjs-semantic-yellow-foreground-100, #FFFFFF)",
+    "--sjs-special-white": "var(--sjs-semantic-white-background-500, #FFFFFF)",
     "--sjs-general-haze-background": "var(--sjs-special-haze, #CCEEEE59)",
     "--sjs-shadow-large-offset-x": "var(--lbr-shadow-large-offset-x)",
     "--sjs-shadow-large-offset-y": "var(--lbr-shadow-large-offset-y)",

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

@@ -46,9 +46,9 @@ test("Default theme serialization", (): any => {
   themeModel.loadTheme();
   expect(themeModel.themeName).toBe("default-light");
   expect(themeModel.scale).toBe(100);
-  expect(themeModel["--sjs-special-background"]).toBe("#EDF9F7FF");
-  expect(themeModel["--sjs-primary-background-500"]).toBe("#19B394FF");
-  expect(themeModel["--sjs-secondary-background-500"]).toBe("#19B394FF");
+  expect(themeModel["--sjs-special-background"]).toBe("#EDF9F7");
+  expect(themeModel["--sjs-primary-background-500"]).toBe("#19B394");
+  expect(themeModel["--sjs-secondary-background-500"]).toBe("#19B394");
 
   const themeModelJson = themeModel.toJSON();
   expect(themeModelJson).toStrictEqual({ themeName: "default-light" });
@@ -62,7 +62,7 @@ test("Creator theme: sync css variables", (): any => {
 
   expect(creator.themeVariables["--sjs-special-background"]).toEqual(undefined);
   expect((themeModel.cssVariables || {})["--sjs-special-background"]).toEqual(undefined);
-  expect(surfaceBackgroundColor.value).toEqual("#EDF9F7FF");
+  expect(surfaceBackgroundColor.value).toEqual("#EDF9F7");
 
   const newValue = "#c95ae7";
   surfaceBackgroundColor.value = newValue;
@@ -99,9 +99,9 @@ test("Creator theme: reset color variables after change theme", (): any => {
     const secondaryBackgroundColor = designerPlugin["themePropertyGrid"].survey.findQuestionByName("--sjs-secondary-background-500");
 
     expect(themeName.value).toEqual("default-light");
-    expect(surfaceBackgroundColor.value).toEqual("#EDF9F7FF");
-    expect(primaryBackgroundColor.value).toEqual("#19B394FF");
-    expect(secondaryBackgroundColor.value).toEqual("#19B394FF");
+    expect(surfaceBackgroundColor.value).toEqual("#EDF9F7");
+    expect(primaryBackgroundColor.value).toEqual("#19B394");
+    expect(secondaryBackgroundColor.value).toEqual("#19B394");
 
     primaryBackgroundColor.value = "rgba(20, 20, 20, 1)";
     secondaryBackgroundColor.value = "rgba(30, 30, 30, 0.1)";
@@ -223,12 +223,12 @@ test("Creator theme: apply custom theme", (): any => {
 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("#EDF9F7FF");
+  expect(themeModel["--sjs-primary-background-500"]).toEqual("#19B394");
+  expect(themeModel["--sjs-special-background"]).toEqual("#EDF9F7");
 
   themeModel.loadTheme(PredefinedCreatorThemes["sc2020"]);
-  expect(themeModel["--sjs-primary-background-500"]).toEqual("#19B394FF");
-  expect(themeModel["--sjs-special-background"]).toEqual("#EDF9F7FF");
+  expect(themeModel["--sjs-primary-background-500"]).toEqual("#19B394");
+  expect(themeModel["--sjs-special-background"]).toEqual("#EDF9F7");
 
   themeModel["--sjs-primary-background-500"] = PredefinedColors["light"]["teal"];
   themeModel["--sjs-primary-background-500"] = PredefinedColors["light"]["teal"];