@progress/kendo-theme-material 11.3.3-dev.0 → 12.0.0-dev.0

package/scss/bubble/_layout.scss

@@ -0,0 +1,18 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bubble/_layout.scss" as *;
+
+
+@mixin kendo-bubble--layout() {
+    @include kendo-bubble--layout-base();
+
+    .k-bubble {
+        &:focus,
+        &.k-focus {
+            outline-style: solid;
+            outline-width: calc( (#{$kendo-bubble-border-width} * 2 ));
+            outline-offset: calc( (#{$kendo-bubble-border-width} * 2 ) * -1);
+        }
+    }
+}

package/scss/bubble/_theme.scss

@@ -0,0 +1,24 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/bubble/_theme.scss" as *;
+
+
+@mixin kendo-bubble--theme() {
+    @include kendo-bubble--theme-base();
+
+    .k-bubble {
+        &:focus,
+        &.k-focus {
+            outline-color: k-color(base-emphasis);
+            box-shadow: inset 0 0 0 calc( #{$kendo-bubble-border-width} * 3 ) k-color(app-surface),
+                        inset 0 0 0 calc( #{$kendo-bubble-border-width} * 5 ) $kendo-bubble-border;;
+
+            &:hover,
+            &.k-hover {
+                box-shadow: inset 0 0 0 calc( #{$kendo-bubble-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-bubble-border-width} * 5 ) $kendo-bubble-hover-border;
+            }
+        }
+    }
+}

package/scss/bubble/_variables.scss

@@ -0,0 +1,94 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
+/// The border radius of the Bubble.
+/// @group bubble
+$kendo-bubble-border-radius: k-border-radius(xl) !default;
+/// The small border radius of the Bubble.
+/// @group bubble
+$kendo-bubble-border-radius-sm: k-border-radius(xs) !default;
+/// The vertical padding of the Bubble.
+/// @group bubble
+$kendo-bubble-padding-y: k-spacing(2) !default;
+/// The horizontal padding of the Bubble.
+/// @group bubble
+$kendo-bubble-padding-x: k-spacing(3) !default;
+/// The border width of the Bubble.
+/// @group bubble
+$kendo-bubble-border-width: 1px !default;
+/// The border style of the Bubble.
+/// @group bubble
+$kendo-bubble-border-style: solid !default;
+/// The line height of the Bubble.
+/// @group bubble
+$kendo-bubble-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The text color of the Bubble.
+/// @group bubble
+$kendo-bubble-text: k-color(base-on-subtle) !default;
+/// The background color of the Bubble.
+/// @group bubble
+$kendo-bubble-bg: k-color(base-subtle) !default;
+/// The border color of the Bubble.
+/// @group bubble
+$kendo-bubble-border: $kendo-bubble-bg !default;
+/// The shadow of the Bubble.
+/// @group bubble
+$kendo-bubble-shadow: none !default;
+
+/// The background color of the hover Bubble.
+/// @group bubble
+$kendo-bubble-hover-bg: k-color(base-subtle-hover) !default;
+/// The border color of the active Bubble.
+/// @group bubble
+$kendo-bubble-hover-border: $kendo-bubble-hover-bg !default;
+/// The background color of the active Bubble.
+/// @group bubble
+$kendo-bubble-active-bg: k-color(base-subtle-active) !default;
+/// The border color of the active Bubble.
+/// @group bubble
+$kendo-bubble-active-border: $kendo-bubble-active-bg !default;
+/// The background color of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-bg: k-color(base-subtle) !default;
+/// The border color of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
+/// The box shadow of the focused Bubble.
+/// @group bubble
+$kendo-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+
+/// The spacing between content and icon in expandable Bubble.
+/// @group bubble
+$kendo-bubble-expandable-spacing: $kendo-bubble-padding-x !default;
+/// The horizontal padding of the expandable Bubble icon.
+/// @group bubble
+$kendo-bubble-expandable-icon-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the expandable Bubble icon.
+/// @group bubble
+$kendo-bubble-expandable-icon-padding-y: k-spacing(2.5) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/bubble/_variables.scss" with (
+    $kendo-bubble-border-radius: $kendo-bubble-border-radius,
+    $kendo-bubble-border-radius-sm: $kendo-bubble-border-radius-sm,
+    $kendo-bubble-padding-y: $kendo-bubble-padding-y,
+    $kendo-bubble-padding-x: $kendo-bubble-padding-x,
+    $kendo-bubble-border-width: $kendo-bubble-border-width,
+    $kendo-bubble-border-style: $kendo-bubble-border-style,
+    $kendo-bubble-line-height: $kendo-bubble-line-height,
+
+    $kendo-bubble-text: $kendo-bubble-text,
+    $kendo-bubble-bg: $kendo-bubble-bg,
+    $kendo-bubble-border: $kendo-bubble-border,
+    $kendo-bubble-shadow: $kendo-bubble-shadow,
+    $kendo-bubble-hover-bg: $kendo-bubble-hover-bg,
+    $kendo-bubble-hover-border: $kendo-bubble-hover-border,
+    $kendo-bubble-active-bg: $kendo-bubble-active-bg,
+    $kendo-bubble-active-border: $kendo-bubble-active-border,
+    $kendo-bubble-focus-bg: $kendo-bubble-focus-bg,
+    $kendo-bubble-focus-border: $kendo-bubble-focus-border,
+    $kendo-bubble-focus-shadow: $kendo-bubble-focus-shadow,
+    $kendo-bubble-expandable-spacing: $kendo-bubble-expandable-spacing,
+    $kendo-bubble-expandable-icon-padding-x: $kendo-bubble-expandable-icon-padding-x,
+    $kendo-bubble-expandable-icon-padding-y: $kendo-bubble-expandable-icon-padding-y,
+);

package/scss/chat/_index.scss

@@ -1,9 +1,17 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../icons/_index.scss" as *;
-@use "../input/_index.scss" as *;
+@use "../textarea/_index.scss" as *;
 @use "../card/_index.scss" as *;
+@use "../appbar/_index.scss" as *;
 @use "../toolbar/_index.scss" as *;
+@use "../bubble/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../dropzone/_index.scss" as *;
+@use "../avatar/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
+@use "../suggestion/_index.scss" as *;
+@use "../skeleton/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -14,10 +22,18 @@
 @mixin kendo-chat--styles() {
     @include import-once( "chat" ) {
         @include core-styles();
-        @include kendo-input--styles();
+        @include kendo-textarea--styles();
         @include kendo-card--styles();
         @include kendo-icon--styles();
+        @include kendo-appbar--styles();
         @include kendo-toolbar--styles();
+        @include kendo-bubble--styles();
+        @include kendo-suggestion--styles();
+        @include kendo-skeleton--styles();
+        @include kendo-upload--styles();
+        @include kendo-dropzone--styles();
+        @include kendo-avatar--styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-chat--layout();
         @include kendo-chat--theme();
     }

package/scss/chat/_layout.scss

@@ -1,38 +1,22 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
-@use "../button/_variables.scss" as *;
+@use "../bubble/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *;
 
 
 @mixin kendo-chat--layout() {
     @include kendo-chat--layout-base();
 
-    .k-chat {
-        .k-quick-reply {
-            position: relative;
-
-            &::before {
-                @include border-radius( inherit );
-                content: "";
-                background: currentColor;
-                opacity: 0;
-                display: block;
-                pointer-events: none;
-                position: absolute;
-                left: -$kendo-button-border-width;
-                right: -$kendo-button-border-width;
-                top: -$kendo-button-border-width;
-                bottom: -$kendo-button-border-width;
-                z-index: 0;
-                transition: opacity .2s ease-in-out;
-            }
+    .k-chat-file:has( + .k-chat-file) {
+        padding-bottom: calc( #{$kendo-chat-file-padding-y} / 2 );
+    }
 
-            // Focused state
-            &:focus,
-            &.k-focus {
-                &::before {
-                    opacity: $kendo-flat-button-focus-opacity;
-                }
-            }
+    .k-message-group-sender .k-chat-bubble {
+        &:focus,
+        &.k-focus {
+            outline-style: solid;
+            outline-width: calc( (#{$kendo-bubble-border-width} * 2 ));
+            outline-offset: calc( (#{$kendo-bubble-border-width} * 2 ) * -1);
         }
     }
 }

package/scss/chat/_theme.scss

@@ -1,18 +1,37 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
+@use "../bubble/_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *;
 
 
 @mixin kendo-chat--theme() {
     @include kendo-chat--theme-base();
 
-    .k-chat .k-quick-reply {
+    .k-chat {
+
+        .k-chat-download-button {
+            color: inherit;
+        }
+
+        .k-chat-file-size,
+        .k-chat-file-status {
+            font-size: var( --kendo-font-size-sm, inherit);
+        }
+    }
+
+    .k-message-group-sender .k-chat-bubble {
         &:focus,
         &.k-focus {
-            color: k-color(primary-on-surface);
+            outline-color: $kendo-chat-alt-bubble-focus-border;
+            box-shadow: inset 0 0 0 calc( #{$kendo-bubble-border-width} * 3 ) k-color(app-surface),
+                        inset 0 0 0 calc( #{$kendo-bubble-border-width} * 5 ) $kendo-chat-alt-bubble-focus-border;
+
+            &:hover,
+            &.k-hover {
+                box-shadow: inset 0 0 0 calc( #{$kendo-bubble-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-bubble-border-width} * 5 ) $kendo-chat-alt-bubble-hover-border;
+            }
         }
     }
 
-    .k-message-box {
-        background-color: k-color(surface-alt)
-    }
 }

package/scss/chat/_variables.scss

@@ -12,10 +12,10 @@ $kendo-chat-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Chat.
 /// @group chat
 $kendo-chat-padding-y: k-spacing(4) !default;
-/// The width of the Chat.
+/// The minimum width of the Chat.
 /// @group chat
-$kendo-chat-width: 500px !default;
-/// The height of the Chat.
+$kendo-chat-width: 320px !default;
+/// The minimum height of the Chat.
 /// @group chat
 $kendo-chat-height: 600px !default;
 /// The border width of the Chat.
@@ -31,13 +31,17 @@ $kendo-chat-font-size: var( --kendo-font-size, inherit )  !default;
 /// @group chat
 $kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The horizontal spacing between the items of the Chat.
-/// @group chat
-$kendo-chat-item-spacing-x: k-spacing(2) !default;
 /// The vertical spacing between the items of the Chat.
 /// @group chat
 $kendo-chat-item-spacing-y: k-spacing(4) !default;
 
+/// The maximum width of the Chat message.
+/// @group chat
+$kendo-chat-message-max-width: min(75%, 460px) !default;
+/// The spacing between the items of the Chat message.
+/// @group chat
+$kendo-chat-message-gap: k-spacing(2) !default;
+
 /// The horizontal padding of the Chat message list.
 /// @group chat
 $kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
@@ -48,6 +52,10 @@ $kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
 /// @group chat
 $kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
 
+/// The spacing between the icon and text in the Chat message status.
+/// @group chat
+$kendo-chat-message-status-gap: k-spacing(1) !default;
+
 /// The font size of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -56,13 +64,20 @@ $kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The text transform of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-transform: uppercase !default;
+$kendo-chat-timestamp-transform: none !default;
 /// The text color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
+/// The background color of the Chat timestamp separator.
+/// @group chat
+$kendo-chat-timestamp-separator-bg: k-color(border) !default;
+/// The spacing between the Chat timestamp and its separator.
+/// @group chat
+$kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
+
 
 /// The font size of the Chat message meta text.
 /// @group chat
@@ -76,41 +91,16 @@ $kendo-chat-message-meta-line-height: var( --kendo-line-height-lg, normal ) !def
 $kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the Chat author text.
 /// @group chat
-$kendo-chat-author-line-height: var( --kendo-line-height-lg, normal ) !default;
-
-/// The horizontal padding of the Chat bubble message.
-/// @group chat
-$kendo-chat-bubble-padding-x: k-spacing(3) !default;
-/// The vertical padding of the Chat bubble message.
-/// @group chat
-$kendo-chat-bubble-padding-y: k-spacing(2) !default;
-/// The spacing of the Chat bubble message.
-/// @group chat
-$kendo-chat-bubble-spacing: k-spacing(0.5) !default;
-/// The line height of the Chat bubble message.
-/// @group chat
-$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chat-author-line-height: var( --kendo-line-height-xs, normal ) !default;
 
-/// The border radius of the Chat bubble message.
+/// The text color of the Chat status.
 /// @group chat
-$kendo-chat-bubble-border-radius: 12px !default;
-/// The border radius of the Chat small bubble message
-/// @group chat
-$kendo-chat-bubble-border-radius-sm: 2px !default;
+$kendo-chat-status-text: k-color(subtle) !default;
 
-/// The size of the Chat Avatar.
-/// @group chat
-$kendo-chat-avatar-size: 32px !default;
-/// The spacing of the Chat Avatar.
+/// The spacing of the Chat bubble message.
 /// @group chat
-$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
+$kendo-chat-bubble-spacing: k-spacing(2) !default;
 
-/// The horizontal padding of the Chat Toolbar.
-/// @group chat
-$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
-/// The vertical padding of the Chat Toolbar.
-/// @group chat
-$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 /// The background color of the Chat Toolbar.
 /// @group chat
 $kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
@@ -121,20 +111,6 @@ $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
 /// @group chat
 $kendo-chat-toolbar-border: inherit !default;
 
-/// The horizontal padding of the Chat quick reply.
-/// @group chat
-$kendo-chat-quick-reply-padding-x: k-spacing(3) !default;
-/// The vertical padding of the Chat quick reply.
-/// @group chat
-$kendo-chat-quick-reply-padding-y: k-spacing(2) !default;
-/// The spacing of the Chat quick reply.
-/// @group chat
-$kendo-chat-quick-reply-spacing: k-spacing(2) !default;
-/// The line height of the Chat quick reply.
-/// @group chat
-$kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
-
-
 /// The background color of the Chat.
 /// @group chat
 $kendo-chat-bg: k-color(surface) !default;
@@ -145,25 +121,6 @@ $kendo-chat-text: k-color(on-app-surface) !default;
 /// @group chat
 $kendo-chat-border: k-color(border) !default;
 
-/// The background color of the Chat bubble.
-/// @group chat
-$kendo-chat-bubble-bg: k-color(surface-alt) !default;
-/// The text color of the Chat bubble.
-/// @group chat
-$kendo-chat-bubble-text: k-color(on-base) !default;
-/// The border color of the Chat bubble.
-/// @group chat
-$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
-/// The box shadow of the Chat bubble.
-/// @group chat
-$kendo-chat-bubble-shadow: k-elevation(1) !default;
-/// The shadow of the hovered Chat bubble.
-/// @group chat
-$kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
-/// The shadow of the selected Chat bubble.
-/// @group chat
-$kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
-
 /// The background color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-bg: k-color(primary) !default;
@@ -175,50 +132,102 @@ $kendo-chat-alt-bubble-text: k-color(on-primary) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 /// The shadow of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
-/// The shadow of the hovered Chat alt bubble.
-/// @group chat
-$kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;
-/// The shadow of the selected Chat alt bubble.
+$kendo-chat-alt-bubble-shadow: none !default;
+/// The background color of the hovered alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-hover-bg: k-color(primary-hover) !default;
+/// The border color of the hovered alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-bg !default;
+/// The background color of the active Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-active-bg: k-color(primary-active) !default;
+/// The border color of the active alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-bg !default;
+/// The background color of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-bg !default;
+/// The border color of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-bg !default;
+/// The box shadow of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-shadow: null !default;
+
+/// The color of the typing indicator dots.
 /// @group chat
-$kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
+$kendo-chat-typing-indicator-text: k-color(base-on-subtle) !default;
 
-/// The background color of the Chat quick reply.
+/// The width of a file in the Chat Textarea.
+/// @group chat
+$kendo-chat-file-width: 240px !default;
+/// The horizontal padding of the Chat file.
 /// @group chat
-$kendo-chat-quick-reply-bg: transparent !default;
-/// The text color of the Chat quick reply.
+$kendo-chat-file-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Chat file.
 /// @group chat
-$kendo-chat-quick-reply-text: k-color(primary) !default;
-/// The border color of the Chat quick reply.
+$kendo-chat-file-padding-y: k-spacing(2) !default;
+/// The spacing between the elements of the Chat file.
 /// @group chat
-$kendo-chat-quick-reply-border: k-color(primary) !default;
+$kendo-chat-file-gap: k-spacing(1) !default;
 
-/// The background color of the hovered Chat quick reply.
+/// The border width of the Chat file.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
-/// The text color of the hovered Chat quick reply.
+$kendo-chat-file-border-width: 1px !default;
+/// The border style of the Chat file.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: k-color(on-primary) !default;
-/// The border color of the hovered Chat quick reply.
+$kendo-chat-file-border-style: solid !default;
+
+/// The background color of the Chat file.
+/// @group chat
+$kendo-chat-file-bg: k-color(base-subtle) !default;
+/// The text color of the Chat file.
+/// @group chat
+$kendo-chat-file-text: k-color(base-on-subtle) !default;
+/// The border color of the Chat file.
+/// @group chat
+$kendo-chat-file-border: $kendo-chat-file-bg !default;
+/// The border-radius of the Chat file.
+/// @group chat
+$kendo-chat-file-border-radius: k-border-radius(md) !default;
+
+/// The horizontal padding of the file download wrapper.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
+$kendo-chat-file-download-padding-x: k-spacing(2) !default;
+/// The vertical padding of the file download wrapper.
+/// @group chat
+$kendo-chat-file-download-padding-y: k-spacing(2) !default;
 
-/// The shadow blur of the focused Chat quick reply.
+/// The border width of the Chat pinned message;
+/// @group chat
+$kendo-chat-message-pinned-border-width: 1px !default;
+/// The border style of the Chat pinned message;
+/// @group chat
+$kendo-chat-message-pinned-border-style: solid !default;
+/// The border color of the Chat pinned message;
 /// @group chat
-$kendo-chat-quick-reply-shadow-blur: unset !default;
-/// The shadow spread of the focused Chat quick reply.
+$kendo-chat-message-pinned-border-color: k-color(border) !default;
+
+/// The horizontal padding of the Chat message reference.
 /// @group chat
-$kendo-chat-quick-reply-shadow-spread: unset !default;
-/// The shadow opacity of the focused Chat quick reply.
+$kendo-chat-message-reference-padding-x: k-spacing(1) !default;
+/// The vertical padding of the Chat message reference.
 /// @group chat
-$kendo-chat-quick-reply-shadow-opacity: 0 !default;
+$kendo-chat-message-reference-padding-y: k-spacing(1) !default;
 
-/// The size of the Chat typing indicator dot.
+/// The background color of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-bg: k-color(surface) !default;
+/// The text color of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-text: k-color(on-app-surface) !default;
+/// The background color of the message reference marker.
 /// @group chat
-$kendo-chat-typing-indicator-dot-size: 8px !default;
-/// The spacing of the Chat typing indicator dot.
+$kendo-chat-message-reference-marker-bg: k-color(base-emphasis) !default;
+/// The background color of the message reference alt marker.
 /// @group chat
-$kendo-chat-typing-indicator-dot-spacing: 5px !default;
+$kendo-chat-message-reference-marker-alt-bg: k-color(primary-emphasis) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with (
     $kendo-chat-padding-x: $kendo-chat-padding-x,
@@ -229,61 +238,63 @@ $kendo-chat-typing-indicator-dot-spacing: 5px !default;
     $kendo-chat-font-family: $kendo-chat-font-family,
     $kendo-chat-font-size: $kendo-chat-font-size,
     $kendo-chat-line-height: $kendo-chat-line-height,
-    $kendo-chat-item-spacing-x: $kendo-chat-item-spacing-x,
     $kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y,
+    $kendo-chat-message-max-width: $kendo-chat-message-max-width,
+    $kendo-chat-message-gap: $kendo-chat-message-gap,
     $kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x,
     $kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y,
     $kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing,
+    $kendo-chat-message-status-gap: $kendo-chat-message-status-gap,
     $kendo-chat-timestamp-font-size: $kendo-chat-timestamp-font-size,
     $kendo-chat-timestamp-line-height: $kendo-chat-timestamp-line-height,
     $kendo-chat-timestamp-transform: $kendo-chat-timestamp-transform,
     $kendo-chat-timestamp-text: $kendo-chat-timestamp-text,
     $kendo-chat-timestamp-bg: $kendo-chat-timestamp-bg,
+    $kendo-chat-timestamp-separator-bg: $kendo-chat-timestamp-separator-bg,
+    $kendo-chat-timestamp-separator-spacing: $kendo-chat-timestamp-separator-spacing,
     $kendo-chat-message-meta-font-size: $kendo-chat-message-meta-font-size,
     $kendo-chat-message-meta-line-height: $kendo-chat-message-meta-line-height,
     $kendo-chat-author-font-size: $kendo-chat-author-font-size,
     $kendo-chat-author-line-height: $kendo-chat-author-line-height,
-    $kendo-chat-bubble-padding-x: $kendo-chat-bubble-padding-x,
-    $kendo-chat-bubble-padding-y: $kendo-chat-bubble-padding-y,
+    $kendo-chat-status-text: $kendo-chat-status-text,
     $kendo-chat-bubble-spacing: $kendo-chat-bubble-spacing,
-    $kendo-chat-bubble-line-height: $kendo-chat-bubble-line-height,
-    $kendo-chat-bubble-border-radius: $kendo-chat-bubble-border-radius,
-    $kendo-chat-bubble-border-radius-sm: $kendo-chat-bubble-border-radius-sm,
-    $kendo-chat-avatar-size: $kendo-chat-avatar-size,
-    $kendo-chat-avatar-spacing: $kendo-chat-avatar-spacing,
-    $kendo-chat-toolbar-padding-x: $kendo-chat-toolbar-padding-x,
-    $kendo-chat-toolbar-padding-y: $kendo-chat-toolbar-padding-y,
     $kendo-chat-toolbar-bg: $kendo-chat-toolbar-bg,
     $kendo-chat-toolbar-text: $kendo-chat-toolbar-text,
     $kendo-chat-toolbar-border: $kendo-chat-toolbar-border,
-    $kendo-chat-quick-reply-padding-x: $kendo-chat-quick-reply-padding-x,
-    $kendo-chat-quick-reply-padding-y: $kendo-chat-quick-reply-padding-y,
-    $kendo-chat-quick-reply-spacing: $kendo-chat-quick-reply-spacing,
-    $kendo-chat-quick-reply-line-height: $kendo-chat-quick-reply-line-height,
     $kendo-chat-bg: $kendo-chat-bg,
     $kendo-chat-text: $kendo-chat-text,
     $kendo-chat-border: $kendo-chat-border,
-    $kendo-chat-bubble-bg: $kendo-chat-bubble-bg,
-    $kendo-chat-bubble-text: $kendo-chat-bubble-text,
-    $kendo-chat-bubble-border: $kendo-chat-bubble-border,
-    $kendo-chat-bubble-shadow: $kendo-chat-bubble-shadow,
-    $kendo-chat-bubble-hover-shadow: $kendo-chat-bubble-hover-shadow,
-    $kendo-chat-bubble-selected-shadow: $kendo-chat-bubble-selected-shadow,
     $kendo-chat-alt-bubble-bg: $kendo-chat-alt-bubble-bg,
     $kendo-chat-alt-bubble-text: $kendo-chat-alt-bubble-text,
     $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-border,
     $kendo-chat-alt-bubble-shadow: $kendo-chat-alt-bubble-shadow,
-    $kendo-chat-alt-bubble-hover-shadow: $kendo-chat-alt-bubble-hover-shadow,
-    $kendo-chat-alt-bubble-selected-shadow: $kendo-chat-alt-bubble-selected-shadow,
-    $kendo-chat-quick-reply-bg: $kendo-chat-quick-reply-bg,
-    $kendo-chat-quick-reply-text: $kendo-chat-quick-reply-text,
-    $kendo-chat-quick-reply-border: $kendo-chat-quick-reply-border,
-    $kendo-chat-quick-reply-hover-bg: $kendo-chat-quick-reply-hover-bg,
-    $kendo-chat-quick-reply-hover-text: $kendo-chat-quick-reply-hover-text,
-    $kendo-chat-quick-reply-hover-border: $kendo-chat-quick-reply-hover-border,
-    $kendo-chat-quick-reply-shadow-blur: $kendo-chat-quick-reply-shadow-blur,
-    $kendo-chat-quick-reply-shadow-spread: $kendo-chat-quick-reply-shadow-spread,
-    $kendo-chat-quick-reply-shadow-opacity: $kendo-chat-quick-reply-shadow-opacity,
-    $kendo-chat-typing-indicator-dot-size: $kendo-chat-typing-indicator-dot-size,
-    $kendo-chat-typing-indicator-dot-spacing: $kendo-chat-typing-indicator-dot-spacing
+    $kendo-chat-alt-bubble-hover-bg: $kendo-chat-alt-bubble-hover-bg,
+    $kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-border,
+    $kendo-chat-alt-bubble-active-bg: $kendo-chat-alt-bubble-active-bg,
+    $kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-border,
+    $kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-focus-bg,
+    $kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-border,
+    $kendo-chat-alt-bubble-focus-shadow: $kendo-chat-alt-bubble-focus-shadow,
+    $kendo-chat-typing-indicator-text: $kendo-chat-typing-indicator-text,
+    $kendo-chat-file-width: $kendo-chat-file-width,
+    $kendo-chat-file-padding-x: $kendo-chat-file-padding-x,
+    $kendo-chat-file-padding-y: $kendo-chat-file-padding-y,
+    $kendo-chat-file-gap: $kendo-chat-file-gap,
+    $kendo-chat-file-border-width: $kendo-chat-file-border-width,
+    $kendo-chat-file-border-style: $kendo-chat-file-border-style,
+    $kendo-chat-file-bg: $kendo-chat-file-bg,
+    $kendo-chat-file-text: $kendo-chat-file-text,
+    $kendo-chat-file-border: $kendo-chat-file-border,
+    $kendo-chat-file-border-radius: $kendo-chat-file-border-radius,
+    $kendo-chat-file-download-padding-x: $kendo-chat-file-download-padding-x,
+    $kendo-chat-file-download-padding-y: $kendo-chat-file-download-padding-y,
+    $kendo-chat-message-pinned-border-width: $kendo-chat-message-pinned-border-width,
+    $kendo-chat-message-pinned-border-style: $kendo-chat-message-pinned-border-style,
+    $kendo-chat-message-pinned-border-color:  $kendo-chat-message-pinned-border-color,
+    $kendo-chat-message-reference-padding-x: $kendo-chat-message-reference-padding-x,
+    $kendo-chat-message-reference-padding-y: $kendo-chat-message-reference-padding-y,
+    $kendo-chat-message-reference-bg: $kendo-chat-message-reference-bg,
+    $kendo-chat-message-reference-text: $kendo-chat-message-reference-text,
+    $kendo-chat-message-reference-marker-bg: $kendo-chat-message-reference-marker-bg,
+    $kendo-chat-message-reference-marker-alt-bg: $kendo-chat-message-reference-marker-alt-bg,
 );