From a86d81ca972a823da01902457b4b55d3af4c79cc Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Wed, 25 Dec 2024 14:31:50 +0300 Subject: [PATCH] update themes --- .../predefined-themes/default/contrast.css | 16 +++++++-------- .../themes/predefined-themes/default/dark.css | 20 +++++++++---------- .../src/themes/predefined-themes/v2-20.css | 10 ++++++++-- .../src/themes/predefined-themes/v2-24.css | 10 ++++++++-- 4 files changed, 34 insertions(+), 22 deletions(-) diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css b/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css index 8d1be18688..6fe603c875 100644 --- a/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css +++ b/packages/survey-creator-core/src/themes/predefined-themes/default/contrast.css @@ -35,14 +35,14 @@ --sjs-semantic-yellow-background-10: #FF710B1A; --sjs-semantic-yellow-foreground-100: #FFFFFFFF; --sjs-semantic-white-background-500: #FFFFFFFF; - --sjs-code-gray-700: #B6B6B6FF; - --sjs-code-blue-500: #326FCAFF; - --sjs-code-gray-300: #505050FF; - --sjs-code-green-500: #08997CFF; - --sjs-code-red-500: #F41B50FF; - --sjs-code-purple-500: #C22FA2FF; - --sjs-code-yellow-500: #F58D06FF; - --sjs-code-gray-500: #8A8A8AFF; + --sjs-code-gray-700: #A4A4A4FF; + --sjs-code-blue-500: #1E5AB3FF; + --sjs-code-gray-300: #1C1C1CFF; + --sjs-code-green-500: #127D60FF; + --sjs-code-red-500: #D30739FF; + --sjs-code-purple-500: #AB228DFF; + --sjs-code-yellow-500: #CC6001FF; + --sjs-code-gray-500: #686868FF; --sjs-special-background: #F4F2FBFF; --sjs-layer-1-foreground-75: #000000FF; --sjs-layer-3-background-400: #D7D7D7FF; diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css b/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css index 8662a1399f..9628b73f5a 100644 --- a/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css +++ b/packages/survey-creator-core/src/themes/predefined-themes/default/dark.css @@ -22,8 +22,8 @@ --sjs-secondary-background-10: #19B3941A; --sjs-secondary-foreground-100: #0C0C0CFF; --sjs-secondary-forecolor-25: #0C0C0C40; - --sjs-semantic-red-background-500: #FF3B6AFF; - --sjs-semantic-red-background-10: #FF3B6A1A; + --sjs-semantic-red-background-500: #FF6D9AFF; + --sjs-semantic-red-background-10: #FF6D9A1A; --sjs-semantic-red-foreground-100: #0C0C0CFF; --sjs-semantic-green-background-500: #15CDABFF; --sjs-semantic-green-background-10: #15CDAB1A; @@ -35,14 +35,14 @@ --sjs-semantic-yellow-background-10: #EDA9251A; --sjs-semantic-yellow-foreground-100: #0C0C0CFF; --sjs-semantic-white-background-500: #FFFFFFFF; - --sjs-code-gray-700: #B6B6B6FF; - --sjs-code-blue-500: #326FCAFF; - --sjs-code-gray-300: #505050FF; - --sjs-code-green-500: #08997CFF; - --sjs-code-red-500: #F41B50FF; - --sjs-code-purple-500: #C22FA2FF; - --sjs-code-yellow-500: #F58D06FF; - --sjs-code-gray-500: #8A8A8AFF; + --sjs-code-gray-700: #5E5E5EFF; + --sjs-code-blue-500: #53B3F0FF; + --sjs-code-gray-300: #D1D1D1FF; + --sjs-code-green-500: #37C7AAFF; + --sjs-code-red-500: #FD6E89FF; + --sjs-code-purple-500: #F888DFFF; + --sjs-code-yellow-500: #FCC669FF; + --sjs-code-gray-500: #909090FF; --sjs-special-background: #121212FF; --sjs-layer-1-foreground-75: #FFFFFFB3; --sjs-layer-3-background-400: #303030FF; diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css index 133ba6a513..2aa05d8368 100644 --- a/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css +++ b/packages/survey-creator-core/src/themes/predefined-themes/v2-20.css @@ -829,8 +829,8 @@ --ctr-string-table-row-border-width-bottom: var(--sjs-stroke-x1); --ctr-string-table-row-text-color-placeholder: var(--sjs-layer-1-foreground-50); --ctr-string-table-row-text-color-title: var(--sjs-layer-1-foreground-100); - --ctr-string-table-row-expand-button-icon-width: var(--sjs-font-size-x3); - --ctr-string-table-row-expand-button-icon-height: var(--sjs-font-size-x3); + --ctr-string-table-row-expand-button-icon-width: var(--sjs-font-size-x2); + --ctr-string-table-row-expand-button-icon-height: var(--sjs-font-size-x2); --ctr-string-table-row-expand-button-margin-right: var(--sjs-spacing-x1); --ctr-string-table-row-expand-button-icon-color-default: var(--sjs-layer-1-foreground-50); --ctr-string-table-header-background-color: var(--sjs-layer-3-background-500); @@ -3375,5 +3375,11 @@ --ctr-actionbar-button-border-width-highlighed: var(--sjs-stroke-x2); --ctr-survey-question-panel-toolbar-item-text-color-selected: var(--sjs-layer-1-foreground-100); --ctr-survey-question-panel-toolbar-item-icon-color-selected: var(--sjs-secondary-background-500); + --ctr-actionbar-button-background-color-hovered-colorful: var(--sjs-primary-background-10); + --ctr-actionbar-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-actionbar-button-text-color-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-with-text-hovered-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-with-text-negative: var(--sjs-semantic-red-background-500); } diff --git a/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css index 2a4d7104a2..affc1c4359 100644 --- a/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css +++ b/packages/survey-creator-core/src/themes/predefined-themes/v2-24.css @@ -821,8 +821,8 @@ --ctr-string-table-row-border-width-bottom: var(--sjs-stroke-x1); --ctr-string-table-row-text-color-placeholder: var(--sjs-layer-1-foreground-50); --ctr-string-table-row-text-color-title: var(--sjs-layer-1-foreground-100); - --ctr-string-table-row-expand-button-icon-width: var(--sjs-font-size-x3); - --ctr-string-table-row-expand-button-icon-height: var(--sjs-font-size-x3); + --ctr-string-table-row-expand-button-icon-width: var(--sjs-font-size-x2); + --ctr-string-table-row-expand-button-icon-height: var(--sjs-font-size-x2); --ctr-string-table-row-expand-button-margin-right: var(--sjs-spacing-x1); --ctr-string-table-row-expand-button-icon-color-default: var(--sjs-layer-1-foreground-75); --ctr-string-table-header-background-color: var(--sjs-layer-3-background-500); @@ -3375,5 +3375,11 @@ --ctr-actionbar-button-border-width-highlighed: var(--sjs-stroke-x2); --ctr-survey-question-panel-toolbar-item-text-color-selected: var(--sjs-secondary-background-400); --ctr-survey-question-panel-toolbar-item-icon-color-selected: var(--sjs-secondary-background-500); + --ctr-actionbar-button-background-color-hovered-colorful: var(--sjs-primary-background-10); + --ctr-actionbar-button-background-color-hovered-negative: var(--sjs-semantic-red-background-10); + --ctr-actionbar-button-text-color-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-with-text-hovered-negative: var(--sjs-semantic-red-background-500); + --ctr-actionbar-button-icon-color-with-text-negative: var(--sjs-semantic-red-background-500); }