items font color (#7125)

* resolve #7097 Martix column and row title should be affected with font-width property. * resolve #7098 Survey texts should use another fore color --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Oct 12, 2023 · aabfe16 · aabfe16
1 parent ebcfc20
commit aabfe16
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 7 deletions.
diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -105,19 +105,19 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: $foreground;
+  color: $font-questiontitle-color;
   font-size: $font-editorfont-size;
   line-height: multiply(1.5, $font-editorfont-size);
   margin: 0 calcSize(2);
 }
 
 .sd-ranking--disabled .sv-ranking-item__text {
-  color: $foreground;
+  color: $font-questiontitle-color;
   opacity: 0.25;
 }
 
 .sv-ranking-item--disabled .sv-ranking-item__text {
-  color: $foreground;
+  color: $font-questiontitle-color;
   opacity: 0.25;
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-item.scss b/src/defaultV2-theme/blocks/sd-item.scss
@@ -42,20 +42,20 @@
   font-weight: $font-editorfont-weight;
   line-height: multiply(1.5, $font-editorfont-size);
   font-size: $font-editorfont-size;
-  color: $font-editorfont-color;
+  color: $font-questiontitle-color;
   white-space: normal;
   word-break: break-word;
   width: 100%;
   text-align: left;
 }
 
 .sd-item--disabled .sd-item__control-label {
-  color: $foreground;
+  color: $font-questiontitle-color;
   opacity: 0.25;
 }
 
 .sd-root--readonly .sd-item--disabled .sd-item__control-label {
-  color: $foreground;
+  color: $font-questiontitle-color;
 }
 
 .sd-item--error .sd-item__decorator {

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -322,7 +322,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 .sd-rating__item-text.sd-rating__item-text {
   font-family: $font-editorfont-family;
   font-weight: $font-editorfont-weight;
-  color: $font-editorfont-color;
+  color: $font-questiontitle-color;
   font-size: $font-editorfont-size;
   line-height: multiply(1.5, $font-editorfont-size);
   display: inline-block;

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
@@ -153,4 +153,56 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("survey-theme-questiontitle-font-weight.png", Selector(".sd-root-modern"), t, comparer);
     });
   });
+
+  test("Check items colors", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(800, 1600);
+      await initSurvey(framework, {
+        "logoPosition": "right",
+        "showQuestionNumbers": "off",
+        "elements": [
+          {
+            "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"
+          }
+        ]
+      });
+      await ClientFunction(() => {
+        (<any>window).survey.applyTheme({
+          "cssVariables": {
+            "--sjs-font-questiontitle-color": "rgba(242, 2, 2, 1)",
+            "--sjs-font-questiontitle-size": "22px",
+          }
+        });
+      })();
+      await takeElementScreenshot("survey-theme-questiontitle-font-color-for-items.png", Selector(".sd-root-modern"), t, comparer);
+    });
+  });
 });