#7070 Integrate new Tokens into Creator

.gitignore

@@ -55,12 +55,6 @@ screenshotLegacyTests/*.ts
 
 junit.xml
 packages/survey-creator-core/.vscode/launch.json
-packages/survey-creator-core/src/themes/default.ts
-packages/survey-creator-core/src/themes/default-contrast.ts
-packages/survey-creator-core/src/themes/default-dark.ts
-packages/survey-creator-core/src/themes/default-light.ts
-packages/survey-creator-core/src/themes/index.ts
-packages/survey-creator-core/src/themes/sc2020.ts
 
 **/test-results/
 **/playwright-report/

packages/survey-creator-angular/example/angular-ui/src/app/test/by-page.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 
 @Component({
   selector: "test-by-page",
@@ -14,5 +15,6 @@ export class TestByPageComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/default.component.ts

@@ -3,10 +3,11 @@ import { SurveyCreatorModel } from "survey-creator-core";
 import * as SurveyCreatorCore from "survey-creator-core";
 import * as Survey from "survey-core";
 import SurveyThemes from "survey-core/themes";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 import "survey-core/survey.i18n";
 import "survey-creator-core/survey-creator-core.i18n";
 SurveyCreatorCore.registerSurveyTheme(SurveyThemes);
-
+SurveyCreatorCore.registerCreatorTheme(SurveyCreatorTestTheme);
 @Component({
   selector: "test-default",
   templateUrl: "./test.component.html",
@@ -28,6 +29,7 @@ export class TestDefaultComponent implements OnInit {
         this.creator.showOneCategoryInPropertyGrid = false;
         this.creator.allowZoom = false;
         this.creator.JSON = json;
+        this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
         (<any>window).creator = this.creator;
       });
     };
@@ -43,5 +45,6 @@ export class TestDefaultComponent implements OnInit {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/dropdown-collapse.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 @Component({
   selector: "test-dropdown-collapse",
   templateUrl: "./test.component.html",
@@ -14,5 +15,6 @@ export class TestDropdownCollapseComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/localization.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel, localization } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 
 @Component({
   selector: "test-by-page",
@@ -17,5 +18,6 @@ export class TestLocalizationComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/test-no-license.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 @Component({
   selector: "test-theme-preview",
   templateUrl: "./test.component.html",
@@ -17,5 +18,6 @@ export class NoLicenseComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/test-theme-tab.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 @Component({
   selector: "test-theme-preview",
   templateUrl: "./test.component.html",
@@ -16,5 +17,6 @@ export class ThemeTabComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/theme-preview.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 @Component({
   selector: "test-theme-preview",
   templateUrl: "./test.component.html",
@@ -17,5 +18,6 @@ export class ThemePreviewComponent extends TestDefaultComponent {
     this.creator["animationEnabled"] = false;
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-angular/example/angular-ui/src/app/test/theme-switcher.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewEncapsulation } from "@angular/core";
 import { SurveyCreatorModel } from "survey-creator-core";
 import { TestDefaultComponent } from "./default.component";
+import SurveyCreatorTestTheme from "survey-creator-core/themes/test";
 
 @Component({
   selector: "test-theme-switcher",
@@ -13,5 +14,6 @@ export class TestThemeSwitcherComponent extends TestDefaultComponent {
     this.creator = new SurveyCreatorModel({});
     this.creator.showOneCategoryInPropertyGrid = false;
     this.creator.allowZoom = false;
+    this.creator.applyCreatorTheme(SurveyCreatorTestTheme);
   }
 }

packages/survey-creator-core/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "webpack --env buildType=dev --env emitDeclarations --env emitStyles --env emitNonSourceFiles && webpack --env buildType=prod --env emitStyles && rollup -c",
     "build:i18n": "webpack --config ./webpack.i18n.js --env buildType=dev && webpack --config ./webpack.i18n.js --env buildType=prod && rollup -c rollup.i18n.config.js",
-    "build:themes": "node creator-themes-import.js && webpack --config ./webpack.themes.config.js --env buildType=dev --env emitDeclarations && webpack --config ./webpack.themes.config.js --env buildType=prod && rollup -c rollup.themes.config.js",
+    "build:themes": "webpack --config ./webpack.themes.config.js --env buildType=dev --env emitDeclarations && webpack --config ./webpack.themes.config.js --env buildType=prod && rollup -c rollup.themes.config.js",
     "build:all": "npm run build && npm run build:i18n && npm run build:themes",
     "build:presets": "webpack --config ./webpack.presets.config.js --env buildType=dev --env emitDeclarations && webpack --config ./webpack.presets.config.js --env buildType=prod && rollup -c rollup.presets.config.js --bundleConfigAsCjs",
     "test": "jest",

packages/survey-creator-core/src/components/creator.scss

@@ -7,6 +7,8 @@
 @use "../lbr-sizes.scss";
 @use "../ctr-font-sizes.scss";
 @use "../ctr-sizes.scss";
+@use "../ctr-colors.scss";
+@use "../ctr-base-units.scss";
 
 survey-creator,
 .svc-creator {

packages/survey-creator-core/src/components/question.scss

@@ -433,7 +433,7 @@ svc-question {
   .svc-list__item {
     &, &:hover {
       & > .svc-list__item-body .sv-svg-icon use {
-        fill: var(--sjs-secondary-background-500, #19b394ff);
+        fill: var(--sjs-secondary-background-500, #FF9814);
       }
     }
   }

packages/survey-creator-core/src/components/tabs/designer-plugin.ts

@@ -124,10 +124,10 @@ export class TabDesignerPlugin implements ICreatorPlugin {
   }
   private updatePredefinedColorChoices() {
     this.themePropertyGrid.survey.getAllQuestions().forEach(question => {
-      if (question.name === "--sjs-special-background") {
+      if (question.name === CreatorThemeModel.varColorUtilitySurface) {
         (question as any).choices = this.themeModel && this.themeModel.isLight ? getPredefinedBackgoundColorsChoices() : [];
       }
-      if (question.name === "--sjs-primary-background-500" || question.name === "--sjs-secondary-background-500") {
+      if (question.name === CreatorThemeModel.varColorProjectBrand || question.name === CreatorThemeModel.varColorProjectAccent) {
         (question as any).choices = getPredefinedColorsItemValues(this.themeModel.isLight === false ? "dark" : "light");
       }
     });

packages/survey-creator-core/src/creator-base.ts

@@ -86,6 +86,7 @@ import "./creator-theme/creator.scss";
 import { DomDocumentHelper } from "./utils/global_variables_utils";
 import { deprecate } from "util";
 import { TabJsonEditorBasePlugin } from "./components/tabs/json-editor-plugin";
+import Default from "./themes/default-light";
 
 addIconsToThemeSet("v1", iconsV1);
 addIconsToThemeSet("v2", iconsV2);
@@ -1663,6 +1664,7 @@ export class SurveyCreatorModel extends Base
       SurveyHelper.warnText("Creator constructor has one parameter, as creator options, in V2.");
     }
     SvgRegistry.registerIcons(SvgThemeSets["v2"]);
+    this.applyCreatorTheme(Default);
     this.previewDevice = options.previewDevice ?? "desktop";
     this.previewOrientation = options.previewOrientation;
     this.toolbarValue = new ToolbarActionContainer(this);

packages/survey-creator-core/src/creator-theme/creator-theme-model-definition.ts

@@ -1,12 +1,13 @@
 import { ISurveyPropertiesDefinition, ISurveyPropertyGridDefinition } from "../question-editor/definition";
+import { CreatorThemeModel } from "./creator-theme-model";
 
 const creatorThemeModelProperties: ISurveyPropertiesDefinition = {
   "creatortheme": {
     properties: [
       { name: "themeName", index: 1 },
-      { name: "--sjs-primary-background-500", index: 10, tab: "accentColors" },
-      { name: "--sjs-secondary-background-500", index: 20, tab: "accentColors" },
-      { name: "--sjs-special-background", index: 30, tab: "surfaceBackground" },
+      { name: CreatorThemeModel.varColorProjectBrand, index: 10, tab: "accentColors" },
+      { name: CreatorThemeModel.varColorProjectAccent, index: 20, tab: "accentColors" },
+      { name: CreatorThemeModel.varColorUtilitySurface, index: 30, tab: "surfaceBackground" },
       { name: "fontScale", index: 40, tab: "scaling" },
       { name: "scale", index: 50, tab: "scaling" },
     ],