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

package/scss/chip/_layout.scss

@@ -12,21 +12,17 @@
         // TODO: Decide wether to define the same variable for the rest of the themes, or remove it
         font-family: $kendo-chip-font-family;
 
-        &:hover,
-        &:focus {
+        &:hover {
             outline: 0;
             text-decoration: none;
         }
 
-        &.k-chip-outline.k-focus::after,
-        &.k-chip-outline:focus::after {
-                content: '';
-                position: absolute;
-                border: medium none;
-                inset: $kendo-chip-focus-offset;
-                outline-width: $kendo-chip-focus-outline-width;
-                outline-style: $kendo-chip-focus-outline-style;
-                z-index: 1;
+        &:focus,
+        &.k-focus {
+            text-decoration: none;
+            outline-width: $kendo-chip-focus-outline-width;
+            outline-style: $kendo-chip-focus-outline-style;
+            outline-offset: $kendo-chip-focus-offset;
         }
     }
 

package/scss/chip/_theme.scss

@@ -7,25 +7,15 @@
 
     @include kendo-chip--theme-base();
 
-    .k-chip.k-chip-solid-base {
-        border-color: $kendo-chip-border;
-        color: $kendo-chip-text;
-        background-color: $kendo-chip-bg;
-
-        &:hover,
-        &.k-hover {
-            color: $kendo-chip-hover-text;
-            background-color: $kendo-chip-hover-bg;
-            border-color: $kendo-chip-hover-border;
-        }
-
+    .k-chip {
         &:focus,
         &.k-focus {
-            color: $kendo-chip-focus-text;
-            background-color: $kendo-chip-focus-bg;
             border-color: $kendo-chip-focus-border;
+            outline-color: $kendo-chip-focus-border;
         }
+    }
 
+    .k-chip.k-chip-solid-base {
         &.k-chip-outline:focus::after,
         &.k-chip-outline.k-focus::after {
             outline-color: $kendo-chip-focus-outline;
@@ -33,7 +23,6 @@
 
         &.k-selected {
             color: $kendo-chip-selected-text;
-            background-color: $kendo-chip-selected-bg;
             border-color: $kendo-chip-selected-border;
         }
 
@@ -49,25 +38,36 @@
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-solid-#{$name} {
             border-color: k-color(#{$name}-subtle);
-            &:hover,
-            &.k-hover {
-                border-color: k-color(#{$name}-subtle-hover);
+
+            &:active,
+            &.k-active {
+                background-color: k-color(#{$name}-subtle-active);
+                border-color: k-color(#{$name}-subtle-active);
+            }
+
+            &.k-selected {
+                border-color: k-color(#{$name}-subtle-active);
             }
+
             &:focus,
             &.k-focus {
-                border-color: k-color(#{$name}-on-subtle);
                 box-shadow: none;
             }
-            &.k-selected {
-                border-color: k-color(#{$name}-subtle-active);
+
+            &:hover,
+            &.k-hover {
+                background-color: k-color(#{$name}-subtle-hover);
+                border-color: k-color(#{$name}-subtle-hover);
             }
         }
 
         .k-chip-outline-#{$name} {
+            color: k-color(#{$name}-on-subtle);
+
             &:hover,
             &.k-hover {
-                color: k-color(app-surface);
-                background-color: k-color(#{$name}-on-surface);
+                color: k-color(#{$name}-on-subtle);
+                background-color: color-mix(in srgb, k-color(#{$name}-hover) 3%, transparent);
                 border-color: k-color(#{$name}-on-surface);
             }
 
@@ -76,9 +76,11 @@
                 box-shadow: none;
             }
 
+            &:active,
+            &.k-active,
             &.k-selected {
-                color: k-color(app-surface);
-                background-color: k-color(#{$name}-on-surface);
+                color: k-color(#{$name}-on-subtle);
+                background-color: color-mix(in srgb, k-color(#{$name}-active) 13%, transparent);
                 border-color: k-color(#{$name}-on-surface);
             }
 
@@ -87,6 +89,22 @@
                 background-color: transparent;
                 border-color: currentColor;
             }
+
+            @if ($name == "base") {
+                border-color: $kendo-chip-border;
+
+                &:active,
+                &.k-active,
+                &.k-selected {
+                    background-color: color-mix(in srgb, k-color(on-base) 13%, transparent);
+                    border-color: $kendo-chip-border;
+                }
+
+                &:hover,
+                &.k-hover {
+                    border-color: $kendo-chip-hover-border;
+                }
+            }
         }
     }
 

package/scss/chip/_variables.scss

@@ -23,39 +23,36 @@ $kendo-chip-avatar-height: var( --kendo-chip-avatar-height, 1em ) !default;
 /// The flex basis of the Chip' avatar.
 /// @group chip
 $kendo-chip-avatar-flex-basis: 1em !default;
-/// The text color of the disabled Chip.
-/// @group chip
-$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 
 /// The offset of the outline focused Chip.
 /// @group chip
-$kendo-chip-focus-offset: k-spacing(0.5) !default;
+$kendo-chip-focus-offset: calc( #{$kendo-chip-border-width} * -1) !default;
 /// The outline width of the outline focused Chip.
 /// @group chip
-$kendo-chip-focus-outline-width: 1px !default;
+$kendo-chip-focus-outline-width: 2px !default;
 /// The outline style of the outline focused Chip.
 /// @group chip
 $kendo-chip-focus-outline-style: solid !default;
 
 /// The horizontal padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-x: k-spacing(2) !default;
+$kendo-chip-sm-padding-x: k-spacing(1.5) !default;
 /// The horizontal padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-x: var( --kendo-chip-padding-x, k-spacing(2) ) !default;
+$kendo-chip-md-padding-x: var( --kendo-chip-padding-x, k-spacing(1.5) ) !default;
 /// The horizontal padding of the large Chip.
 /// @group chip
 $kendo-chip-lg-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the small Chip.
 /// @group chip
-$kendo-chip-sm-padding-y: k-spacing(0.5) !default;
+$kendo-chip-sm-padding-y: calc( #{k-spacing(0.5)} / 2 ) !default;
 /// The vertical padding of the medium Chip.
 /// @group chip
-$kendo-chip-md-padding-y: var( --kendo-chip-padding-y, k-spacing(1) ) !default;
+$kendo-chip-md-padding-y: var( --kendo-chip-padding-y, calc( #{k-spacing(1.5)} / 2 ) ) !default;
 /// The vertical padding of the large Chip.
 /// @group chip
-$kendo-chip-lg-padding-y: k-spacing(1.5) !default;
+$kendo-chip-lg-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;
 
 /// The font weight of the Chip.
 /// @group chip
@@ -63,20 +60,20 @@ $kendo-chip-font-weight: var(--kendo-chip-font-weight, var( --kendo-font-weight-
 
 /// The font size of the small Chip.
 /// @group chip
-$kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: var( --kendo-chip-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-chip-md-font-size: var( --kendo-chip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The font size of the large Chip.
 /// @group chip
 $kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chip-sm-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The medium Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-md-line-height: var( --kendo-chip-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-chip-md-line-height: var( --kendo-chip-line-height, var( --kendo-line-height-lg, normal ) ) !default;
 /// The large Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-lg-line-height: var( --kendo-line-height, normal ) !default;
@@ -132,19 +129,13 @@ $kendo-chip-text: var( --kendo-chip-text, k-color(base-on-subtle) ) !default;
 $kendo-chip-bg: var( --kendo-chip-bg, k-color(base-subtle) ) !default;
 /// The base border color of the solid Chip.
 /// @group chip
-$kendo-chip-border: var( --kendo-chip-border, k-color(base-subtle) ) !default;
-/// The base text color of the hovered solid Chip.
-/// @group chip
-$kendo-chip-hover-text: var( --kendo-chip-hover-text, k-color(base-on-subtle) ) !default;
+$kendo-chip-border: var( --kendo-chip-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The base background color of the hovered solid Chip.
 /// @group chip
 $kendo-chip-hover-bg: var( --kendo-chip-hover-bg, k-color(base-subtle-hover) ) !default;
 /// The base border color of the hovered solid Chip.
 /// @group chip
-$kendo-chip-hover-border: var( --kendo-chip-hover-border, k-color(base-subtle-hover) ) !default;
-/// The base text color of the focused solid Chip.
-/// @group chip
-$kendo-chip-focus-text: var( --kendo-chip-focused-text, k-color(base-on-subtle) ) !default;
+$kendo-chip-hover-border: var( --kendo-chip-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 /// The base background color of the focused solid Chip.
 /// @group chip
 $kendo-chip-focus-bg: var( --kendo-chip-focused-bg, k-color(base-subtle) ) !default;
@@ -165,10 +156,10 @@ $kendo-chip-selected-bg: var( --kendo-chip-selected-bg, k-color(primary) )  !def
 $kendo-chip-selected-border: var( --kendo-chip-selected-border, k-color(primary) ) !default;
 /// The base text color of the disabled solid Chip.
 /// @group chip
-$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base background color of the disabled solid Chip.
 /// @group chip
-$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) )  !default;
+$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) )  !default;
 /// The base border color of the disabled solid Chip.
 /// @group chip
 $kendo-chip-disabled-border: var( --kendo-chip-disabled-border, transparent ) !default;

package/scss/coloreditor/_layout.scss

@@ -18,9 +18,9 @@
 
         .k-coloreditor-#{$size} {
 
+            .k-coloreditor-header,
             .k-coloreditor-views {
-                padding-block-start: calc($_views-padding-y * 2);
-                padding-block-end: $_views-padding-y;
+                padding-block: $_views-padding-y;
                 padding-inline: $_views-padding-x;
             }
         }

package/scss/coloreditor/_variables.scss

@@ -44,14 +44,14 @@ $kendo-color-editor-bg: var(--kendo-color-editor-bg, k-color(surface-alt)) !defa
 $kendo-color-editor-border: var(--kendo-color-editor-border, color-mix(in srgb, k-color(border) 16%, transparent)) !default;
 /// The box shadow of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-editor-shadow: k-elevation(5) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor
 $kendo-color-editor-focus-border: var(--kendo-color-editor-focus-border, color-mix(in srgb, k-color(border) 10%, transparent)) !default;
 /// The box shadow of the focused ColorEditor.
 /// @group color-editor
-$kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-color-editor-focus-shadow: null !default;
 
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
@@ -59,22 +59,22 @@ $kendo-color-editor-header-actions-spacing: var(--kendo-color-editor-header-acti
 
 /// The vertical padding of the small ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-sm-header-padding-y: var(--kendo-color-editor-sm-header-padding-y, k-spacing(2)) !default;
+$kendo-color-editor-sm-header-padding-y: var(--kendo-color-editor-sm-header-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the small ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-sm-header-padding-x: var(--kendo-color-editor-sm-header-padding-x, k-spacing(2)) !default;
+$kendo-color-editor-sm-header-padding-x: var(--kendo-color-editor-sm-header-padding-x, k-spacing(3)) !default;
 /// The vertical padding of the medium ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-md-header-padding-y: var(--kendo-color-editor-md-header-padding-y, k-spacing(2)) !default;
+$kendo-color-editor-md-header-padding-y: var(--kendo-color-editor-md-header-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the medium ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-md-header-padding-x: var(--kendo-color-editor-md-header-padding-x, k-spacing(2)) !default;
+$kendo-color-editor-md-header-padding-x: var(--kendo-color-editor-md-header-padding-x, k-spacing(3)) !default;
 /// The vertical padding of the large ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-lg-header-padding-y: var(--kendo-color-editor-lg-header-padding-y, k-spacing(4)) !default;
+$kendo-color-editor-lg-header-padding-y: var(--kendo-color-editor-lg-header-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the large ColorEditor header.
 /// @group color-editor
-$kendo-color-editor-lg-header-padding-x: var(--kendo-color-editor-lg-header-padding-x, k-spacing(4)) !default;
+$kendo-color-editor-lg-header-padding-x: var(--kendo-color-editor-lg-header-padding-x, k-spacing(3)) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -121,22 +121,22 @@ $kendo-color-editor-views-spacing: var(--kendo-color-editor-views-spacing, k-spa
 
 /// The vertical padding of the small ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-sm-views-padding-y: var(--kendo-color-editor-sm-views-padding-y, k-spacing(2)) !default;
+$kendo-color-editor-sm-views-padding-y: var(--kendo-color-editor-sm-views-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the small ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-sm-views-padding-x: var(--kendo-color-editor-sm-views-padding-x, k-spacing(2)) !default;
+$kendo-color-editor-sm-views-padding-x: var(--kendo-color-editor-sm-views-padding-x, k-spacing(3)) !default;
 /// The vertical padding of the medium ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-md-views-padding-y: var(--kendo-color-editor-md-views-padding-y, k-spacing(2)) !default;
+$kendo-color-editor-md-views-padding-y: var(--kendo-color-editor-md-views-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the medium ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-md-views-padding-x: var(--kendo-color-editor-md-views-padding-x, k-spacing(2)) !default;
+$kendo-color-editor-md-views-padding-x: var(--kendo-color-editor-md-views-padding-x, k-spacing(3)) !default;
 /// The vertical padding of the large ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-lg-views-padding-y: var(--kendo-color-editor-lg-views-padding-y, k-spacing(4)) !default;
+$kendo-color-editor-lg-views-padding-y: var(--kendo-color-editor-lg-views-padding-y, k-spacing(3)) !default;
 /// The horizontal padding of the large ColorEditor views container.
 /// @group color-editor
-$kendo-color-editor-lg-views-padding-x: var(--kendo-color-editor-lg-views-padding-x, k-spacing(4)) !default;
+$kendo-color-editor-lg-views-padding-x: var(--kendo-color-editor-lg-views-padding-x, k-spacing(3)) !default;
 
 /// The vertical padding of the ColorEditor footer.
 /// @group color-editor

package/scss/colorgradient/_layout.scss

@@ -24,7 +24,15 @@
         &.k-vstack {
             padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-border-width) / 2 );
         }
-}
+    }
+
+    .k-colorgradient .k-draghandle {
+
+        &:focus,
+        &.k-focus {
+            outline-width: 2px;
+        }
+    }
 
     .k-colorgradient-slider {
 
@@ -38,6 +46,14 @@
             transform: none;
             z-index: auto;
         }
+
+        .k-slider-thumb {
+            background: transparent;
+
+            &::after {
+                display: none;
+            }
+        }
     }
 
     .k-colorgradient-inputs {

package/scss/colorgradient/_theme.scss

@@ -1,5 +1,4 @@
 @use "../core/_index.scss" as *;
-@use "../slider/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/colorgradient/_theme.scss" as *;
 
@@ -16,6 +15,21 @@
         }
     }
 
+    .k-colorgradient .k-draghandle {
+        outline-color: $kendo-color-gradient-draghandle-outline;
+
+        &:focus,
+        &.k-focus {
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
+        }
+
+        &.k-disabled {
+            outline-color: color-mix(in srgb, k-color(on-app-surface) 30%, transparent);
+            border-color: color-mix(in srgb, k-color(on-app-surface) 7%, transparent);
+            background: color-mix(in srgb, k-color(on-app-surface) 7%, transparent);
+        }
+    }
+
     .k-colorgradient-slider .k-slider-track {
         border-color: $kendo-color-gradient-slider-border;
     }
@@ -25,28 +39,19 @@
         &:hover,
         &.k-hover,
         &:active,
-        &.k-active {
-            background-color: $kendo-slider-thumb-bg;
-        }
-
-        &:focus,
-        &.k-focus {
-            background-color: $kendo-slider-thumb-bg;
+        &.k-selected {
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
+            background: k-color(app-surface);
         }
     }
 
-    .k-colorgradient .k-draghandle {
+    .k-colorgradient .k-hsv-draghandle {
 
         &:hover,
         &.k-hover,
         &:active,
-        &.k-active {
-            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
-        }
-
-        &:focus,
-        &.k-focus {
-            border-color: $kendo-color-gradient-draghandle-focus-border;
+        &.k-selected {
+            outline-color: k-color(app-surface);
         }
     }
 }

package/scss/colorgradient/_variables.scss

@@ -170,13 +170,13 @@ $kendo-color-gradient-draghandle-outline-width: var(--kendo-color-gradient-dragh
 $kendo-color-gradient-draghandle-border: var(--kendo-color-gradient-draghandle-border, k-color(app-surface)) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
-/// The color of the border around the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-shadow: k-elevation(4) !default;
+/// The color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-border: var(--kendo-color-gradient-draghandle-focus-border, k-color(app-surface)) !default;
+$kendo-color-gradient-draghandle-outline: k-color(border) !default;
 /// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-focus-shadow: var(--kendo-color-gradient-draghandle-focus-shadow, k-color(base-emphasis)) !default;
+$kendo-color-gradient-draghandle-focus-shadow: var(--kendo-color-gradient-draghandle-focus-shadow, k-color(border-alt)) !default;
 /// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-hover-shadow: var(--kendo-color-gradient-draghandle-hover-shadow, k-color(base-emphasis)) !default;

package/scss/colorpalette/_layout.scss

@@ -11,8 +11,6 @@
     }
 
     .k-colorpalette-tile {
-        outline-width: $kendo-color-palette-tile-outline-width;
-        outline-style: $kendo-color-palette-tile-outline-style;
 
         &:hover,
         &.k-hover {

package/scss/colorpalette/_theme.scss

@@ -6,28 +6,20 @@
     @include kendo-color-palette--theme-base();
 
     .k-colorpalette-tile {
-        outline-color: $kendo-color-palette-tile-outline;
 
         &:hover,
         &.k-hover {
             @include box-shadow( $kendo-color-palette-tile-hover-shadow );
-            outline-color: $kendo-color-palette-tile-hover-outline;
         }
 
         &:focus,
         &.k-focus {
             @include box-shadow( $kendo-color-palette-tile-focus-shadow );
-            outline-color: $kendo-color-palette-tile-focus-outline;
         }
 
+        &:active,
         &.k-selected {
             @include box-shadow( $kendo-color-palette-tile-selected-shadow );
-            outline-color: $kendo-color-palette-tile-selected-outline;
-        }
-
-        &.k-selected:hover,
-        &.k-selected:focus {
-            outline-color: $kendo-color-palette-tile-selected-hover-outline;
         }
     }
 }

package/scss/colorpalette/_variables.scss

@@ -11,15 +11,6 @@ $kendo-color-palette-font-size: var( --kendo-color-palette-font-size, var( --ken
 /// @group color-palette
 $kendo-color-palette-line-height: var( --kendo-color-palette-line-height, 0 ) !default;
 
-/// The outline width of the ColorPalette tile.
-/// @group color-palette
-$kendo-color-palette-tile-outline-width: var( --kendo-color-palette-tile-outline-width, 1px ) !default;
-/// The outline style of the ColorPalette tile.
-/// @group color-palette
-$kendo-color-palette-tile-outline-style: var( --kendo-color-palette-tile-outline-style, solid ) !default;
-/// The outline color of the ColorPalette tile.
-/// @group color-palette
-$kendo-color-palette-tile-outline: var( --kendo-color-palette-tile-outline, transparent ) !default;
 /// The width of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-width: k-spacing(6) !default;
@@ -45,27 +36,15 @@ $kendo-color-palette-lg-tile-width: var( --kendo-color-palette-lg-tile-width, #{
 /// @group color-palette
 $kendo-color-palette-lg-tile-height: var( --kendo-color-palette-lg-tile-height, #{$kendo-color-palette-lg-tile-width} ) !default;
 
-/// The outline color of the ColorPalette focused tile.
-/// @group color-palette
-$kendo-color-palette-tile-focus-outline: var( --kendo-color-palette-tile-focus-outline, #{k-color(base-emphasis)} ) !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
-$kendo-color-palette-tile-focus-shadow: var( --kendo-color-palette-tile-focus-shadow, inset 0 0 0 2px #{k-color(app-surface)} ) !default;
-/// The outline color of the ColorPalette hovered tile.
-/// @group color-palette
-$kendo-color-palette-tile-hover-outline: var( --kendo-color-palette-tile-hover-outline, #{color-mix(in srgb, k-color(border) 10%, transparent)} ) !default;
+$kendo-color-palette-tile-focus-shadow: var( --kendo-color-palette-tile-focus-shadow, inset 0 0 0 2px #{k-color(border-alt)}, inset 0 0 0 3px #{k-color(app-surface)} ) !default;
 /// The shadow of the ColorPalette hovered tile.
 /// @group color-palette
-$kendo-color-palette-tile-hover-shadow: var( --kendo-color-palette-tile-hover-shadow, inset 0 0 0 2px #{$kendo-color-palette-tile-hover-outline}, inset 0 0 0 4px #{k-color(app-surface)} ) !default;
-/// The outline color of the ColorPalette selected tile.
-/// @group color-palette
-$kendo-color-palette-tile-selected-outline: var( --kendo-color-palette-tile-selected-outline, #{$kendo-color-palette-tile-hover-outline} ) !default;
+$kendo-color-palette-tile-hover-shadow: var( --kendo-color-palette-tile-hover-shadow, inset 0 0 0 2px #{k-color(primary)}, inset 0 0 0 3px #{k-color(app-surface)} ) !default;
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
-$kendo-color-palette-tile-selected-shadow: var( --kendo-color-palette-tile-selected-shadow, #{$kendo-color-palette-tile-hover-shadow} ) !default;
-/// The outline color of the ColorPalette selected hover tile.
-/// @group color-palette
-$kendo-color-palette-tile-selected-hover-outline: var( --kendo-color-palette-tile-selected-hover-outline, #{$kendo-color-palette-tile-focus-outline} ) !default;
+$kendo-color-palette-tile-selected-shadow: var( --kendo-color-palette-tile-selected-shadow, inset 0 0 0 3px #{k-color(primary)}, inset 0 0 0 5px #{k-color(app-surface)} ) !default;
 
 /// The size map of the ColorPalette.
 /// @group color-palette

package/scss/column-menu/_variables.scss

@@ -1,13 +1,13 @@
 @use "../core/_index.scss" as *;
 
-$kendo-column-menu-item-sm-padding-x: var( --kendo-column-menu-item-sm-padding-x, k-spacing(2) ) !default;
-$kendo-column-menu-item-sm-padding-y: var( --kendo-column-menu-item-sm-padding-y, k-spacing(1.5) ) !default;
+$kendo-column-menu-item-sm-padding-x: var( --kendo-column-menu-item-sm-padding-x, k-spacing(1.5) ) !default;
+$kendo-column-menu-item-sm-padding-y: var( --kendo-column-menu-item-sm-padding-y, k-spacing(1) ) !default;
 
-$kendo-column-menu-item-md-padding-x: var( --kendo-column-menu-item-md-padding-x, k-spacing(2) ) !default;
-$kendo-column-menu-item-md-padding-y: var( --kendo-column-menu-item-md-padding-y, k-spacing(2) ) !default;
+$kendo-column-menu-item-md-padding-x: var( --kendo-column-menu-item-md-padding-x, k-spacing(1.5) ) !default;
+$kendo-column-menu-item-md-padding-y: var( --kendo-column-menu-item-md-padding-y, k-spacing(1.5) ) !default;
 
-$kendo-column-menu-item-lg-padding-x: var( --kendo-column-menu-item-lg-padding-x, k-spacing(2) ) !default;
-$kendo-column-menu-item-lg-padding-y: var( --kendo-column-menu-item-lg-padding-y, k-spacing(2.5) ) !default;
+$kendo-column-menu-item-lg-padding-x: var( --kendo-column-menu-item-lg-padding-x, k-spacing(1.5) ) !default;
+$kendo-column-menu-item-lg-padding-y: var( --kendo-column-menu-item-lg-padding-y, k-spacing(2) ) !default;
 
 $kendo-column-menu-sm-font-size: var( --kendo-column-menu-sm-font-size, var( --kendo-font-size, inherit ) ) !default;
 $kendo-column-menu-md-font-size: var( --kendo-column-menu-md-font-size, var( --kendo-font-size, inherit ) ) !default;

package/scss/core/border-radii/_index.scss

@@ -15,16 +15,16 @@ $kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
 $kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
 /// The large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-lg: map.get($kendo-spacing, 1.5) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xl: map.get($kendo-spacing, 2) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxl: map.get($kendo-spacing, 3) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: map.get($kendo-spacing, 5) !default;
+$kendo-border-radius-xxxl: map.get($kendo-spacing, 4) !default;
 /// The largest border radius used across the Components.
 /// @group radii
 $kendo-border-radius-full: 9999px !default;