Resolved #4594 - Theme builder: Use css theme variables from library

surveyjs · Sep 15, 2023 · 092f69f · 092f69f
1 parent 4ad4c33
commit 092f69f
Show file tree

Hide file tree

Showing 43 changed files with 196 additions and 81 deletions.
diff --git a/build-scripts/survey-core/tsconfig.plugins.themes.typing.json b/build-scripts/survey-core/tsconfig.plugins.themes.typing.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "survey-core": [
+        "../../build/survey-core"
+      ]
+    },
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "../../build/survey-core/themes/typings/"
+  },
+  "include": [
+    "../../src/themes/index.ts"
+  ]
+}
diff --git a/build-scripts/survey-core/webpack.themes.config.js b/build-scripts/survey-core/webpack.themes.config.js
@@ -3,6 +3,7 @@
 const webpackCommonConfigCreator = require("../webpack.common");
 const { merge } = require("webpack-merge");
 var FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
+const DtsGeneratorPlugin = require("../webpack-dts-generator");
 var path = require("path");
 
 const config = {
@@ -50,10 +51,27 @@ const config = {
     "index": path.resolve(__dirname, "../../src/themes/index.ts"),
   },
   plugins: [new FixStyleOnlyEntriesPlugin()],
+  externals: {
+    "survey-core": {
+      root: "Survey",
+      commonjs2: "survey-core",
+      commonjs: "survey-core",
+      amd: "survey-core"
+    }
+  }
 };
 
 module.exports = function (options) {
   options.platform = "";
   options.libraryName = "SurveyTheme";
+  if (options.buildType !== "prod") {
+    config.plugins.push(new DtsGeneratorPlugin({
+      tsConfigPath: "./build-scripts/survey-core/tsconfig.plugins.themes.typing.json",
+      filePath: "build/survey-core/themes/index.d.ts",
+      moduleName: "survey-core/themes",
+      importName: "index"
+    }));
+  }
+
   return merge(webpackCommonConfigCreator(options, { "name": "survey-themes" }, "survey.themes", "survey-core/themes"), config);
 };
diff --git a/src/themes/borderless-dark-panelless.ts b/src/themes/borderless-dark-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "borderless",
+  "colorPalette": "dark",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(43, 48, 63, 1)",
     "--sjs-general-backcolor-dark": "rgba(50, 55, 72, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const BorderlessDarkPanelless = Theme;
diff --git a/src/themes/borderless-dark.ts b/src/themes/borderless-dark.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "borderless",
+  "colorPalette": "dark",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(43, 48, 63, 1)",
     "--sjs-general-backcolor-dark": "rgba(50, 55, 72, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const BorderlessDark = Theme;
diff --git a/src/themes/borderless-light-panelless.ts b/src/themes/borderless-light-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "borderless",
+  "colorPalette": "light",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(231, 240, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(220, 232, 252, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const BorderlessLightPanelless = Theme;
diff --git a/src/themes/borderless-light.ts b/src/themes/borderless-light.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "borderless",
+  "colorPalette": "light",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(241, 246, 255, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const BorderlessLight = Theme;
diff --git a/src/themes/contrast-dark-panelless.ts b/src/themes/contrast-dark-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "contrast",
+  "colorPalette": "dark",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 216, 77, 1)",
     "--sjs-general-backcolor-dark": "rgba(255, 255, 255, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const ContrastDarkPanelless = Theme;
diff --git a/src/themes/contrast-dark.ts b/src/themes/contrast-dark.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "contrast",
+  "colorPalette": "dark",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 216, 77, 1)",
     "--sjs-general-backcolor-dark": "rgba(255, 255, 255, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const ContrastDark = Theme;
diff --git a/src/themes/contrast-light-panelless.ts b/src/themes/contrast-light-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "contrast",
+  "colorPalette": "light",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(255, 216, 77, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const ContrastLightPanelless = Theme;
diff --git a/src/themes/contrast-light.ts b/src/themes/contrast-light.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "contrast",
+  "colorPalette": "light",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(255, 216, 77, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const ContrastLight = Theme;
diff --git a/src/themes/default-dark-panelless.ts b/src/themes/default-dark-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "default",
+  "colorPalette": "dark",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(48, 48, 48, 1)",
     "--sjs-general-backcolor-dark": "rgba(52, 52, 52, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const DefaultDarkPanelless = Theme;
diff --git a/src/themes/default-dark.ts b/src/themes/default-dark.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "default",
+  "colorPalette": "dark",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(48, 48, 48, 1)",
     "--sjs-general-backcolor-dark": "rgba(52, 52, 52, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const DefaultDark = Theme;
diff --git a/src/themes/default-light-panelless.ts b/src/themes/default-light-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "default",
+  "colorPalette": "light",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const DefaultLightPanelless = Theme;
diff --git a/src/themes/default-light.ts b/src/themes/default-light.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "default",
+  "colorPalette": "light",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const DefaultLight = Theme;
diff --git a/src/themes/doubleborder-dark-panelless.ts b/src/themes/doubleborder-dark-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "doubleborder",
+  "colorPalette": "dark",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(52, 52, 52, 1)",
     "--sjs-general-backcolor-dark": "rgba(58, 58, 58, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const DoubleBorderDarkPanelless = Theme;
diff --git a/src/themes/doubleborder-dark.ts b/src/themes/doubleborder-dark.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "doubleborder",
+  "colorPalette": "dark",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(52, 52, 52, 1)",
     "--sjs-general-backcolor-dark": "rgba(58, 58, 58, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const DoubleBorderDark = Theme;
diff --git a/src/themes/doubleborder-light-panelless.ts b/src/themes/doubleborder-light-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "doubleborder",
+  "colorPalette": "light",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(239, 239, 239, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const DoubleBorderLightPanelless = Theme;
diff --git a/src/themes/doubleborder-light.ts b/src/themes/doubleborder-light.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "doubleborder",
+  "colorPalette": "light",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
     "--sjs-general-backcolor-dark": "rgba(239, 239, 239, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const DoubleBorderLight = Theme;
diff --git a/src/themes/flat-dark-panelless.ts b/src/themes/flat-dark-panelless.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "flat",
+  "colorPalette": "dark",
+  "isPanelless": true,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(48, 48, 48, 1)",
     "--sjs-general-backcolor-dark": "rgba(56, 56, 56, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": true
+  }
 };
 export default Theme;
 export const FlatDarkPanelless = Theme;
diff --git a/src/themes/flat-dark.ts b/src/themes/flat-dark.ts
@@ -1,4 +1,7 @@
 const Theme = {
+  "themeName": "flat",
+  "colorPalette": "dark",
+  "isPanelless": false,
   "cssVariables": {
     "--sjs-general-backcolor": "rgba(48, 48, 48, 1)",
     "--sjs-general-backcolor-dark": "rgba(56, 56, 56, 1)",
@@ -85,8 +88,7 @@ const Theme = {
     "--sjs-article-font-default-lineHeight": "28px",
     "--sjs-article-font-default-paragraphIndent": "0px",
     "--sjs-article-font-default-textCase": "none"
-  },
-  "isPanelless": false
+  }
 };
 export default Theme;
 export const FlatDark = Theme;