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

package/scss/listview/_variables.scss

@@ -23,13 +23,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(app-surface) !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
@@ -43,7 +43,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, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
+$kendo-listview-item-selected-bg: color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;
@@ -59,7 +59,7 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-listview-text, .15 )) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/listview/_variables.scss" with (

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(app-surface) !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,
@@ -164,5 +177,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(app-surface) !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(1) !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-primary) !default;
+$kendo-marquee-bg: k-color(primary) !default;
+$kendo-marquee-border: k-color(primary) !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(app-surface) !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 (

package/scss/menu/_variables.scss

@@ -25,10 +25,10 @@ $kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-menu-bg: transparent !default;
 /// The text color of the Menu
 /// @group menu
-$kendo-menu-text: $kendo-component-header-text !default;
+$kendo-menu-text: k-color(on-app-surface) !default;
 /// The border color of the Menu.
 /// @group menu
-$kendo-menu-border: $kendo-component-header-border !default;
+$kendo-menu-border: k-color(border) !default;
 /// The background gradient of the Menu.
 /// @group menu
 $kendo-menu-gradient: null !default;
@@ -57,7 +57,7 @@ $kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !
 $kendo-menu-item-bg: null !default;
 /// The text color of the Menu item.
 /// @group menu
-$kendo-menu-item-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 76%, transparent), rgba( $kendo-menu-text, .76 )) !default;
+$kendo-menu-item-text: color-mix(in srgb, k-color(on-app-surface) 76%, transparent) !default;
 /// The border color of the Menu item.
 /// @group menu
 $kendo-menu-item-border: null !default;
@@ -70,7 +70,7 @@ $kendo-menu-item-gradient: null !default;
 $kendo-menu-item-hover-bg: null !default;
 /// The text color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 93%, transparent), rgba( $kendo-menu-text, .93 )) !default;
+$kendo-menu-item-hover-text: color-mix(in srgb, k-color(on-app-surface) 93%, transparent) !default;
 /// The border color of hovered Menu item.
 /// @group menu
 $kendo-menu-item-hover-border: null !default;
@@ -83,7 +83,7 @@ $kendo-menu-item-hover-gradient: null !default;
 $kendo-menu-item-active-bg: null !default;
 /// The text color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 100%, transparent), rgba( $kendo-menu-text, 1 )) !default;
+$kendo-menu-item-active-text: color-mix(in srgb, k-color(on-app-surface) 100%, transparent) !default;
 /// The border color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-border: null !default;
@@ -93,7 +93,7 @@ $kendo-menu-item-active-gradient: null !default;
 
 /// The base shadow of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-menu-text, .15 )) !default;
+$kendo-menu-item-focus-shadow: inset 0 0 0 3px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
 /// The background color of selected Menu item.
 /// @group menu
@@ -113,7 +113,7 @@ $kendo-menu-item-selected-gradient: null !default;
 $kendo-menu-scroll-button-bg: $kendo-menu-bg !default;
 /// The text color of the Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
+$kendo-menu-scroll-button-text: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 /// The border color of the Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-border: $kendo-menu-border !default;
@@ -126,7 +126,7 @@ $kendo-menu-scroll-button-gradient: null !default;
 $kendo-menu-scroll-button-hover-bg: null !default;
 /// The text color of hovered Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), rgba( $kendo-menu-text, .7 )) !default;
+$kendo-menu-scroll-button-hover-text: color-mix(in srgb, k-color(on-app-surface) 70%, transparent) !default;
 /// The border color of hovered Menu scroll buttons.
 /// @group menu
 $kendo-menu-scroll-button-hover-border: null !default;
@@ -145,7 +145,7 @@ $kendo-menu-separator-margin-inline: k-spacing(1) !default;
 $kendo-menu-separator-margin-block: k-spacing(2) !default;
 /// The border color of Menu separator.
 /// @group menu
-$kendo-menu-separator-border: if($kendo-enable-color-system, k-color(border), $kendo-component-border) !default;
+$kendo-menu-separator-border: k-color(border) !default;
 
 
 // Menu popup

package/scss/messagebox/_variables.scss

@@ -16,6 +16,18 @@ $kendo-message-box-border-level: -9 !default;
 $kendo-message-box-link-font-style: normal !default;
 $kendo-message-box-link-text-decoration: underline !default;
 
+$kendo-message-box-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/messagebox/_variables.scss" with (
     $kendo-message-box-margin: $kendo-message-box-margin,
@@ -28,5 +40,6 @@ $kendo-message-box-link-text-decoration: underline !default;
     $kendo-message-box-text-level: $kendo-message-box-text-level,
     $kendo-message-box-border-level: $kendo-message-box-border-level,
     $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
-    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration
+    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration,
+    $kendo-message-box-theme-colors: $kendo-message-box-theme-colors
 );

package/scss/no-data/_variables.scss

@@ -6,7 +6,7 @@ $kendo-no-data-min-height: 140px !default;
 
 /// The color of the 'No Data' text.
 /// @group no-data
-$kendo-no-data-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-no-data-text: k-color(subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/no-data/_variables.scss" with (

package/scss/notification/_functions.scss

@@ -7,9 +7,9 @@
 
     @each $name, $color in $colors {
         $_theme: map.merge(( $name: (
-            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade( $color, 6 )),
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint( $color, 9 )),
-            border: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint( $color, 10 )),
+            color: k-color(#{$name}-on-subtle),
+            background-color: k-color(#{$name}-subtle),
+            border: k-color(#{$name}-emphasis),
         )), $_theme );
     }
 

package/scss/notification/_variables.scss

@@ -32,13 +32,13 @@ $kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Notification.
 /// @group notification
-$kendo-notification-bg: $kendo-component-bg !default;
+$kendo-notification-bg: k-color(app-surface) !default;
 /// The text color of the Notification.
 /// @group notification
-$kendo-notification-text: $kendo-component-text !default;
+$kendo-notification-text: k-color(on-app-surface) !default;
 /// The border color of the Notification.
 /// @group notification
-$kendo-notification-border: $kendo-component-border !default;
+$kendo-notification-border: k-color(border) !default;
 /// The box shadow of the Notification.
 /// @group notification
 $kendo-notification-shadow: $kendo-popup-shadow !default;
@@ -49,7 +49,18 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-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;
 /// The generated theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;

package/scss/orgchart/_variables.scss

@@ -24,13 +24,13 @@ $kendo-orgchart-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-orgchart-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-bg: $kendo-component-bg !default;
+$kendo-orgchart-bg: k-color(app-surface) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-text: $kendo-component-text !default;
+$kendo-orgchart-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-border: $kendo-component-border !default;
+$kendo-orgchart-border: k-color(border) !default;
 
 /// The spacing of the OrgChart node.
 /// @group orgchart
@@ -56,13 +56,13 @@ $kendo-orgchart-node-group-border-width: 1px !default;
 $kendo-orgchart-node-group-border-radius: k-border-radius(md) !default;
 /// The background color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-bg: $kendo-base-bg !default;
+$kendo-orgchart-node-group-bg: k-color(surface) !default;
 /// The text color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: $kendo-base-text !default;
+$kendo-orgchart-node-group-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: $kendo-base-border !default;
+$kendo-orgchart-node-group-border: k-color(border) !default;
 
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
@@ -91,7 +91,7 @@ $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit )
 
 /// The line height of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
+$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
 
 /// The width of the OrgChart Card.
 /// @group orgchart
@@ -145,7 +145,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// The fill color of the OrgChart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-fill: $kendo-base-border !default;
+$kendo-orgchart-line-fill: k-color(border) !default;
 
 /// The height of the OrgChart connecting line.
 /// @group orgchart

package/scss/overlay/_variables.scss

@@ -1,13 +1,23 @@
 @use "../core/_index.scss" as *;
 
-$kendo-overlay-theme-colors: $kendo-theme-colors !default;
+$kendo-overlay-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;
 
 $kendo-overlay-bg: $kendo-color-black !default;
 $kendo-overlay-opacity: .5 !default;
 
-
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
     $kendo-overlay-theme-colors: $kendo-overlay-theme-colors,
     $kendo-overlay-bg: $kendo-overlay-bg,
-    $kendo-overlay-opacity: $kendo-overlay-opacity
+    $kendo-overlay-opacity: $kendo-overlay-opacity,
 );

package/scss/pager/_variables.scss

@@ -63,13 +63,13 @@ $kendo-pager-font-size: var( --kendo-font-size, inherit )  !default;
 $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: $kendo-component-header-bg !default;
+$kendo-pager-bg: k-color(surface) !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: $kendo-component-header-text !default;
+$kendo-pager-text: k-color(on-app-surface) !default;
 /// The border color of the Pager.
 /// @group pager
-$kendo-pager-border: $kendo-component-header-border !default;
+$kendo-pager-border: k-color(border) !default;
 
 /// The background color of the focused Pager.
 /// @group pager
@@ -93,29 +93,29 @@ $kendo-pager-item-border-radius: k-spacing(1) !default;
 $kendo-pager-item-spacing: (-1 * $kendo-pager-item-border-width) !default;
 /// The background color of the Pager items.
 /// @group pager
-$kendo-pager-item-bg: $kendo-component-bg !default;
+$kendo-pager-item-bg: k-color(app-surface) !default;
 /// The text color of the Pager items.
 /// @group pager
-$kendo-pager-item-text: $kendo-link-text !default;
+$kendo-pager-item-text: k-color(primary) !default;
 /// The border color of the Pager items.
 /// @group pager
-$kendo-pager-item-border: $kendo-component-border !default;
+$kendo-pager-item-border: k-color(border) !default;
 
 /// The background color of the hovered Pager items.
 /// @group pager
-$kendo-pager-item-hover-bg: $kendo-hover-bg !default;
+$kendo-pager-item-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered Pager items.
 /// @group pager
-$kendo-pager-item-hover-text: $kendo-link-hover-text !default;
+$kendo-pager-item-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered Pager items.
 /// @group pager
-$kendo-pager-item-hover-border: $kendo-hover-border !default;
+$kendo-pager-item-hover-border: k-color(border) !default;
 /// The background color of the selected Pager items.
 /// @group pager
-$kendo-pager-item-selected-bg: $kendo-selected-bg !default;
+$kendo-pager-item-selected-bg: k-color(primary) !default;
 /// The text color of the selected Pager items.
 /// @group pager
-$kendo-pager-item-selected-text: $kendo-selected-text !default;
+$kendo-pager-item-selected-text: k-color(on-primary) !default;
 /// The border color of the selected Pager items.
 /// @group pager
 $kendo-pager-item-selected-border: $kendo-pager-item-selected-bg !default;
@@ -127,7 +127,7 @@ $kendo-pager-item-focus-opacity: null !default;
 $kendo-pager-item-focus-bg: $kendo-pager-item-bg !default;
 /// The box shadow of the focused Pager items.
 /// @group pager
-$kendo-pager-item-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25)) !default;
+$kendo-pager-item-focus-shadow: 0 0 0 3px color-mix(in srgb, k-color(primary) 25%, transparent) !default;
 
 /// The border radius of the Pager numbers.
 /// @group pager

package/scss/panel/_variables.scss

@@ -26,13 +26,13 @@ $kendo-panel-content-padding-block: k-spacing(1) !default;
 
 /// The text color of the Panel.
 /// @group panel
-$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text}) !default;
+$kendo-panel-text: var(--kendo-component-text, #{k-color(on-app-surface)}) !default;
 /// The background color of the Panel.
 /// @group panel
-$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg}) !default;
+$kendo-panel-bg: var(--kendo-component-bg, #{k-color(app-surface)}) !default;
 /// The color of the border around the Panel.
 /// @group panel
-$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border}) !default;
+$kendo-panel-border: var(--kendo-component-border, #{k-color(border)}) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (

package/scss/panelbar/_variables.scss

@@ -52,20 +52,20 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: $kendo-component-bg !default;
+$kendo-panelbar-bg: k-color(app-surface) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-text: $kendo-component-text !default;
+$kendo-panelbar-text: k-color(on-app-surface) !default;
 /// The border color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-border: $kendo-component-border !default;
+$kendo-panelbar-border: k-color(border) !default;
 
 /// The background color of the PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-bg: $kendo-panelbar-bg !default;
 /// The text color of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-text: $kendo-link-text !default;
+$kendo-panelbar-header-text: k-color(primary) !default;
 /// The border color of the PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-border: null !default;
@@ -75,7 +75,7 @@ $kendo-panelbar-header-gradient: null !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
+$kendo-panelbar-header-hover-bg: k-color(base-subtle-hover) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-text: null !default;
@@ -117,10 +117,10 @@ $kendo-panelbar-header-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: $kendo-selected-bg !default;
+$kendo-panelbar-header-selected-bg: k-color(primary) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-text: $kendo-selected-text !default;
+$kendo-panelbar-header-selected-text: k-color(on-primary) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: null !default;
@@ -130,7 +130,7 @@ $kendo-panelbar-header-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
+$kendo-panelbar-header-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-hover-text: null !default;
@@ -169,7 +169,7 @@ $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, 1 )) !default;
+$kendo-panelbar-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-text: null !default;
@@ -211,10 +211,10 @@ $kendo-panelbar-item-hover-focus-gradient: null !default;
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: $kendo-selected-bg !default;
+$kendo-panelbar-item-selected-bg: k-color(primary) !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-text: $kendo-selected-text !default;
+$kendo-panelbar-item-selected-text: k-color(on-primary) !default;
 /// The border color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: null !default;
@@ -224,7 +224,7 @@ $kendo-panelbar-item-selected-gradient: null !default;
 
 /// The background color of the selected and hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
+$kendo-panelbar-item-selected-hover-bg: k-color(primary-hover) !default;
 /// The text color of the selected and hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-hover-text: null !default;