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

package/scss/stepper/_theme.scss

@@ -34,7 +34,7 @@
             .k-step-link:focus  {
                 // Labels only
                 .k-step-label:only-child {
-                    @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) var( --kendo-component-border, initial ) );
+                    @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) color-mix(in srgb, k-color( border ) 16%, transparent) );
                 }
             }
 
@@ -42,22 +42,14 @@
             &:disabled,
             &.k-disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
-                            k-color( app-surface ),
-                            var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
-                        );
-
-                        &::before {
-                            background-color: var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} );
-                        }
-                    } @else {
-                        @include fill(
-                            var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
-                            var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} ),
-                            var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
-                        );
+                    @include fill(
+                        var( --kendo-stepper-indicator-disabled-text, #{$kendo-stepper-indicator-disabled-text} ),
+                        k-color( app-surface ),
+                        var( --kendo-stepper-indicator-disabled-border, #{$kendo-stepper-indicator-disabled-border} )
+                    );
+
+                    &::before {
+                        background-color: var( --kendo-stepper-indicator-disabled-bg, #{$kendo-stepper-indicator-disabled-bg} );
                     }
                 }
 
@@ -74,13 +66,13 @@
             );
         }
         .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) var( --kendo-component-bg, initial ) );
+            @include box-shadow( inset 0 0 0 var( --kendo-stepper-indicator-focus-size, #{$kendo-stepper-indicator-focus-size} ) k-color( surface-alt ) );
         }
         .k-step-label:only-child {
             @include fill(
-                var( --kendo-component-text, initial ),
-                var( --kendo-component-bg, transparent ),
-                var( --kendo-component-border, initial )
+                k-color( on-app-surface ),
+                k-color( surface-alt ),
+                color-mix(in srgb, k-color( border ) 16%, transparent)
             );
         }
 
@@ -116,22 +108,14 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
-                            k-color( app-surface ),
-                            var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
-                        );
-
-                        &::before {
-                            background-color: var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} );
-                        }
-                    } @else {
-                        @include fill(
-                            var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
-                            var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} ),
-                            var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
-                        );
+                    @include fill(
+                        var( --kendo-stepper-indicator-done-disabled-text, #{$kendo-stepper-indicator-done-disabled-text} ),
+                        k-color( app-surface ),
+                        var( --kendo-stepper-indicator-done-disabled-border, #{$kendo-stepper-indicator-done-disabled-border} )
+                    );
+
+                    &::before {
+                        background-color: var( --kendo-stepper-indicator-done-disabled-bg, #{$kendo-stepper-indicator-done-disabled-bg} );
                     }
                 }
 
@@ -173,22 +157,14 @@
             &.k-disabled,
             &:disabled {
                 .k-step-indicator {
-                    @if($kendo-enable-color-system) {
-                        @include fill(
-                            var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
-                            k-color( app-surface ),
-                            var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
-                        );
-
-                        &::before {
-                            background-color: var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} );
-                        }
-                    } @else {
-                        @include fill(
-                            var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
-                            var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} ),
-                            var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
-                        );
+                    @include fill(
+                        var( --kendo-stepper-indicator-current-disabled-text, #{$kendo-stepper-indicator-current-disabled-text} ),
+                        k-color( app-surface ),
+                        var( --kendo-stepper-indicator-current-disabled-border, #{$kendo-stepper-indicator-current-disabled-border} )
+                    );
+
+                    &::before {
+                        background-color: var( --kendo-stepper-indicator-current-disabled-bg, #{$kendo-stepper-indicator-current-disabled-bg} );
                     }
                 }
             }

package/scss/stepper/_variables.scss

@@ -19,7 +19,7 @@ $kendo-stepper-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-stepper-bg: transparent !default;
 /// The text color of the Stepper.
 /// @group stepper
-$kendo-stepper-text: var( --kendo-component-text, initial ) !default;
+$kendo-stepper-text: k-color(on-app-surface) !default;
 /// The border color of the Stepper.
 /// @group stepper
 $kendo-stepper-border: transparent !default;
@@ -72,47 +72,47 @@ $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-foc
 
 /// The background color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-stepper-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-text: var( --kendo-component-text, initial ) !default;
+$kendo-stepper-indicator-text: k-color(on-app-surface) !default;
 /// The border color of the Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-stepper-indicator-border: k-color(border) !default;
 
 /// The background color of the hovered Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-hover-bg: var( --kendo-hover-bg, initial ) !default;
+$kendo-stepper-indicator-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-hover-text: var( --kendo-hover-text, initial ) !default;
+$kendo-stepper-indicator-hover-text: k-color(on-base) !default;
 /// The border color of the hovered Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-border !default;
 
 /// The background color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+$kendo-stepper-indicator-disabled-bg: k-color(base-subtle) !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: var( --kendo-disabled-text, initial) !default;
+$kendo-stepper-indicator-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-border: var( --kendo-disabled-border, initial ) !default;
+$kendo-stepper-indicator-disabled-border: transparent !default;
 
 /// The background color of the Stepper's done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-stepper-indicator-done-bg: k-color(primary) !default;
 /// The text color of the Stepper's done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), $kendo-color-white) !default;
+$kendo-stepper-indicator-done-text: k-color(on-primary) !default;
 /// The border color of the Stepper's done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
 
 /// The background color of the Stepper's hovered done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-stepper-indicator-done-hover-bg: k-color(primary-hover) !default;
 /// The text color of the Stepper's hovered done indicator.
 /// @group stepper
 $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-text !default;
@@ -122,17 +122,17 @@ $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-
 
 /// The background color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 )) !default;
+$kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color(primary) 22%, transparent) !default;
 /// The text color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-stepper-indicator-done-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The border color of the Stepper's disabled done indicator.
 /// @group stepper
-$kendo-stepper-indicator-done-disabled-border: var( --kendo-disabled-border, initial ) !default;
+$kendo-stepper-indicator-done-disabled-border: transparent !default;
 
 /// The background color of the Stepper current indicator.
 /// @group stepper
-$kendo-stepper-indicator-current-bg: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
+$kendo-stepper-indicator-current-bg: k-color(primary-active) !default;
 /// The text color of the Stepper current indicator.
 /// @group stepper
 $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
@@ -165,23 +165,23 @@ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-
 $kendo-stepper-label-text: inherit !default;
 /// The success text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-success-text: if($kendo-enable-color-system, k-color( success-on-surface ), k-get-theme-color-var( success-190 )) !default;
+$kendo-stepper-label-success-text: k-color(success-on-surface) !default;
 /// The error text color of the Stepper label.
 /// @group stepper
-$kendo-stepper-label-error-text: if($kendo-enable-color-system, k-color( error-on-surface ), k-get-theme-color-var( error-190 )) !default;
+$kendo-stepper-label-error-text: k-color(error-on-surface) !default;
 /// The text color of the hovered Stepper label.
 /// @group stepper
 $kendo-stepper-label-hover-text: $kendo-stepper-text !default;
 /// The text color of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-label-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-stepper-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The font weight of the disabled Stepper label.
 /// @group stepper
 $kendo-stepper-current-label-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper
-$kendo-stepper-optional-label-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-stepper-optional-label-text: k-color(subtle) !default;
 /// The font size of the optional Stepper label.
 /// @group stepper
 $kendo-stepper-optional-label-font-size: inherit !default;

package/scss/switch/_variables.scss

@@ -30,122 +30,122 @@ $kendo-switch-sizes: (
 
 /// The ring around the focused Switch.
 /// @group switch
-$kendo-switch-focus-ring: 1px solid if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-switch-focus-ring: 1px solid k-color(base-emphasis) !default;
 
 /// The background of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-switch-off-track-bg: k-color(surface-alt) !default;
 /// The text color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-text: var( --kendo-component-text, inherit ) !default;
+$kendo-switch-off-track-text: k-color(on-app-surface) !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-switch-off-track-border: k-color(border) !default;
 
 /// The background of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-switch-off-track-hover-bg: k-color(surface-alt) !default;
 /// The text color of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-text: var( --kendo-component-text, inherit ) !default;
+$kendo-switch-off-track-hover-text: k-color(on-app-surface) !default;
 /// The border color of the track when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-switch-off-track-hover-border: k-color(border-alt) !default;
 
 /// The background of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-switch-off-track-focus-bg: k-color(surface-alt) !default;
 /// The text color of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-text: var( --kendo-component-text, inherit ) !default;
+$kendo-switch-off-track-focus-text: k-color(on-app-surface) !default;
 /// The border color of the track when the focused Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-focus-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-switch-off-track-focus-border: k-color(border) !default;
 
 /// The background of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-switch-off-track-disabled-bg: k-color(surface-alt) !default;
 /// The text color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-disabled-text: var( --kendo-component-text, inherit ) !default;
+$kendo-switch-off-track-disabled-text: k-color(on-app-surface) !default;
 /// The border color of the track when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-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-switch-off-track-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-switch-off-thumb-bg: k-color(subtle) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: inherit !default;
 /// The border color of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-130 )) !default;
+$kendo-switch-off-thumb-border: k-color(border) !default;
 
 /// The background of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-bg: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-switch-off-thumb-hover-bg: k-color(on-app-surface) !default;
 /// The text color of the thumb when the hovered Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-hover-text: inherit !default;
 /// The border color of the thumb when the hovered Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-get-theme-color-var( neutral-160 )) !default;
+$kendo-switch-off-thumb-hover-border: k-color(border-alt) !default;
 
 /// The background of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-disabled-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-switch-off-thumb-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The text color of the thumb when the disabled Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-disabled-text: inherit !default;
 /// The border color of the thumb when the disabled Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-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-switch-off-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 
 
 /// The background of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-switch-on-track-bg: k-color(primary) !default;
 /// The text color of the track when the Switch is checked.
 /// @group switch
-$kendo-switch-on-track-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-track-text: k-color(app-surface) !default;
 /// The border color of the track when the Switch is checked.
 /// @group switch
 $kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
 
 /// The background of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
+$kendo-switch-on-track-hover-bg: k-color(primary-hover) !default;
 /// The text color of the track when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-track-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-track-hover-text: k-color(app-surface) !default;
 /// The border color of the track when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-track-hover-border: $kendo-switch-on-track-hover-bg !default;
 
 /// The background of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-switch-on-track-focus-bg: k-color(primary) !default;
 /// The text color of the track when the focused Switch is checked.
 /// @group switch
-$kendo-switch-on-track-focus-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-track-focus-text: k-color(app-surface) !default;
 /// The border color of the track when the focused Switch is checked.
 /// @group switch
 $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-bg !default;
 
 /// The background of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-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-switch-on-track-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
 /// The text color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-track-disabled-text: k-color(app-surface) !default;
 /// The border color of the track when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-track-disabled-border: if($kendo-enable-color-system, transparent, $kendo-switch-on-track-disabled-bg) !default;
+$kendo-switch-on-track-disabled-border: transparent !default;
 
 /// The background of the thumb when the Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-thumb-bg: k-color(app-surface) !default;
 /// The text color of the thumb when the Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-text: inherit !default;
@@ -155,7 +155,7 @@ $kendo-switch-on-thumb-border: inherit !default;
 
 /// The background of the thumb when the hovered Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-hover-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
+$kendo-switch-on-thumb-hover-bg: k-color(app-surface) !default;
 /// The text color of the thumb when the hovered Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-hover-text: inherit !default;
@@ -165,10 +165,10 @@ $kendo-switch-on-thumb-hover-border: inherit !default;
 
 /// The background of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-switch-on-thumb-disabled-bg: k-color(surface) !default;
 /// The text color of the thumb when the disabled Switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-disabled-text: inherit !default;
 /// The border color of the thumb when the disabled Switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
+$kendo-switch-on-thumb-disabled-border: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;

package/scss/table/_theme.scss

@@ -98,24 +98,13 @@
     }
 
     // Selected state
-    @if($kendo-enable-color-system) {
-        .k-table-tbody .k-table-row.k-selected > .k-table-td,
-        .k-table-list .k-table-row.k-selected {
-            @include fill (
-                var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
-                var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
-                var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
-            );
-        }
-    } @else {
-        .k-table-tbody .k-table-row.k-selected,
-        .k-table-list .k-table-row.k-selected {
-            @include fill (
-                var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
-                var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
-                var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
-            );
-        }
+    .k-table-tbody .k-table-row.k-selected > .k-table-td,
+    .k-table-list .k-table-row.k-selected {
+        @include fill (
+            var( --kendo-table-selected-text, #{$kendo-table-selected-text} ),
+            var( --kendo-table-selected-bg, #{$kendo-table-selected-bg} ),
+            var( --kendo-table-selected-border, #{$kendo-table-selected-border} )
+        );
     }
 
 }

package/scss/table/_variables.scss

@@ -75,20 +75,20 @@ $kendo-table-sizes: (
 
 /// Background color of tables.
 /// @group table
-$kendo-table-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-table-bg: k-color(surface-alt) !default;
 /// Text color of tables.
 /// @group table
-$kendo-table-text: var( --kendo-component-text, initial ) !default;
+$kendo-table-text: k-color(on-app-surface) !default;
 /// Border color of tables.
 /// @group table
-$kendo-table-border: var( --kendo-component-border, initial ) !default;
+$kendo-table-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// Background color of table headers.
 /// @group table
 $kendo-table-header-bg: $kendo-table-bg !default;
 /// Text color of table headers.
 /// @group table
-$kendo-table-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-table-header-text: k-color(on-app-surface) !default;
 /// Border color of table headers.
 /// @group table
 $kendo-table-header-border: $kendo-table-border !default;
@@ -145,10 +145,10 @@ $kendo-table-alt-row-border: $kendo-table-border !default;
 
 /// Background color of hovered rows in table.
 /// @group table
-$kendo-table-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-table-hover-bg: k-color(base-hover) !default;
 /// Text color of hovered rows in table.
 /// @group table
-$kendo-table-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-table-hover-text: k-color(on-base) !default;
 /// Border color of hovered rows in table.
 /// @group table
 $kendo-table-hover-border: $kendo-table-border !default;
@@ -168,7 +168,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
 
 /// Background color of selected rows in table.
 /// @group table
-$kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) !default;
+$kendo-table-selected-bg: color-mix(in srgb, k-color(primary) 13%, transparent) !default;
 /// Text color of selected rows in table.
 /// @group table
 $kendo-table-selected-text: $kendo-table-text !default;
@@ -178,7 +178,7 @@ $kendo-table-selected-border: $kendo-table-border !default;
 
 /// Hover background color of selected rows in table.
 /// @group table
-$kendo-table-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) !default;
+$kendo-table-selected-hover-bg: color-mix(in srgb, k-color(primary) 26%, transparent) !default;
 /// Hover text color of selected rows in table.
 /// @group table
 $kendo-table-selected-hover-text: $kendo-table-selected-text !default;

package/scss/tabstrip/_variables.scss

@@ -59,7 +59,7 @@ $kendo-tabstrip-lg-line-height: $kendo-tabstrip-line-height !default;
 $kendo-tabstrip-bg: transparent !default;
 /// The text color of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-text: var( --kendo-component-text, initial ) !default;
+$kendo-tabstrip-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip.
 /// @group tabstrip
 $kendo-tabstrip-border: transparent !default;
@@ -104,19 +104,19 @@ $kendo-tabstrip-lg-item-padding-y: k-spacing(3.5) !default;
 $kendo-tabstrip-item-bg: transparent !default;
 /// The text color of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-text: var( --kendo-component-text, initial ) !default;
+$kendo-tabstrip-item-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border: transparent !default;
 /// The text color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
+$kendo-tabstrip-item-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
 /// The background color of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-bg: none !default;
 /// The border color of the disabled TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-disabled-border: var( --kendo-disabled-border, initial ) !default;
+$kendo-tabstrip-item-disabled-border: transparent !default;
 /// The opacity of the disabled TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-disabled-opacity: null !default;
@@ -126,22 +126,22 @@ $kendo-tabstrip-item-disabled-filter: null !default;
 
 /// The background color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+$kendo-tabstrip-item-hover-bg: k-color(base-hover) !default;
 /// The text color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+$kendo-tabstrip-item-hover-text: k-color(on-base) !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: var( --kendo-hover-bg, inherit ) !default;
+$kendo-tabstrip-item-hover-border: k-color(base-hover) !default;
 /// The background color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-tabstrip-item-selected-bg: k-color(surface-alt) !default;
 /// The text color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
+$kendo-tabstrip-item-selected-text: k-color(on-app-surface) !default;
 /// The border color of the selected TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-tabstrip-item-selected-border: k-color(primary) !default;
 /// The font weight of the selected TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -150,7 +150,7 @@ $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 /// The text color of the dragged TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-tabstrip-item-dragging-text: k-color(primary) !default;
 
 // Indicator
 /// The border width of the TabStrip indicator.
@@ -158,7 +158,7 @@ $kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( prim
 $kendo-tabstrip-indicator-size: k-spacing(0.5) !default;
 /// The border color of the TabStrip ripple.
 /// @group tabstrip
-$kendo-tabstrip-indicator-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+$kendo-tabstrip-indicator-color: k-color(primary) !default;
 
 /// The horizontal padding of the TabStrip content.
 /// @group tabstrip
@@ -172,16 +172,16 @@ $kendo-tabstrip-content-border-width: 1px !default;
 
 /// The background color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-bg: var( --kendo-component-bg, transparent ) !default;
+$kendo-tabstrip-content-bg: k-color(surface-alt) !default;
 /// The text color of the TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-text: var( --kendo-component-text, inherit ) !default;
+$kendo-tabstrip-content-text: k-color(on-app-surface) !default;
 /// The border color of the TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-border: transparent !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
-$kendo-tabstrip-content-focus-border: var( --kendo-component-text, initial ) !default;
+$kendo-tabstrip-content-focus-border: k-color(on-app-surface) !default;
 
 /// The horizontal button padding of the scrollable TabStrip.
 /// @group tabstrip
@@ -192,7 +192,7 @@ $kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !default;
 
 /// The left and right scroll overlay of the TabStrip.
 /// @group tabstrip
-$kendo-tabstrip-scroll-overlay: if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0)) !default;
+$kendo-tabstrip-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
 
 /// The size map of the TabStrip.
 /// @group tabstrip

package/scss/taskboard/_theme.scss

@@ -60,14 +60,14 @@
 
         &.k-disabled {
             @include fill(
-                var( --kendo-disabled-text, inherit ),
-                var( --kendo-disabled-bg, inherit ),
-                var( --kendo-disabled-border, inherit )
+                color-mix(in srgb, k-color( on-app-surface ) 46%, transparent),
+                k-color( base-subtle ),
+                transparent
 
             );
 
             .k-card-header {
-                @include fill( $color: var( --kendo-disabled-text, inherit ) );
+                @include fill( $color: color-mix(in srgb, k-color( on-app-surface ) 46%, transparent) );
             }
         }
     }