refactor(scrollbar): Update the styles to consume colors from schemas #1331

.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 = [

CHANGELOG.md

@@ -18,6 +18,28 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
     - You can now register and replace icons by reference via the `setIconRef` function. To learn more check out the [documentation](https://www.infragistics.com/webcomponentssite/components/layouts/icon#icon-references).
     - All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
 
+### 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**: Removed `igcFocus` and `igcBlur` events from buttons and inputs - Button, Icon Button, Checkbox, Switch, Combo, Date Time Input, Input, Mask Input, Radios, Select, Textarea.
 

package.json

@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.5",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^11.0.0",
+    "igniteui-theming": "^12.0.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",

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()]);

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')),

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`
+    );
+  }
+}

src/styles/common/component.scss

@@ -1,25 +1,21 @@
-@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();
 
     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]),

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);
 }

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);
 }

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);
 }

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);
 }