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

package/scss/button/_theme.scss

@@ -9,81 +9,145 @@
 
     // Solid button
     @each $name, $color in $kendo-button-theme-colors {
-        .k-button-solid-#{$name} {
-            @include box-shadow( $kendo-button-shadow );
+        .k-button {
+            &:focus,
+            &.k-focus {
+                outline-style: solid;
+                outline-width: calc( (#{$kendo-button-border-width} * 2 ));
+                outline-offset: calc( (#{$kendo-button-border-width} * 2 ) * -1);
+            }
+        }
 
-            // These 3 lines can be deleted once we
-            // stop supporting the old color system.
-            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-color( $color )) );
-            background-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
-            border-color: if( $name == "base", $kendo-button-bg, if($kendo-enable-color-system, k-color( $name ), $color) );
+        .k-button-solid-#{$name} {
+            // Focus state
+            &:focus,
+            &.k-focus {
+                background-color: k-color(#{$name}-active);
+                outline-color: if( $name == "base" or $name == "secondary", $kendo-button-focus-border, k-color(#{$name}-active));
+                box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-active);
+            }
 
-            // Hover state
             &:hover,
             &.k-hover {
+                background-color: k-color(#{$name}-hover);
+                border-color: k-color(#{$name}-hover);
                 @include box-shadow( $kendo-button-hover-shadow );
             }
 
-            // Focus state
             &:focus,
             &.k-focus {
-                background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
-                border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), null);
-                @include box-shadow( $kendo-button-focus-shadow );
+                &:hover,
+                &.k-hover {
+                    box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
+                                inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-hover),
+                                $kendo-button-hover-shadow;
+                }
             }
+        }
+    }
 
-            // Active state
+    // Outline and Flat button
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name},
+        .k-button-flat-#{$name} {
+            &:hover,
+            &.k-hover,
             &:active,
-            &.k-active {
-                @include box-shadow( $kendo-button-active-shadow );
+            &.k-active,
+            &.k-selected {
+                color: k-color(#{$name}-on-surface);
             }
+        }
+    }
 
-            // Selected state
+    // Outline and Link button
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name},
+        .k-button-link-#{$name} {
+            color: k-color(#{$name}-on-surface);
+
+            &:active,
+            &.k-active,
             &.k-selected {
-                @include box-shadow( $kendo-button-selected-shadow );
+                background-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, k-color($name) 12%, transparent));
             }
 
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                @include box-shadow( $kendo-button-disabled-shadow );
+            &:hover,
+            &.k-hover {
+                background-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, k-color($name) 8%, transparent));
             }
         }
     }
 
 
+
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
+            color: k-color(#{$name}-on-surface);
 
-            // The "base" case can be deleted once we
-            // stop supporting the old color system.
-            @if $name == "base" {
-                color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+            @if $name == "base" or $name == "primary"  {
+                border-color: k-color(base-emphasis);
+            } @else if $name == "secondary" {
+                border-color: k-color(secondary-emphasis);
             } @else {
-                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+                border-color: k-color(#{$name}-on-surface);
             }
 
             &:hover,
             &.k-hover,
-            &:focus,
-            &.k-focus,
             &:active,
             &.k-active,
             &.k-selected {
-                // The "base" case can be deleted once we
-                // stop supporting the old color system.
-                @if $name == "base" {
-                    color: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-button-text)
+                @if $name == "base" or $name == "primary"  {
+                    border-color: k-color(base-emphasis);
+                } @else if $name == "secondary" {
+                    border-color: k-color(secondary-emphasis);
                 } @else {
-                    color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+                    border-color: k-color(#{$name}-on-surface);
                 }
             }
 
+            &:focus,
+            &.k-focus {
+                box-shadow: inset 0 0 0 calc( #{$kendo-button-border-width} * 3 ) k-color(app-surface),
+                            inset 0 0 0 calc( #{$kendo-button-border-width} * 5 ) k-color(#{$name}-on-surface);
+            }
+
             // Disabled state
             &:disabled,
             &.k-disabled {
                 color: $kendo-button-disabled-text;
+                border-color: $kendo-button-disabled-text;
+            }
+        }
+    }
+
+    // Flat button
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-flat-#{$name} {
+            &:focus,
+            &.k-focus {
+                outline: 0;
+
+                &::before {
+                    background: transparent;
+                }
+            }
+
+            &::after {
+                box-shadow: inset 0 0 0 2px if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, k-color($name) 20%, transparent));
+            }
+        }
+    }
+
+     // Clear button
+     @each $name, $color in $kendo-button-theme-colors {
+        .k-button-clear-#{$name} {
+            &:focus,
+            &.k-focus {
+                outline: 0;
             }
         }
     }
@@ -92,7 +156,20 @@
     // Link button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-link-#{$name} {
+            text-decoration: underline;
+
+            &:hover,
+            &.k-hover,
+            &:active,
+            &.k-active,
+            &.k-selected {
+                color: k-color(#{$name}-on-surface);
+            }
 
+            &:focus,
+            &.k-focus {
+                outline-color: if( $name == "base" or $name == "secondary", color-mix(in srgb, currentColor 20%, transparent), color-mix(in srgb, k-color($name) 20%, transparent));
+            }
             // Disabled state
             &:disabled,
             &.k-disabled {
@@ -109,17 +186,6 @@
     // Button group
     .k-button-group {
         @include box-shadow( $kendo-button-shadow );
-
-        .k-button {
-            @include box-shadow( none );
-        }
-
-        // Disabled state
-        &:disabled,
-        &[disabled],
-        &.k-disabled {
-            @include box-shadow( none );
-        }
     }
 
 

package/scss/button/_variables.scss

@@ -15,33 +15,36 @@ $kendo-button-border-radius: null !default;
 
 /// The horizontal padding of the Button.
 /// @group button
-$kendo-button-padding-x: k-spacing(4) !default;
+$kendo-button-padding-x: k-spacing(6) !default;
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: k-spacing(4) !default;
+$kendo-button-sm-padding-x: k-spacing(6) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: k-spacing(4) !default;
+$kendo-button-md-padding-x: $kendo-button-padding-x !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: k-spacing(4) !default;
+$kendo-button-lg-padding-x: k-spacing(6) !default;
 
 /// The vertical padding of the Button.
 /// @group button
-$kendo-button-padding-y: k-spacing(2) !default;
+$kendo-button-padding-y: calc( k-spacing(4.5) / 2 ) !default;
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: k-spacing(1.5) !default;
+$kendo-button-sm-padding-y: calc( k-spacing(3.5) / 2 ) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: k-spacing(2) !default;
+$kendo-button-md-padding-y: $kendo-button-padding-y !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: k-spacing(2.5) !default;
+$kendo-button-lg-padding-y: calc( k-spacing(5.5) / 2 ) !default;
 
 /// The font family of the Button.
 /// @group button
 $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font weight of the Button.
+/// @group button
+$kendo-button-font-weight: var( --kendo-font-weight-medium, 500 ) !default;
 
 /// The font size of the Button.
 /// @group button
@@ -58,16 +61,16 @@ $kendo-button-lg-font-size: var( --kendo-font-size, inherit )  !default;
 
 /// Line heights used along with the $kendo-font-size variable.
 /// @group button
-$kendo-button-line-height: math.div( 20, 14 ) !default;
+$kendo-button-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
-$kendo-button-sm-line-height: math.div( 20, 14 ) !default;
+$kendo-button-sm-line-height: $kendo-button-line-height !default;
 /// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
-$kendo-button-md-line-height: math.div( 20, 14 ) !default;
+$kendo-button-md-line-height: $kendo-button-line-height !default;
 /// The line height used along with the $kendo-font-size variable of the large Button.
 /// @group button
-$kendo-button-lg-line-height: math.div( 20, 14 ) !default;
+$kendo-button-lg-line-height: $kendo-button-line-height !default;
 
 /// The calculated height of the Button.
 /// @group button
@@ -108,17 +111,26 @@ $kendo-button-sizes: (
 
 /// The theme colors map for the Button.
 /// @group button
-$kendo-button-theme-colors: map.merge(
-    $kendo-theme-colors,
-    ( "base": $kendo-base-bg )
+$kendo-button-theme-colors: (
+    "base": k-color(base),
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
 ) !default;
 
 /// The base background of the Button.
 /// @group button
-$kendo-button-bg: if($kendo-enable-color-system, k-color( base ), $kendo-base-bg) !default;
+$kendo-button-bg: k-color(base) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
+$kendo-button-text: k-color(on-base) !default;
 /// The base border color of the Button.
 /// @group button
 $kendo-button-border: $kendo-button-bg !default;
@@ -127,39 +139,39 @@ $kendo-button-border: $kendo-button-bg !default;
 $kendo-button-gradient: none !default;
 /// The base shadow of the Button.
 /// @group button
-$kendo-button-shadow: k-elevation(2) !default;
+$kendo-button-shadow: null !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
+$kendo-button-hover-bg: k-color(base-hover) !default;
 /// The base text color of the hovered Button.
 /// @group button
 $kendo-button-hover-text: null !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
+$kendo-button-hover-border: k-color(base-hover) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
 /// The base shadow of the hovered Button.
 /// @group button
-$kendo-button-hover-shadow: $kendo-button-shadow !default;
+$kendo-button-hover-shadow: k-elevation(1) !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), $kendo-base-bg) !default;
+$kendo-button-active-bg: k-color(base-active) !default;
 /// The base text color of the active Button.
 /// @group button
-$kendo-button-active-text: if($kendo-enable-color-system, k-color( on-base ), $kendo-base-text) !default;
+$kendo-button-active-text: k-color(on-base) !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !default;
+$kendo-button-active-border: $kendo-button-active-bg !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
 /// The base shadow of the active Button.
 /// @group button
-$kendo-button-active-shadow: k-elevation(6) !default;
+$kendo-button-active-shadow: null !default;
 
 /// The base background color of the selected Button.
 /// @group button
@@ -175,33 +187,33 @@ $kendo-button-selected-border: $kendo-button-active-bg !default;
 $kendo-button-selected-gradient: none !default;
 /// The base shadow of the selected Button.
 /// @group button
-$kendo-button-selected-shadow: $kendo-button-shadow !default;
+$kendo-button-selected-shadow: null !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
+$kendo-button-focus-bg: k-color(base-active) !default;
 /// The base text color of the focused Button.
 /// @group button
-$kendo-button-focus-text: null !default;
+$kendo-button-focus-text: k-color(on-base) !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
+$kendo-button-focus-border: k-color(base-emphasis) !default;
 /// The base background gradient of focused Button.
 /// @group button
 $kendo-button-focus-gradient: null !default;
 /// The base shadow of the focused Button.
 /// @group button
-$kendo-button-focus-shadow: k-elevation(3) !default;
+$kendo-button-focus-shadow: null !default;
 
 /// The base background color of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 9%, transparent), k-try-shade( $kendo-body-bg, 12% )) !default;
+$kendo-button-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 12%, transparent) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), $kendo-disabled-text) !default;
+$kendo-button-disabled-text: color-mix(in srgb, k-color(on-app-surface) 38%, transparent) !default;
 /// The base border color of the disabled Button.
 /// @group button
-$kendo-button-disabled-border: if($kendo-enable-color-system, transparent, $kendo-button-disabled-bg) !default;
+$kendo-button-disabled-border: transparent !default;
 /// The base background gradient of the disabled Button.
 /// @group button
 $kendo-button-disabled-gradient: null !default;
@@ -239,7 +251,7 @@ $kendo-link-button-shadow-spread: unset !default;
 $kendo-link-button-shadow-opacity: unset !default;
 
 // Clear Button
-$kendo-clear-button-focus-opacity: .155 !default; // equal to 10% of black
+$kendo-clear-button-focus-opacity: .12 !default; // equal to 10% of black
 
 /// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
 /// @group button
@@ -273,6 +285,7 @@ $kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default
     $kendo-button-md-padding-y: $kendo-button-md-padding-y,
     $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
     $kendo-button-font-family: $kendo-button-font-family,
+    $kendo-button-font-weight: $kendo-button-font-weight,
     $kendo-button-font-size: $kendo-button-font-size,
     $kendo-button-sm-font-size: $kendo-button-sm-font-size,
     $kendo-button-md-font-size: $kendo-button-md-font-size,

package/scss/calendar/_layout.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *;
 
 
@@ -5,25 +7,20 @@
 
     @include kendo-calendar--layout-base();
 
-    // Calendar
     .k-calendar {
+        .k-range-start,
+        .k-range-end {
+            border-radius: 0;
 
-        .k-title,
-        .k-calendar-title {
-            font-weight: 500;
-            text-transform: none;
-        }
-        .k-calendar-caption,
-        .k-calendar-view th,
-        .k-calendar-view .k-calendar-th,
-        .k-meta-header,
-        .k-month-header {
-            font-weight: 500;
-        }
-        .k-calendar-view tbody th,
-        .k-calendar-view .k-calendar-tbody .k-calendar-th {
-            font-weight: 700;
+            .k-link {
+                border-radius: $kendo-calendar-range-cell-border-radius;
+            }
         }
     }
 
+     // Calendar in popup
+    .k-calendar-container,
+    .k-datetime-container {
+        border-radius: $kendo-calendar-border-radius;
+    }
 }

package/scss/calendar/_theme.scss

@@ -10,22 +10,40 @@
 
     // Calendar
     .k-calendar {
+        .k-content {
+            background-color: transparent;
+        }
 
         .k-focus .k-link {
-            @include fill(
-                $kendo-calendar-cell-hover-text,
-                $kendo-calendar-cell-hover-bg,
-                $kendo-calendar-cell-hover-border
-            );
+            background-color: color-mix(in srgb, k-color(on-app-surface) 12%, transparent);
+        }
+
+        .k-range-start {
+            background: $kendo-calendar-range-start-bg;
+        }
+
+        .k-range-end {
+            background: $kendo-calendar-range-end-bg;
         }
-        .k-selected.k-focus .k-link {
-            @include fill(
-                $kendo-calendar-cell-selected-text,
-                if($kendo-enable-color-system, $kendo-calendar-cell-selected-bg, k-try-tint($kendo-calendar-cell-selected-bg)),
-                $kendo-calendar-cell-selected-border
-            );
+
+        // Calendar navigation
+        .k-calendar-navigation {
+            li:hover,
+            li.k-hover {
+                background-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent);
+            }
         }
+    }
 
+    .k-rtl .k-calendar,
+    .k-calendar[dir="rtl"] {
+        .k-range-start {
+            background: $kendo-calendar-range-end-bg;
+        }
+
+        .k-range-end {
+            background: $kendo-calendar-range-start-bg;
+        }
     }
 
 }