igniteui-theming 1.1.2 → 1.1.4

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#0078d4","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(262deg 8% 98%)","surface":"#2a2b2f","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#0078d4","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(236deg 8% 5%)","surface":"#fff","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}
+{"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#333","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#222","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(262deg 8% 98%)","surface":"#2a2b2f","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"dark-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"#222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#adb5bd","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-green-palette":{"primary":"#09f","secondary":"#72da67","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-purple-palette":{"primary":"#00b4d6","secondary":"#514590","surface":"#fff","info":"#1377d5","success":"#4eb862","warn":"#fbb13c","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-word-palette":{"primary":"#2b579a","secondary":"#2b579a","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-fluent-excel-palette":{"primary":"#217346","secondary":"#217346","surface":"#fff","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"hsl(236deg 8% 5%)","surface":"#fff","info":"#9208bc","success":"#689f38","warn":"#ff9800","error":"#cf1a2b"},"light-material-palette":{"primary":"#09f","secondary":"#e41c77","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"}}

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "igniteui-theming",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
-    "clean": "rimraf \"json/\"",
+    "clean": "npm run clean:json && npm run clean:docs",
+    "clean:json": "rimraf \"json/\"",
+    "clean:docs": "rimraf \"docs/\"",
     "build": "npm run build:json && npm run build:e2e",
-    "build:docs": "npx sassdoc ./sass",
+    "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 ./test/e2e/theme.scss ./test/e2e/theme.css",
     "build:json": "node scripts/buildJSON.mjs",
     "lint": "stylelint ./sass",
+    "preview:palette": "node scripts/previewPalette.mjs",
     "test": "jest",
-    "serve:docs": "npx http-server ./sassdoc"
+    "serve:docs": "npx http-server ./docs"
   },
   "files": [
     "/sass",
@@ -47,14 +52,18 @@
   },
   "devDependencies": {
     "globby": "^13.1.2",
+    "igniteui-sassdoc-theme": "^1.1.4",
     "jest": "^28.1.1",
+    "lunr": "^2.3.9",
     "postcss": "^8.4.14",
     "rimraf": "^3.0.2",
     "sass-export": "^2.1.2",
     "sass-true": "^6.1.0",
+    "sassdoc-plugin-localization": "^1.4.3",
     "stylelint": "^14.9.1",
     "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-scss": "^4.2.0"
+    "stylelint-scss": "^4.2.0",
+    "yargs": "^17.6.2"
   },
   "peerDependencies": {
     "sass": "^1.53.0"

package/sass/bem/_index.scss

@@ -11,12 +11,15 @@
 ////
 
 /// @type String - The Element separator used. Default '__'.
+/// @access private
 $bem--sep-elem: if(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');
 
 /// @type String - The Modifier separator used. Default '--'.
+/// @access private
 $bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');
 
 /// @type String - The Modifier Value separator used. Default '-'.
+/// @access private
 $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-');
 
 /// Converts a passed selector value into plain string.
@@ -125,7 +128,7 @@ $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val,
 }
 
 /// Generates a full BEM selector.
-/// @access public
+/// @access private
 /// @param {String} $block - Required. A string block name.
 /// @param {String|List} $elem - Optional. A sub-element name. If `$mod` is not present, it is
 /// joined with $block. If $mod is present, it is nested under `$block--$mod`.

package/sass/color/_charts.scss

@@ -1,6 +1,17 @@
 /// A list of color values to be used as brushes in charts.
+/// @group palettes
 /// @type List
 /// @access public
+/// @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)]
 $brushes-regular: (
     rgb(157 231 114),
     rgb(139 91 177),
@@ -15,8 +26,19 @@ $brushes-regular: (
 );
 
 /// A list of color values to be used as color-blind brushes in charts.
+/// @group palettes
 /// @type List
 /// @access public
+/// @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)]
 $brushes-color-blind: (
     rgb(86 180 233),
     rgb(0 158 115),

package/sass/color/_functions.scss

@@ -13,6 +13,7 @@ $_enhanced-accessibility: false;
 
 /// Configures the color module.
 /// @access public
+/// @group color
 /// @param {Boolean} $enhanced-accessibility [null] - Enables features like color blind palettes.
 @mixin configure-colors($enhanced-accessibility: null) {
     @if $enhanced-accessibility {
@@ -261,7 +262,7 @@ $_enhanced-accessibility: false;
 }
 
 /// Mixes two colors to produce an opaque color.
-/// @access public
+/// @access private
 /// @group Color
 /// @param {Color} $color-1 - The first color, usually transparent.
 /// @param {Color} $color-2 [#fff] - The second color, usually opaque.

package/sass/color/_types.scss

@@ -7,14 +7,17 @@
 
 /// A list consisting of all generated gray shades
 /// @type Map
+/// @access private
 $IGrayShades: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
 
 /// A list consisting of all generated shades for palette colors
 /// @type Map
+/// @access private
 $IColorShades: list.join($IGrayShades, ('A100', 'A200', 'A400', 'A700'));
 
 /// All palette colors mapped with corresponding color shades
 /// @type Map
+/// @access private
 $IPaletteColors: (
     'primary': $IColorShades,
     'secondary': $IColorShades,
@@ -28,10 +31,12 @@ $IPaletteColors: (
 
 /// A list consisting of palette metadata
 /// @type Map
+/// @access private
 $IPaletteMeta: (
     'variant': null,
 );
 
 /// A map with all palette colors and palette meta
 /// @type Map
+/// @access private
 $IPalette: map.merge($IPaletteColors, (_meta: $IPaletteMeta));

package/sass/color/presets/dark/_bootstrap.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="dark-bootstrap"
  */
+/// Generates the dark bootstrap palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-bootstrap-palette
+/// @prop {Color} primary [#0d6efd] - The primary color
+/// @prop {Color} secondary [#6c757d] - The secondary color
+/// @prop {Color} gray [#adb5bd] - The gray color
+/// @prop {Color} surface [#212529] - The surface color
+/// @prop {Color} info [#0dcaf0] - The info color
+/// @prop {Color} success [#198754] - The success color
+/// @prop {Color} warn [#ffc107] - The warn color
+/// @prop {Color} error [#dc3545] - The error color
 $palette: palette(
     $primary: #0d6efd,
     $secondary: #6c757d,

package/sass/color/presets/dark/_extra.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="dark"
  */
+/// Generates the dark green palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-green-palette
+/// @prop {Color} primary [#09f] - The primary color
+/// @prop {Color} secondary [#72da67] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#fbb13c] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $green-palette: palette(
     $primary: #09f,
     $secondary: #72da67,
@@ -12,6 +25,20 @@ $green-palette: palette(
     $warn: #fbb13c,
     $error: #ff134a,
 );
+
+/// Generates the dark purple palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-purple-palette
+/// @prop {Color} primary [#00b4d6] - The primary color
+/// @prop {Color} secondary [#514590] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#333] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#fbb13c] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $purple-palette: palette(
     $primary: #00b4d6,
     $secondary: #514590,

package/sass/color/presets/dark/_fluent.scss

@@ -3,9 +3,22 @@
 /**
  * @sass-export-section="dark-fluent"
  */
+/// Generates the dark fluent palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-fluent-palette
+/// @prop {Color} primary [#0078d4] - The primary color
+/// @prop {Color} secondary [#2b88d8] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $palette: palette(
     $primary: #0078d4,
-    $secondary: #0078d4,
+    $secondary: #2b88d8,
     $surface: #222,
     $info: #1377d5,
     $success: #107c10,
@@ -13,6 +26,20 @@ $palette: palette(
     $error: #a80000,
     $variant: 'fluent'
 );
+
+/// Generates the dark fluent word palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-fluent-word-palette
+/// @prop {Color} primary [#2b579a] - The primary color
+/// @prop {Color} secondary [#2b579a] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $word-palette: palette(
     $primary: #2b579a,
     $secondary: #2b579a,
@@ -23,6 +50,20 @@ $word-palette: palette(
     $error: #a80000,
     $variant: 'fluent'
 );
+
+/// Generates the dark fluent excel palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-fluent-excel-palette
+/// @prop {Color} primary [#217346] - The primary color
+/// @prop {Color} secondary [#217346] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $excel-palette: palette(
     $primary: #217346,
     $secondary: #217346,

package/sass/color/presets/dark/_indigo.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="dark-indigo"
  */
+/// Generates the dark indigo palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-indigo-palette
+/// @prop {Color} primary [#3f51b5] - The primary color
+/// @prop {Color} secondary [#3f51b5] - The secondary color
+/// @prop {Color} gray [hsl(262deg 8% 98%)] - The gray color
+/// @prop {Color} surface [#2a2b2f] - The surface color
+/// @prop {Color} info [#9208bc] - The info color
+/// @prop {Color} success [#689f38] - The success color
+/// @prop {Color} warn [#ff9800] - The warn color
+/// @prop {Color} error [#cf1a2b] - The error color
 $palette: palette(
     $primary: #3f51b5,
     $secondary: #3f51b5,

package/sass/color/presets/dark/_material.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="dark-material"
  */
+/// Generates the dark material palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name dark-material-palette
+/// @prop {Color} primary [#09f] - The primary color
+/// @prop {Color} secondary [#e41c77] - The secondary color
+/// @prop {Color} gray [#fff] - The gray color
+/// @prop {Color} surface [#222] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#faa419] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $palette: palette(
     $primary: #09f,
     $secondary: #e41c77,

package/sass/color/presets/light/_bootstrap.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="light-bootstrap"
  */
+/// Generates the light bootstrap palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-bootstrap-palette
+/// @prop {Color} primary [#0d6efd] - The primary color
+/// @prop {Color} secondary [#6c757d] - The secondary color
+/// @prop {Color} gray [#adb5bd] - The gray color
+/// @prop {Color} surface [#f8f9fa] - The surface color
+/// @prop {Color} info [#0dcaf0] - The info color
+/// @prop {Color} success [#198754] - The success color
+/// @prop {Color} warn [#ffc107] - The warn color
+/// @prop {Color} error [#dc3545] - The error color
 $palette: palette(
     $primary: #0d6efd,
     $secondary: #6c757d,

package/sass/color/presets/light/_extra.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="light"
  */
+/// Generates the light green palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-green-palette
+/// @prop {Color} primary [#09f] - The primary color
+/// @prop {Color} secondary [#72da67] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#fbb13c] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $green-palette: palette(
     $primary: #09f,
     $secondary: #72da67,
@@ -12,6 +25,20 @@ $green-palette: palette(
     $warn: #fbb13c,
     $error: #ff134a
 );
+
+/// Generates the light purple palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-purple-palette
+/// @prop {Color} primary [#00b4d6] - The primary color
+/// @prop {Color} secondary [#514590] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#fbb13c] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $purple-palette: palette(
     $primary: #00b4d6,
     $secondary: #514590,

package/sass/color/presets/light/_fluent.scss

@@ -3,9 +3,22 @@
 /**
  * @sass-export-section="light-fluent"
  */
+/// Generates the light fluent palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-fluent-palette
+/// @prop {Color} primary [#0078d4] - The primary color
+/// @prop {Color} secondary [#2b88d8] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $palette: palette(
     $primary: #0078d4,
-    $secondary: #0078d4,
+    $secondary: #2b88d8,
     $surface: #fff,
     $info: #1377d5,
     $success: #107c10,
@@ -13,6 +26,20 @@ $palette: palette(
     $error: #a80000,
     $variant: 'fluent'
 );
+
+/// Generates the light fluent word palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-fluent-word-palette
+/// @prop {Color} primary [#2b579a] - The primary color
+/// @prop {Color} secondary [#2b579a] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $word-palette: palette(
     $primary: #2b579a,
     $secondary: #2b579a,
@@ -23,6 +50,20 @@ $word-palette: palette(
     $error: #a80000,
     $variant: 'fluent'
 );
+
+/// Generates the dark green palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-fluent-excel-palette
+/// @prop {Color} primary [#217346] - The primary color
+/// @prop {Color} secondary [#217346] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#107c10] - The success color
+/// @prop {Color} warn [#797673] - The warn color
+/// @prop {Color} error [#a80000] - The error color
 $excel-palette: palette(
     $primary: #217346,
     $secondary: #217346,

package/sass/color/presets/light/_indigo.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="light-indigo"
  */
+/// Generates the light indigo palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-indigo-palette
+/// @prop {Color} primary [#3f51b5] - The primary color
+/// @prop {Color} secondary [#3f51b5] - The secondary color
+/// @prop {Color} gray [hsl(236deg 8% 5%)] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#9208bc] - The info color
+/// @prop {Color} success [#689f38] - The success color
+/// @prop {Color} warn [#ff9800] - The warn color
+/// @prop {Color} error [#cf1a2b] - The error color
 $palette: palette(
     $primary: #3f51b5,
     $secondary: #3f51b5,

package/sass/color/presets/light/_material.scss

@@ -3,6 +3,19 @@
 /**
  * @sass-export-section="light-material"
  */
+/// Generates the light material palette.
+/// @type Map
+/// @access public
+/// @group palettes
+/// @name light-material-palette
+/// @prop {Color} primary [#09f] - The primary color
+/// @prop {Color} secondary [#e41c77] - The secondary color
+/// @prop {Color} gray [#000] - The gray color
+/// @prop {Color} surface [#fff] - The surface color
+/// @prop {Color} info [#1377d5] - The info color
+/// @prop {Color} success [#4eb862] - The success color
+/// @prop {Color} warn [#faa419] - The warn color
+/// @prop {Color} error [#ff134a] - The error color
 $palette: palette(
     $primary: #09f,
     $secondary: #e41c77,

package/sass/elevations/_functions.scss

@@ -9,7 +9,7 @@
 $factor: var(--ig-elevation-factor, 1);
 
 /// Checks if the passed argument is a valid box-shadow.
-/// @access public
+/// @access private
 /// @param {List} $shadow - A list of shadow properties.
 /// @return {Boolean} - Returns a boolean depending on if the passed argument is a valid shadow.
 @function _is-shadow($shadow) {
@@ -31,7 +31,7 @@ $factor: var(--ig-elevation-factor, 1);
 }
 
 /// Transforms the passed box-shadow list according to the elevation factor value.
-/// @access public
+/// @access private
 /// @param {List} $shadow - A list of shadow properties.
 /// @return {List} - The transformed shadow list.
 @function _transform-shadow($shadow) {

package/sass/elevations/presets/_index.scss

@@ -1,13 +1,16 @@
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
+/// @access private
 $color-1: rgba(0 0 0 / 26%) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
+/// @access private
 $color-2: rgba(0 0 0 / 12%) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
+/// @access private
 $color-3: rgba(0 0 0 / 8%) !default;
 
 @forward './material' as material-* with(

package/sass/elevations/presets/_material.scss

@@ -7,17 +7,21 @@
 
 /// Level 1 - The color used to generate umbra shadows.
 /// @type Color
+/// @access private
 $color-1: rgba(0 0 0 / 26%) !default;
 
 /// Level 2 - The color used to generate penumbra shadows.
 /// @type Color
+/// @access private
 $color-2: rgba(0 0 0 / 12%) !default;
 
 /// Level 3 - The color used to generate ambient shadows.
 /// @type Color
+/// @access private
 $color-3: rgba(0 0 0 / 8%) !default;
 
 /// All elevation levels
+/// @access private
 $_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
 $_2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3));
 $_3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3));
@@ -43,7 +47,11 @@ $_22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42p
 $_23: box-shadow((0 11px 14px -7px $color-1, 0 23px 36px 3px $color-2, 0 9px 44px 8px $color-3));
 $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46px 8px $color-3));
 
-/// Allows user configration of this module.
+/// Configures shadow colors for the material elevations.
+/// @access public
+/// @param {Color} $color-1 - The umbra shadow color.
+/// @param {Color} $color-2 - The penumbra shadow color.
+/// @param {Color} $color-3 - The ambiant shadow color.
 @mixin configure($color-1, $color-2, $color-3) {
     @if $color-1 {
         $color-1: $color-1 !global;
@@ -63,6 +71,7 @@ $_24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46p
  */
 /// А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 /// @type Map
+/// @access private
 $elevations: (
     0: none,
     1: $_1,

package/sass/themes/_functions.scss

@@ -96,7 +96,7 @@
 }
 
 /// Retrieves the CSS custom property reference for the given key in the component theme.
-/// @access public
+/// @access private
 /// @param {Map} $theme - The source theme to be used to read values from.
 /// @param {String} $property - A key from the theme map to assign as value to the property.
 /// @param {String} $fallback [null] - A value to be used if the CSS property is not defined.
@@ -126,6 +126,7 @@
 }
 
 /// Used to switch between values based on the size of the component.
+/// @group themes
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -140,6 +141,7 @@
 }
 
 /// Used to add spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -157,6 +159,7 @@
 }
 
 /// Used to add inline spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.
@@ -167,6 +170,7 @@
 }
 
 /// Used to add block spacing.
+/// @group utilities
 /// @access public
 /// @param {Number} $sm - The preferred value when the component's size is small.
 /// @param {Number} $md [$sm] - The preferred value when the component's size is medium.