@progress/kendo-theme-material 11.0.0-dev.0 → 11.0.0

package/scss/button/_layout.scss

@@ -8,90 +8,11 @@
 
     @include kendo-button--layout-base();
 
-    // Button
     .k-button {
-        text-transform: uppercase;
-        font-weight: 500;
-
-        &::before {
-            display: block;
-            transition: opacity .4s cubic-bezier( .25, .8, .25, 1 );
-        }
-        &::after {
-            display: none !important; // stylelint-disable-line declaration-no-important
-        }
-
         &:disabled,
         &[disabled],
         &.k-disabled {
             opacity: 1;
-            filter: none;
-        }
-    }
-
-    // Solid button
-    .k-button-solid {
-        &::before {
-            display: none;
-        }
-    }
-
-    // Outline button
-    .k-button-outline {
-        background-color: transparent !important; // stylelint-disable-line declaration-no-important
-        box-shadow: none !important; // stylelint-disable-line declaration-no-important
-    }
-
-
-    // Link button
-    .k-button-link {
-        &:hover,
-        &.k-hover,
-        &:active,
-        &.k-active,
-        &.k-selected {
-            &::before {
-                opacity: 0;
-            }
-        }
-
-        &:focus,
-        &.k-focus {
-            &::before {
-                opacity: $kendo-flat-button-focus-opacity;
-            }
         }
     }
-
-
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
-        &::before {
-            display: none;
-        }
-
-
-        &:focus,
-        &.k-focus,
-        &:active {
-            &::before {
-                display: block;
-            }
-        }
-    }
-
-
-    // Button group
-    .k-button-group {}
-
-
-    // Popup button group
-    .k-overflow-button,
-    .k-overflow-group {
-        &.k-button-group {
-            line-height: inherit;
-        }
-    }
-
 }

package/scss/button/_theme.scss

@@ -9,62 +9,145 @@
 
     // Solid button
     @each $name, $color in $kendo-button-theme-colors {
+        .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);
+            }
+        }
+
         .k-button-solid-#{$name} {
-            @include box-shadow( $kendo-button-shadow );
+            // 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: k-color(#{$name}-hover);
-                border-color: k-color(#{$name}-hover);
-                @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);
 
+            @if $name == "base" or $name == "primary"  {
+                border-color: k-color(base-emphasis);
+            } @else if $name == "secondary" {
+                border-color: k-color(secondary-emphasis);
+            } @else {
+                border-color: k-color(#{$name}-on-surface);
+            }
+
             &:hover,
             &.k-hover,
-            &:focus,
-            &.k-focus,
             &:active,
             &.k-active,
             &.k-selected {
-                color: k-color(#{$name}-on-surface);
+                @if $name == "base" or $name == "primary"  {
+                    border-color: k-color(base-emphasis);
+                } @else if $name == "secondary" {
+                    border-color: k-color(secondary-emphasis);
+                } @else {
+                    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;
             }
         }
     }
@@ -73,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 {
@@ -90,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
@@ -136,7 +139,7 @@ $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
@@ -152,7 +155,7 @@ $kendo-button-hover-border: k-color(base-hover) !default;
 $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
@@ -162,13 +165,13 @@ $kendo-button-active-bg: k-color(base-active) !default;
 $kendo-button-active-text: k-color(on-base) !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: k-color(base-active) !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
@@ -184,30 +187,30 @@ $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: k-color(base-hover) !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: k-color(base-hover) !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: color-mix(in srgb, k-color(on-app-surface) 9%, transparent) !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: color-mix(in srgb, k-color(on-app-surface) 32%, transparent) !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: transparent !default;
@@ -248,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
@@ -282,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,
-                $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;
+        }
     }
 
 }