@progress/kendo-theme-fluent 13.2.0-dev.2 → 13.2.0-dev.4

package/scss/editor/_variables.scss

@@ -41,7 +41,7 @@ $kendo-editor-selectednode-outline-width: var( --kendo-editor-selectednode-outli
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: var( --kendo-editor-selected-text, #{k-color(app-surface)} ) !default;
+$kendo-editor-selected-text: var( --kendo-editor-selected-text, #{k-color(on-primary)} ) !default;
 /// The selected background color of the Editor.
 /// @group editor
 $kendo-editor-selected-bg: var( --kendo-editor-selected-bg, #{k-color(primary)} ) !default;

package/scss/fab/_theme.scss

@@ -47,9 +47,8 @@
 
         #{k-when-default($kendo-fab-default-fill-mode, "solid")}
         &.k-fab-solid {
-            #{k-when-default($kendo-fab-default-theme-color, ("warning", "light"))}
-            &.k-fab-warning,
-            &.k-fab-light {
+            #{k-when-default($kendo-fab-default-theme-color, "warning")}
+            &.k-fab-warning {
                 &:focus::after,
                 &.k-focus::after {
                     outline-color: k-color(app-surface);

package/scss/filter/_variables.scss

@@ -25,7 +25,7 @@ $kendo-filter-text: var( --kendo-filter-text, #{k-color(on-app-surface)} ) !defa
 
 /// The text color of the Filter preview field.
 /// @group filter
-$kendo-filter-preview-field-text: var( --kendo-filter-preview-field-text, #{k-color(primary)} ) !default;
+$kendo-filter-preview-field-text: var( --kendo-filter-preview-field-text, #{k-color(primary-on-surface)} ) !default;
 /// The text color of the Filter preview operator.
 /// @group filter
 $kendo-filter-preview-operator-text: var( --kendo-filter-preview-operator-text, #{k-color(on-app-surface)} ) !default;

package/scss/gantt/_variables.scss

@@ -119,7 +119,7 @@ $kendo-gantt-task-progress-hover-bg: var(--kendo-gantt-task-progress-hover-bg, #
 $kendo-gantt-task-selected-bg: var(--kendo-gantt-task-selected-bg, #{k-color(primary-subtle-active)}) !default;
 /// The text color of the selected Gantt task.
 /// @group gantt
-$kendo-gantt-task-selected-text: var(--kendo-gantt-task-selected-text, #{k-color(app-surface)}) !default;
+$kendo-gantt-task-selected-text: var(--kendo-gantt-task-selected-text, #{k-color(on-primary)}) !default;
 /// The border color of the selected Gantt task.
 /// @group gantt
 $kendo-gantt-task-selected-border: var(--kendo-gantt-task-selected-border, transparent) !default;

package/scss/grid/_theme.scss

@@ -19,22 +19,16 @@
         );
     }
 
-    .k-group-footer td,
-    .k-grouping-row td,
     .k-group-footer .k-table-td,
     .k-grouping-row .k-table-td,
     .k-table-tbody .k-group-cell {
-        @include fill(
-            $border: $kendo-grid-grouping-row-border
-        );
+        border-color: $kendo-grid-grouping-row-border;
     }
 
     .k-grouping-dropclue {
         &::before,
         &::after {
-            @include fill(
-                $bg: $kendo-grid-group-drop-hint-bg
-            );
+            background-color: $kendo-grid-group-drop-hint-bg;
         }
     }
 
@@ -46,14 +40,10 @@
         // Hover state
         .k-table-tbody > .k-table-row:not(.k-detail-row):hover,
         .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
-            @include fill(
-                $border: $kendo-grid-hover-border
-            );
+            border-color: $kendo-grid-hover-border;
         }
 
         // Selected state
-        td.k-selected,
-        .k-table-row.k-selected > td,
         .k-table-td.k-selected,
         .k-table-row.k-selected > .k-table-td {
             border-block-color: $kendo-grid-selected-border;
@@ -62,12 +52,7 @@
         // Locked columns
         .k-grid-header-locked,
         .k-grid-content-locked,
-        .k-grid-footer-locked,
-        .k-grid-header-locked .k-table-th,
-        .k-grid-content-locked td,
-        .k-grid-content-locked .k-table-td,
-        .k-grid-footer-locked td,
-        .k-grid-footer-locked .k-table-td {
+        .k-grid-footer-locked {
             border-inline-color: $kendo-grid-sticky-header-border;
             border-block-color: $kendo-grid-border;
         }
@@ -80,7 +65,6 @@
             }
         }
 
-
         .k-table-row.k-selected > .k-table-td.k-grid-content-sticky {
             border-inline-color: $kendo-grid-sticky-border;
         }
@@ -88,11 +72,6 @@
 
     // Grid header
     .k-grid-header {
-        @include fill(
-            $kendo-grid-header-text,
-            $kendo-grid-header-bg,
-            $kendo-grid-header-border
-        );
 
         .k-sort-icon {
             @include fill( $color: $kendo-grid-sort-indicator-text );

package/scss/icons/_variables.scss

@@ -41,6 +41,9 @@ $kendo-icon-padding: k-spacing(1) !default;
 /// The color of accent icons.
 /// @group icon
 $kendo-accent-icon-color: var( --kendo-accent-icon-color, #87A7FF ) !default;
+/// The color of action icons.
+/// @group icon
+$kendo-action-icon-color: var( --kendo-action-icon-color, #{k-color( primary-on-surface )} ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
     $kendo-icon-default-size: $kendo-icon-default-size,
@@ -54,7 +57,8 @@ $kendo-accent-icon-color: var( --kendo-accent-icon-color, #87A7FF ) !default;
     $kendo-icon-size-xxxl: $kendo-icon-size-xxxl,
     $kendo-icon-spacing: $kendo-icon-spacing,
     $kendo-icon-padding: $kendo-icon-padding,
-    $kendo-accent-icon-color: $kendo-accent-icon-color
+    $kendo-accent-icon-color: $kendo-accent-icon-color,
+    $kendo-action-icon-color: $kendo-action-icon-color
 );
 
 :root {

package/scss/messagebox/_variables.scss

@@ -42,10 +42,10 @@ $kendo-message-box-link-font-style: var( --kendo-message-box-link-font-style, no
 $kendo-message-box-link-decoration: var( --kendo-message-box-link-decoration, underline ) !default;
 /// Text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-text: var( --kendo-message-box-link-text, k-color(primary) ) !default;
+$kendo-message-box-link-text: var( --kendo-message-box-link-text, k-color(primary-on-surface) ) !default;
 /// Hover text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-hover-text: var( --kendo-message-box-link-hover-text, k-color(primary-hover) ) !default;
+$kendo-message-box-link-hover-text: var( --kendo-message-box-link-hover-text, k-color(primary-on-surface) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with (
     $kendo-message-box-default-theme-color: $kendo-message-box-default-theme-color,

package/scss/notification/_variables.scss

@@ -55,7 +55,7 @@ $kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-sp
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;
 
 /// The generated theme colors map for the Notification.
 /// @group notification

package/scss/overlay/_variables.scss

@@ -1,18 +1,14 @@
-/// The default theme color of the Overlay.
-/// @group overlay
-/// @role default
-$kendo-overlay-default-theme-color: "inverse" !default;
+@use "../core/_index.scss" as *;
 
-/// Background color of the dark overlay.
+/// The background color of the Overlay.
 /// @group overlay
-$kendo-overlay-bg: null !default;
+$kendo-overlay-bg: k-color(inverse) !default;
 
-/// Opacity of the overlay.
+/// The opacity of the Overlay.
 /// @group overlay
 $kendo-overlay-opacity: var( --kendo-overlay-opacity, .4 ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
-    $kendo-overlay-default-theme-color: $kendo-overlay-default-theme-color,
     $kendo-overlay-bg: $kendo-overlay-bg,
     $kendo-overlay-opacity: $kendo-overlay-opacity
 );

package/scss/radio/_variables.scss

@@ -62,7 +62,7 @@ $kendo-radio-hover-border: var( --kendo-radio-hover-border, #{$kendo-radio-borde
 $kendo-radio-checked-bg: var( --kendo-radio-checked-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-text: var( --kendo-radio-checked-text, #{k-color(primary)} ) !default;
+$kendo-radio-checked-text: var( --kendo-radio-checked-text, #{k-color(primary-on-surface)} ) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
 $kendo-radio-checked-border: var( --kendo-radio-checked-border, #{k-color(primary)} ) !default;
@@ -72,7 +72,7 @@ $kendo-radio-checked-border: var( --kendo-radio-checked-border, #{k-color(primar
 $kendo-radio-hover-checked-bg: var( --kendo-radio-hover-checked-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-text: var( --kendo-radio-hover-checked-text, #{k-color(primary-hover)} ) !default;
+$kendo-radio-hover-checked-text: var( --kendo-radio-hover-checked-text, #{k-color(primary-on-surface)} ) !default;
 /// The border color of the checked and hovered RadioButton.
 /// @group radio
 $kendo-radio-hover-checked-border: var( --kendo-radio-hover-checked-border, #{k-color(primary-hover)} ) !default;

package/scss/scrollview/_theme.scss

@@ -5,22 +5,6 @@
 @mixin kendo-scrollview--theme() {
     @include kendo-scrollview--theme-base();
 
-    .k-scrollview {
-        &.k-scrollview-dark {
-            kendo-scrollview-pager,
-            .k-scrollview-nav-wrap {
-                background-color: $kendo-scrollview-pager-dark-bg;
-            }
-        }
-
-        &.k-scrollview-light {
-            kendo-scrollview-pager,
-            .k-scrollview-nav-wrap {
-                background-color: $kendo-scrollview-pager-light-bg;
-            }
-        }
-    }
-
     .k-scrollview-next,
     .k-scrollview-prev {
         text-shadow: $kendo-scrollview-navigation-arrow-shadow;

package/scss/scrollview/_variables.scss

@@ -114,6 +114,8 @@ $kendo-scrollview-transition-timing-function: var( --kendo-scrollview-transition
     $kendo-scrollview-pager-height: $kendo-scrollview-pager-height,
     $kendo-scrollview-navigation-color: $kendo-scrollview-navigation-color,
     $kendo-scrollview-navigation-bg: $kendo-scrollview-navigation-bg,
+    $kendo-scrollview-light-bg: $kendo-scrollview-pager-light-bg,
+    $kendo-scrollview-dark-bg: $kendo-scrollview-pager-dark-bg,
     $kendo-scrollview-transition-duration: $kendo-scrollview-transition-duration,
     $kendo-scrollview-transition-timing-function: $kendo-scrollview-transition-timing-function
 );

package/scss/searchbox/_variables.scss

@@ -2,4 +2,4 @@
 
 /// Color of the searchbox icon.
 /// @group searchbox
-$kendo-searchbox-icon-color: var( --kendo-searchbox-icon-color, k-color(primary) ) !default;
+$kendo-searchbox-icon-color: var( --kendo-searchbox-icon-color, k-color(primary-on-surface) ) !default;

package/scss/spreadsheet/_variables.scss

@@ -242,7 +242,7 @@ $kendo-spreadsheet-insert-image-dialog-preview-overlay-shadow: var( --kendo-spre
 $kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius: var( --kendo-spreadsheet-insert-image-dialog-preview-overlay-border-radius, var( --kendo-border-radius-md, initial ) ) !default;
 /// The text color of the hovered Spreadsheet image Dialog preview.
 /// @group spreadsheet
-$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, k-color(app-surface) ) !default;
+$kendo-spreadsheet-insert-image-dialog-overlay-hover-text: var( --kendo-spreadsheet-insert-image-dialog-overlay-hover-text, #{k-color(on-app-surface)} ) !default;
 
 /// The width of the Spreadsheet drawing handle.
 /// @group spreadsheet

package/scss/switch/_variables.scss

@@ -180,7 +180,7 @@ $kendo-switch-off-thumb-disabled-border: var( --kendo-switch-off-thumb-disabled-
 $kendo-switch-on-track-bg: var( --kendo-switch-on-track-bg, k-color(primary) ) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: var( --kendo-switch-on-track-text, k-color(app-surface) ) !default;
+$kendo-switch-on-track-text: var( --kendo-switch-on-track-text, k-color(on-primary) ) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: var( --kendo-switch-on-track-border, $kendo-switch-on-track-bg ) !default;
@@ -190,7 +190,7 @@ $kendo-switch-on-track-border: var( --kendo-switch-on-track-border, $kendo-switc
 $kendo-switch-on-track-hover-bg: var( --kendo-switch-on-track-hover-bg, k-color(primary-hover) ) !default;
 /// The text color of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-text: var( --kendo-switch-on-track-hover-text, k-color(app-surface) ) !default;
+$kendo-switch-on-track-hover-text: var( --kendo-switch-on-track-hover-text, k-color(on-primary) ) !default;
 /// The border color of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-border: var( --kendo-switch-on-track-hover-border, $kendo-switch-on-track-hover-bg ) !default;
@@ -200,7 +200,7 @@ $kendo-switch-on-track-hover-border: var( --kendo-switch-on-track-hover-border,
 $kendo-switch-on-track-focus-bg: var( --kendo-switch-on-track-focus-bg, k-color(primary) ) !default;
 /// The text color of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-text: var( --kendo-switch-on-track-focus-text, k-color(app-surface) ) !default;
+$kendo-switch-on-track-focus-text: var( --kendo-switch-on-track-focus-text, k-color(on-primary) ) !default;
 /// The border color of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-border: var( --kendo-switch-on-track-focus-border, $kendo-switch-on-track-focus-bg ) !default;
@@ -210,7 +210,7 @@ $kendo-switch-on-track-focus-border: var( --kendo-switch-on-track-focus-border,
 $kendo-switch-on-track-disabled-bg: var( --kendo-switch-on-track-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-text: var( --kendo-switch-on-track-disabled-text, k-color(app-surface) ) !default;
+$kendo-switch-on-track-disabled-text: var( --kendo-switch-on-track-disabled-text, k-color(on-app-surface) ) !default;
 /// The border color of the track when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-track-disabled-border: var( --kendo-switch-on-track-disabled-border, transparent ) !default;

package/scss/tooltip/_functions.scss

@@ -5,7 +5,7 @@
 
 @function tooltip-theme( $colors ) {
     $_theme: ();
-    $_solid-colors: ("primary", "dark", "light", "inverse");
+    $_solid-colors: ("inverse");
 
     @each $name in $colors {
         @if list.index($_solid-colors, $name) {

package/scss/tooltip/_variables.scss

@@ -57,7 +57,7 @@ $kendo-tooltip-button-text: var( --kendo-tooltip-button-text, #{k-color(subtle)}
 
 /// The theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-tooltip-theme-colors: ("base", "info", "success", "warning", "error", "inverse") !default;
 
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip

package/scss/treeview/_variables.scss

@@ -162,7 +162,7 @@ $kendo-treeview-loadmore-border: var( --kendo-treeview-loadmore-border, inherit
 $kendo-treeview-loadmore-hover-bg: var( --kendo-treeview-loadmore-hover-bg, transparent ) !default;
 /// The text color of the hovered Load More button in the TreeView.
 /// @group treeview
-$kendo-treeview-loadmore-hover-text: var( --kendo-treeview-loadmore-hover-text, k-color(primary-hover) ) !default;
+$kendo-treeview-loadmore-hover-text: var( --kendo-treeview-loadmore-hover-text, k-color(primary-on-surface) ) !default;
 /// The border color of the hovered Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: var( --kendo-treeview-loadmore-hover-border, inherit ) !default;
@@ -172,7 +172,7 @@ $kendo-treeview-loadmore-hover-border: var( --kendo-treeview-loadmore-hover-bord
 $kendo-treeview-loadmore-focus-bg: var( --kendo-treeview-loadmore-focus-bg, transparent ) !default;
 /// The text color of the focused Load More button in the TreeView.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: var( --kendo-treeview-loadmore-focus-text, k-color(primary-hover) ) !default;
+$kendo-treeview-loadmore-focus-text: var( --kendo-treeview-loadmore-focus-text, k-color(primary-on-surface) ) !default;
 /// The border color of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: var( --kendo-treeview-loadmore-focus-border, inherit ) !default;

package/scss/window/_variables.scss

@@ -6,11 +6,6 @@
 /// @role default
 $kendo-window-default-size: "auto" !default;
 
-/// The default theme color of the Window.
-/// @group window
-/// @role default
-$kendo-window-default-theme-color: null !default;
-
 /// The width of the border around the Window.
 /// @group window
 $kendo-window-border-width: var(--kendo-window-border-width, 0) !default;
@@ -107,7 +102,6 @@ $kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(on-app-s
 $kendo-window-titlebar-border: var( --kendo-window-titlebar-border, k-color(primary) ) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (
-    $kendo-window-default-theme-color: $kendo-window-default-theme-color,
     $kendo-window-border-width: $kendo-window-border-width,
     $kendo-window-border-radius: $kendo-window-border-radius,
     $kendo-window-font-family: $kendo-window-font-family,