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

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

@@ -1,152 +1,149 @@
 @use "sass:map";
 @use "./_palettes.scss" as *;
 
-// Config
-$kendo-enable-color-system: true !default;
-
 // Colors
 $_default-colors: (
     // Misc
-    app-surface: map.get( $kendo-palette-gray, "white" ),
-    on-app-surface: map.get( $kendo-palette-gray, 15 ),
-    subtle: map.get( $kendo-palette-gray, 12 ),
-    surface: map.get( $kendo-palette-gray, 2 ),
-    surface-alt: map.get( $kendo-palette-gray, "white" ),
-    border: rgba( map.get( $kendo-palette-gray, "black" ), .12),
-    border-alt: rgba( map.get( $kendo-palette-gray, "black" ), .15),
+    app-surface: map.get( $kendo-palette-neutral, 1 ),
+    on-app-surface: map.get( $kendo-palette-neutral, 15 ),
+    subtle: map.get( $kendo-palette-neutral, 11 ),
+    surface: map.get( $kendo-palette-neutral, 2 ),
+    surface-alt: map.get( $kendo-palette-neutral, "white" ),
+    border: rgba( map.get( $kendo-palette-neutral, 15 ), .12),
+    border-alt: rgba( map.get( $kendo-palette-neutral, 15 ), .15),
     // Base
-    base-subtle: map.get( $kendo-palette-gray, 4 ),
-    base-subtle-hover: map.get( $kendo-palette-gray, 6 ),
-    base-subtle-active: map.get( $kendo-palette-gray, 8 ),
-    base: map.get( $kendo-palette-gray, "white" ),
-    base-hover: map.get( $kendo-palette-gray, 4 ),
-    base-active: map.get( $kendo-palette-gray, 6 ),
-    base-emphasis: map.get( $kendo-palette-gray, 10 ),
-    base-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-base: map.get( $kendo-palette-gray, 15 ),
-    base-on-surface: map.get( $kendo-palette-gray, 15 ),
+    base-subtle: map.get( $kendo-palette-neutral, 5 ),
+    base-subtle-hover: map.get( $kendo-palette-neutral, 4 ),
+    base-subtle-active: map.get( $kendo-palette-neutral, 3 ),
+    base: map.get( $kendo-palette-neutral, 3 ),
+    base-hover: map.get( $kendo-palette-neutral, 4 ),
+    base-active: map.get( $kendo-palette-neutral, 5 ),
+    base-emphasis: map.get( $kendo-palette-gray-purple, 9 ),
+    base-on-subtle: map.get( $kendo-palette-gray-purple, 12 ),
+    on-base: map.get( $kendo-palette-gray-purple, 12 ),
+    base-on-surface: map.get( $kendo-palette-gray-purple, 12 ),
     // Primary
-    primary-subtle: map.get( $kendo-palette-indigo, 4 ),
-    primary-subtle-hover: map.get( $kendo-palette-indigo, 5 ),
-    primary-subtle-active: map.get( $kendo-palette-indigo, 6 ),
-    primary: map.get( $kendo-palette-indigo, 8 ),
-    primary-hover: map.get( $kendo-palette-indigo, 9 ),
-    primary-active: map.get( $kendo-palette-indigo, 11 ),
-    primary-emphasis: map.get( $kendo-palette-indigo, 7 ),
-    primary-on-subtle: map.get( $kendo-palette-indigo, 15 ),
-    on-primary: map.get( $kendo-palette-gray, "white" ),
-    primary-on-surface: map.get( $kendo-palette-indigo, 8 ),
+    primary-subtle: map.get( $kendo-palette-lavender, 3 ),
+    primary-subtle-hover: map.get( $kendo-palette-lavender, 4 ),
+    primary-subtle-active: map.get( $kendo-palette-lavender, 5 ),
+    primary: map.get( $kendo-palette-lavender, 10 ),
+    primary-hover: map.get( $kendo-palette-lavender, 9 ),
+    primary-active: map.get( $kendo-palette-lavender, 8 ),
+    primary-emphasis: map.get( $kendo-palette-lavender, 6 ),
+    primary-on-subtle: map.get( $kendo-palette-lavender, 12 ),
+    on-primary: map.get( $kendo-palette-neutral, "white" ),
+    primary-on-surface: map.get( $kendo-palette-lavender, 10 ),
     // Secondary
-    secondary-subtle: map.get( $kendo-palette-pink, 4 ),
-    secondary-subtle-hover: map.get( $kendo-palette-pink, 5 ),
-    secondary-subtle-active: map.get( $kendo-palette-pink, 6 ),
-    secondary: map.get( $kendo-palette-pink, 8 ),
-    secondary-hover: map.get( $kendo-palette-pink, 9 ),
-    secondary-active: map.get( $kendo-palette-pink, 11 ),
-    secondary-emphasis: map.get( $kendo-palette-pink, 7 ),
-    secondary-on-subtle: map.get( $kendo-palette-pink, 15 ),
-    on-secondary: map.get( $kendo-palette-gray, "white" ),
-    secondary-on-surface: map.get( $kendo-palette-pink, 13 ),
+    secondary-subtle: map.get( $kendo-palette-gray-purple, 10 ),
+    secondary-subtle-hover: map.get( $kendo-palette-gray-purple, 9 ),
+    secondary-subtle-active: map.get( $kendo-palette-gray-purple, 8 ),
+    secondary: map.get( $kendo-palette-gray-purple, 3 ),
+    secondary-hover: map.get( $kendo-palette-gray-purple, 4 ),
+    secondary-active: map.get( $kendo-palette-gray-purple, 5 ),
+    secondary-emphasis: map.get( $kendo-palette-gray-purple, 6 ),
+    secondary-on-subtle: map.get( $kendo-palette-neutral, "white" ),
+    on-secondary: map.get( $kendo-palette-gray-purple, 12 ),
+    secondary-on-surface: map.get( $kendo-palette-gray-purple, 12 ),
     // Tertiary
-    tertiary-subtle: map.get( $kendo-palette-dark-teal, 4 ),
-    tertiary-subtle-hover: map.get( $kendo-palette-dark-teal, 5 ),
-    tertiary-subtle-active: map.get( $kendo-palette-dark-teal, 6 ),
-    tertiary: map.get( $kendo-palette-dark-teal, 8 ),
-    tertiary-hover: map.get( $kendo-palette-dark-teal, 9 ),
-    tertiary-active: map.get( $kendo-palette-dark-teal, 11 ),
-    tertiary-emphasis: map.get( $kendo-palette-dark-teal, 7 ),
-    tertiary-on-subtle: map.get( $kendo-palette-dark-teal, 15 ),
-    on-tertiary: map.get( $kendo-palette-gray, "white" ),
-    tertiary-on-surface: map.get( $kendo-palette-dark-teal, 13 ),
+    tertiary-subtle: map.get( $kendo-palette-burgundy-red, 3 ),
+    tertiary-subtle-hover: map.get( $kendo-palette-burgundy-red, 4 ),
+    tertiary-subtle-active: map.get( $kendo-palette-burgundy-red, 5 ),
+    tertiary: map.get( $kendo-palette-burgundy-red, 10 ),
+    tertiary-hover: map.get( $kendo-palette-burgundy-red, 9 ),
+    tertiary-active: map.get( $kendo-palette-burgundy-red, 8 ),
+    tertiary-emphasis: map.get( $kendo-palette-burgundy-red, 8 ),
+    tertiary-on-subtle: map.get( $kendo-palette-burgundy-red, 12 ),
+    on-tertiary: map.get( $kendo-palette-neutral, "white" ),
+    tertiary-on-surface: map.get( $kendo-palette-burgundy-red, 12 ),
     // Info
-    info-subtle: map.get( $kendo-palette-blue, 4 ),
-    info-subtle-hover: map.get( $kendo-palette-blue, 5 ),
-    info-subtle-active: map.get( $kendo-palette-blue, 6 ),
-    info: map.get( $kendo-palette-blue, 8 ),
-    info-hover: map.get( $kendo-palette-blue, 9 ),
-    info-active: map.get( $kendo-palette-blue, 11 ),
-    info-emphasis: map.get( $kendo-palette-blue, 7 ),
-    info-on-subtle: map.get( $kendo-palette-blue, 15 ),
-    on-info: map.get( $kendo-palette-gray, "white" ),
-    info-on-surface: map.get( $kendo-palette-blue, 13 ),
+    info-subtle: map.get( $kendo-palette-opulent-blue, 3 ),
+    info-subtle-hover: map.get( $kendo-palette-opulent-blue, 4 ),
+    info-subtle-active: map.get( $kendo-palette-opulent-blue, 5 ),
+    info: map.get( $kendo-palette-opulent-blue, 9 ),
+    info-hover: map.get( $kendo-palette-opulent-blue, 10 ),
+    info-active: map.get( $kendo-palette-opulent-blue, 11 ),
+    info-emphasis: map.get( $kendo-palette-opulent-blue, 6 ),
+    info-on-subtle: map.get( $kendo-palette-opulent-blue, 13 ),
+    on-info: map.get( $kendo-palette-neutral, "white" ),
+    info-on-surface: map.get( $kendo-palette-opulent-blue, 11 ),
     // Success
-    success-subtle: map.get( $kendo-palette-green, 4 ),
-    success-subtle-hover: map.get( $kendo-palette-green, 5 ),
-    success-subtle-active: map.get( $kendo-palette-green, 6 ),
-    success: map.get( $kendo-palette-green, 8 ),
-    success-hover: map.get( $kendo-palette-green, 9 ),
-    success-active: map.get( $kendo-palette-green, 11 ),
-    success-emphasis: map.get( $kendo-palette-green, 7 ),
-    success-on-subtle: map.get( $kendo-palette-green, 15 ),
-    on-success: map.get( $kendo-palette-gray, "white" ),
-    success-on-surface: map.get( $kendo-palette-green, 13 ),
+    success-subtle: map.get( $kendo-palette-sour-apple-green, 2 ),
+    success-subtle-hover: map.get( $kendo-palette-sour-apple-green, 3 ),
+    success-subtle-active: map.get( $kendo-palette-sour-apple-green, 4 ),
+    success: map.get( $kendo-palette-sour-apple-green, 11 ),
+    success-hover: map.get( $kendo-palette-sour-apple-green, 12 ),
+    success-active: map.get( $kendo-palette-sour-apple-green, 13 ),
+    success-emphasis: map.get( $kendo-palette-sour-apple-green, 6 ),
+    success-on-subtle: map.get( $kendo-palette-sour-apple-green, 14 ),
+    on-success: map.get( $kendo-palette-neutral, "white" ),
+    success-on-surface: map.get( $kendo-palette-sour-apple-green, 12 ),
     // Warning
-    warning-subtle: map.get( $kendo-palette-yellow, 4 ),
-    warning-subtle-hover: map.get( $kendo-palette-yellow, 5 ),
-    warning-subtle-active: map.get( $kendo-palette-yellow, 6 ),
-    warning: map.get( $kendo-palette-yellow, 8 ),
-    warning-hover: map.get( $kendo-palette-yellow, 9 ),
-    warning-active: map.get( $kendo-palette-yellow, 11 ),
-    warning-emphasis: map.get( $kendo-palette-yellow, 7 ),
-    warning-on-subtle: map.get( $kendo-palette-yellow, 15 ),
-    on-warning: map.get( $kendo-palette-gray, "black" ),
-    warning-on-surface: map.get( $kendo-palette-yellow, 8 ),
+    warning-subtle: map.get( $kendo-palette-yellow-amber, 3 ),
+    warning-subtle-hover: map.get( $kendo-palette-yellow-amber, 4 ),
+    warning-subtle-active: map.get( $kendo-palette-yellow-amber, 5 ),
+    warning: map.get( $kendo-palette-yellow-amber, 7 ),
+    warning-hover: map.get( $kendo-palette-yellow-amber, 8 ),
+    warning-active: map.get( $kendo-palette-yellow-amber, 9 ),
+    warning-emphasis: map.get( $kendo-palette-yellow-amber, 6 ),
+    warning-on-subtle: map.get( $kendo-palette-yellow-amber, 13 ),
+    on-warning: map.get( $kendo-palette-neutral, "black" ),
+    warning-on-surface: map.get( $kendo-palette-yellow-amber, 13 ),
     // Error
-    error-subtle: map.get( $kendo-palette-red, 4 ),
-    error-subtle-hover: map.get( $kendo-palette-red, 5 ),
-    error-subtle-active: map.get( $kendo-palette-red, 6 ),
-    error: map.get( $kendo-palette-red, 8 ),
-    error-hover: map.get( $kendo-palette-red, 9 ),
-    error-active: map.get( $kendo-palette-red, 11 ),
-    error-emphasis: map.get( $kendo-palette-red, 7 ),
-    error-on-subtle: map.get( $kendo-palette-red, 15 ),
-    on-error: map.get( $kendo-palette-gray, "white" ),
-    error-on-surface: map.get( $kendo-palette-red, 13 ),
+    error-subtle: map.get( $kendo-palette-red, 2 ),
+    error-subtle-hover: map.get( $kendo-palette-red, 3 ),
+    error-subtle-active: map.get( $kendo-palette-red, 4 ),
+    error: map.get( $kendo-palette-red, 10 ),
+    error-hover: map.get( $kendo-palette-red, 11 ),
+    error-active: map.get( $kendo-palette-red, 12 ),
+    error-emphasis: map.get( $kendo-palette-red, 6 ),
+    error-on-subtle: map.get( $kendo-palette-red, 12 ),
+    on-error: map.get( $kendo-palette-neutral, "white" ),
+    error-on-surface: map.get( $kendo-palette-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, 2 ),
-    light-hover: map.get( $kendo-palette-gray, 4 ),
-    light-active: map.get( $kendo-palette-gray, 6 ),
-    light-emphasis: map.get( $kendo-palette-gray, 5 ),
-    light-on-subtle: map.get( $kendo-palette-gray, 15 ),
-    on-light: map.get( $kendo-palette-gray, "black" ),
-    light-on-surface: map.get( $kendo-palette-gray, 4 ),
+    light-subtle: map.get( $kendo-palette-neutral, 1 ),
+    light-subtle-hover: map.get( $kendo-palette-neutral, 2 ),
+    light-subtle-active: map.get( $kendo-palette-neutral, 3 ),
+    light: map.get( $kendo-palette-neutral, 2 ),
+    light-hover: map.get( $kendo-palette-neutral, 3 ),
+    light-active: map.get( $kendo-palette-neutral, 4 ),
+    light-emphasis: map.get( $kendo-palette-neutral, 6 ),
+    light-on-subtle: map.get( $kendo-palette-neutral, 15 ),
+    on-light: map.get( $kendo-palette-neutral, 15 ),
+    light-on-surface: map.get( $kendo-palette-neutral, 2 ),
     // 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, 11 ),
-    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, 13 ),
+    dark-subtle: map.get( $kendo-palette-neutral, 7 ),
+    dark-subtle-hover: map.get( $kendo-palette-neutral, 6 ),
+    dark-subtle-active: map.get( $kendo-palette-neutral, 5 ),
+    dark: map.get( $kendo-palette-neutral, 13 ),
+    dark-hover: map.get( $kendo-palette-neutral, 12 ),
+    dark-active: map.get( $kendo-palette-neutral, 11 ),
+    dark-emphasis: map.get( $kendo-palette-neutral, 9 ),
+    dark-on-subtle: map.get( $kendo-palette-neutral, 9 ),
+    on-dark: map.get( $kendo-palette-neutral, "white" ),
+    dark-on-surface: map.get( $kendo-palette-neutral, 13 ),
     // 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, 11 ),
-    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, 13 ),
+    inverse-subtle: map.get( $kendo-palette-neutral, 7 ),
+    inverse-subtle-hover: map.get( $kendo-palette-neutral, 6 ),
+    inverse-subtle-active: map.get( $kendo-palette-neutral, 5 ),
+    inverse: map.get( $kendo-palette-neutral, 13 ),
+    inverse-hover: map.get( $kendo-palette-neutral, 12 ),
+    inverse-active: map.get( $kendo-palette-neutral, 11 ),
+    inverse-emphasis: map.get( $kendo-palette-neutral, 9 ),
+    inverse-on-subtle: map.get( $kendo-palette-neutral, 9 ),
+    on-inverse: map.get( $kendo-palette-neutral, "white" ),
+    inverse-on-surface: map.get( $kendo-palette-neutral, 13 ),
     // Series A
-    series-a: map.get( $kendo-palette-deep-purple, 8 ),
-    series-a-bold: map.get( $kendo-palette-deep-purple, 10 ),
-    series-a-bolder: map.get( $kendo-palette-deep-purple, 12 ),
-    series-a-subtle: map.get( $kendo-palette-deep-purple, 6 ),
-    series-a-subtler: map.get( $kendo-palette-deep-purple, 4 ),
+    series-a: map.get( $kendo-palette-purple, 8 ),
+    series-a-bold: map.get( $kendo-palette-purple, 10 ),
+    series-a-bolder: map.get( $kendo-palette-purple, 12 ),
+    series-a-subtle: map.get( $kendo-palette-purple, 6 ),
+    series-a-subtler: map.get( $kendo-palette-purple, 4 ),
     // Series B
-    series-b: map.get( $kendo-palette-baby-blue, 8 ),
-    series-b-bold: map.get( $kendo-palette-baby-blue, 10 ),
-    series-b-bolder: map.get( $kendo-palette-baby-blue, 12 ),
-    series-b-subtle: map.get( $kendo-palette-baby-blue, 6 ),
-    series-b-subtler: map.get( $kendo-palette-baby-blue, 4 ),
+    series-b: map.get( $kendo-palette-blue, 8 ),
+    series-b-bold: map.get( $kendo-palette-blue, 10 ),
+    series-b-bolder: map.get( $kendo-palette-blue, 12 ),
+    series-b-subtle: map.get( $kendo-palette-blue, 6 ),
+    series-b-subtler: map.get( $kendo-palette-blue, 4 ),
     // Series C
     series-c: map.get( $kendo-palette-teal, 8 ),
     series-c-bold: map.get( $kendo-palette-teal, 10 ),
@@ -154,23 +151,23 @@ $_default-colors: (
     series-c-subtle: map.get( $kendo-palette-teal, 6 ),
     series-c-subtler: map.get( $kendo-palette-teal, 4 ),
     // Series D
-    series-d: map.get( $kendo-palette-canary-yellow, 8 ),
-    series-d-bold: map.get( $kendo-palette-canary-yellow, 10 ),
-    series-d-bolder: map.get( $kendo-palette-canary-yellow, 12 ),
-    series-d-subtle: map.get( $kendo-palette-canary-yellow, 6 ),
-    series-d-subtler: map.get( $kendo-palette-canary-yellow, 4 ),
+    series-d: map.get( $kendo-palette-yellow, 8 ),
+    series-d-bold: map.get( $kendo-palette-yellow, 10 ),
+    series-d-bolder: map.get( $kendo-palette-yellow, 12 ),
+    series-d-subtle: map.get( $kendo-palette-yellow, 6 ),
+    series-d-subtler: map.get( $kendo-palette-yellow, 4 ),
     // Series Е
-    series-e: map.get( $kendo-palette-candy-red, 8 ),
-    series-e-bold: map.get( $kendo-palette-candy-red, 10 ),
-    series-e-bolder: map.get( $kendo-palette-candy-red, 12 ),
-    series-e-subtle: map.get( $kendo-palette-candy-red, 6 ),
-    series-e-subtler: map.get( $kendo-palette-candy-red, 4 ),
+    series-e: map.get( $kendo-palette-red, 8 ),
+    series-e-bold: map.get( $kendo-palette-red, 10 ),
+    series-e-bolder: map.get( $kendo-palette-red, 12 ),
+    series-e-subtle: map.get( $kendo-palette-red, 6 ),
+    series-e-subtler: map.get( $kendo-palette-red, 4 ),
     // Series F
-    series-f: map.get( $kendo-palette-forest-green, 8 ),
-    series-f-bold: map.get( $kendo-palette-forest-green, 10 ),
-    series-f-bolder: map.get( $kendo-palette-forest-green, 12 ),
-    series-f-subtle: map.get( $kendo-palette-forest-green, 6 ),
-    series-f-subtler: map.get( $kendo-palette-forest-green, 4 ),
+    series-f: map.get( $kendo-palette-green, 8 ),
+    series-f-bold: map.get( $kendo-palette-green, 10 ),
+    series-f-bolder: map.get( $kendo-palette-green, 12 ),
+    series-f-subtle: map.get( $kendo-palette-green, 6 ),
+    series-f-subtler: map.get( $kendo-palette-green, 4 ),
 ) !default;
 
 /// The global default Colors map.

package/scss/core/elevation/index.import.scss

@@ -2,49 +2,40 @@
 
 $_default-elevation: (
     1: (
-        0px 1px 3px 0px rgba(0, 0, 0, 0.2),
-        0px 2px 1px 0px rgba(0, 0, 0, 0.12),
-        0px 1px 1px 0px rgba(0, 0, 0, 0.14)
+        0px 1px 2px 0px rgba(0, 0, 0, 0.30),
+        0px 1px 3px 1px rgba(0, 0, 0, 0.15)
     ),
     2: (
-        0px 1px 5px 0px rgba(0, 0, 0, 0.2),
-        0px 3px 1px 0px rgba(0, 0, 0, 0.12),
-        0px 2px 2px 0px rgba(0, 0, 0, 0.14)
+        0px 1px 2px 0px rgba(0, 0, 0, 0.30),
+        0px 2px 6px 2px rgba(0, 0, 0, 0.15)
     ),
     3: (
-        0px 1px 8px 0px rgba(0, 0, 0, 0.2),
-        0px 3px 3px 0px rgba(0, 0, 0, 0.12),
-        0px 3px 4px 0px rgba(0, 0, 0, 0.14)
+        0px 4px 8px 3px rgba(0, 0, 0, 0.15),
+        0px 1px 3px 0px rgba(0, 0, 0, 0.30)
     ),
     4: (
-        0px 2px 4px 0px rgba(0, 0, 0, 0.2),
-        0px 1px 10px 0px rgba(0, 0, 0, 0.12),
-        0px 4px 5px 0px rgba(0, 0, 0, 0.14)
+        0px 6px 10px 4px rgba(0, 0, 0, 0.15),
+        0px 2px 3px 0px rgba(0, 0, 0, 0.30)
     ),
     5: (
-        0px 3px 5px 0px rgba(0, 0, 0, 0.2),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14)
+        0px 4px 4px 0px rgba(0, 0, 0, 0.30),
+        0px 8px 12px 6px rgba(0, 0, 0, 0.15)
     ),
     6: (
-        0px 5px 5px 0px rgba(0, 0, 0, 0.2),
-        0px 3px 14px 0px rgba(0, 0, 0, 0.12),
-        0px 8px 10px 0px rgba(0, 0, 0, 0.14)
+        0px 6px 14px 6px rgba(0, 0, 0, 0.15),
+        0px 4px 4px 0px rgba(0, 0, 0, 0.30)
     ),
     7: (
-        0px 7px 8px 0px rgba(0, 0, 0, 0.2),
-        0px 5px 22px 0px rgba(0, 0, 0, 0.12),
-        0px 12px 17px 0px rgba(0, 0, 0, 0.14)
+        0px 7px 16px 7px rgba(0, 0, 0, 0.15),
+        0px 5px 5px 0px rgba(0, 0, 0, 0.30)
     ),
     8: (
-        0px 8px 10px rgba(0, 0, 0, 0.2),
-        0px 6px 30px rgba(0, 0, 0, 0.12),
-        0px 16px 24px rgba(0, 0, 0, 0.14)
+        0px 8px 18px 8px rgba(0, 0, 0, 0.15),
+        0px 6px 5px 0px rgba(0, 0, 0, 0.30)
     ),
     9: (
-        0px 11px 15px rgba(0, 0, 0, 0.2),
-        0px 9px 46px rgba(0, 0, 0, 0.12),
-        0px 24px 38px rgba(0, 0, 0, 0.14)
+        0px 9px 20px 9px rgba(0, 0, 0, 0.15),
+        0px 7px 6px 0px rgba(0, 0, 0, 0.30)
     )
 );
 

package/scss/core/typography/index.import.scss

@@ -21,13 +21,13 @@ $kendo-font-size-xl: 1.25rem !default;
 
 /// The base line height across all components.
 /// @group typography
-$kendo-line-height: calc(28 / 14) !default;
+$kendo-line-height: calc(20 / 14) !default;
 /// The extra small line height across all components.
 /// @group typography
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
 /// @group typography
-$kendo-line-height-sm: 1.2 !default;
+$kendo-line-height-sm: 1.33 !default;
 /// The medium line height across all components.
 /// @group typography
 $kendo-line-height-md: $kendo-line-height !default;
@@ -43,25 +43,25 @@ $kendo-line-height-em: calc( #{$kendo-line-height} * 1em ) !default;
 $kendo-letter-spacing: null !default;
 /// The tightest letter spacing across all components.
 /// @group typography
-$kendo-letter-spacing-tightest: -2.5px !default;
+$kendo-letter-spacing-tightest: -.5px !default;
 /// Slightly looser than the tighter letter spacing across all components.
 /// @group typography
-$kendo-letter-spacing-tighter: -1.5px !default;
+$kendo-letter-spacing-tighter: -.25px !default;
 /// Moderately tight letter spacing across all components.
 /// @group typography
-$kendo-letter-spacing-tight: -.5px !default;
+$kendo-letter-spacing-tight: -.1px !default;
 /// The normal letter spacing across all components.
 /// @group typography
-$kendo-letter-spacing-normal: 0px !default;
+$kendo-letter-spacing-normal: .25px !default;
 /// Wide letter spacing across all components
 /// @group typography
-$kendo-letter-spacing-wide: .15px !default;
+$kendo-letter-spacing-wide: .1px !default;
 /// Slightly wider than the wide letter spacing across all components.
 /// @group typography
 $kendo-letter-spacing-wider: .25px !default;
 /// The widest letter spacing across all components.
 /// @group typography
-$kendo-letter-spacing-widest: .35px !default;
+$kendo-letter-spacing-widest: .5px !default;
 
 /// The sans-serif font family across all components.
 /// @group typography

package/scss/dataviz/_variables.scss

@@ -1,57 +1,56 @@
 @use "sass:color";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.import.scss" as *;
-@use "../core/color-system/_functions.scss" as *;
 
 // Chart
 
 /// The first base series color and its light and dark shades.
 /// @group charts
-$kendo-series-a: if($kendo-enable-color-system, k-color( series-a ), get-base-hue( purple, 500 )) !default;
-$kendo-series-a-dark: if($kendo-enable-color-system, k-color( series-a-bold ), color.mix(black, $kendo-series-a, 25%)) !default;
-$kendo-series-a-darker: if($kendo-enable-color-system, k-color( series-a-bolder ), color.mix(black, $kendo-series-a, 50%)) !default;
-$kendo-series-a-light: if($kendo-enable-color-system, k-color( series-a-subtle ), color.mix(white, $kendo-series-a, 25%)) !default;
-$kendo-series-a-lighter: if($kendo-enable-color-system, k-color( series-a-subtler ), color.mix(white, $kendo-series-a, 50%)) !default;
+$kendo-series-a: k-color(series-a) !default;
+$kendo-series-a-dark: k-color(series-a-bold) !default;
+$kendo-series-a-darker: k-color(series-a-bolder) !default;
+$kendo-series-a-light: k-color(series-a-subtle) !default;
+$kendo-series-a-lighter: k-color(series-a-subtler) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$kendo-series-b: if($kendo-enable-color-system, k-color( series-b ), get-base-hue( blue, 500 )) !default;
-$kendo-series-b-dark: if($kendo-enable-color-system, k-color( series-b-bold ), color.mix(black, $kendo-series-b, 25%)) !default;
-$kendo-series-b-darker: if($kendo-enable-color-system, k-color( series-b-bolder ), color.mix(black, $kendo-series-b, 50%)) !default;
-$kendo-series-b-light: if($kendo-enable-color-system, k-color( series-b-subtle ), color.mix(white, $kendo-series-b, 25%)) !default;
-$kendo-series-b-lighter: if($kendo-enable-color-system, k-color( series-b-subtler ), color.mix(white, $kendo-series-b, 50%)) !default;
+$kendo-series-b: k-color(series-b) !default;
+$kendo-series-b-dark: k-color(series-b-bold) !default;
+$kendo-series-b-darker: k-color(series-b-bolder) !default;
+$kendo-series-b-light: k-color(series-b-subtle) !default;
+$kendo-series-b-lighter: k-color(series-b-subtler) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$kendo-series-c: if($kendo-enable-color-system, k-color( series-c ), get-base-hue( teal, 500 )) !default;
-$kendo-series-c-dark: if($kendo-enable-color-system, k-color( series-c-bold ), color.mix(black, $kendo-series-c, 25%)) !default;
-$kendo-series-c-darker: if($kendo-enable-color-system, k-color( series-c-bolder ), color.mix(black, $kendo-series-c, 50%)) !default;
-$kendo-series-c-light: if($kendo-enable-color-system, k-color( series-c-subtle ), color.mix(white, $kendo-series-c, 25%)) !default;
-$kendo-series-c-lighter: if($kendo-enable-color-system, k-color( series-c-subtler ), color.mix(white, $kendo-series-c, 50%)) !default;
+$kendo-series-c: k-color(series-c) !default;
+$kendo-series-c-dark: k-color(series-c-bold) !default;
+$kendo-series-c-darker: k-color(series-c-bolder) !default;
+$kendo-series-c-light: k-color(series-c-subtle) !default;
+$kendo-series-c-lighter: k-color(series-c-subtler) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-d: if($kendo-enable-color-system, k-color( series-d ), get-base-hue( yellow, 500 )) !default;
-$kendo-series-d-dark: if($kendo-enable-color-system, k-color( series-d-bold ), color.mix(black, $kendo-series-d, 25%)) !default;
-$kendo-series-d-darker: if($kendo-enable-color-system, k-color( series-d-bolder ), color.mix(black, $kendo-series-d, 50%)) !default;
-$kendo-series-d-light: if($kendo-enable-color-system, k-color( series-d-subtle ), color.mix(white, $kendo-series-d, 25%)) !default;
-$kendo-series-d-lighter: if($kendo-enable-color-system, k-color( series-d-subtler ), color.mix(white, $kendo-series-d, 50%)) !default;
+$kendo-series-d: k-color(series-d) !default;
+$kendo-series-d-dark: k-color(series-d-bold) !default;
+$kendo-series-d-darker: k-color(series-d-bolder) !default;
+$kendo-series-d-light: k-color(series-d-subtle) !default;
+$kendo-series-d-lighter: k-color(series-d-subtler) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-e: if($kendo-enable-color-system, k-color( series-e ), get-base-hue( red, 500 )) !default;
-$kendo-series-e-dark: if($kendo-enable-color-system, k-color( series-e-bold ), color.mix(black, $kendo-series-e, 25%)) !default;
-$kendo-series-e-darker: if($kendo-enable-color-system, k-color( series-e-bolder ), color.mix(black, $kendo-series-e, 50%)) !default;
-$kendo-series-e-light: if($kendo-enable-color-system, k-color( series-e-subtle ), color.mix(white, $kendo-series-e, 25%)) !default;
-$kendo-series-e-lighter: if($kendo-enable-color-system, k-color( series-e-subtler ), color.mix(white, $kendo-series-e, 50%)) !default;
+$kendo-series-e: k-color(series-e) !default;
+$kendo-series-e-dark: k-color(series-e-bold) !default;
+$kendo-series-e-darker: k-color(series-e-bolder) !default;
+$kendo-series-e-light: k-color(series-e-subtle) !default;
+$kendo-series-e-lighter: k-color(series-e-subtler) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$kendo-series-f: if($kendo-enable-color-system, k-color( series-f ), get-base-hue( green, 500 )) !default;
-$kendo-series-f-dark: if($kendo-enable-color-system, k-color( series-f-bold ), color.mix(black, $kendo-series-f, 25%)) !default;
-$kendo-series-f-darker: if($kendo-enable-color-system, k-color( series-f-bolder ), color.mix(black, $kendo-series-f, 50%)) !default;
-$kendo-series-f-light: if($kendo-enable-color-system, k-color( series-f-subtle ), color.mix(white, $kendo-series-f, 25%)) !default;
-$kendo-series-f-lighter: if($kendo-enable-color-system, k-color( series-f-subtler ), color.mix(white, $kendo-series-f, 50%)) !default;
+$kendo-series-f: k-color(series-f) !default;
+$kendo-series-f-dark: k-color(series-f-bold) !default;
+$kendo-series-f-darker: k-color(series-f-bolder) !default;
+$kendo-series-f-light: k-color(series-f-subtle) !default;
+$kendo-series-f-lighter: k-color(series-f-subtler) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
@@ -99,13 +98,13 @@ $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-major-lines: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;
+$kendo-chart-minor-lines: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 
-$kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
+$kendo-chart-inactive: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-area-opacity: .6 !default;
 $kendo-chart-area-inactive-opacity: .1 !default;
 $kendo-chart-line-inactive-opacity: .3 !default;
@@ -115,24 +114,24 @@ $kendo-chart-tooltip-padding-y: k-spacing(0.5) !default;
 
 $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
-$kendo-chart-bg: $kendo-component-bg !default;
-$kendo-chart-text: $kendo-component-text !default;
-$kendo-chart-border: $kendo-component-border !default;
+$kendo-chart-bg: k-color(surface) !default;
+$kendo-chart-text: k-color(on-app-surface) !default;
+$kendo-chart-border: k-color(border) !default;
 
-$kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-crosshair-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
-$kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-chart-bg, 1 )) !default;
-$kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
+$kendo-chart-crosshair-shared-tooltip-background: k-color(base-subtle) !default;
+$kendo-chart-crosshair-shared-tooltip-border: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
-$kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
-$kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-notes-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+$kendo-chart-notes-lines: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
-$kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
+$kendo-chart-error-bars-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
 $kendo-chart-selection-handle-size: 22px !default;
-$kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
-$kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
+$kendo-chart-selection-border-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
 $kendo-chart-computed-title-height: 0px !default;
 
@@ -144,8 +143,16 @@ $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-treemap-padding-x: k-spacing(2) !default;
 $kendo-treemap-padding-y: k-spacing(0.5) !default;
 
+$kendo-treemap-text: k-color(on-app-surface) !default;
+$kendo-treemap-bg: k-color(surface-alt) !default;
+$kendo-treemap-border: k-color(border) !default;
+
+$kendo-treemap-title-text: k-color(on-app-surface) !default;
+$kendo-treemap-title-bg: k-color(app-surface) !default;
+$kendo-treemap-title-border: k-color(border) !default;
+
 // Chart Overlay
-$kendo-chart-overlay-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 )) !default;
+$kendo-chart-overlay-bg: k-color(surface) !default;
 
 // No Data
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
@@ -254,5 +261,11 @@ $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
     $kendo-chart-tooltip-padding-x: $kendo-chart-tooltip-padding-x,
     $kendo-chart-tooltip-padding-y: $kendo-chart-tooltip-padding-y,
     $kendo-treemap-padding-x: $kendo-treemap-padding-x,
-    $kendo-treemap-padding-y: $kendo-treemap-padding-y
+    $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-treemap-text: $kendo-treemap-text,
+    $kendo-treemap-bg: $kendo-treemap-bg,
+    $kendo-treemap-border: $kendo-treemap-border,
+    $kendo-treemap-title-text: $kendo-treemap-title-text,
+    $kendo-treemap-title-bg: $kendo-treemap-title-bg,
+    $kendo-treemap-title-border: $kendo-treemap-title-border
 );

package/scss/dialog/_theme.scss

@@ -22,7 +22,7 @@
 
     // Content scroll border
     .k-dialog-content.k-scroll {
-        border-color: $kendo-component-border;
+        border-color: k-color(border);
     }
 
 }