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

package/scss/loader/_variables.scss

@@ -88,13 +88,13 @@ $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: var( --kendo-component-border, initial ) !default;
+$kendo-loader-container-panel-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The border radius of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-radius: k-border-radius(md) !default;
 /// The background color of the container panel.
 /// @group loader
-$kendo-loader-container-panel-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-loader-container-panel-bg: k-color(app-surface) !default;
 
 /// The horizontal padding of the small Loader container.
 /// @group loader
@@ -140,7 +140,7 @@ $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !defa
 /// @group loader
 $kendo-loader-brand-colors: (
     primary: primary,
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
     error: error,
     success: success,
@@ -150,15 +150,15 @@ $kendo-loader-brand-colors: (
 
  // Matrix with loader theme colors in the order: bg, color, border
 $_tc-loader-matrix: (
-    (normal: if($kendo-enable-color-system, (color, null, null), (100, null, null))),
+    (normal: (color, null, null)),
 ) !default;
 
 $_tc-loader-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, null, null), (160, null, null))),
+    (normal: (color, null, null)),
 ) !default;
 
 $_tc-loader-light-matrix: (
-    (normal: if($kendo-enable-color-system, (color, null, null), (50, null, null))),
+    (normal: (color, null, null)),
 ) !default;
 
 /// The theme colors map for the Loader variations.
@@ -177,21 +177,21 @@ $kendo-loader-theme-colors: () !default;
 @each $ui-states in $_tc-loader-dark-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-loader-light-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }
 
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
-$kendo-loading-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-loading-bg: k-color(surface-alt) !default;
 /// The text color of the Loading indicator.
 /// @group loading
 $kendo-loading-text: currentColor !default;

package/scss/map/_variables.scss

@@ -15,13 +15,13 @@ $kendo-map-font-family: var( --kendo-font-family, normal ) !default;
 
 /// The background color of the Map.
 /// @group map
-$kendo-map-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-map-bg: k-color(surface-alt) !default;
 /// The text color of the Map.
 /// @group map
-$kendo-map-text: var( --kendo-component-text, inherit ) !default;
+$kendo-map-text: k-color(on-app-surface) !default;
 /// The border color of the Map.
 /// @group map
-$kendo-map-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-map-border: k-color(border) !default;
 
 /// The border width of the Map.
 /// @group map
@@ -50,13 +50,13 @@ $kendo-map-navigator-height: $kendo-map-navigator-width !default;
 $kendo-map-navigator-border-width: 1px !default;
 /// The background color of the Map navigator.
 /// @group map
-$kendo-map-navigator-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-map-navigator-bg: k-color(app-surface) !default;
 /// The text color of the Map navigator.
 /// @group map
-$kendo-map-navigator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-map-navigator-text: k-color(on-app-surface) !default;
 /// The border color of the Map navigator.
 /// @group map
-$kendo-map-navigator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-map-navigator-border: k-color(border) !default;
 
 /// The margin of the Map zoom control.
 /// @group map
@@ -79,8 +79,8 @@ $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, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-map-attribution-bg: k-color(app-surface) !default;
 
 /// The fill color of the Map marker.
 /// @group map
-$kendo-map-marker-fill: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-map-marker-fill: k-color(primary) !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-app-surface) !default;
+$kendo-marquee-bg: color-mix(in srgb, k-color(primary) 55%, white 45%) !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

@@ -16,21 +16,21 @@ $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-media-player-bg: k-color(surface-alt) !default;
 /// The text color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-text: var( --kendo-component-text, inherit ) !default;
+$kendo-media-player-text: k-color(on-app-surface) !default;
 /// The border color of the MediaPlayer.
 /// @group mediaplayer
-$kendo-media-player-border: var( --kendo-component-border, inherit ) !default;
+$kendo-media-player-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the MediaPlayer overlay.
 /// @group mediaplayer
-$kendo-media-player-overlay-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-media-player-overlay-bg: k-color(base-emphasis) !default;
 
 /// The border color of the MediaPlayer button.
 /// @group mediaplayer
-$kendo-media-player-quality-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-media-player-quality-border: k-color(border) !default;
 
 /// The font size of the MediaPlayer title.
 /// @group mediaplayer
@@ -43,7 +43,7 @@ $kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
 $kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
 /// The background color of the MediaPlayer title.
 /// @group mediaplayer
-$kendo-media-player-titlebar-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) !default;
+$kendo-media-player-titlebar-bg: color-mix(in srgb, k-color(on-app-surface) 40%, transparent) !default;
 /// The text color of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;

package/scss/menu/_theme.scss

@@ -109,7 +109,7 @@
 
     .k-menu-scroll-wrapper .k-menu-scroll-button {
         border-color: var( --kendo-menu-scroll-btn-bg, transparent );
-        background-color: var( --kendo-menu-scroll-btn-bg, var( --kendo-body-bg, #{$kendo-body-bg} ) );
+        background-color: var( --kendo-menu-scroll-btn-bg, #{k-color(app-surface)} );
     }
 }
 

package/scss/menu/_variables.scss

@@ -22,7 +22,7 @@ $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: var( --kendo-body-text, inherit ) !default;
+$kendo-menu-text: k-color(on-app-surface) !default;
 /// The border color of the Menu.
 /// @group menu
 $kendo-menu-border: initial !default;
@@ -60,17 +60,17 @@ $kendo-menu-item-bg: transparent !default;
 
 /// The text color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-menu-item-hover-text: k-color(on-base) !default;
 /// The background color of hovered Menu item.
 /// @group menu
-$kendo-menu-item-hover-bg: var( --kendo-hover-bg, initial ) !default;
+$kendo-menu-item-hover-bg: k-color(base-hover) !default;
 
 /// The text color of active Menu item.
 /// @group menu
 $kendo-menu-item-active-text: $kendo-menu-item-hover-text !default;
 /// The background color of active Menu item.
 /// @group menu
-$kendo-menu-item-active-bg: var( --kendo-selected-bg, initial ) !default;
+$kendo-menu-item-active-bg: k-color(base-active) !default;
 
 /// The text color of focused Menu item.
 /// @group menu
@@ -81,14 +81,14 @@ $kendo-menu-item-focus-bg: $kendo-menu-item-bg !default;
 
 /// The outline of focused Menu item.
 /// @group menu
-$kendo-menu-item-focus-outline: var( --kendo-focus-outline, none ) !default;
+$kendo-menu-item-focus-outline: k-color(base-emphasis) !default;
 $kendo-menu-item-focus-outline-offset: calc( #{k-spacing(0.5)} * -1 ) !default;
 $kendo-menu-item-focus-outline-width: 1px !default;
 $kendo-menu-item-focus-outline-style: solid !default;
 
 /// The text color of disabled Menu item.
 /// @group menu
-$kendo-menu-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-menu-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of disabled Menu item.
 /// @group menu
 $kendo-menu-item-disabled-bg: $kendo-menu-item-bg !default;
@@ -146,7 +146,7 @@ $kendo-menu-popup-lg-line-height: $kendo-menu-popup-line-height !default;
 
 /// The background color of the Menu popup.
 /// @group menu
-$kendo-menu-popup-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-menu-popup-bg: k-color(surface-alt) !default;
 /// The border color of the Menu popup.
 /// @group menu
 $kendo-menu-popup-border: initial !default;
@@ -246,7 +246,7 @@ $kendo-menu-popup-item-focus-text: $kendo-menu-item-text !default;
 $kendo-menu-popup-item-focus-bg: $kendo-menu-item-bg !default;
 /// The outline of focused Menu items.
 /// @group menu
-$kendo-menu-popup-item-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
+$kendo-menu-popup-item-focus-outline: k-color(base-emphasis) !default;
 
 /// The text color of active Menu item in popup.
 /// @group menu
@@ -264,10 +264,10 @@ $kendo-menu-popup-item-disabled-bg: $kendo-list-item-disabled-bg !default;
 
 /// The background color of Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-bg: var( --kendo-component-bg, $kendo-component-bg ) !default;
+$kendo-menu-scroll-button-bg: k-color(surface-alt) !default;
 /// The border color of Menu scroll buttons.
 /// @group menu
-$kendo-menu-scroll-button-border: var( --kendo-component-border, $kendo-component-border ) !default;
+$kendo-menu-scroll-button-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of hover Menu scroll buttons.
 /// @group menu
@@ -278,4 +278,4 @@ $kendo-menu-scroll-button-hover-border: null !default;
 
 /// The color of the Menu items icon.
 /// @group menu
-$kendo-menu-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-menu-icon-color: k-color(primary) !default;

package/scss/messagebox/_theme.scss

@@ -27,7 +27,7 @@
 
     }
 
-    @each $theme-color, $color-props in $kendo-theme-colors {
+    @each $theme-color, $color-props in $kendo-messagebox-theme-colors {
 
         $_text: currentColor;
         $_bg: map.get( $color-props, bg );

package/scss/messagebox/_variables.scss

@@ -34,7 +34,35 @@ $kendo-message-box-link-font-style: normal !default;
 $kendo-message-box-link-decoration: underline !default;
 /// Text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-text: var( --kendo-link-text, initial ) !default;
+$kendo-message-box-link-text: k-color(primary) !default;
 /// Hover text color of the message box links.
 /// @group messagebox
-$kendo-message-box-link-hover-text: var( --kendo-link-hover-text, initial ) !default;
+$kendo-message-box-link-hover-text: k-color(primary-hover) !default;
+
+$kendo-messagebox-theme-colors: (
+    primary: (
+        text: k-color(primary-emphasis),
+        bg: k-color(primary-subtle),
+        border: k-color(primary-subtle),
+    ),
+    info: (
+        text: k-color(info-on-surface),
+        bg: k-color(info-subtle),
+        border: k-color(info-subtle),
+    ),
+    success: (
+        text: k-color(success-on-surface),
+        bg: k-color(success-subtle),
+        border: k-color(success-subtle),
+    ),
+    warning: (
+        text: k-color(warning-on-surface),
+        bg: k-color(warning-subtle),
+        border: k-color(warning-subtle),
+    ),
+    error: (
+        text: k-color(error-on-surface),
+        bg: k-color(error-subtle),
+        border: k-color(error-subtle),
+    ),
+) !default;

package/scss/no-data/_variables.scss

@@ -5,4 +5,4 @@
 $kendo-no-data-min-height: 140px !default;
 /// The text color of the 'No Data' text.
 /// @group list
-$kendo-no-data-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-no-data-text: k-color(on-app-surface) !default;

package/scss/notification/_variables.scss

@@ -28,13 +28,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: var( --kendo-component-bg, inherit ) !default;
+$kendo-notification-bg: k-color(surface-alt) !default;
 /// The text color of the Notification.
 /// @group notification
-$kendo-notification-text: var( --kendo-component-text, inherit ) !default;
+$kendo-notification-text: k-color(on-app-surface) !default;
 /// The border color of the Notification.
 /// @group notification
-$kendo-notification-border: var( --kendo-component-border, inherit ) !default;
+$kendo-notification-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The box shadow of the Notification.
 /// @group notification
 $kendo-notification-box-shadow: none !default;
@@ -47,7 +47,7 @@ $kendo-notification-icon-spacing: k-spacing(2) !default;
 $kendo-notification-close-icon-spacing: k-spacing(4) !default;
 /// The color of the Notification icon.
 /// @group notification
-$kendo-notification-icon-text: var( --kendo-component-text, inherit ) !default;
+$kendo-notification-icon-text: k-color(on-app-surface) !default;
 
 /// The theme variations for the Notification.
 /// @group notification
@@ -57,21 +57,21 @@ $kendo-notification-brand-colors: (
     warning: warning,
     success: success,
     info: info,
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
 ) !default;
 
 // Matrix with notification theme colors in the order: bg, color, border
 $_tc-notification-matrix: (
-    (normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 190, 20))),
+    (normal: (color-subtle, color-on-subtle, color-subtle)),
 ) !default;
 
 $_tc-notification-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-notification-light-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 /// The theme colors map for the Notification variations.
@@ -90,13 +90,13 @@ $kendo-notification-theme-colors: () !default;
 @each $ui-states in $_tc-notification-dark-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-notification-light-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }

package/scss/orgchart/_variables.scss

@@ -22,13 +22,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: var( --kendo-component-bg, initial ) !default;
+$kendo-orgchart-bg: k-color(surface-alt) !default;
 /// The text color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-text: var( --kendo-component-text, initial ) !default;
+$kendo-orgchart-text: k-color(on-app-surface) !default;
 /// The border color of the OrgChart.
 /// @group orgchart
-$kendo-orgchart-border: var( --kendo-component-border, initial ) !default;
+$kendo-orgchart-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The spacing of the OrgChart node.
 /// @group orgchart
@@ -54,13 +54,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: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !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: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !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: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-orgchart-node-group-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The border color of the focused OrgChart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
@@ -86,7 +86,7 @@ $kendo-orgchart-node-group-subtitle-margin-y: calc( $kendo-orgchart-spacer - k-s
 $kendo-orgchart-node-group-subtitle-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the OrgChart node group subtitle.
 /// @group orgchart
-$kendo-orgchart-node-group-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-orgchart-node-group-subtitle-text: k-color(subtle) !default;
 
 /// The width of the OrgChart Card.
 /// @group orgchart
@@ -146,7 +146,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-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-orgchart-line-text: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The height of the OrgChart connecting line.
 /// @group orgchart
 $kendo-orgchart-line-v-height: k-spacing(6) !default;

package/scss/pager/_variables.scss

@@ -43,13 +43,13 @@ $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-pager-bg: k-color(surface) !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: var( --kendo-component-text, inherit ) !default;
+$kendo-pager-text: k-color(on-app-surface) !default;
 /// The border color of the Pager.
 /// @group pager
-$kendo-pager-border: var( --kendo-component-border, inherit ) !default;
+$kendo-pager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the focused Pager.
 /// @group pager
@@ -59,7 +59,7 @@ $kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
 $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
 /// The border color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-pager-focus-border: k-color(border) !default;
 
 /// The border radius of the Pager items.
 /// @group pager
@@ -80,11 +80,11 @@ $kendo-pager-lg-item-group-spacing: k-spacing(2) !default;
 
 /// The text color of the Pagers' sizes label.
 /// @group pager
-$kendo-pager-sizes-label-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-pager-sizes-label-text: k-color(on-app-surface) !default;
 
 /// The text color of the Pagers' info label.
 /// @group pager
-$kendo-pager-info-label-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-pager-info-label-text: k-color(subtle) !default;
 
 /// The width of the Inputs in the Pager.
 /// @group pager

package/scss/panel/_layout.scss

@@ -14,9 +14,9 @@
         > .k-header {
             @include border-top-radius( $kendo-panel-border-radius );
             @include fill(
-                var( --kendo-component-text, #{$kendo-component-text} ),
-                var( --kendo-component-bg, #{$kendo-component-bg} ),
-                var( --kendo-component-border, #{$kendo-component-border} )
+                k-color( on-app-surface ),
+                k-color( surface-alt ),
+                color-mix(in srgb, k-color( border ) 16%, transparent)
             );
             padding-inline: $kendo-panel-header-padding-inline;
             padding-block: $kendo-panel-header-padding-block;

package/scss/panel/_variables.scss

@@ -27,10 +27,10 @@ $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: 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: k-color(surface-alt) !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: color-mix(in srgb, k-color(border) 16%, transparent) !default;

package/scss/panelbar/_variables.scss

@@ -63,13 +63,13 @@ $kendo-panelbar-item-level-count: 4 !default;
 
 /// The background color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-panelbar-bg: k-color(surface-alt) !default;
 /// The text color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-text: var( --kendo-component-text, initial ) !default;
+$kendo-panelbar-text: k-color(on-app-surface) !default;
 /// The border color of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-border: var( --kendo-component-border, initial ) !default;
+$kendo-panelbar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the PanelBar header.
 /// @group panelbar
@@ -83,10 +83,10 @@ $kendo-panelbar-header-border: inherit !default;
 
 /// The background color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-panelbar-header-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-panelbar-header-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-hover-border: inherit !default;
@@ -116,16 +116,16 @@ $kendo-panelbar-header-hover-focus-border: null !default;
 
 /// The background color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-panelbar-header-selected-bg: k-color(base-active) !default;
 /// The text color of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-panelbar-header-selected-text: k-color(on-app-surface) !default;
 /// The border color of the selected PanelBar header.
 /// @group panelbar
 $kendo-panelbar-header-selected-border: inherit !default;
 /// The color of the marker of the selected PanelBar header.
 /// @group panelbar
-$kendo-panelbar-selected-marker: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-panelbar-selected-marker: k-color(primary) !default;
 
 /// The background color of the selected and hovered PanelBar header.
 /// @group panelbar
@@ -169,10 +169,10 @@ $kendo-panelbar-header-expanded-border: inherit !default;
 
 /// The background color of the hovered PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-hover-bg: var( --kendo-hover-bg, inherit ) !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: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-panelbar-item-hover-text: k-color(primary-hover) !default;
 /// The border color of the hovered PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-hover-border: inherit !default;
@@ -202,10 +202,10 @@ $kendo-panelbar-item-hover-focus-border: inherit !default;
 
 /// The background color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-panelbar-item-selected-bg: k-color(base-active) !default;
 /// The text color of the selected PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
+$kendo-panelbar-item-selected-text: k-color(on-app-surface) !default;
 /// The border color of the selected PanelBar items.
 /// @group panelbar
 $kendo-panelbar-item-selected-border: inherit !default;