diff --git a/api-generator/build-tokens.js b/api-generator/build-tokens.js
new file mode 100644
index 000000000..ed429119e
--- /dev/null
+++ b/api-generator/build-tokens.js
@@ -0,0 +1,166 @@
+const fs = require('fs');
+const path = require('path');
+
+// prettier-ignore
+const THEME_COMPONENTS = ['Accordion','AutoComplete','Avatar','Badge','BlockUI','Breadcrumb','Button','Card','Carousel','CascadeSelect','Checkbox','Chip','ColorPicker','ConfirmDialog','ConfirmPopup','ContextMenu','DataTable','DataView','DatePicker','Dialog','Divider','Dock','Drawer','Editor','Fieldset','FileUpload','FloatLabel','Galleria','IconField','Image','InlineMessage','Inplace','InputChips','InputGroup','InputNumber','InputText','Knob','Listbox','MegaMenu','Menu','Menubar','Message','MeterGroup','MultiSelect','OrderList','OrganizationChart','Paginator','Panel','PanelMenu','Password','PickList','Popover','ProgressBar','ProgressSpinner','RadioButton','Rating','Ripple','ScrollPanel','Select','SelectButton','Skeleton','Slider','SpeedDial','SplitButton','Splitter','Stepper','Steps','Tabmenu','Tabs','TabView','Tag','Terminal','Textarea','TieredMenu','Timeline','Toast','ToggleButton','ToggleSwitch','Toolbar','Tooltip','Tree','TreeSelect','TreeTable'];
+
+const themeName = 'aura';
+const rootDir = path.resolve(__dirname, '../');
+// const overwrittenDirPath = path.resolve(rootDir, 'types/overwritten');
+const overwrittenDirPath = path.resolve(rootDir, 'components/lib/themes/types/overwritten');
+
+try {
+    !fs.existsSync(overwrittenDirPath) && fs.mkdirSync(overwrittenDirPath, { recursive: true });
+} catch (err) {
+    console.error(err);
+}
+
+THEME_COMPONENTS.forEach((comp) => {
+    const data = fs.readFileSync(path.resolve(rootDir, `components/lib/themes/${themeName}/${comp.toLowerCase()}/index.js`), { encoding: 'utf8', flag: 'r' });
+    let theme = data.replace('export default', 'module.exports = ');
+
+    try {
+        fs.writeFileSync(path.resolve(rootDir, `components/lib/themes/types/overwritten/${comp.toLowerCase()}.js`), theme);
+
+        const component = require(path.resolve(rootDir, `components/lib/themes/types/overwritten/${comp.toLowerCase()}.js`));
+        const filePath = path.resolve(rootDir, `components/lib/themes/types/${comp.toLowerCase()}`);
+        let outputFile = path.resolve(filePath, `index.d.ts`);
+        let defaultText = '';
+
+        !fs.existsSync(filePath) && fs.mkdirSync(filePath);
+
+        const splitTokenName = (text) => {
+            return text.split(/(?=[A-Z])/).map((part) => part.toLowerCase());
+        };
+
+        const createSubTokens = (tokenKeys, tokenValue) => {
+            let subTokens = '';
+
+            Object.entries(tokenValue).forEach(([tokenKey, tokenSubValue]) => {
+                if (typeof tokenSubValue === 'string') {
+                    subTokens += createToken([...tokenKeys, tokenKey]);
+                } else {
+                    subTokens += createNestedToken([...tokenKeys, tokenKey], tokenSubValue);
+                }
+            });
+
+            return subTokens;
+        };
+
+        const createDescription = (tokenKeys) => {
+            let description = '';
+
+            tokenKeys.forEach((tokenPart, i) => {
+                if (i !== 0) description += `${splitTokenName(tokenPart).join(' ')} `;
+            });
+            description = description.charAt(0).toUpperCase() + description.slice(1);
+
+            return `${description}of ${splitTokenName(tokenKeys[0]).join(' ')}`;
+        };
+
+        const createToken = (tokenKey) => {
+            let tokenName = tokenKey[tokenKey.length - 1];
+            let designTokenName = `${comp.toLowerCase()}`;
+            let tokenDescription = createDescription(tokenKey);
+
+            tokenKey.forEach((t) => {
+                if (t !== 'root') {
+                    designTokenName += `.${splitTokenName(t).join('.')}`;
+                }
+
+                if (tokenName.indexOf('.') > -1 && tokenName.indexOf("'")) {
+                    tokenName = `'${tokenName}'`;
+                }
+            });
+
+            return `
+    /**
+    * ${tokenDescription}
+    *
+    * @designToken ${designTokenName}
+    */
+    ${tokenName}?: string;`;
+        };
+
+        const createNestedToken = (tokenKeys, tokenValue) => {
+            let tokenName = tokenKeys[tokenKeys.length - 1];
+            let tokenDescription = createDescription(tokenKeys);
+
+            return `
+    /**
+    * ${tokenDescription}
+    */
+    ${tokenName}?: {
+        ${createSubTokens(tokenKeys, tokenValue)}
+    };`;
+        };
+
+        const generateTokens = (tokenKey, tokenValue) => {
+            let subTokens = '';
+
+            Object.entries(tokenValue).forEach(([subTokenKey, subTokenValue]) => {
+                if (typeof subTokenValue === 'string') {
+                    subTokens += createToken([tokenKey, subTokenKey]);
+                } else {
+                    subTokens += createNestedToken([tokenKey, subTokenKey], subTokenValue);
+                }
+            });
+
+            defaultText += `
+    /**
+    * Used to pass tokens of the ${splitTokenName(tokenKey).join(' ')} section
+    */
+    ${tokenKey}?: {
+        ${subTokens}
+    }`;
+        };
+
+        Object.entries(component).forEach(([tname, tvalue]) => {
+            if (tname !== 'colorScheme') {
+                if (Object.keys(component).includes('colorScheme')) {
+                    if (Object.keys(component['colorScheme']['light']).includes(tname)) {
+                        tvalue = { ...tvalue, ...component['colorScheme']['light'][tname] };
+                    }
+                }
+
+                generateTokens(tname, tvalue);
+            } else {
+                Object.entries(tvalue['light']).forEach(([subtname, subtvalue]) => {
+                    if (!Object.keys(component).includes(subtname)) {
+                        generateTokens(subtname, subtvalue);
+                    }
+                });
+            }
+        });
+
+        let text = `
+/**
+ *
+ * ${comp} Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/${comp.toLowerCase()}/)
+ *
+ * @module themes/${comp.toLowerCase()}
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ${comp}DesignTokens extends ColorSchemeDesignToken<${comp}DesignTokens> {
+${defaultText}
+}
+`;
+
+        fs.writeFileSync(outputFile, text, 'utf8');
+    } catch (err) {
+        console.error(err);
+    }
+});
+
+try {
+    if (fs.existsSync(overwrittenDirPath)) {
+        fs.rmSync(overwrittenDirPath, { recursive: true, force: true });
+    }
+} catch (err) {
+    console.error(err);
+}
diff --git a/components/lib/themes/aura/accordion/index.d.ts b/components/lib/themes/aura/accordion/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/accordion/package.json b/components/lib/themes/aura/accordion/package.json
index f8e9d7ae0..0b3278e57 100644
--- a/components/lib/themes/aura/accordion/package.json
+++ b/components/lib/themes/aura/accordion/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/accordion/index.d.ts"
 }
diff --git a/components/lib/themes/aura/autocomplete/index.d.ts b/components/lib/themes/aura/autocomplete/index.d.ts
deleted file mode 100644
index 284aa0d0d..000000000
--- a/components/lib/themes/aura/autocomplete/index.d.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- *
- * AutoComplete is an input component that provides real-time suggestions while being typed.
- *
- * [Live Demo](https://www.primevue.org/autocomplete/)
- *
- * @module aura/autocomplete
- *
- */
-import { ColorSchemeDesignToken } from '..';
-
-/**
- * **PrimeVue - AutoComplete**
- *
- * _AutoComplete is an input component that provides real-time suggestions while being typed._
- *
- * [Live Demo](https://www.primevue.org/autocomplete/)
- * --- ---
- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
- *
- * @group DesignTokens
- *
- */
-export interface AutoCompleteDesignTokens extends ColorSchemeDesignToken<AutoCompleteDesignTokens> {
-    /**
-     * Used to pass tokens of the root section
-     */
-    root: {
-        background?: string;
-        disabledBackground?: string;
-        filledBackground?: string;
-        filledFocusBackground?: string;
-        borderColor?: string;
-        hoverBorderColor?: string;
-        focusBorderColor?: string;
-        invalidBorderColor?: string;
-        color?: string;
-        disabledColor?: string;
-        placeholderColor?: string;
-        shadow?: string;
-        paddingX?: string;
-        paddingY?: string;
-        borderRadius?: string;
-        focusRing: {
-            width?: string;
-            style?: string;
-            color?: string;
-            offset?: string;
-            shadow?: string;
-        };
-    };
-    overlay: {
-        background?: string;
-        borderColor?: string;
-        borderRadius?: string;
-        color?: string;
-        shadow?: string;
-    };
-    list: {
-        padding?: string;
-        gap?: string;
-    };
-    option: {
-        focusBackground?: string;
-        selectedBackground?: string;
-        selectedFocusBackground?: string;
-        color?: string;
-        focusColor?: string;
-        selectedColor?: string;
-        selectedFocusColor?: string;
-        padding?: string;
-        borderRadius?: string;
-    };
-    optionGroup: {
-        background?: string;
-        color?: string;
-        fontWeight?: string;
-        padding?: string;
-    };
-    dropdown: {
-        width?: string;
-        borderColor?: string;
-        hoverBorderColor?: string;
-        activeBorderColor?: string;
-        borderRadius?: string;
-        focusRing: {
-            width?: string;
-            style?: string;
-            color?: string;
-            offset?: string;
-            shadow?: string;
-        };
-        background?: string;
-        hoverBackground?: string;
-        /**
-         *
-         * @designToken autocomplete.dropdown.active.background
-         */
-        activeBackground?: string;
-        color?: string;
-        hoverColor?: string;
-        activeColor?: string;
-    };
-    chip: {
-        borderRadius?: string;
-    };
-    emptyMessage: {
-        /**
-         *
-         * @designToken autocomplete.empty.message.padding
-         */
-        padding?: string;
-    };
-}
diff --git a/components/lib/themes/aura/autocomplete/package.json b/components/lib/themes/aura/autocomplete/package.json
index f8e9d7ae0..bd8ba462a 100644
--- a/components/lib/themes/aura/autocomplete/package.json
+++ b/components/lib/themes/aura/autocomplete/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/autocomplete/index.d.ts"
 }
diff --git a/components/lib/themes/aura/avatar/index.d.ts b/components/lib/themes/aura/avatar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/avatar/package.json b/components/lib/themes/aura/avatar/package.json
index f8e9d7ae0..ad0aa37d3 100644
--- a/components/lib/themes/aura/avatar/package.json
+++ b/components/lib/themes/aura/avatar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/avatar/index.d.ts"
 }
diff --git a/components/lib/themes/aura/badge/index.d.ts b/components/lib/themes/aura/badge/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/badge/package.json b/components/lib/themes/aura/badge/package.json
index f8e9d7ae0..e182126fe 100644
--- a/components/lib/themes/aura/badge/package.json
+++ b/components/lib/themes/aura/badge/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/badge/index.d.ts"
 }
diff --git a/components/lib/themes/aura/blockui/index.d.ts b/components/lib/themes/aura/blockui/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/blockui/package.json b/components/lib/themes/aura/blockui/package.json
index f8e9d7ae0..caaa50c7a 100644
--- a/components/lib/themes/aura/blockui/package.json
+++ b/components/lib/themes/aura/blockui/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/blockui/index.d.ts"
 }
diff --git a/components/lib/themes/aura/breadcrumb/index.d.ts b/components/lib/themes/aura/breadcrumb/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/breadcrumb/package.json b/components/lib/themes/aura/breadcrumb/package.json
index f8e9d7ae0..f8329aeed 100644
--- a/components/lib/themes/aura/breadcrumb/package.json
+++ b/components/lib/themes/aura/breadcrumb/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/breadcrumb/index.d.ts"
 }
diff --git a/components/lib/themes/aura/button/index.d.ts b/components/lib/themes/aura/button/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/button/package.json b/components/lib/themes/aura/button/package.json
index f8e9d7ae0..f794dbfb6 100644
--- a/components/lib/themes/aura/button/package.json
+++ b/components/lib/themes/aura/button/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/button/index.d.ts"
 }
diff --git a/components/lib/themes/aura/buttongroup/index.d.ts b/components/lib/themes/aura/buttongroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/buttongroup/index.js b/components/lib/themes/aura/buttongroup/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/aura/buttongroup/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/aura/buttongroup/package.json b/components/lib/themes/aura/buttongroup/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/aura/buttongroup/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/aura/card/index.d.ts b/components/lib/themes/aura/card/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/card/package.json b/components/lib/themes/aura/card/package.json
index f8e9d7ae0..fb627c8f0 100644
--- a/components/lib/themes/aura/card/package.json
+++ b/components/lib/themes/aura/card/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/card/index.d.ts"
 }
diff --git a/components/lib/themes/aura/carousel/index.d.ts b/components/lib/themes/aura/carousel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/carousel/package.json b/components/lib/themes/aura/carousel/package.json
index f8e9d7ae0..df4aa53e9 100644
--- a/components/lib/themes/aura/carousel/package.json
+++ b/components/lib/themes/aura/carousel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/carousel/index.d.ts"
 }
diff --git a/components/lib/themes/aura/cascadeselect/index.d.ts b/components/lib/themes/aura/cascadeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/cascadeselect/package.json b/components/lib/themes/aura/cascadeselect/package.json
index f8e9d7ae0..1a9d70202 100644
--- a/components/lib/themes/aura/cascadeselect/package.json
+++ b/components/lib/themes/aura/cascadeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/cascadeselect/index.d.ts"
 }
diff --git a/components/lib/themes/aura/checkbox/index.d.ts b/components/lib/themes/aura/checkbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/checkbox/package.json b/components/lib/themes/aura/checkbox/package.json
index f8e9d7ae0..2a48a7a40 100644
--- a/components/lib/themes/aura/checkbox/package.json
+++ b/components/lib/themes/aura/checkbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/checkbox/index.d.ts"
 }
diff --git a/components/lib/themes/aura/chip/index.d.ts b/components/lib/themes/aura/chip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/chip/package.json b/components/lib/themes/aura/chip/package.json
index f8e9d7ae0..e769c72ed 100644
--- a/components/lib/themes/aura/chip/package.json
+++ b/components/lib/themes/aura/chip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/chip/index.d.ts"
 }
diff --git a/components/lib/themes/aura/colorpicker/index.d.ts b/components/lib/themes/aura/colorpicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/colorpicker/package.json b/components/lib/themes/aura/colorpicker/package.json
index f8e9d7ae0..ac6a5768b 100644
--- a/components/lib/themes/aura/colorpicker/package.json
+++ b/components/lib/themes/aura/colorpicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/colorpicker/index.d.ts"
 }
diff --git a/components/lib/themes/aura/confirmdialog/index.d.ts b/components/lib/themes/aura/confirmdialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/confirmdialog/package.json b/components/lib/themes/aura/confirmdialog/package.json
index f8e9d7ae0..217fbab91 100644
--- a/components/lib/themes/aura/confirmdialog/package.json
+++ b/components/lib/themes/aura/confirmdialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmdialog/index.d.ts"
 }
diff --git a/components/lib/themes/aura/confirmpopup/index.d.ts b/components/lib/themes/aura/confirmpopup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/confirmpopup/package.json b/components/lib/themes/aura/confirmpopup/package.json
index f8e9d7ae0..4600276d6 100644
--- a/components/lib/themes/aura/confirmpopup/package.json
+++ b/components/lib/themes/aura/confirmpopup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmpopup/index.d.ts"
 }
diff --git a/components/lib/themes/aura/contextmenu/index.d.ts b/components/lib/themes/aura/contextmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/contextmenu/package.json b/components/lib/themes/aura/contextmenu/package.json
index f8e9d7ae0..6ab0d90f2 100644
--- a/components/lib/themes/aura/contextmenu/package.json
+++ b/components/lib/themes/aura/contextmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/contextmenu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/datatable/index.d.ts b/components/lib/themes/aura/datatable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/datatable/package.json b/components/lib/themes/aura/datatable/package.json
index f8e9d7ae0..b9f281a33 100644
--- a/components/lib/themes/aura/datatable/package.json
+++ b/components/lib/themes/aura/datatable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datatable/index.d.ts"
 }
diff --git a/components/lib/themes/aura/dataview/index.d.ts b/components/lib/themes/aura/dataview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/dataview/package.json b/components/lib/themes/aura/dataview/package.json
index f8e9d7ae0..db6d2b066 100644
--- a/components/lib/themes/aura/dataview/package.json
+++ b/components/lib/themes/aura/dataview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dataview/index.d.ts"
 }
diff --git a/components/lib/themes/aura/datepicker/index.d.ts b/components/lib/themes/aura/datepicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/datepicker/package.json b/components/lib/themes/aura/datepicker/package.json
index f8e9d7ae0..e6c94638d 100644
--- a/components/lib/themes/aura/datepicker/package.json
+++ b/components/lib/themes/aura/datepicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datepicker/index.d.ts"
 }
diff --git a/components/lib/themes/aura/dialog/index.d.ts b/components/lib/themes/aura/dialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/dialog/package.json b/components/lib/themes/aura/dialog/package.json
index f8e9d7ae0..827f0fcc0 100644
--- a/components/lib/themes/aura/dialog/package.json
+++ b/components/lib/themes/aura/dialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dialog/index.d.ts"
 }
diff --git a/components/lib/themes/aura/divider/index.d.ts b/components/lib/themes/aura/divider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/divider/package.json b/components/lib/themes/aura/divider/package.json
index f8e9d7ae0..a169ff92e 100644
--- a/components/lib/themes/aura/divider/package.json
+++ b/components/lib/themes/aura/divider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/divider/index.d.ts"
 }
diff --git a/components/lib/themes/aura/dock/index.d.ts b/components/lib/themes/aura/dock/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/dock/package.json b/components/lib/themes/aura/dock/package.json
index f8e9d7ae0..e8b915e9d 100644
--- a/components/lib/themes/aura/dock/package.json
+++ b/components/lib/themes/aura/dock/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dock/index.d.ts"
 }
diff --git a/components/lib/themes/aura/drawer/index.d.ts b/components/lib/themes/aura/drawer/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/drawer/package.json b/components/lib/themes/aura/drawer/package.json
index f8e9d7ae0..8ec307182 100644
--- a/components/lib/themes/aura/drawer/package.json
+++ b/components/lib/themes/aura/drawer/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/drawer/index.d.ts"
 }
diff --git a/components/lib/themes/aura/editor/index.d.ts b/components/lib/themes/aura/editor/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/editor/package.json b/components/lib/themes/aura/editor/package.json
index f8e9d7ae0..2731b93e7 100644
--- a/components/lib/themes/aura/editor/package.json
+++ b/components/lib/themes/aura/editor/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/editor/index.d.ts"
 }
diff --git a/components/lib/themes/aura/fieldset/index.d.ts b/components/lib/themes/aura/fieldset/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/fieldset/package.json b/components/lib/themes/aura/fieldset/package.json
index f8e9d7ae0..b1c2a2815 100644
--- a/components/lib/themes/aura/fieldset/package.json
+++ b/components/lib/themes/aura/fieldset/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fieldset/index.d.ts"
 }
diff --git a/components/lib/themes/aura/fileupload/index.d.ts b/components/lib/themes/aura/fileupload/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/fileupload/package.json b/components/lib/themes/aura/fileupload/package.json
index f8e9d7ae0..8bbe55ff2 100644
--- a/components/lib/themes/aura/fileupload/package.json
+++ b/components/lib/themes/aura/fileupload/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fileupload/index.d.ts"
 }
diff --git a/components/lib/themes/aura/floatlabel/index.d.ts b/components/lib/themes/aura/floatlabel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/floatlabel/package.json b/components/lib/themes/aura/floatlabel/package.json
index f8e9d7ae0..18ef918de 100644
--- a/components/lib/themes/aura/floatlabel/package.json
+++ b/components/lib/themes/aura/floatlabel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/floatlabel/index.d.ts"
 }
diff --git a/components/lib/themes/aura/galleria/index.d.ts b/components/lib/themes/aura/galleria/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/galleria/package.json b/components/lib/themes/aura/galleria/package.json
index f8e9d7ae0..a55bf26c5 100644
--- a/components/lib/themes/aura/galleria/package.json
+++ b/components/lib/themes/aura/galleria/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/galleria/index.d.ts"
 }
diff --git a/components/lib/themes/aura/iconfield/index.d.ts b/components/lib/themes/aura/iconfield/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/iconfield/package.json b/components/lib/themes/aura/iconfield/package.json
index f8e9d7ae0..cc32f4246 100644
--- a/components/lib/themes/aura/iconfield/package.json
+++ b/components/lib/themes/aura/iconfield/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/iconfield/index.d.ts"
 }
diff --git a/components/lib/themes/aura/image/index.d.ts b/components/lib/themes/aura/image/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/image/package.json b/components/lib/themes/aura/image/package.json
index f8e9d7ae0..2ed6d77f8 100644
--- a/components/lib/themes/aura/image/package.json
+++ b/components/lib/themes/aura/image/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/image/index.d.ts"
 }
diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js
index bc7fd21f6..9c2df757a 100644
--- a/components/lib/themes/aura/index.js
+++ b/components/lib/themes/aura/index.js
@@ -5,7 +5,6 @@ import badge from 'primevue/themes/aura/badge';
 import blockui from 'primevue/themes/aura/blockui';
 import breadcrumb from 'primevue/themes/aura/breadcrumb';
 import button from 'primevue/themes/aura/button';
-import buttongroup from 'primevue/themes/aura/buttongroup';
 import card from 'primevue/themes/aura/card';
 import carousel from 'primevue/themes/aura/carousel';
 import cascadeselect from 'primevue/themes/aura/cascadeselect';
@@ -34,7 +33,6 @@ import inplace from 'primevue/themes/aura/inplace';
 import inputchips from 'primevue/themes/aura/inputchips';
 import inputgroup from 'primevue/themes/aura/inputgroup';
 import inputnumber from 'primevue/themes/aura/inputnumber';
-import inputotp from 'primevue/themes/aura/inputotp';
 import inputtext from 'primevue/themes/aura/inputtext';
 import knob from 'primevue/themes/aura/knob';
 import listbox from 'primevue/themes/aura/listbox';
@@ -58,7 +56,6 @@ import radiobutton from 'primevue/themes/aura/radiobutton';
 import rating from 'primevue/themes/aura/rating';
 import ripple from 'primevue/themes/aura/ripple';
 import scrollpanel from 'primevue/themes/aura/scrollpanel';
-import scrolltop from 'primevue/themes/aura/scrolltop';
 import select from 'primevue/themes/aura/select';
 import selectbutton from 'primevue/themes/aura/selectbutton';
 import skeleton from 'primevue/themes/aura/skeleton';
@@ -465,7 +462,6 @@ export default {
         blockui,
         breadcrumb,
         button,
-        buttongroup,
         datepicker,
         card,
         carousel,
@@ -494,8 +490,6 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
-        inputotp,
-        toggleswitch,
         inputtext,
         knob,
         listbox,
@@ -518,7 +512,6 @@ export default {
         radiobutton,
         rating,
         scrollpanel,
-        scrolltop,
         select,
         selectbutton,
         skeleton,
@@ -537,6 +530,7 @@ export default {
         terminal,
         timeline,
         togglebutton,
+        toggleswitch,
         tree,
         treeselect,
         treetable,
diff --git a/components/lib/themes/aura/inlinemessage/index.d.ts b/components/lib/themes/aura/inlinemessage/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inlinemessage/package.json b/components/lib/themes/aura/inlinemessage/package.json
index f8e9d7ae0..906bd2d0e 100644
--- a/components/lib/themes/aura/inlinemessage/package.json
+++ b/components/lib/themes/aura/inlinemessage/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inlinemessage/index.d.ts"
 }
diff --git a/components/lib/themes/aura/inplace/index.d.ts b/components/lib/themes/aura/inplace/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inplace/package.json b/components/lib/themes/aura/inplace/package.json
index f8e9d7ae0..8b8571e34 100644
--- a/components/lib/themes/aura/inplace/package.json
+++ b/components/lib/themes/aura/inplace/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inplace/index.d.ts"
 }
diff --git a/components/lib/themes/aura/inputchips/index.d.ts b/components/lib/themes/aura/inputchips/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inputchips/package.json b/components/lib/themes/aura/inputchips/package.json
index f8e9d7ae0..133a88eb5 100644
--- a/components/lib/themes/aura/inputchips/package.json
+++ b/components/lib/themes/aura/inputchips/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputchips/index.d.ts"
 }
diff --git a/components/lib/themes/aura/inputgroup/index.d.ts b/components/lib/themes/aura/inputgroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inputgroup/package.json b/components/lib/themes/aura/inputgroup/package.json
index f8e9d7ae0..ffb59cf3c 100644
--- a/components/lib/themes/aura/inputgroup/package.json
+++ b/components/lib/themes/aura/inputgroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputgroup/index.d.ts"
 }
diff --git a/components/lib/themes/aura/inputnumber/index.d.ts b/components/lib/themes/aura/inputnumber/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inputnumber/package.json b/components/lib/themes/aura/inputnumber/package.json
index f8e9d7ae0..b53ac48a2 100644
--- a/components/lib/themes/aura/inputnumber/package.json
+++ b/components/lib/themes/aura/inputnumber/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputnumber/index.d.ts"
 }
diff --git a/components/lib/themes/aura/inputotp/index.d.ts b/components/lib/themes/aura/inputotp/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/inputotp/index.js b/components/lib/themes/aura/inputotp/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/aura/inputotp/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/aura/inputotp/package.json b/components/lib/themes/aura/inputotp/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/aura/inputotp/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/aura/inputtext/package.json b/components/lib/themes/aura/inputtext/package.json
index f8e9d7ae0..3e4c4f245 100644
--- a/components/lib/themes/aura/inputtext/package.json
+++ b/components/lib/themes/aura/inputtext/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputtext/index.d.ts"
 }
diff --git a/components/lib/themes/aura/knob/index.d.ts b/components/lib/themes/aura/knob/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/knob/package.json b/components/lib/themes/aura/knob/package.json
index f8e9d7ae0..520ed43c6 100644
--- a/components/lib/themes/aura/knob/package.json
+++ b/components/lib/themes/aura/knob/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/knob/index.d.ts"
 }
diff --git a/components/lib/themes/aura/listbox/index.d.ts b/components/lib/themes/aura/listbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/listbox/package.json b/components/lib/themes/aura/listbox/package.json
index f8e9d7ae0..00b10c63c 100644
--- a/components/lib/themes/aura/listbox/package.json
+++ b/components/lib/themes/aura/listbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/listbox/index.d.ts"
 }
diff --git a/components/lib/themes/aura/megamenu/index.d.ts b/components/lib/themes/aura/megamenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/megamenu/package.json b/components/lib/themes/aura/megamenu/package.json
index f8e9d7ae0..2d1da711e 100644
--- a/components/lib/themes/aura/megamenu/package.json
+++ b/components/lib/themes/aura/megamenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/megamenu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/menu/index.d.ts b/components/lib/themes/aura/menu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/menu/package.json b/components/lib/themes/aura/menu/package.json
index f8e9d7ae0..cd2cc2495 100644
--- a/components/lib/themes/aura/menu/package.json
+++ b/components/lib/themes/aura/menu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/menubar/index.d.ts b/components/lib/themes/aura/menubar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/menubar/package.json b/components/lib/themes/aura/menubar/package.json
index f8e9d7ae0..f5b439f8b 100644
--- a/components/lib/themes/aura/menubar/package.json
+++ b/components/lib/themes/aura/menubar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menubar/index.d.ts"
 }
diff --git a/components/lib/themes/aura/message/index.d.ts b/components/lib/themes/aura/message/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/message/package.json b/components/lib/themes/aura/message/package.json
index f8e9d7ae0..ffeaf4e56 100644
--- a/components/lib/themes/aura/message/package.json
+++ b/components/lib/themes/aura/message/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/message/index.d.ts"
 }
diff --git a/components/lib/themes/aura/metergroup/index.d.ts b/components/lib/themes/aura/metergroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/metergroup/package.json b/components/lib/themes/aura/metergroup/package.json
index f8e9d7ae0..53ee817aa 100644
--- a/components/lib/themes/aura/metergroup/package.json
+++ b/components/lib/themes/aura/metergroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/metergroup/index.d.ts"
 }
diff --git a/components/lib/themes/aura/multiselect/index.d.ts b/components/lib/themes/aura/multiselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/multiselect/package.json b/components/lib/themes/aura/multiselect/package.json
index f8e9d7ae0..b0a54db70 100644
--- a/components/lib/themes/aura/multiselect/package.json
+++ b/components/lib/themes/aura/multiselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/multiselect/index.d.ts"
 }
diff --git a/components/lib/themes/aura/orderlist/index.d.ts b/components/lib/themes/aura/orderlist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/orderlist/package.json b/components/lib/themes/aura/orderlist/package.json
index f8e9d7ae0..25dbeb223 100644
--- a/components/lib/themes/aura/orderlist/package.json
+++ b/components/lib/themes/aura/orderlist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/orderlist/index.d.ts"
 }
diff --git a/components/lib/themes/aura/organizationchart/index.d.ts b/components/lib/themes/aura/organizationchart/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/organizationchart/package.json b/components/lib/themes/aura/organizationchart/package.json
index f8e9d7ae0..fc751ad11 100644
--- a/components/lib/themes/aura/organizationchart/package.json
+++ b/components/lib/themes/aura/organizationchart/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/organizationchart/index.d.ts"
 }
diff --git a/components/lib/themes/aura/paginator/index.d.ts b/components/lib/themes/aura/paginator/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/paginator/package.json b/components/lib/themes/aura/paginator/package.json
index f8e9d7ae0..674eca4c9 100644
--- a/components/lib/themes/aura/paginator/package.json
+++ b/components/lib/themes/aura/paginator/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/paginator/index.d.ts"
 }
diff --git a/components/lib/themes/aura/panel/index.d.ts b/components/lib/themes/aura/panel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/panel/package.json b/components/lib/themes/aura/panel/package.json
index f8e9d7ae0..97beb609f 100644
--- a/components/lib/themes/aura/panel/package.json
+++ b/components/lib/themes/aura/panel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panel/index.d.ts"
 }
diff --git a/components/lib/themes/aura/panelmenu/index.d.ts b/components/lib/themes/aura/panelmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/panelmenu/package.json b/components/lib/themes/aura/panelmenu/package.json
index f8e9d7ae0..47625e6f9 100644
--- a/components/lib/themes/aura/panelmenu/package.json
+++ b/components/lib/themes/aura/panelmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panelmenu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/password/index.d.ts b/components/lib/themes/aura/password/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/password/package.json b/components/lib/themes/aura/password/package.json
index f8e9d7ae0..ddaf3e83d 100644
--- a/components/lib/themes/aura/password/package.json
+++ b/components/lib/themes/aura/password/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/password/index.d.ts"
 }
diff --git a/components/lib/themes/aura/picklist/index.d.ts b/components/lib/themes/aura/picklist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/picklist/package.json b/components/lib/themes/aura/picklist/package.json
index f8e9d7ae0..f9f633318 100644
--- a/components/lib/themes/aura/picklist/package.json
+++ b/components/lib/themes/aura/picklist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/picklist/index.d.ts"
 }
diff --git a/components/lib/themes/aura/popover/index.d.ts b/components/lib/themes/aura/popover/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/popover/package.json b/components/lib/themes/aura/popover/package.json
index f8e9d7ae0..a0fff63f3 100644
--- a/components/lib/themes/aura/popover/package.json
+++ b/components/lib/themes/aura/popover/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/popover/index.d.ts"
 }
diff --git a/components/lib/themes/aura/progressbar/index.d.ts b/components/lib/themes/aura/progressbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/progressbar/package.json b/components/lib/themes/aura/progressbar/package.json
index f8e9d7ae0..9261ad9cb 100644
--- a/components/lib/themes/aura/progressbar/package.json
+++ b/components/lib/themes/aura/progressbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressbar/index.d.ts"
 }
diff --git a/components/lib/themes/aura/progressspinner/index.d.ts b/components/lib/themes/aura/progressspinner/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/progressspinner/package.json b/components/lib/themes/aura/progressspinner/package.json
index f8e9d7ae0..c9eec02e7 100644
--- a/components/lib/themes/aura/progressspinner/package.json
+++ b/components/lib/themes/aura/progressspinner/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressspinner/index.d.ts"
 }
diff --git a/components/lib/themes/aura/radiobutton/index.d.ts b/components/lib/themes/aura/radiobutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/radiobutton/package.json b/components/lib/themes/aura/radiobutton/package.json
index f8e9d7ae0..e492380b8 100644
--- a/components/lib/themes/aura/radiobutton/package.json
+++ b/components/lib/themes/aura/radiobutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/radiobutton/index.d.ts"
 }
diff --git a/components/lib/themes/aura/rating/index.d.ts b/components/lib/themes/aura/rating/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/rating/package.json b/components/lib/themes/aura/rating/package.json
index f8e9d7ae0..25cb35938 100644
--- a/components/lib/themes/aura/rating/package.json
+++ b/components/lib/themes/aura/rating/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/rating/index.d.ts"
 }
diff --git a/components/lib/themes/aura/ripple/package.json b/components/lib/themes/aura/ripple/package.json
index f8e9d7ae0..1cc5709da 100644
--- a/components/lib/themes/aura/ripple/package.json
+++ b/components/lib/themes/aura/ripple/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/ripple/index.d.ts"
 }
diff --git a/components/lib/themes/aura/scrollpanel/index.d.ts b/components/lib/themes/aura/scrollpanel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/scrollpanel/package.json b/components/lib/themes/aura/scrollpanel/package.json
index f8e9d7ae0..023f162db 100644
--- a/components/lib/themes/aura/scrollpanel/package.json
+++ b/components/lib/themes/aura/scrollpanel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/scrollpanel/index.d.ts"
 }
diff --git a/components/lib/themes/aura/scrolltop/index.d.ts b/components/lib/themes/aura/scrolltop/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/scrolltop/index.js b/components/lib/themes/aura/scrolltop/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/aura/scrolltop/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/aura/scrolltop/package.json b/components/lib/themes/aura/scrolltop/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/aura/scrolltop/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/aura/select/index.d.ts b/components/lib/themes/aura/select/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/select/package.json b/components/lib/themes/aura/select/package.json
index f8e9d7ae0..6cb8e9469 100644
--- a/components/lib/themes/aura/select/package.json
+++ b/components/lib/themes/aura/select/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/select/index.d.ts"
 }
diff --git a/components/lib/themes/aura/selectbutton/index.d.ts b/components/lib/themes/aura/selectbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/selectbutton/package.json b/components/lib/themes/aura/selectbutton/package.json
index f8e9d7ae0..1176632b4 100644
--- a/components/lib/themes/aura/selectbutton/package.json
+++ b/components/lib/themes/aura/selectbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/selectbutton/index.d.ts"
 }
diff --git a/components/lib/themes/aura/skeleton/index.d.ts b/components/lib/themes/aura/skeleton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/skeleton/package.json b/components/lib/themes/aura/skeleton/package.json
index f8e9d7ae0..5f416a21d 100644
--- a/components/lib/themes/aura/skeleton/package.json
+++ b/components/lib/themes/aura/skeleton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/skeleton/index.d.ts"
 }
diff --git a/components/lib/themes/aura/slider/index.d.ts b/components/lib/themes/aura/slider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/slider/package.json b/components/lib/themes/aura/slider/package.json
index f8e9d7ae0..856cab847 100644
--- a/components/lib/themes/aura/slider/package.json
+++ b/components/lib/themes/aura/slider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/slider/index.d.ts"
 }
diff --git a/components/lib/themes/aura/speeddial/index.d.ts b/components/lib/themes/aura/speeddial/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/speeddial/package.json b/components/lib/themes/aura/speeddial/package.json
index f8e9d7ae0..2ceb0e1de 100644
--- a/components/lib/themes/aura/speeddial/package.json
+++ b/components/lib/themes/aura/speeddial/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/speeddial/index.d.ts"
 }
diff --git a/components/lib/themes/aura/splitbutton/index.d.ts b/components/lib/themes/aura/splitbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/splitbutton/package.json b/components/lib/themes/aura/splitbutton/package.json
index f8e9d7ae0..dc92a62a7 100644
--- a/components/lib/themes/aura/splitbutton/package.json
+++ b/components/lib/themes/aura/splitbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitbutton/index.d.ts"
 }
diff --git a/components/lib/themes/aura/splitter/index.d.ts b/components/lib/themes/aura/splitter/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/splitter/package.json b/components/lib/themes/aura/splitter/package.json
index f8e9d7ae0..df7d1447b 100644
--- a/components/lib/themes/aura/splitter/package.json
+++ b/components/lib/themes/aura/splitter/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitter/index.d.ts"
 }
diff --git a/components/lib/themes/aura/stepper/index.d.ts b/components/lib/themes/aura/stepper/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/stepper/package.json b/components/lib/themes/aura/stepper/package.json
index f8e9d7ae0..3d7d044d2 100644
--- a/components/lib/themes/aura/stepper/package.json
+++ b/components/lib/themes/aura/stepper/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/stepper/index.d.ts"
 }
diff --git a/components/lib/themes/aura/steps/index.d.ts b/components/lib/themes/aura/steps/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/steps/package.json b/components/lib/themes/aura/steps/package.json
index f8e9d7ae0..535fe8c83 100644
--- a/components/lib/themes/aura/steps/package.json
+++ b/components/lib/themes/aura/steps/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/steps/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tabmenu/index.d.ts b/components/lib/themes/aura/tabmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tabmenu/package.json b/components/lib/themes/aura/tabmenu/package.json
index f8e9d7ae0..999693e72 100644
--- a/components/lib/themes/aura/tabmenu/package.json
+++ b/components/lib/themes/aura/tabmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabmenu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tabs/index.d.ts b/components/lib/themes/aura/tabs/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tabs/package.json b/components/lib/themes/aura/tabs/package.json
index f8e9d7ae0..a52204ab2 100644
--- a/components/lib/themes/aura/tabs/package.json
+++ b/components/lib/themes/aura/tabs/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabs/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tabview/index.d.ts b/components/lib/themes/aura/tabview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tabview/package.json b/components/lib/themes/aura/tabview/package.json
index f8e9d7ae0..231e695a6 100644
--- a/components/lib/themes/aura/tabview/package.json
+++ b/components/lib/themes/aura/tabview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabview/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tag/index.d.ts b/components/lib/themes/aura/tag/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tag/package.json b/components/lib/themes/aura/tag/package.json
index f8e9d7ae0..893ffff1d 100644
--- a/components/lib/themes/aura/tag/package.json
+++ b/components/lib/themes/aura/tag/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tag/index.d.ts"
 }
diff --git a/components/lib/themes/aura/terminal/index.d.ts b/components/lib/themes/aura/terminal/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/terminal/package.json b/components/lib/themes/aura/terminal/package.json
index f8e9d7ae0..a97962c89 100644
--- a/components/lib/themes/aura/terminal/package.json
+++ b/components/lib/themes/aura/terminal/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/terminal/index.d.ts"
 }
diff --git a/components/lib/themes/aura/textarea/index.d.ts b/components/lib/themes/aura/textarea/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/textarea/package.json b/components/lib/themes/aura/textarea/package.json
index f8e9d7ae0..f416b3057 100644
--- a/components/lib/themes/aura/textarea/package.json
+++ b/components/lib/themes/aura/textarea/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/textarea/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tieredmenu/index.d.ts b/components/lib/themes/aura/tieredmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tieredmenu/package.json b/components/lib/themes/aura/tieredmenu/package.json
index f8e9d7ae0..565b40b41 100644
--- a/components/lib/themes/aura/tieredmenu/package.json
+++ b/components/lib/themes/aura/tieredmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tieredmenu/index.d.ts"
 }
diff --git a/components/lib/themes/aura/timeline/index.d.ts b/components/lib/themes/aura/timeline/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/timeline/package.json b/components/lib/themes/aura/timeline/package.json
index f8e9d7ae0..90dd4ba83 100644
--- a/components/lib/themes/aura/timeline/package.json
+++ b/components/lib/themes/aura/timeline/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/timeline/index.d.ts"
 }
diff --git a/components/lib/themes/aura/toast/index.d.ts b/components/lib/themes/aura/toast/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/toast/package.json b/components/lib/themes/aura/toast/package.json
index f8e9d7ae0..992756651 100644
--- a/components/lib/themes/aura/toast/package.json
+++ b/components/lib/themes/aura/toast/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toast/index.d.ts"
 }
diff --git a/components/lib/themes/aura/togglebutton/index.d.ts b/components/lib/themes/aura/togglebutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/togglebutton/package.json b/components/lib/themes/aura/togglebutton/package.json
index f8e9d7ae0..4e6f25d3d 100644
--- a/components/lib/themes/aura/togglebutton/package.json
+++ b/components/lib/themes/aura/togglebutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/togglebutton/index.d.ts"
 }
diff --git a/components/lib/themes/aura/toggleswitch/index.d.ts b/components/lib/themes/aura/toggleswitch/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/toggleswitch/package.json b/components/lib/themes/aura/toggleswitch/package.json
index f8e9d7ae0..f01a5031b 100644
--- a/components/lib/themes/aura/toggleswitch/package.json
+++ b/components/lib/themes/aura/toggleswitch/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toggleswitch/index.d.ts"
 }
diff --git a/components/lib/themes/aura/toolbar/index.d.ts b/components/lib/themes/aura/toolbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/toolbar/package.json b/components/lib/themes/aura/toolbar/package.json
index f8e9d7ae0..6b2e99188 100644
--- a/components/lib/themes/aura/toolbar/package.json
+++ b/components/lib/themes/aura/toolbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toolbar/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tooltip/index.d.ts b/components/lib/themes/aura/tooltip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tooltip/package.json b/components/lib/themes/aura/tooltip/package.json
index f8e9d7ae0..2cc429459 100644
--- a/components/lib/themes/aura/tooltip/package.json
+++ b/components/lib/themes/aura/tooltip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tooltip/index.d.ts"
 }
diff --git a/components/lib/themes/aura/tree/index.d.ts b/components/lib/themes/aura/tree/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/tree/package.json b/components/lib/themes/aura/tree/package.json
index f8e9d7ae0..ea54f5627 100644
--- a/components/lib/themes/aura/tree/package.json
+++ b/components/lib/themes/aura/tree/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tree/index.d.ts"
 }
diff --git a/components/lib/themes/aura/treeselect/index.d.ts b/components/lib/themes/aura/treeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/treeselect/package.json b/components/lib/themes/aura/treeselect/package.json
index f8e9d7ae0..360a1bebc 100644
--- a/components/lib/themes/aura/treeselect/package.json
+++ b/components/lib/themes/aura/treeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treeselect/index.d.ts"
 }
diff --git a/components/lib/themes/aura/treetable/index.d.ts b/components/lib/themes/aura/treetable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/aura/treetable/package.json b/components/lib/themes/aura/treetable/package.json
index f8e9d7ae0..d50a95454 100644
--- a/components/lib/themes/aura/treetable/package.json
+++ b/components/lib/themes/aura/treetable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treetable/index.d.ts"
 }
diff --git a/components/lib/themes/lara/accordion/index.d.ts b/components/lib/themes/lara/accordion/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/accordion/package.json b/components/lib/themes/lara/accordion/package.json
index f8e9d7ae0..0b3278e57 100644
--- a/components/lib/themes/lara/accordion/package.json
+++ b/components/lib/themes/lara/accordion/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/accordion/index.d.ts"
 }
diff --git a/components/lib/themes/lara/autocomplete/index.d.ts b/components/lib/themes/lara/autocomplete/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/autocomplete/package.json b/components/lib/themes/lara/autocomplete/package.json
index f8e9d7ae0..bd8ba462a 100644
--- a/components/lib/themes/lara/autocomplete/package.json
+++ b/components/lib/themes/lara/autocomplete/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/autocomplete/index.d.ts"
 }
diff --git a/components/lib/themes/lara/avatar/index.d.ts b/components/lib/themes/lara/avatar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/avatar/package.json b/components/lib/themes/lara/avatar/package.json
index f8e9d7ae0..ad0aa37d3 100644
--- a/components/lib/themes/lara/avatar/package.json
+++ b/components/lib/themes/lara/avatar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/avatar/index.d.ts"
 }
diff --git a/components/lib/themes/lara/badge/index.d.ts b/components/lib/themes/lara/badge/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/badge/package.json b/components/lib/themes/lara/badge/package.json
index f8e9d7ae0..e182126fe 100644
--- a/components/lib/themes/lara/badge/package.json
+++ b/components/lib/themes/lara/badge/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/badge/index.d.ts"
 }
diff --git a/components/lib/themes/lara/blockui/index.d.ts b/components/lib/themes/lara/blockui/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/blockui/package.json b/components/lib/themes/lara/blockui/package.json
index f8e9d7ae0..caaa50c7a 100644
--- a/components/lib/themes/lara/blockui/package.json
+++ b/components/lib/themes/lara/blockui/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/blockui/index.d.ts"
 }
diff --git a/components/lib/themes/lara/breadcrumb/index.d.ts b/components/lib/themes/lara/breadcrumb/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/breadcrumb/package.json b/components/lib/themes/lara/breadcrumb/package.json
index f8e9d7ae0..f8329aeed 100644
--- a/components/lib/themes/lara/breadcrumb/package.json
+++ b/components/lib/themes/lara/breadcrumb/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/breadcrumb/index.d.ts"
 }
diff --git a/components/lib/themes/lara/button/index.d.ts b/components/lib/themes/lara/button/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/button/package.json b/components/lib/themes/lara/button/package.json
index f8e9d7ae0..f794dbfb6 100644
--- a/components/lib/themes/lara/button/package.json
+++ b/components/lib/themes/lara/button/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/button/index.d.ts"
 }
diff --git a/components/lib/themes/lara/buttongroup/index.d.ts b/components/lib/themes/lara/buttongroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/buttongroup/index.js b/components/lib/themes/lara/buttongroup/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/lara/buttongroup/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/lara/buttongroup/package.json b/components/lib/themes/lara/buttongroup/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/lara/buttongroup/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/lara/card/index.d.ts b/components/lib/themes/lara/card/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/card/package.json b/components/lib/themes/lara/card/package.json
index f8e9d7ae0..fb627c8f0 100644
--- a/components/lib/themes/lara/card/package.json
+++ b/components/lib/themes/lara/card/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/card/index.d.ts"
 }
diff --git a/components/lib/themes/lara/carousel/index.d.ts b/components/lib/themes/lara/carousel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/carousel/package.json b/components/lib/themes/lara/carousel/package.json
index f8e9d7ae0..df4aa53e9 100644
--- a/components/lib/themes/lara/carousel/package.json
+++ b/components/lib/themes/lara/carousel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/carousel/index.d.ts"
 }
diff --git a/components/lib/themes/lara/cascadeselect/index.d.ts b/components/lib/themes/lara/cascadeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/cascadeselect/package.json b/components/lib/themes/lara/cascadeselect/package.json
index f8e9d7ae0..1a9d70202 100644
--- a/components/lib/themes/lara/cascadeselect/package.json
+++ b/components/lib/themes/lara/cascadeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/cascadeselect/index.d.ts"
 }
diff --git a/components/lib/themes/lara/checkbox/index.d.ts b/components/lib/themes/lara/checkbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/checkbox/package.json b/components/lib/themes/lara/checkbox/package.json
index f8e9d7ae0..2a48a7a40 100644
--- a/components/lib/themes/lara/checkbox/package.json
+++ b/components/lib/themes/lara/checkbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/checkbox/index.d.ts"
 }
diff --git a/components/lib/themes/lara/chip/index.d.ts b/components/lib/themes/lara/chip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/chip/package.json b/components/lib/themes/lara/chip/package.json
index f8e9d7ae0..e769c72ed 100644
--- a/components/lib/themes/lara/chip/package.json
+++ b/components/lib/themes/lara/chip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/chip/index.d.ts"
 }
diff --git a/components/lib/themes/lara/colorpicker/index.d.ts b/components/lib/themes/lara/colorpicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/colorpicker/package.json b/components/lib/themes/lara/colorpicker/package.json
index f8e9d7ae0..ac6a5768b 100644
--- a/components/lib/themes/lara/colorpicker/package.json
+++ b/components/lib/themes/lara/colorpicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/colorpicker/index.d.ts"
 }
diff --git a/components/lib/themes/lara/confirmdialog/index.d.ts b/components/lib/themes/lara/confirmdialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/confirmdialog/package.json b/components/lib/themes/lara/confirmdialog/package.json
index f8e9d7ae0..217fbab91 100644
--- a/components/lib/themes/lara/confirmdialog/package.json
+++ b/components/lib/themes/lara/confirmdialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmdialog/index.d.ts"
 }
diff --git a/components/lib/themes/lara/confirmpopup/index.d.ts b/components/lib/themes/lara/confirmpopup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/confirmpopup/package.json b/components/lib/themes/lara/confirmpopup/package.json
index f8e9d7ae0..4600276d6 100644
--- a/components/lib/themes/lara/confirmpopup/package.json
+++ b/components/lib/themes/lara/confirmpopup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmpopup/index.d.ts"
 }
diff --git a/components/lib/themes/lara/contextmenu/index.d.ts b/components/lib/themes/lara/contextmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/contextmenu/package.json b/components/lib/themes/lara/contextmenu/package.json
index f8e9d7ae0..6ab0d90f2 100644
--- a/components/lib/themes/lara/contextmenu/package.json
+++ b/components/lib/themes/lara/contextmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/contextmenu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/datatable/index.d.ts b/components/lib/themes/lara/datatable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/datatable/package.json b/components/lib/themes/lara/datatable/package.json
index f8e9d7ae0..b9f281a33 100644
--- a/components/lib/themes/lara/datatable/package.json
+++ b/components/lib/themes/lara/datatable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datatable/index.d.ts"
 }
diff --git a/components/lib/themes/lara/dataview/index.d.ts b/components/lib/themes/lara/dataview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/dataview/package.json b/components/lib/themes/lara/dataview/package.json
index f8e9d7ae0..db6d2b066 100644
--- a/components/lib/themes/lara/dataview/package.json
+++ b/components/lib/themes/lara/dataview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dataview/index.d.ts"
 }
diff --git a/components/lib/themes/lara/datepicker/index.d.ts b/components/lib/themes/lara/datepicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/datepicker/package.json b/components/lib/themes/lara/datepicker/package.json
index f8e9d7ae0..e6c94638d 100644
--- a/components/lib/themes/lara/datepicker/package.json
+++ b/components/lib/themes/lara/datepicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datepicker/index.d.ts"
 }
diff --git a/components/lib/themes/lara/dialog/index.d.ts b/components/lib/themes/lara/dialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/dialog/package.json b/components/lib/themes/lara/dialog/package.json
index f8e9d7ae0..827f0fcc0 100644
--- a/components/lib/themes/lara/dialog/package.json
+++ b/components/lib/themes/lara/dialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dialog/index.d.ts"
 }
diff --git a/components/lib/themes/lara/divider/index.d.ts b/components/lib/themes/lara/divider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/divider/package.json b/components/lib/themes/lara/divider/package.json
index f8e9d7ae0..a169ff92e 100644
--- a/components/lib/themes/lara/divider/package.json
+++ b/components/lib/themes/lara/divider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/divider/index.d.ts"
 }
diff --git a/components/lib/themes/lara/dock/index.d.ts b/components/lib/themes/lara/dock/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/dock/package.json b/components/lib/themes/lara/dock/package.json
index f8e9d7ae0..e8b915e9d 100644
--- a/components/lib/themes/lara/dock/package.json
+++ b/components/lib/themes/lara/dock/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dock/index.d.ts"
 }
diff --git a/components/lib/themes/lara/drawer/index.d.ts b/components/lib/themes/lara/drawer/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/drawer/package.json b/components/lib/themes/lara/drawer/package.json
index f8e9d7ae0..8ec307182 100644
--- a/components/lib/themes/lara/drawer/package.json
+++ b/components/lib/themes/lara/drawer/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/drawer/index.d.ts"
 }
diff --git a/components/lib/themes/lara/editor/index.d.ts b/components/lib/themes/lara/editor/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/editor/package.json b/components/lib/themes/lara/editor/package.json
index f8e9d7ae0..2731b93e7 100644
--- a/components/lib/themes/lara/editor/package.json
+++ b/components/lib/themes/lara/editor/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/editor/index.d.ts"
 }
diff --git a/components/lib/themes/lara/fieldset/index.d.ts b/components/lib/themes/lara/fieldset/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/fieldset/package.json b/components/lib/themes/lara/fieldset/package.json
index f8e9d7ae0..b1c2a2815 100644
--- a/components/lib/themes/lara/fieldset/package.json
+++ b/components/lib/themes/lara/fieldset/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fieldset/index.d.ts"
 }
diff --git a/components/lib/themes/lara/fileupload/index.d.ts b/components/lib/themes/lara/fileupload/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/fileupload/package.json b/components/lib/themes/lara/fileupload/package.json
index f8e9d7ae0..8bbe55ff2 100644
--- a/components/lib/themes/lara/fileupload/package.json
+++ b/components/lib/themes/lara/fileupload/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fileupload/index.d.ts"
 }
diff --git a/components/lib/themes/lara/floatlabel/index.d.ts b/components/lib/themes/lara/floatlabel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/floatlabel/package.json b/components/lib/themes/lara/floatlabel/package.json
index f8e9d7ae0..18ef918de 100644
--- a/components/lib/themes/lara/floatlabel/package.json
+++ b/components/lib/themes/lara/floatlabel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/floatlabel/index.d.ts"
 }
diff --git a/components/lib/themes/lara/galleria/index.d.ts b/components/lib/themes/lara/galleria/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/galleria/package.json b/components/lib/themes/lara/galleria/package.json
index f8e9d7ae0..a55bf26c5 100644
--- a/components/lib/themes/lara/galleria/package.json
+++ b/components/lib/themes/lara/galleria/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/galleria/index.d.ts"
 }
diff --git a/components/lib/themes/lara/iconfield/index.d.ts b/components/lib/themes/lara/iconfield/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/iconfield/package.json b/components/lib/themes/lara/iconfield/package.json
index f8e9d7ae0..cc32f4246 100644
--- a/components/lib/themes/lara/iconfield/package.json
+++ b/components/lib/themes/lara/iconfield/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/iconfield/index.d.ts"
 }
diff --git a/components/lib/themes/lara/image/index.d.ts b/components/lib/themes/lara/image/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/image/package.json b/components/lib/themes/lara/image/package.json
index f8e9d7ae0..2ed6d77f8 100644
--- a/components/lib/themes/lara/image/package.json
+++ b/components/lib/themes/lara/image/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/image/index.d.ts"
 }
diff --git a/components/lib/themes/lara/index.js b/components/lib/themes/lara/index.js
index 63a0fdd5f..11b0b7a8e 100644
--- a/components/lib/themes/lara/index.js
+++ b/components/lib/themes/lara/index.js
@@ -5,7 +5,6 @@ import badge from 'primevue/themes/lara/badge';
 import blockui from 'primevue/themes/lara/blockui';
 import breadcrumb from 'primevue/themes/lara/breadcrumb';
 import button from 'primevue/themes/lara/button';
-import buttongroup from 'primevue/themes/lara/buttongroup';
 import card from 'primevue/themes/lara/card';
 import carousel from 'primevue/themes/lara/carousel';
 import cascadeselect from 'primevue/themes/lara/cascadeselect';
@@ -34,7 +33,6 @@ import inplace from 'primevue/themes/lara/inplace';
 import inputchips from 'primevue/themes/lara/inputchips';
 import inputgroup from 'primevue/themes/lara/inputgroup';
 import inputnumber from 'primevue/themes/lara/inputnumber';
-import inputotp from 'primevue/themes/lara/inputotp';
 import inputtext from 'primevue/themes/lara/inputtext';
 import knob from 'primevue/themes/lara/knob';
 import listbox from 'primevue/themes/lara/listbox';
@@ -58,7 +56,6 @@ import radiobutton from 'primevue/themes/lara/radiobutton';
 import rating from 'primevue/themes/lara/rating';
 import ripple from 'primevue/themes/lara/ripple';
 import scrollpanel from 'primevue/themes/lara/scrollpanel';
-import scrolltop from 'primevue/themes/lara/scrolltop';
 import select from 'primevue/themes/lara/select';
 import selectbutton from 'primevue/themes/lara/selectbutton';
 import skeleton from 'primevue/themes/lara/skeleton';
@@ -470,7 +467,6 @@ export default {
         blockui,
         breadcrumb,
         button,
-        buttongroup,
         datepicker,
         card,
         carousel,
@@ -499,8 +495,6 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
-        inputotp,
-        toggleswitch,
         inputtext,
         knob,
         listbox,
@@ -523,7 +517,6 @@ export default {
         radiobutton,
         rating,
         scrollpanel,
-        scrolltop,
         select,
         selectbutton,
         skeleton,
@@ -542,6 +535,7 @@ export default {
         terminal,
         timeline,
         togglebutton,
+        toggleswitch,
         tree,
         treeselect,
         treetable,
diff --git a/components/lib/themes/lara/inlinemessage/index.d.ts b/components/lib/themes/lara/inlinemessage/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inlinemessage/package.json b/components/lib/themes/lara/inlinemessage/package.json
index f8e9d7ae0..906bd2d0e 100644
--- a/components/lib/themes/lara/inlinemessage/package.json
+++ b/components/lib/themes/lara/inlinemessage/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inlinemessage/index.d.ts"
 }
diff --git a/components/lib/themes/lara/inplace/index.d.ts b/components/lib/themes/lara/inplace/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inplace/package.json b/components/lib/themes/lara/inplace/package.json
index f8e9d7ae0..8b8571e34 100644
--- a/components/lib/themes/lara/inplace/package.json
+++ b/components/lib/themes/lara/inplace/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inplace/index.d.ts"
 }
diff --git a/components/lib/themes/lara/inputchips/index.d.ts b/components/lib/themes/lara/inputchips/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inputchips/package.json b/components/lib/themes/lara/inputchips/package.json
index f8e9d7ae0..133a88eb5 100644
--- a/components/lib/themes/lara/inputchips/package.json
+++ b/components/lib/themes/lara/inputchips/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputchips/index.d.ts"
 }
diff --git a/components/lib/themes/lara/inputgroup/index.d.ts b/components/lib/themes/lara/inputgroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inputgroup/package.json b/components/lib/themes/lara/inputgroup/package.json
index f8e9d7ae0..ffb59cf3c 100644
--- a/components/lib/themes/lara/inputgroup/package.json
+++ b/components/lib/themes/lara/inputgroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputgroup/index.d.ts"
 }
diff --git a/components/lib/themes/lara/inputnumber/index.d.ts b/components/lib/themes/lara/inputnumber/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inputnumber/package.json b/components/lib/themes/lara/inputnumber/package.json
index f8e9d7ae0..b53ac48a2 100644
--- a/components/lib/themes/lara/inputnumber/package.json
+++ b/components/lib/themes/lara/inputnumber/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputnumber/index.d.ts"
 }
diff --git a/components/lib/themes/lara/inputotp/index.d.ts b/components/lib/themes/lara/inputotp/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/inputotp/index.js b/components/lib/themes/lara/inputotp/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/lara/inputotp/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/lara/inputotp/package.json b/components/lib/themes/lara/inputotp/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/lara/inputotp/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/lara/inputtext/index.d.ts b/components/lib/themes/lara/inputtext/index.d.ts
deleted file mode 100644
index 36d8b6c08..000000000
--- a/components/lib/themes/lara/inputtext/index.d.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- *
- * InputText renders a text field to enter data.
- *
- * [Live Demo](https://www.primevue.org/inputtext/)
- *
- * @module lara/inputtext
- *
- */
-import { ColorSchemeDesignToken } from '..';
-
-export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
-    /**
-     * Used to pass tokens of the root section
-     */
-    root?: {
-        /**
-         * Background of an input field
-         *
-         * @designToken inputtext.background
-         */
-        background?: string;
-        /**
-         * Background of an input field when disabled
-         *
-         * @designToken inputtext.disabled.background
-         */
-        disabledBackground?: string;
-        /**
-         * Background of an input field when filled mode
-         *
-         * @designToken inputtext.filled.background
-         */
-        filledBackground?: string;
-        /**
-         * Background of an input field on the focus state of filled mode
-         *
-         * @designToken inputtext.filled.focus.background
-         */
-        filledFocusBackground?: string;
-        /**
-         * Border color of an input field
-         *
-         * @designToken inputtext.border.color
-         */
-        borderColor?: string;
-        /**
-         * Border color of an input field on the hover state
-         *
-         * @designToken inputtext.hover.border.color
-         */
-        hoverBorderColor?: string;
-        /**
-         * Border color of an input field on the focus state
-         *
-         * @designToken inputtext.focus.border.color
-         */
-        focusBorderColor?: string;
-        /**
-         * Border color of an input field when invalid
-         *
-         * @designToken inputtext.invalid.border.color
-         */
-        invalidBorderColor?: string;
-        /**
-         * Color of an input field
-         *
-         * @designToken inputtext.color
-         */
-        color?: string;
-        /**
-         * Color of an input field when disabled
-         *
-         * @designToken inputtext.disabled.color
-         */
-        disabledColor?: string;
-        /**
-         * Placeholder color of an input field
-         *
-         * @designToken inputtext.placeholder.color
-         */
-        placeholderColor?: string;
-        /**
-         * Shadow of an input field
-         *
-         * @designToken inputtext.shadow
-         */
-        shadow?: string;
-        /**
-         * Padding right and left of an input field
-         *
-         * @designToken inputtext.padding.x
-         */
-        paddingX?: string;
-        /**
-         * Padding top and bottom of an input field
-         *
-         * @designToken inputtext.padding.y
-         */
-        paddingY?: string;
-        /**
-         * Border radius of an input field
-         *
-         * @designToken inputtext.border.radius
-         */
-        borderRadius?: string;
-        /**
-         * Outline of an input field on the focus state
-         */
-        focusRing?: {
-            /**
-             * Outline width of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.width
-             */
-            width?: string;
-            /**
-             * Outline style of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.style
-             */
-            style?: string;
-            /**
-             * Outline color of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.color
-             */
-            color?: string;
-            /**
-             * Outline offset of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.offset
-             */
-            offset?: string;
-            /**
-             * Shadow of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.shadow
-             */
-            shadow?: string;
-        };
-    };
-}
diff --git a/components/lib/themes/lara/inputtext/package.json b/components/lib/themes/lara/inputtext/package.json
index f8e9d7ae0..3e4c4f245 100644
--- a/components/lib/themes/lara/inputtext/package.json
+++ b/components/lib/themes/lara/inputtext/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputtext/index.d.ts"
 }
diff --git a/components/lib/themes/lara/knob/index.d.ts b/components/lib/themes/lara/knob/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/knob/package.json b/components/lib/themes/lara/knob/package.json
index f8e9d7ae0..520ed43c6 100644
--- a/components/lib/themes/lara/knob/package.json
+++ b/components/lib/themes/lara/knob/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/knob/index.d.ts"
 }
diff --git a/components/lib/themes/lara/listbox/index.d.ts b/components/lib/themes/lara/listbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/listbox/package.json b/components/lib/themes/lara/listbox/package.json
index f8e9d7ae0..00b10c63c 100644
--- a/components/lib/themes/lara/listbox/package.json
+++ b/components/lib/themes/lara/listbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/listbox/index.d.ts"
 }
diff --git a/components/lib/themes/lara/megamenu/index.d.ts b/components/lib/themes/lara/megamenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/megamenu/package.json b/components/lib/themes/lara/megamenu/package.json
index f8e9d7ae0..2d1da711e 100644
--- a/components/lib/themes/lara/megamenu/package.json
+++ b/components/lib/themes/lara/megamenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/megamenu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/menu/index.d.ts b/components/lib/themes/lara/menu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/menu/package.json b/components/lib/themes/lara/menu/package.json
index f8e9d7ae0..cd2cc2495 100644
--- a/components/lib/themes/lara/menu/package.json
+++ b/components/lib/themes/lara/menu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/menubar/index.d.ts b/components/lib/themes/lara/menubar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/menubar/package.json b/components/lib/themes/lara/menubar/package.json
index f8e9d7ae0..f5b439f8b 100644
--- a/components/lib/themes/lara/menubar/package.json
+++ b/components/lib/themes/lara/menubar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menubar/index.d.ts"
 }
diff --git a/components/lib/themes/lara/message/index.d.ts b/components/lib/themes/lara/message/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/message/package.json b/components/lib/themes/lara/message/package.json
index f8e9d7ae0..ffeaf4e56 100644
--- a/components/lib/themes/lara/message/package.json
+++ b/components/lib/themes/lara/message/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/message/index.d.ts"
 }
diff --git a/components/lib/themes/lara/metergroup/index.d.ts b/components/lib/themes/lara/metergroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/metergroup/package.json b/components/lib/themes/lara/metergroup/package.json
index f8e9d7ae0..53ee817aa 100644
--- a/components/lib/themes/lara/metergroup/package.json
+++ b/components/lib/themes/lara/metergroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/metergroup/index.d.ts"
 }
diff --git a/components/lib/themes/lara/multiselect/index.d.ts b/components/lib/themes/lara/multiselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/multiselect/package.json b/components/lib/themes/lara/multiselect/package.json
index f8e9d7ae0..b0a54db70 100644
--- a/components/lib/themes/lara/multiselect/package.json
+++ b/components/lib/themes/lara/multiselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/multiselect/index.d.ts"
 }
diff --git a/components/lib/themes/lara/orderlist/index.d.ts b/components/lib/themes/lara/orderlist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/orderlist/package.json b/components/lib/themes/lara/orderlist/package.json
index f8e9d7ae0..25dbeb223 100644
--- a/components/lib/themes/lara/orderlist/package.json
+++ b/components/lib/themes/lara/orderlist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/orderlist/index.d.ts"
 }
diff --git a/components/lib/themes/lara/organizationchart/index.d.ts b/components/lib/themes/lara/organizationchart/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/organizationchart/package.json b/components/lib/themes/lara/organizationchart/package.json
index f8e9d7ae0..fc751ad11 100644
--- a/components/lib/themes/lara/organizationchart/package.json
+++ b/components/lib/themes/lara/organizationchart/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/organizationchart/index.d.ts"
 }
diff --git a/components/lib/themes/lara/paginator/index.d.ts b/components/lib/themes/lara/paginator/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/paginator/package.json b/components/lib/themes/lara/paginator/package.json
index f8e9d7ae0..674eca4c9 100644
--- a/components/lib/themes/lara/paginator/package.json
+++ b/components/lib/themes/lara/paginator/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/paginator/index.d.ts"
 }
diff --git a/components/lib/themes/lara/panel/index.d.ts b/components/lib/themes/lara/panel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/panel/package.json b/components/lib/themes/lara/panel/package.json
index f8e9d7ae0..97beb609f 100644
--- a/components/lib/themes/lara/panel/package.json
+++ b/components/lib/themes/lara/panel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panel/index.d.ts"
 }
diff --git a/components/lib/themes/lara/panelmenu/index.d.ts b/components/lib/themes/lara/panelmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/panelmenu/package.json b/components/lib/themes/lara/panelmenu/package.json
index f8e9d7ae0..47625e6f9 100644
--- a/components/lib/themes/lara/panelmenu/package.json
+++ b/components/lib/themes/lara/panelmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panelmenu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/password/index.d.ts b/components/lib/themes/lara/password/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/password/package.json b/components/lib/themes/lara/password/package.json
index f8e9d7ae0..ddaf3e83d 100644
--- a/components/lib/themes/lara/password/package.json
+++ b/components/lib/themes/lara/password/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/password/index.d.ts"
 }
diff --git a/components/lib/themes/lara/picklist/index.d.ts b/components/lib/themes/lara/picklist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/picklist/package.json b/components/lib/themes/lara/picklist/package.json
index f8e9d7ae0..f9f633318 100644
--- a/components/lib/themes/lara/picklist/package.json
+++ b/components/lib/themes/lara/picklist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/picklist/index.d.ts"
 }
diff --git a/components/lib/themes/lara/popover/index.d.ts b/components/lib/themes/lara/popover/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/popover/package.json b/components/lib/themes/lara/popover/package.json
index f8e9d7ae0..a0fff63f3 100644
--- a/components/lib/themes/lara/popover/package.json
+++ b/components/lib/themes/lara/popover/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/popover/index.d.ts"
 }
diff --git a/components/lib/themes/lara/progressbar/index.d.ts b/components/lib/themes/lara/progressbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/progressbar/package.json b/components/lib/themes/lara/progressbar/package.json
index f8e9d7ae0..9261ad9cb 100644
--- a/components/lib/themes/lara/progressbar/package.json
+++ b/components/lib/themes/lara/progressbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressbar/index.d.ts"
 }
diff --git a/components/lib/themes/lara/progressspinner/index.d.ts b/components/lib/themes/lara/progressspinner/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/progressspinner/package.json b/components/lib/themes/lara/progressspinner/package.json
index f8e9d7ae0..c9eec02e7 100644
--- a/components/lib/themes/lara/progressspinner/package.json
+++ b/components/lib/themes/lara/progressspinner/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressspinner/index.d.ts"
 }
diff --git a/components/lib/themes/lara/radiobutton/index.d.ts b/components/lib/themes/lara/radiobutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/radiobutton/package.json b/components/lib/themes/lara/radiobutton/package.json
index f8e9d7ae0..e492380b8 100644
--- a/components/lib/themes/lara/radiobutton/package.json
+++ b/components/lib/themes/lara/radiobutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/radiobutton/index.d.ts"
 }
diff --git a/components/lib/themes/lara/rating/index.d.ts b/components/lib/themes/lara/rating/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/rating/package.json b/components/lib/themes/lara/rating/package.json
index f8e9d7ae0..25cb35938 100644
--- a/components/lib/themes/lara/rating/package.json
+++ b/components/lib/themes/lara/rating/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/rating/index.d.ts"
 }
diff --git a/components/lib/themes/lara/ripple/index.d.ts b/components/lib/themes/lara/ripple/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/ripple/package.json b/components/lib/themes/lara/ripple/package.json
index f8e9d7ae0..1cc5709da 100644
--- a/components/lib/themes/lara/ripple/package.json
+++ b/components/lib/themes/lara/ripple/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/ripple/index.d.ts"
 }
diff --git a/components/lib/themes/lara/scrollpanel/index.d.ts b/components/lib/themes/lara/scrollpanel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/scrollpanel/package.json b/components/lib/themes/lara/scrollpanel/package.json
index f8e9d7ae0..023f162db 100644
--- a/components/lib/themes/lara/scrollpanel/package.json
+++ b/components/lib/themes/lara/scrollpanel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/scrollpanel/index.d.ts"
 }
diff --git a/components/lib/themes/lara/scrolltop/index.d.ts b/components/lib/themes/lara/scrolltop/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/scrolltop/index.js b/components/lib/themes/lara/scrolltop/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/lara/scrolltop/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/lara/scrolltop/package.json b/components/lib/themes/lara/scrolltop/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/lara/scrolltop/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/lara/select/index.d.ts b/components/lib/themes/lara/select/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/select/package.json b/components/lib/themes/lara/select/package.json
index f8e9d7ae0..6cb8e9469 100644
--- a/components/lib/themes/lara/select/package.json
+++ b/components/lib/themes/lara/select/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/select/index.d.ts"
 }
diff --git a/components/lib/themes/lara/selectbutton/index.d.ts b/components/lib/themes/lara/selectbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/selectbutton/package.json b/components/lib/themes/lara/selectbutton/package.json
index f8e9d7ae0..1176632b4 100644
--- a/components/lib/themes/lara/selectbutton/package.json
+++ b/components/lib/themes/lara/selectbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/selectbutton/index.d.ts"
 }
diff --git a/components/lib/themes/lara/skeleton/index.d.ts b/components/lib/themes/lara/skeleton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/skeleton/package.json b/components/lib/themes/lara/skeleton/package.json
index f8e9d7ae0..5f416a21d 100644
--- a/components/lib/themes/lara/skeleton/package.json
+++ b/components/lib/themes/lara/skeleton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/skeleton/index.d.ts"
 }
diff --git a/components/lib/themes/lara/slider/index.d.ts b/components/lib/themes/lara/slider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/slider/package.json b/components/lib/themes/lara/slider/package.json
index f8e9d7ae0..856cab847 100644
--- a/components/lib/themes/lara/slider/package.json
+++ b/components/lib/themes/lara/slider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/slider/index.d.ts"
 }
diff --git a/components/lib/themes/lara/speeddial/index.d.ts b/components/lib/themes/lara/speeddial/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/speeddial/package.json b/components/lib/themes/lara/speeddial/package.json
index f8e9d7ae0..2ceb0e1de 100644
--- a/components/lib/themes/lara/speeddial/package.json
+++ b/components/lib/themes/lara/speeddial/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/speeddial/index.d.ts"
 }
diff --git a/components/lib/themes/lara/splitbutton/index.d.ts b/components/lib/themes/lara/splitbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/splitbutton/package.json b/components/lib/themes/lara/splitbutton/package.json
index f8e9d7ae0..dc92a62a7 100644
--- a/components/lib/themes/lara/splitbutton/package.json
+++ b/components/lib/themes/lara/splitbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitbutton/index.d.ts"
 }
diff --git a/components/lib/themes/lara/splitter/index.d.ts b/components/lib/themes/lara/splitter/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/splitter/package.json b/components/lib/themes/lara/splitter/package.json
index f8e9d7ae0..df7d1447b 100644
--- a/components/lib/themes/lara/splitter/package.json
+++ b/components/lib/themes/lara/splitter/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitter/index.d.ts"
 }
diff --git a/components/lib/themes/lara/stepper/index.d.ts b/components/lib/themes/lara/stepper/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/stepper/package.json b/components/lib/themes/lara/stepper/package.json
index f8e9d7ae0..3d7d044d2 100644
--- a/components/lib/themes/lara/stepper/package.json
+++ b/components/lib/themes/lara/stepper/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/stepper/index.d.ts"
 }
diff --git a/components/lib/themes/lara/steps/index.d.ts b/components/lib/themes/lara/steps/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/steps/package.json b/components/lib/themes/lara/steps/package.json
index f8e9d7ae0..535fe8c83 100644
--- a/components/lib/themes/lara/steps/package.json
+++ b/components/lib/themes/lara/steps/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/steps/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tabmenu/index.d.ts b/components/lib/themes/lara/tabmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tabmenu/package.json b/components/lib/themes/lara/tabmenu/package.json
index f8e9d7ae0..999693e72 100644
--- a/components/lib/themes/lara/tabmenu/package.json
+++ b/components/lib/themes/lara/tabmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabmenu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tabs/index.d.ts b/components/lib/themes/lara/tabs/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tabs/package.json b/components/lib/themes/lara/tabs/package.json
index f8e9d7ae0..a52204ab2 100644
--- a/components/lib/themes/lara/tabs/package.json
+++ b/components/lib/themes/lara/tabs/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabs/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tabview/index.d.ts b/components/lib/themes/lara/tabview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tabview/package.json b/components/lib/themes/lara/tabview/package.json
index f8e9d7ae0..231e695a6 100644
--- a/components/lib/themes/lara/tabview/package.json
+++ b/components/lib/themes/lara/tabview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabview/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tag/index.d.ts b/components/lib/themes/lara/tag/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tag/package.json b/components/lib/themes/lara/tag/package.json
index f8e9d7ae0..893ffff1d 100644
--- a/components/lib/themes/lara/tag/package.json
+++ b/components/lib/themes/lara/tag/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tag/index.d.ts"
 }
diff --git a/components/lib/themes/lara/terminal/index.d.ts b/components/lib/themes/lara/terminal/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/terminal/package.json b/components/lib/themes/lara/terminal/package.json
index f8e9d7ae0..a97962c89 100644
--- a/components/lib/themes/lara/terminal/package.json
+++ b/components/lib/themes/lara/terminal/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/terminal/index.d.ts"
 }
diff --git a/components/lib/themes/lara/textarea/index.d.ts b/components/lib/themes/lara/textarea/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/textarea/package.json b/components/lib/themes/lara/textarea/package.json
index f8e9d7ae0..f416b3057 100644
--- a/components/lib/themes/lara/textarea/package.json
+++ b/components/lib/themes/lara/textarea/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/textarea/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tieredmenu/index.d.ts b/components/lib/themes/lara/tieredmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tieredmenu/package.json b/components/lib/themes/lara/tieredmenu/package.json
index f8e9d7ae0..565b40b41 100644
--- a/components/lib/themes/lara/tieredmenu/package.json
+++ b/components/lib/themes/lara/tieredmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tieredmenu/index.d.ts"
 }
diff --git a/components/lib/themes/lara/timeline/index.d.ts b/components/lib/themes/lara/timeline/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/timeline/package.json b/components/lib/themes/lara/timeline/package.json
index f8e9d7ae0..90dd4ba83 100644
--- a/components/lib/themes/lara/timeline/package.json
+++ b/components/lib/themes/lara/timeline/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/timeline/index.d.ts"
 }
diff --git a/components/lib/themes/lara/toast/index.d.ts b/components/lib/themes/lara/toast/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/toast/package.json b/components/lib/themes/lara/toast/package.json
index f8e9d7ae0..992756651 100644
--- a/components/lib/themes/lara/toast/package.json
+++ b/components/lib/themes/lara/toast/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toast/index.d.ts"
 }
diff --git a/components/lib/themes/lara/togglebutton/index.d.ts b/components/lib/themes/lara/togglebutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/togglebutton/package.json b/components/lib/themes/lara/togglebutton/package.json
index f8e9d7ae0..4e6f25d3d 100644
--- a/components/lib/themes/lara/togglebutton/package.json
+++ b/components/lib/themes/lara/togglebutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/togglebutton/index.d.ts"
 }
diff --git a/components/lib/themes/lara/toggleswitch/index.d.ts b/components/lib/themes/lara/toggleswitch/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/toggleswitch/package.json b/components/lib/themes/lara/toggleswitch/package.json
index f8e9d7ae0..f01a5031b 100644
--- a/components/lib/themes/lara/toggleswitch/package.json
+++ b/components/lib/themes/lara/toggleswitch/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toggleswitch/index.d.ts"
 }
diff --git a/components/lib/themes/lara/toolbar/index.d.ts b/components/lib/themes/lara/toolbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/toolbar/package.json b/components/lib/themes/lara/toolbar/package.json
index f8e9d7ae0..6b2e99188 100644
--- a/components/lib/themes/lara/toolbar/package.json
+++ b/components/lib/themes/lara/toolbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toolbar/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tooltip/index.d.ts b/components/lib/themes/lara/tooltip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tooltip/package.json b/components/lib/themes/lara/tooltip/package.json
index f8e9d7ae0..2cc429459 100644
--- a/components/lib/themes/lara/tooltip/package.json
+++ b/components/lib/themes/lara/tooltip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tooltip/index.d.ts"
 }
diff --git a/components/lib/themes/lara/tree/index.d.ts b/components/lib/themes/lara/tree/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/tree/package.json b/components/lib/themes/lara/tree/package.json
index f8e9d7ae0..ea54f5627 100644
--- a/components/lib/themes/lara/tree/package.json
+++ b/components/lib/themes/lara/tree/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tree/index.d.ts"
 }
diff --git a/components/lib/themes/lara/treeselect/index.d.ts b/components/lib/themes/lara/treeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/treeselect/package.json b/components/lib/themes/lara/treeselect/package.json
index f8e9d7ae0..360a1bebc 100644
--- a/components/lib/themes/lara/treeselect/package.json
+++ b/components/lib/themes/lara/treeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treeselect/index.d.ts"
 }
diff --git a/components/lib/themes/lara/treetable/index.d.ts b/components/lib/themes/lara/treetable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/lara/treetable/package.json b/components/lib/themes/lara/treetable/package.json
index f8e9d7ae0..d50a95454 100644
--- a/components/lib/themes/lara/treetable/package.json
+++ b/components/lib/themes/lara/treetable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treetable/index.d.ts"
 }
diff --git a/components/lib/themes/nora/accordion/index.d.ts b/components/lib/themes/nora/accordion/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/accordion/package.json b/components/lib/themes/nora/accordion/package.json
index f8e9d7ae0..0b3278e57 100644
--- a/components/lib/themes/nora/accordion/package.json
+++ b/components/lib/themes/nora/accordion/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/accordion/index.d.ts"
 }
diff --git a/components/lib/themes/nora/autocomplete/index.d.ts b/components/lib/themes/nora/autocomplete/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/autocomplete/package.json b/components/lib/themes/nora/autocomplete/package.json
index f8e9d7ae0..bd8ba462a 100644
--- a/components/lib/themes/nora/autocomplete/package.json
+++ b/components/lib/themes/nora/autocomplete/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/autocomplete/index.d.ts"
 }
diff --git a/components/lib/themes/nora/avatar/index.d.ts b/components/lib/themes/nora/avatar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/avatar/package.json b/components/lib/themes/nora/avatar/package.json
index f8e9d7ae0..ad0aa37d3 100644
--- a/components/lib/themes/nora/avatar/package.json
+++ b/components/lib/themes/nora/avatar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/avatar/index.d.ts"
 }
diff --git a/components/lib/themes/nora/badge/index.d.ts b/components/lib/themes/nora/badge/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/badge/package.json b/components/lib/themes/nora/badge/package.json
index f8e9d7ae0..e182126fe 100644
--- a/components/lib/themes/nora/badge/package.json
+++ b/components/lib/themes/nora/badge/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/badge/index.d.ts"
 }
diff --git a/components/lib/themes/nora/blockui/index.d.ts b/components/lib/themes/nora/blockui/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/blockui/package.json b/components/lib/themes/nora/blockui/package.json
index f8e9d7ae0..caaa50c7a 100644
--- a/components/lib/themes/nora/blockui/package.json
+++ b/components/lib/themes/nora/blockui/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/blockui/index.d.ts"
 }
diff --git a/components/lib/themes/nora/breadcrumb/index.d.ts b/components/lib/themes/nora/breadcrumb/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/breadcrumb/package.json b/components/lib/themes/nora/breadcrumb/package.json
index f8e9d7ae0..f8329aeed 100644
--- a/components/lib/themes/nora/breadcrumb/package.json
+++ b/components/lib/themes/nora/breadcrumb/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/breadcrumb/index.d.ts"
 }
diff --git a/components/lib/themes/nora/button/index.d.ts b/components/lib/themes/nora/button/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/button/package.json b/components/lib/themes/nora/button/package.json
index f8e9d7ae0..f794dbfb6 100644
--- a/components/lib/themes/nora/button/package.json
+++ b/components/lib/themes/nora/button/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/button/index.d.ts"
 }
diff --git a/components/lib/themes/nora/buttongroup/index.d.ts b/components/lib/themes/nora/buttongroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/buttongroup/index.js b/components/lib/themes/nora/buttongroup/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/nora/buttongroup/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/nora/buttongroup/package.json b/components/lib/themes/nora/buttongroup/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/nora/buttongroup/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/nora/card/index.d.ts b/components/lib/themes/nora/card/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/card/package.json b/components/lib/themes/nora/card/package.json
index f8e9d7ae0..fb627c8f0 100644
--- a/components/lib/themes/nora/card/package.json
+++ b/components/lib/themes/nora/card/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/card/index.d.ts"
 }
diff --git a/components/lib/themes/nora/carousel/index.d.ts b/components/lib/themes/nora/carousel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/carousel/package.json b/components/lib/themes/nora/carousel/package.json
index f8e9d7ae0..df4aa53e9 100644
--- a/components/lib/themes/nora/carousel/package.json
+++ b/components/lib/themes/nora/carousel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/carousel/index.d.ts"
 }
diff --git a/components/lib/themes/nora/cascadeselect/index.d.ts b/components/lib/themes/nora/cascadeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/cascadeselect/package.json b/components/lib/themes/nora/cascadeselect/package.json
index f8e9d7ae0..1a9d70202 100644
--- a/components/lib/themes/nora/cascadeselect/package.json
+++ b/components/lib/themes/nora/cascadeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/cascadeselect/index.d.ts"
 }
diff --git a/components/lib/themes/nora/checkbox/index.d.ts b/components/lib/themes/nora/checkbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/checkbox/package.json b/components/lib/themes/nora/checkbox/package.json
index f8e9d7ae0..2a48a7a40 100644
--- a/components/lib/themes/nora/checkbox/package.json
+++ b/components/lib/themes/nora/checkbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/checkbox/index.d.ts"
 }
diff --git a/components/lib/themes/nora/chip/index.d.ts b/components/lib/themes/nora/chip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/chip/package.json b/components/lib/themes/nora/chip/package.json
index f8e9d7ae0..e769c72ed 100644
--- a/components/lib/themes/nora/chip/package.json
+++ b/components/lib/themes/nora/chip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/chip/index.d.ts"
 }
diff --git a/components/lib/themes/nora/colorpicker/index.d.ts b/components/lib/themes/nora/colorpicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/colorpicker/package.json b/components/lib/themes/nora/colorpicker/package.json
index f8e9d7ae0..ac6a5768b 100644
--- a/components/lib/themes/nora/colorpicker/package.json
+++ b/components/lib/themes/nora/colorpicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/colorpicker/index.d.ts"
 }
diff --git a/components/lib/themes/nora/confirmdialog/index.d.ts b/components/lib/themes/nora/confirmdialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/confirmdialog/package.json b/components/lib/themes/nora/confirmdialog/package.json
index f8e9d7ae0..217fbab91 100644
--- a/components/lib/themes/nora/confirmdialog/package.json
+++ b/components/lib/themes/nora/confirmdialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmdialog/index.d.ts"
 }
diff --git a/components/lib/themes/nora/confirmpopup/index.d.ts b/components/lib/themes/nora/confirmpopup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/confirmpopup/package.json b/components/lib/themes/nora/confirmpopup/package.json
index f8e9d7ae0..4600276d6 100644
--- a/components/lib/themes/nora/confirmpopup/package.json
+++ b/components/lib/themes/nora/confirmpopup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/confirmpopup/index.d.ts"
 }
diff --git a/components/lib/themes/nora/contextmenu/index.d.ts b/components/lib/themes/nora/contextmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/contextmenu/package.json b/components/lib/themes/nora/contextmenu/package.json
index f8e9d7ae0..6ab0d90f2 100644
--- a/components/lib/themes/nora/contextmenu/package.json
+++ b/components/lib/themes/nora/contextmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/contextmenu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/datatable/index.d.ts b/components/lib/themes/nora/datatable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/datatable/package.json b/components/lib/themes/nora/datatable/package.json
index f8e9d7ae0..b9f281a33 100644
--- a/components/lib/themes/nora/datatable/package.json
+++ b/components/lib/themes/nora/datatable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datatable/index.d.ts"
 }
diff --git a/components/lib/themes/nora/dataview/index.d.ts b/components/lib/themes/nora/dataview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/dataview/package.json b/components/lib/themes/nora/dataview/package.json
index f8e9d7ae0..db6d2b066 100644
--- a/components/lib/themes/nora/dataview/package.json
+++ b/components/lib/themes/nora/dataview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dataview/index.d.ts"
 }
diff --git a/components/lib/themes/nora/datepicker/index.d.ts b/components/lib/themes/nora/datepicker/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/datepicker/package.json b/components/lib/themes/nora/datepicker/package.json
index f8e9d7ae0..e6c94638d 100644
--- a/components/lib/themes/nora/datepicker/package.json
+++ b/components/lib/themes/nora/datepicker/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/datepicker/index.d.ts"
 }
diff --git a/components/lib/themes/nora/dialog/index.d.ts b/components/lib/themes/nora/dialog/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/dialog/package.json b/components/lib/themes/nora/dialog/package.json
index f8e9d7ae0..827f0fcc0 100644
--- a/components/lib/themes/nora/dialog/package.json
+++ b/components/lib/themes/nora/dialog/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dialog/index.d.ts"
 }
diff --git a/components/lib/themes/nora/divider/index.d.ts b/components/lib/themes/nora/divider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/divider/package.json b/components/lib/themes/nora/divider/package.json
index f8e9d7ae0..a169ff92e 100644
--- a/components/lib/themes/nora/divider/package.json
+++ b/components/lib/themes/nora/divider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/divider/index.d.ts"
 }
diff --git a/components/lib/themes/nora/dock/index.d.ts b/components/lib/themes/nora/dock/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/dock/package.json b/components/lib/themes/nora/dock/package.json
index f8e9d7ae0..e8b915e9d 100644
--- a/components/lib/themes/nora/dock/package.json
+++ b/components/lib/themes/nora/dock/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/dock/index.d.ts"
 }
diff --git a/components/lib/themes/nora/drawer/index.d.ts b/components/lib/themes/nora/drawer/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/drawer/package.json b/components/lib/themes/nora/drawer/package.json
index f8e9d7ae0..8ec307182 100644
--- a/components/lib/themes/nora/drawer/package.json
+++ b/components/lib/themes/nora/drawer/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/drawer/index.d.ts"
 }
diff --git a/components/lib/themes/nora/editor/index.d.ts b/components/lib/themes/nora/editor/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/editor/package.json b/components/lib/themes/nora/editor/package.json
index f8e9d7ae0..2731b93e7 100644
--- a/components/lib/themes/nora/editor/package.json
+++ b/components/lib/themes/nora/editor/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/editor/index.d.ts"
 }
diff --git a/components/lib/themes/nora/fieldset/index.d.ts b/components/lib/themes/nora/fieldset/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/fieldset/package.json b/components/lib/themes/nora/fieldset/package.json
index f8e9d7ae0..b1c2a2815 100644
--- a/components/lib/themes/nora/fieldset/package.json
+++ b/components/lib/themes/nora/fieldset/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fieldset/index.d.ts"
 }
diff --git a/components/lib/themes/nora/fileupload/index.d.ts b/components/lib/themes/nora/fileupload/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/fileupload/package.json b/components/lib/themes/nora/fileupload/package.json
index f8e9d7ae0..8bbe55ff2 100644
--- a/components/lib/themes/nora/fileupload/package.json
+++ b/components/lib/themes/nora/fileupload/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/fileupload/index.d.ts"
 }
diff --git a/components/lib/themes/nora/floatlabel/index.d.ts b/components/lib/themes/nora/floatlabel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/floatlabel/package.json b/components/lib/themes/nora/floatlabel/package.json
index f8e9d7ae0..18ef918de 100644
--- a/components/lib/themes/nora/floatlabel/package.json
+++ b/components/lib/themes/nora/floatlabel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/floatlabel/index.d.ts"
 }
diff --git a/components/lib/themes/nora/galleria/index.d.ts b/components/lib/themes/nora/galleria/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/galleria/package.json b/components/lib/themes/nora/galleria/package.json
index f8e9d7ae0..a55bf26c5 100644
--- a/components/lib/themes/nora/galleria/package.json
+++ b/components/lib/themes/nora/galleria/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/galleria/index.d.ts"
 }
diff --git a/components/lib/themes/nora/iconfield/index.d.ts b/components/lib/themes/nora/iconfield/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/iconfield/package.json b/components/lib/themes/nora/iconfield/package.json
index f8e9d7ae0..cc32f4246 100644
--- a/components/lib/themes/nora/iconfield/package.json
+++ b/components/lib/themes/nora/iconfield/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/iconfield/index.d.ts"
 }
diff --git a/components/lib/themes/nora/image/index.d.ts b/components/lib/themes/nora/image/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/image/package.json b/components/lib/themes/nora/image/package.json
index f8e9d7ae0..2ed6d77f8 100644
--- a/components/lib/themes/nora/image/package.json
+++ b/components/lib/themes/nora/image/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/image/index.d.ts"
 }
diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js
index dfd48e7ac..d742d46a4 100644
--- a/components/lib/themes/nora/index.js
+++ b/components/lib/themes/nora/index.js
@@ -5,7 +5,6 @@ import badge from 'primevue/themes/nora/badge';
 import blockui from 'primevue/themes/nora/blockui';
 import breadcrumb from 'primevue/themes/nora/breadcrumb';
 import button from 'primevue/themes/nora/button';
-import buttongroup from 'primevue/themes/nora/buttongroup';
 import card from 'primevue/themes/nora/card';
 import carousel from 'primevue/themes/nora/carousel';
 import cascadeselect from 'primevue/themes/nora/cascadeselect';
@@ -34,7 +33,6 @@ import inplace from 'primevue/themes/nora/inplace';
 import inputchips from 'primevue/themes/nora/inputchips';
 import inputgroup from 'primevue/themes/nora/inputgroup';
 import inputnumber from 'primevue/themes/nora/inputnumber';
-import inputotp from 'primevue/themes/nora/inputotp';
 import inputtext from 'primevue/themes/nora/inputtext';
 import knob from 'primevue/themes/nora/knob';
 import listbox from 'primevue/themes/nora/listbox';
@@ -58,7 +56,6 @@ import radiobutton from 'primevue/themes/nora/radiobutton';
 import rating from 'primevue/themes/nora/rating';
 import ripple from 'primevue/themes/nora/ripple';
 import scrollpanel from 'primevue/themes/nora/scrollpanel';
-import scrolltop from 'primevue/themes/nora/scrolltop';
 import select from 'primevue/themes/nora/select';
 import selectbutton from 'primevue/themes/nora/selectbutton';
 import skeleton from 'primevue/themes/nora/skeleton';
@@ -464,7 +461,6 @@ export default {
         blockui,
         breadcrumb,
         button,
-        buttongroup,
         datepicker,
         card,
         carousel,
@@ -493,8 +489,6 @@ export default {
         inputchips,
         inputgroup,
         inputnumber,
-        inputotp,
-        toggleswitch,
         inputtext,
         knob,
         listbox,
@@ -517,7 +511,6 @@ export default {
         radiobutton,
         rating,
         scrollpanel,
-        scrolltop,
         select,
         selectbutton,
         skeleton,
@@ -536,6 +529,7 @@ export default {
         terminal,
         timeline,
         togglebutton,
+        toggleswitch,
         tree,
         treeselect,
         treetable,
diff --git a/components/lib/themes/nora/inlinemessage/index.d.ts b/components/lib/themes/nora/inlinemessage/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inlinemessage/package.json b/components/lib/themes/nora/inlinemessage/package.json
index f8e9d7ae0..906bd2d0e 100644
--- a/components/lib/themes/nora/inlinemessage/package.json
+++ b/components/lib/themes/nora/inlinemessage/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inlinemessage/index.d.ts"
 }
diff --git a/components/lib/themes/nora/inplace/index.d.ts b/components/lib/themes/nora/inplace/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inplace/package.json b/components/lib/themes/nora/inplace/package.json
index f8e9d7ae0..8b8571e34 100644
--- a/components/lib/themes/nora/inplace/package.json
+++ b/components/lib/themes/nora/inplace/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inplace/index.d.ts"
 }
diff --git a/components/lib/themes/nora/inputchips/index.d.ts b/components/lib/themes/nora/inputchips/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inputchips/package.json b/components/lib/themes/nora/inputchips/package.json
index f8e9d7ae0..133a88eb5 100644
--- a/components/lib/themes/nora/inputchips/package.json
+++ b/components/lib/themes/nora/inputchips/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputchips/index.d.ts"
 }
diff --git a/components/lib/themes/nora/inputgroup/index.d.ts b/components/lib/themes/nora/inputgroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inputgroup/package.json b/components/lib/themes/nora/inputgroup/package.json
index f8e9d7ae0..ffb59cf3c 100644
--- a/components/lib/themes/nora/inputgroup/package.json
+++ b/components/lib/themes/nora/inputgroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputgroup/index.d.ts"
 }
diff --git a/components/lib/themes/nora/inputnumber/index.d.ts b/components/lib/themes/nora/inputnumber/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inputnumber/package.json b/components/lib/themes/nora/inputnumber/package.json
index f8e9d7ae0..b53ac48a2 100644
--- a/components/lib/themes/nora/inputnumber/package.json
+++ b/components/lib/themes/nora/inputnumber/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputnumber/index.d.ts"
 }
diff --git a/components/lib/themes/nora/inputotp/index.d.ts b/components/lib/themes/nora/inputotp/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/inputotp/index.js b/components/lib/themes/nora/inputotp/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/nora/inputotp/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/nora/inputotp/package.json b/components/lib/themes/nora/inputotp/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/nora/inputotp/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/nora/inputtext/index.d.ts b/components/lib/themes/nora/inputtext/index.d.ts
deleted file mode 100644
index 0421c9dc1..000000000
--- a/components/lib/themes/nora/inputtext/index.d.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- *
- * InputText renders a text field to enter data.
- *
- * [Live Demo](https://www.primevue.org/inputtext/)
- *
- * @module nora/inputtext
- *
- */
-import { ColorSchemeDesignToken } from '..';
-
-export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
-    /**
-     * Used to pass tokens of the root section
-     */
-    root?: {
-        /**
-         * Background of an input field
-         *
-         * @designToken inputtext.background
-         */
-        background?: string;
-        /**
-         * Background of an input field when disabled
-         *
-         * @designToken inputtext.disabled.background
-         */
-        disabledBackground?: string;
-        /**
-         * Background of an input field when filled mode
-         *
-         * @designToken inputtext.filled.background
-         */
-        filledBackground?: string;
-        /**
-         * Background of an input field on the focus state of filled mode
-         *
-         * @designToken inputtext.filled.focus.background
-         */
-        filledFocusBackground?: string;
-        /**
-         * Border color of an input field
-         *
-         * @designToken inputtext.border.color
-         */
-        borderColor?: string;
-        /**
-         * Border color of an input field on the hover state
-         *
-         * @designToken inputtext.hover.border.color
-         */
-        hoverBorderColor?: string;
-        /**
-         * Border color of an input field on the focus state
-         *
-         * @designToken inputtext.focus.border.color
-         */
-        focusBorderColor?: string;
-        /**
-         * Border color of an input field when invalid
-         *
-         * @designToken inputtext.invalid.border.color
-         */
-        invalidBorderColor?: string;
-        /**
-         * Color of an input field
-         *
-         * @designToken inputtext.color
-         */
-        color?: string;
-        /**
-         * Color of an input field when disabled
-         *
-         * @designToken inputtext.disabled.color
-         */
-        disabledColor?: string;
-        /**
-         * Placeholder color of an input field
-         *
-         * @designToken inputtext.placeholder.color
-         */
-        placeholderColor?: string;
-        /**
-         * Shadow of an input field
-         *
-         * @designToken inputtext.shadow
-         */
-        shadow?: string;
-        /**
-         * Padding right and left of an input field
-         *
-         * @designToken inputtext.padding.x
-         */
-        paddingX?: string;
-        /**
-         * Padding top and bottom of an input field
-         *
-         * @designToken inputtext.padding.y
-         */
-        paddingY?: string;
-        /**
-         * Border radius of an input field
-         *
-         * @designToken inputtext.border.radius
-         */
-        borderRadius?: string;
-        /**
-         * Outline of an input field on the focus state
-         */
-        focusRing?: {
-            /**
-             * Outline width of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.width
-             */
-            width?: string;
-            /**
-             * Outline style of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.style
-             */
-            style?: string;
-            /**
-             * Outline color of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.color
-             */
-            color?: string;
-            /**
-             * Outline offset of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.offset
-             */
-            offset?: string;
-            /**
-             * Shadow of an input field on the focus state
-             *
-             * @designToken inputtext.focus.ring.shadow
-             */
-            shadow?: string;
-        };
-    };
-}
diff --git a/components/lib/themes/nora/inputtext/package.json b/components/lib/themes/nora/inputtext/package.json
index f8e9d7ae0..3e4c4f245 100644
--- a/components/lib/themes/nora/inputtext/package.json
+++ b/components/lib/themes/nora/inputtext/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/inputtext/index.d.ts"
 }
diff --git a/components/lib/themes/nora/knob/index.d.ts b/components/lib/themes/nora/knob/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/knob/package.json b/components/lib/themes/nora/knob/package.json
index f8e9d7ae0..520ed43c6 100644
--- a/components/lib/themes/nora/knob/package.json
+++ b/components/lib/themes/nora/knob/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/knob/index.d.ts"
 }
diff --git a/components/lib/themes/nora/listbox/index.d.ts b/components/lib/themes/nora/listbox/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/listbox/package.json b/components/lib/themes/nora/listbox/package.json
index f8e9d7ae0..00b10c63c 100644
--- a/components/lib/themes/nora/listbox/package.json
+++ b/components/lib/themes/nora/listbox/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/listbox/index.d.ts"
 }
diff --git a/components/lib/themes/nora/megamenu/index.d.ts b/components/lib/themes/nora/megamenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/megamenu/package.json b/components/lib/themes/nora/megamenu/package.json
index f8e9d7ae0..2d1da711e 100644
--- a/components/lib/themes/nora/megamenu/package.json
+++ b/components/lib/themes/nora/megamenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/megamenu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/menu/index.d.ts b/components/lib/themes/nora/menu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/menu/package.json b/components/lib/themes/nora/menu/package.json
index f8e9d7ae0..cd2cc2495 100644
--- a/components/lib/themes/nora/menu/package.json
+++ b/components/lib/themes/nora/menu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/menubar/index.d.ts b/components/lib/themes/nora/menubar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/menubar/package.json b/components/lib/themes/nora/menubar/package.json
index f8e9d7ae0..f5b439f8b 100644
--- a/components/lib/themes/nora/menubar/package.json
+++ b/components/lib/themes/nora/menubar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/menubar/index.d.ts"
 }
diff --git a/components/lib/themes/nora/message/index.d.ts b/components/lib/themes/nora/message/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/message/package.json b/components/lib/themes/nora/message/package.json
index f8e9d7ae0..ffeaf4e56 100644
--- a/components/lib/themes/nora/message/package.json
+++ b/components/lib/themes/nora/message/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/message/index.d.ts"
 }
diff --git a/components/lib/themes/nora/metergroup/index.d.ts b/components/lib/themes/nora/metergroup/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/metergroup/package.json b/components/lib/themes/nora/metergroup/package.json
index f8e9d7ae0..53ee817aa 100644
--- a/components/lib/themes/nora/metergroup/package.json
+++ b/components/lib/themes/nora/metergroup/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/metergroup/index.d.ts"
 }
diff --git a/components/lib/themes/nora/multiselect/index.d.ts b/components/lib/themes/nora/multiselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/multiselect/package.json b/components/lib/themes/nora/multiselect/package.json
index f8e9d7ae0..b0a54db70 100644
--- a/components/lib/themes/nora/multiselect/package.json
+++ b/components/lib/themes/nora/multiselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/multiselect/index.d.ts"
 }
diff --git a/components/lib/themes/nora/orderlist/index.d.ts b/components/lib/themes/nora/orderlist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/orderlist/package.json b/components/lib/themes/nora/orderlist/package.json
index f8e9d7ae0..25dbeb223 100644
--- a/components/lib/themes/nora/orderlist/package.json
+++ b/components/lib/themes/nora/orderlist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/orderlist/index.d.ts"
 }
diff --git a/components/lib/themes/nora/organizationchart/index.d.ts b/components/lib/themes/nora/organizationchart/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/organizationchart/package.json b/components/lib/themes/nora/organizationchart/package.json
index f8e9d7ae0..fc751ad11 100644
--- a/components/lib/themes/nora/organizationchart/package.json
+++ b/components/lib/themes/nora/organizationchart/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/organizationchart/index.d.ts"
 }
diff --git a/components/lib/themes/nora/paginator/index.d.ts b/components/lib/themes/nora/paginator/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/paginator/package.json b/components/lib/themes/nora/paginator/package.json
index f8e9d7ae0..674eca4c9 100644
--- a/components/lib/themes/nora/paginator/package.json
+++ b/components/lib/themes/nora/paginator/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/paginator/index.d.ts"
 }
diff --git a/components/lib/themes/nora/panel/index.d.ts b/components/lib/themes/nora/panel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/panel/package.json b/components/lib/themes/nora/panel/package.json
index f8e9d7ae0..97beb609f 100644
--- a/components/lib/themes/nora/panel/package.json
+++ b/components/lib/themes/nora/panel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panel/index.d.ts"
 }
diff --git a/components/lib/themes/nora/panelmenu/index.d.ts b/components/lib/themes/nora/panelmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/panelmenu/package.json b/components/lib/themes/nora/panelmenu/package.json
index f8e9d7ae0..47625e6f9 100644
--- a/components/lib/themes/nora/panelmenu/package.json
+++ b/components/lib/themes/nora/panelmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/panelmenu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/password/index.d.ts b/components/lib/themes/nora/password/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/password/package.json b/components/lib/themes/nora/password/package.json
index f8e9d7ae0..ddaf3e83d 100644
--- a/components/lib/themes/nora/password/package.json
+++ b/components/lib/themes/nora/password/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/password/index.d.ts"
 }
diff --git a/components/lib/themes/nora/picklist/index.d.ts b/components/lib/themes/nora/picklist/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/picklist/package.json b/components/lib/themes/nora/picklist/package.json
index f8e9d7ae0..f9f633318 100644
--- a/components/lib/themes/nora/picklist/package.json
+++ b/components/lib/themes/nora/picklist/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/picklist/index.d.ts"
 }
diff --git a/components/lib/themes/nora/popover/index.d.ts b/components/lib/themes/nora/popover/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/popover/package.json b/components/lib/themes/nora/popover/package.json
index f8e9d7ae0..a0fff63f3 100644
--- a/components/lib/themes/nora/popover/package.json
+++ b/components/lib/themes/nora/popover/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/popover/index.d.ts"
 }
diff --git a/components/lib/themes/nora/progressbar/index.d.ts b/components/lib/themes/nora/progressbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/progressbar/package.json b/components/lib/themes/nora/progressbar/package.json
index f8e9d7ae0..9261ad9cb 100644
--- a/components/lib/themes/nora/progressbar/package.json
+++ b/components/lib/themes/nora/progressbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressbar/index.d.ts"
 }
diff --git a/components/lib/themes/nora/progressspinner/index.d.ts b/components/lib/themes/nora/progressspinner/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/progressspinner/package.json b/components/lib/themes/nora/progressspinner/package.json
index f8e9d7ae0..c9eec02e7 100644
--- a/components/lib/themes/nora/progressspinner/package.json
+++ b/components/lib/themes/nora/progressspinner/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/progressspinner/index.d.ts"
 }
diff --git a/components/lib/themes/nora/radiobutton/index.d.ts b/components/lib/themes/nora/radiobutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/radiobutton/package.json b/components/lib/themes/nora/radiobutton/package.json
index f8e9d7ae0..e492380b8 100644
--- a/components/lib/themes/nora/radiobutton/package.json
+++ b/components/lib/themes/nora/radiobutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/radiobutton/index.d.ts"
 }
diff --git a/components/lib/themes/nora/rating/index.d.ts b/components/lib/themes/nora/rating/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/rating/package.json b/components/lib/themes/nora/rating/package.json
index f8e9d7ae0..25cb35938 100644
--- a/components/lib/themes/nora/rating/package.json
+++ b/components/lib/themes/nora/rating/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/rating/index.d.ts"
 }
diff --git a/components/lib/themes/nora/ripple/index.d.ts b/components/lib/themes/nora/ripple/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/ripple/package.json b/components/lib/themes/nora/ripple/package.json
index f8e9d7ae0..1cc5709da 100644
--- a/components/lib/themes/nora/ripple/package.json
+++ b/components/lib/themes/nora/ripple/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/ripple/index.d.ts"
 }
diff --git a/components/lib/themes/nora/scrollpanel/index.d.ts b/components/lib/themes/nora/scrollpanel/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/scrollpanel/package.json b/components/lib/themes/nora/scrollpanel/package.json
index f8e9d7ae0..023f162db 100644
--- a/components/lib/themes/nora/scrollpanel/package.json
+++ b/components/lib/themes/nora/scrollpanel/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/scrollpanel/index.d.ts"
 }
diff --git a/components/lib/themes/nora/scrolltop/index.d.ts b/components/lib/themes/nora/scrolltop/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/scrolltop/index.js b/components/lib/themes/nora/scrolltop/index.js
deleted file mode 100644
index ff8b4c563..000000000
--- a/components/lib/themes/nora/scrolltop/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/components/lib/themes/nora/scrolltop/package.json b/components/lib/themes/nora/scrolltop/package.json
deleted file mode 100644
index f8e9d7ae0..000000000
--- a/components/lib/themes/nora/scrolltop/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./index.cjs.js",
-    "module": "./index.esm.js",
-    "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
-}
diff --git a/components/lib/themes/nora/select/index.d.ts b/components/lib/themes/nora/select/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/select/package.json b/components/lib/themes/nora/select/package.json
index f8e9d7ae0..6cb8e9469 100644
--- a/components/lib/themes/nora/select/package.json
+++ b/components/lib/themes/nora/select/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/select/index.d.ts"
 }
diff --git a/components/lib/themes/nora/selectbutton/index.d.ts b/components/lib/themes/nora/selectbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/selectbutton/package.json b/components/lib/themes/nora/selectbutton/package.json
index f8e9d7ae0..1176632b4 100644
--- a/components/lib/themes/nora/selectbutton/package.json
+++ b/components/lib/themes/nora/selectbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/selectbutton/index.d.ts"
 }
diff --git a/components/lib/themes/nora/skeleton/index.d.ts b/components/lib/themes/nora/skeleton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/skeleton/package.json b/components/lib/themes/nora/skeleton/package.json
index f8e9d7ae0..5f416a21d 100644
--- a/components/lib/themes/nora/skeleton/package.json
+++ b/components/lib/themes/nora/skeleton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/skeleton/index.d.ts"
 }
diff --git a/components/lib/themes/nora/slider/index.d.ts b/components/lib/themes/nora/slider/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/slider/package.json b/components/lib/themes/nora/slider/package.json
index f8e9d7ae0..856cab847 100644
--- a/components/lib/themes/nora/slider/package.json
+++ b/components/lib/themes/nora/slider/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/slider/index.d.ts"
 }
diff --git a/components/lib/themes/nora/speeddial/index.d.ts b/components/lib/themes/nora/speeddial/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/speeddial/package.json b/components/lib/themes/nora/speeddial/package.json
index f8e9d7ae0..2ceb0e1de 100644
--- a/components/lib/themes/nora/speeddial/package.json
+++ b/components/lib/themes/nora/speeddial/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/speeddial/index.d.ts"
 }
diff --git a/components/lib/themes/nora/splitbutton/index.d.ts b/components/lib/themes/nora/splitbutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/splitbutton/package.json b/components/lib/themes/nora/splitbutton/package.json
index f8e9d7ae0..dc92a62a7 100644
--- a/components/lib/themes/nora/splitbutton/package.json
+++ b/components/lib/themes/nora/splitbutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitbutton/index.d.ts"
 }
diff --git a/components/lib/themes/nora/splitter/index.d.ts b/components/lib/themes/nora/splitter/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/splitter/package.json b/components/lib/themes/nora/splitter/package.json
index f8e9d7ae0..df7d1447b 100644
--- a/components/lib/themes/nora/splitter/package.json
+++ b/components/lib/themes/nora/splitter/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/splitter/index.d.ts"
 }
diff --git a/components/lib/themes/nora/stepper/index.d.ts b/components/lib/themes/nora/stepper/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/stepper/package.json b/components/lib/themes/nora/stepper/package.json
index f8e9d7ae0..3d7d044d2 100644
--- a/components/lib/themes/nora/stepper/package.json
+++ b/components/lib/themes/nora/stepper/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/stepper/index.d.ts"
 }
diff --git a/components/lib/themes/nora/steps/index.d.ts b/components/lib/themes/nora/steps/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/steps/package.json b/components/lib/themes/nora/steps/package.json
index f8e9d7ae0..535fe8c83 100644
--- a/components/lib/themes/nora/steps/package.json
+++ b/components/lib/themes/nora/steps/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/steps/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tabmenu/index.d.ts b/components/lib/themes/nora/tabmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tabmenu/package.json b/components/lib/themes/nora/tabmenu/package.json
index f8e9d7ae0..999693e72 100644
--- a/components/lib/themes/nora/tabmenu/package.json
+++ b/components/lib/themes/nora/tabmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabmenu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tabs/index.d.ts b/components/lib/themes/nora/tabs/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tabs/package.json b/components/lib/themes/nora/tabs/package.json
index f8e9d7ae0..a52204ab2 100644
--- a/components/lib/themes/nora/tabs/package.json
+++ b/components/lib/themes/nora/tabs/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabs/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tabview/index.d.ts b/components/lib/themes/nora/tabview/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tabview/package.json b/components/lib/themes/nora/tabview/package.json
index f8e9d7ae0..231e695a6 100644
--- a/components/lib/themes/nora/tabview/package.json
+++ b/components/lib/themes/nora/tabview/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tabview/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tag/index.d.ts b/components/lib/themes/nora/tag/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tag/package.json b/components/lib/themes/nora/tag/package.json
index f8e9d7ae0..893ffff1d 100644
--- a/components/lib/themes/nora/tag/package.json
+++ b/components/lib/themes/nora/tag/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tag/index.d.ts"
 }
diff --git a/components/lib/themes/nora/terminal/index.d.ts b/components/lib/themes/nora/terminal/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/terminal/package.json b/components/lib/themes/nora/terminal/package.json
index f8e9d7ae0..a97962c89 100644
--- a/components/lib/themes/nora/terminal/package.json
+++ b/components/lib/themes/nora/terminal/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/terminal/index.d.ts"
 }
diff --git a/components/lib/themes/nora/textarea/index.d.ts b/components/lib/themes/nora/textarea/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/textarea/package.json b/components/lib/themes/nora/textarea/package.json
index f8e9d7ae0..f416b3057 100644
--- a/components/lib/themes/nora/textarea/package.json
+++ b/components/lib/themes/nora/textarea/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/textarea/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tieredmenu/index.d.ts b/components/lib/themes/nora/tieredmenu/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tieredmenu/package.json b/components/lib/themes/nora/tieredmenu/package.json
index f8e9d7ae0..565b40b41 100644
--- a/components/lib/themes/nora/tieredmenu/package.json
+++ b/components/lib/themes/nora/tieredmenu/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tieredmenu/index.d.ts"
 }
diff --git a/components/lib/themes/nora/timeline/index.d.ts b/components/lib/themes/nora/timeline/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/timeline/package.json b/components/lib/themes/nora/timeline/package.json
index f8e9d7ae0..90dd4ba83 100644
--- a/components/lib/themes/nora/timeline/package.json
+++ b/components/lib/themes/nora/timeline/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/timeline/index.d.ts"
 }
diff --git a/components/lib/themes/nora/toast/index.d.ts b/components/lib/themes/nora/toast/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/toast/package.json b/components/lib/themes/nora/toast/package.json
index f8e9d7ae0..992756651 100644
--- a/components/lib/themes/nora/toast/package.json
+++ b/components/lib/themes/nora/toast/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toast/index.d.ts"
 }
diff --git a/components/lib/themes/nora/togglebutton/index.d.ts b/components/lib/themes/nora/togglebutton/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/togglebutton/package.json b/components/lib/themes/nora/togglebutton/package.json
index f8e9d7ae0..4e6f25d3d 100644
--- a/components/lib/themes/nora/togglebutton/package.json
+++ b/components/lib/themes/nora/togglebutton/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/togglebutton/index.d.ts"
 }
diff --git a/components/lib/themes/nora/toggleswitch/index.d.ts b/components/lib/themes/nora/toggleswitch/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/toggleswitch/package.json b/components/lib/themes/nora/toggleswitch/package.json
index f8e9d7ae0..f01a5031b 100644
--- a/components/lib/themes/nora/toggleswitch/package.json
+++ b/components/lib/themes/nora/toggleswitch/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toggleswitch/index.d.ts"
 }
diff --git a/components/lib/themes/nora/toolbar/index.d.ts b/components/lib/themes/nora/toolbar/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/toolbar/package.json b/components/lib/themes/nora/toolbar/package.json
index f8e9d7ae0..6b2e99188 100644
--- a/components/lib/themes/nora/toolbar/package.json
+++ b/components/lib/themes/nora/toolbar/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/toolbar/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tooltip/index.d.ts b/components/lib/themes/nora/tooltip/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tooltip/package.json b/components/lib/themes/nora/tooltip/package.json
index f8e9d7ae0..2cc429459 100644
--- a/components/lib/themes/nora/tooltip/package.json
+++ b/components/lib/themes/nora/tooltip/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tooltip/index.d.ts"
 }
diff --git a/components/lib/themes/nora/tree/index.d.ts b/components/lib/themes/nora/tree/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/tree/package.json b/components/lib/themes/nora/tree/package.json
index f8e9d7ae0..ea54f5627 100644
--- a/components/lib/themes/nora/tree/package.json
+++ b/components/lib/themes/nora/tree/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/tree/index.d.ts"
 }
diff --git a/components/lib/themes/nora/treeselect/index.d.ts b/components/lib/themes/nora/treeselect/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/treeselect/package.json b/components/lib/themes/nora/treeselect/package.json
index f8e9d7ae0..360a1bebc 100644
--- a/components/lib/themes/nora/treeselect/package.json
+++ b/components/lib/themes/nora/treeselect/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treeselect/index.d.ts"
 }
diff --git a/components/lib/themes/nora/treetable/index.d.ts b/components/lib/themes/nora/treetable/index.d.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/components/lib/themes/nora/treetable/package.json b/components/lib/themes/nora/treetable/package.json
index f8e9d7ae0..d50a95454 100644
--- a/components/lib/themes/nora/treetable/package.json
+++ b/components/lib/themes/nora/treetable/package.json
@@ -2,5 +2,5 @@
     "main": "./index.cjs.js",
     "module": "./index.esm.js",
     "unpkg": "./index.min.js",
-    "types": "./index.d.ts"
+    "types": "../types/treetable/index.d.ts"
 }
diff --git a/components/lib/themes/types/accordion/index.d.ts b/components/lib/themes/types/accordion/index.d.ts
new file mode 100644
index 000000000..224e5b6f5
--- /dev/null
+++ b/components/lib/themes/types/accordion/index.d.ts
@@ -0,0 +1,241 @@
+/**
+ *
+ * Accordion Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/accordion/)
+ *
+ * @module themes/accordion
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface AccordionDesignTokens extends ColorSchemeDesignToken<AccordionDesignTokens> {
+    /**
+     * Used to pass tokens of the panel section
+     */
+    panel?: {
+        /**
+         * Border width of panel
+         *
+         * @designToken accordion.panel.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of panel
+         *
+         * @designToken accordion.panel.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Color of header
+         *
+         * @designToken accordion.header.color
+         */
+        color?: string;
+        /**
+         * Hover color of header
+         *
+         * @designToken accordion.header.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of header
+         *
+         * @designToken accordion.header.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken accordion.header.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header
+         *
+         * @designToken accordion.header.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Border radius of header
+         *
+         * @designToken accordion.header.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken accordion.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken accordion.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Background of header
+         *
+         * @designToken accordion.header.background
+         */
+        background?: string;
+        /**
+         * Hover background of header
+         *
+         * @designToken accordion.header.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of header
+         *
+         * @designToken accordion.header.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Active hover background of header
+         *
+         * @designToken accordion.header.active.hover.background
+         */
+        activeHoverBackground?: string;
+        /**
+         * Focus ring of header
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of header
+             *
+             * @designToken accordion.header.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of header
+             *
+             * @designToken accordion.header.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of header
+             *
+             * @designToken accordion.header.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of header
+             *
+             * @designToken accordion.header.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of header
+             *
+             * @designToken accordion.header.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Toggle icon of header
+         */
+        toggleIcon?: {
+            /**
+             * Toggle icon color of header
+             *
+             * @designToken accordion.header.toggle.icon.color
+             */
+            color?: string;
+            /**
+             * Toggle icon hover color of header
+             *
+             * @designToken accordion.header.toggle.icon.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Toggle icon active color of header
+             *
+             * @designToken accordion.header.toggle.icon.active.color
+             */
+            activeColor?: string;
+            /**
+             * Toggle icon active hover color of header
+             *
+             * @designToken accordion.header.toggle.icon.active.hover.color
+             */
+            activeHoverColor?: string;
+        };
+        /**
+         * First of header
+         */
+        first?: {
+            /**
+             * First top border radius of header
+             *
+             * @designToken accordion.header.first.top.border.radius
+             */
+            topBorderRadius?: string;
+            /**
+             * First border width of header
+             *
+             * @designToken accordion.header.first.border.width
+             */
+            borderWidth?: string;
+        };
+        /**
+         * Last of header
+         */
+        last?: {
+            /**
+             * Last bottom border radius of header
+             *
+             * @designToken accordion.header.last.bottom.border.radius
+             */
+            bottomBorderRadius?: string;
+            /**
+             * Last active bottom border radius of header
+             *
+             * @designToken accordion.header.last.active.bottom.border.radius
+             */
+            activeBottomBorderRadius?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Border width of content
+         *
+         * @designToken accordion.content.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of content
+         *
+         * @designToken accordion.content.border.color
+         */
+        borderColor?: string;
+        /**
+         * Background of content
+         *
+         * @designToken accordion.content.background
+         */
+        background?: string;
+        /**
+         * Color of content
+         *
+         * @designToken accordion.content.color
+         */
+        color?: string;
+        /**
+         * Padding of content
+         *
+         * @designToken accordion.content.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/autocomplete/index.d.ts b/components/lib/themes/types/autocomplete/index.d.ts
new file mode 100644
index 000000000..4e737662e
--- /dev/null
+++ b/components/lib/themes/types/autocomplete/index.d.ts
@@ -0,0 +1,412 @@
+/**
+ *
+ * AutoComplete Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/autocomplete/)
+ *
+ * @module themes/autocomplete
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface AutoCompleteDesignTokens extends ColorSchemeDesignToken<AutoCompleteDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken autocomplete.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken autocomplete.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken autocomplete.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken autocomplete.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken autocomplete.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken autocomplete.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken autocomplete.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken autocomplete.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken autocomplete.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken autocomplete.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken autocomplete.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken autocomplete.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken autocomplete.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken autocomplete.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken autocomplete.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken autocomplete.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken autocomplete.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken autocomplete.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken autocomplete.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken autocomplete.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken autocomplete.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken autocomplete.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken autocomplete.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken autocomplete.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken autocomplete.overlay.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken autocomplete.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken autocomplete.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the option section
+     */
+    option?: {
+        /**
+         * Focus background of option
+         *
+         * @designToken autocomplete.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Selected background of option
+         *
+         * @designToken autocomplete.option.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Selected focus background of option
+         *
+         * @designToken autocomplete.option.selected.focus.background
+         */
+        selectedFocusBackground?: string;
+        /**
+         * Color of option
+         *
+         * @designToken autocomplete.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of option
+         *
+         * @designToken autocomplete.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Selected color of option
+         *
+         * @designToken autocomplete.option.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Selected focus color of option
+         *
+         * @designToken autocomplete.option.selected.focus.color
+         */
+        selectedFocusColor?: string;
+        /**
+         * Padding of option
+         *
+         * @designToken autocomplete.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of option
+         *
+         * @designToken autocomplete.option.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the option group section
+     */
+    optionGroup?: {
+        /**
+         * Background of option group
+         *
+         * @designToken autocomplete.option.group.background
+         */
+        background?: string;
+        /**
+         * Color of option group
+         *
+         * @designToken autocomplete.option.group.color
+         */
+        color?: string;
+        /**
+         * Font weight of option group
+         *
+         * @designToken autocomplete.option.group.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Padding of option group
+         *
+         * @designToken autocomplete.option.group.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken autocomplete.dropdown.width
+         */
+        width?: string;
+        /**
+         * Border color of dropdown
+         *
+         * @designToken autocomplete.dropdown.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of dropdown
+         *
+         * @designToken autocomplete.dropdown.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Active border color of dropdown
+         *
+         * @designToken autocomplete.dropdown.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Border radius of dropdown
+         *
+         * @designToken autocomplete.dropdown.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of dropdown
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of dropdown
+             *
+             * @designToken autocomplete.dropdown.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of dropdown
+             *
+             * @designToken autocomplete.dropdown.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of dropdown
+             *
+             * @designToken autocomplete.dropdown.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of dropdown
+             *
+             * @designToken autocomplete.dropdown.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of dropdown
+             *
+             * @designToken autocomplete.dropdown.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Background of dropdown
+         *
+         * @designToken autocomplete.dropdown.background
+         */
+        background?: string;
+        /**
+         * Hover background of dropdown
+         *
+         * @designToken autocomplete.dropdown.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of dropdown
+         *
+         * @designToken autocomplete.dropdown.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken autocomplete.dropdown.color
+         */
+        color?: string;
+        /**
+         * Hover color of dropdown
+         *
+         * @designToken autocomplete.dropdown.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of dropdown
+         *
+         * @designToken autocomplete.dropdown.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the chip section
+     */
+    chip?: {
+        /**
+         * Border radius of chip
+         *
+         * @designToken autocomplete.chip.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the empty message section
+     */
+    emptyMessage?: {
+        /**
+         * Padding of empty message
+         *
+         * @designToken autocomplete.empty.message.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/avatar/index.d.ts b/components/lib/themes/types/avatar/index.d.ts
new file mode 100644
index 000000000..093bc3c46
--- /dev/null
+++ b/components/lib/themes/types/avatar/index.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * Avatar Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/avatar/)
+ *
+ * @module themes/avatar
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface AvatarDesignTokens extends ColorSchemeDesignToken<AvatarDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Width of root
+         *
+         * @designToken avatar.width
+         */
+        width?: string;
+        /**
+         * Height of root
+         *
+         * @designToken avatar.height
+         */
+        height?: string;
+        /**
+         * Font size of root
+         *
+         * @designToken avatar.font.size
+         */
+        fontSize?: string;
+        /**
+         * Background of root
+         *
+         * @designToken avatar.background
+         */
+        background?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken avatar.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the group section
+     */
+    group?: {
+        /**
+         * Border color of group
+         *
+         * @designToken avatar.group.border.color
+         */
+        borderColor?: string;
+        /**
+         * Offset of group
+         *
+         * @designToken avatar.group.offset
+         */
+        offset?: string;
+    };
+    /**
+     * Used to pass tokens of the lg section
+     */
+    lg?: {
+        /**
+         * Width of lg
+         *
+         * @designToken avatar.lg.width
+         */
+        width?: string;
+        /**
+         * Height of lg
+         *
+         * @designToken avatar.lg.height
+         */
+        height?: string;
+        /**
+         * Font size of lg
+         *
+         * @designToken avatar.lg.font.size
+         */
+        fontSize?: string;
+    };
+    /**
+     * Used to pass tokens of the xl section
+     */
+    xl?: {
+        /**
+         * Width of xl
+         *
+         * @designToken avatar.xl.width
+         */
+        width?: string;
+        /**
+         * Height of xl
+         *
+         * @designToken avatar.xl.height
+         */
+        height?: string;
+        /**
+         * Font size of xl
+         *
+         * @designToken avatar.xl.font.size
+         */
+        fontSize?: string;
+    };
+}
diff --git a/components/lib/themes/types/badge/index.d.ts b/components/lib/themes/types/badge/index.d.ts
new file mode 100644
index 000000000..56d74a33f
--- /dev/null
+++ b/components/lib/themes/types/badge/index.d.ts
@@ -0,0 +1,254 @@
+/**
+ *
+ * Badge Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/badge/)
+ *
+ * @module themes/badge
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface BadgeDesignTokens extends ColorSchemeDesignToken<BadgeDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken badge.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken badge.padding
+         */
+        padding?: string;
+        /**
+         * Font size of root
+         *
+         * @designToken badge.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of root
+         *
+         * @designToken badge.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Min width of root
+         *
+         * @designToken badge.min.width
+         */
+        minWidth?: string;
+        /**
+         * Height of root
+         *
+         * @designToken badge.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the dot section
+     */
+    dot?: {
+        /**
+         * Size of dot
+         *
+         * @designToken badge.dot.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the sm section
+     */
+    sm?: {
+        /**
+         * Font size of sm
+         *
+         * @designToken badge.sm.font.size
+         */
+        fontSize?: string;
+        /**
+         * Min width of sm
+         *
+         * @designToken badge.sm.min.width
+         */
+        minWidth?: string;
+        /**
+         * Height of sm
+         *
+         * @designToken badge.sm.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the lg section
+     */
+    lg?: {
+        /**
+         * Font size of lg
+         *
+         * @designToken badge.lg.font.size
+         */
+        fontSize?: string;
+        /**
+         * Min width of lg
+         *
+         * @designToken badge.lg.min.width
+         */
+        minWidth?: string;
+        /**
+         * Height of lg
+         *
+         * @designToken badge.lg.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the xl section
+     */
+    xl?: {
+        /**
+         * Font size of xl
+         *
+         * @designToken badge.xl.font.size
+         */
+        fontSize?: string;
+        /**
+         * Min width of xl
+         *
+         * @designToken badge.xl.min.width
+         */
+        minWidth?: string;
+        /**
+         * Height of xl
+         *
+         * @designToken badge.xl.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the primary section
+     */
+    primary?: {
+        /**
+         * Background of primary
+         *
+         * @designToken badge.primary.background
+         */
+        background?: string;
+        /**
+         * Color of primary
+         *
+         * @designToken badge.primary.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the secondary section
+     */
+    secondary?: {
+        /**
+         * Background of secondary
+         *
+         * @designToken badge.secondary.background
+         */
+        background?: string;
+        /**
+         * Color of secondary
+         *
+         * @designToken badge.secondary.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the success section
+     */
+    success?: {
+        /**
+         * Background of success
+         *
+         * @designToken badge.success.background
+         */
+        background?: string;
+        /**
+         * Color of success
+         *
+         * @designToken badge.success.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the info section
+     */
+    info?: {
+        /**
+         * Background of info
+         *
+         * @designToken badge.info.background
+         */
+        background?: string;
+        /**
+         * Color of info
+         *
+         * @designToken badge.info.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the warn section
+     */
+    warn?: {
+        /**
+         * Background of warn
+         *
+         * @designToken badge.warn.background
+         */
+        background?: string;
+        /**
+         * Color of warn
+         *
+         * @designToken badge.warn.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the danger section
+     */
+    danger?: {
+        /**
+         * Background of danger
+         *
+         * @designToken badge.danger.background
+         */
+        background?: string;
+        /**
+         * Color of danger
+         *
+         * @designToken badge.danger.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the contrast section
+     */
+    contrast?: {
+        /**
+         * Background of contrast
+         *
+         * @designToken badge.contrast.background
+         */
+        background?: string;
+        /**
+         * Color of contrast
+         *
+         * @designToken badge.contrast.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/blockui/index.d.ts b/components/lib/themes/types/blockui/index.d.ts
new file mode 100644
index 000000000..a5ee1e870
--- /dev/null
+++ b/components/lib/themes/types/blockui/index.d.ts
@@ -0,0 +1,25 @@
+/**
+ *
+ * BlockUI Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/blockui/)
+ *
+ * @module themes/blockui
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface BlockUIDesignTokens extends ColorSchemeDesignToken<BlockUIDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken blockui.border.radius
+         */
+        borderRadius?: string;
+    };
+}
diff --git a/components/lib/themes/types/breadcrumb/index.d.ts b/components/lib/themes/types/breadcrumb/index.d.ts
new file mode 100644
index 000000000..793fb704b
--- /dev/null
+++ b/components/lib/themes/types/breadcrumb/index.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * Breadcrumb Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/breadcrumb/)
+ *
+ * @module themes/breadcrumb
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface BreadcrumbDesignTokens extends ColorSchemeDesignToken<BreadcrumbDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Padding of root
+         *
+         * @designToken breadcrumb.padding
+         */
+        padding?: string;
+        /**
+         * Background of root
+         *
+         * @designToken breadcrumb.background
+         */
+        background?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken breadcrumb.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Color of item
+         *
+         * @designToken breadcrumb.item.color
+         */
+        color?: string;
+        /**
+         * Hover color of item
+         *
+         * @designToken breadcrumb.item.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Icon color of item
+         *
+         * @designToken breadcrumb.item.icon.color
+         */
+        iconColor?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken breadcrumb.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of item
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of item
+             *
+             * @designToken breadcrumb.item.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of item
+             *
+             * @designToken breadcrumb.item.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of item
+             *
+             * @designToken breadcrumb.item.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of item
+             *
+             * @designToken breadcrumb.item.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of item
+             *
+             * @designToken breadcrumb.item.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Color of separator
+         *
+         * @designToken breadcrumb.separator.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/button/index.d.ts b/components/lib/themes/types/button/index.d.ts
new file mode 100644
index 000000000..fe6e632f4
--- /dev/null
+++ b/components/lib/themes/types/button/index.d.ts
@@ -0,0 +1,1227 @@
+/**
+ *
+ * Button Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/button/)
+ *
+ * @module themes/button
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Rounded border radius of root
+         *
+         * @designToken button.rounded.border.radius
+         */
+        roundedBorderRadius?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken button.gap
+         */
+        gap?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken button.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken button.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Icon only width of root
+         *
+         * @designToken button.icon.only.width
+         */
+        iconOnlyWidth?: string;
+        /**
+         * Sm of root
+         */
+        sm?: {
+            /**
+             * Sm font size of root
+             *
+             * @designToken button.sm.font.size
+             */
+            fontSize?: string;
+            /**
+             * Sm padding x of root
+             *
+             * @designToken button.sm.padding.x
+             */
+            paddingX?: string;
+            /**
+             * Sm padding y of root
+             *
+             * @designToken button.sm.padding.y
+             */
+            paddingY?: string;
+        };
+        /**
+         * Lg of root
+         */
+        lg?: {
+            /**
+             * Lg font size of root
+             *
+             * @designToken button.lg.font.size
+             */
+            fontSize?: string;
+            /**
+             * Lg padding x of root
+             *
+             * @designToken button.lg.padding.x
+             */
+            paddingX?: string;
+            /**
+             * Lg padding y of root
+             *
+             * @designToken button.lg.padding.y
+             */
+            paddingY?: string;
+        };
+        /**
+         * Label of root
+         */
+        label?: {
+            /**
+             * Label font weight of root
+             *
+             * @designToken button.label.font.weight
+             */
+            fontWeight?: string;
+        };
+        /**
+         * Raised shadow of root
+         *
+         * @designToken button.raised.shadow
+         */
+        raisedShadow?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken button.focus.ring.offset
+             */
+            offset?: string;
+        };
+        /**
+         * Primary of root
+         */
+        primary?: {
+            /**
+             * Primary background of root
+             *
+             * @designToken button.primary.background
+             */
+            background?: string;
+            /**
+             * Primary hover background of root
+             *
+             * @designToken button.primary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Primary active background of root
+             *
+             * @designToken button.primary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Primary border color of root
+             *
+             * @designToken button.primary.border.color
+             */
+            borderColor?: string;
+            /**
+             * Primary hover border color of root
+             *
+             * @designToken button.primary.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Primary active border color of root
+             *
+             * @designToken button.primary.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Primary color of root
+             *
+             * @designToken button.primary.color
+             */
+            color?: string;
+            /**
+             * Primary hover color of root
+             *
+             * @designToken button.primary.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Primary active color of root
+             *
+             * @designToken button.primary.active.color
+             */
+            activeColor?: string;
+            /**
+             * Primary focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Primary focus ring color of root
+                 *
+                 * @designToken button.primary.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Primary focus ring shadow of root
+                 *
+                 * @designToken button.primary.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Secondary of root
+         */
+        secondary?: {
+            /**
+             * Secondary background of root
+             *
+             * @designToken button.secondary.background
+             */
+            background?: string;
+            /**
+             * Secondary hover background of root
+             *
+             * @designToken button.secondary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Secondary active background of root
+             *
+             * @designToken button.secondary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Secondary border color of root
+             *
+             * @designToken button.secondary.border.color
+             */
+            borderColor?: string;
+            /**
+             * Secondary hover border color of root
+             *
+             * @designToken button.secondary.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Secondary active border color of root
+             *
+             * @designToken button.secondary.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Secondary color of root
+             *
+             * @designToken button.secondary.color
+             */
+            color?: string;
+            /**
+             * Secondary hover color of root
+             *
+             * @designToken button.secondary.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Secondary active color of root
+             *
+             * @designToken button.secondary.active.color
+             */
+            activeColor?: string;
+            /**
+             * Secondary focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Secondary focus ring color of root
+                 *
+                 * @designToken button.secondary.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Secondary focus ring shadow of root
+                 *
+                 * @designToken button.secondary.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Info of root
+         */
+        info?: {
+            /**
+             * Info background of root
+             *
+             * @designToken button.info.background
+             */
+            background?: string;
+            /**
+             * Info hover background of root
+             *
+             * @designToken button.info.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Info active background of root
+             *
+             * @designToken button.info.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Info border color of root
+             *
+             * @designToken button.info.border.color
+             */
+            borderColor?: string;
+            /**
+             * Info hover border color of root
+             *
+             * @designToken button.info.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Info active border color of root
+             *
+             * @designToken button.info.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Info color of root
+             *
+             * @designToken button.info.color
+             */
+            color?: string;
+            /**
+             * Info hover color of root
+             *
+             * @designToken button.info.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Info active color of root
+             *
+             * @designToken button.info.active.color
+             */
+            activeColor?: string;
+            /**
+             * Info focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Info focus ring color of root
+                 *
+                 * @designToken button.info.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Info focus ring shadow of root
+                 *
+                 * @designToken button.info.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Success of root
+         */
+        success?: {
+            /**
+             * Success background of root
+             *
+             * @designToken button.success.background
+             */
+            background?: string;
+            /**
+             * Success hover background of root
+             *
+             * @designToken button.success.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Success active background of root
+             *
+             * @designToken button.success.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Success border color of root
+             *
+             * @designToken button.success.border.color
+             */
+            borderColor?: string;
+            /**
+             * Success hover border color of root
+             *
+             * @designToken button.success.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Success active border color of root
+             *
+             * @designToken button.success.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Success color of root
+             *
+             * @designToken button.success.color
+             */
+            color?: string;
+            /**
+             * Success hover color of root
+             *
+             * @designToken button.success.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Success active color of root
+             *
+             * @designToken button.success.active.color
+             */
+            activeColor?: string;
+            /**
+             * Success focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Success focus ring color of root
+                 *
+                 * @designToken button.success.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Success focus ring shadow of root
+                 *
+                 * @designToken button.success.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Warn of root
+         */
+        warn?: {
+            /**
+             * Warn background of root
+             *
+             * @designToken button.warn.background
+             */
+            background?: string;
+            /**
+             * Warn hover background of root
+             *
+             * @designToken button.warn.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Warn active background of root
+             *
+             * @designToken button.warn.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Warn border color of root
+             *
+             * @designToken button.warn.border.color
+             */
+            borderColor?: string;
+            /**
+             * Warn hover border color of root
+             *
+             * @designToken button.warn.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Warn active border color of root
+             *
+             * @designToken button.warn.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Warn color of root
+             *
+             * @designToken button.warn.color
+             */
+            color?: string;
+            /**
+             * Warn hover color of root
+             *
+             * @designToken button.warn.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Warn active color of root
+             *
+             * @designToken button.warn.active.color
+             */
+            activeColor?: string;
+            /**
+             * Warn focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Warn focus ring color of root
+                 *
+                 * @designToken button.warn.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Warn focus ring shadow of root
+                 *
+                 * @designToken button.warn.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Help of root
+         */
+        help?: {
+            /**
+             * Help background of root
+             *
+             * @designToken button.help.background
+             */
+            background?: string;
+            /**
+             * Help hover background of root
+             *
+             * @designToken button.help.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Help active background of root
+             *
+             * @designToken button.help.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Help border color of root
+             *
+             * @designToken button.help.border.color
+             */
+            borderColor?: string;
+            /**
+             * Help hover border color of root
+             *
+             * @designToken button.help.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Help active border color of root
+             *
+             * @designToken button.help.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Help color of root
+             *
+             * @designToken button.help.color
+             */
+            color?: string;
+            /**
+             * Help hover color of root
+             *
+             * @designToken button.help.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Help active color of root
+             *
+             * @designToken button.help.active.color
+             */
+            activeColor?: string;
+            /**
+             * Help focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Help focus ring color of root
+                 *
+                 * @designToken button.help.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Help focus ring shadow of root
+                 *
+                 * @designToken button.help.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Danger of root
+         */
+        danger?: {
+            /**
+             * Danger background of root
+             *
+             * @designToken button.danger.background
+             */
+            background?: string;
+            /**
+             * Danger hover background of root
+             *
+             * @designToken button.danger.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Danger active background of root
+             *
+             * @designToken button.danger.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Danger border color of root
+             *
+             * @designToken button.danger.border.color
+             */
+            borderColor?: string;
+            /**
+             * Danger hover border color of root
+             *
+             * @designToken button.danger.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Danger active border color of root
+             *
+             * @designToken button.danger.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Danger color of root
+             *
+             * @designToken button.danger.color
+             */
+            color?: string;
+            /**
+             * Danger hover color of root
+             *
+             * @designToken button.danger.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Danger active color of root
+             *
+             * @designToken button.danger.active.color
+             */
+            activeColor?: string;
+            /**
+             * Danger focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Danger focus ring color of root
+                 *
+                 * @designToken button.danger.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Danger focus ring shadow of root
+                 *
+                 * @designToken button.danger.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+        /**
+         * Contrast of root
+         */
+        contrast?: {
+            /**
+             * Contrast background of root
+             *
+             * @designToken button.contrast.background
+             */
+            background?: string;
+            /**
+             * Contrast hover background of root
+             *
+             * @designToken button.contrast.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Contrast active background of root
+             *
+             * @designToken button.contrast.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Contrast border color of root
+             *
+             * @designToken button.contrast.border.color
+             */
+            borderColor?: string;
+            /**
+             * Contrast hover border color of root
+             *
+             * @designToken button.contrast.hover.border.color
+             */
+            hoverBorderColor?: string;
+            /**
+             * Contrast active border color of root
+             *
+             * @designToken button.contrast.active.border.color
+             */
+            activeBorderColor?: string;
+            /**
+             * Contrast color of root
+             *
+             * @designToken button.contrast.color
+             */
+            color?: string;
+            /**
+             * Contrast hover color of root
+             *
+             * @designToken button.contrast.hover.color
+             */
+            hoverColor?: string;
+            /**
+             * Contrast active color of root
+             *
+             * @designToken button.contrast.active.color
+             */
+            activeColor?: string;
+            /**
+             * Contrast focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Contrast focus ring color of root
+                 *
+                 * @designToken button.contrast.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Contrast focus ring shadow of root
+                 *
+                 * @designToken button.contrast.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the outlined section
+     */
+    outlined?: {
+        /**
+         * Primary of outlined
+         */
+        primary?: {
+            /**
+             * Primary hover background of outlined
+             *
+             * @designToken button.outlined.primary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Primary active background of outlined
+             *
+             * @designToken button.outlined.primary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Primary border color of outlined
+             *
+             * @designToken button.outlined.primary.border.color
+             */
+            borderColor?: string;
+            /**
+             * Primary color of outlined
+             *
+             * @designToken button.outlined.primary.color
+             */
+            color?: string;
+        };
+        /**
+         * Secondary of outlined
+         */
+        secondary?: {
+            /**
+             * Secondary hover background of outlined
+             *
+             * @designToken button.outlined.secondary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Secondary active background of outlined
+             *
+             * @designToken button.outlined.secondary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Secondary border color of outlined
+             *
+             * @designToken button.outlined.secondary.border.color
+             */
+            borderColor?: string;
+            /**
+             * Secondary color of outlined
+             *
+             * @designToken button.outlined.secondary.color
+             */
+            color?: string;
+        };
+        /**
+         * Success of outlined
+         */
+        success?: {
+            /**
+             * Success hover background of outlined
+             *
+             * @designToken button.outlined.success.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Success active background of outlined
+             *
+             * @designToken button.outlined.success.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Success border color of outlined
+             *
+             * @designToken button.outlined.success.border.color
+             */
+            borderColor?: string;
+            /**
+             * Success color of outlined
+             *
+             * @designToken button.outlined.success.color
+             */
+            color?: string;
+        };
+        /**
+         * Info of outlined
+         */
+        info?: {
+            /**
+             * Info hover background of outlined
+             *
+             * @designToken button.outlined.info.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Info active background of outlined
+             *
+             * @designToken button.outlined.info.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Info border color of outlined
+             *
+             * @designToken button.outlined.info.border.color
+             */
+            borderColor?: string;
+            /**
+             * Info color of outlined
+             *
+             * @designToken button.outlined.info.color
+             */
+            color?: string;
+        };
+        /**
+         * Warn of outlined
+         */
+        warn?: {
+            /**
+             * Warn hover background of outlined
+             *
+             * @designToken button.outlined.warn.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Warn active background of outlined
+             *
+             * @designToken button.outlined.warn.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Warn border color of outlined
+             *
+             * @designToken button.outlined.warn.border.color
+             */
+            borderColor?: string;
+            /**
+             * Warn color of outlined
+             *
+             * @designToken button.outlined.warn.color
+             */
+            color?: string;
+        };
+        /**
+         * Help of outlined
+         */
+        help?: {
+            /**
+             * Help hover background of outlined
+             *
+             * @designToken button.outlined.help.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Help active background of outlined
+             *
+             * @designToken button.outlined.help.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Help border color of outlined
+             *
+             * @designToken button.outlined.help.border.color
+             */
+            borderColor?: string;
+            /**
+             * Help color of outlined
+             *
+             * @designToken button.outlined.help.color
+             */
+            color?: string;
+        };
+        /**
+         * Danger of outlined
+         */
+        danger?: {
+            /**
+             * Danger hover background of outlined
+             *
+             * @designToken button.outlined.danger.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Danger active background of outlined
+             *
+             * @designToken button.outlined.danger.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Danger border color of outlined
+             *
+             * @designToken button.outlined.danger.border.color
+             */
+            borderColor?: string;
+            /**
+             * Danger color of outlined
+             *
+             * @designToken button.outlined.danger.color
+             */
+            color?: string;
+        };
+        /**
+         * Contrast of outlined
+         */
+        contrast?: {
+            /**
+             * Contrast hover background of outlined
+             *
+             * @designToken button.outlined.contrast.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Contrast active background of outlined
+             *
+             * @designToken button.outlined.contrast.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Contrast border color of outlined
+             *
+             * @designToken button.outlined.contrast.border.color
+             */
+            borderColor?: string;
+            /**
+             * Contrast color of outlined
+             *
+             * @designToken button.outlined.contrast.color
+             */
+            color?: string;
+        };
+        /**
+         * Plain of outlined
+         */
+        plain?: {
+            /**
+             * Plain hover background of outlined
+             *
+             * @designToken button.outlined.plain.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Plain active background of outlined
+             *
+             * @designToken button.outlined.plain.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Plain border color of outlined
+             *
+             * @designToken button.outlined.plain.border.color
+             */
+            borderColor?: string;
+            /**
+             * Plain color of outlined
+             *
+             * @designToken button.outlined.plain.color
+             */
+            color?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the text section
+     */
+    text?: {
+        /**
+         * Primary of text
+         */
+        primary?: {
+            /**
+             * Primary hover background of text
+             *
+             * @designToken button.text.primary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Primary active background of text
+             *
+             * @designToken button.text.primary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Primary color of text
+             *
+             * @designToken button.text.primary.color
+             */
+            color?: string;
+        };
+        /**
+         * Secondary of text
+         */
+        secondary?: {
+            /**
+             * Secondary hover background of text
+             *
+             * @designToken button.text.secondary.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Secondary active background of text
+             *
+             * @designToken button.text.secondary.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Secondary color of text
+             *
+             * @designToken button.text.secondary.color
+             */
+            color?: string;
+        };
+        /**
+         * Success of text
+         */
+        success?: {
+            /**
+             * Success hover background of text
+             *
+             * @designToken button.text.success.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Success active background of text
+             *
+             * @designToken button.text.success.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Success color of text
+             *
+             * @designToken button.text.success.color
+             */
+            color?: string;
+        };
+        /**
+         * Info of text
+         */
+        info?: {
+            /**
+             * Info hover background of text
+             *
+             * @designToken button.text.info.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Info active background of text
+             *
+             * @designToken button.text.info.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Info color of text
+             *
+             * @designToken button.text.info.color
+             */
+            color?: string;
+        };
+        /**
+         * Warn of text
+         */
+        warn?: {
+            /**
+             * Warn hover background of text
+             *
+             * @designToken button.text.warn.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Warn active background of text
+             *
+             * @designToken button.text.warn.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Warn color of text
+             *
+             * @designToken button.text.warn.color
+             */
+            color?: string;
+        };
+        /**
+         * Help of text
+         */
+        help?: {
+            /**
+             * Help hover background of text
+             *
+             * @designToken button.text.help.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Help active background of text
+             *
+             * @designToken button.text.help.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Help color of text
+             *
+             * @designToken button.text.help.color
+             */
+            color?: string;
+        };
+        /**
+         * Danger of text
+         */
+        danger?: {
+            /**
+             * Danger hover background of text
+             *
+             * @designToken button.text.danger.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Danger active background of text
+             *
+             * @designToken button.text.danger.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Danger color of text
+             *
+             * @designToken button.text.danger.color
+             */
+            color?: string;
+        };
+        /**
+         * Plain of text
+         */
+        plain?: {
+            /**
+             * Plain hover background of text
+             *
+             * @designToken button.text.plain.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Plain active background of text
+             *
+             * @designToken button.text.plain.active.background
+             */
+            activeBackground?: string;
+            /**
+             * Plain color of text
+             *
+             * @designToken button.text.plain.color
+             */
+            color?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the link section
+     */
+    link?: {
+        /**
+         * Color of link
+         *
+         * @designToken button.link.color
+         */
+        color?: string;
+        /**
+         * Hover color of link
+         *
+         * @designToken button.link.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of link
+         *
+         * @designToken button.link.active.color
+         */
+        activeColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/card/index.d.ts b/components/lib/themes/types/card/index.d.ts
new file mode 100644
index 000000000..22bdb2e32
--- /dev/null
+++ b/components/lib/themes/types/card/index.d.ts
@@ -0,0 +1,99 @@
+/**
+ *
+ * Card Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/card/)
+ *
+ * @module themes/card
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface CardDesignTokens extends ColorSchemeDesignToken<CardDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken card.background
+         */
+        background?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken card.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of root
+         *
+         * @designToken card.color
+         */
+        color?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken card.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the body section
+     */
+    body?: {
+        /**
+         * Padding of body
+         *
+         * @designToken card.body.padding
+         */
+        padding?: string;
+        /**
+         * Gap of body
+         *
+         * @designToken card.body.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the caption section
+     */
+    caption?: {
+        /**
+         * Gap of caption
+         *
+         * @designToken card.caption.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the title section
+     */
+    title?: {
+        /**
+         * Font size of title
+         *
+         * @designToken card.title.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of title
+         *
+         * @designToken card.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the subtitle section
+     */
+    subtitle?: {
+        /**
+         * Color of subtitle
+         *
+         * @designToken card.subtitle.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/carousel/index.d.ts b/components/lib/themes/types/carousel/index.d.ts
new file mode 100644
index 000000000..de6346be7
--- /dev/null
+++ b/components/lib/themes/types/carousel/index.d.ts
@@ -0,0 +1,117 @@
+/**
+ *
+ * Carousel Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/carousel/)
+ *
+ * @module themes/carousel
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface CarouselDesignTokens extends ColorSchemeDesignToken<CarouselDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Indicator list of root
+         */
+        indicatorList?: {
+            /**
+             * Indicator list padding of root
+             *
+             * @designToken carousel.indicator.list.padding
+             */
+            padding?: string;
+            /**
+             * Indicator list gap of root
+             *
+             * @designToken carousel.indicator.list.gap
+             */
+            gap?: string;
+        };
+        /**
+         * Indicator of root
+         */
+        indicator?: {
+            /**
+             * Indicator width of root
+             *
+             * @designToken carousel.indicator.width
+             */
+            width?: string;
+            /**
+             * Indicator height of root
+             *
+             * @designToken carousel.indicator.height
+             */
+            height?: string;
+            /**
+             * Indicator border radius of root
+             *
+             * @designToken carousel.indicator.border.radius
+             */
+            borderRadius?: string;
+            /**
+             * Indicator focus ring of root
+             */
+            focusRing?: {
+                /**
+                 * Indicator focus ring width of root
+                 *
+                 * @designToken carousel.indicator.focus.ring.width
+                 */
+                width?: string;
+                /**
+                 * Indicator focus ring style of root
+                 *
+                 * @designToken carousel.indicator.focus.ring.style
+                 */
+                style?: string;
+                /**
+                 * Indicator focus ring color of root
+                 *
+                 * @designToken carousel.indicator.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Indicator focus ring offset of root
+                 *
+                 * @designToken carousel.indicator.focus.ring.offset
+                 */
+                offset?: string;
+                /**
+                 * Indicator focus ring shadow of root
+                 *
+                 * @designToken carousel.indicator.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the indicator section
+     */
+    indicator?: {
+        /**
+         * Background of indicator
+         *
+         * @designToken carousel.indicator.background
+         */
+        background?: string;
+        /**
+         * Hover background of indicator
+         *
+         * @designToken carousel.indicator.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of indicator
+         *
+         * @designToken carousel.indicator.active.background
+         */
+        activeBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/cascadeselect/index.d.ts b/components/lib/themes/types/cascadeselect/index.d.ts
new file mode 100644
index 000000000..b6f99e90a
--- /dev/null
+++ b/components/lib/themes/types/cascadeselect/index.d.ts
@@ -0,0 +1,295 @@
+/**
+ *
+ * CascadeSelect Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/cascadeselect/)
+ *
+ * @module themes/cascadeselect
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface CascadeSelectDesignTokens extends ColorSchemeDesignToken<CascadeSelectDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken cascadeselect.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken cascadeselect.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken cascadeselect.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken cascadeselect.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken cascadeselect.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken cascadeselect.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken cascadeselect.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken cascadeselect.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken cascadeselect.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken cascadeselect.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken cascadeselect.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken cascadeselect.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken cascadeselect.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken cascadeselect.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken cascadeselect.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken cascadeselect.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken cascadeselect.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken cascadeselect.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken cascadeselect.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken cascadeselect.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken cascadeselect.dropdown.width
+         */
+        width?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken cascadeselect.dropdown.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken cascadeselect.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken cascadeselect.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken cascadeselect.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken cascadeselect.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken cascadeselect.overlay.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken cascadeselect.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken cascadeselect.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the option section
+     */
+    option?: {
+        /**
+         * Focus background of option
+         *
+         * @designToken cascadeselect.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Selected background of option
+         *
+         * @designToken cascadeselect.option.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Selected focus background of option
+         *
+         * @designToken cascadeselect.option.selected.focus.background
+         */
+        selectedFocusBackground?: string;
+        /**
+         * Color of option
+         *
+         * @designToken cascadeselect.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of option
+         *
+         * @designToken cascadeselect.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Selected color of option
+         *
+         * @designToken cascadeselect.option.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Selected focus color of option
+         *
+         * @designToken cascadeselect.option.selected.focus.color
+         */
+        selectedFocusColor?: string;
+        /**
+         * Padding of option
+         *
+         * @designToken cascadeselect.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of option
+         *
+         * @designToken cascadeselect.option.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Icon of option
+         */
+        icon?: {
+            /**
+             * Icon color of option
+             *
+             * @designToken cascadeselect.option.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of option
+             *
+             * @designToken cascadeselect.option.icon.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Icon size of option
+             *
+             * @designToken cascadeselect.option.icon.size
+             */
+            size?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/checkbox/index.d.ts b/components/lib/themes/types/checkbox/index.d.ts
new file mode 100644
index 000000000..69cbf6065
--- /dev/null
+++ b/components/lib/themes/types/checkbox/index.d.ts
@@ -0,0 +1,185 @@
+/**
+ *
+ * Checkbox Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ *
+ * @module themes/checkbox
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface CheckboxDesignTokens extends ColorSchemeDesignToken<CheckboxDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken checkbox.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Width of root
+         *
+         * @designToken checkbox.width
+         */
+        width?: string;
+        /**
+         * Height of root
+         *
+         * @designToken checkbox.height
+         */
+        height?: string;
+        /**
+         * Background of root
+         *
+         * @designToken checkbox.background
+         */
+        background?: string;
+        /**
+         * Checked background of root
+         *
+         * @designToken checkbox.checked.background
+         */
+        checkedBackground?: string;
+        /**
+         * Checked hover background of root
+         *
+         * @designToken checkbox.checked.hover.background
+         */
+        checkedHoverBackground?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken checkbox.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken checkbox.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken checkbox.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken checkbox.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken checkbox.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Checked border color of root
+         *
+         * @designToken checkbox.checked.border.color
+         */
+        checkedBorderColor?: string;
+        /**
+         * Checked hover border color of root
+         *
+         * @designToken checkbox.checked.hover.border.color
+         */
+        checkedHoverBorderColor?: string;
+        /**
+         * Checked focus border color of root
+         *
+         * @designToken checkbox.checked.focus.border.color
+         */
+        checkedFocusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken checkbox.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken checkbox.shadow
+         */
+        shadow?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken checkbox.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken checkbox.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken checkbox.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken checkbox.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken checkbox.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken checkbox.icon.size
+         */
+        size?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken checkbox.icon.color
+         */
+        color?: string;
+        /**
+         * Checked color of icon
+         *
+         * @designToken checkbox.icon.checked.color
+         */
+        checkedColor?: string;
+        /**
+         * Checked hover color of icon
+         *
+         * @designToken checkbox.icon.checked.hover.color
+         */
+        checkedHoverColor?: string;
+        /**
+         * Disabled color of icon
+         *
+         * @designToken checkbox.icon.disabled.color
+         */
+        disabledColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/chip/index.d.ts b/components/lib/themes/types/chip/index.d.ts
new file mode 100644
index 000000000..8026f71b4
--- /dev/null
+++ b/components/lib/themes/types/chip/index.d.ts
@@ -0,0 +1,135 @@
+/**
+ *
+ * Chip Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/chip/)
+ *
+ * @module themes/chip
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ChipDesignTokens extends ColorSchemeDesignToken<ChipDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken chip.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken chip.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken chip.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken chip.gap
+         */
+        gap?: string;
+        /**
+         * Background of root
+         *
+         * @designToken chip.background
+         */
+        background?: string;
+        /**
+         * Color of root
+         *
+         * @designToken chip.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the image section
+     */
+    image?: {
+        /**
+         * Width of image
+         *
+         * @designToken chip.image.width
+         */
+        width?: string;
+        /**
+         * Height of image
+         *
+         * @designToken chip.image.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken chip.icon.size
+         */
+        size?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken chip.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the remove icon section
+     */
+    removeIcon?: {
+        /**
+         * Focus ring of remove icon
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of remove icon
+             *
+             * @designToken chip.remove.icon.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of remove icon
+             *
+             * @designToken chip.remove.icon.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of remove icon
+             *
+             * @designToken chip.remove.icon.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of remove icon
+             *
+             * @designToken chip.remove.icon.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of remove icon
+             *
+             * @designToken chip.remove.icon.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Color of remove icon
+         *
+         * @designToken chip.remove.icon.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/colorpicker/index.d.ts b/components/lib/themes/types/colorpicker/index.d.ts
new file mode 100644
index 000000000..8431e9558
--- /dev/null
+++ b/components/lib/themes/types/colorpicker/index.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * ColorPicker Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/colorpicker/)
+ *
+ * @module themes/colorpicker
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ColorPickerDesignTokens extends ColorSchemeDesignToken<ColorPickerDesignTokens> {
+    /**
+     * Used to pass tokens of the preview section
+     */
+    preview?: {
+        /**
+         * Width of preview
+         *
+         * @designToken colorpicker.preview.width
+         */
+        width?: string;
+        /**
+         * Height of preview
+         *
+         * @designToken colorpicker.preview.height
+         */
+        height?: string;
+        /**
+         * Border radius of preview
+         *
+         * @designToken colorpicker.preview.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of preview
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of preview
+             *
+             * @designToken colorpicker.preview.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of preview
+             *
+             * @designToken colorpicker.preview.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of preview
+             *
+             * @designToken colorpicker.preview.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of preview
+             *
+             * @designToken colorpicker.preview.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of preview
+             *
+             * @designToken colorpicker.preview.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the panel section
+     */
+    panel?: {
+        /**
+         * Shadow of panel
+         *
+         * @designToken colorpicker.panel.shadow
+         */
+        shadow?: string;
+        /**
+         * Border radius of panel
+         *
+         * @designToken colorpicker.panel.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Background of panel
+         *
+         * @designToken colorpicker.panel.background
+         */
+        background?: string;
+        /**
+         * Border color of panel
+         *
+         * @designToken colorpicker.panel.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the handle section
+     */
+    handle?: {
+        /**
+         * Color of handle
+         *
+         * @designToken colorpicker.handle.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/confirmdialog/index.d.ts b/components/lib/themes/types/confirmdialog/index.d.ts
new file mode 100644
index 000000000..6212e3409
--- /dev/null
+++ b/components/lib/themes/types/confirmdialog/index.d.ts
@@ -0,0 +1,42 @@
+/**
+ *
+ * ConfirmDialog Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/confirmdialog/)
+ *
+ * @module themes/confirmdialog
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ConfirmDialogDesignTokens extends ColorSchemeDesignToken<ConfirmDialogDesignTokens> {
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken confirmdialog.icon.size
+         */
+        size?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken confirmdialog.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Gap of content
+         *
+         * @designToken confirmdialog.content.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/confirmpopup/index.d.ts b/components/lib/themes/types/confirmpopup/index.d.ts
new file mode 100644
index 000000000..20e032c5e
--- /dev/null
+++ b/components/lib/themes/types/confirmpopup/index.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * ConfirmPopup Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/confirmpopup/)
+ *
+ * @module themes/confirmpopup
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ConfirmPopupDesignTokens extends ColorSchemeDesignToken<ConfirmPopupDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken confirmpopup.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken confirmpopup.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken confirmpopup.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken confirmpopup.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken confirmpopup.shadow
+         */
+        shadow?: string;
+        /**
+         * Gutter of root
+         *
+         * @designToken confirmpopup.gutter
+         */
+        gutter?: string;
+        /**
+         * Arrow offset of root
+         *
+         * @designToken confirmpopup.arrow.offset
+         */
+        arrowOffset?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken confirmpopup.content.padding
+         */
+        padding?: string;
+        /**
+         * Gap of content
+         *
+         * @designToken confirmpopup.content.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken confirmpopup.icon.size
+         */
+        size?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken confirmpopup.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Gap of footer
+         *
+         * @designToken confirmpopup.footer.gap
+         */
+        gap?: string;
+        /**
+         * Padding of footer
+         *
+         * @designToken confirmpopup.footer.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/contextmenu/index.d.ts b/components/lib/themes/types/contextmenu/index.d.ts
new file mode 100644
index 000000000..f20b8f96c
--- /dev/null
+++ b/components/lib/themes/types/contextmenu/index.d.ts
@@ -0,0 +1,182 @@
+/**
+ *
+ * ContextMenu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/contextmenu/)
+ *
+ * @module themes/contextmenu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ContextMenuDesignTokens extends ColorSchemeDesignToken<ContextMenuDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken contextmenu.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken contextmenu.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken contextmenu.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken contextmenu.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken contextmenu.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken contextmenu.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken contextmenu.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken contextmenu.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Active background of item
+         *
+         * @designToken contextmenu.item.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken contextmenu.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken contextmenu.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of item
+         *
+         * @designToken contextmenu.item.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken contextmenu.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken contextmenu.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken contextmenu.item.gap
+         */
+        gap?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken contextmenu.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken contextmenu.item.icon.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Icon active color of item
+             *
+             * @designToken contextmenu.item.icon.active.color
+             */
+            activeColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the submenu icon section
+     */
+    submenuIcon?: {
+        /**
+         * Size of submenu icon
+         *
+         * @designToken contextmenu.submenu.icon.size
+         */
+        size?: string;
+        /**
+         * Color of submenu icon
+         *
+         * @designToken contextmenu.submenu.icon.color
+         */
+        color?: string;
+        /**
+         * Focus color of submenu icon
+         *
+         * @designToken contextmenu.submenu.icon.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of submenu icon
+         *
+         * @designToken contextmenu.submenu.icon.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Border color of separator
+         *
+         * @designToken contextmenu.separator.border.color
+         */
+        borderColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/datatable/index.d.ts b/components/lib/themes/types/datatable/index.d.ts
new file mode 100644
index 000000000..da8fb743c
--- /dev/null
+++ b/components/lib/themes/types/datatable/index.d.ts
@@ -0,0 +1,817 @@
+/**
+ *
+ * DataTable Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/datatable/)
+ *
+ * @module themes/datatable
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DataTableDesignTokens extends ColorSchemeDesignToken<DataTableDesignTokens> {
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken datatable.header.background
+         */
+        background?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken datatable.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of header
+         *
+         * @designToken datatable.header.color
+         */
+        color?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken datatable.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken datatable.header.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header
+         *
+         * @designToken datatable.header.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the header cell section
+     */
+    headerCell?: {
+        /**
+         * Background of header cell
+         *
+         * @designToken datatable.header.cell.background
+         */
+        background?: string;
+        /**
+         * Hover background of header cell
+         *
+         * @designToken datatable.header.cell.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of header cell
+         *
+         * @designToken datatable.header.cell.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Border color of header cell
+         *
+         * @designToken datatable.header.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of header cell
+         *
+         * @designToken datatable.header.cell.color
+         */
+        color?: string;
+        /**
+         * Hover color of header cell
+         *
+         * @designToken datatable.header.cell.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of header cell
+         *
+         * @designToken datatable.header.cell.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Gap of header cell
+         *
+         * @designToken datatable.header.cell.gap
+         */
+        gap?: string;
+        /**
+         * Padding of header cell
+         *
+         * @designToken datatable.header.cell.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header cell
+         *
+         * @designToken datatable.header.cell.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Focus ring of header cell
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of header cell
+             *
+             * @designToken datatable.header.cell.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of header cell
+             *
+             * @designToken datatable.header.cell.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of header cell
+             *
+             * @designToken datatable.header.cell.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of header cell
+             *
+             * @designToken datatable.header.cell.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of header cell
+             *
+             * @designToken datatable.header.cell.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the row section
+     */
+    row?: {
+        /**
+         * Background of row
+         *
+         * @designToken datatable.row.background
+         */
+        background?: string;
+        /**
+         * Hover background of row
+         *
+         * @designToken datatable.row.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of row
+         *
+         * @designToken datatable.row.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Color of row
+         *
+         * @designToken datatable.row.color
+         */
+        color?: string;
+        /**
+         * Hover color of row
+         *
+         * @designToken datatable.row.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of row
+         *
+         * @designToken datatable.row.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Focus ring of row
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of row
+             *
+             * @designToken datatable.row.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of row
+             *
+             * @designToken datatable.row.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of row
+             *
+             * @designToken datatable.row.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of row
+             *
+             * @designToken datatable.row.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of row
+             *
+             * @designToken datatable.row.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Striped background of row
+         *
+         * @designToken datatable.row.striped.background
+         */
+        stripedBackground?: string;
+    };
+    /**
+     * Used to pass tokens of the body cell section
+     */
+    bodyCell?: {
+        /**
+         * Border color of body cell
+         *
+         * @designToken datatable.body.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Padding of body cell
+         *
+         * @designToken datatable.body.cell.padding
+         */
+        padding?: string;
+        /**
+         * Selected border color of body cell
+         *
+         * @designToken datatable.body.cell.selected.border.color
+         */
+        selectedBorderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the footer cell section
+     */
+    footerCell?: {
+        /**
+         * Background of footer cell
+         *
+         * @designToken datatable.footer.cell.background
+         */
+        background?: string;
+        /**
+         * Border color of footer cell
+         *
+         * @designToken datatable.footer.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of footer cell
+         *
+         * @designToken datatable.footer.cell.color
+         */
+        color?: string;
+        /**
+         * Padding of footer cell
+         *
+         * @designToken datatable.footer.cell.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of footer cell
+         *
+         * @designToken datatable.footer.cell.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Background of footer
+         *
+         * @designToken datatable.footer.background
+         */
+        background?: string;
+        /**
+         * Border color of footer
+         *
+         * @designToken datatable.footer.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of footer
+         *
+         * @designToken datatable.footer.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the drop point color section
+     */
+    dropPointColor?: {
+        /**
+         * 0 of drop point color
+         *
+         * @designToken datatable.drop.point.color.0
+         */
+        0?: string;
+        /**
+         * 1 of drop point color
+         *
+         * @designToken datatable.drop.point.color.1
+         */
+        1?: string;
+        /**
+         * 2 of drop point color
+         *
+         * @designToken datatable.drop.point.color.2
+         */
+        2?: string;
+        /**
+         * 3 of drop point color
+         *
+         * @designToken datatable.drop.point.color.3
+         */
+        3?: string;
+        /**
+         * 4 of drop point color
+         *
+         * @designToken datatable.drop.point.color.4
+         */
+        4?: string;
+        /**
+         * 5 of drop point color
+         *
+         * @designToken datatable.drop.point.color.5
+         */
+        5?: string;
+        /**
+         * 6 of drop point color
+         *
+         * @designToken datatable.drop.point.color.6
+         */
+        6?: string;
+        /**
+         * 7 of drop point color
+         *
+         * @designToken datatable.drop.point.color.7
+         */
+        7?: string;
+        /**
+         * 8 of drop point color
+         *
+         * @designToken datatable.drop.point.color.8
+         */
+        8?: string;
+        /**
+         * 9 of drop point color
+         *
+         * @designToken datatable.drop.point.color.9
+         */
+        9?: string;
+        /**
+         * 10 of drop point color
+         *
+         * @designToken datatable.drop.point.color.10
+         */
+        10?: string;
+        /**
+         * 11 of drop point color
+         *
+         * @designToken datatable.drop.point.color.11
+         */
+        11?: string;
+        /**
+         * 12 of drop point color
+         *
+         * @designToken datatable.drop.point.color.12
+         */
+        12?: string;
+        /**
+         * 13 of drop point color
+         *
+         * @designToken datatable.drop.point.color.13
+         */
+        13?: string;
+        /**
+         * 14 of drop point color
+         *
+         * @designToken datatable.drop.point.color.14
+         */
+        14?: string;
+    };
+    /**
+     * Used to pass tokens of the column resizer width section
+     */
+    columnResizerWidth?: {
+        /**
+         * 0 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.0
+         */
+        0?: string;
+        /**
+         * 1 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.1
+         */
+        1?: string;
+        /**
+         * 2 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.2
+         */
+        2?: string;
+        /**
+         * 3 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.3
+         */
+        3?: string;
+        /**
+         * 4 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.4
+         */
+        4?: string;
+        /**
+         * 5 of column resizer width
+         *
+         * @designToken datatable.column.resizer.width.5
+         */
+        5?: string;
+    };
+    /**
+     * Used to pass tokens of the resize indicator section
+     */
+    resizeIndicator?: {
+        /**
+         * Width of resize indicator
+         *
+         * @designToken datatable.resize.indicator.width
+         */
+        width?: string;
+        /**
+         * Color of resize indicator
+         *
+         * @designToken datatable.resize.indicator.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the sort icon section
+     */
+    sortIcon?: {
+        /**
+         * Color of sort icon
+         *
+         * @designToken datatable.sort.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of sort icon
+         *
+         * @designToken datatable.sort.icon.hover.color
+         */
+        hoverColor?: string;
+    };
+    /**
+     * Used to pass tokens of the loading icon section
+     */
+    loadingIcon?: {
+        /**
+         * Size of loading icon
+         *
+         * @designToken datatable.loading.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the row toggle button section
+     */
+    rowToggleButton?: {
+        /**
+         * Hover background of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected hover background of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.selected.hover.background
+         */
+        selectedHoverBackground?: string;
+        /**
+         * Color of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected hover color of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.selected.hover.color
+         */
+        selectedHoverColor?: string;
+        /**
+         * Size of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.size
+         */
+        size?: string;
+        /**
+         * Border radius of row toggle button
+         *
+         * @designToken datatable.row.toggle.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of row toggle button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of row toggle button
+             *
+             * @designToken datatable.row.toggle.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of row toggle button
+             *
+             * @designToken datatable.row.toggle.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of row toggle button
+             *
+             * @designToken datatable.row.toggle.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of row toggle button
+             *
+             * @designToken datatable.row.toggle.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of row toggle button
+             *
+             * @designToken datatable.row.toggle.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the filter section
+     */
+    filter?: {
+        /**
+         * Inline gap of filter
+         *
+         * @designToken datatable.filter.inline.gap
+         */
+        inlineGap?: string;
+        /**
+         * Overlay select of filter
+         */
+        overlaySelect?: {
+            /**
+             * Overlay select background of filter
+             *
+             * @designToken datatable.filter.overlay.select.background
+             */
+            background?: string;
+            /**
+             * Overlay select border color of filter
+             *
+             * @designToken datatable.filter.overlay.select.border.color
+             */
+            borderColor?: string;
+            /**
+             * Overlay select border radius of filter
+             *
+             * @designToken datatable.filter.overlay.select.border.radius
+             */
+            borderRadius?: string;
+            /**
+             * Overlay select color of filter
+             *
+             * @designToken datatable.filter.overlay.select.color
+             */
+            color?: string;
+            /**
+             * Overlay select shadow of filter
+             *
+             * @designToken datatable.filter.overlay.select.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Overlay popover of filter
+         */
+        overlayPopover?: {
+            /**
+             * Overlay popover background of filter
+             *
+             * @designToken datatable.filter.overlay.popover.background
+             */
+            background?: string;
+            /**
+             * Overlay popover border color of filter
+             *
+             * @designToken datatable.filter.overlay.popover.border.color
+             */
+            borderColor?: string;
+            /**
+             * Overlay popover border radius of filter
+             *
+             * @designToken datatable.filter.overlay.popover.border.radius
+             */
+            borderRadius?: string;
+            /**
+             * Overlay popover color of filter
+             *
+             * @designToken datatable.filter.overlay.popover.color
+             */
+            color?: string;
+            /**
+             * Overlay popover shadow of filter
+             *
+             * @designToken datatable.filter.overlay.popover.shadow
+             */
+            shadow?: string;
+            /**
+             * Overlay popover padding of filter
+             *
+             * @designToken datatable.filter.overlay.popover.padding
+             */
+            padding?: string;
+            /**
+             * Overlay popover gap of filter
+             *
+             * @designToken datatable.filter.overlay.popover.gap
+             */
+            gap?: string;
+        };
+        /**
+         * Rule of filter
+         */
+        rule?: {
+            /**
+             * Rule border color of filter
+             *
+             * @designToken datatable.filter.rule.border.color
+             */
+            borderColor?: string;
+        };
+        /**
+         * Constraint list of filter
+         */
+        constraintList?: {
+            /**
+             * Constraint list padding of filter
+             *
+             * @designToken datatable.filter.constraint.list.padding
+             */
+            padding?: string;
+            /**
+             * Constraint list gap of filter
+             *
+             * @designToken datatable.filter.constraint.list.gap
+             */
+            gap?: string;
+        };
+        /**
+         * Constraint of filter
+         */
+        constraint?: {
+            /**
+             * Constraint focus background of filter
+             *
+             * @designToken datatable.filter.constraint.focus.background
+             */
+            focusBackground?: string;
+            /**
+             * Constraint selected background of filter
+             *
+             * @designToken datatable.filter.constraint.selected.background
+             */
+            selectedBackground?: string;
+            /**
+             * Constraint selected focus background of filter
+             *
+             * @designToken datatable.filter.constraint.selected.focus.background
+             */
+            selectedFocusBackground?: string;
+            /**
+             * Constraint color of filter
+             *
+             * @designToken datatable.filter.constraint.color
+             */
+            color?: string;
+            /**
+             * Constraint focus color of filter
+             *
+             * @designToken datatable.filter.constraint.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Constraint selected color of filter
+             *
+             * @designToken datatable.filter.constraint.selected.color
+             */
+            selectedColor?: string;
+            /**
+             * Constraint selected focus color of filter
+             *
+             * @designToken datatable.filter.constraint.selected.focus.color
+             */
+            selectedFocusColor?: string;
+            /**
+             * Constraint separator of filter
+             */
+            separator?: {
+                /**
+                 * Constraint separator border color of filter
+                 *
+                 * @designToken datatable.filter.constraint.separator.border.color
+                 */
+                borderColor?: string;
+            };
+            /**
+             * Constraint padding of filter
+             *
+             * @designToken datatable.filter.constraint.padding
+             */
+            padding?: string;
+            /**
+             * Constraint border radius of filter
+             *
+             * @designToken datatable.filter.constraint.border.radius
+             */
+            borderRadius?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the paginator top section
+     */
+    paginatorTop?: {
+        /**
+         * Border color of paginator top
+         *
+         * @designToken datatable.paginator.top.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator top
+         *
+         * @designToken datatable.paginator.top.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the paginator bottom section
+     */
+    paginatorBottom?: {
+        /**
+         * Border color of paginator bottom
+         *
+         * @designToken datatable.paginator.bottom.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator bottom
+         *
+         * @designToken datatable.paginator.bottom.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border color of root
+         *
+         * @designToken datatable.border.color
+         */
+        borderColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/dataview/index.d.ts b/components/lib/themes/types/dataview/index.d.ts
new file mode 100644
index 000000000..4d7274d7f
--- /dev/null
+++ b/components/lib/themes/types/dataview/index.d.ts
@@ -0,0 +1,200 @@
+/**
+ *
+ * DataView Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ *
+ * @module themes/dataview
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DataViewDesignTokens extends ColorSchemeDesignToken<DataViewDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border color of root
+         *
+         * @designToken dataview.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of root
+         *
+         * @designToken dataview.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken dataview.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken dataview.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken dataview.header.background
+         */
+        background?: string;
+        /**
+         * Color of header
+         *
+         * @designToken dataview.header.color
+         */
+        color?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken dataview.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken dataview.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken dataview.header.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of header
+         *
+         * @designToken dataview.header.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Background of content
+         *
+         * @designToken dataview.content.background
+         */
+        background?: string;
+        /**
+         * Color of content
+         *
+         * @designToken dataview.content.color
+         */
+        color?: string;
+        /**
+         * Border color of content
+         *
+         * @designToken dataview.content.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of content
+         *
+         * @designToken dataview.content.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Padding of content
+         *
+         * @designToken dataview.content.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of content
+         *
+         * @designToken dataview.content.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Background of footer
+         *
+         * @designToken dataview.footer.background
+         */
+        background?: string;
+        /**
+         * Color of footer
+         *
+         * @designToken dataview.footer.color
+         */
+        color?: string;
+        /**
+         * Border color of footer
+         *
+         * @designToken dataview.footer.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of footer
+         *
+         * @designToken dataview.footer.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Padding of footer
+         *
+         * @designToken dataview.footer.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of footer
+         *
+         * @designToken dataview.footer.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the paginator top section
+     */
+    paginatorTop?: {
+        /**
+         * Border color of paginator top
+         *
+         * @designToken dataview.paginator.top.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator top
+         *
+         * @designToken dataview.paginator.top.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the paginator bottom section
+     */
+    paginatorBottom?: {
+        /**
+         * Border color of paginator bottom
+         *
+         * @designToken dataview.paginator.bottom.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator bottom
+         *
+         * @designToken dataview.paginator.bottom.border.width
+         */
+        borderWidth?: string;
+    };
+}
diff --git a/components/lib/themes/types/datepicker/index.d.ts b/components/lib/themes/types/datepicker/index.d.ts
new file mode 100644
index 000000000..ef56428e3
--- /dev/null
+++ b/components/lib/themes/types/datepicker/index.d.ts
@@ -0,0 +1,540 @@
+/**
+ *
+ * DatePicker Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/datepicker/)
+ *
+ * @module themes/datepicker
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DatePickerDesignTokens extends ColorSchemeDesignToken<DatePickerDesignTokens> {
+    /**
+     * Used to pass tokens of the panel section
+     */
+    panel?: {
+        /**
+         * Background of panel
+         *
+         * @designToken datepicker.panel.background
+         */
+        background?: string;
+        /**
+         * Border color of panel
+         *
+         * @designToken datepicker.panel.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of panel
+         *
+         * @designToken datepicker.panel.color
+         */
+        color?: string;
+        /**
+         * Border radius of panel
+         *
+         * @designToken datepicker.panel.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of panel
+         *
+         * @designToken datepicker.panel.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding of panel
+         *
+         * @designToken datepicker.panel.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken datepicker.header.background
+         */
+        background?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken datepicker.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of header
+         *
+         * @designToken datepicker.header.color
+         */
+        color?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken datepicker.header.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header
+         *
+         * @designToken datepicker.header.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Gap of header
+         *
+         * @designToken datepicker.header.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the title section
+     */
+    title?: {
+        /**
+         * Gap of title
+         *
+         * @designToken datepicker.title.gap
+         */
+        gap?: string;
+        /**
+         * Font weight of title
+         *
+         * @designToken datepicker.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken datepicker.dropdown.width
+         */
+        width?: string;
+        /**
+         * Border color of dropdown
+         *
+         * @designToken datepicker.dropdown.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of dropdown
+         *
+         * @designToken datepicker.dropdown.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Active border color of dropdown
+         *
+         * @designToken datepicker.dropdown.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Border radius of dropdown
+         *
+         * @designToken datepicker.dropdown.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of dropdown
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of dropdown
+             *
+             * @designToken datepicker.dropdown.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of dropdown
+             *
+             * @designToken datepicker.dropdown.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of dropdown
+             *
+             * @designToken datepicker.dropdown.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of dropdown
+             *
+             * @designToken datepicker.dropdown.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of dropdown
+             *
+             * @designToken datepicker.dropdown.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Background of dropdown
+         *
+         * @designToken datepicker.dropdown.background
+         */
+        background?: string;
+        /**
+         * Hover background of dropdown
+         *
+         * @designToken datepicker.dropdown.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of dropdown
+         *
+         * @designToken datepicker.dropdown.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken datepicker.dropdown.color
+         */
+        color?: string;
+        /**
+         * Hover color of dropdown
+         *
+         * @designToken datepicker.dropdown.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of dropdown
+         *
+         * @designToken datepicker.dropdown.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the input icon section
+     */
+    inputIcon?: {
+        /**
+         * Color of input icon
+         *
+         * @designToken datepicker.input.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the view month section
+     */
+    viewMonth?: {
+        /**
+         * Hover background of view month
+         *
+         * @designToken datepicker.view.month.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of view month
+         *
+         * @designToken datepicker.view.month.color
+         */
+        color?: string;
+        /**
+         * Hover color of view month
+         *
+         * @designToken datepicker.view.month.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Padding of view month
+         *
+         * @designToken datepicker.view.month.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the view year section
+     */
+    viewYear?: {
+        /**
+         * Hover background of view year
+         *
+         * @designToken datepicker.view.year.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of view year
+         *
+         * @designToken datepicker.view.year.color
+         */
+        color?: string;
+        /**
+         * Hover color of view year
+         *
+         * @designToken datepicker.view.year.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Padding of view year
+         *
+         * @designToken datepicker.view.year.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the group section
+     */
+    group?: {
+        /**
+         * Border color of group
+         *
+         * @designToken datepicker.group.border.color
+         */
+        borderColor?: string;
+        /**
+         * Gap of group
+         *
+         * @designToken datepicker.group.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the day view section
+     */
+    dayView?: {
+        /**
+         * Margin of day view
+         *
+         * @designToken datepicker.day.view.margin
+         */
+        margin?: string;
+    };
+    /**
+     * Used to pass tokens of the week day section
+     */
+    weekDay?: {
+        /**
+         * Padding of week day
+         *
+         * @designToken datepicker.week.day.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of week day
+         *
+         * @designToken datepicker.week.day.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Color of week day
+         *
+         * @designToken datepicker.week.day.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the date section
+     */
+    date?: {
+        /**
+         * Hover background of date
+         *
+         * @designToken datepicker.date.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of date
+         *
+         * @designToken datepicker.date.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Color of date
+         *
+         * @designToken datepicker.date.color
+         */
+        color?: string;
+        /**
+         * Hover color of date
+         *
+         * @designToken datepicker.date.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of date
+         *
+         * @designToken datepicker.date.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Width of date
+         *
+         * @designToken datepicker.date.width
+         */
+        width?: string;
+        /**
+         * Height of date
+         *
+         * @designToken datepicker.date.height
+         */
+        height?: string;
+        /**
+         * Border radius of date
+         *
+         * @designToken datepicker.date.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of date
+         *
+         * @designToken datepicker.date.padding
+         */
+        padding?: string;
+        /**
+         * Focus ring of date
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of date
+             *
+             * @designToken datepicker.date.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of date
+             *
+             * @designToken datepicker.date.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of date
+             *
+             * @designToken datepicker.date.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of date
+             *
+             * @designToken datepicker.date.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of date
+             *
+             * @designToken datepicker.date.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the month view section
+     */
+    monthView?: {
+        /**
+         * Margin of month view
+         *
+         * @designToken datepicker.month.view.margin
+         */
+        margin?: string;
+    };
+    /**
+     * Used to pass tokens of the month section
+     */
+    month?: {
+        /**
+         * Border radius of month
+         *
+         * @designToken datepicker.month.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the year view section
+     */
+    yearView?: {
+        /**
+         * Margin of year view
+         *
+         * @designToken datepicker.year.view.margin
+         */
+        margin?: string;
+    };
+    /**
+     * Used to pass tokens of the year section
+     */
+    year?: {
+        /**
+         * Border radius of year
+         *
+         * @designToken datepicker.year.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the buttonbar section
+     */
+    buttonbar?: {
+        /**
+         * Padding of buttonbar
+         *
+         * @designToken datepicker.buttonbar.padding
+         */
+        padding?: string;
+        /**
+         * Border color of buttonbar
+         *
+         * @designToken datepicker.buttonbar.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the time picker section
+     */
+    timePicker?: {
+        /**
+         * Padding of time picker
+         *
+         * @designToken datepicker.time.picker.padding
+         */
+        padding?: string;
+        /**
+         * Border color of time picker
+         *
+         * @designToken datepicker.time.picker.border.color
+         */
+        borderColor?: string;
+        /**
+         * Gap of time picker
+         *
+         * @designToken datepicker.time.picker.gap
+         */
+        gap?: string;
+        /**
+         * Button gap of time picker
+         *
+         * @designToken datepicker.time.picker.button.gap
+         */
+        buttonGap?: string;
+    };
+    /**
+     * Used to pass tokens of the today section
+     */
+    today?: {
+        /**
+         * Background of today
+         *
+         * @designToken datepicker.today.background
+         */
+        background?: string;
+        /**
+         * Color of today
+         *
+         * @designToken datepicker.today.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/dialog/index.d.ts b/components/lib/themes/types/dialog/index.d.ts
new file mode 100644
index 000000000..48d00dcc4
--- /dev/null
+++ b/components/lib/themes/types/dialog/index.d.ts
@@ -0,0 +1,111 @@
+/**
+ *
+ * Dialog Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/dialog/)
+ *
+ * @module themes/dialog
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DialogDesignTokens extends ColorSchemeDesignToken<DialogDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken dialog.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken dialog.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken dialog.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken dialog.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken dialog.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Padding of header
+         *
+         * @designToken dialog.header.padding
+         */
+        padding?: string;
+        /**
+         * Gap of header
+         *
+         * @designToken dialog.header.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the title section
+     */
+    title?: {
+        /**
+         * Font size of title
+         *
+         * @designToken dialog.title.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of title
+         *
+         * @designToken dialog.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken dialog.content.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Padding of footer
+         *
+         * @designToken dialog.footer.padding
+         */
+        padding?: string;
+        /**
+         * Gap of footer
+         *
+         * @designToken dialog.footer.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/divider/index.d.ts b/components/lib/themes/types/divider/index.d.ts
new file mode 100644
index 000000000..aa387f30d
--- /dev/null
+++ b/components/lib/themes/types/divider/index.d.ts
@@ -0,0 +1,98 @@
+/**
+ *
+ * Divider Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/divider/)
+ *
+ * @module themes/divider
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DividerDesignTokens extends ColorSchemeDesignToken<DividerDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border color of root
+         *
+         * @designToken divider.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Background of content
+         *
+         * @designToken divider.content.background
+         */
+        background?: string;
+        /**
+         * Color of content
+         *
+         * @designToken divider.content.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the horizontal section
+     */
+    horizontal?: {
+        /**
+         * Margin of horizontal
+         *
+         * @designToken divider.horizontal.margin
+         */
+        margin?: string;
+        /**
+         * Padding of horizontal
+         *
+         * @designToken divider.horizontal.padding
+         */
+        padding?: string;
+        /**
+         * Content of horizontal
+         */
+        content?: {
+            /**
+             * Content padding of horizontal
+             *
+             * @designToken divider.horizontal.content.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the vertical section
+     */
+    vertical?: {
+        /**
+         * Margin of vertical
+         *
+         * @designToken divider.vertical.margin
+         */
+        margin?: string;
+        /**
+         * Padding of vertical
+         *
+         * @designToken divider.vertical.padding
+         */
+        padding?: string;
+        /**
+         * Content of vertical
+         */
+        content?: {
+            /**
+             * Content padding of vertical
+             *
+             * @designToken divider.vertical.content.padding
+             */
+            padding?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/dock/index.d.ts b/components/lib/themes/types/dock/index.d.ts
new file mode 100644
index 000000000..b929adf6b
--- /dev/null
+++ b/components/lib/themes/types/dock/index.d.ts
@@ -0,0 +1,101 @@
+/**
+ *
+ * Dock Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/dock/)
+ *
+ * @module themes/dock
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DockDesignTokens extends ColorSchemeDesignToken<DockDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken dock.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken dock.border.color
+         */
+        borderColor?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken dock.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken dock.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Border radius of item
+         *
+         * @designToken dock.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken dock.item.padding
+         */
+        padding?: string;
+        /**
+         * Size of item
+         *
+         * @designToken dock.item.size
+         */
+        size?: string;
+        /**
+         * Focus ring of item
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of item
+             *
+             * @designToken dock.item.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of item
+             *
+             * @designToken dock.item.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of item
+             *
+             * @designToken dock.item.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of item
+             *
+             * @designToken dock.item.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of item
+             *
+             * @designToken dock.item.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/drawer/index.d.ts b/components/lib/themes/types/drawer/index.d.ts
new file mode 100644
index 000000000..b5032a287
--- /dev/null
+++ b/components/lib/themes/types/drawer/index.d.ts
@@ -0,0 +1,88 @@
+/**
+ *
+ * Drawer Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/drawer/)
+ *
+ * @module themes/drawer
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface DrawerDesignTokens extends ColorSchemeDesignToken<DrawerDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken drawer.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken drawer.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken drawer.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken drawer.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken drawer.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Padding of header
+         *
+         * @designToken drawer.header.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the title section
+     */
+    title?: {
+        /**
+         * Font size of title
+         *
+         * @designToken drawer.title.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of title
+         *
+         * @designToken drawer.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken drawer.content.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/editor/index.d.ts b/components/lib/themes/types/editor/index.d.ts
new file mode 100644
index 000000000..c24f7b29c
--- /dev/null
+++ b/components/lib/themes/types/editor/index.d.ts
@@ -0,0 +1,165 @@
+/**
+ *
+ * Editor Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/editor/)
+ *
+ * @module themes/editor
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface EditorDesignTokens extends ColorSchemeDesignToken<EditorDesignTokens> {
+    /**
+     * Used to pass tokens of the toolbar section
+     */
+    toolbar?: {
+        /**
+         * Background of toolbar
+         *
+         * @designToken editor.toolbar.background
+         */
+        background?: string;
+        /**
+         * Border color of toolbar
+         *
+         * @designToken editor.toolbar.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of toolbar
+         *
+         * @designToken editor.toolbar.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the toolbar item section
+     */
+    toolbarItem?: {
+        /**
+         * Color of toolbar item
+         *
+         * @designToken editor.toolbar.item.color
+         */
+        color?: string;
+        /**
+         * Hover color of toolbar item
+         *
+         * @designToken editor.toolbar.item.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of toolbar item
+         *
+         * @designToken editor.toolbar.item.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken editor.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken editor.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken editor.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken editor.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken editor.overlay.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding of overlay
+         *
+         * @designToken editor.overlay.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay option section
+     */
+    overlayOption?: {
+        /**
+         * Focus background of overlay option
+         *
+         * @designToken editor.overlay.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Color of overlay option
+         *
+         * @designToken editor.overlay.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of overlay option
+         *
+         * @designToken editor.overlay.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Padding of overlay option
+         *
+         * @designToken editor.overlay.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of overlay option
+         *
+         * @designToken editor.overlay.option.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Background of content
+         *
+         * @designToken editor.content.background
+         */
+        background?: string;
+        /**
+         * Border color of content
+         *
+         * @designToken editor.content.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of content
+         *
+         * @designToken editor.content.color
+         */
+        color?: string;
+        /**
+         * Border radius of content
+         *
+         * @designToken editor.content.border.radius
+         */
+        borderRadius?: string;
+    };
+}
diff --git a/components/lib/themes/types/fieldset/index.d.ts b/components/lib/themes/types/fieldset/index.d.ts
new file mode 100644
index 000000000..b1ae411dc
--- /dev/null
+++ b/components/lib/themes/types/fieldset/index.d.ts
@@ -0,0 +1,177 @@
+/**
+ *
+ * Fieldset Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/fieldset/)
+ *
+ * @module themes/fieldset
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface FieldsetDesignTokens extends ColorSchemeDesignToken<FieldsetDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken fieldset.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken fieldset.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken fieldset.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of root
+         *
+         * @designToken fieldset.color
+         */
+        color?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken fieldset.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the legend section
+     */
+    legend?: {
+        /**
+         * Background of legend
+         *
+         * @designToken fieldset.legend.background
+         */
+        background?: string;
+        /**
+         * Hover background of legend
+         *
+         * @designToken fieldset.legend.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of legend
+         *
+         * @designToken fieldset.legend.color
+         */
+        color?: string;
+        /**
+         * Hover color of legend
+         *
+         * @designToken fieldset.legend.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Border radius of legend
+         *
+         * @designToken fieldset.legend.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Border width of legend
+         *
+         * @designToken fieldset.legend.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of legend
+         *
+         * @designToken fieldset.legend.border.color
+         */
+        borderColor?: string;
+        /**
+         * Padding of legend
+         *
+         * @designToken fieldset.legend.padding
+         */
+        padding?: string;
+        /**
+         * Gap of legend
+         *
+         * @designToken fieldset.legend.gap
+         */
+        gap?: string;
+        /**
+         * Font weight of legend
+         *
+         * @designToken fieldset.legend.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Focus ring of legend
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of legend
+             *
+             * @designToken fieldset.legend.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of legend
+             *
+             * @designToken fieldset.legend.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of legend
+             *
+             * @designToken fieldset.legend.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of legend
+             *
+             * @designToken fieldset.legend.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of legend
+             *
+             * @designToken fieldset.legend.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the toggle icon section
+     */
+    toggleIcon?: {
+        /**
+         * Color of toggle icon
+         *
+         * @designToken fieldset.toggle.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of toggle icon
+         *
+         * @designToken fieldset.toggle.icon.hover.color
+         */
+        hoverColor?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken fieldset.content.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/fileupload/index.d.ts b/components/lib/themes/types/fileupload/index.d.ts
new file mode 100644
index 000000000..cd4e350fa
--- /dev/null
+++ b/components/lib/themes/types/fileupload/index.d.ts
@@ -0,0 +1,157 @@
+/**
+ *
+ * FileUpload Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/fileupload/)
+ *
+ * @module themes/fileupload
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface FileUploadDesignTokens extends ColorSchemeDesignToken<FileUploadDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken fileupload.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken fileupload.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken fileupload.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken fileupload.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken fileupload.header.background
+         */
+        background?: string;
+        /**
+         * Color of header
+         *
+         * @designToken fileupload.header.color
+         */
+        color?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken fileupload.header.padding
+         */
+        padding?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken fileupload.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of header
+         *
+         * @designToken fileupload.header.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of header
+         *
+         * @designToken fileupload.header.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Highlight border color of content
+         *
+         * @designToken fileupload.content.highlight.border.color
+         */
+        highlightBorderColor?: string;
+        /**
+         * Padding of content
+         *
+         * @designToken fileupload.content.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the file section
+     */
+    file?: {
+        /**
+         * Padding of file
+         *
+         * @designToken fileupload.file.padding
+         */
+        padding?: string;
+        /**
+         * Gap of file
+         *
+         * @designToken fileupload.file.gap
+         */
+        gap?: string;
+        /**
+         * Border color of file
+         *
+         * @designToken fileupload.file.border.color
+         */
+        borderColor?: string;
+        /**
+         * Info of file
+         */
+        info?: {
+            /**
+             * Info gap of file
+             *
+             * @designToken fileupload.file.info.gap
+             */
+            gap?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the progressbar section
+     */
+    progressbar?: {
+        /**
+         * Height of progressbar
+         *
+         * @designToken fileupload.progressbar.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the basic section
+     */
+    basic?: {
+        /**
+         * Gap of basic
+         *
+         * @designToken fileupload.basic.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/floatlabel/index.d.ts b/components/lib/themes/types/floatlabel/index.d.ts
new file mode 100644
index 000000000..d3bd1bbed
--- /dev/null
+++ b/components/lib/themes/types/floatlabel/index.d.ts
@@ -0,0 +1,43 @@
+/**
+ *
+ * FloatLabel Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/floatlabel/)
+ *
+ * @module themes/floatlabel
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface FloatLabelDesignTokens extends ColorSchemeDesignToken<FloatLabelDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Color of root
+         *
+         * @designToken floatlabel.color
+         */
+        color?: string;
+        /**
+         * Focus color of root
+         *
+         * @designToken floatlabel.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Invalid color of root
+         *
+         * @designToken floatlabel.invalid.color
+         */
+        invalidColor?: string;
+        /**
+         * Transition duration of root
+         *
+         * @designToken floatlabel.transition.duration
+         */
+        transitionDuration?: string;
+    };
+}
diff --git a/components/lib/themes/types/galleria/index.d.ts b/components/lib/themes/types/galleria/index.d.ts
new file mode 100644
index 000000000..5d94acebf
--- /dev/null
+++ b/components/lib/themes/types/galleria/index.d.ts
@@ -0,0 +1,510 @@
+/**
+ *
+ * Galleria Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/galleria/)
+ *
+ * @module themes/galleria
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface GalleriaDesignTokens extends ColorSchemeDesignToken<GalleriaDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border width of root
+         *
+         * @designToken galleria.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken galleria.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken galleria.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the nav button section
+     */
+    navButton?: {
+        /**
+         * Background of nav button
+         *
+         * @designToken galleria.nav.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of nav button
+         *
+         * @designToken galleria.nav.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of nav button
+         *
+         * @designToken galleria.nav.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of nav button
+         *
+         * @designToken galleria.nav.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Size of nav button
+         *
+         * @designToken galleria.nav.button.size
+         */
+        size?: string;
+        /**
+         * Gutter of nav button
+         *
+         * @designToken galleria.nav.button.gutter
+         */
+        gutter?: string;
+        /**
+         * Prev of nav button
+         */
+        prev?: {
+            /**
+             * Prev border radius of nav button
+             *
+             * @designToken galleria.nav.button.prev.border.radius
+             */
+            borderRadius?: string;
+        };
+        /**
+         * Next of nav button
+         */
+        next?: {
+            /**
+             * Next border radius of nav button
+             *
+             * @designToken galleria.nav.button.next.border.radius
+             */
+            borderRadius?: string;
+        };
+        /**
+         * Focus ring of nav button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of nav button
+             *
+             * @designToken galleria.nav.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of nav button
+             *
+             * @designToken galleria.nav.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of nav button
+             *
+             * @designToken galleria.nav.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of nav button
+             *
+             * @designToken galleria.nav.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of nav button
+             *
+             * @designToken galleria.nav.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the nav icon section
+     */
+    navIcon?: {
+        /**
+         * Size of nav icon
+         *
+         * @designToken galleria.nav.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the thumbnails content section
+     */
+    thumbnailsContent?: {
+        /**
+         * Background of thumbnails content
+         *
+         * @designToken galleria.thumbnails.content.background
+         */
+        background?: string;
+        /**
+         * Padding of thumbnails content
+         *
+         * @designToken galleria.thumbnails.content.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the thumbnail nav button section
+     */
+    thumbnailNavButton?: {
+        /**
+         * Size of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.size
+         */
+        size?: string;
+        /**
+         * Border radius of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gutter of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.gutter
+         */
+        gutter?: string;
+        /**
+         * Focus ring of thumbnail nav button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of thumbnail nav button
+             *
+             * @designToken galleria.thumbnail.nav.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of thumbnail nav button
+             *
+             * @designToken galleria.thumbnail.nav.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of thumbnail nav button
+             *
+             * @designToken galleria.thumbnail.nav.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of thumbnail nav button
+             *
+             * @designToken galleria.thumbnail.nav.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of thumbnail nav button
+             *
+             * @designToken galleria.thumbnail.nav.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Hover background of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of thumbnail nav button
+         *
+         * @designToken galleria.thumbnail.nav.button.hover.color
+         */
+        hoverColor?: string;
+    };
+    /**
+     * Used to pass tokens of the thumbnail nav button icon section
+     */
+    thumbnailNavButtonIcon?: {
+        /**
+         * Size of thumbnail nav button icon
+         *
+         * @designToken galleria.thumbnail.nav.button.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the caption section
+     */
+    caption?: {
+        /**
+         * Background of caption
+         *
+         * @designToken galleria.caption.background
+         */
+        background?: string;
+        /**
+         * Color of caption
+         *
+         * @designToken galleria.caption.color
+         */
+        color?: string;
+        /**
+         * Padding of caption
+         *
+         * @designToken galleria.caption.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the indicator list section
+     */
+    indicatorList?: {
+        /**
+         * Gap of indicator list
+         *
+         * @designToken galleria.indicator.list.gap
+         */
+        gap?: string;
+        /**
+         * Padding of indicator list
+         *
+         * @designToken galleria.indicator.list.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the indicator button section
+     */
+    indicatorButton?: {
+        /**
+         * Width of indicator button
+         *
+         * @designToken galleria.indicator.button.width
+         */
+        width?: string;
+        /**
+         * Height of indicator button
+         *
+         * @designToken galleria.indicator.button.height
+         */
+        height?: string;
+        /**
+         * Active background of indicator button
+         *
+         * @designToken galleria.indicator.button.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border radius of indicator button
+         *
+         * @designToken galleria.indicator.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of indicator button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of indicator button
+             *
+             * @designToken galleria.indicator.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of indicator button
+             *
+             * @designToken galleria.indicator.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of indicator button
+             *
+             * @designToken galleria.indicator.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of indicator button
+             *
+             * @designToken galleria.indicator.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of indicator button
+             *
+             * @designToken galleria.indicator.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Background of indicator button
+         *
+         * @designToken galleria.indicator.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of indicator button
+         *
+         * @designToken galleria.indicator.button.hover.background
+         */
+        hoverBackground?: string;
+    };
+    /**
+     * Used to pass tokens of the inset indicator list section
+     */
+    insetIndicatorList?: {
+        /**
+         * Background of inset indicator list
+         *
+         * @designToken galleria.inset.indicator.list.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the inset indicator button section
+     */
+    insetIndicatorButton?: {
+        /**
+         * Background of inset indicator button
+         *
+         * @designToken galleria.inset.indicator.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of inset indicator button
+         *
+         * @designToken galleria.inset.indicator.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of inset indicator button
+         *
+         * @designToken galleria.inset.indicator.button.active.background
+         */
+        activeBackground?: string;
+    };
+    /**
+     * Used to pass tokens of the mask section
+     */
+    mask?: {
+        /**
+         * Background of mask
+         *
+         * @designToken galleria.mask.background
+         */
+        background?: string;
+        /**
+         * Color of mask
+         *
+         * @designToken galleria.mask.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the close button section
+     */
+    closeButton?: {
+        /**
+         * Size of close button
+         *
+         * @designToken galleria.close.button.size
+         */
+        size?: string;
+        /**
+         * Gutter of close button
+         *
+         * @designToken galleria.close.button.gutter
+         */
+        gutter?: string;
+        /**
+         * Background of close button
+         *
+         * @designToken galleria.close.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of close button
+         *
+         * @designToken galleria.close.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of close button
+         *
+         * @designToken galleria.close.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of close button
+         *
+         * @designToken galleria.close.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Border radius of close button
+         *
+         * @designToken galleria.close.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of close button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of close button
+             *
+             * @designToken galleria.close.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of close button
+             *
+             * @designToken galleria.close.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of close button
+             *
+             * @designToken galleria.close.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of close button
+             *
+             * @designToken galleria.close.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of close button
+             *
+             * @designToken galleria.close.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the close button icon section
+     */
+    closeButtonIcon?: {
+        /**
+         * Size of close button icon
+         *
+         * @designToken galleria.close.button.icon.size
+         */
+        size?: string;
+    };
+}
diff --git a/components/lib/themes/types/iconfield/index.d.ts b/components/lib/themes/types/iconfield/index.d.ts
new file mode 100644
index 000000000..e6f33cddc
--- /dev/null
+++ b/components/lib/themes/types/iconfield/index.d.ts
@@ -0,0 +1,25 @@
+/**
+ *
+ * IconField Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/iconfield/)
+ *
+ * @module themes/iconfield
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface IconFieldDesignTokens extends ColorSchemeDesignToken<IconFieldDesignTokens> {
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Color of icon
+         *
+         * @designToken iconfield.icon.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/image/index.d.ts b/components/lib/themes/types/image/index.d.ts
new file mode 100644
index 000000000..e6783c5a5
--- /dev/null
+++ b/components/lib/themes/types/image/index.d.ts
@@ -0,0 +1,199 @@
+/**
+ *
+ * Image Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/image/)
+ *
+ * @module themes/image
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ImageDesignTokens extends ColorSchemeDesignToken<ImageDesignTokens> {
+    /**
+     * Used to pass tokens of the preview section
+     */
+    preview?: {
+        /**
+         * Icon of preview
+         */
+        icon?: {
+            /**
+             * Icon size of preview
+             *
+             * @designToken image.preview.icon.size
+             */
+            size?: string;
+        };
+        /**
+         * Mask of preview
+         */
+        mask?: {
+            /**
+             * Mask background of preview
+             *
+             * @designToken image.preview.mask.background
+             */
+            background?: string;
+            /**
+             * Mask color of preview
+             *
+             * @designToken image.preview.mask.color
+             */
+            color?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the toolbar section
+     */
+    toolbar?: {
+        /**
+         * Position of toolbar
+         */
+        position?: {
+            /**
+             * Position left of toolbar
+             *
+             * @designToken image.toolbar.position.left
+             */
+            left?: string;
+            /**
+             * Position right of toolbar
+             *
+             * @designToken image.toolbar.position.right
+             */
+            right?: string;
+            /**
+             * Position top of toolbar
+             *
+             * @designToken image.toolbar.position.top
+             */
+            top?: string;
+            /**
+             * Position bottom of toolbar
+             *
+             * @designToken image.toolbar.position.bottom
+             */
+            bottom?: string;
+        };
+        /**
+         * Blur of toolbar
+         *
+         * @designToken image.toolbar.blur
+         */
+        blur?: string;
+        /**
+         * Background of toolbar
+         *
+         * @designToken image.toolbar.background
+         */
+        background?: string;
+        /**
+         * Border color of toolbar
+         *
+         * @designToken image.toolbar.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of toolbar
+         *
+         * @designToken image.toolbar.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of toolbar
+         *
+         * @designToken image.toolbar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of toolbar
+         *
+         * @designToken image.toolbar.padding
+         */
+        padding?: string;
+        /**
+         * Gap of toolbar
+         *
+         * @designToken image.toolbar.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the action section
+     */
+    action?: {
+        /**
+         * Hover background of action
+         *
+         * @designToken image.action.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of action
+         *
+         * @designToken image.action.color
+         */
+        color?: string;
+        /**
+         * Hover color of action
+         *
+         * @designToken image.action.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Size of action
+         *
+         * @designToken image.action.size
+         */
+        size?: string;
+        /**
+         * Icon size of action
+         *
+         * @designToken image.action.icon.size
+         */
+        iconSize?: string;
+        /**
+         * Border radius of action
+         *
+         * @designToken image.action.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of action
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of action
+             *
+             * @designToken image.action.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of action
+             *
+             * @designToken image.action.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of action
+             *
+             * @designToken image.action.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of action
+             *
+             * @designToken image.action.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of action
+             *
+             * @designToken image.action.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/index.d.ts b/components/lib/themes/types/index.d.ts
new file mode 100644
index 000000000..ba41e8628
--- /dev/null
+++ b/components/lib/themes/types/index.d.ts
@@ -0,0 +1,89 @@
+/**
+ *
+ * [Live Demo](https://www.primevue.org/)
+ *
+ * @module themes
+ *
+ */
+export interface ColorSchemeDesignToken<T> {
+    colorScheme?: {
+        light?: Omit<T, 'colorScheme'>;
+        dark?: Omit<T, 'colorScheme'>;
+    };
+}
+
+export interface PaletteDesignToken {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+}
+
+export interface PrimitiveDesignTokens {
+    borderRadius?: {
+        none?: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    emerald?: PaletteDesignToken;
+    green?: PaletteDesignToken;
+    lime?: PaletteDesignToken;
+    red?: PaletteDesignToken;
+    orange?: PaletteDesignToken;
+    amber?: PaletteDesignToken;
+    yellow?: PaletteDesignToken;
+    teal?: PaletteDesignToken;
+    cyan?: PaletteDesignToken;
+    sky?: PaletteDesignToken;
+    blue?: PaletteDesignToken;
+    indigo?: PaletteDesignToken;
+    violet?: PaletteDesignToken;
+    purple?: PaletteDesignToken;
+    fuchsia?: PaletteDesignToken;
+    pink?: PaletteDesignToken;
+    rose?: PaletteDesignToken;
+    slate?: PaletteDesignToken;
+    gray?: PaletteDesignToken;
+    zinc?: PaletteDesignToken;
+    neutral?: PaletteDesignToken;
+    stone?: PaletteDesignToken;
+    [key: string]: any;
+}
+
+export interface SemanticDesignTokens {
+    transitionDuration?: string;
+    focusRing?: {
+        width?: string;
+        style?: string;
+        color?: string;
+        offset?: string;
+        shadow?: string;
+    };
+    iconSize?: string;
+    anchorGutter?: string;
+    primary?: PaletteDesignToken;
+    formField: {
+        paddingX?: string;
+        paddingY?: string;
+        borderRadius?: string;
+        focusRing?: {
+            width?: string;
+            style?: string;
+            color?: string;
+            offset?: string;
+            shadow?: string;
+        };
+    };
+    // @todo
+    [key: string]: any;
+}
diff --git a/components/lib/themes/types/inlinemessage/index.d.ts b/components/lib/themes/types/inlinemessage/index.d.ts
new file mode 100644
index 000000000..62e47e9f5
--- /dev/null
+++ b/components/lib/themes/types/inlinemessage/index.d.ts
@@ -0,0 +1,233 @@
+/**
+ *
+ * InlineMessage Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/inlinemessage/)
+ *
+ * @module themes/inlinemessage
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface InlineMessageDesignTokens extends ColorSchemeDesignToken<InlineMessageDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Padding of root
+         *
+         * @designToken inlinemessage.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken inlinemessage.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken inlinemessage.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the text section
+     */
+    text?: {
+        /**
+         * Font weight of text
+         *
+         * @designToken inlinemessage.text.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken inlinemessage.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the info section
+     */
+    info?: {
+        /**
+         * Background of info
+         *
+         * @designToken inlinemessage.info.background
+         */
+        background?: string;
+        /**
+         * Border color of info
+         *
+         * @designToken inlinemessage.info.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of info
+         *
+         * @designToken inlinemessage.info.color
+         */
+        color?: string;
+        /**
+         * Shadow of info
+         *
+         * @designToken inlinemessage.info.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the success section
+     */
+    success?: {
+        /**
+         * Background of success
+         *
+         * @designToken inlinemessage.success.background
+         */
+        background?: string;
+        /**
+         * Border color of success
+         *
+         * @designToken inlinemessage.success.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of success
+         *
+         * @designToken inlinemessage.success.color
+         */
+        color?: string;
+        /**
+         * Shadow of success
+         *
+         * @designToken inlinemessage.success.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the warn section
+     */
+    warn?: {
+        /**
+         * Background of warn
+         *
+         * @designToken inlinemessage.warn.background
+         */
+        background?: string;
+        /**
+         * Border color of warn
+         *
+         * @designToken inlinemessage.warn.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of warn
+         *
+         * @designToken inlinemessage.warn.color
+         */
+        color?: string;
+        /**
+         * Shadow of warn
+         *
+         * @designToken inlinemessage.warn.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the error section
+     */
+    error?: {
+        /**
+         * Background of error
+         *
+         * @designToken inlinemessage.error.background
+         */
+        background?: string;
+        /**
+         * Border color of error
+         *
+         * @designToken inlinemessage.error.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of error
+         *
+         * @designToken inlinemessage.error.color
+         */
+        color?: string;
+        /**
+         * Shadow of error
+         *
+         * @designToken inlinemessage.error.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the secondary section
+     */
+    secondary?: {
+        /**
+         * Background of secondary
+         *
+         * @designToken inlinemessage.secondary.background
+         */
+        background?: string;
+        /**
+         * Border color of secondary
+         *
+         * @designToken inlinemessage.secondary.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of secondary
+         *
+         * @designToken inlinemessage.secondary.color
+         */
+        color?: string;
+        /**
+         * Shadow of secondary
+         *
+         * @designToken inlinemessage.secondary.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the contrast section
+     */
+    contrast?: {
+        /**
+         * Background of contrast
+         *
+         * @designToken inlinemessage.contrast.background
+         */
+        background?: string;
+        /**
+         * Border color of contrast
+         *
+         * @designToken inlinemessage.contrast.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of contrast
+         *
+         * @designToken inlinemessage.contrast.color
+         */
+        color?: string;
+        /**
+         * Shadow of contrast
+         *
+         * @designToken inlinemessage.contrast.shadow
+         */
+        shadow?: string;
+    };
+}
diff --git a/components/lib/themes/types/inplace/index.d.ts b/components/lib/themes/types/inplace/index.d.ts
new file mode 100644
index 000000000..e16e1fe3c
--- /dev/null
+++ b/components/lib/themes/types/inplace/index.d.ts
@@ -0,0 +1,83 @@
+/**
+ *
+ * Inplace Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/inplace/)
+ *
+ * @module themes/inplace
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface InplaceDesignTokens extends ColorSchemeDesignToken<InplaceDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Padding of root
+         *
+         * @designToken inplace.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken inplace.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken inplace.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken inplace.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken inplace.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken inplace.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken inplace.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the display section
+     */
+    display?: {
+        /**
+         * Hover background of display
+         *
+         * @designToken inplace.display.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Hover color of display
+         *
+         * @designToken inplace.display.hover.color
+         */
+        hoverColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/inputchips/index.d.ts b/components/lib/themes/types/inputchips/index.d.ts
new file mode 100644
index 000000000..fefb2c4dc
--- /dev/null
+++ b/components/lib/themes/types/inputchips/index.d.ts
@@ -0,0 +1,167 @@
+/**
+ *
+ * InputChips Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/inputchips/)
+ *
+ * @module themes/inputchips
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface InputChipsDesignTokens extends ColorSchemeDesignToken<InputChipsDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken inputchips.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken inputchips.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken inputchips.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken inputchips.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken inputchips.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken inputchips.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken inputchips.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken inputchips.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken inputchips.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken inputchips.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken inputchips.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken inputchips.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken inputchips.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken inputchips.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken inputchips.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken inputchips.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken inputchips.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken inputchips.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken inputchips.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken inputchips.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the chip section
+     */
+    chip?: {
+        /**
+         * Border radius of chip
+         *
+         * @designToken inputchips.chip.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus background of chip
+         *
+         * @designToken inputchips.chip.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Color of chip
+         *
+         * @designToken inputchips.chip.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/inputgroup/index.d.ts b/components/lib/themes/types/inputgroup/index.d.ts
new file mode 100644
index 000000000..5f2286507
--- /dev/null
+++ b/components/lib/themes/types/inputgroup/index.d.ts
@@ -0,0 +1,43 @@
+/**
+ *
+ * InputGroup Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/inputgroup/)
+ *
+ * @module themes/inputgroup
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface InputGroupDesignTokens extends ColorSchemeDesignToken<InputGroupDesignTokens> {
+    /**
+     * Used to pass tokens of the addon section
+     */
+    addon?: {
+        /**
+         * Background of addon
+         *
+         * @designToken inputgroup.addon.background
+         */
+        background?: string;
+        /**
+         * Border color of addon
+         *
+         * @designToken inputgroup.addon.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of addon
+         *
+         * @designToken inputgroup.addon.color
+         */
+        color?: string;
+        /**
+         * Border radius of addon
+         *
+         * @designToken inputgroup.addon.border.radius
+         */
+        borderRadius?: string;
+    };
+}
diff --git a/components/lib/themes/types/inputnumber/index.d.ts b/components/lib/themes/types/inputnumber/index.d.ts
new file mode 100644
index 000000000..6f335275a
--- /dev/null
+++ b/components/lib/themes/types/inputnumber/index.d.ts
@@ -0,0 +1,91 @@
+/**
+ *
+ * InputNumber Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/inputnumber/)
+ *
+ * @module themes/inputnumber
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface InputNumberDesignTokens extends ColorSchemeDesignToken<InputNumberDesignTokens> {
+    /**
+     * Used to pass tokens of the button section
+     */
+    button?: {
+        /**
+         * Width of button
+         *
+         * @designToken inputnumber.button.width
+         */
+        width?: string;
+        /**
+         * Border radius of button
+         *
+         * @designToken inputnumber.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Vertical padding of button
+         *
+         * @designToken inputnumber.button.vertical.padding
+         */
+        verticalPadding?: string;
+        /**
+         * Background of button
+         *
+         * @designToken inputnumber.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of button
+         *
+         * @designToken inputnumber.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of button
+         *
+         * @designToken inputnumber.button.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border color of button
+         *
+         * @designToken inputnumber.button.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of button
+         *
+         * @designToken inputnumber.button.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Active border color of button
+         *
+         * @designToken inputnumber.button.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Color of button
+         *
+         * @designToken inputnumber.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of button
+         *
+         * @designToken inputnumber.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of button
+         *
+         * @designToken inputnumber.button.active.color
+         */
+        activeColor?: string;
+    };
+}
diff --git a/components/lib/themes/aura/inputtext/index.d.ts b/components/lib/themes/types/inputtext/index.d.ts
similarity index 69%
rename from components/lib/themes/aura/inputtext/index.d.ts
rename to components/lib/themes/types/inputtext/index.d.ts
index 40ab3b14d..b64a04944 100644
--- a/components/lib/themes/aura/inputtext/index.d.ts
+++ b/components/lib/themes/types/inputtext/index.d.ts
@@ -1,12 +1,13 @@
 /**
  *
- * InputText renders a text field to enter data.
+ * InputText Design Tokens
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  *
- * @module aura/inputtext
+ * @module themes/inputtext
  *
  */
+
 import { ColorSchemeDesignToken } from '..';
 
 export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
@@ -15,125 +16,125 @@ export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextD
      */
     root?: {
         /**
-         * Background of an input field
+         * Background of root
          *
          * @designToken inputtext.background
          */
         background?: string;
         /**
-         * Background of an input field when disabled
+         * Disabled background of root
          *
          * @designToken inputtext.disabled.background
          */
         disabledBackground?: string;
         /**
-         * Background of an input field when filled mode
+         * Filled background of root
          *
          * @designToken inputtext.filled.background
          */
         filledBackground?: string;
         /**
-         * Background of an input field on the focus state of filled mode
+         * Filled focus background of root
          *
          * @designToken inputtext.filled.focus.background
          */
         filledFocusBackground?: string;
         /**
-         * Border color of an input field
+         * Border color of root
          *
          * @designToken inputtext.border.color
          */
         borderColor?: string;
         /**
-         * Border color of an input field on the hover state
+         * Hover border color of root
          *
          * @designToken inputtext.hover.border.color
          */
         hoverBorderColor?: string;
         /**
-         * Border color of an input field on the focus state
+         * Focus border color of root
          *
          * @designToken inputtext.focus.border.color
          */
         focusBorderColor?: string;
         /**
-         * Border color of an input field when invalid
+         * Invalid border color of root
          *
          * @designToken inputtext.invalid.border.color
          */
         invalidBorderColor?: string;
         /**
-         * Color of an input field
+         * Color of root
          *
          * @designToken inputtext.color
          */
         color?: string;
         /**
-         * Color of an input field when disabled
+         * Disabled color of root
          *
          * @designToken inputtext.disabled.color
          */
         disabledColor?: string;
         /**
-         * Placeholder color of an input field
+         * Placeholder color of root
          *
          * @designToken inputtext.placeholder.color
          */
         placeholderColor?: string;
         /**
-         * Shadow of an input field
+         * Shadow of root
          *
          * @designToken inputtext.shadow
          */
         shadow?: string;
         /**
-         * Padding right and left of an input field
+         * Padding x of root
          *
          * @designToken inputtext.padding.x
          */
         paddingX?: string;
         /**
-         * Padding top and bottom of an input field
+         * Padding y of root
          *
          * @designToken inputtext.padding.y
          */
         paddingY?: string;
         /**
-         * Border radius of an input field
+         * Border radius of root
          *
          * @designToken inputtext.border.radius
          */
         borderRadius?: string;
         /**
-         * Outline of an input field on the focus state
+         * Focus ring of root
          */
         focusRing?: {
             /**
-             * Outline width of an input field on the focus state
+             * Focus ring width of root
              *
              * @designToken inputtext.focus.ring.width
              */
             width?: string;
             /**
-             * Outline style of an input field on the focus state
+             * Focus ring style of root
              *
              * @designToken inputtext.focus.ring.style
              */
             style?: string;
             /**
-             * Outline color of an input field on the focus state
+             * Focus ring color of root
              *
              * @designToken inputtext.focus.ring.color
              */
             color?: string;
             /**
-             * Outline offset of an input field on the focus state
+             * Focus ring offset of root
              *
              * @designToken inputtext.focus.ring.offset
              */
             offset?: string;
             /**
-             * Shadow of an input field on the focus state
+             * Focus ring shadow of root
              *
              * @designToken inputtext.focus.ring.shadow
              */
diff --git a/components/lib/themes/types/knob/index.d.ts b/components/lib/themes/types/knob/index.d.ts
new file mode 100644
index 000000000..089cd5321
--- /dev/null
+++ b/components/lib/themes/types/knob/index.d.ts
@@ -0,0 +1,47 @@
+/**
+ *
+ * Knob Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/knob/)
+ *
+ * @module themes/knob
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface KnobDesignTokens extends ColorSchemeDesignToken<KnobDesignTokens> {
+    /**
+     * Used to pass tokens of the value section
+     */
+    value?: {
+        /**
+         * Background of value
+         *
+         * @designToken knob.value.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the range section
+     */
+    range?: {
+        /**
+         * Background of range
+         *
+         * @designToken knob.range.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the text section
+     */
+    text?: {
+        /**
+         * Color of text
+         *
+         * @designToken knob.text.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/listbox/index.d.ts b/components/lib/themes/types/listbox/index.d.ts
new file mode 100644
index 000000000..b570e4ce4
--- /dev/null
+++ b/components/lib/themes/types/listbox/index.d.ts
@@ -0,0 +1,252 @@
+/**
+ *
+ * Listbox Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/listbox/)
+ *
+ * @module themes/listbox
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ListboxDesignTokens extends ColorSchemeDesignToken<ListboxDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken listbox.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken listbox.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken listbox.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken listbox.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken listbox.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken listbox.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken listbox.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken listbox.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken listbox.shadow
+         */
+        shadow?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken listbox.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken listbox.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken listbox.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken listbox.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken listbox.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken listbox.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken listbox.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken listbox.list.gap
+         */
+        gap?: string;
+        /**
+         * Header of list
+         */
+        header?: {
+            /**
+             * Header padding of list
+             *
+             * @designToken listbox.list.header.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the option section
+     */
+    option?: {
+        /**
+         * Focus background of option
+         *
+         * @designToken listbox.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Selected background of option
+         *
+         * @designToken listbox.option.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Selected focus background of option
+         *
+         * @designToken listbox.option.selected.focus.background
+         */
+        selectedFocusBackground?: string;
+        /**
+         * Color of option
+         *
+         * @designToken listbox.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of option
+         *
+         * @designToken listbox.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Selected color of option
+         *
+         * @designToken listbox.option.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Selected focus color of option
+         *
+         * @designToken listbox.option.selected.focus.color
+         */
+        selectedFocusColor?: string;
+        /**
+         * Padding of option
+         *
+         * @designToken listbox.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of option
+         *
+         * @designToken listbox.option.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the option group section
+     */
+    optionGroup?: {
+        /**
+         * Background of option group
+         *
+         * @designToken listbox.option.group.background
+         */
+        background?: string;
+        /**
+         * Color of option group
+         *
+         * @designToken listbox.option.group.color
+         */
+        color?: string;
+        /**
+         * Font weight of option group
+         *
+         * @designToken listbox.option.group.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Padding of option group
+         *
+         * @designToken listbox.option.group.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the checkmark section
+     */
+    checkmark?: {
+        /**
+         * Color of checkmark
+         *
+         * @designToken listbox.checkmark.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the empty message section
+     */
+    emptyMessage?: {
+        /**
+         * Padding of empty message
+         *
+         * @designToken listbox.empty.message.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/megamenu/index.d.ts b/components/lib/themes/types/megamenu/index.d.ts
new file mode 100644
index 000000000..9deb37b4b
--- /dev/null
+++ b/components/lib/themes/types/megamenu/index.d.ts
@@ -0,0 +1,373 @@
+/**
+ *
+ * MegaMenu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/megamenu/)
+ *
+ * @module themes/megamenu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MegaMenuDesignTokens extends ColorSchemeDesignToken<MegaMenuDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken megamenu.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken megamenu.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken megamenu.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of root
+         *
+         * @designToken megamenu.color
+         */
+        color?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken megamenu.gap
+         */
+        gap?: string;
+        /**
+         * Vertical orientation of root
+         */
+        verticalOrientation?: {
+            /**
+             * Vertical orientation padding of root
+             *
+             * @designToken megamenu.vertical.orientation.padding
+             */
+            padding?: string;
+            /**
+             * Vertical orientation gap of root
+             *
+             * @designToken megamenu.vertical.orientation.gap
+             */
+            gap?: string;
+        };
+        /**
+         * Horizontal orientation of root
+         */
+        horizontalOrientation?: {
+            /**
+             * Horizontal orientation padding of root
+             *
+             * @designToken megamenu.horizontal.orientation.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the base item section
+     */
+    baseItem?: {
+        /**
+         * Border radius of base item
+         *
+         * @designToken megamenu.base.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of base item
+         *
+         * @designToken megamenu.base.item.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken megamenu.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Active background of item
+         *
+         * @designToken megamenu.item.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken megamenu.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken megamenu.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of item
+         *
+         * @designToken megamenu.item.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken megamenu.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken megamenu.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken megamenu.item.gap
+         */
+        gap?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken megamenu.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken megamenu.item.icon.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Icon active color of item
+             *
+             * @designToken megamenu.item.icon.active.color
+             */
+            activeColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Padding of overlay
+         *
+         * @designToken megamenu.overlay.padding
+         */
+        padding?: string;
+        /**
+         * Background of overlay
+         *
+         * @designToken megamenu.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken megamenu.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken megamenu.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken megamenu.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken megamenu.overlay.shadow
+         */
+        shadow?: string;
+        /**
+         * Gap of overlay
+         *
+         * @designToken megamenu.overlay.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu section
+     */
+    submenu?: {
+        /**
+         * Padding of submenu
+         *
+         * @designToken megamenu.submenu.padding
+         */
+        padding?: string;
+        /**
+         * Gap of submenu
+         *
+         * @designToken megamenu.submenu.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu label section
+     */
+    submenuLabel?: {
+        /**
+         * Padding of submenu label
+         *
+         * @designToken megamenu.submenu.label.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of submenu label
+         *
+         * @designToken megamenu.submenu.label.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Background of submenu label
+         *
+         * @designToken megamenu.submenu.label.background
+         */
+        background?: string;
+        /**
+         * Color of submenu label
+         *
+         * @designToken megamenu.submenu.label.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu icon section
+     */
+    submenuIcon?: {
+        /**
+         * Size of submenu icon
+         *
+         * @designToken megamenu.submenu.icon.size
+         */
+        size?: string;
+        /**
+         * Color of submenu icon
+         *
+         * @designToken megamenu.submenu.icon.color
+         */
+        color?: string;
+        /**
+         * Focus color of submenu icon
+         *
+         * @designToken megamenu.submenu.icon.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of submenu icon
+         *
+         * @designToken megamenu.submenu.icon.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Border color of separator
+         *
+         * @designToken megamenu.separator.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the mobile button section
+     */
+    mobileButton?: {
+        /**
+         * Border radius of mobile button
+         *
+         * @designToken megamenu.mobile.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Size of mobile button
+         *
+         * @designToken megamenu.mobile.button.size
+         */
+        size?: string;
+        /**
+         * Color of mobile button
+         *
+         * @designToken megamenu.mobile.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of mobile button
+         *
+         * @designToken megamenu.mobile.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Hover background of mobile button
+         *
+         * @designToken megamenu.mobile.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Focus ring of mobile button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of mobile button
+             *
+             * @designToken megamenu.mobile.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of mobile button
+             *
+             * @designToken megamenu.mobile.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of mobile button
+             *
+             * @designToken megamenu.mobile.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of mobile button
+             *
+             * @designToken megamenu.mobile.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of mobile button
+             *
+             * @designToken megamenu.mobile.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/menu/index.d.ts b/components/lib/themes/types/menu/index.d.ts
new file mode 100644
index 000000000..44c7f7c09
--- /dev/null
+++ b/components/lib/themes/types/menu/index.d.ts
@@ -0,0 +1,164 @@
+/**
+ *
+ * Menu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/menu/)
+ *
+ * @module themes/menu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MenuDesignTokens extends ColorSchemeDesignToken<MenuDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken menu.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken menu.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken menu.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken menu.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken menu.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken menu.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken menu.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken menu.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken menu.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken menu.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken menu.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken menu.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken menu.item.gap
+         */
+        gap?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken menu.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken menu.item.icon.focus.color
+             */
+            focusColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the submenu label section
+     */
+    submenuLabel?: {
+        /**
+         * Padding of submenu label
+         *
+         * @designToken menu.submenu.label.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of submenu label
+         *
+         * @designToken menu.submenu.label.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Background of submenu label
+         *
+         * @designToken menu.submenu.label.background
+         */
+        background?: string;
+        /**
+         * Color of submenu label
+         *
+         * @designToken menu.submenu.label.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Border color of separator
+         *
+         * @designToken menu.separator.border.color
+         */
+        borderColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/menubar/index.d.ts b/components/lib/themes/types/menubar/index.d.ts
new file mode 100644
index 000000000..da7b292c9
--- /dev/null
+++ b/components/lib/themes/types/menubar/index.d.ts
@@ -0,0 +1,305 @@
+/**
+ *
+ * Menubar Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/menubar/)
+ *
+ * @module themes/menubar
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MenubarDesignTokens extends ColorSchemeDesignToken<MenubarDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken menubar.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken menubar.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken menubar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of root
+         *
+         * @designToken menubar.color
+         */
+        color?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken menubar.gap
+         */
+        gap?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken menubar.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the base item section
+     */
+    baseItem?: {
+        /**
+         * Border radius of base item
+         *
+         * @designToken menubar.base.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Padding of base item
+         *
+         * @designToken menubar.base.item.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken menubar.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Active background of item
+         *
+         * @designToken menubar.item.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken menubar.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken menubar.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of item
+         *
+         * @designToken menubar.item.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken menubar.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken menubar.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken menubar.item.gap
+         */
+        gap?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken menubar.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken menubar.item.icon.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Icon active color of item
+             *
+             * @designToken menubar.item.icon.active.color
+             */
+            activeColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the submenu section
+     */
+    submenu?: {
+        /**
+         * Padding of submenu
+         *
+         * @designToken menubar.submenu.padding
+         */
+        padding?: string;
+        /**
+         * Gap of submenu
+         *
+         * @designToken menubar.submenu.gap
+         */
+        gap?: string;
+        /**
+         * Background of submenu
+         *
+         * @designToken menubar.submenu.background
+         */
+        background?: string;
+        /**
+         * Border color of submenu
+         *
+         * @designToken menubar.submenu.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of submenu
+         *
+         * @designToken menubar.submenu.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of submenu
+         *
+         * @designToken menubar.submenu.shadow
+         */
+        shadow?: string;
+        /**
+         * Mobile indent of submenu
+         *
+         * @designToken menubar.submenu.mobile.indent
+         */
+        mobileIndent?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu icon section
+     */
+    submenuIcon?: {
+        /**
+         * Size of submenu icon
+         *
+         * @designToken menubar.submenu.icon.size
+         */
+        size?: string;
+        /**
+         * Color of submenu icon
+         *
+         * @designToken menubar.submenu.icon.color
+         */
+        color?: string;
+        /**
+         * Focus color of submenu icon
+         *
+         * @designToken menubar.submenu.icon.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of submenu icon
+         *
+         * @designToken menubar.submenu.icon.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Border color of separator
+         *
+         * @designToken menubar.separator.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the mobile button section
+     */
+    mobileButton?: {
+        /**
+         * Border radius of mobile button
+         *
+         * @designToken menubar.mobile.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Size of mobile button
+         *
+         * @designToken menubar.mobile.button.size
+         */
+        size?: string;
+        /**
+         * Color of mobile button
+         *
+         * @designToken menubar.mobile.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of mobile button
+         *
+         * @designToken menubar.mobile.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Hover background of mobile button
+         *
+         * @designToken menubar.mobile.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Focus ring of mobile button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of mobile button
+             *
+             * @designToken menubar.mobile.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of mobile button
+             *
+             * @designToken menubar.mobile.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of mobile button
+             *
+             * @designToken menubar.mobile.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of mobile button
+             *
+             * @designToken menubar.mobile.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of mobile button
+             *
+             * @designToken menubar.mobile.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/message/index.d.ts b/components/lib/themes/types/message/index.d.ts
new file mode 100644
index 000000000..bd10f949b
--- /dev/null
+++ b/components/lib/themes/types/message/index.d.ts
@@ -0,0 +1,481 @@
+/**
+ *
+ * Message Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/message/)
+ *
+ * @module themes/message
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MessageDesignTokens extends ColorSchemeDesignToken<MessageDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Margin of root
+         *
+         * @designToken message.margin
+         */
+        margin?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken message.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Border width of root
+         *
+         * @designToken message.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken message.content.padding
+         */
+        padding?: string;
+        /**
+         * Gap of content
+         *
+         * @designToken message.content.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the text section
+     */
+    text?: {
+        /**
+         * Font size of text
+         *
+         * @designToken message.text.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of text
+         *
+         * @designToken message.text.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken message.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the close button section
+     */
+    closeButton?: {
+        /**
+         * Width of close button
+         *
+         * @designToken message.close.button.width
+         */
+        width?: string;
+        /**
+         * Height of close button
+         *
+         * @designToken message.close.button.height
+         */
+        height?: string;
+        /**
+         * Border radius of close button
+         *
+         * @designToken message.close.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of close button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of close button
+             *
+             * @designToken message.close.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of close button
+             *
+             * @designToken message.close.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring offset of close button
+             *
+             * @designToken message.close.button.focus.ring.offset
+             */
+            offset?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the close icon section
+     */
+    closeIcon?: {
+        /**
+         * Size of close icon
+         *
+         * @designToken message.close.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the info section
+     */
+    info?: {
+        /**
+         * Background of info
+         *
+         * @designToken message.info.background
+         */
+        background?: string;
+        /**
+         * Border color of info
+         *
+         * @designToken message.info.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of info
+         *
+         * @designToken message.info.color
+         */
+        color?: string;
+        /**
+         * Shadow of info
+         *
+         * @designToken message.info.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of info
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of info
+             *
+             * @designToken message.info.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of info
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of info
+                 *
+                 * @designToken message.info.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of info
+                 *
+                 * @designToken message.info.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the success section
+     */
+    success?: {
+        /**
+         * Background of success
+         *
+         * @designToken message.success.background
+         */
+        background?: string;
+        /**
+         * Border color of success
+         *
+         * @designToken message.success.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of success
+         *
+         * @designToken message.success.color
+         */
+        color?: string;
+        /**
+         * Shadow of success
+         *
+         * @designToken message.success.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of success
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of success
+             *
+             * @designToken message.success.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of success
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of success
+                 *
+                 * @designToken message.success.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of success
+                 *
+                 * @designToken message.success.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the warn section
+     */
+    warn?: {
+        /**
+         * Background of warn
+         *
+         * @designToken message.warn.background
+         */
+        background?: string;
+        /**
+         * Border color of warn
+         *
+         * @designToken message.warn.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of warn
+         *
+         * @designToken message.warn.color
+         */
+        color?: string;
+        /**
+         * Shadow of warn
+         *
+         * @designToken message.warn.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of warn
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of warn
+             *
+             * @designToken message.warn.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of warn
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of warn
+                 *
+                 * @designToken message.warn.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of warn
+                 *
+                 * @designToken message.warn.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the error section
+     */
+    error?: {
+        /**
+         * Background of error
+         *
+         * @designToken message.error.background
+         */
+        background?: string;
+        /**
+         * Border color of error
+         *
+         * @designToken message.error.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of error
+         *
+         * @designToken message.error.color
+         */
+        color?: string;
+        /**
+         * Shadow of error
+         *
+         * @designToken message.error.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of error
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of error
+             *
+             * @designToken message.error.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of error
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of error
+                 *
+                 * @designToken message.error.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of error
+                 *
+                 * @designToken message.error.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the secondary section
+     */
+    secondary?: {
+        /**
+         * Background of secondary
+         *
+         * @designToken message.secondary.background
+         */
+        background?: string;
+        /**
+         * Border color of secondary
+         *
+         * @designToken message.secondary.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of secondary
+         *
+         * @designToken message.secondary.color
+         */
+        color?: string;
+        /**
+         * Shadow of secondary
+         *
+         * @designToken message.secondary.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of secondary
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of secondary
+             *
+             * @designToken message.secondary.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of secondary
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of secondary
+                 *
+                 * @designToken message.secondary.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of secondary
+                 *
+                 * @designToken message.secondary.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the contrast section
+     */
+    contrast?: {
+        /**
+         * Background of contrast
+         *
+         * @designToken message.contrast.background
+         */
+        background?: string;
+        /**
+         * Border color of contrast
+         *
+         * @designToken message.contrast.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of contrast
+         *
+         * @designToken message.contrast.color
+         */
+        color?: string;
+        /**
+         * Shadow of contrast
+         *
+         * @designToken message.contrast.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of contrast
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of contrast
+             *
+             * @designToken message.contrast.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of contrast
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of contrast
+                 *
+                 * @designToken message.contrast.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of contrast
+                 *
+                 * @designToken message.contrast.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+}
diff --git a/components/lib/themes/types/metergroup/index.d.ts b/components/lib/themes/types/metergroup/index.d.ts
new file mode 100644
index 000000000..54940b6d4
--- /dev/null
+++ b/components/lib/themes/types/metergroup/index.d.ts
@@ -0,0 +1,98 @@
+/**
+ *
+ * MeterGroup Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/metergroup/)
+ *
+ * @module themes/metergroup
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MeterGroupDesignTokens extends ColorSchemeDesignToken<MeterGroupDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken metergroup.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken metergroup.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the meters section
+     */
+    meters?: {
+        /**
+         * Background of meters
+         *
+         * @designToken metergroup.meters.background
+         */
+        background?: string;
+        /**
+         * Size of meters
+         *
+         * @designToken metergroup.meters.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the label section
+     */
+    label?: {
+        /**
+         * Gap of label
+         *
+         * @designToken metergroup.label.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the label marker section
+     */
+    labelMarker?: {
+        /**
+         * Size of label marker
+         *
+         * @designToken metergroup.label.marker.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the label icon section
+     */
+    labelIcon?: {
+        /**
+         * Size of label icon
+         *
+         * @designToken metergroup.label.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the label list section
+     */
+    labelList?: {
+        /**
+         * Vertical gap of label list
+         *
+         * @designToken metergroup.label.list.vertical.gap
+         */
+        verticalGap?: string;
+        /**
+         * Horizontal gap of label list
+         *
+         * @designToken metergroup.label.list.horizontal.gap
+         */
+        horizontalGap?: string;
+    };
+}
diff --git a/components/lib/themes/types/multiselect/index.d.ts b/components/lib/themes/types/multiselect/index.d.ts
new file mode 100644
index 000000000..f704bcde0
--- /dev/null
+++ b/components/lib/themes/types/multiselect/index.d.ts
@@ -0,0 +1,340 @@
+/**
+ *
+ * MultiSelect Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/multiselect/)
+ *
+ * @module themes/multiselect
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface MultiSelectDesignTokens extends ColorSchemeDesignToken<MultiSelectDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken multiselect.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken multiselect.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken multiselect.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken multiselect.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken multiselect.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken multiselect.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken multiselect.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken multiselect.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken multiselect.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken multiselect.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken multiselect.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken multiselect.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken multiselect.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken multiselect.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken multiselect.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken multiselect.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken multiselect.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken multiselect.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken multiselect.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken multiselect.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken multiselect.dropdown.width
+         */
+        width?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken multiselect.dropdown.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken multiselect.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken multiselect.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken multiselect.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken multiselect.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken multiselect.overlay.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken multiselect.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken multiselect.list.gap
+         */
+        gap?: string;
+        /**
+         * Header of list
+         */
+        header?: {
+            /**
+             * Header padding of list
+             *
+             * @designToken multiselect.list.header.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the option section
+     */
+    option?: {
+        /**
+         * Focus background of option
+         *
+         * @designToken multiselect.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Selected background of option
+         *
+         * @designToken multiselect.option.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Selected focus background of option
+         *
+         * @designToken multiselect.option.selected.focus.background
+         */
+        selectedFocusBackground?: string;
+        /**
+         * Color of option
+         *
+         * @designToken multiselect.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of option
+         *
+         * @designToken multiselect.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Selected color of option
+         *
+         * @designToken multiselect.option.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Selected focus color of option
+         *
+         * @designToken multiselect.option.selected.focus.color
+         */
+        selectedFocusColor?: string;
+        /**
+         * Padding of option
+         *
+         * @designToken multiselect.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of option
+         *
+         * @designToken multiselect.option.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of option
+         *
+         * @designToken multiselect.option.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the option group section
+     */
+    optionGroup?: {
+        /**
+         * Background of option group
+         *
+         * @designToken multiselect.option.group.background
+         */
+        background?: string;
+        /**
+         * Color of option group
+         *
+         * @designToken multiselect.option.group.color
+         */
+        color?: string;
+        /**
+         * Font weight of option group
+         *
+         * @designToken multiselect.option.group.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Padding of option group
+         *
+         * @designToken multiselect.option.group.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the chip section
+     */
+    chip?: {
+        /**
+         * Border radius of chip
+         *
+         * @designToken multiselect.chip.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the empty message section
+     */
+    emptyMessage?: {
+        /**
+         * Padding of empty message
+         *
+         * @designToken multiselect.empty.message.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/orderlist/index.d.ts b/components/lib/themes/types/orderlist/index.d.ts
new file mode 100644
index 000000000..1f2b018e0
--- /dev/null
+++ b/components/lib/themes/types/orderlist/index.d.ts
@@ -0,0 +1,36 @@
+/**
+ *
+ * OrderList Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/orderlist/)
+ *
+ * @module themes/orderlist
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface OrderListDesignTokens extends ColorSchemeDesignToken<OrderListDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gap of root
+         *
+         * @designToken orderlist.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the controls section
+     */
+    controls?: {
+        /**
+         * Gap of controls
+         *
+         * @designToken orderlist.controls.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/organizationchart/index.d.ts b/components/lib/themes/types/organizationchart/index.d.ts
new file mode 100644
index 000000000..786605d64
--- /dev/null
+++ b/components/lib/themes/types/organizationchart/index.d.ts
@@ -0,0 +1,195 @@
+/**
+ *
+ * OrganizationChart Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/organizationchart/)
+ *
+ * @module themes/organizationchart
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface OrganizationChartDesignTokens extends ColorSchemeDesignToken<OrganizationChartDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gutter of root
+         *
+         * @designToken organizationchart.gutter
+         */
+        gutter?: string;
+    };
+    /**
+     * Used to pass tokens of the node section
+     */
+    node?: {
+        /**
+         * Background of node
+         *
+         * @designToken organizationchart.node.background
+         */
+        background?: string;
+        /**
+         * Hover background of node
+         *
+         * @designToken organizationchart.node.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of node
+         *
+         * @designToken organizationchart.node.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Border color of node
+         *
+         * @designToken organizationchart.node.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of node
+         *
+         * @designToken organizationchart.node.color
+         */
+        color?: string;
+        /**
+         * Selected color of node
+         *
+         * @designToken organizationchart.node.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Hover color of node
+         *
+         * @designToken organizationchart.node.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Padding of node
+         *
+         * @designToken organizationchart.node.padding
+         */
+        padding?: string;
+        /**
+         * Toggleable padding of node
+         *
+         * @designToken organizationchart.node.toggleable.padding
+         */
+        toggleablePadding?: string;
+        /**
+         * Border radius of node
+         *
+         * @designToken organizationchart.node.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the node toggle button section
+     */
+    nodeToggleButton?: {
+        /**
+         * Background of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.background
+         */
+        background?: string;
+        /**
+         * Hover background of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Border color of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Size of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.size
+         */
+        size?: string;
+        /**
+         * Border radius of node toggle button
+         *
+         * @designToken organizationchart.node.toggle.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of node toggle button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of node toggle button
+             *
+             * @designToken organizationchart.node.toggle.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of node toggle button
+             *
+             * @designToken organizationchart.node.toggle.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of node toggle button
+             *
+             * @designToken organizationchart.node.toggle.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of node toggle button
+             *
+             * @designToken organizationchart.node.toggle.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of node toggle button
+             *
+             * @designToken organizationchart.node.toggle.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the connector section
+     */
+    connector?: {
+        /**
+         * Color of connector
+         *
+         * @designToken organizationchart.connector.color
+         */
+        color?: string;
+        /**
+         * Border radius of connector
+         *
+         * @designToken organizationchart.connector.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Height of connector
+         *
+         * @designToken organizationchart.connector.height
+         */
+        height?: string;
+    };
+}
diff --git a/components/lib/themes/types/paginator/index.d.ts b/components/lib/themes/types/paginator/index.d.ts
new file mode 100644
index 000000000..c770ae728
--- /dev/null
+++ b/components/lib/themes/types/paginator/index.d.ts
@@ -0,0 +1,147 @@
+/**
+ *
+ * Paginator Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/paginator/)
+ *
+ * @module themes/paginator
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PaginatorDesignTokens extends ColorSchemeDesignToken<PaginatorDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Padding of root
+         *
+         * @designToken paginator.padding
+         */
+        padding?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken paginator.gap
+         */
+        gap?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken paginator.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Background of root
+         *
+         * @designToken paginator.background
+         */
+        background?: string;
+        /**
+         * Color of root
+         *
+         * @designToken paginator.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the nav button section
+     */
+    navButton?: {
+        /**
+         * Hover background of nav button
+         *
+         * @designToken paginator.nav.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Color of nav button
+         *
+         * @designToken paginator.nav.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of nav button
+         *
+         * @designToken paginator.nav.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Width of nav button
+         *
+         * @designToken paginator.nav.button.width
+         */
+        width?: string;
+        /**
+         * Height of nav button
+         *
+         * @designToken paginator.nav.button.height
+         */
+        height?: string;
+        /**
+         * Border radius of nav button
+         *
+         * @designToken paginator.nav.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of nav button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of nav button
+             *
+             * @designToken paginator.nav.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of nav button
+             *
+             * @designToken paginator.nav.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of nav button
+             *
+             * @designToken paginator.nav.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of nav button
+             *
+             * @designToken paginator.nav.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of nav button
+             *
+             * @designToken paginator.nav.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the current page report section
+     */
+    currentPageReport?: {
+        /**
+         * Color of current page report
+         *
+         * @designToken paginator.current.page.report.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the jump to page input section
+     */
+    jumpToPageInput?: {
+        /**
+         * Max width of jump to page input
+         *
+         * @designToken paginator.jump.to.page.input.max.width
+         */
+        maxWidth?: string;
+    };
+}
diff --git a/components/lib/themes/types/panel/index.d.ts b/components/lib/themes/types/panel/index.d.ts
new file mode 100644
index 000000000..e066f6fd8
--- /dev/null
+++ b/components/lib/themes/types/panel/index.d.ts
@@ -0,0 +1,128 @@
+/**
+ *
+ * Panel Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/panel/)
+ *
+ * @module themes/panel
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PanelDesignTokens extends ColorSchemeDesignToken<PanelDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken panel.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken panel.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken panel.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken panel.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken panel.header.background
+         */
+        background?: string;
+        /**
+         * Color of header
+         *
+         * @designToken panel.header.color
+         */
+        color?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken panel.header.padding
+         */
+        padding?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken panel.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken panel.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border radius of header
+         *
+         * @designToken panel.header.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the toggleable header section
+     */
+    toggleableHeader?: {
+        /**
+         * Padding of toggleable header
+         *
+         * @designToken panel.toggleable.header.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the title section
+     */
+    title?: {
+        /**
+         * Font weight of title
+         *
+         * @designToken panel.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken panel.content.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Padding of footer
+         *
+         * @designToken panel.footer.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/panelmenu/index.d.ts b/components/lib/themes/types/panelmenu/index.d.ts
new file mode 100644
index 000000000..27403ecb6
--- /dev/null
+++ b/components/lib/themes/types/panelmenu/index.d.ts
@@ -0,0 +1,186 @@
+/**
+ *
+ * PanelMenu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/panelmenu/)
+ *
+ * @module themes/panelmenu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PanelMenuDesignTokens extends ColorSchemeDesignToken<PanelMenuDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gap of root
+         *
+         * @designToken panelmenu.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the panel section
+     */
+    panel?: {
+        /**
+         * Background of panel
+         *
+         * @designToken panelmenu.panel.background
+         */
+        background?: string;
+        /**
+         * Border color of panel
+         *
+         * @designToken panelmenu.panel.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of panel
+         *
+         * @designToken panelmenu.panel.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Color of panel
+         *
+         * @designToken panelmenu.panel.color
+         */
+        color?: string;
+        /**
+         * Padding of panel
+         *
+         * @designToken panelmenu.panel.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of panel
+         *
+         * @designToken panelmenu.panel.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * First of panel
+         */
+        first?: {
+            /**
+             * First border width of panel
+             *
+             * @designToken panelmenu.panel.first.border.width
+             */
+            borderWidth?: string;
+            /**
+             * First top border radius of panel
+             *
+             * @designToken panelmenu.panel.first.top.border.radius
+             */
+            topBorderRadius?: string;
+        };
+        /**
+         * Last of panel
+         */
+        last?: {
+            /**
+             * Last border width of panel
+             *
+             * @designToken panelmenu.panel.last.border.width
+             */
+            borderWidth?: string;
+            /**
+             * Last bottom border radius of panel
+             *
+             * @designToken panelmenu.panel.last.bottom.border.radius
+             */
+            bottomBorderRadius?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken panelmenu.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken panelmenu.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken panelmenu.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken panelmenu.item.gap
+         */
+        gap?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken panelmenu.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken panelmenu.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken panelmenu.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken panelmenu.item.icon.focus.color
+             */
+            focusColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the submenu section
+     */
+    submenu?: {
+        /**
+         * Indent of submenu
+         *
+         * @designToken panelmenu.submenu.indent
+         */
+        indent?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu icon section
+     */
+    submenuIcon?: {
+        /**
+         * Color of submenu icon
+         *
+         * @designToken panelmenu.submenu.icon.color
+         */
+        color?: string;
+        /**
+         * Focus color of submenu icon
+         *
+         * @designToken panelmenu.submenu.icon.focus.color
+         */
+        focusColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/password/index.d.ts b/components/lib/themes/types/password/index.d.ts
new file mode 100644
index 000000000..d4c3bdb89
--- /dev/null
+++ b/components/lib/themes/types/password/index.d.ts
@@ -0,0 +1,118 @@
+/**
+ *
+ * Password Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/password/)
+ *
+ * @module themes/password
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PasswordDesignTokens extends ColorSchemeDesignToken<PasswordDesignTokens> {
+    /**
+     * Used to pass tokens of the meter section
+     */
+    meter?: {
+        /**
+         * Border color of meter
+         *
+         * @designToken password.meter.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of meter
+         *
+         * @designToken password.meter.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Height of meter
+         *
+         * @designToken password.meter.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Color of icon
+         *
+         * @designToken password.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken password.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken password.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken password.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken password.overlay.color
+         */
+        color?: string;
+        /**
+         * Padding of overlay
+         *
+         * @designToken password.overlay.padding
+         */
+        padding?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken password.overlay.shadow
+         */
+        shadow?: string;
+        /**
+         * Gap of overlay
+         *
+         * @designToken password.overlay.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the strength section
+     */
+    strength?: {
+        /**
+         * Weak background of strength
+         *
+         * @designToken password.strength.weak.background
+         */
+        weakBackground?: string;
+        /**
+         * Medium background of strength
+         *
+         * @designToken password.strength.medium.background
+         */
+        mediumBackground?: string;
+        /**
+         * Strong background of strength
+         *
+         * @designToken password.strength.strong.background
+         */
+        strongBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/picklist/index.d.ts b/components/lib/themes/types/picklist/index.d.ts
new file mode 100644
index 000000000..f01be8f64
--- /dev/null
+++ b/components/lib/themes/types/picklist/index.d.ts
@@ -0,0 +1,36 @@
+/**
+ *
+ * PickList Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/picklist/)
+ *
+ * @module themes/picklist
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PickListDesignTokens extends ColorSchemeDesignToken<PickListDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gap of root
+         *
+         * @designToken picklist.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the controls section
+     */
+    controls?: {
+        /**
+         * Gap of controls
+         *
+         * @designToken picklist.controls.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/popover/index.d.ts b/components/lib/themes/types/popover/index.d.ts
new file mode 100644
index 000000000..9444b0c93
--- /dev/null
+++ b/components/lib/themes/types/popover/index.d.ts
@@ -0,0 +1,72 @@
+/**
+ *
+ * Popover Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/popover/)
+ *
+ * @module themes/popover
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface PopoverDesignTokens extends ColorSchemeDesignToken<PopoverDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken popover.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken popover.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken popover.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken popover.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken popover.shadow
+         */
+        shadow?: string;
+        /**
+         * Gutter of root
+         *
+         * @designToken popover.gutter
+         */
+        gutter?: string;
+        /**
+         * Arrow offset of root
+         *
+         * @designToken popover.arrow.offset
+         */
+        arrowOffset?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken popover.content.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/progressbar/index.d.ts b/components/lib/themes/types/progressbar/index.d.ts
new file mode 100644
index 000000000..a96187b81
--- /dev/null
+++ b/components/lib/themes/types/progressbar/index.d.ts
@@ -0,0 +1,71 @@
+/**
+ *
+ * ProgressBar Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/progressbar/)
+ *
+ * @module themes/progressbar
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ProgressBarDesignTokens extends ColorSchemeDesignToken<ProgressBarDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken progressbar.background
+         */
+        background?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken progressbar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Height of root
+         *
+         * @designToken progressbar.height
+         */
+        height?: string;
+    };
+    /**
+     * Used to pass tokens of the value section
+     */
+    value?: {
+        /**
+         * Background of value
+         *
+         * @designToken progressbar.value.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the label section
+     */
+    label?: {
+        /**
+         * Color of label
+         *
+         * @designToken progressbar.label.color
+         */
+        color?: string;
+        /**
+         * Font size of label
+         *
+         * @designToken progressbar.label.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of label
+         *
+         * @designToken progressbar.label.font.weight
+         */
+        fontWeight?: string;
+    };
+}
diff --git a/components/lib/themes/types/progressspinner/index.d.ts b/components/lib/themes/types/progressspinner/index.d.ts
new file mode 100644
index 000000000..02185e3da
--- /dev/null
+++ b/components/lib/themes/types/progressspinner/index.d.ts
@@ -0,0 +1,43 @@
+/**
+ *
+ * ProgressSpinner Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/progressspinner/)
+ *
+ * @module themes/progressspinner
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ProgressSpinnerDesignTokens extends ColorSchemeDesignToken<ProgressSpinnerDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Color.1 of root
+         *
+         * @designToken progressspinner.color.1
+         */
+        'color.1'?: string;
+        /**
+         * Color.2 of root
+         *
+         * @designToken progressspinner.color.2
+         */
+        'color.2'?: string;
+        /**
+         * Color.3 of root
+         *
+         * @designToken progressspinner.color.3
+         */
+        'color.3'?: string;
+        /**
+         * Color.4 of root
+         *
+         * @designToken progressspinner.color.4
+         */
+        'color.4'?: string;
+    };
+}
diff --git a/components/lib/themes/types/radiobutton/index.d.ts b/components/lib/themes/types/radiobutton/index.d.ts
new file mode 100644
index 000000000..4d0572639
--- /dev/null
+++ b/components/lib/themes/types/radiobutton/index.d.ts
@@ -0,0 +1,173 @@
+/**
+ *
+ * RadioButton Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ *
+ * @module themes/radiobutton
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface RadioButtonDesignTokens extends ColorSchemeDesignToken<RadioButtonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Width of root
+         *
+         * @designToken radiobutton.width
+         */
+        width?: string;
+        /**
+         * Height of root
+         *
+         * @designToken radiobutton.height
+         */
+        height?: string;
+        /**
+         * Background of root
+         *
+         * @designToken radiobutton.background
+         */
+        background?: string;
+        /**
+         * Checked background of root
+         *
+         * @designToken radiobutton.checked.background
+         */
+        checkedBackground?: string;
+        /**
+         * Checked hover background of root
+         *
+         * @designToken radiobutton.checked.hover.background
+         */
+        checkedHoverBackground?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken radiobutton.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken radiobutton.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken radiobutton.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken radiobutton.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken radiobutton.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Checked border color of root
+         *
+         * @designToken radiobutton.checked.border.color
+         */
+        checkedBorderColor?: string;
+        /**
+         * Checked hover border color of root
+         *
+         * @designToken radiobutton.checked.hover.border.color
+         */
+        checkedHoverBorderColor?: string;
+        /**
+         * Checked focus border color of root
+         *
+         * @designToken radiobutton.checked.focus.border.color
+         */
+        checkedFocusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken radiobutton.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken radiobutton.shadow
+         */
+        shadow?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken radiobutton.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken radiobutton.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken radiobutton.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken radiobutton.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken radiobutton.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken radiobutton.icon.size
+         */
+        size?: string;
+        /**
+         * Checked color of icon
+         *
+         * @designToken radiobutton.icon.checked.color
+         */
+        checkedColor?: string;
+        /**
+         * Checked hover color of icon
+         *
+         * @designToken radiobutton.icon.checked.hover.color
+         */
+        checkedHoverColor?: string;
+        /**
+         * Disabled color of icon
+         *
+         * @designToken radiobutton.icon.disabled.color
+         */
+        disabledColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/rating/index.d.ts b/components/lib/themes/types/rating/index.d.ts
new file mode 100644
index 000000000..c55dd19ab
--- /dev/null
+++ b/components/lib/themes/types/rating/index.d.ts
@@ -0,0 +1,54 @@
+/**
+ *
+ * Rating Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/rating/)
+ *
+ * @module themes/rating
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface RatingDesignTokens extends ColorSchemeDesignToken<RatingDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gap of root
+         *
+         * @designToken rating.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken rating.icon.size
+         */
+        size?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken rating.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of icon
+         *
+         * @designToken rating.icon.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of icon
+         *
+         * @designToken rating.icon.active.color
+         */
+        activeColor?: string;
+    };
+}
diff --git a/components/lib/themes/aura/ripple/index.d.ts b/components/lib/themes/types/ripple/index.d.ts
similarity index 51%
rename from components/lib/themes/aura/ripple/index.d.ts
rename to components/lib/themes/types/ripple/index.d.ts
index d47334bc0..7c7abaa4c 100644
--- a/components/lib/themes/aura/ripple/index.d.ts
+++ b/components/lib/themes/types/ripple/index.d.ts
@@ -1,33 +1,22 @@
 /**
  *
- * Ripple directive adds ripple effect to the host element.
- *
- * [Live Demo](https://primevue.org/ripple)
- *
- * @module aura/ripple
- *
- */
-import { ColorSchemeDesignToken } from '..';
-
-/**
- * **PrimeVue - Ripple**
- *
- * _Ripple directive adds ripple effect to the host element._
+ * Ripple Design Tokens
  *
  * [Live Demo](https://www.primevue.org/ripple/)
- * --- ---
- * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
- * @group DesignTokens
+ * @module themes/ripple
  *
  */
+
+import { ColorSchemeDesignToken } from '..';
+
 export interface RippleDesignTokens extends ColorSchemeDesignToken<RippleDesignTokens> {
     /**
      * Used to pass tokens of the root section
      */
     root?: {
         /**
-         * Background of ripple
+         * Background of root
          *
          * @designToken ripple.background
          */
diff --git a/components/lib/themes/types/scrollpanel/index.d.ts b/components/lib/themes/types/scrollpanel/index.d.ts
new file mode 100644
index 000000000..c9f18ab8e
--- /dev/null
+++ b/components/lib/themes/types/scrollpanel/index.d.ts
@@ -0,0 +1,72 @@
+/**
+ *
+ * ScrollPanel Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/scrollpanel/)
+ *
+ * @module themes/scrollpanel
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ScrollPanelDesignTokens extends ColorSchemeDesignToken<ScrollPanelDesignTokens> {
+    /**
+     * Used to pass tokens of the bar section
+     */
+    bar?: {
+        /**
+         * Size of bar
+         *
+         * @designToken scrollpanel.bar.size
+         */
+        size?: string;
+        /**
+         * Border radius of bar
+         *
+         * @designToken scrollpanel.bar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of bar
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of bar
+             *
+             * @designToken scrollpanel.bar.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of bar
+             *
+             * @designToken scrollpanel.bar.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of bar
+             *
+             * @designToken scrollpanel.bar.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of bar
+             *
+             * @designToken scrollpanel.bar.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of bar
+             *
+             * @designToken scrollpanel.bar.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Background of bar
+         *
+         * @designToken scrollpanel.bar.background
+         */
+        background?: string;
+    };
+}
diff --git a/components/lib/themes/types/select/index.d.ts b/components/lib/themes/types/select/index.d.ts
new file mode 100644
index 000000000..91864c497
--- /dev/null
+++ b/components/lib/themes/types/select/index.d.ts
@@ -0,0 +1,345 @@
+/**
+ *
+ * Select Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/select/)
+ *
+ * @module themes/select
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SelectDesignTokens extends ColorSchemeDesignToken<SelectDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken select.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken select.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken select.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken select.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken select.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken select.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken select.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken select.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken select.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken select.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken select.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken select.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken select.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken select.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken select.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken select.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken select.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken select.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken select.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken select.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken select.dropdown.width
+         */
+        width?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken select.dropdown.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken select.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken select.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken select.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken select.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken select.overlay.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken select.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken select.list.gap
+         */
+        gap?: string;
+        /**
+         * Header of list
+         */
+        header?: {
+            /**
+             * Header padding of list
+             *
+             * @designToken select.list.header.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the option section
+     */
+    option?: {
+        /**
+         * Focus background of option
+         *
+         * @designToken select.option.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Selected background of option
+         *
+         * @designToken select.option.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Selected focus background of option
+         *
+         * @designToken select.option.selected.focus.background
+         */
+        selectedFocusBackground?: string;
+        /**
+         * Color of option
+         *
+         * @designToken select.option.color
+         */
+        color?: string;
+        /**
+         * Focus color of option
+         *
+         * @designToken select.option.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Selected color of option
+         *
+         * @designToken select.option.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Selected focus color of option
+         *
+         * @designToken select.option.selected.focus.color
+         */
+        selectedFocusColor?: string;
+        /**
+         * Padding of option
+         *
+         * @designToken select.option.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of option
+         *
+         * @designToken select.option.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the option group section
+     */
+    optionGroup?: {
+        /**
+         * Background of option group
+         *
+         * @designToken select.option.group.background
+         */
+        background?: string;
+        /**
+         * Color of option group
+         *
+         * @designToken select.option.group.color
+         */
+        color?: string;
+        /**
+         * Font weight of option group
+         *
+         * @designToken select.option.group.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Padding of option group
+         *
+         * @designToken select.option.group.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the clear icon section
+     */
+    clearIcon?: {
+        /**
+         * Color of clear icon
+         *
+         * @designToken select.clear.icon.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the checkmark section
+     */
+    checkmark?: {
+        /**
+         * Color of checkmark
+         *
+         * @designToken select.checkmark.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the empty message section
+     */
+    emptyMessage?: {
+        /**
+         * Padding of empty message
+         *
+         * @designToken select.empty.message.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/selectbutton/index.d.ts b/components/lib/themes/types/selectbutton/index.d.ts
new file mode 100644
index 000000000..6d04bd05a
--- /dev/null
+++ b/components/lib/themes/types/selectbutton/index.d.ts
@@ -0,0 +1,31 @@
+/**
+ *
+ * SelectButton Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/selectbutton/)
+ *
+ * @module themes/selectbutton
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SelectButtonDesignTokens extends ColorSchemeDesignToken<SelectButtonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken selectbutton.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken selectbutton.invalid.border.color
+         */
+        invalidBorderColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/skeleton/index.d.ts b/components/lib/themes/types/skeleton/index.d.ts
new file mode 100644
index 000000000..0ad0c0ded
--- /dev/null
+++ b/components/lib/themes/types/skeleton/index.d.ts
@@ -0,0 +1,37 @@
+/**
+ *
+ * Skeleton Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/skeleton/)
+ *
+ * @module themes/skeleton
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SkeletonDesignTokens extends ColorSchemeDesignToken<SkeletonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken skeleton.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Background of root
+         *
+         * @designToken skeleton.background
+         */
+        background?: string;
+        /**
+         * Animation background of root
+         *
+         * @designToken skeleton.animation.background
+         */
+        animationBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/slider/index.d.ts b/components/lib/themes/types/slider/index.d.ts
new file mode 100644
index 000000000..d1b3d4d31
--- /dev/null
+++ b/components/lib/themes/types/slider/index.d.ts
@@ -0,0 +1,159 @@
+/**
+ *
+ * Slider Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/slider/)
+ *
+ * @module themes/slider
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SliderDesignTokens extends ColorSchemeDesignToken<SliderDesignTokens> {
+    /**
+     * Used to pass tokens of the track section
+     */
+    track?: {
+        /**
+         * Background of track
+         *
+         * @designToken slider.track.background
+         */
+        background?: string;
+        /**
+         * Border radius of track
+         *
+         * @designToken slider.track.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Size of track
+         *
+         * @designToken slider.track.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the range section
+     */
+    range?: {
+        /**
+         * Background of range
+         *
+         * @designToken slider.range.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the handle section
+     */
+    handle?: {
+        /**
+         * Width of handle
+         *
+         * @designToken slider.handle.width
+         */
+        width?: string;
+        /**
+         * Height of handle
+         *
+         * @designToken slider.handle.height
+         */
+        height?: string;
+        /**
+         * Border radius of handle
+         *
+         * @designToken slider.handle.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Background of handle
+         *
+         * @designToken slider.handle.background
+         */
+        background?: string;
+        /**
+         * Hover background of handle
+         *
+         * @designToken slider.handle.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Content of handle
+         */
+        content?: {
+            /**
+             * Content border radius of handle
+             *
+             * @designToken slider.handle.content.border.radius
+             */
+            borderRadius?: string;
+            /**
+             * Content hover background of handle
+             *
+             * @designToken slider.handle.content.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Content width of handle
+             *
+             * @designToken slider.handle.content.width
+             */
+            width?: string;
+            /**
+             * Content height of handle
+             *
+             * @designToken slider.handle.content.height
+             */
+            height?: string;
+            /**
+             * Content shadow of handle
+             *
+             * @designToken slider.handle.content.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Focus ring of handle
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of handle
+             *
+             * @designToken slider.handle.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of handle
+             *
+             * @designToken slider.handle.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of handle
+             *
+             * @designToken slider.handle.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of handle
+             *
+             * @designToken slider.handle.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of handle
+             *
+             * @designToken slider.handle.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Content background of handle
+         *
+         * @designToken slider.handle.content.background
+         */
+        contentBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/speeddial/index.d.ts b/components/lib/themes/types/speeddial/index.d.ts
new file mode 100644
index 000000000..424190003
--- /dev/null
+++ b/components/lib/themes/types/speeddial/index.d.ts
@@ -0,0 +1,25 @@
+/**
+ *
+ * SpeedDial Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/speeddial/)
+ *
+ * @module themes/speeddial
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SpeedDialDesignTokens extends ColorSchemeDesignToken<SpeedDialDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Gap of root
+         *
+         * @designToken speeddial.gap
+         */
+        gap?: string;
+    };
+}
diff --git a/components/lib/themes/types/splitbutton/index.d.ts b/components/lib/themes/types/splitbutton/index.d.ts
new file mode 100644
index 000000000..a7be1086b
--- /dev/null
+++ b/components/lib/themes/types/splitbutton/index.d.ts
@@ -0,0 +1,37 @@
+/**
+ *
+ * SplitButton Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/splitbutton/)
+ *
+ * @module themes/splitbutton
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SplitButtonDesignTokens extends ColorSchemeDesignToken<SplitButtonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border radius of root
+         *
+         * @designToken splitbutton.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Rounded border radius of root
+         *
+         * @designToken splitbutton.rounded.border.radius
+         */
+        roundedBorderRadius?: string;
+        /**
+         * Raised shadow of root
+         *
+         * @designToken splitbutton.raised.shadow
+         */
+        raisedShadow?: string;
+    };
+}
diff --git a/components/lib/themes/types/splitter/index.d.ts b/components/lib/themes/types/splitter/index.d.ts
new file mode 100644
index 000000000..c803f15c3
--- /dev/null
+++ b/components/lib/themes/types/splitter/index.d.ts
@@ -0,0 +1,106 @@
+/**
+ *
+ * Splitter Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/splitter/)
+ *
+ * @module themes/splitter
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface SplitterDesignTokens extends ColorSchemeDesignToken<SplitterDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken splitter.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken splitter.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken splitter.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the gutter section
+     */
+    gutter?: {
+        /**
+         * Background of gutter
+         *
+         * @designToken splitter.gutter.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the handle section
+     */
+    handle?: {
+        /**
+         * Size of handle
+         *
+         * @designToken splitter.handle.size
+         */
+        size?: string;
+        /**
+         * Background of handle
+         *
+         * @designToken splitter.handle.background
+         */
+        background?: string;
+        /**
+         * Border radius of handle
+         *
+         * @designToken splitter.handle.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of handle
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of handle
+             *
+             * @designToken splitter.handle.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of handle
+             *
+             * @designToken splitter.handle.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of handle
+             *
+             * @designToken splitter.handle.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of handle
+             *
+             * @designToken splitter.handle.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of handle
+             *
+             * @designToken splitter.handle.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/stepper/index.d.ts b/components/lib/themes/types/stepper/index.d.ts
new file mode 100644
index 000000000..22782a8a9
--- /dev/null
+++ b/components/lib/themes/types/stepper/index.d.ts
@@ -0,0 +1,282 @@
+/**
+ *
+ * Stepper Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/stepper/)
+ *
+ * @module themes/stepper
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface StepperDesignTokens extends ColorSchemeDesignToken<StepperDesignTokens> {
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Background of separator
+         *
+         * @designToken stepper.separator.background
+         */
+        background?: string;
+        /**
+         * Active background of separator
+         *
+         * @designToken stepper.separator.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Orientation of separator
+         */
+        orientation?: {
+            /**
+             * Orientation vertical of separator
+             */
+            vertical?: {
+                /**
+                 * Orientation vertical margin of separator
+                 *
+                 * @designToken stepper.separator.orientation.vertical.margin
+                 */
+                margin?: string;
+            };
+        };
+        /**
+         * Size of separator
+         *
+         * @designToken stepper.separator.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Padding of item
+         *
+         * @designToken stepper.item.padding
+         */
+        padding?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken stepper.item.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item header section
+     */
+    itemHeader?: {
+        /**
+         * Padding of item header
+         *
+         * @designToken stepper.item.header.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item header
+         *
+         * @designToken stepper.item.header.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of item header
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of item header
+             *
+             * @designToken stepper.item.header.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of item header
+             *
+             * @designToken stepper.item.header.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of item header
+             *
+             * @designToken stepper.item.header.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of item header
+             *
+             * @designToken stepper.item.header.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of item header
+             *
+             * @designToken stepper.item.header.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Gap of item header
+         *
+         * @designToken stepper.item.header.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item title section
+     */
+    itemTitle?: {
+        /**
+         * Color of item title
+         *
+         * @designToken stepper.item.title.color
+         */
+        color?: string;
+        /**
+         * Active color of item title
+         *
+         * @designToken stepper.item.title.active.color
+         */
+        activeColor?: string;
+        /**
+         * Font weight of item title
+         *
+         * @designToken stepper.item.title.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the item number section
+     */
+    itemNumber?: {
+        /**
+         * Background of item number
+         *
+         * @designToken stepper.item.number.background
+         */
+        background?: string;
+        /**
+         * Active background of item number
+         *
+         * @designToken stepper.item.number.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border color of item number
+         *
+         * @designToken stepper.item.number.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of item number
+         *
+         * @designToken stepper.item.number.color
+         */
+        color?: string;
+        /**
+         * Active color of item number
+         *
+         * @designToken stepper.item.number.active.color
+         */
+        activeColor?: string;
+        /**
+         * Size of item number
+         *
+         * @designToken stepper.item.number.size
+         */
+        size?: string;
+        /**
+         * Font size of item number
+         *
+         * @designToken stepper.item.number.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of item number
+         *
+         * @designToken stepper.item.number.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Border radius of item number
+         *
+         * @designToken stepper.item.number.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of item number
+         *
+         * @designToken stepper.item.number.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the vertical panel container section
+     */
+    verticalPanelContainer?: {
+        /**
+         * Padding left of vertical panel container
+         *
+         * @designToken stepper.vertical.panel.container.padding.left
+         */
+        paddingLeft?: string;
+    };
+    /**
+     * Used to pass tokens of the panel content section
+     */
+    panelContent?: {
+        /**
+         * Background of panel content
+         *
+         * @designToken stepper.panel.content.background
+         */
+        background?: string;
+        /**
+         * Color of panel content
+         *
+         * @designToken stepper.panel.content.color
+         */
+        color?: string;
+        /**
+         * Orientation of panel content
+         */
+        orientation?: {
+            /**
+             * Orientation horizontal of panel content
+             */
+            horizontal?: {
+                /**
+                 * Orientation horizontal padding of panel content
+                 *
+                 * @designToken stepper.panel.content.orientation.horizontal.padding
+                 */
+                padding?: string;
+            };
+            /**
+             * Orientation vertical of panel content
+             */
+            vertical?: {
+                /**
+                 * Orientation vertical padding of panel content
+                 *
+                 * @designToken stepper.panel.content.orientation.vertical.padding
+                 */
+                padding?: string;
+                /**
+                 * Orientation vertical last of panel content
+                 */
+                last?: {
+                    /**
+                     * Orientation vertical last padding of panel content
+                     *
+                     * @designToken stepper.panel.content.orientation.vertical.last.padding
+                     */
+                    padding?: string;
+                };
+            };
+        };
+    };
+}
diff --git a/components/lib/themes/types/steps/index.d.ts b/components/lib/themes/types/steps/index.d.ts
new file mode 100644
index 000000000..ad594250c
--- /dev/null
+++ b/components/lib/themes/types/steps/index.d.ts
@@ -0,0 +1,165 @@
+/**
+ *
+ * Steps Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/steps/)
+ *
+ * @module themes/steps
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface StepsDesignTokens extends ColorSchemeDesignToken<StepsDesignTokens> {
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Background of separator
+         *
+         * @designToken steps.separator.background
+         */
+        background?: string;
+    };
+    /**
+     * Used to pass tokens of the item link section
+     */
+    itemLink?: {
+        /**
+         * Border radius of item link
+         *
+         * @designToken steps.item.link.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of item link
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of item link
+             *
+             * @designToken steps.item.link.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of item link
+             *
+             * @designToken steps.item.link.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of item link
+             *
+             * @designToken steps.item.link.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of item link
+             *
+             * @designToken steps.item.link.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of item link
+             *
+             * @designToken steps.item.link.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Gap of item link
+         *
+         * @designToken steps.item.link.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item label section
+     */
+    itemLabel?: {
+        /**
+         * Color of item label
+         *
+         * @designToken steps.item.label.color
+         */
+        color?: string;
+        /**
+         * Active color of item label
+         *
+         * @designToken steps.item.label.active.color
+         */
+        activeColor?: string;
+        /**
+         * Font weight of item label
+         *
+         * @designToken steps.item.label.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the item number section
+     */
+    itemNumber?: {
+        /**
+         * Background of item number
+         *
+         * @designToken steps.item.number.background
+         */
+        background?: string;
+        /**
+         * Active background of item number
+         *
+         * @designToken steps.item.number.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border color of item number
+         *
+         * @designToken steps.item.number.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of item number
+         *
+         * @designToken steps.item.number.color
+         */
+        color?: string;
+        /**
+         * Active color of item number
+         *
+         * @designToken steps.item.number.active.color
+         */
+        activeColor?: string;
+        /**
+         * Size of item number
+         *
+         * @designToken steps.item.number.size
+         */
+        size?: string;
+        /**
+         * Font size of item number
+         *
+         * @designToken steps.item.number.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of item number
+         *
+         * @designToken steps.item.number.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Border radius of item number
+         *
+         * @designToken steps.item.number.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of item number
+         *
+         * @designToken steps.item.number.shadow
+         */
+        shadow?: string;
+    };
+}
diff --git a/components/lib/themes/types/tabmenu/index.d.ts b/components/lib/themes/types/tabmenu/index.d.ts
new file mode 100644
index 000000000..e18d7ae1f
--- /dev/null
+++ b/components/lib/themes/types/tabmenu/index.d.ts
@@ -0,0 +1,207 @@
+/**
+ *
+ * Tabmenu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tabmenu/)
+ *
+ * @module themes/tabmenu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TabmenuDesignTokens extends ColorSchemeDesignToken<TabmenuDesignTokens> {
+    /**
+     * Used to pass tokens of the tablist section
+     */
+    tablist?: {
+        /**
+         * Border width of tablist
+         *
+         * @designToken tabmenu.tablist.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Background of tablist
+         *
+         * @designToken tabmenu.tablist.background
+         */
+        background?: string;
+        /**
+         * Border color of tablist
+         *
+         * @designToken tabmenu.tablist.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Background of item
+         *
+         * @designToken tabmenu.item.background
+         */
+        background?: string;
+        /**
+         * Hover background of item
+         *
+         * @designToken tabmenu.item.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of item
+         *
+         * @designToken tabmenu.item.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border width of item
+         *
+         * @designToken tabmenu.item.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of item
+         *
+         * @designToken tabmenu.item.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of item
+         *
+         * @designToken tabmenu.item.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Active border color of item
+         *
+         * @designToken tabmenu.item.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Color of item
+         *
+         * @designToken tabmenu.item.color
+         */
+        color?: string;
+        /**
+         * Hover color of item
+         *
+         * @designToken tabmenu.item.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of item
+         *
+         * @designToken tabmenu.item.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken tabmenu.item.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of item
+         *
+         * @designToken tabmenu.item.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Margin of item
+         *
+         * @designToken tabmenu.item.margin
+         */
+        margin?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken tabmenu.item.gap
+         */
+        gap?: string;
+        /**
+         * Focus ring of item
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of item
+             *
+             * @designToken tabmenu.item.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of item
+             *
+             * @designToken tabmenu.item.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of item
+             *
+             * @designToken tabmenu.item.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of item
+             *
+             * @designToken tabmenu.item.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of item
+             *
+             * @designToken tabmenu.item.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the item icon section
+     */
+    itemIcon?: {
+        /**
+         * Color of item icon
+         *
+         * @designToken tabmenu.item.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of item icon
+         *
+         * @designToken tabmenu.item.icon.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of item icon
+         *
+         * @designToken tabmenu.item.icon.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the active bar section
+     */
+    activeBar?: {
+        /**
+         * Height of active bar
+         *
+         * @designToken tabmenu.active.bar.height
+         */
+        height?: string;
+        /**
+         * Bottom of active bar
+         *
+         * @designToken tabmenu.active.bar.bottom
+         */
+        bottom?: string;
+        /**
+         * Background of active bar
+         *
+         * @designToken tabmenu.active.bar.background
+         */
+        background?: string;
+    };
+}
diff --git a/components/lib/themes/types/tabs/index.d.ts b/components/lib/themes/types/tabs/index.d.ts
new file mode 100644
index 000000000..d9b211338
--- /dev/null
+++ b/components/lib/themes/types/tabs/index.d.ts
@@ -0,0 +1,312 @@
+/**
+ *
+ * Tabs Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tabs/)
+ *
+ * @module themes/tabs
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TabsDesignTokens extends ColorSchemeDesignToken<TabsDesignTokens> {
+    /**
+     * Used to pass tokens of the tablist section
+     */
+    tablist?: {
+        /**
+         * Border width of tablist
+         *
+         * @designToken tabs.tablist.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Background of tablist
+         *
+         * @designToken tabs.tablist.background
+         */
+        background?: string;
+        /**
+         * Border color of tablist
+         *
+         * @designToken tabs.tablist.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the tab section
+     */
+    tab?: {
+        /**
+         * Background of tab
+         *
+         * @designToken tabs.tab.background
+         */
+        background?: string;
+        /**
+         * Hover background of tab
+         *
+         * @designToken tabs.tab.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Active background of tab
+         *
+         * @designToken tabs.tab.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Border width of tab
+         *
+         * @designToken tabs.tab.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of tab
+         *
+         * @designToken tabs.tab.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of tab
+         *
+         * @designToken tabs.tab.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Active border color of tab
+         *
+         * @designToken tabs.tab.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Color of tab
+         *
+         * @designToken tabs.tab.color
+         */
+        color?: string;
+        /**
+         * Hover color of tab
+         *
+         * @designToken tabs.tab.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of tab
+         *
+         * @designToken tabs.tab.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of tab
+         *
+         * @designToken tabs.tab.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of tab
+         *
+         * @designToken tabs.tab.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Margin of tab
+         *
+         * @designToken tabs.tab.margin
+         */
+        margin?: string;
+        /**
+         * Gap of tab
+         *
+         * @designToken tabs.tab.gap
+         */
+        gap?: string;
+        /**
+         * Focus ring of tab
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of tab
+             *
+             * @designToken tabs.tab.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of tab
+             *
+             * @designToken tabs.tab.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of tab
+             *
+             * @designToken tabs.tab.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of tab
+             *
+             * @designToken tabs.tab.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of tab
+             *
+             * @designToken tabs.tab.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the tabpanel section
+     */
+    tabpanel?: {
+        /**
+         * Background of tabpanel
+         *
+         * @designToken tabs.tabpanel.background
+         */
+        background?: string;
+        /**
+         * Color of tabpanel
+         *
+         * @designToken tabs.tabpanel.color
+         */
+        color?: string;
+        /**
+         * Padding of tabpanel
+         *
+         * @designToken tabs.tabpanel.padding
+         */
+        padding?: string;
+        /**
+         * Focus ring of tabpanel
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of tabpanel
+             *
+             * @designToken tabs.tabpanel.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of tabpanel
+             *
+             * @designToken tabs.tabpanel.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of tabpanel
+             *
+             * @designToken tabs.tabpanel.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of tabpanel
+             *
+             * @designToken tabs.tabpanel.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of tabpanel
+             *
+             * @designToken tabs.tabpanel.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the nav button section
+     */
+    navButton?: {
+        /**
+         * Background of nav button
+         *
+         * @designToken tabs.nav.button.background
+         */
+        background?: string;
+        /**
+         * Color of nav button
+         *
+         * @designToken tabs.nav.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of nav button
+         *
+         * @designToken tabs.nav.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Width of nav button
+         *
+         * @designToken tabs.nav.button.width
+         */
+        width?: string;
+        /**
+         * Focus ring of nav button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of nav button
+             *
+             * @designToken tabs.nav.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of nav button
+             *
+             * @designToken tabs.nav.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of nav button
+             *
+             * @designToken tabs.nav.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of nav button
+             *
+             * @designToken tabs.nav.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of nav button
+             *
+             * @designToken tabs.nav.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Box shadow of nav button
+         *
+         * @designToken tabs.nav.button.box.shadow
+         */
+        boxShadow?: string;
+    };
+    /**
+     * Used to pass tokens of the active bar section
+     */
+    activeBar?: {
+        /**
+         * Height of active bar
+         *
+         * @designToken tabs.active.bar.height
+         */
+        height?: string;
+        /**
+         * Bottom of active bar
+         *
+         * @designToken tabs.active.bar.bottom
+         */
+        bottom?: string;
+        /**
+         * Background of active bar
+         *
+         * @designToken tabs.active.bar.background
+         */
+        background?: string;
+    };
+}
diff --git a/components/lib/themes/types/tabview/index.d.ts b/components/lib/themes/types/tabview/index.d.ts
new file mode 100644
index 000000000..5d1c1f352
--- /dev/null
+++ b/components/lib/themes/types/tabview/index.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * TabView Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tabview/)
+ *
+ * @module themes/tabview
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TabViewDesignTokens extends ColorSchemeDesignToken<TabViewDesignTokens> {
+    /**
+     * Used to pass tokens of the tab list section
+     */
+    tabList?: {
+        /**
+         * Background of tab list
+         *
+         * @designToken tabview.tab.list.background
+         */
+        background?: string;
+        /**
+         * Border color of tab list
+         *
+         * @designToken tabview.tab.list.border.color
+         */
+        borderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the tab section
+     */
+    tab?: {
+        /**
+         * Border color of tab
+         *
+         * @designToken tabview.tab.border.color
+         */
+        borderColor?: string;
+        /**
+         * Active border color of tab
+         *
+         * @designToken tabview.tab.active.border.color
+         */
+        activeBorderColor?: string;
+        /**
+         * Color of tab
+         *
+         * @designToken tabview.tab.color
+         */
+        color?: string;
+        /**
+         * Hover color of tab
+         *
+         * @designToken tabview.tab.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Active color of tab
+         *
+         * @designToken tabview.tab.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the tab panel section
+     */
+    tabPanel?: {
+        /**
+         * Background of tab panel
+         *
+         * @designToken tabview.tab.panel.background
+         */
+        background?: string;
+        /**
+         * Color of tab panel
+         *
+         * @designToken tabview.tab.panel.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the nav button section
+     */
+    navButton?: {
+        /**
+         * Background of nav button
+         *
+         * @designToken tabview.nav.button.background
+         */
+        background?: string;
+        /**
+         * Color of nav button
+         *
+         * @designToken tabview.nav.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of nav button
+         *
+         * @designToken tabview.nav.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Box shadow of nav button
+         *
+         * @designToken tabview.nav.button.box.shadow
+         */
+        boxShadow?: string;
+    };
+}
diff --git a/components/lib/themes/types/tag/index.d.ts b/components/lib/themes/types/tag/index.d.ts
new file mode 100644
index 000000000..154af3b75
--- /dev/null
+++ b/components/lib/themes/types/tag/index.d.ts
@@ -0,0 +1,185 @@
+/**
+ *
+ * Tag Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tag/)
+ *
+ * @module themes/tag
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TagDesignTokens extends ColorSchemeDesignToken<TagDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Font size of root
+         *
+         * @designToken tag.font.size
+         */
+        fontSize?: string;
+        /**
+         * Font weight of root
+         *
+         * @designToken tag.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken tag.padding
+         */
+        padding?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken tag.gap
+         */
+        gap?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken tag.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Rounded border radius of root
+         *
+         * @designToken tag.rounded.border.radius
+         */
+        roundedBorderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken tag.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the primary section
+     */
+    primary?: {
+        /**
+         * Background of primary
+         *
+         * @designToken tag.primary.background
+         */
+        background?: string;
+        /**
+         * Color of primary
+         *
+         * @designToken tag.primary.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the secondary section
+     */
+    secondary?: {
+        /**
+         * Background of secondary
+         *
+         * @designToken tag.secondary.background
+         */
+        background?: string;
+        /**
+         * Color of secondary
+         *
+         * @designToken tag.secondary.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the success section
+     */
+    success?: {
+        /**
+         * Background of success
+         *
+         * @designToken tag.success.background
+         */
+        background?: string;
+        /**
+         * Color of success
+         *
+         * @designToken tag.success.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the info section
+     */
+    info?: {
+        /**
+         * Background of info
+         *
+         * @designToken tag.info.background
+         */
+        background?: string;
+        /**
+         * Color of info
+         *
+         * @designToken tag.info.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the warn section
+     */
+    warn?: {
+        /**
+         * Background of warn
+         *
+         * @designToken tag.warn.background
+         */
+        background?: string;
+        /**
+         * Color of warn
+         *
+         * @designToken tag.warn.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the danger section
+     */
+    danger?: {
+        /**
+         * Background of danger
+         *
+         * @designToken tag.danger.background
+         */
+        background?: string;
+        /**
+         * Color of danger
+         *
+         * @designToken tag.danger.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the contrast section
+     */
+    contrast?: {
+        /**
+         * Background of contrast
+         *
+         * @designToken tag.contrast.background
+         */
+        background?: string;
+        /**
+         * Color of contrast
+         *
+         * @designToken tag.contrast.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/terminal/index.d.ts b/components/lib/themes/types/terminal/index.d.ts
new file mode 100644
index 000000000..771e3d849
--- /dev/null
+++ b/components/lib/themes/types/terminal/index.d.ts
@@ -0,0 +1,77 @@
+/**
+ *
+ * Terminal Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/terminal/)
+ *
+ * @module themes/terminal
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TerminalDesignTokens extends ColorSchemeDesignToken<TerminalDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken terminal.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken terminal.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken terminal.color
+         */
+        color?: string;
+        /**
+         * Height of root
+         *
+         * @designToken terminal.height
+         */
+        height?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken terminal.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken terminal.border.radius
+         */
+        borderRadius?: string;
+    };
+    /**
+     * Used to pass tokens of the prompt section
+     */
+    prompt?: {
+        /**
+         * Gap of prompt
+         *
+         * @designToken terminal.prompt.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the command response section
+     */
+    commandResponse?: {
+        /**
+         * Margin of command response
+         *
+         * @designToken terminal.command.response.margin
+         */
+        margin?: string;
+    };
+}
diff --git a/components/lib/themes/types/textarea/index.d.ts b/components/lib/themes/types/textarea/index.d.ts
new file mode 100644
index 000000000..b8701b963
--- /dev/null
+++ b/components/lib/themes/types/textarea/index.d.ts
@@ -0,0 +1,144 @@
+/**
+ *
+ * Textarea Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/textarea/)
+ *
+ * @module themes/textarea
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TextareaDesignTokens extends ColorSchemeDesignToken<TextareaDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken textarea.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken textarea.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken textarea.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken textarea.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken textarea.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken textarea.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken textarea.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken textarea.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken textarea.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken textarea.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken textarea.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken textarea.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken textarea.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken textarea.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken textarea.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken textarea.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken textarea.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken textarea.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken textarea.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken textarea.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+}
diff --git a/components/lib/themes/types/tieredmenu/index.d.ts b/components/lib/themes/types/tieredmenu/index.d.ts
new file mode 100644
index 000000000..69f14da6c
--- /dev/null
+++ b/components/lib/themes/types/tieredmenu/index.d.ts
@@ -0,0 +1,211 @@
+/**
+ *
+ * TieredMenu Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tieredmenu/)
+ *
+ * @module themes/tieredmenu
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TieredMenuDesignTokens extends ColorSchemeDesignToken<TieredMenuDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken tieredmenu.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken tieredmenu.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken tieredmenu.color
+         */
+        color?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken tieredmenu.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken tieredmenu.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the list section
+     */
+    list?: {
+        /**
+         * Padding of list
+         *
+         * @designToken tieredmenu.list.padding
+         */
+        padding?: string;
+        /**
+         * Gap of list
+         *
+         * @designToken tieredmenu.list.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the item section
+     */
+    item?: {
+        /**
+         * Focus background of item
+         *
+         * @designToken tieredmenu.item.focus.background
+         */
+        focusBackground?: string;
+        /**
+         * Active background of item
+         *
+         * @designToken tieredmenu.item.active.background
+         */
+        activeBackground?: string;
+        /**
+         * Color of item
+         *
+         * @designToken tieredmenu.item.color
+         */
+        color?: string;
+        /**
+         * Focus color of item
+         *
+         * @designToken tieredmenu.item.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of item
+         *
+         * @designToken tieredmenu.item.active.color
+         */
+        activeColor?: string;
+        /**
+         * Padding of item
+         *
+         * @designToken tieredmenu.item.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of item
+         *
+         * @designToken tieredmenu.item.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of item
+         *
+         * @designToken tieredmenu.item.gap
+         */
+        gap?: string;
+        /**
+         * Icon of item
+         */
+        icon?: {
+            /**
+             * Icon color of item
+             *
+             * @designToken tieredmenu.item.icon.color
+             */
+            color?: string;
+            /**
+             * Icon focus color of item
+             *
+             * @designToken tieredmenu.item.icon.focus.color
+             */
+            focusColor?: string;
+            /**
+             * Icon active color of item
+             *
+             * @designToken tieredmenu.item.icon.active.color
+             */
+            activeColor?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the submenu label section
+     */
+    submenuLabel?: {
+        /**
+         * Padding of submenu label
+         *
+         * @designToken tieredmenu.submenu.label.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of submenu label
+         *
+         * @designToken tieredmenu.submenu.label.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Background of submenu label
+         *
+         * @designToken tieredmenu.submenu.label.background
+         */
+        background?: string;
+        /**
+         * Color of submenu label
+         *
+         * @designToken tieredmenu.submenu.label.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the submenu icon section
+     */
+    submenuIcon?: {
+        /**
+         * Size of submenu icon
+         *
+         * @designToken tieredmenu.submenu.icon.size
+         */
+        size?: string;
+        /**
+         * Color of submenu icon
+         *
+         * @designToken tieredmenu.submenu.icon.color
+         */
+        color?: string;
+        /**
+         * Focus color of submenu icon
+         *
+         * @designToken tieredmenu.submenu.icon.focus.color
+         */
+        focusColor?: string;
+        /**
+         * Active color of submenu icon
+         *
+         * @designToken tieredmenu.submenu.icon.active.color
+         */
+        activeColor?: string;
+    };
+    /**
+     * Used to pass tokens of the separator section
+     */
+    separator?: {
+        /**
+         * Border color of separator
+         *
+         * @designToken tieredmenu.separator.border.color
+         */
+        borderColor?: string;
+    };
+}
diff --git a/components/lib/themes/types/timeline/index.d.ts b/components/lib/themes/types/timeline/index.d.ts
new file mode 100644
index 000000000..eadd086b5
--- /dev/null
+++ b/components/lib/themes/types/timeline/index.d.ts
@@ -0,0 +1,138 @@
+/**
+ *
+ * Timeline Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/timeline/)
+ *
+ * @module themes/timeline
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TimelineDesignTokens extends ColorSchemeDesignToken<TimelineDesignTokens> {
+    /**
+     * Used to pass tokens of the event section
+     */
+    event?: {
+        /**
+         * Min height of event
+         *
+         * @designToken timeline.event.min.height
+         */
+        minHeight?: string;
+    };
+    /**
+     * Used to pass tokens of the horizontal section
+     */
+    horizontal?: {
+        /**
+         * Event content of horizontal
+         */
+        eventContent?: {
+            /**
+             * Event content padding of horizontal
+             *
+             * @designToken timeline.horizontal.event.content.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the vertical section
+     */
+    vertical?: {
+        /**
+         * Event content of vertical
+         */
+        eventContent?: {
+            /**
+             * Event content padding of vertical
+             *
+             * @designToken timeline.vertical.event.content.padding
+             */
+            padding?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the event marker section
+     */
+    eventMarker?: {
+        /**
+         * Size of event marker
+         *
+         * @designToken timeline.event.marker.size
+         */
+        size?: string;
+        /**
+         * Border radius of event marker
+         *
+         * @designToken timeline.event.marker.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Border width of event marker
+         *
+         * @designToken timeline.event.marker.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Background of event marker
+         *
+         * @designToken timeline.event.marker.background
+         */
+        background?: string;
+        /**
+         * Border color of event marker
+         *
+         * @designToken timeline.event.marker.border.color
+         */
+        borderColor?: string;
+        /**
+         * Content of event marker
+         */
+        content?: {
+            /**
+             * Content border radius of event marker
+             *
+             * @designToken timeline.event.marker.content.border.radius
+             */
+            borderRadius?: string;
+            /**
+             * Content size of event marker
+             *
+             * @designToken timeline.event.marker.content.size
+             */
+            size?: string;
+            /**
+             * Content background of event marker
+             *
+             * @designToken timeline.event.marker.content.background
+             */
+            background?: string;
+            /**
+             * Content inset shadow of event marker
+             *
+             * @designToken timeline.event.marker.content.inset.shadow
+             */
+            insetShadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the event connector section
+     */
+    eventConnector?: {
+        /**
+         * Color of event connector
+         *
+         * @designToken timeline.event.connector.color
+         */
+        color?: string;
+        /**
+         * Size of event connector
+         *
+         * @designToken timeline.event.connector.size
+         */
+        size?: string;
+    };
+}
diff --git a/components/lib/themes/types/toast/index.d.ts b/components/lib/themes/types/toast/index.d.ts
new file mode 100644
index 000000000..260c25b60
--- /dev/null
+++ b/components/lib/themes/types/toast/index.d.ts
@@ -0,0 +1,580 @@
+/**
+ *
+ * Toast Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/toast/)
+ *
+ * @module themes/toast
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ToastDesignTokens extends ColorSchemeDesignToken<ToastDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Width of root
+         *
+         * @designToken toast.width
+         */
+        width?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken toast.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Border width of root
+         *
+         * @designToken toast.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Size of icon
+         *
+         * @designToken toast.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Padding of content
+         *
+         * @designToken toast.content.padding
+         */
+        padding?: string;
+        /**
+         * Gap of content
+         *
+         * @designToken toast.content.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the text section
+     */
+    text?: {
+        /**
+         * Gap of text
+         *
+         * @designToken toast.text.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the summary section
+     */
+    summary?: {
+        /**
+         * Font weight of summary
+         *
+         * @designToken toast.summary.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Font size of summary
+         *
+         * @designToken toast.summary.font.size
+         */
+        fontSize?: string;
+    };
+    /**
+     * Used to pass tokens of the detail section
+     */
+    detail?: {
+        /**
+         * Font weight of detail
+         *
+         * @designToken toast.detail.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Font size of detail
+         *
+         * @designToken toast.detail.font.size
+         */
+        fontSize?: string;
+    };
+    /**
+     * Used to pass tokens of the close button section
+     */
+    closeButton?: {
+        /**
+         * Width of close button
+         *
+         * @designToken toast.close.button.width
+         */
+        width?: string;
+        /**
+         * Height of close button
+         *
+         * @designToken toast.close.button.height
+         */
+        height?: string;
+        /**
+         * Border radius of close button
+         *
+         * @designToken toast.close.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of close button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of close button
+             *
+             * @designToken toast.close.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of close button
+             *
+             * @designToken toast.close.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring offset of close button
+             *
+             * @designToken toast.close.button.focus.ring.offset
+             */
+            offset?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the close icon section
+     */
+    closeIcon?: {
+        /**
+         * Size of close icon
+         *
+         * @designToken toast.close.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the blur section
+     */
+    blur?: {
+        /**
+         * 0 of blur
+         *
+         * @designToken toast.blur.0
+         */
+        0?: string;
+        /**
+         * 1 of blur
+         *
+         * @designToken toast.blur.1
+         */
+        1?: string;
+        /**
+         * 2 of blur
+         *
+         * @designToken toast.blur.2
+         */
+        2?: string;
+        /**
+         * 3 of blur
+         *
+         * @designToken toast.blur.3
+         */
+        3?: string;
+        /**
+         * 4 of blur
+         *
+         * @designToken toast.blur.4
+         */
+        4?: string;
+    };
+    /**
+     * Used to pass tokens of the info section
+     */
+    info?: {
+        /**
+         * Background of info
+         *
+         * @designToken toast.info.background
+         */
+        background?: string;
+        /**
+         * Border color of info
+         *
+         * @designToken toast.info.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of info
+         *
+         * @designToken toast.info.color
+         */
+        color?: string;
+        /**
+         * Detail color of info
+         *
+         * @designToken toast.info.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of info
+         *
+         * @designToken toast.info.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of info
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of info
+             *
+             * @designToken toast.info.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of info
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of info
+                 *
+                 * @designToken toast.info.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of info
+                 *
+                 * @designToken toast.info.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the success section
+     */
+    success?: {
+        /**
+         * Background of success
+         *
+         * @designToken toast.success.background
+         */
+        background?: string;
+        /**
+         * Border color of success
+         *
+         * @designToken toast.success.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of success
+         *
+         * @designToken toast.success.color
+         */
+        color?: string;
+        /**
+         * Detail color of success
+         *
+         * @designToken toast.success.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of success
+         *
+         * @designToken toast.success.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of success
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of success
+             *
+             * @designToken toast.success.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of success
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of success
+                 *
+                 * @designToken toast.success.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of success
+                 *
+                 * @designToken toast.success.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the warn section
+     */
+    warn?: {
+        /**
+         * Background of warn
+         *
+         * @designToken toast.warn.background
+         */
+        background?: string;
+        /**
+         * Border color of warn
+         *
+         * @designToken toast.warn.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of warn
+         *
+         * @designToken toast.warn.color
+         */
+        color?: string;
+        /**
+         * Detail color of warn
+         *
+         * @designToken toast.warn.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of warn
+         *
+         * @designToken toast.warn.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of warn
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of warn
+             *
+             * @designToken toast.warn.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of warn
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of warn
+                 *
+                 * @designToken toast.warn.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of warn
+                 *
+                 * @designToken toast.warn.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the error section
+     */
+    error?: {
+        /**
+         * Background of error
+         *
+         * @designToken toast.error.background
+         */
+        background?: string;
+        /**
+         * Border color of error
+         *
+         * @designToken toast.error.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of error
+         *
+         * @designToken toast.error.color
+         */
+        color?: string;
+        /**
+         * Detail color of error
+         *
+         * @designToken toast.error.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of error
+         *
+         * @designToken toast.error.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of error
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of error
+             *
+             * @designToken toast.error.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of error
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of error
+                 *
+                 * @designToken toast.error.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of error
+                 *
+                 * @designToken toast.error.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the secondary section
+     */
+    secondary?: {
+        /**
+         * Background of secondary
+         *
+         * @designToken toast.secondary.background
+         */
+        background?: string;
+        /**
+         * Border color of secondary
+         *
+         * @designToken toast.secondary.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of secondary
+         *
+         * @designToken toast.secondary.color
+         */
+        color?: string;
+        /**
+         * Detail color of secondary
+         *
+         * @designToken toast.secondary.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of secondary
+         *
+         * @designToken toast.secondary.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of secondary
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of secondary
+             *
+             * @designToken toast.secondary.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of secondary
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of secondary
+                 *
+                 * @designToken toast.secondary.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of secondary
+                 *
+                 * @designToken toast.secondary.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+    /**
+     * Used to pass tokens of the contrast section
+     */
+    contrast?: {
+        /**
+         * Background of contrast
+         *
+         * @designToken toast.contrast.background
+         */
+        background?: string;
+        /**
+         * Border color of contrast
+         *
+         * @designToken toast.contrast.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of contrast
+         *
+         * @designToken toast.contrast.color
+         */
+        color?: string;
+        /**
+         * Detail color of contrast
+         *
+         * @designToken toast.contrast.detail.color
+         */
+        detailColor?: string;
+        /**
+         * Shadow of contrast
+         *
+         * @designToken toast.contrast.shadow
+         */
+        shadow?: string;
+        /**
+         * Close button of contrast
+         */
+        closeButton?: {
+            /**
+             * Close button hover background of contrast
+             *
+             * @designToken toast.contrast.close.button.hover.background
+             */
+            hoverBackground?: string;
+            /**
+             * Close button focus ring of contrast
+             */
+            focusRing?: {
+                /**
+                 * Close button focus ring color of contrast
+                 *
+                 * @designToken toast.contrast.close.button.focus.ring.color
+                 */
+                color?: string;
+                /**
+                 * Close button focus ring shadow of contrast
+                 *
+                 * @designToken toast.contrast.close.button.focus.ring.shadow
+                 */
+                shadow?: string;
+            };
+        };
+    };
+}
diff --git a/components/lib/themes/types/togglebutton/index.d.ts b/components/lib/themes/types/togglebutton/index.d.ts
new file mode 100644
index 000000000..17948c2ae
--- /dev/null
+++ b/components/lib/themes/types/togglebutton/index.d.ts
@@ -0,0 +1,208 @@
+/**
+ *
+ * ToggleButton Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/togglebutton/)
+ *
+ * @module themes/togglebutton
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ToggleButtonDesignTokens extends ColorSchemeDesignToken<ToggleButtonDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Padding of root
+         *
+         * @designToken togglebutton.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken togglebutton.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken togglebutton.gap
+         */
+        gap?: string;
+        /**
+         * Font weight of root
+         *
+         * @designToken togglebutton.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken togglebutton.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Disabled border color of root
+         *
+         * @designToken togglebutton.disabled.border.color
+         */
+        disabledBorderColor?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken togglebutton.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken togglebutton.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken togglebutton.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken togglebutton.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken togglebutton.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken togglebutton.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken togglebutton.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Background of root
+         *
+         * @designToken togglebutton.background
+         */
+        background?: string;
+        /**
+         * Checked background of root
+         *
+         * @designToken togglebutton.checked.background
+         */
+        checkedBackground?: string;
+        /**
+         * Hover background of root
+         *
+         * @designToken togglebutton.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken togglebutton.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken togglebutton.color
+         */
+        color?: string;
+        /**
+         * Hover color of root
+         *
+         * @designToken togglebutton.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Checked color of root
+         *
+         * @designToken togglebutton.checked.color
+         */
+        checkedColor?: string;
+        /**
+         * Checked border color of root
+         *
+         * @designToken togglebutton.checked.border.color
+         */
+        checkedBorderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the icon section
+     */
+    icon?: {
+        /**
+         * Disabled color of icon
+         *
+         * @designToken togglebutton.icon.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Color of icon
+         *
+         * @designToken togglebutton.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of icon
+         *
+         * @designToken togglebutton.icon.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Checked color of icon
+         *
+         * @designToken togglebutton.icon.checked.color
+         */
+        checkedColor?: string;
+    };
+    /**
+     * Used to pass tokens of the content section
+     */
+    content?: {
+        /**
+         * Left of content
+         *
+         * @designToken togglebutton.content.left
+         */
+        left?: string;
+        /**
+         * Top of content
+         *
+         * @designToken togglebutton.content.top
+         */
+        top?: string;
+        /**
+         * Checked shadow of content
+         *
+         * @designToken togglebutton.content.checked.shadow
+         */
+        checkedShadow?: string;
+        /**
+         * Checked background of content
+         *
+         * @designToken togglebutton.content.checked.background
+         */
+        checkedBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/toggleswitch/index.d.ts b/components/lib/themes/types/toggleswitch/index.d.ts
new file mode 100644
index 000000000..b73f07956
--- /dev/null
+++ b/components/lib/themes/types/toggleswitch/index.d.ts
@@ -0,0 +1,167 @@
+/**
+ *
+ * ToggleSwitch Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/toggleswitch/)
+ *
+ * @module themes/toggleswitch
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ToggleSwitchDesignTokens extends ColorSchemeDesignToken<ToggleSwitchDesignTokens> {
+    /**
+     * Used to pass tokens of the handle section
+     */
+    handle?: {
+        /**
+         * Border radius of handle
+         *
+         * @designToken toggleswitch.handle.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Size of handle
+         *
+         * @designToken toggleswitch.handle.size
+         */
+        size?: string;
+        /**
+         * Background of handle
+         *
+         * @designToken toggleswitch.handle.background
+         */
+        background?: string;
+        /**
+         * Hover background of handle
+         *
+         * @designToken toggleswitch.handle.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Checked background of handle
+         *
+         * @designToken toggleswitch.handle.checked.background
+         */
+        checkedBackground?: string;
+        /**
+         * Checked hover background of handle
+         *
+         * @designToken toggleswitch.handle.checked.hover.background
+         */
+        checkedHoverBackground?: string;
+    };
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Width of root
+         *
+         * @designToken toggleswitch.width
+         */
+        width?: string;
+        /**
+         * Height of root
+         *
+         * @designToken toggleswitch.height
+         */
+        height?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken toggleswitch.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken toggleswitch.gap
+         */
+        gap?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken toggleswitch.shadow
+         */
+        shadow?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken toggleswitch.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken toggleswitch.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken toggleswitch.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken toggleswitch.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken toggleswitch.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Border width of root
+         *
+         * @designToken toggleswitch.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken toggleswitch.border.color
+         */
+        borderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken toggleswitch.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Background of root
+         *
+         * @designToken toggleswitch.background
+         */
+        background?: string;
+        /**
+         * Hover background of root
+         *
+         * @designToken toggleswitch.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Checked background of root
+         *
+         * @designToken toggleswitch.checked.background
+         */
+        checkedBackground?: string;
+        /**
+         * Checked hover background of root
+         *
+         * @designToken toggleswitch.checked.hover.background
+         */
+        checkedHoverBackground?: string;
+    };
+}
diff --git a/components/lib/themes/types/toolbar/index.d.ts b/components/lib/themes/types/toolbar/index.d.ts
new file mode 100644
index 000000000..658bf2a9b
--- /dev/null
+++ b/components/lib/themes/types/toolbar/index.d.ts
@@ -0,0 +1,55 @@
+/**
+ *
+ * Toolbar Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/toolbar/)
+ *
+ * @module themes/toolbar
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface ToolbarDesignTokens extends ColorSchemeDesignToken<ToolbarDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken toolbar.background
+         */
+        background?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken toolbar.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken toolbar.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of root
+         *
+         * @designToken toolbar.color
+         */
+        color?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken toolbar.gap
+         */
+        gap?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken toolbar.padding
+         */
+        padding?: string;
+    };
+}
diff --git a/components/lib/themes/types/tooltip/index.d.ts b/components/lib/themes/types/tooltip/index.d.ts
new file mode 100644
index 000000000..00c565230
--- /dev/null
+++ b/components/lib/themes/types/tooltip/index.d.ts
@@ -0,0 +1,61 @@
+/**
+ *
+ * Tooltip Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tooltip/)
+ *
+ * @module themes/tooltip
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TooltipDesignTokens extends ColorSchemeDesignToken<TooltipDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Max width of root
+         *
+         * @designToken tooltip.max.width
+         */
+        maxWidth?: string;
+        /**
+         * Gutter of root
+         *
+         * @designToken tooltip.gutter
+         */
+        gutter?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken tooltip.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken tooltip.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken tooltip.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Background of root
+         *
+         * @designToken tooltip.background
+         */
+        background?: string;
+        /**
+         * Color of root
+         *
+         * @designToken tooltip.color
+         */
+        color?: string;
+    };
+}
diff --git a/components/lib/themes/types/tree/index.d.ts b/components/lib/themes/types/tree/index.d.ts
new file mode 100644
index 000000000..47c4f07fa
--- /dev/null
+++ b/components/lib/themes/types/tree/index.d.ts
@@ -0,0 +1,253 @@
+/**
+ *
+ * Tree Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/tree/)
+ *
+ * @module themes/tree
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TreeDesignTokens extends ColorSchemeDesignToken<TreeDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken tree.background
+         */
+        background?: string;
+        /**
+         * Color of root
+         *
+         * @designToken tree.color
+         */
+        color?: string;
+        /**
+         * Padding of root
+         *
+         * @designToken tree.padding
+         */
+        padding?: string;
+        /**
+         * Gap of root
+         *
+         * @designToken tree.gap
+         */
+        gap?: string;
+        /**
+         * Indent of root
+         *
+         * @designToken tree.indent
+         */
+        indent?: string;
+    };
+    /**
+     * Used to pass tokens of the node section
+     */
+    node?: {
+        /**
+         * Padding of node
+         *
+         * @designToken tree.node.padding
+         */
+        padding?: string;
+        /**
+         * Border radius of node
+         *
+         * @designToken tree.node.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Hover background of node
+         *
+         * @designToken tree.node.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of node
+         *
+         * @designToken tree.node.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Color of node
+         *
+         * @designToken tree.node.color
+         */
+        color?: string;
+        /**
+         * Hover color of node
+         *
+         * @designToken tree.node.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of node
+         *
+         * @designToken tree.node.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Focus ring of node
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of node
+             *
+             * @designToken tree.node.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of node
+             *
+             * @designToken tree.node.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of node
+             *
+             * @designToken tree.node.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of node
+             *
+             * @designToken tree.node.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of node
+             *
+             * @designToken tree.node.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+        /**
+         * Gap of node
+         *
+         * @designToken tree.node.gap
+         */
+        gap?: string;
+    };
+    /**
+     * Used to pass tokens of the node icon section
+     */
+    nodeIcon?: {
+        /**
+         * Color of node icon
+         *
+         * @designToken tree.node.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of node icon
+         *
+         * @designToken tree.node.icon.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of node icon
+         *
+         * @designToken tree.node.icon.selected.color
+         */
+        selectedColor?: string;
+    };
+    /**
+     * Used to pass tokens of the node toggle button section
+     */
+    nodeToggleButton?: {
+        /**
+         * Border radius of node toggle button
+         *
+         * @designToken tree.node.toggle.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Size of node toggle button
+         *
+         * @designToken tree.node.toggle.button.size
+         */
+        size?: string;
+        /**
+         * Hover background of node toggle button
+         *
+         * @designToken tree.node.toggle.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected hover background of node toggle button
+         *
+         * @designToken tree.node.toggle.button.selected.hover.background
+         */
+        selectedHoverBackground?: string;
+        /**
+         * Color of node toggle button
+         *
+         * @designToken tree.node.toggle.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of node toggle button
+         *
+         * @designToken tree.node.toggle.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected hover color of node toggle button
+         *
+         * @designToken tree.node.toggle.button.selected.hover.color
+         */
+        selectedHoverColor?: string;
+        /**
+         * Focus ring of node toggle button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of node toggle button
+             *
+             * @designToken tree.node.toggle.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of node toggle button
+             *
+             * @designToken tree.node.toggle.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of node toggle button
+             *
+             * @designToken tree.node.toggle.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of node toggle button
+             *
+             * @designToken tree.node.toggle.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of node toggle button
+             *
+             * @designToken tree.node.toggle.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the loading icon section
+     */
+    loadingIcon?: {
+        /**
+         * Size of loading icon
+         *
+         * @designToken tree.loading.icon.size
+         */
+        size?: string;
+    };
+}
diff --git a/components/lib/themes/types/treeselect/index.d.ts b/components/lib/themes/types/treeselect/index.d.ts
new file mode 100644
index 000000000..2105210fa
--- /dev/null
+++ b/components/lib/themes/types/treeselect/index.d.ts
@@ -0,0 +1,229 @@
+/**
+ *
+ * TreeSelect Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/treeselect/)
+ *
+ * @module themes/treeselect
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TreeSelectDesignTokens extends ColorSchemeDesignToken<TreeSelectDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Background of root
+         *
+         * @designToken treeselect.background
+         */
+        background?: string;
+        /**
+         * Disabled background of root
+         *
+         * @designToken treeselect.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Filled background of root
+         *
+         * @designToken treeselect.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Filled focus background of root
+         *
+         * @designToken treeselect.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of root
+         *
+         * @designToken treeselect.border.color
+         */
+        borderColor?: string;
+        /**
+         * Hover border color of root
+         *
+         * @designToken treeselect.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Focus border color of root
+         *
+         * @designToken treeselect.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Invalid border color of root
+         *
+         * @designToken treeselect.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of root
+         *
+         * @designToken treeselect.color
+         */
+        color?: string;
+        /**
+         * Disabled color of root
+         *
+         * @designToken treeselect.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of root
+         *
+         * @designToken treeselect.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of root
+         *
+         * @designToken treeselect.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding x of root
+         *
+         * @designToken treeselect.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding y of root
+         *
+         * @designToken treeselect.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of root
+         *
+         * @designToken treeselect.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of root
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of root
+             *
+             * @designToken treeselect.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of root
+             *
+             * @designToken treeselect.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of root
+             *
+             * @designToken treeselect.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of root
+             *
+             * @designToken treeselect.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of root
+             *
+             * @designToken treeselect.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the dropdown section
+     */
+    dropdown?: {
+        /**
+         * Width of dropdown
+         *
+         * @designToken treeselect.dropdown.width
+         */
+        width?: string;
+        /**
+         * Color of dropdown
+         *
+         * @designToken treeselect.dropdown.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the overlay section
+     */
+    overlay?: {
+        /**
+         * Background of overlay
+         *
+         * @designToken treeselect.overlay.background
+         */
+        background?: string;
+        /**
+         * Border color of overlay
+         *
+         * @designToken treeselect.overlay.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border radius of overlay
+         *
+         * @designToken treeselect.overlay.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Color of overlay
+         *
+         * @designToken treeselect.overlay.color
+         */
+        color?: string;
+        /**
+         * Shadow of overlay
+         *
+         * @designToken treeselect.overlay.shadow
+         */
+        shadow?: string;
+    };
+    /**
+     * Used to pass tokens of the tree section
+     */
+    tree?: {
+        /**
+         * Padding of tree
+         *
+         * @designToken treeselect.tree.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the empty message section
+     */
+    emptyMessage?: {
+        /**
+         * Padding of empty message
+         *
+         * @designToken treeselect.empty.message.padding
+         */
+        padding?: string;
+    };
+    /**
+     * Used to pass tokens of the chip section
+     */
+    chip?: {
+        /**
+         * Border radius of chip
+         *
+         * @designToken treeselect.chip.border.radius
+         */
+        borderRadius?: string;
+    };
+}
diff --git a/components/lib/themes/types/treetable/index.d.ts b/components/lib/themes/types/treetable/index.d.ts
new file mode 100644
index 000000000..847ae0134
--- /dev/null
+++ b/components/lib/themes/types/treetable/index.d.ts
@@ -0,0 +1,531 @@
+/**
+ *
+ * TreeTable Design Tokens
+ *
+ * [Live Demo](https://www.primevue.org/treetable/)
+ *
+ * @module themes/treetable
+ *
+ */
+
+import { ColorSchemeDesignToken } from '..';
+
+export interface TreeTableDesignTokens extends ColorSchemeDesignToken<TreeTableDesignTokens> {
+    /**
+     * Used to pass tokens of the header section
+     */
+    header?: {
+        /**
+         * Background of header
+         *
+         * @designToken treetable.header.background
+         */
+        background?: string;
+        /**
+         * Border color of header
+         *
+         * @designToken treetable.header.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of header
+         *
+         * @designToken treetable.header.color
+         */
+        color?: string;
+        /**
+         * Border width of header
+         *
+         * @designToken treetable.header.border.width
+         */
+        borderWidth?: string;
+        /**
+         * Padding of header
+         *
+         * @designToken treetable.header.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header
+         *
+         * @designToken treetable.header.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the header cell section
+     */
+    headerCell?: {
+        /**
+         * Background of header cell
+         *
+         * @designToken treetable.header.cell.background
+         */
+        background?: string;
+        /**
+         * Hover background of header cell
+         *
+         * @designToken treetable.header.cell.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of header cell
+         *
+         * @designToken treetable.header.cell.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Border color of header cell
+         *
+         * @designToken treetable.header.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of header cell
+         *
+         * @designToken treetable.header.cell.color
+         */
+        color?: string;
+        /**
+         * Hover color of header cell
+         *
+         * @designToken treetable.header.cell.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of header cell
+         *
+         * @designToken treetable.header.cell.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Gap of header cell
+         *
+         * @designToken treetable.header.cell.gap
+         */
+        gap?: string;
+        /**
+         * Padding of header cell
+         *
+         * @designToken treetable.header.cell.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of header cell
+         *
+         * @designToken treetable.header.cell.font.weight
+         */
+        fontWeight?: string;
+        /**
+         * Focus ring of header cell
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of header cell
+             *
+             * @designToken treetable.header.cell.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of header cell
+             *
+             * @designToken treetable.header.cell.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of header cell
+             *
+             * @designToken treetable.header.cell.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of header cell
+             *
+             * @designToken treetable.header.cell.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of header cell
+             *
+             * @designToken treetable.header.cell.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the row section
+     */
+    row?: {
+        /**
+         * Background of row
+         *
+         * @designToken treetable.row.background
+         */
+        background?: string;
+        /**
+         * Hover background of row
+         *
+         * @designToken treetable.row.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected background of row
+         *
+         * @designToken treetable.row.selected.background
+         */
+        selectedBackground?: string;
+        /**
+         * Color of row
+         *
+         * @designToken treetable.row.color
+         */
+        color?: string;
+        /**
+         * Hover color of row
+         *
+         * @designToken treetable.row.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected color of row
+         *
+         * @designToken treetable.row.selected.color
+         */
+        selectedColor?: string;
+        /**
+         * Focus ring of row
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of row
+             *
+             * @designToken treetable.row.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of row
+             *
+             * @designToken treetable.row.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of row
+             *
+             * @designToken treetable.row.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of row
+             *
+             * @designToken treetable.row.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of row
+             *
+             * @designToken treetable.row.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the body cell section
+     */
+    bodyCell?: {
+        /**
+         * Border color of body cell
+         *
+         * @designToken treetable.body.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Padding of body cell
+         *
+         * @designToken treetable.body.cell.padding
+         */
+        padding?: string;
+        /**
+         * Gap of body cell
+         *
+         * @designToken treetable.body.cell.gap
+         */
+        gap?: string;
+        /**
+         * Selected border color of body cell
+         *
+         * @designToken treetable.body.cell.selected.border.color
+         */
+        selectedBorderColor?: string;
+    };
+    /**
+     * Used to pass tokens of the footer cell section
+     */
+    footerCell?: {
+        /**
+         * Background of footer cell
+         *
+         * @designToken treetable.footer.cell.background
+         */
+        background?: string;
+        /**
+         * Border color of footer cell
+         *
+         * @designToken treetable.footer.cell.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of footer cell
+         *
+         * @designToken treetable.footer.cell.color
+         */
+        color?: string;
+        /**
+         * Padding of footer cell
+         *
+         * @designToken treetable.footer.cell.padding
+         */
+        padding?: string;
+        /**
+         * Font weight of footer cell
+         *
+         * @designToken treetable.footer.cell.font.weight
+         */
+        fontWeight?: string;
+    };
+    /**
+     * Used to pass tokens of the footer section
+     */
+    footer?: {
+        /**
+         * Background of footer
+         *
+         * @designToken treetable.footer.background
+         */
+        background?: string;
+        /**
+         * Border color of footer
+         *
+         * @designToken treetable.footer.border.color
+         */
+        borderColor?: string;
+        /**
+         * Color of footer
+         *
+         * @designToken treetable.footer.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the column resizer width section
+     */
+    columnResizerWidth?: {
+        /**
+         * 0 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.0
+         */
+        0?: string;
+        /**
+         * 1 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.1
+         */
+        1?: string;
+        /**
+         * 2 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.2
+         */
+        2?: string;
+        /**
+         * 3 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.3
+         */
+        3?: string;
+        /**
+         * 4 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.4
+         */
+        4?: string;
+        /**
+         * 5 of column resizer width
+         *
+         * @designToken treetable.column.resizer.width.5
+         */
+        5?: string;
+    };
+    /**
+     * Used to pass tokens of the resize indicator section
+     */
+    resizeIndicator?: {
+        /**
+         * Width of resize indicator
+         *
+         * @designToken treetable.resize.indicator.width
+         */
+        width?: string;
+        /**
+         * Color of resize indicator
+         *
+         * @designToken treetable.resize.indicator.color
+         */
+        color?: string;
+    };
+    /**
+     * Used to pass tokens of the sort icon section
+     */
+    sortIcon?: {
+        /**
+         * Color of sort icon
+         *
+         * @designToken treetable.sort.icon.color
+         */
+        color?: string;
+        /**
+         * Hover color of sort icon
+         *
+         * @designToken treetable.sort.icon.hover.color
+         */
+        hoverColor?: string;
+    };
+    /**
+     * Used to pass tokens of the loading icon section
+     */
+    loadingIcon?: {
+        /**
+         * Size of loading icon
+         *
+         * @designToken treetable.loading.icon.size
+         */
+        size?: string;
+    };
+    /**
+     * Used to pass tokens of the node toggle button section
+     */
+    nodeToggleButton?: {
+        /**
+         * Hover background of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.hover.background
+         */
+        hoverBackground?: string;
+        /**
+         * Selected hover background of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.selected.hover.background
+         */
+        selectedHoverBackground?: string;
+        /**
+         * Color of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.color
+         */
+        color?: string;
+        /**
+         * Hover color of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.hover.color
+         */
+        hoverColor?: string;
+        /**
+         * Selected hover color of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.selected.hover.color
+         */
+        selectedHoverColor?: string;
+        /**
+         * Size of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.size
+         */
+        size?: string;
+        /**
+         * Border radius of node toggle button
+         *
+         * @designToken treetable.node.toggle.button.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Focus ring of node toggle button
+         */
+        focusRing?: {
+            /**
+             * Focus ring width of node toggle button
+             *
+             * @designToken treetable.node.toggle.button.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Focus ring style of node toggle button
+             *
+             * @designToken treetable.node.toggle.button.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Focus ring color of node toggle button
+             *
+             * @designToken treetable.node.toggle.button.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Focus ring offset of node toggle button
+             *
+             * @designToken treetable.node.toggle.button.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Focus ring shadow of node toggle button
+             *
+             * @designToken treetable.node.toggle.button.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    };
+    /**
+     * Used to pass tokens of the paginator top section
+     */
+    paginatorTop?: {
+        /**
+         * Border color of paginator top
+         *
+         * @designToken treetable.paginator.top.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator top
+         *
+         * @designToken treetable.paginator.top.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the paginator bottom section
+     */
+    paginatorBottom?: {
+        /**
+         * Border color of paginator bottom
+         *
+         * @designToken treetable.paginator.bottom.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border width of paginator bottom
+         *
+         * @designToken treetable.paginator.bottom.border.width
+         */
+        borderWidth?: string;
+    };
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: {
+        /**
+         * Border color of root
+         *
+         * @designToken treetable.border.color
+         */
+        borderColor?: string;
+    };
+}
diff --git a/package.json b/package.json
index efb315829..f2ff55617 100644
--- a/package.json
+++ b/package.json
@@ -13,9 +13,10 @@
         "generate": "nuxt generate",
         "preview": "nuxt preview",
         "postinstall": "nuxt prepare",
-        "build:lib": "npm run build:check && npm run build:package",
-        "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api",
+        "build:lib": "npm run build:api && npm run build:check && npm run build:package",
+        "build:package": "NODE_ENV=production rollup -c && node build-meta",
         "build:check": "npm run format:check && npm run security:check",
+        "build:api": "node ./api-generator/build-api.js && npm run themedoc && npm run apidoc && npm run format",
         "security:check": "npm audit --production --audit-level high",
         "format": "prettier --write \"**/*.{js,vue,d.ts}\" --cache",
         "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
@@ -25,7 +26,7 @@
         "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore . --cache",
         "lint:fix": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore .",
         "apidoc": "node ./api-generator/build-apidoc.js",
-        "build:api": "node ./api-generator/build-api.js && npm run apidoc"
+        "themedoc": "node ./api-generator/build-tokens.js"
     },
     "keywords": [
         "primevue",