@progress/kendo-theme-core 10.2.0-dev.1 → 10.2.0-dev.3

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

@@ -0,0 +1,122 @@
+@use "../../color-system/_constants.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;
+    }
+
+}
+
+
+@mixin kendo-bottom-navigation--layout() {
+    @include kendo-bottom-navigation--layout-base();
+}

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

@@ -0,0 +1,65 @@
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../mixins/index.import.scss" as *;
+@use "../../functions/index.import.scss" as *;
+@use "../../color-system/_functions.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-bottom-navigation--theme-base() {
+
+    // Solid
+    @each $name, $color in $kendo-theme-colors {
+        .k-bottom-nav-solid-#{$name} {
+            @include fill(
+                $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
+                $bg: $color
+            );
+
+            .k-bottom-nav-item.k-focus,
+            .k-bottom-nav-item:focus {
+                @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
+            }
+
+            .k-bottom-nav-item.k-selected {
+                @include fill( $color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )) );
+            }
+        }
+        // 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-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: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
+            }
+
+            .k-bottom-nav-item.k-selected {
+                @if $name == "secondary" or $name == "light" {
+                    @include fill( $color: if($kendo-enable-color-system, k-color( #{$name} ), k-try-shade($color, 3)) );
+                } @else {
+                    @include fill( $color: $color );
+                }
+            }
+        }
+        .k-bottom-nav-flat.k-bottom-nav-#{$name} {
+            @extend .k-bottom-nav-flat-#{$name} !optional;
+        }
+    }
+
+}
+
+
+@mixin kendo-bottom-navigation--theme() {
+    @include kendo-bottom-navigation--theme-base();
+}

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

@@ -0,0 +1,24 @@
+// BottomNavigation
+
+$kendo-bottom-nav-padding-x: null !default;
+$kendo-bottom-nav-padding-y: null !default;
+$kendo-bottom-nav-gap: null !default;
+$kendo-bottom-nav-border-width: null !default;
+$kendo-bottom-nav-font-family: null !default;
+$kendo-bottom-nav-font-size: null !default;
+$kendo-bottom-nav-line-height: null !default;
+$kendo-bottom-nav-letter-spacing: null !default;
+
+$kendo-bottom-nav-item-padding-x: null !default;
+$kendo-bottom-nav-item-padding-y: null !default;
+$kendo-bottom-nav-item-min-width: null !default;
+$kendo-bottom-nav-item-max-width: null !default;
+$kendo-bottom-nav-item-min-height: null !default;
+$kendo-bottom-nav-item-border-radius: null !default;
+$kendo-bottom-nav-item-gap: null !default;
+
+$kendo-bottom-nav-shadow: null !default;
+
+$kendo-bottom-nav-flat-text: null !default;
+$kendo-bottom-nav-flat-bg: null !default;
+$kendo-bottom-nav-flat-border: null !default;

package/scss/components/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/components/breadcrumb/_layout.scss

@@ -0,0 +1,142 @@
+@use "sass:map";
+@use "../../mixins/index.import.scss" as *;
+@use "../../color-system/_constants.scss" as *;
+@use "../../color-system/_swatch-legacy.scss" as *;
+@use "../../motion/index.import.scss" as *;
+@use "../../_variables.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-breadcrumb--layout-base() {
+
+    // Breadcrumb
+    .k-breadcrumb {
+        margin-block: $kendo-breadcrumb-margin-y;
+        margin-inline: $kendo-breadcrumb-margin-x;
+        padding-block: $kendo-breadcrumb-padding-y;
+        padding-inline: $kendo-breadcrumb-padding-x;
+        border-width: $kendo-breadcrumb-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: $kendo-breadcrumb-font-family;
+        display: flex;
+        flex-direction: row;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Breadcrumb container
+    .k-breadcrumb-container,
+    .k-breadcrumb-root-item-container {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-flow: row nowrap;
+        overflow: hidden;
+    }
+
+    .k-breadcrumb-root-item-container {
+        align-items: flex-start;
+        flex-shrink: 0;
+    }
+
+
+    // Breadcrumb item
+    .k-breadcrumb-item {
+        vertical-align: middle;
+        display: inline-flex;
+        flex-direction: row;
+        flex: none;
+        align-items: center;
+        overflow: hidden;
+    }
+
+
+    // Breadcrumb root item
+    .k-breadcrumb-root-item {
+        flex-shrink: 0;
+    }
+
+
+    // Breadcrumb links
+    .k-breadcrumb-link,
+    .k-breadcrumb-root-link {
+        @include border-radius( $kendo-breadcrumb-link-border-radius );
+        color: $kendo-breadcrumb-link-initial-text;
+        text-decoration: none;
+        white-space: nowrap;
+        outline: none;
+        cursor: pointer;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        align-self: stretch;
+        overflow: hidden;
+        transition: $kendo-transition;
+    }
+
+    .k-breadcrumb-link > .k-image,
+    .k-breadcrumb-icontext-link .k-icon {
+        margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
+    }
+
+
+    // Breadcrumb delimiter
+    .k-breadcrumb-delimiter,
+    .k-breadcrumb-delimiter-icon {
+        color: inherit;
+        opacity: $kendo-disabled-opacity;
+    }
+
+
+    // Editing
+    .k-breadcrumb-input-container {
+        width: 100%;
+
+        .k-breadcrumb-input-container {
+            border-color: transparent;
+        }
+    }
+
+
+    // 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;
+            }
+        }
+    }
+
+}
+
+
+@mixin kendo-breadcrumb--layout() {
+    @include kendo-breadcrumb--layout-base();
+}

package/scss/components/breadcrumb/_theme.scss

@@ -0,0 +1,105 @@
+@use "../../mixins/index.import.scss" as *;
+@use "./variables.scss" as *;
+
+@mixin kendo-breadcrumb--theme-base() {
+
+    // Breadcrumb
+    .k-breadcrumb {
+        @include fill(
+            $kendo-breadcrumb-text,
+            $kendo-breadcrumb-bg,
+            $kendo-breadcrumb-border
+        );
+
+        &:focus,
+        &.k-focus {
+            @include box-shadow( $kendo-breadcrumb-focus-shadow );
+        }
+    }
+
+
+    // Breadcrumb link
+    .k-breadcrumb-link {
+        @include fill(
+            $kendo-breadcrumb-link-text,
+            $kendo-breadcrumb-link-bg,
+            $kendo-breadcrumb-link-border
+        );
+
+        // Hovered state
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-breadcrumb-link-hover-text,
+                $kendo-breadcrumb-link-hover-bg,
+                $kendo-breadcrumb-link-hover-border
+            );
+        }
+
+        // Focused state
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $kendo-breadcrumb-link-focus-text,
+                $kendo-breadcrumb-link-focus-bg,
+                $kendo-breadcrumb-link-focus-border
+            );
+            @include focus-indicator( $kendo-breadcrumb-link-focus-shadow );
+        }
+    }
+
+
+    // Breadcrumb root link
+    .k-breadcrumb-root-link {
+        @include fill(
+            $kendo-breadcrumb-root-link-text,
+            $kendo-breadcrumb-root-link-bg,
+            $kendo-breadcrumb-root-link-border
+        );
+
+        // Hovered state
+        &:hover,
+        &.k-hover {
+            @include fill(
+                $kendo-breadcrumb-root-link-hover-text,
+                $kendo-breadcrumb-root-link-hover-bg,
+                $kendo-breadcrumb-root-link-hover-border
+            );
+        }
+
+        // Focused state
+        &:focus,
+        &.k-focus {
+            @include fill(
+                $kendo-breadcrumb-root-link-focus-text,
+                $kendo-breadcrumb-root-link-focus-bg,
+                $kendo-breadcrumb-root-link-focus-border
+            );
+            @include focus-indicator( $kendo-breadcrumb-root-link-focus-shadow );
+        }
+    }
+
+
+    // Breadcrumb current (last) item
+    .k-breadcrumb-current-item {
+        .k-breadcrumb-link {
+            @include fill(
+                $kendo-breadcrumb-current-item-text,
+                $kendo-breadcrumb-current-item-bg,
+                $kendo-breadcrumb-current-item-border
+            );
+        }
+    }
+
+
+    // Alias
+    .k-breadcrumb-last-item {
+        @extend .k-breadcrumb-current-item !optional;
+    }
+
+}
+
+
+@mixin kendo-breadcrumb--theme() {
+    @include kendo-breadcrumb--theme-base();
+}

package/scss/components/breadcrumb/_variables.scss

@@ -0,0 +1,83 @@
+// Breadcrumb
+
+$kendo-breadcrumb-border-width: null !default;
+
+$kendo-breadcrumb-margin-x: null !default;
+$kendo-breadcrumb-margin-y: null !default;
+$kendo-breadcrumb-padding-x: null !default;
+$kendo-breadcrumb-padding-y: null !default;
+
+$kendo-breadcrumb-font-family: null !default;
+
+$kendo-breadcrumb-font-size: null !default;
+$kendo-breadcrumb-sm-font-size: null !default;
+$kendo-breadcrumb-md-font-size: null !default;
+$kendo-breadcrumb-lg-font-size: null !default;
+
+$kendo-breadcrumb-line-height: null !default;
+$kendo-breadcrumb-sm-line-height: null !default;
+$kendo-breadcrumb-md-line-height: null !default;
+$kendo-breadcrumb-lg-line-height: null !default;
+
+$kendo-breadcrumb-bg: null !default;
+$kendo-breadcrumb-text: null !default;
+$kendo-breadcrumb-border: null !default;
+
+$kendo-breadcrumb-focus-shadow: null !default;
+
+$kendo-breadcrumb-link-padding-x: null !default;
+$kendo-breadcrumb-sm-link-padding-x: null !default;
+$kendo-breadcrumb-md-link-padding-x: null !default;
+$kendo-breadcrumb-lg-link-padding-x: null !default;
+
+$kendo-breadcrumb-link-padding-y: null !default;
+$kendo-breadcrumb-sm-link-padding-y: null !default;
+$kendo-breadcrumb-md-link-padding-y: null !default;
+$kendo-breadcrumb-lg-link-padding-y: null !default;
+
+$kendo-breadcrumb-link-border-radius: null !default;
+
+$kendo-breadcrumb-icon-link-padding-y: null !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: null !default;
+$kendo-breadcrumb-md-icon-link-padding-y: null !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: null !default;
+
+$kendo-breadcrumb-icon-link-padding-x: null !default;
+$kendo-breadcrumb-sm-icon-link-padding-x: null !default;
+$kendo-breadcrumb-md-icon-link-padding-x: null !default;
+$kendo-breadcrumb-lg-icon-link-padding-x: null !default;
+
+$kendo-breadcrumb-link-initial-text: null !default;
+$kendo-breadcrumb-link-icon-spacing: null !default;
+
+$kendo-breadcrumb-link-bg: null !default;
+$kendo-breadcrumb-link-text: null !default;
+$kendo-breadcrumb-link-border: null !default;
+
+$kendo-breadcrumb-link-hover-bg: null !default;
+$kendo-breadcrumb-link-hover-text: null !default;
+$kendo-breadcrumb-link-hover-border: null !default;
+
+$kendo-breadcrumb-link-focus-bg: null !default;
+$kendo-breadcrumb-link-focus-text: null !default;
+$kendo-breadcrumb-link-focus-border: null !default;
+$kendo-breadcrumb-link-focus-shadow: null !default;
+
+$kendo-breadcrumb-root-link-bg: null !default;
+$kendo-breadcrumb-root-link-text: null !default;
+$kendo-breadcrumb-root-link-border: null !default;
+
+$kendo-breadcrumb-root-link-hover-bg: null !default;
+$kendo-breadcrumb-root-link-hover-text: null !default;
+$kendo-breadcrumb-root-link-hover-border: null !default;
+
+$kendo-breadcrumb-root-link-focus-bg: null !default;
+$kendo-breadcrumb-root-link-focus-text: null !default;
+$kendo-breadcrumb-root-link-focus-border: null !default;
+$kendo-breadcrumb-root-link-focus-shadow: null !default;
+
+$kendo-breadcrumb-current-item-bg: null !default;
+$kendo-breadcrumb-current-item-text: null !default;
+$kendo-breadcrumb-current-item-border: null !default;
+
+$kendo-breadcrumb-sizes: null !default;

package/scss/components/button/_index.scss

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