@progress/kendo-theme-core 10.6.0 → 11.0.0-dev.1

package/scss/components/button/_theme.scss

@@ -2,7 +2,6 @@
 @use "sass:meta";
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
@@ -77,17 +76,17 @@
 
     @each $name, $color in $kendo-button-theme-colors {
         @if ($name != "base") {
-            $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
-            $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));
+            $_button-text: k-color(on-#{$name});
+            $_button-bg: k-color($name);
+            $_button-border: k-color($name);
 
             $_button-hover-text: null;
-            $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
-            $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));
+            $_button-hover-bg: k-color(#{$name}-hover);
+            $_button-hover-border: k-color(#{$name}-hover);
 
             $_button-active-text: null;
-            $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
-            $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));
+            $_button-active-bg: k-color(#{$name}-active);
+            $_button-active-border: k-color(#{$name}-active);
 
             .k-button-solid-#{$name} {
                 @include fill(
@@ -111,7 +110,7 @@
                 &:focus,
                 &.k-focus {
                     @if ( $kendo-solid-button-shadow ) {
-                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread color-mix(in srgb, k-color($name) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
 
@@ -151,11 +150,11 @@
 
 
     // Outline button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface) ) ) {
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
-            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
+            color: k-color(#{$name}-on-surface);
             background-color: transparent;
 
             // Hover state
@@ -163,13 +162,13 @@
             &.k-hover {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color ) ),
-                        if($kendo-enable-color-system, k-color( on-base ), $color ),
-                        if($kendo-enable-color-system, k-color( on-base ), $color )
+                        k-color(base),
+                        k-color(on-base),
+                        k-color(on-base)
                     );
                 } @else {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        k-color(on-#{$name}),
                         $color,
                         $color
                     );
@@ -181,9 +180,9 @@
             &.k-focus {
                 @if $kendo-outline-button-shadow {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
             }
@@ -193,13 +192,13 @@
             &.k-active {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), $color ),
-                        if($kendo-enable-color-system, k-color( on-base ), $color )
+                        k-color(base ),
+                        k-color(on-base ),
+                        k-color(on-base )
                     );
                 } @else {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        k-color(on-#{$name} ),
                         $color,
                         $color
                     );
@@ -210,13 +209,13 @@
             &.k-selected {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), $color ),
-                        if($kendo-enable-color-system, k-color( on-base ), $color )
+                        k-color(base ),
+                        k-color(on-base ),
+                        k-color(on-base )
                     );
                 } @else {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+                        k-color(on-#{$name} ),
                         $color,
                         $color
                     );
@@ -238,7 +237,7 @@
             @if $name == "base" {
                 color: inherit;
             } @else {
-                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
+                color: k-color(#{$name}-on-surface);
             }
 
             // Disabled state
@@ -251,7 +250,7 @@
 
 
     // Link button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
         .k-button-link-#{$name} {
             color: $color;
 
@@ -259,9 +258,9 @@
             &:hover,
             &.k-hover {
                 @if $name == "base" {
-                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                    color: k-color(on-app-surface);
                 } @else {
-                    color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 2 ));
+                    color: k-color(#{$name}-hover);
                 }
             }
 
@@ -270,9 +269,9 @@
             &.k-focus {
                 @if ( $kendo-link-button-shadow ) {
                     @if $name == "base" {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color(on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                     } @else {
-                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
+                        @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread color-mix(in srgb, k-color($name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), true, true );
                     }
                 }
             }
@@ -281,18 +280,18 @@
             &:active,
             &.k-active {
                 @if $name == "base" {
-                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                    color: k-color(on-app-surface);
                 } @else {
-                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
+                    color: k-color(#{$name}-active);
                 }
             }
 
             // Selected
             &.k-selected {
                 @if $name == "base" {
-                    color: if($kendo-enable-color-system, $kendo-base-text, k-try-shade( $color, 2 ));
+                    color: k-color(on-app-surface);
                 } @else {
-                    color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 2 ));
+                    color: k-color(#{$name}-active);
                 }
             }
 
@@ -306,9 +305,9 @@
 
 
     // Clear button
-    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": k-color(on-app-surface ) ) ) {
         .k-button-clear-#{$name} {
-            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
+            color: k-color(#{$name}-on-surface);
 
             &:focus,
             &.k-focus,

package/scss/components/button/_variables.scss

@@ -15,6 +15,7 @@ $kendo-button-md-padding-y: null !default;
 $kendo-button-lg-padding-y: null !default;
 
 $kendo-button-font-family: null !default;
+$kendo-button-font-weight: null !default;
 
 $kendo-button-font-size: null !default;
 $kendo-button-sm-font-size: null !default;

package/scss/components/calendar/_layout.scss

@@ -12,6 +12,7 @@
         block-size: var( --INTERNAL--kendo-calendar-height, min-content );
         border-width: $kendo-calendar-border-width;
         border-style: solid;
+        border-radius: $kendo-calendar-border-radius;
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-calendar-font-family;
@@ -177,7 +178,8 @@
         overflow: hidden;
 
         .k-today {
-            font-weight: bold;
+            font-weight: $kendo-calendar-today-font-weight;
+            box-shadow: $kendo-calendar-today-box-shadow;
         }
     }
 

package/scss/components/calendar/_theme.scss

@@ -1,5 +1,4 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -129,12 +128,16 @@
             );
         }
 
+        .k-calendar-navigation-marker {
+            color: $kendo-calendar-navigation-marker-text;
+        }
+
         // Invalid
         &.k-invalid,
         &.k-invalid:hover,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $kendo-invalid-border;
+            border-color: k-color(error);
         }
     }
 
@@ -160,7 +163,6 @@
     .k-calendar { // stylelint-disable-line
 
         $kendo-calendar-range-gap: k-spacing(1px) !default;
-        $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
         $kendo-calendar-range-split-size: 5px !default;
 
         .k-range-start,

package/scss/components/calendar/_variables.scss

@@ -5,6 +5,7 @@ $kendo-calendar-border-width: null !default;
 $kendo-calendar-font-family: null !default;
 $kendo-calendar-font-size: null !default;
 $kendo-calendar-line-height: null !default;
+$kendo-calendar-border-radius: null !default;
 
 $kendo-calendar-cell-size: null !default;
 
@@ -66,6 +67,8 @@ $kendo-calendar-weekend-text: null !default;
 
 $kendo-calendar-today-style: null !default;
 $kendo-calendar-today-color: null !default;
+$kendo-calendar-today-font-weight: null !default;
+$kendo-calendar-today-box-shadow: null !default;
 
 $kendo-calendar-week-number-bg: null !default;
 $kendo-calendar-week-number-text: null !default;
@@ -106,6 +109,10 @@ $kendo-calendar-navigation-border: null !default;
 
 $kendo-calendar-navigation-hover-text: null !default;
 
+$kendo-calendar-navigation-marker-text: null !default;
+
+$kendo-calendar-range-bg: null !default;
+
 $kendo-infinite-calendar-header-padding-x: null !default;
 $kendo-infinite-calendar-header-padding-y: null !default;
 
@@ -114,7 +121,6 @@ $kendo-infinite-calendar-view-padding-y: null !default;
 
 $kendo-infinite-calendar-view-height: null !default;
 
-
 // Multiview calendar
 
 $kendo-calendar-range-cell-border-radius: null !default;

package/scss/components/card/_theme.scss

@@ -1,6 +1,5 @@
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
@@ -54,6 +53,10 @@
         @include fill( $kendo-card-footer-text, $kendo-card-footer-bg, $kendo-card-footer-border );
     }
 
+    // Body
+    .k-card-body {
+        border-color: inherit;
+    }
 
     // Separator
     .k-card-separator,
@@ -69,11 +72,11 @@
 
 
     // Card theme colors
-    @each $name, $color in $kendo-theme-colors {
+    @each $name, $color in $kendo-card-theme-colors {
         .k-card-#{$name} {
-            background-color: if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-color-tint($color, 10));
-            color: if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-color-shade($color, 6));
-            border-color: if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-color-tint($color, 9));
+            background-color: k-color(#{$name}-subtle);
+            color: k-color(#{$name}-on-subtle);
+            border-color: k-color(#{$name}-emphasis);
 
             .k-card-subtitle {
                 color: inherit;

package/scss/components/card/_variables.scss

@@ -70,3 +70,5 @@ $kendo-card-deck-scroll-button-offset: null !default;
 
 $kendo-card-callout-width: null !default;
 $kendo-card-callout-height: null !default;
+
+$kendo-card-theme-colors: null !default;

package/scss/components/chat/_theme.scss

@@ -1,5 +1,4 @@
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../motion/index.import.scss" as *;
 @use "../../color-system/_functions.import.scss" as *;
 @use "../../_variables.scss" as *;
@@ -39,8 +38,8 @@
             transition: $kendo-transition;
             order: -1;
 
-            a { color: $kendo-link-text; }
-            a:hover { color: $kendo-link-hover-text; }
+            a { color: k-color(primary); }
+            a:hover { color: k-color(primary-hover); }
         }
         .k-chat-bubble:hover {
             @include box-shadow( $kendo-chat-bubble-hover-shadow );
@@ -84,7 +83,7 @@
 
             &:focus,
             &.k-focus {
-                @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( 'primary' ) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), rgba( $kendo-color-primary, $kendo-chat-quick-reply-shadow-opacity )), true, true );
+                @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread color-mix(in srgb, k-color(primary) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), true, true );
             }
         }
     }

package/scss/components/checkbox/_layout.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "../../mixins/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../spacing/index.import.scss" as *;
+@use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-checkbox--layout-base() {
@@ -86,13 +86,6 @@
     }
 
 
-    // Disabled state
-    .k-checkbox:disabled,
-    .k-checkbox.k-disabled {
-        @include disabled( $kendo-disabled-styling... );
-    }
-
-
     // Checkbox wrap
     .k-checkbox-wrap {
         flex: none;

package/scss/components/chip/_layout.scss

@@ -11,6 +11,7 @@
         border-style: solid;
         outline: 0;
         font-family: var( --kendo-font-family, inherit );
+        font-weight: $kendo-chip-font-weight;
         font-size: $kendo-chip-font-size;
         line-height: $kendo-chip-line-height;
         display: inline-flex;

package/scss/components/chip/_theme.scss

@@ -35,26 +35,36 @@
                 }
             } @else {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( #{$name}-on-subtle ), k-try-shade( $color, 65% )),
-                    if($kendo-enable-color-system, k-color( #{$name}-subtle ), k-try-tint( $color, 80% )),
-                    if($kendo-enable-color-system, k-color( #{$name}-emphasis ), k-try-tint( $color, 25% )),
+                    k-color(#{$name}-on-subtle),
+                    k-color(#{$name}-subtle),
+                    k-color(#{$name}-emphasis),
                     $kendo-chip-solid-gradient
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-hover ), k-try-tint($color, 65% )) );
+                    @include fill( $bg: k-color(#{$name}-subtle-hover));
                 }
 
                 &.k-selected {
-                    @include fill( $bg: if($kendo-enable-color-system, k-color( #{$name}-subtle-active ), k-try-tint( $color, 50% )) );
+                    @include fill( $bg: k-color(#{$name}-subtle-active));
                 }
             }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                @include fill(
+                    $kendo-chip-disabled-text,
+                    $kendo-chip-disabled-bg,
+                    $kendo-chip-disabled-border,
+                );
+            }
         }
     }
 
@@ -90,59 +100,66 @@
                 }
             } @else if ($name == "warning") {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text)),
-                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
-                    if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                    k-color(on-app-surface),
+                    transparent,
+                    $color
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
-                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                        $color: k-color(on-#{$name}),
+                        $bg: $color
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        $color: if($kendo-enable-color-system, k-color( on-#{$name} ), if( $kendo-is-dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) )),
-                        $bg: if($kendo-enable-color-system, $color, if( $kendo-is-dark-theme, k-color-tint($color, 25%), $color))
+                        $color: k-color(on-#{$name}),
+                        $bg: $color
                     );
                 }
             } @else {
                 @include fill(
-                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% )),
-                    if($kendo-enable-color-system, transparent, if( $kendo-is-dark-theme, $kendo-color-black, $kendo-color-white )),
-                    if($kendo-enable-color-system, k-color( #{$name}-on-surface ), k-try-shade( $color, 25% ))
+                    k-color(#{$name}-on-surface),
+                    transparent,
+                    k-color(#{$name}-on-surface)
                 );
 
                 &:focus,
                 &.k-focus {
-                    @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
+                    @include focus-indicator( 0 0 0 2px color-mix(in srgb, k-color($name) 16%, transparent));
                 }
 
                 &:hover,
                 &.k-hover {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
-                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% )),
-                        if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, 25% ))
+                        k-color(on-#{$name}),
+                        k-color(#{$name}-hover),
+                        k-color(#{$name}-hover)
                     );
                 }
 
                 &.k-selected {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( k-try-shade( $color, 25% ) )),
-                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% )),
-                        if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 25% ))
+                        k-color(on-#{$name}),
+                        k-color(#{$name}-active),
+                        k-color(#{$name}-active)
                     );
                 }
             }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-chip-disabled-text;
+                border-color: $kendo-chip-disabled-text;
+            }
         }
     }
 

package/scss/components/chip/_variables.scss

@@ -13,6 +13,8 @@ $kendo-chip-sm-padding-y: null !default;
 $kendo-chip-md-padding-y: null !default;
 $kendo-chip-lg-padding-y: null !default;
 
+$kendo-chip-font-weight: null !default;
+
 $kendo-chip-font-size: null !default;
 $kendo-chip-sm-font-size: null !default;
 $kendo-chip-md-font-size: null !default;
@@ -58,6 +60,10 @@ $kendo-chip-outline-hover-text: null !default;
 $kendo-chip-outline-selected-bg: null !default;
 $kendo-chip-outline-selected-text: null !default;
 
+$kendo-chip-disabled-bg: null !default;
+$kendo-chip-disabled-text: null !default;
+$kendo-chip-disabled-border: null !default;
+
 // Chip List
 
 $kendo-chip-list-sizes: null !default;

package/scss/components/colorgradient/_layout.scss

@@ -46,6 +46,7 @@
 
         .k-hsv-gradient {
             @include border-radius( $kendo-color-gradient-canvas-border-radius );
+            aspect-ratio: 1;
             height: $kendo-color-gradient-canvas-rectangle-height;
         }
 
@@ -133,8 +134,6 @@
     @each $size, $size-props in $kendo-color-gradient-sizes {
         $_width: map.get( $size-props, width );
         $_gap: map.get( $size-props, gap );
-        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
-        $_rectangle-height: map.get( $size-props, rectangle-height );
         $_input-width: map.get( $size-props, input-width );
         $_canvas-gap: map.get( $size-props, canvas-gap );
         $_padding-x: map.get( $size-props, padding-x );
@@ -155,14 +154,6 @@
             .k-colorgradient-canvas {
                 gap: $_canvas-gap;
 
-                .k-hsv-gradient {
-                    height: $_rectangle-height;
-                }
-
-                .k-slider-vertical {
-                    height: $_vertical-slider-height;
-                }
-
                 .k-hsv-controls {
                     gap: $_canvas-gap;
                 }

package/scss/components/colorgradient/_variables.scss

@@ -36,9 +36,6 @@ $kendo-color-gradient-focus-shadow: null !default;
 $kendo-color-gradient-canvas-border-radius: null !default;
 $kendo-color-gradient-canvas-gap: null !default;
 $kendo-color-gradient-canvas-rectangle-height: null !default;
-$kendo-color-gradient-sm-canvas-rectangle-height: null !default;
-$kendo-color-gradient-md-canvas-rectangle-height: null !default;
-$kendo-color-gradient-lg-canvas-rectangle-height: null !default;
 
 $kendo-color-gradient-sm-canvas-gap: null !default;
 $kendo-color-gradient-md-canvas-gap: null !default;
@@ -51,9 +48,6 @@ $kendo-color-gradient-slider-draghandle-border-width: null !default;
 $kendo-color-gradient-slider-vertical-size: null !default;
 $kendo-color-gradient-slider-horizontal-size: null !default;
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
-$kendo-color-gradient-sm-slider-vertical-size: null !default;
-$kendo-color-gradient-md-slider-vertical-size: null !default;
-$kendo-color-gradient-lg-slider-vertical-size: null !default;
 
 $kendo-color-gradient-draghandle-width: null !default;
 $kendo-color-gradient-draghandle-height: null !default;

package/scss/components/dataviz/_layout.scss

@@ -7,7 +7,6 @@
 @use "../../border-radii/index.import.scss" as *;
 @use "../../mixins/index.import.scss" as *;
 @use "../../functions/index.import.scss" as *;
-@use "../../color-system/_swatch-legacy.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./variables.scss" as *;
 @use "../tooltip/_variables.scss" as *;
@@ -415,13 +414,13 @@
     // export variables to allow use in scripts
     // TODO: remove in favor of $_css-vars once all suites are updated
     $exported: (
-        primary: $kendo-color-primary,
-        primary-contrast: $kendo-color-primary-contrast,
-        base: $kendo-base-bg,
+        primary: k-color(primary),
+        primary-contrast: k-color(on-primary),
+        base: k-color(surface),
         background: $kendo-chart-bg,
 
-        normal-background: $kendo-base-bg,
-        normal-text-color: $kendo-base-text,
+        normal-background: k-color(surface),
+        normal-text-color: k-color(on-app-surface),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -461,8 +460,8 @@
         series-29: $kendo-series-29,
         series-30: $kendo-series-30,
 
-        gauge-pointer: $kendo-color-primary,
-        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg )),
+        gauge-pointer: k-color(primary),
+        gauge-track: k-color(base-emphasis),
 
         chart-font-size: $kendo-chart-font-size,
         chart-title-font-size: $kendo-chart-title-font-size,
@@ -504,8 +503,8 @@
     }
 
     $_css-vars: (
-        chart-primary-bg: $kendo-color-primary,
-        chart-primary-contrast: $kendo-color-primary-contrast,
+        chart-primary-bg: k-color(primary),
+        chart-primary-contrast: k-color(on-primary),
         chart-bg: $kendo-chart-bg,
         chart-text: $kendo-chart-text,
 
@@ -558,8 +557,8 @@
         chart-series-29: $kendo-series-29,
         chart-series-30: $kendo-series-30,
 
-        chart-gauge-pointer: $kendo-color-primary,
-        chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-try-shade( $kendo-chart-bg ))
+        chart-gauge-pointer: k-color(primary),
+        chart-gauge-track: k-color(base-emphasis)
 
     );