@progress/kendo-theme-bootstrap 8.0.0-dev.1 → 8.0.0-dev.11

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

@@ -13,11 +13,11 @@ $_default-colors: (
     // Misc
     app-surface: k-map-get( $kendo-palette-gray, white ),
     on-app-surface: k-map-get( $kendo-palette-gray, 14 ),
-    subtle: k-map-get( $kendo-palette-gray, 9 ),
+    subtle: k-map-get( $kendo-palette-gray, 10 ),
     surface: k-map-get( $kendo-palette-gray, 1 ),
     surface-alt: k-map-get( $kendo-palette-gray, white ),
-    border: k-map-get( $kendo-palette-gray, 3 ),
-    border-alt: k-map-get( $kendo-palette-gray, 4 ),
+    border: rgba( k-map-get( $kendo-palette-gray, 14 ), .13),
+    border-alt: rgba( k-map-get( $kendo-palette-gray, 14 ), .20),
     // Base
     base-subtle: k-map-get( $kendo-palette-gray, 2 ),
     base-subtle-hover: k-map-get( $kendo-palette-gray, 3 ),
@@ -25,7 +25,7 @@ $_default-colors: (
     base: k-map-get( $kendo-palette-gray, 3 ),
     base-hover: k-map-get( $kendo-palette-gray, 4 ),
     base-active: k-map-get( $kendo-palette-gray, 5 ),
-    base-emphasis: k-map-get( $kendo-palette-gray, 6 ),
+    base-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .34),
     base-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
     on-base: k-map-get( $kendo-palette-gray, 14 ),
     base-on-surface: k-map-get( $kendo-palette-gray, 14 ),
@@ -33,24 +33,24 @@ $_default-colors: (
     primary-subtle: k-map-get( $kendo-palette-blue, 2 ),
     primary-subtle-hover: k-map-get( $kendo-palette-blue, 3 ),
     primary-subtle-active: k-map-get( $kendo-palette-blue, 4 ),
-    primary: k-map-get( $kendo-palette-blue, 9 ),
-    primary-hover: k-map-get( $kendo-palette-blue, 10 ),
-    primary-active: k-map-get( $kendo-palette-blue, 11 ),
-    primary-emphasis: k-map-get( $kendo-palette-blue, 6 ),
-    primary-on-subtle: k-map-get( $kendo-palette-blue, 14 ),
+    primary: k-map-get( $kendo-palette-blue, 8 ),
+    primary-hover: k-map-get( $kendo-palette-blue, 9 ),
+    primary-active: k-map-get( $kendo-palette-blue, 10 ),
+    primary-emphasis: rgba( k-map-get( $kendo-palette-blue, 8 ), .40),
+    primary-on-subtle: k-map-get( $kendo-palette-blue, 13 ),
     on-primary: k-map-get( $kendo-palette-gray, white ),
-    primary-on-surface: k-map-get( $kendo-palette-blue, 9 ),
+    primary-on-surface: k-map-get( $kendo-palette-blue, 8 ),
     // Secondary
     secondary-subtle: k-map-get( $kendo-palette-gray, 3 ),
     secondary-subtle-hover: k-map-get( $kendo-palette-gray, 4 ),
     secondary-subtle-active: k-map-get( $kendo-palette-gray, 5 ),
-    secondary: k-map-get( $kendo-palette-gray, 8 ),
-    secondary-hover: k-map-get( $kendo-palette-gray, 9 ),
-    secondary-active: k-map-get( $kendo-palette-gray, 10 ),
-    secondary-emphasis: k-map-get( $kendo-palette-gray, 7 ),
-    secondary-on-subtle: k-map-get( $kendo-palette-gray, 14 ),
+    secondary: k-map-get( $kendo-palette-gray, 9 ),
+    secondary-hover: k-map-get( $kendo-palette-gray, 10 ),
+    secondary-active: k-map-get( $kendo-palette-gray, 11 ),
+    secondary-emphasis: rgba( k-map-get( $kendo-palette-gray, 9 ), .40),
+    secondary-on-subtle: k-map-get( $kendo-palette-gray, 13 ),
     on-secondary: k-map-get( $kendo-palette-gray, white ),
-    secondary-on-surface: k-map-get( $kendo-palette-gray, 14 ),
+    secondary-on-surface: k-map-get( $kendo-palette-gray, 9 ),
     // Tertiary
     tertiary-subtle: k-map-get( $kendo-palette-indigo, 2 ),
     tertiary-subtle-hover: k-map-get( $kendo-palette-indigo, 3 ),
@@ -58,123 +58,123 @@ $_default-colors: (
     tertiary: k-map-get( $kendo-palette-indigo, 8 ),
     tertiary-hover: k-map-get( $kendo-palette-indigo, 9 ),
     tertiary-active: k-map-get( $kendo-palette-indigo, 10 ),
-    tertiary-emphasis: k-map-get( $kendo-palette-indigo, 6 ),
-    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 14 ),
+    tertiary-emphasis: rgba( k-map-get( $kendo-palette-indigo, 8 ), .40),
+    tertiary-on-subtle: k-map-get( $kendo-palette-indigo, 11 ),
     on-tertiary: k-map-get( $kendo-palette-gray, white ),
     tertiary-on-surface: k-map-get( $kendo-palette-indigo, 8 ),
     // Info
     info-subtle: k-map-get( $kendo-palette-cyan, 2 ),
     info-subtle-hover: k-map-get( $kendo-palette-cyan, 3 ),
-    info-subtle-active: k-map-get( $kendo-palette-cyan, 5 ),
+    info-subtle-active: k-map-get( $kendo-palette-cyan, 4 ),
     info: k-map-get( $kendo-palette-cyan, 8 ),
-    info-hover: k-map-get( $kendo-palette-cyan, 9 ),
-    info-active: k-map-get( $kendo-palette-cyan, 10 ),
-    info-emphasis: k-map-get( $kendo-palette-cyan, 7 ),
-    info-on-subtle: k-map-get( $kendo-palette-cyan, 14 ),
-    on-info: k-map-get( $kendo-palette-gray, white ),
+    info-hover: k-map-get( $kendo-palette-cyan, 7 ),
+    info-active: k-map-get( $kendo-palette-cyan, 6 ),
+    info-emphasis: rgba( k-map-get( $kendo-palette-cyan, 8 ), .40),
+    info-on-subtle: k-map-get( $kendo-palette-cyan, 13 ),
+    on-info: k-map-get( $kendo-palette-gray, black ),
     info-on-surface: k-map-get( $kendo-palette-cyan, 8 ),
     // Success
     success-subtle: k-map-get( $kendo-palette-green, 2 ),
     success-subtle-hover: k-map-get( $kendo-palette-green, 3 ),
-    success-subtle-active: k-map-get( $kendo-palette-green, 5 ),
-    success: k-map-get( $kendo-palette-green, 9 ),
-    success-hover: k-map-get( $kendo-palette-green, 10 ),
-    success-active: k-map-get( $kendo-palette-green, 11 ),
-    success-emphasis: k-map-get( $kendo-palette-green, 7 ),
+    success-subtle-active: k-map-get( $kendo-palette-green, 4 ),
+    success: k-map-get( $kendo-palette-green, 10 ),
+    success-hover: k-map-get( $kendo-palette-green, 11 ),
+    success-active: k-map-get( $kendo-palette-green, 12 ),
+    success-emphasis: rgba( k-map-get( $kendo-palette-green, 10 ), .40),
     success-on-subtle: k-map-get( $kendo-palette-green, 14 ),
     on-success: k-map-get( $kendo-palette-gray, white ),
-    success-on-surface: k-map-get( $kendo-palette-green, 11 ),
+    success-on-surface: k-map-get( $kendo-palette-green, 10 ),
     // Warning
-    warning-subtle: k-map-get( $kendo-palette-yellow, 3 ),
-    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 4 ),
-    warning-subtle-active: k-map-get( $kendo-palette-yellow, 5 ),
+    warning-subtle: k-map-get( $kendo-palette-yellow, 2 ),
+    warning-subtle-hover: k-map-get( $kendo-palette-yellow, 3 ),
+    warning-subtle-active: k-map-get( $kendo-palette-yellow, 4 ),
     warning: k-map-get( $kendo-palette-yellow, 8 ),
-    warning-hover: k-map-get( $kendo-palette-yellow, 9 ),
-    warning-active: k-map-get( $kendo-palette-yellow, 10 ),
-    warning-emphasis: k-map-get( $kendo-palette-yellow, 7 ),
-    warning-on-subtle: k-map-get( $kendo-palette-yellow, 14 ),
+    warning-hover: k-map-get( $kendo-palette-yellow, 7 ),
+    warning-active: k-map-get( $kendo-palette-yellow, 6 ),
+    warning-emphasis: rgba( k-map-get( $kendo-palette-yellow, 8 ), .40),
+    warning-on-subtle: k-map-get( $kendo-palette-yellow, 13 ),
     on-warning: k-map-get( $kendo-palette-gray, black ),
     warning-on-surface: k-map-get( $kendo-palette-yellow, 8 ),
     // Error
-    error-subtle: k-map-get( $kendo-palette-red, 3 ),
-    error-subtle-hover: k-map-get( $kendo-palette-red, 4 ),
-    error-subtle-active: k-map-get( $kendo-palette-red, 5 ),
+    error-subtle: k-map-get( $kendo-palette-red, 2 ),
+    error-subtle-hover: k-map-get( $kendo-palette-red, 3 ),
+    error-subtle-active: k-map-get( $kendo-palette-red, 4 ),
     error: k-map-get( $kendo-palette-red, 8 ),
     error-hover: k-map-get( $kendo-palette-red, 9 ),
     error-active: k-map-get( $kendo-palette-red, 10 ),
-    error-emphasis: k-map-get( $kendo-palette-red, 7 ),
-    error-on-subtle: k-map-get( $kendo-palette-red, 14 ),
+    error-emphasis: rgba( k-map-get( $kendo-palette-red, 8 ), .40),
+    error-on-subtle: k-map-get( $kendo-palette-red, 13 ),
     on-error: k-map-get( $kendo-palette-gray, white ),
     error-on-surface: k-map-get( $kendo-palette-red, 8 ),
     // Light
-    light-subtle: k-map-get( $kendo-palette-gray, 1 ),
-    light-subtle-hover: k-map-get( $kendo-palette-gray, 2 ),
-    light-subtle-active: k-map-get( $kendo-palette-gray, 3 ),
+    light-subtle: k-map-get( $kendo-palette-gray, white ),
+    light-subtle-hover: k-map-get( $kendo-palette-gray, 1 ),
+    light-subtle-active: k-map-get( $kendo-palette-gray, 2 ),
     light: k-map-get( $kendo-palette-gray, 1 ),
     light-hover: k-map-get( $kendo-palette-gray, 2 ),
     light-active: k-map-get( $kendo-palette-gray, 3 ),
-    light-emphasis: k-map-get( $kendo-palette-gray, 5 ),
-    light-on-subtle: k-map-get( $kendo-palette-gray, 12 ),
+    light-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .10),
+    light-on-subtle: k-map-get( $kendo-palette-gray, 11 ),
     on-light: k-map-get( $kendo-palette-gray, black ),
-    light-on-surface: k-map-get( $kendo-palette-gray, 4 ),
+    light-on-surface: k-map-get( $kendo-palette-gray, 1 ),
     // Dark
-    dark-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    dark-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    dark-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    dark-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    dark-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     dark: k-map-get( $kendo-palette-gray, 14 ),
-    dark-hover: k-map-get( $kendo-palette-gray, 13 ),
-    dark-active: k-map-get( $kendo-palette-gray, 12 ),
-    dark-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    dark-hover: k-map-get( $kendo-palette-gray, 12 ),
+    dark-active: k-map-get( $kendo-palette-gray, 11 ),
+    dark-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     dark-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-dark: k-map-get( $kendo-palette-gray, white ),
-    dark-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    dark-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Inverse
-    inverse-subtle: k-map-get( $kendo-palette-gray, 8 ),
-    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 9 ),
-    inverse-subtle-active: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-subtle-hover: k-map-get( $kendo-palette-gray, 10 ),
+    inverse-subtle-active: k-map-get( $kendo-palette-gray, 9 ),
     inverse: k-map-get( $kendo-palette-gray, 14 ),
-    inverse-hover: k-map-get( $kendo-palette-gray, 13 ),
-    inverse-active: k-map-get( $kendo-palette-gray, 12 ),
-    inverse-emphasis: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-hover: k-map-get( $kendo-palette-gray, 12 ),
+    inverse-active: k-map-get( $kendo-palette-gray, 11 ),
+    inverse-emphasis: rgba( k-map-get( $kendo-palette-gray, 14 ), .40),
     inverse-on-subtle: k-map-get( $kendo-palette-gray, white ),
     on-inverse: k-map-get( $kendo-palette-gray, white ),
-    inverse-on-surface: k-map-get( $kendo-palette-gray, 15 ),
+    inverse-on-surface: k-map-get( $kendo-palette-gray, 14 ),
     // Series A
     series-a: k-map-get( $kendo-palette-blue, 9 ),
     series-a-bold: k-map-get( $kendo-palette-blue, 12 ),
-    series-a-bolder: k-map-get( $kendo-palette-blue, 14 ),
-    series-a-subtle: k-map-get( $kendo-palette-blue, 5 ),
-    series-a-subtler: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-bolder: k-map-get( $kendo-palette-blue, 13 ),
+    series-a-subtle: k-map-get( $kendo-palette-blue, 7 ),
+    series-a-subtler: k-map-get( $kendo-palette-blue, 5 ),
     // Series B
     series-b: k-map-get( $kendo-palette-indigo, 8 ),
     series-b-bold: k-map-get( $kendo-palette-indigo, 10 ),
     series-b-bolder: k-map-get( $kendo-palette-indigo, 12 ),
-    series-b-subtle: k-map-get( $kendo-palette-indigo, 5 ),
-    series-b-subtler: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtle: k-map-get( $kendo-palette-indigo, 7 ),
+    series-b-subtler: k-map-get( $kendo-palette-indigo, 5 ),
     // Series C
     series-c: k-map-get( $kendo-palette-teal, 8 ),
-    series-c-bold: k-map-get( $kendo-palette-teal, 10 ),
-    series-c-bolder: k-map-get( $kendo-palette-teal, 12 ),
-    series-c-subtle: k-map-get( $kendo-palette-teal, 5 ),
-    series-c-subtler: k-map-get( $kendo-palette-teal, 7 ),
+    series-c-bold: k-map-get( $kendo-palette-teal, 11 ),
+    series-c-bolder: k-map-get( $kendo-palette-teal, 13 ),
+    series-c-subtle: k-map-get( $kendo-palette-teal, 6 ),
+    series-c-subtler: k-map-get( $kendo-palette-teal, 4 ),
     // Series D
-    series-d: k-map-get( $kendo-palette-green, 8 ),
-    series-d-bold: k-map-get( $kendo-palette-green, 10 ),
-    series-d-bolder: k-map-get( $kendo-palette-green, 12 ),
-    series-d-subtle: k-map-get( $kendo-palette-green, 5 ),
-    series-d-subtler: k-map-get( $kendo-palette-green, 7 ),
+    series-d: k-map-get( $kendo-palette-green, 10 ),
+    series-d-bold: k-map-get( $kendo-palette-green, 12 ),
+    series-d-bolder: k-map-get( $kendo-palette-green, 14 ),
+    series-d-subtle: k-map-get( $kendo-palette-green, 8 ),
+    series-d-subtler: k-map-get( $kendo-palette-green, 5 ),
     // Series Е
     series-e: k-map-get( $kendo-palette-red, 8 ),
     series-e-bold: k-map-get( $kendo-palette-red, 10 ),
     series-e-bolder: k-map-get( $kendo-palette-red, 12 ),
-    series-e-subtle: k-map-get( $kendo-palette-red, 5 ),
-    series-e-subtler: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtle: k-map-get( $kendo-palette-red, 7 ),
+    series-e-subtler: k-map-get( $kendo-palette-red, 4 ),
     // Series F
     series-f: k-map-get( $kendo-palette-yellow, 8 ),
     series-f-bold: k-map-get( $kendo-palette-yellow, 10 ),
     series-f-bolder: k-map-get( $kendo-palette-yellow, 12 ),
-    series-f-subtle: k-map-get( $kendo-palette-yellow, 5 ),
-    series-f-subtler: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtle: k-map-get( $kendo-palette-yellow, 7 ),
+    series-f-subtler: k-map-get( $kendo-palette-yellow, 5 ),
 ) !default;
 
 /// The global default Colors map.

package/scss/core/typography/index.import.scss

@@ -22,6 +22,7 @@ $kendo-font-size-xl: ( $kendo-font-size-md * 1.5 ) !default;
 /// @group typography
 $kendo-line-height: $line-height-base !default;
 /// The extra small line height across all components.
+/// @group typography
 $kendo-line-height-xs: 1 !default;
 /// The small line height across all components.
 /// @group typography

package/scss/dataviz/_variables.scss

@@ -92,7 +92,7 @@ $kendo-chart-line-height: var( --kendo-line-height, normal )!default;
 $kendo-chart-sm-font-size: 11px !default;
 $kendo-chart-md-font-size: 12px !default;
 $kendo-chart-lg-font-size: 16px !default;
-$kendo-chart-tooltip-font-size: calc( var( --kendo-font-size, inherit ) * .929) !default;
+$kendo-chart-tooltip-font-size: calc( #{$kendo-font-size} * .929) !default;
 $kendo-chart-label-font-size: .857em !default;
 $kendo-chart-title-font-size: 1.143em !default;
 $kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;

package/scss/drawer/_variables.scss

@@ -12,13 +12,23 @@ $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: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Drawer.
+/// @group drawer
 $kendo-drawer-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Drawer.
+/// @group drawer
 $kendo-drawer-line-height: var( --kendo-line-height, normal ) !default;
-$kendo-drawer-content-padding-x: $kendo-padding-md-x !default;
+
+/// The horizontal padding of the Drawer content.
+/// @group drawer
+$kendo-drawer-content-padding-x: null !default;
 /// The vertical padding of the Drawer content.
 /// @group drawer
-$kendo-drawer-content-padding-y: $kendo-padding-md-y !default;
+$kendo-drawer-content-padding-y: null !default;
 
 /// The width of the Drawer scrollbar.
 /// @group drawer

package/scss/forms/_layout.scss

@@ -8,7 +8,7 @@
     .k-form,
     .k-form-inline {
         legend {
-            font-size: calc( var( --kendo-font-size, inherit ) * 1.5 );
+            font-size: calc( var( --kendo-font-size, .875rem ) * 1.5 );
             font-weight: normal;
             line-height: var( --kendo-line-height, normal );
             text-transform: none;

package/scss/progressbar/_variables.scss

@@ -24,10 +24,10 @@ $kendo-progressbar-line-height: 1 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: $gray-200 !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: k-contrast-color( $gray-200 ) !default;
+$kendo-progressbar-text: if($kendo-enable-color-system, k-color( base-on-subtle ), k-contrast-color( $gray-200 )) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: null !default;

package/scss/scheduler/_variables.scss

@@ -1,92 +1,235 @@
 // Scheduler
+
+/// The width of the border around the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border-width: 1px !default;
+/// The font family of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
+/// The background color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-bg: $kendo-component-bg !default;
+/// The text color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-text: $kendo-component-text !default;
+/// The border color of the Scheduler.
+/// @group scheduler
 $kendo-scheduler-border: $kendo-component-border !default;
 
+/// The background color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler ToolBar.
+/// @group scheduler
 $kendo-scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
 
+/// The background color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-bg: $kendo-toolbar-bg !default;
+/// The text color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-text: $kendo-toolbar-text !default;
+/// The border color of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-border: $kendo-toolbar-border !default;
+/// The gradient of the Scheduler footer.
+/// @group scheduler
 $kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
+/// The minimum height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-min-height: 25px !default;
+/// The border radius of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border-radius: k-border-radius(md) !default;
+/// The line height of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
+/// The background color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
+/// The text color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-text: $kendo-selected-text !default;
+/// The border color of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-border: null !default;
+/// The gradient of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-gradient: null !default;
+/// The shadow of the Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-shadow: null !default;
 
+/// The background color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-bg: null !default;
+/// The text color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-text: null !default;
+/// The border color of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-border: null !default;
+/// The gradient of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-gradient: null !default;
+/// The shadow of the hovered Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-hover-shadow: null !default;
 
+/// The background color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-bg: $kendo-selected-bg !default;
+/// The text color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-text: $kendo-selected-text !default;
+/// The border color of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-border: null !default;
+/// The gradient of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-gradient: null !default;
+/// The shadow of the selected Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-selected-shadow: inset 0 0 0 3px rgba( white, .5 ) !default;
 
+/// The shadow of the ongoing Scheduler event.
+/// @group scheduler
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
+/// The horizontal padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-padding-y: k-spacing(3) !default;
+/// The height of the Scheduler cell.
+/// @group scheduler
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
+/// The width of the Scheduler date column.
+/// @group scheduler
 $kendo-scheduler-datecolumn-width: 12em !default;
+/// The width of the Scheduler time column.
+/// @group scheduler
 $kendo-scheduler-timecolumn-width: 11em !default;
 
+/// The background color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the non-working hours in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-nonwork-text: null !default;
 
+/// The background color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-bg: null !default;
+/// The text color of the weekends in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-weekend-text: null !default;
 
+/// The background color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
+/// The text color of the preceding/subsequent month cells in the Calendar.
+/// @group scheduler
 $kendo-scheduler-othermonth-text: null !default;
 
+/// The horizontal padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-x: k-spacing(4) !default;
+/// The vertical padding of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
+/// The spacing between the calendars of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-calendar-gap: k-spacing(4) !default;
 
+/// The days with events indicator size of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-size: 3px !default;
+/// The top position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
+/// The left position of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2)} ) !default;
+/// The border radius of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
+/// The background color of the days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+/// The background color of the selected days with events indicator of the year view in the Scheduler.
+/// @group scheduler
 $kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
+/// The horizontal padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-x: k-spacing(3) !default;
+/// The vertical padding of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-padding-y: k-spacing(3) !default;
+/// The width of the border of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border-width: 0 !default;
+/// The background color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
+/// The text color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
+/// The border color of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-border: null !default;
+/// The shadow of the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
+/// The vertical margin of the Scheduler Tooltip title.
+/// @group scheduler
 $kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
+/// The font size of the month inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-scheduler-tooltip-day-font-size: calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 ) !default;
+/// The font size of the day inside the Scheduler Tooltip.
+/// @group scheduler
+$kendo-scheduler-tooltip-day-font-size: calc( var( --kendo-font-size-sm, #{$kendo-font-size-sm} ) * 2 ) !default;
 
+/// The max height of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
+/// The spacing between the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-events-gap: k-spacing(2) !default;
 
+/// The horizontal padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
+/// The vertical padding of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
+/// The border radius of the events inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
+/// The spacing between the events items inside the Scheduler Tooltip.
+/// @group scheduler
 $kendo-scheduler-tooltip-event-gap: k-spacing(2) !default;
 
+/// The color of the Scheduler Tooltip callout.
+/// @group scheduler
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

package/scss/slider/_variables.scss

@@ -110,7 +110,7 @@ $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !def
 
 /// The background color of the Slider track.
 /// @group slider
-$kendo-slider-track-bg: $gray-200 !default;
+$kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-200) !default;
 /// The background color of the Slider's track selection.
 /// @group slider
 $kendo-slider-selection-bg: $kendo-selected-bg !default;

package/scss/switch/_variables.scss

@@ -36,7 +36,7 @@ $kendo-switch-off-track-bg: $kendo-component-bg !default;
 $kendo-switch-off-track-text: null !default;
 /// The border color of the track when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-track-border: $gray-500 !default;
+$kendo-switch-off-track-border: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) !default;
 /// The background gradient of the track when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-track-gradient: null !default;
@@ -85,7 +85,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the Switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: $gray-500 !default;
+$kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( base-emphasis ), $gray-500) !default;
 /// The text color of the thumb when the Switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;