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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "12.3.1-dev.8",
+  "version": "13.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -46,5 +46,5 @@
   "directories": {
     "doc": "docs"
   },
-  "gitHead": "66a4b42fcb672f119d011fd733654db9710025d8"
+  "gitHead": "38e27eadee8553fb04c4e46f57812022ff2e149b"
 }

package/scss/border-radii/index.scss

@@ -60,12 +60,4 @@ $kendo-border-radii: map.merge($default-border-radii, $kendo-border-radii);
             --kendo-border-radius-#{$key}: #{$value};
         }
     }
-
-    // Generate k-rounded-* classes
-    // which are part of the components rendering.
-    @each $key, $val in $kendo-border-radii {
-        .k-rounded-#{$key} {
-            border-radius: k-border-radius($key);
-        }
-    }
 }

package/scss/components/action-sheet/_layout.scss

@@ -375,7 +375,7 @@
             }
         }
 
-        .k-colorgradient-canvas {
+        .k-colorgradient .k-colorgradient-canvas {
             .k-hsv-gradient {
                 aspect-ratio: 1;
                 height: 100%;

package/scss/components/appbar/_theme.scss

@@ -8,26 +8,28 @@
 
     .k-appbar {
         @include box-shadow( $kendo-appbar-box-shadow );
-    }
-    .k-appbar-bottom {
-        @include box-shadow( $kendo-appbar-bottom-box-shadow );
-    }
-
 
-    // AppBar theme colors
-    @each $name, $color in $kendo-appbar-theme-colors {
-        .k-appbar-#{$name} {
-            @if $name == "light" {
-                color: $kendo-appbar-light-text;
-                background-color: $kendo-appbar-light-bg;
-            } @else if $name == "dark" {
-                color: $kendo-appbar-dark-text;
-                background-color: $kendo-appbar-dark-bg;
-            } @else {
-                color: k-color(on-#{$name});
-                background-color: $color;
+        // AppBar theme colors
+        @each $name in $kendo-appbar-theme-colors {
+            #{k-when-default($kendo-appbar-default-theme-color, $name)}
+            &.k-appbar-#{$name} {
+                @if $name == "inherit" {
+                    color: inherit;
+                    background-color: inherit;
+                } @else if $name == "dark" {
+                    color: $kendo-appbar-dark-text;
+                    background-color: $kendo-appbar-dark-bg;
+                } @else if $name == "light" {
+                    color: $kendo-appbar-light-text;
+                    background-color: $kendo-appbar-light-bg;
+                } @else {
+                    color: k-color(on-#{$name});
+                    background-color: k-color(#{$name});
+                }
             }
         }
     }
-
+    .k-appbar-bottom {
+        @include box-shadow( $kendo-appbar-bottom-box-shadow );
+    }
 }

package/scss/components/appbar/_variables.scss

@@ -1,6 +1,7 @@
 @use "../../color-system/_swatch.scss" as *;
 
 // AppBar
+$kendo-appbar-default-theme-color: null !default;
 
 $kendo-appbar-margin-x: null !default;
 $kendo-appbar-margin-y: null !default;
@@ -23,4 +24,6 @@ $kendo-appbar-dark-text: null !default;
 $kendo-appbar-box-shadow: null !default;
 $kendo-appbar-bottom-box-shadow: null !default;
 
-$kendo-appbar-theme-colors: null !default;
+/// The theme colors map of the AppBar.
+/// @group appbar
+$kendo-appbar-theme-colors: ("inherit", "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/avatar/_layout.scss

@@ -1,4 +1,6 @@
 @use "./_variables.scss" as *;
+@use "../../functions/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 
 @mixin kendo-avatar--layout-base() {
 
@@ -20,6 +22,26 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Roundness
+        @each $roundness in $kendo-avatar-roundness {
+            #{k-when-default($kendo-avatar-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+        // Null by default, overrides default border-radius
+        border-radius: $kendo-avatar-border-radius;
+
+        // Sizes
+        @each $name, $size in $kendo-avatar-sizes {
+            #{k-when-default($kendo-avatar-default-size, $name)}
+            &.k-avatar-#{$name} {
+                width: $size;
+                height: $size;
+                flex-basis: $size;
+            }
+        }
     }
 
 
@@ -57,15 +79,6 @@
     }
 
 
-    // Sizes
-    @each $name, $size in $kendo-avatar-sizes {
-        .k-avatar-#{$name} {
-            width: $size;
-            height: $size;
-            flex-basis: $size;
-        }
-    }
-
     // Shapes
     .k-avatar-square {}
 

package/scss/components/avatar/_theme.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../../color-system/_functions.scss" as *;
 @use "../../functions/index.scss" as *;
 @use "../../_variables.scss" as *;
@@ -5,23 +6,44 @@
 
 @mixin kendo-avatar--theme-base() {
 
-    // Solid Avatars
-    @each $name, $color in $kendo-avatar-theme-colors {
-        .k-avatar-solid-#{$name} {
-            border-color: $color;
-            color: k-color(on-#{$name});
-            background-color: $color;
+    .k-avatar {
+        // Solid Avatars
+        #{k-when-default($kendo-avatar-default-fill-mode, "solid")}
+        &.k-avatar-solid {
+
+            @each $name in $kendo-avatar-theme-colors {
+                #{k-when-default($kendo-avatar-default-theme-color, $name)}
+                &.k-avatar-#{$name} {
+                    @if ($name == "base") {
+                        border-color: k-color(on-app-surface);
+                        background: none;
+                        color: k-color(on-app-surface);
+                    } @else {
+                        border-color: k-color(#{$name});
+                        color: k-color(on-#{$name});
+                        background-color: k-color(#{$name});
+                    }
+                }
+            }
         }
-    }
 
-    // Outline avatars
-    .k-avatar-outline {
-        border-color: currentColor;
-    }
+        // Outline avatars
+        #{k-when-default($kendo-avatar-default-fill-mode, "outline")}
+        &.k-avatar-outline {
+            border-color: currentColor;
+
+            @each $name in $kendo-avatar-theme-colors {
+                #{k-when-default($kendo-avatar-default-theme-color, $name)}
+                &.k-avatar-#{$name} {
+                    background: none;
 
-    @each $name, $color in $kendo-avatar-theme-colors {
-        .k-avatar-outline-#{$name} {
-            color: k-color(#{$name}-on-surface);
+                    @if ($name == "base") {
+                        color: k-color(on-app-surface);
+                    } @else {
+                        color: k-color(#{$name}-on-surface);
+                    }
+                }
+            }
         }
     }
 

package/scss/components/avatar/_variables.scss

@@ -2,12 +2,33 @@
 
 // Avatar
 
+$kendo-avatar-default-theme-color: null !default;
+$kendo-avatar-default-fill-mode: null !default;
+$kendo-avatar-default-roundness: null !default;
+$kendo-avatar-default-size: null !default;
+
+$kendo-avatar-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
 $kendo-avatar-border-width: null !default;
+$kendo-avatar-border-radius: null !default;
 
 $kendo-avatar-font-family: null !default;
 $kendo-avatar-font-size: null !default;
 $kendo-avatar-line-height: null !default;
 
-$kendo-avatar-sizes: null !default;
 
-$kendo-avatar-theme-colors: null !default;
+$kendo-avatar-sm-size: null !default;
+$kendo-avatar-md-size: null !default;
+$kendo-avatar-lg-size: null !default;
+
+/// The sizes map of the Avatar.
+/// @group avatar
+$kendo-avatar-sizes: (
+    sm: $kendo-avatar-sm-size,
+    md: $kendo-avatar-md-size,
+    lg: $kendo-avatar-lg-size
+) !default;
+
+/// The theme colors map of the Avatar.
+/// @group avatar
+$kendo-avatar-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/badge/_layout.scss

@@ -1,4 +1,6 @@
 @use "sass:map";
+@use "../../functions/index.scss" as *;
+@use "../../border-radii/index.scss" as *;
 @use "../../color-system/_functions.scss" as *;
 @use "./_variables.scss" as *;
 @use "../../z-index/index.scss" as *;
@@ -28,6 +30,37 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Roundness
+        @each $roundness in $kendo-badge-roundness {
+            #{k-when-default($kendo-badge-default-roundness, $roundness)}
+            &.k-rounded-#{$roundness} {
+                border-radius: k-border-radius($roundness);
+            }
+        }
+
+        // Badge sizes
+        @each $size, $size-props in $kendo-badge-sizes {
+            $_padding-x: map.get( $size-props, padding-x );
+            $_padding-y: map.get( $size-props, padding-y );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+            $_min-width: map.get( $size-props, min-width );
+
+            #{k-when-default($kendo-badge-default-size, $size)}
+            &.k-badge-#{$size} {
+                padding-block: $_padding-y;
+                padding-inline: $_padding-x;
+                font-size: $_font-size;
+                line-height: $_line-height;
+                min-width: $_min-width;
+
+                &:empty {
+                    padding: $_padding-y;
+                    min-width: auto;
+                }
+            }
+        }
     }
     .k-badge > * {
         color: inherit;
@@ -56,28 +89,6 @@
     }
 
 
-    // Badge sizes
-    @each $size, $size-props in $kendo-badge-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-        $_min-width: map.get( $size-props, min-width );
-
-        .k-badge-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            font-size: $_font-size;
-            line-height: $_line-height;
-            min-width: $_min-width;
-
-            &:empty {
-                padding: $_padding-y;
-                min-width: auto;
-             }
-        }
-    }
-
     kendo-badge-container {
         display: inline-block;
     }

package/scss/components/badge/_theme.scss

@@ -1,29 +1,49 @@
+@use "sass:map";
 @use "../../functions/index.scss" as *;
 @use "../../color-system/_functions.scss" as *;
 @use "_variables.scss" as *;
 
 @mixin kendo-badge--theme-base() {
 
-    // Solid badges
-    @each $name, $color in $kendo-badge-theme-colors {
-        .k-badge-solid-#{$name} {
-            border-color: $color;
-            color: k-color(on-#{$name});
-            background-color: $color;
+    .k-badge {
+        // Solid badges
+        #{k-when-default($kendo-badge-default-fill-mode, "solid")}
+        &.k-badge-solid {
+            @each $name in $kendo-badge-theme-colors {
+                #{k-when-default($kendo-badge-default-theme-color, $name)}
+                &.k-badge-#{$name} {
+                    @if ($name == "base") {
+                        background: none;
+                        color: k-color(on-app-surface);
+                        border-color: transparent;
+                    } @else {
+                        border-color: k-color(#{$name});
+                        color: k-color(on-#{$name});
+                        background-color: k-color(#{$name});
+                    }
+                }
+            }
         }
-    }
 
-    // Outline badges
-    .k-badge-outline {
-        color: k-color(base-on-surface);
-        border-color: currentColor;
-        background-color: transparent;
-    }
+        // Outline badges
+        #{k-when-default($kendo-badge-default-fill-mode, "outline")}
+        &.k-badge-outline {
+            color: k-color(base-on-surface);
+            border-color: currentColor;
+            background-color: transparent;
 
-    @each $name, $color in $kendo-badge-theme-colors {
-        .k-badge-outline-#{$name} {
-            color: k-color(#{$name}-on-surface);
+            @each $name in $kendo-badge-theme-colors {
+                #{k-when-default($kendo-badge-default-theme-color, $name)}
+                &.k-badge-#{$name} {
+                    @if ($name == "base") {
+                        color: k-color(on-app-surface);
+                    } @else {
+                        color: k-color(#{$name}-on-surface);
+                    }
+                }
+            }
         }
     }
 
+
 }

package/scss/components/badge/_variables.scss

@@ -1,5 +1,10 @@
 // Badge
 
+$kendo-badge-default-theme-color: null !default;
+$kendo-badge-default-fill-mode: null !default;
+$kendo-badge-default-size: null !default;
+$kendo-badge-default-roundness: null !default;
+
 $kendo-badge-border-width: null !default;
 
 $kendo-badge-sm-padding-x: null !default;
@@ -25,6 +30,34 @@ $kendo-badge-sm-min-width: null !default;
 $kendo-badge-md-min-width: null !default;
 $kendo-badge-lg-min-width: null !default;
 
-$kendo-badge-sizes: null !default;
-
-$kendo-badge-theme-colors: null !default;
+/// The sizes map of the Badge.
+/// @group badge
+$kendo-badge-sizes: (
+    sm: (
+        padding-x: $kendo-badge-sm-padding-x,
+        padding-y: $kendo-badge-sm-padding-y,
+        font-size: $kendo-badge-sm-font-size,
+        line-height: $kendo-badge-sm-line-height,
+        min-width: $kendo-badge-sm-min-width
+    ),
+    md: (
+        padding-x: $kendo-badge-md-padding-x,
+        padding-y: $kendo-badge-md-padding-y,
+        font-size: $kendo-badge-md-font-size,
+        line-height: $kendo-badge-md-line-height,
+        min-width: $kendo-badge-md-min-width
+    ),
+    lg: (
+        padding-x: $kendo-badge-lg-padding-x,
+        padding-y: $kendo-badge-lg-padding-y,
+        font-size: $kendo-badge-lg-font-size,
+        line-height: $kendo-badge-lg-line-height,
+        min-width: $kendo-badge-lg-min-width
+    )
+) !default;
+
+$kendo-badge-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
+
+/// The theme colors map of the Badge.
+/// @group badge
+$kendo-badge-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/bottom-navigation/_theme.scss

@@ -6,54 +6,59 @@
 
 @mixin kendo-bottom-navigation--theme-base() {
 
-    // Solid
-    @each $name, $color in $kendo-bottom-navigation-theme-colors {
-        .k-bottom-nav-solid-#{$name} {
-            @include fill(
-                $color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent),
-                $bg: $color
-            );
-
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: color-mix(in srgb, k-color(on-#{$name}) 12.5%, transparent));
-            }
+    .k-bottom-nav {
+    // Fillmode: solid
+        #{k-when-default($kendo-bottom-nav-default-fill-mode, "solid")}
+        &.k-bottom-nav-solid {
+            // Theme colors
+            @each $name in $kendo-bottom-navigation-theme-colors {
+                #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
+                &.k-bottom-nav-#{$name} {
+                    @include fill(
+                        $color: color-mix(in srgb, k-color(on-#{$name}) 65%, transparent),
+                        $bg: k-color(#{$name})
+                    );
+
+                    .k-bottom-nav-item.k-focus,
+                    .k-bottom-nav-item:focus {
+                        @include fill( $bg: color-mix(in srgb, k-color(on-#{$name}) 12.5%, transparent));
+                    }
 
-            .k-bottom-nav-item.k-selected {
-                @include fill( $color: k-color(on-#{$name}));
+                    .k-bottom-nav-item.k-selected {
+                        @include fill( $color: k-color(on-#{$name}));
+                    }
+                }
             }
         }
-        // TODO: remove when suites update class names
-        .k-bottom-nav-solid.k-bottom-nav-#{$name} {
-            @extend .k-bottom-nav-solid-#{$name} !optional;
-        }
-    }
 
-    // Flat
-    @each $name, $color in $kendo-bottom-navigation-theme-colors {
-        .k-bottom-nav-flat-#{$name} {
-            @include fill(
-                $kendo-bottom-nav-flat-text,
-                $kendo-bottom-nav-flat-bg,
-                $kendo-bottom-nav-flat-border
-            );
-
-            .k-bottom-nav-item.k-focus,
-            .k-bottom-nav-item:focus {
-                @include fill( $bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent));
-            }
+        // Fillmode: flat
+        #{k-when-default($kendo-bottom-nav-default-fill-mode, "flat")}
+        &.k-bottom-nav-flat {
+            // Theme colors
+            @each $name in $kendo-bottom-navigation-theme-colors {
+                #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
+                &.k-bottom-nav-#{$name} {
+                    @include fill(
+                        $kendo-bottom-nav-flat-text,
+                        $kendo-bottom-nav-flat-bg,
+                        $kendo-bottom-nav-flat-border
+                    );
 
-            .k-bottom-nav-item.k-selected {
-                @if $name == "secondary" or $name == "light" {
-                    @include fill( $color: k-color(#{$name}));
-                } @else {
-                    @include fill( $color: $color );
+                    .k-bottom-nav-item.k-focus,
+                    .k-bottom-nav-item:focus {
+                        @include fill( $bg: color-mix(in srgb, k-color(on-app-surface) 5%, transparent));
+                    }
+
+                    .k-bottom-nav-item.k-selected {
+                        @if $name == "secondary" or $name == "light" {
+                            @include fill( $color: k-color(#{$name}));
+                        } @else {
+                            @include fill( $color: k-color(#{$name}) );
+                        }
+                    }
                 }
             }
         }
-        .k-bottom-nav-flat.k-bottom-nav-#{$name} {
-            @extend .k-bottom-nav-flat-#{$name} !optional;
-        }
     }
 
 }

package/scss/components/bottom-navigation/_variables.scss

@@ -2,6 +2,9 @@
 
 // BottomNavigation
 
+$kendo-bottom-nav-default-theme-color: null !default;
+$kendo-bottom-nav-default-fill-mode: null !default;
+
 $kendo-bottom-nav-padding-x: null !default;
 $kendo-bottom-nav-padding-y: null !default;
 $kendo-bottom-nav-gap: null !default;
@@ -25,4 +28,6 @@ $kendo-bottom-nav-flat-text: null !default;
 $kendo-bottom-nav-flat-bg: null !default;
 $kendo-bottom-nav-flat-border: null !default;
 
-$kendo-bottom-navigation-theme-colors: null !default;
+/// The theme colors map of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-navigation-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/breadcrumb/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../../mixins/index.scss" as *;
+@use "../../functions/index.scss" as *;
 @use "../../color-system/_constants.scss" as *;
 @use "../../motion/index.scss" as *;
 @use "../../_variables.scss" as *;
@@ -28,6 +29,34 @@
         *::after {
             box-sizing: border-box;
         }
+
+        // Sizes
+        @each $size, $size-props in $kendo-breadcrumb-sizes {
+            $_link-padding-x: map.get( $size-props, link-padding-x );
+            $_link-padding-y: map.get( $size-props, link-padding-y );
+            $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
+            $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
+            $_font-size: map.get( $size-props, font-size );
+            $_line-height: map.get( $size-props, line-height );
+
+            #{k-when-default($kendo-breadcrumb-default-size, $size)}
+            &.k-breadcrumb-#{$size} {
+                font-size: $_font-size;
+                line-height: $_line-height;
+
+
+                .k-breadcrumb-link,
+                .k-breadcrumb-root-link {
+                    padding-block: $_link-padding-y;
+                    padding-inline: $_link-padding-x;
+                }
+
+                .k-breadcrumb-icon-link {
+                    padding-block: $_icon-link-padding-y;
+                    padding-inline: $_icon-link-padding-x;
+                }
+            }
+        }
     }
 
 
@@ -106,31 +135,4 @@
     }
 
 
-    // Sizes
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: map.get( $size-props, link-padding-x );
-        $_link-padding-y: map.get( $size-props, link-padding-y );
-        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-
-        .k-breadcrumb-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                padding-block: $_link-padding-y;
-                padding-inline: $_link-padding-x;
-            }
-
-            .k-breadcrumb-icon-link {
-                padding-block: $_icon-link-padding-y;
-                padding-inline: $_icon-link-padding-x;
-            }
-        }
-    }
-
 }