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

package/scss/chat/_variables.scss

@@ -59,7 +59,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !defaul
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: $kendo-subtle-text !default;
+$kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
@@ -89,7 +89,7 @@ $kendo-chat-bubble-padding-y: k-spacing(2) !default;
 $kendo-chat-bubble-spacing: k-spacing(0.5) !default;
 /// The line height of the Chat bubble message.
 /// @group chat
-$kendo-chat-bubble-line-height: math.div( 20, 14 ) !default;
+$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The border radius of the Chat bubble message.
 /// @group chat
@@ -116,7 +116,7 @@ $kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
 $kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
 /// The background color of the Chat Toolbar.
 /// @group chat
-$kendo-chat-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
 /// The text color of the Chat Toolbar.
 /// @group chat
 $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
@@ -140,20 +140,20 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: $kendo-app-bg !default;
+$kendo-chat-bg: k-color(surface) !default;
 /// The text color of the Chat.
 /// @group chat
-$kendo-chat-text: $kendo-component-text !default;
+$kendo-chat-text: k-color(on-app-surface) !default;
 /// The border color of the Chat.
 /// @group chat
-$kendo-chat-border: $kendo-component-border !default;
+$kendo-chat-border: k-color(border) !default;
 
 /// The background color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-bg: $kendo-component-bg !default;
+$kendo-chat-bubble-bg: k-color(surface-alt) !default;
 /// The text color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-text: $kendo-component-text !default;
+$kendo-chat-bubble-text: k-color(on-base) !default;
 /// The border color of the Chat bubble.
 /// @group chat
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
@@ -169,10 +169,10 @@ $kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 /// The background color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
+$kendo-chat-alt-bubble-bg: k-color(primary) !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) !default;
+$kendo-chat-alt-bubble-text: k-color(on-primary) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -191,20 +191,20 @@ $kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-text: $kendo-color-primary !default;
+$kendo-chat-quick-reply-text: k-color(primary) !default;
 /// The border color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-border: k-color(primary) !default;
 
 /// The background color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$kendo-chat-quick-reply-hover-text: k-color(on-primary) !default;
 /// The border color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: $kendo-color-primary !default;
+$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
 
 /// The shadow blur of the focused Chat quick reply.
 /// @group chat

package/scss/checkbox/_layout.scss

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

package/scss/checkbox/_theme.scss

@@ -1,3 +1,4 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *;
 
@@ -6,12 +7,120 @@
 
     @include kendo-checkbox--theme-base();
 
+    .k-checkbox {
+        &:hover,
+        &.k-hover {
+            &::after {
+                opacity: .08;
+                background-color: k-color(on-app-surface);
+            }
+
+            &:checked,
+            &.k-checked,
+            &.k-indeterminate {
+                &::after {
+                    background-color: k-color(primary);
+                }
+            }
+
+            &.k-invalid::after {
+                background-color: k-color(error);
+            }
+        }
+
+        &:focus,
+        &.k-focus {
+            &::after {
+                opacity: .12;
+                background-color: k-color(on-app-surface);
+            }
+
+            &:checked,
+            &.k-checked,
+            &.k-indeterminate {
+                &::after {
+                    background-color: k-color(primary);
+                }
+            }
+
+            &.k-invalid::after {
+                background-color: k-color(error);
+            }
+        }
+
+    }
+
+    .k-ripple-focus.k-checkbox {
+
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus,
+        &.k-indeterminate {
+            &::after,
+            &:checked::after,
+            &.k-checked::after,
+            &.k-invalid::after {
+                background: $kendo-checkbox-ripple-bg;
+                opacity: $kendo-checkbox-ripple-opacity;
+            }
+        }
+
+        /* Checkbox Ripple animation */
+
+        &::after {
+            animation: ripple-checkbox 225ms cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &:checked,
+        &.k-checked,
+        &.k-indeterminate {
+            &::after {
+                animation: ripple-checkbox-checked 225ms cubic-bezier(0, 0, 0.2, 1);
+            }
+        }
+
+
+        @keyframes ripple-checkbox {
+            0% {
+                background: radial-gradient(circle, $kendo-checkbox-ripple-bg 0%, k-color(primary) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-checkbox-ripple-bg 50%, k-color(primary) 100%);
+                opacity: $kendo-checkbox-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(primary) 0%, k-color(primary) 100%);
+                opacity: .12;
+            }
+        }
+
+        @keyframes ripple-checkbox-checked {
+            0% {
+                background: radial-gradient(circle, $kendo-checkbox-ripple-bg 0%, k-color(on-app-surface) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-checkbox-ripple-bg 50%, k-color(on-app-surface) 100%);
+                opacity: $kendo-checkbox-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(on-app-surface) 0%, k-color(on-app-surface) 100%);
+                opacity: .12;
+            }
+        }
+    }
+
     // Checkbox
     // Disabled state
-    .k-checkbox:disabled + .k-checkbox-label {
-        color: if($kendo-enable-color-system, k-color( subtle ), if( $kendo-is-dark-theme, $light-secondary-text, $dark-secondary-text ));
-        opacity: 1;
-        filter: none;
+    .k-checkbox {
+        &:disabled,
+        &.k-disabled {
+            &.k-invalid {
+                border-color: $kendo-checkbox-disabled-border;
+            }
+        }
     }
 
 }

package/scss/checkbox/_variables.scss

@@ -11,7 +11,7 @@ $kendo-checkbox-border-width: 2px !default;
 
 /// The size of a small CheckBox.
 /// @group checkbox
-$kendo-checkbox-sm-size: k-spacing(3) !default;
+$kendo-checkbox-sm-size: k-spacing(4) !default;
 /// The size of a medium CheckBox.
 /// @group checkbox
 $kendo-checkbox-md-size: k-spacing(4) !default;
@@ -21,40 +21,43 @@ $kendo-checkbox-lg-size: k-spacing(5) !default;
 
 /// The glyph size of a small CheckBox.
 /// @group checkbox
-$kendo-checkbox-sm-glyph-size: k-spacing(2.5) !default;
+$kendo-checkbox-sm-glyph-size: k-spacing(3) !default;
 /// The glyph size of a medium CheckBox.
 /// @group checkbox
-$kendo-checkbox-md-glyph-size: k-spacing(3.5) !default;
+$kendo-checkbox-md-glyph-size: k-spacing(4) !default;
 /// The glyph size of a large CheckBox.
 /// @group checkbox
-$kendo-checkbox-lg-glyph-size: k-spacing(4.5) !default;
+$kendo-checkbox-lg-glyph-size: k-spacing(5) !default;
 
 /// The ripple size of a small CheckBox.
 /// @group checkbox
-$kendo-checkbox-sm-ripple-size: 300% !default;
+$kendo-checkbox-sm-ripple-size: k-spacing(8) !default;
 /// The ripple size of a medium CheckBox.
 /// @group checkbox
-$kendo-checkbox-md-ripple-size: 300% !default;
+$kendo-checkbox-md-ripple-size: k-spacing(10) !default;
 /// The ripple size of a large CheckBox.
 /// @group checkbox
-$kendo-checkbox-lg-ripple-size: 300% !default;
+$kendo-checkbox-lg-ripple-size: k-spacing(12) !default;
 
 // A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
         size: $kendo-checkbox-sm-size,
         glyph-size: $kendo-checkbox-sm-glyph-size,
-        ripple-size: $kendo-checkbox-sm-ripple-size
+        ripple-size: $kendo-checkbox-sm-ripple-size,
+        indicator-size: k-spacing(8)
     ),
     md: (
         size: $kendo-checkbox-md-size,
         glyph-size: $kendo-checkbox-md-glyph-size,
-        ripple-size: $kendo-checkbox-md-ripple-size
+        ripple-size: $kendo-checkbox-md-ripple-size,
+        indicator-size: k-spacing(10)
     ),
     lg: (
         size: $kendo-checkbox-lg-size,
         glyph-size: $kendo-checkbox-lg-glyph-size,
-        ripple-size: $kendo-checkbox-lg-ripple-size
+        ripple-size: $kendo-checkbox-lg-ripple-size,
+        indicator-size: k-spacing(12)
     )
 ) !default;
 
@@ -66,7 +69,7 @@ $kendo-checkbox-bg: unset !default;
 $kendo-checkbox-text: null !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
+$kendo-checkbox-border: k-color(on-app-surface) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -80,10 +83,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $kendo-color-primary !default;
+$kendo-checkbox-checked-bg: k-color(primary) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
+$kendo-checkbox-checked-text: k-color(on-primary) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -119,15 +122,15 @@ $kendo-checkbox-disabled-bg: null !default;
 $kendo-checkbox-disabled-text: null !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-component-bg, 4 )) !default;
+$kendo-checkbox-disabled-border: k-color(on-app-surface) !default;
 
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
+$kendo-checkbox-disabled-checked-bg: k-color(on-app-surface) !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
+$kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-text !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -137,10 +140,10 @@ $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !de
 $kendo-checkbox-invalid-bg: null !default;
 /// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+$kendo-checkbox-invalid-text: k-color(error) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+$kendo-checkbox-invalid-border: k-color(error) !default;
 
 
 // CheckBox indicator
@@ -172,7 +175,7 @@ $kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg
 
 /// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: k-spacing(1) !default;
+$kendo-checkbox-label-margin-x: k-spacing(4) !default;
 
 
 // CheckBox list
@@ -192,7 +195,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: $kendo-color-primary !default;
+$kendo-checkbox-ripple-bg: k-color(primary) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .2 !default;

package/scss/chip/_layout.scss

@@ -1,6 +1,16 @@
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *;
 
 
 @mixin kendo-chip--layout() {
     @include kendo-chip--layout-base();
+
+    .k-chip {
+        &:focus,
+        &.k-focus {
+            outline-style: solid;
+            outline-width: calc( (#{$kendo-chip-border-width} * 2 ));
+            outline-offset: calc( (#{$kendo-chip-border-width} * 2 ) * -1);
+        }
+    }
 }

package/scss/chip/_theme.scss

@@ -8,17 +8,28 @@
 
     @include kendo-chip--theme-base();
 
-    // Solid
-    .k-chip-solid {
-        border-color: transparent;
-    }
-
     // Solid
     @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);
+            }
+
             &:focus,
             &.k-focus {
-                @include box-shadow( none );
+                outline-color: if( $name == "base", k-color(base-emphasis), k-color(#{$name}-active));
+                box-shadow: inset 0 0 0 calc( #{$kendo-chip-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-chip-border-width} * 5 ) if( $name == "base", k-color(base-subtle-active), k-color(#{$name}-subtle));
+            }
+
+            &:active,
+            &.k-active,
+            &.k-selected {
+                background-color: k-color(#{$name}-subtle-active);
+                border-color: k-color(#{$name}-subtle-active);
             }
         }
     }
@@ -26,65 +37,34 @@
     // Outline
     @each $name, $color in $kendo-chip-theme-colors {
         .k-chip-outline-#{$name} {
-            @if ($name == "base") {
-                &:focus,
-                &.k-focus {
-                    @include box-shadow( none );
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 88% )) );
-                }
-            } @else if ($name == "warning") {
-                @include fill(
-                    $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
-                );
+            color: k-color(#{$name}-on-surface);
+            border-color: k-color(#{$name}-on-surface);
 
-                &:focus,
-                &.k-focus {
-                    @include box-shadow( none );
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )) );
-                }
-
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
-                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
-                    );
-                }
-
-                &.k-selected {
-                    @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), k-color( on-app-surface )))
-                    );
-                }
-            } @else {
-                @include fill(
-                    $color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 50% ))
-                );
+            &:hover,
+            &.k-hover,
+            &:active,
+            &.k-active,
+            &.k-selected {
+                color: k-color(#{$name}-on-surface);
+                border-color: k-color(#{$name}-on-surface);
+            }
 
-                &:focus,
-                &.k-focus {
-                    @include box-shadow( none );
-                    @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
-                    );
-                }
+            &:active,
+            &.k-active,
+            &.k-selected {
+                background-color: if( $name == "base", color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, k-color($name) 12%, transparent));
+            }
 
-                &:hover,
-                &.k-hover {
-                    @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint( $color, 80% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
-                    );
-                }
+            &:hover,
+            &.k-hover {
+                background-color: if( $name == "base", color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, k-color($name) 8%, transparent));
+            }
 
-                &.k-selected {
-                    @include fill(
-                        $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 65% )),
-                        $color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 50% ))
-                    );
-                }
+            &:focus,
+            &.k-focus {
+                outline-color: k-color(#{$name}-on-surface);
+                box-shadow: inset 0 0 0 calc( #{$kendo-chip-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-chip-border-width} * 5 ) k-color(#{$name}-on-surface);
             }
         }
     }