@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/all.scss

@@ -0,0 +1,4 @@
+@forward "./index.scss";
+@use "./index.scss" as *;
+
+@include kendo-theme--styles();

package/scss/appbar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-appbar--styles() {
+    @include import-once( "appbar" ) {
+        @include core-styles();
+        @include kendo-appbar--layout();
+        @include kendo-appbar--theme();
+    }
+}

package/scss/appbar/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *;
+
+
+@mixin kendo-appbar--layout() {
+    @include kendo-appbar--layout-base();
+}

package/scss/appbar/_theme.scss

@@ -0,0 +1,22 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *;
+
+@mixin kendo-appbar--theme() {
+    @include kendo-appbar--theme-base();
+
+    .k-appbar {
+        @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 {
+                    color: k-color(on-#{$name});
+                    background-color: k-translucency-bg(k-elevation-bg(1, k-color(#{$name})));
+                }
+            }
+        }
+    }
+}

package/scss/appbar/_variables.scss

@@ -0,0 +1,69 @@
+@use "../core/_index.scss" as *;
+@use "../core/z-index/index.scss" as *;
+
+
+// AppBar
+
+/// The default theme color of the AppBar.
+/// @group appbar
+/// @role default
+$kendo-appbar-default-theme-color: "base" !default;
+
+/// The horizontal margin of the AppBar.
+/// @group appbar
+$kendo-appbar-margin-x: null !default;
+/// The vertical margin of the AppBar.
+/// @group appbar
+$kendo-appbar-margin-y: null !default;
+/// The horizontal padding of the AppBar.
+/// @group appbar
+$kendo-appbar-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the AppBar.
+/// @group appbar
+$kendo-appbar-padding-y: k-spacing(2.5) !default;
+/// The width of the border around the AppBar.
+/// @group appbar
+$kendo-appbar-border-width: 0px !default;
+/// The border radius of the AppBar.
+/// @group appbar
+$kendo-appbar-border-radius: k-border-radius(xl) !default;
+/// The z-index of the AppBar.
+/// @group appbar
+$kendo-appbar-zindex: k-z-index("banner") !default;
+/// The font family of the AppBar.
+/// @group appbar
+$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the AppBar.
+/// @group appbar
+$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the AppBar.
+/// @group appbar
+$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The spacing between the AppBar sections.
+/// @group appbar
+$kendo-appbar-gap: k-spacing(2) !default;
+
+/// The box shadow of the AppBar.
+/// @group appbar
+$kendo-appbar-box-shadow: k-elevation(1) !default;
+/// The box shadow of the AppBar with bottom position.
+/// @group appbar
+$kendo-appbar-bottom-box-shadow: $kendo-appbar-box-shadow !default;
+
+@forward "@progress/kendo-theme-core/scss/components/appbar/_variables.scss" with (
+    $kendo-appbar-margin-x: $kendo-appbar-margin-x,
+    $kendo-appbar-margin-y: $kendo-appbar-margin-y,
+    $kendo-appbar-padding-x: $kendo-appbar-padding-x,
+    $kendo-appbar-padding-y: $kendo-appbar-padding-y,
+    $kendo-appbar-border-width: $kendo-appbar-border-width,
+    $kendo-appbar-border-radius: $kendo-appbar-border-radius,
+    $kendo-appbar-zindex: $kendo-appbar-zindex,
+    $kendo-appbar-font-family: $kendo-appbar-font-family,
+    $kendo-appbar-font-size: $kendo-appbar-font-size,
+    $kendo-appbar-line-height: $kendo-appbar-line-height,
+    $kendo-appbar-gap: $kendo-appbar-gap,
+    $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow,
+    $kendo-appbar-default-theme-color: $kendo-appbar-default-theme-color
+);

package/scss/autocomplete/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-autocomplete--styles() {
+    @include import-once( "autocomplete" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
+        @include kendo-popup--styles();
+        @include kendo-list--styles();
+        @include kendo-icon--styles();
+        @include kendo-autocomplete--layout();
+        @include kendo-autocomplete--theme();
+    }
+}

package/scss/autocomplete/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *;
+
+
+@mixin kendo-autocomplete--layout() {
+    @include kendo-autocomplete--layout-base();
+}

package/scss/autocomplete/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *;
+
+
+@mixin kendo-autocomplete--theme() {
+    @include kendo-autocomplete--theme-base();
+}

package/scss/autocomplete/_variables.scss

@@ -0,0 +1 @@
+// Autocomplete

package/scss/avatar/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-avatar--styles() {
+    @include import-once( "avatar" ) {
+        @include core-styles();
+        @include kendo-avatar--layout();
+        @include kendo-avatar--theme();
+    }
+}

package/scss/avatar/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *;
+
+
+@mixin kendo-avatar--layout() {
+    @include kendo-avatar--layout-base();
+}

package/scss/avatar/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *;
+
+
+@mixin kendo-avatar--theme() {
+    @include kendo-avatar--theme-base();
+}

package/scss/avatar/_variables.scss

@@ -0,0 +1,62 @@
+@use "../core/_index.scss" as *;
+// Avatar
+
+/// The default theme color of the Avatar.
+/// @group avatar
+/// @role default
+$kendo-avatar-default-theme-color: "primary" !default;
+/// The default fill mode of the Avatar.
+/// @group avatar
+/// @role default
+$kendo-avatar-default-fill-mode: "solid" !default;
+/// The default roundness of the Avatar.
+/// @group avatar
+/// @role default
+$kendo-avatar-default-roundness: "full" !default;
+/// The default size of the Avatar.
+/// @group avatar
+/// @role default
+$kendo-avatar-default-size: "md" !default;
+
+/// The border width of the Avatar.
+/// @group avatar
+$kendo-avatar-border-width: 1px !default;
+
+/// The border radius of the Avatar.
+/// @group avatar
+$kendo-avatar-border-radius: null !default;
+
+/// The font family of the Avatar.
+/// @group avatar
+$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Avatar.
+/// @group avatar
+$kendo-avatar-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The line height of the Avatar.
+/// @group avatar
+$kendo-avatar-line-height: var( --kendo-line-height-xs, normal ) !default;
+
+/// The small size of the Avatar.
+/// @group avatar
+$kendo-avatar-sm-size: k-spacing(6) !default;
+/// The medium size of the Avatar.
+/// @group avatar
+$kendo-avatar-md-size: k-spacing(8) !default;
+/// The large size of the Avatar.
+/// @group avatar
+$kendo-avatar-lg-size: k-spacing(12) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (
+    $kendo-avatar-default-theme-color: $kendo-avatar-default-theme-color,
+    $kendo-avatar-default-fill-mode: $kendo-avatar-default-fill-mode,
+    $kendo-avatar-default-roundness: $kendo-avatar-default-roundness,
+    $kendo-avatar-default-size: $kendo-avatar-default-size,
+    $kendo-avatar-border-width: $kendo-avatar-border-width,
+    $kendo-avatar-border-radius: $kendo-avatar-border-radius,
+    $kendo-avatar-font-family: $kendo-avatar-font-family,
+    $kendo-avatar-font-size: $kendo-avatar-font-size,
+    $kendo-avatar-line-height: $kendo-avatar-line-height,
+    $kendo-avatar-sm-size: $kendo-avatar-sm-size,
+    $kendo-avatar-md-size: $kendo-avatar-md-size,
+    $kendo-avatar-lg-size: $kendo-avatar-lg-size
+);

package/scss/badge/_index.scss

@@ -0,0 +1,18 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-badge--styles() {
+    @include import-once( "badge" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-badge--layout();
+        @include kendo-badge--theme();
+    }
+}

package/scss/badge/_layout.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *;
+
+
+@mixin kendo-badge--layout() {
+    @include kendo-badge--layout-base();
+}

package/scss/badge/_theme.scss

@@ -0,0 +1,6 @@
+@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *;
+
+
+@mixin kendo-badge--theme() {
+    @include kendo-badge--theme-base();
+}

package/scss/badge/_variables.scss

@@ -0,0 +1,110 @@
+@use "../core/_index.scss" as *;
+
+// Badge
+
+/// The default theme color of the Badge.
+/// @group badge
+/// @role default
+$kendo-badge-default-theme-color: "primary" !default;
+/// The default fill mode of the Badge.
+/// @group badge
+/// @role default
+$kendo-badge-default-fill-mode: "solid" !default;
+/// The default size of the Badge.
+/// @group badge
+/// @role default
+$kendo-badge-default-size: "md" !default;
+/// The default roundness of the Badge.
+/// @group badge
+/// @role default
+$kendo-badge-default-roundness: "md" !default;
+
+/// The width of the border around the Badge.
+/// @group badge
+$kendo-badge-border-width: 1px !default;
+
+/// The horizontal padding of the small Badge.
+/// @group badge
+$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
+/// The horizontal padding of the medium Badge.
+/// @group badge
+$kendo-badge-md-padding-x: k-spacing(1) !default;
+/// The horizontal padding of the large Badge.
+/// @group badge
+$kendo-badge-lg-padding-x: k-spacing(1.5) !default;
+
+/// The vertical padding of the small Badge.
+/// @group badge
+$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
+/// The vertical padding of the medium Badge.
+/// @group badge
+$kendo-badge-md-padding-y: k-spacing(1) !default;
+/// The vertical padding of the large Badge.
+/// @group badge
+$kendo-badge-lg-padding-y: k-spacing(1.5) !default;
+
+/// The font sizes of the Badge.
+/// @group badge
+$kendo-badge-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The font size of the small Badge.
+/// @group badge
+$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The font size of the medium Badge.
+/// @group badge
+$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The font size of the large Badge.
+/// @group badge
+$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
+
+/// The line heights used along with the $kendo-font-size variable.
+/// @group badge
+$kendo-badge-line-height: 1 !default;
+/// The line height used along with the $kendo-font-size variable of the small Badge.
+/// @group badge
+$kendo-badge-sm-line-height: $kendo-badge-line-height !default;
+/// The line height used along with the $kendo-font-size variable of the medium Badge.
+/// @group badge
+$kendo-badge-md-line-height: $kendo-badge-line-height !default;
+/// The line height used along with the $kendo-font-size variable of the large Badge.
+/// @group badge
+$kendo-badge-lg-line-height: $kendo-badge-line-height !default;
+
+/// The calculated minimum width of the circular Badge.
+/// @group badge
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 )) !default;
+/// The calculated minimum width of the small circular Badge.
+/// @group badge
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
+/// The calculated minimum width of the medium circular Badge.
+/// @group badge
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
+/// The calculated minimum width of the large circular Badge.
+/// @group badge
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
+
+
+@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
+    $kendo-badge-default-theme-color: $kendo-badge-default-theme-color,
+    $kendo-badge-default-fill-mode: $kendo-badge-default-fill-mode,
+    $kendo-badge-default-size: $kendo-badge-default-size,
+    $kendo-badge-default-roundness: $kendo-badge-default-roundness,
+    $kendo-badge-border-width: $kendo-badge-border-width,
+    $kendo-badge-sm-padding-x: $kendo-badge-sm-padding-x,
+    $kendo-badge-md-padding-x: $kendo-badge-md-padding-x,
+    $kendo-badge-lg-padding-x: $kendo-badge-lg-padding-x,
+    $kendo-badge-sm-padding-y: $kendo-badge-sm-padding-y,
+    $kendo-badge-md-padding-y: $kendo-badge-md-padding-y,
+    $kendo-badge-lg-padding-y: $kendo-badge-lg-padding-y,
+    $kendo-badge-font-size: $kendo-badge-font-size,
+    $kendo-badge-sm-font-size: $kendo-badge-sm-font-size,
+    $kendo-badge-md-font-size: $kendo-badge-md-font-size,
+    $kendo-badge-lg-font-size: $kendo-badge-lg-font-size,
+    $kendo-badge-line-height: $kendo-badge-line-height,
+    $kendo-badge-sm-line-height: $kendo-badge-sm-line-height,
+    $kendo-badge-md-line-height: $kendo-badge-md-line-height,
+    $kendo-badge-lg-line-height: $kendo-badge-lg-line-height,
+    $kendo-badge-min-width: $kendo-badge-min-width,
+    $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
+    $kendo-badge-md-min-width: $kendo-badge-md-min-width,
+    $kendo-badge-lg-min-width: $kendo-badge-lg-min-width
+);

package/scss/bottom-navigation/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-bottom-navigation--styles() {
+    @include import-once( "bottom-navigation" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-bottom-navigation--layout();
+        @include kendo-bottom-navigation--theme();
+        @include kendo-utils--layout--position();
+    }
+}

package/scss/bottom-navigation/_layout.scss

@@ -0,0 +1,11 @@
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-bottom-navigation--layout() {
+    @include kendo-bottom-navigation--layout-base();
+
+    .k-bottom-nav-item {
+        transition: background-color k-transition(emphasis), color k-transition(emphasis), font-weight k-transition(emphasis), outline k-transition(emphasis);
+    }
+}

package/scss/bottom-navigation/_theme.scss

@@ -0,0 +1,70 @@
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-bottom-navigation--theme() {
+    @include kendo-bottom-navigation--theme-base();
+
+    .k-bottom-nav {
+        backdrop-filter: k-translucency-blur(2);
+
+        .k-bottom-nav-item.k-focus,
+        .k-bottom-nav-item:focus {
+            @include focus-indicator(
+                $indicator: currentColor,
+                $type: "outline",
+                $outline-width: $kendo-bottom-nav-item-focus-outline-width,
+                $outline-offset: $kendo-bottom-nav-item-focus-outline-offset
+            );
+        }
+        // Fillmodes: solid, flat - focus state
+        @each $fill in ("solid", "flat") {
+            #{k-when-default($kendo-bottom-nav-default-fill-mode, $fill)}
+            &.k-bottom-nav-#{$fill} {
+                @each $name in $kendo-bottom-navigation-theme-colors {
+                    #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
+                    &.k-bottom-nav-#{$name} {
+                        .k-bottom-nav-item.k-focus,
+                        .k-bottom-nav-item:focus {
+                            background-color: transparent;
+                        }
+                    }
+                }
+            }
+        }
+
+        // Fillmode: solid
+        #{k-when-default($kendo-bottom-nav-default-fill-mode, "solid")}
+        &.k-bottom-nav-solid {
+            @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: k-color(on-#{$name}),
+                        $bg: k-translucency-bg(k-color(#{$name}))
+                    );
+
+                    .k-bottom-nav-item.k-selected {
+                        @include fill( $bg: color-mix(in srgb, k-color(#{$name}-subtle-active) 70%, transparent), $color: k-color(#{$name}-on-subtle));
+
+                    }
+                }
+            }
+        }
+
+        // Fillmode: flat
+        #{k-when-default($kendo-bottom-nav-default-fill-mode, "flat")}
+        &.k-bottom-nav-flat {
+            @each $name in $kendo-bottom-navigation-theme-colors {
+                #{k-when-default($kendo-bottom-nav-default-theme-color, $name)}
+                &.k-bottom-nav-#{$name} {
+                    .k-bottom-nav-item.k-selected {
+                        @include fill( $bg: k-color(#{$name}-subtle-active), $color: k-color(#{$name}-on-subtle));
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/bottom-navigation/_variables.scss

@@ -0,0 +1,109 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
+// BottomNavigation
+
+/// The default theme color of the BottomNavigation.
+/// @group bottom-navigation
+/// @role default
+$kendo-bottom-nav-default-theme-color: "primary" !default;
+/// The default fill mode of the BottomNavigation.
+/// @group bottom-navigation
+/// @role default
+$kendo-bottom-nav-default-fill-mode: "flat" !default;
+
+/// The horizontal padding of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-padding-x: k-spacing(2.5) !default;
+/// The vertical padding of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
+/// The spacing between the BottomNavigation items.
+/// @group bottom-navigation
+$kendo-bottom-nav-gap: k-spacing(2) !default;
+/// The width of the border around the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
+/// The border radius of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-border-radius: k-border-radius(xl) !default;
+/// The font family of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-line-height: 1 !default;
+/// The letter spacing of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-letter-spacing: var( --kendo-letter-spacing-normal, normal ) !default;
+
+/// The horizontal padding of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
+/// The vertical padding of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
+/// The minimum width of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-min-width: 72px !default;
+/// The maximum width of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-max-width: null !default;
+/// The minimum height of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-min-height: 48px !default;
+/// The border radius of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
+/// The spacing of the BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;
+
+/// The box shadow of the BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-shadow: k-elevation(4) !default;
+
+/// The text color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-text: k-color(on-app-surface) !default;
+/// The background color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-bg: k-translucency-bg(k-elevation-bg(1, k-color(surface-alt))) !default;
+/// The border color of the flat BottomNavigation.
+/// @group bottom-navigation
+$kendo-bottom-nav-flat-border: k-color(border) !default;
+
+/// The outline width of the focused BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-focus-outline-width: 1px !default;
+/// The outline offset of the focused BottomNavigation item.
+/// @group bottom-navigation
+$kendo-bottom-nav-item-focus-outline-offset: 1px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/bottom-navigation/_variables.scss" with (
+    $kendo-bottom-nav-default-theme-color: $kendo-bottom-nav-default-theme-color,
+    $kendo-bottom-nav-default-fill-mode: $kendo-bottom-nav-default-fill-mode,
+    $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
+    $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y,
+    $kendo-bottom-nav-gap: $kendo-bottom-nav-gap,
+    $kendo-bottom-nav-border-width: $kendo-bottom-nav-border-width,
+    $kendo-bottom-nav-border-radius: $kendo-bottom-nav-border-radius,
+    $kendo-bottom-nav-font-family: $kendo-bottom-nav-font-family,
+    $kendo-bottom-nav-font-size: $kendo-bottom-nav-font-size,
+    $kendo-bottom-nav-line-height: $kendo-bottom-nav-line-height,
+    $kendo-bottom-nav-letter-spacing: $kendo-bottom-nav-letter-spacing,
+    $kendo-bottom-nav-item-padding-x: $kendo-bottom-nav-item-padding-x,
+    $kendo-bottom-nav-item-padding-y: $kendo-bottom-nav-item-padding-y,
+    $kendo-bottom-nav-item-min-width: $kendo-bottom-nav-item-min-width,
+    $kendo-bottom-nav-item-max-width: $kendo-bottom-nav-item-max-width,
+    $kendo-bottom-nav-item-min-height: $kendo-bottom-nav-item-min-height,
+    $kendo-bottom-nav-item-border-radius: $kendo-bottom-nav-item-border-radius,
+    $kendo-bottom-nav-item-gap: $kendo-bottom-nav-item-gap,
+    $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
+    $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
+    $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+);

package/scss/breadcrumb/_index.scss

@@ -0,0 +1,23 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-breadcrumb--styles() {
+    @include import-once( "breadcrumb" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-icon--styles();
+        @include kendo-breadcrumb--layout();
+        @include kendo-breadcrumb--theme();
+        @include kendo-utils--flex-grid--flex();
+        @include kendo-utils--flex-grid--flex-wrap();
+    }
+}

package/scss/breadcrumb/_layout.scss

@@ -0,0 +1,12 @@
+@use "@progress/kendo-theme-core/scss/components/breadcrumb/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-breadcrumb--layout() {
+    @include kendo-breadcrumb--layout-base();
+
+    .k-breadcrumb-link,
+    .k-breadcrumb-root-link {
+        transition: color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid);
+    }
+}