@progress/kendo-theme-classic 13.0.0-dev.0 → 13.0.0-dev.2

package/scss/list/_variables.scss

@@ -11,6 +11,13 @@ $kendo-list-default-size: "md" !default;
 /// @group list
 $kendo-list-font-family: var( --kendo-font-family, inherit ) !default;
 
+/// The horizontal padding of the List container.
+/// @group list
+$kendo-list-container-padding-inline: k-spacing(2) !default;
+/// The vertical padding of the List container.
+/// @group list
+$kendo-list-container-padding-block: k-spacing(2) !default;
+
 /// The font size of the List component, if no size is set.
 /// @group list
 $kendo-list-font-size: null !default;
@@ -157,6 +164,14 @@ $kendo-list-md-item-line-height: null !default;
 /// @group list
 $kendo-list-lg-item-line-height: null !default;
 
+/// The gap of the List item components.
+/// @group list
+$kendo-list-item-gap: k-spacing(2) !default;
+
+/// The spacing between the List items.
+/// @group list
+$kendo-list-item-spacing: k-spacing(0.5) !default;
+
 /// The horizontal padding of the small List group item.
 /// @group list
 $kendo-list-sm-group-item-padding-x: k-spacing(2) !default;
@@ -169,43 +184,43 @@ $kendo-list-lg-group-item-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the small List group item.
 /// @group list
-$kendo-list-sm-group-item-padding-y: k-spacing(0.5) !default;
+$kendo-list-sm-group-item-padding-y: calc( #{k-spacing(.5)} + 1px ) !default;
 /// The vertical padding of the medium List group item.
 /// @group list
-$kendo-list-md-group-item-padding-y: k-spacing(1) !default;
+$kendo-list-md-group-item-padding-y: calc( #{k-spacing(1)} + 1px ) !default;
 /// The vertical padding of the large List group item.
 /// @group list
-$kendo-list-lg-group-item-padding-y: k-spacing(1.5) !default;
+$kendo-list-lg-group-item-padding-y: calc( #{k-spacing(1.5)} + 1px ) !default;
 
 /// The border width of the List group items.
 /// @group list
-$kendo-list-group-item-border-width: 1px 0 0 !default;
+$kendo-list-group-item-border-width: 0 !default;
 
 /// The font size of the List group items, if no size is set.
 /// @group list
-$kendo-list-group-item-font-size: null !default;
+$kendo-list-group-item-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the small List group item.
 /// @group list
-$kendo-list-sm-group-item-font-size: null !default;
+$kendo-list-sm-group-item-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium List group item.
 /// @group list
-$kendo-list-md-group-item-font-size: null !default;
+$kendo-list-md-group-item-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the large List group item.
 /// @group list
-$kendo-list-lg-group-item-font-size: null !default;
+$kendo-list-lg-group-item-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
 /// The line height of the List group items, if no size is set.
 /// @group list
-$kendo-list-group-item-line-height: null !default;
+$kendo-list-group-item-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The line height of the small List group item.
 /// @group list
-$kendo-list-sm-group-item-line-height: null !default;
+$kendo-list-sm-group-item-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The line height of the medium List group item.
 /// @group list
-$kendo-list-md-group-item-line-height: null !default;
+$kendo-list-md-group-item-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The line height of the large List group item.
 /// @group list
-$kendo-list-lg-group-item-line-height: null !default;
+$kendo-list-lg-group-item-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The font weight of a List group item.
 /// @group list
@@ -282,10 +297,13 @@ $kendo-list-item-bg: null !default;
 /// The text color of the List items.
 /// @group list
 $kendo-list-item-text: null !default;
+/// The border-radius of the List items.
+/// @group list
+$kendo-list-item-border-radius: k-border-radius(md) !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent ) !default;
+$kendo-list-item-hover-bg: color-mix(in srgb, k-color(on-app-surface) 6%, transparent ) !default;
 /// The text color of the hovered List items.
 /// @group list
 $kendo-list-item-hover-text: k-color(on-app-surface) !default;
@@ -302,39 +320,50 @@ $kendo-list-item-focus-shadow: inset 0 0 0 2px k-color(border-alt) !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: k-color(primary) !default;
+$kendo-list-item-selected-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent ) !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: k-color(on-primary) !default;
+$kendo-list-item-selected-text: k-color(on-app-surface) !default;
 
 /// The background color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-bg: k-color(primary-hover) !default;
+$kendo-list-item-selected-hover-bg: color-mix(in srgb, k-color(on-app-surface) 18%, transparent ) !default;
 /// The text color of the selected hovered List items.
 /// @group list
-$kendo-list-item-selected-hover-text: k-color(on-primary) !default;
+$kendo-list-item-selected-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the List group items.
 /// @group list
 $kendo-list-group-item-bg: null !default;
 /// The text color of the List group items.
 /// @group list
-$kendo-list-group-item-text: null !default;
+$kendo-list-group-item-text: k-color(subtle) !default;
 /// The border color of the List group items.
 /// @group list
 $kendo-list-group-item-border: inherit !default;
 /// The base shadow of the List group items.
 /// @group list
-$kendo-list-group-item-shadow: null !default;
+$kendo-list-group-item-shadow: inset 0 1px 0 k-color(border) !default;
 
 /// The color of the 'Option Label' text.
 /// @group list
 $kendo-list-option-label-text: k-color(subtle) !default;
 
+/// The font size of the List item description.
+/// @group list
+$kendo-list-item-description-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line of the list item description.
+/// @group list
+$kendo-list-item-description-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The text color of the list item description.
+/// @group list
+$kendo-list-item-description-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
     $kendo-list-default-size: $kendo-list-default-size,
     $kendo-list-font-family: $kendo-list-font-family,
+    $kendo-list-container-padding-inline: $kendo-list-container-padding-inline,
+    $kendo-list-container-padding-block: $kendo-list-container-padding-block,
     $kendo-list-font-size: $kendo-list-font-size,
     $kendo-list-sm-font-size: $kendo-list-sm-font-size,
     $kendo-list-md-font-size: $kendo-list-md-font-size,
@@ -373,6 +402,8 @@ $kendo-list-option-label-text: k-color(subtle) !default;
     $kendo-list-sm-item-line-height: $kendo-list-sm-item-line-height,
     $kendo-list-md-item-line-height: $kendo-list-md-item-line-height,
     $kendo-list-lg-item-line-height: $kendo-list-lg-item-line-height,
+    $kendo-list-item-gap: $kendo-list-item-gap,
+    $kendo-list-item-spacing: $kendo-list-item-spacing,
     $kendo-list-sm-group-item-padding-x: $kendo-list-sm-group-item-padding-x,
     $kendo-list-md-group-item-padding-x: $kendo-list-md-group-item-padding-x,
     $kendo-list-lg-group-item-padding-x: $kendo-list-lg-group-item-padding-x,
@@ -416,6 +447,7 @@ $kendo-list-option-label-text: k-color(subtle) !default;
     $kendo-list-header-shadow: $kendo-list-header-shadow,
     $kendo-list-item-bg: $kendo-list-item-bg,
     $kendo-list-item-text: $kendo-list-item-text,
+    $kendo-list-item-border-radius: $kendo-list-item-border-radius,
     $kendo-list-item-hover-bg: $kendo-list-item-hover-bg,
     $kendo-list-item-hover-text: $kendo-list-item-hover-text,
     $kendo-list-item-focus-bg: $kendo-list-item-focus-bg,
@@ -429,5 +461,8 @@ $kendo-list-option-label-text: k-color(subtle) !default;
     $kendo-list-group-item-text: $kendo-list-group-item-text,
     $kendo-list-group-item-border: $kendo-list-group-item-border,
     $kendo-list-group-item-shadow: $kendo-list-group-item-shadow,
-    $kendo-list-option-label-text: $kendo-list-option-label-text
+    $kendo-list-option-label-text: $kendo-list-option-label-text,
+    $kendo-list-item-description-text: $kendo-list-item-description-text,
+    $kendo-list-item-description-font-size: $kendo-list-item-description-font-size,
+    $kendo-list-item-description-line-height: $kendo-list-item-description-line-height
 );

package/scss/prompt-box/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-prompt-box--styles() {
+    @include import-once( "prompt-box" ) {
+        @include core-styles();
+        @include kendo-prompt-box--layout();
+        @include kendo-prompt-box--theme();
+    }
+}

package/scss/prompt-box/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/prompt-box/_layout.scss" as *;
+
+
+@mixin kendo-prompt-box--layout() {
+    @include kendo-prompt-box--layout-base();
+}

package/scss/prompt-box/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/prompt-box/_theme.scss" as *;
+
+
+@mixin kendo-prompt-box--theme() {
+    @include kendo-prompt-box--theme-base();
+}

package/scss/prompt-box/_variables.scss

@@ -0,0 +1,34 @@
+@use "../core/_index.scss" as *;
+
+// Prompt box
+
+/// The border radius of the PromptBox.
+/// @group prompt-box
+$kendo-prompt-box-border-radius: k-border-radius(xxl) !default;
+
+/// The box shadow of the PromptBox.
+/// @group prompt-box
+$kendo-prompt-box-box-shadow: k-elevation(1) !default;
+
+/// The padding of the PromptBox header.
+/// @group prompt-box
+$kendo-prompt-box-header-padding: k-spacing(2) !default;
+/// The inner padding of the PromptBox input.
+/// @group prompt-box
+$kendo-prompt-box-input-inner-padding: k-spacing(3) !default;
+/// The padding of the PromptBox affix.
+/// @group prompt-box
+$kendo-prompt-box-affix-padding: k-spacing(2) !default;
+
+/// The spacing between the PromptBox affixes.
+/// @group prompt-box
+$kendo-prompt-box-affix-spacing: k-spacing(1) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/prompt-box/_variables.scss" with (
+    $kendo-prompt-box-border-radius: $kendo-prompt-box-border-radius,
+    $kendo-prompt-box-box-shadow: $kendo-prompt-box-box-shadow,
+    $kendo-prompt-box-header-padding: $kendo-prompt-box-header-padding,
+    $kendo-prompt-box-input-inner-padding: $kendo-prompt-box-input-inner-padding,
+    $kendo-prompt-box-affix-padding: $kendo-prompt-box-affix-padding,
+    $kendo-prompt-box-affix-spacing: $kendo-prompt-box-affix-spacing
+);

package/scss/segmented-control/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-segmented-control--styles() {
+    @include import-once( "segmented-control" ) {
+        @include core-styles();
+        @include kendo-segmented-control--layout();
+        @include kendo-segmented-control--theme();
+    }
+}

package/scss/segmented-control/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/segmented-control/_layout.scss" as *;
+
+
+@mixin kendo-segmented-control--layout() {
+    @include kendo-segmented-control--layout-base();
+}

package/scss/segmented-control/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/segmented-control/_theme.scss" as *;
+
+
+@mixin kendo-segmented-control--theme() {
+    @include kendo-segmented-control--theme-base();
+}

package/scss/segmented-control/_variables.scss

@@ -0,0 +1,142 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+
+
+// Segmented control
+
+/// The default size of the Segmented control.
+/// @group segmented-control
+/// @role default
+$kendo-segmented-control-default-size: "md" !default;
+
+/// The horizontal padding of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-padding-x: k-spacing(0.5) !default;
+/// The vertical padding of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-padding-y: k-spacing(0.5) !default;
+/// The border radius of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-border-radius: k-border-radius(full) !default;
+
+/// The background color of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-bg: k-color(base-subtle) !default;
+/// The text color of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-text: k-color(on-app-surface) !default;
+
+/// The font size of the small Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sm-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the medium Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The font family of the Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-font-family: var( --kendo-font-family, inherit ) !default;
+
+/// The line height of the small Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the medium Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the large Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-lg-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The border radius of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-border-radius: $kendo-segmented-control-border-radius !default;
+/// The box shadow of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-shadow: none !default;
+/// The background of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-bg: k-color(surface-alt) !default;
+/// The text color of the Segmented Control thumb.
+/// @group segmented-control
+$kendo-segmented-control-thumb-text: $kendo-segmented-control-text !default;
+
+/// The horizontal padding of the small Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-padding-x: k-spacing(3) !default;
+/// The horizontal padding of the medium Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-md-button-padding-x: k-spacing(3) !default;
+/// The horizontal padding of the large Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-padding-y: k-spacing(1px) !default;
+/// The vertical padding of the medium Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-md-button-padding-y: calc( #{k-spacing(.5)} + 1px ) !default;
+/// The vertical padding of the large Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-padding-y: calc( #{k-spacing(1.5)} + 1px ) !default;
+
+/// The width of the border around the Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-button-border-width: 0px !default;
+/// The border radius of the Segmented Control button.
+/// @group segmented-control
+$kendo-segmented-control-button-border-radius: $kendo-segmented-control-thumb-border-radius !default;
+
+/// The gap of the items inside the small Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-sm-button-gap: k-spacing(1.5) !default;
+/// The gap of the items inside the medium Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-md-button-gap: k-spacing(1.5) !default;
+/// The gap of the items inside the large Segmented Control buttons.
+/// @group segmented-control
+$kendo-segmented-control-lg-button-gap: k-spacing(2) !default;
+
+/// The background color of the hovered button inside Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-button-hover-bg: k-color(base-hover) !default;
+/// The indication of the focused button inside Segmented Control.
+/// @group segmented-control
+$kendo-segmented-control-button-focus-indicator: inset 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent) !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/segmented-control/_variables.scss" with (
+    $kendo-segmented-control-default-size: $kendo-segmented-control-default-size,
+    $kendo-segmented-control-padding-x: $kendo-segmented-control-padding-x,
+    $kendo-segmented-control-padding-y: $kendo-segmented-control-padding-y,
+    $kendo-segmented-control-border-radius: $kendo-segmented-control-border-radius,
+    $kendo-segmented-control-bg: $kendo-segmented-control-bg,
+    $kendo-segmented-control-text: $kendo-segmented-control-text,
+    $kendo-segmented-control-sm-font-size: $kendo-segmented-control-sm-font-size,
+    $kendo-segmented-control-md-font-size: $kendo-segmented-control-md-font-size,
+    $kendo-segmented-control-lg-font-size: $kendo-segmented-control-lg-font-size,
+    $kendo-segmented-control-font-family: $kendo-segmented-control-font-family,
+    $kendo-segmented-control-sm-line-height: $kendo-segmented-control-sm-line-height,
+    $kendo-segmented-control-md-line-height: $kendo-segmented-control-md-line-height,
+    $kendo-segmented-control-lg-line-height: $kendo-segmented-control-lg-line-height,
+    $kendo-segmented-control-thumb-border-radius: $kendo-segmented-control-thumb-border-radius,
+    $kendo-segmented-control-thumb-shadow: $kendo-segmented-control-thumb-shadow,
+    $kendo-segmented-control-thumb-bg: $kendo-segmented-control-thumb-bg,
+    $kendo-segmented-control-thumb-text: $kendo-segmented-control-thumb-text,
+    $kendo-segmented-control-sm-button-padding-x: $kendo-segmented-control-sm-button-padding-x,
+    $kendo-segmented-control-md-button-padding-x: $kendo-segmented-control-md-button-padding-x,
+    $kendo-segmented-control-lg-button-padding-x: $kendo-segmented-control-lg-button-padding-x,
+    $kendo-segmented-control-sm-button-padding-y: $kendo-segmented-control-sm-button-padding-y,
+    $kendo-segmented-control-md-button-padding-y: $kendo-segmented-control-md-button-padding-y,
+    $kendo-segmented-control-lg-button-padding-y: $kendo-segmented-control-lg-button-padding-y,
+    $kendo-segmented-control-button-border-width: $kendo-segmented-control-button-border-width,
+    $kendo-segmented-control-button-border-radius: $kendo-segmented-control-button-border-radius,
+    $kendo-segmented-control-sm-button-gap: $kendo-segmented-control-sm-button-gap,
+    $kendo-segmented-control-md-button-gap: $kendo-segmented-control-md-button-gap,
+    $kendo-segmented-control-lg-button-gap: $kendo-segmented-control-lg-button-gap,
+    $kendo-segmented-control-button-hover-bg: $kendo-segmented-control-button-hover-bg,
+    $kendo-segmented-control-button-focus-indicator: $kendo-segmented-control-button-focus-indicator,
+);

package/scss/smart-box/_index.scss

@@ -0,0 +1,24 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+@use "../segmented-control/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-smart-box--styles() {
+    @include import-once( "smart-box" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-segmented-control--styles();
+        @include kendo-smart-box--layout();
+        @include kendo-smart-box--theme();
+    }
+}

package/scss/smart-box/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/smart-box/_layout.scss" as *;
+
+
+@mixin kendo-smart-box--layout() {
+    @include kendo-smart-box--layout-base();
+}

package/scss/smart-box/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/smart-box/_theme.scss" as *;
+
+
+@mixin kendo-smart-box--theme() {
+    @include kendo-smart-box--theme-base();
+}

package/scss/smart-box/_variables.scss

@@ -0,0 +1,71 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+
+// Smart box
+
+/// The default size of the SmartBox.
+/// @group smart-box
+/// @role default
+$kendo-smart-box-default-size: "md" !default;
+/// The default roundness of the SmartBox.
+/// @group smart-box
+/// @role default
+$kendo-smart-box-default-roundness: "full" !default;
+
+/// The spacing between elements in the suffix of the Smart box.
+/// @group smart-box
+$kendo-smart-box-suffix-spacing: k-spacing(1) !default;
+
+/// The horizontal padding of the small Smart box.
+/// @group smart-box
+$kendo-smart-box-sm-padding-x: k-spacing(0) !default;
+/// The horizontal padding of the medium Smart box.
+/// @group smart-box
+$kendo-smart-box-md-padding-x: k-spacing(.5) !default;
+/// The horizontal padding of the large Smart box.
+/// @group smart-box
+$kendo-smart-box-lg-padding-x: k-spacing(2) !default;
+
+/// The horizontal margin of the prefix icon in the small Smart box.
+/// @group smart-box
+$kendo-smart-box-sm-prefix-margin-x: k-spacing(1) !default;
+/// The horizontal margin of the prefix icon in the medium Smart box.
+/// @group smart-box
+$kendo-smart-box-md-prefix-margin-x: k-spacing(1) !default;
+/// The horizontal margin of the prefix icon in the large Smart box.
+/// @group smart-box
+$kendo-smart-box-lg-prefix-margin-x: k-spacing(0) !default;
+
+/// The inline padding of the popup of the Smart box.
+/// @group smart-box
+$kendo-smart-box-popup-padding-inline: k-spacing(2) !default;
+/// The block padding of the popup of the Smart box.
+/// @group smart-box
+$kendo-smart-box-popup-padding-block: k-spacing(2) !default;
+/// The border radius of the popup of the Smart box.
+/// @group smart-box
+$kendo-smart-box-popup-border-radius: k-border-radius(xxl) !default;
+/// The spacing of the popup of the Smart box.
+/// @group smart-box
+$kendo-smart-box-popup-spacing: k-spacing(2) !default;
+/// The margin of the segmented control in the popup of the Smart box.
+/// @group smart-box
+$kendo-smart-box-popup-segmented-control-margin: k-spacing(2) !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/smart-box/_variables.scss" with (
+    $kendo-smart-box-default-size: $kendo-smart-box-default-size,
+    $kendo-smart-box-default-roundness: $kendo-smart-box-default-roundness,
+    $kendo-smart-box-suffix-spacing: $kendo-smart-box-suffix-spacing,
+    $kendo-smart-box-sm-padding-x: $kendo-smart-box-sm-padding-x,
+    $kendo-smart-box-md-padding-x: $kendo-smart-box-md-padding-x,
+    $kendo-smart-box-lg-padding-x: $kendo-smart-box-lg-padding-x,
+    $kendo-smart-box-sm-prefix-margin-x: $kendo-smart-box-sm-prefix-margin-x,
+    $kendo-smart-box-md-prefix-margin-x: $kendo-smart-box-md-prefix-margin-x,
+    $kendo-smart-box-lg-prefix-margin-x: $kendo-smart-box-lg-prefix-margin-x,
+    $kendo-smart-box-popup-padding-inline: $kendo-smart-box-popup-padding-inline,
+    $kendo-smart-box-popup-padding-block: $kendo-smart-box-popup-padding-block,
+    $kendo-smart-box-popup-border-radius: $kendo-smart-box-popup-border-radius,
+    $kendo-smart-box-popup-spacing: $kendo-smart-box-popup-spacing,
+    $kendo-smart-box-popup-segmented-control-margin: $kendo-smart-box-popup-segmented-control-margin,
+);

package/scss/suggestion/_variables.scss

@@ -3,7 +3,7 @@
 
 /// The vertical padding of the Suggestion wrapper.
 /// @group suggestion
-$kendo-suggestion-padding-y: k-spacing(2) !default;
+$kendo-suggestion-padding-y: k-spacing(1.5) !default;
 /// The horizontal padding of the Suggestion wrapper.
 /// @group suggestion
 $kendo-suggestion-padding-x: k-spacing(3) !default;
@@ -17,12 +17,16 @@ $kendo-suggestion-border-width: 1px !default;
 /// @group suggestion
 $kendo-suggestion-border-style: solid !default;
 
+/// The font size of the Suggestion.
+/// @group suggestion
+$kendo-suggestion-font-size: var( --kendo-font-size, inherit ) !default;
+
 /// The line height of the Suggestion.
 /// @group suggestion
 $kendo-suggestion-line-height: var( --kendo-line-height, normal ) !default;
 /// The border radius of the Suggestion.
 /// @group suggestion
-$kendo-suggestion-border-radius: k-border-radius(xxl) !default;
+$kendo-suggestion-border-radius: k-border-radius(full) !default;
 
 /// The shadow blur of the focused Suggestion.
 /// @group suggestion
@@ -32,23 +36,29 @@ $kendo-suggestion-focus-shadow-blur: 0 !default;
 $kendo-suggestion-focus-shadow-spread: 2px !default;
 /// The shadow color of the focused Suggestion.
 /// @group suggestion
-$kendo-suggestion-focus-shadow-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-suggestion-focus-shadow-color: color-mix(in srgb, currentColor 16%, transparent) !default;
 
 /// The default theme color of the Suggestion.
 /// @group suggestion
 /// @role default
 $kendo-suggestion-default-theme-color: "base" !default;
 
+/// The gradient used for scroll indicators in the Suggestion group.
+/// @group suggestion
+$kendo-suggestion-scroll-gradient: rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 1) 100% !default;
+
 @forward "@progress/kendo-theme-core/scss/components/suggestion/_variables.scss" with (
     $kendo-suggestion-padding-y: $kendo-suggestion-padding-y,
     $kendo-suggestion-padding-x: $kendo-suggestion-padding-x,
     $kendo-suggestion-spacing: $kendo-suggestion-spacing,
     $kendo-suggestion-border-width: $kendo-suggestion-border-width,
     $kendo-suggestion-border-style: $kendo-suggestion-border-style,
+    $kendo-suggestion-font-size: $kendo-suggestion-font-size,
     $kendo-suggestion-line-height: $kendo-suggestion-line-height,
     $kendo-suggestion-border-radius: $kendo-suggestion-border-radius,
     $kendo-suggestion-focus-shadow-blur: $kendo-suggestion-focus-shadow-blur,
     $kendo-suggestion-focus-shadow-spread: $kendo-suggestion-focus-shadow-spread,
     $kendo-suggestion-focus-shadow-color: $kendo-suggestion-focus-shadow-color,
-    $kendo-suggestion-default-theme-color: $kendo-suggestion-default-theme-color
+    $kendo-suggestion-default-theme-color: $kendo-suggestion-default-theme-color,
+    $kendo-suggestion-scroll-gradient: $kendo-suggestion-scroll-gradient
 );

package/scss/toolbar/_variables.scss

@@ -128,6 +128,9 @@ $kendo-toolbar-separator-border: inherit !default;
 /// The width of the input in the Toolbar.
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
+/// The minimum width of the Smart ToolBox in the Toolbar.
+/// @group toolbar
+$kendo-toolbar-smart-box-min-width: 350px !default;
 
 /// The box shadow of the focused Toolbar item.
 /// @group toolbar
@@ -180,6 +183,7 @@ $kendo-toolbar-overflow-button-padding-x: $kendo-menu-popup-md-item-padding-x !d
     $kendo-toolbar-flat-shadow: $kendo-toolbar-flat-shadow,
     $kendo-toolbar-separator-border: $kendo-toolbar-separator-border,
     $kendo-toolbar-input-width: $kendo-toolbar-input-width,
+    $kendo-toolbar-smart-box-min-width: $kendo-toolbar-smart-box-min-width,
     $kendo-toolbar-item-shadow: $kendo-toolbar-item-shadow,
     $kendo-toolbar-scroll-overlay: $kendo-toolbar-scroll-overlay,
     $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay,