igniteui-theming 19.3.0-beta.4 → 19.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "19.3.0-beta.4",
+  "version": "19.3.1",
   "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

@@ -16,8 +16,12 @@
 /// @prop {Map} message-background [color: ('gray', 200)] - The background color of the sent 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} 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: (
@@ -62,6 +66,24 @@ $light-chat: (
             700,
         ),
     ),
+    file-background: (
+        contrast-color: (
+            'gray',
+            900,
+        ),
+    ),
+    file-icon-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    file-icon-accent-color: (
+        color: (
+            'gray',
+            600,
+        ),
+    ),
     image-background: (
         color: (
             'gray',
@@ -74,6 +96,12 @@ $light-chat: (
             300,
         ),
     ),
+    image-attachment-icon: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
     chat-input-border: (
         color: (
             'gray',
@@ -166,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} 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,
@@ -184,6 +214,12 @@ $indigo-chat: extend(
                 500,
             ),
         ),
+        file-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         message-actions-color: (
             color: (
                 'gray',
@@ -196,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',