@progress/kendo-theme-fluent 7.1.0-dev.8 → 7.1.0

package/scss/core/color-system/_swatch.scss

@@ -0,0 +1,261 @@
+@use "sass:map";
+@use "@progress/kendo-theme-core/scss/color-system/_functions.import.scss" as functions;
+@use "@progress/kendo-theme-core/scss/color-system/_constants.scss" as constants;
+@use "./palettes" as *;
+@forward "./palettes";
+
+// Config
+$kendo-enable-color-system: false !default;
+
+// Colors
+$_default-colors: (
+    // Misc
+    app-surface: map.get( $kendo-palette-gray, white ),
+    on-app-surface: map.get( $kendo-palette-gray, 14 ),
+    subtle: map.get( $kendo-palette-gray, 11 ),
+    surface: map.get( $kendo-palette-gray, 1 ),
+    surface-alt: map.get( $kendo-palette-gray, white ),
+    border: map.get( $kendo-palette-gray, 9 ),
+    border-alt: map.get( $kendo-palette-gray, 14 ),
+    // Base
+    base-subtle: map.get( $kendo-palette-gray, 3 ),
+    base-subtle-hover: map.get( $kendo-palette-gray, 4 ),
+    base-subtle-active: map.get( $kendo-palette-gray, 5 ),
+    base: map.get( $kendo-palette-gray, white ),
+    base-hover: map.get( $kendo-palette-gray, 2 ),
+    base-active: map.get( $kendo-palette-gray, 3 ),
+    base-emphasis: map.get( $kendo-palette-gray, 11 ),
+    base-on-subtle: map.get( $kendo-palette-gray, 14 ),
+    on-base: map.get( $kendo-palette-gray, 14 ),
+    base-on-surface: map.get( $kendo-palette-gray, 14 ),
+    // Primary
+    primary-subtle: map.get( $kendo-palette-ocean-blue, 2 ),
+    primary-subtle-hover: map.get( $kendo-palette-ocean-blue, 3 ),
+    primary-subtle-active: map.get( $kendo-palette-ocean-blue, 4 ),
+    primary: map.get( $kendo-palette-ocean-blue, 8 ),
+    primary-hover: map.get( $kendo-palette-ocean-blue, 9 ),
+    primary-active: map.get( $kendo-palette-ocean-blue, 10 ),
+    primary-emphasis: map.get( $kendo-palette-ocean-blue, 11 ),
+    primary-on-subtle: map.get( $kendo-palette-ocean-blue, 14 ),
+    on-primary: map.get( $kendo-palette-gray, white ),
+    primary-on-surface: map.get( $kendo-palette-ocean-blue, 8 ),
+    // Secondary
+    secondary-subtle: map.get( $kendo-palette-gray, 1 ),
+    secondary-subtle-hover: map.get( $kendo-palette-gray, 2 ),
+    secondary-subtle-active: map.get( $kendo-palette-gray, 3 ),
+    secondary: map.get( $kendo-palette-gray, 8 ),
+    secondary-hover: map.get( $kendo-palette-gray, 9 ),
+    secondary-active: map.get( $kendo-palette-gray, 10 ),
+    secondary-emphasis: map.get( $kendo-palette-gray, 11 ),
+    secondary-on-subtle: map.get( $kendo-palette-gray, 14 ),
+    on-secondary: map.get( $kendo-palette-gray, white ),
+    secondary-on-surface: map.get( $kendo-palette-gray, 11 ),
+    // Tertiary
+    tertiary-subtle: map.get( $kendo-palette-azure-blue, 2 ),
+    tertiary-subtle-hover: map.get( $kendo-palette-azure-blue, 3 ),
+    tertiary-subtle-active: map.get( $kendo-palette-azure-blue, 4 ),
+    tertiary: map.get( $kendo-palette-azure-blue, 8 ),
+    tertiary-hover: map.get( $kendo-palette-azure-blue, 9 ),
+    tertiary-active: map.get( $kendo-palette-azure-blue, 10 ),
+    tertiary-emphasis: map.get( $kendo-palette-azure-blue, 11 ),
+    tertiary-on-subtle: map.get( $kendo-palette-azure-blue, 14 ),
+    on-tertiary: map.get( $kendo-palette-gray, white ),
+    tertiary-on-surface: map.get( $kendo-palette-azure-blue, 8 ),
+    // Info
+    info-subtle: map.get( $kendo-palette-cobalt-blue, 2 ),
+    info-subtle-hover: map.get( $kendo-palette-cobalt-blue, 3 ),
+    info-subtle-active: map.get( $kendo-palette-cobalt-blue, 4 ),
+    info: map.get( $kendo-palette-cobalt-blue, 8 ),
+    info-hover: map.get( $kendo-palette-cobalt-blue, 9 ),
+    info-active: map.get( $kendo-palette-cobalt-blue, 10 ),
+    info-emphasis: map.get( $kendo-palette-cobalt-blue, 11 ),
+    info-on-subtle: map.get( $kendo-palette-cobalt-blue, 14 ),
+    on-info: map.get( $kendo-palette-gray, white ),
+    info-on-surface: map.get( $kendo-palette-cobalt-blue, 9 ),
+    // Success
+    success-subtle: map.get( $kendo-palette-forest-green, 2 ),
+    success-subtle-hover: map.get( $kendo-palette-forest-green, 3 ),
+    success-subtle-active: map.get( $kendo-palette-forest-green, 4 ),
+    success: map.get( $kendo-palette-forest-green, 8 ),
+    success-hover: map.get( $kendo-palette-forest-green, 9 ),
+    success-active: map.get( $kendo-palette-forest-green, 10 ),
+    success-emphasis: map.get( $kendo-palette-forest-green, 11 ),
+    success-on-subtle: map.get( $kendo-palette-forest-green, 14 ),
+    on-success: map.get( $kendo-palette-gray, white ),
+    success-on-surface: map.get( $kendo-palette-forest-green, 11 ),
+    // Warning
+    warning-subtle: map.get( $kendo-palette-dandelion-yellow, 2 ),
+    warning-subtle-hover: map.get( $kendo-palette-dandelion-yellow, 3 ),
+    warning-subtle-active: map.get( $kendo-palette-dandelion-yellow, 4 ),
+    warning: map.get( $kendo-palette-dandelion-yellow, 8 ),
+    warning-hover: map.get( $kendo-palette-dandelion-yellow, 9 ),
+    warning-active: map.get( $kendo-palette-dandelion-yellow, 10 ),
+    warning-emphasis: map.get( $kendo-palette-gray, 12 ),
+    warning-on-subtle: map.get( $kendo-palette-gray, 14 ),
+    on-warning: map.get( $kendo-palette-gray, 14 ),
+    warning-on-surface: map.get( $kendo-palette-dandelion-yellow, 13 ),
+    // Error
+    error-subtle: map.get( $kendo-palette-crimson-red, 2 ),
+    error-subtle-hover: map.get( $kendo-palette-crimson-red, 3 ),
+    error-subtle-active: map.get( $kendo-palette-crimson-red, 4 ),
+    error: map.get( $kendo-palette-crimson-red, 8 ),
+    error-hover: map.get( $kendo-palette-crimson-red, 9 ),
+    error-active: map.get( $kendo-palette-crimson-red, 10 ),
+    error-emphasis: map.get( $kendo-palette-crimson-red, 11 ),
+    error-on-subtle: map.get( $kendo-palette-crimson-red, 14 ),
+    on-error: map.get( $kendo-palette-gray, white ),
+    error-on-surface: map.get( $kendo-palette-crimson-red, 11 ),
+    // Light
+    light-subtle: map.get( $kendo-palette-gray, 1 ),
+    light-subtle-hover: map.get( $kendo-palette-gray, 2 ),
+    light-subtle-active: map.get( $kendo-palette-gray, 3 ),
+    light: map.get( $kendo-palette-gray, 5 ),
+    light-hover: map.get( $kendo-palette-gray, 6 ),
+    light-active: map.get( $kendo-palette-gray, 7 ),
+    light-emphasis: map.get( $kendo-palette-gray, 4 ),
+    light-on-subtle: map.get( $kendo-palette-gray, 14 ),
+    on-light: map.get( $kendo-palette-gray, 14 ),
+    light-on-surface: map.get( $kendo-palette-gray, 5 ),
+    // Dark
+    dark-subtle: map.get( $kendo-palette-gray, 7 ),
+    dark-subtle-hover: map.get( $kendo-palette-gray, 8 ),
+    dark-subtle-active: map.get( $kendo-palette-gray, 9 ),
+    dark: map.get( $kendo-palette-gray, 14 ),
+    dark-hover: map.get( $kendo-palette-gray, 15 ),
+    dark-active: map.get( $kendo-palette-gray, black ),
+    dark-emphasis: map.get( $kendo-palette-gray, 10 ),
+    dark-on-subtle: map.get( $kendo-palette-gray, 15 ),
+    on-dark: map.get( $kendo-palette-gray, white ),
+    dark-on-surface: map.get( $kendo-palette-gray, 14 ),
+    // Inverse
+    inverse-subtle: map.get( $kendo-palette-gray, 7 ),
+    inverse-subtle-hover: map.get( $kendo-palette-gray, 8 ),
+    inverse-subtle-active: map.get( $kendo-palette-gray, 9 ),
+    inverse: map.get( $kendo-palette-gray, 14 ),
+    inverse-hover: map.get( $kendo-palette-gray, 15 ),
+    inverse-active: map.get( $kendo-palette-gray, black ),
+    inverse-emphasis: map.get( $kendo-palette-gray, 10 ),
+    inverse-on-subtle: map.get( $kendo-palette-gray, 15 ),
+    on-inverse: map.get( $kendo-palette-gray, white ),
+    inverse-on-surface: map.get( $kendo-palette-gray, 14 ),
+    // Series A
+    series-a: map.get( $kendo-palette-sapphire-blue, 9 ),
+    series-a-bold: map.get( $kendo-palette-sapphire-blue, 11 ),
+    series-a-bolder: map.get( $kendo-palette-sapphire-blue, 13 ),
+    series-a-subtle: map.get( $kendo-palette-sapphire-blue, 7 ),
+    series-a-subtler: map.get( $kendo-palette-sapphire-blue, 5 ),
+    // Series B
+    series-b: map.get( $kendo-palette-cardinal-red, 9 ),
+    series-b-bold: map.get( $kendo-palette-cardinal-red, 11 ),
+    series-b-bolder: map.get( $kendo-palette-cardinal-red, 13 ),
+    series-b-subtle: map.get( $kendo-palette-cardinal-red, 7 ),
+    series-b-subtler: map.get( $kendo-palette-cardinal-red, 5 ),
+    // Series C
+    series-c: map.get( $kendo-palette-cyber-yellow, 9 ),
+    series-c-bold: map.get( $kendo-palette-cyber-yellow, 11 ),
+    series-c-bolder: map.get( $kendo-palette-cyber-yellow, 13 ),
+    series-c-subtle: map.get( $kendo-palette-cyber-yellow, 7 ),
+    series-c-subtler: map.get( $kendo-palette-cyber-yellow, 5 ),
+    // Series D
+    series-d: map.get( $kendo-palette-cobalt-blue, 9 ),
+    series-d-bold: map.get( $kendo-palette-cobalt-blue, 11 ),
+    series-d-bolder: map.get( $kendo-palette-cobalt-blue, 13 ),
+    series-d-subtle: map.get( $kendo-palette-cobalt-blue, 7 ),
+    series-d-subtler: map.get( $kendo-palette-cobalt-blue, 5 ),
+    // Series Е
+    series-e: map.get( $kendo-palette-iris-purple, 9 ),
+    series-e-bold: map.get( $kendo-palette-iris-purple, 11 ),
+    series-e-bolder: map.get( $kendo-palette-iris-purple, 13 ),
+    series-e-subtle: map.get( $kendo-palette-iris-purple, 7 ),
+    series-e-subtler: map.get( $kendo-palette-iris-purple, 5 ),
+    // Series F
+    series-f: map.get( $kendo-palette-lime-green, 9 ),
+    series-f-bold: map.get( $kendo-palette-lime-green, 11 ),
+    series-f-bolder: map.get( $kendo-palette-lime-green, 13 ),
+    series-f-subtle: map.get( $kendo-palette-lime-green, 7 ),
+    series-f-subtler: map.get( $kendo-palette-lime-green, 5 ),
+) !default;
+
+/// The global default Colors map.
+/// @group color-system
+$kendo-colors: $_default-colors !default;
+
+// Legacy
+
+// Root styles
+$kendo-body-bg: constants.$kendo-color-white !default;
+$kendo-body-text: functions.k-get-theme-color-var(neutral-160) !default;
+
+// Component styles
+$kendo-component-bg: $kendo-body-bg !default;
+$kendo-component-text: $kendo-body-text !default;
+$kendo-component-border: functions.k-get-theme-color-var(neutral-30) !default;
+
+// States styles
+$kendo-hover-bg: functions.k-get-theme-color-var(neutral-20) !default;
+$kendo-hover-text: functions.k-get-theme-color-var(neutral-190) !default;
+$kendo-hover-border: functions.k-get-theme-color-var(neutral-20) !default;
+
+$kendo-selected-bg: functions.k-get-theme-color-var(neutral-30) !default;
+$kendo-selected-text: functions.k-get-theme-color-var(neutral-160) !default;
+$kendo-selected-border: functions.k-get-theme-color-var(neutral-130) !default;
+
+$kendo-selected-hover-bg: functions.k-get-theme-color-var(neutral-40) !default;
+$kendo-selected-hover-text: functions.k-get-theme-color-var(neutral-190) !default;
+$kendo-selected-hover-border: functions.k-get-theme-color-var(neutral-130) !default;
+
+$kendo-focus-outline: functions.k-get-theme-color-var(neutral-130) !default;
+
+$kendo-subtle-text: functions.k-get-theme-color-var(neutral-130) !default;
+
+// Link
+$kendo-link-text: functions.k-get-theme-color-var(primary-100) !default;
+$kendo-link-hover-text: functions.k-get-theme-color-var(primary-120) !default;
+
+// Validator
+$kendo-invalid-bg: initial !default;
+$kendo-invalid-text: functions.k-get-theme-color-var(error-190) !default;
+$kendo-invalid-border: functions.k-get-theme-color-var(error-190) !default;
+$kendo-invalid-shadow: null !default;
+
+$kendo-valid-bg: initial !default;
+$kendo-valid-text: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-border: k-get-theme-color-var( success-190 ) !default;
+$kendo-valid-shadow: null !default;
+
+// Disabled Styling
+$kendo-disabled-bg: functions.k-get-theme-color-var(neutral-20) !default;
+$kendo-disabled-text: functions.k-get-theme-color-var(neutral-90) !default;
+$kendo-disabled-border: transparent !default;
+
+// Loading
+$kendo-loading-bg: $kendo-component-bg !default;
+$kendo-loading-text: currentColor !default;
+
+$kendo-theme-colors: (
+    primary: (
+        text: functions.k-get-theme-color-var(primary-130),
+        bg: functions.k-get-theme-color-var(primary-20),
+        border: functions.k-get-theme-color-var(primary-20),
+    ),
+    info: (
+        text: functions.k-get-theme-color-var(info-190),
+        bg: functions.k-get-theme-color-var(info-20),
+        border: functions.k-get-theme-color-var(info-20),
+    ),
+    success: (
+        text: functions.k-get-theme-color-var(success-190),
+        bg: functions.k-get-theme-color-var(success-20),
+        border: functions.k-get-theme-color-var(success-20),
+    ),
+    warning: (
+        text: functions.k-get-theme-color-var(neutral-160),
+        bg: functions.k-get-theme-color-var(warning-20),
+        border: functions.k-get-theme-color-var(warning-20),
+    ),
+    error: (
+        text: functions.k-get-theme-color-var(error-190),
+        bg: functions.k-get-theme-color-var(error-20),
+        border: functions.k-get-theme-color-var(error-20),
+    ),
+) !default;

package/scss/dataviz/_layout.scss

@@ -387,7 +387,7 @@
 
     // export variables to allow use in scripts
     $exported: (
-        primary-contrast: $kendo-color-white,
+        primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
         base: $kendo-component-bg,
         background: $kendo-component-bg,
 
@@ -400,10 +400,10 @@
         selected-background: $kendo-selected-bg,
         selected-text-color: $kendo-selected-text,
 
-        success: k-get-theme-color( success, 100 ),
-        info: k-get-theme-color( info, 100 ),
-        warning: k-get-theme-color( warning, 100 ),
-        error: k-get-theme-color( error, 100 ),
+        success: if($kendo-enable-color-system, k-color( success ), k-get-theme-color( success, 100 )),
+        info: if($kendo-enable-color-system, k-color( info ), k-get-theme-color( info, 100 )),
+        warning: if($kendo-enable-color-system, k-color( warning ), k-get-theme-color( warning, 100 )),
+        error: if($kendo-enable-color-system, k-color( error ), k-get-theme-color( error, 100 )),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -444,7 +444,7 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: k-get-theme-color-var( neutral-30 )
+        gauge-track: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-30 ))
     );
 
     @each $name, $value in $exported {

package/scss/dataviz/_variables.scss

@@ -3,51 +3,51 @@
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: k-get-theme-color-var( series-a-100 ) !default;
-$kendo-series-a-dark: k-get-theme-color-var( series-a-130 ) !default;
-$kendo-series-a-darker: k-get-theme-color-var( series-a-160 ) !default;
-$kendo-series-a-light: k-get-theme-color-var( series-a-70 ) !default;
-$kendo-series-a-lighter: k-get-theme-color-var( series-a-40 ) !default;
+$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), k-get-theme-color-var( series-a-100 )) !default;
+$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), k-get-theme-color-var( series-a-130 )) !default;
+$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), k-get-theme-color-var( series-a-160 )) !default;
+$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), k-get-theme-color-var( series-a-70 )) !default;
+$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), k-get-theme-color-var( series-a-40 )) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: k-get-theme-color-var( series-b-100 ) !default;
-$kendo-series-b-dark: k-get-theme-color-var( series-b-130 ) !default;
-$kendo-series-b-darker: k-get-theme-color-var( series-b-160 ) !default;
-$kendo-series-b-light: k-get-theme-color-var( series-b-70 ) !default;
-$kendo-series-b-lighter: k-get-theme-color-var( series-b-40 ) !default;
+$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), k-get-theme-color-var( series-b-100 )) !default;
+$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), k-get-theme-color-var( series-b-130 )) !default;
+$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), k-get-theme-color-var( series-b-160 )) !default;
+$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), k-get-theme-color-var( series-b-70 )) !default;
+$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), k-get-theme-color-var( series-b-40 )) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: k-get-theme-color-var( series-c-100 ) !default;
-$kendo-series-c-dark: k-get-theme-color-var( series-c-130 ) !default;
-$kendo-series-c-darker: k-get-theme-color-var( series-c-160 ) !default;
-$kendo-series-c-light: k-get-theme-color-var( series-c-70 ) !default;
-$kendo-series-c-lighter: k-get-theme-color-var( series-c-40 ) !default;
+$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), k-get-theme-color-var( series-c-100 )) !default;
+$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), k-get-theme-color-var( series-c-130 )) !default;
+$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), k-get-theme-color-var( series-c-160 )) !default;
+$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), k-get-theme-color-var( series-c-70 )) !default;
+$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), k-get-theme-color-var( series-c-40 )) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: k-get-theme-color-var( series-d-100 ) !default;
-$kendo-series-d-dark: k-get-theme-color-var( series-d-130 ) !default;
-$kendo-series-d-darker: k-get-theme-color-var( series-d-160 ) !default;
-$kendo-series-d-light: k-get-theme-color-var( series-d-70 ) !default;
-$kendo-series-d-lighter: k-get-theme-color-var( series-d-40 ) !default;
+$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), k-get-theme-color-var( series-d-100 )) !default;
+$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), k-get-theme-color-var( series-d-130 )) !default;
+$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), k-get-theme-color-var( series-d-160 )) !default;
+$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), k-get-theme-color-var( series-d-70 )) !default;
+$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), k-get-theme-color-var( series-d-40 )) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: k-get-theme-color-var( series-e-100 ) !default;
-$kendo-series-e-dark: k-get-theme-color-var( series-e-130 ) !default;
-$kendo-series-e-darker: k-get-theme-color-var( series-e-60 ) !default;
-$kendo-series-e-light: k-get-theme-color-var( series-e-70 ) !default;
-$kendo-series-e-lighter: k-get-theme-color-var( series-e-40 ) !default;
+$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), k-get-theme-color-var( series-e-100 )) !default;
+$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), k-get-theme-color-var( series-e-130 )) !default;
+$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), k-get-theme-color-var( series-e-160 )) !default;
+$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), k-get-theme-color-var( series-e-70 )) !default;
+$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), k-get-theme-color-var( series-e-40 )) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: k-get-theme-color-var( series-f-100 ) !default;
-$kendo-series-f-dark: k-get-theme-color-var( series-f-130 ) !default;
-$kendo-series-f-darker: k-get-theme-color-var( series-f-160 ) !default;
-$kendo-series-f-light: k-get-theme-color-var( series-f-70 ) !default;
-$kendo-series-f-lighter: k-get-theme-color-var( series-f-40 ) !default;
+$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), k-get-theme-color-var( series-f-100 )) !default;
+$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), k-get-theme-color-var( series-f-130 )) !default;
+$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), k-get-theme-color-var( series-f-160 )) !default;
+$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), k-get-theme-color-var( series-f-70 )) !default;
+$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), k-get-theme-color-var( series-f-40 )) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -127,10 +127,10 @@ $kendo-chart-inactive-bg: var( --kendo-disabled-bg, initial ) !default;
 
 /// The color of the chart component major grid lines.
 /// @group charts
-$kendo-chart-major-lines: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-chart-major-lines: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 /// The color of the chart component minor grid lines.
 /// @group charts
-$kendo-chart-minor-lines: k-get-theme-color-var( neutral-30 ) !default;
+$kendo-chart-minor-lines: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
 
 /// The opacity of the chart area.
 /// @group charts
@@ -155,17 +155,17 @@ $kendo-chart-border: var( --kendo-component-border, initial ) !default;
 
 /// The text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color: $kendo-color-white !default;
+$kendo-chart-tooltip-color: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The inverse text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color-inverse: $kendo-color-black !default;
+$kendo-chart-tooltip-color-inverse: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 
 /// The background color of the chart crosshairs.
 /// @group charts
-$kendo-chart-crosshair-background: $kendo-color-black !default;
+$kendo-chart-crosshair-background: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// The text color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-color: k-get-theme-color-var( neutral-160 ) !default;
+$kendo-chart-crosshair-shared-tooltip-color: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
 /// The background color of the chart shared crosshair tooltip.
 /// @group charts
 $kendo-chart-crosshair-shared-tooltip-background: var( --kendo-component-bg, initial ) !default;
@@ -175,7 +175,7 @@ $kendo-chart-crosshair-shared-tooltip-border: transparent !default;
 
 /// The background color of the chart notes.
 /// @group charts
-$kendo-chart-notes-background: k-get-theme-color-var( neutral-130 ) !default;
+$kendo-chart-notes-background: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 /// The border color of the chart notes.
 /// @group charts
 $kendo-chart-notes-border: $kendo-chart-notes-background !default;
@@ -185,7 +185,7 @@ $kendo-chart-notes-lines: $kendo-chart-notes-background !default;
 
 /// The background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-chart-handle-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The text color of the chart handle.
 /// @group charts
 $kendo-chart-handle-text: $kendo-chart-text !default;
@@ -204,7 +204,7 @@ $kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
 
 /// The color of the chart error bars.
 /// @group charts
-$kendo-color-error-bars-background: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-color-error-bars-background: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts
@@ -234,10 +234,10 @@ $kendo-treemap-border: var( --kendo-component-border, initial ) !default;
 
 /// The background color of the treemap title.
 /// @group charts
-$kendo-treemap-title-bg: k-get-theme-color-var( neutral-10 ) !default;
+$kendo-treemap-title-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
 /// The text color of the treemap title.
 /// @group charts
-$kendo-treemap-title-text: $kendo-color-black !default;
+$kendo-treemap-title-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// The border color of the treemap title.
 /// @group charts
 $kendo-treemap-title-border: var( --kendo-component-border, initial ) !default;

package/scss/dialog/_variables.scss

@@ -59,15 +59,15 @@ $kendo-dialog-brand-colors: (
 
 // Matrix with dialog theme colors in the order: bg, color, border
 $_tc-dialog-matrix: (
-    (normal: (100, $kendo-color-white, 100)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))),
 ) !default;
 
 $_tc-dialog-dark-matrix: (
-    (normal: (160, $kendo-color-white, 160)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))),
 ) !default;
 
 $_tc-dialog-light-matrix: (
-    (normal: (50, 160, 50)),
+    (normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))),
 ) !default;
 
 /// The theme colors map for the Dialog.
@@ -85,13 +85,13 @@ $kendo-dialog-theme-colors: () !default;
 @each $ui-states in $_tc-dialog-dark-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        k-generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
     );
 }
 
 @each $ui-states in $_tc-dialog-light-matrix {
     $kendo-dialog-theme-colors: map.deep-merge(
         $kendo-dialog-theme-colors,
-        k-generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, if($kendo-enable-color-system, light, neutral), $ui-states )
     );
 }

package/scss/dock-manager/_variables.scss

@@ -28,7 +28,7 @@ $kendo-dock-manager-pane-header-border-style: solid !default;
 $kendo-dock-manager-pane-header-bg: var( --kendo-component-bg, inherit ) !default;
 /// The text color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-dock-manager-pane-header-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -68,7 +68,7 @@ $kendo-dock-manager-tabbed-pane-padding-x: null !default;
 $kendo-dock-manager-unpinned-container-width: 300px !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: $kendo-color-white !default;
+$kendo-dock-manager-unpinned-container-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) !default;
@@ -81,7 +81,7 @@ $kendo-dock-indicator-padding: map.get( $kendo-spacing, 1.5 ) !default;
 $kendo-dock-indicator-bg: $kendo-component-bg !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-dock-indicator-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-outline-width: 1px !default;
@@ -97,10 +97,10 @@ $kendo-dock-indicator-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: k-get-theme-color-var( primary-110 ) !default;
+$kendo-dock-indicator-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: $kendo-color-white !default;
+$kendo-dock-indicator-hover-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
@@ -113,7 +113,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent) !default;
+$kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-dock-manager-dock-preview-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/draggable/_variables.scss

@@ -69,4 +69,4 @@ $kendo-drop-hint-line-v-height: $kendo-drop-hint-line-h-width !default;
 
 /// Background-color of the drop hint.
 /// @group draggable
-$kendo-drop-hint-bg: k-get-theme-color-var( primary-100 ) !default;
+$kendo-drop-hint-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/drawer/_variables.scss

@@ -34,16 +34,16 @@ $kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y}
 $kendo-drawer-scrollbar-width: 7px !default;
 /// Scrollbar color of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-color: k-get-theme-color-var( neutral-90 ) !default;
+$kendo-drawer-scrollbar-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
 /// Scrollbar background of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-bg: k-get-theme-color-var( neutral-40 ) !default;
+$kendo-drawer-scrollbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) !default;
 /// Scrollbar border radius of the drawer.
 /// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
 /// Scrollbar hover color of the drawer.
 /// @group drawer
-$kendo-drawer-scrollbar-hover-color: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// Horizontal padding of the drawer item.
 /// @group drawer
@@ -81,7 +81,7 @@ $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + va
 $kendo-drawer-item-ripple-border-width: map.get( $kendo-spacing, 0.5 ) !default;
 /// The border color of the drawer item ripple
 /// @group drawer
-$kendo-drawer-item-ripple-border: k-get-theme-color-var( primary-100 ) !default;
+$kendo-drawer-item-ripple-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 /// Background color of the drawer item.
 /// @group drawer
 $kendo-drawer-item-bg: $kendo-drawer-bg !default;
@@ -90,17 +90,17 @@ $kendo-drawer-item-bg: $kendo-drawer-bg !default;
 $kendo-drawer-item-text: $kendo-drawer-text !default;
 /// Text color of the drawer item icon.
 /// @group drawer
-$kendo-drawer-item-icon-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-drawer-item-icon-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// Background color of the hovered drawer item.
 /// @group drawer
 $kendo-drawer-item-hover-bg: $kendo-drawer-item-bg !default;
 /// Text color of the hovered drawer item.
 /// @group drawer
-$kendo-drawer-item-hover-text: k-get-theme-color-var( primary-110 ) !default;
+$kendo-drawer-item-hover-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 /// Text color of the hovered drawer item icon.
 /// @group drawer
-$kendo-drawer-item-hover-icon-text: k-get-theme-color-var( primary-110 ) !default;
+$kendo-drawer-item-hover-icon-text: if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-110 )) !default;
 
 /// Background color of the focused drawer item.
 /// @group drawer
@@ -110,7 +110,7 @@ $kendo-drawer-item-focus-bg: $kendo-drawer-item-bg !default;
 $kendo-drawer-item-focus-text: $kendo-drawer-item-text !default;
 /// Box shadow of the focused drawer item.
 /// @group drawer
-$kendo-drawer-item-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
+$kendo-drawer-item-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
 /// Text color of the focused drawer item icon.
 /// @group drawer
 $kendo-drawer-item-focus-icon-text: $kendo-drawer-item-icon-text !default;
@@ -123,10 +123,10 @@ $kendo-drawer-item-selected-font-weight: var( --kendo-font-weight-bold, normal )
 $kendo-drawer-item-selected-bg: var( --kendo-selected-bg, initial ) !default;
 /// Text color of the selected drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-text: $kendo-color-black !default;
+$kendo-drawer-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), $kendo-color-black) !default;
 /// Text color of the selected drawer item icon.
 /// @group drawer
-$kendo-drawer-item-selected-icon-text: k-get-theme-color-var( primary-120 ) !default;
+$kendo-drawer-item-selected-icon-text: if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) !default;
 /// Background color of the selected and hovered drawer item.
 /// @group drawer
 $kendo-drawer-item-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;

package/scss/dropzone/_variables.scss

@@ -27,8 +27,8 @@ $kendo-dropzone-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
-$kendo-dropzone-bg: k-get-theme-color-var( neutral-10 ) !default;
-/// The text color of the DropZone.
+$kendo-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
+/// Text color of the dropzone.
 /// @group dropzone
 $kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
 /// The border color of the DropZone.
@@ -40,10 +40,10 @@ $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 $kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;
 /// The text color of the DropZone icon.
 /// @group dropzone
-$kendo-dropzone-icon-text: k-get-theme-color-var( neutral-90 ) !default;
-/// The text color of the hovered DropZone icon.
+$kendo-dropzone-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-90 )) !default;
+/// Text color of the icon when the dropzone is hovered.
 /// @group dropzone
-$kendo-dropzone-icon-hover-text: k-get-theme-color-var( primary-100 ) !default;
+$kendo-dropzone-icon-hover-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
 
 /// The font size of the DropZone hint.
 /// @group dropzone