@progress/kendo-theme-classic 12.3.1-dev.9 → 13.0.0-dev.1

package/scss/timeselector/_variables.scss

@@ -4,6 +4,11 @@
 
 // Time selector
 
+/// The default size of the TimeSelector.
+/// @group time-selector
+/// @role default
+$kendo-time-selector-default-size: "md" !default;
+
 /// The width of the border around the TimeSelector.
 /// @group time-selector
 $kendo-time-selector-border-width: 1px !default;
@@ -12,10 +17,10 @@ $kendo-time-selector-border-width: 1px !default;
 $kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TimeSelector.
 /// @group time-selector
-$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-time-selector-font-size: null !default;
 /// The line height of the TimeSelector.
 /// @group time-selector
-$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-time-selector-line-height: null !default;
 
 /// The background color of the TimeSelector.
 /// @group time-selector
@@ -76,23 +81,6 @@ $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 /// @group time-selector
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-/// The width of the border around the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-border-width: 1px 0px !default;
-/// The height of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
-/// The background color of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
-/// The border color of the TimeSelector list highlight.
-/// @group time-selector
-$kendo-time-list-highlight-border: k-color(border) !default;
-
-/// The background color of the focused TimeSelector list.
-/// @group time-selector
-$kendo-time-list-focus-bg: rgba( black, .04 ) !default;
-
 
 // Time selector sizes
 /// The font size of the small TimeSelector.
@@ -134,28 +122,22 @@ $kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !defa
 /// @group time-selector
 $kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
 
-/// The sizes map for the TimeSelector.
-/// @group time-selector
-$kendo-time-selector-sizes: (
-    sm: (
-        font-size: $kendo-time-selector-sm-font-size,
-        line-height: $kendo-time-selector-sm-line-height,
-        list-item-padding-x: $kendo-time-selector-sm-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-sm-list-item-padding-y
-    ),
-    md: (
-        font-size: $kendo-time-selector-md-font-size,
-        line-height: $kendo-time-selector-md-line-height,
-        list-item-padding-x: $kendo-time-selector-md-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-md-list-item-padding-y
-    ),
-    lg: (
-        font-size: $kendo-time-selector-lg-font-size,
-        line-height: $kendo-time-selector-lg-line-height,
-        list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
-        list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y
-    )
-) !default;
+/// The width of the border around the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-border-width: 1px 0px !default;
+/// The height of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-md-font-size} * #{$kendo-time-selector-md-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
+/// The background color of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-bg: k-color(surface-alt) !default;
+/// The border color of the TimeSelector list highlight.
+/// @group time-selector
+$kendo-time-list-highlight-border: k-color(border) !default;
+
+/// The background color of the focused TimeSelector list.
+/// @group time-selector
+$kendo-time-list-focus-bg: rgba( black, .04 ) !default;
 
 /// The text color of the TimeSelector button.
 /// @group time-selector
@@ -165,6 +147,7 @@ $kendo-time-selector-now-button-text: k-color(primary) !default;
 $kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/timeselector/_variables.scss" with (
+    $kendo-time-selector-default-size: $kendo-time-selector-default-size,
     $kendo-time-selector-border-width: $kendo-time-selector-border-width,
     $kendo-time-selector-font-family: $kendo-time-selector-font-family,
     $kendo-time-selector-font-size: $kendo-time-selector-font-size,
@@ -204,7 +187,6 @@ $kendo-time-selector-now-button-hover-text: k-color(primary-hover) !default;
     $kendo-time-selector-lg-line-height: $kendo-time-selector-lg-line-height,
     $kendo-time-selector-lg-list-item-padding-x: $kendo-time-selector-lg-list-item-padding-x,
     $kendo-time-selector-lg-list-item-padding-y: $kendo-time-selector-lg-list-item-padding-y,
-    $kendo-time-selector-sizes: $kendo-time-selector-sizes,
     $kendo-time-selector-now-button-text: $kendo-time-selector-now-button-text,
     $kendo-time-selector-now-button-hover-text: $kendo-time-selector-now-button-hover-text
 );

package/scss/toolbar/_variables.scss

@@ -4,6 +4,15 @@
 
 // Toolbar
 
+/// The default fill mode of the Toolbar.
+/// @group toolbar
+/// @role default
+$kendo-toolbar-default-fill-mode: "solid" !default;
+/// The default size of the Toolbar.
+/// @group toolbar
+/// @role default
+$kendo-toolbar-default-size: "md" !default;
+
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-x: k-spacing(1) !default;
@@ -137,31 +146,9 @@ $kendo-toolbar-overflow-button-padding-y: $kendo-menu-popup-md-item-padding-y !d
 /// @group toolbar
 $kendo-toolbar-overflow-button-padding-x: $kendo-menu-popup-md-item-padding-x !default;
 
-/// The sizes map for the Toolbar.
-/// @group toolbar
-$kendo-toolbar-sizes: (
-    sm: (
-        padding-x: $kendo-toolbar-sm-padding-x,
-        padding-y: $kendo-toolbar-sm-padding-y,
-        spacing: $kendo-toolbar-sm-spacing,
-        separator-height: $kendo-toolbar-sm-separator-height
-    ),
-    md: (
-        padding-x: $kendo-toolbar-md-padding-x,
-        padding-y: $kendo-toolbar-md-padding-y,
-        spacing: $kendo-toolbar-md-spacing,
-        separator-height: $kendo-toolbar-md-separator-height
-    ),
-    lg: (
-        padding-x: $kendo-toolbar-lg-padding-x,
-        padding-y: $kendo-toolbar-lg-padding-y,
-        spacing: $kendo-toolbar-lg-spacing,
-        separator-height: $kendo-toolbar-lg-separator-height
-    )
-) !default;
-
-
 @forward "@progress/kendo-theme-core/scss/components/toolbar/_variables.scss" with (
+    $kendo-toolbar-default-fill-mode: $kendo-toolbar-default-fill-mode,
+    $kendo-toolbar-default-size: $kendo-toolbar-default-size,
     $kendo-toolbar-sm-padding-x: $kendo-toolbar-sm-padding-x,
     $kendo-toolbar-md-padding-x: $kendo-toolbar-md-padding-x,
     $kendo-toolbar-lg-padding-x: $kendo-toolbar-lg-padding-x,
@@ -172,6 +159,9 @@ $kendo-toolbar-sizes: (
     $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing,
     $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing,
     $kendo-toolbar-separator-height: $kendo-toolbar-separator-height,
+    $kendo-toolbar-sm-separator-height: $kendo-toolbar-sm-separator-height,
+    $kendo-toolbar-md-separator-height: $kendo-toolbar-md-separator-height,
+    $kendo-toolbar-lg-separator-height: $kendo-toolbar-lg-separator-height,
     $kendo-toolbar-border-width: $kendo-toolbar-border-width,
     $kendo-toolbar-font-family: $kendo-toolbar-font-family,
     $kendo-toolbar-font-size: $kendo-toolbar-font-size,
@@ -197,6 +187,5 @@ $kendo-toolbar-sizes: (
     $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size,
     $kendo-toolbar-overflow-container-line-height: $kendo-toolbar-overflow-container-line-height,
     $kendo-toolbar-overflow-button-padding-y: $kendo-toolbar-overflow-button-padding-y,
-    $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x,
-    $kendo-toolbar-sizes: $kendo-toolbar-sizes
+    $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x
 );

package/scss/tooltip/_functions.scss

@@ -5,11 +5,11 @@
 @function tooltip-theme( $colors ) {
     $_theme: ();
 
-    @each $name, $color in $colors {
+    @each $name in $colors {
         $_theme: map.merge(( $name: (
             color: k-color(on-#{$name}),
-            background-color: $color,
-            border: $color,
+            background-color: k-color(#{$name}),
+            border: k-color(#{$name}),
         )), $_theme );
     }
 

package/scss/tooltip/_variables.scss

@@ -54,18 +54,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
 
 /// The theme colors map for the Tooltip.
 /// @group tooltip
-$kendo-tooltip-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
+$kendo-tooltip-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
 /// The generated theme colors map for the Tooltip.
 /// @group tooltip
 $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
@@ -86,6 +75,5 @@ $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
     $kendo-tooltip-text: $kendo-tooltip-text,
     $kendo-tooltip-border: $kendo-tooltip-border,
     $kendo-tooltip-shadow: $kendo-tooltip-shadow,
-    $kendo-tooltip-theme-colors: $kendo-tooltip-theme-colors,
     $kendo-tooltip-theme: $kendo-tooltip-theme
 );

package/scss/treeview/_variables.scss

@@ -2,12 +2,17 @@
 
 // TreeView
 
+/// The default size of the TreeView.
+/// @group treeview
+/// @role default
+$kendo-treeview-default-size: "md" !default;
+
 /// The font family of the TreeView.
 /// @group treeview
 $kendo-treeview-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TreeView.
 /// @group treeview
-$kendo-treeview-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-treeview-font-size: null !default;
 /// The font size of the small TreeView.
 /// @group treeview
 $kendo-treeview-sm-font-size: var( --kendo-font-size, inherit ) !default;
@@ -19,7 +24,7 @@ $kendo-treeview-md-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-treeview-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the TreeView.
 /// @group treeview
-$kendo-treeview-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-treeview-line-height: null !default;
 /// The line height of the small TreeView.
 /// @group treeview
 $kendo-treeview-sm-line-height: var( --kendo-line-height, normal ) !default;
@@ -78,36 +83,6 @@ $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y !de
 $kendo-treeview-lg-checkbox-padding-y: null !default;
 
 
-/// The sizes map of the TreeView.
-/// @group treeview
-$kendo-treeview-sizes: (
-    sm: (
-        font-size: $kendo-treeview-sm-font-size,
-        line-height: $kendo-treeview-sm-line-height,
-        item-padding-x: $kendo-treeview-sm-item-padding-x,
-        item-padding-y: $kendo-treeview-sm-item-padding-y,
-        checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x,
-        checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y
-    ),
-    md: (
-        font-size: $kendo-treeview-md-font-size,
-        line-height: $kendo-treeview-md-line-height,
-        item-padding-x: $kendo-treeview-md-item-padding-x,
-        item-padding-y: $kendo-treeview-md-item-padding-y,
-        checkbox-padding-x: $kendo-treeview-md-checkbox-padding-x,
-        checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y
-    ),
-    lg: (
-        font-size: $kendo-treeview-lg-font-size,
-        line-height: $kendo-treeview-lg-line-height,
-        item-padding-x: $kendo-treeview-lg-item-padding-x,
-        item-padding-y: $kendo-treeview-lg-item-padding-y,
-        checkbox-padding-x: $kendo-treeview-lg-checkbox-padding-x,
-        checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y
-    )
-) !default;
-
-
 /// The background color of the TreeView.
 /// @group treeview
 $kendo-treeview-bg: null !default;
@@ -184,6 +159,7 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
 
 
 @forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with (
+    $kendo-treeview-default-size: $kendo-treeview-default-size,
     $kendo-treeview-font-family: $kendo-treeview-font-family,
     $kendo-treeview-font-size: $kendo-treeview-font-size,
     $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size,
@@ -208,7 +184,6 @@ $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !defaul
     $kendo-treeview-sm-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y,
     $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-md-checkbox-padding-y,
     $kendo-treeview-lg-checkbox-padding-y: $kendo-treeview-lg-checkbox-padding-y,
-    $kendo-treeview-sizes: $kendo-treeview-sizes,
     $kendo-treeview-bg: $kendo-treeview-bg,
     $kendo-treeview-text: $kendo-treeview-text,
     $kendo-treeview-border: $kendo-treeview-border,

package/scss/window/_variables.scss

@@ -4,6 +4,16 @@
 
 // Window
 
+/// The default size of the Window.
+/// @group window
+/// @role default
+$kendo-window-default-size: "auto" !default;
+
+/// The default theme color of the Window.
+/// @group window
+/// @role default
+$kendo-window-default-theme-color: null !default;
+
 /// The width of the border around the Window.
 /// @group window
 $kendo-window-border-width: 1px !default;
@@ -96,24 +106,8 @@ $kendo-window-titlebar-border: k-color(border) !default;
 /// @group window
 $kendo-window-titlebar-gradient: null !default;
 
-/// The map of the width for the different Window sizes.
-/// @group window
-$kendo-window-sizes: (
-    sm: 300px,
-    md: 800px,
-    lg: 1200px
-) !default;
-
-/// The theme colors map for the Window.
-/// @group window
-$kendo-window-theme-colors: (
-    "primary": k-color(primary),
-    "light": k-color(light),
-    "dark": k-color(dark)
-) !default;
-
-
 @forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (
+    $kendo-window-default-theme-color: $kendo-window-default-theme-color,
     $kendo-window-border-width: $kendo-window-border-width,
     $kendo-window-border-radius: $kendo-window-border-radius,
     $kendo-window-font-family: $kendo-window-font-family,
@@ -142,6 +136,5 @@ $kendo-window-theme-colors: (
     $kendo-window-titlebar-text: $kendo-window-titlebar-text,
     $kendo-window-titlebar-border: $kendo-window-titlebar-border,
     $kendo-window-titlebar-gradient: $kendo-window-titlebar-gradient,
-    $kendo-window-sizes: $kendo-window-sizes,
-    $kendo-window-theme-colors: $kendo-window-theme-colors
+    $kendo-window-default-size: $kendo-window-default-size
 );