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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0",
+    "version": "11.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",
@@ -13,16 +13,5 @@
         "#424242"
     ],
     "components": [],
-    "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        }
-    ]
+    "groups": []
 }

package/lib/swatches/fluent-main-dark.json

@@ -3,8 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0",
-    "api": "modern",
+    "version": "11.0.0-dev.0",
     "previewColors": [
         "#1b1a19",
         "#21201f",
@@ -14,16 +13,6 @@
     ],
     "components": [],
     "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        },
         {
             "name": "New theme colors",
             "colorsMap": {

package/lib/swatches/fluent-main.json

@@ -3,8 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.6.0",
-    "api": "modern",
+    "version": "11.0.0-dev.0",
     "previewColors": [
         "#ffffff",
         "#faf9f8",
@@ -13,16 +12,5 @@
         "#323130"
     ],
     "components": [],
-    "groups": [
-        {
-            "name": "New color system",
-            "colorSystem": {
-                "kendo-enable-color-system": {
-                    "name": "New color system",
-                    "type": "boolean",
-                    "value": true
-                }
-            }
-        }
-    ]
+    "groups": []
 }

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": "10.6.0",
+  "version": "11.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "10.6.0",
-    "@progress/kendo-theme-utils": "10.6.0"
+    "@progress/kendo-theme-core": "11.0.0-dev.0",
+    "@progress/kendo-theme-utils": "11.0.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "61de20186b040b6e1ac5affab2bac1ef961b6a52"
+  "gitHead": "b83fa9575266e751edf9317822154d05a4fc566a"
 }

package/scss/action-sheet/_variables.scss

@@ -39,13 +39,13 @@ $kendo-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
 
 /// Background color of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-actionsheet-bg: k-color(surface-alt) !default;
 /// Text color of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
+$kendo-actionsheet-text: k-color(on-app-surface) !default;
 /// Border color of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
+$kendo-actionsheet-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// Box shadow of the action sheet.
 /// @group action-sheet
 $kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-7, none ) !default;
@@ -81,7 +81,7 @@ $kendo-actionsheet-header-bg: inherit !default;
 $kendo-actionsheet-header-text: inherit !default;
 /// Border color of the action sheet header.
 /// @group action-sheet
-$kendo-actionsheet-header-border: var( --kendo-component-border, initial ) !default;
+$kendo-actionsheet-header-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// Box shadow of the action sheet header.
 /// @group action-sheet
 $kendo-actionsheet-header-shadow: none !default;
@@ -94,7 +94,7 @@ $kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !def
 $kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, inherit ) !default;
 /// Text color of the action sheet subtitle.
 /// @group action-sheet
-$kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-actionsheet-subtitle-text: k-color(subtle) !default;
 
 /// Border width of the action sheet footer.
 /// @group action-sheet
@@ -108,7 +108,7 @@ $kendo-actionsheet-footer-bg: null !default;
 $kendo-actionsheet-footer-text: null !default;
 /// Border color of the action sheet footer.
 /// @group action-sheet
-$kendo-actionsheet-footer-border: var( --kendo-component-border, initial ) !default;
+$kendo-actionsheet-footer-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// Box shadow of the action sheet footer.
 /// @group action-sheet
 $kendo-actionsheet-footer-shadow: null !default;
@@ -131,7 +131,7 @@ $kendo-actionsheet-item-spacing: k-spacing(2) !default;
 
 /// Color of the action sheet item icon.
 /// @group action-sheet
-$kendo-actionsheet-item-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-actionsheet-item-icon-color: k-color(primary) !default;
 
 /// Font weight of the action sheet item text.
 /// @group action-sheet
@@ -145,14 +145,14 @@ $kendo-actionsheet-item-title-text-transform: none !default;
 $kendo-actionsheet-item-description-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Color of the action sheet item description.
 /// @group action-sheet
-$kendo-actionsheet-item-description-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-actionsheet-item-description-text: k-color(subtle) !default;
 
 /// Hover background color of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-actionsheet-item-hover-bg: k-color(base-hover) !default;
 /// Hover text color of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-actionsheet-item-hover-text: k-color(on-base) !default;
 /// Hover border color of the action sheet item.
 /// @group action-sheet
 $kendo-actionsheet-item-hover-border: inherit !default;
@@ -188,10 +188,10 @@ $kendo-actionsheet-item-focus-hover-border: $kendo-actionsheet-item-hover-border
 $kendo-actionsheet-item-disabled-bg: $kendo-actionsheet-bg !default;
 /// Disabled text color of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+$kendo-actionsheet-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// Disabled border color of the action sheet item.
 /// @group action-sheet
-$kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit ) !default;
+$kendo-actionsheet-item-disabled-border: transparent !default;
 
 
 // Adaptive Actionsheet

package/scss/adaptive/_theme.scss

@@ -20,11 +20,11 @@
 
         .k-grid-mobile {
             .k-column-active + th.k-header {
-                border-left-color: var( --kendo-component-bg, inherit );
+                border-left-color: k-color(surface-alt);
             }
 
             .k-resize-handle-inner::before {
-                background-color: var( --kendo-component-bg, inherit );
+                background-color: k-color(surface-alt);
             }
         }
 
@@ -67,7 +67,7 @@
         .k-scheduler-edit-form {
             .k-item,
             .k-link {
-                color: var( --kendo-component-text, inherit );
+                color: k-color(on-app-surface);
             }
 
             .k-clear,

package/scss/adaptive/_variables.scss

@@ -2,20 +2,20 @@
 
 
 // Adaptive
-$kendo-adaptive-bg: var( --kendo-component-bg, inherit ) !default;
-$kendo-adaptive-text: var( --kendo-component-text, inherit ) !default;
-$kendo-adaptive-border: var( --kendo-component-border, inherit ) !default;
+$kendo-adaptive-bg: k-color(surface-alt) !default;
+$kendo-adaptive-text: k-color(on-app-surface) !default;
+$kendo-adaptive-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
-$kendo-adaptive-content-bg: var( --kendo-component-bg, inherit ) !default;
-$kendo-adaptive-content-text: var( --kendo-component-text, inherit ) !default;
+$kendo-adaptive-content-bg: k-color(surface-alt) !default;
+$kendo-adaptive-content-text: k-color(on-app-surface) !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-bg: k-color(primary) !default;
+$kendo-adaptive-menu-text: k-color(app-surface) !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-clear-text: k-color(primary) !default;
 
-$kendo-adaptive-menu-item-border: var( --kendo-component-border, inherit ) !default;
-$kendo-adaptive-menu-title-text: var( --kendo-component-text, inherit ) !default;
+$kendo-adaptive-menu-item-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 
 $kendo-adaptive-border-width: 1px !default;
 $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
@@ -24,10 +24,10 @@ $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
-$kendo-adaptive-grid-sort-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-adaptive-grid-sort-text: k-color(primary) !default;
 
 
 // Adaptive Scheduler
-$kendo-adaptive-scheduler-current-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-adaptive-scheduler-current-text: k-color(primary) !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
-$kendo-adaptive-scheduler-subtle-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-adaptive-scheduler-subtle-text: k-color(subtle) !default;

package/scss/appbar/_variables.scss

@@ -35,13 +35,13 @@ $kendo-appbar-spacing: k-spacing(2) !default;
 
 /// The text color of the AppBar.
 /// @group appbar
-$kendo-appbar-text: var( --kendo-component-text, initial ) !default;
+$kendo-appbar-text: k-color(on-app-surface) !default;
 /// The background color of the AppBar.
 /// @group appbar
-$kendo-appbar-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-appbar-bg: k-color(surface) !default;
 /// The border color of the AppBar.
 /// @group appbar
-$kendo-appbar-border: var( --kendo-component-border, initial ) !default;
+$kendo-appbar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The theme variations for the AppBar.
 /// @group appbar
@@ -50,25 +50,25 @@ $kendo-appbar-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
  ) !default;
 
 // Matrix with appbar theme colors in the order: bg, color, border
 $_tc-appbar-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-appbar-warning-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-appbar-dark-matrix: (
-    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
+    (normal: (color, on-color, color)),
 ) !default;
 
 $_tc-appbar-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 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, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-theme-variation( dark, dark, $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, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-theme-variation( light, light, $ui-states )
     );
 }

package/scss/avatar/_variables.scss

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

package/scss/badge/_layout.scss

@@ -149,7 +149,7 @@
 
     // Border cutout
     .k-badge-border-cutout {
-        box-shadow: 0 0 0 2px var( --kendo-component-bg, inherit );
+        box-shadow: 0 0 0 2px k-color(surface-alt);
     }
 
 }

package/scss/badge/_variables.scss

@@ -3,13 +3,13 @@
 
 /// The background color of the Badge.
 /// @group badge
-$kendo-badge-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-badge-bg: k-color(surface-alt) !default;
 /// The text color of the Badge.
 /// @group badge
-$kendo-badge-text: var( --kendo-component-text, initial ) !default;
+$kendo-badge-text: k-color(on-app-surface) !default;
 /// The border color of the Badge.
 /// @group badge
-$kendo-badge-border: var( --kendo-component-border, initial ) !default;
+$kendo-badge-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The border width of the Badge.
 /// @group badge
@@ -104,44 +104,44 @@ $kendo-badge-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
  ) !default;
 
 // Matrices with Badge theme colors in the order: bg, color, border
 $_tc-badge-matrix: (
     solid: (
-        normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
+        normal: (color, on-color, color)
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
+        normal: (transparent, color, color)
     )
 ) !default;
 
 $_tc-badge-warning-matrix: (
     solid: (
-        normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
+        normal: (color, on-color, color)
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
+        normal: (transparent, color, color)
     )
 ) !default;
 
 $_tc-badge-dark-matrix: (
     solid: (
-        normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
+        normal: (color, on-color, color)
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 160, 160))
+        normal: (transparent, color, color)
     )
 ) !default;
 
 $_tc-badge-light-matrix: (
     solid: (
-        normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))
+        normal: (color, on-color, color)
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 50, 50))
+        normal: (transparent, color, color)
     )
 ) !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, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $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, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
     );
 }

package/scss/bottom-navigation/_variables.scss

@@ -69,68 +69,68 @@ $kendo-bottom-nav-brand-colors: (
     error: error,
     success: success,
     info: info,
-    secondary: if($kendo-enable-color-system, secondary, neutral),
+    secondary: secondary,
     tertiary: tertiary,
  ) !default;
 
 // Matrix with BottomNavigation theme colors in the order: bg, color, border
 $_tc-bottom-nav-matrix: (
     solid: (
-        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 )))
+        normal: (color, on-color, color),
+        focus: (color, on-color, color, inherit),
+        active: (color-active, on-color, color-active),
+        disabled: (inherit, on-color-disabled, transparent)
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color-mix(in srgb, k-color( border ) 16%, transparent)), ($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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
+        normal: (app-surface, on-app-surface, color-mix(in srgb, k-color(border) 16%, transparent)),
+        focus: (inherit, color, transparent, color),
+        active: (inherit, color, transparent),
+        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
     )
 ) !default;
 
 $_tc-bottom-nav-warning-matrix: (
     solid: (
-        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 )))
+        normal: (color, on-color, color),
+        focus: (color, on-color, color, app-surface),
+        active: (color-active, on-color, color-active),
+        disabled: (inherit, on-color-disabled, transparent),
     ),
     flat: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
+        normal: (app-surface, on-app-surface, color),
+        focus: (inherit, color, transparent, color),
+        active: (inherit, color, transparent),
+        disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
     )
 ) !default;
 
 $_tc-bottom-nav-dark-matrix: (
     solid: (
-        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 )))
+        normal: (color, on-color, color),
+        focus: (color, on-color, color, on-color),
+        active: (color-active, on-color, color-active),
+        disabled: (inherit, on-color-disabled, transparent)
     ),
     flat: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
+        normal: (app-surface, on-app-surface, color),
+        focus: (inherit, color, transparent, color),
+        active: (inherit, color, transparent),
+        disabled: (inherit, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
     )
 ) !default;
 
 $_tc-bottom-nav-light-matrix: (
     solid: (
-        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 )))
+        normal: (color, on-color, color),
+        focus: (color, on-color, color, app-surface),
+        active: (color-active, on-color, color-active),
+        disabled: (inherit, on-color-disabled, transparent),
     ),
     flat: (
-        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, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
+        normal: (app-surface, on-app-surface, transparent),
+        focus: (inherit, color, transparent, color),
+        active: (inherit, color, transparent),
+        disabled: (inherit, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), 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, if($kendo-enable-color-system, dark, neutral), $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $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, if($kendo-enable-color-system, light, neutral), $ui-states )
+        k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
     );
 }