igniteui-theming 1.1.3 → 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,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.1.3",
+  "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": {
@@ -14,6 +14,7 @@
     "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 ./docs"
   },
@@ -52,16 +53,17 @@
   "devDependencies": {
     "globby": "^13.1.2",
     "igniteui-sassdoc-theme": "^1.1.4",
-    "sassdoc-plugin-localization": "^1.4.3",
     "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",
-    "lunr": "^2.3.9"
+    "yargs": "^17.6.2"
   },
   "peerDependencies": {
     "sass": "^1.53.0"

package/sass/color/_charts.scss

@@ -2,6 +2,16 @@
 /// @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),
@@ -19,6 +29,16 @@ $brushes-regular: (
 /// @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/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,