@progress/kendo-theme-default 10.2.0-dev.1 → 10.2.0-dev.2

package/scss/appbar/_layout.scss

@@ -1,118 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-appbar--layout-base() {
-
-    // Appbar
-    .k-appbar {
-        margin-block: $kendo-appbar-margin-y;
-        margin-inline: $kendo-appbar-margin-x;
-        padding-block: $kendo-appbar-padding-y;
-        padding-inline: $kendo-appbar-padding-x;
-        border-width: $kendo-appbar-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-appbar-font-family;
-        font-size: $kendo-appbar-font-size;
-        line-height: $kendo-appbar-line-height;
-        list-style: none;
-        display: flex;
-        gap: $kendo-appbar-gap;
-        flex-flow: row wrap;
-        align-items: center;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        > * {
-            flex-shrink: 0;
-        }
-
-        // Appbar section
-        .k-appbar-section {
-            display: inline-flex;
-            flex-wrap: nowrap;
-            align-items: center;
-        }
-
-
-        // Appbar Spacer
-        .k-appbar-spacer {
-            flex: 1 0 auto;
-        }
-        .k-appbar-spacer-sized {
-            flex-grow: 0;
-        }
-
-
-        // Separator
-        .k-appbar-separator {
-            margin: 0;
-            width: 0;
-            min-height: 1em;
-            border-style: solid;
-            border-width: 0 0 0 1px;
-            display: inline-block;
-        }
-
-
-        // Input
-        .k-input,
-        .k-picker {
-            width: 10em;
-        }
-        .k-color-picker {
-            width: min-content;
-        }
-
-    }
-
-
-    // Static appbar
-    .k-appbar-static {
-        position: static;
-    }
-
-
-    // Sticky appbar
-    .k-appbar-sticky {
-        width: 100%;
-        position: sticky;
-        top: 0;
-        z-index: $kendo-appbar-zindex;
-    }
-
-
-    // Fixed appbar
-    .k-appbar-fixed {
-        width: 100%;
-        position: fixed;
-        z-index: 1;
-    }
-
-
-    // Appbar position
-    .k-appbar-top {
-        top: 0;
-        bottom: auto;
-    }
-    .k-appbar-bottom {
-        top: auto;
-        bottom: 0;
-
-        &.k-appbar-fixed {
-            bottom: 0;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/appbar/_layout.scss" as *;
 
 
 @mixin kendo-appbar--layout() {

package/scss/appbar/_theme.scss

@@ -1,34 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-appbar--theme-base() {
-
-    .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-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: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-                background-color: $color;
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/appbar/_theme.scss" as *;
 
 
 @mixin kendo-appbar--theme() {

package/scss/appbar/_variables.scss

@@ -55,3 +55,22 @@ $kendo-appbar-box-shadow: k-elevation(4) !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-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-light-bg: $kendo-appbar-light-bg,
+    $kendo-appbar-light-text: $kendo-appbar-light-text,
+    $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
+    $kendo-appbar-dark-text: $kendo-appbar-dark-text,
+    $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+);

package/scss/autocomplete/_layout.scss

@@ -1,9 +1,4 @@
-@mixin kendo-autocomplete--layout-base() {
-
-    // Autocomplete
-    .k-autocomplete {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/autocomplete/_layout.scss" as *;
 
 
 @mixin kendo-autocomplete--layout() {

package/scss/autocomplete/_theme.scss

@@ -1,9 +1,4 @@
-@mixin kendo-autocomplete--theme-base() {
-
-    // Autocomplete
-    .k-autocomplete {}
-
-}
+@use "@progress/kendo-theme-core/scss/components/autocomplete/_theme.scss" as *;
 
 
 @mixin kendo-autocomplete--theme() {

package/scss/avatar/_layout.scss

@@ -1,81 +1,4 @@
-@use "./_variables.scss" as *;
-
-@mixin kendo-avatar--layout-base() {
-
-    // Avatar
-    .k-avatar {
-        border-width: 0;
-        border-style: solid;
-        box-sizing: border-box;
-        vertical-align: middle;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        overflow: hidden;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-
-    // Avatar text
-    .k-avatar-text,
-    .k-avatar-initials {
-        font-size: $kendo-avatar-font-size;
-        font-family: $kendo-avatar-font-family;
-        line-height: $kendo-avatar-line-height;
-    }
-
-
-    // Avatar icon
-    .k-avatar-icon {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-    }
-
-
-    // Avatar image
-    .k-avatar-image {
-        width: 100%;
-        height: 100%;
-        background-position: center;
-        background-size: cover;
-        background-repeat: no-repeat;
-
-        > img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            vertical-align: top;
-        }
-    }
-
-
-    // Sizes
-    @each $name, $size in $kendo-avatar-sizes {
-        .k-avatar-#{$name} {
-            width: $size;
-            height: $size;
-            flex-basis: $size;
-        }
-    }
-
-    // Shapes
-    .k-avatar-square {}
-
-    // Bordered
-    .k-avatar-bordered {
-        border-width: $kendo-avatar-border-width;
-    }
-
-
-}
+@use "@progress/kendo-theme-core/scss/components/avatar/_layout.scss" as *;
 
 
 @mixin kendo-avatar--layout() {

package/scss/avatar/_theme.scss

@@ -1,30 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-@use "./_variables.scss" as *;
-
-@mixin kendo-avatar--theme-base() {
-
-    // Solid Avatars
-    @each $name, $color in $kendo-avatar-theme-colors {
-        .k-avatar-solid-#{$name} {
-            border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            background-color: $color;
-        }
-    }
-
-    // Outline avatars
-    .k-avatar-outline {
-        border-color: currentColor;
-    }
-
-    @each $name, $color in $kendo-avatar-theme-colors {
-        .k-avatar-outline-#{$name} {
-            color: $color;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/avatar/_theme.scss" as *;
 
 
 @mixin kendo-avatar--theme() {

package/scss/avatar/_variables.scss

@@ -26,3 +26,12 @@ $kendo-avatar-sizes: (
 /// The theme colors map of the Avatar.
 /// @group avatar
 $kendo-avatar-theme-colors: $kendo-theme-colors !default;
+
+@forward "@progress/kendo-theme-core/scss/components/avatar/_variables.scss" with (
+    $kendo-avatar-border-width: $kendo-avatar-border-width,
+    $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-sizes: $kendo-avatar-sizes,
+    $kendo-avatar-theme-colors: $kendo-avatar-theme-colors
+);

package/scss/badge/_layout.scss

@@ -1,152 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./_variables.scss" as *;
-@use "sass:map";
-
-@mixin kendo-badge--layout-base() {
-
-    .k-badge {
-        padding: 0;
-        border-width: $kendo-badge-border-width;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        color: inherit;
-        background-color: transparent;
-        font: inherit;
-        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} {
-            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;
-    }
-
-    // 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 $kendo-component-bg;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/badge/_layout.scss" as *;
 
 
 @mixin kendo-badge--layout() {

package/scss/badge/_theme.scss

@@ -1,30 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "../core/functions/index.import.scss" as *;
-
-@mixin kendo-badge--theme-base() {
-
-    // Solid badges
-    @each $name, $color in $kendo-theme-colors {
-        .k-badge-solid-#{$name} {
-            border-color: $color;
-            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            background-color: $color;
-        }
-    }
-
-    // Outline badges
-    .k-badge-outline {
-        border-color: currentColor;
-        background-color: transparent;
-    }
-
-    @each $name, $color in $kendo-theme-colors {
-        .k-badge-outline-#{$name} {
-            color: $color;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/badge/_theme.scss" as *;
 
 
 @mixin kendo-badge--theme() {

package/scss/badge/_variables.scss

@@ -101,3 +101,29 @@ $kendo-badge-sizes: (
         min-width: $kendo-badge-lg-min-width
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/badge/_variables.scss" with (
+    $kendo-badge-border-width: $kendo-badge-border-width,
+    $kendo-badge-border-radius: $kendo-badge-border-radius,
+    $kendo-badge-padding-x: $kendo-badge-padding-x,
+    $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-padding-y: $kendo-badge-padding-y,
+    $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,
+    $kendo-badge-sizes: $kendo-badge-sizes
+);

package/scss/bottom-navigation/_layout.scss

@@ -1,120 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-
-@mixin kendo-bottom-navigation--layout-base() {
-
-    // Bottom Navigation
-    .k-bottom-nav {
-        padding-block: $kendo-bottom-nav-padding-y;
-        padding-inline: $kendo-bottom-nav-padding-x;
-        width: 100%;
-        border-width: 0;
-        border-style: solid;
-        border-color: transparent;
-        box-sizing: border-box;
-        font-size: $kendo-bottom-nav-font-size;
-        line-height: $kendo-bottom-nav-line-height;
-        font-family: $kendo-bottom-nav-font-family;
-        letter-spacing: $kendo-bottom-nav-letter-spacing;
-        display: flex;
-        flex-flow: row nowrap;
-        white-space: nowrap;
-        gap: $kendo-bottom-nav-gap;
-        overflow: hidden;
-        outline: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-    }
-
-    .k-bottom-nav-border {
-        border-width: $kendo-bottom-nav-border-width;
-    }
-
-    // TODO: do we even use this?
-    .k-bottom-nav-shadow {
-        box-shadow: $kendo-bottom-nav-shadow;
-    }
-
-    // Items
-    .k-bottom-nav-item {
-        padding-block: $kendo-bottom-nav-item-padding-y;
-        padding-inline: $kendo-bottom-nav-item-padding-x;
-        min-width: $kendo-bottom-nav-item-min-width;
-        max-width: $kendo-bottom-nav-item-max-width;
-        min-height: $kendo-bottom-nav-item-min-height;
-        border-width: 0;
-        border-radius: $kendo-bottom-nav-item-border-radius;
-        box-sizing: border-box;
-        font: inherit;
-        display: inline-flex;
-        flex: 1 1 auto;
-        align-items: center;
-        justify-content: center;
-        gap: $kendo-bottom-nav-item-gap;
-        text-decoration: none;
-        cursor: pointer;
-        color: inherit;
-        background-color: inherit;
-        border-color: inherit;
-        outline: none;
-
-        &:focus {
-            outline: none;
-        }
-
-        &:hover {
-            color: inherit;
-            text-decoration: none;
-        }
-
-        > .k-bottom-nav-link {
-            margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 );
-            margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 );
-            padding-block: $kendo-bottom-nav-item-padding-y;
-            padding-inline: $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-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;
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/bottom-navigation/_layout.scss" as *;
 
 
 @mixin kendo-bottom-navigation--layout() {