@progress/kendo-theme-fluent 5.7.0

package/scss/avatar/_variables.scss

@@ -0,0 +1,105 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/variables" as *;
+
+/// Border width of the avatar.
+/// @group avatar
+$kendo-avatar-border-width: 1px !default;
+
+/// Font family of the avatar.
+/// @group avatar
+$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the avatar.
+/// @group avatar
+$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the avatar.
+/// @group avatar
+$kendo-avatar-line-height: var( --kendo-line-height, inherit ) !default;
+
+/// The sizes of the avatar.
+/// @group avatar
+$kendo-avatar-sizes: (
+    sm: map-get( $kendo-spacing, 4 ),
+    md: map-get( $kendo-spacing, 8 ),
+    lg: map-get( $kendo-spacing, 16 )
+) !default;
+
+// Theme variations for the avatar.
+$kendo-avatar-brand-colors: (
+    primary: primary,
+    error: error,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+ );
+
+// Matrix with avatar theme colors in the order: bg, color, border
+$_tc-avatar-matrix: (
+    solid: (
+        normal: (100, $white, 100)
+    ),
+    outline: (
+        normal: ($white, 100, 100)
+    )
+);
+
+$_tc-avatar-warning-matrix: (
+    solid: (
+        normal: (100, get-theme-color-var( neutral-160 ), 100)
+    ),
+    outline: (
+        normal: ($white, 100, 100)
+    )
+);
+
+$_tc-avatar-dark-matrix: (
+    solid: (
+        normal: (160, $white, 160)
+    ),
+    outline: (
+        normal: ($white, 160, 160)
+    )
+);
+
+$_tc-avatar-light-matrix: (
+    solid: (
+        normal: (50, $white, 50)
+    ),
+    outline: (
+        normal: ($white, 50, 50)
+    )
+);
+
+/// Theme colors map for the avatar variations.
+$kendo-avatar-theme-colors: ();
+
+@each $fill-mode, $ui-states in $_tc-avatar-matrix {
+    @each $brand-color, $palette in $kendo-avatar-brand-colors {
+        $kendo-avatar-theme-colors: map.deep-merge(
+            $kendo-avatar-theme-colors,
+            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $fill-mode, $ui-states in $_tc-avatar-warning-matrix {
+    $kendo-avatar-theme-colors: map.deep-merge(
+        $kendo-avatar-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-avatar-dark-matrix {
+    $kendo-avatar-theme-colors: map.deep-merge(
+        $kendo-avatar-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-avatar-light-matrix {
+    $kendo-avatar-theme-colors: map.deep-merge(
+        $kendo-avatar-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+    );
+}

package/scss/avatar/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "avatar",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "avatar" ) {
+        @include kendo-avatar--layout();
+        @include kendo-avatar--theme();
+    }
+}

package/scss/badge/_layout.scss

@@ -0,0 +1,155 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-badge--layout() {
+
+    .k-badge {
+        padding-inline: var( --INTERNAL--kendo-badge-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-badge-padding-y, 0 );
+        min-width: var( --INTERNAL--kendo-badge-min-width, auto );
+        font-size: var( --INTERNAL--kendo-badge-font-size, 1rem );
+        font-weight: var( --kendo-badge-font-weight, #{$kendo-badge-font-weight} );
+        line-height: var( --INTERNAL--kendo-badge-line-height, normal );
+        border-width: var( --kendo-badge-border-width, #{$kendo-badge-border-width} );
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        color: inherit;
+        background-color: transparent;
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+    .k-badge > * {
+        color: inherit;
+    }
+
+
+    // Links
+    a.k-badge,
+    .k-badge > a {
+        text-decoration: none;
+    }
+    a.k-badge:hover,
+    .k-badge > a:hover {
+        text-decoration: underline;
+    }
+
+
+    // Icon
+    .k-badge-icon {
+        max-width: 1em;
+        max-height: 1em;
+        font-size: inherit;
+    }
+    .k-badge-icon.k-svg-icon svg {
+        fill: currentColor;
+    }
+
+    // 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} {
+            --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
+            --INTERNAL--kendo-badge-font-size: var( --kendo-badge-#{$size}-font-size, #{$_font-size} );
+            --INTERNAL--kendo-badge-line-height: var( --kendo-badge-#{$size}-line-height, #{$_line-height} );
+            --INTERNAL--kendo-badge-min-width: var( --kendo-badge-#{$size}-min-width, #{$_min-width} );
+
+            &:empty {
+                --INTERNAL--kendo-badge-padding-x: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
+                --INTERNAL--kendo-badge-padding-y: var( --kendo-badge-#{$size}-padding-y, #{$_padding-y} );
+
+                min-width: auto;
+            }
+        }
+    }
+
+    kendo-badge-container {
+        display: inline-block;
+    }
+
+    // Badge position
+    .k-badge-container {
+        position: relative;
+        overflow: visible;
+    }
+
+    @each $placement, $translate in ("inside": null, "edge": 50, "outside": 100) {
+
+        .k-badge-#{$placement} {
+            position: absolute;
+            z-index: 9999;
+
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+        }
+
+        .k-rtl .k-badge-#{$placement},
+        [dir="rtl"].k-badge-#{$placement},
+        [dir="rtl"] .k-badge-#{$placement} {
+            &.k-top-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-top-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, -1% * $translate );
+                }
+            }
+            &.k-bottom-start {
+                @if $translate {
+                    transform: translate( 1% * $translate, 1% * $translate );
+                }
+            }
+            &.k-bottom-end {
+                @if $translate {
+                    transform: translate( -1% * $translate, 1% * $translate );
+                }
+            }
+        }
+    }
+
+
+    // Border cutout
+    .k-badge-border-cutout {
+        box-shadow: 0 0 0 2px var( --kendo-component-bg, inherit );
+    }
+
+}

package/scss/badge/_theme.scss

@@ -0,0 +1,31 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-badge--theme() {
+
+    .k-badge {
+        --INTERNAL--kendo-badge-text: var( --kendo-badge-text, #{$kendo-badge-text} );
+        --INTERNAL--kendo-badge-bg: var( --kendo-badge-bg, #{$kendo-badge-bg} );
+        --INTERNAL--kendo-badge-border: var( --kendo-badge-border, #{$kendo-badge-border} );
+
+        color: var( --INTERNAL--kendo-badge-text, initial );
+        background-color: var( --INTERNAL--kendo-badge-bg, initial );
+        border-color: var( --INTERNAL--kendo-badge-border, initial );
+    }
+
+    @each $fill-mode, $theme-colors in $kendo-badge-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+
+            $_text: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border: map-get( $color-props, border );
+
+            .k-badge-#{$fill-mode}-#{$theme-color} {
+                --kendo-badge-text: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-text, #{$_text} );
+                --kendo-badge-bg: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                --kendo-badge-border: var( --kendo-badge-#{$fill-mode}-#{$theme-color}-border, #{$_border} );
+            }
+        }
+    }
+}

package/scss/badge/_variables.scss

@@ -0,0 +1,159 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Background color of the badge.
+/// @group badge
+$kendo-badge-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the badge.
+/// @group badge
+$kendo-badge-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the badge.
+/// @group badge
+$kendo-badge-border: var( --kendo-component-border, initial ) !default;
+
+/// Border width of the badge.
+/// @group badge
+$kendo-badge-border-width: map-get( $kendo-spacing, hair ) !default;
+
+/// Font weight of the badge.
+/// @group badge
+$kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
+
+/// Horizontal padding of the badge.
+/// @group badge
+$kendo-badge-padding-x-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-x-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Vertical padding of the badge.
+/// @group badge
+$kendo-badge-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-badge-padding-y-md: map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y-lg: calc( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// Font sizes of the badge.
+/// @group badge
+$kendo-badge-font-size-sm: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-font-size-md: var( --kendo-font-size-xs, inherit ) !default;
+$kendo-badge-font-size-lg: var( --kendo-font-size-xs, inherit ) !default;
+
+/// Line heights of the badge.
+/// @group badge
+$kendo-badge-line-height-sm: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-line-height-md: var( --kendo-line-height-xs, normal ) !default;
+$kendo-badge-line-height-lg: var( --kendo-line-height-xs, normal ) !default;
+
+/// Badge min width used for circle badge.
+/// @group badge
+$kendo-badge-min-width-sm: calc( #{$kendo-badge-line-height-sm} * 1em + #{$kendo-badge-padding-y-sm} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-min-width-md: calc( #{$kendo-badge-line-height-md} * 1em + #{$kendo-badge-padding-y-md} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+$kendo-badge-min-width-lg: calc( #{$kendo-badge-line-height-lg} * 1em + #{$kendo-badge-padding-y-lg} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+
+
+/// Sizes map for the badge.
+/// @group badge
+$kendo-badge-sizes: (
+    sm: (
+        padding-x: $kendo-badge-padding-x-sm,
+        padding-y: $kendo-badge-padding-y-sm,
+        font-size: $kendo-badge-font-size-sm,
+        line-height: $kendo-badge-line-height-sm,
+        min-width: $kendo-badge-min-width-sm
+    ),
+    md: (
+        padding-x: $kendo-badge-padding-x-md,
+        padding-y: $kendo-badge-padding-y-md,
+        font-size: $kendo-badge-font-size-md,
+        line-height: $kendo-badge-line-height-md,
+        min-width: $kendo-badge-min-width-md
+    ),
+    lg: (
+        padding-x: $kendo-badge-padding-x-lg,
+        padding-y: $kendo-badge-padding-y-lg,
+        font-size: $kendo-badge-font-size-lg,
+        line-height: $kendo-badge-line-height-lg,
+        min-width: $kendo-badge-min-width-lg
+    )
+) !default;
+
+
+/// Theme variations for the badge.
+$kendo-badge-brand-colors: (
+    primary: primary,
+    error: error,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+ );
+
+// Matrix with badge theme colors in the order: bg, color, border
+$_tc-badge-matrix: (
+    solid: (
+        normal: (100, $white, 100)
+    ),
+    outline: (
+        normal: ($white, 100, 100)
+    )
+);
+
+$_tc-badge-warning-matrix: (
+    solid: (
+        normal: (100, get-theme-color-var( neutral-160 ), 100)
+    ),
+    outline: (
+        normal: ($white, 100, 100)
+    )
+);
+
+$_tc-badge-dark-matrix: (
+    solid: (
+        normal: (160, $white, 160)
+    ),
+    outline: (
+        normal: ($white, 160, 160)
+    )
+);
+
+$_tc-badge-light-matrix: (
+    solid: (
+        normal: (50, 160, 50)
+    ),
+    outline: (
+        normal: ($white, 50, 50)
+    )
+);
+
+/// Theme colors map for the badge variations.
+$kendo-badge-theme-colors: ();
+
+@each $fill-mode, $ui-states in $_tc-badge-matrix {
+    @each $brand-color, $palette in $kendo-badge-brand-colors {
+        $kendo-badge-theme-colors: map.deep-merge(
+            $kendo-badge-theme-colors,
+            generate-fill-mode-theme-variation( $fill-mode, $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $fill-mode, $ui-states in $_tc-badge-warning-matrix {
+    $kendo-badge-theme-colors: map.deep-merge(
+        $kendo-badge-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, warning, warning, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-badge-dark-matrix {
+    $kendo-badge-theme-colors: map.deep-merge(
+        $kendo-badge-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, dark, neutral, $ui-states )
+    );
+}
+
+@each $fill-mode, $ui-states in $_tc-badge-light-matrix {
+    $kendo-badge-theme-colors: map.deep-merge(
+        $kendo-badge-theme-colors,
+        generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
+    );
+}

package/scss/badge/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "badge",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "badge" ) {
+        @include kendo-badge--layout();
+        @include kendo-badge--theme();
+    }
+}

package/scss/bottom-navigation/_layout.scss

@@ -0,0 +1,130 @@
+@use "../core/_variables.scss" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-bottom-navigation--layout() {
+
+    // Bottom Navigation
+    .k-bottom-nav {
+        padding-block: var( --kendo-bottom-nav-padding-y, #{$kendo-bottom-nav-padding-y} );
+        padding-inline: var( --kendo-bottom-nav-padding-x, #{$kendo-bottom-nav-padding-x} );
+        width: 100%;
+        border-width: 0;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        font-size: var( --kendo-bottom-nav-font-size, #{$kendo-bottom-nav-font-size} );
+        line-height: var( --kendo-bottom-nav-line-height, #{$kendo-bottom-nav-line-height} );
+        font-family: var( --kendo-bottom-nav-font-family, #{$kendo-bottom-nav-font-family} );
+        letter-spacing: var( --kendo-bottom-nav-letter-spacing, #{$kendo-bottom-nav-letter-spacing} );
+        display: flex;
+        flex-flow: row nowrap;
+        white-space: nowrap;
+        gap: var( --kendo-bottom-nav-gap, #{$kendo-bottom-nav-gap} );
+        overflow: hidden;
+        outline: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-bottom-nav-border {
+        border-width: var( --kendo-bottom-nav-border-width, #{$kendo-bottom-nav-border-width} );
+    }
+
+    .k-bottom-nav-shadow {
+        box-shadow: var( --kendo-bottom-nav-shadow, #{$kendo-bottom-nav-shadow} );
+    }
+
+    // Items
+    .k-bottom-nav-item {
+        padding-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
+        padding-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
+        min-width: var( --kendo-bottom-nav-item-min-width, #{$kendo-bottom-nav-item-min-width} );
+        max-width: var( --kendo-bottom-nav-item-max-width, #{$kendo-bottom-nav-item-max-width} );
+        min-height: var( --kendo-bottom-nav-item-min-height, #{$kendo-bottom-nav-item-min-height} );
+        border-width: 0;
+        border-radius: var( --kendo-bottom-nav-item-border-radius, #{$kendo-bottom-nav-item-border-radius} );
+        box-sizing: border-box;
+        position: relative;
+        font: inherit;
+        display: inline-flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+        gap: var( --kendo-bottom-nav-item-gap, #{$kendo-bottom-nav-item-gap} );
+        text-decoration: none;
+        cursor: pointer;
+        color: inherit;
+        background-color: inherit;
+        border-color: inherit;
+        outline: none;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-bottom-nav-item-focus-offset, #{$kendo-bottom-nav-item-focus-offset} );
+            outline-width: var( --kendo-bottom-nav-item-focus-outline-width, #{$kendo-bottom-nav-item-focus-outline-width} );
+            outline-style: var( --kendo-bottom-nav-item-focus-outline-style, #{$kendo-bottom-nav-item-focus-outline-style} );
+            z-index: 1;
+        }
+
+        &:hover {
+            color: inherit;
+            text-decoration: none;
+        }
+
+        > .k-bottom-nav-link {
+            margin-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
+            margin-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
+            padding-block: var( --kendo-bottom-nav-item-padding-y, #{$kendo-bottom-nav-item-padding-y} );
+            padding-inline: var( --kendo-bottom-nav-item-padding-x, #{$kendo-bottom-nav-item-padding-x} );
+            width: 100%;
+            color: inherit;
+            display: flex;
+            flex-flow: row nowrap;
+            flex: 1 0 auto;
+            align-items: center;
+            justify-content: center;
+            outline: 0;
+        }
+    }
+    .k-bottom-nav-item.k-disabled {
+        background-color: initial;
+    }
+
+    .k-bottom-nav-item-icon {
+        font-size: var( --kendo-bottom-nav-item-icon-size, #{$kendo-bottom-nav-item-icon-size} );
+    }
+
+    .k-bottom-nav-item-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    // Horizontal Item Layout
+    .k-bottom-nav-item-flow-horizontal .k-bottom-nav-item {
+        flex-flow: row nowrap;
+    }
+
+    // Vertical Item Layout
+    .k-bottom-nav-item-flow-vertical .k-bottom-nav-item {
+        flex-direction: column;
+    }
+
+    // Positioning
+    .k-bottom-nav.k-pos-fixed {
+        bottom: 0;
+        z-index: 1;
+    }
+
+}