diff --git a/package.json b/package.json
index da3d878..a038f2d 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "url": "https://github.com/eva-design/eva/issues"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && gulp generateTypes",
     "lint": "tslint -p tsconfig.json",
     "lint:fix": "npm run lint -- --fix",
     "gen:js": "ts-node ./packages/processor/js/scripts/generateExisting",
@@ -24,6 +24,7 @@
     "clean": "rimraf ./dist",
     "conventional-changelog": "conventional-changelog",
     "version:bump": "gulp version",
+    "generate-types": "gulp generateTypes",
     "version:changelog": "npm run conventional-changelog -- -i CHANGELOG.md -s",
     "publish": "./scripts/publish.sh",
     "publish:beta": "./scripts/publish.sh -- beta",
diff --git a/packages/processor/js/scripts/generateTypes.ts b/packages/processor/js/scripts/generateTypes.ts
new file mode 100644
index 0000000..8cdf2ef
--- /dev/null
+++ b/packages/processor/js/scripts/generateTypes.ts
@@ -0,0 +1,25 @@
+import {SchemaType} from '../../../dss/types/schema';
+
+export const generateMappingTypes = (mapping: SchemaType): string => {
+  let fileContent = '';
+  Object.entries(mapping.components).forEach((componentEntry: [string, Record<any, any>]) => {
+    fileContent += `export type ${componentEntry[0]}Appearance = ${Object.keys(componentEntry[1].meta.appearances).map(x => `\'${x}\'`).join(' | ')};\n`;
+    Object.entries(componentEntry[1].meta.variantGroups).forEach(
+      (componentVariantGroupEntry: [string, Record<any, any>]) => {
+        fileContent += `export type ${componentEntry[0]}${capitalizeFirstLetter(componentVariantGroupEntry[0])} = ${Object.keys(componentVariantGroupEntry[1]).map(x => `\'${x}\'`).join(' | ')};\n`;
+      });
+    if (Object.keys(componentEntry[1].meta.states).length) {
+      fileContent += `export type ${componentEntry[0]}State = ${Object.keys(componentEntry[1].meta.states).map(x => `\'${x}\'`).join(' | ')};\n`;
+    }
+    fileContent += '\n';
+  });
+  return fileContent;
+};
+
+export const generateThemeTypes = (theme: Record<any, any>): string => {
+  return `export type ThemeColors = ${Object.keys(theme).map(x => `\'${x}\'`).join('\n  | ')};\n`;
+};
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
diff --git a/scripts/gulp/gulpfile.ts b/scripts/gulp/gulpfile.ts
index 98698ab..47cd795 100644
--- a/scripts/gulp/gulpfile.ts
+++ b/scripts/gulp/gulpfile.ts
@@ -1 +1,2 @@
 import './tasks/bump-versions';
+import './tasks/generate-types';
diff --git a/scripts/gulp/tasks/generate-types.ts b/scripts/gulp/tasks/generate-types.ts
new file mode 100644
index 0000000..bdd38c1
--- /dev/null
+++ b/scripts/gulp/tasks/generate-types.ts
@@ -0,0 +1,15 @@
+import {
+  task,
+} from 'gulp';
+const fs = require('fs');
+import { mapping } from '../../../packages/eva';
+import { light } from '../../../packages/eva';
+import { generateMappingTypes, generateThemeTypes } from '../../../packages/processor/js/scripts/generateTypes';
+
+task('generateTypes', () => {
+  const mappingFileContent = generateMappingTypes(mapping);
+  fs.writeFileSync('./dist/eva/mapping.types.ts', mappingFileContent);
+
+  const themeFileContent = generateThemeTypes(light);
+  fs.writeFileSync('./dist/eva/theme.types.ts', themeFileContent);
+});