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

package/scss/grid/_theme.scss

@@ -12,86 +12,15 @@
 
     .k-grid {
 
-        @if($kendo-enable-color-system) {
-            .k-table {
-                td:focus,
-                td.k-focus,
-                th:focus,
-                th.k-focus {
-                    &::after {
-                        background-color: $kendo-grid-hover-bg;
-                    }
-                }
-            }
-        } @else {
-
-            // Selected state
-            .k-table-td.k-selected,
-            .k-table-row.k-selected {
-                color: $kendo-grid-selected-text;
-                background-color: $kendo-grid-selected-bg;
-            }
-
-            .k-table-row.k-selected > td,
-            .k-table-row.k-selected > .k-table-td {
-                color: inherit;
-                background-color: transparent;
-            }
-
-            // Hover, Focused state
-            .k-table {
-                > .k-table-row:not(.k-detail-row):hover,
-                > .k-table-row:not(.k-detail-row).k-hover,
-                td:focus,
-                td.k-focus,
-                .k-table-td:focus,
-                .k-table-td.k-focus,
-                .k-table-th:focus,
-                .k-table-th.k-focus,
-                .k-master-row > td:focus,
-                .k-grouping-row > td:focus,
-                .k-detail-row > td:focus,
-                .k-group-footer > td:focus,
-                .k-master-row > .k-table-td:focus,
-                .k-grouping-row > .k-table-td:focus,
-                .k-detail-row > .k-table-td:focus,
-                .k-group-footer > .k-table-td:focus {
-                    color: inherit;
+        .k-table {
+            td:focus,
+            td.k-focus,
+            th:focus,
+            th.k-focus {
+                &::after {
                     background-color: $kendo-grid-hover-bg;
                 }
-
-                .k-table-row:hover,
-                .k-table-row.k-hover {
-                    .k-grid-header-sticky,
-                    .k-grid-footer-sticky {
-                        color: inherit;
-                        background-color: $kendo-grid-sticky-hover-bg;
-                    }
-                }
-
-                .k-table-th,
-                td,
-                .k-table-td,
-                .k-master-row > td,
-                .k-grouping-row > td,
-                .k-detail-row > td,
-                .k-group-footer > td,
-                .k-master-row > .k-table-td,
-                .k-grouping-row > .k-table-td,
-                .k-detail-row > .k-table-td,
-                .k-group-footer > .k-table-td {
-                    &:focus,
-                    &.k-focus {
-                        &.k-grid-header-sticky,
-                        &.k-grid-content-sticky,
-                        &.k-grid-footer-sticky {
-                            color: inherit;
-                            background-color: $kendo-grid-sticky-hover-bg;
-                        }
-                    }
-                }
             }
-
         }
 
         .k-grid-pager:focus,
@@ -163,8 +92,8 @@
             }
 
             &.k-active {
-                color: $kendo-color-primary-contrast;
-                background-color: $kendo-color-primary;
+                color: k-color(on-primary);
+                background-color: k-color(primary);
             }
         }
 
@@ -200,7 +129,7 @@
 
     .k-grouping-dropclue,
     .k-reorder-cue {
-        border-color: $kendo-color-primary;
+        border-color: k-color(primary);
 
         &::before {
             border-color: transparent;
@@ -213,15 +142,15 @@
     }
 
     .k-resize-handle:hover .k-resize-handle-inner {
-        background-color: $kendo-color-primary;
+        background-color: k-color(primary);
     }
 
     .k-column-resizer:hover {
-        color: $kendo-color-primary;
+        color: k-color(primary);
     }
 
     .k-reorder-cue {
-        background-color: $kendo-color-primary;
+        background-color: k-color(primary);
     }
 
     .k-columnmenu-item {

package/scss/grid/_variables.scss

@@ -234,7 +234,7 @@ $kendo-grid-grouping-row-bg: transparent !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: k-spacing(1) !default;
-$kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
+$kendo-grid-sorted-bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent) !default;
 $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !default;
 $kendo-grid-sorting-index-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -250,7 +250,7 @@ $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$ke
 // Must be a solid color
 $kendo-grid-sticky-bg: $kendo-grid-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
-$kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
+$kendo-grid-sticky-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 // Must be a solid color
 $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -262,12 +262,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
 
-$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-bg, 4%)) !default;
+$kendo-grid-sticky-selected-bg: color-mix(in srgb, k-color(primary) 12%, transparent) !default;
 $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !default;
 
 // Must be a solid color
-$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade($kendo-grid-bg, 7%)) !default;
-$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
+$kendo-grid-sticky-hover-bg: k-color(base-hover) !default;
+$kendo-grid-sticky-selected-hover-bg: color-mix(in srgb, k-color(primary) 12%, transparent) !default;
 
 $kendo-grid-column-menu-width: 250px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -306,7 +306,7 @@ $kendo-grid-column-menu-group-header-border: $kendo-popup-border !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-x: k-spacing(0) !default;
 $kendo-grid-column-menu-tabbed-tabstrip-content-padding-y: k-spacing(2) !default;
 
-$kendo-grid-column-menu-tabbed-bg: $kendo-base-bg !default;
+$kendo-grid-column-menu-tabbed-bg: k-color(app-surface) !default;
 
 $kendo-grid-drag-cell-width: ($kendo-icon-size * 3) !default;
 
@@ -320,10 +320,10 @@ $kendo-grid-group-footer-second-cell-border: 0px !default;
 
 /// 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-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .24 )) !default;
+$kendo-grid-row-resizer-hover-bg: color-mix(in srgb, k-color(on-base) 20%, transparent) !default;
 /// The background color of the active Grid row resize indicator.
 /// @group grid
-$kendo-grid-row-resizer-active-bg: $kendo-color-primary !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

@@ -25,15 +25,15 @@ $kendo-image-editor-resize-handle-margin-y: k-spacing(1px) !default;
 $kendo-image-editor-resize-handle-border-width: 0 2px 2px 0 !default;
 $kendo-image-editor-resize-handle-size: 15px !default;
 
-$kendo-image-editor-bg: $kendo-component-bg !default;
-$kendo-image-editor-text: $kendo-component-text !default;
-$kendo-image-editor-border: $kendo-component-border !default;
+$kendo-image-editor-bg: k-color(surface-alt) !default;
+$kendo-image-editor-text: k-color(on-app-surface) !default;
+$kendo-image-editor-border: k-color(border) !default;
 
 $kendo-image-editor-content-bg: #c6c6c6 !default;
 $kendo-image-editor-content-text: null !default;
 $kendo-image-editor-content-border: null !default;
 
-$kendo-image-editor-action-pane-bg: $kendo-component-bg !default;
+$kendo-image-editor-action-pane-bg: k-color(surface-alt) !default;
 $kendo-image-editor-action-pane-text: null !default;
 $kendo-image-editor-action-pane-border: null !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
@@ -152,6 +153,7 @@
 @use "./loader/_index.scss" as *;
 @use "./skeleton/_index.scss" as *;
 @use "./time-marker/_index.scss" as *;
+@use "./marquee/_index.scss" as *;
 
 
 // Native forms
@@ -323,6 +325,7 @@
     @include kendo-skeleton--styles();
     @include kendo-tooltip--styles();
     @include kendo-time-marker--styles();
+    @include kendo-marquee--styles();
 
 
     // Form helpers

package/scss/input/_variables.scss

@@ -111,13 +111,13 @@ $kendo-input-sizes: (
 
 /// The background color of the Input components.
 /// @group input
-$kendo-input-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) !default;
+$kendo-input-bg: k-color(surface) !default;
 /// The text color of the Input components.
 /// @group input
-$kendo-input-text: $kendo-component-text !default;
+$kendo-input-text: k-color(on-app-surface) !default;
 /// The border color of the Input components.
 /// @group input
-$kendo-input-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 )) !default;
+$kendo-input-border: color-mix(in srgb, k-color(on-app-surface) 44%, transparent) !default;
 /// The shadow of the Input components.
 /// @group input
 $kendo-input-shadow: null !default;
@@ -143,7 +143,7 @@ $kendo-input-focus-bg: null !default;
 $kendo-input-focus-text: null !default;
 /// The border color of the focused Input components.
 /// @group input
-$kendo-input-focus-border: $kendo-color-primary !default;
+$kendo-input-focus-border: k-color(primary) !default;
 /// The shadow of the focused Input components.
 /// @group input
 $kendo-input-focus-shadow: unset !default;
@@ -156,13 +156,13 @@ $kendo-input-selected-bg: null !default;
 $kendo-input-selected-text: null !default;
 /// The background color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 )) !default;
+$kendo-input-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
 /// The text color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text) !default;
+$kendo-input-disabled-text: color-mix(in srgb, k-color(on-app-surface) 27%, transparent) !default;
 /// The border color of the disabled Input components.
 /// @group input
-$kendo-input-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( color.alpha( $kendo-component-border ), 2 ) )) !default;
+$kendo-input-disabled-border: color-mix(in srgb, k-color(on-app-surface) 3%, transparent) !default;
 /// The gradient of the disabled Input components.
 /// @group input
 $kendo-input-disabled-gradient: null !default;
@@ -238,7 +238,7 @@ $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
 /// The text color of the Input placeholder.
 /// @group input
-$kendo-input-placeholder-text: $kendo-subtle-text !default;
+$kendo-input-placeholder-text: k-color(subtle) !default;
 /// The opacity of the Input placeholder.
 /// @group input
 $kendo-input-placeholder-opacity: 1 !default;
@@ -279,24 +279,24 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-text: $kendo-component-border !default;
+$kendo-input-separator-text: k-color(border) !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
 /// The text color of the Input prefix.
 /// @group input
-$kendo-input-prefix-text: $kendo-subtle-text !default;
+$kendo-input-prefix-text: k-color(subtle) !default;
 /// The text color of the Input suffix.
 /// @group input
-$kendo-input-suffix-text: $kendo-subtle-text !default;
+$kendo-input-suffix-text: k-color(subtle) !default;
 
 /// The border color of the invalid Input components.
 /// @group input
-$kendo-input-invalid-border: $kendo-invalid-border !default;
+$kendo-input-invalid-border: k-color(error) !default;
 /// The shadow of the invalid Input components.
 /// @group input
-$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
+$kendo-input-invalid-shadow: null !default;
 
 /// The background color of the Picker components.
 /// @group picker

package/scss/list/_theme.scss

@@ -11,7 +11,7 @@
     .k-list-item {
         &.k-selected:hover,
         &.k-selected.k-hover {
-            background-color: if($kendo-enable-color-system, k-color( base-active ), k-color-shade( $kendo-list-item-selected-bg ));
+            background-color: k-color(base-active);
         }
     }
 }

package/scss/list/_variables.scss

@@ -182,13 +182,13 @@ $kendo-list-sizes: (
 
 /// The background color of the List component.
 /// @group list
-$kendo-list-bg: $kendo-component-bg !default;
+$kendo-list-bg: k-color(surface-alt) !default;
 /// The text color of the List component.
 /// @group list
-$kendo-list-text: $kendo-component-text !default;
+$kendo-list-text: k-color(on-app-surface) !default;
 /// The border color of the List component.
 /// @group list
-$kendo-list-border: $kendo-component-border !default;
+$kendo-list-border: k-color(border) !default;
 
 
 /// The background color of the List header.
@@ -214,10 +214,10 @@ $kendo-list-item-text: null !default;
 
 /// The background color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-bg: $kendo-hover-bg !default;
+$kendo-list-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered List items.
 /// @group list
-$kendo-list-item-hover-text: $kendo-hover-text !default;
+$kendo-list-item-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused List items.
 /// @group list
@@ -231,10 +231,10 @@ $kendo-list-item-focus-shadow: unset !default;
 
 /// The background color of the selected List items.
 /// @group list
-$kendo-list-item-selected-bg: $kendo-component-bg !default;
+$kendo-list-item-selected-bg: k-color(surface-alt) !default;
 /// The text color of the selected List items.
 /// @group list
-$kendo-list-item-selected-text: $kendo-color-secondary !default;
+$kendo-list-item-selected-text: k-color(secondary) !default;
 
 /// The background color of the List group items.
 /// @group list
@@ -251,7 +251,7 @@ $kendo-list-group-item-shadow: null !default;
 
 /// The color of the 'Option Label' text.
 /// @group list
-$kendo-list-option-label-text: $kendo-subtle-text !default;
+$kendo-list-option-label-text: k-color(subtle) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
     $kendo-list-font-family: $kendo-list-font-family,

package/scss/listbox/_variables.scss

@@ -30,13 +30,13 @@ $kendo-listbox-line-height: $kendo-list-md-line-height !default;
 
 /// The text color of the ListBox.
 /// @group listbox
-$kendo-listbox-text: $kendo-component-text !default;
+$kendo-listbox-text: k-color(on-app-surface) !default;
 /// The background color of the ListBox.
 /// @group listbox
-$kendo-listbox-bg: $kendo-component-bg !default;
+$kendo-listbox-bg: k-color(surface-alt) !default;
 /// The border color of the ListBox.
 /// @group listbox
-$kendo-listbox-border: $kendo-component-border !default;
+$kendo-listbox-border: k-color(border) !default;
 
 /// The inline padding of the ListBox item.
 /// @group listbox

package/scss/listgroup/_variables.scss

@@ -8,9 +8,9 @@ $kendo-listgroup-border-radius: k-border-radius(md) !default;
 $kendo-listgroup-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-listgroup-line-height: math.div( 20, 14 ) !default;
 
-$kendo-listgroup-bg: $kendo-component-bg !default;
-$kendo-listgroup-text: $kendo-component-text !default;
-$kendo-listgroup-border: $kendo-component-border !default;
+$kendo-listgroup-bg: k-color(surface-alt) !default;
+$kendo-listgroup-text: k-color(on-app-surface) !default;
+$kendo-listgroup-border: k-color(border) !default;
 
 $kendo-listgroup-item-padding-x: k-spacing(2) !default;
 $kendo-listgroup-item-padding-y: k-spacing(2) !default;

package/scss/listview/_theme.scss

@@ -15,7 +15,7 @@
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .12 ));
+        background-color: k-color(base-active);
     }
 
 }

package/scss/listview/_variables.scss

@@ -24,13 +24,13 @@ $kendo-listview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ListView.
 /// @group listview
-$kendo-listview-text: $kendo-component-text !default;
+$kendo-listview-text: k-color(on-app-surface) !default;
 /// The background color of the ListView.
 /// @group listview
-$kendo-listview-bg: $kendo-component-bg !default;
+$kendo-listview-bg: k-color(surface-alt) !default;
 /// The border color of the ListView.
 /// @group listview
-$kendo-listview-border: $kendo-component-border !default;
+$kendo-listview-border: k-color(border) !default;
 
 /// The horizontal padding of the ListView items.
 /// @group listview
@@ -44,7 +44,7 @@ $kendo-listview-item-padding-y: k-spacing(1) !default;
 $kendo-listview-item-selected-text: null !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .04 )) !default;
+$kendo-listview-item-selected-bg: k-color(base-active) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
@@ -54,7 +54,7 @@ $kendo-listview-item-selected-border: null !default;
 $kendo-listview-item-focus-text: null !default;
 /// The background color of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-bg: if($kendo-enable-color-system, k-color( base-active ), rgba( k-contrast-color( $kendo-listview-bg ), .08 )) !default;
+$kendo-listview-item-focus-bg: k-color(base-active) !default;
 /// The border color of the focused ListView items.
 /// @group listview
 $kendo-listview-item-focus-border: null !default;

package/scss/loader/_variables.scss

@@ -74,7 +74,7 @@ $kendo-loader-container-panel-border-width: 1px !default;
 $kendo-loader-container-panel-border-style: solid !default;
 /// The border color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-border-color: $kendo-component-border !default;
+$kendo-loader-container-panel-border-color: k-color(border) !default;
 /// The border radius of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
@@ -115,7 +115,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
-$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-bg: k-color(surface-alt) !default;
 /// The text color of the Loading indicator.
 /// @group loading
 $kendo-loading-text: currentColor !default;
@@ -126,6 +126,19 @@ $kendo-loading-opacity: .3 !default;
 /// @group loading
 $kendo-zindex-loading: 100 !default;
 
+$kendo-loader-theme-colors: (
+    "primary": k-color(primary),
+    "secondary": k-color(secondary),
+    "tertiary": k-color(tertiary),
+    "info": k-color(info),
+    "success": k-color(success),
+    "warning": k-color(warning),
+    "error": k-color(error),
+    "dark": k-color(dark),
+    "light": k-color(light),
+    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
+) !default;
+
 @forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with (
     $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
     $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
@@ -163,5 +176,6 @@ $kendo-zindex-loading: 100 !default;
     $kendo-loading-bg: $kendo-loading-bg,
     $kendo-loading-text: $kendo-loading-text,
     $kendo-loading-opacity: $kendo-loading-opacity,
-    $kendo-zindex-loading: $kendo-zindex-loading
+    $kendo-zindex-loading: $kendo-zindex-loading,
+    $kendo-loader-theme-colors: $kendo-loader-theme-colors
 );

package/scss/map/_variables.scss

@@ -19,13 +19,13 @@ $kendo-map-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The background color of the Map.
 /// @group map
-$kendo-map-bg: $kendo-component-bg !default;
+$kendo-map-bg: k-color(surface-alt) !default;
 /// The text color of the Map.
 /// @group map
-$kendo-map-text: $kendo-component-text !default;
+$kendo-map-text: k-color(on-app-surface) !default;
 /// The border color of the Map.
 /// @group map
-$kendo-map-border: $kendo-component-border !default;
+$kendo-map-border: k-color(border) !default;
 
 /// The margin of the Map navigator.
 /// @group map
@@ -64,11 +64,11 @@ $kendo-map-attribution-padding-y: k-spacing(0.5) !default;
 $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
 /// The background color of the Map attribution.
 /// @group map
-$kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default;
+$kendo-map-attribution-bg: color-mix(in srgb, k-color(app-surface) 80%, transparent) !default;
 
 /// The fill color of the Map marker.
 /// @group map
-$kendo-map-marker-fill: $kendo-color-primary !default;
+$kendo-map-marker-fill: k-color(primary) !default;
 
 $kendo-map-marker-images: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAABQCAYAAAAKlxWDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA35JREFUeNrsWF1IVEEUPu7amhKUmqUUkhEYYn9PamgbROKTEERB1HNP0pMvJUVhZQhCEEQPQiAIkiQIQShEZmg99SdLgiRJpbGmGIu/aZ2zzJXrvWf2zty7PgTzwQd3Z86Z796z58wMJ+PruXxQwCHkGeRpZDbyqBh/j1xA9iN7kJ+8FsrwECSRu8hSUMMosgnZLTMIScaLkUPIpxpiIGyfCN9iVcEo8h2yCvyjSqwR9RIkgz5kHgRHnlhrg2im7blEhCPCeW89fBJyKuohsv8IRPaV46uGYfnLhyTn3/bC4seXnFtErFmBHHcmzSCy2umRWVgC+ZfvQ1bZ8ZSfsxQbgl+PrsCfqXFu+jWyxh7Ss5xY1sFKKLzd5ymWtEWbpC36MKgWGuuCzdyXFTR2QGhbrvKfRrbkQ74Mmi3BKJf6FEYdMbso+UpKJkpJU+dKkPIaNoyrM5Mw23Edlj6/WQ957qVbEM4rcoWX1lgcGXQuURfi6o2y0YmVH2Mw2XgC5od6ksJEeqaxlW+joLIGaZFgGVcCTsx13YG1xKxrnMZoTmUN0iLB7c7R8M49LktJnSWxwMxxa5AWu5f+XV6EzQIJznHJwSWSDNlM+Fanv3OmcyQY43YNVyzOX2XLhMZoTvEviJHgsHOU9kYntuwthaLWV5BTWQ/hHbuSpGcaozmVNUiL9lIqfNfr7L7Rq7SlyfbVnzfZsjhFXzggTuoNoI14bf63thj5kK/kNvDCytIm5yzt+vF7F9jak4qhbbz1ouzEaLJv3t3iCNkYGtzCpq7Vrm9lKcNo2TIJJ/Kk23keHhB3kQLPAxhJUDiACXEkJcMYd2uzrhiRNNX5MrJW5Al7pxkQBjNpEJtxislubWRwjKtPDQyLNQZU76UTIu4NPsQahO+EzkXYwgNu60uBmPAB3Zu3HS0agp62KoJdsvAwf0NXOgQptdsU7NqEbWBBQrso4FQl0K56AKsggXzokVyJdAqmWjThlZl+BeOSsD32CLdvQSsxVu1XF2Sr7iVKB5T6nbbfnYol41vQWdwtus6ZPgRp+3pme950QV9fpito+jSmT2P6NKZP479PE9Lp06jC6tMwUO/T6CJwn0YXgfs0uvj/+jS6CNyn0UXgPo0uZH0aEnzueruRwUBfSb5Mr5TQb/o0pk9j+jSmT2P6NKZPY/o0pk9j+jQ+8E+AAQDpbNHEyW7DTAAAAABJRU5ErkJggg==" !default;
 

package/scss/marquee/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-marquee--styles() {
+    @include import-once( "marquee" ) {
+        @include core-styles();
+        @include kendo-marquee--layout();
+        @include kendo-marquee--theme();
+    }
+}

package/scss/marquee/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/marquee/_layout.scss" as *;
+
+
+@mixin kendo-marquee--layout() {
+    @include kendo-marquee--layout-base();
+}

package/scss/marquee/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/marquee/_theme.scss" as *;
+
+
+@mixin kendo-marquee--theme() {
+    @include kendo-marquee--theme-base();
+}

package/scss/marquee/_variables.scss

@@ -0,0 +1,11 @@
+@use "../core/_index.scss" as *;
+
+$kendo-marquee-text: k-color(on-secondary) !default;
+$kendo-marquee-bg: k-color(secondary) !default;
+$kendo-marquee-border: k-color(base) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/marquee/_variables.scss" with (
+    $kendo-marquee-text: $kendo-marquee-text,
+    $kendo-marquee-bg: $kendo-marquee-bg,
+    $kendo-marquee-border: $kendo-marquee-border
+);

package/scss/mediaplayer/_variables.scss

@@ -17,13 +17,13 @@ $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-bg: $kendo-component-bg !default;
+$kendo-media-player-bg: k-color(surface-alt) !default;
 /// The text color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-text: $kendo-component-text !default;
+$kendo-media-player-text: k-color(on-app-surface) !default;
 /// The border color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-border: $kendo-component-border !default;
+$kendo-media-player-border: k-color(border) !default;
 
 /// The horizontal padding of the MediaPlayer title.
 /// @group mediaplayer
@@ -42,7 +42,7 @@ $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;
 /// The gradient of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
+$kendo-media-player-titlebar-gradient: color-mix(in srgb, k-color(on-app-surface) 70%, transparent), color-mix(in srgb, k-color(on-app-surface) 0%, transparent) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/mediaplayer/_variables.scss" with (
     $kendo-media-player-border-width: $kendo-media-player-border-width,