@progress/kendo-theme-material 8.0.0-dev.1 → 8.0.0-dev.11

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.1",
+    "version": "8.0.0-dev.11",
     "api": "legacy",
     "previewColors": [
         "#121212",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.1",
+    "version": "8.0.0-dev.11",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "8.0.0-dev.1",
+    "version": "8.0.0-dev.11",
     "api": "legacy",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "8.0.0-dev.1",
+  "version": "8.0.0-dev.11",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,14 +53,14 @@
     "postpublish": "echo 'no postpublish for material theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.1",
-    "@progress/kendo-theme-default": "8.0.0-dev.1",
-    "@progress/kendo-theme-utils": "8.0.0-dev.1"
+    "@progress/kendo-svg-icons": "2.3.0",
+    "@progress/kendo-theme-core": "8.0.0-dev.11",
+    "@progress/kendo-theme-default": "8.0.0-dev.11",
+    "@progress/kendo-theme-utils": "8.0.0-dev.11"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "798500c0cb615e834197322b581e870888968fd1"
+  "gitHead": "37ab24b4e2bee5705395357d867b521ccc796d02"
 }

package/scss/button/_layout.scss

@@ -26,6 +26,15 @@
         }
     }
 
+    // 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

package/scss/button/_theme.scss

@@ -9,6 +9,9 @@
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-solid-#{$name} {
             @include box-shadow( $kendo-button-shadow );
+
+            // 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) );
@@ -22,6 +25,8 @@
             // 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 );
             }
 
@@ -48,7 +53,14 @@
     // Outline button
     @each $name, $color in $kendo-button-theme-colors {
         .k-button-outline-#{$name} {
-            color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+
+            // 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)
+            } @else {
+                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+            }
 
             &:hover,
             &.k-hover,
@@ -57,7 +69,13 @@
             &:active,
             &.k-active,
             &.k-selected {
-                color: if( $name == "base", $kendo-button-text, if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color) );
+                // 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)
+                } @else {
+                    color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color)
+                }
             }
 
             // Disabled state

package/scss/button/_variables.scss

@@ -126,13 +126,13 @@ $kendo-button-shadow: $box-shadow-depth-2 !default;
 
 /// The base background of the hovered Button.
 /// @group button
-$kendo-button-hover-bg: null !default;
+$kendo-button-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !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: null !default;
+$kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
 $kendo-button-hover-gradient: null !default;
@@ -142,13 +142,13 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of the active Button.
 /// @group button
-$kendo-button-active-bg: null !default;
+$kendo-button-active-bg: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base text color of the active Button.
 /// @group button
 $kendo-button-active-text: null !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: null !default;
+$kendo-button-active-border: if($kendo-enable-color-system, k-color( base-active ), null) !default;
 /// The base background gradient of the active Button.
 /// @group button
 $kendo-button-active-gradient: null !default;
@@ -174,19 +174,19 @@ $kendo-button-selected-shadow: null !default;
 
 /// The base background of the focused Button.
 /// @group button
-$kendo-button-focus-bg: null !default;
+$kendo-button-focus-bg: if($kendo-enable-color-system, k-color( base-hover ), null) !default;
 /// The base text color of the focused Button.
 /// @group button
 $kendo-button-focus-text: null !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: null !default;
+$kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-hover ), null) !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: null !default;
+$kendo-button-focus-shadow: $box-shadow-depth-3 !default;
 
 /// The base background color of the disabled Button.
 /// @group button

package/scss/calendar/_variables.scss

@@ -3,8 +3,15 @@
 /// The width of the border around the Calendar.
 /// @group calendar
 $kendo-calendar-border-width: 1px !default;
+
+/// The font family of the Calendar.
+/// @group calendar
 $kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Calendar.
+/// @group calendar
 $kendo-calendar-font-size: var( --kendo-font-size, inherit )  !default;
+/// The line height of the Calendar.
+/// @group calendar
 $kendo-calendar-line-height: k-math-div( 20, 14 ) !default;
 
 /// The size of the cells in the Calendar.
@@ -74,7 +81,7 @@ $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
 $kendo-calendar-cell-border-radius: 100px !default;
 
 /// The horizontal padding of the header cells in the Calendar.
-/// @group calenda
+/// @group calendar
 $kendo-calendar-header-cell-padding-x: null !default;
 /// The vertical padding of the header cells in the Calendar.
 /// @group calendar
@@ -85,7 +92,11 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 /// The height of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// The font size of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit )!default;
+/// The line height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
 
 /// The background color of the header cells in the Calendar.
@@ -263,10 +274,20 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 
 // Multiview calendar
 
+/// The border radius of the range cells in the Multiview Calendar.
+/// @group calendar
+$kendo-calendar-range-cell-border-radius: k-border-radius(full) !default;
 
 // Calendar sizes
+
+/// The font size of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-font-size: var( --kendo-font-size, inherit )  !default;
+/// The line height of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-size: 32px !default;
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
@@ -275,10 +296,15 @@ $kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
 /// @group calendar
 $kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 
+/// The font size of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-font-size: var( --kendo-font-size, inherit )  !default;
+/// The line height of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-size: 36px !default;
-
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
@@ -286,10 +312,15 @@ $kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
 /// @group calendar
 $kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 
+/// The font size of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The line height of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The size of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-size: 40px !default;
-
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-padding-x: k-spacing(1) !default;

package/scss/checkbox/_variables.scss

@@ -64,7 +64,7 @@ $kendo-checkbox-bg: null !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 ) 54%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
+$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;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox

package/scss/chip/_theme.scss

@@ -31,7 +31,7 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    $color: if($kendo-enable-color-system, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                    $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 )))
                 );
 
                 &:focus,
@@ -44,14 +44,14 @@
                 &.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, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                        $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, $kendo-chip-outline-text, if( $kendo-is-dark-theme, k-try-shade( $color, 50% ), $kendo-chip-outline-text))
+                        $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 {

package/scss/chip/_variables.scss

@@ -146,7 +146,7 @@ $kendo-chip-solid-selected-text: null !default;
 $kendo-chip-outline-bg: $kendo-component-bg !default;
 /// The base text color of the outline Chip.
 /// @group chip
-$kendo-chip-outline-text: $kendo-chip-solid-text !default;
+$kendo-chip-outline-text: if($kendo-enable-color-system, k-color( base-on-surface ), $kendo-chip-solid-text) !default;
 /// The base border color of the outline Chip.
 /// @group chip
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;

package/scss/core/border-radii/index.import.scss

@@ -1,9 +1,35 @@
+/// The none border radius used across the Components.
+/// @group radii
+$kendo-border-radius-none: k-map-get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-xs: k-map-get($kendo-spacing, 1px) !default;
+/// The small border radius used across the Components.
+/// @group radii
+$kendo-border-radius-sm: k-map-get($kendo-spacing, 0.5) !default;
+/// The medium border radius used across the Components.
+/// @group radii
+$kendo-border-radius-md: k-map-get($kendo-spacing, 1) !default;
+/// The large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-lg: k-map-get($kendo-spacing, 2) !default;
+/// The extra large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xl: k-map-get($kendo-spacing, 3) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxl: k-map-get($kendo-spacing, 4) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxxl: k-map-get($kendo-spacing, 5) !default;
 
+/// The global radii Map.
+/// @group radii
 $kendo-border-radii: (
+    none: $kendo-border-radius-none,
+    xs: $kendo-border-radius-xs,
+    sm: $kendo-border-radius-sm,
+    md: $kendo-border-radius-md,
     lg: $kendo-border-radius-lg,
     xl: $kendo-border-radius-xl,
     xxl: $kendo-border-radius-xxl,

package/scss/core/color-system/_swatch-legacy.scss

@@ -1,6 +1,7 @@
 @if ($kendo-enable-color-system) {
     $kendo-color-primary: k-color( primary );
     $kendo-color-primary-contrast: k-color( on-primary );
+    $kendo-color-primary-darker: k-color( primary-active );
     $kendo-color-secondary: k-color( secondary );
     $kendo-color-secondary-contrast: k-color( on-secondary );
     $kendo-color-tertiary: k-color( tertiary );
@@ -61,5 +62,4 @@
         "inverse": $kendo-color-inverse,
     );
 
-
 }

package/scss/core/color-system/_swatch.scss

@@ -114,7 +114,7 @@ $_default-colors: (
     light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
     light-on-subtle: k-map-get( $kendo-palette-gray, 15 ),
     on-light: k-map-get( $kendo-palette-gray, black ),
-    light-on-surface: k-map-get( $kendo-palette-gray, 13 ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
     // Dark
     dark-subtle: k-map-get( $kendo-palette-gray, 7 ),
     dark-subtle-hover: k-map-get( $kendo-palette-gray, 8 ),

package/scss/dataviz/_variables.scss

@@ -92,7 +92,7 @@ $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-chart-sm-font-size: 11px !default;
 $kendo-chart-md-font-size: 12px !default;
 $kendo-chart-lg-font-size: 16px !default;
-$kendo-chart-tooltip-font-size: calc( var( --kendo-font-size, inherit ) * .929 ) !default;
+$kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
 $kendo-chart-label-font-size: .857em !default;
 $kendo-chart-title-font-size: 1.143em !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;

package/scss/drawer/_variables.scss

@@ -12,13 +12,23 @@ $kendo-drawer-border: $kendo-component-border !default;
 /// The border width of the Drawer.
 /// @group drawer
 $kendo-drawer-border-width: 1px !default;
+
+/// The font family of the Drawer.
+/// @group drawer
 $kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
+$kendo-drawer-content-padding-x: null !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer

package/scss/scheduler/_layout.scss

@@ -70,7 +70,7 @@
             line-height: normal;
 
             .k-icon {
-                padding: calc( var( --kendo-font-size, inherit) - var( --kendo-font-size-sm, inherit) );
+                padding: calc( var( --kendo-font-size, .875rem) - var( --kendo-font-size-sm, .75rem) );
                 box-sizing: content-box;
                 vertical-align: unset;
             }