@progress/kendo-theme-fluent 7.1.0-dev.7 → 7.1.0-dev.9

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "7.1.0-dev.7",
+    "version": "7.1.0-dev.9",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "7.1.0-dev.7",
+    "version": "7.1.0-dev.9",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "7.1.0-dev.7",
+  "version": "7.1.0-dev.9",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "2.1.0",
-    "@progress/kendo-theme-core": "7.1.0-dev.7",
-    "@progress/kendo-theme-utils": "7.1.0-dev.7"
+    "@progress/kendo-theme-core": "7.1.0-dev.9",
+    "@progress/kendo-theme-utils": "7.1.0-dev.9"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "4bacca4f18a86fbe5bd6cf1cbf192e82c5504709"
+  "gitHead": "4a6a0cb7085a4b032405585e25da25fd4383d7d7"
 }

package/scss/action-sheet/_variables.scss

@@ -114,7 +114,7 @@ $kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
-$kendo-actionsheet-item-icon-color: k-get-theme-color-var( primary-110 ) !default;
+$kendo-actionsheet-item-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet

package/scss/adaptive/_variables.scss

@@ -9,10 +9,10 @@ $kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
 $kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
 
-$kendo-adaptive-menu-bg: k-get-theme-color-var( primary-100 ) !default;
-$kendo-adaptive-menu-text: $kendo-color-white !default;
+$kendo-adaptive-menu-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-adaptive-menu-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
-$kendo-adaptive-menu-clear-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-menu-clear-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 $kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
 $kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
@@ -24,10 +24,10 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-grid-sort-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-adaptive-scheduler-current-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/appbar/_variables.scss

@@ -38,7 +38,7 @@ $kendo-appbar-spacing: map.get( $kendo-spacing, 2 ) !default;
 $kendo-appbar-text: var( --kendo-component-text, initial ) !default;
 /// The background color of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-appbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The border color of the AppBar.
 /// @group appbar
 $kendo-appbar-border: var( --kendo-component-border, initial ) !default;
@@ -50,25 +50,25 @@ $kendo-appbar-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrix with appbar theme colors in the order: bg, color, border
 $_tc-appbar-matrix: (
-    (normal: (100, $kendo-color-white, 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
 ) !default;
 
 $_tc-appbar-warning-matrix: (
-    (normal: (100, k-get-theme-color-var( neutral-160 ), 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))),
 ) !default;
 
 $_tc-appbar-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-appbar-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// The theme colors map for the AppBar variations.
@@ -94,13 +94,13 @@ $kendo-appbar-theme-colors: () !default;
 @each $ui-states in $_tc-appbar-dark-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-appbar-light-matrix {
     $kendo-appbar-theme-colors: map.deep-merge(
         $kendo-appbar-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/avatar/_variables.scss

@@ -30,44 +30,44 @@ $kendo-avatar-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrices with Avatar theme colors in the order: bg, color, border
 $_tc-avatar-matrix: (
     solid: (
-        normal: (100, $kendo-color-white, 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-avatar-warning-matrix: (
     solid: (
-        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-avatar-dark-matrix: (
     solid: (
-        normal: (160, $kendo-color-white, 160)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
     ),
     outline: (
-        normal: ($kendo-color-white, 160, 160)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 160, 160))
     )
 ) !default;
 
 $_tc-avatar-light-matrix: (
     solid: (
-        normal: (50, $kendo-color-white, 50)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50))
     ),
     outline: (
-        normal: ($kendo-color-white, 50, 50)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 50, 50))
     )
 ) !default;
 
@@ -94,13 +94,13 @@ $kendo-avatar-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
     $kendo-avatar-theme-colors: map.deep-merge(
         $kendo-avatar-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/badge/_variables.scss

@@ -104,44 +104,44 @@ $kendo-badge-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrices with Badge theme colors in the order: bg, color, border
 $_tc-badge-matrix: (
     solid: (
-        normal: (100, $kendo-color-white, 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-badge-warning-matrix: (
     solid: (
-        normal: (100, k-get-theme-color-var( neutral-160 ), 100)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
     ),
     outline: (
-        normal: ($kendo-color-white, 100, 100)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
 $_tc-badge-dark-matrix: (
     solid: (
-        normal: (160, $kendo-color-white, 160)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
     ),
     outline: (
-        normal: ($kendo-color-white, 160, 160)
+        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 160, 160))
     )
 ) !default;
 
 $_tc-badge-light-matrix: (
     solid: (
-        normal: (50, 160, 50)
+        normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))
     ),
     outline: (
-        normal: ($kendo-color-white, 50, 50)
+        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 50, 50))
     )
 ) !default;
 
@@ -168,13 +168,13 @@ $kendo-badge-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-badge-dark-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-badge-light-matrix {
     $kendo-badge-theme-colors: map.deep-merge(
         $kendo-badge-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/bottom-navigation/_variables.scss

@@ -69,68 +69,68 @@ $kendo-bottom-nav-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: neutral,
+    secondary: if($kendo-enable-color-system, secondary, neutral),
     tertiary: tertiary,
  ) !default;
 
 // Matrix with BottomNavigation theme colors in the order: bg, color, border
 $_tc-bottom-nav-matrix: (
     solid: (
-        normal: (100, $kendo-color-white, 100),
-        focus: (100, $kendo-color-white, 100, inherit),
-        active: (120, $kendo-color-white, 120),
-        disabled: ( inherit, 40, var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
+        focus: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
+        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, $kendo-color-white, 120)),
+        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), ( inherit, 40, var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 )),
-        focus: (inherit, 100, transparent, 100),
-        active: (inherit, 100, transparent),
-        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, rgba( k-color( border, true ), 0.16 )), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 ))),
+        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
+        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
+        disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     )
 ) !default;
 
 $_tc-bottom-nav-warning-matrix: (
     solid: (
-        normal: (100, k-get-theme-color-var( neutral-160 ), 100),
-        focus: (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white),
-        active: (120, k-get-theme-color-var( neutral-190 ), 120),
-        disabled: (inherit, k-get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100)),
+        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white)),
+        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, k-get-theme-color-var( neutral-190 ), 120)),
+        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, k-get-theme-color-var( neutral-120 ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100),
-        focus: (inherit, 100, transparent, 100),
-        active: (inherit, 100, transparent),
-        disabled: (initial, var( --kendo-disabled-text, inherit ), initial)
+        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100)),
+        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
+        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
+        disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     )
 ) !default;
 
 $_tc-bottom-nav-dark-matrix: (
     solid: (
-        normal: (160, $kendo-color-white, 160),
-        focus: (160, $kendo-color-white, 160, $kendo-color-white),
-        active: (180, $kendo-color-white, 180),
-        disabled: (inherit, 60 , var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
+        focus: if($kendo-enable-color-system, (color, on-color, color, on-color), (160, $kendo-color-white, 160, $kendo-color-white)),
+        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (180, $kendo-color-white, 180)),
+        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, 60 , var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 )),
-        focus: (inherit, 160, transparent, 130),
-        active: (inherit, 170, transparent),
-        disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
+        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 ))),
+        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 160, transparent, 130)),
+        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 170, transparent)),
+        disabled: if($kendo-enable-color-system, (inherit, rgba( k-color( on-app-surface, true ), .46 ), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
     )
 ) !default;
 
 $_tc-bottom-nav-light-matrix: (
     solid: (
-        normal: (50, k-get-theme-color-var( neutral-160 ), 50),
-        focus: (50, 190, 50, $kendo-color-white),
-        active: (70, 190, 70),
-        disabled: (inherit, 120 , var( --kendo-disabled-border, inherit ))
+        normal: if($kendo-enable-color-system, (color, on-color, color), (50, k-get-theme-color-var( neutral-160 ), 50)),
+        focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (50, 190, 50, $kendo-color-white)),
+        active: if($kendo-enable-color-system, (color-active, on-color, color-active), (70, 190, 70)),
+        disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), (inherit, 120 , var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent),
-        focus: (inherit, 130, transparent, 130),
-        active: (inherit, 130, transparent),
-        disabled: (inherit, var( --kendo-disabled-text, inherit ), initial)
+        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, transparent), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent)),
+        focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 130, transparent, 130)),
+        active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 130, transparent)),
+        disabled: if($kendo-enable-color-system, (inherit, rgba( k-color( on-app-surface, true ), .46 ), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
     )
 ) !default;
 
@@ -157,13 +157,13 @@ $kendo-bottom-nav-theme-colors: () !default;
 @each $fill-mode, $ui-states in $_tc-bottom-nav-dark-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $fill-mode, $ui-states in $_tc-bottom-nav-light-matrix {
     $kendo-bottom-nav-theme-colors: map.deep-merge(
         $kendo-bottom-nav-theme-colors,
-        k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/breadcrumb/_variables.scss

@@ -60,7 +60,7 @@ $kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
 $kendo-breadcrumb-border: transparent !default;
 /// The box shadow of the focused breadcrumb
 /// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The horizontal padding of the Breadcrumb link
 /// @group breadcrumb
@@ -108,7 +108,7 @@ $kendo-breadcrumb-link-border: transparent !default;
 $kendo-breadcrumb-link-hover-bg: var( --kendo-hover-bg, initial ) !default;
 /// The text color of the hovered breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-breadcrumb-link-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The border color of the hovered breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: var( --kendo-hover-border, initial ) !default;
@@ -120,13 +120,13 @@ $kendo-breadcrumb-link-active-bg: var( --kendo-selected-bg, initial ) !default;
 $kendo-breadcrumb-link-active-text: var( --kendo-selected-text, initial ) !default;
 /// The border color of the active breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-active-border: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-breadcrumb-link-active-border: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) !default;
 /// The background color of the focused breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: transparent !default;
 /// The text color of the focused breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: k-get-theme-color-var( neutral-190 ) !default;
+$kendo-breadcrumb-link-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
 /// The box shadow of the focused breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
@@ -147,7 +147,7 @@ $kendo-breadcrumb-link-disabled-border: none !default;
 $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the selected breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-link-selected-text: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-breadcrumb-link-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The border color of the selected breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-border: transparent !default;