@progress/kendo-theme-default 13.1.1 → 13.2.0-dev.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "13.1.1",
+  "version": "13.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.8.0",
-    "@progress/kendo-theme-core": "13.1.1",
-    "@progress/kendo-theme-utils": "13.1.1"
+    "@progress/kendo-theme-core": "13.2.0-dev.0",
+    "@progress/kendo-theme-utils": "13.2.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "c476cef223e305c6f403a0d9610bf838041639fe"
+  "gitHead": "066b81148c99e956c2809af1a3ba5eebe649f407"
 }

package/scss/action-sheet/_variables.scss

@@ -30,13 +30,13 @@ $kendo-actionsheet-border-radius: 0px !default;
 
 /// The font size of the ActionSheet.
 /// @group action-sheet
-$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-actionsheet-font-size: var(--kendo-font-size) !default;
 /// The font family of the ActionSheet.
 /// @group action-sheet
-$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-actionsheet-font-family: var(--kendo-font-family) !default;
 /// The line height of the ActionSheet.
 /// @group action-sheet
-$kendo-actionsheet-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-actionsheet-line-height: var(--kendo-line-height) !default;
 
 /// The background color of the ActionSheet.
 /// @group action-sheet
@@ -93,10 +93,10 @@ $kendo-actionsheet-titlebar-shadow: null !default;
 
 /// The font size of the ActionSheet subtitle.
 /// @group action-sheet
-$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-actionsheet-subtitle-font-size: var(--kendo-font-size-sm) !default;
 /// The line height of the ActionSheet subtitle.
 /// @group action-sheet
-$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-actionsheet-subtitle-line-height: var(--kendo-line-height-sm) !default;
 /// The text color of the ActionSheet subtitle.
 /// @group action-sheet
 $kendo-actionsheet-subtitle-text: k-color(subtle) !default;
@@ -215,10 +215,10 @@ $kendo-actionsheet-item-disabled-opacity: null !default;
 // Adaptive Actionsheet
 /// The font size of the adaptive ActionSheet.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-adaptive-actionsheet-font-size: var(--kendo-font-size-lg) !default;
 /// The line height of the adaptive ActionSheet.
 /// @group action-sheet
-$kendo-adaptive-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-adaptive-actionsheet-line-height: var(--kendo-line-height) !default;
 /// The vertical padding of the adaptive ActionSheet titlebar.
 /// @group action-sheet
 $kendo-adaptive-actionsheet-titlebar-padding-y: k-spacing(4) !default;

package/scss/adaptive/_variables.scss

@@ -42,13 +42,13 @@ $kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 $kendo-adaptive-border-width: 1px !default;
 /// The font family of the Adaptive component.
 /// @group adaptive
-$kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-adaptive-font-family: var(--kendo-font-family) !default;
 /// The font size of the Adaptive component.
 /// @group adaptive
-$kendo-adaptive-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-adaptive-font-size: var(--kendo-font-size) !default;
 /// The line height of the Adaptive component.
 /// @group adaptive
-$kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-adaptive-line-height: var(--kendo-line-height) !default;
 
 
 // Adaptive Grid

package/scss/appbar/_variables.scss

@@ -29,13 +29,13 @@ $kendo-appbar-border-width: 0px !default;
 $kendo-appbar-zindex: k-z-index("banner") !default;
 /// The font family of the AppBar.
 /// @group appbar
-$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-appbar-font-family: var(--kendo-font-family) !default;
 /// The font size of the AppBar.
 /// @group appbar
-$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-appbar-font-size: var(--kendo-font-size) !default;
 /// The line height of the AppBar.
 /// @group appbar
-$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-appbar-line-height: var(--kendo-line-height) !default;
 
 /// The spacing between the AppBar sections.
 /// @group appbar

package/scss/avatar/_variables.scss

@@ -28,13 +28,13 @@ $kendo-avatar-border-radius: null !default;
 
 /// The font family of the Avatar.
 /// @group avatar
-$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-avatar-font-family: var(--kendo-font-family) !default;
 /// The font size of the Avatar.
 /// @group avatar
-$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-avatar-font-size: var(--kendo-font-size) !default;
 /// The line height of the Avatar.
 /// @group avatar
-$kendo-avatar-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-avatar-line-height: var(--kendo-line-height-xs) !default;
 
 /// The small size of the Avatar.
 /// @group avatar

package/scss/badge/_variables.scss

@@ -45,16 +45,16 @@ $kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font sizes of the Badge.
 /// @group badge
-$kendo-badge-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-font-size: var(--kendo-font-size-xs) !default;
 /// The font size of the small Badge.
 /// @group badge
-$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-sm-font-size: var(--kendo-font-size-xs) !default;
 /// The font size of the medium Badge.
 /// @group badge
-$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default;
+$kendo-badge-md-font-size: var(--kendo-font-size-xs) !default;
 /// The font size of the large Badge.
 /// @group badge
-$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-lg-font-size: var(--kendo-font-size-xs) !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group badge

package/scss/bottom-navigation/_variables.scss

@@ -26,13 +26,13 @@ $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-bottom-nav-font-family: var(--kendo-font-family) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-bottom-nav-font-size: var(--kendo-font-size) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-bottom-nav-line-height: var(--kendo-line-height-xs) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;

package/scss/breadcrumb/_variables.scss

@@ -27,33 +27,33 @@ $kendo-breadcrumb-padding-y: null !default;
 
 /// The font family of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-breadcrumb-font-family: var(--kendo-font-family) !default;
 
 /// The font size of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-breadcrumb-font-size: var(--kendo-font-size) !default;
 /// The font size of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-breadcrumb-sm-font-size: var(--kendo-font-size) !default;
 /// The font size of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
 /// The font size of the large Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-breadcrumb-lg-font-size: var(--kendo-font-size-lg) !default;
 
 /// The line-height of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-breadcrumb-line-height: var(--kendo-line-height) !default;
 /// The line-height of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-breadcrumb-sm-line-height: var(--kendo-line-height) !default;
 /// The line-height of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
 /// The line-height of the height Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-breadcrumb-lg-line-height: var(--kendo-line-height-lg) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb

package/scss/bubble/_variables.scss

@@ -21,7 +21,7 @@ $kendo-bubble-border-width: 1px !default;
 $kendo-bubble-border-style: solid !default;
 /// The line height of the Bubble.
 /// @group bubble
-$kendo-bubble-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-bubble-line-height: var(--kendo-line-height) !default;
 
 /// The text color of the Bubble.
 /// @group bubble

package/scss/button/_variables.scss

@@ -29,6 +29,9 @@ $kendo-button-border-width: 1px !default;
 /// @group button
 $kendo-button-border-radius: null !default;
 
+/// The horizontal padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-x: k-spacing(2) !default;
@@ -39,6 +42,9 @@ $kendo-button-md-padding-x: k-spacing(2) !default;
 /// @group button
 $kendo-button-lg-padding-x: k-spacing(2) !default;
 
+/// The vertical padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-y: k-spacing(1px) !default;
 /// The vertical padding of the small Button.
 /// @group button
 $kendo-button-sm-padding-y: k-spacing(0.5) !default;
@@ -51,42 +57,50 @@ $kendo-button-lg-padding-y: k-spacing(2) !default;
 
 /// The font family of the Button.
 /// @group button
-$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-button-font-family: var(--kendo-font-family) !default;
 /// The font weight of the Button.
 /// @group button
-$kendo-button-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-button-font-weight: var(--kendo-font-weight-normal) !default;
 
 /// The font size of the Button.
 /// @group button
-$kendo-button-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-font-size: var(--kendo-font-size) !default;
+/// The font size of the xsmall Button.
+/// @group button
+$kendo-button-xs-font-size: var(--kendo-font-size) !default;
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-sm-font-size: var(--kendo-font-size) !default;
 /// The font size of the medium Button.
 /// @group button
 $kendo-button-md-font-size: $kendo-button-font-size !default;
 /// The font size of the large Button.
 /// @group button
-$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-button-lg-font-size: var(--kendo-font-size-lg) !default;
 
 /// The line height used along with the $kendo-font-size the.
 /// @group button
-$kendo-button-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-line-height: var(--kendo-line-height) !default;
+/// The line height used along with the $kendo-font-size the of the xsmall Button.
+/// @group button
+$kendo-button-xs-line-height: var(--kendo-line-height) !default;
 /// The line height used along with the $kendo-font-size the of the small Button.
 /// @group button
-$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-sm-line-height: var(--kendo-line-height) !default;
 /// The line height used along with the $kendo-font-size the of the medium Button.
 /// @group button
 $kendo-button-md-line-height: $kendo-button-line-height !default;
 /// The line height used along with the $kendo-font-size the of the large Button.
 /// @group button
-$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-button-lg-line-height: var(--kendo-line-height-lg) !default;
 
+$kendo-button-xs-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 $kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 $kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-xs-inner-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) ) !default;
 $kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
 $kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
 $kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
@@ -252,26 +266,32 @@ $kendo-button-transition: color k-transition(rapid), background-color k-transiti
 @forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
     $kendo-button-border-width: $kendo-button-border-width,
     $kendo-button-border-radius: $kendo-button-border-radius,
+    $kendo-button-xs-padding-x: $kendo-button-xs-padding-x,
     $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
     $kendo-button-md-padding-x: $kendo-button-md-padding-x,
     $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
+    $kendo-button-xs-padding-y: $kendo-button-xs-padding-y,
     $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
     $kendo-button-md-padding-y: $kendo-button-md-padding-y,
     $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
     $kendo-button-font-family: $kendo-button-font-family,
     $kendo-button-font-weight: $kendo-button-font-weight,
     $kendo-button-font-size: $kendo-button-font-size,
+    $kendo-button-xs-font-size: $kendo-button-xs-font-size,
     $kendo-button-sm-font-size: $kendo-button-sm-font-size,
     $kendo-button-md-font-size: $kendo-button-md-font-size,
     $kendo-button-lg-font-size: $kendo-button-lg-font-size,
     $kendo-button-line-height: $kendo-button-line-height,
+    $kendo-button-xs-line-height: $kendo-button-xs-line-height,
     $kendo-button-sm-line-height: $kendo-button-sm-line-height,
     $kendo-button-md-line-height: $kendo-button-md-line-height,
     $kendo-button-lg-line-height: $kendo-button-lg-line-height,
+    $kendo-button-xs-calc-size: $kendo-button-xs-calc-size,
     $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
     $kendo-button-md-calc-size: $kendo-button-md-calc-size,
     $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
     $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
+    $kendo-button-xs-inner-calc-size: $kendo-button-xs-inner-calc-size,
     $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
     $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
     $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,

package/scss/calendar/_variables.scss

@@ -13,7 +13,7 @@ $kendo-calendar-border-width: 1px !default;
 
 /// The font family of the Calendar.
 /// @group calendar
-$kendo-calendar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-calendar-font-family: var(--kendo-font-family) !default;
 /// The font size of the Calendar.
 /// @group calendar
 $kendo-calendar-font-size: null !default;
@@ -51,7 +51,7 @@ $kendo-calendar-header-border-width: 1px !default;
 
 /// The background color of the header in the Calendar.
 /// @group calendar
-$kendo-calendar-header-bg: k-color(surface)!default;
+$kendo-calendar-header-bg: k-color(surface) !default;
 /// The border color of the header in the Calendar.
 /// @group calendar
 $kendo-calendar-header-border: k-color(border) !default;
@@ -99,7 +99,7 @@ $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
 /// The font size of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-calendar-header-cell-font-size: var(--kendo-font-size-sm) !default;
 /// The line height of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
@@ -128,7 +128,7 @@ $kendo-calendar-caption-font-size: null !default;
 $kendo-calendar-caption-line-height: null !default;
 /// The font weight of the caption in the Calendar.
 /// @group calendar
-$kendo-calendar-caption-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-calendar-caption-font-weight: var(--kendo-font-weight-bold) !default;
 
 /// The font size of the week number cells in the Calendar.
 /// @group calendar
@@ -160,7 +160,7 @@ $kendo-calendar-today-style: color !default;
 $kendo-calendar-today-color: k-color(primary) !default;
 /// The font weight of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-calendar-today-font-weight: var(--kendo-font-weight-bold) !default;
 /// The box shadow of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-box-shadow: null !default;
@@ -185,7 +185,7 @@ $kendo-calendar-cell-border: null !default;
 
 /// The background color of the hovered cells in the Calendar.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: color-mix( in srgb, currentColor 8%, transparent )  !default;
+$kendo-calendar-cell-hover-bg: color-mix( in srgb, currentColor 8%, transparent ) !default;
 /// The text color of the hovered cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-hover-text: k-color(on-app-surface) !default;
@@ -287,10 +287,10 @@ $kendo-calendar-range-cell-border-radius: k-border-radius(lg) !default;
 
 /// The font size of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-sm-font-size: var(--kendo-font-size) !default;
 /// The line height of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-calendar-sm-line-height: var(--kendo-line-height) !default;
 /// The size of the cells in the small Calendar.
 /// @group calendar
 $kendo-calendar-sm-cell-size: 28px !default;
@@ -303,10 +303,10 @@ $kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 
 /// The font size of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-calendar-md-font-size: var(--kendo-font-size) !default;
 /// The line height of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-calendar-md-line-height: var(--kendo-line-height) !default;
 /// The size of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-size: 32px !default;
@@ -319,10 +319,10 @@ $kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 
 /// The font size of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-calendar-lg-font-size: var(--kendo-font-size-lg) !default;
 /// The line height of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-calendar-lg-line-height: var(--kendo-line-height-lg) !default;
 /// The size of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-size: 40px !default;

package/scss/captcha/_variables.scss

@@ -11,13 +11,13 @@ $kendo-captcha-spacer: k-spacing(2) !default;
 $kendo-captcha-width: 280px !default;
 /// The font family of the Captcha.
 /// @group captcha
-$kendo-captcha-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-captcha-font-family: var(--kendo-font-family) !default;
 /// The font size of the Captcha.
 /// @group captcha
-$kendo-captcha-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-captcha-font-size: var(--kendo-font-size) !default;
 /// The line height of the Captcha.
 /// @group captcha
-$kendo-captcha-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-captcha-line-height: var(--kendo-line-height) !default;
 /// The gap of the Captcha.
 /// @group captcha
 $kendo-captcha-gap: $kendo-captcha-spacer !default;
@@ -43,7 +43,7 @@ $kendo-captcha-image-controls-gap: $kendo-captcha-spacer !default;
 $kendo-captcha-validation-message-margin-top: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 /// The font size of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-captcha-validation-message-font-size: var(--kendo-font-size-sm) !default;
 /// The font style of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-message-font-style: italic !default;

package/scss/card/_variables.scss

@@ -25,13 +25,13 @@ $kendo-card-border-radius: k-border-radius(lg) !default;
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
 /// The font family of the Card.
 /// @group card
-$kendo-card-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-card-font-family: var(--kendo-font-family) !default;
 /// The font size of the Card.
 /// @group card
-$kendo-card-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-card-font-size: var(--kendo-font-size) !default;
 /// The line height of the Card.
 /// @group card
-$kendo-card-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-card-line-height: var(--kendo-line-height) !default;
 
 /// The spacing between the Cards in the Card deck.
 /// @group card
@@ -116,16 +116,16 @@ $kendo-card-footer-border: k-color(border) !default;
 $kendo-card-title-margin-bottom: k-spacing(2) !default;
 /// The font size of the Card title.
 /// @group card
-$kendo-card-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-card-title-font-size: var(--kendo-font-size-lg) !default;
 /// The font family of the Card title.
 /// @group card
 $kendo-card-title-font-family: null !default;
 /// The line height of the Card title.
 /// @group card
-$kendo-card-title-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-card-title-line-height: var(--kendo-line-height-sm) !default;
 /// The font weight of the Card title.
 /// @group card
-$kendo-card-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-card-title-font-weight: var(--kendo-font-weight-normal) !default;
 /// The letter spacing of the Card title.
 /// @group card
 $kendo-card-title-letter-spacing: null !default;
@@ -135,16 +135,16 @@ $kendo-card-title-letter-spacing: null !default;
 $kendo-card-subtitle-margin-bottom: k-spacing(2) !default;
 /// The font size of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-card-subtitle-font-size: var(--kendo-font-size-sm) !default;
 /// The font family of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-font-family: null !default;
 /// The line height of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-card-subtitle-line-height: var(--kendo-line-height-lg) !default;
 /// The font weight of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-card-subtitle-font-weight: var(--kendo-font-weight-normal) !default;
 /// The letter spacing of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-letter-spacing: null !default;

package/scss/chat/_variables.scss

@@ -20,13 +20,13 @@ $kendo-chat-height: 320px !default;
 $kendo-chat-border-width: 1px !default;
 /// The font family of the Chat.
 /// @group chat
-$kendo-chat-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-chat-font-family: var(--kendo-font-family) !default;
 /// The font size of the Chat.
 /// @group chat
-$kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chat-font-size: var(--kendo-font-size) !default;
 /// The line height of the Chat.
 /// @group chat
-$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chat-line-height: var(--kendo-line-height) !default;
 
 /// The vertical spacing between the items of the Chat.
 /// @group chat
@@ -68,10 +68,10 @@ $kendo-chat-message-status-gap: k-spacing(1) !default;
 
 /// The font size of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chat-timestamp-font-size: var(--kendo-font-size-sm) !default;
 /// The line height of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-chat-timestamp-line-height: var(--kendo-line-height-lg) !default;
 /// The text transform of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-transform: none !default;
@@ -90,17 +90,17 @@ $kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
 
 /// The font size of the Chat message meta text.
 /// @group chat
-$kendo-chat-message-meta-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chat-message-meta-font-size: var(--kendo-font-size-sm) !default;
 /// The line height of the Chat message meta text.
 /// @group chat
-$kendo-chat-message-meta-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-chat-message-meta-line-height: var(--kendo-line-height-xs) !default;
 
 /// The font size of the Chat author text.
 /// @group chat
-$kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chat-author-font-size: var(--kendo-font-size-sm) !default;
 /// The line height of the Chat author text.
 /// @group chat
-$kendo-chat-author-line-height: var( --kendo-line-height-xs, normal ) !default;
+$kendo-chat-author-line-height: var(--kendo-line-height-xs) !default;
 
 /// The text color of the Chat status.
 /// @group chat

package/scss/chip/_variables.scss

@@ -51,33 +51,33 @@ $kendo-chip-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font weight of the Chip.
 /// @group chip
-$kendo-chip-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-chip-font-weight: var(--kendo-font-weight-normal) !default;
 
 /// The font size of the Chip.
 /// @group chip
 $kendo-chip-font-size: null !default;
 /// The font size of the small Chip.
 /// @group chip
-$kendo-chip-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-sm-font-size: var(--kendo-font-size) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-md-font-size: var(--kendo-font-size) !default;
 /// The font size of the large Chip.
 /// @group chip
-$kendo-chip-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chip-lg-font-size: var(--kendo-font-size) !default;
 
 /// The Chip's line height that is related to the $kendo-font-size.
 /// @group chip
 $kendo-chip-line-height: null !default;
 /// The small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-sm-line-height: var( --kendo-line-height-xs, normal )  !default;
+$kendo-chip-sm-line-height: var(--kendo-line-height-xs) !default;
 /// The medium Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-md-line-height: var( --kendo-line-height-xs, normal )  !default;
+$kendo-chip-md-line-height: var(--kendo-line-height-xs) !default;
 /// The large Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-lg-line-height: var( --kendo-line-height-xs, normal )  !default;
+$kendo-chip-lg-line-height: var(--kendo-line-height-xs) !default;
 
 $kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + calc( #{$kendo-chip-md-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;

package/scss/color-preview/_variables.scss

@@ -1,10 +1,11 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../core/functions/index.scss" as *;
 
 // Color Preview
 /// The border radius of the ColorPreview.
 /// @group color-preview
-$kendo-color-preview-border-radius: k-border-radius(md)!default;
+$kendo-color-preview-border-radius: k-border-radius(md) !default;
 /// The width of the border around the ColorPreview.
 /// @group color-preview
 $kendo-color-preview-border-width: 1px !default;
@@ -24,9 +25,11 @@ $kendo-color-preview-hover-border: k-color(border) !default;
 /// The background color of the ColorPreview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-bg: k-color(surface-alt) !default;
+
+// Do not use css variable for the $kendo-color-preview-no-color-text, as it is used in the SVG data URI for the no-color image, which does not support CSS variables.
 /// The text color of the ColorPreview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-text: k-color(error) !default;
+$kendo-color-preview-no-color-text: map.get($kendo-colors, error) !default;
 /// The border color of the ColorPreview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-border: null !default;