igniteui-theming 25.1.0 → 25.2.0

package/package.json

@@ -1,39 +1,37 @@
 {
   "name": "igniteui-theming",
-  "version": "25.1.0",
+  "version": "25.2.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "bin": {
     "igniteui-theming-mcp": "./dist/mcp/index.js"
   },
   "scripts": {
-    "clean": "npm run clean:json && npm run clean:mcp && npm run clean:docs",
-    "clean:json": "shx rm -rf json",
-    "clean:docs": "shx rm -rf docs",
-    "clean:tailwind": "shx rm -rf tailwind",
-    "clean:mcp": "shx rm -rf dist/mcp",
-    "build": "npm run clean && npm run build:tailwind && npm run build:e2e && npm run build:mcp",
+    "build": "npm run clean && npm run build:tailwind && npm run build:json && npm run build:mcp && npm run build:e2e",
+    "build:json": "node .scripts/buildJSON.mjs && node .scripts/buildComponentDocs.mjs && node .scripts/buildBarrel.mjs",
+    "build:tailwind": "npm run clean:tailwind && node .scripts/buildTailwind.mjs",
+    "build:mcp": "npm run build --prefix ../mcp && shx cp -r ../mcp/dist ./dist/mcp",
     "build:docs": "npm run clean:docs && npm run build:docs:en:production",
     "build:docs:en:production": "set NODE_ENV=production && npx sassdoc ./sass -d docs",
     "build:docs:en:staging": "set NODE_ENV=staging && npx sassdoc ./sass -d docs",
-    "build:e2e": "sass --quiet ./test/e2e/theme.scss ./test/e2e/theme.css",
-    "build:json": "node scripts/buildJSON.mjs && node scripts/buildComponentDocs.mjs",
-    "build:tailwind": "npm run clean:tailwind && node scripts/buildTailwind.mjs",
-    "build:mcp": "npm run build:json && vite build",
-    "serve:docs": "npx http-server ./docs",
-    "preview:palette": "node scripts/previewPalette.mjs",
-    "lint": "npm run lint:biome && npm run lint:styles && npm run lint:prettier && npm run lint:sassdoc",
-    "lint:biome": "biome check",
+    "build:e2e": "sass --quiet ./tests/e2e/theme.scss ./tests/e2e/theme.css",
+    "clean": "npm run clean:json && npm run clean:tailwind && npm run clean:mcp && npm run clean:docs",
+    "clean:json": "shx rm -rf dist/json",
+    "clean:tailwind": "shx rm -rf dist/tailwind",
+    "clean:mcp": "shx rm -rf dist/mcp",
+    "clean:docs": "shx rm -rf docs",
+    "preview:palette": "node .scripts/previewPalette.mjs",
+    "serve:docs": "npx serve ./docs",
+    "lint": "npm run lint:styles && npm run lint:prettier && npm run lint:sassdoc",
     "lint:styles": "stylelint ./sass/**/*.scss --fix",
     "lint:prettier": "prettier \"./sass/**/*.scss\" --check --ignore-path .gitignore",
     "lint:sassdoc": "ast-grep scan --error",
-    "fix:sassdoc": "node scripts/fixSassdoc.mjs",
-    "format": "biome check --fix && stylelint \"./sass/**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .gitignore && prettier \"./sass/**/*.{scss,css}\" --write --ignore-path .gitignore",
-    "prepare": "husky install && node scripts/setup-grammars.mjs",
-    "mcp:inspector": "npx @modelcontextprotocol/inspector dist/mcp/index.js",
-    "test": "vitest run",
-    "coverage": "vitest run --coverage"
+    "fix:sassdoc": "node .scripts/fixSassdoc.mjs",
+    "format": "stylelint \"./sass/**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .gitignore && prettier \"./sass/**/*.{scss,css}\" --write --ignore-path .gitignore",
+    "prepare": "node .scripts/setup-grammars.mjs",
+    "test": "vitest run"
   },
   "lint-staged": {
     "*.{js,ts,cjs,mjs,jsx,tsx}": [
@@ -46,23 +44,26 @@
   },
   "files": [
     "sass/",
-    "json/",
-    "tailwind/",
-    "dist/mcp/",
+    "dist/",
     "_index.scss"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/IgniteUI/igniteui-theming.git"
+    "url": "git+https://github.com/IgniteUI/igniteui-theming.git",
+    "directory": "packages/theming"
   },
   "keywords": [
     "sass",
+    "scss",
     "Ignite",
     "UI",
     "theming",
     "palettes",
     "elevations",
-    "typography"
+    "typography",
+    "design systems",
+    "model context protocol",
+    "mcp"
   ],
   "author": "Infragistics",
   "license": "MIT",
@@ -73,65 +74,45 @@
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "tailwind": "./theme.css",
-      "esm2020": "./index.js",
-      "es2020": "./index.js",
-      "es2015": "./index.js",
-      "node": "./index.js",
-      "default": "./index.js"
-    },
-    "./functions": {
-      "sass": "./sass/_functions.scss"
+      "tailwind": "./dist/tailwind/theme.css",
+      "node": "./dist/index.js",
+      "default": "./dist/index.js"
     },
+    "./package.json": "./package.json",
     "./sass/**/*.*": "./sass/**/*.*",
-    "./tailwind/*": "./tailwind/*",
-    "./json/colors/meta/multipliers.json": "./json/colors/meta/multipliers.json",
-    "./json/colors/meta/palette.json": "./json/colors/meta/palette.json",
-    "./json/colors/presets/palettes.json": "./json/colors/presets/palettes.json",
-    "./json/elevations/indigo.json": "./json/elevations/indigo.json",
-    "./json/elevations/material.json": "./json/elevations/material.json",
-    "./json/typography/presets/typescales.json": "./json/typography/presets/typescales.json",
+    "./tailwind/*": "./dist/tailwind/*",
+    "./json/colors/meta/multipliers.json": "./dist/json/colors/meta/multipliers.json",
+    "./json/colors/meta/palette.json": "./dist/json/colors/meta/palette.json",
+    "./json/colors/presets/palettes.json": "./dist/json/colors/presets/palettes.json",
+    "./json/components/themes.json": "./dist/json/components/themes.json",
+    "./json/elevations/indigo.json": "./dist/json/elevations/indigo.json",
+    "./json/elevations/material.json": "./dist/json/elevations/material.json",
+    "./json/typography/presets/typescales.json": "./dist/json/typography/presets/typescales.json",
     "./mcp": {
       "import": "./dist/mcp/index.js"
     }
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.25.0",
+    "@modelcontextprotocol/sdk": "^1.28.0",
     "sass-embedded": "~1.92.1",
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@ast-grep/cli": "^0.41.0",
-    "@biomejs/biome": "^2.4.2",
-    "@types/node": "^22.0.0",
+    "@ast-grep/cli": "^0.42.0",
     "@types/postcss-safe-parser": "^5.0.4",
-    "@vitest/coverage-v8": "^4.0.16",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "globby": "^13.1.4",
-    "husky": "^8.0.3",
     "igniteui-sassdoc-theme": "^1.1.6",
     "lunr": "^2.3.9",
     "postcss": "^8.4.35",
     "postcss-safe-parser": "^7.0.0",
-    "prettier": "^3.2.5",
     "sass-true": "^9.0.0",
     "sassdoc": "^2.7.4",
     "sassdoc-plugin-localization": "^2.0.0",
-    "shx": "^0.3.4",
-    "stylelint": "^17.3.0",
+    "stylelint": "^17.5.0",
     "stylelint-config-standard-scss": "^17.0.0",
-    "stylelint-scss": "^7.0.0",
-    "tsx": "^4.0.0",
-    "typescript": "^5.7.0",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15"
+    "stylelint-scss": "^7.0.0"
   },
   "treeSitterGrammars": {
-    "tree-sitter-scss": "v0.1.0",
+    "tree-sitter-scss": "v0.2.0",
     "tree-sitter-sassdoc": "v0.1.0"
   }
 }

package/sass/json/README.md

@@ -1,28 +1,29 @@
 # What is this?
 
-This folder contains generator files that can be used by the `src/buildJSON.mjs` script to produce JSON files containing serialized information about various parts of the theming package (ex. palettes, typography, elevations, etc.);
+This folder contains generator files that can be used by the `buildJSON.mjs` script to produce JSON files containing serialized information about various parts of the theming package (ex. palettes, typography, elevations, etc.);
 
-The `generators.scss` file contains declarations for how each of the JSON files should be generated, where each file should be placed and what its contents are. 
+The `generators.scss` file contains declarations for how each of the JSON files should be generated, where each file should be placed and what its contents are.
 
-To achieve this a small [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) on top of CSS is used. A tiny [parser](../../scripts/parser.mjs) handles the transformation of this custom CSS into JSON.
+To achieve this a small [DSL](https://en.wikipedia.org/wiki/Domain-specific_language) on top of CSS is used. A tiny [parser](../../.scripts/parser.mjs) handles the transformation of this custom CSS into JSON.
 
 From this point on, this document explains the syntax of the DSL.
 
 ## Base Syntax
 
 #### Example of the DSL syntax (Input)
+
 ```css
 /*
 * @outputDir - /custom
 */
 example {
-  --content: "Hello, World!"
+  --content: 'Hello, World!';
 }
 ```
 
 The declaration above will produce the following JSON file when `$ npm run build:json` is run.
 
-#### Output (`igniteui-theming/json/custom/example.json`)
+#### Output (`igniteui-theming/dist/json/custom/example.json`)
 
 ```json
 {
@@ -34,13 +35,13 @@ To generate a new JSON file, you need to add a new `scss` document in this folde
 
 ### Specifying output directory for the JSON file
 
-The output directory is specified using a comment directly above the declaration body with a string marker of `@outputDir` separated by a `-` followed by the desired location of the generated JSON file relative to the `json` directory located at the root of this project(see the example above). If no comment is specified, the last existing comment specifying an `@outputDir` will be used. If there's no other comment above the declaration specifying an `@outputDir`, the declaration is ignored and no output file is generated.
+The output directory is specified using a comment directly above the declaration body with a string marker of `@outputDir` separated by a `-` followed by the desired location of the generated JSON file relative to the `dist/json` directory (see the example above). If no comment is specified, the last existing comment specifying an `@outputDir` will be used. If there's no other comment above the declaration specifying an `@outputDir`, the declaration is ignored and no output file is generated.
 
 ### JSON declaration
 
 ```css
 example {
-  --content: "Hello, World!"
+  --content: 'Hello, World!';
 }
 ```
 
@@ -49,6 +50,7 @@ Given the above snippet, the first present selector, i.e. `example`, will be use
 ##### Grouping several keys together into an object:
 
 ###### Input
+
 ```css
 example {
   > group > x {
@@ -64,6 +66,7 @@ example {
 The declaration above produces the following JSON:
 
 ###### Output
+
 ```json
 {
   "group": {
@@ -84,6 +87,7 @@ The `>` operator defines nested structures within the current JSON object. If th
 You can produce arrays in the JSON file by declaring an array-like object as the value of a key.
 
 ###### Example
+
 ```css
 example {
   --array-like: [1, a, 2.4];
@@ -91,6 +95,7 @@ example {
 ```
 
 ###### Output
+
 ```json
 {
   "array-like": ["1", "a", "2.4"]

package/sass/themes/_mixins.scss

@@ -25,6 +25,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
 /// Returns true if a key-value pair from a theme map should be emitted as a CSS variable.
 /// Filters out map values (nested sub-themes) and the special 'prefix' key.
 /// @access private
+///
 /// @param {String} $key - The theme property key.
 /// @param {*} $value - The theme property value.
 /// @return {Boolean}

package/sass/themes/components/button-group/_button-group-theme.scss

@@ -36,7 +36,11 @@
 /// @param {Color} $item-focused-text-color [null] - The focused text color for button group items. Auto-derived from item-focused-background.
 /// @param {Color} $item-focused-background [null] - The focused background color for button group items. Auto-derived from item-hover-background.
 /// @param {Color} $item-focused-border-color [null] - The focused border color for an item from the button group. Auto-derived from item-border-color.
+/// @param {Color} $item-focused-hover-text-color [null] - The focused & hover text color for button group items. Auto-derived from item-focused-text-color.
+/// @param {Color} $item-focused-hover-border-color [null] - The focused & hover border color for an item from the button group. Auto-derived from item-focused-border-color.
 /// @param {Color} $item-focused-hover-background [null] - The focused & hover background color for button group items. Auto-derived from item-focused-background.
+/// @param {Color} $item-active-background [null] - The active background color for button group items. Auto-derived from item-hover-background.
+/// @param {Color} $item-active-border-color [null] - The active border color for button group items. Auto-derived from item-hover-border-color.
 /// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items. Auto-derived from item-background or selected-shadow-color.
 /// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items. Auto-derived from idle-shadow-color.
 ///
@@ -55,6 +59,8 @@
 /// @param {Color} $item-selected-hover-border-color [null] - The border color for a selected item in hover state in the button group. Auto-derived from item-border-color.
 /// @param {Color} $item-selected-focus-background [null] - The background color for a selected item in focused state in the button group. Auto-derived from item-selected-background.
 /// @param {Color} $item-selected-focus-hover-background [null] - The background color for a selected item in focused & hover state in the button group. Auto-derived from item-selected-hover-background.
+/// @param {Color} $item-selected-active-background [null] - The active background color for a selected item in the button group. Auto-derived from item-selected-hover-background.
+/// @param {Color} $item-selected-active-border-color [null] - The active border color for a selected item in the button group. Auto-derived from item-selected-hover-border-color.
 ///
 /// @param {Color} $disabled-selected-text-color [null] - The disabled text color for a selected item in the button group. Auto-derived from disabled-text-color.
 /// @param {Color} $disabled-selected-icon-color [null] - The disabled icon color for a selected item in the button group. Auto-derived from disabled-selected-text-color.
@@ -89,8 +95,12 @@
 
     $item-focused-text-color: null,
     $item-focused-border-color: null,
+    $item-focused-hover-text-color: null,
+    $item-focused-hover-border-color: null,
     $item-focused-background: null,
     $item-focused-hover-background: null,
+    $item-active-background: null,
+    $item-active-border-color: null,
     $idle-shadow-color: null,
     $selected-shadow-color: null,
     $border-radius: null,
@@ -110,6 +120,8 @@
     $item-selected-hover-border-color: null,
     $item-selected-focus-background: null,
     $item-selected-focus-hover-background: null,
+    $item-selected-active-background: null,
+    $item-selected-active-border-color: null,
 
     $disabled-selected-text-color: null,
     $disabled-selected-icon-color: $disabled-selected-text-color,
@@ -161,6 +173,10 @@
         $item-selected-focus-hover-background: var(--item-selected-hover-background);
     }
 
+    @if not($item-selected-active-background) and $item-selected-hover-background {
+        $item-selected-active-background: dynamic-shade(var(--item-selected-hover-background));
+    }
+
     @if not($item-focused-background) and $item-background {
         $item-focused-background: var(--item-hover-background);
     }
@@ -169,6 +185,18 @@
         $item-focused-hover-background: dynamic-shade(var(--item-focused-background));
     }
 
+    @if not($item-active-background) and $item-hover-background {
+        $item-active-background: dynamic-shade(var(--item-hover-background));
+    }
+
+    @if not($item-active-border-color) and $item-hover-border-color {
+        $item-active-border-color: var(--item-hover-border-color);
+    }
+
+    @if not($item-selected-active-border-color) and $item-selected-hover-border-color {
+        $item-selected-active-border-color: var(--item-selected-hover-border-color);
+    }
+
     @if not($disabled-background-color) and $item-background {
         $disabled-background-color: var(--item-background);
     }
@@ -190,6 +218,10 @@
         $item-focused-border-color: var(--item-border-color);
     }
 
+    @if not($item-focused-hover-border-color) and $item-focused-border-color {
+        $item-focused-hover-border-color: var(--item-focused-border-color);
+    }
+
     @if not($item-selected-border-color) and $item-border-color {
         $item-selected-border-color: var(--item-border-color);
     }
@@ -227,6 +259,10 @@
         $item-focused-text-color: adaptive-contrast(var(--item-focused-background));
     }
 
+    @if not($item-focused-hover-text-color) and $item-focused-text-color {
+        $item-focused-hover-text-color: var(--item-focused-text-color);
+    }
+
     @if not($item-selected-text-color) and $item-selected-background {
         $item-selected-text-color: adaptive-contrast(var(--item-selected-background));
     }
@@ -285,9 +321,13 @@
             item-background: $item-background,
             item-border-color: $item-border-color,
             item-focused-text-color: $item-focused-text-color,
+            item-focused-hover-text-color: $item-focused-hover-text-color,
             item-focused-background: $item-focused-background,
             item-focused-border-color: $item-focused-border-color,
+            item-focused-hover-border-color: $item-focused-hover-border-color,
             item-focused-hover-background: $item-focused-hover-background,
+            item-active-background: $item-active-background,
+            item-active-border-color: $item-active-border-color,
             border-radius: $border-radius,
             item-hover-text-color: $item-hover-text-color,
             item-hover-icon-color: $item-hover-icon-color,
@@ -306,6 +346,8 @@
             item-selected-hover-border-color: $item-selected-hover-border-color,
             item-selected-focus-background: $item-selected-focus-background,
             item-selected-focus-hover-background: $item-selected-focus-hover-background,
+            item-selected-active-background: $item-selected-active-background,
+            item-selected-active-border-color: $item-selected-active-border-color,
             disabled-selected-text-color: $disabled-selected-text-color,
             disabled-selected-icon-color: $disabled-selected-icon-color,
             disabled-selected-background: $disabled-selected-background,

package/sass/themes/components/grid/_grid-theme.scss

@@ -445,7 +445,7 @@
     }
 
     @if not($drop-area-background) and $grouparea-background {
-        $drop-area-background: adaptive-contrast(var(--grouparea-background));
+        $drop-area-background: dynamic-shade(var(--grouparea-background));
     }
 
     @if not($drop-area-on-drop-background) and $drop-area-background {