@progress/kendo-theme-fluent 5.7.0

package/scss/toolbar/_layout.scss

@@ -0,0 +1,214 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
+@mixin kendo-toolbar--layout() {
+
+    // Base
+    .k-toolbar {
+        margin: 0;
+        padding-inline: var( --kendo-toolbar-padding-x, #{$kendo-toolbar-padding-x} );
+        padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} );
+        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-toolbar-font-family, #{$kendo-toolbar-font-family} );
+        font-size: var( --kendo-toolbar-font-size, #{$kendo-toolbar-font-size} );
+        line-height: var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} );
+        list-style: none;
+        display: flex;
+        flex-flow: row wrap;
+        gap: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
+        align-items: center;
+        justify-content: flex-start;
+        position: relative;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        // Remove once we decide to not size empty containers
+        &::before {
+            content: "";
+            height: $kendo-button-inner-calc-size;
+            margin-inline-start: -#{$kendo-toolbar-spacing};
+        }
+
+        &.k-toolbar-resizable {
+            flex-wrap: nowrap;
+        }
+
+        > * {
+            flex-shrink: 0;
+            display: inline-flex;
+            align-content: center;
+            vertical-align: middle;
+
+            > label {
+                margin-inline-end: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
+                align-self: center;
+            }
+        }
+
+        // Input
+        .k-input,
+        .k-picker {
+            width: var( --kendo-toolbar-input-width, #{$kendo-toolbar-input-width} );
+        }
+        .k-color-picker {
+            width: min-content;
+        }
+
+        // Overflow anchor
+        .k-overflow-anchor {
+            @include border-radius( 0 );
+            margin: 0;
+            padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} );
+            width: auto;
+            height: 100%;
+            aspect-ratio: 1;
+            border-width: 0;
+            border-color: inherit;
+            box-sizing: border-box;
+            justify-content: center;
+            position: absolute;
+            inset-block-start: 0;
+            inset-inline-end: 0;
+
+            &::before {
+                display: block;
+            }
+        }
+
+        // Separator
+        .k-separator,
+        .k-toolbar-separator {
+            width: 0;
+            height: calc( var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} ) * 1em );
+            border-width: 0 0 0 1px;
+            border-style: solid;
+            align-self: center;
+        }
+
+        // Spacer
+        .k-toolbar-spacer {
+            height: calc( var( --kendo-toolbar-line-height, #{$kendo-toolbar-line-height} ) * 1em );
+            flex: 1 0 0%;
+        }
+
+        // Template
+        .k-toolbar-template {
+            align-self: center;
+            align-items: center;
+        }
+
+    }
+
+    // Toolbar group
+    .k-toolbar-group {
+        display: flex;
+        flex-direction: inherit;
+        flex-wrap: nowrap;
+        gap: inherit;
+    }
+
+    // Angular specific
+    kendo-toolbar-renderer {
+        display: inline-block;
+        border-color: inherit;
+    }
+
+    // Overflow container
+    .k-overflow-container {
+        font-size: var( --kendo-menu-popup-font-size-md, inherit );
+        line-height: var( --kendo-menu-popup-line-height-md, normal );
+
+        > .k-item {
+            border-color: inherit;
+        }
+
+        .k-separator {
+            margin-block: map-get( $kendo-spacing, 1 );
+        }
+
+        // Group
+        .k-overflow-tool-group {
+            display: block;
+        }
+
+        // Button
+        .k-overflow-button {
+            padding-inline: var( --kendo-menu-popup-item-padding-x-md, 8px );
+            padding-block: var( --kendo-menu-popup-item-padding-y-md, 4px );
+            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: var( --kendo-overflow-button-spacing, .5rem );
+            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( var( --kendo-button-border-width, 0 ) == 0, null, 0);
+            }
+        }
+
+        // Split button
+        .k-split-button {
+            display: flex;
+            flex-direction: column;
+        }
+
+        // Hidden items
+        .k-overflow-hidden {
+            display: none;
+        }
+    }
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding-inline: var( --kendo-toolbar-padding-x, #{$kendo-toolbar-padding-x} ) !important; // sass-lint:disable-line no-important
+        padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} ) !important; // sass-lint:disable-line no-important
+        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            flex-shrink: 1;
+            color: inherit;
+            background: none;
+        }
+    }
+
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+
+}

package/scss/toolbar/_theme.scss

@@ -0,0 +1,66 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-toolbar--theme() {
+
+    // Theme
+    .k-toolbar {
+        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
+        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
+        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
+
+        // Separator
+        .k-separator {
+            border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
+        }
+
+    }
+
+    // Overflow container
+    .k-overflow-container {
+
+        .k-button {
+
+            // Hover state
+            &:hover,
+            &.k-hover {
+                color: var( --kendo-menu-popup-item-hover-text, initial );
+                background: var( --kendo-menu-popup-item-hover-bg, initial );
+            }
+
+            // Button focus state
+            &:focus,
+            &.k-focus {
+                box-shadow: var( --kendo-menu-popup-item-focus-shadow, initial );
+            }
+
+            // Active state
+            &:active,
+            &.k-active {
+                color: var( --kendo-menu-popup-item-hover-text, initial );
+                background: var( --kendo-menu-popup-item-hover-bg, initial );
+            }
+
+            // Selected
+            &.k-selected {
+                color: var( --kendo-menu-popup-item-expanded-text, initial );
+                background: var( --kendo-menu-popup-item-expanded-bg, initial );
+            }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: inherit;
+            }
+        }
+
+    }
+
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
+        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
+        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
+    }
+
+}

package/scss/toolbar/_variables.scss

@@ -0,0 +1,40 @@
+@use "../core/" as *;
+
+/// Horizontal padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Width of the border around the toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// Spacing of the toolbar
+/// @group toolbar
+$kendo-toolbar-spacing: $kendo-toolbar-padding-x !default;
+/// Font family of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
+/// Background color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the toolbar.
+/// @group toolbar
+$kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
+/// Color of the border around the toolbar
+/// @group toolbar
+$kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
+
+/// Color of the separator border of the toolbar
+/// @group toolbar
+$kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
+
+/// The width of the input in the toolbar
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;

package/scss/toolbar/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "toolbar",
+    dependencies: (
+        "button",
+        "popup",
+        "menu",
+        "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( "toolbar" ) {
+        @include kendo-toolbar--layout();
+        @include kendo-toolbar--theme();
+    }
+}

package/scss/tooltip/_layout.scss

@@ -0,0 +1,108 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tooltip--layout() {
+
+    .k-tooltip {
+        @include border-radius( $kendo-tooltip-border-radius );
+        margin: 0;
+        padding-inline: var( --kendo-tooltip-padding-x, #{$kendo-tooltip-padding-x} );
+        padding-block: var( --kendo-tooltip-padding-y, #{$kendo-tooltip-padding-y} );
+        border-width: var( --kendo-tooltip-border-width, #{$kendo-tooltip-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        background-repeat: repeat-x;
+        outline: 0;
+        font-family: var( --kendo-tooltip-font-family, #{$kendo-tooltip-font-family} );
+        font-size: var( --kendo-tooltip-font-size, #{$kendo-tooltip-font-size} );
+        line-height: var( --kendo-tooltip-line-height, #{$kendo-tooltip-line-height} );
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        position: absolute;
+        z-index: 12000;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-tooltip-icon {
+        margin-inline-end: var( --kendo-tooltip-icon-spacing, .5rem );
+        flex-shrink: 0;
+    }
+
+    .k-tooltip-title {
+        margin-block-end: var( --kendo-tooltip-title-margin, #{$kendo-tooltip-title-margin} );
+        font-size: var( --kendo-tooltip-title-font-size, #{$kendo-tooltip-title-font-size} );
+        line-height: var( --kendo-tooltip-title-line-height, #{$kendo-tooltip-title-line-height} );
+    }
+
+    .k-tooltip-content {
+        align-self: stretch;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .k-tooltip-button {
+        margin-inline-start: var( --kendo-tooltip-button-spacing, .5rem );
+        flex-shrink: 0;
+
+        .k-icon {
+            color: inherit;
+            vertical-align: top;
+        }
+    }
+
+
+    // Callout
+    .k-callout {
+        width: calc( #{$kendo-tooltip-callout-size} * 2 );
+        height: calc( #{$kendo-tooltip-callout-size} * 2 );
+        border-width: $kendo-tooltip-callout-size;
+        border-style: solid;
+        border-color: transparent;
+        position: absolute;
+        pointer-events: none;
+        color: inherit;
+    }
+
+    // TODO:
+    // Some implementations rely on margin + transform-rotate to position callout
+    // Remove margin tweaking and uncomment when their implementation is fixed.
+
+    .k-callout-n {
+        margin-inline-start: -$kendo-tooltip-callout-size;
+        border-bottom-color: currentColor;
+        top: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        left: 50%;
+        pointer-events: none;
+    }
+    .k-callout-e {
+        margin-block-start: -$kendo-tooltip-callout-size;
+        border-left-color: currentColor;
+        top: 50%;
+        right: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        pointer-events: none;
+    }
+    .k-callout-s {
+        margin-inline-start: -$kendo-tooltip-callout-size;
+        border-top-color: currentColor;
+        bottom: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        left: 50%;
+        pointer-events: none;
+    }
+    .k-callout-w {
+        margin-block-start: -$kendo-tooltip-callout-size;
+        border-right-color: currentColor;
+        top: 50%;
+        left: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        pointer-events: none;
+    }
+
+}

package/scss/tooltip/_theme.scss

@@ -0,0 +1,42 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-tooltip--theme() {
+
+    .k-tooltip-wrapper .k-tooltip {
+        @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );
+    }
+
+    .k-tooltip {
+        @include box-shadow( var( --kendo-tooltip-shadow, #{$kendo-tooltip-shadow} ) );
+
+        --INTERNAL--kendo-tooltip-text: var( --kendo-tooltip-text, #{$kendo-tooltip-text} );
+        --INTERNAL--kendo-tooltip-bg: var( --kendo-tooltip-bg, #{$kendo-tooltip-bg} );
+        --INTERNAL--kendo-tooltip-border: var( --kendo-tooltip-border, #{$kendo-tooltip-border} );
+
+            color: var( --INTERNAL--kendo-tooltip-text, initial );
+            background-color: var( --INTERNAL--kendo-tooltip-bg, initial );
+            border-color: var( --INTERNAL--kendo-tooltip-border, initial );
+
+        .k-callout {
+            color: var( --INTERNAL--kendo-tooltip-bg, initial );
+        }
+    }
+
+    @each $theme-color, $color-props in $kendo-tooltip-theme-colors {
+            $_bg: map-get( $color-props , bg );
+            $_text: map-get( $color-props , text );
+            $_border: map-get( $color-props , border );
+
+        .k-tooltip-#{$theme-color} {
+            --kendo-tooltip-text: #{$_text};
+            --kendo-tooltip-bg: #{$_bg};
+            --kendo-tooltip-border: #{$_border};
+        }
+    }
+
+    .k-tooltip-button {
+        color: var( --kendo-tooltip-button-text, #{$kendo-tooltip-button-text} );
+    }
+
+}

package/scss/tooltip/_variables.scss

@@ -0,0 +1,98 @@
+@use "sass:map";
+@use "../core/" as *;
+
+/// The radius of the border around the tooltip
+/// @group tooltip
+$kendo-tooltip-border-radius: $kendo-border-radius !default;
+/// The horizontal padding of the tooltip
+/// @group tooltip
+$kendo-tooltip-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the tooltip
+/// @group tooltip
+$kendo-tooltip-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// The width of the border around the tooltip
+/// @group tooltip
+$kendo-tooltip-border-width: 0px !default;
+/// The font family of the tooltip
+/// @group tooltip
+$kendo-tooltip-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the tooltip
+/// @group tooltip
+$kendo-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the tooltip
+/// @group tooltip
+$kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The font size of the tooltip title
+/// @group tooltip
+$kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
+/// The line height of the tooltip title
+/// @group tooltip
+$kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
+/// The margin of the tooltip title
+/// @group tooltip
+$kendo-tooltip-title-margin: map-get( $kendo-spacing, 1 ) !default;
+
+/// The size of the tooltip callout
+/// @group tooltip
+$kendo-tooltip-callout-size: map-get( $kendo-spacing, 2 ) !default;
+
+/// The background of the tooltip
+/// @group tooltip
+$kendo-tooltip-bg: $white !default;
+/// The text color of the tooltip
+/// @group tooltip
+$kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
+/// The border color of the tooltip
+/// @group tooltip
+$kendo-tooltip-border: transparent !default;
+/// The box-shadow of the tooltip
+/// @group tooltip
+$kendo-tooltip-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+
+/// The text color of the tooltip button
+/// @group tooltip
+$kendo-tooltip-button-text: get-theme-color-var( neutral-130, initial ) !default;
+
+/// The primary background color of the tooltip
+/// @group tooltip
+$kendo-tooltip-primary-bg: get-theme-color-var( primary-100 ) !default;
+/// The primary text color of the tooltip
+/// @group tooltip
+$kendo-tooltip-primary-text: $white !default;
+/// The primary border color of the tooltip
+/// @group tooltip
+$kendo-tooltip-primary-border: initial !default;
+
+/// Theme variations for the tooltip.
+$kendo-tooltip-brand-colors: (error, warning, success, info );
+
+// Matrix with tooltip theme colors in the order: bg, color, border
+$_tc-tooltip-matrix: (
+    (normal: (20, 160, 20)),
+);
+
+$_tc-tooltip-primary-matrix: (
+    (normal: (100, $white, 100)),
+);
+
+/// Theme colors map for the tooltip variations.
+$kendo-tooltip-theme-colors: ();
+
+@each $ui-states in $_tc-tooltip-primary-matrix {
+    $kendo-tooltip-theme-colors: map.deep-merge(
+        $kendo-tooltip-theme-colors,
+        generate-theme-variation( primary, primary, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-tooltip-matrix {
+    @each $brand-color in $kendo-tooltip-brand-colors {
+        $kendo-tooltip-theme-colors: map.deep-merge(
+            $kendo-tooltip-theme-colors,
+            generate-theme-variation( $brand-color, $brand-color, $ui-states )
+        );
+    };
+}
+
+

package/scss/tooltip/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "tooltip",
+    dependencies: (
+        "icon",
+        "popup"
+    )
+);
+
+
+// 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( "tooltip" ) {
+        @include kendo-tooltip--layout();
+        @include kendo-tooltip--theme();
+    }
+}