@progress/kendo-theme-bootstrap 12.2.0-dev.2 → 12.2.0-dev.4

package/scss/badge/_variables.scss

@@ -91,6 +91,8 @@ $kendo-badge-sizes: (
     )
 ) !default;
 
+/// The theme colors of the Badge.
+/// @group badge
 $kendo-badge-theme-colors: (
     "primary": k-color(primary),
     "secondary": k-color(secondary),

package/scss/bottom-navigation/_variables.scss

@@ -64,6 +64,8 @@ $kendo-bottom-nav-flat-bg: k-color(surface-alt) !default;
 /// @group bottom-navigation
 $kendo-bottom-nav-flat-border: k-color(border) !default;
 
+/// The navigation theme colors of the BottomNavigation.
+/// @group bottom-navigation
 $kendo-bottom-navigation-theme-colors: (
     "primary": k-color(primary),
     "secondary": k-color(secondary),

package/scss/bubble/_variables.scss

@@ -76,7 +76,6 @@ $kendo-bubble-expandable-icon-padding-y: k-spacing(2.5) !default;
     $kendo-bubble-border-width: $kendo-bubble-border-width,
     $kendo-bubble-border-style: $kendo-bubble-border-style,
     $kendo-bubble-line-height: $kendo-bubble-line-height,
-
     $kendo-bubble-text: $kendo-bubble-text,
     $kendo-bubble-bg: $kendo-bubble-bg,
     $kendo-bubble-border: $kendo-bubble-border,

package/scss/button/_variables.scss

@@ -67,14 +67,10 @@ $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
 /// @group button
 $kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The calculated height of the Button.
-/// @group button
 $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;
 
-/// The calculated inner height of the Button excluding the border width.
-/// @group button
 $kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-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;
@@ -208,35 +204,53 @@ $kendo-button-disabled-shadow: null !default;
 $kendo-button-pulsing-opacity: .4 !default;
 
 // Solid Button
+/// The gradient of the solid Button.
+/// @group button
 $kendo-solid-button-gradient: none !default;
-$kendo-solid-button-shade-function: "k-color-darken" !default;
-$kendo-solid-button-shade-text-amount: 0 !default;
-$kendo-solid-button-shade-bg-amount: 0 !default;
-$kendo-solid-button-shade-border-amount: 0 !default;
-$kendo-solid-button-hover-shade-text-amount: null !default;
-$kendo-solid-button-hover-shade-bg-amount: 7.5% !default;
-$kendo-solid-button-hover-shade-border-amount: 10% !default;
-$kendo-solid-button-active-shade-text-amount: null !default;
-$kendo-solid-button-active-shade-bg-amount: 10% !default;
-$kendo-solid-button-active-shade-border-amount: 12.5% !default;
+/// The shadow of the solid Button.
+/// @group button
 $kendo-solid-button-shadow: true !default;
+/// The shadow blur of the solid Button.
+/// @group button
 $kendo-solid-button-shadow-blur: 0px !default;
+/// The shadow spread of the solid Button.
+/// @group button
 $kendo-solid-button-shadow-spread: .25rem !default;
+/// The shadow opacity of the solid Button.
+/// @group button
 $kendo-solid-button-shadow-opacity: .5 !default;
 
 // Outline Button
+/// The shadow of the outline Button.
+/// @group button
 $kendo-outline-button-shadow: true !default;
+/// The shadow blur of the outline Button.
+/// @group button
 $kendo-outline-button-shadow-blur: 0px !default;
+/// The shadow spread of the outline Button.
+/// @group button
 $kendo-outline-button-shadow-spread: .25rem !default;
+/// The shadow opacity of the outline Button.
+/// @group button
 $kendo-outline-button-shadow-opacity: .5 !default;
 
 // Link Button
+/// The shadow of the link Button.
+/// @group button
 $kendo-link-button-shadow: true !default;
+/// The shadow blur of the link Button.
+/// @group button
 $kendo-link-button-shadow-blur: 0px !default;
+/// The shadow spread of the link Button.
+/// @group button
 $kendo-link-button-shadow-spread: .25rem !default;
+/// The shadow opacity of the link Button.
+/// @group button
 $kendo-link-button-shadow-opacity: .5 !default;
 
 // Clear Button
+/// The opacity of the clear Button.
+/// @group button
 $kendo-clear-button-focus-opacity: .1 !default;
 
 /// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
@@ -315,16 +329,6 @@ $kendo-button-transition: $kendo-transition !default;
     $kendo-button-disabled-shadow: $kendo-button-disabled-shadow,
     $kendo-button-pulsing-opacity: $kendo-button-pulsing-opacity,
     $kendo-solid-button-gradient: $kendo-solid-button-gradient,
-    $kendo-solid-button-shade-function: $kendo-solid-button-shade-function,
-    $kendo-solid-button-shade-text-amount: $kendo-solid-button-shade-text-amount,
-    $kendo-solid-button-shade-bg-amount: $kendo-solid-button-shade-bg-amount,
-    $kendo-solid-button-shade-border-amount: $kendo-solid-button-shade-border-amount,
-    $kendo-solid-button-hover-shade-text-amount: $kendo-solid-button-hover-shade-text-amount,
-    $kendo-solid-button-hover-shade-bg-amount: $kendo-solid-button-hover-shade-bg-amount,
-    $kendo-solid-button-hover-shade-border-amount: $kendo-solid-button-hover-shade-border-amount,
-    $kendo-solid-button-active-shade-text-amount: $kendo-solid-button-active-shade-text-amount,
-    $kendo-solid-button-active-shade-bg-amount: $kendo-solid-button-active-shade-bg-amount,
-    $kendo-solid-button-active-shade-border-amount: $kendo-solid-button-active-shade-border-amount,
     $kendo-solid-button-shadow: $kendo-solid-button-shadow,
     $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur,
     $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread,

package/scss/card/_variables.scss

@@ -183,6 +183,8 @@ $kendo-card-callout-width: 1.3em !default;
 /// @group card
 $kendo-card-callout-height: 1.3em !default;
 
+/// The theme colors of the Card.
+/// @group card
 $kendo-card-theme-colors: (
     "primary": k-color(primary),
     "secondary": k-color(secondary),

package/scss/chat/_variables.scss

@@ -13,7 +13,7 @@ $kendo-chat-padding-x: k-spacing(4) !default;
 $kendo-chat-padding-y: k-spacing(4) !default;
 /// The minimum width of the Chat.
 /// @group chat
-$kendo-chat-width: 320px !default;
+$kendo-chat-width: 280px !default;
 /// The minimum height of the Chat.
 /// @group chat
 $kendo-chat-height: 600px !default;

package/scss/checkbox/_variables.scss

@@ -39,6 +39,8 @@ $kendo-checkbox-md-ripple-size: 300% !default;
 $kendo-checkbox-lg-ripple-size: 300% !default;
 
 // A map with the different CheckBox sizes
+/// The sizes of the CheckBox.
+/// @group checkbox
 $kendo-checkbox-sizes: (
     sm: (
         size: $kendo-checkbox-sm-size,

package/scss/chip/_variables.scss

@@ -62,8 +62,6 @@ $kendo-chip-md-line-height: $kendo-chip-line-height !default;
 /// @group chip
 $kendo-chip-lg-line-height: $kendo-chip-line-height !default;
 
-/// The calculated height of the Chip.
-/// @group chip
 $kendo-chip-calc-size: calc( #{$kendo-chip-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;
 

package/scss/color-preview/_variables.scss

@@ -2,15 +2,33 @@
 @use "../core/functions/index.import.scss" as *;
 
 // Color Preview
+/// The border radius of the ColorPreview.
+/// @group color-preview
 $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;
+/// The background color of the ColorPreview.
+/// @group color-preview
 $kendo-color-preview-bg: null !default;
+/// The text color of the ColorPreview.
+/// @group color-preview
 $kendo-color-preview-text: null !default;
+/// The border color of the ColorPreview.
+/// @group color-preview
 $kendo-color-preview-border: k-color(border) !default;
+/// The border color of the hovered ColorPreview.
+/// @group color-preview
 $kendo-color-preview-hover-border: k-color(border-alt) !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;
+/// The text color of the ColorPreview when no color is selected.
+/// @group color-preview
 $kendo-color-preview-no-color-text: k-color(error) !default;
+/// The border color of the ColorPreview when no color is selected.
+/// @group color-preview
 $kendo-color-preview-no-color-border: null !default;
 
 $kendo-color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$kendo-color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;

package/scss/colorgradient/_variables.scss

@@ -10,7 +10,7 @@ $kendo-color-gradient-spacer: k-spacing(4) !default;
 /// The width of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-width: 328px !default;
-// The width of the border around the ColorGradient.
+/// The width of the border around the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-border-width: 1px !default;
 /// The border radius of the ColorGradient.

package/scss/colorpalette/_variables.scss

@@ -18,7 +18,7 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
-// The width of the small ColorPalette tile.
+/// The width of the small ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-sm-tile-width: k-spacing(5.5) !default;
 /// The height of the small ColorPalette tile.

package/scss/column-menu/_variables.scss

@@ -1,27 +1,59 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 
+/// The horizontal padding of the small ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-sm-padding-x: k-spacing(4) !default;
+/// The vertical padding of the small ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-sm-padding-y: k-spacing(1) !default;
 
+/// The horizontal padding of the medium ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-md-padding-x: k-spacing(4) !default;
+/// The vertical padding of the medium ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-md-padding-y: k-spacing(1) !default;
 
+/// The horizontal padding of the large ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-lg-padding-x: k-spacing(4) !default;
+/// The vertical padding of the large ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-lg-padding-y: k-spacing(2) !default;
 
+/// The font size of the ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the small ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-md-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the large ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
+/// The line height of the ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the small ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-sm-line-height: math.div( 20, 14 ) !default;
+/// The line height of the medium ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the large ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-lg-line-height: var( --kendo-line-height, normal ) !default;
 
+/// The font family of the ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-font-family: var( --kendo-font-family, inherit ) !default;
 
+/// The sizes map for the ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-sizes: (
     sm: (
         padding-x: $kendo-column-menu-item-sm-padding-x,
@@ -44,9 +76,17 @@ $kendo-column-menu-sizes: (
 ) !default;
 
 // Group Menu
+/// The background color of the hovered GroupMenu item action.
+/// @group column-menu
 $kendo-group-menu-item-action-hover-bg: color-mix(in srgb, currentColor 4%, transparent) !default;
+/// The background color of the selected GroupMenu item action.
+/// @group column-menu
 $kendo-group-menu-item-action-selected-bg: color-mix(in srgb, currentColor 16%, transparent) !default;
+/// The text color of the GroupMenu item add action.
+/// @group column-menu
 $kendo-group-menu-item-add-action-text: k-color(primary) !default;
+/// The border color of the GroupMenu item.
+/// @group column-menu
 $kendo-group-menu-item-border: k-color(border) !default;
 
 

package/scss/dataviz/_variables.scss

@@ -7,93 +7,217 @@
 /// The first base series color and its light and dark shades.
 /// @group charts
 $kendo-series-a: k-color(series-a)!default;
+/// The series-a dark color of the Charts.
+/// @group charts
 $kendo-series-a-dark: k-color(series-a-bold)!default;
+/// The series-a darker color of the Charts.
+/// @group charts
 $kendo-series-a-darker: k-color(series-a-bolder) !default;
+/// The series-a light color of the Charts.
+/// @group charts
 $kendo-series-a-light: k-color(series-a-subtle) !default;
+/// The series-a lighter color of the Charts.
+/// @group charts
 $kendo-series-a-lighter: k-color(series-a-subtler) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
 $kendo-series-b: k-color(series-b) !default;
+/// The series-b dark color of the Charts.
+/// @group charts
 $kendo-series-b-dark: k-color(series-b-bold) !default;
+/// The series-b darker color of the Charts.
+/// @group charts
 $kendo-series-b-darker: k-color(series-b-bolder) !default;
+/// The series-b light color of the Charts.
+/// @group charts
 $kendo-series-b-light: k-color(series-b-subtle) !default;
+/// The series-b lighter color of the Charts.
+/// @group charts
 $kendo-series-b-lighter: k-color(series-b-subtler) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
 $kendo-series-c: k-color(series-c) !default;
+/// The series-c dark color of the Charts.
+/// @group charts
 $kendo-series-c-dark: k-color(series-c-bold) !default;
+/// The series-c darker color of the Charts.
+/// @group charts
 $kendo-series-c-darker: k-color(series-c-bolder) !default;
+/// The series-c light color of the Charts.
+/// @group charts
 $kendo-series-c-light: k-color(series-c-subtle) !default;
+/// The series-c lighter color of the Charts.
+/// @group charts
 $kendo-series-c-lighter: k-color(series-c-subtler) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-d: k-color(series-d) !default;
+/// The series-d dark color of the Charts.
+/// @group charts
 $kendo-series-d-dark: k-color(series-d-bold) !default;
+/// The series-d darker color of the Charts.
+/// @group charts
 $kendo-series-d-darker: k-color(series-d-bolder) !default;
+/// The series-d light color of the Charts.
+/// @group charts
 $kendo-series-d-light: k-color(series-d-subtle) !default;
+/// The series-d lighter color of the Charts.
+/// @group charts
 $kendo-series-d-lighter: k-color(series-d-subtler) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-e: k-color(series-e) !default;
+/// The series-e dark color of the Charts.
+/// @group charts
 $kendo-series-e-dark: k-color(series-e-bold) !default;
+/// The series-e darker color of the Charts.
+/// @group charts
 $kendo-series-e-darker: k-color(series-e-bolder) !default;
+/// The series-e light color of the Charts.
+/// @group charts
 $kendo-series-e-light: k-color(series-e-subtle) !default;
+/// The series-e lighter color of the Charts.
+/// @group charts
 $kendo-series-e-lighter: k-color(series-e-subtler) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
 $kendo-series-f: k-color(series-f) !default;
+/// The series-f dark color of the Charts.
+/// @group charts
 $kendo-series-f-dark: k-color(series-f-bold) !default;
+/// The series-f darker color of the Charts.
+/// @group charts
 $kendo-series-f-darker: k-color(series-f-bolder) !default;
+/// The series-f light color of the Charts.
+/// @group charts
 $kendo-series-f-light: k-color(series-f-subtle) !default;
+/// The series-f lighter color of the Charts.
+/// @group charts
 $kendo-series-f-lighter: k-color(series-f-subtler) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
 /// @group charts
 $kendo-series-1: $kendo-series-a !default;
+/// The series-2 color of the Charts.
+/// @group charts
 $kendo-series-2: $kendo-series-b !default;
+/// The series-3 color of the Charts.
+/// @group charts
 $kendo-series-3: $kendo-series-c !default;
+/// The series-4 color of the Charts.
+/// @group charts
 $kendo-series-4: $kendo-series-d !default;
+/// The series-5 color of the Charts.
+/// @group charts
 $kendo-series-5: $kendo-series-e !default;
+/// The series-6 color of the Charts.
+/// @group charts
 $kendo-series-6: $kendo-series-f !default;
+/// The series-7 color of the Charts.
+/// @group charts
 $kendo-series-7: $kendo-series-a-light !default;
+/// The series-8 color of the Charts.
+/// @group charts
 $kendo-series-8: $kendo-series-b-light !default;
+/// The series-9 color of the Charts.
+/// @group charts
 $kendo-series-9: $kendo-series-c-light !default;
+/// The series-10 color of the Charts.
+/// @group charts
 $kendo-series-10: $kendo-series-d-light !default;
+/// The series-11 color of the Charts.
+/// @group charts
 $kendo-series-11: $kendo-series-e-light !default;
+/// The series-12 color of the Charts.
+/// @group charts
 $kendo-series-12: $kendo-series-f-light !default;
+/// The series-13 color of the Charts.
+/// @group charts
 $kendo-series-13: $kendo-series-a-dark !default;
+/// The series-14 color of the Charts.
+/// @group charts
 $kendo-series-14: $kendo-series-b-dark !default;
+/// The series-15 color of the Charts.
+/// @group charts
 $kendo-series-15: $kendo-series-c-dark !default;
+/// The series-16 color of the Charts.
+/// @group charts
 $kendo-series-16: $kendo-series-d-dark !default;
+/// The series-17 color of the Charts.
+/// @group charts
 $kendo-series-17: $kendo-series-e-dark !default;
+/// The series-18 color of the Charts.
+/// @group charts
 $kendo-series-18: $kendo-series-f-dark !default;
+/// The series-19 color of the Charts.
+/// @group charts
 $kendo-series-19: $kendo-series-a-lighter !default;
+/// The series-20 color of the Charts.
+/// @group charts
 $kendo-series-20: $kendo-series-b-lighter !default;
+/// The series-21 color of the Charts.
+/// @group charts
 $kendo-series-21: $kendo-series-c-lighter !default;
+/// The series-22 color of the Charts.
+/// @group charts
 $kendo-series-22: $kendo-series-d-lighter !default;
+/// The series-23 color of the Charts.
+/// @group charts
 $kendo-series-23: $kendo-series-e-lighter !default;
+/// The series-24 color of the Charts.
+/// @group charts
 $kendo-series-24: $kendo-series-f-lighter !default;
+/// The series-25 color of the Charts.
+/// @group charts
 $kendo-series-25: $kendo-series-a-darker !default;
+/// The series-26 color of the Charts.
+/// @group charts
 $kendo-series-26: $kendo-series-b-darker !default;
+/// The series-27 color of the Charts.
+/// @group charts
 $kendo-series-27: $kendo-series-c-darker !default;
+/// The series-28 color of the Charts.
+/// @group charts
 $kendo-series-28: $kendo-series-d-darker !default;
+/// The series-29 color of the Charts.
+/// @group charts
 $kendo-series-29: $kendo-series-e-darker !default;
+/// The series-30 color of the Charts.
+/// @group charts
 $kendo-series-30: $kendo-series-f-darker !default;
 
+/// The border width of the Chart.
+/// @group charts
 $kendo-chart-border-width: 0px !default;
+/// The font family of the Chart.
+/// @group charts
 $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Chart.
+/// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
+/// The height of the Chart.
+/// @group charts
 $kendo-chart-line-height: var( --kendo-line-height, normal )!default;
+/// The font size of the Chart.
+/// @group charts
 $kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
+/// The label font size of the Chart.
+/// @group charts
 $kendo-chart-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The title font size of the Chart.
+/// @group charts
 $kendo-chart-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The title font size of the Chart.
+/// @group charts
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
+/// The title font weight of the Chart.
+/// @group charts
 $kendo-chart-pane-title-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 
 /// The color of the Chart grid lines (major).
@@ -104,63 +228,141 @@ $kendo-chart-major-lines: color-mix(in srgb, k-color(on-app-surface) 8%, transpa
 /// @group charts
 $kendo-chart-minor-lines: color-mix(in srgb, k-color(on-app-surface) 4%, transparent) !default;
 
+/// The inactive color of the Chart.
+/// @group charts
 $kendo-chart-inactive: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+/// The opacity of the Chart.
+/// @group charts
 $kendo-chart-area-opacity: .6 !default;
+/// The opacity of the Chart.
+/// @group charts
 $kendo-chart-area-inactive-opacity: .1 !default;
+/// The opacity of the Chart.
+/// @group charts
 $kendo-chart-line-inactive-opacity: .3 !default;
 
+/// The horizontal padding of the Chart.
+/// @group charts
 $kendo-chart-tooltip-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Chart.
+/// @group charts
 $kendo-chart-tooltip-padding-y: k-spacing(1) !default;
 
+/// The transition of the Chart.
+/// @group charts
 $kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
+/// The background color of the Chart.
+/// @group charts
 $kendo-chart-bg: k-color(surface-alt) !default;
+/// The text color of the Chart.
+/// @group charts
 $kendo-chart-text: k-color(on-app-surface) !default;
+/// The border color of the Chart.
+/// @group charts
 $kendo-chart-border: k-color(border) !default;
 
+/// The background color of the Chart.
+/// @group charts
 $kendo-chart-crosshair-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+/// The text color of the Chart.
+/// @group charts
 $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
+/// The background color of the Chart.
+/// @group charts
 $kendo-chart-crosshair-shared-tooltip-background: k-color(base-subtle) !default;
+/// The border color of the Chart.
+/// @group charts
 $kendo-chart-crosshair-shared-tooltip-border: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
+/// The background color of the Chart.
+/// @group charts
 $kendo-chart-notes-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+/// The border color of the Chart.
+/// @group charts
 $kendo-chart-notes-border: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
+/// The notes lines of the Chart.
+/// @group charts
 $kendo-chart-notes-lines: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
+/// The background color of the Chart error bars.
+/// @group charts
 $kendo-chart-error-bars-background: color-mix(in srgb, k-color(on-app-surface) 50%, transparent) !default;
 
+/// The size of the Chart handle.
+/// @group charts
 $kendo-chart-selection-handle-size: 22px !default;
+/// The text color of the Chart.
+/// @group charts
 $kendo-chart-selection-border-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
+/// The shadow of the Chart.
+/// @group charts
 $kendo-chart-selection-shadow: inset 0 1px 7px color-mix(in srgb, k-color(on-app-surface) 15%, transparent) !default;
 
+/// The height of the Dataviz title.
+/// @group charts
 $kendo-chart-computed-title-height: 0px !default;
 
 // TreeMap
+/// The font family of the TreeMap.
+/// @group charts
 $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the TreeMap.
+/// @group charts
 $kendo-treemap-font-size: var( --kendo-font-size, inherit )  !default;
+/// The height of the TreeMap.
+/// @group charts
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
 
+/// The horizontal padding of the TreeMap.
+/// @group charts
 $kendo-treemap-padding-x: k-spacing(2) !default;
+/// The vertical padding of the TreeMap.
+/// @group charts
 $kendo-treemap-padding-y: k-spacing(1) !default;
 
+/// The text color of the TreeMap.
+/// @group charts
 $kendo-treemap-text: k-color(on-app-surface) !default;
+/// The background color of the TreeMap.
+/// @group charts
 $kendo-treemap-bg: k-color(surface-alt) !default;
+/// The border color of the TreeMap.
+/// @group charts
 $kendo-treemap-border: k-color(border) !default;
 
+/// The text color of the Dataviz title.
+/// @group charts
 $kendo-treemap-title-text: k-color(on-app-surface) !default;
+/// The background color of the Dataviz title.
+/// @group charts
 $kendo-treemap-title-bg: k-color(surface) !default;
+/// The border color of the Dataviz title.
+/// @group charts
 $kendo-treemap-title-border: k-color(border) !default;
 
 // Chart Overlay
+/// The background color of the Dataviz overlay.
+/// @group charts
 $kendo-chart-overlay-bg: k-color(surface) !default;
 
 // No Data
+/// The font size of the Chart.
+/// @group charts
 $kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
+/// The font weight of the Chart.
+/// @group charts
 $kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
+/// The vertical padding of the Chart.
+/// @group charts
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
 
 // Gauge
+/// The background color of the Gauge.
+/// @group charts
 $kendo-gauge-pointer-bg: k-color(primary-on-surface) !default;
+/// The background color of the Gauge track.
+/// @group charts
 $kendo-gauge-track-bg: k-color(base-emphasis) !default;
 
 

package/scss/daterangepicker/_variables.scss

@@ -1,4 +1,6 @@
 // Daterangepicker
+/// The width of the DateRangePicker input.
+/// @group date-range-picker
 $kendo-daterange-picker-input-width: 10em !default;