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

package/scss/components/timeselector/_layout.scss

@@ -2,6 +2,7 @@
 @use "sass:list";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
@@ -15,8 +16,6 @@
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-time-selector-font-family;
-        font-size: $kendo-time-selector-font-size;
-        line-height: $kendo-time-selector-line-height;
         position: relative;
         overflow: hidden;
         display: flex;
@@ -24,6 +23,39 @@
         user-select: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        // Time selector sizes
+        @each $size, $size-props in $kendo-time-selector-sizes {
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
+            $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
+            $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );
+
+            #{k-when-default( $kendo-time-selector-default-size, $size)}
+            &.k-timeselector-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-time-highlight,
+                .k-time-list-highlight {
+                    height: $_highlight-height;
+                }
+
+                .k-time-separator {
+                    height:  $_highlight-height;
+                }
+
+                .k-time-list-item,
+                .k-time-list .k-item {
+                    padding-block: $_list-item-padding-y;
+                    padding-inline: $_list-item-padding-x;
+                }
+            }
+        }
+
+        font-size: $kendo-time-selector-font-size;
+        line-height: $kendo-time-selector-line-height;
     }
 
     .k-popup > .k-timeselector {
@@ -215,36 +247,4 @@
         z-index: k-z-index("base", 1);
         inset-block-start: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
     }
-
-
-    // Time selector sizes
-    @each $size, $size-props in $kendo-time-selector-sizes {
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
-        $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
-        $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );
-
-
-        .k-timeselector-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-time-highlight,
-            .k-time-list-highlight {
-                height: $_highlight-height;
-            }
-
-            .k-time-separator {
-                height:  $_highlight-height;
-            }
-
-            .k-time-list-item,
-            .k-time-list .k-item {
-                padding-block: $_list-item-padding-y;
-                padding-inline: $_list-item-padding-x;
-            }
-        }
-    }
-
 }

package/scss/components/timeselector/_variables.scss

@@ -1,5 +1,7 @@
 // Time selector
 
+$kendo-time-selector-default-size: null !default;
+
 $kendo-time-selector-border-width: null !default;
 $kendo-time-selector-font-family: null !default;
 $kendo-time-selector-font-size: null !default;
@@ -54,7 +56,28 @@ $kendo-time-selector-lg-line-height: null !default;
 $kendo-time-selector-lg-list-item-padding-x: null !default;
 $kendo-time-selector-lg-list-item-padding-y: null !default;
 
-$kendo-time-selector-sizes: null !default;
+/// The sizes map of 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;
 
 $kendo-time-selector-now-button-text: null !default;
 $kendo-time-selector-now-button-hover-text: null !default;

package/scss/components/toolbar/_layout.scss

@@ -2,6 +2,7 @@
 @use "../../color-system/_constants.scss" as *;
 @use "../../typography/index.scss" as *;
 @use "../../spacing/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../mixins/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../button/_variables.scss" as *;
@@ -13,8 +14,6 @@
     // Base
     .k-toolbar {
         margin: 0;
-        padding-block: $kendo-toolbar-md-padding-y;
-        padding-inline: $kendo-toolbar-md-padding-x;
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -25,7 +24,6 @@
         list-style: none;
         display: flex;
         flex-flow: row wrap;
-        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         position: relative;
@@ -85,23 +83,6 @@
             }
         }
 
-
-        // Button
-        .k-button {}
-
-
-        // Toggle button
-        .k-toggle-button {}
-
-
-        // Button group
-        .k-button-group {}
-
-
-        // Split button
-        .k-split-button {}
-
-
         // Input
         .k-input,
         .k-picker {
@@ -115,6 +96,7 @@
         // Overflow anchor
         .k-toolbar-overflow-button {
             margin-inline-start: auto;
+            border-radius: 0;
         }
 
         // Overflow separator
@@ -155,7 +137,6 @@
     .k-toolbar-items {
         display: flex;
         flex-flow: row nowrap;
-        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         flex: 1 1 auto;
@@ -174,7 +155,6 @@
     .k-toolbar-items-list {
         display: flex;
         flex-flow: row wrap;
-        gap: $kendo-toolbar-md-spacing;
         align-items: center;
         justify-content: flex-start;
         flex: 1 1 auto;
@@ -211,65 +191,83 @@
         $_spacing: map.get( $size-props, spacing );
         $_separator-height: map.get( $size-props, separator-height );
 
-        .k-toolbar-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            gap: $_spacing;
+        .k-toolbar {
 
-            // Remove once we decide to not size empty containers
-            &::before {
-                margin-inline-start: calc( #{$_spacing} * -1 );
-            }
+            #{k-when-default($kendo-toolbar-default-size, $size)}
+            &.k-toolbar-#{$size} {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                gap: $_spacing;
 
-            &.k-toolbar-scrollable-overlay::before {
-                inset-inline-start: $_spacing;
-            }
+                // Remove once we decide to not size empty containers
+                &::before {
+                    margin-inline-start: calc( #{$_spacing} * -1 );
+                }
 
-            > * > label {
-                margin-inline-end: $_spacing;
-            }
+                &.k-toolbar-scrollable-overlay::before {
+                    inset-inline-start: $_spacing;
+                }
 
-            .k-toolbar-items {
-                gap: $_spacing;
-            }
+                > * > label {
+                    margin-inline-end: $_spacing;
+                }
+
+                .k-toolbar-items {
+                    gap: $_spacing;
+                }
+
+                .k-toolbar-button-separator {
+                    height: $_separator-height;
+                }
+
+                .k-toolbar-items-scroll {
+                    padding-block: $_padding-y;
+                    margin-block: calc( #{$_padding-y} * -1 );
+                    padding-inline: $_padding-x;
+                    margin-inline: calc( #{$_padding-x} * -1 );
+                }
+
+                &.k-toolbar-scrollable-overlay .k-toolbar-items-scroll:only-child,
+                .k-toolbar-items-scroll:not(:only-child) {
+                    padding-inline-end: 0;
+                    margin-inline-end: 0;
+                }
 
-            .k-toolbar-button-separator {
-                height: $_separator-height;
             }
 
-            .k-toolbar-items-scroll {
-                padding-block: $_padding-y;
-                margin-block: calc( #{$_padding-y} * -1 );
-                padding-inline: $_padding-x;
-                margin-inline: calc( #{$_padding-x} * -1 );
+            // Remove once we decide to not size empty containers
+            #{k-when-default($kendo-toolbar-default-size, "sm")}
+            &.k-toolbar-sm {
+                &::before {
+                    height: $kendo-button-sm-calc-size;
+                }
             }
 
-            &.k-toolbar-scrollable-overlay .k-toolbar-items-scroll:only-child,
-            .k-toolbar-items-scroll:not(:only-child) {
-                padding-inline-end: 0;
-                margin-inline-end: 0;
+            #{k-when-default($kendo-toolbar-default-size, "md")}
+            &.k-toolbar-md {
+                &::before {
+                    height: $kendo-button-md-calc-size;
+                }
             }
 
+            #{k-when-default($kendo-toolbar-default-size, "lg")}
+            &.k-toolbar-lg {
+                &::before {
+                    height: $kendo-button-lg-calc-size;
+                }
+            }
         }
 
-        .k-toolbar-items-list-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            gap: $_spacing;
+        .k-toolbar-items-list {
+            #{k-when-default($kendo-toolbar-default-size, $size)}
+            &.k-toolbar-items-list-#{$size} {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                gap: $_spacing;
+            }
         }
     }
 
-    // Remove once we decide to not size empty containers
-    .k-toolbar-sm::before {
-        height: $kendo-button-sm-calc-size;
-    }
-    .k-toolbar-md::before {
-        height: $kendo-button-md-calc-size;
-    }
-    .k-toolbar-lg::before {
-        height: $kendo-button-lg-calc-size;
-    }
-
     .k-floating-toolbar,
     .k-window-content:where(.editorToolbarWindow) { // stylelint-disable-line
         padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important

package/scss/components/toolbar/_theme.scss

@@ -1,4 +1,5 @@
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../menu/_variables.scss" as *;
 
@@ -12,97 +13,104 @@
             @include focus-indicator( $kendo-toolbar-item-shadow );
         }
 
-
-        // Button group
-        .k-button-group {}
-
-    }
-
-    .k-toolbar-items {
-        border-color: inherit;
-    }
-
-    // Separator
-    .k-toolbar .k-separator,
-    .k-toolbar-separator {
-        border-color: $kendo-toolbar-separator-border;
-    }
-
-    // Solid Toolbar
-    .k-toolbar-solid {
-        @include fill(
-            $kendo-toolbar-text,
-            $kendo-toolbar-bg,
-            $kendo-toolbar-border,
-            $kendo-toolbar-gradient
-        );
-        @include box-shadow( $kendo-toolbar-shadow );
-
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
+        // Solid Toolbar
+        #{k-when-default($kendo-toolbar-default-fill-mode, "solid")}
+        &.k-toolbar-solid {
+            @include fill(
+                $kendo-toolbar-text,
+                $kendo-toolbar-bg,
+                $kendo-toolbar-border,
+                $kendo-toolbar-gradient
+            );
+            @include box-shadow( $kendo-toolbar-shadow );
+
+            &.k-toolbar-scrollable-overlay {
+                &::before {
+                    background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
+                }
             }
+        }
 
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
+        // Outline Toolbar
+        #{k-when-default($kendo-toolbar-default-fill-mode, "outline")}
+        &.k-toolbar-outline {
+            @include fill(
+                $kendo-toolbar-outline-text,
+                transparent,
+                $kendo-toolbar-outline-border
+            );
+            @include box-shadow( $kendo-toolbar-outline-shadow );
+
+            &.k-toolbar-scrollable-overlay {
+                &::before {
+                    background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
+                }
             }
         }
-    }
 
-    .k-toolbar-items-list-solid {
-        border-color: $kendo-toolbar-border;
-    }
+        // Flat Toolbar
+        #{k-when-default($kendo-toolbar-default-fill-mode, "flat")}
+        &.k-toolbar-flat {
+            @include fill(
+                $color: $kendo-toolbar-flat-text,
+                $border: $kendo-toolbar-flat-border
+            );
+            @include box-shadow( $kendo-toolbar-flat-shadow );
 
-    // Outline Toolbar
-    .k-toolbar-outline {
-        @include fill(
-            $color: $kendo-toolbar-outline-text,
-            $border: $kendo-toolbar-outline-border
-        );
-        @include box-shadow( $kendo-toolbar-outline-shadow );
 
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
+            > .k-separator,
+            .k-toolbar-separator {
+                border-inline-color: $kendo-toolbar-flat-border;
             }
 
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
+            &.k-toolbar-scrollable-overlay {
+                &::before {
+                    background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
+                }
             }
         }
+
     }
 
-    .k-toolbar-items-list-outline {
-        border-color: $kendo-toolbar-outline-border;
+    .k-toolbar-items {
+        border-color: inherit;
     }
 
-    // Flat Toolbar
-    .k-toolbar-flat {
-        @include fill(
-            $color: $kendo-toolbar-flat-text,
-            $border: $kendo-toolbar-flat-border
-        );
-        @include box-shadow( $kendo-toolbar-flat-shadow );
+    // Separator
+    .k-toolbar .k-separator,
+    .k-toolbar-separator {
+        border-color: $kendo-toolbar-separator-border;
+    }
 
 
-        > .k-separator,
-        .k-toolbar-separator {
-            border-inline-color: $kendo-toolbar-flat-border;
-        }
+    .k-toolbar-items-list {
 
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
-            }
+        #{k-when-default($kendo-toolbar-default-fill-mode, "solid")}
+        &.k-toolbar-items-list-solid {
+            border-color: $kendo-toolbar-border;
+        }
 
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
-            }
+        #{k-when-default($kendo-toolbar-default-fill-mode, "outline")}
+        &.k-toolbar-items-list-outline {
+            border-color: $kendo-toolbar-outline-border;
         }
-    }
 
-    .k-toolbar-items-list-flat {
-        border-color: $kendo-toolbar-flat-border;
+        #{k-when-default($kendo-toolbar-default-fill-mode, "flat")}
+        &.k-toolbar-items-list-flat {
+            border-color: $kendo-toolbar-flat-border;
+        }
     }
 
     .k-floating-toolbar,
@@ -165,6 +173,7 @@
             background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
         }
 
+        #{k-when-default($kendo-toolbar-default-fill-mode, "outline")}
         &.k-toolbar-outline {
             &::before {
                 background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
@@ -175,6 +184,7 @@
             }
         }
 
+        #{k-when-default($kendo-toolbar-default-fill-mode, "flat")}
         &.k-toolbar-flat {
             &::before {
                 background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);

package/scss/components/toolbar/_variables.scss

@@ -1,5 +1,8 @@
 // Toolbar
 
+$kendo-toolbar-default-size: null !default;
+$kendo-toolbar-default-fill-mode: null !default;
+
 $kendo-toolbar-sm-padding-x: null !default;
 $kendo-toolbar-md-padding-x: null !default;
 $kendo-toolbar-lg-padding-x: null !default;
@@ -52,4 +55,25 @@ $kendo-toolbar-overflow-container-line-height: null !default;
 $kendo-toolbar-overflow-button-padding-y: null !default;
 $kendo-toolbar-overflow-button-padding-x: null !default;
 
-$kendo-toolbar-sizes: null !default;
+/// The sizes map of 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;

package/scss/components/tooltip/_variables.scss

@@ -20,19 +20,5 @@ $kendo-tooltip-border: null !default;
 
 $kendo-tooltip-shadow: null !default;
 
-@function tooltip-theme( $colors ) {
-    $_theme: ();
-
-    @each $name, $color in $colors {
-        $_theme: map.merge(( $name: (
-            color: k-color(on-#{$name}),
-            background-color: $color,
-            border: $color,
-        )), $_theme );
-    }
-
-    @return $_theme;
-}
-
 $kendo-tooltip-theme-colors: null !default;
 $kendo-tooltip-theme: null !default;

package/scss/components/treeview/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "../../color-system/_constants.scss" as *;
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "./variables.scss" as *;
@@ -17,8 +18,6 @@
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-treeview-font-family;
-        font-size: $kendo-treeview-font-size;
-        line-height: $kendo-treeview-line-height;
         display: block;
         cursor: default;
         overflow: auto;
@@ -31,6 +30,34 @@
         *::after {
             box-sizing: border-box;
         }
+
+        @each $size, $size-props in $kendo-treeview-sizes {
+            $_font-size: map.get( $size-props, font-size);
+            $_line-height: map.get( $size-props, line-height);
+            $_item-padding-x: map.get( $size-props, item-padding-x);
+            $_item-padding-y: map.get( $size-props, item-padding-y);
+            $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x );
+            $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y );
+
+            #{k-when-default($kendo-treeview-default-size, $size)}
+            &.k-treeview-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+                .k-treeview-leaf {
+                    padding-block: $_item-padding-y;
+                    padding-inline: $_item-padding-x;
+                }
+
+                .k-checkbox-wrap {
+                    padding-block: $_checkbox-padding-y;
+                    padding-inline: $_checkbox-padding-x;
+                }
+            }
+        }
+
+        font-size: $kendo-treeview-font-size;
+        line-height: $kendo-treeview-line-height;
     }
 
 
@@ -147,28 +174,4 @@
         }
     }
 
-    @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: map.get( $size-props, font-size);
-        $_line-height: map.get( $size-props, line-height);
-        $_item-padding-x: map.get( $size-props, item-padding-x);
-        $_item-padding-y: map.get( $size-props, item-padding-y);
-        $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x );
-        $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y );
-
-        .k-treeview-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-treeview-leaf {
-                padding-block: $_item-padding-y;
-                padding-inline: $_item-padding-x;
-            }
-
-            .k-checkbox-wrap {
-                padding-block: $_checkbox-padding-y;
-                padding-inline: $_checkbox-padding-x;
-            }
-        }
-    }
-
 }