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

package/scss/bubble/_variables.scss

@@ -0,0 +1,92 @@
+@use "../core/_index.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(none) !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,56 +1,66 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./_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;
-
-            &:focus::after,
-            &.k-focus::after {
-                content: "";
-                position: absolute;
-                border: medium none;
-                border-radius: var(--kendo-border-radius-full, 9999px);
-                inset: $kendo-chat-quick-reply-focus-offset;
-                outline-width: $kendo-chat-quick-reply-focus-outline-width;
-                outline-style: $kendo-chat-quick-reply-focus-outline-style;
-                z-index: 1;
-            }
+    // Message group
+    .k-chat-message-group {
+
+        .k-chat-file-wrapper {
+            min-width: 0;
+            max-width: 100%;
+
         }
 
-        .k-card-deck-scrollwrap > .k-card-deck {
-            // hide scrollbar in chat
-            margin-block-end: calc( -1 * #{$kendo-chat-card-deck-scrollbar-size} );
-            padding-bottom: $kendo-chat-card-deck-scrollbar-size;
+    }
+
+    .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);
+            }
         }
+
     }
 
-    .k-card-subtitle {
-        font-weight: var( --kendo-font-weight, initial );
+
+    // Bubble
+    .k-chat-bubble {
+
+        a {
+            font-weight: normal;
+        }
     }
 
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        gap: $kendo-chat-toolbar-spacing;
+    // Message states
+    .k-message:has(.k-selected) {
 
-        .k-scroll-button {
-            padding-block: 0px;
-            padding-inline: $kendo-chat-scroll-button-padding;
+        .k-message-time,
+        .k-message-status {
+            gap: $kendo-chat-bubble-spacing;
         }
+    }
+
+    .k-chat .k-card-deck {
+        margin-inline: calc( #{$kendo-chat-message-list-padding-x} * -1 );
+        padding-block-start: $kendo-chat-message-list-padding-y;
+        padding-block-end: $kendo-chat-message-list-padding-y;
+        padding-inline: $kendo-chat-message-list-padding-x;
 
     }
 
-    .k-rtl,
-    [dir="rtl"] {
-        .k-message-box {
-            .k-button {
-                transform: scaleX(-1);
-            }
-        }
+    .k-chat .k-card-deck-scrollwrap {
+        margin-inline: calc( #{$kendo-chat-message-list-padding-x} * -1 );
+        padding-inline: $kendo-chat-message-list-padding-x;
     }
+
 }

package/scss/chat/_theme.scss

@@ -1,28 +1,23 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.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-chat-bubble {
-            transition: $kendo-chat-transition;
+    // Bubbles
+    .k-message-group-sender .k-chat-bubble {
 
-            a { color: $kendo-chat-link-text };
-            a:hover { color: $kendo-chat-link-hover-text };
+        &:focus,
+        &.k-focus {
+            outline-color: $kendo-chat-alt-bubble-focus-border;
+            box-shadow: inset 0 0 0 calc( #{$kendo-bubble-border-width} * 2 ) k-color(app-surface);
         }
 
-        .k-quick-reply {
-            &:focus,
-            &.k-focus {
-                box-shadow: none;
-            }
-
-            &:focus::after,
-            &.k-focus::after {
-                outline-color: $kendo-chat-quick-reply-focus-outline-color;
-            }
+        &:hover,
+        &.k-hover {
+            @include fill( $bg: $kendo-chat-alt-bubble-hover-bg, $border: $kendo-chat-alt-bubble-hover-border );
         }
     }
 }