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

package/scss/calendar/_theme.scss

@@ -19,57 +19,83 @@
         .k-calendar-td {
 
             &.k-today .k-link {
-                color: $kendo-calendar-today-text;
-                background-color: $kendo-calendar-today-bg;
+                @include fill(
+                    $kendo-calendar-today-text,
+                    $kendo-calendar-today-bg
+                );
                 box-shadow: none;
             }
 
-            &.k-today:hover .k-link,
-            &.k-today.k-hover .k-link {
-                color: $kendo-calendar-today-hover-text;
-                background-color: $kendo-calendar-today-hover-bg;
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $kendo-calendar-cell-hover-text,
+                    $kendo-calendar-cell-hover-bg
+                );
             }
 
-            &.k-weekend .k-link {
-                color: $kendo-calendar-weekend-text;
-                background-color: $kendo-calendar-weekend-bg;
+            &:focus,
+            &.k-focus {
+                box-shadow: $kendo-calendar-cell-focus-shadow;
             }
 
-            &.k-other-month .k-link {
-                color: $kendo-calendar-other-month-text;
-                background-color: $kendo-calendar-other-month-bg;
+
+            &.k-selected {
+                @include fill(
+                    $kendo-calendar-cell-selected-text,
+                    $kendo-calendar-cell-selected-bg,
+                    $kendo-calendar-cell-selected-border
+                );
+                box-shadow: $kendo-calendar-cell-selected-shadow;
             }
 
-            &:hover .k-link,
-            &.k-hover .k-link {
-                color: $kendo-calendar-cell-hover-text;
-                background-color: $kendo-calendar-cell-hover-bg;
+            &.k-selected:focus,
+            &.k-selected.k-focus {
+                box-shadow: $kendo-calendar-cell-selected-focus-shadow;
             }
 
-            &:focus .k-link,
-            &.k-focus .k-link {
-                box-shadow: $kendo-calendar-cell-focus-shadow;
+            &.k-selected:hover,
+            &.k-selected.k-hover {
+                @include fill(
+                    $kendo-calendar-cell-selected-hover-text,
+                    $kendo-calendar-cell-selected-hover-bg
+                );
             }
 
-            &.k-selected .k-link{
-                color: $kendo-calendar-cell-selected-text;
-                background-color: $kendo-calendar-cell-selected-bg;
-                box-shadow: $kendo-calendar-cell-selected-shadow;
+            &.k-today:hover .k-link,
+            &.k-today.k-hover .k-link {
+                @include fill(
+                    $kendo-calendar-today-hover-text,
+                    $kendo-calendar-today-hover-bg
+                );
             }
 
-            &.k-selected:hover .k-link,
-            &.k-selected.k-hover .k-link {
-                color: $kendo-calendar-cell-selected-hover-text;
-                background-color: $kendo-calendar-cell-selected-hover-bg;
+            &.k-weekend .k-link {
+                @include fill(
+                    $kendo-calendar-weekend-text,
+                    $kendo-calendar-weekend-bg
+                );
+            }
+
+            &.k-other-month .k-link {
+                @include fill(
+                    $kendo-calendar-other-month-text,
+                    $kendo-calendar-other-month-bg
+                );
             }
 
+            &:focus .k-link,
+            &.k-focus .k-link,
             &.k-selected:focus .k-link,
             &.k-selected.k-focus .k-link {
-                box-shadow: $kendo-calendar-cell-selected-focus-shadow;
+                box-shadow: none;
             }
 
             &.k-disabled {
-                color: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
+                @include fill(
+                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
+                    $kendo-calendar-bg
+                );
             }
         }
 
@@ -81,39 +107,15 @@
         }
     }
 
-    .k-calendar[dir="rtl"],
-    .k-rtl .k-calendar {
-        .k-calendar-td {
-
-            &.k-range-start:hover .k-link,
-            &.k-range-start.k-hover .k-link {
-                box-shadow: $kendo-calendar-end-range-hover-shadow;
-
-            }
-
-            &.k-range-mid:last-child:hover .k-link,
-            &.k-range-mid:last-child.k-hover .k-link,
-            &.k-range-end:hover .k-link,
-            &.k-range-end.k-hover .k-link {
-                box-shadow: $kendo-calendar-start-range-hover-shadow;
-            }
-
-            &.k-range-mid:first-child:hover .k-link,
-            &.k-range-mid:first-child.k-hover .k-link,
-            &.k-alt + .k-range-mid:hover .k-link,
-            &.k-alt + .k-range-mid.k-hover .k-link {
-                box-shadow: $kendo-calendar-end-range-hover-shadow;
-            }
-        }
-    }
-
     .k-calendar .k-calendar-td  {
 
         &.k-range-start,
         &.k-range-end,
         &.k-range-mid {
-            background-color: $kendo-calendar-range-bg;
-            color: $kendo-calendar-range-text;
+            @include fill(
+                $kendo-calendar-range-text,
+                $kendo-calendar-range-bg
+            );
 
             .k-link {
                 background-color: transparent;
@@ -124,12 +126,11 @@
                 }
             }
 
-            &::before {
-                border-color: $kendo-calendar-range-border;
-            }
-
             &.k-disabled {
-                color: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
+                @include fill(
+                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
+                    $kendo-calendar-bg
+                );
             }
 
             &:hover .k-link,
@@ -137,35 +138,6 @@
                 background-color: $kendo-calendar-cell-selected-hover-bg;
             }
         }
-
-        &.k-range-start:hover .k-link,
-        &.k-range-start.k-hover .k-link {
-            box-shadow: $kendo-calendar-start-range-hover-shadow;
-
-        }
-
-        &.k-range-mid:hover .k-link,
-        &.k-range-mid.k-hover .k-link {
-            box-shadow: $kendo-calendar-mid-range-hover-shadow;
-        }
-
-        &.k-range-mid:last-child:hover .k-link,
-        &.k-range-mid:last-child.k-hover .k-link,
-        &.k-range-end:hover .k-link,
-        &.k-range-end.k-hover .k-link {
-            box-shadow: $kendo-calendar-end-range-hover-shadow;
-        }
-
-        &.k-range-mid:first-child:hover .k-link,
-        &.k-range-mid:first-child.k-hover .k-link,
-        &.k-alt + .k-range-mid:hover .k-link,
-        &.k-alt + .k-range-mid.k-hover .k-link {
-            box-shadow: $kendo-calendar-start-range-hover-shadow;
-        }
-
-        &.k-range-start.k-range-end:hover .k-link {
-            box-shadow: $kendo-calendar-start-end-range-hover-shadow;
-        }
     }
 
 }

package/scss/calendar/_variables.scss

@@ -19,7 +19,10 @@ $kendo-calendar-border-radius: var( --kendo-calendar-border-radius, 0 ) !default
 
 /// The size of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-size: var( --kendo-calendar-cell-size, 28px ) !default;
+$kendo-calendar-cell-size: var( --kendo-calendar-cell-size, 32px ) !default;
+/// The spacing of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-padding: var( --kendo-calendar-cell-padding, k-spacing(0.5) ) !default;
 
 /// The background color of the Calendar.
 /// @group calendar
@@ -75,10 +78,10 @@ $kendo-calendar-cell-border-radius: var( --kendo-calendar-cell-border-radius, va
 
 /// The horizontal padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-x: var( --kendo-calendar-header-cell-padding-x, k-spacing(0) ) !default;
+$kendo-calendar-header-cell-padding-x: var( --kendo-calendar-header-cell-padding-x, k-spacing(0.5) ) !default;
 /// Th vertical padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-y: var( --kendo-calendar-header-cell-padding-y, k-spacing(0) ) !default;
+$kendo-calendar-header-cell-padding-y: var( --kendo-calendar-header-cell-padding-y, k-spacing(0.5) ) !default;
 /// The width of the calendar header cell.
 /// @group calendar
 $kendo-calendar-header-cell-width: var( --kendo-calendar-header-cell-width, #{$kendo-calendar-cell-size} ) !default;
@@ -149,13 +152,13 @@ $kendo-calendar-today-bg: var( --kendo-calendar-today-bg, k-color(primary) ) !de
 $kendo-calendar-today-hover-text: var( --kendo-calendar-today-hover-text, k-color(app-surface) ) !default;  // use contrast function
 /// The background color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-bg: var( --kendo-calendar-today-hover-bg, k-color(primary-hover) ) !default;
+$kendo-calendar-today-hover-bg: var( --kendo-calendar-today-hover-bg, $kendo-calendar-today-bg ) !default;
 /// The border radius of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-border-radius: var( --kendo-calendar-today-border-radius, 9999px ) !default;
 /// The font weight of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-font-weight: var( --kendo-calendar-today-font-weight, var( --kendo-calendar-font-weight-bold, var( --kendo-font-weight-bold, normal ) ) ) !default;
+$kendo-calendar-today-font-weight: var( --kendo-calendar-today-font-weight, var( --kendo-calendar-font-weight-normal, var( --kendo-font-weight-normal, normal ) ) ) !default;
 /// The box shadow of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-box-shadow: var( --kendo-calendar-today-box-shadow, null ) !default;
@@ -172,38 +175,38 @@ $kendo-calendar-week-number-text: var( --kendo-calendar-week-number-text, k-colo
 $kendo-calendar-other-month-bg: var( --kendo-calendar-other-month-bg, inherit ) !default;
 /// The text color of the other months calendar cells.
 /// @group calendar
-$kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, k-color(subtle)) !default;
 
 /// The background color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(base-hover) ) !default;
+$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(primary-subtle) ) !default;
 /// The text color of the calendar cells when hovered.
 /// @group calendar
 $kendo-calendar-cell-hover-text: var( --kendo-calendar-cell-hover-text, k-color(on-base) ) !default;
 
 /// The background color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-bg: var( --kendo-calendar-cell-selected-bg, k-color(base-active) ) !default;
+$kendo-calendar-cell-selected-bg: var( --kendo-calendar-cell-selected-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the selected calendar cell.
 /// @group calendar
 $kendo-calendar-cell-selected-text: var( --kendo-calendar-cell-selected-text, k-color(on-base) ) !default;
 /// The border color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-border: var( --kendo-calendar-cell-selected-border, color-mix(in srgb, k-color(border-alt) 76%, transparent) ) !default;
+$kendo-calendar-cell-selected-border: var( --kendo-calendar-cell-selected-border, k-color(primary-on-surface) ) !default;
 /// The shadow of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-shadow: var( --kendo-calendar-cell-selected-shadow, inset 0 0 0 1px #{$kendo-calendar-cell-selected-border} ) !default;
+$kendo-calendar-cell-selected-shadow: var( --kendo-calendar-cell-selected-shadow, null ) !default;
 
 /// The background color of the selected calendar cell when hovered.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-bg: var( --kendo-calendar-cell-selected-hover-bg, k-color(base-subtle-active) ) !default;
+$kendo-calendar-cell-selected-hover-bg: var( --kendo-calendar-cell-selected-hover-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the selected calendar cell when hovered.
 /// @group calendar
 $kendo-calendar-cell-selected-hover-text: var( --kendo-calendar-cell-selected-hover-text, k-color(on-base) ) !default;
 
 /// The shadow of the selected calendar cell when focused.
 /// @group calendar
-$kendo-calendar-cell-focus-shadow: var( --kendo-calendar-cell-focus-shadow, inset 0 0 0 1px k-color(base-emphasis) ) !default;
+$kendo-calendar-cell-focus-shadow: var( --kendo-calendar-cell-focus-shadow, inset 0 0 0 2px k-color(primary) ) !default;
 /// The shadow of the selected calendar cell when selected and focused.
 /// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-focus-shadow} ) !default;
@@ -260,26 +263,13 @@ $kendo-infinite-calendar-view-height: var( --kendo-infinite-calendar-view-height
 // Range calendar
 /// The background color of the range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-range-bg: var( --kendo-calendar-range-bg, k-color(base-active) ) !default;
+$kendo-calendar-range-bg: var( --kendo-calendar-range-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-range-text: var( --kendo-calendar-range-text, inherit ) !default;
-/// The border color of the range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-range-border: var( --kendo-calendar-range-border, k-color(base-emphasis) ) !default;
-/// The shadow of the hovered start range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-start-range-hover-shadow: var( --kendo-calendar-start-range-hover-shadow, inset 1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered mid range selection in the Calendar.
+/// The border radius of the range cells in the Calendar.
 /// @group calendar
-$kendo-calendar-mid-range-hover-shadow: var( --kendo-calendar-mid-range-hover-shadow, inset 0 -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered end range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-end-range-hover-shadow: var( --kendo-calendar-end-range-hover-shadow, inset -1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered start-end range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-start-end-range-hover-shadow: var( --kendo-calendar-start-end-range-hover-shadow, inset 1px -1px 0 0 k-color(base-emphasis), inset -1px 1px 0 0 k-color(base-emphasis) ) !default;
-
+$kendo-calendar-range-cell-border-radius: k-border-radius(md) !default;
 
 // Calendar sizes
 
@@ -310,7 +300,7 @@ $kendo-calendar-md-font-size: var( --kendo-calendar-md-font-size, var( --kendo-c
 $kendo-calendar-md-line-height: var( --kendo-calendar-md-line-height, var( --kendo-calendar-line-height, var( --kendo-line-height, normal ) ) ) !default;
 /// The size of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-size: var( --kendo-calendar-md-cell-size, 28px ) !default;
+$kendo-calendar-md-cell-size: var( --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: var( --kendo-calendar-md-cell-padding-x, k-spacing(1) ) !default;
@@ -329,7 +319,7 @@ $kendo-calendar-lg-font-size: var( --kendo-calendar-lg-font-size, var( --kendo-c
 $kendo-calendar-lg-line-height: var( --kendo-calendar-lg-line-height, var( --kendo-calendar-line-height, var( --kendo-line-height, normal ) ) ) !default;
 /// The size of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-size: var( --kendo-calendar-lg-cell-size, 32px ) !default;
+$kendo-calendar-lg-cell-size: var( --kendo-calendar-lg-cell-size, 36px ) !default;
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-padding-x: var( --kendo-calendar-lg-cell-padding-x, k-spacing(1) ) !default;
@@ -431,6 +421,7 @@ $kendo-calendar-sizes: (
     $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
     $kendo-calendar-navigation-marker-text: $kendo-calendar-navigation-marker-text,
     $kendo-calendar-range-bg: $kendo-calendar-range-bg,
+    $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
     $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,

package/scss/captcha/_variables.scss

@@ -23,13 +23,13 @@ $kendo-captcha-line-height: var( --kendo-captcha-line-height, var( --kendo-line-
 $kendo-captcha-spacing: $kendo-captcha-spacer !default;
 /// The background color of the Captcha.
 /// @group captcha
-$kendo-captcha-bg: var( --kendo-captcha-bg, k-color(surface-alt) ) !default;
+$kendo-captcha-bg: var( --kendo-captcha-bg, k-color(app-surface) ) !default;
 /// The text color of the Captcha.
 /// @group captcha
 $kendo-captcha-text: var( --kendo-captcha-text, k-color(on-app-surface) ) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: var( --kendo-captcha-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-captcha-border: var( --kendo-captcha-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The spacing of the Captcha image wrapper.
 /// @group captcha

package/scss/card/_layout.scss

@@ -6,6 +6,12 @@
 @mixin kendo-card--layout() {
     @include kendo-card--layout-base();
 
+    .k-card:focus,
+    .k-card.k-focus {
+        outline-width: 2px;
+        outline-style: solid;
+    }
+
     @at-root .k-card-title + .k-card-subtitle {
         margin-block-start: calc( #{$kendo-card-title-margin-bottom} * -1 );
     }

package/scss/card/_theme.scss

@@ -12,5 +12,10 @@
         .k-hr {
             border-color: $kendo-card-border;
         }
+
+        &:focus,
+        &.k-focus {
+            outline-color: $kendo-card-focus-border;
+        }
     }
 }

package/scss/card/_variables.scss

@@ -39,10 +39,10 @@ $kendo-card-bg: var( --kendo-card-bg, k-color(surface-alt) ) !default;
 $kendo-card-text: var( --kendo-card-text, k-color(on-app-surface) ) !default;
 /// The border color of the Card.
 /// @group card
-$kendo-card-border: var( --kendo-card-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-card-border: var( --kendo-card-border, k-color(surface-alt) ) !default;
 /// The shadow of the Card.
 /// @group card
-$kendo-card-shadow: var( --kendo-card-shadow, var( --kendo-elevation-1, none ) ) !default;
+$kendo-card-shadow: var( --kendo-card-shadow, var( --kendo-elevation-3, none ) ) !default;
 
 /// The background color of the focused Card.
 /// @group card
@@ -52,14 +52,14 @@ $kendo-card-focus-bg: $kendo-card-bg !default;
 $kendo-card-focus-text: null !default;
 /// The border color of the focused Card.
 /// @group card
-$kendo-card-focus-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-card-focus-border: k-color(border-alt) !default;
 /// The shadow of the focused Card.
 /// @group card
 $kendo-card-focus-shadow: var( --kendo-elevation-3, none ) !default;
 
 /// The font size of the Card header.
 /// @group card
-$kendo-card-header-font-size: var( --kendo-card-header-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
+$kendo-card-header-font-size: var( --kendo-card-header-font-size, var( --kendo-font-size-md, inherit ) ) !default;
 /// Тhe font family of the Card header.
 /// @group card
 $kendo-card-header-font-family: var( --kendo-card-header-font-family, var( --kendo-font-family, inherit ) ) !default;
@@ -113,13 +113,13 @@ $kendo-card-footer-border: var( --kendo-card-footer-border, inherit ) !default;
 
 /// The font size of the Card title.
 /// @group card
-$kendo-card-title-font-size: var( --kendo-card-title-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
+$kendo-card-title-font-size: var( --kendo-card-title-font-size, var( --kendo-font-size-md, inherit ) ) !default;
 /// The font family of the Card title.
 /// @group card
 $kendo-card-title-font-family: var( --kendo-card-title-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font weight of the Card title.
 /// @group card
-$kendo-card-title-font-weight: var( --kendo-card-title-font-weight, var( --kendo-font-weight, initial ) ) !default;
+$kendo-card-title-font-weight: var( --kendo-card-title-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
 /// The line height of the Card title.
 /// @group card
 $kendo-card-title-line-height: var( --kendo-card-title-line-height, var( --kendo-line-height, normal ) ) !default;
@@ -134,7 +134,7 @@ $kendo-card-subtitle-font-size: var( --kendo-card-subtitle-font-size, var( --ken
 $kendo-card-subtitle-font-family: var( --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: var( --kendo-card-subtitle-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-card-subtitle-line-height: var( --kendo-card-subtitle-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 /// The bottom margin of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-margin-bottom: var( --kendo-card-subtitle-margin-bottom, k-spacing(3) ) !default;
@@ -163,7 +163,7 @@ $kendo-card-actions-padding-y: var( --kendo-card-actions-padding-y, k-spacing(3)
 $kendo-card-actions-border-width: var( --kendo-card-actions-border-width, 0 ) !default;
 /// The spacing between the Card actions.
 /// @group card
-$kendo-card-actions-gap: var( --kendo-card-actions-gap, k-spacing(2) ) !default;
+$kendo-card-actions-gap: var( --kendo-card-actions-gap, k-spacing(3) ) !default;
 
 /// The border radius of the scroll button in the Card deck.
 /// @group card

package/scss/chat/_layout.scss

@@ -7,32 +7,19 @@
 @mixin kendo-chat--layout() {
     @include kendo-chat--layout-base();
 
+    .k-chat .k-chat-file-name {
+        font-weight: var( --kendo-font-weight-semibold, inherit);;
+    }
+
     // Message group
     .k-chat-message-group {
 
         .k-chat-file-wrapper {
             min-width: 0;
             max-width: 100%;
-
-        }
-
-    }
-
-    .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);
-            }
         }
-
     }
 
-
     // Bubble
     .k-chat-bubble {
 
@@ -62,5 +49,4 @@
         margin-inline: calc( #{$kendo-chat-message-list-padding-x} * -1 );
         padding-inline: $kendo-chat-message-list-padding-x;
     }
-
 }

package/scss/chat/_theme.scss

@@ -11,8 +11,7 @@
 
         &: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);
+            @include focus-indicator( $kendo-chat-alt-bubble-focus-shadow, true, true );
         }
 
         &:hover,
@@ -20,4 +19,13 @@
             @include fill( $bg: $kendo-chat-alt-bubble-hover-bg, $border: $kendo-chat-alt-bubble-hover-border );
         }
     }
+
+    .k-message-time {
+        color: $kendo-chat-timestamp-text;
+    }
+
+    .k-message-reference .k-chat-file {
+        background-color: $kendo-chat-file-bg;
+        border-color: $kendo-chat-file-border;
+    }
 }

package/scss/chat/_variables.scss

@@ -68,10 +68,10 @@ $kendo-chat-timestamp-transform: none !default;
 $kendo-chat-timestamp-text: var( --kendo-chat-timestamp-text, #{k-color(subtle)} ) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-bg: normal !default;
+$kendo-chat-timestamp-bg: transparent !default;
 /// The background color of the Chat timestamp separator.
 /// @group chat
-$kendo-chat-timestamp-separator-bg: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-chat-timestamp-separator-bg: color-mix(in srgb, k-color(border) 26%, transparent) !default;
 /// The spacing between the Chat timestamp and its separator.
 /// @group chat
 $kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
@@ -148,10 +148,10 @@ $kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-bg !default;
 $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;
+$kendo-chat-alt-bubble-focus-border: k-color(on-base) !default;
 /// The box shadow of the focused alt Bubble.
 /// @group bubble
-$kendo-chat-alt-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(primary) 16%, transparent) !default;
+$kendo-chat-alt-bubble-focus-shadow: inset 0 0 0 #{$kendo-chat-border-width} k-color(on-base), inset 0 0 0 calc( #{$kendo-chat-border-width} * 2 ) k-color(surface) !default;
 
 /// The color of the typing indicator dots.
 /// @group chat

package/scss/checkbox/_layout.scss

@@ -18,8 +18,8 @@
             overflow: hidden;
             transform: scale(0) translate(-50%, -50%);
             position: absolute;
-            top: 50%;
-            left: 50%;
+            inset-block-start: 50%;
+            inset-inline-start: 50%;
         }
         @if $kendo-checkbox-indicator-type == "glyph" {
             font-size: $kendo-checkbox-glyph-size;
@@ -122,9 +122,12 @@
     }
 
     // Checkbox list
+    .k-checkbox-list.k-list-vertical {
+        gap: k-spacing(2);
+    }
     .k-checkbox-item,
     .k-checkbox-list-item {
-        gap: k-spacing(2);
+        gap: k-spacing(1);
     }
 
     // Fluent-specific ripple focus override

package/scss/checkbox/_theme.scss

@@ -39,4 +39,16 @@
             $kendo-checkbox-disabled-indeterminate-border
         );
     }
+
+    .k-checkbox-label {
+        @include fill( $color: $kendo-checkbox-text );
+    }
+
+    .k-checkbox-label:has(.k-invalid) {
+        @include fill( $color: $kendo-checkbox-invalid-text );
+    }
+
+    .k-checkbox-label:has(.k-disabled) {
+        @include fill( $color: $kendo-checkbox-disabled-text );
+    }
 }

package/scss/checkbox/_variables.scss

@@ -69,10 +69,10 @@ $kendo-checkbox-sizes: (
 $kendo-checkbox-bg: var( --kendo-checkbox-bg, k-color(surface-alt) ) !default;
 /// The text color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-text: var( --kendo-checkbox-text, transparent ) !default;
+$kendo-checkbox-text: var( --kendo-checkbox-text, k-color(secondary-on-surface) ) !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: var( --kendo-checkbox-border, k-color(border-alt) ) !default;
+$kendo-checkbox-border: var( --kendo-checkbox-border, k-color(border) ) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -118,20 +118,20 @@ $kendo-checkbox-focus-checked-border: null !default;
 $kendo-checkbox-focus-checked-shadow: null !default;
 /// The outline of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-outline: 1px solid k-color(base-emphasis) !default;
+$kendo-checkbox-focus-outline: 2px solid k-color(border-alt) !default;
 /// The outline offset of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-outline-offset: 2px !default;
+$kendo-checkbox-focus-outline-offset: 4px !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: var( --kendo-checkbox-disabled-bg, $kendo-checkbox-bg ) !default;
 /// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: var( --kendo-checkbox-disabled-text, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-checkbox-disabled-text: var( --kendo-checkbox-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: var( --kendo-checkbox-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+$kendo-checkbox-disabled-border: var( --kendo-checkbox-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
@@ -148,7 +148,7 @@ $kendo-checkbox-disabled-checked-border: var( --kendo-checkbox-disabled-checked-
 $kendo-checkbox-invalid-text: var( --kendo-checkbox-invalid-text, k-color(error-on-surface) ) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: var( --kendo-checkbox-invalid-border, k-color(error-emphasis) ) !default;
+$kendo-checkbox-invalid-border: var( --kendo-checkbox-invalid-border, k-color(error-on-surface) ) !default;
 
 /// The background of the hovered and checked CheckBox.
 /// @group checkbox