feat(prompt): update prompt styles

zhpenkov · zhpenkov · commit 0cac61b36d68 · 2025-07-08T16:08:29.000+03:00
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -266,7 +266,6 @@ $kendo-flat-button-focus-ring-opacity: .12 !default;
 /// @group button
 $kendo-button-transition: $kendo-transition !default;
 
-
 @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
     $kendo-button-border-width: $kendo-button-border-width,
     $kendo-button-border-radius: $kendo-button-border-radius,
diff --git a/packages/bootstrap/scss/fab/_theme.scss b/packages/bootstrap/scss/fab/_theme.scss
@@ -48,6 +48,30 @@
         }
     }
 
+    // Generating state
+    .k-fab-solid-primary.k-generating {
+
+        animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
+
+        @keyframes k-fab-generating {
+            0% {
+                background-color: k-color(primary-active);
+                border: k-color(primary-active);
+                outline-color: k-color(primary-active);
+            }
+            50% {
+                background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+            }
+            100% {
+                background-color: k-color(primary-active);
+                border: k-color(primary-active);
+                outline-color: k-color(primary-active);
+            }
+        }
+    }
+
     // Disabled state
     @each $name, $color in $kendo-fab-theme-colors {
         .k-fab-solid-#{$name}:disabled,
diff --git a/packages/bootstrap/scss/fab/_variables.scss b/packages/bootstrap/scss/fab/_variables.scss
@@ -180,6 +180,10 @@ $kendo-fab-item-outline-width: 3px !default;
 /// @group floating-action-button
 $kendo-fab-item-outline-color: $kendo-button-bg !default;
 
+/// Тhe opacity of the generating FAB.
+/// @group floating-action-button
+$kendo-fab-generating-opacity: 40% !default;
+
 
 @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
     $kendo-fab-border-width: $kendo-fab-border-width,
@@ -227,5 +231,6 @@ $kendo-fab-item-outline-color: $kendo-button-bg !default;
     $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
     $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
     $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
-    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color,
+    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
 );
diff --git a/packages/bootstrap/scss/index.scss b/packages/bootstrap/scss/index.scss
@@ -109,6 +109,7 @@
 @forward "./pdf-viewer/_index.scss";
 @forward "./scroller/_index.scss";
 @forward "./scrollview/_index.scss";
+@forward "./speech-to-text-button/_index.scss";
 @forward "./prompt/_index.scss";
 @forward "./dataviz/_index.scss";
 @forward "./chart-wizard/_index.scss";
@@ -118,7 +119,6 @@
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
 @forward "./marquee/_index.scss";
-@forward "./speech-to-text-button/_index.scss";
 
 
 // Use component modules
diff --git a/packages/bootstrap/scss/prompt/_index.scss b/packages/bootstrap/scss/prompt/_index.scss
@@ -1,6 +1,7 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -11,6 +12,7 @@
 @mixin kendo-prompt--styles() {
     @include import-once( "prompt" ) {
         @include core-styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
         @include kendo-utils--flex-grid--flex-direction();
diff --git a/packages/classic/scss/fab/_variables.scss b/packages/classic/scss/fab/_variables.scss
@@ -180,6 +180,10 @@ $kendo-fab-item-outline-width: k-spacing(0.5) !default;
 /// @group floating-action-button
 $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
 
+/// Тhe opacity of the generating FAB.
+/// @group floating-action-button
+$kendo-fab-generating-opacity: 40% !default;
+
 
 @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
     $kendo-fab-border-width: $kendo-fab-border-width,
@@ -227,5 +231,6 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
     $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
     $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
-    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color,
+    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
 );
diff --git a/packages/classic/scss/index.scss b/packages/classic/scss/index.scss
@@ -109,6 +109,7 @@
 @forward "./pdf-viewer/_index.scss";
 @forward "./scroller/_index.scss";
 @forward "./scrollview/_index.scss";
+@forward "./speech-to-text-button/_index.scss";
 @forward "./prompt/_index.scss";
 @forward "./dataviz/_index.scss";
 @forward "./chart-wizard/_index.scss";
@@ -118,7 +119,6 @@
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
 @forward "./marquee/_index.scss";
-@forward "./speech-to-text-button/_index.scss";
 
 
 // Use component modules
diff --git a/packages/classic/scss/prompt/_index.scss b/packages/classic/scss/prompt/_index.scss
@@ -1,6 +1,7 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -11,6 +12,7 @@
 @mixin kendo-prompt--styles() {
     @include import-once( "prompt" ) {
         @include core-styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
         @include kendo-utils--flex-grid--flex-direction();
diff --git a/packages/core/scss/components/button/_layout.scss b/packages/core/scss/components/button/_layout.scss
@@ -323,8 +323,6 @@
     }
 
 
-
-
     // Button focus ring
     .k-button { // stylelint-disable-line
 
diff --git a/packages/core/scss/components/fab/_theme.scss b/packages/core/scss/components/fab/_theme.scss
@@ -50,6 +50,30 @@
         }
     }
 
+    // Generating state
+    .k-fab-solid-primary.k-generating {
+
+        animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
+
+        @keyframes k-fab-generating {
+            0% {
+                background-color: k-color(primary-active);
+                border: k-color(primary-active);
+                outline-color: k-color(primary-active);
+            }
+            50% {
+                background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+            }
+            100% {
+                background-color: k-color(primary-active);
+                border: k-color(primary-active);
+                outline-color: k-color(primary-active);
+            }
+        }
+    }
+
     // Disabled state
     @each $name, $color in $kendo-fab-theme-colors {
         .k-disabled.k-fab-solid-#{$name},
diff --git a/packages/core/scss/components/fab/_variables.scss b/packages/core/scss/components/fab/_variables.scss
@@ -59,3 +59,5 @@ $kendo-fab-item-active-shadow: null !default;
 $kendo-fab-item-outline-style: null !default;
 $kendo-fab-item-outline-width: null !default;
 $kendo-fab-item-outline-color: null !default;
+
+$kendo-fab-generating-opacity: null !default;
diff --git a/packages/core/scss/components/prompt/_index.scss b/packages/core/scss/components/prompt/_index.scss
@@ -1,6 +1,7 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -11,6 +12,7 @@
 @mixin kendo-prompt--styles() {
     @include import-once( "prompt" ) {
         @include core-styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
         @include kendo-utils--flex-grid--flex-direction();
diff --git a/packages/core/scss/components/prompt/_layout.scss b/packages/core/scss/components/prompt/_layout.scss
@@ -51,6 +51,7 @@
         align-self: stretch;
     }
 
+    // Remove when k-suggestion is adopted
     .k-prompt-suggestion {
         border-width: 1px;
         border-style: solid;
@@ -70,6 +71,10 @@
         margin: 0;
     }
 
+    // Stop FAB
+    .k-prompt-stop-fab {
+        z-index: 1;
+    }
 }
 
 
diff --git a/packages/core/scss/components/prompt/_theme.scss b/packages/core/scss/components/prompt/_theme.scss
@@ -27,6 +27,7 @@
         );
     }
 
+    // Remove when k-suggestion is adopted
     .k-prompt-suggestion {
         @include fill(
             $kendo-prompt-suggestion-text,
diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss
@@ -179,6 +179,10 @@ $kendo-fab-item-outline-width: k-spacing(0.5) !default;
 /// @group floating-action-button
 $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
 
+/// Тhe opacity of the generating FAB.
+/// @group floating-action-button
+$kendo-fab-generating-opacity: 40% !default;
+
 @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
     $kendo-fab-border-width: $kendo-fab-border-width,
     $kendo-fab-font-family: $kendo-fab-font-family,
@@ -225,5 +229,6 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
     $kendo-fab-item-active-shadow: $kendo-fab-item-active-shadow,
     $kendo-fab-item-outline-style: $kendo-fab-item-outline-style,
     $kendo-fab-item-outline-width: $kendo-fab-item-outline-width,
-    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color
+    $kendo-fab-item-outline-color: $kendo-fab-item-outline-color,
+    $kendo-fab-generating-opacity: $kendo-fab-generating-opacity
 );
diff --git a/packages/default/scss/index.scss b/packages/default/scss/index.scss
@@ -109,6 +109,7 @@
 @forward "./pdf-viewer/_index.scss";
 @forward "./scroller/_index.scss";
 @forward "./scrollview/_index.scss";
+@forward "./speech-to-text-button/_index.scss";
 @forward "./prompt/_index.scss";
 @forward "./dataviz/_index.scss";
 @forward "./chart-wizard/_index.scss";
@@ -118,7 +119,6 @@
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
 @forward "./marquee/_index.scss";
-@forward "./speech-to-text-button/_index.scss";
 
 
 // Use component modules
diff --git a/packages/default/scss/prompt/_index.scss b/packages/default/scss/prompt/_index.scss
@@ -1,6 +1,7 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -11,6 +12,7 @@
 @mixin kendo-prompt--styles() {
     @include import-once( "prompt" ) {
         @include core-styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
         @include kendo-utils--flex-grid--flex-direction();
diff --git a/packages/fluent/scss/fab/_theme.scss b/packages/fluent/scss/fab/_theme.scss
@@ -44,6 +44,25 @@
             --kendo-fab-border: var( --kendo-fab-selected-border );
         }
 
+        &.k-generating {
+            animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
+        }
+
+        @keyframes k-fab-generating {
+            0% {
+                background-color: var( --kendo-fab-active-bg );
+                border: var( --kendo-fab-active-bg );
+            }
+            50% {
+                background-color: color-mix(in srgb, var( --kendo-fab-active-bg ) $kendo-fab-generating-opacity, k-color(surface-alt));
+                border: color-mix(in srgb, var( --kendo-fab-active-bg ) $kendo-fab-generating-opacity, k-color(surface-alt));
+            }
+            100% {
+                background-color: var( --kendo-fab-active-bg );
+                border: var( --kendo-fab-active-bg );
+            }
+        }
+
         &:disabled,
         &.k-disabled {
             --kendo-fab-text: var( --kendo-fab-disabled-text );
diff --git a/packages/fluent/scss/fab/_variables.scss b/packages/fluent/scss/fab/_variables.scss
@@ -185,3 +185,7 @@ $kendo-fab-item-active-bg: k-color(base-active) !default;
 /// The border color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-border: k-color(border) !default;
+
+/// Тhe opacity of the generating FAB.
+/// @group floating-action-button
+$kendo-fab-generating-opacity: 60% !default;
diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
@@ -109,6 +109,7 @@
 @forward "./pdf-viewer/_index.scss";
 @forward "./scroller/_index.scss";
 @forward "./scrollview/_index.scss";
+@forward "./speech-to-text-button/_index.scss";
 @forward "./prompt/_index.scss";
 @forward "./dataviz/_index.scss";
 @forward "./chart-wizard/_index.scss";
@@ -118,7 +119,6 @@
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
 @forward "./marquee/_index.scss";
-@forward "./speech-to-text-button/_index.scss";
 
 
 // Use component modules
diff --git a/packages/fluent/scss/prompt/_index.scss b/packages/fluent/scss/prompt/_index.scss
@@ -1,6 +1,7 @@
 // Dependencies
 @use "../core/_index.scss" as *;
 @use "../utils/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
 
 // Component
 @forward "./_variables.scss";
@@ -11,6 +12,7 @@
 @mixin kendo-prompt--styles() {
     @include import-once( "prompt" ) {
         @include core-styles();
+        @include kendo-speech-to-text-button--styles();
         @include kendo-prompt--layout();
         @include kendo-prompt--theme();
         @include kendo-utils--flex-grid--flex-direction();
diff --git a/packages/fluent/scss/prompt/_layout.scss b/packages/fluent/scss/prompt/_layout.scss
@@ -52,6 +52,7 @@
         align-self: stretch;
     }
 
+    // Remove when k-suggestion is adopted
     .k-prompt-suggestion {
         border-width: 1px;
         border-style: solid;
@@ -71,4 +72,8 @@
         margin: 0;
     }
 
+    // Stop FAB
+    .k-prompt-stop-fab {
+        z-index: 1;
+    }
 }
diff --git a/packages/fluent/scss/prompt/_theme.scss b/packages/fluent/scss/prompt/_theme.scss
@@ -27,6 +27,7 @@
         );
     }
 
+    // Remove when k-suggestion is adopted
     .k-prompt-suggestion {
         @include fill(
             var( --kendo-prompt-suggestion-text, #{$kendo-prompt-suggestion-text} ),
diff --git a/packages/material/scss/fab/_theme.scss b/packages/material/scss/fab/_theme.scss
diff --git a/packages/material/scss/fab/_variables.scss b/packages/material/scss/fab/_variables.scss
diff --git a/packages/material/scss/index.scss b/packages/material/scss/index.scss
diff --git a/packages/material/scss/prompt/_index.scss b/packages/material/scss/prompt/_index.scss
diff --git a/packages/material/scss/prompt/_layout.scss b/packages/material/scss/prompt/_layout.scss

Original file line number	Diff line number	Diff line change
`@@ -323,8 +323,6 @@`
`323`	`323`	`}`
`324`	`324`
`325`	`325`
`326`		`-`
`327`		`-`
`328`	`326`	`// Button focus ring`
`329`	`327`	`.k-button { // stylelint-disable-line`
`330`	`328`