diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss index 391a4ca309..5abdf06a29 100644 --- 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 index c13b937b61..8b182439fe 100644 --- a/src/defaultV2-theme/blocks/sd-item.scss +++ b/src/defaultV2-theme/blocks/sd-item.scss @@ -42,7 +42,7 @@ 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%; @@ -50,12 +50,12 @@ } .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 index 3a8b62fcf2..04534efc9d 100644 --- 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/visualRegressionTests/tests/defaultV2/etalons/survey-theme-questiontitle-font-color-for-items.png b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-questiontitle-font-color-for-items.png new file mode 100644 index 0000000000..857192152f Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-questiontitle-font-color-for-items.png differ diff --git a/visualRegressionTests/tests/defaultV2/themes.ts b/visualRegressionTests/tests/defaultV2/themes.ts index d5ffafb3a4..dd9e08fe4f 100644 --- 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(() => { + (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); + }); + }); }); \ No newline at end of file