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

package/scss/components/colorpalette/_variables.scss

@@ -1,5 +1,7 @@
 // ColorPalette
 
+$kendo-color-palette-default-size: null !default;
+
 $kendo-color-palette-font-family: null !default;
 $kendo-color-palette-font-size: null !default;
 $kendo-color-palette-line-height: null !default;
@@ -17,4 +19,19 @@ $kendo-color-palette-tile-focus-shadow: null !default;
 $kendo-color-palette-tile-hover-shadow: null !default;
 $kendo-color-palette-tile-selected-shadow: null !default;
 
-$kendo-color-palette-sizes: () !default;
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    sm: (
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
+    ),
+    md: (
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
+    ),
+    lg: (
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
+    )
+) !default;

package/scss/components/column-menu/_layout.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
+@use "../../functions/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../border-radii/index.scss" as *;
 @use "_variables.scss" as *;
 
 @mixin kendo-column-menu--layout-base() {
-    .k-column-menu {}
 
     // Sizes
     @each $size, $value in $kendo-column-menu-sizes {
@@ -13,39 +13,50 @@
         $_font-size: map.get($value, font-size);
         $_line-height: map.get($value, line-height);
 
-        .k-column-menu-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-            .k-columnmenu-item {
-                padding-block: $_padding-y;
-                padding-inline: $_padding-x;
+        .k-column-menu {
+            #{k-when-default($kendo-column-menu-default-size, $size)}
+            &.k-column-menu-#{$size} {
                 font-size: $_font-size;
                 line-height: $_line-height;
+
+                .k-columnmenu-item {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-x;
+                    font-size: $_font-size;
+                    line-height: $_line-height;
+                }
             }
         }
 
-        .k-column-list-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
+        .k-column-list {
 
-            .k-column-list-item {
-                padding-block: $_padding-y;
-                padding-inline: $_padding-x;
+            #{k-when-default($kendo-column-menu-default-size, $size)}
+            &.k-column-list-#{$size} {
                 font-size: $_font-size;
                 line-height: $_line-height;
+
+                .k-column-list-item {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-x;
+                    font-size: $_font-size;
+                    line-height: $_line-height;
+                }
             }
         }
 
-        .k-group-menu-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
+        .k-group-menu {
 
-            .k-group-menu-item {
-                padding-block: $_padding-y;
-                padding-inline: $_padding-x;
+            #{k-when-default($kendo-column-menu-default-size, $size)}
+            &.k-group-menu-#{$size} {
                 font-size: $_font-size;
                 line-height: $_line-height;
+
+                .k-group-menu-item {
+                    padding-block: $_padding-y;
+                    padding-inline: $_padding-x;
+                    font-size: $_font-size;
+                    line-height: $_line-height;
+                }
             }
         }
     }

package/scss/components/column-menu/_variables.scss

@@ -1,3 +1,5 @@
+$kendo-column-menu-default-size: null !default;
+
 $kendo-column-menu-item-sm-padding-x: null !default;
 $kendo-column-menu-item-sm-padding-y: null !default;
 
@@ -19,23 +21,25 @@ $kendo-column-menu-lg-line-height: null !default;
 
 $kendo-column-menu-font-family: null !default;
 
+/// The sizes map for the ColumnMenu.
+/// @group column-menu
 $kendo-column-menu-sizes: (
     sm: (
         padding-x: $kendo-column-menu-item-sm-padding-x,
         padding-y: $kendo-column-menu-item-sm-padding-y,
-        font-size: $kendo-column-menu-item-sm-font-size,
+        font-size: $kendo-column-menu-sm-font-size,
         line-height: $kendo-column-menu-sm-line-height
     ),
     md: (
         padding-x: $kendo-column-menu-item-md-padding-x,
         padding-y: $kendo-column-menu-item-md-padding-y,
-        font-size: $kendo-column-menu-item-md-font-size,
+        font-size: $kendo-column-menu-md-font-size,
         line-height: $kendo-column-menu-md-line-height
     ),
     lg: (
         padding-x: $kendo-column-menu-item-lg-padding-x,
         padding-y: $kendo-column-menu-item-lg-padding-y,
-        font-size: $kendo-column-menu-item-lg-font-size,
+        font-size: $kendo-column-menu-lg-font-size,
         line-height: $kendo-column-menu-lg-line-height
     )
 ) !default;

package/scss/components/datetimepicker/_layout.scss

@@ -1,6 +1,7 @@
 @use "sass:map";
 @use "./variables.scss" as *;
 @use "../../motion/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../action-buttons/_variables.scss" as *;
 
 @mixin kendo-date-time-picker--layout-base() {
@@ -40,15 +41,18 @@
     }
 
     // Sizes
-    @each $size, $size-props in $kendo-datetime-sizes {
-        $_width: map.get($size-props, width);
+    .k-datetime-wrap {
+        @each $size, $size-props in $kendo-datetime-sizes {
+            $_width: map.get($size-props, width);
 
-        .k-datetime-wrap-#{$size} {
-            width: $_width;
+            #{k-when-default($kendo-datetime-default-size, $size)}
+            &.k-datetime-wrap-#{$size} {
+                width: $_width;
 
-            .k-datetime-calendar-wrap,
-            .k-datetime-time-wrap {
-                flex: 0 0 $_width;
+                .k-datetime-calendar-wrap,
+                .k-datetime-time-wrap {
+                    flex: 0 0 $_width;
+                }
             }
         }
     }

package/scss/components/datetimepicker/_variables.scss

@@ -1,6 +1,21 @@
 // DateTime
+$kendo-datetime-default-size: null !default;
+
 $kendo-datetime-width: null !default;
 $kendo-datetime-sm-width: null !default;
 $kendo-datetime-md-width: null !default;
 $kendo-datetime-lg-width: null !default;
-$kendo-datetime-sizes: null !default;
+
+/// The sizes map of the DateTimePicker.
+/// @group date-time-picker
+$kendo-datetime-sizes: (
+    sm: (
+        width: $kendo-datetime-sm-width
+    ),
+    md: (
+        width: $kendo-datetime-md-width
+    ),
+    lg: (
+        width: $kendo-datetime-lg-width
+    )
+) !default;

package/scss/components/dialog/_theme.scss

@@ -7,6 +7,18 @@
 @mixin kendo-dialog--theme-base() {
     .k-dialog {
         background-color: $kendo-dialog-bg;
+
+        // Dialog theme colors
+        @each $name in $kendo-dialog-theme-colors {
+
+            #{k-when-default($kendo-dialog-default-theme-color, $name)}
+            &.k-dialog-#{$name} {
+                .k-dialog-titlebar {
+                    color: k-color(on-#{$name});
+                    background-color: k-color(#{$name});
+                }
+            }
+        }
     }
 
     // Dialog titlebar
@@ -17,13 +29,4 @@
             $kendo-dialog-titlebar-border
         );
     }
-
-    // Dialog theme colors
-    @each $name, $color in $kendo-dialog-theme-colors {
-        .k-dialog-#{$name} .k-dialog-titlebar {
-            color: k-color(on-#{$name});
-            background-color: $color;
-        }
-    }
-
 }

package/scss/components/dialog/_variables.scss

@@ -1,5 +1,7 @@
 // Dialog
 
+$kendo-dialog-default-theme-color: null !default;
+
 $kendo-dialog-titlebar-bg: null !default;
 $kendo-dialog-titlebar-text: null !default;
 $kendo-dialog-titlebar-border: null !default;
@@ -11,4 +13,6 @@ $kendo-dialog-button-spacing: null !default;
 
 $kendo-dialog-bg: null !default;
 
-$kendo-dialog-theme-colors: null !default;
+/// The theme colors map of the Dialog.
+/// @group dialog
+$kendo-dialog-theme-colors: ("primary", "light", "dark") !default;

package/scss/components/fab/_layout.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
 @use "./variables.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../motion/index.scss" as *;
 
@@ -7,7 +9,6 @@
 
     // Floating Action Button (FAB)
     .k-fab {
-        padding: 0;
         border-width: 0;
         border-style: solid;
         border-color: transparent;
@@ -38,6 +39,26 @@
         &:focus {
             outline: none;
         }
+
+        // Roundness
+        @each $roundness in $kendo-fab-roundness {
+            #{k-when-default($kendo-fab-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+
+        // Sizes
+        @each $size, $size-props in $kendo-fab-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+
+            #{k-when-default($kendo-fab-default-size, $size)}
+            &.k-fab-#{$size} {
+                padding: $_padding-y $_padding-x;
+            }
+
+        }
     }
 
     // FAB Icon
@@ -53,17 +74,6 @@
         margin-inline-start: calc( #{$kendo-fab-icon-spacing} * -1 );
     }
 
-    // Sizes
-    @each $size, $size-props in $kendo-fab-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-
-        .k-fab-#{$size} {
-            padding: $_padding-y $_padding-x;
-        }
-
-    }
-
     // Items
     .k-fab-items {
         margin: 0;

package/scss/components/fab/_theme.scss

@@ -6,82 +6,88 @@
 
 @mixin kendo-fab--theme-base() {
 
-    // Normal state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name} {
-            @include box-shadow($kendo-fab-shadow);
-            outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
-            outline-offset: calc(#{$kendo-fab-border-width} * -1);
-            border-color: $color;
-            color: k-color(on-#{$name});
-            background-color: $color;
-        }
-    }
-
-    // Hover state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-hover.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:hover {
-            border-color: k-color(#{$name}-hover);
-            background-color: k-color(#{$name}-hover);
-        }
-    }
-
-    // Focus state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-fab-solid-#{$name}.k-focus,
-        .k-fab-solid-#{$name}:focus {
-            @if $kendo-enable-focus-contrast {
-                @include box-shadow( inset 0 0 0 2px currentColor );
-            } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width color-mix(in srgb, k-color($name) 30%, transparent);
+    .k-fab {
+        // Fillmode: solid
+        #{k-when-default($kendo-fab-default-fill-mode, "solid")}
+        &.k-fab-solid {
+
+            // Theme colors
+            @each $name in $kendo-fab-theme-colors {
+
+                // Normal state
+                #{k-when-default($kendo-fab-default-theme-color, $name)}
+                &.k-fab-#{$name} {
+                    @include box-shadow($kendo-fab-shadow);
+                    outline: $kendo-fab-border-width $kendo-fab-outline-style k-color($name);
+                    outline-offset: calc(#{$kendo-fab-border-width} * -1);
+                    border-color: k-color($name);
+                    color: k-color(on-#{$name});
+                    background-color: k-color($name);
+
+                    // Hover state
+                    &.k-hover,
+                    &:hover {
+                        border-color: k-color(#{$name}-hover);
+                        background-color: k-color(#{$name}-hover);
+                    }
+
+                    // Focus state
+                    &.k-focus,
+                    &:focus {
+                        @if $kendo-enable-focus-contrast {
+                            @include box-shadow( inset 0 0 0 2px currentColor );
+                        } @else {
+                            outline: $kendo-fab-outline-style $kendo-fab-outline-width color-mix(in srgb, k-color($name) 30%, transparent);
+                        }
+                    }
+
+                    // Active state
+                    &.k-active,
+                    &.k-selected,
+                    &:active {
+                        @include box-shadow($kendo-fab-active-shadow);
+                        border-color: k-color(#{$name}-active);
+                        background-color: k-color(#{$name}-active);
+                    }
+
+                    // Disabled state
+                    &.k-disabled,
+                    &:disabled {
+                        @include box-shadow($kendo-fab-disabled-shadow);
+                        background-color: color-mix(in srgb, k-color($name) 60%, transparent);
+                        color: color-mix(in srgb, k-color(on-#{$name}) 60%, transparent);
+                        opacity: 1;
+                    }
+                }
             }
-        }
-    }
-
-    // Active state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-active.k-fab-solid-#{$name},
-        .k-selected.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:active {
-            @include box-shadow($kendo-fab-active-shadow);
-            border-color: k-color(#{$name}-active);
-            background-color: k-color(#{$name}-active);
-        }
-    }
 
-    // Generating state
-    .k-fab-solid-primary.k-generating {
-
-        animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
-
-        @keyframes k-fab-generating {
-            0% {
-                background-color: k-color(primary-active);
-                border: k-color(primary-active);
-                outline-color: k-color(primary-active);
-            }
-            50% {
-                background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
-                border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
-                outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+            // Generating state
+            #{k-when-default($kendo-fab-default-theme-color, "primary")}
+            &.k-fab-primary{
+
+                &.k-generating {
+
+                    animation: k-fab-generating 1.5s ease-in-out 0.5s infinite;
+
+                    @keyframes k-fab-generating {
+                        0% {
+                            background-color: k-color(primary-active);
+                            border: k-color(primary-active);
+                            outline-color: k-color(primary-active);
+                        }
+                        50% {
+                            background-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                            border: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                            outline-color: color-mix(in srgb, k-color(primary-active) $kendo-fab-generating-opacity, k-color(surface-alt));
+                        }
+                        100% {
+                            background-color: k-color(primary-active);
+                            border: k-color(primary-active);
+                            outline-color: k-color(primary-active);
+                        }
+                    }
+                }
             }
-            100% {
-                background-color: k-color(primary-active);
-                border: k-color(primary-active);
-                outline-color: k-color(primary-active);
-            }
-        }
-    }
-
-    // Disabled state
-    @each $name, $color in $kendo-fab-theme-colors {
-        .k-disabled.k-fab-solid-#{$name},
-        .k-fab-solid-#{$name}:disabled {
-            @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: color-mix(in srgb, k-color($name) 60%, transparent);
-            color: color-mix(in srgb, k-color(on-#{$name}) 60%, transparent);
-            opacity: 1;
         }
     }
 

package/scss/components/fab/_variables.scss

@@ -1,5 +1,10 @@
 // Floating Action Button
 
+$kendo-fab-default-theme-color: null !default;
+$kendo-fab-default-fill-mode: null !default;
+$kendo-fab-default-roundness: null !default;
+$kendo-fab-default-size: null !default;
+
 $kendo-fab-border-width: null !default;
 
 $kendo-fab-font-family: null !default;
@@ -33,10 +38,6 @@ $kendo-fab-item-icon-padding-y: null !default;
 $kendo-fab-item-icon-border-width: null !default;
 $kendo-fab-item-icon-border-radius: null !default;
 
-$kendo-fab-theme-colors: null !default;
-
-$kendo-fab-sizes: null !default;
-
 $kendo-fab-shadow: null !default;
 $kendo-fab-disabled-shadow: null !default;
 $kendo-fab-active-shadow: null !default;
@@ -59,3 +60,27 @@ $kendo-fab-item-outline-width: null !default;
 $kendo-fab-item-outline-color: null !default;
 
 $kendo-fab-generating-opacity: null !default;
+
+$kendo-fab-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
+/// The theme colors map of the FloatingActionButton.
+/// @group floating-action-button
+$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+
+/// The sizes map of the FloatingActionButton.
+/// @group floating-action-button
+$kendo-fab-sizes: (
+    sm: (
+        padding-x: $kendo-fab-sm-padding-x,
+        padding-y: $kendo-fab-sm-padding-y
+    ),
+    md: (
+        padding-x: $kendo-fab-md-padding-x,
+        padding-y: $kendo-fab-md-padding-y
+    ),
+    lg: (
+        padding-x: $kendo-fab-lg-padding-x,
+        padding-y: $kendo-fab-lg-padding-y
+    )
+) !default;
+

package/scss/components/forms/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../spacing/index.scss" as *;
 @use "../../_variables.scss" as *;
 @use "./_variables.scss" as *;
@@ -213,10 +214,13 @@
     @each $size, $size-props in $kendo-form-sizes {
         $_form-rows-spacing: map.get($size-props, form-rows-spacing);
 
-        .k-form-#{$size} {
-            .k-form-field,
-            .k-form-buttons {
-                margin-block-start: $_form-rows-spacing;
+        .k-form {
+            #{k-when-default($kendo-form-default-size, $size)}
+            &.k-form-#{$size} {
+                .k-form-field,
+                .k-form-buttons {
+                    margin-block-start: $_form-rows-spacing;
+                }
             }
         }
     }

package/scss/components/forms/_variables.scss

@@ -1,5 +1,7 @@
 // Forms
 
+$kendo-form-default-size: null !default;
+
 $kendo-form-spacer: null !default;
 
 $kendo-form-font-size: null !default;
@@ -59,5 +61,17 @@ $kendo-form-field-info-margin: null !default;
 
 $kendo-fieldset-legend-text: null !default;
 
-$kendo-form-sizes: null !default;
+/// The sizes map of the Form.
+/// @group form
+$kendo-form-sizes: (
+    sm: (
+        form-rows-spacing: $kendo-form-sm-rows-spacing
+    ),
+    md: (
+        form-rows-spacing: $kendo-form-md-rows-spacing
+    ),
+    lg: (
+        form-rows-spacing: $kendo-form-lg-rows-spacing
+    )
+) !default;
 

package/scss/components/gantt/_layout.scss

@@ -406,7 +406,7 @@
 
 
     // Tasks
-    .k-gantt-tasks {
+    .k-gantt-tasks.k-table {
         position: relative;
 
         td,