@progress/kendo-theme-bootstrap 7.3.0-dev.0 → 8.0.0-dev.0

package/scss/calendar/_variables.scss

@@ -1,135 +1,330 @@
 // Calendar
 
+/// The width of the border around the Calendar.
+/// @group calendar
 $kendo-calendar-border-width: 1px !default;
+
+/// The font family of the Calendar.
+/// @group calendar
 $kendo-calendar-font-family: $kendo-font-family !default;
+/// The font size of the Calendar.
+/// @group calendar
 $kendo-calendar-font-size: $kendo-font-size-md !default;
+/// The line height of the Calendar.
+/// @group calendar
 $kendo-calendar-line-height: $kendo-line-height-md !default;
 
+/// The size of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-size: 38px !default;
 
+/// The background color of the Calendar.
+/// @group calendar
 $kendo-calendar-bg: $kendo-component-bg !default;
+/// The text color of the Calendar.
+/// @group calendar
 $kendo-calendar-text: $kendo-component-text !default;
+/// The border color of the Calendar.
+/// @group calendar
 $kendo-calendar-border: $kendo-component-border !default;
 
+/// The horizontal padding of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+
+/// The border width of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
 
+/// The background color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-bg: $kendo-component-header-bg !default;
+/// The text color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-text: $kendo-component-header-text !default;
+/// The border color of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-border: $kendo-component-header-border !default;
+/// The gradient of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
+/// The box shadow of the header in the Calendar.
+/// @group calendar
 $kendo-calendar-header-shadow: none !default;
 
+/// The gap between the items in the navigation of the Calendar.
+/// @group calendar
 $kendo-calendar-nav-gap: null !default;
 
+/// The horizontal padding of the footer in the Calendar.
+/// @group calendar
 $kendo-calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the footer in the Calendar.
+/// @group calendar
 $kendo-calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The horizontal padding of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+
+/// The line height of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-line-height: $kendo-calendar-line-height !default;
+
+/// The border radius of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-border-radius: $kendo-border-radius-md !default;
 
+/// The horizontal padding of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-padding-x: null !default;
+/// The vertical padding of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-padding-y: null !default;
+/// The width of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
+/// The height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-height: $kendo-calendar-cell-size !default;
+/// The font size of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-font-size: $kendo-font-size-sm !default;
+/// The line height of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-line-height: 2 !default;
+
+/// The background color of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-bg: null !default;
+/// The text color of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-text: $kendo-subtle-text !default;
+/// The opacity of the header cells in the Calendar.
+/// @group calendar
 $kendo-calendar-header-cell-opacity: null !default;
 
+/// The horizontal padding of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The height of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
+/// The font size of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-font-size: null !default;
+/// The line height of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-line-height: null !default;
+/// The font weight of the caption in the Calendar.
+/// @group calendar
 $kendo-calendar-caption-font-weight: bold !default;
 
+/// The font size of the week number cells in the Calendar.
+/// @group calendar
+$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
+
+/// The width of the Calendar view.
+/// @group calendar
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
+/// The height of the Calendar view.
+/// @group calendar
 $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
+
+/// The gap between the items in the Calendar view.
+/// @group calendar
 $kendo-calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
+/// The background color of the weekend cells in the Calendar.
+/// @group calendar
 $kendo-calendar-weekend-bg: null !default;
+/// The text color of the weekend cells in the Calendar.
+/// @group calendar
 $kendo-calendar-weekend-text: null !default;
 
+/// The style of the current day in the Calendar.
+/// @group calendar
 $kendo-calendar-today-style: box !default;
+/// The color of the current day in the Calendar.
+/// @group calendar
 $kendo-calendar-today-color: $kendo-color-primary !default;
 
+/// The background color of the week number cells in the Calendar.
+/// @group calendar
 $kendo-calendar-week-number-bg: null !default;
+/// The text color of the week number cells in the Calendar.
+/// @group calendar
 $kendo-calendar-week-number-text: $kendo-calendar-header-cell-text !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
 $kendo-calendar-other-month-bg: null !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group calendar
 $kendo-calendar-other-month-text: $kendo-calendar-header-cell-text !default;
 
+/// The background color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-bg: null !default;
+/// The text color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-text: null !default;
+/// The border color of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-border: null !default;
+/// The gradient of the cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-gradient: null !default;
 
+/// The background color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-text: $kendo-hover-text !default;
+/// The border color of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-border: $kendo-hover-border !default;
+/// The gradient of the hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-hover-gradient: null !default;
 
+/// The background color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-text: $kendo-selected-text !default;
+/// The border color of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-border: $kendo-selected-border !default;
+/// The gradient of the selected cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-gradient: null !default;
 
+/// The background color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
+/// The text color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
+/// The border color of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !default;
+/// The gradient of the selected and hovered cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-hover-gradient: null !default;
 
+/// The shadow of the focused cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
+/// The shadow of the selected and focused cells in the Calendar.
+/// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
 
 
-// Calendar navigation
+/// The width of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-width: 5em !default;
+/// The height of the items in the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-item-height: 2em !default;
 
+/// The background color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-bg: $kendo-calendar-header-bg !default;
+/// The text color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-text: $kendo-calendar-header-text !default;
+/// The border color of the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-border: $kendo-calendar-header-border !default;
 
+/// The text color of the hovered items in the Calendar navigation.
+/// @group calendar
 $kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 
 
-// Infinite calendar
+/// The horizontal padding of the header in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the header in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The horizontal padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-padding-y: 0px !default;
+/// The height of the Calendar view in the Infinite Calendar.
+/// @group calendar
 $kendo-infinite-calendar-view-height: ( $kendo-calendar-cell-size * 9 ) !default;
 
 
 // Multiview calendar
 
 
-// Calendar sizes
+/// The font size of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-font-size: $kendo-font-size-md !default;
+/// The line height of the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-line-height: $kendo-line-height-md !default;
+/// The size of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-size: 34px !default;
+/// The horizontal padding of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-padding-x: .125rem !default;
+/// The vertical padding of the cells in the small Calendar.
+/// @group calendar
 $kendo-calendar-sm-cell-padding-y: .125rem !default;
 
+/// The font size of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-font-size: $kendo-font-size-md !default;
+/// The line height of the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-line-height: $kendo-line-height-md !default;
+/// The size of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-size: 38px !default;
+/// The horizontal padding of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the cells in the medium Calendar.
+/// @group calendar
 $kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The font size of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-font-size: $kendo-font-size-lg !default;
+/// The line height of the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-line-height: $kendo-line-height-lg !default;
+/// The size of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-size: 42px !default;
+/// The horizontal padding of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the cells in the large Calendar.
+/// @group calendar
 $kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
+/// The sizes Map of the Calendar.
+/// @group calendar
 $kendo-calendar-sizes: (
     sm: (
         font-size: $kendo-calendar-sm-font-size,

package/scss/core/color-system/_swatch-legacy.scss

@@ -1,8 +1,12 @@
 @if ($kendo-enable-color-system) {
-    $input-bg: k-color( app-surface );
+    $input-bg: k-color( surface-alt );
     $input-color: k-color( on-app-surface );
     $input-border-color: k-color( border-alt );
     $input-placeholder-color: k-color( subtle );
+    $input-focus-bg: k-color( surface-alt );
+    $input-focus-color: k-color( on-app-surface );
+    $input-focus-border-color: k-color( primary-emphasis );
+    $input-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, k-color( primary ) 25%, transparent);
     $kendo-color-primary: k-color( primary );
     $kendo-color-primary-contrast: k-color( on-primary );
     $kendo-color-secondary: k-color( secondary );
@@ -22,7 +26,7 @@
     $kendo-app-border: k-color( border );
     $kendo-link-text: $kendo-color-primary;
     $kendo-link-hover-text: k-color( primary-hover );
-    $kendo-component-bg: $kendo-body-bg;
+    $kendo-component-bg: k-color( surface-alt );
     $kendo-component-text: $kendo-body-text;
     $kendo-component-border: $kendo-app-border;
     $kendo-base-bg: k-color( surface );

package/scss/core/color-system/_swatch.scss

@@ -6,7 +6,7 @@
 @import "./_palettes.scss";
 
 // Config
-$kendo-enable-color-system: false !default;
+$kendo-enable-color-system: true !default;
 
 // Colors
 $_default-colors: (

package/scss/drawer/_variables.scss

@@ -1,40 +1,105 @@
 // Drawer
+
+/// The background color of the Drawer.
+/// @group drawer
 $kendo-drawer-bg: $kendo-component-bg !default;
+/// The text color of the Drawer.
+/// @group drawer
 $kendo-drawer-text: $kendo-component-text !default;
+/// The border color of the Drawer.
+/// @group drawer
 $kendo-drawer-border: $kendo-component-border !default;
+/// The border width of the Drawer.
+/// @group drawer
 $kendo-drawer-border-width: 1px !default;
+/// The font family of the Drawer.
+/// @group drawer
 $kendo-drawer-font-family: $kendo-font-family !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: $kendo-font-size-md !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: $kendo-line-height-md !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Drawer content.
+/// @group drawer
 $kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
 
+/// The width of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-width: 7px !default;
+/// The color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-color: rgba( 156, 156, 156, .7 ) !default;
+/// The background color of the Drawer scrollbar thumb.
+/// @group drawer
 $kendo-drawer-scrollbar-bg: #dedede !default;
+/// The border radius of the Drawer scrollbar.
+/// @group drawer
 $kendo-drawer-scrollbar-radius: 20px !default;
+/// The hover color of the Drawer scrollbar track.
+/// @group drawer
 $kendo-drawer-scrollbar-hover-color: rgba( 156, 156, 156, 1 ) !default;
 
+/// The horizontal padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-x: $kendo-padding-md-x !default;
+/// The vertical padding of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-padding-y: $kendo-padding-md-y !default;
+/// The font size of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-font-size: 16px !default;
+/// The line height of the Drawer item.
+/// @group drawer
 $kendo-drawer-item-line-height: $kendo-line-height-lg !default;
 
+/// The horizontal padding of the Drawer item in each level.
+/// @group drawer
 $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
+/// The count of the Drawer item levels.
+/// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
 
+/// The horizontal padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-x: 0 !default;
+/// The vertical padding of the Drawer icon.
+/// @group drawer
 $kendo-drawer-icon-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The initial width of the mini Drawer.
+/// @group drawer
 $kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + #{$kendo-icon-size} ) !default;
 
+/// The background color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-bg: $kendo-hover-bg !default;
+/// The text color of the hovered Drawer item.
+/// @group drawer
 $kendo-drawer-hover-text: $kendo-hover-text !default;
 
+/// The background color of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-bg: $kendo-hover-bg !default;
+/// The box shadow of the focused Drawer item.
+/// @group drawer
 $kendo-drawer-focus-shadow: inset 0 0 0 2px rgba( black, .15 ) !default;
 
+/// The background color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected Drawer item.
+/// @group drawer
 $kendo-drawer-selected-text: $kendo-selected-text !default;
+
+/// The background color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-selected-bg, 1 )) !default;
+/// The text color of the selected and hovered Drawer item.
+/// @group drawer
 $kendo-drawer-selected-hover-text: $kendo-selected-text !default;