@progress/kendo-theme-fluent 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/toolbar/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *;
@@ -16,19 +17,31 @@
             outline-style: $kendo-toolbar-item-focus-outline-style;
         }
 
-    }
-    .k-toolbar::before {
-        height: $kendo-button-inner-calc-size;
-    }
+        &::before {
+            height: $kendo-button-inner-calc-size;
+        }
+
+        #{k-when-default($kendo-toolbar-default-size, "sm")}
+        &.k-toolbar-sm{
+            &::before {
+                height: $kendo-button-sm-inner-calc-size;
+            }
+        }
+
+        #{k-when-default($kendo-toolbar-default-size, "md")}
+        &.k-toolbar-md {
+            &::before {
+                height: $kendo-button-md-inner-calc-size;
+            }
+        }
+
+        #{k-when-default($kendo-toolbar-default-size, "lg")}
+        &.k-toolbar-lg {
+            &::before {
+                height: $kendo-button-lg-inner-calc-size;
+            }
+        }
 
-    .k-toolbar-sm::before {
-        height: $kendo-button-sm-inner-calc-size;
-    }
-    .k-toolbar-md::before {
-        height: $kendo-button-md-inner-calc-size;
-    }
-    .k-toolbar-lg::before {
-        height: $kendo-button-lg-inner-calc-size;
     }
 
     .k-overflow-container .k-overflow-button {

package/scss/toolbar/_theme.scss

@@ -1,5 +1,6 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "../core/functions/index.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/toolbar/_theme.scss" as *;
 
 @mixin kendo-toolbar--theme() {
@@ -10,12 +11,13 @@
         .k-toolbar-item.k-focus {
             outline-color: $kendo-toolbar-item-focus-outline-color;
         }
-    }
 
-    .k-toolbar-flat {
-        > .k-separator,
-        .k-toolbar-separator {
-            border-inline-color: $kendo-toolbar-separator-border;
+        #{k-when-default($kendo-toolbar-default-fill-mode, "flat")}
+        &.k-toolbar-flat {
+            > .k-separator,
+            .k-toolbar-separator {
+                border-inline-color: $kendo-toolbar-separator-border;
+            }
         }
     }
 }

package/scss/toolbar/_variables.scss

@@ -2,6 +2,15 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss" as *;
 
+/// 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: calc( var( --kendo-toolbar-sm-padding-x, #{k-spacing(2)} ) + 1px ) !default;
@@ -113,30 +122,9 @@ $kendo-toolbar-item-focus-outline-style: var( --kendo-toolbar-item-focus-outline
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-color: var( --kendo-toolbar-item-focus-outline-color, #{k-color(base-emphasis)} ) !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,
@@ -165,6 +153,5 @@ $kendo-toolbar-sizes: (
     $kendo-toolbar-flat-border: $kendo-toolbar-flat-border,
     $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay,
     $kendo-toolbar-separator-border: $kendo-toolbar-separator-border,
-    $kendo-toolbar-input-width: $kendo-toolbar-input-width,
-    $kendo-toolbar-sizes: $kendo-toolbar-sizes
+    $kendo-toolbar-input-width: $kendo-toolbar-input-width
 );

package/scss/tooltip/_functions.scss

@@ -4,13 +4,22 @@
 
 @function tooltip-theme( $colors ) {
     $_theme: ();
+    $_solid-colors: ("primary", "dark", "light", "inverse");
 
-    @each $name, $color in $colors {
-        $_theme: map.merge(( $name: (
-            color: k-color(on-#{$name}),
-            background-color: $color,
-            border: $color,
-        )), $_theme );
+    @each $name in $colors {
+        @if index($_solid-colors, $name) {
+            $_theme: map.merge(( $name: (
+                color: k-color(on-#{$name}),
+                background-color: k-color(#{$name}),
+                border: k-color(#{$name}),
+            )), $_theme );
+        } @else {
+            $_theme: map.merge(( $name: (
+                color: k-color(#{$name}-on-subtle),
+                background-color: k-color(#{$name}-subtle),
+                border: k-color(#{$name}-subtle),
+            )), $_theme );
+        }
     }
 
     @return $_theme;

package/scss/tooltip/_theme.scss

@@ -9,25 +9,4 @@
     .k-tooltip-button {
         color: $kendo-tooltip-button-text;
     }
-
-    @each $name, $color in $kendo-tooltip-theme-colors {
-        @if($name == "primary" or $name == "dark" or $name == "light" or $name == "inverse") {
-            .k-tooltip-#{$name} {
-                color: k-color(on-#{$name});
-                background-color: k-color(#{$name});
-                border-color: k-color(#{$name});
-
-                .k-tooltip-button {
-                    
-                    color: k-color(on-#{$name});
-                }
-            }
-        } @else {
-            .k-tooltip-#{$name} {
-                color: k-color(#{$name}-on-subtle);
-                background-color: k-color(#{$name}-subtle);
-                border-color: k-color(#{$name}-subtle);
-            }
-        }
-    }
 }

package/scss/tooltip/_variables.scss

@@ -55,19 +55,9 @@ $kendo-tooltip-shadow: var( --kendo-tooltip-shadow, k-elevation(4) ) !default;
 /// @group tooltip
 $kendo-tooltip-button-text: var( --kendo-tooltip-button-text, #{k-color(subtle)} ) !default;
 
-/// Theme colors map for the tooltip variations.
-$kendo-tooltip-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary-subtle),
-    "tertiary": k-color(tertiary-subtle),
-    "info": k-color(info-subtle),
-    "success": k-color(success-subtle),
-    "warning": k-color(warning-subtle),
-    "error": k-color(error-subtle),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
+/// The theme colors map for the Tooltip.
+/// @group tooltip
+$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
@@ -88,6 +78,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

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// 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-treeview-font-family, var( --kendo-font-family, normal ) ) !default;
@@ -78,37 +83,6 @@ $kendo-treeview-filter-padding-x: var( --kendo-treeview-filter-padding-x, k-spac
 $kendo-treeview-filter-padding-y: var( --kendo-treeview-filter-padding-y, k-spacing(2) ) !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: var( --kendo-treeview-bg, transparent ) !default;
@@ -198,6 +172,7 @@ $kendo-treeview-loadmore-focus-shadow: var( --kendo-treeview-loadmore-focus-shad
 
 
 @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-sm-font-size: $kendo-treeview-sm-font-size,
     $kendo-treeview-md-font-size: $kendo-treeview-md-font-size,
@@ -220,7 +195,6 @@ $kendo-treeview-loadmore-focus-shadow: var( --kendo-treeview-loadmore-focus-shad
     $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/_theme.scss

@@ -12,19 +12,4 @@
             outline-color: k-color(on-base);
         }
     }
-
-    // Titlebar
-    .k-window-titlebar {
-        color: inherit;
-    }
-
-    .k-window-title {
-        color: $kendo-window-titlebar-text,
-    }
-
-    @each $name, $color in $kendo-window-theme-colors {
-        .k-window-#{$name} .k-window-title {
-            color: k-color(on-#{$name});
-        }
-    }
 }

package/scss/window/_variables.scss

@@ -1,6 +1,16 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// 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: var(--kendo-window-border-width, 0) !default;
@@ -96,23 +106,8 @@ $kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(on-app-s
 /// @group window
 $kendo-window-titlebar-border: var( --kendo-window-titlebar-border, k-color(primary) ) !default;
 
-/// The map of the width of 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,
@@ -140,7 +135,6 @@ $kendo-window-theme-colors: (
     $kendo-window-titlebar-bg: $kendo-window-titlebar-bg,
     $kendo-window-titlebar-text: $kendo-window-titlebar-text,
     $kendo-window-titlebar-border: $kendo-window-titlebar-border,
-    $kendo-window-sizes: $kendo-window-sizes,
-    $kendo-window-theme-colors: $kendo-window-theme-colors
+    $kendo-window-default-size: $kendo-window-default-size
 );