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

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

@@ -4,146 +4,146 @@
 // 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 ),
@@ -151,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

@@ -114,7 +114,7 @@ $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: k-color(surface-alt) !default;
+$kendo-chart-bg: k-color(surface) !default;
 $kendo-chart-text: k-color(on-app-surface) !default;
 $kendo-chart-border: k-color(border) !default;
 

package/scss/dialog/_variables.scss

@@ -22,11 +22,15 @@ $kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
 $kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
 /// The width of the top border of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-border-width: 1px !default;
+$kendo-dialog-buttongroup-border-width: 0 !default;
 /// The spacing between the Dialog action buttons.
 /// @group dialog
 $kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
+/// The background color of the Dialog.
+/// @group dialog
+$kendo-dialog-bg: k-color(surface) !default;
+
 /// The theme colors map for the Dialog.
 /// @group dialog
 $kendo-dialog-theme-colors: (
@@ -43,5 +47,6 @@ $kendo-dialog-theme-colors: (
     $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
     $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
     $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-bg: $kendo-dialog-bg,
     $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
 );

package/scss/dock-manager/_variables.scss

@@ -14,10 +14,10 @@ $kendo-dock-manager-border: k-color(border) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: k-spacing(1) !default;
+$kendo-dock-manager-pane-header-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-x: k-spacing(6) !default;
+$kendo-dock-manager-pane-header-padding-x: k-spacing(4) !default;
 /// The width of the border around the pane header in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
@@ -26,7 +26,7 @@ $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !
 $kendo-dock-manager-pane-header-border-style: solid !default;
 /// The background color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-bg: k-color(surface-alt) !default;
+$kendo-dock-manager-pane-header-bg: k-color(surface) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -42,7 +42,7 @@ $kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit )
 $kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The font weight of the pane title in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
@@ -52,31 +52,31 @@ $kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight-normal, nor
 $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-header-padding-x !default;
 /// The vertical padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-x !default;
+$kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-header-padding-y !default;
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: unset !default;
+$kendo-dock-manager-tabbed-pane-padding-y: k-spacing( 6 ) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-x: unset !default;
+$kendo-dock-manager-tabbed-pane-padding-x: null !default;
 
 /// The width of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $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: k-color(surface) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-shadow: 4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03) !default;
+$kendo-dock-manager-unpinned-container-shadow: k-elevation(7) !default;
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: k-spacing(1.5) !default;
+$kendo-dock-indicator-padding: k-spacing(2) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: k-color(app-surface) !default;
+$kendo-dock-indicator-bg: k-color(surface-alt) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-text: k-color(primary) !default;
@@ -91,14 +91,14 @@ $kendo-dock-indicator-outline-style: solid !default;
 $kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) ) !default;
+$kendo-dock-indicator-shadow: k-elevation(5) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
 $kendo-dock-indicator-hover-bg: k-color(primary-hover) !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: k-color(on-primary) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
@@ -111,7 +111,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
 $kendo-dock-manager-dock-preview-border-radius: k-border-radius(sm) !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-color(primary) 16%, transparent) !default;
+$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary-active) 12%, transparent) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-dock-preview-border: k-color(primary) !default;

package/scss/draggable/_variables.scss

@@ -9,7 +9,7 @@ $kendo-drag-hint-border-width: 0px !default;
 $kendo-drag-hint-border-radius: 9999px !default;
 $kendo-drag-hint-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-drag-hint-font-family: var( --kendo-font-family, inherit ) !default;
-$kendo-drag-hint-line-height: math.div( 20, 14 ) !default;
+$kendo-drag-hint-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-drag-hint-bg: k-color(base-subtle) !default;
 $kendo-drag-hint-text: k-color(on-app-surface) !default;

package/scss/drawer/_layout.scss

@@ -1,4 +1,6 @@
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/drawer/_layout.scss" as *;
+@use "./_variables.scss" as *;
 
 
 @mixin kendo-drawer--layout() {

package/scss/drawer/_theme.scss

@@ -6,15 +6,4 @@
 
     @include kendo-drawer--theme-base();
 
-    .k-drawer-item {
-        &.k-selected {
-
-            &:focus,
-            &.k-focus {
-                background-color: $kendo-drawer-focus-bg;
-                box-shadow: $kendo-drawer-focus-shadow;
-            }
-        }
-    }
-
 }