igniteui-theming 19.3.0-beta.3 → 19.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "19.3.0-beta.3",
+  "version": "19.3.0",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/light/_chat.scss

@@ -14,11 +14,15 @@
 /// @prop {Map} header-color [contrast-color: ('surface', 500)] - The text color of the chat header.
 /// @prop {Color} header-border [transparent] - The color used for the chat header border.
 /// @prop {Map} message-background [color: ('gray', 200)] - The background color of the sent message bubble.
-/// @prop {Map} message-focus-color [color: ('gray', 300)] - The color used for the focused styles of the message bubble.
 /// @prop {Map} message-color [color: ('gray', 800)] - The text color of the chat messages.
+/// @prop {Map} message-actions-color [color: ('gray', 700)] - The icon color of the chat message actions.
+/// @prop {Map} file-background [contrast-color: ('gray', 900)] - The background color of the image message container.
+/// @prop {Map} file-icon-color [color: ('gray', 500)] - The color of the attached file icon.
+/// @prop {Map} file-icon-accent-color [color: ('gray', 600)] - The accent color of the attached file icon.
 /// @prop {Map} image-background [color: ('gray', 100)] - The background color of the image message container.
 /// @prop {Map} image-border [color: ('gray', 300)] - The border color of the image message container.
-/// @prop {Map} chat-input-border [color: ('gray', 300)] - The border color of the chat input area.
+/// @prop {Map} image-attachment-icon [color: ('gray', 900)] - The color of the message attachment icon.
+/// @prop {Map} chat-input-border [color: ('gray', 400)] - The border color of the chat input area.
 /// @prop {Map} progress-indicator-color [color: ('secondary', 500)] - The color of the progress indicator in the chat component.
 $light-chat: (
     background: (
@@ -50,16 +54,34 @@ $light-chat: (
             200,
         ),
     ),
-    message-focus-color: (
+    message-color: (
         color: (
             'gray',
-            300,
+            800,
         ),
     ),
-    message-color: (
+    message-actions-color: (
         color: (
             'gray',
-            800,
+            700,
+        ),
+    ),
+    file-background: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+    file-icon-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    file-icon-accent-color: (
+        color: (
+            'gray',
+            600,
         ),
     ),
     image-background: (
@@ -74,10 +96,16 @@ $light-chat: (
             300,
         ),
     ),
+    image-attachment-icon: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
     chat-input-border: (
         color: (
             'gray',
-            300,
+            400,
         ),
     ),
     progress-indicator-color: (
@@ -103,10 +131,31 @@ $material-chat: extend(
 
 /// Generates a light fluent chat schema.
 /// @type {Map}
+/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
+/// @prop {Map} header-color [color: ('gray', 900)] - The text color of the chat header.
+/// @prop {Map} message-actions-color [color: ('primary', 500)] - The icon color of the chat message actions.
 /// @requires {Map} $light-chat
 $fluent-chat: extend(
     $light-chat,
     (
+        background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+        header-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        message-actions-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         _meta: (
             theme: 'fluent',
             variant: 'light',
@@ -116,10 +165,24 @@ $fluent-chat: extend(
 
 /// Generates a light bootstrap chat schema.
 /// @type {Map}
+/// @prop {Map} background [contrast-color: ('gray', 900)] - The background color of the chat component.
+/// @prop {Map} header-border [color: ('gray', 300)] - The color used for the chat header border.
 /// @requires {Map} $light-chat
 $bootstrap-chat: extend(
     $light-chat,
     (
+        background: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+        header-border: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         _meta: (
             theme: 'bootstrap',
             variant: 'light',
@@ -131,8 +194,10 @@ $bootstrap-chat: extend(
 /// @type {Map}
 /// @prop {Map} header-color [color: ('gray', 800)] - The text color of the chat header.
 /// @prop {Map} header-border [color: ('primary', 500)] - The color used for the chat header border.
-/// @prop {Map} message-focus-color [color: ('primary', 400)] - The color used for the focused styles of the message bubble.
+/// @prop {Map} file-background [color: ('gray', 100)] - The background color of the image message container.
+/// @prop {Map} message-actions-color [color: ('gray', 600)] - The icon color of the chat message actions.
 /// @prop {Map} progress-indicator-color [color: ('info', 500)] - The color of the progress indicator in the chat component.
+/// @prop {Map} image-attachment-icon [color: ('info', 500)] - The color of the message attachment icon.
 /// @requires {Map} $light-chat
 $indigo-chat: extend(
     $light-chat,
@@ -149,10 +214,16 @@ $indigo-chat: extend(
                 500,
             ),
         ),
-        message-focus-color: (
+        file-background: (
             color: (
-                'primary',
-                400,
+                'gray',
+                100,
+            ),
+        ),
+        message-actions-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
         progress-indicator-color: (
@@ -161,6 +232,12 @@ $indigo-chat: extend(
                 500,
             ),
         ),
+        image-attachment-icon: (
+            color: (
+                'info',
+                500,
+            ),
+        ),
         _meta: (
             theme: 'indigo',
             variant: 'light',

package/sass/themes/schemas/components/light/_list.scss

@@ -387,6 +387,7 @@ $bootstrap-list: extend(
 /// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('primary', 300, .3)] - The active list item background color.
 /// @prop {Map} item-background-selected [color: ('primary', 300, .3)] - The selected list item background color.
+/// @prop {Map} item-title-color [color: ('gray', 800)] - The list item title color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
 /// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color on hover.
 /// @prop {Map} item-text-color-active [color: ('gray', 900)] - The active list item text color.
@@ -451,6 +452,13 @@ $indigo-list: extend(
             ),
         ),
 
+        item-title-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
         item-text-color: (
             color: (
                 'gray',

package/sass/themes/schemas/components/light/_select.scss

@@ -129,6 +129,7 @@ $fluent-select: extend(
 /// Generates a bootstrap select schema.
 /// @type {Map}
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
@@ -142,6 +143,14 @@ $bootstrap-select: extend(
                 800,
             ),
         ),
+
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
         toggle-button-foreground-focus: (
             color: (
                 'gray',