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

package/scss/chat/_layout.scss

@@ -8,7 +8,7 @@
     @include kendo-chat--layout-base();
 
     .k-chat .k-chat-file-name {
-        font-weight: var( --kendo-font-weight-semibold, inherit);;
+        font-weight: var(--kendo-font-weight-semibold);;
     }
 
     // Message group

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/core/_index.scss

@@ -37,11 +37,21 @@
 
     $kendo-letter-spacing: $kendo-letter-spacing !default,
 
+    $default-font-weights: $kendo-font-weights,
+    $kendo-font-weights: $kendo-font-weights !default,
+    $kendo-font-weight: $kendo-font-weight !default,
+
+    $default-letter-spacings: $kendo-letter-spacings,
+    $kendo-letter-spacings: $kendo-letter-spacings !default,
+
+    $default-font-families: $kendo-font-families,
+    $kendo-font-families: $kendo-font-families !default,
     $kendo-font-family: $kendo-font-family !default,
     // Spacing
     $default-spacing: $kendo-spacing,
     $kendo-spacing: $kendo-spacing !default,
     // Radii
+    $kendo-border-radius-base: $kendo-border-radius-base !default,
     $default-border-radii: $kendo-border-radii,
     $kendo-border-radii: $kendo-border-radii !default,
     // Motion

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

@@ -1,33 +1,36 @@
 @use "sass:map";
-@use "../spacing/index.scss" as *;
+
+/// The base border radius used across the Components.
+/// @group radii
+$kendo-border-radius-base: .25rem !default;
 
 /// The none border radius used across the Components.
 /// @group radii
-$kendo-border-radius-none: map.get($kendo-spacing, 0) !default;
+$kendo-border-radius-none: 0px !default;
 /// The extra small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xs: map.get($kendo-spacing, 1px) !default;
+$kendo-border-radius-xs: calc(var(--kendo-border-radius-base) * .25) !default;
 /// The small border radius used across the Components.
 /// @group radii
-$kendo-border-radius-sm: map.get($kendo-spacing, 0.5) !default;
+$kendo-border-radius-sm: calc(var(--kendo-border-radius-base) * .5) !default;
 /// The medium border radius used across the Components.
 /// @group radii
-$kendo-border-radius-md: map.get($kendo-spacing, 1) !default;
+$kendo-border-radius-md: var(--kendo-border-radius-base) !default;
 /// The large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-lg: map.get($kendo-spacing, 1.5) !default;
+$kendo-border-radius-lg: calc(var(--kendo-border-radius-base) * 1.5) !default;
 /// The extra large border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xl: map.get($kendo-spacing, 2) !default;
+$kendo-border-radius-xl: calc(var(--kendo-border-radius-base) * 2) !default;
 /// The third largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxl: map.get($kendo-spacing, 3) !default;
+$kendo-border-radius-xxl: calc(var(--kendo-border-radius-base) * 3) !default;
 /// The second largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-xxxl: map.get($kendo-spacing, 4) !default;
+$kendo-border-radius-xxxl: calc(var(--kendo-border-radius-base) * 4) !default;
 /// The largest border radius used across the Components.
 /// @group radii
-$kendo-border-radius-full: 9999px !default;
+$kendo-border-radius-full: calc(var(--kendo-border-radius-base) * 9999) !default;
 
 $_default-border-radii: (
     none: $kendo-border-radius-none,