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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.0.0-dev.8",
+    "version": "8.0.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.0.0-dev.8",
+    "version": "8.0.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "8.0.0-dev.8",
+  "version": "8.0.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,13 +52,13 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-svg-icons": "2.3.0",
-    "@progress/kendo-theme-core": "8.0.0-dev.8",
-    "@progress/kendo-theme-utils": "8.0.0-dev.8"
+    "@progress/kendo-svg-icons": "3.0.0",
+    "@progress/kendo-theme-core": "8.0.0",
+    "@progress/kendo-theme-utils": "8.0.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "5cba0da7c1d6379c4c2d78522e51a55f49c28e90"
+  "gitHead": "5d189bf7291e83332a8817cefbbbecc68fc8a644"
 }

package/scss/badge/_theme.scss

@@ -14,6 +14,10 @@
         border-color: var( --INTERNAL--kendo-badge-border, initial );
     }
 
+    .k-badge-outline {
+        background-color: transparent;
+    }
+
     @each $fill-mode, $theme-colors in $kendo-badge-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
 

package/scss/badge/_variables.scss

@@ -114,7 +114,7 @@ $_tc-badge-matrix: (
         normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 100, 100))
+        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
@@ -123,7 +123,7 @@ $_tc-badge-warning-matrix: (
         normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 100, 100))
+        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 100, 100))
     )
 ) !default;
 
@@ -132,7 +132,7 @@ $_tc-badge-dark-matrix: (
         normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (on-color, color, color), ($kendo-color-white, 160, 160))
+        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 160, 160))
     )
 ) !default;
 
@@ -141,7 +141,7 @@ $_tc-badge-light-matrix: (
         normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (app-surface, color, color), ($kendo-color-white, 50, 50))
+        normal: if($kendo-enable-color-system, (transparent, color, color), ($kendo-color-white, 50, 50))
     )
 ) !default;
 

package/scss/button/_variables.scss

@@ -145,12 +145,12 @@ $_tc-base-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, on-color, currentColor), (transparent, 160, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
         hover: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
-        focus: if($kendo-enable-color-system, (transparent, on-color, currentColor, inherit), (transparent, 160, currentColor, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor, inherit), (transparent, 160, currentColor, inherit)),
         focus-hover: if($kendo-enable-color-system, (on-color, color, on-color, inherit), (190, $kendo-color-white, 190, inherit)),
         active: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
-        active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
+        active-hover: if($kendo-enable-color-system, (on-color, color, on-color), (20, 190, 110)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
     ),
     link: (
@@ -163,12 +163,12 @@ $_tc-base-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, on-color, transparent, color-active), (30, 160, transparent, 130)),
-        focus-hover:  if($kendo-enable-color-system, (transparent, on-color, transparent, color-active), (transparent, 190, transparent, 130)),
-        active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent, color-active), (30, 160, transparent, 130)),
+        focus-hover:  if($kendo-enable-color-system, (transparent, color-on-surface, transparent, color-active), (transparent, 190, transparent, 130)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -185,18 +185,18 @@ $_tc-brand-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 100, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 100, 100, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 100, 100, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
@@ -212,12 +212,12 @@ $_tc-brand-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 100, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -234,18 +234,18 @@ $_tc-warning-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 100, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 100, 100, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 100, 100, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-black, 100, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
@@ -261,12 +261,12 @@ $_tc-warning-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 100, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -283,18 +283,18 @@ $_tc-dark-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 160, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 160, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 160, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 160, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 170, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 170, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 160, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 160, 160, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 160, 160, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (160, $kendo-color-white, 160, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
@@ -310,12 +310,12 @@ $_tc-dark-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 160, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 160, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -332,18 +332,18 @@ $_tc-light-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 50, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 50, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 50, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 50, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 60, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 60, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 50, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 50, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 50, 50, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 50, 50, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (50, $kendo-color-white, 50, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
@@ -359,12 +359,12 @@ $_tc-light-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 50, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 50, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 50, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;

package/scss/calendar/_layout.scss

@@ -416,60 +416,64 @@
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start,
-        .k-range-end,
-        .k-range-mid {
-
-            position: relative;
+    .k-range-start,
+    .k-range-end,
+    .k-range-mid {
 
-            &::before {
-                content: "";
-                position: absolute;
-                inset: 0px;
-                border-style: solid;
-            }
+        position: relative;
 
-            &:hover .k-link,
-            &.k-hover .k-link {
-                border-radius: 0;
-            }
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0px;
+            border-style: solid;
         }
 
-        .k-range-mid::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-width: 0;
+        &:hover .k-link,
+        &.k-hover .k-link {
             border-radius: 0;
         }
+    }
 
-        .k-range-start::before,
-        .k-range-mid:not(
-            .k-range-start + .k-range-mid,
-            .k-range-mid + .k-range-mid,
-            :last-child
-        )::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-end-width: 0;
-            border-radius: 0;
+    .k-range-mid::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-width: 0;
+        border-radius: 0;
+    }
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+    .k-range-start::before,
+    .k-range-mid:not(
+        .k-range-start + .k-range-mid,
+        .k-range-mid + .k-range-mid,
+        :last-child
+    )::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-end-width: 0;
+        border-radius: 0;
+
+        @if ( $kendo-enable-rounded ) {
+            border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
-        .k-range-end::before,
-        .k-range-mid:last-child::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-start-width: 0;
-            border-radius: 0;
+    .k-range-end::before,
+    .k-range-mid:last-child::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-start-width: 0;
+        border-radius: 0;
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+        @if ( $kendo-enable-rounded ) {
+            border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
+    .k-range-start.k-range-end::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
     }
 
 

package/scss/calendar/_theme.scss

@@ -235,6 +235,10 @@
         &.k-alt + .k-range-mid.k-hover .k-link {
             --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
         }
+
+        &.k-range-start.k-range-end:hover .k-link {
+            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-end-range-hover-shadow, #{$kendo-calendar-start-end-range-hover-shadow} );
+        }
     }
 
 }

package/scss/calendar/_variables.scss

@@ -280,6 +280,9 @@ $kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 if($kendo-enable-color-
 /// The shadow of the hovered end range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+/// The shadow of the hovered start-end range selection in the Calendar.
+/// @group calendar
+$kendo-calendar-start-end-range-hover-shadow: inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 
 // Calendar sizes

package/scss/core/border-radii/_index.scss

@@ -1,13 +1,29 @@
 @use "sass:map";
 @use "@progress/kendo-theme-core/scss/spacing/index.import.scss" as *;
 
+/// The none border radius used across the Components.
+/// @group radii
 $kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+/// The extra small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+/// The small border radius used across the Components.
+/// @group radii
 $kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+/// The medium border radius used across the Components.
+/// @group radii
 $kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+/// The large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-lg: map.get($kendo-spacing, 2) !default;
+/// The extra large border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xl: map.get($kendo-spacing, 3) !default;
+/// The third largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxl: map.get($kendo-spacing, 4) !default;
+/// The second largest border radius used across the Components.
+/// @group radii
 $kendo-border-radius-xxxl: map.get($kendo-spacing, 5) !default;
 
 $_default-border-radii: (
@@ -21,4 +37,6 @@ $_default-border-radii: (
     xxxl: $kendo-border-radius-xxxl
 ) !default;
 
+/// The global radii Map.
+/// @group radii
 $kendo-border-radii: $_default-border-radii !default;

package/scss/dataviz/_layout.scss

@@ -272,6 +272,11 @@
         height: 100%;
     }
 
+    // Sankey labels
+    .k-sankey text {
+        pointer-events: none;
+    }
+
     // Base
     .k-treemap {
         height: 400px;

package/scss/drawer/_layout.scss

@@ -68,6 +68,8 @@
     .k-drawer-content {
         flex: 1 1 auto;
         overflow: auto;
+        padding-block: var( --kendo-drawer-content-padding-y, #{$kendo-drawer-content-padding-y} );
+        padding-inline: var( --kendo-drawer-content-padding-x, #{$kendo-drawer-content-padding-x} );
     }
 
 

package/scss/drawer/_variables.scss

@@ -26,10 +26,10 @@ $kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
+$kendo-drawer-content-padding-x: null !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y} ) !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer

package/scss/listview/_layout.scss

@@ -14,6 +14,7 @@
         font-family: var( --kendo-listview-font-family, #{$kendo-listview-font-family} );
         font-size: var( --kendo-listview-font-size, #{$kendo-listview-font-size} );
         line-height: var( --kendo-listview-line-height, #{$kendo-listview-line-height} );
+        display: flex;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;

package/scss/scheduler/_variables.scss

@@ -227,7 +227,7 @@ $kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the day inside the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-day-font-size: calc( $kendo-scheduler-tooltip-month-font-size * 2 ) !default;
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 2 ) !default;
 
 /// The max height of the events inside the Scheduler Tooltip.
 /// @group scheduler

package/scss/slider/_variables.scss

@@ -33,19 +33,19 @@ $kendo-slider-track-size: k-spacing(1) !default;
 $kendo-slider-track-border-radius: k-spacing(0.5) !default;
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the Slider track.
 /// @group slider
 $kendo-slider-track-border: inherit !default;
 /// The background color of the hovered Slider track.
 /// @group slider
-$kendo-slider-track-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-hover-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the hovered Slider track.
 /// @group slider
 $kendo-slider-track-hover-border: inherit !default;
 /// The background color of the focused Slider track.
 /// @group slider
-$kendo-slider-track-focus-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
+$kendo-slider-track-focus-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-60 )) !default;
 /// The border color of the focused Slider track.
 /// @group slider
 $kendo-slider-track-focus-border: inherit !default;

package/scss/tooltip/_variables.scss

@@ -25,7 +25,7 @@ $kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
+$kendo-tooltip-title-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;