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

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/chart-wizard/_variables.scss

@@ -5,7 +5,7 @@
 
 /// The color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-color: var( --kendo-chart-wizard-icon-area-color, k-color(primary) ) !default;
+$kendo-chart-wizard-icon-area-color: var( --kendo-chart-wizard-icon-area-color, k-color(primary-on-subtle) ) !default;
 /// The background color of the area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-bg: var( --kendo-chart-wizard-icon-area-bg, k-color(primary-subtle) ) !default;

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
@@ -89,7 +89,7 @@ $kendo-checkbox-hover-border: var( --kendo-checkbox-hover-border, $kendo-checkbo
 $kendo-checkbox-checked-bg: var( --kendo-checkbox-checked-bg, k-color(primary) ) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(app-surface) ) !default;
+$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(surface-alt) ) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: var( --kendo-checkbox-checked-border, $kendo-checkbox-checked-bg ) !default;
@@ -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

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: calc( var( --kendo-chip-padding-y, #{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