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

package/scss/toolbar/_layout.scss

@@ -1,355 +1,4 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../button/_variables.scss" as *;
-@use "../icons/_variables.scss" as *;
-
-@mixin kendo-toolbar--layout-base() {
-
-    // Base
-    .k-toolbar {
-        margin: 0;
-        padding-block: $kendo-toolbar-padding-y;
-        padding-inline: $kendo-toolbar-padding-x;
-        border-width: $kendo-toolbar-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $kendo-toolbar-font-family;
-        font-size: $kendo-toolbar-font-size;
-        line-height: $kendo-toolbar-line-height;
-        list-style: none;
-        display: flex;
-        flex-flow: row wrap;
-        gap: $kendo-toolbar-spacing;
-        align-items: center;
-        justify-content: flex-start;
-        position: relative;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        // Remove once we decide to not size empty containers
-        &::before {
-            content: "";
-            height: $kendo-button-calc-size;
-        }
-
-        &.k-toolbar-resizable {
-            flex-wrap: nowrap;
-        }
-
-        &.k-toolbar-scrollable {
-            flex-wrap: nowrap;
-            position: relative;
-        }
-
-        &.k-toolbar-scrollable-overlay {
-
-            &::before,
-            &::after {
-                content: '';
-                height: 100%;
-                aspect-ratio: 1;
-                position: absolute;
-                z-index: 3;
-            }
-
-            &::before {
-                inset-inline-start: 0;
-            }
-
-            &::after {
-                inset-inline-end: 0;
-            }
-
-            &.k-toolbar-scrollable-start::before,
-            &.k-toolbar-scrollable-end::after {
-                display: none;
-            }
-        }
-
-        > * {
-            flex-shrink: 0;
-            display: inline-flex;
-            align-content: center;
-            vertical-align: middle;
-
-            > label {
-                margin-inline-end: $kendo-toolbar-spacing;
-                align-self: center;
-            }
-        }
-
-
-        // Button
-        .k-button {}
-
-
-        // Toggle button
-        .k-toggle-button {}
-
-
-        // Button group
-        .k-button-group {}
-
-
-        // Split button
-        .k-split-button {}
-
-
-        // Input
-        .k-input,
-        .k-picker {
-            width: $kendo-toolbar-input-width;
-        }
-        .k-color-picker {
-            width: min-content;
-        }
-
-
-        // Overflow anchor
-        .k-toolbar-overflow-button {
-            margin-inline-start: auto;
-        }
-
-        // Overflow separator
-        .k-toolbar-button-separator {
-            height: $kendo-toolbar-separator-height;
-            margin-inline-start: auto;
-
-            + .k-toolbar-overflow-button {
-                margin-inline-start: 0;
-            }
-        }
-
-        // Spacer
-        .k-toolbar-spacer {
-            height: $kendo-line-height-em;
-            flex: 1 0 0%;
-        }
-
-
-        // Template item
-        .k-toolbar-item:focus,
-        .k-toolbar-item.k-focus {
-            text-decoration: none;
-            outline: 0;
-        }
-    }
-
-    // Separator
-    .k-toolbar .k-separator,
-    .k-toolbar-separator {
-        width: 0;
-        height: $kendo-line-height-em;
-        border-width: 0 0 0 1px;
-        border-style: solid;
-        align-self: center;
-    }
-
-    .k-toolbar-items {
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $kendo-toolbar-spacing;
-        align-items: center;
-        justify-content: flex-start;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-    .k-toolbar-items-scroll {
-        overflow-x: auto;
-        scrollbar-width: none;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-    }
-
-    .k-toolbar-items-list {
-        display: flex;
-        flex-flow: row wrap;
-        gap: $kendo-toolbar-spacing;
-        align-items: center;
-        justify-content: flex-start;
-        flex: 1 1 auto;
-        overflow: hidden;
-    }
-
-    // Outline Toolbar
-    .k-toolbar-outline {
-        border-width: $kendo-toolbar-outline-border-width;
-        background: none;
-    }
-
-    // Flat Toolbar
-    .k-toolbar-flat {
-        border-top-color: transparent !important; // stylelint-disable-line declaration-no-important
-        border-inline-color: transparent !important; // stylelint-disable-line declaration-no-important
-        background: none !important;  // stylelint-disable-line declaration-no-important
-    }
-
-
-    // Toolbar group
-    .k-toolbar-group {
-        display: flex;
-        flex-direction: inherit;
-        flex-wrap: nowrap;
-        gap: inherit;
-    }
-
-
-    // Toolbar sizes
-    @each $size, $size-props in $kendo-toolbar-sizes {
-        $_padding-x: map.get( $size-props, padding-x );
-        $_padding-y: map.get( $size-props, padding-y );
-        $_spacing: map.get( $size-props, spacing );
-        $_separator-height: map.get( $size-props, separator-height );
-
-        .k-toolbar-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            gap: $_spacing;
-
-            // Remove once we decide to not size empty containers
-            &::before {
-                margin-inline-start: calc( #{$_spacing} * -1 );
-            }
-
-            &.k-toolbar-scrollable-overlay::before {
-                inset-inline-start: $_spacing;
-            }
-
-            > * > label {
-                margin-inline-end: $_spacing;
-            }
-
-            .k-toolbar-items {
-                gap: $_spacing;
-            }
-
-            .k-toolbar-button-separator {
-                height: $_separator-height;
-            }
-
-        }
-
-        .k-toolbar-items-list-#{$size} {
-            padding-block: $_padding-y;
-            padding-inline: $_padding-x;
-            gap: $_spacing;
-        }
-    }
-
-    // Remove once we decide to not size empty containers
-    .k-toolbar-sm::before {
-        height: $kendo-button-sm-calc-size;
-    }
-    .k-toolbar-md::before {
-        height: $kendo-button-md-calc-size;
-    }
-    .k-toolbar-lg::before {
-        height: $kendo-button-lg-calc-size;
-    }
-
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content { // stylelint-disable-line
-        padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important
-        padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important
-        border-width: $kendo-toolbar-border-width;
-        border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: $kendo-toolbar-md-spacing;
-        align-items: center;
-
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
-        }
-    }
-    .k-editortoolbar-dragHandle { // stylelint-disable-line
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
-    }
-
-
-
-    // Remove once the Overflow Popup uses
-    // the proper Menu rendering in all suites.
-
-    // Overflow container
-    .k-overflow-container {
-        font-size: $kendo-toolbar-overflow-container-font-size;
-        line-height: $kendo-toolbar-overflow-container-line-height;
-
-        > .k-item {
-            border-color: inherit;
-        }
-
-        .k-separator {
-            margin: k-spacing(1) 0;
-        }
-
-        // Group
-        .k-overflow-tool-group {
-            display: block;
-        }
-
-        // Button
-        .k-overflow-button {
-            padding-block: $kendo-toolbar-overflow-button-padding-y;
-            padding-inline: $kendo-toolbar-overflow-button-padding-x;
-            width: 100%;
-            height: auto;
-            border-width: 0;
-            border-radius: 0;
-            aspect-ratio: auto;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-            font: inherit;
-            cursor: pointer;
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            align-content: center;
-            gap: $kendo-icon-spacing;
-            justify-content: flex-start;
-            position: relative;
-        }
-
-        // Button group
-        .k-button-group {
-            @include box-shadow( none );
-            display: flex;
-            flex-flow: column nowrap;
-
-            .k-button {
-                margin: if( $kendo-button-border-width == 0, null, 0);
-            }
-        }
-
-        // Split button
-        .k-split-button {
-            display: flex;
-            flex-direction: column;
-        }
-
-        // Hidden items
-        .k-overflow-hidden {
-            display: none;
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/toolbar/_layout.scss" as *;
 
 
 @mixin kendo-toolbar--layout() {

package/scss/toolbar/_theme.scss

@@ -1,195 +1,4 @@
-@use "../core/_index.scss" as *;
-@use "./variables.scss" as *;
-@use "../menu/_variables.scss" as *;
-
-@mixin kendo-toolbar--theme-base() {
-
-    // Theme
-    .k-toolbar {
-        // Template item
-        .k-toolbar-item:focus,
-        .k-toolbar-item.k-focus {
-            @include focus-indicator( $kendo-toolbar-item-shadow );
-        }
-
-
-        // Button group
-        .k-button-group {}
-
-    }
-
-    .k-toolbar-items {
-        border-color: inherit;
-    }
-
-    // Separator
-    .k-toolbar .k-separator,
-    .k-toolbar-separator {
-        border-color: $kendo-toolbar-separator-border;
-    }
-
-    // Solid Toolbar
-    .k-toolbar-solid {
-        @include fill(
-            $kendo-toolbar-text,
-            $kendo-toolbar-bg,
-            $kendo-toolbar-border,
-            $kendo-toolbar-gradient
-        );
-        @include box-shadow( $kendo-toolbar-shadow );
-
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
-            }
-
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
-            }
-        }
-    }
-
-    .k-toolbar-items-list-solid {
-        border-color: $kendo-toolbar-border;
-    }
-
-    // Outline Toolbar
-    .k-toolbar-outline {
-        @include fill(
-            $color: $kendo-toolbar-outline-text,
-            $border: $kendo-toolbar-outline-border
-        );
-        @include box-shadow( $kendo-toolbar-outline-shadow );
-
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
-            }
-
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
-            }
-        }
-    }
-
-    .k-toolbar-items-list-outline {
-        border-color: $kendo-toolbar-outline-border;
-    }
-
-    // Flat Toolbar
-    .k-toolbar-flat {
-        @include fill(
-            $color: $kendo-toolbar-flat-text,
-            $border: $kendo-toolbar-flat-border
-        );
-        @include box-shadow( $kendo-toolbar-flat-shadow );
-
-
-        > .k-separator,
-        .k-toolbar-separator {
-            border-inline-color: $kendo-toolbar-flat-border;
-        }
-
-        &.k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
-            }
-
-            &::after {
-                background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
-            }
-        }
-    }
-
-    .k-toolbar-items-list-flat {
-        border-color: $kendo-toolbar-flat-border;
-    }
-
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content { // stylelint-disable-line
-        @include fill(
-            $kendo-toolbar-text,
-            $kendo-toolbar-bg,
-            $kendo-toolbar-border,
-            $kendo-toolbar-gradient
-        );
-    }
-
-    // Overflow container
-    .k-overflow-container {
-
-        .k-button {
-
-            // Hover state
-            &:hover,
-            &.k-hover {
-                color: $kendo-menu-popup-item-hover-text;
-                background: $kendo-menu-popup-item-hover-bg;
-            }
-
-            // Button focus state
-            &:focus,
-            &.k-focus {
-                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
-            }
-
-            // Active state
-            &:active,
-            &.k-active {
-                color: $kendo-menu-popup-item-hover-text;
-                background: $kendo-menu-popup-item-hover-bg;
-            }
-
-            // Selected
-            &.k-selected {
-                color: $kendo-menu-popup-item-active-text;
-                background: $kendo-menu-popup-item-active-bg;
-            }
-
-            // Disabled state
-            &:disabled,
-            &.k-disabled {
-                color: inherit;
-            }
-        }
-
-    }
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-toolbar-scrollable-overlay {
-            &::before {
-                background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
-            }
-
-            &::after {
-                background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
-            }
-
-            &.k-toolbar-outline {
-                &::before {
-                    background: linear-gradient(270deg, $kendo-toolbar-outline-scroll-overlay);
-                }
-
-                &::after {
-                    background: linear-gradient(90deg, $kendo-toolbar-outline-scroll-overlay);
-                }
-            }
-
-            &.k-toolbar-flat {
-                &::before {
-                    background: linear-gradient(270deg, $kendo-toolbar-flat-scroll-overlay);
-                }
-
-                &::after {
-                    background: linear-gradient(90deg, $kendo-toolbar-flat-scroll-overlay);
-                }
-            }
-        }
-    }
-
-}
+@use "@progress/kendo-theme-core/scss/components/toolbar/_theme.scss" as *;
 
 
 @mixin kendo-toolbar--theme() {

package/scss/toolbar/_variables.scss

@@ -177,3 +177,53 @@ $kendo-toolbar-sizes: (
         separator-height: $kendo-toolbar-lg-separator-height
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/toolbar/_variables.scss" with (
+    $kendo-toolbar-padding-x: $kendo-toolbar-padding-x,
+    $kendo-toolbar-sm-padding-x: $kendo-toolbar-sm-padding-x,
+    $kendo-toolbar-md-padding-x: $kendo-toolbar-md-padding-x,
+    $kendo-toolbar-lg-padding-x: $kendo-toolbar-lg-padding-x,
+    $kendo-toolbar-padding-y: $kendo-toolbar-padding-y,
+    $kendo-toolbar-sm-padding-y: $kendo-toolbar-sm-padding-y,
+    $kendo-toolbar-md-padding-y: $kendo-toolbar-md-padding-y,
+    $kendo-toolbar-lg-padding-y: $kendo-toolbar-lg-padding-y,
+    $kendo-toolbar-spacing: $kendo-toolbar-spacing,
+    $kendo-toolbar-sm-spacing: $kendo-toolbar-sm-spacing,
+    $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing,
+    $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing,
+    $kendo-toolbar-separator-height: $kendo-toolbar-separator-height,
+    $kendo-toolbar-sm-separator-height: $kendo-toolbar-sm-separator-height,
+    $kendo-toolbar-md-separator-height: $kendo-toolbar-md-separator-height,
+    $kendo-toolbar-lg-separator-height: $kendo-toolbar-lg-separator-height,
+    $kendo-toolbar-border-width: $kendo-toolbar-border-width,
+    $kendo-toolbar-border-radius: $kendo-toolbar-border-radius,
+    $kendo-toolbar-font-family: $kendo-toolbar-font-family,
+    $kendo-toolbar-font-size: $kendo-toolbar-font-size,
+    $kendo-toolbar-line-height: $kendo-toolbar-line-height,
+    $kendo-toolbar-bg: $kendo-toolbar-bg,
+    $kendo-toolbar-text: $kendo-toolbar-text,
+    $kendo-toolbar-border: $kendo-toolbar-border,
+    $kendo-toolbar-gradient: $kendo-toolbar-gradient,
+    $kendo-toolbar-shadow: $kendo-toolbar-shadow,
+    $kendo-toolbar-scroll-overlay: $kendo-toolbar-scroll-overlay,
+    $kendo-toolbar-outline-text: $kendo-toolbar-outline-text,
+    $kendo-toolbar-outline-border: $kendo-toolbar-outline-border,
+    $kendo-toolbar-outline-gradient: $kendo-toolbar-outline-gradient,
+    $kendo-toolbar-outline-shadow: $kendo-toolbar-outline-shadow,
+    $kendo-toolbar-outline-border-width: $kendo-toolbar-outline-border-width,
+    $kendo-toolbar-outline-scroll-overlay: $kendo-toolbar-outline-scroll-overlay,
+    $kendo-toolbar-flat-text: $kendo-toolbar-flat-text,
+    $kendo-toolbar-flat-border: $kendo-toolbar-flat-border,
+    $kendo-toolbar-flat-gradient: $kendo-toolbar-flat-gradient,
+    $kendo-toolbar-flat-shadow: $kendo-toolbar-flat-shadow,
+    $kendo-toolbar-flat-border-width: $kendo-toolbar-flat-border-width,
+    $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay,
+    $kendo-toolbar-separator-border: $kendo-toolbar-separator-border,
+    $kendo-toolbar-input-width: $kendo-toolbar-input-width,
+    $kendo-toolbar-item-shadow: $kendo-toolbar-item-shadow,
+    $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size,
+    $kendo-toolbar-overflow-container-line-height: $kendo-toolbar-overflow-container-line-height,
+    $kendo-toolbar-overflow-button-padding-y: $kendo-toolbar-overflow-button-padding-y,
+    $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x,
+    $kendo-toolbar-sizes: $kendo-toolbar-sizes
+);

package/scss/tooltip/_functions.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
+@function tooltip-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: map.merge(( $name: (
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}