@progress/kendo-theme-default 12.2.0-dev.3 → 12.2.0

package/scss/adaptive/_variables.scss

@@ -2,34 +2,70 @@
 @use "../core/functions/index.import.scss" as *;
 
 // Adaptive
+/// The background color of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-bg: k-color(surface-alt) !default;
+/// The text color of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-text: k-color(on-app-surface) !default;
+/// The border color of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-border: k-color(border) !default;
 
+/// The background color of the Adaptive content.
+/// @group adaptive
 $kendo-adaptive-content-bg: k-color(surface) !default;
+/// The text color of the Adaptive content.
+/// @group adaptive
 $kendo-adaptive-content-text: k-color(on-app-surface) !default;
 
+/// The background color of the Adaptive menu.
+/// @group adaptive
 $kendo-adaptive-menu-bg: k-color(primary) !default;
+/// The text color of the Adaptive menu.
+/// @group adaptive
 $kendo-adaptive-menu-text: k-color(on-primary) !default;
 
+/// The text color of the Adaptive menu clear button.
+/// @group adaptive
 $kendo-adaptive-menu-clear-text: k-color(primary) !default;
 
+/// The border color of the Adaptive menu item.
+/// @group adaptive
 $kendo-adaptive-menu-item-border: k-color(border) !default;
+/// The text color of the Adaptive menu title.
+/// @group adaptive
 $kendo-adaptive-menu-title-text: k-color(on-app-surface) !default;
 
+/// The width of the border around the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-border-width: 1px !default;
+/// The font family of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Adaptive component.
+/// @group adaptive
 $kendo-adaptive-line-height: var( --kendo-line-height, normal ) !default;
 
 
 // Adaptive Grid
+/// The text color of the Adaptive Grid sort indicator.
+/// @group adaptive
 $kendo-adaptive-grid-sort-text: k-color(primary) !default;
 
 
 // Adaptive Scheduler
+/// The text color of the current date in the Adaptive Scheduler.
+/// @group adaptive
 $kendo-adaptive-scheduler-current-text: k-color(primary) !default;
+/// The base text color of the Adaptive Scheduler.
+/// @group adaptive
 $kendo-adaptive-scheduler-base-text: inherit !default;
+/// The subtle text color of the Adaptive Scheduler.
+/// @group adaptive
 $kendo-adaptive-scheduler-subtle-text: k-color(on-app-surface) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/adaptive/_variables.scss" with (

package/scss/appbar/_variables.scss

@@ -57,6 +57,8 @@ $kendo-appbar-box-shadow: k-elevation(4) !default;
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
 
+/// The theme colors of the Appbar.
+/// @group appbar
 $kendo-appbar-theme-colors: (
     "primary": k-color(primary),
     "secondary": k-color(secondary),

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/button/_variables.scss

@@ -65,14 +65,10 @@ $kendo-button-md-line-height: $kendo-button-line-height !default;
 /// @group button
 $kendo-button-lg-line-height: var( --kendo-line-height-lg, 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;
@@ -206,35 +202,53 @@ $kendo-button-disabled-shadow: null !default;
 $kendo-button-pulsing-opacity: .4 !default;
 
 // Solid Button
+/// The button gradient of the Button.
+/// @group button
 $kendo-solid-button-gradient: null !default;
-$kendo-solid-button-shade-function: "k-try-shade" !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: .5 !default;
-$kendo-solid-button-hover-shade-border-amount: .5 !default;
-$kendo-solid-button-active-shade-text-amount: null !default;
-$kendo-solid-button-active-shade-bg-amount: 1.5 !default;
-$kendo-solid-button-active-shade-border-amount: 1.5 !default;
+/// The shadow of the Button.
+/// @group button
 $kendo-solid-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
 $kendo-solid-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
 $kendo-solid-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
 $kendo-solid-button-shadow-opacity: .3 !default;
 
 // Outline Button
+/// The shadow of the Button.
+/// @group button
 $kendo-outline-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
 $kendo-outline-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
 $kendo-outline-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
 $kendo-outline-button-shadow-opacity: .3 !default;
 
 // Link Button
+/// The shadow of the Button.
+/// @group button
 $kendo-link-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
 $kendo-link-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
 $kendo-link-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
 $kendo-link-button-shadow-opacity: .3 !default;
 
 // Clear Button
+/// The button focus opacity of the 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.
@@ -313,16 +327,6 @@ $kendo-button-transition: color .2s ease-in-out !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

@@ -181,6 +181,8 @@ $kendo-card-callout-width: 20px !default;
 /// @group card
 $kendo-card-callout-height: 20px !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

@@ -12,7 +12,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

@@ -40,6 +40,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

@@ -63,8 +63,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 + calc( #{$kendo-chip-md-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
 $kendo-chip-sm-calc-size: calc( #{$kendo-chip-sm-line-height} * 1em + calc( #{$kendo-chip-sm-padding-y} * 2 ) + #{$kendo-chip-border-width} * 2 ) !default;
 

package/scss/color-preview/_variables.scss

@@ -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) !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/column-menu/_variables.scss

@@ -1,26 +1,58 @@
 @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(2) !default;
+/// The vertical padding of the small ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-sm-padding-y: k-spacing(0.5) !default;
 
+/// The horizontal padding of the medium ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-md-padding-x: k-spacing(2) !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(2) !default;
+/// The vertical padding of the large ColumnMenu item.
+/// @group column-menu
 $kendo-column-menu-item-lg-padding-y: k-spacing(1.5) !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, 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: var( --kendo-line-height, normal ) !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-lg, 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,
@@ -43,9 +75,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;