@progress/kendo-theme-fluent 5.7.0

package/scss/editor/_theme.scss

@@ -0,0 +1,101 @@
+@use "../core/" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-editor--theme() {
+
+    .k-editor {
+        @include fill(
+            var( --kendo-editor-text, #{$kendo-editor-text} ),
+            var( --kendo-editor-bg, #{$kendo-editor-bg} ),
+            var( --kendo-editor-border, #{$kendo-editor-border} )
+        );
+    }
+
+    kendo-editor {
+        &.k-readonly {
+            .k-editor-content:focus,
+            .k-editor-content.k-focus {
+                outline-color: var( --kendo-editor-content-outline-color, #{$kendo-editor-content-outline-color} );
+            }
+        }
+    }
+
+    // Inline Editor
+    .k-editor-inline {
+
+        .k-table {
+            &,
+            & td {
+                border-color: var( --kendo-editor-inline-td-border, #{$kendo-editor-inline-td-border} );
+            }
+        }
+
+        .k-element-resize-handle-wrapper {
+            background-color: var( --kendo-editor-resize-handle-bg, #{$kendo-editor-resize-handle-bg} );
+            border-color: var( --kendo-editor-resize-handle-border, #{$kendo-editor-resize-handle-border} );
+        }
+
+        .k-column-resize-handle-wrapper {
+            .k-column-resize-handle {
+                .k-column-resize-marker {
+                    background-color: #00b0ff;
+                }
+            }
+        }
+
+        .k-row-resize-handle-wrapper {
+            .k-row-resize-marker {
+                background-color: #00b0ff;
+            }
+        }
+
+        // Hover & Actve state
+        &:hover,
+        &.k-active {
+            border-color: var( --kendo-editor-inline-hover-border, #{$kendo-editor-inline-hover-border} );
+        }
+    }
+
+    // Resizable images
+    .k-editor-resize-handle {
+       @include fill (
+            $bg: var( --kendo-editor-resize-handle-bg, #{$kendo-editor-resize-handle-bg} ),
+            $border: var( --kendo-editor-resize-handle-border, #{$kendo-editor-resize-handle-border} )
+       );
+    }
+    .ProseMirror-selectednode { // sass-lint:disable-line class-name-format
+        outline-color: var( --kendo-editor-selectednode-outline-color, #{$kendo-editor-selectednode-outline-color} );
+    }
+
+
+    // Insert table
+    .k-ct-popup {
+        .k-selected {
+            @include fill(
+                var( ---kendo-editor-ct-popup-text, #{$kendo-editor-ct-popup-text} ),
+                var( --kendo-editor-ct-popup-bg, #{$kendo-editor-ct-popup-bg} ),
+                var( --kendo-editor-ct-popup-border, #{$kendo-editor-ct-popup-border} )
+            );
+        }
+    }
+
+    // Content
+    .k-editor-content {
+
+        // Selection
+        .k-text-selected,
+        &::selection {
+            @include fill (
+                $color: var( --kendo-editor-selected-text, #{$kendo-editor-selected-text} ),
+                $bg: var( --kendo-editor-selected-bg, #{$kendo-editor-selected-bg} )
+            );
+        }
+
+        .k-text-highlighted {
+            @include fill (
+                $bg: var( --kendo-editor-highlighted-bg, #{$kendo-editor-highlighted-bg} )
+            );
+        }
+    }
+
+}

package/scss/editor/_variables.scss

@@ -0,0 +1,81 @@
+@use "../core/" as *;
+@use "../input/_variables.scss" as *;
+
+/// The width of the border around the editor
+/// @group editor
+$kendo-editor-border-width: 1px !default;
+/// The font family of the editor
+/// @group editor
+$kendo-editor-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the editor
+/// @group editor
+$kendo-editor-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the editor
+/// @group editor
+$kendo-editor-line-height: var( --kendo-line-height, normal ) !default;
+/// The text color of the editor
+/// @group editor
+$kendo-editor-text: var( --kendo-component-text, initial ) !default;
+/// The background color of the editor
+/// @group editor
+$kendo-editor-bg: var( --kendo-component-bg, initial ) !default;
+/// The color of the border around editor
+/// @group editor
+$kendo-editor-border: var( --kendo-component-border, initial ) !default;
+/// The placeholder text color of the editor
+/// @group editor
+$kendo-editor-placeholder-text: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} ) !default;
+/// The placeholder opacity of the editor
+/// @group editor
+$kendo-editor-placeholder-opacity: var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} ) !default;
+/// The outline color of the editor content
+/// @group editor
+$kendo-editor-content-outline-color: var( --kendo-body-text, initial ) !default;
+/// The size of the editor resize handle
+/// @group editor
+$kendo-editor-resize-handle-size: map-get( $kendo-spacing, 2 ) !default;
+/// The border width of the editor resize handle
+/// @group editor
+$kendo-editor-resize-handle-border-width: 1px !default;
+/// The horizontal margin of the editor export tool icon
+/// @group editor
+$kendo-editor-export-tool-icon-margin-x: map-get( $kendo-spacing, 1 ) !default;
+///  The outline width of the editor selected node
+/// @group editor
+$kendo-editor-selectednode-outline-width: map-get( $kendo-spacing, thin ) !default;
+
+// Cell size
+$ct-cell-size: 20px;
+
+/// The selected text color of the editor
+/// @group editor
+$kendo-editor-selected-text: $white !default;
+/// The selected background color of the editor
+/// @group editor
+$kendo-editor-selected-bg: get-theme-color-var( primary-100 ) !default;
+/// The highlighted background color of the editor
+/// @group editor
+$kendo-editor-highlighted-bg: get-theme-color-var( primary-60 ) !default;
+
+/// The border color of the editor resize handle
+/// @group editor
+$kendo-editor-resize-handle-border: $black !default;
+/// The background color of the editor resize handle
+/// @group editor
+$kendo-editor-resize-handle-bg: $white !default;
+
+/// The outline color of the editor selected node
+/// @group editor
+$kendo-editor-selectednode-outline-color: get-theme-color-var( primary-100 ) !default;
+
+/// The border color of the inline editor data cell
+/// @group editor
+$kendo-editor-inline-td-border: var( --kendo-component-border, initial ) !default;
+/// The hover border color of the inline editor
+/// @group editor
+$kendo-editor-inline-hover-border: var( --kendo-component-border, initial ) !default;
+
+// Insert table
+$kendo-editor-ct-popup-text: var( --kendo-selected-text, initial ) !default;
+$kendo-editor-ct-popup-bg: var( --kendo-selected-bg, initial ) !default;
+$kendo-editor-ct-popup-border: var( --kendo-selected-border, initial ) !default;

package/scss/editor/index.scss

@@ -0,0 +1,32 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "editor",
+    dependencies: (
+        "button",
+        "checkbox",
+        "colorpicker",
+        "combobox",
+        "dropdownlist",
+        "toolbar",
+        "upload",
+        "window"
+    )
+);
+
+
+// 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( "editor" ) {
+        @include kendo-editor--layout();
+        @include kendo-editor--theme();
+    }
+}

package/scss/expansion-panel/_layout.scss

@@ -0,0 +1,83 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-expansion-panel--layout() {
+
+    // Base
+    .k-expander {
+        border-width: var( --kendo-expander-border-width, #{$kendo-expander-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        font-size: var( --kendo-expander-font-size, #{$kendo-expander-font-size} );
+        font-family: var( --kendo-expander-font-family, #{$kendo-expander-font-family} );
+        line-height: var( --kendo-expander-line-height, #{$kendo-expander-line-height} );
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        outline: 0;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &.k-focus {
+            border-width: 0;
+        }
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-expander-focus-offset, #{$kendo-expander-focus-offset} );
+            outline-width: var( --kendo-expander-focus-outline-width, #{$kendo-expander-focus-outline-width} );
+            outline-style: var( --kendo-expander-focus-outline-style, #{$kendo-expander-focus-outline-style} );
+            z-index: 1;
+            pointer-events: none;
+        }
+    }
+
+    // Header
+    .k-expander-header {
+        padding-inline: var( --kendo-expander-header-padding-x, #{$kendo-expander-header-padding-x} );
+        padding-block: var( --kendo-expander-header-padding-y, #{$kendo-expander-header-padding-y} );
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    // Expander spacer
+    .k-expander-spacer {
+        flex: 1 1 auto;
+    }
+
+    // Title
+    .k-expander-title {
+        font-weight: 400;
+    }
+
+    // Expand / collapse icon
+    .k-expander-indicator {
+        margin-inline-start: var( --kendo-expander-indicator-margin-x, #{$kendo-expander-indicator-margin-x} );
+    }
+
+    // Expander content
+    .k-expander-content {
+        padding-inline: var( --kendo-expander-content-padding-x, #{$kendo-expander-content-padding-x} );
+        padding-block: var( --kendo-expander-content-padding-y, #{$kendo-expander-content-padding-y} );
+    }
+
+    // Multiple expanders
+    .k-expander + .k-expander.k-expanded,
+    .k-expander.k-expanded + .k-expander {
+        margin-top: var( --kendo-expander-margin-y, #{$kendo-expander-margin-y} );
+    }
+
+    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
+        border-top-width: 0;
+    }
+}

package/scss/expansion-panel/_theme.scss

@@ -0,0 +1,69 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-expansion-panel--theme() {
+
+    .k-expander {
+        @include fill(
+            var( --kendo-expander-text, #{$kendo-expander-text} ),
+            var( --kendo-expander-bg, #{$kendo-expander-bg} ),
+            var( --kendo-expander-border, #{$kendo-expander-border} ),
+        );
+
+        &.k-expanded {
+            background-color: var( --kendo-expander-expanded-bg, #{$kendo-expander-expanded-bg} );
+        }
+
+        &.k-focus{
+            background-color: var( --kendo-expander-focus-bg, #{$kendo-expander-focus-bg} );
+
+            &::after {
+                outline-color: var( --kendo-expander-focus-outline, #{$kendo-expander-focus-outline} );
+            }
+        }
+
+        &:disabled,
+        &.k-disabled {
+            @include fill(
+                $color: var( --kendo-expander-disabled-text, #{$kendo-expander-disabled-text} )
+            );
+
+            .k-expander-header,
+            .k-expander-title,
+            .k-expander-sub-title,
+            .k-expander-indicator {
+                @include fill(
+                    $color: var( --kendo-expander-disabled-text, #{$kendo-expander-disabled-text} ),
+                    $bg: var( --kendo-expander-disabled-bg, #{$kendo-expander-disabled-bg} )
+                );
+            }
+        }
+    }
+
+    .k-expander-header {
+        @include fill(
+            var( --kendo-expander-header-text, #{$kendo-expander-header-text} ),
+            var( --kendo-expander-header-bg, #{$kendo-expander-header-bg} )
+        );
+        outline: none;
+
+        &:hover,
+        &.k-hover {
+            background-color: var( --kendo-expander-header-hover-bg, #{$kendo-expander-header-hover-bg} );
+        }
+    }
+
+    .k-expander-title {
+        color: var( --kendo-expander-title-text, #{$kendo-expander-title-text} );
+    }
+
+    .k-expander-sub-title {
+        color: var( --kendo-expander-header-sub-title-text, #{$kendo-expander-header-sub-title-text} );
+    }
+
+    .k-expander-indicator {
+        color: var( --kendo-expander-indicator-text, #{$kendo-expander-indicator-text} );
+    }
+
+}

package/scss/expansion-panel/_variables.scss

@@ -0,0 +1,99 @@
+@use "../core/_variables" as *;
+@use "../core/color-system" as *;
+
+/// Vertical margin of the expander.
+/// @group expander
+$kendo-expander-margin-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the expander.
+/// @group expander
+$kendo-expander-border-width: 1px !default;
+/// Background color of the expander.
+/// @group expander
+$kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the expander.
+/// @group expander
+$kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the expander.
+/// @group expander
+$kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Text color of the expander.
+/// @group expander
+$kendo-expander-text: var( --kendo-component-text, initial ) !default;
+/// Background color of the expander.
+/// @group expander
+$kendo-expander-bg: get-theme-color-var( neutral-10 ) !default;
+/// Border color of the expander.
+/// @group expander
+$kendo-expander-border: var( --kendo-component-border, initial ) !default;
+/// Box shadow of the expander.
+/// @group expander
+$kendo-expander-shadow: inset 0 0 0 2px get-theme-color-var( neutral-30 );
+
+/// Background color of the expanded expander.
+/// @group expander
+$kendo-expander-expanded-bg: var( --kendo-component-bg, initial ) !default;
+
+/// Background color of the disabled expander.
+/// @group expander
+$kendo-expander-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+/// Text color of the disabled expander.
+/// @group expander
+$kendo-expander-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// Offset of the focused expander.
+/// @group expander
+$kendo-expander-focus-offset: map-get( $kendo-spacing, hair ) !default;
+/// Outline width of the focused expander.
+/// @group expander
+$kendo-expander-focus-outline-width: map-get( $kendo-spacing, hair ) !default;
+/// Outline style of the focused expander.
+/// @group expander
+$kendo-expander-focus-outline-style: solid !default;
+/// The focus outline color of the expander.
+/// @group expander
+$kendo-expander-focus-outline: get-theme-color-var( neutral-130 ) !default;
+
+/// Background color of the focused expander.
+/// @group expander
+$kendo-expander-focus-bg: var( --kendo-component-bg, initial ) !default;
+/// Box shadow color of the focused expander.
+/// @group expander
+$kendo-expander-focus-shadow: inset 0px 0px 0px 2px get-theme-color-var( neutral-130 ) !default;
+
+/// Horizontal padding of the expander header.
+/// @group expander
+$kendo-expander-header-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// Vertical padding of the expander header.
+/// @group expander
+$kendo-expander-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Text color of the expander header.
+/// @group expander
+$kendo-expander-header-text: get-theme-color-var( primary-100 ) !default;
+/// Background color of the expander header.
+/// @group expander
+$kendo-expander-header-bg: inherit !default;
+/// Background color of the hovered expander header.
+/// @group expander
+$kendo-expander-header-hover-bg: get-theme-color-var( neutral-20 ) !default;
+
+/// Text color of the expander title.
+/// @group expander
+$kendo-expander-title-text: get-theme-color-var( primary-100 ) !default;
+
+/// Text color of the expander sub-title.
+/// @group expander
+$kendo-expander-header-sub-title-text: var( --kendo-subtle-text, initial ) !default;
+
+/// Horizontal margin of the expander indicator.
+/// @group expander
+$kendo-expander-indicator-margin-x: map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) !default;
+/// Text color of the expander indicator.
+/// @group expander
+$kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} );
+
+/// Horizontal padding of the expander content.
+/// @group expander
+$kendo-expander-content-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// Vertical padding of the expander content.
+/// @group expander
+$kendo-expander-content-padding-y: map-get( $kendo-spacing, 4 ) !default;

package/scss/expansion-panel/index.scss

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

package/scss/fab/_layout.scss

@@ -0,0 +1,173 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-fab--layout() {
+
+    .k-fab {
+        padding-inline: var( --INTERNAL--kendo-fab-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-fab-padding-y, 0 );
+        border-width: 0;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        position: relative;
+        color: inherit;
+        background-color: transparent;
+        font-family: var( --kendo-fab-font-family, #{$kendo-fab-font-family} );
+        font-size:var( --kendo-fab-font-size, #{$kendo-fab-font-size} );
+        line-height: var( --kendo-fab-line-height, #{$kendo-fab-line-height} );
+        text-align: center;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        outline: none;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        &:focus::after,
+        &.k-focus::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-fab-focus-offset, #{$kendo-fab-focus-offset} );
+            outline-width: var( --kendo-fab-focus-outline-width, #{$kendo-fab-focus-outline-width} );
+            outline-style: var( --kendo-fab-focus-outline-style, #{$kendo-fab-focus-outline-style} );
+            z-index: 1;
+        }
+
+        // Fix for focused FAB with full roundness
+        &.k-rounded-full {
+            &:focus::after,
+            &.k-focus::after {
+               border-radius: inherit;
+            }
+        }
+    }
+
+    // FAB Icon
+    .k-fab-icon {
+        width: var( --kendo-fab-icon-width, #{$kendo-fab-icon-width} );
+        height: var( --kendo-fab-icon-height, #{$kendo-fab-icon-height} );
+
+        &:not(:only-child) {
+            margin-inline-end: var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} );
+            margin-inline-start: calc( var( --kendo-fab-icon-spacing, #{$kendo-fab-icon-spacing} ) * -1 );
+        }
+    }
+
+
+    // Sizes
+    @each $size, $size-props in $kendo-fab-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+
+        .k-fab-#{$size} {
+            --INTERNAL--kendo-fab-padding-x: var( --kendo-fab-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-fab-padding-y: var( --kendo-fab-#{$size}-padding-y, #{$_padding-y} );
+        }
+    }
+
+    // Shapes
+    .k-fab-square {
+        aspect-ratio: 1;
+    }
+
+
+    // Items
+    .k-fab-items {
+        margin: 0;
+        padding-inline: var( --kendo-fab-items-padding-x, #{$kendo-fab-items-padding-x} );
+        padding-block: var( --kendo-fab-items-padding-y, #{$kendo-fab-items-padding-y} );
+        display: flex;
+    }
+
+    .k-fab-items-bottom {
+        flex-direction: column;
+    }
+    .k-fab-items-bottom .k-fab-item:last-child {
+        margin-bottom: 0;
+    }
+
+    .k-fab-items-top {
+        flex-direction: column-reverse;
+    }
+    .k-fab-items-top .k-fab-item:first-child {
+        margin-bottom: 0;
+    }
+
+    .k-fab-item {
+        list-style-type: none;
+        margin-block-end: var( --kendo-fab-item-offset-y, #{$kendo-fab-item-offset-y} );
+        outline: none;
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        cursor: pointer;
+
+        &:focus .k-fab-item-text::after,
+        &:focus .k-fab-item-icon::after,
+        &.k-focus .k-fab-item-text::after,
+        &.k-focus .k-fab-item-icon::after {
+            content: "";
+            position: absolute;
+            border: medium none;
+            inset: var( --kendo-fab-item-focus-offset, #{$kendo-fab-item-focus-offset} );
+            outline-width: var( --kendo-fab-item-focus-outline-width, #{$kendo-fab-item-focus-outline-width} );
+            outline-style: var( --kendo-fab-item-focus-outline-style, #{$kendo-fab-item-focus-outline-style} );
+            z-index: 1;
+        }
+
+        &.k-text-right {
+            flex-direction: row;
+
+            .k-fab-item-text {
+                margin-inline-end: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+            }
+        }
+
+        &.k-text-left {
+            flex-direction: row-reverse;
+
+            .k-fab-item-text {
+                margin-inline-start: var( --kendo-fab-item-text-offset-x, #{$kendo-fab-item-text-offset-x} );
+            }
+        }
+    }
+
+    .k-fab-item-text {
+        padding-inline: var( --kendo-fab-item-text-padding-x, #{$kendo-fab-item-text-padding-x} );
+        padding-block: var( --kendo-fab-item-text-padding-y, #{$kendo-fab-item-text-padding-y} );
+        border-width: var( --kendo-fab-item-text-border-width, #{$kendo-fab-item-text-border-width} );
+        border-style: var( --kendo-fab-item-text-border-style, #{$kendo-fab-item-text-border-style} );
+        border-radius: var( --kendo-fab-item-text-border-radius, #{$kendo-fab-item-text-border-radius} );
+        position: relative;
+        font-size: var( --kendo-fab-item-text-font-size, #{$kendo-fab-item-text-font-size} );
+        line-height: var( --kendo-fab-item-text-line-height, #{$kendo-fab-item-text-line-height} );
+    }
+
+    .k-fab-item-icon {
+        width: var( --kendo-fab-item-icon-width, #{$kendo-fab-item-icon-width} );
+        height: var( --kendo-fab-item-icon-height, #{$kendo-fab-item-icon-height} );
+        padding-inline: var( --kendo-fab-item-icon-padding-x, #{$kendo-fab-item-icon-padding-x} );
+        padding-block: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-y} );
+        border-width: var( --kendo-fab-item-icon-border-width, #{$kendo-fab-item-icon-border-width} );
+        border-style: var( --kendo-fab-item-icon-border-style, #{$kendo-fab-item-icon-border-style} );
+        border-radius: var( --kendo-fab-item-border-radius, #{$kendo-fab-item-icon-border-radius} );
+        box-sizing: content-box;
+        outline: none;
+
+        &::after {
+            border-radius: inherit;
+        }
+    }
+
+}