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

package/scss/calendar/_variables.scss

@@ -20,13 +20,13 @@ $kendo-calendar-cell-size: 28px !default;
 
 /// The background color of the Calendar.
 /// @group calendar
-$kendo-calendar-bg: var( --kendo-component-bg, initial) !default;
+$kendo-calendar-bg: k-color(surface-alt) !default;
 /// The text color of the Calendar.
 /// @group calendar
-$kendo-calendar-text: var( --kendo-component-text, initial) !default;
+$kendo-calendar-text: k-color(on-app-surface) !default;
 /// The border color of the Calendar.
 /// @group calendar
-$kendo-calendar-border: var( --kendo-component-border, initial) !default;
+$kendo-calendar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The horizontal padding of the calendar header.
 /// @group calendar
@@ -41,7 +41,7 @@ $kendo-calendar-header-min-width: ($kendo-calendar-cell-size * 8) !default;
 
 /// The background color of the calendar header.
 /// @group calendar
-$kendo-calendar-header-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default; // $kendo-component-header-bg
+$kendo-calendar-header-bg: k-color(surface) !default; // $kendo-component-header-bg
 /// The text color of the calendar header.
 /// @group calendar
 $kendo-calendar-header-text: $kendo-calendar-text !default; // $kendo-component-header-text
@@ -121,7 +121,7 @@ $kendo-calendar-caption-line-height: normal !default;
 $kendo-calendar-caption-font-weight: bold !default;
 /// The text color of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-color: $kendo-subtle-text !default;
+$kendo-calendar-caption-color: k-color(subtle) !default;
 
 /// The width of the Calendar view.
 /// @group calendar
@@ -146,16 +146,16 @@ $kendo-calendar-weekend-text: inherit !default;
 
 /// The text color of the calendar today cell.
 /// @group calendar
-$kendo-calendar-today-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default; // use contrast function
+$kendo-calendar-today-text: k-color(app-surface) !default; // use contrast function
 /// The background color of the calendar today cell.
 /// @group calendar
-$kendo-calendar-today-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-calendar-today-bg: k-color(primary) !default;
 /// The text color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;  // use contrast function
+$kendo-calendar-today-hover-text: k-color(app-surface) !default;  // use contrast function
 /// The background color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-calendar-today-hover-bg: k-color(primary-hover) !default;
 /// The border radius of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-border-radius: 9999px !default;
@@ -165,14 +165,14 @@ $kendo-calendar-today-border-radius: 9999px !default;
 $kendo-calendar-week-number-bg: inherit !default;
 /// The text color of the calendar week number cell.
 /// @group calendar
-$kendo-calendar-week-number-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-calendar-week-number-text: k-color(subtle) !default;
 
 /// The background color of the other months calendar cells.
 /// @group calendar
 $kendo-calendar-other-month-bg: inherit !default;
 /// The text color of the other months calendar cells.
 /// @group calendar
-$kendo-calendar-other-month-text: var( --kendo-disabled-text, inherit ) !default;
+$kendo-calendar-other-month-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 
 /// The background color of the calendar cells.
 /// @group calendar
@@ -183,34 +183,34 @@ $kendo-calendar-cell-text: inherit !default;
 
 /// The background color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-calendar-cell-hover-bg: k-color(base-hover) !default;
 /// The text color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-calendar-cell-hover-text: k-color(on-base) !default;
 
 /// The background color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+$kendo-calendar-cell-selected-bg: k-color(base-active) !default;
 /// The text color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-text: var( --kendo-selected-text, inherit ) !default;
+$kendo-calendar-cell-selected-text: k-color(on-base) !default;
 /// The border color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-border: var( --kendo-selected-border, inherit ) !default;
+$kendo-calendar-cell-selected-border: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
 /// The shadow of the selected calendar cell.
 /// @group calendar
 $kendo-calendar-cell-selected-shadow: inset 0 0 0 1px $kendo-calendar-cell-selected-border !default;
 
 /// The background color of the selected calendar cell when hovered.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;
+$kendo-calendar-cell-selected-hover-bg: k-color(base-subtle-active) !default;
 /// The text color of the selected calendar cell when hovered.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-text: var( --kendo-selected-hover-text, inherit ) !default;
+$kendo-calendar-cell-selected-hover-text: k-color(on-base) !default;
 
 /// The shadow of the selected calendar cell when focused.
 /// @group calendar
-$kendo-calendar-cell-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
+$kendo-calendar-cell-focus-shadow: inset 0 0 0 1px k-color(base-emphasis) !default;
 /// The shadow of the selected calendar cell when selected and focused.
 /// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-focus-shadow !default;
@@ -227,7 +227,7 @@ $kendo-calendar-navigation-item-height: 2em !default;
 
 /// The background color of the navigation in the infinite Calendar.
 /// @group calendar
-$kendo-calendar-navigation-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-calendar-navigation-bg: k-color(surface) !default;
 /// The text color of the navigation in the infinite Calendar.
 /// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
@@ -237,7 +237,7 @@ $kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
 
 /// The text color of the hovered items in the calendar navigation.
 /// @group calendar
-$kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
+$kendo-calendar-navigation-hover-text: k-color(primary-hover) !default;
 
 
 // Infinite calendar
@@ -264,25 +264,25 @@ $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default
 // Range calendar
 /// The background color of the range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-range-bg: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-calendar-range-bg: k-color(base-active) !default;
 /// The text color of the range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-range-text: inherit !default;
 /// The border color of the range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-range-border: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-calendar-range-border: k-color(base-emphasis) !default;
 /// The shadow of the hovered start range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-start-range-hover-shadow: inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-calendar-start-range-hover-shadow: inset 1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) !default;
 /// The shadow of the hovered mid range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) !default;
 /// The shadow of the hovered end range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) !default;
 /// The shadow of the hovered start-end range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-start-end-range-hover-shadow: inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-calendar-start-end-range-hover-shadow: inset 1px -1px 0 0 k-color(base-emphasis), inset -1px 1px 0 0 k-color(base-emphasis) !default;
 
 
 // Calendar sizes

package/scss/captcha/_variables.scss

@@ -23,13 +23,13 @@ $kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-captcha-spacing: $kendo-captcha-spacer !default;
 /// The background color of the Captcha.
 /// @group captcha
-$kendo-captcha-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-captcha-bg: k-color(surface-alt) !default;
 /// The text color of the Captcha.
 /// @group captcha
-$kendo-captcha-text: var( --kendo-component-text, initial ) !default;
+$kendo-captcha-text: k-color(on-app-surface) !default;
 /// The border color of the Captcha.
 /// @group captcha
-$kendo-captcha-border: var( --kendo-component-border, initial ) !default;
+$kendo-captcha-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The spacing of the Captcha image wrapper.
 /// @group captcha

package/scss/card/_layout.scss

@@ -174,7 +174,6 @@
     .k-card > .k-hr {
         margin: 0;
         flex: 0 0 auto;
-        border-color: inherit;
     }
 
     // Card actions

package/scss/card/_theme.scss

@@ -33,6 +33,10 @@
         &.k-selected {
             --INTERNAL--kendo-card-shadow: var( --kendo-card-focus-shadow, #{$kendo-card-focus-shadow} );
         }
+
+        .k-hr {
+            border-color: var( --kendo-card-border, #{$kendo-card-border} );
+        }
     }
 
 

package/scss/card/_variables.scss

@@ -33,13 +33,13 @@ $kendo-card-deck-gap: k-spacing(4) !default;
 
 /// The background color of the Card.
 /// @group card
-$kendo-card-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-card-bg: k-color(surface-alt) !default;
 /// The text color of the Card.
 /// @group card
-$kendo-card-text: var( --kendo-component-text, initial ) !default;
+$kendo-card-text: k-color(on-app-surface) !default;
 /// The border color of the Card.
 /// @group card
-$kendo-card-border: var( --kendo-component-border, initial ) !default;
+$kendo-card-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The shadow of the Card.
 /// @group card
 $kendo-card-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
@@ -52,7 +52,7 @@ $kendo-card-focus-bg: $kendo-card-bg !default;
 $kendo-card-focus-text: null !default;
 /// The border color of the focused Card.
 /// @group card
-$kendo-card-focus-border: var( --kendo-component-border, initial ) !default;
+$kendo-card-focus-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 /// The shadow of the focused Card.
 /// @group card
 $kendo-card-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -83,7 +83,7 @@ $kendo-card-header-border-width: 0 !default;
 $kendo-card-header-bg: inherit !default;
 /// The text color of the Card header.
 /// @group card
-$kendo-card-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default; // header-text
+$kendo-card-header-text: k-color(on-app-surface) !default; // header-text
 /// The border color of the Card header.
 /// @group card
 $kendo-card-header-border: inherit !default; // header-border
@@ -143,7 +143,7 @@ $kendo-card-subtitle-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-card-subtitle-margin-bottom: k-spacing(3) !default;
 /// The text color of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-text: $kendo-subtle-text !default;
+$kendo-card-subtitle-text: k-color(subtle) !default;
 
 /// The maximum width of the Card image.
 /// @group card
@@ -184,7 +184,7 @@ $kendo-card-brand-colors: ( primary, error, warning, success, info ) !default;
 
 // Matrix with card theme colors in the order: bg, color, border
 $_tc-card-matrix: (
-    (normal: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-subtle), (20, 160, 20))),
+    (normal: (color-subtle, color-on-subtle, color-subtle)),
 ) !default;
 
 /// Theme colors map for the card variations.

package/scss/chart-wizard/_variables.scss

@@ -5,10 +5,10 @@
 
 /// The color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chart-wizard-icon-area-color: k-color(primary) !default;
 /// The background color of the area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default;
+$kendo-chart-wizard-icon-area-bg: k-color(primary-subtle) !default;
 /// The border radius of the area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !default;
@@ -17,14 +17,14 @@ $kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !default;
 $kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
 /// The box shadow of the focused area around the chart type icon.
 /// @group chart-wizard
-$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 )) !default;
+$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px k-color(primary-emphasis) !default;
 /// The box shadow of the selected area around the chart type icon.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default;
 
 /// The color of the selected chart type items in the Property panel.
 /// @group chart-wizard
-$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chart-wizard-chart-type-selected-color: k-color(primary) !default;
 
 /// The padding of the preview pane.
 /// @group chart-wizard

package/scss/chat/_variables.scss

@@ -9,10 +9,10 @@
 $kendo-chat-transition: var( --kendo-transition, inherit ) !default;
 /// The hover text color of the Chat bubble links.
 /// @group chat
-$kendo-chat-link-hover-text: var( --kendo-link-hover-text, inherit ) !default;
+$kendo-chat-link-hover-text: k-color(primary-hover) !default;
 /// The text color of the Chat bubble links.
 /// @group chat
-$kendo-chat-link-text: var( --kendo-link-text, inherit ) !default;
+$kendo-chat-link-text: k-color(primary) !default;
 /// The horizontal padding of the Chat.
 /// @group chat
 $kendo-chat-padding-x: k-spacing(4) !default;
@@ -73,7 +73,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !defaul
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: var( --kendo-subtle-text, inherit ) !default;
+$kendo-chat-timestamp-text: k-color(subtle) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: normal !default;
@@ -160,20 +160,20 @@ $kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
 
 /// The background color of the Chat.
 /// @group chat
-$kendo-chat-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+$kendo-chat-bg: k-color(surface) !default;
 /// The text color of the Chat.
 /// @group chat
-$kendo-chat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-chat-text: k-color(on-app-surface) !default;
 /// The border color of the Chat.
 /// @group chat
-$kendo-chat-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
+$kendo-chat-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The background color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-chat-bubble-bg: k-color(surface-alt) !default;
 /// The text color of the Chat bubble.
 /// @group chat
-$kendo-chat-bubble-text: var( --kendo-component-text, inherit ) !default;
+$kendo-chat-bubble-text: k-color(on-app-surface) !default;
 /// The border color of the Chat bubble.
 /// @group chat
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
@@ -189,10 +189,10 @@ $kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !def
 
 /// The background color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chat-alt-bubble-bg: k-color(primary) !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: var( --kendo-component-bg, inherit ) !default;
+$kendo-chat-alt-bubble-text: k-color(surface-alt) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -211,20 +211,20 @@ $kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none )
 $kendo-chat-quick-reply-bg: transparent !default;
 /// The text color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chat-quick-reply-text: k-color(primary) !default;
 /// The border color of the Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chat-quick-reply-border: k-color(primary) !default;
 
 /// The background color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chat-quick-reply-hover-bg: k-color(primary) !default;
 /// The text color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-text: var( --kendo-component-bg, inherit ) !default;
+$kendo-chat-quick-reply-hover-text: k-color(surface-alt) !default;
 /// The border color of the hovered Chat quick reply.
 /// @group chat
-$kendo-chat-quick-reply-hover-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-chat-quick-reply-hover-border: k-color(primary) !default;
 
 /// The offset of the focused Chat quick reply.
 /// @group chat

package/scss/checkbox/_variables.scss

@@ -40,40 +40,40 @@ $kendo-checkbox-sizes: (
 
 /// The background color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-bg: $kendo-component-bg !default;
+$kendo-checkbox-bg: k-color(surface-alt) !default;
 /// The text color of the CheckBox.
 /// @group checkbox
 $kendo-checkbox-text: transparent !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-checkbox-border: k-color(border-alt) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color( neutral, 130 )) !default;
+$kendo-checkbox-hover-text: k-color(on-app-surface) !default;
 /// The border color of the hovered CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-checkbox-checked-bg: k-color(primary) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-checkbox-checked-text: k-color(app-surface) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// The background of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-checkbox-hover-checked-bg: k-color(primary-hover) !default;
 /// The text color of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-checkbox-hover-checked-text: k-color(app-surface) !default;
 /// The border color of the hovered and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;
@@ -86,7 +86,7 @@ $kendo-checkbox-focus-border: null !default;
 $kendo-checkbox-focus-shadow: null !default;
 /// The outline of the focused CheckBox.
 /// @group checkbox
-$kendo-checkbox-focus-outline: 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-checkbox-focus-outline: 1px solid k-color(base-emphasis) !default;
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
 /// The background color of the indeterminate CheckBox.
@@ -94,60 +94,60 @@ $kendo-checkbox-focus-outline-offset: 2px !default;
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color( primary, 100 )) !default;
+$kendo-checkbox-indeterminate-text: k-color(primary) !default;
 /// The border color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-checkbox-indeterminate-border: k-color(primary) !default;
 
 /// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color( primary, 110 )) !default;
+$kendo-checkbox-hover-indeterminate-text: k-color(primary-hover) !default;
 /// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-border: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-checkbox-hover-indeterminate-border: k-color(primary-hover) !default;
 
 /// The background color of the disabled CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
 /// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-checkbox-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-checkbox-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-checkbox-disabled-checked-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-checkbox-disabled-checked-text: k-color(app-surface) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-border: if($kendo-enable-color-system, transparent, k-get-theme-color-var( neutral-60 )) !default;
+$kendo-checkbox-disabled-checked-border: transparent !default;
 
 /// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 )) !default;
+$kendo-checkbox-disabled-indeterminate-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-checkbox-disabled-indeterminate-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The background color of an invalid CheckBox.
 /// @group checkbox
 $kendo-checkbox-invalid-bg: $kendo-checkbox-bg !default;
 /// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+$kendo-checkbox-invalid-text: k-color(error-on-surface) !default;
 /// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+$kendo-checkbox-invalid-border: k-color(error-emphasis) !default;
 
 
 // Checkbox indicator
@@ -213,7 +213,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-checkbox-ripple-bg: k-color(primary) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;