@progress/kendo-theme-fluent 8.1.1-dev.0 → 8.2.0-dev.0

package/dist/meta/variables.json

@@ -750,7 +750,7 @@
     },
     "kendo-components": {
         "type": "List",
-        "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
+        "value": "\"typography\", \"utils\", \"draggable\", \"table\", \"icon\", \"chip\", \"messagebox\", \"input\", \"list\", \"listgroup\", \"overlay\", \"ripple\", \"virtual-scroller\", \"avatar\", \"badge\", \"color-preview\", \"loader\", \"skeleton\", \"tooltip\", \"time-marker\", \"button\", \"split-button\", \"menu-button\", \"textbox\", \"textarea\", \"checkbox\", \"listbox\", \"progressbar\", \"radio\", \"slider\", \"form\", \"validator\", \"floating-label\", \"calendar\", \"popup\", \"time-selector\", \"autocomplete\", \"captcha\", \"color-palette\", \"color-gradient\", \"color-editor\", \"color-picker\", \"combobox\", \"date-input\", \"date-picker\", \"time-picker\", \"date-time-picker\", \"date-range-picker\", \"dropdown-grid\", \"dropdown-list\", \"dropdown-tree\", \"masked-textbox\", \"multiselect\", \"numeric-textbox\", \"rating\", \"searchbox\", \"switch\", \"upload\", \"dropzone\", \"actions\", \"appbar\", \"fab\", \"menu\", \"toolbar\", \"action-sheet\", \"dialog\", \"drawer\", \"notification\", \"popover\", \"responsive-panel\", \"window\", \"bottom-navigation\", \"breadcrumb\", \"pager\", \"stepper\", \"tabstrip\", \"treeview\", \"wizard\", \"card\", \"expander\", \"panel\", \"panelbar\", \"splitter\", \"tile-layout\", \"dock-manager\", \"chart-wizard\", \"grid\", \"listview\", \"spreadsheet\", \"pivotgrid\", \"treelist\", \"filter\", \"file-manager\", \"task-board\", \"editor\", \"image-editor\", \"gantt\", \"scheduler\", \"adaptive\", \"chat\", \"media-player\", \"timeline\", \"pdf-viewer\", \"scroller\", \"scrollview\", \"prompt\", \"dataviz\", \"map\", \"orgchart\", \"signature\""
     },
     "kendo-elevation": {
         "type": "Map",
@@ -12783,6 +12783,50 @@
         "type": "String",
         "value": "var(--kendo-color-primary, #0078d4)"
     },
+    "kendo-chart-wizard-icon-area-color": {
+        "type": "String",
+        "value": "var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-chart-wizard-icon-area-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-primary-subtle, #deecf9)"
+    },
+    "kendo-chart-wizard-icon-area-border-radius": {
+        "type": "String",
+        "value": "var(--kendo-border-radius-none, 0px)"
+    },
+    "kendo-chart-wizard-icon-area-padding": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-chart-wizard-icon-area-focus-shadow": {
+        "type": "List",
+        "value": "inset 0 0 0 1px var(--kendo-color-primary-emphasis, #004578)"
+    },
+    "kendo-chart-wizard-icon-area-selected-shadow": {
+        "type": "List",
+        "value": "inset 0 0 0 1px var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-chart-wizard-chart-type-selected-color": {
+        "type": "String",
+        "value": "var(--kendo-color-primary, #0078d4)"
+    },
+    "kendo-chart-wizard-preview-pane-padding": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-chart-wizard-property-pane-padding": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
+    "kendo-chart-wizard-chart-type-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-chart-wizard-icon-text-gap": {
+        "type": "String",
+        "value": "var(--kendo-spacing-3, 0.75rem)"
+    },
     "kendo-editor-border-width": {
         "type": "Number",
         "value": "1px"
@@ -16055,6 +16099,18 @@
         "type": "String",
         "value": "var(--kendo-color-primary, #0078d4)"
     },
+    "kendo-chat-quick-reply-focus-offset": {
+        "type": "String",
+        "value": "var(--kendo-spacing-0\\.5, 0.125rem)"
+    },
+    "kendo-chat-quick-reply-focus-outline-width": {
+        "type": "Number",
+        "value": "1px"
+    },
+    "kendo-chat-quick-reply-focus-outline-style": {
+        "type": "String",
+        "value": "solid"
+    },
     "kendo-media-player-border-width": {
         "type": "Number",
         "value": "1px"

package/lib/swatches/all.json

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

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "8.1.1-dev.0",
+    "version": "8.2.0-dev.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.1.1-dev.0",
+    "version": "8.2.0-dev.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.1.1-dev.0",
+  "version": "8.2.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -53,12 +53,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "3.0.0",
-    "@progress/kendo-theme-core": "8.1.1-dev.0",
-    "@progress/kendo-theme-utils": "8.1.1-dev.0"
+    "@progress/kendo-theme-core": "8.2.0-dev.0",
+    "@progress/kendo-theme-utils": "8.2.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "01ab0981609357a5d19b652cc9b6673bd4429604"
+  "gitHead": "8644816d0a84d5207e206287bdc16855e2e87199"
 }

package/scss/chart-wizard/_index.scss

@@ -0,0 +1,36 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "chart-wizard",
+    dependencies: (
+        "icon",
+        "window",
+        "splitter",
+        "dataviz",
+        "expansion-panel",
+        "grid",
+        "tabstrip",
+        "listview",
+        "forms",
+        "combobox"
+    )
+);
+
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin chart-wizard-styles() {
+    @include module.render( "chart-wizard" ) {
+        @include kendo-chart-wizard--layout();
+        @include kendo-chart-wizard--theme();
+    }
+}

package/scss/chart-wizard/_layout.scss

@@ -0,0 +1,48 @@
+@use "../core/" as *;
+@use "../icon/_variables.scss" as *;
+@use "../expansion-panel/_variables.scss" as *;
+@use "../core/spacing/" as *;
+
+@use "../core/_variables.scss" as *;
+@use "./_variables.scss" as *;
+@use "../core/typography/" as *;
+
+@mixin kendo-chart-wizard--layout() {
+   // Chart wizard
+   .k-chart-wizard {
+        .k-icon-text-wrapper {
+            display: flex;
+            align-items: center;
+            gap: var( --kendo-chart-wizard-icon-text-gap, #{$kendo-chart-wizard-icon-text-gap} );
+        }
+
+        .k-icon-background-area {
+            display: flex;
+            padding: var( --kendo-chart-wizard-icon-area-padding, #{$kendo-chart-wizard-icon-area-padding} );
+            border-radius: var( --kendo-chart-wizard-icon-area-border-radiusg, #{$kendo-chart-wizard-icon-area-border-radius} );
+        }
+   }
+
+   .k-chart-types-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: var( --kendo-chart-wizard-chart-type-spacing, #{$kendo-chart-wizard-chart-type-spacing} );
+    }
+
+    .k-chart-wizard-splitter {
+        height: 100%;
+
+        .k-tabstrip {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .k-chart-wizard-preview-pane {
+        padding: var( --kendo-chart-wizard-preview-pane-padding, #{$kendo-chart-wizard-preview-pane-padding} );
+    }
+
+    .k-chart-wizard-property-pane {
+        padding: var( --kendo-chart-wizard-property-pane-padding, #{$kendo-chart-wizard-property-pane-padding} );
+    }
+}

package/scss/chart-wizard/_theme.scss

@@ -0,0 +1,32 @@
+@use "./_variables.scss" as *;
+
+@mixin kendo-chart-wizard--theme() {
+    .k-chart-wizard {
+        .k-icon-text-wrapper {
+            &.k-selected {
+                color: var( --kendo-chart-wizard-chart-type-selected-color, #{$kendo-chart-wizard-chart-type-selected-color} );
+
+                .k-icon-background-area {
+                    box-shadow: var( --kendo-chart-wizard-icon-area-selected-shadow, #{$kendo-chart-wizard-icon-area-selected-shadow} );
+                }
+            }
+
+            &:hover,
+            &.k-hover {
+                cursor: pointer;
+            }
+
+            &:focus,
+            &.k-focus {
+                .k-icon-background-area {
+                    box-shadow: var( --kendo-chart-wizard-icon-area-focus-shadow, #{$kendo-chart-wizard-icon-area-focus-shadow} );
+                }
+            }
+        }
+
+        & .k-icon-background-area {
+            color: var( --kendo-chart-wizard-icon-area-color, #{$kendo-chart-wizard-icon-area-color} );
+            background-color: var( --kendo-chart-wizard-icon-area-bg, #{$kendo-chart-wizard-icon-area-bg} );
+        }
+    }
+}

package/scss/chart-wizard/_variables.scss

@@ -0,0 +1,41 @@
+@use "sass:map";
+@use "../core/" as *;
+
+// Chart wizard
+
+/// The color of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+/// The background color of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-bg: if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) !default;
+/// The border radius of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-border-radius: k-border-radius(none) !default;
+/// The padding of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
+/// The box shadow of the focused area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-focus-shadow: inset 0 0 0 1px if($kendo-enable-color-system, k-color( primary-emphasis ), k-get-theme-color-var( primary-130 )) !default;
+/// The box shadow of the selected area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-selected-shadow: inset 0 0 0 1px $kendo-chart-wizard-icon-area-color !default;
+
+/// The color of the selected chart type items in the Property panel.
+/// @group chart-wizard
+$kendo-chart-wizard-chart-type-selected-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+
+/// The padding of the preview pane.
+/// @group chart-wizard
+$kendo-chart-wizard-preview-pane-padding: k-spacing(3) !default;
+/// The padding of the property pane.
+/// @group chart-wizard
+$kendo-chart-wizard-property-pane-padding: k-spacing(3) !default;
+
+/// The gap between the chart type items in the Property panel.
+/// @group chart-wizard
+$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default;
+/// The gap between the icon area and its text.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default;

package/scss/chat/_layout.scss

@@ -231,6 +231,10 @@
         padding-block: var( --kendo-chat-quick-reply-padding-y, #{ $kendo-chat-quick-reply-padding-y } );
         border-width: 1px;
         border-style: solid;
+        border-color: currentColor;
+        background: none;
+        color: inherit;
+        position: relative;
         line-height: var( --kendo-chat-quick-reply-line-height, #{ $kendo-chat-quick-reply-line-height } );
         cursor: pointer;
         user-select: none;
@@ -240,6 +244,18 @@
         transition-duration: .2s;
         transition-timing-function: ease-in-out;
         outline: none;
+
+        &:focus::after,
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            border-radius: var(--kendo-border-radius-full, 9999px);
+            inset: var( --kendo-chat-quick-reply-focus-offset, #{$kendo-chat-quick-reply-focus-offset} );
+            outline-width: var( --kendo-chat-quick-reply-focus-outline-width, #{$kendo-chat-quick-reply-focus-outline-width} );
+            outline-style: var( --kendo-chat-quick-reply-focus-outline-style, #{$kendo-chat-quick-reply-focus-outline-style} );
+            z-index: 1;
+        }
     }
 
 

package/scss/chat/_theme.scss

@@ -68,15 +68,21 @@
                 var( --kendo-chat-quick-reply-bg, #{ $kendo-chat-quick-reply-bg } ),
                 var( --kendo-chat-quick-reply-border, #{ $kendo-chat-quick-reply-border } )
             );
-        }
-        .k-quick-reply:hover {
-            @include fill(
-                var( --kendo-chat-quick-reply-hover-text, #{ $kendo-chat-quick-reply-hover-text } ),
-                var( --kendo-chat-quick-reply-hover-bg, #{ $kendo-chat-quick-reply-hover-bg } ),
-                var( --kendo-chat-quick-reply-hover-border, #{ $kendo-chat-quick-reply-hover-border } )
-            );
-        }
 
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    var( --kendo-chat-quick-reply-hover-text, #{ $kendo-chat-quick-reply-hover-text } ),
+                    var( --kendo-chat-quick-reply-hover-bg, #{ $kendo-chat-quick-reply-hover-bg } ),
+                    var( --kendo-chat-quick-reply-hover-border, #{ $kendo-chat-quick-reply-hover-border } )
+                );
+            }
+
+            &:focus::after,
+            &.k-focus::after {
+                outline-color: var( --kendo-chat-quick-reply-focus-outline, initial )
+            }
+        }
     }
 
 

package/scss/chat/_variables.scss

@@ -225,3 +225,13 @@ $kendo-chat-quick-reply-hover-text: var( --kendo-component-bg, inherit ) !defaul
 /// The border color of the hovered Chat quick reply.
 /// @group chat
 $kendo-chat-quick-reply-hover-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
+
+/// The offset of the focused Chat quick reply.
+/// @group chat
+$kendo-chat-quick-reply-focus-offset: k-spacing(0.5) !default;
+/// The outline width of the focused Chat quick reply.
+/// @group chat
+$kendo-chat-quick-reply-focus-outline-width: 1px !default;
+/// The outline style of the focused Chat quick reply.
+/// @group chat
+$kendo-chat-quick-reply-focus-outline-style: solid !default;

package/scss/core/module-system/_components.scss

@@ -110,6 +110,7 @@ $components: (
     "splitter",
     "tilelayout",
     "dock-manager",
+    "chart-wizard",
 
     // Data management
     "grid",

package/scss/index.scss

@@ -121,6 +121,7 @@
 @forward "./splitter";
 @forward "./tilelayout";
 @forward "./dock-manager";
+@forward "./chart-wizard";
 
 
 // Editors
@@ -285,6 +286,7 @@
 @use "./splitter" as *;
 @use "./tilelayout" as *;
 @use "./dock-manager" as *;
+@use "./chart-wizard" as *;
 
 
 // Data management
@@ -473,6 +475,7 @@
     @include splitter-styles();
     @include tilelayout-styles();
     @include dock-manager-styles();
+    @include chart-wizard-styles();
 
     // Data management
     @include grid-styles();

package/scss/map/_variables.scss

@@ -3,84 +3,84 @@
 @use "../button/_variables.scss" as *;
 @use "../core/spacing" as *;
 
-/// Font size of the map.
+/// The font size of the Map.
 /// @group map
 $kendo-map-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the map.
+/// The line height of the Map.
 /// @group map
 $kendo-map-line-height: var( --kendo-line-height, normal ) !default;
-/// Font family of the map.
+/// The font family of the Map.
 /// @group map
 $kendo-map-font-family: var( --kendo-font-family, normal ) !default;
 
-/// Background color of the map.
+/// The background color of the Map.
 /// @group map
 $kendo-map-bg: var( --kendo-component-bg, transparent ) !default;
-/// Text color of the map.
+/// The text color of the Map.
 /// @group map
 $kendo-map-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the map.
+/// The border color of the Map.
 /// @group map
 $kendo-map-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
-/// Border width of the map.
+/// The border width of the Map.
 /// @group map
 $kendo-map-border-width: 0px !default;
-/// Height of the map.
+/// The height of the Map.
 /// @group map
 $kendo-map-height: 600px !default;
 
-/// Map navigator horizontal margin.
+/// The horizontal margin of the Map navigator.
 /// @group map
 $kendo-map-navigator-margin-x: k-spacing(4) !default;
-/// Map navigator vertical margin.
+/// The vertical margin of the Map navigator.
 /// @group map
 $kendo-map-navigator-margin-y: k-spacing(4) !default;
-/// Map navigator padding.
+/// The padding of the Map navigator.
 /// @group map
 $kendo-map-navigator-padding: k-spacing(0.5) !default;
-/// Map navigator width.
+/// The width of the Map navigator.
 /// @group map
 $kendo-map-navigator-width: calc( var( --kendo-icon-size) * 3 + calc( #{$kendo-map-navigator-padding} * 2) ) !default;
-/// Map navigator height.
+/// The height of the Map navigator.
 /// @group map
 $kendo-map-navigator-height: $kendo-map-navigator-width !default;
-/// Map navigator border width.
+/// The border width of the Map navigator.
 /// @group map
 $kendo-map-navigator-border-width: 1px !default;
-/// Map navigator background color.
+/// The background color of the Map navigator.
 /// @group map
 $kendo-map-navigator-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
-/// Map navigator text color.
+/// The text color of the Map navigator.
 /// @group map
 $kendo-map-navigator-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
-/// Map navigator border color.
+/// The border color of the Map navigator.
 /// @group map
 $kendo-map-navigator-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
-/// Map zoom control margin.
+/// The margin of the Map zoom control.
 /// @group map
 $kendo-map-zoom-control-margin: k-spacing(4) !default;
-/// Map zoom control horizontal padding.
+/// The horizontal padding of the Map zoom control.
 /// @group map
 $kendo-map-zoom-control-button-padding-x: $kendo-button-md-padding-y !default;
-/// Map zoom control vertical padding.
+/// The vertical padding of the Map zoom control.
 /// @group map
 $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding-x !default;
 
-/// Map attribution horizontal padding.
+/// The horizontal padding of the Map attribution.
 /// @group map
 $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
-/// Map attribution vertical padding.
+/// The vertical padding of the Map attribution.
 /// @group map
 $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
-/// Map attribution font size.
+/// The font size of the Map attribution.
 /// @group map
 $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default;
-/// Map attribution background color.
+/// The background color of the Map attribution.
 /// @group map
 $kendo-map-attribution-bg: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
 
-/// Map marker fill color.
+/// The fill color of the Map marker.
 /// @group map
 $kendo-map-marker-fill: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;

package/scss/mediaplayer/_variables.scss

@@ -1,49 +1,49 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Border width of the mediaplayer.
+/// The border width of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-border-width: 1px !default;
-/// Font family of the mediaplayer.
+/// The font family of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the mediaplayer.
+/// The font size of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the mediaplayer.
+/// The line height of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the mediaplayer.
+/// The background color of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the mediaplayer.
+/// The text color of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the mediaplayer.
+/// The border color of the MediaPlayer.
 /// @group mediaplayer
 $kendo-media-player-border: var( --kendo-component-border, inherit ) !default;
 
-/// Mediaplayer overlay background color.
+/// The background color of the MediaPlayer overlay.
 /// @group mediaplayer
 $kendo-media-player-overlay-bg: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
-/// Mediaplayer quality button border color.
+/// The border color of the MediaPlayer button.
 /// @group mediaplayer
 $kendo-media-player-quality-border: if($kendo-enable-color-system, k-color( border ), k-get-theme-color-var( neutral-110 )) !default;
 
-/// Media player title font size.
+/// The font size of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
-/// Mediaplayer titlebar horizontal padding.
+/// The horizontal padding of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-padding-x: k-spacing(2) !default;
-/// Mediaplayer titlebar vertical padding.
+/// The vertical padding of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-padding-y: k-spacing(2) !default;
-/// Mediaplayer titlebar background color.
+/// The background color of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 40%, transparent), rgba( $kendo-color-black, .4 )) !default;
-/// Mediaplayer titlebar text color.
+/// The text color of the MediaPlayer title.
 /// @group mediaplayer
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;