Update creator theme (#6249)

* update creator theme * update etalons * update etalons * update etalons * update etalons * update etalons --------- Co-authored-by: OlgaLarina <[email protected]> Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Dec 16, 2024 · 66f1ddd · 66f1ddd
1 parent af96370
commit 66f1ddd
Show file tree

Hide file tree

Showing 366 changed files with 6,907 additions and 6,884 deletions.
diff --git a/packages/survey-creator-core/src/ctr-font-sizes.scss b/packages/survey-creator-core/src/ctr-font-sizes.scss
@@ -1,4 +1,6 @@
 .svc-creator {
+  --sjs-font-size-x05: calc(#{$font-unit} * 0.5);
+  --sjs-font-size-x075: calc(#{$font-unit} * 0.75);
   --sjs-font-size-x1: calc(#{$font-unit} * 1);
   --sjs-font-size-x150: calc(#{$font-unit} * 1.5);
   --sjs-font-size-x2: calc(#{$font-unit} * 2);

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
@@ -1,56 +1,57 @@
  /* Variables  */
  :root {
-   --sjs-layer-1-background-500: #FFFFFFFF;
-   --sjs-layer-1-background-400: #EBEBEBFF;
-   --sjs-layer-1-foreground-100: #000000FF;
-   --sjs-layer-1-foreground-50: #00000099;
-   --sjs-layer-3-background-500: #EBEBEBFF;
-   --sjs-layer-3-foreground-100: #000000FF;
-   --sjs-layer-3-foreground-50: #00000099;
-   --sjs-layer-2-background-500: #F0F0F0FF;
-   --sjs-layer-2-background-400: #DCDCDCFF;
-   --sjs-special-haze: #D5C7FB59;
-   --sjs-border-25: #C8C8C8FF;
-   --sjs-border-10: #C8C8C8FF;
-   --sjs-primary-background-500: #3A179EFF;
-   --sjs-primary-background-10: #3A179E1A;
-   --sjs-primary-background-400: #240973FF;
-   --sjs-primary-foreground-100: #FFFFFFFF;
-   --sjs-primary-foreground-25: #FFFFFF40;
-   --sjs-secondary-background-500: #3A179EFF;
-   --sjs-secondary-background-25: #3A179E40;
-   --sjs-secondary-background-10: #3A179E1A;
-   --sjs-secondary-foreground-100: #FFFFFFFF;
-   --sjs-secondary-forecolor-25: #FFFFFF40;
-   --sjs-semantic-red-background-500: #E50A66FF;
-   --sjs-semantic-red-background-10: #E50A661A;
-   --sjs-semantic-red-foreground-100: #FFFFFFFF;
-   --sjs-semantic-green-background-500: #19AAB3FF;
-   --sjs-semantic-green-background-10: #19AAB31A;
-   --sjs-semantic-green-foreground-100: #FFFFFFFF;
-   --sjs-semantic-blue-background-500: #4F43D9FF;
-   --sjs-semantic-blue-background-10: #4F43D91A;
-   --sjs-semantic-blue-foreground-100: #FFFFFFFF;
-   --sjs-semantic-yellow-background-500: #FF710BFF;
-   --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-special-background: #F4F2FBFF;
-   --sjs-layer-1-foreground-75: #000000FF;
-   --sjs-layer-3-background-400: #D7D7D7FF;
-   --sjs-special-glow: #240A6D1A;
-   --sjs-special-shadow: #00000040;
-   --sjs-layer-3-foreground-75: #000000FF;
-   --sjs-layer-2-foreground-100: #000000FF;
-   --sjs-layer-2-foreground-75: #000000FF;
-   --sjs-layer-2-foreground-50: #00000099;
-   --sjs-border-25-overlay: #00000040;
- }
+  --sjs-layer-1-background-500: #FFFFFFFF;
+  --sjs-layer-1-background-400: #EBEBEBFF;
+  --sjs-layer-1-foreground-100: #000000FF;
+  --sjs-layer-1-foreground-50: #00000099;
+  --sjs-layer-3-background-500: #EBEBEBFF;
+  --sjs-layer-3-foreground-100: #000000FF;
+  --sjs-layer-3-foreground-50: #00000099;
+  --sjs-layer-2-background-500: #F0F0F0FF;
+  --sjs-layer-2-background-400: #DCDCDCFF;
+  --sjs-special-haze: #D5C7FB59;
+  --sjs-border-25: #C8C8C8FF;
+  --sjs-border-10: #C8C8C8FF;
+  --sjs-primary-background-500: #3A179EFF;
+  --sjs-primary-background-10: #3A179E1A;
+  --sjs-primary-background-400: #240973FF;
+  --sjs-primary-foreground-100: #FFFFFFFF;
+  --sjs-primary-foreground-25: #FFFFFF40;
+  --sjs-secondary-background-500: #3A179EFF;
+  --sjs-secondary-background-25: #3A179E40;
+  --sjs-secondary-background-10: #3A179E1A;
+  --sjs-secondary-foreground-100: #FFFFFFFF;
+  --sjs-secondary-forecolor-25: #FFFFFF40;
+  --sjs-semantic-red-background-500: #E50A66FF;
+  --sjs-semantic-red-background-10: #E50A661A;
+  --sjs-semantic-red-foreground-100: #FFFFFFFF;
+  --sjs-semantic-green-background-500: #19AAB3FF;
+  --sjs-semantic-green-background-10: #19AAB31A;
+  --sjs-semantic-green-foreground-100: #FFFFFFFF;
+  --sjs-semantic-blue-background-500: #4F43D9FF;
+  --sjs-semantic-blue-background-10: #4F43D91A;
+  --sjs-semantic-blue-foreground-100: #FFFFFFFF;
+  --sjs-semantic-yellow-background-500: #FF710BFF;
+  --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-special-background: #F4F2FBFF;
+  --sjs-layer-1-foreground-75: #000000FF;
+  --sjs-layer-3-background-400: #D7D7D7FF;
+  --sjs-special-glow: #240A6D1A;
+  --sjs-special-shadow: #0000004D;
+  --sjs-layer-3-foreground-75: #000000FF;
+  --sjs-layer-2-foreground-100: #000000FF;
+  --sjs-layer-2-foreground-75: #000000FF;
+  --sjs-layer-2-foreground-50: #00000099;
+  --sjs-border-25-overlay: #00000040;
+}
+
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
@@ -1,56 +1,57 @@
  /* Variables  */
  :root {
-   --sjs-layer-1-background-500: #181818FF;
-   --sjs-layer-1-background-400: #282828FF;
-   --sjs-layer-1-foreground-100: #FFFFFFCC;
-   --sjs-layer-1-foreground-50: #FFFFFF66;
-   --sjs-layer-3-background-500: #202020FF;
-   --sjs-layer-3-foreground-100: #FFFFFFCC;
-   --sjs-layer-3-foreground-50: #FFFFFF66;
-   --sjs-layer-2-background-500: #101010FF;
-   --sjs-layer-2-background-400: #202020FF;
-   --sjs-special-haze: #000000BF;
-   --sjs-border-25: #2D2D2DFF;
-   --sjs-border-10: #2D2D2DFF;
-   --sjs-primary-background-500: #3EDFD5FF;
-   --sjs-primary-background-10: #3EDFD51A;
-   --sjs-primary-background-400: #29DCD1FF;
-   --sjs-primary-foreground-100: #0C0C0CFF;
-   --sjs-primary-foreground-25: #0C0C0C40;
-   --sjs-secondary-background-500: #3EDFD5FF;
-   --sjs-secondary-background-25: #3EDFD540;
-   --sjs-secondary-background-10: #3EDFD51A;
-   --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-foreground-100: #FFFFFFFF;
-   --sjs-semantic-green-background-500: #3EDFD5FF;
-   --sjs-semantic-green-background-10: #3EDFD51A;
-   --sjs-semantic-green-foreground-100: #FFFFFFFF;
-   --sjs-semantic-blue-background-500: #66B4FCFF;
-   --sjs-semantic-blue-background-10: #66B4FC1A;
-   --sjs-semantic-blue-foreground-100: #FFFFFFFF;
-   --sjs-semantic-yellow-background-500: #EDA925FF;
-   --sjs-semantic-yellow-background-10: #EDA9251A;
-   --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-special-background: #0C0C0CFF;
-   --sjs-layer-1-foreground-75: #FFFFFFB3;
-   --sjs-layer-3-background-400: #303030FF;
-   --sjs-special-glow: #000000BF;
-   --sjs-special-shadow: #000000FF;
-   --sjs-layer-3-foreground-75: #FFFFFFB3;
-   --sjs-layer-2-foreground-100: #FFFFFFCC;
-   --sjs-layer-2-foreground-75: #FFFFFFB3;
-   --sjs-layer-2-foreground-50: #FFFFFF66;
-   --sjs-border-25-overlay: #FFFFFF26;
- }
+  --sjs-layer-1-background-500: #181818FF;
+  --sjs-layer-1-background-400: #282828FF;
+  --sjs-layer-1-foreground-100: #FFFFFFCC;
+  --sjs-layer-1-foreground-50: #FFFFFF66;
+  --sjs-layer-3-background-500: #202020FF;
+  --sjs-layer-3-foreground-100: #FFFFFFCC;
+  --sjs-layer-3-foreground-50: #FFFFFF66;
+  --sjs-layer-2-background-500: #101010FF;
+  --sjs-layer-2-background-400: #202020FF;
+  --sjs-special-haze: #000000BF;
+  --sjs-border-25: #303030FF;
+  --sjs-border-10: #303030FF;
+  --sjs-primary-background-500: #19B394FF;
+  --sjs-primary-background-10: #19B3941A;
+  --sjs-primary-background-400: #14A48BFF;
+  --sjs-primary-foreground-100: #0C0C0CFF;
+  --sjs-primary-foreground-25: #0C0C0C40;
+  --sjs-secondary-background-500: #19B394FF;
+  --sjs-secondary-background-25: #19B39440;
+  --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-foreground-100: #FFFFFFFF;
+  --sjs-semantic-green-background-500: #15CDABFF;
+  --sjs-semantic-green-background-10: #15CDAB1A;
+  --sjs-semantic-green-foreground-100: #FFFFFFFF;
+  --sjs-semantic-blue-background-500: #66B4FCFF;
+  --sjs-semantic-blue-background-10: #66B4FC1A;
+  --sjs-semantic-blue-foreground-100: #FFFFFFFF;
+  --sjs-semantic-yellow-background-500: #EDA925FF;
+  --sjs-semantic-yellow-background-10: #EDA9251A;
+  --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-special-background: #121212FF;
+  --sjs-layer-1-foreground-75: #FFFFFFB3;
+  --sjs-layer-3-background-400: #303030FF;
+  --sjs-special-glow: #00000040;
+  --sjs-special-shadow: #FFFFFF40;
+  --sjs-layer-3-foreground-75: #FFFFFFB3;
+  --sjs-layer-2-foreground-100: #FFFFFFCC;
+  --sjs-layer-2-foreground-75: #FFFFFFB3;
+  --sjs-layer-2-foreground-50: #FFFFFF66;
+  --sjs-border-25-overlay: #FFFFFF26;
+}
+
diff --git a/packages/survey-creator-core/src/themes/predefined-themes/default/light.css b/packages/survey-creator-core/src/themes/predefined-themes/default/light.css
@@ -1,56 +1,57 @@
  /* Variables  */
  :root {
-   --sjs-layer-1-background-500: #FFFFFFFF;
-   --sjs-layer-1-background-400: #F5F5F5FF;
-   --sjs-layer-1-foreground-100: #000000E6;
-   --sjs-layer-1-foreground-50: #00000080;
-   --sjs-layer-3-background-500: #F4F4F4FF;
-   --sjs-layer-3-foreground-100: #000000E6;
-   --sjs-layer-3-foreground-50: #00000080;
-   --sjs-layer-2-background-500: #F8F8F8FF;
-   --sjs-layer-2-background-400: #EEEEEEFF;
-   --sjs-special-haze: #CCEEEE59;
-   --sjs-border-25: #DCDCDCFF;
-   --sjs-border-10: #E6E6E6FF;
-   --sjs-primary-background-500: #19B394FF;
-   --sjs-primary-background-10: #19B3941A;
-   --sjs-primary-background-400: #14A48BFF;
-   --sjs-primary-foreground-100: #FFFFFFFF;
-   --sjs-primary-foreground-25: #FFFFFF40;
-   --sjs-secondary-background-500: #19B394FF;
-   --sjs-secondary-background-25: #19B39440;
-   --sjs-secondary-background-10: #19B3941A;
-   --sjs-secondary-foreground-100: #FFFFFFFF;
-   --sjs-secondary-forecolor-25: #FFFFFF40;
-   --sjs-semantic-red-background-500: #E50A3EFF;
-   --sjs-semantic-red-background-10: #E50A3E1A;
-   --sjs-semantic-red-foreground-100: #FFFFFFFF;
-   --sjs-semantic-green-background-500: #19B394FF;
-   --sjs-semantic-green-background-10: #19B3941A;
-   --sjs-semantic-green-foreground-100: #FFFFFFFF;
-   --sjs-semantic-blue-background-500: #437FD9FF;
-   --sjs-semantic-blue-background-10: #437FD91A;
-   --sjs-semantic-blue-foreground-100: #FFFFFFFF;
-   --sjs-semantic-yellow-background-500: #FF9814FF;
-   --sjs-semantic-yellow-background-10: #FF98141A;
-   --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-special-background: #EDF9F7FF;
-   --sjs-layer-1-foreground-75: #000000BF;
-   --sjs-layer-3-background-400: #EAEAEAFF;
-   --sjs-special-glow: #004C441A;
-   --sjs-special-shadow: #00000026;
-   --sjs-layer-3-foreground-75: #000000BF;
-   --sjs-layer-2-foreground-100: #000000E6;
-   --sjs-layer-2-foreground-75: #000000BF;
-   --sjs-layer-2-foreground-50: #00000080;
-   --sjs-border-25-overlay: #00000026;
- }
+  --sjs-layer-1-background-500: #FFFFFFFF;
+  --sjs-layer-1-background-400: #F5F5F5FF;
+  --sjs-layer-1-foreground-100: #000000E6;
+  --sjs-layer-1-foreground-50: #00000080;
+  --sjs-layer-3-background-500: #F4F4F4FF;
+  --sjs-layer-3-foreground-100: #000000E6;
+  --sjs-layer-3-foreground-50: #00000080;
+  --sjs-layer-2-background-500: #F8F8F8FF;
+  --sjs-layer-2-background-400: #EEEEEEFF;
+  --sjs-special-haze: #CCEEEE59;
+  --sjs-border-25: #D4D4D4FF;
+  --sjs-border-10: #DCDCDCFF;
+  --sjs-primary-background-500: #19B394FF;
+  --sjs-primary-background-10: #19B3941A;
+  --sjs-primary-background-400: #14A48BFF;
+  --sjs-primary-foreground-100: #FFFFFFFF;
+  --sjs-primary-foreground-25: #FFFFFF40;
+  --sjs-secondary-background-500: #19B394FF;
+  --sjs-secondary-background-25: #19B39440;
+  --sjs-secondary-background-10: #19B3941A;
+  --sjs-secondary-foreground-100: #FFFFFFFF;
+  --sjs-secondary-forecolor-25: #FFFFFF40;
+  --sjs-semantic-red-background-500: #E50A3EFF;
+  --sjs-semantic-red-background-10: #E50A3E1A;
+  --sjs-semantic-red-foreground-100: #FFFFFFFF;
+  --sjs-semantic-green-background-500: #19B394FF;
+  --sjs-semantic-green-background-10: #19B3941A;
+  --sjs-semantic-green-foreground-100: #FFFFFFFF;
+  --sjs-semantic-blue-background-500: #437FD9FF;
+  --sjs-semantic-blue-background-10: #437FD91A;
+  --sjs-semantic-blue-foreground-100: #FFFFFFFF;
+  --sjs-semantic-yellow-background-500: #FF9814FF;
+  --sjs-semantic-yellow-background-10: #FF98141A;
+  --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-special-background: #EDF9F7FF;
+  --sjs-layer-1-foreground-75: #000000BF;
+  --sjs-layer-3-background-400: #EAEAEAFF;
+  --sjs-special-glow: #004C441A;
+  --sjs-special-shadow: #00000040;
+  --sjs-layer-3-foreground-75: #000000BF;
+  --sjs-layer-2-foreground-100: #000000E6;
+  --sjs-layer-2-foreground-75: #000000BF;
+  --sjs-layer-2-foreground-50: #00000080;
+  --sjs-border-25-overlay: #00000026;
+}
+