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

package/scss/prompt/_variables.scss

@@ -4,42 +4,42 @@
 
 /// The text color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-text: $kendo-component-text !default;
+$kendo-prompt-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-bg: $kendo-component-bg !default;
+$kendo-prompt-bg: k-color(surface) !default;
 /// The border color of the AIPrompt.
 /// @group prompt
-$kendo-prompt-border: $kendo-component-border !default;
+$kendo-prompt-border: k-color(border) !default;
 
 /// The text color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-text: $kendo-component-header-text !default;
+$kendo-prompt-header-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-bg: $kendo-component-bg !default;
+$kendo-prompt-header-bg: k-color(surface) !default;
 /// The border color of the AIPrompt header.
 /// @group prompt
-$kendo-prompt-header-border: $kendo-component-header-border !default;
+$kendo-prompt-header-border: k-color(border) !default;
 
 /// The vertical padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: k-spacing(4) !default;
+$kendo-prompt-content-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: k-spacing(4) !default;
+$kendo-prompt-content-padding-x: k-spacing(6) !default;
 /// The spacing between the items of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: k-spacing(4) !default;
+$kendo-prompt-content-spacing: k-spacing(2) !default;
 /// The text color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-text: $kendo-component-header-text !default;
+$kendo-prompt-content-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-bg: $kendo-component-header-bg !default;
+$kendo-prompt-content-bg: k-color(app-surface) !default;
 /// The text border of the AIPrompt content.
 /// @group prompt
-$kendo-prompt-content-border: $kendo-component-header-border !default;
+$kendo-prompt-content-border: k-color(border) !default;
 
 /// The spacing between the items of the AIPrompt content expander.
 /// @group prompt
@@ -50,19 +50,19 @@ $kendo-prompt-expander-spacing: k-spacing(2) !default;
 $kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(3) !default;
 /// The border radius of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(xl) !default;
 /// The text color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-text: $kendo-component-text !default;
+$kendo-prompt-suggestion-text: k-color(on-app-surface) !default;
 /// The background color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-bg: $kendo-body-bg !default;
+$kendo-prompt-suggestion-bg: k-color(surface-alt) !default;
 /// The border color of the AIPrompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border: $kendo-component-border !default;
+$kendo-prompt-suggestion-border: k-color(border) !default;
 /// The elevation of the AIPrompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-shadow: k-elevation(1) !default;

package/scss/radio/_layout.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/radio/_layout.scss" as *;
 
 
@@ -5,6 +7,39 @@
 
     @include kendo-radio--layout-base();
 
+    // RadioButton
+    // Hover and Focus indicator
+    .k-radio {
+        &: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-radio-sizes {
+        $_size: map.get( $size-props, size );
+        $_indicator-size: map.get( $size-props, indicator-size );
+
+        .k-radio-#{$size}::after {
+            width: $_indicator-size;
+            height: $_indicator-size;
+        }
+    }
+
     .k-radio::before {
         transition: transform linear 280ms;
         transform-origin: 0 0;

package/scss/radio/_theme.scss

@@ -1,3 +1,4 @@
+@use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/radio/_theme.scss" as *;
 
@@ -6,12 +7,116 @@
 
     @include kendo-radio--theme-base();
 
+    .k-radio {
+        &:hover,
+        &.k-hover {
+            &::after {
+                opacity: .08;
+                background-color: k-color(on-app-surface);
+            }
+
+            &:checked,
+            &.k-checked {
+                &::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 {
+                &::after {
+                    background-color: k-color(primary);
+                }
+            }
+
+            &.k-invalid::after {
+                background-color: k-color(error);
+            }
+        }
+
+    }
+
+    .k-ripple-focus.k-radio {
+
+        &:hover,
+        &.k-hover,
+        &:focus,
+        &.k-focus {
+            &::after,
+            &:checked::after,
+            &.k-checked::after,
+            &.k-invalid::after {
+                background: $kendo-radio-ripple-bg;
+                opacity: $kendo-radio-ripple-opacity;
+            }
+        }
+
+        /* Radio Ripple animation */
+
+        &::after {
+            animation: ripple-radio 225ms cubic-bezier(0, 0, 0.2, 1);
+        }
+
+        &:checked,
+        &.k-checked {
+            &::after {
+                animation: ripple-radio-checked 225ms cubic-bezier(0, 0, 0.2, 1);
+            }
+        }
+
+
+        @keyframes ripple-radio {
+            0% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(primary) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(primary) 100%);
+                opacity: $kendo-radio-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(primary) 0%, k-color(primary) 100%);
+                opacity: .12;
+            }
+        }
+
+        @keyframes ripple-radio-checked {
+            0% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 0%, k-color(on-app-surface) 50%);
+                opacity: 0.08;
+            }
+            50% {
+                background: radial-gradient(circle, $kendo-radio-ripple-bg 50%, k-color(on-app-surface) 100%);
+                opacity: $kendo-radio-ripple-opacity;
+            }
+            100% {
+                background: radial-gradient(circle, k-color(on-app-surface) 0%, k-color(on-app-surface) 100%);
+                opacity: .12;
+            }
+        }
+    }
+
     // Radio
     // Disabled state
-    .k-radio:disabled + .k-radio-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-radio {
+        &:disabled,
+        &.k-disabled {
+            &.k-invalid {
+                border-color: $kendo-radio-disabled-border;
+            }
+        }
     }
 
 }

package/scss/radio/_variables.scss

@@ -15,7 +15,7 @@ $kendo-radio-border-width: 2px !default;
 
 /// The size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-size: k-spacing(3) !default;
+$kendo-radio-sm-size: k-spacing(4) !default;
 /// The size of a medium RadioButton.
 /// @group radio
 $kendo-radio-md-size: k-spacing(4) !default;
@@ -35,13 +35,14 @@ $kendo-radio-lg-glyph-size: k-spacing(4.5) !default;
 
 /// The ripple size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-ripple-size: 300% !default;
+$kendo-radio-sm-ripple-size: k-spacing(8) !default;
 /// The ripple size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-ripple-size: 300% !default;
+$kendo-radio-md-ripple-size: k-spacing(10) !default;
 /// The ripple size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-ripple-size: 300% !default;
+$kendo-radio-lg-ripple-size: k-spacing(12) !default;
+
 
 /// The map with the different RadioButton sizes.
 /// @group radio
@@ -49,17 +50,20 @@ $kendo-radio-sizes: (
     sm: (
         size: $kendo-radio-sm-size,
         glyph-size: $kendo-radio-sm-glyph-size,
-        ripple-size: $kendo-radio-sm-ripple-size
+        ripple-size: $kendo-radio-sm-ripple-size,
+        indicator-size: k-spacing(8)
     ),
     md: (
         size: $kendo-radio-md-size,
         glyph-size: $kendo-radio-md-glyph-size,
-        ripple-size: $kendo-radio-md-ripple-size
+        ripple-size: $kendo-radio-md-ripple-size,
+        indicator-size: k-spacing(10)
     ),
     lg: (
         size: $kendo-radio-lg-size,
         glyph-size: $kendo-radio-lg-glyph-size,
-        ripple-size: $kendo-radio-lg-ripple-size
+        ripple-size: $kendo-radio-lg-ripple-size,
+        indicator-size: k-spacing(12)
     )
 ) !default;
 
@@ -88,7 +92,7 @@ $kendo-radio-hover-border: $kendo-checkbox-border !default;
 $kendo-radio-checked-bg: unset !default;
 /// The color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-text: $kendo-color-primary !default;
+$kendo-radio-checked-text: k-color(primary) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-border: $kendo-radio-checked-text !default;
@@ -99,7 +103,6 @@ $kendo-radio-focus-border: $kendo-checkbox-focus-border !default;
 /// The box shadow of the focused RadioButton.
 /// @group radio
 $kendo-radio-focus-shadow: $kendo-checkbox-focus-shadow !default;
-
 /// The border color of the focused and checked RadioButton.
 /// @group radio
 $kendo-radio-focus-checked-border: $kendo-checkbox-focus-checked-border !default;
@@ -109,20 +112,20 @@ $kendo-radio-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow !default
 
 /// The background color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-bg: unset !default;
+$kendo-radio-disabled-bg: null !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: unset !default;
+$kendo-radio-disabled-text: k-color(on-app-surface) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: $kendo-checkbox-disabled-border !default;
+$kendo-radio-disabled-border: k-color(on-app-surface) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-bg: unset !default;
+$kendo-radio-disabled-checked-bg: $kendo-radio-disabled-bg !default;
 /// The color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-text: $kendo-radio-disabled-border !default;
+$kendo-radio-disabled-checked-text: $kendo-radio-disabled-text !default;
 /// The border color of disabled and checked RadioButton.
 /// @group radio
 $kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
@@ -163,7 +166,7 @@ $kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: k-spacing(1) !default;
+$kendo-radio-label-margin-x: k-spacing(4) !default;
 
 
 // Radio list
@@ -183,7 +186,7 @@ $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the RadioButton ripple..
 /// @group radio
-$kendo-radio-ripple-bg: $kendo-color-primary !default;
+$kendo-radio-ripple-bg: k-color(primary) !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .2 !default;

package/scss/rating/_variables.scss

@@ -14,11 +14,11 @@ $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal margin of the Rating container.
 /// @group rating
-$kendo-rating-container-margin-x: calc( #{k-spacing(2)} / 2 ) !default;
+$kendo-rating-container-margin-x: k-spacing(1) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: calc( #{k-spacing(2)} / 2 ) !default;
+$kendo-rating-item-padding-x: k-spacing(1) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
 $kendo-rating-item-padding-y: k-spacing(1) !default;
@@ -31,20 +31,20 @@ $kendo-rating-label-margin-x: k-spacing(2) !default;
 $kendo-rating-label-margin-y: k-spacing(1) !default;
 /// The line height of the Rating label.
 /// @group rating
-$kendo-rating-label-line-height: $kendo-line-height-lg !default;
+$kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The text color of the Rating icon.
 /// @group rating
-$kendo-rating-icon-text: $kendo-subtle-text !default;
+$kendo-rating-icon-text: k-color(subtle) !default;
 /// The text color of the selected Rating icon.
 /// @group rating
-$kendo-rating-icon-selected-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-selected-text: k-color(primary-active) !default;
 /// The text color of the hovered Rating icon.
 /// @group rating
-$kendo-rating-icon-hover-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-hover-text: k-color(primary-active) !default;
 /// The text color of the focused Rating icon.
 /// @group rating
-$kendo-rating-icon-focus-text: $kendo-color-primary-darker !default;
+$kendo-rating-icon-focus-text: k-color(primary-active) !default;
 
 /// The shadow of the focused Rating icon.
 /// @group rating

package/scss/scheduler/_layout.scss

@@ -7,51 +7,13 @@
 
     @include kendo-scheduler--layout-base();
 
-
-    .k-scheduler-footer {
-        border-top-width: 1px;
-    }
-
-
-    // Scheduler navigation
-    .k-scheduler-navigation {}
-
-
-    // View switcher
-    .k-scheduler-views {}
-
-
-    // View header
-    .k-scheduler-header {
-        text-align: start;
-
-        th,
-        td {
-            font-size: var( --kendo-font-size-sm, inherit );
-        }
-    }
-
-
-    // Times header
-    .k-scheduler-times {
-        font-size: var( --kendo-font-size-sm, inherit );
-    }
-
-
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
 
-        &.k-selected {
-            &::before {
-                display: block;
-            }
-        }
-
         // Angular fix for stronger selector and smaller padding
         .k-event-template {
             & { // stylelint-disable-line
-                padding-block: k-spacing(0.5);
                 padding-inline: k-spacing(2);
             }
         }
@@ -66,16 +28,9 @@
 
     .k-event {
         .k-event-delete {
+            margin-block-start: k-spacing(1);
             border-radius: 50%;
-            display: inline-block;
-            font-size: var( --kendo-font-size-sm, inherit );
-            line-height: normal;
-
-            .k-icon {
-                padding: calc( var( --kendo-font-size, .875rem) - var( --kendo-font-size-sm, .75rem) );
-                box-sizing: content-box;
-                vertical-align: unset;
-            }
+            display: flex;
         }
 
         .k-resize-handle {
@@ -108,52 +63,10 @@
 
     .k-more-events {
         border-width: 0;
-        box-shadow: none;
     }
 
     .k-scheduler-layout-flex .k-scheduler-cell {
         min-height: $kendo-line-height-em;
     }
 
-    // Month view
-    .k-scheduler-monthview {
-        .k-scheduler-table td {
-            height: 85px;
-        }
-    }
-
-
-    .k-scheduler-edit-form {
-
-        .k-edit-label {
-            width: auto;
-            margin-bottom: .5em;
-
-            label { margin-bottom: 0; }
-        }
-
-        .k-edit-field {
-            width: auto;
-            align-items: center;
-        }
-
-    }
-
-    .k-edit-field .k-reset {
-        width: 100%;
-    }
-    .k-edit-field .k-widget {
-        font-size: inherit;
-    }
-    .k-edit-field .k-reset .k-widget {
-        margin-right: 0;
-    }
-
-    .k-scheduler-timezones .k-edit-field > div {
-        width: 100%;
-    }
-    .k-scheduler-timezones .k-edit-field .k-widget {
-        width: 45%;
-    }
-
 }

package/scss/scheduler/_theme.scss

@@ -10,13 +10,13 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+        background-color: color-mix(in srgb, k-color(secondary) 25%, transparent);
     }
 
     // Agenda view
     .k-scheduler-agendaview {
         .k-scheduler-content tr.k-selected {
-            background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
+            background-color: color-mix(in srgb, k-color(secondary) 25%, transparent);
         }
     }
 
@@ -32,7 +32,7 @@
 
         .k-resize-handle::before {
             // TODO: $kendo-scheduler-content-area-bg
-            background-color: $kendo-color-primary-contrast;
+            background-color: k-color(on-primary);
         }
     }