@progress/kendo-theme-fluent 13.2.0-dev.1 → 13.2.0-dev.3

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/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/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/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;