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

package/scss/grid/_theme.scss

@@ -100,24 +100,6 @@
             border-block-color: var( --kendo-grid-selected-border, #{$kendo-grid-selected-border} );
         }
 
-        @if($kendo-enable-color-system == false) {
-            // Selected hover state
-            .k-table-tbody > .k-table-row:not(.k-detail-row):hover td.k-selected,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > td,
-            .k-table-tbody > .k-table-row:not(.k-detail-row):hover .k-table-td.k-selected,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected > .k-table-td,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover.k-selected,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover td.k-selected,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > td,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover .k-table-td.k-selected,
-            .k-table-tbody > .k-table-row:not(.k-detail-row).k-selected:hover > .k-table-td {
-                @include fill(
-                    $color: var( --kendo-grid-selected-hover-text, #{$kendo-grid-selected-hover-text} ),
-                    $bg: var( --kendo-grid-selected-hover-bg, #{$kendo-grid-selected-hover-bg} )
-                );
-            }
-        }
-
         // Focused state
         td:focus,
         td.k-focus,
@@ -236,18 +218,18 @@
         .k-hierarchy-cell .k-icon {
             &:hover {
                 @include fill(
-                    $color: var( --kendo-hover-text, inherit ),
-                    $bg: var( --kendo-hover-bg, inherit )
+                    $color: k-color(on-base),
+                    $bg: k-color(base-hover)
                 );
             }
             &:focus,
             &.k-focus {
-                box-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 10%, transparent), rgba( $kendo-color-black, .1 ));
+                box-shadow: inset 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 10%, transparent);
             }
             &.k-active {
                 @include fill(
-                    $color: var( --kendo-selected-text, inherit ),
-                    $bg: var( --kendo-selected-bg, inherit )
+                    $color: k-color(on-base),
+                    $bg: k-color(base-active)
                 );
             }
         }
@@ -315,13 +297,9 @@
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
+            @include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
 
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
-                }
-            } @else {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
             }
         }
@@ -331,13 +309,9 @@
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
+            @include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
 
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
-                }
-            } @else {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
             }
         }
@@ -365,13 +339,9 @@
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            @if($kendo-enable-color-system) {
-                background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
+            background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
 
-                &::before {
-                    @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
-                }
-            } @else {
+            &::before {
                 @include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
             }
         }
@@ -440,7 +410,7 @@
             &.k-disabled .k-link,
             &.k-disabled .k-icon {
                 @include disabled(
-                    var( --kendo-disabled-text, inherit )
+                    color-mix(in srgb, k-color(on-app-surface) 46%, transparent)
                 );
             }
         }
@@ -452,7 +422,7 @@
         .k-listgroup-item {
             &.k-disabled {
                 @include disabled(
-                    $bg: var( --kendo-disabled-bg, inherit )
+                    $bg: k-color(base-subtle)
                 );
             }
         }

package/scss/grid/_variables.scss

@@ -236,7 +236,7 @@ $kendo-grid-header-text: $kendo-table-header-text !default;
 $kendo-grid-header-border: $kendo-table-header-border !default;
 /// The background color of Grid header icons.
 /// @group grid
-$kendo-grid-header-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-grid-header-icon-text: k-color(subtle) !default;
 
 // The background color of Grid footer.
 /// @group grid
@@ -336,13 +336,13 @@ $kendo-grid-sort-index-spacing-x: k-spacing(0.5) !default;
 $kendo-grid-sort-icon-spacing: var( --kendo-icon-lg-spacing, .5rem ) !default;
 /// The text color of the Grid sort indicator.
 /// @group grid
-$kendo-grid-sort-indicator-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-grid-sort-indicator-text: k-color(subtle) !default;
 /// The text color of the Grid sort order indicator.
 /// @group grid
-$kendo-grid-sort-indicator-order-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-grid-sort-indicator-order-text: k-color(primary) !default;
 /// The background color of the sorted Grid cells.
 /// @group grid
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-grid-sorted-bg: k-color(surface) !default;
 
 /// The horizontal padding of the Grid command cells.
 /// @group grid
@@ -368,16 +368,16 @@ $kendo-grid-group-indicator-border-radius: k-border-radius(md) !default;
 $kendo-grid-group-indicator-gap: $kendo-table-cell-padding-y !default;
 /// The text color of the Grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-text: var( --kendo-component-text, initial ) !default;
+$kendo-grid-group-indicator-text: k-color(on-app-surface) !default;
 /// The background color of the Grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-grid-group-indicator-bg: k-color(surface-alt) !default;
 /// The border color of the Grid group indicator.
 /// @group grid
-$kendo-grid-group-indicator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-grid-group-indicator-border: k-color(border) !default;
 /// The text color of the Grid group indicator icon.
 /// @group grid
-$kendo-grid-group-indicator-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-grid-group-indicator-icon-text: k-color(subtle) !default;
 
 /// The horizontal border width of the Grid group footer.
 /// @group grid
@@ -388,20 +388,20 @@ $kendo-grid-group-footer-border-width-x: 0px !default;
 
 /// The text color of the Grid group drop clue.
 /// @group grid
-$kendo-grid-group-drop-hint-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-grid-group-drop-hint-bg: k-color(primary) !default;
 
 /// The border width of the Grid sticky cell.
 /// @group grid
 $kendo-grid-sticky-cell-border-width: $kendo-grid-border-width !default;
 /// The background color of the Grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-grid-sticky-bg: k-color(surface-alt) !default;
 /// The text color of the Grid sticky cell.
 /// @group grid
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 /// The border color of the Grid sticky cell.
 /// @group grid
-$kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 80%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-grid-sticky-border: color-mix(in srgb, k-color(border) 80%, transparent) !default;
 /// The alt background color of the Grid sticky cell.
 /// @group grid
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -434,7 +434,7 @@ $kendo-grid-sticky-selected-bg: $kendo-grid-selected-bg !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 /// The background color of the hovered selected Grid sticky cells.
 /// @group grid
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, $kendo-grid-sticky-selected-bg, $kendo-grid-selected-hover-bg) !default;
+$kendo-grid-sticky-selected-hover-bg: $kendo-grid-sticky-selected-bg !default;
 
 /// The horizontal padding of the Grid filter menu container.
 /// @group grid
@@ -457,13 +457,13 @@ $kendo-grid-column-menu-spacing: k-spacing(2) !default;
 $kendo-grid-column-menu-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 /// The background color of the Grid column menu.
 /// @group grid
-$kendo-grid-column-menu-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-grid-column-menu-bg: k-color(surface-alt) !default;
 /// The text color of the Grid column menu.
 /// @group grid
-$kendo-grid-column-menu-text: var( --kendo-component-text, inherit ) !default;
+$kendo-grid-column-menu-text: k-color(on-app-surface) !default;
 /// The border color of the Grid column menu.
 /// @group grid
-$kendo-grid-column-menu-border: var( --kendo-component-border, inherit ) !default;
+$kendo-grid-column-menu-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The font size of the Grid column menu checkbox container.
 /// @group grid
@@ -543,13 +543,13 @@ $kendo-grid-column-menu-group-header-text-transform: uppercase !default;
 
 /// The background color of the Grid column menu group.
 /// @group grid
-$kendo-grid-column-menu-group-header-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-grid-column-menu-group-header-bg: k-color(surface-alt) !default;
 /// The text color of the Grid column menu group.
 /// @group grid
-$kendo-grid-column-menu-group-header-text: var( --kendo-component-text, inherit ) !default;
+$kendo-grid-column-menu-group-header-text: k-color(on-app-surface) !default;
 /// The border color of the Grid column menu group.
 /// @group grid
-$kendo-grid-column-menu-group-header-border: var( --kendo-component-border, inherit) !default;
+$kendo-grid-column-menu-group-header-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The horizontal padding of the tabstrip content in the Grid tabbed column menu.
 /// @group grid
@@ -574,10 +574,10 @@ $kendo-grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$kendo
 
 /// The background color of the Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
+$kendo-grid-row-resizer-hover-bg: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of the active Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-active-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-grid-row-resizer-active-bg: k-color(primary) !default;
 /// The height of the Grid row resize indicator.
 /// @group grid
 $kendo-grid-row-resizer-height: k-spacing(0.5) !default;

package/scss/imageeditor/_variables.scss

@@ -4,13 +4,13 @@
 
 /// Background color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-image-editor-bg: k-color(surface-alt) !default;
 /// Text color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-text: var( --kendo-component-text, inherit ) !default;
+$kendo-image-editor-text: k-color(on-app-surface) !default;
 /// Border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-image-editor-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// Vertical margin of the imageeditor.
 /// @group imageeditor
 $kendo-image-editor-margin-y: k-spacing(0) !default;
@@ -39,7 +39,7 @@ $kendo-image-editor-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// Imageeditor content background color.
 /// @group imageeditor
-$kendo-image-editor-content-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
+$kendo-image-editor-content-bg: color-mix(in srgb, k-color(on-app-surface) 23%, transparent) !default;
 /// Imageeditor content text color.
 /// @group imageeditor
 $kendo-image-editor-content-text: inherit !default;
@@ -52,7 +52,7 @@ $kendo-image-editor-content-border-width: 0 !default;
 
 /// Imageeditor action pane background color.
 /// @group imageeditor
-$kendo-image-editor-action-pane-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
 /// Imageeditor action pane text color.
 /// @group imageeditor
 $kendo-image-editor-action-pane-text: inherit !default;
@@ -77,7 +77,7 @@ $kendo-image-editor-crop-bg: inherit !default;
 $kendo-image-editor-crop-text: inherit !default;
 /// Crop border color of the imageeditor.
 /// @group imageeditor
-$kendo-image-editor-crop-border: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-image-editor-crop-border: k-color(app-surface) !default;
 /// Crop overlay background color of the imageeditor.
 /// @group imageeditor
 $kendo-image-editor-crop-overlay-bg: rgba( $kendo-color-black, .3 ) !default;

package/scss/index.scss

@@ -116,6 +116,7 @@
 @forward "./signature/_index.scss";
 @forward "./otp/_index.scss";
 @forward "./column-menu/_index.scss";
+@forward "./marquee/_index.scss";
 
 
 // Use component modules
@@ -153,6 +154,7 @@
 @use "./skeleton/index.scss" as *;
 @use "./tooltip/index.scss" as *;
 @use "./time-marker/index.scss" as *;
+@use "./marquee/_index.scss" as *;
 
 
 // Form helpers
@@ -293,9 +295,6 @@
     // Core
     @include core-styles();
 
-    // Color system css variables
-    @include color-system-styles();
-
     @include kendo-elevation--styles-legacy();
 
     // Typography
@@ -331,6 +330,7 @@
     @include kendo-skeleton--styles();
     @include kendo-tooltip--styles();
     @include kendo-time-marker--styles();
+    @include kendo-marquee--styles();
 
 
     // Form helpers

package/scss/input/_theme.scss

@@ -56,11 +56,9 @@
                 color: var( --kendo-input-suffix-disabled-text, #{$kendo-input-suffix-disabled-text} );
             }
 
-            @if($kendo-enable-color-system) {
-                .k-input-button {
-                    color: inherit;
-                    background: none;
-                }
+            .k-input-button {
+                color: inherit;
+                background: none;
             }
         }