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

package/scss/badge/_variables.scss

@@ -52,29 +52,29 @@ $kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group badge
-$kendo-badge-line-height: 1 !default;
+$kendo-badge-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the small Badge.
 /// @group badge
-$kendo-badge-sm-line-height: $kendo-badge-line-height !default;
+$kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Badge.
 /// @group badge
-$kendo-badge-md-line-height: $kendo-badge-line-height !default;
+$kendo-badge-md-line-height: var( --kendo-line-height-xs, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Badge.
 /// @group badge
-$kendo-badge-lg-line-height: $kendo-badge-line-height !default;
+$kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
 
 /// The calculated minimum width of the circular Badge.
 /// @group badge
-$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height } * 1em + calc( #{$kendo-badge-padding-y} * 2 ) + #{$kendo-badge-border-width * 2}) !default;
 /// The calculated minimum width of the small circular Badge.
 /// @group badge
-$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height } * 1em + calc( #{$kendo-badge-sm-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 /// The calculated minimum width of the medium circular Badge.
 /// @group badge
-$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height } * 1em + calc( #{$kendo-badge-md-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 /// The calculated minimum width of the large circular Badge.
 /// @group badge
-$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height  } * 1em + calc( #{$kendo-badge-lg-padding-y} * 2 ) + #{$kendo-badge-border-width * 2} ) !default;
 
 /// The sizes map for the Badge.
 /// @group badge
@@ -102,6 +102,19 @@ $kendo-badge-sizes: (
     )
 ) !default;
 
+$kendo-badge-theme-colors: (
+    "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;
+
 @forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
     $kendo-badge-border-width: $kendo-badge-border-width,
     $kendo-badge-border-radius: $kendo-badge-border-radius,
@@ -125,5 +138,6 @@ $kendo-badge-sizes: (
     $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
     $kendo-badge-md-min-width: $kendo-badge-md-min-width,
     $kendo-badge-lg-min-width: $kendo-badge-lg-min-width,
-    $kendo-badge-sizes: $kendo-badge-sizes
+    $kendo-badge-sizes: $kendo-badge-sizes,
+    $kendo-badge-theme-colors: $kendo-badge-theme-colors
 );

package/scss/bottom-navigation/_theme.scss

@@ -6,14 +6,65 @@
 
     @include kendo-bottom-navigation--theme-base();
 
+    .k-bottom-nav {
+        .k-bottom-nav-item.k-selected {
+            font-weight: var(--kendo-font-weight-bold, normal );
+        }
+    }
+
+    // Solid
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
+        .k-bottom-nav-solid-#{$name} {
+            @include fill(
+                $color: k-color(on-#{$name})
+            );
+
+            .k-bottom-nav-item.k-focus,
+            .k-bottom-nav-item:focus,
+            .k-bottom-nav-item.k-selected {
+                @include fill( $bg: k-color(#{$name}-active));
+            }
+        }
+    }
+
     // Flat
-    @each $name, $color in $kendo-theme-colors {
+    @each $name, $color in $kendo-bottom-navigation-theme-colors {
         .k-bottom-nav-flat-#{$name} {
+            @if $name == "primary"  {
+                color: k-color(subtle);
+            } @else {
+                $color: k-color(#{$name}-on-surface);
+            }
+
+            @if $name == "primary" or $name == "secondary" {
+                background: k-color(surface);
+            } @else if $name == "light" {
+                background: k-color(dark-subtle);
+            } @else if $name == "dark"  {
+                background: k-color(light-subtle);
+            } @else {
+                background: k-color(#{$name}-subtle);
+            }
+
             .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
+            .k-bottom-nav-item:focus,
+            .k-bottom-nav-item.k-selected {
+                background: color-mix(in srgb, currentColor 12%, transparent);
+            }
+
+            .k-bottom-nav-item.k-selected {
+                @if $name == "primary"  {
+                    @include fill(
+                        $color: k-color(on-secondary),
+                        $bg: k-color(secondary)
+                    );
+                } @else {
+                    @include fill(
+                        $color: k-color(#{$name}-on-surface),
+                        $bg: color-mix(in srgb, currentColor 12%, transparent)
+                    );
+                }
             }
         }
     }
-
 }

package/scss/bottom-navigation/_variables.scss

@@ -5,35 +5,35 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: k-spacing(0) !default;
+$kendo-bottom-nav-padding-x: k-spacing(2) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-padding-y: k-spacing(3) !default;
 /// The spacing between the BottomNavigation items.
 /// @group bottom-navigation
-$kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
+$kendo-bottom-nav-gap: k-spacing(2) !default;
 /// The width of the border around the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
+$kendo-bottom-nav-border-width: 0 !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-bottom-nav-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-letter-spacing: .2px !default;
+$kendo-bottom-nav-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
+$kendo-bottom-nav-item-padding-x: k-spacing(2.5) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
+$kendo-bottom-nav-item-padding-y: k-spacing(1) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -42,27 +42,40 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: null !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{k-spacing(2)} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-bottom-nav-item-padding-y} * 4 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: unset !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(xxl) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;
+$kendo-bottom-nav-item-gap: k-spacing(2) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: k-elevation(4) !default;
+$kendo-bottom-nav-shadow: null !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-text: $kendo-component-text !default;
+$kendo-bottom-nav-flat-text: k-color(subtle) !default;
 /// The background color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
+$kendo-bottom-nav-flat-bg: k-color(surface) !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-flat-border: $kendo-component-border !default;
+$kendo-bottom-nav-flat-border: null !default;
+
+$kendo-bottom-navigation-theme-colors: (
+    "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;
 
 @forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
     $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
@@ -83,5 +96,6 @@ $kendo-bottom-nav-flat-border: $kendo-component-border !default;
     $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
     $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
     $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
-    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border,
+    $kendo-bottom-navigation-theme-colors: $kendo-bottom-navigation-theme-colors
 );

package/scss/breadcrumb/_variables.scss

@@ -53,43 +53,43 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-bg: $kendo-component-bg !default;
+$kendo-breadcrumb-bg: null !default;
 /// The base text color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-text: $kendo-component-text !default;
+$kendo-breadcrumb-text: k-color(primary) !default;
 /// The base border color of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-border: $kendo-component-border !default;
+$kendo-breadcrumb-border: null !default;
 
 /// The box shadow of the focused Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
+$kendo-breadcrumb-focus-shadow: null !default;
 
 /// The horizontal padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-spacing(2.5) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(3) !default;
 
 /// The vertical padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-spacing(1) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(2.5) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-spacing(0.5) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-spacing(1.5) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(3.5) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
@@ -97,7 +97,7 @@ $kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-spacing(2.5) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(3) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
@@ -106,7 +106,7 @@ $kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(2) !default;
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Breadcrumb link icon.
 /// @group breadcrumb
@@ -134,33 +134,33 @@ $kendo-breadcrumb-link-initial-text: inherit !default;
 $kendo-breadcrumb-link-bg: null !default;
 /// The text color of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-text: $kendo-color-primary !default;
+$kendo-breadcrumb-link-text: k-color(primary) !default;
 /// The border color of the Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-bg: $kendo-hover-bg !default;
+$kendo-breadcrumb-link-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: $kendo-color-primary !default;
+$kendo-breadcrumb-link-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), map.get( $theme, focus-bg )) !default;
+$kendo-breadcrumb-link-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: $kendo-color-primary !default;
+$kendo-breadcrumb-link-focus-text: k-color(primary) !default;
 /// The border color of the focused Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-shadow: unset !default;
+$kendo-breadcrumb-link-focus-shadow: null !default;
 
 /// The background color of the Breadcrumb root link.
 /// @group breadcrumb
@@ -174,7 +174,7 @@ $kendo-breadcrumb-root-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-bg: $kendo-hover-bg !default;
+$kendo-breadcrumb-root-link-hover-bg: color-mix(in srgb, currentColor 8%, transparent) !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
@@ -184,7 +184,7 @@ $kendo-breadcrumb-root-link-hover-border: null !default;
 
 /// The background color of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-bg: if($kendo-enable-color-system, k-color( base-active ), map.get( $theme, focus-bg )) !default;
+$kendo-breadcrumb-root-link-focus-bg: color-mix(in srgb, currentColor 12%, transparent) !default;
 /// The text color of the focused Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
@@ -193,7 +193,7 @@ $kendo-breadcrumb-root-link-focus-text: null !default;
 $kendo-breadcrumb-root-link-focus-border: null !default;
 /// The box shadow of the focused Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-focus-shadow: unset !default;
+$kendo-breadcrumb-root-link-focus-shadow: null !default;
 
 /// The background color of the current Breadcrumb root link.
 /// @group breadcrumb

package/scss/button/_layout.scss

@@ -8,92 +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 {
-            @if($kendo-enable-color-system) {
-                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;
-        }
-    }
-
 }