forecolor from advanced settings (#7136)

* work for #7099 set question title font variable * work for #7099 set question description font variable * work for #7099 set editor placeholdercolor font color variable * work for #7099 fix colors * work for #7099 update etalons --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Oct 14, 2023 · 774fedc · 774fedc
1 parent 6d6061d
commit 774fedc
Show file tree

Hide file tree

Showing 27 changed files with 103 additions and 20 deletions.
diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -46,7 +46,7 @@
   padding-block: calcSize(1);
   padding-inline-end: calcSize(8);
   padding-inline-start: calcSize(2);
-  color: $foreground;
+  color: $font-questiontitle-color;
   font-weight: normal;
   font-size: calcFontSize(1);
   line-height: calcLineHeight(1.5);
@@ -147,7 +147,7 @@ li:focus .sv-list__item.sv-list__item--selected {
 .sv-multi-select-list .sv-list__item.sv-list__item--selected:hover {
   .sv-list__item-body {
     background-color: $primary-light;
-    color: $foreground;
+    color: $font-questiontitle-color;
     font-weight: 400;
   }
 }

diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -81,7 +81,7 @@
   align-items: center;
   justify-content: center;
   background-color: $primary-light;
-  color: $foreground;
+  color: $font-questiontitle-color;
   font-size: calcFontSize(1);
   border-radius: 100%;
   border: calcSize(0.25) solid transparent;
@@ -117,7 +117,7 @@
 }
 
 .sv-ranking-item--disabled .sv-ranking-item__text {
-  color: $font-questiontitle-color;
+  color: $font-questiondescription-color;
   opacity: 0.25;
 }
 
@@ -282,7 +282,7 @@
 }
 
 .sv-ranking__container-placeholder {
-  color: $foreground-dim-light;
+  color: var(--sjs-font-questiondescription-color, #{$foreground-dim-light});
   @include defaultFont;
   white-space: break-spaces;
   display: flex;
@@ -304,7 +304,7 @@
 }
 
 .sv-ranking__containers-divider {
-  background: $border-inside;
+  background: var(--sjs-border-default, #{$border-inside});
 }
 
 .sv-ranking__container--from {

diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss
@@ -38,12 +38,12 @@
   }
 
   use {
-    fill: $foreground-light;
+    fill: $font-questiondescription-color;
   }
 }
 
 svg.sd-action--icon {
-  fill: $foreground-light;
+  fill: $font-questiondescription-color;
 }
 
 .sd-action:disabled,

diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss
@@ -19,7 +19,7 @@
   font-family: $font-editorfont-family;
   font-weight: $font-editorfont-weight;
   font-size: $font-editorfont-size;
-  color: $foreground-light;
+  color: $font-editorfont-placeholdercolor;
   line-height: multiply(1.5, $font-editorfont-size);
   padding: calcSize(1) calcSize(3);
 }

diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss
@@ -3,7 +3,7 @@
 }
 
 .sv-dropdown_select-wrapper use {
-  fill: $foreground-light;
+  fill: $font-editorfont-placeholdercolor;
 }
 
 .sd-dropdown {

diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
@@ -119,7 +119,7 @@
 .sd-file--answered .sd-file__actions-container {
   z-index: 2;
   margin-top: 0;
-  gap: calcSize(1)
+  gap: calcSize(1);
 }
 
 .sd-file--answered .sd-file__actions-container {
@@ -178,7 +178,7 @@
   a {
     display: block;
     text-decoration: none;
-    color: $foreground;
+    color: $font-questiontitle-color;
     white-space: normal;
     word-break: break-all;
     width: calcSize(12);

diff --git a/src/defaultV2-theme/blocks/sd-imagepicker.scss b/src/defaultV2-theme/blocks/sd-imagepicker.scss
@@ -90,7 +90,7 @@
   font-size: $font-editorfont-size;
   line-height: multiply(1.5, $font-editorfont-size);
   margin-top: calcSize(1);
-  color: $foreground;
+  color: $font-questiontitle-color;
 }
 
 .sd-imagepicker__no-image {

diff --git a/src/defaultV2-theme/blocks/sd-multipletext.scss b/src/defaultV2-theme/blocks/sd-multipletext.scss
@@ -58,7 +58,7 @@
   border-right: 1px solid $border;
   word-break: break-word;
   white-space: normal;
-  color: $foreground-light;
+  color: $font-editorfont-placeholdercolor;
 }
 
 .sd-multipletext__item {

diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss
@@ -96,7 +96,7 @@
 .sd-paneldynamic__progress-text {
     font-size: $font-questiontitle-size;
     line-height: multiply(1.5, $font-questiontitle-size);
-    color: $foreground-light;
+    color: $font-questiondescription-color;
     margin: 0;
     margin-right: calcSize(3);
 }

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -332,7 +332,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
     margin-top: calcSize(1.25);
     margin-bottom: calcSize(1.25);
     border: 2px solid transparent;
-    color: $foreground-light;
+    color: $font-questiondescription-color;
   }
 
   &.sd-rating__min-text {

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -268,7 +268,7 @@
     display: block;
     width: multiply(1, $font-editorfont-size);
     height: multiply(1, $font-editorfont-size);
-    fill: $foreground-light;
+    fill: $font-questiondescription-color;
   }
 
   &:hover {

diff --git a/...lRegressionTests/tests/defaultV2/etalons/matrixdynamic-allowRowsDragAndDrop.png b/...lRegressionTests/tests/defaultV2/etalons/matrixdynamic-allowRowsDragAndDrop.png
diff --git a/...onTests/tests/defaultV2/etalons/paneldynamic-progress-top-legacy-navigation.png b/...onTests/tests/defaultV2/etalons/paneldynamic-progress-top-legacy-navigation.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-hover.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-hover.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-one-row.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail-one-row.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-detail.png
diff --git a/...ssionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png b/...ssionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png
diff --git a/.../tests/defaultV2/etalons/question-matrix-dropdown-detail-no-header-expanded.png b/.../tests/defaultV2/etalons/question-matrix-dropdown-detail-no-header-expanded.png
diff --git a/...sionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-no-header.png b/...sionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-no-header.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png
diff --git a/...essionTests/tests/defaultV2/etalons/question-matrix-dynamic-detail-expanded.png b/...essionTests/tests/defaultV2/etalons/question-matrix-dynamic-detail-expanded.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dynamic-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dynamic-detail.png
diff --git a/.../tests/defaultV2/etalons/question-matrixdynamic-remaining-character-counter.png b/.../tests/defaultV2/etalons/question-matrixdynamic-remaining-character-counter.png
diff --git a/...ssionTests/tests/defaultV2/etalons/survey-theme-editorfont-placeholdercolor.png b/...ssionTests/tests/defaultV2/etalons/survey-theme-editorfont-placeholdercolor.png
diff --git a/...ultV2/etalons/survey-theme-questiontitle-font-color-for-dropdown-list-items.png b/...ultV2/etalons/survey-theme-questiontitle-font-color-for-dropdown-list-items.png
diff --git a/...sts/tests/defaultV2/etalons/survey-theme-questiontitle-font-color-for-items.png b/...sts/tests/defaultV2/etalons/survey-theme-questiontitle-font-color-for-items.png
diff --git a/visualRegressionTests/tests/defaultV2/themes.ts b/visualRegressionTests/tests/defaultV2/themes.ts
@@ -154,13 +154,29 @@ frameworks.forEach(framework => {
     });
   });
 
-  test("Check items colors", async (t) => {
+  test("Check items size & colors", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
-      await t.resizeWindow(800, 1600);
+      await t.resizeWindow(800, 2000);
       await initSurvey(framework, {
         "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",
@@ -191,18 +207,85 @@ frameworks.forEach(framework => {
           {
             "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 ClientFunction(() => {
         (<any>window).survey.applyTheme({
           "cssVariables": {
             "--sjs-font-questiontitle-color": "rgba(242, 2, 2, 1)",
-            "--sjs-font-questiontitle-size": "22px",
+            "--sjs-font-editorfont-size": "24px"
           }
         });
       })();
       await takeElementScreenshot("survey-theme-questiontitle-font-color-for-items.png", Selector(".sd-root-modern"), t, comparer);
+
+      await t.click(".sd-dropdown");
+      await takeElementScreenshot("survey-theme-questiontitle-font-color-for-dropdown-list-items.png", Selector(".sv-popup.sv-dropdown-popup .sv-popup__container"), t, comparer);
+    });
+  });
+
+  test("Check input element placeholder", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 1600);
+      await initSurvey(framework, {
+        "logoPosition": "right",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "boolean",
+                "name": "question1"
+              },
+              {
+                "type": "multipletext",
+                "name": "question2",
+                "items": [
+                  {
+                    "name": "text1"
+                  },
+                  {
+                    "name": "text2"
+                  }
+                ]
+              },
+              {
+                "type": "dropdown",
+                "name": "question3",
+                "defaultValue": "Item 1",
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                  "Item 3"
+                ]
+              }
+            ]
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-font-editorfont-placeholdercolor": "rgba(66, 123, 215, 1)"
+          }
+        });
+      })();
+      await takeElementScreenshot("survey-theme-editorfont-placeholdercolor.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
 });