@progress/kendo-theme-fluent 12.0.0-dev.0 → 12.0.0-dev.2

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

@@ -4,170 +4,170 @@
 // 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 ),
+    app-surface: map.get( $kendo-palette-neutral-gray, 1 ),
+    on-app-surface: map.get( $kendo-palette-neutral-gray, 15 ),
+    subtle: map.get( $kendo-palette-neutral-gray, 11 ),
+    surface: map.get( $kendo-palette-neutral-gray, "white" ),
+    surface-alt: map.get( $kendo-palette-neutral-gray, "white" ),
+    border: rgba( map.get( $kendo-palette-neutral-gray, 15 ), .72),
+    border-alt: map.get( $kendo-palette-neutral-gray, "black" ),
     // 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 ),
+    base-subtle: map.get( $kendo-palette-neutral-gray, 2 ),
+    base-subtle-hover: map.get( $kendo-palette-neutral-gray, 4 ),
+    base-subtle-active: map.get( $kendo-palette-neutral-gray, 5 ),
+    base: map.get( $kendo-palette-neutral-gray, "white" ),
+    base-hover: map.get( $kendo-palette-neutral-gray, 2 ),
+    base-active: map.get( $kendo-palette-neutral-gray, 4 ),
+    base-emphasis: map.get( $kendo-palette-neutral-gray, 6 ),
+    base-on-subtle: map.get( $kendo-palette-neutral-gray, 15 ),
+    on-base: map.get( $kendo-palette-neutral-gray, 15 ),
+    base-on-surface: map.get( $kendo-palette-neutral-gray, 15 ),
     // 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 ),
+    primary-subtle: map.get( $kendo-palette-blue, 1 ),
+    primary-subtle-hover: map.get( $kendo-palette-blue, 2 ),
+    primary-subtle-active: map.get( $kendo-palette-blue, 4 ),
+    primary: map.get( $kendo-palette-blue, 7 ),
+    primary-hover: map.get( $kendo-palette-blue, 8 ),
+    primary-active: map.get( $kendo-palette-blue, 9 ),
+    primary-emphasis: map.get( $kendo-palette-blue, 3 ),
+    primary-on-subtle: map.get( $kendo-palette-blue, 12 ),
+    on-primary: map.get( $kendo-palette-neutral-gray, "white" ),
+    primary-on-surface: map.get( $kendo-palette-blue, 7 ),
     // 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 ),
+    secondary-subtle: map.get( $kendo-palette-neutral-gray, 3 ),
+    secondary-subtle-hover: map.get( $kendo-palette-neutral-gray, 1 ),
+    secondary-subtle-active: map.get( $kendo-palette-neutral-gray, "white" ),
+    secondary: map.get( $kendo-palette-neutral-gray, 4 ),
+    secondary-hover: map.get( $kendo-palette-neutral-gray, 2 ),
+    secondary-active: map.get( $kendo-palette-neutral-gray, 1 ),
+    secondary-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
+    secondary-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
+    on-secondary: map.get( $kendo-palette-neutral-gray, 12 ),
+    secondary-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
     // 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 ),
+    tertiary-subtle: map.get( $kendo-palette-berry, 1 ),
+    tertiary-subtle-hover: map.get( $kendo-palette-berry, 2 ),
+    tertiary-subtle-active: map.get( $kendo-palette-berry, 3 ),
+    tertiary: map.get( $kendo-palette-berry, 9 ),
+    tertiary-hover: map.get( $kendo-palette-berry, 10 ),
+    tertiary-active: map.get( $kendo-palette-berry, 11 ),
+    tertiary-emphasis: map.get( $kendo-palette-berry, 3 ),
+    tertiary-on-subtle: map.get( $kendo-palette-berry, 10 ),
+    on-tertiary: map.get( $kendo-palette-neutral-gray, "white" ),
+    tertiary-on-surface: map.get( $kendo-palette-berry, 9 ),
     // 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 ),
+    info-subtle: map.get( $kendo-palette-steel-blue, 1 ),
+    info-subtle-hover: map.get( $kendo-palette-steel-blue, 2 ),
+    info-subtle-active: map.get( $kendo-palette-steel-blue, 3 ),
+    info: map.get( $kendo-palette-steel-blue, 8 ),
+    info-hover: map.get( $kendo-palette-steel-blue, 9 ),
+    info-active: map.get( $kendo-palette-steel-blue, 7 ),
+    info-emphasis: map.get( $kendo-palette-steel-blue, 3 ),
+    info-on-subtle: map.get( $kendo-palette-steel-blue, 12 ),
+    on-info: map.get( $kendo-palette-neutral-gray, 15 ),
+    info-on-surface: map.get( $kendo-palette-steel-blue, 10 ),
     // 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 ),
+    success-subtle: map.get( $kendo-palette-green, 1 ),
+    success-subtle-hover: map.get( $kendo-palette-green, 2 ),
+    success-subtle-active: map.get( $kendo-palette-green, 3 ),
+    success: map.get( $kendo-palette-green, 11 ),
+    success-hover: map.get( $kendo-palette-green, 12 ),
+    success-active: map.get( $kendo-palette-green, 13 ),
+    success-emphasis: map.get( $kendo-palette-green, 3 ),
+    success-on-subtle: map.get( $kendo-palette-green, 12 ),
+    on-success: map.get( $kendo-palette-neutral-gray, "white" ),
+    success-on-surface: map.get( $kendo-palette-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 ),
+    warning-subtle: map.get( $kendo-palette-orange, 1 ),
+    warning-subtle-hover: map.get( $kendo-palette-orange, 2 ),
+    warning-subtle-active: map.get( $kendo-palette-orange, 3 ),
+    warning: map.get( $kendo-palette-orange, 8 ),
+    warning-hover: map.get( $kendo-palette-orange, 9 ),
+    warning-active: map.get( $kendo-palette-orange, 10 ),
+    warning-emphasis: map.get( $kendo-palette-orange, 3 ),
+    warning-on-subtle: map.get( $kendo-palette-orange, 12 ),
+    on-warning: map.get( $kendo-palette-neutral-gray, 15 ),
+    warning-on-surface: map.get( $kendo-palette-orange, 12 ),
     // 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 ),
+    error-subtle: map.get( $kendo-palette-cranberry, 1 ),
+    error-subtle-hover: map.get( $kendo-palette-cranberry, 2 ),
+    error-subtle-active: map.get( $kendo-palette-cranberry, 4 ),
+    error: map.get( $kendo-palette-cranberry, 8 ),
+    error-hover: map.get( $kendo-palette-cranberry, 9 ),
+    error-active: map.get( $kendo-palette-cranberry, 10 ),
+    error-emphasis: map.get( $kendo-palette-cranberry, 4 ),
+    error-on-subtle: map.get( $kendo-palette-cranberry, 9 ),
+    on-error: map.get( $kendo-palette-neutral-gray, "white" ),
+    error-on-surface: map.get( $kendo-palette-cranberry, 8 ),
     // 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 ),
+    light-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
+    light-subtle-hover: map.get( $kendo-palette-neutral-gray, 2 ),
+    light-subtle-active: map.get( $kendo-palette-neutral-gray, 4 ),
+    light: map.get( $kendo-palette-neutral-gray, 4 ),
+    light-hover: map.get( $kendo-palette-neutral-gray, 2 ),
+    light-active: map.get( $kendo-palette-neutral-gray, 3 ),
+    light-emphasis: map.get( $kendo-palette-neutral-gray, 5 ),
+    light-on-subtle: map.get( $kendo-palette-neutral-gray, 12 ),
+    on-light: map.get( $kendo-palette-neutral-gray, 15 ),
+    light-on-surface: map.get( $kendo-palette-neutral-gray, "white" ),
     // 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 ),
+    dark-subtle: map.get( $kendo-palette-neutral-gray, "black" ),
+    dark-subtle-hover: map.get( $kendo-palette-neutral-gray, 15 ),
+    dark-subtle-active: map.get( $kendo-palette-neutral-gray, 14 ),
+    dark: map.get( $kendo-palette-neutral-gray, 15 ),
+    dark-hover: map.get( $kendo-palette-neutral-gray, 13 ),
+    dark-active: map.get( $kendo-palette-neutral-gray, 14 ),
+    dark-emphasis: map.get( $kendo-palette-neutral-gray, 12 ),
+    dark-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
+    on-dark: map.get( $kendo-palette-neutral-gray, "white" ),
+    dark-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
     // 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 ),
+    inverse-subtle: map.get( $kendo-palette-neutral-gray, "black" ),
+    inverse-subtle-hover: map.get( $kendo-palette-neutral-gray, 15 ),
+    inverse-subtle-active: map.get( $kendo-palette-neutral-gray, 14 ),
+    inverse: map.get( $kendo-palette-neutral-gray, 15 ),
+    inverse-hover: map.get( $kendo-palette-neutral-gray, 13 ),
+    inverse-active: map.get( $kendo-palette-neutral-gray, 14 ),
+    inverse-emphasis: map.get( $kendo-palette-neutral-gray, 12 ),
+    inverse-on-subtle: map.get( $kendo-palette-neutral-gray, "white" ),
+    on-inverse: map.get( $kendo-palette-neutral-gray, "white" ),
+    inverse-on-surface: map.get( $kendo-palette-neutral-gray, 12 ),
     // 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-a: map.get( $kendo-palette-techno-teal, 9 ),
+    series-a-bold: map.get( $kendo-palette-techno-teal, 11 ),
+    series-a-bolder: map.get( $kendo-palette-techno-teal, 13 ),
+    series-a-subtle: map.get( $kendo-palette-techno-teal, 7 ),
+    series-a-subtler: map.get( $kendo-palette-techno-teal, 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-b: map.get( $kendo-palette-saffron-forge, 9 ),
+    series-b-bold: map.get( $kendo-palette-saffron-forge, 11 ),
+    series-b-bolder: map.get( $kendo-palette-saffron-forge, 13 ),
+    series-b-subtle: map.get( $kendo-palette-saffron-forge, 7 ),
+    series-b-subtler: map.get( $kendo-palette-saffron-forge, 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-c: map.get( $kendo-palette-electric-fuchsia, 9 ),
+    series-c-bold: map.get( $kendo-palette-electric-fuchsia, 11 ),
+    series-c-bolder: map.get( $kendo-palette-electric-fuchsia, 13 ),
+    series-c-subtle: map.get( $kendo-palette-electric-fuchsia, 7 ),
+    series-c-subtler: map.get( $kendo-palette-electric-fuchsia, 5 ),
     // Series D
-    series-d: map.get( $kendo-palette-denim-blue, 9 ),
-    series-d-bold: map.get( $kendo-palette-denim-blue, 11 ),
-    series-d-bolder: map.get( $kendo-palette-denim-blue, 13 ),
-    series-d-subtle: map.get( $kendo-palette-denim-blue, 7 ),
-    series-d-subtler: map.get( $kendo-palette-denim-blue, 5 ),
+    series-d: map.get( $kendo-palette-bright-basil, 10 ),
+    series-d-bold: map.get( $kendo-palette-bright-basil, 12 ),
+    series-d-bolder: map.get( $kendo-palette-bright-basil, 14 ),
+    series-d-subtle: map.get( $kendo-palette-bright-basil, 8 ),
+    series-d-subtler: map.get( $kendo-palette-bright-basil, 6 ),
     // 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-e-subtle: map.get( $kendo-palette-iris-purple, 5 ),
+    series-e-subtler: map.get( $kendo-palette-iris-purple, 7 ),
     // 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 ),
+    series-f: map.get( $kendo-palette-terracotta-heat, 9 ),
+    series-f-bold: map.get( $kendo-palette-terracotta-heat, 11 ),
+    series-f-bolder: map.get( $kendo-palette-terracotta-heat, 13 ),
+    series-f-subtle: map.get( $kendo-palette-terracotta-heat, 7 ),
+    series-f-subtler: map.get( $kendo-palette-terracotta-heat, 5 ),
 ) !default;
 
 /// The global default Colors map.

package/scss/core/elevation/_index.scss

@@ -6,36 +6,36 @@ $_default-elevation: (
         0 1.6px 3.6px rgba(0, 0, 0, 0.13)
     ),
     2: (
-        0 0.6px 1.8px rgba(0, 0, 0, 0.1),
-        0 3.2px 7.2px rgba(0, 0, 0, 0.13)
+        0 1px 2px 0 rgba(0, 0, 0, 0.14),
+        0 0 2px 0 rgba(0, 0, 0, 0.12)
     ),
     3: (
-        0 0.9px 2.7px rgba(0, 0, 0, 0.1),
-        0 4.8px 10.8px rgba(0, 0, 0, 0.13)
+        0 2px 4px 0 rgba(0, 0, 0, 0.14),
+        0 0 2px 0 rgba(0, 0, 0, 0.12)
     ),
     4: (
-        0 1.2px 3.6px rgba(0, 0, 0, 0.1),
-        0 6.4px 14.4px rgba(0, 0, 0, 0.13)
+        0 4px 8px 0 rgba(0, 0, 0, 0.14),
+        0 0 2px 0 rgba(0, 0, 0, 0.12)
     ),
     5: (
-        0 1.8px 5.4px rgba(0, 0, 0, 0.1),
-        0 9.6px 21.6px rgba(0, 0, 0, 0.13)
+        0 8px 16px 0 rgba(0, 0, 0, 0.14),
+        0 0 2px 0 rgba(0, 0, 0, 0.12)
     ),
     6: (
-        0 2.4px 7.2px rgba(0, 0, 0, 0.18),
-        0 12.8px 28.8px rgba(0, 0, 0, 0.22)
+        0 14px 28.8px 0 rgba(0, 0, 0, 0.24),
+       0 0 8px 0 rgba(0, 0, 0, 0.20)
     ),
     7: (
-        0 3.2px 10.8px rgba(0, 0, 0, 0.18),
-        0 19.2px 43.2px rgba(0, 0, 0, 0.22)
+        0 20px 38px 0 rgba(0, 0, 0, 0.24),
+         0 0 8px 0 rgba(0, 0, 0, 0.20)
     ),
     8: (
-        0 4.8px 14.4px rgba(0, 0, 0, 0.18),
-        0 25.6px 57.6px rgba(0, 0, 0, 0.22)
+        0 32px 64px 0 rgba(0, 0, 0, 0.24), // Missing step 8 in the Design
+         0 0 8px 0 rgba(0, 0, 0, 0.20)
     ),
     9: (
-        0 6.4px 18px rgba(0, 0, 0, 0.18),
-        0 32px 72px rgba(0, 0, 0, 0.22)
+        0 32px 64px 0 rgba(0, 0, 0, 0.24),
+        0 0 8px 0 rgba(0, 0, 0, 0.20)
     )
 );
 

package/scss/core/typography/_index.scss

@@ -33,11 +33,27 @@ $kendo-line-height-sm: 1.25 !default;
 $kendo-line-height-md: $kendo-line-height !default;
 /// The large line height across all components.
 /// @group typography
-$kendo-line-height-lg: 1.5 !default;
+$kendo-line-height-lg: 1.33 !default;
 /// The base line height in ems across all components.
 /// @group typography
 $kendo-line-height-em: calc( #{$kendo-line-height} * 1em) !default;
 
+/// The light font weight across all components.
+/// @group typography
+$kendo-font-weight-light: 300 !default;
+/// The base font weight across all components.
+/// @group typography
+$kendo-font-weight-normal: 400 !default;
+/// The medium font weight across all components.
+/// @group typography
+$kendo-font-weight-medium: 500 !default;
+/// The semibold font weight across all components.
+/// @group typography
+$kendo-font-weight-semibold: 600 !default;
+/// The bold font weight across all components.
+/// @group typography
+$kendo-font-weight-bold: 700 !default;
+
 /// The base letter spacing across all components.
 /// @group typography
 $kendo-letter-spacing: normal !default;
@@ -61,6 +77,14 @@ $_default-line-heights: (
     lg: $kendo-line-height-lg,
 ) !default;
 
+$_default-font-weights: (
+    light: $kendo-font-weight-light,
+    normal: $kendo-font-weight-normal,
+    medium: $kendo-font-weight-medium,
+    semibold: $kendo-font-weight-semibold,
+    bold: $kendo-font-weight-bold
+) !default;
+
 /// The font sizes map
 /// @group typography
 $kendo-font-sizes: $_default-font-sizes !default;

package/scss/dialog/_layout.scss

@@ -1,31 +1,7 @@
 
 @use "../core/_index.scss" as *;
-@use "../window/_variables.scss" as *;
-@use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *;
 
 @mixin kendo-dialog--layout() {
-
     @include kendo-dialog--layout-base();
-
-    .k-dialog {
-        border-width: $kendo-dialog-border-width 0 0;
-    }
-
-    // Title bar
-    .k-dialog-titlebar {
-        border-width: $kendo-dialog-titlebar-border-width 0 0;
-        padding-inline: $kendo-dialog-titlebar-padding-x;
-        padding-block: $kendo-dialog-titlebar-padding-y;
-    }
-
-    .k-dialog-content {
-        padding-inline: $kendo-dialog-inner-padding-x;
-        padding-block: $kendo-dialog-inner-padding-y;
-    }
-
-    .k-dialog-content + .k-dialog-actions {
-        padding-block-start: 0;
-    }
-
 }

package/scss/dialog/_variables.scss

@@ -1,10 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
-/// The width of the border around the Dialog.
-/// @group dialog
-$kendo-dialog-border-width: var( --kendo-dialog-border-width, 0 ) !default;
-
 /// The background color of the Dialog titlebar.
 /// @group dialog
 $kendo-dialog-titlebar-bg: var( --kendo-dialog-titlebar-bg, k-color(surface-alt) ) !default;
@@ -13,23 +9,7 @@ $kendo-dialog-titlebar-bg: var( --kendo-dialog-titlebar-bg, k-color(surface-alt)
 $kendo-dialog-titlebar-text: var( --kendo-dialog-titlebar-text, k-color(on-app-surface) ) !default;
 /// The border color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-border: var( --kendo-dialog-titlebar-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
-/// The width of the border around the Dialog titlebar.
-/// @group dialog
-$kendo-dialog-titlebar-border-width: var( --kendo-dialog-titlebar-border-width, 0 ) !default;
-/// The horizontal padding of the Dialog titlebar.
-/// @group dialog
-$kendo-dialog-titlebar-padding-x: var( --kendo-dialog-titlebar-padding-x, k-spacing(6) ) !default;
-/// The vertical padding of the Dialog titlebar.
-/// @group dialog
-$kendo-dialog-titlebar-padding-y: var( --kendo-dialog-titlebar-padding-y, k-spacing(4) ) !default;
-
-/// The horizontal padding of the content of the Dialog.
-/// @group dialog
-$kendo-dialog-inner-padding-x: var( --kendo-dialog-inner-padding-x, k-spacing(6) ) !default;
-/// The vertical padding of the content of the Dialog.
-/// @group dialog
-$kendo-dialog-inner-padding-y: var( --kendo-dialog-inner-padding-y, k-spacing(3) ) !default;
+$kendo-dialog-titlebar-border: transparent !default;
 
 /// The horizontal padding of the Dialog action buttons.
 /// @group dialog
@@ -50,7 +30,7 @@ $kendo-dialog-bg: var( --kendo-dialog-bg, k-color(app-surface) ) !default;
 
 /// The box shadow around the Dialog.
 /// @group dialog
-$kendo-dialog-shadow: var( --kendo-dialog-shadow, var( --kendo-elevation-8, none ) ) !default;
+$kendo-dialog-shadow: var( --kendo-dialog-shadow, var( --kendo-elevation-5, none ) ) !default;
 
 /// The theme colors map for the Dialog.
 $kendo-dialog-theme-colors: (

package/scss/dock-manager/_layout.scss

@@ -5,6 +5,19 @@
 @mixin kendo-dock-manager--layout() {
     @include kendo-dock-manager--layout-base();
 
+    .k-dock-manager-splitter {
+        .k-pane-header {
+            padding-block-start: $kendo-dock-manager-pane-header-padding-x;
+        }
+    }
+
+    .k-dock-manager-splitter,
+    .k-dock-manager-unpinned-container {
+        .k-splitbar {
+            border-width: 0;
+        }
+    }
+
     .k-dock-manager-toolbar {
         box-shadow: none;
     }
@@ -12,8 +25,7 @@
     .k-dock-manager-splitter,
     .k-dock-manager-unpinned-container {
         .k-pane-tabbed {
-            padding-block: $kendo-dock-manager-tabbed-pane-padding-y;
-            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
+            padding-block-end: $kendo-dock-manager-tabbed-pane-padding-x;
         }
     }
 

package/scss/dock-manager/_theme.scss

@@ -1,4 +1,5 @@
 @use "./_variables.scss" as *;
+@use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/dock-manager/_theme.scss" as *;
 
 @mixin kendo-dock-manager--theme() {
@@ -21,5 +22,13 @@
 
     .k-dock-indicator {
         box-shadow: $kendo-dock-indicator-shadow;
+
+        &.k-disabled,
+        &:disabled {
+            color: color-mix(in srgb, k-color(on-app-surface) 30%, transparent);
+            background-color: color-mix(in srgb, k-color(on-app-surface) 7%, transparent);
+            outline-color: color-mix(in srgb, k-color(on-app-surface) 7%, transparent);
+            box-shadow: none;
+        }
     }
 }

package/scss/dock-manager/_variables.scss

@@ -9,11 +9,11 @@ $kendo-dock-manager-border-width: var( --kendo-dock-manager-border-width, 1px )
 $kendo-dock-manager-border-style: var( --kendo-dock-manager-border-style, solid ) !default;
 /// The color of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border: var( --kendo-dock-manager-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
+$kendo-dock-manager-border: var( --kendo-dock-manager-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: var( --kendo-dock-manager-pane-header-padding-y, k-spacing(1) ) !default;
+$kendo-dock-manager-pane-header-padding-y: var( --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: var( --kendo-dock-manager-pane-header-padding-x, k-spacing(6) ) !default;
@@ -28,7 +28,7 @@ $kendo-dock-manager-pane-header-border-style: var( --kendo-dock-manager-pane-hea
 $kendo-dock-manager-pane-header-bg: var( --kendo-dock-manager-pane-header-bg, k-color(surface-alt) ) !default;
 /// The text color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-text: var( --kendo-dock-manager-pane-header-text, k-color(primary) ) !default;
+$kendo-dock-manager-pane-header-text: var( --kendo-dock-manager-pane-header-text, k-color(on-app-surface) ) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
@@ -58,24 +58,24 @@ $kendo-dock-manager-pane-content-padding-y: var( --kendo-dock-manager-pane-conte
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: var( --kendo-dock-manager-tabbed-pane-padding-y, null ) !default;
+$kendo-dock-manager-tabbed-pane-padding-y: var( --kendo-dock-manager-tabbed-pane-padding-y, k-spacing(7) ) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-x: var( --kendo-dock-manager-tabbed-pane-padding-x, null ) !default;
+$kendo-dock-manager-tabbed-pane-padding-x: var( --kendo-dock-manager-tabbed-pane-padding-x, k-spacing(6) ) !default;
 
 /// The width of the unpinned pane container in the DockManager component.
 /// @group dock-manager
 $kendo-dock-manager-unpinned-container-width: var( --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: var( --kendo-dock-manager-unpinned-container-bg, k-color(app-surface) ) !default;
+$kendo-dock-manager-unpinned-container-bg: var( --kendo-dock-manager-unpinned-container-bg, k-color(surface-alt) ) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-shadow: var( --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;
+$kendo-dock-manager-unpinned-container-shadow: var( --kendo-dock-manager-unpinned-container-shadow, k-elevation(6) ) !default;
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: var( --kendo-dock-indicator-padding, k-spacing(1.5) ) !default;
+$kendo-dock-indicator-padding: var( --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: var( --kendo-dock-indicator-bg, k-color(surface-alt) ) !default;
@@ -93,7 +93,7 @@ $kendo-dock-indicator-outline-style: var( --kendo-dock-indicator-outline-style,
 $kendo-dock-indicator-outline: var( --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: var( --kendo-dock-indicator-shadow, 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) ) !default;
+$kendo-dock-indicator-shadow: var( --kendo-dock-indicator-shadow, k-elevation(4) ) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager