@progress/kendo-theme-fluent 13.1.1 → 13.1.2-dev.0

package/scss/chat/_variables.scss

@@ -21,13 +21,13 @@ $kendo-chat-height: var( --kendo-chat-height, 320px ) !default;
 $kendo-chat-border-width: var( --kendo-chat-border-width, 1px ) !default;
 /// The font family of the Chat.
 /// @group chat
-$kendo-chat-font-family: var( --kendo-chat-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-chat-font-family: var( --kendo-chat-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the Chat.
 /// @group chat
-$kendo-chat-font-size: var( --kendo-chat-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-chat-font-size: var( --kendo-chat-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the Chat.
 /// @group chat
-$kendo-chat-line-height: var( --kendo-chat-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-chat-line-height: var( --kendo-chat-line-height, var(--kendo-line-height) ) !default;
 
 /// The vertical spacing between the items of the Chat.
 /// @group chat
@@ -69,10 +69,10 @@ $kendo-chat-message-status-gap: var( --kendo-chat-message-status-gap, #{k-spacin
 
 /// The font size of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-font-size: var( --kendo-chat-timestamp-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-chat-timestamp-font-size: var( --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-chat-timestamp-line-height, var( --kendo-line-height-lg, normal ) ) !default;
+$kendo-chat-timestamp-line-height: var( --kendo-chat-timestamp-line-height, var(--kendo-line-height-lg) ) !default;
 /// The text transform of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-transform: var( --kendo-chat-timestamp-transform, none ) !default;
@@ -91,17 +91,17 @@ $kendo-chat-timestamp-separator-spacing: var( --kendo-chat-timestamp-separator-s
 
 /// The font size of the Chat message meta text.
 /// @group chat
-$kendo-chat-message-meta-font-size: var( --kendo-chat-message-meta-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-chat-message-meta-font-size: var( --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-chat-message-meta-line-height, var( --kendo-line-height-xs, normal ) ) !default;
+$kendo-chat-message-meta-line-height: var( --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-chat-author-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-chat-author-font-size: var( --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-chat-author-line-height, var( --kendo-line-height-xs, normal ) ) !default;
+$kendo-chat-author-line-height: var( --kendo-chat-author-line-height, var(--kendo-line-height-xs) ) !default;
 
 /// The text color of the Chat status.
 /// @group chat

package/scss/checkbox/_variables.scss

@@ -245,7 +245,7 @@ $kendo-checkbox-list-spacing: var( --kendo-checkbox-list-spacing, k-spacing(4) )
 $kendo-checkbox-list-item-padding-x: var( --kendo-checkbox-list-item-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the CheckBox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-y: var( --kendo-checkbox-list-item-padding-y, k-spacing(2) )!default;
+$kendo-checkbox-list-item-padding-y: var( --kendo-checkbox-list-item-padding-y, k-spacing(2) ) !default;
 
 
 // Checkbox ripple

package/scss/chip/_variables.scss

@@ -29,7 +29,7 @@ $kendo-chip-spacing: var( --kendo-chip-spacing, k-spacing(1) ) !default;
 
 /// The font family of the Chip.
 /// @group chip
-$kendo-chip-font-family: var( --kendo-chip-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-chip-font-family: var( --kendo-chip-font-family, var(--kendo-font-family) ) !default;
 
 /// The width of the Chip' avatar.
 /// @group chip
@@ -73,27 +73,27 @@ $kendo-chip-lg-padding-y: calc( #{k-spacing(2.5)} / 2 ) !default;
 
 /// The font weight of the Chip.
 /// @group chip
-$kendo-chip-font-weight: var(--kendo-chip-font-weight, var( --kendo-font-weight-normal, normal ) ) !default;
+$kendo-chip-font-weight: var(--kendo-chip-font-weight, var(--kendo-font-weight-normal) ) !default;
 
 /// The font size of the small Chip.
 /// @group chip
-$kendo-chip-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chip-sm-font-size: var(--kendo-font-size-sm) !default;
 /// The font size of the medium Chip.
 /// @group chip
-$kendo-chip-md-font-size: var( --kendo-chip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-chip-md-font-size: var( --kendo-chip-font-size, var(--kendo-font-size-sm) ) !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 small Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-sm-line-height: var( --kendo-line-height-lg, normal ) !default;
+$kendo-chip-sm-line-height: var(--kendo-line-height-lg) !default;
 /// The medium Chip's line height that is related to the $kendo-font-size.
 /// @group chip
-$kendo-chip-md-line-height: var( --kendo-chip-line-height, var( --kendo-line-height-lg, normal ) ) !default;
+$kendo-chip-md-line-height: var( --kendo-chip-line-height, var(--kendo-line-height-lg) ) !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, normal ) !default;
+$kendo-chip-lg-line-height: var(--kendo-line-height) !default;
 
 $kendo-chip-calc-size: calc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + #{$kendo-chip-sm-padding-y} * 2 + #{$kendo-chip-border-width} * 2 ) !default;
@@ -142,7 +142,7 @@ $kendo-chip-focus-outline: var( --kendo-chip-focus-outline, initial) !default;
 $kendo-chip-selected-text: var( --kendo-chip-selected-text, k-color(on-primary) ) !default;
 /// The base background color of the selected solid Chip.
 /// @group chip
-$kendo-chip-selected-bg: var( --kendo-chip-selected-bg, k-color(primary) )  !default;
+$kendo-chip-selected-bg: var( --kendo-chip-selected-bg, k-color(primary) ) !default;
 /// The base border color of the selected solid Chip.
 /// @group chip
 $kendo-chip-selected-border: var( --kendo-chip-selected-border, k-color(primary) ) !default;
@@ -151,7 +151,7 @@ $kendo-chip-selected-border: var( --kendo-chip-selected-border, k-color(primary)
 $kendo-chip-disabled-text: var( --kendo-chip-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base background color of the disabled solid Chip.
 /// @group chip
-$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) )  !default;
+$kendo-chip-disabled-bg: var( --kendo-chip-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
 /// The base border color of the disabled solid Chip.
 /// @group chip
 $kendo-chip-disabled-border: var( --kendo-chip-disabled-border, transparent ) !default;

package/scss/color-preview/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/functions/index.scss" as *;
 
@@ -23,9 +24,11 @@ $kendo-color-preview-hover-border: var(--kendo-color-preview-hover-border, color
 /// Background color of the color preview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-bg: var(--kendo-color-preview-no-color-bg, k-color(app-surface)) !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.
 /// Text color of the color preview when no color is selected.
 /// @group color-preview
-$kendo-color-preview-no-color-text: var(--kendo-color-preview-no-color-text, k-color(error-on-surface)) !default;
+$kendo-color-preview-no-color-text: map.get($kendo-colors, error) !default;
 /// Border color of the color preview when no color is selected.
 /// @group color-preview
 $kendo-color-preview-no-color-border: var(--kendo-color-preview-no-color-border, currentColor) !default;

package/scss/coloreditor/_variables.scss

@@ -31,13 +31,13 @@ $kendo-color-editor-border-width: var(--kendo-color-editor-border-width, 1px) !d
 $kendo-color-editor-border-radius: var(--kendo-color-editor-border-radius, k-border-radius(md)) !default;
 /// The font family of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-color-editor-font-family: var(--kendo-font-family) !default;
 /// The font size of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-color-editor-font-size: var(--kendo-font-size) !default;
 /// The line height of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-color-editor-line-height: var(--kendo-line-height) !default;
 /// The text color of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-text: var(--kendo-color-editor-text, k-color(on-app-surface)) !default;

package/scss/colorgradient/_variables.scss

@@ -25,13 +25,13 @@ $kendo-color-gradient-border-radius: var(--kendo-color-gradient-border-radius, k
 $kendo-color-gradient-gap: null !default;
 /// The font family of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-font-family: var(--kendo-color-gradient-font-family, var( --kendo-font-family, inherit )) !default;
+$kendo-color-gradient-font-family: var(--kendo-color-gradient-font-family, var(--kendo-font-family)) !default;
 /// The font size of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-font-size: var(--kendo-color-gradient-font-size, var( --kendo-font-size, inherit )) !default;
+$kendo-color-gradient-font-size: var(--kendo-color-gradient-font-size, var(--kendo-font-size)) !default;
 /// The line height of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-line-height: var(--kendo-color-gradient-line-height, var( --kendo-line-height, normal )) !default;
+$kendo-color-gradient-line-height: var(--kendo-color-gradient-line-height, var(--kendo-line-height)) !default;
 
 /// The text color of the ColorGradient.
 /// @group color-gradient
@@ -201,7 +201,7 @@ $kendo-color-gradient-input-width: var(--kendo-color-gradient-input-width, 48px)
 $kendo-color-gradient-input-gap: var(--kendo-color-gradient-input-gap, calc( #{$kendo-color-gradient-spacer} / 4 )) !default;
 /// The font size of the ColorGradient input labels.
 /// @group color-gradient
-$kendo-color-gradient-input-label-font-size: var(--kendo-color-gradient-input-label-font-size, var( --kendo-font-size-sm, inherit )) !default;
+$kendo-color-gradient-input-label-font-size: var(--kendo-color-gradient-input-label-font-size, var(--kendo-font-size-sm)) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group color-gradient
 $kendo-color-gradient-input-label-gap: var(--kendo-color-gradient-input-label-gap, calc( #{$kendo-color-gradient-spacer} / 4 )) !default;
@@ -221,7 +221,7 @@ $kendo-color-gradient-lg-input-width: var(--kendo-color-gradient-lg-input-width,
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
-$kendo-color-gradient-contrast-ratio-font-weight: var(--kendo-color-gradient-contrast-ratio-font-weight, var( --kendo-font-weight-bold, normal )) !default;
+$kendo-color-gradient-contrast-ratio-font-weight: var(--kendo-color-gradient-contrast-ratio-font-weight, var(--kendo-font-weight-bold)) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;

package/scss/colorpalette/_variables.scss

@@ -8,10 +8,10 @@ $kendo-color-palette-default-size: "md" !default;
 
 /// The font family of the ColorPalette.
 /// @group color-palette
-$kendo-color-palette-font-family: var( --kendo-color-palette-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-color-palette-font-family: var( --kendo-color-palette-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the ColorPalette.
 /// @group color-palette
-$kendo-color-palette-font-size: var( --kendo-color-palette-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-color-palette-font-size: var( --kendo-color-palette-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the ColorPalette.
 /// @group color-palette
 $kendo-color-palette-line-height: var( --kendo-color-palette-line-height, 0 ) !default;

package/scss/column-menu/_variables.scss

@@ -28,27 +28,27 @@ $kendo-column-menu-item-lg-padding-y: var( --kendo-column-menu-item-lg-padding-y
 
 /// The font size of the small ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-sm-font-size: var( --kendo-column-menu-sm-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-column-menu-sm-font-size: var( --kendo-column-menu-sm-font-size, var(--kendo-font-size) ) !default;
 /// The font size of the medium ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-md-font-size: var( --kendo-column-menu-md-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-column-menu-md-font-size: var( --kendo-column-menu-md-font-size, var(--kendo-font-size) ) !default;
 /// The font size of the large ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-lg-font-size: var( --kendo-column-menu-lg-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-column-menu-lg-font-size: var( --kendo-column-menu-lg-font-size, var(--kendo-font-size) ) !default;
 
 /// The line height of the small ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-sm-line-height: var( --kendo-column-menu-sm-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-column-menu-sm-line-height: var( --kendo-column-menu-sm-line-height, var(--kendo-line-height) ) !default;
 /// The line height of the medium ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-md-line-height: var( --kendo-column-menu-md-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-column-menu-md-line-height: var( --kendo-column-menu-md-line-height, var(--kendo-line-height) ) !default;
 /// The line height of the large ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-lg-line-height: var( --kendo-column-menu-lg-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-column-menu-lg-line-height: var( --kendo-column-menu-lg-line-height, var(--kendo-line-height) ) !default;
 
 /// The font family of the ColumnMenu.
 /// @group column-menu
-$kendo-column-menu-font-family: var( --kendo-column-menu-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-column-menu-font-family: var( --kendo-column-menu-font-family, var(--kendo-font-family) ) !default;
 
 // Group Menu
 /// The background color of the hovered ColumnMenu item.

package/scss/dataviz/_variables.scss

@@ -194,38 +194,38 @@ $kendo-series-30: $kendo-series-f-darker !default;
 $kendo-chart-border-width: var( --kendo-chart-border-width, 0px ) !default;
 /// The font-family of the chart component.
 /// @group charts
-$kendo-chart-font-family: var( --kendo-chart-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-chart-font-family: var( --kendo-chart-font-family, var(--kendo-font-family) ) !default;
 /// The font-size of the chart component.
 /// @group charts
-$kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-chart-font-size: var(--kendo-font-size) !default;
 /// The line-height of the chart component.
 /// @group charts
-$kendo-chart-line-height: var( --kendo-chart-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-chart-line-height: var( --kendo-chart-line-height, var(--kendo-line-height) ) !default;
 
 /// The font-size of the tooltip of the chart component.
 /// @group charts
-$kendo-chart-tooltip-font-size: var( --kendo-chart-tooltip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-chart-tooltip-font-size: var( --kendo-chart-tooltip-font-size, var(--kendo-font-size-sm) ) !default;
 /// The line-height of the tooltip of the chart component.
 /// @group charts
-$kendo-chart-tooltip-line-height: var( --kendo-chart-tooltip-line-height, var( --kendo-line-height-sm, normal ) ) !default;
+$kendo-chart-tooltip-line-height: var( --kendo-chart-tooltip-line-height, var(--kendo-line-height-sm) ) !default;
 /// The transition of the tooltip of the chart component.
 /// @group charts
 $kendo-chart-tooltip-transition: left k-transition(fade-in), top k-transition(fade-in) !default;
 
 /// The font-size of the label of the chart component.
 /// @group chart
-$kendo-chart-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-label-font-size: var(--kendo-font-size-sm) !default;
 
 /// The font-size of the title of the chart component.
 /// @group charts
-$kendo-chart-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-chart-title-font-size: var(--kendo-font-size-lg) !default;
 
 /// The font-size of the pane title of the chart component.
 /// @group charts
-$kendo-chart-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-chart-pane-title-font-size: var(--kendo-font-size-lg) !default;
 /// The font-weight of the pane title of the chart component.
 /// @group charts
-$kendo-chart-pane-title-font-weight: var( --kendo-font-weight, inherit ) !default;
+$kendo-chart-pane-title-font-weight: var(--kendo-font-weight) !default;
 
 /// The inactive background color of the chart component.
 /// @group chart
@@ -325,13 +325,13 @@ $kendo-chart-computed-title-height: 0px !default;
 
 /// The font-family of the treemap.
 /// @group charts
-$kendo-treemap-font-family: var( --kendo-treemap-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-treemap-font-family: var( --kendo-treemap-font-family, var(--kendo-font-family) ) !default;
 /// The font-size of the treemap.
 /// @group charts
-$kendo-treemap-font-size: var( --kendo-treemap-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-treemap-font-size: var( --kendo-treemap-font-size, var(--kendo-font-size) ) !default;
 /// The line-height of the treemap.
 /// @group charts
-$kendo-treemap-line-height: var( --kendo-treemap-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-treemap-line-height: var( --kendo-treemap-line-height, var(--kendo-line-height) ) !default;
 /// The horizontal padding of the treemap.
 /// @group charts
 $kendo-treemap-padding-x: var( --kendo-treemap-padding-x, k-spacing(1) ) !default;
@@ -366,10 +366,10 @@ $kendo-chart-overlay-bg: var( --kendo-chart-overlay-bg, k-color(app-surface) ) !
 // No Data
 /// The font-size of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-font-size: var( --kendo-chart-no-data-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
+$kendo-chart-no-data-font-size: var( --kendo-chart-no-data-font-size, var(--kendo-font-size-lg) ) !default;
 /// The font-weight of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-font-weight: var( --kendo-chart-no-data-font-weight, var( --kendo-font-weight, normal ) ) !default;
+$kendo-chart-no-data-font-weight: var( --kendo-chart-no-data-font-weight, var(--kendo-font-weight) ) !default;
 /// The text color of the Chart no data message.
 /// @group charts
 $kendo-chart-no-data-text: var( --kendo-chart-no-data-text, k-color(on-app-surface) ) !default;

package/scss/dock-manager/_variables.scss

@@ -38,16 +38,16 @@ $kendo-dock-manager-pane-title-padding-y: var( --kendo-dock-manager-pane-title-p
 $kendo-dock-manager-pane-title-padding-x: var( --kendo-dock-manager-pane-title-padding-x, null ) !default;
 /// The font family of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-family: var( --kendo-dock-manager-pane-title-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-dock-manager-pane-title-font-family: var( --kendo-dock-manager-pane-title-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-size: var( --kendo-dock-manager-pane-title-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
+$kendo-dock-manager-pane-title-font-size: var( --kendo-dock-manager-pane-title-font-size, var(--kendo-font-size-lg) ) !default;
 /// The line height of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-line-height: var( --kendo-dock-manager-pane-title-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-dock-manager-pane-title-line-height: var( --kendo-dock-manager-pane-title-line-height, var(--kendo-line-height) ) !default;
 /// The font weight of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-weight: var( --kendo-dock-manager-pane-title-font-weight, var( --kendo-font-weight, normal ) ) !default;
+$kendo-dock-manager-pane-title-font-weight: var( --kendo-dock-manager-pane-title-font-weight, var(--kendo-font-weight) ) !default;
 
 /// The horizontal padding of the pane content in the DockManager component.
 /// @group dock-manager

package/scss/draggable/_variables.scss

@@ -18,13 +18,13 @@ $kendo-drag-clue-padding-x: var( --kendo-drag-clue-padding-x, k-spacing(3) ) !de
 $kendo-drag-clue-padding-y: var( --kendo-drag-clue-padding-y, k-spacing(1.5) ) !default;
 /// Font family of the drag clue.
 /// @group draggable
-$kendo-drag-clue-font-family: var( --kendo-drag-clue-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-drag-clue-font-family: var( --kendo-drag-clue-font-family, var(--kendo-font-family) ) !default;
 /// Font size of the drag clue.
 /// @group draggable
-$kendo-drag-clue-font-size: var( --kendo-drag-clue-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-drag-clue-font-size: var( --kendo-drag-clue-font-size, var(--kendo-font-size) ) !default;
 /// Line height of the drag clue.
 /// @group draggable
-$kendo-drag-clue-line-height: var( --kendo-drag-clue-line-height, var( --kendo-line-height, inherit ) ) !default;
+$kendo-drag-clue-line-height: var( --kendo-drag-clue-line-height, var(--kendo-line-height) ) !default;
 /// Spacing of the drag clue.
 /// @group draggable
 $kendo-drag-clue-spacing: var( --kendo-drag-clue-spacing, .4ex ) !default;

package/scss/drawer/_variables.scss

@@ -7,7 +7,7 @@
 $kendo-drawer-bg: var( --kendo-drawer-bg, k-color(secondary-subtle) ) !default;
 /// The text color of the Drawer.
 /// @group drawer
-$kendo-drawer-text: var( --kendo-drawer-text, k-color(on-app-surface) )!default;
+$kendo-drawer-text: var( --kendo-drawer-text, k-color(on-app-surface) ) !default;
 /// The border color of the Drawer.
 /// @group drawer
 $kendo-drawer-border: var( --kendo-drawer-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
@@ -16,13 +16,13 @@ $kendo-drawer-border: var( --kendo-drawer-border, color-mix(in srgb, k-color(bor
 $kendo-drawer-border-width: var( --kendo-drawer-border-width, 0 ) !default;
 /// The font family of the Drawer.
 /// @group drawer
-$kendo-drawer-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-drawer-font-family: var(--kendo-font-family) !default;
 /// The font size of the Drawer.
 /// @group drawer
-$kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-drawer-font-size: var(--kendo-font-size) !default;
 /// The line height of the Drawer.
 /// @group drawer
-$kendo-drawer-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-drawer-line-height: var(--kendo-line-height) !default;
 
 /// The horizontal padding of the Drawer content.
 /// @group drawer
@@ -71,10 +71,10 @@ $kendo-drawer-item-spacing: var( --kendo-drawer-item-spacing, $kendo-drawer-item
 $kendo-drawer-item-font-size: var( --kendo-drawer-item-font-size, $kendo-drawer-font-size ) !default;
 /// The line height of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-line-height: var( --kendo-drawer-item-line-height, var( --kendo-line-height-lg, normal ) ) !default;
+$kendo-drawer-item-line-height: var( --kendo-drawer-item-line-height, var(--kendo-line-height-lg) ) !default;
 /// The font weight of the Drawer item.
 /// @group drawer
-$kendo-drawer-item-font-weight: var( --kendo-drawer-item-font-weight, var( --kendo-font-weight, normal ) ) !default;
+$kendo-drawer-item-font-weight: var( --kendo-drawer-item-font-weight, var(--kendo-font-weight) ) !default;
 
 /// The horizontal padding of the Drawer item in each level.
 /// @group drawer
@@ -95,7 +95,7 @@ $kendo-drawer-icon-padding-y: var( --kendo-drawer-icon-padding-y, k-spacing(1) )
 
 /// The initial width of the mini Drawer.
 /// @group drawer
-$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + 2 * #{$kendo-drawer-items-padding-x} + var( --kendo-icon-size, 1rem ) )  !default;
+$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + 2 * #{$kendo-drawer-items-padding-x} + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The border width of the Drawer item ripple.
 /// @group drawer
@@ -148,7 +148,7 @@ $kendo-drawer-item-focus-icon-text: var( --kendo-drawer-item-focus-icon-text, $k
 
 /// The font weight of the selected Drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-font-weight: var( --kendo-drawer-item-selected-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
+$kendo-drawer-item-selected-font-weight: var( --kendo-drawer-item-selected-font-weight, var(--kendo-font-weight-semibold) ) !default;
 /// The background color of the selected Drawer item.
 /// @group drawer
 $kendo-drawer-item-selected-bg: var( --kendo-drawer-item-selected-bg, $kendo-drawer-item-bg ) !default;

package/scss/dropzone/_layout.scss

@@ -17,7 +17,7 @@
         .k-dropzone-note {
             margin-block-end: $kendo-dropzone-note-spacing;
             font-weight: $kendo-dropzone-note-font-weight;
-            line-height: var( --kendo-line-height-lg, normal );
+            line-height: var(--kendo-line-height-lg);
         }
     }
 }

package/scss/dropzone/_variables.scss

@@ -16,13 +16,13 @@ $kendo-dropzone-min-height: var( --kendo-dropzone-min-height, 220px ) !default;
 
 /// The font family of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-family: var( --kendo-dropzone-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-dropzone-font-family: var( --kendo-dropzone-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the DropZone.
 /// @group dropzone
-$kendo-dropzone-font-size: var( --kendo-dropzone-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-dropzone-font-size: var( --kendo-dropzone-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the DropZone.
 /// @group dropzone
-$kendo-dropzone-line-height: var( --kendo-dropzone-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-dropzone-line-height: var( --kendo-dropzone-line-height, var(--kendo-line-height) ) !default;
 
 /// The background color of the DropZone.
 /// @group dropzone
@@ -46,10 +46,10 @@ $kendo-dropzone-icon-hover-text: var( --kendo-dropzone-icon-hover-text, #{k-colo
 
 /// The font size of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-size: var( --kendo-dropzone-hint-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-dropzone-hint-font-size: var( --kendo-dropzone-hint-font-size, var(--kendo-font-size) ) !default;
 /// The font weight of the DropZone hint.
 /// @group dropzone
-$kendo-dropzone-hint-font-weight: var( --kendo-dropzone-hint-font-weight, var( --kendo-font-weight-semibold, 600 ) ) !default;
+$kendo-dropzone-hint-font-weight: var( --kendo-dropzone-hint-font-weight, var(--kendo-font-weight-semibold) ) !default;
 /// The spacing below the DropZone hint.
 /// @group dropzone
 $kendo-dropzone-hint-spacing: var( --kendo-dropzone-hint-spacing, #{k-spacing(2)} ) !default;
@@ -59,7 +59,7 @@ $kendo-dropzone-hint-text: var( --kendo-dropzone-hint-text, #{$kendo-dropzone-te
 
 /// The font size of the DropZone note.
 /// @group dropzone
-$kendo-dropzone-note-font-size: var( --kendo-dropzone-note-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
+$kendo-dropzone-note-font-size: var( --kendo-dropzone-note-font-size, var(--kendo-font-size-sm) ) !default;
 /// The font weight of the DropZone note.
 /// @group dropzone
 $kendo-dropzone-note-font-weight: var( --kendo-dropzone-note-font-weight, inherit ) !default;

package/scss/editor/_variables.scss

@@ -7,13 +7,13 @@
 $kendo-editor-border-width: var( --kendo-editor-border-width, 1px ) !default;
 /// The font family of the Еditor.
 /// @group editor
-$kendo-editor-font-family: var( --kendo-editor-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-editor-font-family: var( --kendo-editor-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the Еditor.
 /// @group editor
-$kendo-editor-font-size: var( --kendo-editor-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-editor-font-size: var( --kendo-editor-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the Еditor.
 /// @group editor
-$kendo-editor-line-height: var( --kendo-editor-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-editor-line-height: var( --kendo-editor-line-height, var(--kendo-line-height) ) !default;
 /// The text color of the Editor.
 /// @group editor
 $kendo-editor-text: var( --kendo-editor-text, #{k-color(on-app-surface)} ) !default;

package/scss/expansion-panel/_variables.scss

@@ -9,13 +9,13 @@ $kendo-expander-margin-y: var( --kendo-expander-margin-y, k-spacing(2) ) !defaul
 $kendo-expander-border-width: var( --kendo-expander-border-width, 1px ) !default;
 /// The font family of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-family: var( --kendo-expander-font-family, var(--kendo-font-family, inherit) ) !default;
+$kendo-expander-font-family: var( --kendo-expander-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-size: var( --kendo-expander-font-size, var(--kendo-font-size, inherit) ) !default;
+$kendo-expander-font-size: var( --kendo-expander-font-size, var(--kendo-font-size) ) !default;
 /// The hine height of the ExpansionPanel.
 /// @group expander
-$kendo-expander-line-height: var( --kendo-expander-line-height, var(--kendo-line-height, normal) ) !default;
+$kendo-expander-line-height: var( --kendo-expander-line-height, var(--kendo-line-height) ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander

package/scss/fab/_variables.scss

@@ -25,13 +25,13 @@ $kendo-fab-default-size: "md" !default;
 $kendo-fab-border-width: var( --kendo-fab-border-width, 1px ) !default;
 /// The font family of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-family: var( --kendo-fab-font-family, var( --kendo-font-family, inherit ) ) !default;
+$kendo-fab-font-family: var( --kendo-fab-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: var( --kendo-fab-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-fab-font-size: var( --kendo-fab-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: var( --kendo-fab-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-fab-line-height: var( --kendo-fab-line-height, var(--kendo-line-height) ) !default;
 
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
@@ -97,10 +97,10 @@ $kendo-fab-item-text-border-style: var( --kendo-fab-item-text-border-style, soli
 $kendo-fab-item-text-border-radius: var( --kendo-fab-item-text-border-radius, #{k-border-radius(md)} ) !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var( --kendo-font-size-xs, inherit ) ) !default;
+$kendo-fab-item-text-font-size: var( --kendo-fab-item-text-font-size, var(--kendo-font-size-xs) ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var( --kendo-line-height-xs, inherit ) ) !default;
+$kendo-fab-item-text-line-height: var( --kendo-fab-item-text-line-height, var(--kendo-line-height-xs) ) !default;
 
 /// The outline color of the focused FAB item.
 /// @group floating-action-button

package/scss/file-box/_variables.scss

@@ -28,16 +28,16 @@ $kendo-file-box-border-style: var(--kendo-file-box-border-style, solid ) !defaul
 $kendo-file-box-border-radius: var(--kendo-file-box-border-radius, k-border-radius(md) ) !default;
 /// The font size of the File Box file name.
 /// @group file-box
-$kendo-file-box-name-font-size: var(--kendo-file-box-name-font-size, var( --kendo-font-size-sm, inherit )) !default;
+$kendo-file-box-name-font-size: var(--kendo-file-box-name-font-size, var(--kendo-font-size-sm)) !default;
 /// The line height of the File Box file name.
 /// @group file-box
-$kendo-file-box-name-line-height: var(--kendo-file-box-name-line-height, var( --kendo-line-height-lg, normal )) !default;
+$kendo-file-box-name-line-height: var(--kendo-file-box-name-line-height, var(--kendo-line-height-lg)) !default;
 /// The font size of the File Box file size.
 /// @group file-box
-$kendo-file-box-size-font-size: var(--kendo-file-box-size-font-size, var( --kendo-font-size-xs, inherit )) !default;
+$kendo-file-box-size-font-size: var(--kendo-file-box-size-font-size, var(--kendo-font-size-xs)) !default;
 /// The line height of the File Box file size.
 /// @group file-box
-$kendo-file-box-size-line-height: var(--kendo-file-box-size-line-height, var( --kendo-line-height-xs, normal )) !default;
+$kendo-file-box-size-line-height: var(--kendo-file-box-size-line-height, var(--kendo-line-height-xs)) !default;
 
 /// The background color of the File Box.
 /// @group file-box

package/scss/filemanager/_variables.scss

@@ -11,13 +11,13 @@ $kendo-file-manager-spacer: k-spacing(4) !default;
 $kendo-file-manager-border-width: var( --kendo-file-manager-border-width, 1px ) !default;
 /// The font family of the FileManager.
 /// @group file-manager
-$kendo-file-manager-font-family: var( --kendo-file-manager-font-family, var( --kendo-font-family, normal ) ) !default;
+$kendo-file-manager-font-family: var( --kendo-file-manager-font-family, var(--kendo-font-family) ) !default;
 /// The font size of the FileManager.
 /// @group file-manager
-$kendo-file-manager-font-size: var( --kendo-file-manager-font-size, var( --kendo-font-size, inherit ) ) !default;
+$kendo-file-manager-font-size: var( --kendo-file-manager-font-size, var(--kendo-font-size) ) !default;
 /// The line height of the FileManager.
 /// @group file-manager
-$kendo-file-manager-line-height: var( --kendo-file-manager-line-height, var( --kendo-line-height, normal ) ) !default;
+$kendo-file-manager-line-height: var( --kendo-file-manager-line-height, var(--kendo-line-height) ) !default;
 /// The background color of the FileManager.
 /// @group file-manager
 $kendo-file-manager-bg: var( --kendo-file-manager-bg, #{k-color(surface-alt)} ) !default;

package/scss/floating-label/_variables.scss

@@ -7,7 +7,7 @@ $kendo-floating-label-scale: var(--kendo-floating-label-scale, 1) !default;
 
 /// The font size of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-font-size: var(--kendo-floating-label-font-size, var( --kendo-font-size, inherit )) !default;
+$kendo-floating-label-font-size: var(--kendo-floating-label-font-size, var(--kendo-font-size)) !default;
 
 /// The maximum width of the Floating Label.
 /// @group floating-label
@@ -15,7 +15,7 @@ $kendo-floating-label-max-width: var(--kendo-floating-label-max-width, 90%) !def
 
 /// The line height of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-line-height: var(--kendo-floating-label-line-height, var( --kendo-line-height, normal )) !default;
+$kendo-floating-label-line-height: var(--kendo-floating-label-line-height, var(--kendo-line-height)) !default;
 
 /// The height of the Floating Label.
 /// @group floating-label