diff --git a/packages/styles/src/horizontal-navigation.scss b/packages/styles/src/horizontal-navigation.scss
index 42df1b379c..6f9a59b842 100644
--- a/packages/styles/src/horizontal-navigation.scss
+++ b/packages/styles/src/horizontal-navigation.scss
@@ -1,6 +1,7 @@
+@import './new-settings';
 @import './mixins';
 
-$block: fd-horizontal-navigation;
+$block: #{$fd-namespace}-horizontal-navigation;
 
 .#{$block} {
   @include fd-reset();
diff --git a/packages/styles/src/icon-tab-bar.scss b/packages/styles/src/icon-tab-bar.scss
index 95bc56ef4c..9d7029d3de 100644
--- a/packages/styles/src/icon-tab-bar.scss
+++ b/packages/styles/src/icon-tab-bar.scss
@@ -1,6 +1,7 @@
+@import './new-settings';
 @import './mixins';
 
-$block: fd-icon-tab-bar;
+$block: #{$fd-namespace}-icon-tab-bar;
 $fd-icon-tab-bar-icon-spacing: 0.188rem !default;
 $fd-icon-tab-bar-list-padding-right: 1rem !default;
 $fd-icon-tab-bar-icon-circle-size: 2.75rem !default;
diff --git a/packages/styles/src/illustrated-message.scss b/packages/styles/src/illustrated-message.scss
index 6d0ca9a0b1..95dae86241 100644
--- a/packages/styles/src/illustrated-message.scss
+++ b/packages/styles/src/illustrated-message.scss
@@ -1,6 +1,7 @@
+@import './new-settings';
 @import 'mixins/mixins';
 
-$block: fd-illustrated-message;
+$block: #{$fd-namespace}-illustrated-message;
 
 .#{$block} {
   --illustrationW: 20rem;
diff --git a/packages/styles/src/scrollbar.scss b/packages/styles/src/scrollbar.scss
index 0e0db28588..4d62c476e5 100644
--- a/packages/styles/src/scrollbar.scss
+++ b/packages/styles/src/scrollbar.scss
@@ -1,6 +1,7 @@
+@import './new-settings';
 @import "mixins/mixins";
 
-$block: fd-scrollbar;
+$block: #{$fd-namespace}-scrollbar;
 
 .#{$block} {
   @include fd-reset();
diff --git a/packages/styles/src/splitter.scss b/packages/styles/src/splitter.scss
index 7d07b7f946..5a9c55a681 100644
--- a/packages/styles/src/splitter.scss
+++ b/packages/styles/src/splitter.scss
@@ -1,6 +1,7 @@
+@import './new-settings';
 @import "mixins/mixins";
 
-$block: fd-splitter;
+$block: #{$fd-namespace}-splitter;
 
 @mixin fd-splitter-gradient($deg) {
   background: linear-gradient($deg, transparent, var(--fdSplitter_Resizer_Decoration_Background));
diff --git a/packages/styles/src/theming/common/progress-indicator/sap_fiori.scss b/packages/styles/src/theming/common/progress-indicator/_sap_fiori.scss
similarity index 100%
rename from packages/styles/src/theming/common/progress-indicator/sap_fiori.scss
rename to packages/styles/src/theming/common/progress-indicator/_sap_fiori.scss
diff --git a/packages/styles/src/theming/common/progress-indicator/sap_fiori_hc.scss b/packages/styles/src/theming/common/progress-indicator/_sap_fiori_hc.scss
similarity index 100%
rename from packages/styles/src/theming/common/progress-indicator/sap_fiori_hc.scss
rename to packages/styles/src/theming/common/progress-indicator/_sap_fiori_hc.scss
diff --git a/packages/styles/src/theming/common/progress-indicator/sap_horizon.scss b/packages/styles/src/theming/common/progress-indicator/_sap_horizon.scss
similarity index 100%
rename from packages/styles/src/theming/common/progress-indicator/sap_horizon.scss
rename to packages/styles/src/theming/common/progress-indicator/_sap_horizon.scss
diff --git a/packages/workspace-plugins/src/executors/build/executor.ts b/packages/workspace-plugins/src/executors/build/executor.ts
index 3b27a13ea8..90620e5e8d 100644
--- a/packages/workspace-plugins/src/executors/build/executor.ts
+++ b/packages/workspace-plugins/src/executors/build/executor.ts
@@ -5,6 +5,8 @@ import { ExecutorContext } from '@nrwl/devkit';
 import { copyFileSync, existsSync, readFileSync, rmSync, writeFileSync } from 'fs';
 import glob from 'glob';
 import { processWithPostCss } from '../shared/postcss';
+import { mkdirpSync } from 'fs-extra';
+import { parse } from 'path';
 
 const packageJson = JSON.parse(readFileSync('package.json', 'utf-8'));
 const versions = {
@@ -15,11 +17,12 @@ const versions = {
 export default async function runExecutor(options: BuildExecutorSchema, context: ExecutorContext) {
     const projectName = <string>context.projectName;
     if (existsSync(options.outputPath)) {
-        rmSync(options.outputPath, {recursive: true});
+        rmSync(options.outputPath, { recursive: true });
     }
     const compilationOutputPath = `${options.outputPath}/dist`;
+
     const projectJson = context.projectGraph?.nodes[projectName].data;
-    execSync(`npx sass -q --no-source-map --style expanded ${options.source}:${compilationOutputPath}`, {stdio: 'inherit'});
+    execSync(`npx sass -q --no-source-map --style expanded ${options.source}:${compilationOutputPath}`, { stdio: 'inherit' });
     const assetsCopyResult = await copyAssets({
         assets: options.assets || [],
         outputPath: options.outputPath,
@@ -28,15 +31,8 @@ export default async function runExecutor(options: BuildExecutorSchema, context:
     if (!assetsCopyResult.success) {
         return assetsCopyResult;
     }
-    let projectPackageJsonContent = readFileSync(`${projectJson.root}/package.json`, 'utf-8');
-    Object.entries(versions).forEach(([key, value]) => {
-        projectPackageJsonContent = projectPackageJsonContent.replace(new RegExp(key, 'g'), value);
-    });
-    writeFileSync(`${options.outputPath}/package.json`, projectPackageJsonContent);
-    const projectPackageJson = JSON.parse(projectPackageJsonContent);
-    copyFileSync(`./LICENSES/${projectPackageJson.license}.txt`, `${options.outputPath}/LICENSE`);
 
-    const outputFiles = glob.sync(`${compilationOutputPath}/**/*.css`, {nodir: true});
+    const outputFiles = glob.sync(`${compilationOutputPath}/**/*.css`, { nodir: true });
 
     for (const file of outputFiles) {
         const commit = await processWithPostCss({
@@ -48,6 +44,40 @@ export default async function runExecutor(options: BuildExecutorSchema, context:
         commit();
     }
 
+    let projectPackageJsonContent = readFileSync(`${projectJson.root}/package.json`, 'utf-8');
+    const projectPackageJson = JSON.parse(projectPackageJsonContent);
+
+    projectPackageJson['exports'] = projectPackageJson['exports'] || {};
+
+    const files = glob.sync(`${compilationOutputPath}/**/*.css`);
+
+    for (const file of files) {
+        const content = readFileSync(file, 'utf-8');
+        const filePath = file.replace(new RegExp(`^${compilationOutputPath}(.*).css$`), `${compilationOutputPath}/js$1.mjs`);
+        const typesPath = file.replace(new RegExp(`^${compilationOutputPath}(.*).css$`), `${compilationOutputPath}/js$1.d.ts`);
+        const exportsPath = file.replace(new RegExp(`^${compilationOutputPath}(.*).css$`), `./dist/js$1`);
+        const defaultExport = file.replace(new RegExp(`^${compilationOutputPath}(.*).css$`), `./dist/js$1.mjs`);
+        projectPackageJson['exports'][exportsPath] = {
+          types: file.replace(new RegExp(`^${compilationOutputPath}(.*).css$`), `./dist/js$1.d.ts`),
+          esm2020: defaultExport,
+          default: defaultExport
+        }
+        mkdirpSync(parse(filePath).dir);
+        writeFileSync(filePath, `export default { cssSource: \`${content}\` };`);
+        writeFileSync(typesPath, `declare const _default: { cssSource: string }; export default _default;`);
+    }
+
+    projectPackageJsonContent = JSON.stringify(projectPackageJson, null, 4);
+
+    console.log(projectPackageJsonContent);
+
+    Object.entries(versions).forEach(([key, value]) => {
+        projectPackageJsonContent = projectPackageJsonContent.replace(new RegExp(key, 'g'), value);
+    });
+    writeFileSync(`${options.outputPath}/package.json`, projectPackageJsonContent);
+
+    copyFileSync(`./LICENSES/${projectPackageJson.license}.txt`, `${options.outputPath}/LICENSE`);
+
     return {
         success: true
     };