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

package/scss/panelbar/_layout.scss

@@ -1,6 +1,5 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
-@use "../core/spacing/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *;
 
 @mixin kendo-panelbar--layout() {
@@ -17,15 +16,17 @@
                 font-weight: normal;
 
                 &.k-selected {
-                    font-weight: $kendo-font-weight-bold;
+                    font-weight: var(--kendo-font-weight-semibold, 600 );
+                }
 
-                    &::before {
-                        content: '';
-                        width: 2px;
-                        height: 100%;
-                        position: absolute;
-                        inset-inline-start: 0;
-                    }
+                &:focus,
+                &.k-focus {
+                    border-radius: k-border-radius(md);
+                }
+
+                &.k-hover,
+                &:hover {
+                    border-radius: k-border-radius(md);
                 }
             }
         }
@@ -42,15 +43,14 @@
                 padding-block: $kendo-panelbar-item-padding-y;
 
                 &.k-selected {
-                    font-weight: $kendo-font-weight-bold;
+                    font-weight: var(--kendo-font-weight-semibold, 600 );
+                }
 
-                    &::before {
-                        content: '';
-                        width: 2px;
-                        height: 100%;
-                        position: absolute;
-                        inset-inline-start: 0;
-                    }
+                &:focus,
+                &.k-focus,
+                &:hover,
+                &.k-hover {
+                    border-radius: k-border-radius(md);
                 }
             }
 

package/scss/panelbar/_theme.scss

@@ -16,12 +16,6 @@
                     box-shadow: $kendo-panelbar-header-focus-shadow;
                 }
 
-                &.k-selected {
-                    &::before {
-                        background-color: $kendo-panelbar-selected-marker;
-                    }
-                }
-
                 &:disabled,
                 &.k-disabled {
                    color: var( --kendo-disabled-text, inherit );
@@ -52,7 +46,7 @@
             > .k-link {
                 color: $kendo-panelbar-text;
                 background-color: $kendo-panelbar-bg;
-                border-color: $kendo-panelbar-border; 
+                border-color: $kendo-panelbar-border;
 
 
                 &:focus,
@@ -60,12 +54,6 @@
                     box-shadow: $kendo-panelbar-item-focus-shadow;
                 }
 
-                &.k-selected {
-                    &::before {
-                        background-color: $kendo-panelbar-selected-marker;
-                    }
-                }
-
                 &.k-disabled {
                     color: var( --kendo-disabled-text, inherit );
 

package/scss/panelbar/_variables.scss

@@ -27,7 +27,7 @@ $kendo-panelbar-item-border-style: var( --kendo-panelbar-item-border-style, soli
 
 /// The spacing around the PanelBar items icon.
 /// @group panelbar
-$kendo-panelbar-icon-spacing: var( --kendo-panelbar-icon-spacing, #{k-spacing(2)} ) !default;
+$kendo-panelbar-icon-spacing: var( --kendo-panelbar-icon-spacing, #{k-spacing(2.5)} ) !default;
 
 /// The horizontal start padding of the PanelBar header.
 /// @group panelbar
@@ -35,10 +35,10 @@ $kendo-panelbar-header-padding-x-start: var( --kendo-panelbar-header-padding-x-s
 
 /// The horizontal end padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x-end: var( --kendo-panelbar-header-padding-x-end, #{k-spacing(2)} ) !default;
+$kendo-panelbar-header-padding-x-end: var( --kendo-panelbar-header-padding-x-end, #{k-spacing(2.5)} ) !default;
 /// The vertical padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-y: var( --kendo-panelbar-header-padding-y, #{k-spacing(3)} ) !default;
+$kendo-panelbar-header-padding-y: var( --kendo-panelbar-header-padding-y, #{k-spacing(2.5)} ) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
@@ -46,10 +46,10 @@ $kendo-panelbar-item-padding-x-start: calc( #{$kendo-panelbar-icon-spacing} * 2
 
 /// The horizontal end padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x-end: var( --kendo-panelbar-item-padding-x-end, #{k-spacing(2)} ) !default;
+$kendo-panelbar-item-padding-x-end: var( --kendo-panelbar-item-padding-x-end, #{k-spacing(2.5)} ) !default;
 /// The vertical padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-y: var( --kendo-panelbar-item-padding-y, #{k-spacing(3)} ) !default;
+$kendo-panelbar-item-padding-y: var( --kendo-panelbar-item-padding-y, #{k-spacing(2.5)} ) !default;
 
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar
@@ -57,7 +57,7 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(surface-alt)} ) !default;
+$kendo-panelbar-bg: var( --kendo-panelbar-bg, #{k-color(app-surface)} ) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
 $kendo-panelbar-text: var( --kendo-panelbar-text, #{k-color(on-app-surface)} ) !default;
@@ -77,10 +77,10 @@ $kendo-panelbar-header-border: var( --kendo-panelbar-header-border, inherit ) !d
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: var( --kendo-panelbar-header-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-panelbar-header-hover-bg: var( --kendo-panelbar-header-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: var( --kendo-panelbar-header-hover-text, #{k-color(primary-hover)} ) !default;
+$kendo-panelbar-header-hover-text: var( --kendo-panelbar-header-hover-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-border: var( --kendo-panelbar-header-hover-border, inherit ) !default;
@@ -110,20 +110,17 @@ $kendo-panelbar-header-hover-focus-border: var( --kendo-panelbar-header-hover-fo
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: var( --kendo-panelbar-header-selected-bg, #{k-color(base-active)} ) !default;
+$kendo-panelbar-header-selected-bg: var( --kendo-panelbar-header-selected-bg, #{$kendo-panelbar-bg} ) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-text: var( --kendo-panelbar-header-selected-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: var( --kendo-panelbar-header-selected-border, inherit ) !default;
-/// The color of the marker of the selected PanelBar header.
-/// @group panelbar
-$kendo-panelbar-selected-marker: var( --kendo-panelbar-selected-marker, #{k-color(primary)} ) !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-hover-bg: var( --kendo-panelbar-header-selected-hover-bg, #{$kendo-panelbar-header-selected-bg} ) !default;
+$kendo-panelbar-header-selected-hover-bg: var( --kendo-panelbar-header-selected-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// The text color of the selected and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-text: var( --kendo-panelbar-header-selected-hover-text, #{$kendo-panelbar-header-hover-text} ) !default;
@@ -153,7 +150,7 @@ $kendo-panelbar-header-selected-hover-focus-border: var( --kendo-panelbar-header
 
 /// The background color of the expanded PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-expanded-bg: var( --kendo-panelbar-header-expanded-bg, inherit ) !default;
+$kendo-panelbar-header-expanded-bg: var( --kendo-panelbar-header-expanded-bg, $kendo-panelbar-bg ) !default;
 /// The text color of the expanded PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-expanded-text: var( --kendo-panelbar-header-expanded-text, inherit ) !default;
@@ -163,10 +160,10 @@ $kendo-panelbar-header-expanded-border: var( --kendo-panelbar-header-expanded-bo
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: var( --kendo-panelbar-item-hover-bg, #{k-color(base-hover)} ) !default;
+$kendo-panelbar-item-hover-bg: var( --kendo-panelbar-item-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-text: var( --kendo-panelbar-item-hover-text, #{k-color(primary-hover)} ) !default;
+$kendo-panelbar-item-hover-text: var( --kendo-panelbar-item-hover-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-border: var( --kendo-panelbar-item-hover-border, inherit ) !default;
@@ -196,7 +193,7 @@ $kendo-panelbar-item-hover-focus-border: var( --kendo-panelbar-item-hover-focus-
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: var( --kendo-panelbar-item-selected-bg, #{k-color(base-active)} ) !default;
+$kendo-panelbar-item-selected-bg: var( --kendo-panelbar-item-selected-bg, #{$kendo-panelbar-bg} ) !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-text: var( --kendo-panelbar-item-selected-text, #{k-color(on-app-surface)} ) !default;
@@ -206,7 +203,7 @@ $kendo-panelbar-item-selected-border: var( --kendo-panelbar-item-selected-border
 
 /// The background color of the selected and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-hover-bg: var( --kendo-panelbar-item-selected-hover-bg, #{$kendo-panelbar-item-selected-bg} ) !default;
+$kendo-panelbar-item-selected-hover-bg: var( --kendo-panelbar-item-selected-hover-bg, #{color-mix(in srgb, k-color(on-app-surface) 5%, transparent)} ) !default;
 /// The text color of the selected and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-text: var( --kendo-panelbar-item-selected-hover-text, #{$kendo-panelbar-item-hover-text} ) !default;

package/scss/pdf-viewer/_variables.scss

@@ -49,7 +49,7 @@ $kendo-pdf-viewer-page-text: var( --kendo-pdf-viewer-page-text, #{k-color(on-app
 $kendo-pdf-viewer-page-border: var( --kendo-pdf-viewer-page-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The shadow of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-shadow: var( --kendo-pdf-viewer-page-shadow, var( --kendo-box-shadow-depth-3, none ) ) !default;
+$kendo-pdf-viewer-page-shadow: var( --kendo-pdf-viewer-page-shadow, k-elevation(4) ) !default;
 
 /// The horizontal padding of the PDFViewer search panel.
 /// @group pdf-viewer

package/scss/pivotgrid/_layout.scss

@@ -7,8 +7,6 @@
     @include kendo-pivotgrid--layout-base();
 
     .k-pivotgrid-empty-cell {
-        border-right-style: initial;
-        border-right-width: initial;
         border-inline-end-style: solid;
         border-inline-end-width: $kendo-pivotgrid-cell-border-width;
 
@@ -18,24 +16,22 @@
     }
 
     .k-pivotgrid-column-headers .k-pivotgrid-cell {
-        border-left-style: initial;
-        border-left-width: initial;
         border-inline-start-style: solid;
         border-inline-start-width: $kendo-pivotgrid-cell-border-width;
 
         &:first-child {
-            border-left-width: initial;
+            border-inline-start-width: initial;
             border-inline-start-width: 0;
         }
 
         &.k-first {
-            border-left-width: initial;
+            border-inline-start-width: initial;
             border-inline-start-width: $kendo-pivotgrid-cell-border-width;
         }
     }
 
     .k-pivotgrid-values .k-pivotgrid-cell {
-        border-left-width: 0;
+        border-inline-start-width: 0;
     }
 
     .k-pivotgrid-configurator-content .k-form .k-label {
@@ -50,7 +46,7 @@
         .k-row-fields,
         .k-column-fields,
         .k-filter-fields {
-            margin-top: initial;
+            margin-block-start: initial;
             margin-block-start: $kendo-pivotgrid-configurator-fields-margin-y;
         }
 
@@ -59,31 +55,31 @@
         }
 
         .k-settings-description {
-            margin-top: initial;
+            margin-block-start: initial;
             margin-block-start: k-spacing(4);
         }
     }
 
     .k-calculated-field-header-text {
-        margin-right: initial;
+        margin-inline-end: initial;
         margin-inline-end: 5px;
     }
 
     .k-calculated-field-actions .k-icon {
-        margin-right: initial;
+        margin-inline-end: initial;
         margin-inline-end: k-spacing(2);
     }
 
     .k-pivotgrid-configurator-horizontal .k-pivotgrid-configurator-content .k-form-field-wrapper {
-        padding-left: initial;
+        padding-inline-start: initial;
         padding-inline-start: $kendo-pivotgrid-spacer;
 
         & > *:first-child {
-            margin-top: initial;
+            margin-block-start: initial;
             margin-block-start: 0;
         }
         &:first-child {
-            padding-left: initial;
+            padding-inline-start: initial;
             padding-inline-start: 0;
         }
     }

package/scss/popover/_layout.scss

@@ -5,31 +5,18 @@
 @mixin kendo-popover--layout() {
     @include kendo-popover--layout-base();
 
-    .k-popover {
-        .k-popover-header {
-            margin-block-end: 0;
-        }
-    }
-
     // Header
     .k-popover-header {
         @extend .k-card-title !optional;
-    }
-
-    // Body
-    .k-popover-body {
-        padding-block-start: $kendo-popover-body-padding-y;
         padding-block-end: 0;
-
-        @at-root .k-popover-header + .k-popover-body {
-            padding-block-start: 0;
-        }
+        margin-block-end: 0;
+        font-size: var(--kendo-font-size-lg, inherit);
+        line-height: var(--kendo-line-height-sm, normal);
     }
 
     // Actions
     .k-popover-actions {
         padding-inline: $kendo-popover-actions-padding-x;
         padding-block: $kendo-popover-actions-padding-y;
-        gap: $kendo-popover-actions-gap;
     }
 }

package/scss/popover/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The width of the border around the Popover.
 /// @group popover
-$kendo-popover-border-width: var( --kendo-popover-border-width, #{$kendo-dialog-border-width} ) !default;
+$kendo-popover-border-width: var( --kendo-popover-border-width, 0 ) !default;
 /// The style of the border around the Popover.
 /// @group popover
 $kendo-popover-border-style: var( --kendo-popover-border-style, solid ) !default;
@@ -24,26 +24,26 @@ $kendo-popover-line-height: var( --kendo-popover-line-height, #{$kendo-window-li
 
 /// The text color of the Popover.
 /// @group popover
-$kendo-popover-text: var( --kendo-popover-text, #{k-color(on-app-surface)} ) !default;
+$kendo-popover-text: var( --kendo-popover-text, k-color(on-app-surface) ) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: var( --kendo-popover-bg, #{k-color(surface-alt)} ) !default;
+$kendo-popover-bg: var( --kendo-popover-bg, k-color(surface-alt) ) !default;
 /// The border color of the Popover.
 /// @group popover
-$kendo-popover-border: var( --kendo-popover-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-popover-border: var( --kendo-popover-border, transparent ) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: var( --kendo-popover-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
+$kendo-popover-shadow: var( --kendo-popover-shadow, var( --kendo-box-shadow-depth-4, none ) ) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover
-$kendo-popover-header-padding-x: var( --kendo-popover-header-padding-x, #{$kendo-dialog-titlebar-padding-x} ) !default;
+$kendo-popover-header-padding-x: var( --kendo-popover-header-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the Popover header.
 /// @group popover
-$kendo-popover-header-padding-y: var( --kendo-popover-header-padding-y, #{$kendo-dialog-titlebar-padding-y} ) !default;
+$kendo-popover-header-padding-y: var( --kendo-popover-header-padding-y, k-spacing(4) ) !default;
 /// The border width of the Popover header.
 /// @group popover
-$kendo-popover-header-border-width: var( --kendo-popover-header-border-width, #{$kendo-dialog-titlebar-border-width} ) !default;
+$kendo-popover-header-border-width: var( --kendo-popover-header-border-width, 0 ) !default;
 /// The border style of the Popover header.
 /// @group popover
 $kendo-popover-header-border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-border-style} ) !default;
@@ -59,27 +59,24 @@ $kendo-popover-header-border: var( --kendo-popover-header-border, #{$kendo-dialo
 
 /// The horizontal padding of the Popover body.
 /// @group popover
-$kendo-popover-body-padding-x: var( --kendo-popover-body-padding-x, #{$kendo-window-inner-padding-x} ) !default;
+$kendo-popover-body-padding-x: var( --kendo-popover-body-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the Popover body.
 /// @group popover
-$kendo-popover-body-padding-y: var( --kendo-popover-body-padding-y, #{$kendo-window-inner-padding-y} ) !default;
+$kendo-popover-body-padding-y: var( --kendo-popover-body-padding-y, k-spacing(4) ) !default;
 
 /// The border width of the Popover actions.
 /// @group popover
 $kendo-popover-actions-border-width: var( --kendo-popover-actions-border-width, 0 ) !default;
 /// The horizontal padding of the Popover actions.
 /// @group popover
-$kendo-popover-actions-padding-x: var( --kendo-popover-actions-padding-x, #{$kendo-popover-body-padding-x} ) !default;
+$kendo-popover-actions-padding-x: var( --kendo-popover-actions-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the Popover actions.
 /// @group popover
-$kendo-popover-actions-padding-y: var( --kendo-popover-actions-padding-y, #{$kendo-popover-body-padding-y} ) !default;
-/// The spacing between the Popover actions.
-/// @group popover
-$kendo-popover-actions-gap: var( --kendo-popover-actions-gap, #{k-spacing(3)} ) !default;
+$kendo-popover-actions-padding-y: var( --kendo-popover-actions-padding-y, k-spacing(4) ) !default;
 
 /// The width of the Popover callout.
 /// @group popover
-$kendo-popover-callout-width: var( --kendo-popover-callout-width, #{k-spacing(5)} ) !default;
+$kendo-popover-callout-width: var( --kendo-popover-callout-width, k-spacing(6) ) !default;
 /// The height of the Popover callout.
 /// @group popover
 $kendo-popover-callout-height: var( --kendo-popover-callout-height, #{$kendo-popover-callout-width} ) !default;

package/scss/popup/_variables.scss

@@ -36,10 +36,10 @@ $kendo-popup-bg: var( --kendo-popup-bg, #{k-color(surface-alt)} ) !default;
 $kendo-popup-text: var( --kendo-popup-text, #{k-color(on-app-surface)} ) !default;
 /// Border color of the popup.
 /// @group popup
-$kendo-popup-border: var( --kendo-popup-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-popup-border: var( --kendo-popup-border, transparent ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-popup-shadow, var( --kendo-box-shadow-depth-4, none ) ) !default;
+$kendo-popup-shadow: var( --kendo-popup-shadow, k-elevation(5) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
     $kendo-popup-border-width: $kendo-popup-border-width,

package/scss/progressbar/_variables.scss

@@ -24,7 +24,7 @@ $kendo-progressbar-font-family: var( --kendo-progressbar-font-family, var( --ken
 $kendo-progressbar-font-size: var( --kendo-progressbar-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-line-height: var( --kendo-progressbar-line-height, var( --kendo-line-height, inherit ) ) !default;
+$kendo-progressbar-line-height: var( --kendo-progressbar-line-height, var( --kendo-line-height-lg, inherit ) ) !default;
 /// The horizontal padding of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-padding-x: var( --kendo-progressbar-padding-x, #{k-spacing(0)} ) !default;
@@ -34,7 +34,7 @@ $kendo-progressbar-padding-y: var( --kendo-progressbar-padding-y, #{k-spacing(0)
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(base-subtle)} ) !default;
+$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(secondary-on-surface)} ) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: var( --kendo-progressbar-text, #{k-color(on-app-surface)} ) !default;
@@ -70,14 +70,14 @@ $kendo-progressbar-vertical-status-offset: var( --kendo-progressbar-vertical-sta
 $kendo-progressbar-disabled-bg: var( --kendo-progressbar-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 6%, transparent)} ) !default;
 /// The text color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-text: var( --kendo-progressbar-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
+$kendo-progressbar-disabled-text: var( --kendo-progressbar-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 30%, transparent)} ) !default;
 /// The border color of the disabled ProgressBar.
 /// @group progressbar
 $kendo-progressbar-disabled-border: var( --kendo-progressbar-disabled-border, #{$kendo-progressbar-disabled-bg} ) !default;
 
 /// The progress background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-disabled-bg: var( --kendo-progressbar-value-disabled-bg, #{k-color(primary-subtle)} ) !default;
+$kendo-progressbar-value-disabled-bg: var( --kendo-progressbar-disabled-bg, #{color-mix(in srgb, k-color(primary) 46%, transparent)} ) !default;
 
 /// The background color of the indeterminate ProgressBar.
 /// @group progressbar

package/scss/prompt/_variables.scss

@@ -3,68 +3,68 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: var( --kendo-prompt-text, #{k-color(on-app-surface)} ) !default;
+$kendo-prompt-text: var( --kendo-prompt-text, k-color(on-app-surface) ) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: var( --kendo-prompt-bg, #{k-color(surface-alt)} ) !default;
+$kendo-prompt-bg: var( --kendo-prompt-bg, k-color(surface-alt) ) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: var( --kendo-prompt-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-prompt-border: var( --kendo-prompt-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: var( --kendo-prompt-header-text, #{k-color(on-app-surface)} ) !default;
+$kendo-prompt-header-text: var( --kendo-prompt-header-text, k-color(on-app-surface) ) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: var( --kendo-prompt-header-bg, #{k-color(surface-alt)} ) !default;
+$kendo-prompt-header-bg: var( --kendo-prompt-header-bg, k-color(surface-alt) ) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: var( --kendo-prompt-header-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-prompt-header-border: var( --kendo-prompt-header-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: var( --kendo-prompt-content-padding-y, #{k-spacing(4)} ) !default;
+$kendo-prompt-content-padding-y: var( --kendo-prompt-content-padding-y, k-spacing(3) ) !default;
 /// The horizontal padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: var( --kendo-prompt-content-padding-x, #{k-spacing(4)} ) !default;
+$kendo-prompt-content-padding-x: var( --kendo-prompt-content-padding-x, k-spacing(3) ) !default;
 /// The spacing between the items of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: var( --kendo-prompt-content-spacing, #{k-spacing(4)} ) !default;
+$kendo-prompt-content-spacing: var( --kendo-prompt-content-spacing, k-spacing(2) ) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: var( --kendo-prompt-content-text, #{k-color(on-base)} ) !default;
+$kendo-prompt-content-text: var( --kendo-prompt-content-text, k-color(on-app-surface) ) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: var( --kendo-prompt-content-bg, #{k-color(surface)} ) !default;
+$kendo-prompt-content-bg: var( --kendo-prompt-content-bg, k-color(surface) ) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: var( --kendo-prompt-content-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-prompt-content-border: var( --kendo-prompt-content-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: var( --kendo-prompt-expander-spacing, #{k-spacing(2)} ) !default;
+$kendo-prompt-expander-spacing: var( --kendo-prompt-expander-spacing, k-spacing(2) ) !default;
 
 /// The vertical padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: var( --kendo-prompt-suggestion-padding-y, #{k-spacing(2)} ) !default;
+$kendo-prompt-suggestion-padding-y: var( --kendo-prompt-suggestion-padding-y, k-spacing(2) ) !default;
 /// The horizontal padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: var( --kendo-prompt-suggestion-padding-x, #{k-spacing(2)} ) !default;
+$kendo-prompt-suggestion-padding-x: var( --kendo-prompt-suggestion-padding-x, k-spacing(3) ) !default;
 /// The border radius of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: var( --kendo-prompt-suggestion-border-radius, #{k-border-radius(md)} ) !default;
+$kendo-prompt-suggestion-border-radius: var( --kendo-prompt-suggestion-border-radius, k-border-radius(md) ) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: var( --kendo-prompt-suggestion-text, #{k-color(on-app-surface)} ) !default;
+$kendo-prompt-suggestion-text: var( --kendo-prompt-suggestion-text, k-color(base-on-subtle) ) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: var( --kendo-prompt-suggestion-bg, #{k-color(surface-alt)} ) !default;
+$kendo-prompt-suggestion-bg: var( --kendo-prompt-suggestion-bg, k-color(base-subtle) ) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: var( --kendo-prompt-suggestion-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+$kendo-prompt-suggestion-border: var( --kendo-prompt-suggestion-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-shadow: var( --kendo-prompt-suggestion-shadow, #{k-elevation(1)} ) !default;
+$kendo-prompt-suggestion-shadow: var( --kendo-prompt-suggestion-shadow, null ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/prompt/_variables.scss" with (
     $kendo-prompt-text: $kendo-prompt-text,

package/scss/radio/_layout.scss

@@ -94,6 +94,9 @@
         gap: $kendo-radio-list-item-gap;
     }
 
+    .k-radio-list.k-list-vertical {
+        gap: k-spacing(2);
+    }
 
     // Ripple
     .k-ripple-container {

package/scss/radio/_theme.scss

@@ -30,4 +30,12 @@
         opacity: $kendo-radio-ripple-opacity;
     }
 
+    // Label
+    .k-radio-label:has(.k-invalid) {
+        @include fill( $color: $kendo-radio-invalid-text );
+    }
+    .k-radio-label:has(.k-disabled) {
+        @include fill( $color: $kendo-radio-disabled-text );
+    }
+
 }

package/scss/radio/_variables.scss

@@ -85,20 +85,20 @@ $kendo-radio-focus-border: var( --kendo-radio-focus-border, #{$kendo-radio-borde
 $kendo-radio-focus-shadow: var( --kendo-radio-focus-shadow, null ) !default;
 /// The outline of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-outline: var( --kendo-radio-focus-outline, 1px solid #{k-color(base-emphasis)} ) !default;
+$kendo-radio-focus-outline: var( --kendo-radio-focus-outline, 2px solid #{k-color(border-alt)} ) !default;
 /// The outline offset of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-outline-offset: var( --kendo-radio-focus-outline-offset, 2px ) !default;
+$kendo-radio-focus-outline-offset: var( --kendo-radio-focus-outline-offset, 4px ) !default;
 
 /// The background color of the disabled RadioButton.
 /// @group radio
 $kendo-radio-disabled-bg: var( --kendo-radio-disabled-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: var( --kendo-radio-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
+$kendo-radio-disabled-text: var( --kendo-radio-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 30%, transparent)} ) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: var( --kendo-radio-disabled-border, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
+$kendo-radio-disabled-border: var( --kendo-radio-disabled-border, #{color-mix(in srgb, k-color(on-app-surface) 30%, transparent)} ) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio
@@ -115,7 +115,7 @@ $kendo-radio-disabled-checked-border: var( --kendo-radio-disabled-checked-border
 $kendo-radio-invalid-text: var( --kendo-radio-invalid-text, #{k-color(error-on-surface)} ) !default;
 /// The border color of the invalid RadioButton.
 /// @group radio
-$kendo-radio-invalid-border: var( --kendo-radio-invalid-border, #{k-color(error-emphasis)} ) !default;
+$kendo-radio-invalid-border: var( --kendo-radio-invalid-border, #{k-color(error-on-surface)} ) !default;
 
 
 // Radio indicator
@@ -163,7 +163,7 @@ $kendo-radio-list-item-padding-x: var( --kendo-radio-list-item-padding-x, #{k-sp
 $kendo-radio-list-item-padding-y: var( --kendo-radio-list-item-padding-y, #{$kendo-list-md-item-padding-y} ) !default;
 /// The gap between the list items of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-gap: var( --kendo-radio-list-item-gap, #{k-spacing(2)} ) !default;
+$kendo-radio-list-item-gap: var( --kendo-radio-list-item-gap, #{k-spacing(1)} ) !default;
 
 // Radio ripple
 

package/scss/rating/_layout.scss

@@ -35,12 +35,13 @@
             outline-width: $kendo-rating-item-focus-outline-width;
             outline-style: $kendo-rating-item-focus-outline-style;
             outline-offset: calc( -1 * #{$kendo-rating-item-focus-outline-width} );
+            border-radius: k-border-radius(md);
         }
     }
 
     .k-rating-precision-part,
     .k-rating-precision-complement {
-        top: $kendo-rating-item-padding-y;
+        inset-block-start: $kendo-rating-item-padding-y;
         inset-inline-start: $kendo-rating-item-padding-x;
     }