V3 update themes screenshot tests

packages/survey-core/src/legacy-vars.ts

@@ -25,7 +25,11 @@ export const legacyCssVariables = {
   "--sjs-shadow-small": "--sjs2-border-effect-surface-default", //0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
   "--sjs-shadow-medium": { var: "--sjs2-border-effect-floating-default", join: "," }, //0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
   "--sjs-shadow-large": { var: "--sjs2-border-effect-floating-default", join: "," }, //0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
-  "--sjs-shadow-inner": "--sjs2-border-effect-component-formbox-default", //inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
+  "--sjs-shadow-inner": [
+    "--sjs2-border-effect-component-formbox-default",
+    "--sjs2-border-effect-component-check-true-default",
+    "--sjs2-border-effect-component-check-false-default",
+  ], //inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
   "--sjs-border-light": "--sjs2-color-border-basic-secondary", //rgba(0, 0, 0, 0.09)",
   "--sjs-border-default": "--sjs2-color-component-input-default-line", //rgba(0, 0, 0, 0.16)",
   "--sjs-border-inside": "--sjs2-color-border-basic-secondary-overlay", //rgba(0, 0, 0, 0.16)",
@@ -62,7 +66,10 @@ export const legacyCssVariables = {
   "--sjs-font-questiontitle-family": "--sjs2-typography-font-family-component-question-title",
   "--sjs-font-questiontitle-weight": "--sjs2-typography-font-weight-component-question-title",
   "--sjs-font-questiontitle-size": "--sjs2-typography-font-size-component-question-title",
-  "--sjs-font-questiontitle-color": "--sjs2-color-component-question-default-title",
+  "--sjs-font-questiontitle-color": [
+    "--sjs2-color-component-question-default-title",
+    "--sjs2-color-fg-basic-primary",
+  ],
   "--sjs-font-questiondescription-family": "--sjs2-typography-font-family-component-question-description",
   "--sjs-font-questiondescription-weight": "--sjs2-typography-font-weight-component-question-description",
   "--sjs-font-questiondescription-size": "--sjs2-typography-font-size-component-question-description",
@@ -88,5 +95,9 @@ export const legacyCssVariables = {
   "--sjs-font-editorfont-weight": "--sjs2-typography-font-weight-component-input-content",
   "--sjs-font-editorfont-size": "--sjs2-typography-font-size-component-input-content",
   "--sjs-font-editorfont-color": "--sjs2-color-component-input-default-value",
-  "--sjs-font-editorfont-placeholdercolor": "--sjs2-color-component-input-default-placeholder",
+  "--sjs-font-editorfont-placeholdercolor": [
+    "--sjs2-color-component-input-default-placeholder",
+    "--sjs2-color-component-boolean-item-false-default-value",
+    "--sjs2-color-component-input-default-label"
+  ],
 };

screenshots/themes.spec.ts

@@ -78,7 +78,7 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, ".sd-root-modern", "survey-theme-questiontitle-font-size.png");
     });
 
-    test("Check question title font size, #2", async ({ page }) => {
+    test("Check question title font weight", async ({ page }) => {
       await page.setViewportSize({ width: 800, height: 1600 });
       await initSurvey(page, framework, {
         "logoPosition": "right",
@@ -137,7 +137,93 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, ".sd-root-modern", "survey-theme-questiontitle-font-weight.png");
     });
 
-    test.skip("Check input element placeholder", async ({ page }) => {
+    test("Check items size & colors", async ({ page }) => {
+      await page.setViewportSize({ width: 800, height: 2000 });
+      await initSurvey(page, framework, {
+        autoFocusFirstQuestion: true,
+        "logoPosition": "right",
+        "showQuestionNumbers": "off",
+        "elements": [
+          {
+            type: "dropdown",
+            name: "cars",
+            choices: [
+              "Ford",
+              "Vauxhall",
+              "Volkswagen",
+              "Nissan",
+              "Audi",
+              "Mercedes-Benz",
+              "BMW",
+              "Peugeot",
+              "Toyota",
+              "Citroen"
+            ]
+          },
+          {
+            "type": "checkbox",
+            "name": "question6",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "ranking",
+            "name": "question1",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "radiogroup",
+            "name": "question4",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          },
+          {
+            "type": "rating",
+            "name": "question5"
+          },
+          {
+            type: "imagepicker",
+            name: "choosepicture",
+            showLabel: true,
+            choices: [{
+              value: "lion",
+              imageLink: "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg"
+            },
+            {
+              value: "giraffe",
+              imageLink: "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg"
+            },
+            ]
+          }
+        ]
+      });
+      await page.waitForLoadState("networkidle");
+      await page.evaluate(() => {
+        (window as any).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-font-questiontitle-color": "rgba(242, 2, 2, 1)",
+            "--sjs-font-editorfont-size": "24px"
+          }
+        });
+      });
+      await page.waitForTimeout(500);
+      await compareScreenshot(page, ".sd-root-modern", "survey-theme-questiontitle-font-color-for-items.png");
+
+      await page.click(".sd-dropdown");
+      await compareScreenshot(page, ".sv-popup.sv-dropdown-popup .sv-popup__container", "survey-theme-questiontitle-font-color-for-dropdown-list-items.png");
+    });
+
+    test("Check input element placeholder", async ({ page }) => {
       await page.setViewportSize({ width: 800, height: 1600 });
       await initSurvey(page, framework, {
         showQuestionNumbers: true,
@@ -161,16 +247,6 @@ frameworks.forEach(framework => {
                     "name": "text2"
                   }
                 ]
-              },
-              {
-                "type": "dropdown",
-                "name": "question3",
-                "defaultValue": "Item 1",
-                "choices": [
-                  "Item 1",
-                  "Item 2",
-                  "Item 3"
-                ]
               }
             ]
           }
@@ -183,7 +259,6 @@ frameworks.forEach(framework => {
       await compareScreenshot(page, ".sd-root-modern", "survey-theme-editorfont-placeholdercolor.png");
     });
 
-    // TODO remove etalon
     test.skip("Check dropdown element colors", async ({ page }) => {
       await page.setViewportSize({ width: 800, height: 1600 });
       await initSurvey(page, framework, {
@@ -311,15 +386,10 @@ frameworks.forEach(framework => {
       await initSurvey(page, framework, jsonWithInputs);
       await applyTheme(page, {
         "cssVariables": {
-          "--sjs2-typography-line-height-component-input-content": "18px",
           "--sjs-font-editorfont-size": "12px",
           "--sjs-font-size": "20px"
         } });
       await compareScreenshot(page, ".sd-root-modern", "survey-theme-desktop-input-size.png");
-
-      // TODO remove etalon
-      // await page.locator(".sd-formbox.sd-dropdown").first().click();
-      // await compareScreenshot(page, ".sv-popup__container", "survey-theme-desktop-popup-input-size.png");
     });
 
     test("Mobile mode: input font-size less 16px", async ({ page }) => {
@@ -337,7 +407,6 @@ frameworks.forEach(framework => {
       }, jsonWithInputs);
       await applyTheme(page, {
         "cssVariables": {
-          "--sjs2-typography-line-height-component-input-content": "18px",
           "--sjs-font-editorfont-size": "12px",
           "--sjs-font-size": "20px"
         }