igniteui-theming 25.0.1 → 25.0.2

package/json/components/themes.json

@@ -111,7 +111,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Sets a shadow to be used for the badge."
       },
       {
@@ -224,7 +224,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List | Number",
         "description": "Sets a shadow to be used for the bar."
       }
     ]
@@ -247,7 +247,7 @@
     "tokens": [
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow to be applied for the button group."
       },
       {
@@ -1908,12 +1908,12 @@
       },
       {
         "name": "resting-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow of the card in its resting state."
       },
       {
         "name": "hover-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow of the card in its hover state."
       },
       {
@@ -2041,7 +2041,7 @@
       },
       {
         "name": "button-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Shadow underneath the previous/next buttons."
       },
       {
@@ -2349,7 +2349,7 @@
       },
       {
         "name": "ghost-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The chip ghost shadow.\n"
       },
       {
@@ -2602,7 +2602,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow used for the dialog."
       },
       {
@@ -2931,7 +2931,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Sets a shadow to be used for the drop-down."
       },
       {
@@ -3560,12 +3560,12 @@
       },
       {
         "name": "grid-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow of the grid."
       },
       {
         "name": "drag-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow for movable elements."
       },
       {
@@ -3587,6 +3587,31 @@
         "name": "drop-area-border-radius",
         "type": "List",
         "description": "The border radius for column drop area."
+      },
+      {
+        "name": "active-state-border-style",
+        "type": "List",
+        "description": "The border style used for row active state and cell active state."
+      },
+      {
+        "name": "body-column-border-color",
+        "type": "Color",
+        "description": "The border color used for the body column."
+      },
+      {
+        "name": "body-column-hover-border-color",
+        "type": "Color",
+        "description": "The border color used for the body column when in hovered row."
+      },
+      {
+        "name": "body-column-hover-selected-border-color",
+        "type": "Color",
+        "description": "The border color used for the body column when in hovered + selected row."
+      },
+      {
+        "name": "body-column-selected-border-color",
+        "type": "Color",
+        "description": "The border color used for the body column when in selected row."
       }
     ]
   },
@@ -4373,7 +4398,7 @@
       {
         "name": "input-prefix-background--filled",
         "type": "Color",
-        "description": "] - The background color of an input prefix in the filled state."
+        "description": "The background color of an input prefix in the filled state."
       },
       {
         "name": "input-prefix-color--focused",
@@ -4507,17 +4532,17 @@
       },
       {
         "name": "search-resting-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its resting state."
       },
       {
         "name": "search-hover-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its hover state."
       },
       {
         "name": "search-disabled-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its disabled state."
       },
       {
@@ -4653,7 +4678,7 @@
       {
         "name": "input-prefix-background--filled",
         "type": "Color",
-        "description": "] - The background color of an input prefix in the filled state."
+        "description": "The background color of an input prefix in the filled state."
       },
       {
         "name": "input-prefix-color--focused",
@@ -4787,17 +4812,17 @@
       },
       {
         "name": "search-resting-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its resting state."
       },
       {
         "name": "search-hover-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its hover state."
       },
       {
         "name": "search-disabled-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow color of an input group of type search in its disabled state."
       },
       {
@@ -5057,7 +5082,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow of the navbar."
       },
       {
@@ -5865,7 +5890,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Sets a shadow to be used for the snackbar."
       },
       {
@@ -6347,17 +6372,17 @@
       },
       {
         "name": "resting-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow used for the thumb in resting state of the switch."
       },
       {
         "name": "hover-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow used for the thumb in hover state of the switch."
       },
       {
         "name": "disabled-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The shadow used for the thumb in disable state of the switch."
       },
       {
@@ -6648,12 +6673,12 @@
       },
       {
         "name": "modal-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The custom shadow to be used for the time picker in modal mode."
       },
       {
         "name": "dropdown-shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "The custom shadow to be used for the time picker in dropdown mode."
       },
       {
@@ -6702,7 +6727,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Sets a shadow to be used for the toast."
       }
     ]
@@ -6736,7 +6761,7 @@
       },
       {
         "name": "shadow",
-        "type": "box-shadow",
+        "type": "List",
         "description": "Sets a shadow to be used for the tooltip component."
       }
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "25.0.1",
+  "version": "25.0.2",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "type": "module",
@@ -23,12 +23,14 @@
     "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",
+    "lint": "npm run lint:biome && npm run lint:styles && npm run lint:prettier && npm run lint:sassdoc",
     "lint:biome": "biome check",
     "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",
+    "prepare": "husky install && node scripts/setup-grammars.mjs",
     "mcp:inspector": "npx @modelcontextprotocol/inspector dist/mcp/index.js",
     "test": "vitest run",
     "coverage": "vitest run --coverage"
@@ -38,7 +40,8 @@
       "biome check --fix --no-errors-on-unmatched"
     ],
     "sass/**/*.{scss,css}": [
-      "npm run format"
+      "npm run format",
+      "npm run lint:sassdoc"
     ]
   },
   "files": [
@@ -98,6 +101,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
+    "@ast-grep/cli": "^0.41.0",
     "@biomejs/biome": "^2.4.2",
     "@types/node": "^22.0.0",
     "@types/postcss-safe-parser": "^5.0.4",
@@ -117,13 +121,17 @@
     "sassdoc": "^2.7.4",
     "sassdoc-plugin-localization": "^2.0.0",
     "shx": "^0.3.4",
-    "stylelint": "^15.6.2",
-    "stylelint-config-standard-scss": "^7.0.1",
-    "stylelint-scss": "^4.7.0",
+    "stylelint": "^17.3.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"
+  },
+  "treeSitterGrammars": {
+    "tree-sitter-scss": "v0.1.0",
+    "tree-sitter-sassdoc": "v0.1.0"
   }
 }

package/sass/animations/_easings.scss

@@ -5,74 +5,74 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// @type Timing Function
+/// @type Function
 $in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
 
-/// @type Timing Function
+/// @type Function
 $in-cubic: cubic-bezier(0.55, 0.55, 0.675, 0.19);
 
-/// @type Timing Function
+/// @type Function
 $in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
 
-/// @type Timing Function
+/// @type Function
 $in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 
-/// @type Timing Function
+/// @type Function
 $in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
 
-/// @type Timing Function
+/// @type Function
 $in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
-/// @type Timing Function
+/// @type Function
 $in-circ: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
-/// @type Timing Function
+/// @type Function
 $in-back: cubic-bezier(0.95, 0.05, 0.795, 0.035);
 
-/// @type Timing Function
+/// @type Function
 $out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
-/// @type Timing Function
+/// @type Function
 $out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-quint: cubic-bezier(0.23, 1, 0.32, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-expo: cubic-bezier(0.19, 1, 0.22, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
 
-/// @type Timing Function
+/// @type Function
 $out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
-/// @type Timing Function
+/// @type Function
 $in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-/// @type Timing Function
+/// @type Function
 $in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
 
-/// @type Timing Function
+/// @type Function
 $in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
 
-/// @type Timing Function
+/// @type Function
 $in-out-quint: 0.5s cubic-bezier(0.86, 0, 0.07, 1);
 
-/// @type Timing Function
+/// @type Function
 $in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 
-/// @type Timing Function
+/// @type Function
 $in-out-expo: cubic-bezier(1, 0, 0, 1);
 
-/// @type Timing Function
+/// @type Function
 $in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
 
-/// @type Timing Function
+/// @type Function
 $in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

package/sass/bem/_index.scss

@@ -13,7 +13,8 @@
 /// @package theming
 ////
 
-/// @type String - The Element separator used. Default '__'.
+/// The Element separator used. Default '__'.
+/// @type String
 /// @access public
 /// @example scss - Change the element separator from '__' to '-'
 ///   $bem--sep-elem: '-';
@@ -28,7 +29,8 @@
 ///   .block-element { background: blue; }
 $bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');
 
-/// @type String - The Modifier separator used. Default '--'.
+/// The Modifier separator used. Default '--'.
+/// @type String
 /// @access public
 /// @example scss - Change the modifier separator from '--' to '---'
 ///   $bem--sep-mod: '---';
@@ -43,7 +45,8 @@ $bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');
 ///   .block---modifier { background: red; }
 $bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');
 
-/// @type String - The Modifier Value separator used. Default '-'.
+/// The Modifier Value separator used. Default '-'.
+/// @type String
 /// @access public
 /// @example scss - Change the modifier value separator from '-' to '_'
 ///   $bem--sep-mod-val: '_';
@@ -231,22 +234,22 @@ $_bem-mod-cache: () !default;
 /// @param {String|Map} $mod [null] - A block modifier.
 /// @param {List} $mods [null] - A list of block modifiers.
 ///
-/// @example scss Include a block
+/// @example scss - Include a block
 ///   $selector: bem-selector(block); // returns .block
 ///
-/// @example scss Include a block and an element
+/// @example scss - Include a block and an element
 ///   $selector: bem-selector(block, $elem: elem); // returns .block__elem
 ///
-/// @example scss Include block, element, and element modifier
+/// @example scss - Include block, element, and element modifier
 ///   $selector: bem-selector(block, $elem: (elem, mod); // returns .block__elem--mod
 ///
-/// @example scss Include block and block modifier
+/// @example scss - Include block and block modifier
 ///   $selector: bem-selector(block, $mod: mod) // returns .block--mod
 ///
-/// @example scss Include block and multiple block modifiers
+/// @example scss - Include block and multiple block modifiers
 ///   $selector: bem-selector(block, $mods: (mod-1, mod-2)) // returns .block--mod-1.block--mod-2
 ///
-/// @example scss Include block modifier followed by block sub-element
+/// @example scss - Include block modifier followed by block sub-element
 ///   $selector: bem-selector(block, $m: mod, $e: elem); // returns .block--mod .block__elem
 ///
 /// @return {String} The generated BEM selector string
@@ -367,7 +370,7 @@ $_bem-mod-cache: () !default;
 /// is to clearly denote the start of a BEM block.
 /// @access public
 /// @param {String} $block - The block name.
-/// @example
+/// @example scss - Include a block
 ///   @include bem-block(block) {
 ///      background: green;
 ///   }
@@ -443,10 +446,9 @@ $_bem-mod-cache: () !default;
 /// Generates selectors for multiple block modifiers with optional exclusions
 /// @access public
 /// @param {List} $mods - List of modifier names
-/// @param {Map} $options - Optional configuration map
-/// @param {String|List} $options.not - Modifier(s) to exclude with :not()
-/// @throw {Error} If used outside a block context
-/// @throw {Error} If used inside an element or pseudo-selector
+/// @param {Boolean} $not - Modifier(s) to exclude with :not()
+/// @throws Error if used outside a block context
+/// @throws Error if used inside an element or pseudo-selector
 /// @example scss
 ///   @include bem-block(card) {
 ///     @include bem-mods(large, primary, (not: outline)) {

package/sass/color/_charts.scss

@@ -6,16 +6,16 @@
 
 /// A list of color values to be used as brushes in charts.
 /// @type List
-/// @prop {Color} brush-1 [rgb(157 231 114)]
-/// @prop {Color} brush-2 [rgb(139 91 177)]
-/// @prop {Color} brush-3 [rgb(109 177 255)]
-/// @prop {Color} brush-4 [rgb(154 242 228)]
-/// @prop {Color} brush-5 [rgb(238 88 121)]
-/// @prop {Color} brush-6 [rgb(115 86 86)]
-/// @prop {Color} brush-7 [rgb(247 210 98)]
-/// @prop {Color} brush-8 [rgb(168 168 183)]
-/// @prop {Color} brush-9 [rgb(224 81 169)]
-/// @prop {Color} brush-10 [rgb(248 161 95)]
+/// @prop {Color} brush-1 [rgb(157 231 114)] - The first brush color used in charts.
+/// @prop {Color} brush-2 [rgb(139 91 177)] - The second brush color used in charts.
+/// @prop {Color} brush-3 [rgb(109 177 255)] - The third brush color used in charts.
+/// @prop {Color} brush-4 [rgb(154 242 228)] - The fourth brush color used in charts.
+/// @prop {Color} brush-5 [rgb(238 88 121)] - The fifth brush color used in charts.
+/// @prop {Color} brush-6 [rgb(115 86 86)] - The sixth brush color used in charts.
+/// @prop {Color} brush-7 [rgb(247 210 98)] - The seventh brush color used in charts.
+/// @prop {Color} brush-8 [rgb(168 168 183)] - The eighth brush color used in charts.
+/// @prop {Color} brush-9 [rgb(224 81 169)] - The ninth brush color used in charts.
+/// @prop {Color} brush-10 [rgb(248 161 95)] - The tenth brush color used in charts.
 $brushes-regular: (
     rgb(157 231 114),
     rgb(139 91 177),
@@ -31,16 +31,16 @@ $brushes-regular: (
 
 /// A list of color values to be used as color-blind brushes in charts.
 /// @type List
-/// @prop {Color} brush-1 [rgb(86 180 233)]
-/// @prop {Color} brush-2 [rgb(0 158 115)]
-/// @prop {Color} brush-3 [rgb(240 228 68)]
-/// @prop {Color} brush-4 [rgb(213 94 0)]
-/// @prop {Color} brush-5 [rgb(214 0 254)]
-/// @prop {Color} brush-6 [rgb(0 73 159)]
-/// @prop {Color} brush-7 [rgb(230 159 0)]
-/// @prop {Color} brush-8 [rgb(0 0 0)]
-/// @prop {Color} brush-9 [rgb(132 240 223)]
-/// @prop {Color} brush-10 [rgb(115 86 86)]
+/// @prop {Color} brush-1 [rgb(86 180 233)] - The first brush color used in charts for color-blind users.
+/// @prop {Color} brush-2 [rgb(0 158 115)] - The second brush color used in charts for color-blind users.
+/// @prop {Color} brush-3 [rgb(240 228 68)] - The third brush color used in charts for color-blind users.
+/// @prop {Color} brush-4 [rgb(213 94 0)] - The fourth brush color used in charts for color-blind users.
+/// @prop {Color} brush-5 [rgb(214 0 254)] - The fifth brush color used in charts for color-blind users.
+/// @prop {Color} brush-6 [rgb(0 73 159)] - The sixth brush color used in charts for color-blind users.
+/// @prop {Color} brush-7 [rgb(230 159 0)] - The seventh brush color used in charts for color-blind users.
+/// @prop {Color} brush-8 [rgb(0 0 0)] - The eighth brush color used in charts for color-blind users.
+/// @prop {Color} brush-9 [rgb(132 240 223)] - The ninth brush color used in charts for color-blind users.
+/// @prop {Color} brush-10 [rgb(115 86 86)] - The tenth brush color used in charts for color-blind users.
 $brushes-color-blind: (
     rgb(86 180 233),
     rgb(0 158 115),