diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3053b14ca..d82c4ead8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Breaking Changes
+- #### Themes
+  - Changed global prefixes for CSS custom properties for component themes to be better aligned with other Ignite UI component frameworks.
+
 ## [6.5.1] - 2026-02-04
 ### Fixed
 - #### Calendar
diff --git a/package-lock.json b/package-lock.json
index d91296358..8668037ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,7 +37,7 @@
         "husky": "^9.1.7",
         "ig-typedoc-theme": "^7.0.1",
         "igniteui-i18n-resources": "^1.0.3",
-        "igniteui-theming": "^24.1.2",
+        "igniteui-theming": "^25.0.0-beta.5",
         "keep-a-changelog": "^2.8.0",
         "lint-staged": "^16.2.7",
         "lit-analyzer": "^2.0.3",
@@ -1184,6 +1184,19 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@hono/node-server": {
+      "version": "1.19.9",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz",
+      "integrity": "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.14.1"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
     "node_modules/@igniteui/material-icons-extended": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@igniteui/material-icons-extended/-/material-icons-extended-3.1.0.tgz",
@@ -1334,6 +1347,111 @@
         "react": ">=16"
       }
     },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz",
+      "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.9",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk/node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.0.tgz",
@@ -4327,6 +4445,24 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -4743,6 +4879,185 @@
         "readable-stream": "^3.4.0"
       }
     },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/body-parser/node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/iconv-lite": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+      "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/body-parser/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/body-parser/node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -5600,6 +5915,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
     "node_modules/cookies": {
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.9.1.tgz",
@@ -6736,6 +7061,29 @@
         "bare-events": "^2.7.0"
       }
     },
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventsource-parser": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -6760,15 +7108,336 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/extract-zip": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "debug": "^4.1.1",
-        "get-stream": "^5.1.0",
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.2.1.tgz",
+      "integrity": "sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "10.0.1"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/express-rate-limit/node_modules/ip-address": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
+      "integrity": "sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/express/node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/content-disposition": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+      "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/express/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/media-typer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/express/node_modules/negotiator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express/node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/type-is": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^1.0.5",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
         "yauzl": "^2.10.0"
       },
       "bin": {
@@ -7048,6 +7717,16 @@
         }
       }
     },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -7505,6 +8184,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hono": {
+      "version": "4.11.10",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.10.tgz",
+      "integrity": "sha512-kyWP5PAiMooEvGrA9jcD3IXF7ATu8+o7B3KCbPXid5se52NPqnOpM/r9qeW2heMnOekF4kqR1fXJqCYeCLKrZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
     "node_modules/hookified": {
       "version": "1.15.1",
       "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
@@ -7659,139 +8348,573 @@
         "debug": "4"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/https-proxy-agent/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ig-typedoc-theme": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/ig-typedoc-theme/-/ig-typedoc-theme-7.0.1.tgz",
+      "integrity": "sha512-JB3d6IYKVGmlmYYZ46PLBcGsM56bZ6xTY61xGWdHcAvujslUSheOp3vjcAwFnCz1dup54geOl4MSXnYUsKpxHg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "typedoc-plugin-localization": "^3.1.0"
+      },
+      "peerDependencies": {
+        "typedoc": "^0.28.14",
+        "typedoc-plugin-localization": "^3.1.0"
+      }
+    },
+    "node_modules/igniteui-i18n-core": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.3.tgz",
+      "integrity": "sha512-lW7CsJ1TzaQA0j28IuaouJEx/G4io/WAcLrakE0K0eUlsTl75wejoNGEBAiyI1qaz8hbA4dHUHAO3CNhXkGNIA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "igniteui-i18n-resources": "1.0.3"
+      },
+      "peerDependenciesMeta": {
+        "igniteui-i18n-resources": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/igniteui-i18n-resources": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/igniteui-i18n-resources/-/igniteui-i18n-resources-1.0.3.tgz",
+      "integrity": "sha512-61W9DuKT1FwFyLYzZ1urrfENTQh4tfii99AuviIcxihbDAbObJtDxz/i+Std32IIb6Jun6/J4ojnbR6JJdGkBA==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "igniteui-i18n-core": "1.0.3"
+      }
+    },
+    "node_modules/igniteui-theming": {
+      "version": "25.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.0-beta.5.tgz",
+      "integrity": "sha512-r8gJzYh2dkveYvXjGf9Ds11xQTi2ytAEWExJAgDCtQmGwaFzFF1YBx82yr4YMEGxfTOlQiqBt044O+dvplwjrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@modelcontextprotocol/sdk": "^1.25.0",
+        "sass-embedded": "~1.92.1",
+        "zod": "^3.25.76"
+      },
+      "bin": {
+        "igniteui-theming-mcp": "dist/mcp/index.js"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/immutable": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
+      "integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/igniteui-theming/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.1.tgz",
+      "integrity": "sha512-ffmsdbwqb3XeyR8jJR6KelIXARM9bFQe8A6Q3W4Klmwy5Ckd5gz7jgUNHo4UOqutU5Sk1DtKLbpDP0nLCg1xqQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.92.1.tgz",
+      "integrity": "sha512-28YwLnF5atAhogt3E4hXzz/NB9dwKffyw08a7DEasLh94P7+aELkG3ENSHYCWB9QFN14hYNLfwr9ozUsPDhcDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@bufbuild/protobuf": "^2.5.0",
+        "buffer-builder": "^0.2.0",
+        "colorjs.io": "^0.5.0",
+        "immutable": "^5.0.2",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "sync-child-process": "^1.0.2",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-all-unknown": "1.92.1",
+        "sass-embedded-android-arm": "1.92.1",
+        "sass-embedded-android-arm64": "1.92.1",
+        "sass-embedded-android-riscv64": "1.92.1",
+        "sass-embedded-android-x64": "1.92.1",
+        "sass-embedded-darwin-arm64": "1.92.1",
+        "sass-embedded-darwin-x64": "1.92.1",
+        "sass-embedded-linux-arm": "1.92.1",
+        "sass-embedded-linux-arm64": "1.92.1",
+        "sass-embedded-linux-musl-arm": "1.92.1",
+        "sass-embedded-linux-musl-arm64": "1.92.1",
+        "sass-embedded-linux-musl-riscv64": "1.92.1",
+        "sass-embedded-linux-musl-x64": "1.92.1",
+        "sass-embedded-linux-riscv64": "1.92.1",
+        "sass-embedded-linux-x64": "1.92.1",
+        "sass-embedded-unknown-all": "1.92.1",
+        "sass-embedded-win32-arm64": "1.92.1",
+        "sass-embedded-win32-x64": "1.92.1"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-all-unknown": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-all-unknown/-/sass-embedded-all-unknown-1.92.1.tgz",
+      "integrity": "sha512-5t6/YZf+vhO3OY/49h8RCL6Cwo78luva0M+TnTM9gu9ASffRXAuOVLNKciSXa3loptyemDDS6IU5/dVH5w0KmA==",
+      "cpu": [
+        "!arm",
+        "!arm64",
+        "!riscv64",
+        "!x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "sass": "1.92.1"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-android-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.92.1.tgz",
+      "integrity": "sha512-4EjpVVzuksERdgAd4BqeSXFnWtWN3DSRyEIUPJ7BhcS9sfDh2Gf6miI2kNTvIQLJ2XIJynDDcEQ8a1U9KwKUTQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-android-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.92.1.tgz",
+      "integrity": "sha512-Q+UruGb7yKawHagVmVDRRKsnc4mJZvWMBnuRCu2coJo2FofyqBmXohVGXbxko97sYceA9TJTrUEx3WVKQUNCbQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-android-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.92.1.tgz",
+      "integrity": "sha512-nCY5btLlX7W7Jc6cCL6D2Yklpiu540EJ2G08YVGu12DrAMCBzqM347CSRf2ojp1H8jyhvmLkaFwnrJWzh+6S+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-android-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.92.1.tgz",
+      "integrity": "sha512-qYWR3bftJ77aLYwYDFuzDI4dcwVVixxqQxlIQWNGkHRCexj614qGSSHemr18C2eVj3mjXAQxTQxU68U7pkGPAA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.92.1.tgz",
+      "integrity": "sha512-g2yQ3txjMYLKMjL2cW1xRO9nnV3ijf95NbX/QShtV6tiVUETZNWDsRMDEwBNGYY6PTE/UZerjJL1R/2xpQg6WA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-darwin-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.92.1.tgz",
+      "integrity": "sha512-eH+fgxLQhTEPjZPCgPAVuX5e514Qp/4DMAUMtlNShv4cr4TD5qOp1XlsPYR/b7uE7p2cKFkUpUn/bHNqJ2ay4A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.92.1.tgz",
+      "integrity": "sha512-cT3w8yoQTqrtZvWLJeutEGmawITDTY4J6oSVQjeDcPnnoPt0gOFxem8YMznraACXvahw/2+KJDH33BTNgiPo0A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.92.1.tgz",
+      "integrity": "sha512-dNmlpGeZkry1BofhAdGFBXrpM69y9LlYuNnncf+HfsOOUtj8j0q1RwS+zb5asknhKFUOAG8GCGRY1df7Rwu35g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.92.1.tgz",
+      "integrity": "sha512-nPBos6lI31ef2zQhqTZhFOU7ar4impJbLIax0XsqS269YsiCwjhk11VmUloJTpFlJuKMiVXNo7dPx+katxhD/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.92.1.tgz",
+      "integrity": "sha512-TfiEBkCyNzVoOhjHXUT+vZ6+p0ueDbvRw6f4jHdkvljZzXdXMby4wh7BU1odl69rgRTkSvYKhgbErRLDR/F7pQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/https-proxy-agent/node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.92.1.tgz",
+      "integrity": "sha512-R+RcJA4EYpJDE9JM1GgPYgZo7x94FlxZ6jPodOQkEaZ1S9kvXVCuP5X/0PXRPhu08KJOfeMsAElzfdAjUf7KJg==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/https-proxy-agent/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.92.1.tgz",
+      "integrity": "sha512-/HolYRGXJjx8nLw6oj5ZrkR7PFM7X/5kE4MYZaFMpDIPIcw3bqB2fUXLo/MYlRLsw7gBAT6hJAMBrNdKuTphfw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "Apache-2.0",
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=10.17.0"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/husky": {
-      "version": "9.1.7",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
-      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.92.1.tgz",
+      "integrity": "sha512-b9bxe0CMsbSsLx3nrR0cq8xpIkoAC6X36o4DGMITF3m2v3KsojC7ru9X0Gz+zUFr6rwpq/0lTNzFLNu6sPNo3w==",
+      "cpu": [
+        "riscv64"
+      ],
       "dev": true,
       "license": "MIT",
-      "bin": {
-        "husky": "bin.js"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/typicode"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-linux-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.92.1.tgz",
+      "integrity": "sha512-xuiK5Jp5NldW4bvlC7AuX1Wf7o0gLZ3md/hNg+bkTvxtCDgnUHtfdo8Q+xWP11bD9QX31xXFWpmUB8UDLi6XQQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
+      "optional": true,
+      "os": [
+        "linux"
+      ],
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-unknown-all": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-unknown-all/-/sass-embedded-unknown-all-1.92.1.tgz",
+      "integrity": "sha512-AT9oXvtNY4N+Nd0wvoWqq9A5HjdH/X3aUH4boQUtXyaJ/9DUwnQmBpP5Gtn028ZS8exOGBdobmmWAuigv0k/OA==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "!android",
+        "!darwin",
+        "!linux",
+        "!win32"
       ],
-      "license": "BSD-3-Clause"
+      "dependencies": {
+        "sass": "1.92.1"
+      }
     },
-    "node_modules/ig-typedoc-theme": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/ig-typedoc-theme/-/ig-typedoc-theme-7.0.1.tgz",
-      "integrity": "sha512-JB3d6IYKVGmlmYYZ46PLBcGsM56bZ6xTY61xGWdHcAvujslUSheOp3vjcAwFnCz1dup54geOl4MSXnYUsKpxHg==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-win32-arm64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.92.1.tgz",
+      "integrity": "sha512-KvmpQjY9yTBMtTYz4WBqetlv9bGaDW1aStcu7MSTbH7YiSybX/9fnxlCAEQv1WlIidQhcJAiyk0Eae+LGK7cIQ==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "typedoc-plugin-localization": "^3.1.0"
-      },
-      "peerDependencies": {
-        "typedoc": "^0.28.14",
-        "typedoc-plugin-localization": "^3.1.0"
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/igniteui-i18n-core": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.3.tgz",
-      "integrity": "sha512-lW7CsJ1TzaQA0j28IuaouJEx/G4io/WAcLrakE0K0eUlsTl75wejoNGEBAiyI1qaz8hbA4dHUHAO3CNhXkGNIA==",
+    "node_modules/igniteui-theming/node_modules/sass-embedded-win32-x64": {
+      "version": "1.92.1",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.92.1.tgz",
+      "integrity": "sha512-B6Nz/GbH7Vkpb2TkQHsGcczWM5t+70VWopWF1x5V5yxLpA8ZzVQ7NTKKi+jDoVY2Efu6ZyzgT9n5KgG2kWliXA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
       "license": "MIT",
-      "peerDependencies": {
-        "igniteui-i18n-resources": "1.0.3"
-      },
-      "peerDependenciesMeta": {
-        "igniteui-i18n-resources": {
-          "optional": true
-        }
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/igniteui-i18n-resources": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/igniteui-i18n-resources/-/igniteui-i18n-resources-1.0.3.tgz",
-      "integrity": "sha512-61W9DuKT1FwFyLYzZ1urrfENTQh4tfii99AuviIcxihbDAbObJtDxz/i+Std32IIb6Jun6/J4ojnbR6JJdGkBA==",
-      "devOptional": true,
+    "node_modules/igniteui-theming/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "igniteui-i18n-core": "1.0.3"
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/igniteui-theming": {
-      "version": "24.1.2",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.1.2.tgz",
-      "integrity": "sha512-Buz5rDPnOPkX5iPDyH2jCMRtJu5CnnSFBco0Sw5lkmXXgp6+zVyG6eTZQ/m1UR0AEBwb0tHo+6IIEebpMvRWRQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/ignore": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
@@ -8184,6 +9307,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -8347,6 +9477,16 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/jose": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8381,6 +9521,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -9391,6 +10538,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -10213,6 +11373,17 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/path-to-regexp": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -10273,6 +11444,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
@@ -10666,6 +11847,20 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/proxy-agent": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
@@ -11412,6 +12607,48 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/router/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/router/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/rs-module-lexer": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/rs-module-lexer/-/rs-module-lexer-2.6.0.tgz",
@@ -14731,6 +15968,16 @@
         "url": "https://github.com/sponsors/colinhacks"
       }
     },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.1.tgz",
+      "integrity": "sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25 || ^4"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 5222124ee..4839ff45e 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-i18n-resources": "^1.0.3",
-    "igniteui-theming": "^24.1.2",
+    "igniteui-theming": "^25.0.0-beta.5",
     "keep-a-changelog": "^2.8.0",
     "lint-staged": "^16.2.7",
     "lit-analyzer": "^2.0.3",
diff --git a/src/components/avatar/themes/dark/avatar.bootstrap.scss b/src/components/avatar/themes/dark/avatar.bootstrap.scss
index 054c9776c..68cc3c7bb 100644
--- a/src/components/avatar/themes/dark/avatar.bootstrap.scss
+++ b/src/components/avatar/themes/dark/avatar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.fluent.scss b/src/components/avatar/themes/dark/avatar.fluent.scss
index 7fe251d87..679ee2e59 100644
--- a/src/components/avatar/themes/dark/avatar.fluent.scss
+++ b/src/components/avatar/themes/dark/avatar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.indigo.scss b/src/components/avatar/themes/dark/avatar.indigo.scss
index 8f5c3c8de..5c1ebeb56 100644
--- a/src/components/avatar/themes/dark/avatar.indigo.scss
+++ b/src/components/avatar/themes/dark/avatar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/dark/avatar.material.scss b/src/components/avatar/themes/dark/avatar.material.scss
index 63db92c80..0dddc23d0 100644
--- a/src/components/avatar/themes/dark/avatar.material.scss
+++ b/src/components/avatar/themes/dark/avatar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.bootstrap.scss b/src/components/avatar/themes/light/avatar.bootstrap.scss
index 44c9376bf..8bade7490 100644
--- a/src/components/avatar/themes/light/avatar.bootstrap.scss
+++ b/src/components/avatar/themes/light/avatar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.fluent.scss b/src/components/avatar/themes/light/avatar.fluent.scss
index 1da2430b0..4d87074b4 100644
--- a/src/components/avatar/themes/light/avatar.fluent.scss
+++ b/src/components/avatar/themes/light/avatar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.indigo.scss b/src/components/avatar/themes/light/avatar.indigo.scss
index c57b961c0..641839724 100644
--- a/src/components/avatar/themes/light/avatar.indigo.scss
+++ b/src/components/avatar/themes/light/avatar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.material.scss b/src/components/avatar/themes/light/avatar.material.scss
index b288be892..3271cfef8 100644
--- a/src/components/avatar/themes/light/avatar.material.scss
+++ b/src/components/avatar/themes/light/avatar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/avatar/themes/light/avatar.shared.scss b/src/components/avatar/themes/light/avatar.shared.scss
index 028be1f80..4a7e8438a 100644
--- a/src/components/avatar/themes/light/avatar.shared.scss
+++ b/src/components/avatar/themes/light/avatar.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/badge/themes/dark/badge.bootstrap.scss b/src/components/badge/themes/dark/badge.bootstrap.scss
index 914cc9a73..68cc3c7bb 100644
--- a/src/components/badge/themes/dark/badge.bootstrap.scss
+++ b/src/components/badge/themes/dark/badge.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/dark/badge.fluent.scss b/src/components/badge/themes/dark/badge.fluent.scss
index 16a0338ee..679ee2e59 100644
--- a/src/components/badge/themes/dark/badge.fluent.scss
+++ b/src/components/badge/themes/dark/badge.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/dark/badge.indigo.scss b/src/components/badge/themes/dark/badge.indigo.scss
index 1c28f6234..5378468d3 100644
--- a/src/components/badge/themes/dark/badge.indigo.scss
+++ b/src/components/badge/themes/dark/badge.indigo.scss
@@ -5,7 +5,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([variant='warning']) [part~='base'] {
@@ -15,4 +15,4 @@ $theme: $indigo;
     ::slotted(igc-icon) {
         color: color(gray, 50);
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/badge/themes/dark/badge.material.scss b/src/components/badge/themes/dark/badge.material.scss
index d3b6ad76b..0dddc23d0 100644
--- a/src/components/badge/themes/dark/badge.material.scss
+++ b/src/components/badge/themes/dark/badge.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.bootstrap.scss b/src/components/badge/themes/light/badge.bootstrap.scss
index 158222b7f..8bade7490 100644
--- a/src/components/badge/themes/light/badge.bootstrap.scss
+++ b/src/components/badge/themes/light/badge.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.fluent.scss b/src/components/badge/themes/light/badge.fluent.scss
index 7433b1f38..4d87074b4 100644
--- a/src/components/badge/themes/light/badge.fluent.scss
+++ b/src/components/badge/themes/light/badge.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.indigo.scss b/src/components/badge/themes/light/badge.indigo.scss
index 13cc630c4..641839724 100644
--- a/src/components/badge/themes/light/badge.indigo.scss
+++ b/src/components/badge/themes/light/badge.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.material.scss b/src/components/badge/themes/light/badge.material.scss
index 73c8c4b9e..3271cfef8 100644
--- a/src/components/badge/themes/light/badge.material.scss
+++ b/src/components/badge/themes/light/badge.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-badge');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/badge/themes/light/badge.shared.scss b/src/components/badge/themes/light/badge.shared.scss
index 94d6682a7..4a7e8438a 100644
--- a/src/components/badge/themes/light/badge.shared.scss
+++ b/src/components/badge/themes/light/badge.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-badge');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.bootstrap.scss b/src/components/banner/themes/dark/banner.bootstrap.scss
index 840363c57..4583b8945 100644
--- a/src/components/banner/themes/dark/banner.bootstrap.scss
+++ b/src/components/banner/themes/dark/banner.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.fluent.scss b/src/components/banner/themes/dark/banner.fluent.scss
index 4624a8067..5b468e505 100644
--- a/src/components/banner/themes/dark/banner.fluent.scss
+++ b/src/components/banner/themes/dark/banner.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.indigo.scss b/src/components/banner/themes/dark/banner.indigo.scss
index 076d232e7..22d505355 100644
--- a/src/components/banner/themes/dark/banner.indigo.scss
+++ b/src/components/banner/themes/dark/banner.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/dark/banner.material.scss b/src/components/banner/themes/dark/banner.material.scss
index a5e2f2109..0573bf445 100644
--- a/src/components/banner/themes/dark/banner.material.scss
+++ b/src/components/banner/themes/dark/banner.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.bootstrap.scss b/src/components/banner/themes/light/banner.bootstrap.scss
index 840363c57..4583b8945 100644
--- a/src/components/banner/themes/light/banner.bootstrap.scss
+++ b/src/components/banner/themes/light/banner.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.fluent.scss b/src/components/banner/themes/light/banner.fluent.scss
index 4624a8067..5b468e505 100644
--- a/src/components/banner/themes/light/banner.fluent.scss
+++ b/src/components/banner/themes/light/banner.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.indigo.scss b/src/components/banner/themes/light/banner.indigo.scss
index 076d232e7..22d505355 100644
--- a/src/components/banner/themes/light/banner.indigo.scss
+++ b/src/components/banner/themes/light/banner.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/banner/themes/light/banner.material.scss b/src/components/banner/themes/light/banner.material.scss
index a5e2f2109..0573bf445 100644
--- a/src/components/banner/themes/light/banner.material.scss
+++ b/src/components/banner/themes/light/banner.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-banner');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/button-group/themes/dark/button-group.bootstrap.scss b/src/components/button-group/themes/dark/button-group.bootstrap.scss
index 4d41e65ca..8bade7490 100644
--- a/src/components/button-group/themes/dark/button-group.bootstrap.scss
+++ b/src/components/button-group/themes/dark/button-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.fluent.scss b/src/components/button-group/themes/dark/button-group.fluent.scss
index 34c83f07b..700019ad3 100644
--- a/src/components/button-group/themes/dark/button-group.fluent.scss
+++ b/src/components/button-group/themes/dark/button-group.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/button-group/themes/dark/button-group.indigo.scss b/src/components/button-group/themes/dark/button-group.indigo.scss
index 88afef683..641839724 100644
--- a/src/components/button-group/themes/dark/button-group.indigo.scss
+++ b/src/components/button-group/themes/dark/button-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.material.scss b/src/components/button-group/themes/dark/button-group.material.scss
index 6ad92f138..3271cfef8 100644
--- a/src/components/button-group/themes/dark/button-group.material.scss
+++ b/src/components/button-group/themes/dark/button-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/dark/button-group.shared.scss b/src/components/button-group/themes/dark/button-group.shared.scss
index bcaa9de8b..96b6530e6 100644
--- a/src/components/button-group/themes/dark/button-group.shared.scss
+++ b/src/components/button-group/themes/dark/button-group.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-button-group');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/button-group/themes/light/button-group.bootstrap.scss b/src/components/button-group/themes/light/button-group.bootstrap.scss
index 4d41e65ca..8bade7490 100644
--- a/src/components/button-group/themes/light/button-group.bootstrap.scss
+++ b/src/components/button-group/themes/light/button-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.fluent.scss b/src/components/button-group/themes/light/button-group.fluent.scss
index 34c83f07b..700019ad3 100644
--- a/src/components/button-group/themes/light/button-group.fluent.scss
+++ b/src/components/button-group/themes/light/button-group.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/button-group/themes/light/button-group.indigo.scss b/src/components/button-group/themes/light/button-group.indigo.scss
index 88afef683..641839724 100644
--- a/src/components/button-group/themes/light/button-group.indigo.scss
+++ b/src/components/button-group/themes/light/button-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.material.scss b/src/components/button-group/themes/light/button-group.material.scss
index 6ad92f138..3271cfef8 100644
--- a/src/components/button-group/themes/light/button-group.material.scss
+++ b/src/components/button-group/themes/light/button-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-button-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/button-group/themes/light/button-group.shared.scss b/src/components/button-group/themes/light/button-group.shared.scss
index bcaa9de8b..96b6530e6 100644
--- a/src/components/button-group/themes/light/button-group.shared.scss
+++ b/src/components/button-group/themes/light/button-group.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-button-group');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/button/themes/button/dark/button.bootstrap.scss b/src/components/button/themes/button/dark/button.bootstrap.scss
index 9224db22b..50a09d9bf 100644
--- a/src/components/button/themes/button/dark/button.bootstrap.scss
+++ b/src/components/button/themes/button/dark/button.bootstrap.scss
@@ -8,17 +8,17 @@ $fab-theme: $bootstrap-fab;
 $outlined-theme: $bootstrap-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.fluent.scss b/src/components/button/themes/button/dark/button.fluent.scss
index 4add3dcaa..9f146bf83 100644
--- a/src/components/button/themes/button/dark/button.fluent.scss
+++ b/src/components/button/themes/button/dark/button.fluent.scss
@@ -8,17 +8,17 @@ $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.indigo.scss b/src/components/button/themes/button/dark/button.indigo.scss
index 4068ca0a0..cf67ab866 100644
--- a/src/components/button/themes/button/dark/button.indigo.scss
+++ b/src/components/button/themes/button/dark/button.indigo.scss
@@ -8,17 +8,17 @@ $fab-theme: $indigo-fab;
 $outlined-theme: $indigo-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/dark/button.material.scss b/src/components/button/themes/button/dark/button.material.scss
index 506f34829..be86375c4 100644
--- a/src/components/button/themes/button/dark/button.material.scss
+++ b/src/components/button/themes/button/dark/button.material.scss
@@ -8,17 +8,17 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff(light.$base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.bootstrap.scss b/src/components/button/themes/button/light/button.bootstrap.scss
index cd91f8d46..0050820d6 100644
--- a/src/components/button/themes/button/light/button.bootstrap.scss
+++ b/src/components/button/themes/button/light/button.bootstrap.scss
@@ -7,17 +7,17 @@ $fab-theme: $bootstrap-fab;
 $outlined-theme: $bootstrap-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.fluent.scss b/src/components/button/themes/button/light/button.fluent.scss
index 4e6e7d0d4..26c2e4b73 100644
--- a/src/components/button/themes/button/light/button.fluent.scss
+++ b/src/components/button/themes/button/light/button.fluent.scss
@@ -7,17 +7,17 @@ $fab-theme: $fluent-fab;
 $outlined-theme: $fluent-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.indigo.scss b/src/components/button/themes/button/light/button.indigo.scss
index 1c55ceb16..f02750696 100644
--- a/src/components/button/themes/button/light/button.indigo.scss
+++ b/src/components/button/themes/button/light/button.indigo.scss
@@ -7,17 +7,17 @@ $fab-theme: $indigo-fab;
 $outlined-theme: $indigo-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.material.scss b/src/components/button/themes/button/light/button.material.scss
index 94a5b111f..0d9444f18 100644
--- a/src/components/button/themes/button/light/button.material.scss
+++ b/src/components/button/themes/button/light/button.material.scss
@@ -7,17 +7,17 @@ $fab-theme: $material-fab;
 $outlined-theme: $material-outlined;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme(diff($base-flat, $flat-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-flat, $flat-theme));
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme(diff($base-outlined, $outlined-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-outlined, $outlined-theme));
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme(diff($base-contained, $contained-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-contained, $contained-theme));
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme(diff($base-fab, $fab-theme), 'ig-button');
+    @include css-vars-from-theme(diff($base-fab, $fab-theme));
 }
diff --git a/src/components/button/themes/button/light/button.shared.scss b/src/components/button/themes/button/light/button.shared.scss
index 4c5624d66..0dd1f96b6 100644
--- a/src/components/button/themes/button/light/button.shared.scss
+++ b/src/components/button/themes/button/light/button.shared.scss
@@ -2,17 +2,17 @@
 @use 'themes' as *;
 
 :host([variant='flat']) {
-    @include css-vars-from-theme($base-flat, 'ig-button');
+    @include css-vars-from-theme($base-flat);
 }
 
 :host([variant='outlined']) {
-    @include css-vars-from-theme($base-outlined, 'ig-button');
+    @include css-vars-from-theme($base-outlined);
 }
 
 :host([variant='contained']) {
-    @include css-vars-from-theme($base-contained, 'ig-button');
+    @include css-vars-from-theme($base-contained);
 }
 
 :host([variant='fab']) {
-    @include css-vars-from-theme($base-fab, 'ig-button');
+    @include css-vars-from-theme($base-fab);
 }
diff --git a/src/components/calendar/themes/dark/calendar.bootstrap.scss b/src/components/calendar/themes/dark/calendar.bootstrap.scss
index 2528fa8c1..4b4f5f3c8 100644
--- a/src/components/calendar/themes/dark/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/dark/calendar.bootstrap.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $bootstrap));
 }
diff --git a/src/components/calendar/themes/dark/calendar.fluent.scss b/src/components/calendar/themes/dark/calendar.fluent.scss
index 06a66525e..c9a7c8739 100644
--- a/src/components/calendar/themes/dark/calendar.fluent.scss
+++ b/src/components/calendar/themes/dark/calendar.fluent.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $fluent));
 }
diff --git a/src/components/calendar/themes/dark/calendar.indigo.scss b/src/components/calendar/themes/dark/calendar.indigo.scss
index 37a6c26f2..1fe59f8bf 100644
--- a/src/components/calendar/themes/dark/calendar.indigo.scss
+++ b/src/components/calendar/themes/dark/calendar.indigo.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $indigo));
 }
diff --git a/src/components/calendar/themes/dark/calendar.material.scss b/src/components/calendar/themes/dark/calendar.material.scss
index 2a30347c4..dbc167aa3 100644
--- a/src/components/calendar/themes/dark/calendar.material.scss
+++ b/src/components/calendar/themes/dark/calendar.material.scss
@@ -3,5 +3,5 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-calendar');
+    @include css-vars-from-theme(diff(light.$base, $material));
 }
diff --git a/src/components/calendar/themes/light/calendar.bootstrap.scss b/src/components/calendar/themes/light/calendar.bootstrap.scss
index b15ff5d6f..8bade7490 100644
--- a/src/components/calendar/themes/light/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/light/calendar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.fluent.scss b/src/components/calendar/themes/light/calendar.fluent.scss
index c5695dda9..4d87074b4 100644
--- a/src/components/calendar/themes/light/calendar.fluent.scss
+++ b/src/components/calendar/themes/light/calendar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.indigo.scss b/src/components/calendar/themes/light/calendar.indigo.scss
index d8d9493db..641839724 100644
--- a/src/components/calendar/themes/light/calendar.indigo.scss
+++ b/src/components/calendar/themes/light/calendar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.material.scss b/src/components/calendar/themes/light/calendar.material.scss
index 828ae11ea..3271cfef8 100644
--- a/src/components/calendar/themes/light/calendar.material.scss
+++ b/src/components/calendar/themes/light/calendar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-calendar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/calendar/themes/light/calendar.shared.scss b/src/components/calendar/themes/light/calendar.shared.scss
index 2effa6ded..96b6530e6 100644
--- a/src/components/calendar/themes/light/calendar.shared.scss
+++ b/src/components/calendar/themes/light/calendar.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-calendar');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
index 5fffb24f6..604f49f03 100644
--- a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
+++ b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss
@@ -44,7 +44,7 @@ $theme: $bootstrap;
     background: var-get($theme, 'picker-background');
 }
 
-:host([hide-header]) {
+:host([hide-header][visible-months='1']) {
     [part~='navigation'] {
         border-start-start-radius: var-get($theme, 'border-radius');
         border-start-end-radius: var-get($theme, 'border-radius');
diff --git a/src/components/card/themes/dark/card.bootstrap.scss b/src/components/card/themes/dark/card.bootstrap.scss
index 9124408f2..8bade7490 100644
--- a/src/components/card/themes/dark/card.bootstrap.scss
+++ b/src/components/card/themes/dark/card.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.fluent.scss b/src/components/card/themes/dark/card.fluent.scss
index ce37dd085..4d87074b4 100644
--- a/src/components/card/themes/dark/card.fluent.scss
+++ b/src/components/card/themes/dark/card.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.indigo.scss b/src/components/card/themes/dark/card.indigo.scss
index 489705929..641839724 100644
--- a/src/components/card/themes/dark/card.indigo.scss
+++ b/src/components/card/themes/dark/card.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.material.scss b/src/components/card/themes/dark/card.material.scss
index cc3f4f2fb..3271cfef8 100644
--- a/src/components/card/themes/dark/card.material.scss
+++ b/src/components/card/themes/dark/card.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/dark/card.shared.scss b/src/components/card/themes/dark/card.shared.scss
index f7ea21487..96fbe742c 100644
--- a/src/components/card/themes/dark/card.shared.scss
+++ b/src/components/card/themes/dark/card.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-card');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/card/themes/light/container/card.bootstrap.scss b/src/components/card/themes/light/container/card.bootstrap.scss
index 69e7ffcba..597b7897f 100644
--- a/src/components/card/themes/light/container/card.bootstrap.scss
+++ b/src/components/card/themes/light/container/card.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.fluent.scss b/src/components/card/themes/light/container/card.fluent.scss
index 062ee4e40..925a705e7 100644
--- a/src/components/card/themes/light/container/card.fluent.scss
+++ b/src/components/card/themes/light/container/card.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.indigo.scss b/src/components/card/themes/light/container/card.indigo.scss
index f6227c551..52f7ff3eb 100644
--- a/src/components/card/themes/light/container/card.indigo.scss
+++ b/src/components/card/themes/light/container/card.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.material.scss b/src/components/card/themes/light/container/card.material.scss
index f29f0721f..ba3d04144 100644
--- a/src/components/card/themes/light/container/card.material.scss
+++ b/src/components/card/themes/light/container/card.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-card');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/card/themes/light/container/card.shared.scss b/src/components/card/themes/light/container/card.shared.scss
index 62f985d4f..832db6740 100644
--- a/src/components/card/themes/light/container/card.shared.scss
+++ b/src/components/card/themes/light/container/card.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-card');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/carousel/themes/dark/carousel.bootstrap.scss b/src/components/carousel/themes/dark/carousel.bootstrap.scss
index f32860fb4..97e56c61e 100644
--- a/src/components/carousel/themes/dark/carousel.bootstrap.scss
+++ b/src/components/carousel/themes/dark/carousel.bootstrap.scss
@@ -4,7 +4,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.fluent.scss b/src/components/carousel/themes/dark/carousel.fluent.scss
index 48c0d7e57..8edede175 100644
--- a/src/components/carousel/themes/dark/carousel.fluent.scss
+++ b/src/components/carousel/themes/dark/carousel.fluent.scss
@@ -4,7 +4,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.indigo.scss b/src/components/carousel/themes/dark/carousel.indigo.scss
index 942f489d9..fe3c4cf2e 100644
--- a/src/components/carousel/themes/dark/carousel.indigo.scss
+++ b/src/components/carousel/themes/dark/carousel.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.material.scss b/src/components/carousel/themes/dark/carousel.material.scss
index 8dd224116..b94d7e881 100644
--- a/src/components/carousel/themes/dark/carousel.material.scss
+++ b/src/components/carousel/themes/dark/carousel.material.scss
@@ -4,7 +4,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/dark/carousel.shared.scss b/src/components/carousel/themes/dark/carousel.shared.scss
index a6d941894..96b6530e6 100644
--- a/src/components/carousel/themes/dark/carousel.shared.scss
+++ b/src/components/carousel/themes/dark/carousel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-carousel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/carousel/themes/light/carousel.bootstrap.scss b/src/components/carousel/themes/light/carousel.bootstrap.scss
index f32860fb4..97e56c61e 100644
--- a/src/components/carousel/themes/light/carousel.bootstrap.scss
+++ b/src/components/carousel/themes/light/carousel.bootstrap.scss
@@ -4,7 +4,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.fluent.scss b/src/components/carousel/themes/light/carousel.fluent.scss
index 48c0d7e57..8edede175 100644
--- a/src/components/carousel/themes/light/carousel.fluent.scss
+++ b/src/components/carousel/themes/light/carousel.fluent.scss
@@ -4,7 +4,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.indigo.scss b/src/components/carousel/themes/light/carousel.indigo.scss
index 942f489d9..fe3c4cf2e 100644
--- a/src/components/carousel/themes/light/carousel.indigo.scss
+++ b/src/components/carousel/themes/light/carousel.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.material.scss b/src/components/carousel/themes/light/carousel.material.scss
index 8dd224116..b94d7e881 100644
--- a/src/components/carousel/themes/light/carousel.material.scss
+++ b/src/components/carousel/themes/light/carousel.material.scss
@@ -4,7 +4,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-carousel');
+    @include css-vars-from-theme(diff($base, $theme));
 
     --navigation-border-radius: #{var-get($theme, 'border-radius')};
 }
diff --git a/src/components/carousel/themes/light/carousel.shared.scss b/src/components/carousel/themes/light/carousel.shared.scss
index a6d941894..96b6530e6 100644
--- a/src/components/carousel/themes/light/carousel.shared.scss
+++ b/src/components/carousel/themes/light/carousel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-carousel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/chat/themes/dark/chat.bootstrap.scss b/src/components/chat/themes/dark/chat.bootstrap.scss
index d9580a4b5..8bade7490 100644
--- a/src/components/chat/themes/dark/chat.bootstrap.scss
+++ b/src/components/chat/themes/dark/chat.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.fluent.scss b/src/components/chat/themes/dark/chat.fluent.scss
index d1c3e4abb..4d87074b4 100644
--- a/src/components/chat/themes/dark/chat.fluent.scss
+++ b/src/components/chat/themes/dark/chat.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.indigo.scss b/src/components/chat/themes/dark/chat.indigo.scss
index c0a2f2917..641839724 100644
--- a/src/components/chat/themes/dark/chat.indigo.scss
+++ b/src/components/chat/themes/dark/chat.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.material.scss b/src/components/chat/themes/dark/chat.material.scss
index 6a388bd8d..3271cfef8 100644
--- a/src/components/chat/themes/dark/chat.material.scss
+++ b/src/components/chat/themes/dark/chat.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/dark/chat.shared.scss b/src/components/chat/themes/dark/chat.shared.scss
index fcd84baf1..c33c23a0d 100644
--- a/src/components/chat/themes/dark/chat.shared.scss
+++ b/src/components/chat/themes/dark/chat.shared.scss
@@ -6,7 +6,7 @@ $theme: $base;
 :host {
     color-scheme: dark;
 
-    @include css-vars-from-theme($theme, 'ig-chat');
+    @include css-vars-from-theme($theme);
 
     igc-chat-message::part(message-container) {
         --shiki-purple: #b392f0;
diff --git a/src/components/chat/themes/light/chat.bootstrap.scss b/src/components/chat/themes/light/chat.bootstrap.scss
index d9580a4b5..8bade7490 100644
--- a/src/components/chat/themes/light/chat.bootstrap.scss
+++ b/src/components/chat/themes/light/chat.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.fluent.scss b/src/components/chat/themes/light/chat.fluent.scss
index d1c3e4abb..4d87074b4 100644
--- a/src/components/chat/themes/light/chat.fluent.scss
+++ b/src/components/chat/themes/light/chat.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.indigo.scss b/src/components/chat/themes/light/chat.indigo.scss
index c0a2f2917..641839724 100644
--- a/src/components/chat/themes/light/chat.indigo.scss
+++ b/src/components/chat/themes/light/chat.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.material.scss b/src/components/chat/themes/light/chat.material.scss
index 6a388bd8d..3271cfef8 100644
--- a/src/components/chat/themes/light/chat.material.scss
+++ b/src/components/chat/themes/light/chat.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chat');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chat/themes/light/chat.shared.scss b/src/components/chat/themes/light/chat.shared.scss
index 0fd9c40d0..4c8aa86fd 100644
--- a/src/components/chat/themes/light/chat.shared.scss
+++ b/src/components/chat/themes/light/chat.shared.scss
@@ -6,7 +6,7 @@ $theme: $base;
 :host {
     color-scheme: light;
 
-    @include css-vars-from-theme($theme, 'ig-chat');
+    @include css-vars-from-theme($theme);
 
     igc-chat-message::part(message-container) {
         --shiki-purple: #6f42c1;
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
index af32195fe..86bbf4b4f 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss
@@ -5,7 +5,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:not([disabled]):state(ig-invalid)),
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
index b8d976312..db450e052 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss
@@ -5,7 +5,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:state(ig-invalid):hover) {
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
index e2125e32a..7f1f12107 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
index a1a65bd06..137e608b7 100644
--- a/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
+++ b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base']:hover {
diff --git a/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
index b105a505c..7abed02be 100644
--- a/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.fluent.scss b/src/components/checkbox/themes/dark/switch/switch.fluent.scss
index b91966473..b53713d77 100644
--- a/src/components/checkbox/themes/dark/switch/switch.fluent.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.indigo.scss b/src/components/checkbox/themes/dark/switch/switch.indigo.scss
index 5a0b89942..0275266e8 100644
--- a/src/components/checkbox/themes/dark/switch/switch.indigo.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/checkbox/themes/dark/switch/switch.material.scss b/src/components/checkbox/themes/dark/switch/switch.material.scss
index 75e306a37..543615375 100644
--- a/src/components/checkbox/themes/dark/switch/switch.material.scss
+++ b/src/components/checkbox/themes/dark/switch/switch.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base'] {
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
index 4b398b238..8bade7490 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
index 574676636..4d87074b4 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
index 7f6d18383..641839724 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.material.scss b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
index 516103844..3271cfef8 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-checkbox');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss b/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
index 8f9bd1f5e..96b6530e6 100644
--- a/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
+++ b/src/components/checkbox/themes/light/checkbox/checkbox.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-checkbox');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.bootstrap.scss b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
index ede8567b1..8bade7490 100644
--- a/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
+++ b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.fluent.scss b/src/components/checkbox/themes/light/switch/switch.fluent.scss
index e90b2bca0..4d87074b4 100644
--- a/src/components/checkbox/themes/light/switch/switch.fluent.scss
+++ b/src/components/checkbox/themes/light/switch/switch.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.indigo.scss b/src/components/checkbox/themes/light/switch/switch.indigo.scss
index 909497ff6..641839724 100644
--- a/src/components/checkbox/themes/light/switch/switch.indigo.scss
+++ b/src/components/checkbox/themes/light/switch/switch.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.material.scss b/src/components/checkbox/themes/light/switch/switch.material.scss
index 04ee5ff18..3271cfef8 100644
--- a/src/components/checkbox/themes/light/switch/switch.material.scss
+++ b/src/components/checkbox/themes/light/switch/switch.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-switch');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/checkbox/themes/light/switch/switch.shared.scss b/src/components/checkbox/themes/light/switch/switch.shared.scss
index 0b2649a2f..96b6530e6 100644
--- a/src/components/checkbox/themes/light/switch/switch.shared.scss
+++ b/src/components/checkbox/themes/light/switch/switch.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-switch');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/chip/themes/dark/chip.bootstrap.scss b/src/components/chip/themes/dark/chip.bootstrap.scss
index 167c2dd45..68cc3c7bb 100644
--- a/src/components/chip/themes/dark/chip.bootstrap.scss
+++ b/src/components/chip/themes/dark/chip.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/dark/chip.fluent.scss b/src/components/chip/themes/dark/chip.fluent.scss
index 19435d1bb..679ee2e59 100644
--- a/src/components/chip/themes/dark/chip.fluent.scss
+++ b/src/components/chip/themes/dark/chip.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/dark/chip.indigo.scss b/src/components/chip/themes/dark/chip.indigo.scss
index 32a12d5e2..17d3a2516 100644
--- a/src/components/chip/themes/dark/chip.indigo.scss
+++ b/src/components/chip/themes/dark/chip.indigo.scss
@@ -5,7 +5,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([variant='info']) button,
diff --git a/src/components/chip/themes/dark/chip.material.scss b/src/components/chip/themes/dark/chip.material.scss
index 1cd2f81a1..0dddc23d0 100644
--- a/src/components/chip/themes/dark/chip.material.scss
+++ b/src/components/chip/themes/dark/chip.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.bootstrap.scss b/src/components/chip/themes/light/chip.bootstrap.scss
index 71505a964..8bade7490 100644
--- a/src/components/chip/themes/light/chip.bootstrap.scss
+++ b/src/components/chip/themes/light/chip.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.fluent.scss b/src/components/chip/themes/light/chip.fluent.scss
index e314ca120..4d87074b4 100644
--- a/src/components/chip/themes/light/chip.fluent.scss
+++ b/src/components/chip/themes/light/chip.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.indigo.scss b/src/components/chip/themes/light/chip.indigo.scss
index f5182a9a2..c0c07e6a2 100644
--- a/src/components/chip/themes/light/chip.indigo.scss
+++ b/src/components/chip/themes/light/chip.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
 :host([variant='info']) button,
@@ -45,4 +45,4 @@ $theme: $indigo;
 :host([selected]) button[disabled],
 :host([variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .4);
-}
\ No newline at end of file
+}
diff --git a/src/components/chip/themes/light/chip.material.scss b/src/components/chip/themes/light/chip.material.scss
index 8ce939faf..3271cfef8 100644
--- a/src/components/chip/themes/light/chip.material.scss
+++ b/src/components/chip/themes/light/chip.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-chip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/chip/themes/light/chip.shared.scss b/src/components/chip/themes/light/chip.shared.scss
index 85258cd34..96b6530e6 100644
--- a/src/components/chip/themes/light/chip.shared.scss
+++ b/src/components/chip/themes/light/chip.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-chip');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/combo/themes/dark/_themes.scss b/src/components/combo/themes/dark/_themes.scss
index 57445f10d..30a5d523a 100644
--- a/src/components/combo/themes/dark/_themes.scss
+++ b/src/components/combo/themes/dark/_themes.scss
@@ -1,25 +1,8 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *;
-@use 'components/input/themes/dark/themes' as input-theme;
 
-$material: map.merge(digest-schema($dark-material-combo), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-combo), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($dark-fluent-combo), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($dark-indigo-combo), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
\ No newline at end of file
+$material: digest-schema($dark-material-combo);
+$bootstrap: digest-schema($dark-bootstrap-combo);
+$fluent: digest-schema($dark-fluent-combo);
+$indigo: digest-schema($dark-indigo-combo);
diff --git a/src/components/combo/themes/dark/combo.bootstrap.scss b/src/components/combo/themes/dark/combo.bootstrap.scss
index 07952b36c..65148d532 100644
--- a/src/components/combo/themes/dark/combo.bootstrap.scss
+++ b/src/components/combo/themes/dark/combo.bootstrap.scss
@@ -8,6 +8,9 @@ $theme: $bootstrap;
 $dropdown: map.remove(dropdown.$bootstrap, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.fluent.scss b/src/components/combo/themes/dark/combo.fluent.scss
index defd1c076..d9488cd48 100644
--- a/src/components/combo/themes/dark/combo.fluent.scss
+++ b/src/components/combo/themes/dark/combo.fluent.scss
@@ -8,6 +8,9 @@ $theme: $fluent;
 $dropdown: map.remove(dropdown.$fluent, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.indigo.scss b/src/components/combo/themes/dark/combo.indigo.scss
index 9c344568d..2680b183c 100644
--- a/src/components/combo/themes/dark/combo.indigo.scss
+++ b/src/components/combo/themes/dark/combo.indigo.scss
@@ -8,6 +8,9 @@ $theme: $indigo;
 $dropdown: map.remove(dropdown.$indigo, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/dark/combo.material.scss b/src/components/combo/themes/dark/combo.material.scss
index 8336ec154..341935354 100644
--- a/src/components/combo/themes/dark/combo.material.scss
+++ b/src/components/combo/themes/dark/combo.material.scss
@@ -8,6 +8,9 @@ $theme: $material;
 $dropdown: map.remove(dropdown.$material, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff(light.$base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss
index 25049c604..4636c6794 100644
--- a/src/components/combo/themes/light/_themes.scss
+++ b/src/components/combo/themes/light/_themes.scss
@@ -3,25 +3,9 @@
 @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *;
 @use 'components/input/themes/light/themes' as input-theme;
 
-
 $base: digest-schema($light-combo);
-$material: map.merge(digest-schema($material-combo), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($bootstrap-combo), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($fluent-combo), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($indigo-combo), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
\ No newline at end of file
+$material: digest-schema($material-combo);
+$bootstrap: digest-schema($bootstrap-combo);
+$fluent: digest-schema($fluent-combo);
+$indigo: digest-schema($indigo-combo);
+
diff --git a/src/components/combo/themes/light/combo.bootstrap.scss b/src/components/combo/themes/light/combo.bootstrap.scss
index 940af59ee..54b32a52b 100644
--- a/src/components/combo/themes/light/combo.bootstrap.scss
+++ b/src/components/combo/themes/light/combo.bootstrap.scss
@@ -7,6 +7,9 @@ $theme: $bootstrap;
 $dropdown: map.remove(dropdown.$bootstrap, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.fluent.scss b/src/components/combo/themes/light/combo.fluent.scss
index 848a3a8e5..aed62a888 100644
--- a/src/components/combo/themes/light/combo.fluent.scss
+++ b/src/components/combo/themes/light/combo.fluent.scss
@@ -7,6 +7,9 @@ $theme: $fluent;
 $dropdown: map.remove(dropdown.$fluent, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss
index 07a39f14c..4ad9fddfc 100644
--- a/src/components/combo/themes/light/combo.indigo.scss
+++ b/src/components/combo/themes/light/combo.indigo.scss
@@ -7,6 +7,9 @@ $theme: $indigo;
 $dropdown: map.remove(dropdown.$indigo, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss
index 62bb9546d..8bb09bc9c 100644
--- a/src/components/combo/themes/light/combo.material.scss
+++ b/src/components/combo/themes/light/combo.material.scss
@@ -7,6 +7,9 @@ $theme: $material;
 $dropdown: map.remove(dropdown.$material, 'default-size');
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-combo');
-    @include css-vars-from-theme($dropdown, 'ig-combo-list');
+    @include css-vars-from-theme(diff($base, $theme));
+
+    igc-popover {
+        @include css-vars-from-theme($dropdown);
+    }
 }
diff --git a/src/components/combo/themes/light/combo.shared.scss b/src/components/combo/themes/light/combo.shared.scss
index e9f2bf516..96b6530e6 100644
--- a/src/components/combo/themes/light/combo.shared.scss
+++ b/src/components/combo/themes/light/combo.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-combo');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/combo/themes/shared/combo.common.scss b/src/components/combo/themes/shared/combo.common.scss
index b79de7faa..01f790796 100644
--- a/src/components/combo/themes/shared/combo.common.scss
+++ b/src/components/combo/themes/shared/combo.common.scss
@@ -71,7 +71,7 @@ $dropdown-theme: dropdown-theme.$material;
 :host(:not([disabled]):state(ig-invalid)),
 :host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
@@ -107,4 +107,4 @@ $dropdown-theme: dropdown-theme.$material;
 ::slotted([slot='suffix']),
 ::slotted([slot='prefix']) {
     padding-inline: var(--affix-padding);
-}
\ No newline at end of file
+}
diff --git a/src/components/date-picker/themes/dark/_themes.scss b/src/components/date-picker/themes/dark/_themes.scss
index 6ce6241d9..bb24822d5 100644
--- a/src/components/date-picker/themes/dark/_themes.scss
+++ b/src/components/date-picker/themes/dark/_themes.scss
@@ -1,13 +1,17 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/calendar' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
+@use '../shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($dark-material-calendar), digest-schema(input-theme.$dark-material-input-group));
-$material-calendar-border-color: map.get(digest-schema($dark-material-calendar), 'border-color');
-$bootstrap: map.merge(digest-schema($dark-bootstrap-calendar), digest-schema(input-theme.$dark-bootstrap-input-group));
-$bootstrap-calendar-border-color: map.get(digest-schema($dark-bootstrap-calendar), 'border-color');
-$fluent: map.merge(digest-schema($dark-fluent-calendar), digest-schema(input-theme.$dark-fluent-input-group));
-$fluent-calendar-border-color: map.get(digest-schema($dark-fluent-calendar), 'border-color');
-$indigo: map.merge(digest-schema($dark-indigo-calendar), digest-schema(input-theme.$dark-indigo-input-group));
-$indigo-calendar-border-color: map.get(digest-schema($dark-indigo-calendar), 'border-color');
+$material: digest-schema(calendar-theme($dark-material-calendar));
+$bootstrap: digest-schema(calendar-theme($dark-bootstrap-calendar));
+$fluent: digest-schema(calendar-theme($dark-fluent-calendar));
+$indigo: digest-schema(calendar-theme($dark-indigo-calendar));
+$bootstrap-input: digest-schema(input-theme($dark-bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($dark-fluent-input-group));
+$indigo-input: digest-schema(input-theme($dark-indigo-input-group));
+$material-dialog: digest-schema(dialog-theme($dark-material-calendar));
+$bootstrap-dialog: digest-schema(dialog-theme($dark-bootstrap-calendar));
+$fluent-dialog: digest-schema(dialog-theme($dark-fluent-calendar));
+$indigo-dialog: digest-schema(dialog-theme($dark-indigo-calendar));
diff --git a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
index b521bf452..54c54c795 100644
--- a/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/dark/date-picker.bootstrap.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-datepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
 
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.fluent.scss b/src/components/date-picker/themes/dark/date-picker.fluent.scss
index 9573e0cf9..c5a78372e 100644
--- a/src/components/date-picker/themes/dark/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/dark/date-picker.fluent.scss
@@ -3,7 +3,10 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-datepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
 
-    --calendar-border-color: #{$fluent-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.indigo.scss b/src/components/date-picker/themes/dark/date-picker.indigo.scss
index 0ce0a5a21..9b425d601 100644
--- a/src/components/date-picker/themes/dark/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/dark/date-picker.indigo.scss
@@ -1,17 +1,13 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-datepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
 
-    --calendar-border-color: #{$indigo-calendar-border-color};
-
-    igc-dialog[open]::part(base) {
-        box-shadow: var(--ig-elevation-7);
-    }
-
-    igc-popover::part(container) {
-        box-shadow: var(--ig-elevation-2);
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
     }
 }
diff --git a/src/components/date-picker/themes/dark/date-picker.material.scss b/src/components/date-picker/themes/dark/date-picker.material.scss
index 3aa1130a5..06bdf7c41 100644
--- a/src/components/date-picker/themes/dark/date-picker.material.scss
+++ b/src/components/date-picker/themes/dark/date-picker.material.scss
@@ -3,7 +3,9 @@
 @use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-datepicker');
+    @include css-vars-from-theme($material);
 
-    --calendar-border-color: #{$material-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss
index bc5de54e2..41225834f 100644
--- a/src/components/date-picker/themes/date-picker.base.scss
+++ b/src/components/date-picker/themes/date-picker.base.scss
@@ -14,6 +14,7 @@
 
         igc-calendar {
             border: none;
+            border-radius: 0;
             box-shadow: none;
         }
     }
diff --git a/src/components/date-picker/themes/light/_themes.scss b/src/components/date-picker/themes/light/_themes.scss
index a9b00e2b1..e2bbf527f 100644
--- a/src/components/date-picker/themes/light/_themes.scss
+++ b/src/components/date-picker/themes/light/_themes.scss
@@ -1,14 +1,17 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/calendar' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
+@use '../shared/date-picker.utils' as *;
 
-$base: digest-schema($light-calendar);
-$material: map.merge(digest-schema($material-calendar), digest-schema(input-theme.$material-input-group));
-$material-calendar-border-color: map.get(digest-schema($material-calendar), 'border-color');
-$bootstrap: map.merge(digest-schema($bootstrap-calendar), digest-schema(input-theme.$bootstrap-input-group));
-$bootstrap-calendar-border-color: map.get(digest-schema($bootstrap-calendar), 'border-color');
-$fluent: map.merge(digest-schema($fluent-calendar), digest-schema(input-theme.$fluent-input-group));
-$fluent-calendar-border-color: map.get(digest-schema($fluent-calendar), 'border-color');
-$indigo: map.merge(digest-schema($indigo-calendar), digest-schema(input-theme.$indigo-input-group));
-$indigo-calendar-border-color: map.get(digest-schema($indigo-calendar), 'border-color');
+$material: digest-schema(calendar-theme($material-calendar));
+$bootstrap: digest-schema(calendar-theme($bootstrap-calendar));
+$fluent: digest-schema(calendar-theme($fluent-calendar));
+$indigo: digest-schema(calendar-theme($indigo-calendar));
+$bootstrap-input: digest-schema(input-theme($bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($fluent-input-group));
+$indigo-input: digest-schema(input-theme($indigo-input-group));
+$material-dialog: digest-schema(dialog-theme($material-calendar));
+$bootstrap-dialog: digest-schema(dialog-theme($bootstrap-calendar));
+$fluent-dialog: digest-schema(dialog-theme($fluent-calendar));
+$indigo-dialog: digest-schema(dialog-theme($indigo-calendar));
diff --git a/src/components/date-picker/themes/light/date-picker.bootstrap.scss b/src/components/date-picker/themes/light/date-picker.bootstrap.scss
index c45112f68..e25ad23ac 100644
--- a/src/components/date-picker/themes/light/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/light/date-picker.bootstrap.scss
@@ -1,8 +1,12 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $bootstrap;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.fluent.scss b/src/components/date-picker/themes/light/date-picker.fluent.scss
index c15d56e03..ec33f8127 100644
--- a/src/components/date-picker/themes/light/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/light/date-picker.fluent.scss
@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $fluent;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.indigo.scss b/src/components/date-picker/themes/light/date-picker.indigo.scss
index 297a9046d..4d8fba55d 100644
--- a/src/components/date-picker/themes/light/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/light/date-picker.indigo.scss
@@ -1,8 +1,12 @@
+@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $indigo;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.material.scss b/src/components/date-picker/themes/light/date-picker.material.scss
index 58f5280fe..563e35530 100644
--- a/src/components/date-picker/themes/light/date-picker.material.scss
+++ b/src/components/date-picker/themes/light/date-picker.material.scss
@@ -1,8 +1,10 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $material;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-datepicker');
+    @include css-vars-from-theme($material);
+
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-picker/themes/light/date-picker.shared.scss b/src/components/date-picker/themes/light/date-picker.shared.scss
deleted file mode 100644
index bce8e7abc..000000000
--- a/src/components/date-picker/themes/light/date-picker.shared.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'styles/utilities' as *;
-@use 'themes' as *;
-
-:host {
-    @include css-vars-from-theme($base, 'ig-datepicker');
-}
diff --git a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
index 41f854fda..886fbce99 100644
--- a/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
+++ b/src/components/date-picker/themes/shared/date-picker.bootstrap.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $bootstrap;
+$theme: input-theme.$bootstrap;
 
 :host {
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
-
     igc-dialog {
         igc-calendar {
             border: none;
diff --git a/src/components/date-picker/themes/shared/date-picker.common.scss b/src/components/date-picker/themes/shared/date-picker.common.scss
index a2ff0a5ec..3961c8f4e 100644
--- a/src/components/date-picker/themes/shared/date-picker.common.scss
+++ b/src/components/date-picker/themes/shared/date-picker.common.scss
@@ -1,30 +1,30 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
-@use '../../../input/themes/light/themes' as input-theme;
+@use 'components/input/themes/light/themes' as input-theme;
 
 $theme: $material;
 $input-theme: input-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
         border: none;
+        background: transparent;
 
         [part='actions'] {
             border: none;
         }
 
         igc-calendar {
+            border-radius: 0;
             box-shadow: none;
         }
     }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
-        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content),
@@ -44,7 +44,7 @@ $input-theme: input-theme.$material;
 
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
-        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
+        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
     }
 
     igc-popover::part(container) {
@@ -57,17 +57,17 @@ $input-theme: input-theme.$material;
     }
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
     }
 }
 
 :host(:not([disabled],[readonly])) {
-    --affix-color: #{var-get($theme, 'input-prefix-color')};
+    --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {
-        --affix-color: #{var-get($theme, 'input-prefix-color')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
         &::part(prefix),
         &::part(suffix) {
@@ -82,22 +82,22 @@ $input-theme: input-theme.$material;
     }
 
     igc-date-time-input:focus-within {
-        --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
 
         &::part(filled) {
-            --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+            --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
         }
     }
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'input-prefix-color--filled')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--filled')};
     }
 }
 
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
diff --git a/src/components/date-picker/themes/shared/date-picker.fluent.scss b/src/components/date-picker/themes/shared/date-picker.fluent.scss
index dd9fceb84..ce3dcc6e9 100644
--- a/src/components/date-picker/themes/shared/date-picker.fluent.scss
+++ b/src/components/date-picker/themes/shared/date-picker.fluent.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $fluent;
+$theme: input-theme.$fluent;
 
 :host {
-    --calendar-border-color: #{$fluent-calendar-border-color};
-
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }
diff --git a/src/components/date-picker/themes/shared/date-picker.indigo.scss b/src/components/date-picker/themes/shared/date-picker.indigo.scss
index 0bcf75d5f..e1f196d55 100644
--- a/src/components/date-picker/themes/shared/date-picker.indigo.scss
+++ b/src/components/date-picker/themes/shared/date-picker.indigo.scss
@@ -1,18 +1,16 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
-@use '../../../input/themes/light/themes' as input-theme;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $indigo;
-$input-theme: input-theme.$indigo;
+$theme: input-theme.$indigo;
 
 :host {
-    --calendar-border-color: #{$indigo-calendar-border-color};
     --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
 
     igc-icon,
-    ::slotted(igc-icon) {
-        --size: var(--input-icon) !important;
+    ::slotted(*) {
+        --ig-icon-size: var(--input-icon);
     }
 
     igc-dialog[open]::part(base) {
@@ -33,7 +31,7 @@ $input-theme: input-theme.$indigo;
 
 :host(:focus-within) {
     [part='label'] {
-        color: var-get($input-theme, 'focused-secondary-color');
+        color: var-get($theme, 'focused-secondary-color');
     }
 }
 
@@ -46,7 +44,7 @@ $input-theme: input-theme.$indigo;
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($input-theme, 'helper-text-color');
+        color: var-get($theme, 'helper-text-color');
     }
 
     igc-date-time-input::part(container) {
diff --git a/src/components/date-picker/themes/shared/date-picker.material.scss b/src/components/date-picker/themes/shared/date-picker.material.scss
index 54c6d477c..c3aa96599 100644
--- a/src/components/date-picker/themes/shared/date-picker.material.scss
+++ b/src/components/date-picker/themes/shared/date-picker.material.scss
@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $material;
+$theme: input-theme.$material;
 
 :host {
     ::part(helper-text) {
diff --git a/src/components/date-picker/themes/shared/date-picker.utils.scss b/src/components/date-picker/themes/shared/date-picker.utils.scss
new file mode 100644
index 000000000..24fc99361
--- /dev/null
+++ b/src/components/date-picker/themes/shared/date-picker.utils.scss
@@ -0,0 +1,42 @@
+@use 'sass:map';
+
+// We pick the properties of the calendar theme that are relevant for the date-picker component.
+// In this instance, we only need the content background and border properties that will be applied for the
+// dropdown/dialog parts respectively. Getting the meta is done so varialbes are prefixed correctly.
+@function calendar-theme($theme) {
+    // Pick properties from calendar schemas that are relevant to the date-picker component
+    @return (
+        'content-background': map.get($theme, 'content-background'),
+        'border-color': map.get($theme, 'border-color'),
+        'border-radius': map.get($theme, 'border-radius'),
+        'actions-divider-color': map.get($theme, 'actions-divider-color'),
+        'default-size': map.get($theme, 'default-size'),
+        _meta: (
+          name: map.get($theme, _meta, name)
+        )
+    );
+}
+
+// We need to extract some properties from the input theme in order to style the label of the date-picker.
+// This is done because the label is a custom element in the date-picker component and is not part of the input.
+@function input-theme($theme) {
+    @return (
+        'idle-secondary-color': map.get($theme, 'idle-secondary-color'),
+        'focused-secondary-color': map.get($theme, 'focused-secondary-color'),
+        'disabled-text-color': map.get($theme, 'disabled-text-color'),
+        'input-prefix-color': map.get($theme, 'input-prefix-color'),
+        _meta: (
+            name: map.get($theme, _meta, name),
+        )
+    );
+}
+
+// We need to the border-color property from the calendar theme to style the igc-dialog part of the date-picker.
+@function dialog-theme($theme) {
+    @return (
+        'border-color': map.get($theme, 'border-color'),
+        _meta: (
+            name: map.get($theme, _meta, name),
+        )
+    );
+}
diff --git a/src/components/date-picker/themes/themes.ts b/src/components/date-picker/themes/themes.ts
index c9d6b849b..4af90e298 100644
--- a/src/components/date-picker/themes/themes.ts
+++ b/src/components/date-picker/themes/themes.ts
@@ -11,7 +11,6 @@ import { styles as bootstrapLight } from './light/date-picker.bootstrap.css.js';
 import { styles as fluentLight } from './light/date-picker.fluent.css.js';
 import { styles as indigoLight } from './light/date-picker.indigo.css.js';
 import { styles as materialLight } from './light/date-picker.material.css.js';
-import { styles as shared } from './light/date-picker.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/date-picker.bootstrap.css.js';
 import { styles as fluent } from './shared/date-picker.fluent.css.js';
@@ -19,9 +18,6 @@ import { styles as indigo } from './shared/date-picker.indigo.css.js';
 import { styles as material } from './shared/date-picker.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
   `,
@@ -37,9 +33,6 @@ const light = {
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
   `,
diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss
index add0f835b..cd0569c5a 100644
--- a/src/components/date-range-picker/date-range-picker.base.scss
+++ b/src/components/date-range-picker/date-range-picker.base.scss
@@ -16,6 +16,7 @@
         overflow: auto hidden;
 
         igc-calendar {
+            border-radius: 0;
             border: none;
             box-shadow: none;
         }
diff --git a/src/components/date-range-picker/themes/dark/_themes.scss b/src/components/date-range-picker/themes/dark/_themes.scss
index 447a331e5..b502e6921 100644
--- a/src/components/date-range-picker/themes/dark/_themes.scss
+++ b/src/components/date-range-picker/themes/dark/_themes.scss
@@ -1,43 +1,22 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/date-range-picker' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *;
 @use 'components/calendar/themes/dark/themes' as calendar-theme;
+@use 'components/date-picker/themes/shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($dark-material-date-range-picker), digest-schema(input-theme.$dark-material-input-group));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-date-range-picker), digest-schema(input-theme.$dark-bootstrap-input-group));
-$fluent: map.merge(digest-schema($dark-fluent-date-range-picker), digest-schema(input-theme.$dark-fluent-input-group));
-$indigo: map.merge(digest-schema($dark-indigo-date-range-picker), digest-schema(input-theme.$dark-indigo-input-group));
-$material: map.merge($material, (
-    default-size: map.get(calendar-theme.$material, 'default-size'),
-    border-radius: map.get(calendar-theme.$material, 'border-radius'),
-    border-color: map.get(calendar-theme.$material, 'border-color'),
-    content-background: map.get(calendar-theme.$material, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
-));
-$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
-$bootstrap: map.merge($bootstrap, (
-    default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
-    border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
-    border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
-    content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
-));
-$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
-$fluent: map.merge($fluent, (
-    default-size: map.get(calendar-theme.$fluent, 'default-size'),
-    border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
-    border-color: map.get(calendar-theme.$fluent, 'border-color'),
-    content-background: map.get(calendar-theme.$fluent, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
-));
-$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
-$indigo: map.merge($indigo, (
-    default-size: map.get(calendar-theme.$indigo, 'default-size'),
-    border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
-    border-color: map.get(calendar-theme.$indigo, 'border-color'),
-    content-background: map.get(calendar-theme.$indigo, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
-));
-$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
-
+$material: digest-schema($dark-material-date-range-picker);
+$bootstrap: digest-schema($dark-bootstrap-date-range-picker);
+$fluent: digest-schema($dark-fluent-date-range-picker);
+$indigo: digest-schema($dark-indigo-date-range-picker);
+$bootstrap-calendar: (digest-schema(calendar-theme(calendar-theme.$bootstrap)));
+$fluent-calendar: (digest-schema(calendar-theme(calendar-theme.$fluent)));
+$material-calendar: (digest-schema(calendar-theme(calendar-theme.$material)));
+$indigo-calendar: (digest-schema(calendar-theme(calendar-theme.$indigo)));
+$bootstrap-input: digest-schema(input-theme($dark-bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($dark-fluent-input-group));
+$indigo-input: digest-schema(input-theme($dark-indigo-input-group));
+$material-dialog: digest-schema(dialog-theme(calendar-theme.$material));
+$bootstrap-dialog: digest-schema(dialog-theme(calendar-theme.$bootstrap));
+$fluent-dialog: digest-schema(dialog-theme(calendar-theme.$fluent));
+$indigo-dialog: digest-schema(dialog-theme(calendar-theme.$indigo));
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
index 3756cc85c..b4130c88c 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss
@@ -1,9 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+    @include css-vars-from-theme($bootstrap-calendar);
 
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
index 713b4e47e..adc74188a 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss
@@ -1,9 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-daterangepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+    @include css-vars-from-theme($fluent-calendar);
 
-    --calendar-border-color: #{$fluent-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
index cd390f626..40e448170 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss
@@ -1,11 +1,14 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-daterangepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+    @include css-vars-from-theme($indigo-calendar);
 
-    --calendar-border-color: #{$indigo-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-7);
diff --git a/src/components/date-range-picker/themes/dark/date-range-picker.material.scss b/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
index 0632037f9..381fd3393 100644
--- a/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/dark/date-range-picker.material.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
-@use '../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $material), 'ig-daterangepicker');
+    @include css-vars-from-theme($material);
+    @include css-vars-from-theme($material-calendar);
 
-    --calendar-border-color: #{$material-calendar-border-color};
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/_themes.scss b/src/components/date-range-picker/themes/light/_themes.scss
index fdbaff0ca..84c3c6b6b 100644
--- a/src/components/date-range-picker/themes/light/_themes.scss
+++ b/src/components/date-range-picker/themes/light/_themes.scss
@@ -1,43 +1,22 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/date-range-picker' as *;
-@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as input-theme;
+@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *;
 @use 'components/calendar/themes/light/themes' as calendar-theme;
+@use 'components/date-picker/themes/shared/date-picker.utils' as *;
 
-$material: map.merge(digest-schema($material-date-range-picker), digest-schema(input-theme.$material-input-group));
-$bootstrap: map.merge(digest-schema($bootstrap-date-range-picker), digest-schema(input-theme.$bootstrap-input-group));
-$fluent: map.merge(digest-schema($fluent-date-range-picker), digest-schema(input-theme.$fluent-input-group));
-$indigo: map.merge(digest-schema($indigo-date-range-picker), digest-schema(input-theme.$indigo-input-group));
-$base: digest-schema($light-date-range-picker);
-$material: map.merge($material, (
-    default-size: map.get(calendar-theme.$material, 'default-size'),
-    border-radius: map.get(calendar-theme.$material, 'border-radius'),
-    border-color: map.get(calendar-theme.$material, 'border-color'),
-    content-background: map.get(calendar-theme.$material, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
-));
-$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
-$bootstrap: map.merge($bootstrap, (
-    default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
-    border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
-    border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
-    content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
-));
-$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
-$fluent: map.merge($fluent, (
-    default-size: map.get(calendar-theme.$fluent, 'default-size'),
-    border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
-    border-color: map.get(calendar-theme.$fluent, 'border-color'),
-    content-background: map.get(calendar-theme.$fluent, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
-));
-$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
-$indigo: map.merge($indigo, (
-    default-size: map.get(calendar-theme.$indigo, 'default-size'),
-    border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
-    border-color: map.get(calendar-theme.$indigo, 'border-color'),
-    content-background: map.get(calendar-theme.$indigo, 'content-background'),
-    actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color')
-));
-$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
+$material: digest-schema($material-date-range-picker);
+$bootstrap: digest-schema($bootstrap-date-range-picker);
+$fluent: digest-schema($fluent-date-range-picker);
+$indigo: digest-schema($indigo-date-range-picker);
+$bootstrap-calendar: digest-schema(calendar-theme(calendar-theme.$bootstrap));
+$fluent-calendar: digest-schema(calendar-theme(calendar-theme.$fluent));
+$material-calendar: digest-schema(calendar-theme(calendar-theme.$material));
+$indigo-calendar: digest-schema(calendar-theme(calendar-theme.$indigo));
+$bootstrap-input: digest-schema(input-theme($bootstrap-input-group));
+$fluent-input: digest-schema(input-theme($fluent-input-group));
+$indigo-input: digest-schema(input-theme($indigo-input-group));
+$material-dialog: digest-schema(dialog-theme(calendar-theme.$material));
+$bootstrap-dialog: digest-schema(dialog-theme(calendar-theme.$bootstrap));
+$fluent-dialog: digest-schema(dialog-theme(calendar-theme.$fluent));
+$indigo-dialog: digest-schema(dialog-theme(calendar-theme.$indigo));
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
index 60ebbfc52..b4130c88c 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.bootstrap.scss
@@ -1,8 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $bootstrap;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($bootstrap);
+    @include css-vars-from-theme($bootstrap-input);
+    @include css-vars-from-theme($bootstrap-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($bootstrap-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
index 239fe87ac..adc74188a 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.fluent.scss
@@ -1,8 +1,12 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $fluent;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($fluent);
+    @include css-vars-from-theme($fluent-input);
+    @include css-vars-from-theme($fluent-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($fluent-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
index 82db4579c..ebf75ca64 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.indigo.scss
@@ -4,5 +4,11 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($indigo);
+    @include css-vars-from-theme($indigo-input);
+    @include css-vars-from-theme($indigo-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($indigo-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.material.scss b/src/components/date-range-picker/themes/light/date-range-picker.material.scss
index f17ffaba4..381fd3393 100644
--- a/src/components/date-range-picker/themes/light/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/light/date-range-picker.material.scss
@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 
-$theme: $material;
-
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-daterangepicker');
+    @include css-vars-from-theme($material);
+    @include css-vars-from-theme($material-calendar);
+
+    igc-dialog {
+        @include css-vars-from-theme($material-dialog);
+    }
 }
diff --git a/src/components/date-range-picker/themes/light/date-range-picker.shared.scss b/src/components/date-range-picker/themes/light/date-range-picker.shared.scss
deleted file mode 100644
index 13476aeb8..000000000
--- a/src/components/date-range-picker/themes/light/date-range-picker.shared.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'styles/utilities' as *;
-@use 'themes' as *;
-
-:host {
-    @include css-vars-from-theme($base, 'ig-daterangepicker');
-}
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
index a8ce5e2d0..bb4083788 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $bootstrap;
+$theme: input-theme.$bootstrap;
 
 :host {
-    --calendar-border-color: #{$bootstrap-calendar-border-color};
-
     igc-dialog {
         igc-calendar {
             border: none;
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
index c54ad5633..d3858d283 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.common.scss
@@ -1,15 +1,19 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
+@use 'components/calendar/themes/light/themes' as calendar-theme;
 
 $theme: $material;
+$input-theme: input-theme.$material;
+$calendar-theme: calendar-theme.$material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
-    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
         border: none;
+        background: transparent;
 
         [part='actions'] {
             border: none;
@@ -17,12 +21,12 @@ $theme: $material;
 
         igc-calendar {
             box-shadow: none;
+            border-radius: 0;
         }
     }
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
-        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content) {
@@ -31,8 +35,8 @@ $theme: $material;
 
     igc-dialog::part(footer) {
         padding: pad(rem(8px));
-        background: var-get($theme, 'content-background');
-        border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
+        background: var-get($calendar-theme, 'content-background');
+        border-block-start: rem(1px) solid var-get($calendar-theme, 'actions-divider-color');
     }
 
     igc-focus-trap {
@@ -40,18 +44,18 @@ $theme: $material;
 
         --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 
-        border-radius: var-get($theme, 'border-radius');
-        background: var-get($theme, 'content-background');
-        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
+        border-radius: var-get($calendar-theme, 'border-radius');
+        background: var-get($calendar-theme, 'content-background');
+        box-shadow: 0 0 0 rem(1px) var-get($calendar-theme, 'border-color');
     }
 
     igc-popover::part(container) {
         box-shadow: var(--ig-elevation-3);
-        border-radius: var-get($theme, 'border-radius');
+        border-radius: var-get($calendar-theme, 'border-radius');
     }
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: pad-block(rem(4px));
     }
@@ -64,10 +68,10 @@ $theme: $material;
 }
 
 :host(:not([readonly])) {
-    --affix-color: #{var-get($theme, 'input-prefix-color')};
+    --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
     igc-date-time-input[readonly] {
-        --affix-color: #{var-get($theme, 'input-prefix-color')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color')};
 
         &::part(prefix),
         &::part(suffix) {
@@ -82,43 +86,44 @@ $theme: $material;
     }
 
     igc-input:focus-within {
-        --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
 
         &::part(filled) {
-            --affix-color: #{var-get($theme, 'input-prefix-color--focused')};
+            --affix-color: #{var-get($input-theme, 'input-prefix-color--focused')};
         }
     }
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'input-prefix-color--filled')};
+        --affix-color: #{var-get($input-theme, 'input-prefix-color--filled')};
     }
 }
 
 :host(:not([disabled],[readonly]):state(ig-invalid)),
 :host(:not(:disabled,[readonly]):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
-    --affix-color: #{var-get($theme, 'disabled-text-color')};
+    --affix-color: #{var-get($input-theme, 'disabled-text-color')};
 
     ::part(filled) {
-        --affix-color: #{var-get($theme, 'disabled-text-color')};
+        --affix-color: #{var-get($input-theme, 'disabled-text-color')};
     }
 
     ::part(helper-text),
     [part='label'],
     igc-validator {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 }
 
 [part='actions'] {
     min-height: #{sizable(rem(40px), rem(46px), rem(52px))};
-    border-block-start: rem(1px) solid var-get($theme, 'actions-divider-color');
+    border-block-start: rem(1px) solid var-get($calendar-theme, 'actions-divider-color');
+    background: var-get($calendar-theme, 'content-background');
 }
 
 [part='separator'] {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
index cbbd0891e..06e2cadff 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.fluent.scss
@@ -1,11 +1,10 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $fluent;
+$theme: input-theme.$fluent;
 
 :host {
-    --calendar-border-color: #{$fluent-calendar-border-color};
-
     igc-dialog[open]::part(base) {
         border-radius: 0;
     }
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
index 4fadae81b..f4677eb7b 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.indigo.scss
@@ -1,15 +1,15 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $indigo;
+$theme: input-theme.$indigo;
 
 :host {
-    --calendar-border-color: #{$indigo-calendar-border-color};
     --input-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
 
     igc-icon,
-    ::slotted(igc-icon) {
-        --size: var(--input-icon) !important;
+    ::slotted(*) {
+        --ig-icon-size: var(--input-icon);
     }
 
     igc-dialog[open]::part(base) {
diff --git a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
index 108da4796..472c58085 100644
--- a/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
+++ b/src/components/date-range-picker/themes/shared/date-range-picker.material.scss
@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/input/themes/light/themes' as input-theme;
 
-$theme: $material;
+$theme: input-theme.$material;
 
 :host {
     ::part(helper-text) {
diff --git a/src/components/date-range-picker/themes/themes.ts b/src/components/date-range-picker/themes/themes.ts
index 1d826c79c..24f46ba05 100644
--- a/src/components/date-range-picker/themes/themes.ts
+++ b/src/components/date-range-picker/themes/themes.ts
@@ -11,7 +11,6 @@ import { styles as bootstrapLight } from './light/date-range-picker.bootstrap.cs
 import { styles as fluentLight } from './light/date-range-picker.fluent.css.js';
 import { styles as indigoLight } from './light/date-range-picker.indigo.css.js';
 import { styles as materialLight } from './light/date-range-picker.material.css.js';
-import { styles as shared } from './light/date-range-picker.shared.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/date-range-picker.bootstrap.css.js';
 import { styles as fluent } from './shared/date-range-picker.fluent.css.js';
@@ -19,9 +18,6 @@ import { styles as indigo } from './shared/date-range-picker.indigo.css.js';
 import { styles as material } from './shared/date-range-picker.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapLight}
   `,
@@ -37,9 +33,6 @@ const light = {
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
     ${bootstrap} ${bootstrapDark}
   `,
diff --git a/src/components/dialog/themes/dark/dialog.bootstrap.scss b/src/components/dialog/themes/dark/dialog.bootstrap.scss
index 451e1ad58..8bade7490 100644
--- a/src/components/dialog/themes/dark/dialog.bootstrap.scss
+++ b/src/components/dialog/themes/dark/dialog.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.fluent.scss b/src/components/dialog/themes/dark/dialog.fluent.scss
index ad6112c00..4d87074b4 100644
--- a/src/components/dialog/themes/dark/dialog.fluent.scss
+++ b/src/components/dialog/themes/dark/dialog.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.indigo.scss b/src/components/dialog/themes/dark/dialog.indigo.scss
index b817e547c..641839724 100644
--- a/src/components/dialog/themes/dark/dialog.indigo.scss
+++ b/src/components/dialog/themes/dark/dialog.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.material.scss b/src/components/dialog/themes/dark/dialog.material.scss
index e4129e7ce..3271cfef8 100644
--- a/src/components/dialog/themes/dark/dialog.material.scss
+++ b/src/components/dialog/themes/dark/dialog.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/dark/dialog.shared.scss b/src/components/dialog/themes/dark/dialog.shared.scss
index d074bbb61..96b6530e6 100644
--- a/src/components/dialog/themes/dark/dialog.shared.scss
+++ b/src/components/dialog/themes/dark/dialog.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dialog');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dialog/themes/light/dialog.bootstrap.scss b/src/components/dialog/themes/light/dialog.bootstrap.scss
index 451e1ad58..8bade7490 100644
--- a/src/components/dialog/themes/light/dialog.bootstrap.scss
+++ b/src/components/dialog/themes/light/dialog.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.fluent.scss b/src/components/dialog/themes/light/dialog.fluent.scss
index ad6112c00..4d87074b4 100644
--- a/src/components/dialog/themes/light/dialog.fluent.scss
+++ b/src/components/dialog/themes/light/dialog.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.indigo.scss b/src/components/dialog/themes/light/dialog.indigo.scss
index b817e547c..641839724 100644
--- a/src/components/dialog/themes/light/dialog.indigo.scss
+++ b/src/components/dialog/themes/light/dialog.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.material.scss b/src/components/dialog/themes/light/dialog.material.scss
index e4129e7ce..3271cfef8 100644
--- a/src/components/dialog/themes/light/dialog.material.scss
+++ b/src/components/dialog/themes/light/dialog.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dialog');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dialog/themes/light/dialog.shared.scss b/src/components/dialog/themes/light/dialog.shared.scss
index d074bbb61..96b6530e6 100644
--- a/src/components/dialog/themes/light/dialog.shared.scss
+++ b/src/components/dialog/themes/light/dialog.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dialog');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/divider/themes/dark/divider.bootstrap.scss b/src/components/divider/themes/dark/divider.bootstrap.scss
index b342d67e8..68cc3c7bb 100644
--- a/src/components/divider/themes/dark/divider.bootstrap.scss
+++ b/src/components/divider/themes/dark/divider.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.fluent.scss b/src/components/divider/themes/dark/divider.fluent.scss
index f47d628a1..679ee2e59 100644
--- a/src/components/divider/themes/dark/divider.fluent.scss
+++ b/src/components/divider/themes/dark/divider.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.indigo.scss b/src/components/divider/themes/dark/divider.indigo.scss
index 04399fbf7..5c1ebeb56 100644
--- a/src/components/divider/themes/dark/divider.indigo.scss
+++ b/src/components/divider/themes/dark/divider.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/dark/divider.material.scss b/src/components/divider/themes/dark/divider.material.scss
index 90af0bcc5..0dddc23d0 100644
--- a/src/components/divider/themes/dark/divider.material.scss
+++ b/src/components/divider/themes/dark/divider.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.bootstrap.scss b/src/components/divider/themes/light/divider.bootstrap.scss
index c9edd7d3a..8bade7490 100644
--- a/src/components/divider/themes/light/divider.bootstrap.scss
+++ b/src/components/divider/themes/light/divider.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.fluent.scss b/src/components/divider/themes/light/divider.fluent.scss
index 5fc4b6db9..4d87074b4 100644
--- a/src/components/divider/themes/light/divider.fluent.scss
+++ b/src/components/divider/themes/light/divider.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.indigo.scss b/src/components/divider/themes/light/divider.indigo.scss
index bc2cbee13..641839724 100644
--- a/src/components/divider/themes/light/divider.indigo.scss
+++ b/src/components/divider/themes/light/divider.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.material.scss b/src/components/divider/themes/light/divider.material.scss
index 129cf01d1..3271cfef8 100644
--- a/src/components/divider/themes/light/divider.material.scss
+++ b/src/components/divider/themes/light/divider.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-divider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/divider/themes/light/divider.shared.scss b/src/components/divider/themes/light/divider.shared.scss
index 1153e7cc7..96b6530e6 100644
--- a/src/components/divider/themes/light/divider.shared.scss
+++ b/src/components/divider/themes/light/divider.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-divider');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
index 2344b67af..8bade7490 100644
--- a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
+++ b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.fluent.scss b/src/components/dropdown/themes/dark/dropdown.fluent.scss
index 3545e6aa9..4d87074b4 100644
--- a/src/components/dropdown/themes/dark/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/dark/dropdown.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.indigo.scss b/src/components/dropdown/themes/dark/dropdown.indigo.scss
index 90c2ecd67..641839724 100644
--- a/src/components/dropdown/themes/dark/dropdown.indigo.scss
+++ b/src/components/dropdown/themes/dark/dropdown.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.material.scss b/src/components/dropdown/themes/dark/dropdown.material.scss
index 190ebb297..3271cfef8 100644
--- a/src/components/dropdown/themes/dark/dropdown.material.scss
+++ b/src/components/dropdown/themes/dark/dropdown.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/dark/dropdown.shared.scss b/src/components/dropdown/themes/dark/dropdown.shared.scss
index 9fddf7c49..96b6530e6 100644
--- a/src/components/dropdown/themes/dark/dropdown.shared.scss
+++ b/src/components/dropdown/themes/dark/dropdown.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dropdown');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/dropdown/themes/light/dropdown.bootstrap.scss b/src/components/dropdown/themes/light/dropdown.bootstrap.scss
index 2344b67af..8bade7490 100644
--- a/src/components/dropdown/themes/light/dropdown.bootstrap.scss
+++ b/src/components/dropdown/themes/light/dropdown.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.fluent.scss b/src/components/dropdown/themes/light/dropdown.fluent.scss
index 3545e6aa9..4d87074b4 100644
--- a/src/components/dropdown/themes/light/dropdown.fluent.scss
+++ b/src/components/dropdown/themes/light/dropdown.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.indigo.scss b/src/components/dropdown/themes/light/dropdown.indigo.scss
index 90c2ecd67..641839724 100644
--- a/src/components/dropdown/themes/light/dropdown.indigo.scss
+++ b/src/components/dropdown/themes/light/dropdown.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.material.scss b/src/components/dropdown/themes/light/dropdown.material.scss
index 190ebb297..3271cfef8 100644
--- a/src/components/dropdown/themes/light/dropdown.material.scss
+++ b/src/components/dropdown/themes/light/dropdown.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-dropdown');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/dropdown/themes/light/dropdown.shared.scss b/src/components/dropdown/themes/light/dropdown.shared.scss
index 9fddf7c49..96b6530e6 100644
--- a/src/components/dropdown/themes/light/dropdown.shared.scss
+++ b/src/components/dropdown/themes/light/dropdown.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-dropdown');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
index 84bc19bd3..8bade7490 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
index f17a88903..4d87074b4 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
index 42359a298..641839724 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
index 87b1f6cbb..3271cfef8 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss b/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
index d7a88b5b6..96b6530e6 100644
--- a/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
+++ b/src/components/expansion-panel/themes/dark/expansion-panel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-expansion-panel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
index 84bc19bd3..8bade7490 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
index f17a88903..4d87074b4 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
index 42359a298..641839724 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.material.scss b/src/components/expansion-panel/themes/light/expansion-panel.material.scss
index 87b1f6cbb..3271cfef8 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.material.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-expansion-panel');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/expansion-panel/themes/light/expansion-panel.shared.scss b/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
index d7a88b5b6..96b6530e6 100644
--- a/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
+++ b/src/components/expansion-panel/themes/light/expansion-panel.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-expansion-panel');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/file-input/themes/dark/file-input.bootstrap.scss b/src/components/file-input/themes/dark/file-input.bootstrap.scss
index dc39a8392..68cc3c7bb 100644
--- a/src/components/file-input/themes/dark/file-input.bootstrap.scss
+++ b/src/components/file-input/themes/dark/file-input.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.fluent.scss b/src/components/file-input/themes/dark/file-input.fluent.scss
index 731cb2955..679ee2e59 100644
--- a/src/components/file-input/themes/dark/file-input.fluent.scss
+++ b/src/components/file-input/themes/dark/file-input.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.indigo.scss b/src/components/file-input/themes/dark/file-input.indigo.scss
index 4727105e0..5c1ebeb56 100644
--- a/src/components/file-input/themes/dark/file-input.indigo.scss
+++ b/src/components/file-input/themes/dark/file-input.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/dark/file-input.material.scss b/src/components/file-input/themes/dark/file-input.material.scss
index 8485dccc9..0dddc23d0 100644
--- a/src/components/file-input/themes/dark/file-input.material.scss
+++ b/src/components/file-input/themes/dark/file-input.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.bootstrap.scss b/src/components/file-input/themes/light/file-input.bootstrap.scss
index 90ca15cea..8bade7490 100644
--- a/src/components/file-input/themes/light/file-input.bootstrap.scss
+++ b/src/components/file-input/themes/light/file-input.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
-}
\ No newline at end of file
+    @include css-vars-from-theme(diff($base, $theme));
+}
diff --git a/src/components/file-input/themes/light/file-input.fluent.scss b/src/components/file-input/themes/light/file-input.fluent.scss
index 617cd91ca..4d87074b4 100644
--- a/src/components/file-input/themes/light/file-input.fluent.scss
+++ b/src/components/file-input/themes/light/file-input.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.indigo.scss b/src/components/file-input/themes/light/file-input.indigo.scss
index 533001aa0..641839724 100644
--- a/src/components/file-input/themes/light/file-input.indigo.scss
+++ b/src/components/file-input/themes/light/file-input.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
-}
\ No newline at end of file
+    @include css-vars-from-theme(diff($base, $theme));
+}
diff --git a/src/components/file-input/themes/light/file-input.material.scss b/src/components/file-input/themes/light/file-input.material.scss
index bbfbea38c..3271cfef8 100644
--- a/src/components/file-input/themes/light/file-input.material.scss
+++ b/src/components/file-input/themes/light/file-input.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/file-input/themes/light/file-input.shared.scss b/src/components/file-input/themes/light/file-input.shared.scss
index 3ee672901..96b6530e6 100644
--- a/src/components/file-input/themes/light/file-input.shared.scss
+++ b/src/components/file-input/themes/light/file-input.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/icon/themes/dark/icon.bootstrap.scss b/src/components/icon/themes/dark/icon.bootstrap.scss
index 0a6c8bbcf..68cc3c7bb 100644
--- a/src/components/icon/themes/dark/icon.bootstrap.scss
+++ b/src/components/icon/themes/dark/icon.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.fluent.scss b/src/components/icon/themes/dark/icon.fluent.scss
index b19684f93..679ee2e59 100644
--- a/src/components/icon/themes/dark/icon.fluent.scss
+++ b/src/components/icon/themes/dark/icon.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.indigo.scss b/src/components/icon/themes/dark/icon.indigo.scss
index 2e9db13f0..5c1ebeb56 100644
--- a/src/components/icon/themes/dark/icon.indigo.scss
+++ b/src/components/icon/themes/dark/icon.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/dark/icon.material.scss b/src/components/icon/themes/dark/icon.material.scss
index d300fd83a..0dddc23d0 100644
--- a/src/components/icon/themes/dark/icon.material.scss
+++ b/src/components/icon/themes/dark/icon.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.bootstrap.scss b/src/components/icon/themes/light/icon.bootstrap.scss
index dbba403ef..8bade7490 100644
--- a/src/components/icon/themes/light/icon.bootstrap.scss
+++ b/src/components/icon/themes/light/icon.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.fluent.scss b/src/components/icon/themes/light/icon.fluent.scss
index b2e1b546d..4d87074b4 100644
--- a/src/components/icon/themes/light/icon.fluent.scss
+++ b/src/components/icon/themes/light/icon.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.indigo.scss b/src/components/icon/themes/light/icon.indigo.scss
index e7a041682..641839724 100644
--- a/src/components/icon/themes/light/icon.indigo.scss
+++ b/src/components/icon/themes/light/icon.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.material.scss b/src/components/icon/themes/light/icon.material.scss
index bd1bf08e5..3271cfef8 100644
--- a/src/components/icon/themes/light/icon.material.scss
+++ b/src/components/icon/themes/light/icon.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-icon');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/icon/themes/light/icon.shared.scss b/src/components/icon/themes/light/icon.shared.scss
index d359cb243..96b6530e6 100644
--- a/src/components/icon/themes/light/icon.shared.scss
+++ b/src/components/icon/themes/light/icon.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-icon');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/input/themes/dark/input.bootstrap.scss b/src/components/input/themes/dark/input.bootstrap.scss
index a1b4fc343..68cc3c7bb 100644
--- a/src/components/input/themes/dark/input.bootstrap.scss
+++ b/src/components/input/themes/dark/input.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.fluent.scss b/src/components/input/themes/dark/input.fluent.scss
index f7288db5d..679ee2e59 100644
--- a/src/components/input/themes/dark/input.fluent.scss
+++ b/src/components/input/themes/dark/input.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.indigo.scss b/src/components/input/themes/dark/input.indigo.scss
index ab3f450c4..5c1ebeb56 100644
--- a/src/components/input/themes/dark/input.indigo.scss
+++ b/src/components/input/themes/dark/input.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/dark/input.material.scss b/src/components/input/themes/dark/input.material.scss
index 83c5027f7..0dddc23d0 100644
--- a/src/components/input/themes/dark/input.material.scss
+++ b/src/components/input/themes/dark/input.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/input/themes/light/input.bootstrap.scss b/src/components/input/themes/light/input.bootstrap.scss
index 3985a5cfa..8bade7490 100644
--- a/src/components/input/themes/light/input.bootstrap.scss
+++ b/src/components/input/themes/light/input.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.fluent.scss b/src/components/input/themes/light/input.fluent.scss
index ab9b87c2c..4d87074b4 100644
--- a/src/components/input/themes/light/input.fluent.scss
+++ b/src/components/input/themes/light/input.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.indigo.scss b/src/components/input/themes/light/input.indigo.scss
index 2128ffb0b..641839724 100644
--- a/src/components/input/themes/light/input.indigo.scss
+++ b/src/components/input/themes/light/input.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.material.scss b/src/components/input/themes/light/input.material.scss
index 4e1b3f1ff..3271cfef8 100644
--- a/src/components/input/themes/light/input.material.scss
+++ b/src/components/input/themes/light/input.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-input');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/input/themes/light/input.shared.scss b/src/components/input/themes/light/input.shared.scss
index 39c825453..96b6530e6 100644
--- a/src/components/input/themes/light/input.shared.scss
+++ b/src/components/input/themes/light/input.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-input');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/list/themes/dark/container/list.bootstrap.scss b/src/components/list/themes/dark/container/list.bootstrap.scss
index 699c58fd0..597b7897f 100644
--- a/src/components/list/themes/dark/container/list.bootstrap.scss
+++ b/src/components/list/themes/dark/container/list.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.fluent.scss b/src/components/list/themes/dark/container/list.fluent.scss
index 41d635539..925a705e7 100644
--- a/src/components/list/themes/dark/container/list.fluent.scss
+++ b/src/components/list/themes/dark/container/list.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.indigo.scss b/src/components/list/themes/dark/container/list.indigo.scss
index cb169f2f1..52f7ff3eb 100644
--- a/src/components/list/themes/dark/container/list.indigo.scss
+++ b/src/components/list/themes/dark/container/list.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.material.scss b/src/components/list/themes/dark/container/list.material.scss
index ff87e6336..ba3d04144 100644
--- a/src/components/list/themes/dark/container/list.material.scss
+++ b/src/components/list/themes/dark/container/list.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/dark/container/list.shared.scss b/src/components/list/themes/dark/container/list.shared.scss
index e75a8a406..66f195c18 100644
--- a/src/components/list/themes/dark/container/list.shared.scss
+++ b/src/components/list/themes/dark/container/list.shared.scss
@@ -2,5 +2,5 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-list');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/list/themes/light/container/list.bootstrap.scss b/src/components/list/themes/light/container/list.bootstrap.scss
index 699c58fd0..597b7897f 100644
--- a/src/components/list/themes/light/container/list.bootstrap.scss
+++ b/src/components/list/themes/light/container/list.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.fluent.scss b/src/components/list/themes/light/container/list.fluent.scss
index 41d635539..925a705e7 100644
--- a/src/components/list/themes/light/container/list.fluent.scss
+++ b/src/components/list/themes/light/container/list.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.indigo.scss b/src/components/list/themes/light/container/list.indigo.scss
index cb169f2f1..52f7ff3eb 100644
--- a/src/components/list/themes/light/container/list.indigo.scss
+++ b/src/components/list/themes/light/container/list.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.material.scss b/src/components/list/themes/light/container/list.material.scss
index ff87e6336..ba3d04144 100644
--- a/src/components/list/themes/light/container/list.material.scss
+++ b/src/components/list/themes/light/container/list.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-list');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/list/themes/light/container/list.shared.scss b/src/components/list/themes/light/container/list.shared.scss
index e75a8a406..66f195c18 100644
--- a/src/components/list/themes/light/container/list.shared.scss
+++ b/src/components/list/themes/light/container/list.shared.scss
@@ -2,5 +2,5 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-list');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
index ad5817e78..3ae1ff78b 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss
@@ -5,6 +5,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $bootstrap-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $bootstrap-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
index 6282f463e..813e1d5e1 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss
@@ -5,6 +5,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $fluent-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $fluent-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
index 3d33fb9e7..275c0bc35 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss
@@ -5,6 +5,6 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $indigo-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $indigo-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
index 7db3c32cb..6638658ff 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss
@@ -5,6 +5,6 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff(light.$base-overlay, $material-overlay), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff(light.$base-overlay, $material-overlay));
 }
diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
index b1049eb2d..92adb96ea 100644
--- a/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
+++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.shared.scss
@@ -3,6 +3,6 @@
 @use '../../light/themes' as light;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-nav-drawer');
-    @include css-vars-from-theme(light.$base-overlay, 'ig-nav-drawer');
+    @include css-vars-from-theme($base);
+    @include css-vars-from-theme(light.$base-overlay);
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
index a1d472a1b..025a69b60 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-bootstrap), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-bootstrap));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
index bd9742d9d..8f1e230b5 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-fluent), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-fluent));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
index dfbd7731e..43738ba21 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss
@@ -4,6 +4,6 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-indigo), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-indigo));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
index 1ceb93740..67e073a69 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss
@@ -4,6 +4,6 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-nav-drawer');
-    @include css-vars-from-theme(diff($base, $overlay-material), 'ig-nav-drawer');
+    @include css-vars-from-theme(diff($base, $theme));
+    @include css-vars-from-theme(diff($base, $overlay-material));
 }
diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
index e53f51457..dddd7f799 100644
--- a/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
+++ b/src/components/nav-drawer/themes/light/container/nav-drawer.shared.scss
@@ -2,6 +2,6 @@
 @use '../themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-nav-drawer');
-    @include css-vars-from-theme($base-overlay, 'ig-nav-drawer');
+    @include css-vars-from-theme($base);
+    @include css-vars-from-theme($base-overlay);
 }
diff --git a/src/components/navbar/themes/dark/navbar.bootstrap.scss b/src/components/navbar/themes/dark/navbar.bootstrap.scss
index 5727ca047..68cc3c7bb 100644
--- a/src/components/navbar/themes/dark/navbar.bootstrap.scss
+++ b/src/components/navbar/themes/dark/navbar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.fluent.scss b/src/components/navbar/themes/dark/navbar.fluent.scss
index 2a8550477..679ee2e59 100644
--- a/src/components/navbar/themes/dark/navbar.fluent.scss
+++ b/src/components/navbar/themes/dark/navbar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.indigo.scss b/src/components/navbar/themes/dark/navbar.indigo.scss
index e5ab0f3ee..5c1ebeb56 100644
--- a/src/components/navbar/themes/dark/navbar.indigo.scss
+++ b/src/components/navbar/themes/dark/navbar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/dark/navbar.material.scss b/src/components/navbar/themes/dark/navbar.material.scss
index cd3685386..0dddc23d0 100644
--- a/src/components/navbar/themes/dark/navbar.material.scss
+++ b/src/components/navbar/themes/dark/navbar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.bootstrap.scss b/src/components/navbar/themes/light/navbar.bootstrap.scss
index db4c0b131..8bade7490 100644
--- a/src/components/navbar/themes/light/navbar.bootstrap.scss
+++ b/src/components/navbar/themes/light/navbar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.fluent.scss b/src/components/navbar/themes/light/navbar.fluent.scss
index 477f81b53..4d87074b4 100644
--- a/src/components/navbar/themes/light/navbar.fluent.scss
+++ b/src/components/navbar/themes/light/navbar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.indigo.scss b/src/components/navbar/themes/light/navbar.indigo.scss
index b265b8ac4..641839724 100644
--- a/src/components/navbar/themes/light/navbar.indigo.scss
+++ b/src/components/navbar/themes/light/navbar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.material.scss b/src/components/navbar/themes/light/navbar.material.scss
index 6e9ddfa3b..3271cfef8 100644
--- a/src/components/navbar/themes/light/navbar.material.scss
+++ b/src/components/navbar/themes/light/navbar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-navbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/navbar/themes/light/navbar.shared.scss b/src/components/navbar/themes/light/navbar.shared.scss
index 1704df577..96b6530e6 100644
--- a/src/components/navbar/themes/light/navbar.shared.scss
+++ b/src/components/navbar/themes/light/navbar.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-navbar');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/popover/themes/light/popover.base.scss b/src/components/popover/themes/light/popover.base.scss
index cdbc0d91b..8867ffa26 100644
--- a/src/components/popover/themes/light/popover.base.scss
+++ b/src/components/popover/themes/light/popover.base.scss
@@ -13,4 +13,5 @@
     inset: unset;
     border: none;
     padding: 0;
+    background: transparent;
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
index 184182d36..8bade7490 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.fluent.scss b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
index 897394fee..4d87074b4 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.indigo.scss b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
index 7d1f94b62..641839724 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.material.scss b/src/components/progress/themes/circular/dark/circular.progress.material.scss
index 37328a7b2..3271cfef8 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.material.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/dark/circular.progress.shared.scss b/src/components/progress/themes/circular/dark/circular.progress.shared.scss
index 560fb1cd2..4a7e8438a 100644
--- a/src/components/progress/themes/circular/dark/circular.progress.shared.scss
+++ b/src/components/progress/themes/circular/dark/circular.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-circular-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
index 184182d36..8bade7490 100644
--- a/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.fluent.scss b/src/components/progress/themes/circular/light/circular.progress.fluent.scss
index 897394fee..4d87074b4 100644
--- a/src/components/progress/themes/circular/light/circular.progress.fluent.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.indigo.scss b/src/components/progress/themes/circular/light/circular.progress.indigo.scss
index 7d1f94b62..641839724 100644
--- a/src/components/progress/themes/circular/light/circular.progress.indigo.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.material.scss b/src/components/progress/themes/circular/light/circular.progress.material.scss
index 37328a7b2..3271cfef8 100644
--- a/src/components/progress/themes/circular/light/circular.progress.material.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-circular-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/circular/light/circular.progress.shared.scss b/src/components/progress/themes/circular/light/circular.progress.shared.scss
index 560fb1cd2..4a7e8438a 100644
--- a/src/components/progress/themes/circular/light/circular.progress.shared.scss
+++ b/src/components/progress/themes/circular/light/circular.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-circular-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
index a513c990a..8bade7490 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.fluent.scss b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
index 4b7ace01e..4d87074b4 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.indigo.scss b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
index ba3670002..641839724 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.material.scss b/src/components/progress/themes/linear/dark/linear.progress.material.scss
index 0b5fc8094..3271cfef8 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.material.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/dark/linear.progress.shared.scss b/src/components/progress/themes/linear/dark/linear.progress.shared.scss
index 686e548ef..4a7e8438a 100644
--- a/src/components/progress/themes/linear/dark/linear.progress.shared.scss
+++ b/src/components/progress/themes/linear/dark/linear.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-linear-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
index a513c990a..8bade7490 100644
--- a/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.fluent.scss b/src/components/progress/themes/linear/light/linear.progress.fluent.scss
index 4b7ace01e..4d87074b4 100644
--- a/src/components/progress/themes/linear/light/linear.progress.fluent.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.indigo.scss b/src/components/progress/themes/linear/light/linear.progress.indigo.scss
index ba3670002..641839724 100644
--- a/src/components/progress/themes/linear/light/linear.progress.indigo.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.material.scss b/src/components/progress/themes/linear/light/linear.progress.material.scss
index 0b5fc8094..3271cfef8 100644
--- a/src/components/progress/themes/linear/light/linear.progress.material.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-linear-progress');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/progress/themes/linear/light/linear.progress.shared.scss b/src/components/progress/themes/linear/light/linear.progress.shared.scss
index 686e548ef..4a7e8438a 100644
--- a/src/components/progress/themes/linear/light/linear.progress.shared.scss
+++ b/src/components/progress/themes/linear/light/linear.progress.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-linear-progress');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.bootstrap.scss b/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
index e0960154c..68cc3c7bb 100644
--- a/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
+++ b/src/components/radio-group/themes/dark/radio-group.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.fluent.scss b/src/components/radio-group/themes/dark/radio-group.fluent.scss
index 72121c599..679ee2e59 100644
--- a/src/components/radio-group/themes/dark/radio-group.fluent.scss
+++ b/src/components/radio-group/themes/dark/radio-group.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.indigo.scss b/src/components/radio-group/themes/dark/radio-group.indigo.scss
index 1b7116e63..5c1ebeb56 100644
--- a/src/components/radio-group/themes/dark/radio-group.indigo.scss
+++ b/src/components/radio-group/themes/dark/radio-group.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/dark/radio-group.material.scss b/src/components/radio-group/themes/dark/radio-group.material.scss
index 56b52deca..0dddc23d0 100644
--- a/src/components/radio-group/themes/dark/radio-group.material.scss
+++ b/src/components/radio-group/themes/dark/radio-group.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.bootstrap.scss b/src/components/radio-group/themes/light/radio-group.bootstrap.scss
index bfb654822..8bade7490 100644
--- a/src/components/radio-group/themes/light/radio-group.bootstrap.scss
+++ b/src/components/radio-group/themes/light/radio-group.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.fluent.scss b/src/components/radio-group/themes/light/radio-group.fluent.scss
index e3188a7a7..4d87074b4 100644
--- a/src/components/radio-group/themes/light/radio-group.fluent.scss
+++ b/src/components/radio-group/themes/light/radio-group.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.indigo.scss b/src/components/radio-group/themes/light/radio-group.indigo.scss
index f850b5555..641839724 100644
--- a/src/components/radio-group/themes/light/radio-group.indigo.scss
+++ b/src/components/radio-group/themes/light/radio-group.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.material.scss b/src/components/radio-group/themes/light/radio-group.material.scss
index 3f44b3216..3271cfef8 100644
--- a/src/components/radio-group/themes/light/radio-group.material.scss
+++ b/src/components/radio-group/themes/light/radio-group.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio-group');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio-group/themes/light/radio-group.shared.scss b/src/components/radio-group/themes/light/radio-group.shared.scss
index 13ea61243..4a7e8438a 100644
--- a/src/components/radio-group/themes/light/radio-group.shared.scss
+++ b/src/components/radio-group/themes/light/radio-group.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-radio-group');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/radio/themes/dark/radio.bootstrap.scss b/src/components/radio/themes/dark/radio.bootstrap.scss
index ada9eddb0..6b5d66131 100644
--- a/src/components/radio/themes/dark/radio.bootstrap.scss
+++ b/src/components/radio/themes/dark/radio.bootstrap.scss
@@ -5,7 +5,7 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host([disabled]),
@@ -13,4 +13,4 @@ $theme: $bootstrap;
     [part='control'] {
         background: color('surface')
     }
-}
\ No newline at end of file
+}
diff --git a/src/components/radio/themes/dark/radio.fluent.scss b/src/components/radio/themes/dark/radio.fluent.scss
index 0b2e3103a..a8900b801 100644
--- a/src/components/radio/themes/dark/radio.fluent.scss
+++ b/src/components/radio/themes/dark/radio.fluent.scss
@@ -5,7 +5,7 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 :host(:not([disabled]):state(ig-invalid):hover),
diff --git a/src/components/radio/themes/dark/radio.indigo.scss b/src/components/radio/themes/dark/radio.indigo.scss
index 4b8960393..5c1ebeb56 100644
--- a/src/components/radio/themes/dark/radio.indigo.scss
+++ b/src/components/radio/themes/dark/radio.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/radio/themes/dark/radio.material.scss b/src/components/radio/themes/dark/radio.material.scss
index 79960d917..ff100b9a2 100644
--- a/src/components/radio/themes/dark/radio.material.scss
+++ b/src/components/radio/themes/dark/radio.material.scss
@@ -5,7 +5,7 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
 
 [part~='base'] {
diff --git a/src/components/radio/themes/light/radio.bootstrap.scss b/src/components/radio/themes/light/radio.bootstrap.scss
index 90fc71f88..8bade7490 100644
--- a/src/components/radio/themes/light/radio.bootstrap.scss
+++ b/src/components/radio/themes/light/radio.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.fluent.scss b/src/components/radio/themes/light/radio.fluent.scss
index dff4eba47..4d87074b4 100644
--- a/src/components/radio/themes/light/radio.fluent.scss
+++ b/src/components/radio/themes/light/radio.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.indigo.scss b/src/components/radio/themes/light/radio.indigo.scss
index 91f83ea8d..641839724 100644
--- a/src/components/radio/themes/light/radio.indigo.scss
+++ b/src/components/radio/themes/light/radio.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.material.scss b/src/components/radio/themes/light/radio.material.scss
index 4de6d85cd..3271cfef8 100644
--- a/src/components/radio/themes/light/radio.material.scss
+++ b/src/components/radio/themes/light/radio.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-radio');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/radio/themes/light/radio.shared.scss b/src/components/radio/themes/light/radio.shared.scss
index 1fd86fac3..96b6530e6 100644
--- a/src/components/radio/themes/light/radio.shared.scss
+++ b/src/components/radio/themes/light/radio.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-radio');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/rating/themes/dark/rating.bootstrap.scss b/src/components/rating/themes/dark/rating.bootstrap.scss
index 3878c5f6d..68cc3c7bb 100644
--- a/src/components/rating/themes/dark/rating.bootstrap.scss
+++ b/src/components/rating/themes/dark/rating.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.fluent.scss b/src/components/rating/themes/dark/rating.fluent.scss
index 2272aa9d2..679ee2e59 100644
--- a/src/components/rating/themes/dark/rating.fluent.scss
+++ b/src/components/rating/themes/dark/rating.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.indigo.scss b/src/components/rating/themes/dark/rating.indigo.scss
index a1d143509..5c1ebeb56 100644
--- a/src/components/rating/themes/dark/rating.indigo.scss
+++ b/src/components/rating/themes/dark/rating.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/dark/rating.material.scss b/src/components/rating/themes/dark/rating.material.scss
index d29b4c3e6..0dddc23d0 100644
--- a/src/components/rating/themes/dark/rating.material.scss
+++ b/src/components/rating/themes/dark/rating.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.bootstrap.scss b/src/components/rating/themes/light/rating.bootstrap.scss
index 7049d4e28..8bade7490 100644
--- a/src/components/rating/themes/light/rating.bootstrap.scss
+++ b/src/components/rating/themes/light/rating.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.fluent.scss b/src/components/rating/themes/light/rating.fluent.scss
index 13d60176c..4d87074b4 100644
--- a/src/components/rating/themes/light/rating.fluent.scss
+++ b/src/components/rating/themes/light/rating.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.indigo.scss b/src/components/rating/themes/light/rating.indigo.scss
index 9709343e0..641839724 100644
--- a/src/components/rating/themes/light/rating.indigo.scss
+++ b/src/components/rating/themes/light/rating.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.material.scss b/src/components/rating/themes/light/rating.material.scss
index 65bcdbf5a..3271cfef8 100644
--- a/src/components/rating/themes/light/rating.material.scss
+++ b/src/components/rating/themes/light/rating.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-rating');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/rating/themes/light/rating.shared.scss b/src/components/rating/themes/light/rating.shared.scss
index a1afcf2cd..4a7e8438a 100644
--- a/src/components/rating/themes/light/rating.shared.scss
+++ b/src/components/rating/themes/light/rating.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-rating');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
index 4c15e6275..8bade7490 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.fluent.scss b/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
index 6ae921d28..4d87074b4 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.indigo.scss b/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
index acab0ab45..641839724 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.material.scss b/src/components/resize-container/themes/dark/resize-indicator.material.scss
index 30bb27d12..3271cfef8 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.material.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/dark/resize-indicator.shared.scss b/src/components/resize-container/themes/dark/resize-indicator.shared.scss
index 8638009cb..96b6530e6 100644
--- a/src/components/resize-container/themes/dark/resize-indicator.shared.scss
+++ b/src/components/resize-container/themes/dark/resize-indicator.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-resize-indicator');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss b/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
index 4c15e6275..8bade7490 100644
--- a/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.fluent.scss b/src/components/resize-container/themes/light/resize-indicator.fluent.scss
index 6ae921d28..4d87074b4 100644
--- a/src/components/resize-container/themes/light/resize-indicator.fluent.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.indigo.scss b/src/components/resize-container/themes/light/resize-indicator.indigo.scss
index acab0ab45..641839724 100644
--- a/src/components/resize-container/themes/light/resize-indicator.indigo.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.material.scss b/src/components/resize-container/themes/light/resize-indicator.material.scss
index 30bb27d12..3271cfef8 100644
--- a/src/components/resize-container/themes/light/resize-indicator.material.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-resize-indicator');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/resize-container/themes/light/resize-indicator.shared.scss b/src/components/resize-container/themes/light/resize-indicator.shared.scss
index 8638009cb..96b6530e6 100644
--- a/src/components/resize-container/themes/light/resize-indicator.shared.scss
+++ b/src/components/resize-container/themes/light/resize-indicator.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-resize-indicator');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/select/themes/dark/_themes.scss b/src/components/select/themes/dark/_themes.scss
index 2238d0627..d02f627b6 100644
--- a/src/components/select/themes/dark/_themes.scss
+++ b/src/components/select/themes/dark/_themes.scss
@@ -1,25 +1,8 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/select' as *;
-@use 'components/input/themes/dark/themes' as input-theme;
 
-$material: map.merge(digest-schema($dark-material-select), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($dark-bootstrap-select), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($dark-fluent-select), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($dark-indigo-select), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
+$material: digest-schema($dark-material-select);
+$bootstrap: digest-schema($dark-bootstrap-select);
+$fluent: digest-schema($dark-fluent-select);
+$indigo: digest-schema($dark-indigo-select);
diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss
index 1ee36f9c6..96e91e4f4 100644
--- a/src/components/select/themes/dark/select.bootstrap.scss
+++ b/src/components/select/themes/dark/select.bootstrap.scss
@@ -6,14 +6,11 @@
 $dropdown-theme: dropdown-theme.$bootstrap;
 $theme: $bootstrap;
 
-
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
 
diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss
index 250cf1c3c..2080fea83 100644
--- a/src/components/select/themes/dark/select.fluent.scss
+++ b/src/components/select/themes/dark/select.fluent.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$fluent;
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss
index 3c2d4cf92..beb744043 100644
--- a/src/components/select/themes/dark/select.indigo.scss
+++ b/src/components/select/themes/dark/select.indigo.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$indigo;
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss
index 2059a494d..4f41d71a1 100644
--- a/src/components/select/themes/dark/select.material.scss
+++ b/src/components/select/themes/dark/select.material.scss
@@ -7,11 +7,9 @@ $dropdown-theme: dropdown-theme.$material;
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/_themes.scss b/src/components/select/themes/light/_themes.scss
index 9783e7c3d..cbed9098c 100644
--- a/src/components/select/themes/light/_themes.scss
+++ b/src/components/select/themes/light/_themes.scss
@@ -1,26 +1,9 @@
 @use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/select' as *;
-@use 'components/input/themes/light/themes' as input-theme;
 
 $base: digest-schema($light-select);
-$material: map.merge(digest-schema($material-select), (
-    helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
-));
-$bootstrap: map.merge(digest-schema($bootstrap-select), (
-    helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
-));
-$fluent: map.merge(digest-schema($fluent-select), (
-    helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
-));
-$indigo: map.merge(digest-schema($indigo-select), (
-    helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
-    disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
-    error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
-));
+$material: digest-schema($material-select);
+$bootstrap: digest-schema($bootstrap-select);
+$fluent: digest-schema($fluent-select);
+$indigo: digest-schema($indigo-select);
diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss
index 8158be06f..024f1b151 100644
--- a/src/components/select/themes/light/select.bootstrap.scss
+++ b/src/components/select/themes/light/select.bootstrap.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$bootstrap;
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss
index 6fd02a383..41551633e 100644
--- a/src/components/select/themes/light/select.fluent.scss
+++ b/src/components/select/themes/light/select.fluent.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$fluent;
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss
index e7590fdab..622768020 100644
--- a/src/components/select/themes/light/select.indigo.scss
+++ b/src/components/select/themes/light/select.indigo.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$indigo;
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss
index 3b26fcd44..52f02c8e1 100644
--- a/src/components/select/themes/light/select.material.scss
+++ b/src/components/select/themes/light/select.material.scss
@@ -6,11 +6,9 @@ $dropdown-theme: dropdown-theme.$material;
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-select');
-    @include css-vars-from-theme($dropdown-theme, 'ig-popover');
+    @include css-vars-from-theme(diff($base, $theme));
 
-    --dd-background-color: #{var-get($dropdown-theme, 'background-color')};
-    --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')};
-    --dd-border-color: #{var-get($dropdown-theme, 'border-color')};
-    --dd-elevation: #{var-get($dropdown-theme, 'elevation')};
+    [part='base'] {
+        @include css-vars-from-theme($dropdown-theme);
+    }
 }
diff --git a/src/components/select/themes/light/select.shared.scss b/src/components/select/themes/light/select.shared.scss
index 0d0cdf0d5..96b6530e6 100644
--- a/src/components/select/themes/light/select.shared.scss
+++ b/src/components/select/themes/light/select.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-select');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss
index 1d014f0a3..d4fc0d183 100644
--- a/src/components/select/themes/shared/select.bootstrap.scss
+++ b/src/components/select/themes/shared/select.bootstrap.scss
@@ -1,9 +1,11 @@
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
+@use 'components/dropdown/themes/light/themes' as dropdown-theme;
 @use 'components/input/themes/light/themes' as input-theme;
 
 $theme: $bootstrap;
 $input-theme: input-theme.$bootstrap;
+$dropdown-theme: dropdown-theme.$bootstrap;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
@@ -13,7 +15,7 @@ $input-theme: input-theme.$bootstrap;
     ::part(helper-text) {
         @include type-style('body-2');
 
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(20px), auto);
         margin-block-start: pad-block(rem(4px));
     }
@@ -27,7 +29,7 @@ $input-theme: input-theme.$bootstrap;
 }
 
 [part='base'] {
-    border: rem(1px) solid var(--dd-border-color);
+    border: rem(1px) solid var-get($dropdown-theme, 'border-color');
     padding: pad-block(rem(8px)) 0;
 }
 
@@ -41,7 +43,7 @@ $input-theme: input-theme.$bootstrap;
 :host([disabled]),
 :host(:disabled) {
     igc-validator {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/select/themes/shared/select.common.scss b/src/components/select/themes/shared/select.common.scss
index 0e5ee8b1d..c20a7f538 100644
--- a/src/components/select/themes/shared/select.common.scss
+++ b/src/components/select/themes/shared/select.common.scss
@@ -18,9 +18,9 @@ $dropdown-theme: dropdown-theme.$material;
 }
 
 [part='base'] {
-    background: var(--dd-background-color);
-    border-radius: var(--dd-border-radius);
-    box-shadow: var(--dd-elevation);
+    background: var-get($dropdown-theme, 'background-color');
+    border-radius: var-get($dropdown-theme, 'border-radius');
+    box-shadow: var-get($dropdown-theme, 'elevation');
 }
 
 [part~='toggle-icon'] {
@@ -69,11 +69,11 @@ $dropdown-theme: dropdown-theme.$material;
 :host(:not([disabled]):state(ig-invalid)),
 :host(:not(:disabled):state(ig-invalid)) {
     ::part(helper-text) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 ::slotted([slot='suffix']),
 ::slotted([slot='prefix']) {
     padding-inline: var(--affix-padding);
-}
\ No newline at end of file
+}
diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss
index 230a93816..b40f26134 100644
--- a/src/components/select/themes/shared/select.fluent.scss
+++ b/src/components/select/themes/shared/select.fluent.scss
@@ -13,7 +13,7 @@ $input-theme: input-theme.$fluent;
     --dropdown-size: var(--component-size);
 
     ::part(helper-text) {
-        color: var-get($theme, 'helper-text-color');
+        color: var-get($input-theme, 'helper-text-color');
         margin-block-start: pad-block(rem(5px));
         grid-auto-rows: minmax(rem(18px), auto);
     }
@@ -43,7 +43,7 @@ $input-theme: input-theme.$fluent;
 :host(:disabled),
 :host([disabled]) {
     igc-validator {
-        color: var-get($fluent, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss
index 61a80ac05..164b04ed2 100644
--- a/src/components/select/themes/shared/select.indigo.scss
+++ b/src/components/select/themes/shared/select.indigo.scss
@@ -64,14 +64,14 @@ $input-theme: input-theme.$indigo;
     }
 
     ::part(validation-icon) {
-        color: var-get($theme, 'error-secondary-color');
+        color: var-get($input-theme, 'error-secondary-color');
     }
 }
 
 :host(:disabled),
 :host([disabled]) {
     igc-input::part(input) {
-        color: var-get($theme, 'disabled-text-color');
+        color: var-get($input-theme, 'disabled-text-color');
     }
 
     [part~='toggle-icon'] {
diff --git a/src/components/slider/themes/dark/slider.bootstrap.scss b/src/components/slider/themes/dark/slider.bootstrap.scss
index e10ab8312..68cc3c7bb 100644
--- a/src/components/slider/themes/dark/slider.bootstrap.scss
+++ b/src/components/slider/themes/dark/slider.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.fluent.scss b/src/components/slider/themes/dark/slider.fluent.scss
index 6faaf556f..679ee2e59 100644
--- a/src/components/slider/themes/dark/slider.fluent.scss
+++ b/src/components/slider/themes/dark/slider.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.indigo.scss b/src/components/slider/themes/dark/slider.indigo.scss
index 4c00e9590..5c1ebeb56 100644
--- a/src/components/slider/themes/dark/slider.indigo.scss
+++ b/src/components/slider/themes/dark/slider.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/dark/slider.material.scss b/src/components/slider/themes/dark/slider.material.scss
index b9a40188a..0dddc23d0 100644
--- a/src/components/slider/themes/dark/slider.material.scss
+++ b/src/components/slider/themes/dark/slider.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.bootstrap.scss b/src/components/slider/themes/light/slider.bootstrap.scss
index 741a90d02..8bade7490 100644
--- a/src/components/slider/themes/light/slider.bootstrap.scss
+++ b/src/components/slider/themes/light/slider.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.fluent.scss b/src/components/slider/themes/light/slider.fluent.scss
index e4fd404c7..4d87074b4 100644
--- a/src/components/slider/themes/light/slider.fluent.scss
+++ b/src/components/slider/themes/light/slider.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.indigo.scss b/src/components/slider/themes/light/slider.indigo.scss
index d7f2cbbfe..641839724 100644
--- a/src/components/slider/themes/light/slider.indigo.scss
+++ b/src/components/slider/themes/light/slider.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.material.scss b/src/components/slider/themes/light/slider.material.scss
index a06298b7e..3271cfef8 100644
--- a/src/components/slider/themes/light/slider.material.scss
+++ b/src/components/slider/themes/light/slider.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-slider');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/slider/themes/light/slider.shared.scss b/src/components/slider/themes/light/slider.shared.scss
index 55b45a623..4a7e8438a 100644
--- a/src/components/slider/themes/light/slider.shared.scss
+++ b/src/components/slider/themes/light/slider.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-slider');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.bootstrap.scss b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
index 0f550df1c..68cc3c7bb 100644
--- a/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
+++ b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.fluent.scss b/src/components/snackbar/themes/dark/snackbar.fluent.scss
index 843e7f3a6..679ee2e59 100644
--- a/src/components/snackbar/themes/dark/snackbar.fluent.scss
+++ b/src/components/snackbar/themes/dark/snackbar.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.indigo.scss b/src/components/snackbar/themes/dark/snackbar.indigo.scss
index 4fcfd760d..5c1ebeb56 100644
--- a/src/components/snackbar/themes/dark/snackbar.indigo.scss
+++ b/src/components/snackbar/themes/dark/snackbar.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/dark/snackbar.material.scss b/src/components/snackbar/themes/dark/snackbar.material.scss
index e168b5d83..0dddc23d0 100644
--- a/src/components/snackbar/themes/dark/snackbar.material.scss
+++ b/src/components/snackbar/themes/dark/snackbar.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.bootstrap.scss b/src/components/snackbar/themes/light/snackbar.bootstrap.scss
index 24872b92e..8bade7490 100644
--- a/src/components/snackbar/themes/light/snackbar.bootstrap.scss
+++ b/src/components/snackbar/themes/light/snackbar.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.fluent.scss b/src/components/snackbar/themes/light/snackbar.fluent.scss
index 994d09f62..4d87074b4 100644
--- a/src/components/snackbar/themes/light/snackbar.fluent.scss
+++ b/src/components/snackbar/themes/light/snackbar.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.indigo.scss b/src/components/snackbar/themes/light/snackbar.indigo.scss
index 56e768b07..641839724 100644
--- a/src/components/snackbar/themes/light/snackbar.indigo.scss
+++ b/src/components/snackbar/themes/light/snackbar.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.material.scss b/src/components/snackbar/themes/light/snackbar.material.scss
index 74f2a22d9..3271cfef8 100644
--- a/src/components/snackbar/themes/light/snackbar.material.scss
+++ b/src/components/snackbar/themes/light/snackbar.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-snackbar');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/snackbar/themes/light/snackbar.shared.scss b/src/components/snackbar/themes/light/snackbar.shared.scss
index 36794d1d8..4a7e8438a 100644
--- a/src/components/snackbar/themes/light/snackbar.shared.scss
+++ b/src/components/snackbar/themes/light/snackbar.shared.scss
@@ -4,5 +4,5 @@
 $theme: $base;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-snackbar');
+    @include css-vars-from-theme($theme);
 }
diff --git a/src/components/stepper/themes/step/dark/step.bootstrap.scss b/src/components/stepper/themes/step/dark/step.bootstrap.scss
index 7f015916f..a54e5e8c2 100644
--- a/src/components/stepper/themes/step/dark/step.bootstrap.scss
+++ b/src/components/stepper/themes/step/dark/step.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/stepper/themes/step/dark/step.fluent.scss b/src/components/stepper/themes/step/dark/step.fluent.scss
index 005f1d0ae..4d87074b4 100644
--- a/src/components/stepper/themes/step/dark/step.fluent.scss
+++ b/src/components/stepper/themes/step/dark/step.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.indigo.scss b/src/components/stepper/themes/step/dark/step.indigo.scss
index 1b066bc9f..641839724 100644
--- a/src/components/stepper/themes/step/dark/step.indigo.scss
+++ b/src/components/stepper/themes/step/dark/step.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.material.scss b/src/components/stepper/themes/step/dark/step.material.scss
index 7f21149f2..3271cfef8 100644
--- a/src/components/stepper/themes/step/dark/step.material.scss
+++ b/src/components/stepper/themes/step/dark/step.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/dark/step.shared.scss b/src/components/stepper/themes/step/dark/step.shared.scss
index cf8dfcf54..96b6530e6 100644
--- a/src/components/stepper/themes/step/dark/step.shared.scss
+++ b/src/components/stepper/themes/step/dark/step.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-stepper');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/stepper/themes/step/light/step.bootstrap.scss b/src/components/stepper/themes/step/light/step.bootstrap.scss
index 960f4965b..8bade7490 100644
--- a/src/components/stepper/themes/step/light/step.bootstrap.scss
+++ b/src/components/stepper/themes/step/light/step.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.fluent.scss b/src/components/stepper/themes/step/light/step.fluent.scss
index 005f1d0ae..4d87074b4 100644
--- a/src/components/stepper/themes/step/light/step.fluent.scss
+++ b/src/components/stepper/themes/step/light/step.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.indigo.scss b/src/components/stepper/themes/step/light/step.indigo.scss
index 1b066bc9f..641839724 100644
--- a/src/components/stepper/themes/step/light/step.indigo.scss
+++ b/src/components/stepper/themes/step/light/step.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.material.scss b/src/components/stepper/themes/step/light/step.material.scss
index 7f21149f2..3271cfef8 100644
--- a/src/components/stepper/themes/step/light/step.material.scss
+++ b/src/components/stepper/themes/step/light/step.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-stepper');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/stepper/themes/step/light/step.shared.scss b/src/components/stepper/themes/step/light/step.shared.scss
index cf8dfcf54..96b6530e6 100644
--- a/src/components/stepper/themes/step/light/step.shared.scss
+++ b/src/components/stepper/themes/step/light/step.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-stepper');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tabs/themes/dark/tab.bootstrap.scss b/src/components/tabs/themes/dark/tab.bootstrap.scss
index c2b537314..8bade7490 100644
--- a/src/components/tabs/themes/dark/tab.bootstrap.scss
+++ b/src/components/tabs/themes/dark/tab.bootstrap.scss
@@ -4,7 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.fluent.scss b/src/components/tabs/themes/dark/tab.fluent.scss
index b3406000a..4d87074b4 100644
--- a/src/components/tabs/themes/dark/tab.fluent.scss
+++ b/src/components/tabs/themes/dark/tab.fluent.scss
@@ -4,7 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.indigo.scss b/src/components/tabs/themes/dark/tab.indigo.scss
index fb9dea547..641839724 100644
--- a/src/components/tabs/themes/dark/tab.indigo.scss
+++ b/src/components/tabs/themes/dark/tab.indigo.scss
@@ -4,7 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.material.scss b/src/components/tabs/themes/dark/tab.material.scss
index 82d7a599d..3271cfef8 100644
--- a/src/components/tabs/themes/dark/tab.material.scss
+++ b/src/components/tabs/themes/dark/tab.material.scss
@@ -4,7 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/dark/tab.shared.scss b/src/components/tabs/themes/dark/tab.shared.scss
index 9b4e329da..96b6530e6 100644
--- a/src/components/tabs/themes/dark/tab.shared.scss
+++ b/src/components/tabs/themes/dark/tab.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tabs');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tabs/themes/light/tab.bootstrap.scss b/src/components/tabs/themes/light/tab.bootstrap.scss
index c2b537314..8bade7490 100644
--- a/src/components/tabs/themes/light/tab.bootstrap.scss
+++ b/src/components/tabs/themes/light/tab.bootstrap.scss
@@ -4,7 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.fluent.scss b/src/components/tabs/themes/light/tab.fluent.scss
index b3406000a..4d87074b4 100644
--- a/src/components/tabs/themes/light/tab.fluent.scss
+++ b/src/components/tabs/themes/light/tab.fluent.scss
@@ -4,7 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.indigo.scss b/src/components/tabs/themes/light/tab.indigo.scss
index fb9dea547..641839724 100644
--- a/src/components/tabs/themes/light/tab.indigo.scss
+++ b/src/components/tabs/themes/light/tab.indigo.scss
@@ -4,7 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.material.scss b/src/components/tabs/themes/light/tab.material.scss
index 82d7a599d..3271cfef8 100644
--- a/src/components/tabs/themes/light/tab.material.scss
+++ b/src/components/tabs/themes/light/tab.material.scss
@@ -4,7 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tabs');
-
-    --navigation-border-color: #{var-get($theme, 'border-color')};
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tabs/themes/light/tab.shared.scss b/src/components/tabs/themes/light/tab.shared.scss
index 9b4e329da..96b6530e6 100644
--- a/src/components/tabs/themes/light/tab.shared.scss
+++ b/src/components/tabs/themes/light/tab.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tabs');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/textarea/themes/dark/textarea.bootstrap.scss b/src/components/textarea/themes/dark/textarea.bootstrap.scss
index 194e1d1ae..68cc3c7bb 100644
--- a/src/components/textarea/themes/dark/textarea.bootstrap.scss
+++ b/src/components/textarea/themes/dark/textarea.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.fluent.scss b/src/components/textarea/themes/dark/textarea.fluent.scss
index 06d66a8de..679ee2e59 100644
--- a/src/components/textarea/themes/dark/textarea.fluent.scss
+++ b/src/components/textarea/themes/dark/textarea.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.indigo.scss b/src/components/textarea/themes/dark/textarea.indigo.scss
index 9c4819eec..5c1ebeb56 100644
--- a/src/components/textarea/themes/dark/textarea.indigo.scss
+++ b/src/components/textarea/themes/dark/textarea.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/dark/textarea.material.scss b/src/components/textarea/themes/dark/textarea.material.scss
index 5f57a0ee5..0dddc23d0 100644
--- a/src/components/textarea/themes/dark/textarea.material.scss
+++ b/src/components/textarea/themes/dark/textarea.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.bootstrap.scss b/src/components/textarea/themes/light/textarea.bootstrap.scss
index 039072b89..8bade7490 100644
--- a/src/components/textarea/themes/light/textarea.bootstrap.scss
+++ b/src/components/textarea/themes/light/textarea.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.fluent.scss b/src/components/textarea/themes/light/textarea.fluent.scss
index f9848b586..4d87074b4 100644
--- a/src/components/textarea/themes/light/textarea.fluent.scss
+++ b/src/components/textarea/themes/light/textarea.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.indigo.scss b/src/components/textarea/themes/light/textarea.indigo.scss
index 0de11c3ca..641839724 100644
--- a/src/components/textarea/themes/light/textarea.indigo.scss
+++ b/src/components/textarea/themes/light/textarea.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.material.scss b/src/components/textarea/themes/light/textarea.material.scss
index 6e618de7f..3271cfef8 100644
--- a/src/components/textarea/themes/light/textarea.material.scss
+++ b/src/components/textarea/themes/light/textarea.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-textarea');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/textarea/themes/light/textarea.shared.scss b/src/components/textarea/themes/light/textarea.shared.scss
index 1bfba893a..96b6530e6 100644
--- a/src/components/textarea/themes/light/textarea.shared.scss
+++ b/src/components/textarea/themes/light/textarea.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-textarea');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss b/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
index 78f430331..8bade7490 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.fluent.scss b/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
index fb1ce6204..4d87074b4 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.indigo.scss b/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
index cf387e731..641839724 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.material.scss b/src/components/tile-manager/themes/dark/tile-manager.material.scss
index 3e6764ed7..3271cfef8 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.material.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/dark/tile-manager.shared.scss b/src/components/tile-manager/themes/dark/tile-manager.shared.scss
index 3aa756d43..96b6530e6 100644
--- a/src/components/tile-manager/themes/dark/tile-manager.shared.scss
+++ b/src/components/tile-manager/themes/dark/tile-manager.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tile-manager');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss b/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
index 78f430331..8bade7490 100644
--- a/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.fluent.scss b/src/components/tile-manager/themes/light/tile-manager.fluent.scss
index fb1ce6204..4d87074b4 100644
--- a/src/components/tile-manager/themes/light/tile-manager.fluent.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.indigo.scss b/src/components/tile-manager/themes/light/tile-manager.indigo.scss
index cf387e731..641839724 100644
--- a/src/components/tile-manager/themes/light/tile-manager.indigo.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.material.scss b/src/components/tile-manager/themes/light/tile-manager.material.scss
index 3e6764ed7..3271cfef8 100644
--- a/src/components/tile-manager/themes/light/tile-manager.material.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tile-manager');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tile-manager/themes/light/tile-manager.shared.scss b/src/components/tile-manager/themes/light/tile-manager.shared.scss
index 3aa756d43..96b6530e6 100644
--- a/src/components/tile-manager/themes/light/tile-manager.shared.scss
+++ b/src/components/tile-manager/themes/light/tile-manager.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tile-manager');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/toast/themes/dark/toast.bootstrap.scss b/src/components/toast/themes/dark/toast.bootstrap.scss
index 457b0106c..8bade7490 100644
--- a/src/components/toast/themes/dark/toast.bootstrap.scss
+++ b/src/components/toast/themes/dark/toast.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.fluent.scss b/src/components/toast/themes/dark/toast.fluent.scss
index 2c8a8febf..4d87074b4 100644
--- a/src/components/toast/themes/dark/toast.fluent.scss
+++ b/src/components/toast/themes/dark/toast.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.indigo.scss b/src/components/toast/themes/dark/toast.indigo.scss
index 7eeb73596..641839724 100644
--- a/src/components/toast/themes/dark/toast.indigo.scss
+++ b/src/components/toast/themes/dark/toast.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.material.scss b/src/components/toast/themes/dark/toast.material.scss
index 3eba5aeac..3271cfef8 100644
--- a/src/components/toast/themes/dark/toast.material.scss
+++ b/src/components/toast/themes/dark/toast.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/dark/toast.shared.scss b/src/components/toast/themes/dark/toast.shared.scss
index 7e8190f54..96b6530e6 100644
--- a/src/components/toast/themes/dark/toast.shared.scss
+++ b/src/components/toast/themes/dark/toast.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-toast');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/toast/themes/light/toast.bootstrap.scss b/src/components/toast/themes/light/toast.bootstrap.scss
index 457b0106c..8bade7490 100644
--- a/src/components/toast/themes/light/toast.bootstrap.scss
+++ b/src/components/toast/themes/light/toast.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.fluent.scss b/src/components/toast/themes/light/toast.fluent.scss
index 2c8a8febf..4d87074b4 100644
--- a/src/components/toast/themes/light/toast.fluent.scss
+++ b/src/components/toast/themes/light/toast.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.indigo.scss b/src/components/toast/themes/light/toast.indigo.scss
index 7eeb73596..641839724 100644
--- a/src/components/toast/themes/light/toast.indigo.scss
+++ b/src/components/toast/themes/light/toast.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.material.scss b/src/components/toast/themes/light/toast.material.scss
index 3eba5aeac..3271cfef8 100644
--- a/src/components/toast/themes/light/toast.material.scss
+++ b/src/components/toast/themes/light/toast.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-toast');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/toast/themes/light/toast.shared.scss b/src/components/toast/themes/light/toast.shared.scss
index 7e8190f54..96b6530e6 100644
--- a/src/components/toast/themes/light/toast.shared.scss
+++ b/src/components/toast/themes/light/toast.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-toast');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.bootstrap.scss b/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
index f7749c4a6..68cc3c7bb 100644
--- a/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
+++ b/src/components/tooltip/themes/dark/tooltip.bootstrap.scss
@@ -5,5 +5,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.fluent.scss b/src/components/tooltip/themes/dark/tooltip.fluent.scss
index 78a2bf57a..679ee2e59 100644
--- a/src/components/tooltip/themes/dark/tooltip.fluent.scss
+++ b/src/components/tooltip/themes/dark/tooltip.fluent.scss
@@ -5,5 +5,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.indigo.scss b/src/components/tooltip/themes/dark/tooltip.indigo.scss
index d373697ad..5c1ebeb56 100644
--- a/src/components/tooltip/themes/dark/tooltip.indigo.scss
+++ b/src/components/tooltip/themes/dark/tooltip.indigo.scss
@@ -5,5 +5,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/dark/tooltip.material.scss b/src/components/tooltip/themes/dark/tooltip.material.scss
index afc7fdb5a..0dddc23d0 100644
--- a/src/components/tooltip/themes/dark/tooltip.material.scss
+++ b/src/components/tooltip/themes/dark/tooltip.material.scss
@@ -5,5 +5,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff(light.$base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.bootstrap.scss b/src/components/tooltip/themes/light/tooltip.bootstrap.scss
index 174983d52..8bade7490 100644
--- a/src/components/tooltip/themes/light/tooltip.bootstrap.scss
+++ b/src/components/tooltip/themes/light/tooltip.bootstrap.scss
@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.fluent.scss b/src/components/tooltip/themes/light/tooltip.fluent.scss
index 12e11b091..4d87074b4 100644
--- a/src/components/tooltip/themes/light/tooltip.fluent.scss
+++ b/src/components/tooltip/themes/light/tooltip.fluent.scss
@@ -4,5 +4,5 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.indigo.scss b/src/components/tooltip/themes/light/tooltip.indigo.scss
index 2e70733c9..641839724 100644
--- a/src/components/tooltip/themes/light/tooltip.indigo.scss
+++ b/src/components/tooltip/themes/light/tooltip.indigo.scss
@@ -4,5 +4,5 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.material.scss b/src/components/tooltip/themes/light/tooltip.material.scss
index 24764ffe6..3271cfef8 100644
--- a/src/components/tooltip/themes/light/tooltip.material.scss
+++ b/src/components/tooltip/themes/light/tooltip.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tooltip');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tooltip/themes/light/tooltip.shared.scss b/src/components/tooltip/themes/light/tooltip.shared.scss
index c6375dd44..96b6530e6 100644
--- a/src/components/tooltip/themes/light/tooltip.shared.scss
+++ b/src/components/tooltip/themes/light/tooltip.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tooltip');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tree/themes/dark/container.bootstrap.scss b/src/components/tree/themes/dark/container.bootstrap.scss
index 15d738e61..0b06c7e38 100644
--- a/src/components/tree/themes/dark/container.bootstrap.scss
+++ b/src/components/tree/themes/dark/container.bootstrap.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $bootstrap), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $bootstrap));
 }
diff --git a/src/components/tree/themes/dark/container.fluent.scss b/src/components/tree/themes/dark/container.fluent.scss
index b29bd57d2..c733adfcb 100644
--- a/src/components/tree/themes/dark/container.fluent.scss
+++ b/src/components/tree/themes/dark/container.fluent.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $fluent), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $fluent));
 }
diff --git a/src/components/tree/themes/dark/container.indigo.scss b/src/components/tree/themes/dark/container.indigo.scss
index a1ee71922..20dcee56c 100644
--- a/src/components/tree/themes/dark/container.indigo.scss
+++ b/src/components/tree/themes/dark/container.indigo.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $indigo), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $indigo));
 }
diff --git a/src/components/tree/themes/dark/container.material.scss b/src/components/tree/themes/dark/container.material.scss
index 9faaee884..75a057bee 100644
--- a/src/components/tree/themes/dark/container.material.scss
+++ b/src/components/tree/themes/dark/container.material.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme(diff($base, $material), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $material));
 }
diff --git a/src/components/tree/themes/dark/container.shared.scss b/src/components/tree/themes/dark/container.shared.scss
index 8856d767c..96b6530e6 100644
--- a/src/components/tree/themes/dark/container.shared.scss
+++ b/src/components/tree/themes/dark/container.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tree');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/components/tree/themes/light/container.bootstrap.scss b/src/components/tree/themes/light/container.bootstrap.scss
index 882387932..a54e5e8c2 100644
--- a/src/components/tree/themes/light/container.bootstrap.scss
+++ b/src/components/tree/themes/light/container.bootstrap.scss
@@ -4,6 +4,6 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/tree/themes/light/container.fluent.scss b/src/components/tree/themes/light/container.fluent.scss
index 4fd0097ec..700019ad3 100644
--- a/src/components/tree/themes/light/container.fluent.scss
+++ b/src/components/tree/themes/light/container.fluent.scss
@@ -4,6 +4,6 @@
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
diff --git a/src/components/tree/themes/light/container.indigo.scss b/src/components/tree/themes/light/container.indigo.scss
index cb52c9369..09d6167f7 100644
--- a/src/components/tree/themes/light/container.indigo.scss
+++ b/src/components/tree/themes/light/container.indigo.scss
@@ -4,7 +4,7 @@
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
 
 
diff --git a/src/components/tree/themes/light/container.material.scss b/src/components/tree/themes/light/container.material.scss
index 192b56aa5..3271cfef8 100644
--- a/src/components/tree/themes/light/container.material.scss
+++ b/src/components/tree/themes/light/container.material.scss
@@ -4,5 +4,5 @@
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme(diff($base, $theme), 'ig-tree');
+    @include css-vars-from-theme(diff($base, $theme));
 }
diff --git a/src/components/tree/themes/light/container.shared.scss b/src/components/tree/themes/light/container.shared.scss
index 8856d767c..96b6530e6 100644
--- a/src/components/tree/themes/light/container.shared.scss
+++ b/src/components/tree/themes/light/container.shared.scss
@@ -2,5 +2,5 @@
 @use 'themes' as *;
 
 :host {
-    @include css-vars-from-theme($base, 'ig-tree');
+    @include css-vars-from-theme($base);
 }
diff --git a/src/styles/utilities/_overwrites.scss b/src/styles/utilities/_overwrites.scss
index 6ca61414f..f06b9f30a 100644
--- a/src/styles/utilities/_overwrites.scss
+++ b/src/styles/utilities/_overwrites.scss
@@ -1,4 +1,8 @@
 @use 'igniteui-theming/sass/color/functions' as theming;
+@use 'igniteui-theming/sass/themes/config' as themes;
+
+// Configure the variable prefix for CSS variables
+@include themes.configure-variable-prefix('ig');
 
 @function color(
     $color: primary,