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

package/scss/scheduler/_variables.scss

@@ -1,92 +1,236 @@
 // Scheduler
+
+/// The width of the border around the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border-width: 1px !default;
+/// The font family of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
+/// The background color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-bg: $kendo-component-bg !default;
+/// The text color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-text: $kendo-component-text !default;
+/// The border color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border: $kendo-component-border !default;
 
+/// The background color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+/// The text color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-text: null !default;
+/// The border color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-border: null !default;
+/// The gradient of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-gradient: null !default;
 
+/// The background color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-button-bg, .5 )) !default;
+/// The text color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-text: null !default;
+/// The border color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-border: null !default;
+/// The gradient of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-gradient: null !default;
 
+/// The minimum height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-min-height: 25px !default;
+/// The border radius of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+/// The line height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
+/// The background color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-bg: $kendo-color-primary !default;
+/// The text color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-scheduler-event-bg )) !default;
+/// The border color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border: null !default;
+/// The gradient of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-gradient: null !default;
+/// The shadow of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-shadow: null !default;
 
+/// The background color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-bg: null !default;
+/// The text color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-text: null !default;
+/// The border color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-border: null !default;
+/// The gradient of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
+/// The shadow of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-shadow: null !default;
 
+/// The background color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-tint( $kendo-color-primary, 1 )) !default;
+/// The text color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-scheduler-event-selected-bg )) !default;
+/// The border color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-border: null !default;
+/// The gradient of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-gradient: null !default;
+/// The shadow of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
+/// The shadow of the ongoing Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
+/// The horizontal padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-y: k-spacing(2) !default;
+/// The height of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-height: calc( var( --kendo-line-height, normal) * 1rem) !default;
+/// The width of the Scheduler date column.
+/// @group scheduler
 $kendo-scheduler-datecolumn-width: 12rem !default;
+
+/// The width of the Scheduler time column.
+/// @group scheduler
 $kendo-scheduler-timecolumn-width: 11rem !default;
 
+/// The background color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
 
+/// The background color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-bg: null !default;
+/// The text color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-text: null !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
 
+/// The horizontal padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-x: k-spacing(5) !default;
+/// The vertical padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
+/// The spacing between the calendars of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-calendar-gap: k-spacing(5) !default;
 
+/// The days with events indicator size of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-size: 3px !default;
+/// The top position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
+/// The left position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} ) !default;
+/// The border radius of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// The background color of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+/// The background color of the selected days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
+/// The horizontal padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-y: k-spacing(2) !default;
+/// The width of the border of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border-width: 0 !default;
+/// The background color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
+/// The text color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
+/// The border color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
+/// The shadow of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-shadow: $box-shadow-depth-2 !default;
 
+/// The vertical margin of the Scheduler Tooltip title.
+/// @group scheduler
 $kendo-scheduler-tooltip-title-margin-y: k-spacing(2) !default;
+/// The font size of the month inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-scheduler-tooltip-day-font-size: calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 ) !default;
+/// The font size of the day inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
 
+/// The max height of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
+/// The spacing between the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-gap: k-spacing(1) !default;
 
+/// The horizontal padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
+/// The vertical padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-y: k-spacing(2) !default;
+/// The border radius of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
+/// The spacing between the events items inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-gap: k-spacing(2) !default;
 
+/// The color of the Scheduler Tooltip callout.
+/// @group scheduler
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

package/scss/switch/_variables.scss

@@ -112,7 +112,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 54%, transparent), rgba( $kendo-color-primary, .54 )) !default;
+$kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 44%, transparent), rgba( $kendo-color-primary, .54 )) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;

package/scss/tabstrip/_variables.scss

@@ -1,115 +1,157 @@
-// Tabstrip
+// TabStrip
+
+
+/// The horizontal padding of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+/// The vertical padding of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
+/// The border width around the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-border-width: 0px !default;
 
+/// The font family of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-line-height: k-math-div( 20, 14 ) !default;
+/// The border width around the TabStrip.
+/// @group tabstrip
 $kendo-tabstrip-border-width: 1px !default;
 
+/// The background color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-bg: null !default;
+/// The text color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-text: null !default;
+/// The border color of the TabStrip wrapper.
+/// @group tabstrip
 $kendo-tabstrip-wrapper-border: null !default;
 
-/// Background color of tabstrip component
+/// The background color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-bg: null !default;
-/// Text color of tabstrip component
+/// The text color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-text: $kendo-subtle-text !default;
-/// Border color of tabstrip component
+/// The border color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border: $kendo-component-border !default;
 
-/// Horizontal padding of tabs
+/// The horizontal padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-x: k-spacing(6) !default;
-/// Vertical padding of tabs
+/// The vertical padding of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-padding-y: k-spacing(3.5) !default;
-/// Width of border around of tabs
+/// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 0px !default;
-/// Border radius of tabs
+/// The border radius of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-radius: 0px !default;
-/// Spacing between tabs
+/// The gap between the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gap: k-spacing(0) !default;
 
-/// Background color of tabs
+///  The background color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-bg: null !default;
-/// Text color of tabs
+/// The text color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-text: $kendo-subtle-text !default;
-/// Border color of tabs
+/// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: null !default;
-/// Background gradient of tabs
+/// The gradient of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-gradient: null !default;
 
-/// Background color of hovered tabs
+/// The background color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-bg: $kendo-hover-bg !default;
-/// Text color of hovered tabs
+/// The text color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-text: $kendo-body-text !default;
-/// Border color of hovered tabs
+/// The border color of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-border: null !default;
-/// Background gradient of hovered tabs
+/// The gradient of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-gradient: null !default;
 
-/// Background color of selected tabs
+/// The background color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-bg: null !default;
-/// Text color of selected tabs
+/// The text color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-text: $kendo-body-text !default;
-/// Border color of selected tabs
+/// The border color of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-border: null !default;
-/// Background gradient of selected tabs
+/// The gradient of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-gradient: null !default;
 
+/// The shadow of the focused TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
+/// The shadow of the dragged TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-dragging-shadow: $box-shadow-depth-3 !default;
 
+/// The background color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-bg: null !default;
+/// The text color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-map-get( $theme, disabled-text )) !default;
+/// The border color of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-border: null !default;
+/// The gradient of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-gradient: null !default;
+/// The opacity of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-opacity: 1 !default;
+/// The filter of the disabled TabStrip items.
+/// @group tabstrip
 $kendo-tabstrip-item-disabled-filter: none !default;
 
+/// The border width of the TabStrip indicator.
+/// @group tabstrip
 $kendo-tabstrip-indicator-size: 2px !default;
+/// The border color of the TabStrip ripple.
+/// @group tabstrip
 $kendo-tabstrip-indicator-color: $kendo-color-primary !default;
 
-/// Horizontal padding of tabstrip content
+/// The horizontal padding of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-padding-x: k-spacing(4) !default;
-/// Vertical padding of tabstrip content
+/// The vertical padding of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-padding-y: k-spacing(4) !default;
-/// Width of border around tabstrip content
+/// The border width around the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: 0px !default;
 
-/// Background color of tabstrip content
+/// The background color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-bg: transparent !default;
-/// Text color of tabstrip content
+/// The text color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-text: null !default;
-/// Border color of tabstrip content
+/// The border color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border: null !default;
-/// Border color of tabstrip focused content
+/// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;

package/scss/timeline/_variables.scss

@@ -67,7 +67,7 @@ $kendo-timeline-track-start-calc: calc(#{$kendo-timeline-track-arrow-width} - 2
 $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 * #{$kendo-timeline-track-border-width}) !default;
 /// The background color of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-bg: #e0e0e0 !default;
+$kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( base-subtle ), #e0e0e0) !default;
 /// The border color of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-border-color: $kendo-timeline-track-bg !default;

package/scss/toolbar/_theme.scss

@@ -11,6 +11,33 @@
             background-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
             border-color: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-button-bg ));
 
+            // Hover state
+            &:hover,
+            &.k-hover {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+            }
+
+            // Focus state
+            &:focus,
+            &.k-focus {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-hover ), null);
+            }
+
+            // Active state
+            &:active,
+            &.k-active {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+            }
+
+            // Selected state
+            &.k-selected {
+                background-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+                border-color: if($kendo-enable-color-system, k-color( base-subtle-active ), null);
+            }
+
             &.k-input-button,
             &.k-input-spinner .k-spinner-increase,
             &.k-input-spinner .k-spinner-decrease {

package/scss/tooltip/_variables.scss

@@ -25,7 +25,7 @@ $kendo-tooltip-line-height: k-math-div( 20, 14 ) !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
+$kendo-tooltip-title-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;