@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0-dev.1

package/scss/calendar/_variables.scss

@@ -14,18 +14,21 @@ $kendo-calendar-border-width: 1px !default;
 $kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Calendar.
 /// @group calendar
-$kendo-calendar-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-calendar-font-size: var( --kendo-font-size-lg, inherit )  !default;
 /// The line height of the Calendar.
 /// @group calendar
-$kendo-calendar-line-height: math.div( 20, 14 ) !default;
+$kendo-calendar-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The border-radius of the Calendar.
+/// @group calendar
+$kendo-calendar-border-radius: k-border-radius(xxxl) !default;
 
 /// The size of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-size: 36px !default;
+$kendo-calendar-cell-size: 48px !default;
 
 /// The background color of the Calendar.
 /// @group calendar
-$kendo-calendar-bg: k-color(surface-alt) !default;
+$kendo-calendar-bg: k-color(surface) !default;
 /// The text color of the Calendar.
 /// @group calendar
 $kendo-calendar-text: k-color(on-app-surface) !default;
@@ -38,17 +41,17 @@ $kendo-calendar-border: k-color(border) !default;
 $kendo-calendar-header-padding-x: k-spacing(1) !default;
 /// The vertical padding of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-padding-y: k-spacing(1) !default;
+$kendo-calendar-header-padding-y: k-spacing(3) !default;
 /// The height of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border-width: 0px !default;
 
 /// The background color of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-bg: unset !default;
+$kendo-calendar-header-bg: transparent !default;
 /// The text color of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-text: k-color(on-app-surface) !default;
+$kendo-calendar-header-text: k-color(primary-on-surface) !default;
 /// The border color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border: k-color(border) !default;
@@ -57,7 +60,7 @@ $kendo-calendar-header-border: k-color(border) !default;
 $kendo-calendar-header-gradient: none !default;
 /// The shadow of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-shadow: unset !default;
+$kendo-calendar-header-shadow: null !default;
 
 /// The gap between the items in the navigation of the Calendar.
 /// @group calendar
@@ -65,14 +68,14 @@ $kendo-calendar-nav-gap: null !default;
 
 /// The horizontal padding of the footer in the Calendar.
 /// @group calendar
-$kendo-calendar-footer-padding-x: k-spacing(4) !default;
+$kendo-calendar-footer-padding-x: k-spacing(3) !default;
 /// The vertical padding of the footer in the Calendar.
 /// @group calendar
-$kendo-calendar-footer-padding-y: k-spacing(2) !default;
+$kendo-calendar-footer-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-padding-x: .25em !default;
+$kendo-calendar-cell-padding-x: k-spacing(3) !default;
 /// The vertical padding of the cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
@@ -83,7 +86,7 @@ $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 
 /// The border radius of the cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-border-radius: 100px !default;
+$kendo-calendar-cell-border-radius: k-border-radius( full ) !default;
 
 /// The horizontal padding of the header cells in the Calendar.
 /// @group calendar
@@ -99,10 +102,10 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
 /// The font size of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit )!default;
+$kendo-calendar-header-cell-font-size: var( --kendo-font-size-lg, inherit )!default;
 /// The line height of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-calendar-header-cell-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The background color of the header cells in the Calendar.
 /// @group calendar
@@ -117,27 +120,27 @@ $kendo-calendar-header-cell-opacity: null !default;
 
 /// The horizontal padding of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-padding-x: k-spacing(4) !default;
+$kendo-calendar-caption-padding-x: k-spacing(6) !default;
 /// The vertical padding of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-padding-y: k-spacing(1) !default;
+$kendo-calendar-caption-padding-y: k-spacing(3.5) !default;
 
 /// The height of the caption in the Calendar.
 /// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
 /// The font size of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-font-size: null !default;
+$kendo-calendar-caption-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-line-height: null !default;
+$kendo-calendar-caption-line-height: var( --kendo-line-height, inherit ) !default;
 /// The font weight of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-font-weight: bold !default;
+$kendo-calendar-caption-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The font size of the week number cells in the Calendar.
 /// @group calendar
-$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-week-number-font-size: $kendo-calendar-font-size !default;
 
 /// The width of the Calendar view.
 /// @group calendar
@@ -154,6 +157,7 @@ $kendo-calendar-view-gap: k-spacing(4) !default;
 /// @group calendar
 $kendo-calendar-weekend-bg: null !default;
 /// The text color of the weekend cells in the Calendar.
+/// @group calendar
 $kendo-calendar-weekend-text: null !default;
 
 /// The style of the current day in the Calendar.
@@ -162,20 +166,26 @@ $kendo-calendar-today-style: color !default;
 /// The color of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-color: k-color(primary) !default;
+/// The font weight of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+/// The box shadow of the current day in the Calendar.
+/// @group calendar
+$kendo-calendar-today-box-shadow: inset 0 0 0 1px k-color(primary) !default;
 
 /// The background color of the week number cells in the Calendar.
 /// @group calendar
 $kendo-calendar-week-number-bg: null !default;
 /// The text color of the week number cells in the Calendar.
 /// @group calendar
-$kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;
+$kendo-calendar-week-number-text: k-color(base-emphasis) !default;
 
 /// The background color of the preceding/subsequent month cells in the Calendar.
 /// @group calendar
 $kendo-calendar-other-month-bg: null !default;
 /// The text color of the preceding/subsequent month cells in the Calendar.
 /// @group calendar
-$kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;
+$kendo-calendar-other-month-text: k-color(subtle) !default;
 
 /// The background color of the cells in the Calendar.
 /// @group calendar
@@ -192,13 +202,13 @@ $kendo-calendar-cell-gradient: null !default;
 
 /// The background color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: k-color(base-hover) !default;
+$kendo-calendar-cell-hover-bg: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 /// The text color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-text: k-color(on-app-surface) !default;
+$kendo-calendar-cell-hover-text: null !default;
 /// The border color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-border: k-color(border) !default;
+$kendo-calendar-cell-hover-border: null !default;
 /// The gradient of the hovered cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-hover-gradient: null !default;
@@ -211,7 +221,7 @@ $kendo-calendar-cell-selected-bg: k-color(primary) !default;
 $kendo-calendar-cell-selected-text: k-color(on-primary) !default;
 /// The border color of the selected cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-bg !default;
+$kendo-calendar-cell-selected-border: null !default;
 /// The gradient of the selected cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-selected-gradient: null !default;
@@ -231,43 +241,55 @@ $kendo-calendar-cell-selected-hover-gradient: null !default;
 
 /// The shadow of the focused cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-calendar-cell-focus-shadow: null !default;
 /// The shadow of the selected and focused cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
+$kendo-calendar-cell-selected-focus-shadow: null !default;
 
 
 /// The width of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-width: 5em !default;
+$kendo-calendar-navigation-width: k-spacing(19) !default;
 /// The height of the items in the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-item-height: 2em !default;
+$kendo-calendar-navigation-item-height: $kendo-calendar-cell-size !default;
 
 /// The background color of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-bg: k-color(surface) !default;
+$kendo-calendar-navigation-bg: $kendo-calendar-bg !default;
 /// The text color of the Calendar navigation.
 /// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-text !default;
 /// The border color of the Calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-border: $kendo-calendar-border !default;
-
+$kendo-calendar-navigation-border: k-color(border) !default;
 /// The background color of the hovered items in the Calendar navigation.
-$kendo-calendar-navigation-hover-text: k-color(secondary-hover) !default;
+/// @group calendar
+$kendo-calendar-navigation-hover-text: k-color(on-app-surface) !default;
+/// The text color of the marker in the Calendar navigation.
+/// @group calendar
+$kendo-calendar-navigation-marker-text: k-color(primary) !default;
 
+/// The background color of the Calendar range selection.
+/// @group calendar
+$kendo-calendar-range-bg: k-color(secondary) !default;
+/// The background color of the Calendar range start selection.
+/// @group calendar
+$kendo-calendar-range-start-bg: linear-gradient(to right, k-color(surface) 0%, k-color(surface) 50%, k-color(secondary) 50%, k-color(secondary) 100%) !default;
+/// The background color of the Calendar range end selection.
+/// @group calendar
+$kendo-calendar-range-end-bg: linear-gradient(to left, k-color(surface) 0%, k-color(surface) 50%, k-color(secondary) 50%, k-color(secondary) 100%) !default;
 
 /// The horizontal padding of the header in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-x: k-spacing(4) !default;
+$kendo-infinite-calendar-header-padding-x: k-spacing(1) !default;
 /// The vertical padding of the header in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-y: k-spacing(2) !default;
+$kendo-infinite-calendar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Calendar view in the Infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-x: k-spacing(4) !default;
+$kendo-infinite-calendar-view-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Calendar view in the Infinite Calendar.
 /// @group calendar
 $kendo-infinite-calendar-view-padding-y: k-spacing(0) !default;
@@ -293,29 +315,29 @@ $kendo-calendar-sm-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The size of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-size: 32px !default;
+$kendo-calendar-sm-cell-size: 40px !default;
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
+$kendo-calendar-sm-cell-padding-x: k-spacing(2) !default;
 /// The vertical padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
+$kendo-calendar-sm-cell-padding-y: k-spacing(2) !default;
 
 /// The font size of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-font-size: var( --kendo-font-size, inherit )  !default;
+$kendo-calendar-md-font-size: var( --kendo-font-size-lg, inherit )  !default;
 /// The line height of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-calendar-md-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The size of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-size: 36px !default;
+$kendo-calendar-md-cell-size: $kendo-calendar-cell-size !default;
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
+$kendo-calendar-md-cell-padding-x: k-spacing(3) !default;
 /// The vertical padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
+$kendo-calendar-md-cell-padding-y: k-spacing(3) !default;
 
 /// The font size of the large Calendar.
 /// @group calendar
@@ -325,13 +347,13 @@ $kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 $kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The size of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-size: 40px !default;
+$kendo-calendar-lg-cell-size: 56px !default;
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-x: k-spacing(1) !default;
+$kendo-calendar-lg-cell-padding-x: k-spacing(4) !default;
 /// The vertical padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-y: k-spacing(1) !default;
+$kendo-calendar-lg-cell-padding-y: k-spacing(4) !default;
 
 /// The sizes Map of the Calendar.
 /// @group calendar
@@ -364,6 +386,7 @@ $kendo-calendar-sizes: (
     $kendo-calendar-font-family: $kendo-calendar-font-family,
     $kendo-calendar-font-size: $kendo-calendar-font-size,
     $kendo-calendar-line-height: $kendo-calendar-line-height,
+    $kendo-calendar-border-radius: $kendo-calendar-border-radius,
     $kendo-calendar-cell-size: $kendo-calendar-cell-size,
     $kendo-calendar-bg: $kendo-calendar-bg,
     $kendo-calendar-text: $kendo-calendar-text,
@@ -406,6 +429,8 @@ $kendo-calendar-sizes: (
     $kendo-calendar-weekend-text: $kendo-calendar-weekend-text,
     $kendo-calendar-today-style: $kendo-calendar-today-style,
     $kendo-calendar-today-color: $kendo-calendar-today-color,
+    $kendo-calendar-today-font-weight: $kendo-calendar-today-font-weight,
+    $kendo-calendar-today-box-shadow: $kendo-calendar-today-box-shadow,
     $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg,
     $kendo-calendar-week-number-text: $kendo-calendar-week-number-text,
     $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg,
@@ -434,11 +459,13 @@ $kendo-calendar-sizes: (
     $kendo-calendar-navigation-text: $kendo-calendar-navigation-text,
     $kendo-calendar-navigation-border: $kendo-calendar-navigation-border,
     $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
+    $kendo-calendar-navigation-marker-text: $kendo-calendar-navigation-marker-text,
     $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
     $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
     $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,
     $kendo-infinite-calendar-view-padding-y: $kendo-infinite-calendar-view-padding-y,
     $kendo-infinite-calendar-view-height: $kendo-infinite-calendar-view-height,
+    $kendo-calendar-range-bg: $kendo-calendar-range-bg,
     $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
     $kendo-calendar-sm-font-size: $kendo-calendar-sm-font-size,
     $kendo-calendar-sm-line-height: $kendo-calendar-sm-line-height,

package/scss/captcha/_variables.scss

@@ -23,13 +23,13 @@ $kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-captcha-gap: $kendo-captcha-spacer !default;
 /// The background color of the Captcha.
 /// @group captcha
-$kendo-captcha-bg: k-color(surface-alt) !default;
+$kendo-captcha-bg: k-color(app-surface) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: k-color(surface-alt) !default;
+$kendo-captcha-text: k-color(on-app-surface) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: k-color(surface-alt) !default;
+$kendo-captcha-border: k-color(app-surface) !default;
 
 /// The gap of the Captcha image wrapper.
 /// @group captcha

package/scss/card/_variables.scss

@@ -16,7 +16,7 @@ $kendo-card-padding-y: k-spacing(3) !default;
 $kendo-card-border-width: 0px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: k-border-radius(md) !default;
+$kendo-card-border-radius: k-border-radius(xl) !default;
 /// The inner border radius of the Card.
 /// @group card
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
@@ -36,7 +36,7 @@ $kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
-$kendo-card-bg: k-color(surface-alt) !default;
+$kendo-card-bg: k-color(surface) !default;
 /// The text color of the Card.
 /// @group card
 $kendo-card-text: k-color(on-app-surface) !default;
@@ -70,7 +70,7 @@ $kendo-card-header-padding-x: $kendo-card-padding-x !default;
 $kendo-card-header-padding-y: $kendo-card-padding-y !default;
 /// The bottom border width of the Card header.
 /// @group card
-$kendo-card-header-border-width: 1px !default;
+$kendo-card-header-border-width: 0 !default;
 /// The background color of the Card header.
 /// @group card
 $kendo-card-header-bg: null !default;
@@ -96,7 +96,7 @@ $kendo-card-footer-padding-x: $kendo-card-padding-x !default;
 $kendo-card-footer-padding-y: $kendo-card-padding-y !default;
 /// The top border width of the Card footer.
 /// @group card
-$kendo-card-footer-border-width: 1px !default;
+$kendo-card-footer-border-width: 0 !default;
 /// The background color of the Card footer.
 /// @group card
 $kendo-card-footer-bg: null !default;
@@ -109,26 +109,26 @@ $kendo-card-footer-border: $kendo-card-border !default;
 
 /// The bottom margin of the Card title.
 /// @group card
-$kendo-card-title-margin-bottom: k-spacing(3) !default;
+$kendo-card-title-margin-bottom: k-spacing(1) !default;
 /// The font size of the Card title.
 /// @group card
-$kendo-card-title-font-size: $kendo-h5-font-size !default;
+$kendo-card-title-font-size: $kendo-font-size-lg !default;
 /// The font family of the Card title.
 /// @group card
 $kendo-card-title-font-family: var( --kendo-font-family, inherit ) !default;
 /// The line height of the Card title.
 /// @group card
-$kendo-card-title-line-height: 1.25 !default;
+$kendo-card-title-line-height: $kendo-line-height-lg !default;
 /// The font weight of the Card title.
 /// @group card
 $kendo-card-title-font-weight: 500 !default;
 /// The letter spacing of the Card title.
 /// @group card
-$kendo-card-title-letter-spacing: null !default;
+$kendo-card-title-letter-spacing: $kendo-letter-spacing-widest !default;
 
 /// The bottom margin of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-margin-bottom: k-spacing(3) !default;
+$kendo-card-subtitle-margin-bottom: k-spacing(2) !default;
 /// The font size of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-font-size: var( --kendo-font-size, inherit )  !default;
@@ -137,13 +137,13 @@ $kendo-card-subtitle-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-card-subtitle-font-family: var( --kendo-font-family, inherit ) !default;
 /// The line height of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-line-height: math.div( 20, 14 ) !default;
+$kendo-card-subtitle-line-height: $kendo-line-height !default;
 /// The font weight of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-weight: 500 !default;
+$kendo-card-subtitle-font-weight: $kendo-font-weight-normal !default;
 /// The letter spacing of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-letter-spacing: null !default;
+$kendo-card-subtitle-letter-spacing: $kendo-letter-spacing-wider !default;
 /// The text color of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-text: k-color(subtle) !default;
@@ -160,13 +160,13 @@ $kendo-card-avatar-spacing: $kendo-card-header-padding-x !default;
 
 /// The horizontal padding of the Card actions.
 /// @group card
-$kendo-card-actions-padding-x: k-spacing(2) !default;
+$kendo-card-actions-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Card actions.
 /// @group card
-$kendo-card-actions-padding-y: k-spacing(2) !default;
+$kendo-card-actions-padding-y: k-spacing(4) !default;
 /// The top border width of the Card actions.
 /// @group card
-$kendo-card-actions-border-width: 1px !default;
+$kendo-card-actions-border-width: 0 !default;
 /// The spacing between the Card actions.
 /// @group card
 $kendo-card-actions-gap: k-spacing(2) !default;

package/scss/chat/_theme.scss

@@ -11,4 +11,8 @@
             color: k-color(primary-on-surface);
         }
     }
+
+    .k-message-box {
+        background-color: k-color(surface-alt)
+    }
 }

package/scss/chat/_variables.scss

@@ -89,7 +89,7 @@ $kendo-chat-bubble-padding-y: k-spacing(2) !default;
 $kendo-chat-bubble-spacing: k-spacing(0.5) !default;
 /// The line height of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-line-height: math.div( 20, 14 ) !default;
+$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The border radius of the Chat bubble message.
 /// @group chat
@@ -116,7 +116,7 @@ $kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 /// The background color of the Chat Toolbar.
 /// @group chat
-$kendo-chat-toolbar-bg: k-color(surface) !default;
+$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
 /// The text color of the Chat Toolbar.
 /// @group chat
 $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
@@ -140,7 +140,7 @@ $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(app-surface) !default;
+$kendo-chat-bg: k-color(surface) !default;
 /// The text color of the Chat.
 /// @group chat
 $kendo-chat-text: k-color(on-app-surface) !default;
@@ -153,7 +153,7 @@ $kendo-chat-border: k-color(border) !default;
 $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-app-surface) !default;
+$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;

package/scss/checkbox/_layout.scss

@@ -1,6 +1,41 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;
 
 
 @mixin kendo-checkbox--layout() {
     @include kendo-checkbox--layout-base();
+
+    // Checkbox
+    // Hover and Focus indicator
+    .k-checkbox {
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus,
+        &.k-invalid {
+            position: relative;
+
+            &::after {
+                content: "";
+                display: block;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                border-radius: 100%;
+                z-index: -1;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+
+    @each $size, $size-props in $kendo-checkbox-sizes {
+        $_size: map.get( $size-props, size );
+        $_indicator-size: map.get( $size-props, indicator-size );
+
+        .k-checkbox-#{$size}::after {
+            width: $_indicator-size;
+            height: $_indicator-size;
+        }
+    }
 }