From 5492d82ac8a581b9659d3374812bc15735e43684 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Thu, 25 Jul 2024 23:55:38 +0300
Subject: [PATCH 1/6] refactor(scrollbar): Update the styles to consume colors
 from schemas

- Use scrollbar pseudo selector to allow more customization
- Add fallback for firefox
---
 CHANGELOG.md                            | 23 ++++++++++
 src/styles/common/component.scss        | 10 ++---
 src/styles/themes/base/_bootstrap.scss  |  5 ---
 src/styles/themes/base/_fluent.scss     |  5 ---
 src/styles/themes/base/_indigo.scss     |  5 ---
 src/styles/themes/base/_material.scss   |  5 ---
 src/styles/themes/base/_scrollbars.scss | 58 +++++++++++++++++++------
 src/styles/themes/dark/bootstrap.scss   |  4 +-
 src/styles/themes/dark/fluent.scss      |  4 +-
 src/styles/themes/dark/indigo.scss      |  4 +-
 src/styles/themes/dark/material.scss    |  4 +-
 src/styles/themes/light/bootstrap.scss  |  4 +-
 src/styles/themes/light/fluent.scss     |  4 +-
 src/styles/themes/light/indigo.scss     |  4 +-
 src/styles/themes/light/material.scss   |  4 +-
 src/styles/utilities/_index.scss        |  1 -
 src/styles/utilities/_mixins.scss       | 16 -------
 17 files changed, 95 insertions(+), 65 deletions(-)
 delete mode 100644 src/styles/utilities/_mixins.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 049bb011f..1db799ae1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+### Added
+#### Scrollbar: New customizable css variables
+
+We have introduced new CSS variables to allow for more customizable scrollbar styling. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).
+
+###### List of Available CSS Variables for `-webkit-` browsers:
+- `--sb-size`: Adjusts the scrollbar size (width and height).
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+- `--sb-track-bg-color-hover`: Sets the background color of the scrollbar track on hover.
+- `--sb-thumb-min-height`: Sets the minimum height of the scrollbar thumb.
+- `--sb-thumb-border-radius`: Sets the border radius of the scrollbar thumb.
+- `--sb-thumb-border-size`: Sets the border size of the scrollbar thumb.
+- `--sb-thumb-border-color`: Sets the border color of the scrollbar thumb.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-thumb-bg-color-hover`: Sets the background color of the scrollbar thumb on hover.
+
+For Firefox users, we provide limited scrollbar styling options through the following CSS variables:
+
+- `--sb-size`: Adjusts the scrollbar size.
+- `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
+- `--sb-track-bg-color`: Sets the background color of the scrollbar track.
+
+
 ### Changed
 - **BREAKING**: Checkbox, Switch `igcChange` event.
 
diff --git a/src/styles/common/component.scss b/src/styles/common/component.scss
index cbf6f97e8..ceda21eb9 100644
--- a/src/styles/common/component.scss
+++ b/src/styles/common/component.scss
@@ -1,7 +1,7 @@
-@use '../utilities/mixins' as *;
 @use 'igniteui-theming/sass/themes/mixins' as *;
 @use 'igniteui-theming/sass/color/functions' as *;
 @use 'igniteui-theming/sass/typography/functions' as *;
+@use 'styles/themes/base/scrollbars' as *;
 
 :host {
     @include sizable();
@@ -9,17 +9,13 @@
     position: relative;
     box-sizing: border-box;
 
-    @include ig-scrollbar(
-        var(--ig-scrollbar-size),
-        var(--ig-scrollbar-track-background),
-        var(--ig-scrollbar-thumb-background)
-    );
-
     *,
     *::before,
     *::after {
         box-sizing: border-box;
     }
+
+    @include ig-scrollbar();
 }
 
 :host([hidden]),
diff --git a/src/styles/themes/base/_bootstrap.scss b/src/styles/themes/base/_bootstrap.scss
index c79a24dae..0bc8eabe6 100644
--- a/src/styles/themes/base/_bootstrap.scss
+++ b/src/styles/themes/base/_bootstrap.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_fluent.scss b/src/styles/themes/base/_fluent.scss
index 7e218b494..f05262fa3 100644
--- a/src/styles/themes/base/_fluent.scss
+++ b/src/styles/themes/base/_fluent.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_indigo.scss b/src/styles/themes/base/_indigo.scss
index 8f0739551..cbed0899b 100644
--- a/src/styles/themes/base/_indigo.scss
+++ b/src/styles/themes/base/_indigo.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 200)};
-    }
-
     @include theme($palette, $indigo-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_material.scss b/src/styles/themes/base/_material.scss
index 7d85ba8c2..6bee4b59c 100644
--- a/src/styles/themes/base/_material.scss
+++ b/src/styles/themes/base/_material.scss
@@ -4,10 +4,5 @@
 @use 'igniteui-theming/sass/elevations/presets' as *;
 
 @mixin root-styles($palette, $variant) {
-    :root {
-        --ig-scrollbar-thumb-background: #{color($color: gray, $variant: 400)};
-        --ig-scrollbar-track-background: #{color($color: gray, $variant: 100)};
-    }
-
     @include theme($palette, $material-elevations, $typeface, $type-scale, $variant);
 }
diff --git a/src/styles/themes/base/_scrollbars.scss b/src/styles/themes/base/_scrollbars.scss
index da30b1a2d..588b7d7d1 100644
--- a/src/styles/themes/base/_scrollbars.scss
+++ b/src/styles/themes/base/_scrollbars.scss
@@ -1,22 +1,54 @@
 @use 'igniteui-theming' as *;
 
-.ig-scrollbar {
-    --size: var(--ig-scrollbar-size, #{rem(16px)});
-    --thumb-background: var(--ig-scrollbar-thumb-background, #{color($color: gray, $variant: 400)});
-    --track-background: var(--ig-scrollbar-track-background, #{color($color: gray, $variant: 100)});
+@mixin ig-scrollbar-vars($schema) {
+    $theme: digest-schema($schema);
 
-    scrollbar-width: var(--size);
-    scrollbar-color: var(--thumb-background) var(--track-background);
+    .ig-scrollbar {
+        @include css-vars-from-theme($theme, 'ig-scrollbar');
+    }
 }
 
-.ig-scrollbar ::-webkit-scrollbar {
-    width: var(--size);
-    height: var(--size);
-    background: var(--track-background);
-}
+@mixin ig-scrollbar() {
+    // The @-moz-document rule is specifically for Firefox because it does not support the WebKit pseudo-selectors for scrollbar styling.
+    /* stylelint-disable-next-line at-rule-no-vendor-prefix */
+    @-moz-document url-prefix() {
+        scrollbar-width: var(--sb-size, initial);
+        scrollbar-color: var(--sb-thumb-bg-color, initial) var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar {
+        width: var(--sb-size, initial);
+        height: var(--sb-size, initial);
+    }
+
+    ::-webkit-scrollbar-track {
+        background: var(--sb-track-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-track:hover,
+    ::-webkit-scrollbar-track:active {
+        background: var(--sb-track-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        min-height: var(--sb-thumb-min-height, initial);
+        border-radius: var(--sb-thumb-border-radius, initial);
+        border: var(--sb-thumb-border-size, initial) solid var(--sb-thumb-border-color, initial);
+        background-color: var(--sb-thumb-bg-color, initial);
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--sb-thumb-bg-color-hover, initial);
+    }
+
+    ::-webkit-scrollbar-corner {
+        background: var(--sb-corner-bg, initial);
+        border: var(--sb-corner-border-sizem, initial) solid var(--sb-corner-border-color, initial);
+    }
 
-.ig-scrollbar ::-webkit-scrollbar-thumb {
-    background: var(--thumb-background);
+    ::-webkit-scrollbar-track-piece {
+        border: var(--sb-track-border-size, initial) solid var(--sb-track-border-color, initial);
+    }
 }
 
 @media (hover: none) {
diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss
index 1c7b98549..794150c73 100644
--- a/src/styles/themes/dark/bootstrap.scss
+++ b/src/styles/themes/dark/bootstrap.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/bootstrap.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-bootstrap-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss
index 144e1e71a..67530941c 100644
--- a/src/styles/themes/dark/fluent.scss
+++ b/src/styles/themes/dark/fluent.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/fluent.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-fluent-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss
index 8f8c55e2d..f472976cd 100644
--- a/src/styles/themes/dark/indigo.scss
+++ b/src/styles/themes/dark/indigo.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/indigo.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-indigo-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss
index d7fa90a42..06032996d 100644
--- a/src/styles/themes/dark/material.scss
+++ b/src/styles/themes/dark/material.scss
@@ -1,5 +1,7 @@
 @use 'igniteui-theming/sass/color/presets/dark/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
 @use '../third-party/grid/material.dark' as grid;
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($dark-material-scrollbar);
 @include base.root-styles($palette, 'dark');
diff --git a/src/styles/themes/light/bootstrap.scss b/src/styles/themes/light/bootstrap.scss
index 972665654..3a61a0845 100644
--- a/src/styles/themes/light/bootstrap.scss
+++ b/src/styles/themes/light/bootstrap.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/bootstrap' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/bootstrap' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($bootstrap-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/fluent.scss b/src/styles/themes/light/fluent.scss
index 810b469b0..db445920d 100644
--- a/src/styles/themes/light/fluent.scss
+++ b/src/styles/themes/light/fluent.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/fluent' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/fluent' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($fluent-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/indigo.scss b/src/styles/themes/light/indigo.scss
index a1e4bf3e1..c76350920 100644
--- a/src/styles/themes/light/indigo.scss
+++ b/src/styles/themes/light/indigo.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/indigo' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/indigo' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($indigo-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/themes/light/material.scss b/src/styles/themes/light/material.scss
index 18f3d0bcb..c7c2bbb96 100644
--- a/src/styles/themes/light/material.scss
+++ b/src/styles/themes/light/material.scss
@@ -1,4 +1,6 @@
 @use 'igniteui-theming/sass/color/presets/light/material' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/scrollbar' as *;
 @use '../base/material' as base;
-@use '../base/scrollbars';
+@use '../base/scrollbars' as *;
+@include ig-scrollbar-vars($material-scrollbar);
 @include base.root-styles($palette, 'light');
diff --git a/src/styles/utilities/_index.scss b/src/styles/utilities/_index.scss
index 504efea42..83f83bcf2 100644
--- a/src/styles/utilities/_index.scss
+++ b/src/styles/utilities/_index.scss
@@ -1,4 +1,3 @@
-@forward 'mixins';
 @forward 'functions';
 @forward 'igniteui-theming' hide color, contrast-color;
 @forward 'overwrites';
diff --git a/src/styles/utilities/_mixins.scss b/src/styles/utilities/_mixins.scss
deleted file mode 100644
index 7b26446e5..000000000
--- a/src/styles/utilities/_mixins.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@mixin ig-scrollbar($track-size, $track-bg, $thumb-bg) {
-    // Firefox only
-    scrollbar-width: $track-size;
-    scrollbar-color: $thumb-bg $track-bg;
-
-    // Chromium only
-    ::-webkit-scrollbar {
-        width: $track-size;
-        height: $track-size;
-        background: $track-bg;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        background: $thumb-bg;
-    }
-}

From a4644bf3f0eda52d6c9f6cafe2fb8c1a5ba11a8b Mon Sep 17 00:00:00 2001
From: Marin Popov <desig9stein@users.noreply.github.com>
Date: Wed, 31 Jul 2024 16:23:20 +0300
Subject: [PATCH 2/6] Update CHANGELOG.md

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1db799ae1..e513ac414 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 
 ### Added
-#### Scrollbar: New customizable css variables
+#### Scrollbar: New customizable CSS variables
 
 We have introduced new CSS variables to allow for more customizable scrollbar styling. This enhancement utilizes the available WebKit pseudo-selectors such as `::-webkit-scrollbar-track`. However, please note that these pseudo-selectors are prefixed with `-webkit-` and are only supported in WebKit-based browsers (e.g., Chrome, Safari).
 

From b4162bb5551e7236f7f31ccd4f3a1593fe462bdf Mon Sep 17 00:00:00 2001
From: Marin Popov <desig9stein@users.noreply.github.com>
Date: Wed, 31 Jul 2024 16:23:25 +0300
Subject: [PATCH 3/6] Update CHANGELOG.md

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>
---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e513ac414..16b0f7412 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,7 +29,6 @@ For Firefox users, we provide limited scrollbar styling options through the foll
 - `--sb-thumb-bg-color`: Sets the background color of the scrollbar thumb.
 - `--sb-track-bg-color`: Sets the background color of the scrollbar track.
 
-
 ### Changed
 - **BREAKING**: Checkbox, Switch `igcChange` event.
 

From b11651cff0af172892cf5797e71b8e59b5834d07 Mon Sep 17 00:00:00 2001
From: Simeon Simeonoff <sim.simeonoff@gmail.com>
Date: Fri, 30 Aug 2024 17:13:11 +0300
Subject: [PATCH 4/6] deps(theming): bump to version 12.0.0

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4819d6a53..5ef7ddbfb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "globby": "^14.0.2",
         "husky": "^9.1.4",
         "ig-typedoc-theme": "^5.0.4",
-        "igniteui-theming": "^10.0.0",
+        "igniteui-theming": "^12.0.0",
         "keep-a-changelog": "^2.5.3",
         "lint-staged": "^15.2.7",
         "lit-analyzer": "^2.0.3",
@@ -9372,9 +9372,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz",
-      "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==",
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-12.0.0.tgz",
+      "integrity": "sha512-blSZS1nkgLCoZwyydVXPA5zuvTCto3hIFuBaCAPafxc+3at94DO1YoWnp8l0D/khMVnXdzg+Cps0XQnwE2ThpQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
diff --git a/package.json b/package.json
index 8c01789ca..4e0beb5cf 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.4",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^10.0.0",
+    "igniteui-theming": "^12.0.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.7",
     "lit-analyzer": "^2.0.3",

From 62a17a7816f0360d3feb4c4da47043672bdb0f91 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Mon, 2 Sep 2024 14:21:59 +0300
Subject: [PATCH 5/6] build: Component styles and themes

---
 .storybook/preview.ts    | 29 +++++-------
 scripts/build-styles.mjs | 66 +--------------------------
 scripts/build.mjs        |  7 ++-
 scripts/sass.mjs         | 96 +++++++++++++++++++++++++++++++++++++++-
 4 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 56ca0421e..623ff659c 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 
-import { html } from 'lit';
+import { type CSSResult, html } from 'lit';
 import { configureTheme } from '../src/theming/config';
 import type { Decorator } from '@storybook/web-components';
 import { withActions } from '@storybook/addon-actions/decorator';
@@ -11,21 +11,24 @@ configureActions({
   limit: 5,
 });
 
-type ThemeImport = { default: string };
+type ThemeImport = { styles: CSSResult };
 
-const themes = import.meta.glob<ThemeImport>('../src/styles/themes/**/*.scss', {
-  query: '?inline',
-});
+const themes = import.meta.glob<ThemeImport>(
+  '../src/styles/themes/**/*.css.ts',
+  {
+    query: '?inline',
+  }
+);
 
 const getTheme = async ({ theme, variant }) => {
-  const matcher = `../src/styles/themes/${variant}/${theme}.scss`;
+  const matcher = `../src/styles/themes/${variant}/${theme}.css.ts`;
 
   const [_, resolver] = Object.entries(themes).find(([path]) => {
     return path.match(matcher);
   })!;
 
   const stylesheet = await resolver();
-  return stylesheet.default;
+  return stylesheet.styles.toString();
 };
 
 const getSize = (size: 'small' | 'medium' | 'large' | 'default') => {
@@ -81,22 +84,10 @@ export const globalTypes = {
   },
 };
 
-const parser = new DOMParser();
-
 export const parameters = {
   backgrounds: {
     disable: true,
   },
-  docs: {
-    source: {
-      // Strip theme styles and wrapping container from the code preview
-      transform: (code: string) =>
-        parser.parseFromString(code, 'text/html').querySelector('#igc-story')
-          ?.innerHTML,
-      format: 'html',
-      language: 'html',
-    },
-  },
 };
 
 export const loaders = [
diff --git a/scripts/build-styles.mjs b/scripts/build-styles.mjs
index 09ac21954..b1af8cf39 100644
--- a/scripts/build-styles.mjs
+++ b/scripts/build-styles.mjs
@@ -1,65 +1,3 @@
-import { mkdirSync as makeDir } from 'node:fs';
-import { writeFile } from 'node:fs/promises';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { globby } from 'globby';
-import * as sass from 'sass-embedded';
-import report from './report.mjs';
-import { compileSass, fromTemplate } from './sass.mjs';
+import { buildComponents, buildThemes } from './sass.mjs';
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
-
-export async function buildThemes() {
-  const compiler = await sass.initAsyncCompiler();
-  const paths = await globby('src/styles/themes/{light,dark}/*.scss');
-
-  for (const sassFile of paths) {
-    const css = await compileSass(sassFile, compiler);
-
-    const outputFile = DEST_DIR(
-      sassFile.replace(/\.scss$/, '.css').replace('src/styles/', '')
-    );
-    makeDir(path.dirname(outputFile), { recursive: true });
-    await writeFile(outputFile, css, 'utf-8');
-  }
-
-  await compiler.dispose();
-}
-
-(async () => {
-  const compiler = await sass.initAsyncCompiler();
-  const start = performance.now();
-
-  const paths = await globby([
-    'src/components/**/*.base.scss',
-    'src/components/**/*.common.scss',
-    'src/components/**/*.shared.scss',
-    'src/components/**/*.material.scss',
-    'src/components/**/*.bootstrap.scss',
-    'src/components/**/*.indigo.scss',
-    'src/components/**/*.fluent.scss',
-  ]);
-
-  try {
-    await Promise.all(
-      paths.map(async (path) => {
-        writeFile(
-          path.replace(/\.scss$/, '.css.ts'),
-          fromTemplate(await compileSass(path, compiler)),
-          'utf8'
-        );
-      })
-    );
-  } catch (err) {
-    await compiler.dispose();
-    report.error(err);
-    process.exit(1);
-  }
-
-  await compiler.dispose();
-
-  report.success(
-    `Styles generated in ${((performance.now() - start) / 1000).toFixed(2)}s`
-  );
-})();
+await Promise.all([buildThemes(), buildComponents()]);
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 0fc99f2c2..cd93d29a9 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -9,8 +9,8 @@ import {
   getVsCodeHtmlCustomData,
 } from 'custom-element-vs-code-integration';
 import customElements from '../custom-elements.json' assert { type: 'json' };
-import { buildThemes } from './build-styles.mjs';
 import report from './report.mjs';
+import { buildComponents, buildThemes } from './sass.mjs';
 
 const exec = promisify(_exec);
 
@@ -39,7 +39,8 @@ async function runTask(tag, cmd) {
 
 (async () => {
   await runTask('Clean up', () => exec('npm run clean'));
-  await runTask('Styles', () => exec('npm run build:styles'));
+  await runTask('Component styles', () => buildComponents(true));
+  await runTask('Themes', () => buildThemes(true));
 
   // https://github.com/microsoft/TypeScript/issues/14619
   await runTask('Components', () =>
@@ -48,8 +49,6 @@ async function runTask(tag, cmd) {
     )
   );
 
-  await runTask('Themes', buildThemes);
-
   await runTask('Copying release files', () =>
     Promise.all([
       copyFile('scripts/_package.json', DEST_DIR('package.json')),
diff --git a/scripts/sass.mjs b/scripts/sass.mjs
index dabacf9de..7632c0e5b 100644
--- a/scripts/sass.mjs
+++ b/scripts/sass.mjs
@@ -1,7 +1,17 @@
-import { readFile } from 'node:fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
 import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import autoprefixer from 'autoprefixer';
+import { globby } from 'globby';
 import postcss from 'postcss';
+import * as sass from 'sass-embedded';
+import report from './report.mjs';
+
+const toDist = path.join.bind(
+  null,
+  path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../dist')
+);
 
 const stripComments = () => {
   return {
@@ -32,3 +42,87 @@ export async function compileSass(src, compiler) {
   const out = _postProcessor.process(compiled.css).css;
   return out.charCodeAt(0) === 0xfeff ? out.slice(1) : out;
 }
+
+export async function buildThemes(isProduction = false) {
+  const start = performance.now();
+
+  const [compiler, paths] = await Promise.all([
+    sass.initAsyncCompiler(),
+    globby('src/styles/themes/{light,dark}/*.scss'),
+  ]);
+
+  try {
+    await Promise.all(
+      paths.map(async (sassFile) => {
+        const outputFile = isProduction
+          ? toDist(
+              sassFile.replace(/\.scss$/, '.css').replace('src/styles/', '')
+            )
+          : sassFile.replace(/\.scss$/, '.css.ts');
+
+        if (isProduction) {
+          await mkdir(path.dirname(outputFile), { recursive: true });
+          writeFile(outputFile, await compileSass(sassFile, compiler), 'utf-8');
+        } else {
+          writeFile(
+            outputFile,
+            fromTemplate(await compileSass(sassFile, compiler)),
+            'utf-8'
+          );
+        }
+      })
+    );
+  } catch (err) {
+    await compiler.dispose();
+    report.error(err);
+    process.exit(1);
+  }
+
+  await compiler.dispose();
+
+  if (!isProduction) {
+    report.success(
+      `Themes generated in ${((performance.now() - start) / 1000).toFixed(2)}s`
+    );
+  }
+}
+
+export async function buildComponents(isProduction = false) {
+  const start = performance.now();
+  const [compiler, paths] = await Promise.all([
+    sass.initAsyncCompiler(),
+    globby([
+      'src/components/**/*.base.scss',
+      'src/components/**/*.common.scss',
+      'src/components/**/*.shared.scss',
+      'src/components/**/*.material.scss',
+      'src/components/**/*.bootstrap.scss',
+      'src/components/**/*.indigo.scss',
+      'src/components/**/*.fluent.scss',
+    ]),
+  ]);
+
+  try {
+    await Promise.all(
+      paths.map(async (path) =>
+        writeFile(
+          path.replace(/\.scss$/, '.css.ts'),
+          fromTemplate(await compileSass(path, compiler)),
+          'utf-8'
+        )
+      )
+    );
+  } catch (err) {
+    await compiler.dispose();
+    report.error(err);
+    process.exit(1);
+  }
+
+  await compiler.dispose();
+
+  if (!isProduction) {
+    report.success(
+      `Component styles generated in ${((performance.now() - start) / 1000).toFixed(2)}s`
+    );
+  }
+}

From 1d00a23cd563b4b5ee4cef1dd63ac414f96af956 Mon Sep 17 00:00:00 2001
From: Radoslav Karaivanov <rkaraivanov@infragistics.com>
Date: Tue, 10 Sep 2024 17:33:53 +0300
Subject: [PATCH 6/6] refactor: Eager load for themes

---
 .storybook/preview.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 623ff659c..37517c17a 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -16,19 +16,19 @@ type ThemeImport = { styles: CSSResult };
 const themes = import.meta.glob<ThemeImport>(
   '../src/styles/themes/**/*.css.ts',
   {
-    query: '?inline',
+    eager: true,
+    import: 'styles',
   }
 );
 
-const getTheme = async ({ theme, variant }) => {
+const getTheme = ({ theme, variant }) => {
   const matcher = `../src/styles/themes/${variant}/${theme}.css.ts`;
 
-  const [_, resolver] = Object.entries(themes).find(([path]) => {
-    return path.match(matcher);
-  })!;
-
-  const stylesheet = await resolver();
-  return stylesheet.styles.toString();
+  for (const [path, styles] of Object.entries(themes)) {
+    if (path === matcher) {
+      return styles;
+    }
+  }
 };
 
 const getSize = (size: 'small' | 'medium' | 'large' | 'default') => {